chat completion, testing

# What does this PR do?


## Test Plan
# What does this PR do?


## Test Plan

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