feat(ui): implement chat completion views (#2201)

# What does this PR do?
 Implements table and detail views for chat completions

<img width="1548" alt="image"
src="https://github.com/user-attachments/assets/01061b7f-0d47-4b3b-b5ac-2df8f9035ef6"
/>
<img width="1549" alt="image"
src="https://github.com/user-attachments/assets/738d8612-8258-4c2c-858b-bee39030649f"
/>


## Test Plan
npm run test

llama_stack/ui/app/layout.tsx

@@ -20,7 +20,7 @@ export const metadata: Metadata = {
 };
 
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/app-sidebar";
+import { AppSidebar } from "@/components/layout/app-sidebar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (

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

@@ -0,0 +1,62 @@
+"use client";
+
+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";
+
+export default function ChatCompletionDetailPage() {
+  const params = useParams();
+  const id = params.id as string;
+
+  const [completionDetail, setCompletionDetail] =
+    useState<ChatCompletion | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!id) {
+      setError(new Error("Completion ID is missing."));
+      setIsLoading(false);
+      return;
+    }
+
+    const client = new LlamaStackClient({
+      baseURL: process.env.NEXT_PUBLIC_LLAMA_STACK_BASE_URL,
+    });
+
+    const fetchCompletionDetail = async () => {
+      setIsLoading(true);
+      setError(null);
+      setCompletionDetail(null);
+      try {
+        const response = await client.chat.completions.retrieve(id);
+        setCompletionDetail(response as ChatCompletion);
+      } catch (err) {
+        console.error(
+          `Error fetching chat completion detail for ID ${id}:`,
+          err,
+        );
+        setError(
+          err instanceof Error
+            ? err
+            : new Error("Failed to fetch completion detail"),
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCompletionDetail();
+  }, [id]);
+
+  return (
+    <ChatCompletionDetailView
+      completion={completionDetail}
+      isLoading={isLoading}
+      error={error}
+      id={id}
+    />
+  );
+}

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

@@ -0,0 +1,45 @@
+"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";
+
+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>
+  );
+}

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

@@ -1,7 +1,54 @@
-export default function ChatCompletions() {
+"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";
+
+export default function ChatCompletionsPage() {
+  const [completions, setCompletions] = useState<ChatCompletion[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  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);
+      try {
+        const response = await client.chat.completions.list();
+        const data = Array.isArray(response)
+          ? response
+          : (response as any).data;
+
+        if (Array.isArray(data)) {
+          setCompletions(data);
+        } else {
+          console.error("Unexpected response structure:", response);
+          setError(new Error("Unexpected response structure"));
+          setCompletions([]);
+        }
+      } catch (err) {
+        console.error("Error fetching chat completions:", err);
+        setError(
+          err instanceof Error ? err : new Error("Failed to fetch completions"),
+        );
+        setCompletions([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCompletions();
+  }, []);
+
   return (
-    <div>
-      <h1>Under Construction</h1>
-    </div>
+    <ChatCompletionsTable
+      completions={completions}
+      isLoading={isLoading}
+      error={error}
+    />
   );
 }