removed extra breadcrumb and made link in VS page more explicit

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

llama_stack/ui/app/logs/vector-stores/layout.tsx

@@ -1,16 +1,31 @@
 "use client";
 
-import React from "react";
+import { useParams, usePathname } from "next/navigation";
-import LogsLayout from "@/components/layout/logs-layout";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
 
-export default function VectorStoresLayout({
+export default function VectorStoreDetailLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const params = useParams();
+  const pathname = usePathname();
+  const vectorStoreId = params.id as string;
+
+  const breadcrumbSegments: BreadcrumbSegment[] = [
+    { label: "Vector Stores", href: "/logs/vector-stores" },
+    { label: `Details (${vectorStoreId})` },
+  ];
+
+  const isBaseDetailPage = pathname === `/logs/vector-stores/${vectorStoreId}`;
+
   return (
-    <LogsLayout sectionLabel="Vector Stores" basePath="/logs/vector-stores">
+    <div className="space-y-4">
+      {isBaseDetailPage && <PageBreadcrumb segments={breadcrumbSegments} />}
       {children}
-    </LogsLayout>
+    </div>
   );
 }

llama_stack/ui/app/logs/vector-stores/page.tsx

@@ -8,6 +8,7 @@ import type {
 } from "llama-stack-client/resources/vector-stores/vector-stores";
 import { useRouter } from "next/navigation";
 import { usePagination } from "@/hooks/use-pagination";
+import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
@@ -49,12 +50,13 @@ export default function VectorStoresPage() {
     }
   }, [status, hasMore, loadMore]);
 
+  const renderContent = () => {
     if (status === "loading") {
       return (
           <div className="space-y-2">
-        <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full"/>
-        <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full"/>
-        <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full"/>
           </div>
       );
     }
@@ -98,7 +100,17 @@ export default function VectorStoresPage() {
                         onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
                         className="cursor-pointer hover:bg-muted/50"
                     >
-                <TableCell>{store.id}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="link"
+                        className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                        onClick={() =>
+                          router.push(`/logs/vector-stores/${store.id}`)
+                        }
+                      >
+                        {store.id}
+                      </Button>
+                    </TableCell>
                       <TableCell>{store.name}</TableCell>
                       <TableCell>
                         {new Date(store.created_at * 1000).toLocaleString()}
@@ -118,4 +130,12 @@ export default function VectorStoresPage() {
           </Table>
         </div>
     );
+  };
+
+  return (
+      <div className="space-y-4">
+        <h1 className="text-2xl font-semibold">Vector Stores</h1>
+        {renderContent()}
+      </div>
+  );
 }