From 466e2345913ad76a3789943c78788a309017a88f Mon Sep 17 00:00:00 2001
From: Francisco Javier Arceo <farceo@redhat.com>
Date: Sat, 12 Jul 2025 00:19:26 -0400
Subject: [PATCH] feat: Adding UI support for Vector Stores

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
---
 .../ui/app/logs/vector-stores/layout.tsx      |  16 +++
 .../ui/app/logs/vector-stores/page.tsx        | 105 ++++++++++++++++++
 .../ui/components/layout/app-sidebar.tsx      |   7 +-
 llama_stack/ui/package-lock.json              |  12 +-
 4 files changed, 133 insertions(+), 7 deletions(-)
 create mode 100644 llama_stack/ui/app/logs/vector-stores/layout.tsx
 create mode 100644 llama_stack/ui/app/logs/vector-stores/page.tsx

diff --git a/llama_stack/ui/app/logs/vector-stores/layout.tsx b/llama_stack/ui/app/logs/vector-stores/layout.tsx
new file mode 100644
index 000000000..9245f5486
--- /dev/null
+++ b/llama_stack/ui/app/logs/vector-stores/layout.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import LogsLayout from "@/components/layout/logs-layout";
+
+export default function VectorStoresLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LogsLayout sectionLabel="Vector Stores" basePath="/logs/vector-stores">
+      {children}
+    </LogsLayout>
+  );
+}
diff --git a/llama_stack/ui/app/logs/vector-stores/page.tsx b/llama_stack/ui/app/logs/vector-stores/page.tsx
new file mode 100644
index 000000000..8b8ea3d3a
--- /dev/null
+++ b/llama_stack/ui/app/logs/vector-stores/page.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import type {
+  ListVectorStoresResponse,
+  VectorStore,
+} from "llama-stack-client/resources/vector-stores/vector-stores";
+import { useRouter } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function VectorStoresPage() {
+  const client = useAuthClient();
+  const router = useRouter();
+  const [stores, setStores] = useState<VectorStore[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchStores() {
+      try {
+        const response = await client.vectorStores.list();
+        const res = response as ListVectorStoresResponse;
+        setStores(res.data);
+      } catch (err) {
+        setError(
+          err instanceof Error
+            ? err.message
+            : "Failed to load vector stores.",
+        );
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchStores();
+  }, [client]);
+
+  if (loading) {
+    return (
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="text-destructive">Error: {error}</div>;
+  }
+
+  return (
+    <Table>
+      <TableCaption>A list of your vector stores.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>ID</TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Created</TableHead>
+          <TableHead>Completed</TableHead>
+          <TableHead>Cancelled</TableHead>
+          <TableHead>Failed</TableHead>
+          <TableHead>In Progress</TableHead>
+          <TableHead>Total</TableHead>
+          <TableHead>Usage Bytes</TableHead>
+          <TableHead>Provider ID</TableHead>
+          <TableHead>Provider Vector DB ID</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {stores.map((store) => {
+          const fileCounts = store.file_counts;
+          const metadata = store.metadata || {};
+          const providerId = metadata.provider_id ?? "";
+          const providerDbId = metadata.provider_vector_db_id ?? "";
+
+          return (
+            <TableRow key={store.id} className="hover:bg-muted/50">
+              <TableCell>{store.id}</TableCell>
+              <TableCell>{store.name}</TableCell>
+              <TableCell>{new Date(store.created_at * 1000).toLocaleString()}</TableCell>
+              <TableCell>{fileCounts.completed}</TableCell>
+              <TableCell>{fileCounts.cancelled}</TableCell>
+              <TableCell>{fileCounts.failed}</TableCell>
+              <TableCell>{fileCounts.in_progress}</TableCell>
+              <TableCell>{fileCounts.total}</TableCell>
+              <TableCell>{store.usage_bytes}</TableCell>
+              <TableCell>{providerId}</TableCell>
+              <TableCell>{providerDbId}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/llama_stack/ui/components/layout/app-sidebar.tsx b/llama_stack/ui/components/layout/app-sidebar.tsx
index 1c53d6cc5..a0468a607 100644
--- a/llama_stack/ui/components/layout/app-sidebar.tsx
+++ b/llama_stack/ui/components/layout/app-sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MessageSquareText, MessagesSquare, MoveUpRight } from "lucide-react";
+import { MessageSquareText, MessagesSquare, MoveUpRight, Database } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -28,6 +28,11 @@ const logItems = [
     url: "/logs/responses",
     icon: MessagesSquare,
   },
+  {
+    title: "Vector Stores",
+    url: "/logs/vector-stores",
+    icon: Database,
+  },
   {
     title: "Documentation",
     url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
diff --git a/llama_stack/ui/package-lock.json b/llama_stack/ui/package-lock.json
index 8fd5fb56c..7bbfaa966 100644
--- a/llama_stack/ui/package-lock.json
+++ b/llama_stack/ui/package-lock.json
@@ -3962,9 +3962,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4887,9 +4887,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {