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/components/layout/app-sidebar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { MessageSquareText, MessagesSquare, MoveUpRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+} from "@/components/ui/sidebar";
+
+const logItems = [
+  {
+    title: "Chat Completions",
+    url: "/logs/chat-completions",
+    icon: MessageSquareText,
+  },
+  {
+    title: "Responses",
+    url: "/logs/responses",
+    icon: MessagesSquare,
+  },
+  {
+    title: "Documentation",
+    url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
+    icon: MoveUpRight,
+  },
+];
+
+export function AppSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <Link href="/">Llama Stack</Link>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Logs</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {logItems.map((item) => {
+                const isActive = pathname.startsWith(item.url);
+                return (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      asChild
+                      className={cn(
+                        "justify-start",
+                        isActive &&
+                          "bg-gray-200 hover:bg-gray-200 text-primary hover:text-primary",
+                      )}
+                    >
+                      <Link href={item.url}>
+                        <item.icon
+                          className={cn(
+                            isActive && "text-primary",
+                            "mr-2 h-4 w-4",
+                          )}
+                        />
+                        <span>{item.title}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

llama_stack/ui/components/layout/page-breadcrumb.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export interface BreadcrumbSegment {
+  label: string;
+  href?: string;
+}
+
+interface PageBreadcrumbProps {
+  segments: BreadcrumbSegment[];
+  className?: string;
+}
+
+export function PageBreadcrumb({ segments, className }: PageBreadcrumbProps) {
+  if (!segments || segments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {segments.map((segment, index) => (
+          <React.Fragment key={segment.label + index}>
+            <BreadcrumbItem>
+              {segment.href ? (
+                <BreadcrumbLink asChild>
+                  <Link href={segment.href}>{segment.label}</Link>
+                </BreadcrumbLink>
+              ) : (
+                <BreadcrumbPage>{segment.label}</BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+            {index < segments.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}