feat(ui): add views for Responses (#2293)

# What does this PR do?
* Add responses list and detail views
* Refactored components to be shared as much as possible between chat
completions and responses

## Test Plan
<img width="2014" alt="image"
src="https://github.com/user-attachments/assets/6dee12ea-8876-4351-a6eb-2338058466ef"
/>
<img width="2021" alt="image"
src="https://github.com/user-attachments/assets/6c7c71b8-25b7-4199-9c57-6960be5580c8"
/>

added tests

llama_stack/ui/app/logs/chat-completions/[id]/page.tsx

@@ -2,9 +2,9 @@
 
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
-import LlamaStackClient from "llama-stack-client";
 import { ChatCompletion } from "@/lib/types";
 import { ChatCompletionDetailView } from "@/components/chat-completions/chat-completion-detail";
+import { client } from "@/lib/client";
 
 export default function ChatCompletionDetailPage() {
   const params = useParams();
@@ -22,10 +22,6 @@ export default function ChatCompletionDetailPage() {
       return;
     }
 
-    const client = new LlamaStackClient({
-      baseURL: process.env.NEXT_PUBLIC_LLAMA_STACK_BASE_URL,
-    });
-
     const fetchCompletionDetail = async () => {
       setIsLoading(true);
       setError(null);

llama_stack/ui/app/logs/chat-completions/layout.tsx

@@ -1,45 +1,19 @@
 "use client";
 
 import React from "react";
-import { usePathname, useParams } from "next/navigation";
-import {
-  PageBreadcrumb,
-  BreadcrumbSegment,
-} from "@/components/layout/page-breadcrumb";
-import { truncateText } from "@/lib/truncate-text";
+import LogsLayout from "@/components/layout/logs-layout";
 
 export default function ChatCompletionsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const pathname = usePathname();
-  const params = useParams();
-
-  let segments: BreadcrumbSegment[] = [];
-
-  // Default for /logs/chat-completions
-  if (pathname === "/logs/chat-completions") {
-    segments = [{ label: "Chat Completions" }];
-  }
-
-  // For /logs/chat-completions/[id]
-  const idParam = params?.id;
-  if (idParam && typeof idParam === "string") {
-    segments = [
-      { label: "Chat Completions", href: "/logs/chat-completions" },
-      { label: `Details (${truncateText(idParam, 20)})` },
-    ];
-  }
-
   return (
-    <div className="container mx-auto p-4">
-      <>
-        {segments.length > 0 && (
-          <PageBreadcrumb segments={segments} className="mb-4" />
-        )}
-        {children}
-      </>
-    </div>
+    <LogsLayout
+      sectionLabel="Chat Completions"
+      basePath="/logs/chat-completions"
+    >
+      {children}
+    </LogsLayout>
   );
 }

llama_stack/ui/app/logs/chat-completions/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import LlamaStackClient from "llama-stack-client";
 import { ChatCompletion } from "@/lib/types";
-import { ChatCompletionsTable } from "@/components/chat-completions/chat-completion-table";
+import { ChatCompletionsTable } from "@/components/chat-completions/chat-completions-table";
+import { client } from "@/lib/client";
 
 export default function ChatCompletionsPage() {
   const [completions, setCompletions] = useState<ChatCompletion[]>([]);
@@ -11,9 +11,6 @@ export default function ChatCompletionsPage() {
   const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
-    const client = new LlamaStackClient({
-      baseURL: process.env.NEXT_PUBLIC_LLAMA_STACK_BASE_URL,
-    });
     const fetchCompletions = async () => {
       setIsLoading(true);
       setError(null);
@@ -21,7 +18,7 @@ export default function ChatCompletionsPage() {
         const response = await client.chat.completions.list();
         const data = Array.isArray(response)
           ? response
-          : (response as any).data;
+          : (response as { data: ChatCompletion[] }).data;
 
         if (Array.isArray(data)) {
           setCompletions(data);
@@ -46,7 +43,7 @@ export default function ChatCompletionsPage() {
 
   return (
     <ChatCompletionsTable
-      completions={completions}
+      data={completions}
       isLoading={isLoading}
       error={error}
     />