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/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>
+  );
+}