No vector stores found.
;
}
- return (
-
-
-
-
- ID
- Name
- Created
- Completed
- Cancelled
- Failed
- In Progress
- Total
- Usage Bytes
- Provider ID
- Provider Vector DB ID
-
-
-
- {stores.map(store => {
- const fileCounts = store.file_counts;
- const metadata = store.metadata || {};
- const providerId = metadata.provider_id ?? "";
- const providerDbId = metadata.provider_vector_db_id ?? "";
+ // Filter stores based on search term
+ const filteredStores = stores.filter(store => {
+ if (!searchTerm) return true;
- return (
- router.push(`/logs/vector-stores/${store.id}`)}
- className="cursor-pointer hover:bg-muted/50"
- >
-
-
-
- {store.name}
-
- {new Date(store.created_at * 1000).toLocaleString()}
-
- {fileCounts.completed}
- {fileCounts.cancelled}
- {fileCounts.failed}
- {fileCounts.in_progress}
- {fileCounts.total}
- {store.usage_bytes}
- {providerId}
- {providerDbId}
-
- );
- })}
-
-
+ const searchLower = searchTerm.toLowerCase();
+ return (
+ store.id.toLowerCase().includes(searchLower) ||
+ (store.name && store.name.toLowerCase().includes(searchLower)) ||
+ (store.metadata?.provider_id &&
+ String(store.metadata.provider_id)
+ .toLowerCase()
+ .includes(searchLower)) ||
+ (store.metadata?.provider_vector_db_id &&
+ String(store.metadata.provider_vector_db_id)
+ .toLowerCase()
+ .includes(searchLower))
+ );
+ });
+
+ return (
+
+ {/* Search Bar */}
+
+
+ setSearchTerm(e.target.value)}
+ className="pl-10"
+ />
+
+
+
+
+
+
+ ID
+ Name
+ Created
+ Completed
+ Cancelled
+ Failed
+ In Progress
+ Total
+ Usage Bytes
+ Provider ID
+ Provider Vector DB ID
+ Actions
+
+
+
+ {filteredStores.map(store => {
+ const fileCounts = store.file_counts;
+ const metadata = store.metadata || {};
+ const providerId = metadata.provider_id ?? "";
+ const providerDbId = metadata.provider_vector_db_id ?? "";
+
+ return (
+
+ router.push(`/logs/vector-stores/${store.id}`)
+ }
+ className="cursor-pointer hover:bg-muted/50"
+ >
+
+
+
+ {store.name}
+
+ {new Date(store.created_at * 1000).toLocaleString()}
+
+ {fileCounts.completed}
+ {fileCounts.cancelled}
+ {fileCounts.failed}
+ {fileCounts.in_progress}
+ {fileCounts.total}
+ {store.usage_bytes}
+ {providerId}
+ {providerDbId}
+
+
+
+
+
+
+
+ );
+ })}
+
+
+
);
};
return (
-
Vector Stores
+
+
Vector Stores
+
+
{renderContent()}
+
+ {/* Create Vector Store Modal */}
+ {showVectorStoreModal && (
+
+
+
+
+ {editingStore ? "Edit Vector Store" : "Create New Vector Store"}
+
+
+
+
+
+
+
+
+ )}
);
}
diff --git a/src/llama_stack_ui/bin/cli.js b/src/llama_stack_ui/bin/cli.js
new file mode 100755
index 000000000..6069d2f22
--- /dev/null
+++ b/src/llama_stack_ui/bin/cli.js
@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+const port = process.env.LLAMA_STACK_UI_PORT || 8322;
+const uiDir = path.resolve(__dirname, '..');
+const serverPath = path.join(uiDir, '.next', 'standalone', 'ui', 'src', 'llama_stack_ui', 'server.js');
+const serverDir = path.dirname(serverPath);
+
+console.log(`Starting Llama Stack UI on http://localhost:${port}`);
+
+const child = spawn(process.execPath, [serverPath], {
+ cwd: serverDir,
+ stdio: 'inherit',
+ env: {
+ ...process.env,
+ PORT: port,
+ },
+});
+
+process.on('SIGINT', () => {
+ child.kill('SIGINT');
+ process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+ child.kill('SIGTERM');
+ process.exit(0);
+});
+
+child.on('exit', (code) => {
+ process.exit(code);
+});
diff --git a/src/llama_stack_ui/components/prompts/prompt-editor.test.tsx b/src/llama_stack_ui/components/prompts/prompt-editor.test.tsx
index 458a5f942..70e0e4e66 100644
--- a/src/llama_stack_ui/components/prompts/prompt-editor.test.tsx
+++ b/src/llama_stack_ui/components/prompts/prompt-editor.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { PromptEditor } from "./prompt-editor";
-import type { Prompt, PromptFormData } from "./types";
+import type { Prompt } from "./types";
describe("PromptEditor", () => {
const mockOnSave = jest.fn();
diff --git a/src/llama_stack_ui/components/vector-stores/vector-store-detail.test.tsx b/src/llama_stack_ui/components/vector-stores/vector-store-detail.test.tsx
index 08f90ac0d..78bec8147 100644
--- a/src/llama_stack_ui/components/vector-stores/vector-store-detail.test.tsx
+++ b/src/llama_stack_ui/components/vector-stores/vector-store-detail.test.tsx
@@ -12,6 +12,20 @@ jest.mock("next/navigation", () => ({
}),
}));
+// Mock NextAuth
+jest.mock("next-auth/react", () => ({
+ useSession: () => ({
+ data: {
+ accessToken: "mock-access-token",
+ user: {
+ id: "mock-user-id",
+ email: "test@example.com",
+ },
+ },
+ status: "authenticated",
+ }),
+}));
+
describe("VectorStoreDetailView", () => {
const defaultProps = {
store: null,
diff --git a/src/llama_stack_ui/components/vector-stores/vector-store-detail.tsx b/src/llama_stack_ui/components/vector-stores/vector-store-detail.tsx
index d3d0fa249..f5b6281e7 100644
--- a/src/llama_stack_ui/components/vector-stores/vector-store-detail.tsx
+++ b/src/llama_stack_ui/components/vector-stores/vector-store-detail.tsx
@@ -1,16 +1,18 @@
"use client";
import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import { Edit2, Trash2, X } from "lucide-react";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
- DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
@@ -23,6 +25,7 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
+import { VectorStoreEditor, VectorStoreFormData } from "./vector-store-editor";
interface VectorStoreDetailViewProps {
store: VectorStore | null;
@@ -43,21 +46,122 @@ export function VectorStoreDetailView({
errorFiles,
id,
}: VectorStoreDetailViewProps) {
- const title = "Vector Store Details";
const router = useRouter();
+ const client = useAuthClient();
+ const [isDeleting, setIsDeleting] = useState(false);
+ const [showEditModal, setShowEditModal] = useState(false);
+ const [modalError, setModalError] = useState
(null);
+ const [showSuccessState, setShowSuccessState] = useState(false);
+
+ // Handle ESC key to close modal
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ if (event.key === "Escape" && showEditModal) {
+ handleCancel();
+ }
+ };
+
+ document.addEventListener("keydown", handleEscape);
+ return () => document.removeEventListener("keydown", handleEscape);
+ }, [showEditModal]);
const handleFileClick = (fileId: string) => {
router.push(`/logs/vector-stores/${id}/files/${fileId}`);
};
+ const handleEditVectorStore = () => {
+ setShowEditModal(true);
+ setModalError(null);
+ setShowSuccessState(false);
+ };
+
+ const handleCancel = () => {
+ setShowEditModal(false);
+ setModalError(null);
+ setShowSuccessState(false);
+ };
+
+ const handleSaveVectorStore = async (formData: VectorStoreFormData) => {
+ try {
+ setModalError(null);
+
+ // Update existing vector store (same logic as list page)
+ const updateParams: {
+ name?: string;
+ extra_body?: Record;
+ } = {};
+
+ // Only include fields that have changed or are provided
+ if (formData.name && formData.name !== store?.name) {
+ updateParams.name = formData.name;
+ }
+
+ // Add all parameters to extra_body (except provider_id which can't be changed)
+ const extraBody: Record = {};
+ if (formData.embedding_model) {
+ extraBody.embedding_model = formData.embedding_model;
+ }
+ if (formData.embedding_dimension) {
+ extraBody.embedding_dimension = formData.embedding_dimension;
+ }
+
+ if (Object.keys(extraBody).length > 0) {
+ updateParams.extra_body = extraBody;
+ }
+
+ await client.vectorStores.update(id, updateParams);
+
+ // Show success state
+ setShowSuccessState(true);
+ setModalError(
+ "ā
Vector store updated successfully! You can close this modal and refresh the page to see changes."
+ );
+ } catch (err: unknown) {
+ console.error("Failed to update vector store:", err);
+ const errorMessage =
+ err instanceof Error ? err.message : "Failed to update vector store";
+ setModalError(errorMessage);
+ }
+ };
+
+ const handleDeleteVectorStore = async () => {
+ if (
+ !confirm(
+ "Are you sure you want to delete this vector store? This action cannot be undone."
+ )
+ ) {
+ return;
+ }
+
+ setIsDeleting(true);
+
+ try {
+ await client.vectorStores.delete(id);
+ // Redirect to the vector stores list after successful deletion
+ router.push("/logs/vector-stores");
+ } catch (err: unknown) {
+ console.error("Failed to delete vector store:", err);
+ const errorMessage = err instanceof Error ? err.message : "Unknown error";
+ alert(`Failed to delete vector store: ${errorMessage}`);
+ } finally {
+ setIsDeleting(false);
+ }
+ };
+
if (errorStore) {
- return ;
+ return (
+
+ );
}
if (isLoadingStore) {
- return ;
+ return ;
}
if (!store) {
- return ;
+ return ;
}
const mainContent = (
@@ -138,6 +242,73 @@ export function VectorStoreDetailView({
);
return (
-
+ <>
+
+
Vector Store Details
+
+
+
+
+
+
{mainContent}
+
{sidebar}
+
+
+
+
Edit Vector Store
+
+
+
+
+
+
+