From 9e78f2da96e43bbbfab390725b9020871a2820d5 Mon Sep 17 00:00:00 2001
From: Jiayi Ni <jiayin@nvidia.com>
Date: Fri, 8 Aug 2025 02:27:55 -0700
Subject: [PATCH 1/6] docs: fix the docs for NVIDIA Inference Provider (#3055)

# What does this PR do?
Fix the NVIDIA inference docs by updating API methods, model IDs, and
embedding example.

## Test Plan
N/A
---
 .../distributions/self_hosted_distro/nvidia.md   |  2 +-
 llama_stack/distributions/nvidia/doc_template.md |  2 +-
 .../providers/remote/inference/nvidia/NVIDIA.md  | 16 +++++++++-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/docs/source/distributions/self_hosted_distro/nvidia.md b/docs/source/distributions/self_hosted_distro/nvidia.md
index 6e399e6ce..e845c3c48 100644
--- a/docs/source/distributions/self_hosted_distro/nvidia.md
+++ b/docs/source/distributions/self_hosted_distro/nvidia.md
@@ -157,7 +157,7 @@ docker run \
 If you've set up your local development environment, you can also build the image using your local virtual environment.
 
 ```bash
-INFERENCE_MODEL=meta-llama/Llama-3.1-8b-Instruct
+INFERENCE_MODEL=meta-llama/Llama-3.1-8B-Instruct
 llama stack build --distro nvidia --image-type venv
 llama stack run ./run.yaml \
   --port 8321 \
diff --git a/llama_stack/distributions/nvidia/doc_template.md b/llama_stack/distributions/nvidia/doc_template.md
index 3884e6b51..56e99e523 100644
--- a/llama_stack/distributions/nvidia/doc_template.md
+++ b/llama_stack/distributions/nvidia/doc_template.md
@@ -129,7 +129,7 @@ docker run \
 If you've set up your local development environment, you can also build the image using your local virtual environment.
 
 ```bash
-INFERENCE_MODEL=meta-llama/Llama-3.1-8b-Instruct
+INFERENCE_MODEL=meta-llama/Llama-3.1-8B-Instruct
 llama stack build --distro nvidia --image-type venv
 llama stack run ./run.yaml \
   --port 8321 \
diff --git a/llama_stack/providers/remote/inference/nvidia/NVIDIA.md b/llama_stack/providers/remote/inference/nvidia/NVIDIA.md
index 2505718e0..4a072215c 100644
--- a/llama_stack/providers/remote/inference/nvidia/NVIDIA.md
+++ b/llama_stack/providers/remote/inference/nvidia/NVIDIA.md
@@ -42,8 +42,8 @@ client.initialize()
 ### Create Completion
 
 ```python
-response = client.completion(
-    model_id="meta-llama/Llama-3.1-8b-Instruct",
+response = client.inference.completion(
+    model_id="meta-llama/Llama-3.1-8B-Instruct",
     content="Complete the sentence using one word: Roses are red, violets are :",
     stream=False,
     sampling_params={
@@ -56,8 +56,8 @@ print(f"Response: {response.content}")
 ### Create Chat Completion
 
 ```python
-response = client.chat_completion(
-    model_id="meta-llama/Llama-3.1-8b-Instruct",
+response = client.inference.chat_completion(
+    model_id="meta-llama/Llama-3.1-8B-Instruct",
     messages=[
         {
             "role": "system",
@@ -78,8 +78,10 @@ print(f"Response: {response.completion_message.content}")
 
 ### Create Embeddings
 ```python
-response = client.embeddings(
-    model_id="meta-llama/Llama-3.1-8b-Instruct", contents=["foo", "bar", "baz"]
+response = client.inference.embeddings(
+    model_id="nvidia/llama-3.2-nv-embedqa-1b-v2",
+    contents=["What is the capital of France?"],
+    task_type="query",
 )
 print(f"Embeddings: {response.embeddings}")
-```
+```
\ No newline at end of file

From 9b70bb9d4b41272b81fd860641d143a7ebc30ebe Mon Sep 17 00:00:00 2001
From: Francisco Arceo <arceofrancisco@gmail.com>
Date: Fri, 8 Aug 2025 08:44:06 -0600
Subject: [PATCH 2/6] feat(ui): Adding Vector Store Files to Admin UI (#3041)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What does this PR do?
This PR updates the UI to create new:
1. `/files/{file_id}`
2. `files/{file_id}/contents`
3. `files/{file_id}/contents/{content_id}`

The list of files are clickable which brings the user to the FIles
Detail page
The File Details page shows all of the content
The content details page shows the individual chunk/content parsed

These only use our existing OpenAI compatible APIs. I have a separate
branch where I expose the embedding and the portal is correctly
populated. I included the FE rendering code for that in this PR.

1. `vector-stores/{vector_store_id}/files/{file_id}`
<img width="1913" height="1351" alt="Screenshot 2025-08-06 at 10 20
12 PM"
src="https://github.com/user-attachments/assets/08010d5e-60c8-4bd9-9f3e-a2731ed1ad55"
/>

2. `vector-stores/{vector_store_id}/files/{file_id}/contents`
<img width="1920" height="1272" alt="Screenshot 2025-08-06 at 10 21
23 PM"
src="https://github.com/user-attachments/assets/3b91e67b-5d64-4fe6-91b6-18f14587e850"
/>

3.
`vector-stores/{vector_store_id}/files/{file_id}/contents/{content_id}`
<img width="1916" height="1273" alt="Screenshot 2025-08-06 at 10 21
45 PM"
src="https://github.com/user-attachments/assets/d38ca996-e8d9-460c-9e39-7ff0cb5ec0dd"
/>

## Test Plan
I tested this locally and reviewed the code. I generated a significant
share of the code with Claude and some manual intervention. After this,
I'll begin adding tests to the UI.

---------

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
---
 .../[fileId]/contents/[contentId]/page.tsx    | 383 ++++++++++++++++++
 .../[id]/files/[fileId]/contents/page.tsx     | 297 ++++++++++++++
 .../[id]/files/[fileId]/page.tsx              | 258 ++++++++++++
 .../ui/app/logs/vector-stores/layout.tsx      |  25 +-
 .../ui/app/logs/vector-stores/page.tsx        | 148 ++++---
 .../vector-stores/vector-store-detail.tsx     |  17 +-
 llama_stack/ui/lib/contents-api.ts            | 112 +++++
 llama_stack/ui/package-lock.json              |  10 +-
 8 files changed, 1175 insertions(+), 75 deletions(-)
 create mode 100644 llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.tsx
 create mode 100644 llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx
 create mode 100644 llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.tsx
 create mode 100644 llama_stack/ui/lib/contents-api.ts

diff --git a/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.tsx b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.tsx
new file mode 100644
index 000000000..6896b992a
--- /dev/null
+++ b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.tsx
@@ -0,0 +1,383 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import { ContentsAPI, VectorStoreContentItem } from "@/lib/contents-api";
+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 { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Edit, Save, X, Trash2 } from "lucide-react";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+
+export default function ContentDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const vectorStoreId = params.id as string;
+  const fileId = params.fileId as string;
+  const contentId = params.contentId as string;
+  const client = useAuthClient();
+
+  const getTextFromContent = (content: any): string => {
+    if (typeof content === 'string') {
+      return content;
+    } else if (content && content.type === 'text') {
+      return content.text;
+    }
+    return '';
+  };
+
+  const [store, setStore] = useState<VectorStore | null>(null);
+  const [file, setFile] = useState<VectorStoreFile | null>(null);
+  const [content, setContent] = useState<VectorStoreContentItem | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState("");
+  const [editedMetadata, setEditedMetadata] = useState<Record<string, any>>({});
+  const [isEditingEmbedding, setIsEditingEmbedding] = useState(false);
+  const [editedEmbedding, setEditedEmbedding] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (!vectorStoreId || !fileId || !contentId) return;
+
+    const fetchData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const [storeResponse, fileResponse] = await Promise.all([
+          client.vectorStores.retrieve(vectorStoreId),
+          client.vectorStores.files.retrieve(vectorStoreId, fileId),
+        ]);
+
+        setStore(storeResponse as VectorStore);
+        setFile(fileResponse as VectorStoreFile);
+
+        const contentsAPI = new ContentsAPI(client);
+        const contentsResponse = await contentsAPI.listContents(vectorStoreId, fileId);
+        const targetContent = contentsResponse.data.find(c => c.id === contentId);
+
+        if (targetContent) {
+          setContent(targetContent);
+          setEditedContent(getTextFromContent(targetContent.content));
+          setEditedMetadata({ ...targetContent.metadata });
+          setEditedEmbedding(targetContent.embedding || []);
+        } else {
+          throw new Error(`Content ${contentId} not found`);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to load content."));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, [vectorStoreId, fileId, contentId, client]);
+
+  const handleSave = async () => {
+    if (!content) return;
+
+    try {
+      const updates: { content?: string; metadata?: Record<string, any> } = {};
+
+      if (editedContent !== getTextFromContent(content.content)) {
+        updates.content = editedContent;
+      }
+
+      if (JSON.stringify(editedMetadata) !== JSON.stringify(content.metadata)) {
+        updates.metadata = editedMetadata;
+      }
+
+      if (Object.keys(updates).length > 0) {
+        const contentsAPI = new ContentsAPI(client);
+        const updatedContent = await contentsAPI.updateContent(vectorStoreId, fileId, contentId, updates);
+        setContent(updatedContent);
+      }
+
+      setIsEditing(false);
+    } catch (err) {
+      console.error('Failed to update content:', err);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this content?')) return;
+
+    try {
+      const contentsAPI = new ContentsAPI(client);
+      await contentsAPI.deleteContent(vectorStoreId, fileId, contentId);
+      router.push(`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`);
+    } catch (err) {
+      console.error('Failed to delete content:', err);
+    }
+  };
+
+  const handleCancel = () => {
+    setEditedContent(content ? getTextFromContent(content.content) : "");
+    setEditedMetadata({ ...content?.metadata });
+    setEditedEmbedding(content?.embedding || []);
+    setIsEditing(false);
+    setIsEditingEmbedding(false);
+  };
+
+  const title = `Content: ${contentId}`;
+
+  const breadcrumbSegments: BreadcrumbSegment[] = [
+    { label: "Vector Stores", href: "/logs/vector-stores" },
+    { label: store?.name || vectorStoreId, href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: fileId, href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}` },
+    { label: "Contents", href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents` },
+    { label: contentId },
+  ];
+
+  if (error) {
+    return <DetailErrorView title={title} id={contentId} error={error} />;
+  }
+  if (isLoading) {
+    return <DetailLoadingView title={title} />;
+  }
+  if (!content) {
+    return <DetailNotFoundView title={title} id={contentId} />;
+  }
+
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Content</CardTitle>
+          <div className="flex gap-2">
+            {isEditing ? (
+              <>
+                <Button size="sm" onClick={handleSave}>
+                  <Save className="h-4 w-4 mr-1" />
+                  Save
+                </Button>
+                <Button size="sm" variant="outline" onClick={handleCancel}>
+                  <X className="h-4 w-4 mr-1" />
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button size="sm" onClick={() => setIsEditing(true)}>
+                  <Edit className="h-4 w-4 mr-1" />
+                  Edit
+                </Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}>
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete
+                </Button>
+              </>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isEditing ? (
+            <textarea
+              value={editedContent}
+              onChange={(e) => setEditedContent(e.target.value)}
+              className="w-full h-64 p-3 border rounded-md resize-none font-mono text-sm"
+              placeholder="Enter content..."
+            />
+          ) : (
+            <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
+              <pre className="whitespace-pre-wrap font-mono text-sm text-gray-900 dark:text-gray-100">
+                {getTextFromContent(content.content)}
+              </pre>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Content Embedding</CardTitle>
+          <div className="flex gap-2">
+            {isEditingEmbedding ? (
+              <>
+                <Button size="sm" onClick={() => {
+                  setIsEditingEmbedding(false);
+                }}>
+                  <Save className="h-4 w-4 mr-1" />
+                  Save
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  setEditedEmbedding(content?.embedding || []);
+                  setIsEditingEmbedding(false);
+                }}>
+                  <X className="h-4 w-4 mr-1" />
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <Button size="sm" onClick={() => setIsEditingEmbedding(true)}>
+                <Edit className="h-4 w-4 mr-1" />
+                Edit
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {content?.embedding && content.embedding.length > 0 ? (
+            isEditingEmbedding ? (
+              <div className="space-y-2">
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Embedding ({editedEmbedding.length}D vector):
+                </p>
+                <textarea
+                  value={JSON.stringify(editedEmbedding, null, 2)}
+                  onChange={(e) => {
+                    try {
+                      const parsed = JSON.parse(e.target.value);
+                      if (Array.isArray(parsed) && parsed.every(v => typeof v === 'number')) {
+                        setEditedEmbedding(parsed);
+                      }
+                    } catch {
+                    }
+                  }}
+                  className="w-full h-32 p-3 border rounded-md resize-none font-mono text-xs"
+                  placeholder="Enter embedding as JSON array..."
+                />
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-xs bg-gray-100 dark:bg-gray-800 rounded px-2 py-1">
+                    {content.embedding.length}D vector
+                  </span>
+                </div>
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-md max-h-32 overflow-y-auto">
+                  <pre className="whitespace-pre-wrap font-mono text-xs text-gray-900 dark:text-gray-100">
+                    [{content.embedding.slice(0, 20).map(v => v.toFixed(6)).join(', ')}
+                    {content.embedding.length > 20 ? `\n... and ${content.embedding.length - 20} more values` : ''}]
+                  </pre>
+                </div>
+              </div>
+            )
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No embedding available for this content.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Metadata</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isEditing ? (
+            <div className="space-y-2">
+              {Object.entries(editedMetadata).map(([key, value]) => (
+                <div key={key} className="flex gap-2">
+                  <Input
+                    value={key}
+                    onChange={(e) => {
+                      const newMetadata = { ...editedMetadata };
+                      delete newMetadata[key];
+                      newMetadata[e.target.value] = value;
+                      setEditedMetadata(newMetadata);
+                    }}
+                    placeholder="Key"
+                    className="flex-1"
+                  />
+                  <Input
+                    value={typeof value === 'string' ? value : JSON.stringify(value)}
+                    onChange={(e) => {
+                      setEditedMetadata({
+                        ...editedMetadata,
+                        [key]: e.target.value
+                      });
+                    }}
+                    placeholder="Value"
+                    className="flex-1"
+                  />
+                </div>
+              ))}
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setEditedMetadata({
+                    ...editedMetadata,
+                    ['']: ''
+                  });
+                }}
+              >
+                Add Field
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {Object.entries(content.metadata).map(([key, value]) => (
+                <div key={key} className="flex justify-between py-1">
+                  <span className="font-medium text-gray-600">{key}:</span>
+                  <span className="font-mono text-sm">
+                    {typeof value === 'string' ? value : JSON.stringify(value)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem label="Content ID" value={contentId} />
+      <PropertyItem label="File ID" value={fileId} />
+      <PropertyItem label="Vector Store ID" value={vectorStoreId} />
+      <PropertyItem label="Object Type" value={content.object} />
+      <PropertyItem
+        label="Created"
+        value={new Date(content.created_timestamp * 1000).toLocaleString()}
+      />
+      <PropertyItem
+        label="Content Length"
+        value={`${getTextFromContent(content.content).length} chars`}
+      />
+      {content.metadata.chunk_window && (
+        <PropertyItem
+          label="Position"
+          value={content.metadata.chunk_window}
+        />
+      )}
+      {file && (
+        <>
+          <PropertyItem label="File Status" value={file.status} />
+          <PropertyItem label="File Usage" value={`${file.usage_bytes} bytes`} />
+        </>
+      )}
+      {store && (
+        <>
+          <PropertyItem label="Store Name" value={store.name || ""} />
+          <PropertyItem
+            label="Provider ID"
+            value={(store.metadata.provider_id as string) || ""}
+          />
+        </>
+      )}
+    </PropertiesCard>
+  );
+
+  return (
+    <>
+      <PageBreadcrumb segments={breadcrumbSegments} />
+      <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+    </>
+  );
+}
diff --git a/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx
new file mode 100644
index 000000000..d43223c6c
--- /dev/null
+++ b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import { ContentsAPI, VectorStoreContentItem } from "@/lib/contents-api";
+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 { Edit, Trash2, Eye } from "lucide-react";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export default function ContentsListPage() {
+  const params = useParams();
+  const router = useRouter();
+  const vectorStoreId = params.id as string;
+  const fileId = params.fileId as string;
+  const client = useAuthClient();
+
+  const getTextFromContent = (content: any): string => {
+    if (typeof content === 'string') {
+      return content;
+    } else if (content && content.type === 'text') {
+      return content.text;
+    }
+    return '';
+  };
+
+  const [store, setStore] = useState<VectorStore | null>(null);
+  const [file, setFile] = useState<VectorStoreFile | null>(null);
+  const [contents, setContents] = useState<VectorStoreContentItem[]>([]);
+  const [isLoadingStore, setIsLoadingStore] = useState(true);
+  const [isLoadingFile, setIsLoadingFile] = useState(true);
+  const [isLoadingContents, setIsLoadingContents] = useState(true);
+  const [errorStore, setErrorStore] = useState<Error | null>(null);
+  const [errorFile, setErrorFile] = useState<Error | null>(null);
+  const [errorContents, setErrorContents] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!vectorStoreId) return;
+
+    const fetchStore = async () => {
+      setIsLoadingStore(true);
+      setErrorStore(null);
+      try {
+        const response = await client.vectorStores.retrieve(vectorStoreId);
+        setStore(response as VectorStore);
+      } catch (err) {
+        setErrorStore(err instanceof Error ? err : new Error("Failed to load vector store."));
+      } finally {
+        setIsLoadingStore(false);
+      }
+    };
+    fetchStore();
+  }, [vectorStoreId, client]);
+
+  useEffect(() => {
+    if (!vectorStoreId || !fileId) return;
+
+    const fetchFile = async () => {
+      setIsLoadingFile(true);
+      setErrorFile(null);
+      try {
+        const response = await client.vectorStores.files.retrieve(vectorStoreId, fileId);
+        setFile(response as VectorStoreFile);
+      } catch (err) {
+        setErrorFile(err instanceof Error ? err : new Error("Failed to load file."));
+      } finally {
+        setIsLoadingFile(false);
+      }
+    };
+    fetchFile();
+  }, [vectorStoreId, fileId, client]);
+
+  useEffect(() => {
+    if (!vectorStoreId || !fileId) return;
+
+    const fetchContents = async () => {
+      setIsLoadingContents(true);
+      setErrorContents(null);
+      try {
+        const contentsAPI = new ContentsAPI(client);
+        const contentsResponse = await contentsAPI.listContents(vectorStoreId, fileId, { limit: 100 });
+        setContents(contentsResponse.data);
+      } catch (err) {
+        setErrorContents(err instanceof Error ? err : new Error("Failed to load contents."));
+      } finally {
+        setIsLoadingContents(false);
+      }
+    };
+    fetchContents();
+  }, [vectorStoreId, fileId, client]);
+
+  const handleDeleteContent = async (contentId: string) => {
+    try {
+      const contentsAPI = new ContentsAPI(client);
+      await contentsAPI.deleteContent(vectorStoreId, fileId, contentId);
+      setContents(contents.filter(content => content.id !== contentId));
+    } catch (err) {
+      console.error('Failed to delete content:', err);
+    }
+  };
+
+  const handleViewContent = (contentId: string) => {
+    router.push(`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents/${contentId}`);
+  };
+
+  const title = `Contents in File: ${fileId}`;
+
+  const breadcrumbSegments: BreadcrumbSegment[] = [
+    { label: "Vector Stores", href: "/logs/vector-stores" },
+    { label: store?.name || vectorStoreId, href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: fileId, href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}` },
+    { label: "Contents" },
+  ];
+
+  if (errorStore) {
+    return <DetailErrorView title={title} id={vectorStoreId} error={errorStore} />;
+  }
+  if (isLoadingStore) {
+    return <DetailLoadingView title={title} />;
+  }
+  if (!store) {
+    return <DetailNotFoundView title={title} id={vectorStoreId} />;
+  }
+
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Content Chunks ({contents.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoadingContents ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          ) : errorContents ? (
+            <div className="text-destructive text-sm">
+              Error loading contents: {errorContents.message}
+            </div>
+          ) : contents.length > 0 ? (
+            <Table>
+              <TableCaption>Contents in this file</TableCaption>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Content ID</TableHead>
+                  <TableHead>Content Preview</TableHead>
+                  <TableHead>Embedding</TableHead>
+                  <TableHead>Position</TableHead>
+                  <TableHead>Created</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {contents.map((content) => (
+                  <TableRow key={content.id}>
+                    <TableCell className="font-mono text-xs">
+                      <Button
+                        variant="link"
+                        className="p-0 h-auto font-mono text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                        onClick={() => handleViewContent(content.id)}
+                        title={content.id}
+                      >
+                        {content.id.substring(0, 10)}...
+                      </Button>
+                    </TableCell>
+                    <TableCell>
+                      <div className="max-w-md">
+                        <p className="text-sm truncate" title={getTextFromContent(content.content)}>
+                          {getTextFromContent(content.content)}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-xs text-gray-500">
+                      {content.embedding && content.embedding.length > 0 ? (
+                        <div className="max-w-xs">
+                          <span className="font-mono text-xs bg-gray-100 dark:bg-gray-800 rounded px-1 py-0.5" title={`${content.embedding.length}D vector: [${content.embedding.slice(0, 3).map(v => v.toFixed(3)).join(', ')}...]`}>
+                            [{content.embedding.slice(0, 3).map(v => v.toFixed(3)).join(', ')}...] ({content.embedding.length}D)
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="text-gray-400 dark:text-gray-500 italic">No embedding</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-xs text-gray-500">
+                      {content.metadata.chunk_window
+                        ? content.metadata.chunk_window
+                        : `${content.metadata.content_length || 0} chars`}
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {new Date(content.created_timestamp * 1000).toLocaleString()}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0"
+                          title="View content details"
+                          onClick={() => handleViewContent(content.id)}
+                        >
+                          <Eye className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0"
+                          title="Edit content"
+                          onClick={() => handleViewContent(content.id)}
+                        >
+                          <Edit className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                          title="Delete content"
+                          onClick={() => handleDeleteContent(content.id)}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No contents found for this file.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem label="File ID" value={fileId} />
+      <PropertyItem label="Vector Store ID" value={vectorStoreId} />
+      {file && (
+        <>
+          <PropertyItem label="Status" value={file.status} />
+          <PropertyItem
+            label="Created"
+            value={new Date(file.created_at * 1000).toLocaleString()}
+          />
+          <PropertyItem label="Usage Bytes" value={file.usage_bytes} />
+          <PropertyItem
+            label="Chunking Strategy"
+            value={file.chunking_strategy.type}
+          />
+        </>
+      )}
+      {store && (
+        <>
+          <PropertyItem label="Store Name" value={store.name || ""} />
+          <PropertyItem
+            label="Provider ID"
+            value={(store.metadata.provider_id as string) || ""}
+          />
+        </>
+      )}
+    </PropertiesCard>
+  );
+
+  return (
+    <>
+      <PageBreadcrumb segments={breadcrumbSegments} />
+      <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+    </>
+  );
+}
diff --git a/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.tsx b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.tsx
new file mode 100644
index 000000000..bdcf76e1b
--- /dev/null
+++ b/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
+import type { VectorStoreFile, FileContentResponse } 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 { List } from "lucide-react";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+
+export default function FileDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const vectorStoreId = params.id as string;
+  const fileId = params.fileId as string;
+  const client = useAuthClient();
+
+  const [store, setStore] = useState<VectorStore | null>(null);
+  const [file, setFile] = useState<VectorStoreFile | null>(null);
+  const [contents, setContents] = useState<FileContentResponse | null>(null);
+  const [isLoadingStore, setIsLoadingStore] = useState(true);
+  const [isLoadingFile, setIsLoadingFile] = useState(true);
+  const [isLoadingContents, setIsLoadingContents] = useState(true);
+  const [errorStore, setErrorStore] = useState<Error | null>(null);
+  const [errorFile, setErrorFile] = useState<Error | null>(null);
+  const [errorContents, setErrorContents] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!vectorStoreId) return;
+
+    const fetchStore = async () => {
+      setIsLoadingStore(true);
+      setErrorStore(null);
+      try {
+        const response = await client.vectorStores.retrieve(vectorStoreId);
+        setStore(response as VectorStore);
+      } catch (err) {
+        setErrorStore(err instanceof Error ? err : new Error("Failed to load vector store."));
+      } finally {
+        setIsLoadingStore(false);
+      }
+    };
+    fetchStore();
+  }, [vectorStoreId, client]);
+
+  useEffect(() => {
+    if (!vectorStoreId || !fileId) return;
+
+    const fetchFile = async () => {
+      setIsLoadingFile(true);
+      setErrorFile(null);
+      try {
+        const response = await client.vectorStores.files.retrieve(vectorStoreId, fileId);
+        setFile(response as VectorStoreFile);
+      } catch (err) {
+        setErrorFile(err instanceof Error ? err : new Error("Failed to load file."));
+      } finally {
+        setIsLoadingFile(false);
+      }
+    };
+    fetchFile();
+  }, [vectorStoreId, fileId, client]);
+
+  useEffect(() => {
+    if (!vectorStoreId || !fileId) return;
+
+    const fetchContents = async () => {
+      setIsLoadingContents(true);
+      setErrorContents(null);
+      try {
+        const response = await client.vectorStores.files.content(vectorStoreId, fileId);
+        setContents(response);
+      } catch (err) {
+        setErrorContents(err instanceof Error ? err : new Error("Failed to load contents."));
+      } finally {
+        setIsLoadingContents(false);
+      }
+    };
+    fetchContents();
+  }, [vectorStoreId, fileId, client]);
+
+  const handleViewContents = () => {
+    router.push(`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`);
+  };
+
+  const title = `File: ${fileId}`;
+
+  const breadcrumbSegments: BreadcrumbSegment[] = [
+    { label: "Vector Stores", href: "/logs/vector-stores" },
+    { label: store?.name || vectorStoreId, href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
+    { label: fileId },
+  ];
+
+  if (errorStore) {
+    return <DetailErrorView title={title} id={vectorStoreId} error={errorStore} />;
+  }
+  if (isLoadingStore) {
+    return <DetailLoadingView title={title} />;
+  }
+  if (!store) {
+    return <DetailNotFoundView title={title} id={vectorStoreId} />;
+  }
+
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>File Information</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoadingFile ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          ) : errorFile ? (
+            <div className="text-destructive text-sm">
+              Error loading file: {errorFile.message}
+            </div>
+          ) : file ? (
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-lg font-medium mb-2">File Details</h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">Status:</span>
+                    <span className="ml-2">{file.status}</span>
+                  </div>
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">Size:</span>
+                    <span className="ml-2">{file.usage_bytes} bytes</span>
+                  </div>
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">Created:</span>
+                    <span className="ml-2">{new Date(file.created_at * 1000).toLocaleString()}</span>
+                  </div>
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">Content Strategy:</span>
+                    <span className="ml-2">{file.chunking_strategy.type}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="border-t pt-4">
+                <h3 className="text-lg font-medium mb-3">Actions</h3>
+                <Button
+                  onClick={handleViewContents}
+                  className="flex items-center gap-2 hover:bg-primary/90 dark:hover:bg-primary/80 hover:scale-105 transition-all duration-200"
+                >
+                  <List className="h-4 w-4" />
+                  View Contents
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              File not found.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Content Summary</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoadingContents ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          ) : errorContents ? (
+            <div className="text-destructive text-sm">
+              Error loading content summary: {errorContents.message}
+            </div>
+          ) : contents && contents.content.length > 0 ? (
+            <div className="space-y-3">
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="font-medium text-gray-600 dark:text-gray-400">Content Items:</span>
+                  <span className="ml-2">{contents.content.length}</span>
+                </div>
+                <div>
+                  <span className="font-medium text-gray-600 dark:text-gray-400">Total Characters:</span>
+                  <span className="ml-2">{contents.content.reduce((total, item) => total + item.text.length, 0)}</span>
+                </div>
+              </div>
+              <div className="pt-2">
+                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Preview:</span>
+                <div className="mt-1 bg-gray-50 dark:bg-gray-800 rounded-md p-3">
+                  <p className="text-sm text-gray-900 dark:text-gray-100 line-clamp-3">
+                    {contents.content[0]?.text.substring(0, 200)}...
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No contents found for this file.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem label="File ID" value={fileId} />
+      <PropertyItem label="Vector Store ID" value={vectorStoreId} />
+      {file && (
+        <>
+          <PropertyItem label="Status" value={file.status} />
+          <PropertyItem
+            label="Created"
+            value={new Date(file.created_at * 1000).toLocaleString()}
+          />
+          <PropertyItem label="Usage Bytes" value={file.usage_bytes} />
+          <PropertyItem
+            label="Content Strategy"
+            value={file.chunking_strategy.type}
+          />
+        </>
+      )}
+      {store && (
+        <>
+          <PropertyItem label="Store Name" value={store.name || ""} />
+          <PropertyItem
+            label="Provider ID"
+            value={(store.metadata.provider_id as string) || ""}
+          />
+        </>
+      )}
+    </PropertiesCard>
+  );
+
+  return (
+    <>
+      <PageBreadcrumb segments={breadcrumbSegments} />
+      <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+    </>
+  );
+}
diff --git a/llama_stack/ui/app/logs/vector-stores/layout.tsx b/llama_stack/ui/app/logs/vector-stores/layout.tsx
index 9245f5486..921d505be 100644
--- a/llama_stack/ui/app/logs/vector-stores/layout.tsx
+++ b/llama_stack/ui/app/logs/vector-stores/layout.tsx
@@ -1,16 +1,31 @@
 "use client";
 
-import React from "react";
-import LogsLayout from "@/components/layout/logs-layout";
+import { useParams, usePathname } from "next/navigation";
+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>
   );
 }
diff --git a/llama_stack/ui/app/logs/vector-stores/page.tsx b/llama_stack/ui/app/logs/vector-stores/page.tsx
index 29e1fabd6..664513caa 100644
--- a/llama_stack/ui/app/logs/vector-stores/page.tsx
+++ b/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,73 +50,92 @@ export default function VectorStoresPage() {
     }
   }, [status, hasMore, loadMore]);
 
-  if (status === "loading") {
+  const renderContent = () => {
+    if (status === "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 (status === "error") {
+      return <div className="text-destructive">Error: {error?.message}</div>;
+    }
+
+    if (!stores || stores.length === 0) {
+      return <p>No vector stores found.</p>;
+    }
+
     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>
+        <div className="overflow-auto flex-1 min-h-0">
+          <Table>
+            <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}
+                        onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
+                        className="cursor-pointer hover:bg-muted/50"
+                    >
+                    <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()}
+                      </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>
+        </div>
     );
-  }
-
-  if (status === "error") {
-    return <div className="text-destructive">Error: {error?.message}</div>;
-  }
-
-  if (!stores || stores.length === 0) {
-    return <p>No vector stores found.</p>;
-  }
+  };
 
   return (
-    <div className="overflow-auto flex-1 min-h-0">
-      <Table>
-        <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}
-                onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
-                className="cursor-pointer 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>
-    </div>
+      <div className="space-y-4">
+        <h1 className="text-2xl font-semibold">Vector Stores</h1>
+        {renderContent()}
+      </div>
   );
 }
diff --git a/llama_stack/ui/components/vector-stores/vector-store-detail.tsx b/llama_stack/ui/components/vector-stores/vector-store-detail.tsx
index 7c5c91dd3..6e26d2e3d 100644
--- a/llama_stack/ui/components/vector-stores/vector-store-detail.tsx
+++ b/llama_stack/ui/components/vector-stores/vector-store-detail.tsx
@@ -1,9 +1,11 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 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 {
   DetailLoadingView,
   DetailErrorView,
@@ -42,6 +44,11 @@ export function VectorStoreDetailView({
   id,
 }: VectorStoreDetailViewProps) {
   const title = "Vector Store Details";
+  const router = useRouter();
+
+  const handleFileClick = (fileId: string) => {
+    router.push(`/logs/vector-stores/${id}/files/${fileId}`);
+  };
 
   if (errorStore) {
     return <DetailErrorView title={title} id={id} error={errorStore} />;
@@ -80,7 +87,15 @@ export function VectorStoreDetailView({
               <TableBody>
                 {files.map((file) => (
                   <TableRow key={file.id}>
-                    <TableCell>{file.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={() => handleFileClick(file.id)}
+                      >
+                        {file.id}
+                      </Button>
+                    </TableCell>
                     <TableCell>{file.status}</TableCell>
                     <TableCell>
                       {new Date(file.created_at * 1000).toLocaleString()}
diff --git a/llama_stack/ui/lib/contents-api.ts b/llama_stack/ui/lib/contents-api.ts
new file mode 100644
index 000000000..b8fcdb1a2
--- /dev/null
+++ b/llama_stack/ui/lib/contents-api.ts
@@ -0,0 +1,112 @@
+import type { FileContentResponse } from "llama-stack-client/resources/vector-stores/files";
+import type { LlamaStackClient } from "llama-stack-client";
+
+export type VectorStoreContent = FileContentResponse.Content;
+export type VectorStoreContentsResponse = FileContentResponse;
+
+export interface VectorStoreContentItem {
+  id: string;
+  object: string;
+  created_timestamp: number;
+  vector_store_id: string;
+  file_id: string;
+  content: VectorStoreContent;
+  metadata: Record<string, any>;
+  embedding?: number[];
+}
+
+export interface VectorStoreContentDeleteResponse {
+  id: string;
+  object: string;
+  deleted: boolean;
+}
+
+export interface VectorStoreListContentsResponse {
+  object: string;
+  data: VectorStoreContentItem[];
+  first_id?: string;
+  last_id?: string;
+  has_more: boolean;
+}
+
+export class ContentsAPI {
+  constructor(private client: LlamaStackClient) {}
+
+  async getFileContents(vectorStoreId: string, fileId: string): Promise<VectorStoreContentsResponse> {
+    return this.client.vectorStores.files.content(vectorStoreId, fileId);
+  }
+
+  async getContent(vectorStoreId: string, fileId: string, contentId: string): Promise<VectorStoreContentItem> {
+    const contentsResponse = await this.listContents(vectorStoreId, fileId);
+    const targetContent = contentsResponse.data.find(c => c.id === contentId);
+
+    if (!targetContent) {
+      throw new Error(`Content ${contentId} not found`);
+    }
+
+    return targetContent;
+  }
+
+  async updateContent(
+    vectorStoreId: string,
+    fileId: string,
+    contentId: string,
+    updates: { content?: string; metadata?: Record<string, any> }
+  ): Promise<VectorStoreContentItem> {
+    throw new Error("Individual content updates not yet implemented in API");
+  }
+
+  async deleteContent(vectorStoreId: string, fileId: string, contentId: string): Promise<VectorStoreContentDeleteResponse> {
+    throw new Error("Individual content deletion not yet implemented in API");
+  }
+
+  async listContents(
+    vectorStoreId: string,
+    fileId: string,
+    options?: {
+      limit?: number;
+      order?: string;
+      after?: string;
+      before?: string;
+    }
+  ): Promise<VectorStoreListContentsResponse> {
+    const fileContents = await this.client.vectorStores.files.content(vectorStoreId, fileId);
+    const contentItems: VectorStoreContentItem[] = [];
+
+    fileContents.content.forEach((content, contentIndex) => {
+      const rawContent = content as any;
+
+      // Extract actual fields from the API response
+      const embedding = rawContent.embedding || undefined;
+      const created_timestamp = rawContent.created_timestamp || rawContent.created_at || Date.now() / 1000;
+      const chunkMetadata = rawContent.chunk_metadata || {};
+      const contentId = rawContent.chunk_metadata?.chunk_id || rawContent.id || `content_${fileId}_${contentIndex}`;
+      const objectType = rawContent.object || 'vector_store.file.content';
+      contentItems.push({
+        id: contentId,
+        object: objectType,
+        created_timestamp: created_timestamp,
+        vector_store_id: vectorStoreId,
+        file_id: fileId,
+        content: content,
+        embedding: embedding,
+        metadata: {
+          ...chunkMetadata, // chunk_metadata fields from API
+          content_length: content.type === 'text' ? content.text.length : 0,
+        },
+      });
+    });
+
+    // apply pagination if needed
+    let filteredItems = contentItems;
+    if (options?.limit) {
+      filteredItems = filteredItems.slice(0, options.limit);
+    }
+
+    return {
+      object: 'list',
+      data: filteredItems,
+      has_more: contentItems.length > (options?.limit || contentItems.length),
+    };
+  }
+}
diff --git a/llama_stack/ui/package-lock.json b/llama_stack/ui/package-lock.json
index 567c06f7e..bc6263732 100644
--- a/llama_stack/ui/package-lock.json
+++ b/llama_stack/ui/package-lock.json
@@ -18,7 +18,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.18.2",
-        "llama-stack-client": "0.2.16",
+        "llama-stack-client": "0.2.17",
         "lucide-react": "^0.510.0",
         "next": "15.3.3",
         "next-auth": "^4.24.11",
@@ -9926,10 +9926,10 @@
       "license": "MIT"
     },
     "node_modules/llama-stack-client": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/llama-stack-client/-/llama-stack-client-0.2.16.tgz",
-      "integrity": "sha512-jM7sh1CB5wVumutYb3qfmYJpoTe3IRAa5lm3Us4qO7zVP4tbo3eCE7BOFNWyChpjo9efafUItwogNh28pum9PQ==",
-      "license": "Apache-2.0",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/llama-stack-client/-/llama-stack-client-0.2.17.tgz",
+      "integrity": "sha512-+/fEO8M7XPiVLjhH7ge18i1ijKp4+h3dOkE0C8g2cvGuDUtDYIJlf8NSyr9OMByjiWpCibWU7VOKL50LwGLS3Q==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",

From 0b5a794c27949eb573b6d43108aa938805d232dd Mon Sep 17 00:00:00 2001
From: ehhuang <ehhuang@users.noreply.github.com>
Date: Fri, 8 Aug 2025 13:47:36 -0700
Subject: [PATCH 3/6] fix: telemetry logger spams when queue is full (#3070)

# What does this PR do?


## Test Plan
Ran a stress test on chat completion endpoint locally:

For 10 concurrent users over 3 minutes:
Before:
<img width="1440" height="201" alt="image"
src="https://github.com/user-attachments/assets/24e0d580-186e-4e24-931e-2b936c5859b6"
/>

After:
<img width="1434" height="204" alt="image"
src="https://github.com/user-attachments/assets/4b806d88-f822-41e9-b25a-018cc4bec866"
/>

(Will send scripts in a future PR.)
---
 .../providers/utils/telemetry/tracing.py      | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/llama_stack/providers/utils/telemetry/tracing.py b/llama_stack/providers/utils/telemetry/tracing.py
index 75b29cdce..7080e774a 100644
--- a/llama_stack/providers/utils/telemetry/tracing.py
+++ b/llama_stack/providers/utils/telemetry/tracing.py
@@ -9,7 +9,9 @@ import contextvars
 import logging
 import queue
 import random
+import sys
 import threading
+import time
 from collections.abc import Callable
 from datetime import UTC, datetime
 from functools import wraps
@@ -30,6 +32,16 @@ from llama_stack.providers.utils.telemetry.trace_protocol import serialize_value
 
 logger = get_logger(__name__, category="core")
 
+# Fallback logger that does NOT propagate to TelemetryHandler to avoid recursion
+_fallback_logger = logging.getLogger("llama_stack.telemetry.background")
+if not _fallback_logger.handlers:
+    _fallback_logger.propagate = False
+    _fallback_logger.setLevel(logging.ERROR)
+    _fallback_handler = logging.StreamHandler(sys.stderr)
+    _fallback_handler.setLevel(logging.ERROR)
+    _fallback_handler.setFormatter(logging.Formatter("%(asctime)s [%(levelname)s] %(name)s: %(message)s"))
+    _fallback_logger.addHandler(_fallback_handler)
+
 
 INVALID_SPAN_ID = 0x0000000000000000
 INVALID_TRACE_ID = 0x00000000000000000000000000000000
@@ -79,19 +91,32 @@ def generate_trace_id() -> str:
 CURRENT_TRACE_CONTEXT = contextvars.ContextVar("trace_context", default=None)
 BACKGROUND_LOGGER = None
 
+LOG_QUEUE_FULL_LOG_INTERVAL_SECONDS = 60.0
+
 
 class BackgroundLogger:
     def __init__(self, api: Telemetry, capacity: int = 100000):
         self.api = api
-        self.log_queue = queue.Queue(maxsize=capacity)
+        self.log_queue: queue.Queue[Any] = queue.Queue(maxsize=capacity)
         self.worker_thread = threading.Thread(target=self._process_logs, daemon=True)
         self.worker_thread.start()
+        self._last_queue_full_log_time: float = 0.0
+        self._dropped_since_last_notice: int = 0
 
     def log_event(self, event):
         try:
             self.log_queue.put_nowait(event)
         except queue.Full:
-            logger.error("Log queue is full, dropping event")
+            # Aggregate drops and emit at most once per interval via fallback logger
+            self._dropped_since_last_notice += 1
+            current_time = time.time()
+            if current_time - self._last_queue_full_log_time >= LOG_QUEUE_FULL_LOG_INTERVAL_SECONDS:
+                _fallback_logger.error(
+                    "Log queue is full; dropped %d events since last notice",
+                    self._dropped_since_last_notice,
+                )
+                self._last_queue_full_log_time = current_time
+                self._dropped_since_last_notice = 0
 
     def _process_logs(self):
         while True:

From 1677d6bffdf0a002abe3b827c460df4930ee83c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vlastimil=20Eli=C3=A1=C5=A1?=
 <vlastimil.elias@worldonline.cz>
Date: Fri, 8 Aug 2025 22:48:15 +0200
Subject: [PATCH 4/6] feat: Flash-Lite 2.0 and 2.5 models added to Gemini
 inference provider (#3058)

PR adds Flash-Lite 2.0 and 2.5 models to the Gemini inference provider

Closes #3046

## Test Plan
I was not able to locate any existing test for this provider, so I
performed manual testing. But the change is really trivial and
straightforward.
---
 llama_stack/providers/remote/inference/gemini/models.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/llama_stack/providers/remote/inference/gemini/models.py b/llama_stack/providers/remote/inference/gemini/models.py
index 6fda35e0f..bd696b0ac 100644
--- a/llama_stack/providers/remote/inference/gemini/models.py
+++ b/llama_stack/providers/remote/inference/gemini/models.py
@@ -13,7 +13,9 @@ LLM_MODEL_IDS = [
     "gemini-1.5-flash",
     "gemini-1.5-pro",
     "gemini-2.0-flash",
+    "gemini-2.0-flash-lite",
     "gemini-2.5-flash",
+    "gemini-2.5-flash-lite",
     "gemini-2.5-pro",
 ]
 

From ce72a2852516bbd702d202b2f4426478643faea0 Mon Sep 17 00:00:00 2001
From: Varsha <varshaprasad96@gmail.com>
Date: Sun, 10 Aug 2025 15:48:36 -0700
Subject: [PATCH 5/6] docs: Update doc on search modes for Milvus (#3078)

# What does this PR do?
Update Milvus doc on using search modes.

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

## Test Plan
<!-- Describe the tests you ran to verify your changes with result
summaries. *Provide clear instructions so the plan can be easily
re-executed.* -->

Signed-off-by: Varsha Prasad Narsing <varshaprasad96@gmail.com>
---
 .../providers/vector_io/remote_milvus.md      | 87 +++++++++++++++++++
 llama_stack/providers/registry/vector_io.py   | 87 +++++++++++++++++++
 2 files changed, 174 insertions(+)

diff --git a/docs/source/providers/vector_io/remote_milvus.md b/docs/source/providers/vector_io/remote_milvus.md
index 3646f4acc..2af64b8bb 100644
--- a/docs/source/providers/vector_io/remote_milvus.md
+++ b/docs/source/providers/vector_io/remote_milvus.md
@@ -11,6 +11,7 @@ That means you're not limited to storing vectors in memory or in a separate serv
 
 - Easy to use
 - Fully integrated with Llama Stack
+- Supports all search modes: vector, keyword, and hybrid search (both inline and remote configurations)
 
 ## Usage
 
@@ -101,6 +102,92 @@ vector_io:
 - **`client_pem_path`**: Path to the **client certificate** file (required for mTLS).
 - **`client_key_path`**: Path to the **client private key** file (required for mTLS).
 
+## Search Modes
+
+Milvus supports three different search modes for both inline and remote configurations:
+
+### Vector Search
+Vector search uses semantic similarity to find the most relevant chunks based on embedding vectors. This is the default search mode and works well for finding conceptually similar content.
+
+```python
+# Vector search example
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="What is machine learning?",
+    search_mode="vector",
+    max_num_results=5,
+)
+```
+
+### Keyword Search
+Keyword search uses traditional text-based matching to find chunks containing specific terms or phrases. This is useful when you need exact term matches.
+
+```python
+# Keyword search example
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="Python programming language",
+    search_mode="keyword",
+    max_num_results=5,
+)
+```
+
+### Hybrid Search
+Hybrid search combines both vector and keyword search methods to provide more comprehensive results. It leverages the strengths of both semantic similarity and exact term matching.
+
+#### Basic Hybrid Search
+```python
+# Basic hybrid search example (uses RRF ranker with default impact_factor=60.0)
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+)
+```
+
+**Note**: The default `impact_factor` value of 60.0 was empirically determined to be optimal in the original RRF research paper: ["Reciprocal Rank Fusion outperforms Condorcet and individual Rank Learning Methods"](https://plg.uwaterloo.ca/~gvcormac/cormacksigir09-rrf.pdf) (Cormack et al., 2009).
+
+#### Hybrid Search with RRF (Reciprocal Rank Fusion) Ranker
+RRF combines rankings from vector and keyword search by using reciprocal ranks. The impact factor controls how much weight is given to higher-ranked results.
+
+```python
+# Hybrid search with custom RRF parameters
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+    ranking_options={
+        "ranker": {
+            "type": "rrf",
+            "impact_factor": 100.0,  # Higher values give more weight to top-ranked results
+        }
+    },
+)
+```
+
+#### Hybrid Search with Weighted Ranker
+Weighted ranker linearly combines normalized scores from vector and keyword search. The alpha parameter controls the balance between the two search methods.
+
+```python
+# Hybrid search with weighted ranker
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+    ranking_options={
+        "ranker": {
+            "type": "weighted",
+            "alpha": 0.7,  # 70% vector search, 30% keyword search
+        }
+    },
+)
+```
+
+For detailed documentation on RRF and Weighted rankers, please refer to the [Milvus Reranking Guide](https://milvus.io/docs/reranking.md).
+
 ## Documentation
 See the [Milvus documentation](https://milvus.io/docs/install-overview.md) for more details about Milvus in general.
 
diff --git a/llama_stack/providers/registry/vector_io.py b/llama_stack/providers/registry/vector_io.py
index 846f7b88e..b4f3ab6ac 100644
--- a/llama_stack/providers/registry/vector_io.py
+++ b/llama_stack/providers/registry/vector_io.py
@@ -535,6 +535,7 @@ That means you're not limited to storing vectors in memory or in a separate serv
 
 - Easy to use
 - Fully integrated with Llama Stack
+- Supports all search modes: vector, keyword, and hybrid search (both inline and remote configurations)
 
 ## Usage
 
@@ -625,6 +626,92 @@ vector_io:
 - **`client_pem_path`**: Path to the **client certificate** file (required for mTLS).
 - **`client_key_path`**: Path to the **client private key** file (required for mTLS).
 
+## Search Modes
+
+Milvus supports three different search modes for both inline and remote configurations:
+
+### Vector Search
+Vector search uses semantic similarity to find the most relevant chunks based on embedding vectors. This is the default search mode and works well for finding conceptually similar content.
+
+```python
+# Vector search example
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="What is machine learning?",
+    search_mode="vector",
+    max_num_results=5,
+)
+```
+
+### Keyword Search
+Keyword search uses traditional text-based matching to find chunks containing specific terms or phrases. This is useful when you need exact term matches.
+
+```python
+# Keyword search example
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="Python programming language",
+    search_mode="keyword",
+    max_num_results=5,
+)
+```
+
+### Hybrid Search
+Hybrid search combines both vector and keyword search methods to provide more comprehensive results. It leverages the strengths of both semantic similarity and exact term matching.
+
+#### Basic Hybrid Search
+```python
+# Basic hybrid search example (uses RRF ranker with default impact_factor=60.0)
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+)
+```
+
+**Note**: The default `impact_factor` value of 60.0 was empirically determined to be optimal in the original RRF research paper: ["Reciprocal Rank Fusion outperforms Condorcet and individual Rank Learning Methods"](https://plg.uwaterloo.ca/~gvcormac/cormacksigir09-rrf.pdf) (Cormack et al., 2009).
+
+#### Hybrid Search with RRF (Reciprocal Rank Fusion) Ranker
+RRF combines rankings from vector and keyword search by using reciprocal ranks. The impact factor controls how much weight is given to higher-ranked results.
+
+```python
+# Hybrid search with custom RRF parameters
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+    ranking_options={
+        "ranker": {
+            "type": "rrf",
+            "impact_factor": 100.0,  # Higher values give more weight to top-ranked results
+        }
+    },
+)
+```
+
+#### Hybrid Search with Weighted Ranker
+Weighted ranker linearly combines normalized scores from vector and keyword search. The alpha parameter controls the balance between the two search methods.
+
+```python
+# Hybrid search with weighted ranker
+search_response = client.vector_stores.search(
+    vector_store_id=vector_store.id,
+    query="neural networks in Python",
+    search_mode="hybrid",
+    max_num_results=5,
+    ranking_options={
+        "ranker": {
+            "type": "weighted",
+            "alpha": 0.7,  # 70% vector search, 30% keyword search
+        }
+    },
+)
+```
+
+For detailed documentation on RRF and Weighted rankers, please refer to the [Milvus Reranking Guide](https://milvus.io/docs/reranking.md).
+
 ## Documentation
 See the [Milvus documentation](https://milvus.io/docs/install-overview.md) for more details about Milvus in general.
 

From 69dc789e15421e717d447042593cde08c61ad9e2 Mon Sep 17 00:00:00 2001
From: Varsha <varshaprasad96@gmail.com>
Date: Sun, 10 Aug 2025 16:34:34 -0700
Subject: [PATCH 6/6] docs: Add unsupported search mode info about FAISS
 (#3089)

---
 docs/source/providers/vector_io/inline_faiss.md      | 12 ++++++++++++
 .../providers/inline/vector_io/faiss/faiss.py        |  8 ++++++--
 llama_stack/providers/registry/vector_io.py          | 12 ++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docs/source/providers/vector_io/inline_faiss.md b/docs/source/providers/vector_io/inline_faiss.md
index bcff66f3f..cfa18a839 100644
--- a/docs/source/providers/vector_io/inline_faiss.md
+++ b/docs/source/providers/vector_io/inline_faiss.md
@@ -12,6 +12,18 @@ That means you'll get fast and efficient vector retrieval.
 - Lightweight and easy to use
 - Fully integrated with Llama Stack
 - GPU support
+- **Vector search** - FAISS supports pure vector similarity search using embeddings
+
+## Search Modes
+
+**Supported:**
+- **Vector Search** (`mode="vector"`): Performs vector similarity search using embeddings
+
+**Not Supported:**
+- **Keyword Search** (`mode="keyword"`): Not supported by FAISS
+- **Hybrid Search** (`mode="hybrid"`): Not supported by FAISS
+
+> **Note**: FAISS is designed as a pure vector similarity search library. See the [FAISS GitHub repository](https://github.com/facebookresearch/faiss) for more details about FAISS's core functionality.
 
 ## Usage
 
diff --git a/llama_stack/providers/inline/vector_io/faiss/faiss.py b/llama_stack/providers/inline/vector_io/faiss/faiss.py
index 7a5373726..5a063592c 100644
--- a/llama_stack/providers/inline/vector_io/faiss/faiss.py
+++ b/llama_stack/providers/inline/vector_io/faiss/faiss.py
@@ -174,7 +174,9 @@ class FaissIndex(EmbeddingIndex):
         k: int,
         score_threshold: float,
     ) -> QueryChunksResponse:
-        raise NotImplementedError("Keyword search is not supported in FAISS")
+        raise NotImplementedError(
+            "Keyword search is not supported - underlying DB FAISS does not support this search mode"
+        )
 
     async def query_hybrid(
         self,
@@ -185,7 +187,9 @@ class FaissIndex(EmbeddingIndex):
         reranker_type: str,
         reranker_params: dict[str, Any] | None = None,
     ) -> QueryChunksResponse:
-        raise NotImplementedError("Hybrid search is not supported in FAISS")
+        raise NotImplementedError(
+            "Hybrid search is not supported - underlying DB FAISS does not support this search mode"
+        )
 
 
 class FaissVectorIOAdapter(OpenAIVectorStoreMixin, VectorIO, VectorDBsProtocolPrivate):
diff --git a/llama_stack/providers/registry/vector_io.py b/llama_stack/providers/registry/vector_io.py
index b4f3ab6ac..ed170b508 100644
--- a/llama_stack/providers/registry/vector_io.py
+++ b/llama_stack/providers/registry/vector_io.py
@@ -45,6 +45,18 @@ That means you'll get fast and efficient vector retrieval.
 - Lightweight and easy to use
 - Fully integrated with Llama Stack
 - GPU support
+- **Vector search** - FAISS supports pure vector similarity search using embeddings
+
+## Search Modes
+
+**Supported:**
+- **Vector Search** (`mode="vector"`): Performs vector similarity search using embeddings
+
+**Not Supported:**
+- **Keyword Search** (`mode="keyword"`): Not supported by FAISS
+- **Hybrid Search** (`mode="hybrid"`): Not supported by FAISS
+
+> **Note**: FAISS is designed as a pure vector similarity search library. See the [FAISS GitHub repository](https://github.com/facebookresearch/faiss) for more details about FAISS's core functionality.
 
 ## Usage