feat: allow returning embeddings and metadata from /vector_stores/ methods; disallow changing Provider ID (#4046)

# What does this PR do?

- Updates `/vector_stores/{vector_store_id}/files/{file_id}/content` to
allow returning `embeddings` and `metadata` using the `extra_query`
    -  Updates the UI accordingly to display them.

- Update UI to support CRUD operations in the Vector Stores section and
adds a new modal exposing the functionality.

- Updates Vector Store update to fail if a user tries to update Provider
ID (which doesn't make sense to allow)

```python
In  [1]: client.vector_stores.files.content(
    vector_store_id=vector_store.id, 
    file_id=file.id, 
    extra_query={"include_embeddings": True, "include_metadata": True}
)
Out [1]: FileContentResponse(attributes={}, content=[Content(text='This is a test document to check if embeddings are generated properly.\n', type='text', embedding=[0.33760684728622437, ...,], chunk_metadata={'chunk_id': '62a63ae0-c202-f060-1b86-0a688995b8d3', 'document_id': 'file-27291dbc679642ac94ffac6d2810c339', 'source': None, 'created_timestamp': 1762053437, 'updated_timestamp': 1762053437, 'chunk_window': '0-13', 'chunk_tokenizer': 'DEFAULT_TIKTOKEN_TOKENIZER', 'chunk_embedding_model': 'sentence-transformers/nomic
-ai/nomic-embed-text-v1.5', 'chunk_embedding_dimension': 768, 'content_token_count': 13, 'metadata_token_count': 9}, metadata={'filename': 'test-embedding.txt', 'chunk_id': '62a63ae0-c202-f060-1b86-0a688995b8d3', 'document_id': 'file-27291dbc679642ac94ffac6d2810c339', 'token_count': 13, 'metadata_token_count': 9})], file_id='file-27291dbc679642ac94ffac6d2810c339', filename='test-embedding.txt')
```

Screenshots of UI are displayed below:

### List Vector Store with Added "Create New Vector Store"
<img width="1912" height="491" alt="Screenshot 2025-11-06 at 10 47
25 PM"
src="https://github.com/user-attachments/assets/a3a3ddd9-758d-4005-ac9c-5047f03916f3"
/>

### Create New Vector Store
<img width="1918" height="1048" alt="Screenshot 2025-11-06 at 10 47
49 PM"
src="https://github.com/user-attachments/assets/b4dc0d31-696f-4e68-b109-27915090f158"
/>

### Edit Vector Store
<img width="1916" height="1355" alt="Screenshot 2025-11-06 at 10 48
32 PM"
src="https://github.com/user-attachments/assets/ec879c63-4cf7-489f-bb1e-57ccc7931414"
/>


### Vector Store Files Contents page (with Embeddings)
<img width="1914" height="849" alt="Screenshot 2025-11-06 at 11 54
32 PM"
src="https://github.com/user-attachments/assets/3095520d-0e90-41f7-83bd-652f6c3fbf27"
/>

### Vector Store Files Contents Details page (with Embeddings)
<img width="1916" height="1221" alt="Screenshot 2025-11-06 at 11 55
00 PM"
src="https://github.com/user-attachments/assets/e71dbdc5-5b49-472b-a43a-5785f58d196c"
/>

<!-- If resolving an issue, uncomment and update the line below -->
<!-- Closes #[issue-number] -->

## Test Plan
Tests added for Middleware extension and Provider failures.

---------

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

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();

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,

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<string | null>(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<string, unknown>;
+      } = {};
+
+      // 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<string, unknown> = {};
+      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 <DetailErrorView title={title} id={id} error={errorStore} />;
+    return (
+      <DetailErrorView
+        title="Vector Store Details"
+        id={id}
+        error={errorStore}
+      />
+    );
   }
   if (isLoadingStore) {
-    return <DetailLoadingView title={title} />;
+    return <DetailLoadingView />;
   }
   if (!store) {
-    return <DetailNotFoundView title={title} id={id} />;
+    return <DetailNotFoundView title="Vector Store Details" id={id} />;
   }
 
   const mainContent = (
@@ -138,6 +242,73 @@ export function VectorStoreDetailView({
   );
 
   return (
-    <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+    <>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Vector Store Details</h1>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={handleEditVectorStore}
+            disabled={isDeleting}
+          >
+            <Edit2 className="h-4 w-4 mr-2" />
+            Edit
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDeleteVectorStore}
+            disabled={isDeleting}
+          >
+            {isDeleting ? (
+              "Deleting..."
+            ) : (
+              <>
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col md:flex-row gap-6">
+        <div className="flex-grow md:w-2/3 space-y-6">{mainContent}</div>
+        <div className="md:w-1/3">{sidebar}</div>
+      </div>
+
+      {/* Edit Vector Store Modal */}
+      {showEditModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-background border rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
+            <div className="p-6 border-b flex items-center justify-between">
+              <h2 className="text-2xl font-bold">Edit Vector Store</h2>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCancel}
+                className="p-1 h-auto"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
+              <VectorStoreEditor
+                onSave={handleSaveVectorStore}
+                onCancel={handleCancel}
+                error={modalError}
+                showSuccessState={showSuccessState}
+                isEditing={true}
+                initialData={{
+                  name: store?.name || "",
+                  embedding_model: store?.metadata?.embedding_model || "",
+                  embedding_dimension:
+                    store?.metadata?.embedding_dimension || 768,
+                  provider_id: store?.metadata?.provider_id || "",
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }

src/llama_stack_ui/components/vector-stores/vector-store-editor.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import type { Model } from "llama-stack-client/resources/models";
+
+export interface VectorStoreFormData {
+  name: string;
+  embedding_model?: string;
+  embedding_dimension?: number;
+  provider_id?: string;
+}
+
+interface VectorStoreEditorProps {
+  onSave: (formData: VectorStoreFormData) => Promise<void>;
+  onCancel: () => void;
+  error?: string | null;
+  initialData?: VectorStoreFormData;
+  showSuccessState?: boolean;
+  isEditing?: boolean;
+}
+
+export function VectorStoreEditor({
+  onSave,
+  onCancel,
+  error,
+  initialData,
+  showSuccessState,
+  isEditing = false,
+}: VectorStoreEditorProps) {
+  const client = useAuthClient();
+  const [formData, setFormData] = useState<VectorStoreFormData>(
+    initialData || {
+      name: "",
+      embedding_model: "",
+      embedding_dimension: 768,
+      provider_id: "",
+    }
+  );
+  const [loading, setLoading] = useState(false);
+  const [models, setModels] = useState<Model[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(true);
+  const [modelsError, setModelsError] = useState<string | null>(null);
+
+  const embeddingModels = models.filter(
+    model => model.custom_metadata?.model_type === "embedding"
+  );
+
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        setModelsLoading(true);
+        setModelsError(null);
+        const modelList = await client.models.list();
+        setModels(modelList);
+
+        // Set default embedding model if available
+        const embeddingModelsList = modelList.filter(model => {
+          return model.custom_metadata?.model_type === "embedding";
+        });
+        if (embeddingModelsList.length > 0 && !formData.embedding_model) {
+          setFormData(prev => ({
+            ...prev,
+            embedding_model: embeddingModelsList[0].id,
+          }));
+        }
+      } catch (err) {
+        console.error("Failed to load models:", err);
+        setModelsError(
+          err instanceof Error ? err.message : "Failed to load models"
+        );
+      } finally {
+        setModelsLoading(false);
+      }
+    };
+
+    fetchModels();
+  }, [client]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      await onSave(formData);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={e => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Enter vector store name"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="embedding_model">Embedding Model (Optional)</Label>
+            {modelsLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading models... ({models.length} loaded)
+              </div>
+            ) : modelsError ? (
+              <div className="text-sm text-destructive">
+                Error: {modelsError}
+              </div>
+            ) : embeddingModels.length === 0 ? (
+              <div className="text-sm text-muted-foreground">
+                No embedding models available ({models.length} total models)
+              </div>
+            ) : (
+              <Select
+                value={formData.embedding_model}
+                onValueChange={value =>
+                  setFormData({ ...formData, embedding_model: value })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Embedding Model" />
+                </SelectTrigger>
+                <SelectContent>
+                  {embeddingModels.map((model, index) => (
+                    <SelectItem key={model.id} value={model.id}>
+                      {model.id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            {formData.embedding_model && (
+              <p className="text-xs text-muted-foreground mt-1">
+                Dimension:{" "}
+                {embeddingModels.find(m => m.id === formData.embedding_model)
+                  ?.custom_metadata?.embedding_dimension || "Unknown"}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="embedding_dimension">
+              Embedding Dimension (Optional)
+            </Label>
+            <Input
+              id="embedding_dimension"
+              type="number"
+              value={formData.embedding_dimension}
+              onChange={e =>
+                setFormData({
+                  ...formData,
+                  embedding_dimension: parseInt(e.target.value) || 768,
+                })
+              }
+              placeholder="768"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="provider_id">
+              Provider ID {isEditing ? "(Read-only)" : "(Optional)"}
+            </Label>
+            <Input
+              id="provider_id"
+              value={formData.provider_id}
+              onChange={e =>
+                setFormData({ ...formData, provider_id: e.target.value })
+              }
+              placeholder="e.g., faiss, chroma, sqlite"
+              disabled={isEditing}
+            />
+            {isEditing && (
+              <p className="text-xs text-muted-foreground">
+                Provider ID cannot be changed after vector store creation
+              </p>
+            )}
+          </div>
+
+          {error && (
+            <div
+              className={`text-sm p-3 rounded ${
+                error.startsWith("✅")
+                  ? "text-green-700 bg-green-50 border border-green-200"
+                  : "text-destructive bg-destructive/10"
+              }`}
+            >
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-4">
+            {showSuccessState ? (
+              <Button type="button" onClick={onCancel}>
+                Close
+              </Button>
+            ) : (
+              <>
+                <Button type="submit" disabled={loading}>
+                  {loading
+                    ? initialData
+                      ? "Updating..."
+                      : "Creating..."
+                    : initialData
+                      ? "Update Vector Store"
+                      : "Create Vector Store"}
+                </Button>
+                <Button type="button" variant="outline" onClick={onCancel}>
+                  Cancel
+                </Button>
+              </>
+            )}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}