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