fixing linter

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

llama_stack/ui/app/api/fetch-url/route.ts

@@ -1,47 +1,45 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   try {
     const { url } = await request.json();
 
-    if (!url || typeof url !== 'string') {
+    if (!url || typeof url !== "string") {
-      return NextResponse.json(
+      return NextResponse.json({ error: "URL is required" }, { status: 400 });
-        { error: 'URL is required' },
-        { status: 400 }
-      );
     }
 
     // Fetch the URL content
     const response = await fetch(url, {
       headers: {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+        "User-Agent":
-      }
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
+      },
     });
 
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
 
-    const contentType = response.headers.get('content-type') || '';
+    const contentType = response.headers.get("content-type") || "";
     let content: string;
 
-    if (contentType.includes('application/json')) {
+    if (contentType.includes("application/json")) {
       const json = await response.json();
       content = JSON.stringify(json, null, 2);
-    } else if (contentType.includes('text/html')) {
+    } else if (contentType.includes("text/html")) {
       const html = await response.text();
       // Basic HTML to text conversion - remove tags and decode entities
       content = html
-        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
-        .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+        .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "")
-        .replace(/<[^>]*>/g, '')
+        .replace(/<[^>]*>/g, "")
-        .replace(/&nbsp;/g, ' ')
+        .replace(/&nbsp;/g, " ")
-        .replace(/&amp;/g, '&')
+        .replace(/&amp;/g, "&")
-        .replace(/&lt;/g, '<')
+        .replace(/&lt;/g, "<")
-        .replace(/&gt;/g, '>')
+        .replace(/&gt;/g, ">")
         .replace(/&quot;/g, '"')
         .replace(/&#39;/g, "'")
-        .replace(/\s+/g, ' ')
+        .replace(/\s+/g, " ")
         .trim();
     } else {
       content = await response.text();
@@ -49,9 +47,9 @@ export async function POST(request: NextRequest) {
 
     return NextResponse.json({ content });
   } catch (error) {
-    console.error('Error fetching URL:', error);
+    console.error("Error fetching URL:", error);
     return NextResponse.json(
-      { error: 'Failed to fetch URL content' },
+      { error: "Failed to fetch URL content" },
       { status: 500 }
     );
   }

llama_stack/ui/app/api/upload-document/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData();
+    const file = formData.get("file") as File;
+    const vectorDbId = formData.get("vectorDbId") as string;
+
+    if (!file || !vectorDbId) {
+      return NextResponse.json(
+        { error: "File and vectorDbId are required" },
+        { status: 400 }
+      );
+    }
+
+    // Read file content based on type
+    let content: string;
+    const mimeType = file.type || "application/octet-stream";
+
+    if (mimeType === "text/plain" || mimeType === "text/markdown") {
+      content = await file.text();
+    } else if (mimeType === "application/pdf") {
+      // For PDFs, convert to base64 on the server side
+      const arrayBuffer = await file.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      let binary = "";
+      for (let i = 0; i < bytes.byteLength; i++) {
+        binary += String.fromCharCode(bytes[i]);
+      }
+      const base64 = btoa(binary);
+      content = `data:${mimeType};base64,${base64}`;
+    } else {
+      // Try to read as text
+      content = await file.text();
+    }
+
+    // Return the processed content for the client to send to RagTool
+    return NextResponse.json({
+      content,
+      mimeType,
+      fileName: file.name,
+      fileSize: file.size,
+    });
+  } catch (error) {
+    console.error("Error processing file upload:", error);
+    return NextResponse.json(
+      { error: "Failed to process file upload" },
+      { status: 500 }
+    );
+  }
+}

llama_stack/ui/app/chat-playground/page.tsx

@@ -16,69 +16,96 @@ import { useAuthClient } from "@/hooks/use-auth-client";
 import type { CompletionCreateParams } from "llama-stack-client/resources/chat/completions";
 import type { Model } from "llama-stack-client/resources/models";
 import type { VectorDBListResponse } from "llama-stack-client/resources/vector-dbs";
-import { VectorDbManager } from "@/components/vector-db/vector-db-manager";
+import { VectorDbManager } from "@/components/vector-db/vector-db-manager-simple";
-import { SessionManager, SessionUtils } from "@/components/chat-playground/session-manager";
+import {
+  SessionManager,
+  SessionUtils,
+} from "@/components/chat-playground/session-manager";
+import { DocumentUploader } from "@/components/chat-playground/document-uploader";
+
+/**
+ * Unified Chat Playground
+ * - Keeps session + system message + VectorDB/RAG & document upload from version B
+ * - Preserves simple message flow & suggestions/append helpers from version A
+ * - Uses a single state source of truth: currentSession
+ */
 
 interface ChatSession {
   id: string;
   name: string;
   messages: Message[];
   selectedModel: string;
-  selectedVectorDb: string;
+  selectedVectorDb: string; // "none" disables RAG
+  systemMessage: string;
   createdAt: number;
   updatedAt: number;
 }
 
 export default function ChatPlaygroundPage() {
-  const [currentSession, setCurrentSession] = useState<ChatSession | null>(null);
+  const [currentSession, setCurrentSession] = useState<ChatSession | null>(
+    null
+  );
   const [input, setInput] = useState("");
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState<string | null>(null);
+
   const [models, setModels] = useState<Model[]>([]);
-  const [selectedModel, setSelectedModel] = useState<string>("");
   const [modelsLoading, setModelsLoading] = useState(true);
   const [modelsError, setModelsError] = useState<string | null>(null);
+
   const [vectorDbs, setVectorDbs] = useState<VectorDBListResponse>([]);
-  const [selectedVectorDb, setSelectedVectorDb] = useState<string>("");
   const [vectorDbsLoading, setVectorDbsLoading] = useState(true);
   const [vectorDbsError, setVectorDbsError] = useState<string | null>(null);
-  const client = useAuthClient();
 
+  const client = useAuthClient();
   const isModelsLoading = modelsLoading ?? true;
 
-  // Load current session on mount
+  // --- Session bootstrapping ---
   useEffect(() => {
-    const savedSession = SessionUtils.loadCurrentSession();
+    const saved = SessionUtils.loadCurrentSession();
-    if (savedSession) {
+    if (saved) {
-      setCurrentSession(savedSession);
+      setCurrentSession(saved);
     } else {
-      // Create default session if none exists - will be updated with model when models load
+      const def = SessionUtils.createDefaultSession();
-      const defaultSession = SessionUtils.createDefaultSession();
+      // ensure defaults align with our fields
+      const defaultSession: ChatSession = {
+        ...def,
+        selectedModel: "",
+        selectedVectorDb: "none",
+        systemMessage: def.systemMessage || "You are a helpful assistant.",
+      };
       setCurrentSession(defaultSession);
       SessionUtils.saveCurrentSession(defaultSession);
     }
   }, []);
 
-  // Save session when it changes
+  // Persist session on change
   useEffect(() => {
-    if (currentSession) {
+    if (currentSession) SessionUtils.saveCurrentSession(currentSession);
-      SessionUtils.saveCurrentSession(currentSession);
-    }
   }, [currentSession]);
 
+  // --- Fetch models & vector DBs ---
   useEffect(() => {
     const fetchModels = async () => {
       try {
         setModelsLoading(true);
         setModelsError(null);
-        const modelList = await client.models.list();
+        const list = await client.models.list();
-        const llmModels = modelList.filter(model => model.model_type === "llm");
+        const llms = list.filter(m => m.model_type === "llm");
-        setModels(llmModels);
+        setModels(llms);
-        if (llmModels.length > 0 && currentSession && !currentSession.selectedModel) {
+        if (llms.length > 0) {
-          setCurrentSession(prev => prev ? { ...prev, selectedModel: llmModels[0].identifier } : null);
+          setCurrentSession(prev =>
+            prev && !prev.selectedModel
+              ? {
+                  ...prev,
+                  selectedModel: llms[0].identifier,
+                  updatedAt: Date.now(),
+                }
+              : prev
+          );
         }
-      } catch (err) {
+      } catch (e) {
-        console.error("Error fetching models:", err);
+        console.error("Error fetching models:", e);
         setModelsError("Failed to fetch available models");
       } finally {
         setModelsLoading(false);
@@ -89,10 +116,16 @@ export default function ChatPlaygroundPage() {
       try {
         setVectorDbsLoading(true);
         setVectorDbsError(null);
-        const vectorDbList = await client.vectorDBs.list();
+        const list = await client.vectorDBs.list();
-        setVectorDbs(vectorDbList);
+        setVectorDbs(list);
-      } catch (err) {
+        // default to "none" if not set
-        console.error("Error fetching vector DBs:", err);
+        setCurrentSession(prev =>
+          prev && !prev.selectedVectorDb
+            ? { ...prev, selectedVectorDb: "none", updatedAt: Date.now() }
+            : prev
+        );
+      } catch (e) {
+        console.error("Error fetching vector DBs:", e);
         setVectorDbsError("Failed to fetch available vector databases");
       } finally {
         setVectorDbsLoading(false);
@@ -103,10 +136,9 @@ export default function ChatPlaygroundPage() {
     fetchVectorDbs();
   }, [client]);
 
+  // --- Utilities ---
   const extractTextContent = (content: unknown): string => {
-    if (typeof content === "string") {
+    if (typeof content === "string") return content;
-      return content;
-    }
     if (Array.isArray(content)) {
       return content
         .filter(
@@ -114,11 +146,11 @@ export default function ChatPlaygroundPage() {
             item &&
             typeof item === "object" &&
             "type" in item &&
-            item.type === "text"
+            (item as { type: string }).type === "text"
         )
         .map(item =>
           item && typeof item === "object" && "text" in item
-            ? String(item.text)
+            ? String((item as { text: unknown }).text)
             : ""
         )
         .join("");
@@ -127,23 +159,23 @@ export default function ChatPlaygroundPage() {
       content &&
       typeof content === "object" &&
       "type" in content &&
-      content.type === "text" &&
+      (content as { type: string }).type === "text" &&
       "text" in content
     ) {
-      return String(content.text) || "";
+      return String((content as { text: unknown }).text) || "";
     }
     return "";
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  // --- Handlers ---
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
     setInput(e.target.value);
-  };
 
-const handleSubmit = async (event?: { preventDefault?: () => void }) => {
+  const handleSubmit = async (event?: { preventDefault?: () => void }) => {
-  event?.preventDefault?.();
+    event?.preventDefault?.();
-  if (!input.trim() || !currentSession || !currentSession.selectedModel) return;
+    if (!input.trim() || !currentSession || !currentSession.selectedModel)
+      return;
 
-    // Add user message to chat
     const userMessage: Message = {
       id: Date.now().toString(),
       role: "user",
@@ -151,70 +183,79 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
       createdAt: new Date(),
     };
 
-  setCurrentSession(prev => prev ? {
+    setCurrentSession(prev =>
-    ...prev,
+      prev
-    messages: [...prev.messages, userMessage],
+        ? {
-    updatedAt: Date.now()
+            ...prev,
-  } : null);
+            messages: [...prev.messages, userMessage],
-  setInput("");
+            updatedAt: Date.now(),
+          }
+        : prev
+    );
+    setInput("");
 
-    // Use the helper function with the content
+  // Use the helper function with the content
-    await handleSubmitWithContent(userMessage.content);
+  await handleSubmitWithContent(userMessage.content);
-  };
+};
 
   const handleSubmitWithContent = async (content: string) => {
     setIsGenerating(true);
     setError(null);
 
-  try {
+    try {
-    let enhancedContent = content;
+      let enhancedContent = content;
 
-    // If a vector DB is selected, query for relevant context
+      // --- RAG augmentation (optional) ---
-    if (currentSession?.selectedVectorDb && currentSession.selectedVectorDb !== "none") {
+      if (
-      try {
+        currentSession?.selectedVectorDb &&
-        const vectorResponse = await client.vectorIo.query({
+        currentSession.selectedVectorDb !== "none"
-          query: content,
+      ) {
-          vector_db_id: currentSession.selectedVectorDb,
+        try {
-        });
+          const vectorResponse = await client.vectorIo.query({
+            query: content,
+            vector_db_id: currentSession.selectedVectorDb,
+          });
 
-        if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
+          if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
-          const context = vectorResponse.chunks
+            const context = vectorResponse.chunks
-            .map(chunk => {
+              .map(chunk =>
-              // Extract text content from the chunk
+                typeof chunk.content === "string"
-              const chunkContent = typeof chunk.content === 'string'
+                  ? chunk.content
-                ? chunk.content
+                  : extractTextContent(chunk.content)
-                : extractTextContent(chunk.content);
+              )
-              return chunkContent;
+              .join("\n\n");
-            })
-            .join('\n\n');
 
-          enhancedContent = `Please answer the following query using the context below.\n\nCONTEXT:\n${context}\n\nQUERY:\n${content}`;
+            enhancedContent = `Please answer the following query using the context below.\n\nCONTEXT:\n${context}\n\nQUERY:\n${content}`;
+          }
+        } catch (vectorErr) {
+          console.error("Error querying vector DB:", vectorErr);
+          // proceed without augmentation
         }
-      } catch (vectorErr) {
-        console.error("Error querying vector DB:", vectorErr);
-        // Continue with original content if vector query fails
       }
-    }
 
-    const messageParams: CompletionCreateParams["messages"] = [
+      const messageParams: CompletionCreateParams["messages"] = [
-      ...(currentSession?.messages || []).map(msg => {
+        ...(currentSession?.systemMessage
-        const msgContent = typeof msg.content === 'string' ? msg.content : extractTextContent(msg.content);
+          ? [{ role: "system" as const, content: currentSession.systemMessage }]
-        if (msg.role === "user") {
+          : []),
-          return { role: "user" as const, content: msgContent };
+        ...(currentSession?.messages || []).map(msg => {
-        } else if (msg.role === "assistant") {
+          const msgContent =
-          return { role: "assistant" as const, content: msgContent };
+            typeof msg.content === "string"
-        } else {
+              ? msg.content
+              : extractTextContent(msg.content);
+          if (msg.role === "user")
+            return { role: "user" as const, content: msgContent };
+          if (msg.role === "assistant")
+            return { role: "assistant" as const, content: msgContent };
           return { role: "system" as const, content: msgContent };
-        }
+        }),
-      }),
+        { role: "user" as const, content: enhancedContent },
-      { role: "user" as const, content: enhancedContent }
+      ];
-    ];
 
-    const response = await client.chat.completions.create({
+      const response = await client.chat.completions.create({
-      model: currentSession?.selectedModel || "",
+        model: currentSession?.selectedModel || "",
-      messages: messageParams,
+        messages: messageParams,
-      stream: true,
+        stream: true,
-    });
+      });
 
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
@@ -229,37 +270,41 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
       updatedAt: Date.now()
     } : null);
 
-    let fullContent = "";
+      let fullContent = "";
-    for await (const chunk of response) {
+      for await (const chunk of response) {
-      if (chunk.choices && chunk.choices[0]?.delta?.content) {
+        if (chunk.choices && chunk.choices[0]?.delta?.content) {
-        const deltaContent = chunk.choices[0].delta.content;
+          const deltaContent = chunk.choices[0].delta.content;
-        fullContent += deltaContent;
+          fullContent += deltaContent;
 
-        flushSync(() => {
+          flushSync(() => {
-          setCurrentSession(prev => {
+            setCurrentSession(prev => {
-            if (!prev) return null;
+              if (!prev) return null;
-            const newMessages = [...prev.messages];
+              const newMessages = [...prev.messages];
-            const lastMessage = newMessages[newMessages.length - 1];
+              const last = newMessages[newMessages.length - 1];
-            if (lastMessage.role === "assistant") {
+              if (last.role === "assistant") last.content = fullContent;
-              lastMessage.content = fullContent;
+              return { ...prev, messages: newMessages, updatedAt: Date.now() };
-            }
+            });
-            return { ...prev, messages: newMessages, updatedAt: Date.now() };
           });
-        });
+        }
       }
+    } catch (err) {
+      console.error("Error sending message:", err);
+      setError("Failed to send message. Please try again.");
+      setCurrentSession(prev =>
+        prev
+          ? {
+              ...prev,
+              messages: prev.messages.slice(0, -1),
+              updatedAt: Date.now(),
+            }
+          : prev
+      );
+    } finally {
+      setIsGenerating(false);
     }
-  } catch (err) {
+  };
-    console.error("Error sending message:", err);
+
-    setError("Failed to send message. Please try again.");
+  // --- UX helpers ---
-    setCurrentSession(prev => prev ? {
-      ...prev,
-      messages: prev.messages.slice(0, -1),
-      updatedAt: Date.now()
-    } : null);
-  } finally {
-    setIsGenerating(false);
-  }
-};
   const suggestions = [
     "Write a Python function that prints 'Hello, World!'",
     "Explain step-by-step how to solve this math problem: If x² + 6x + 9 = 25, what is x?",
@@ -273,20 +318,22 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
       content: message.content,
       createdAt: new Date(),
     };
-    setCurrentSession(prev => prev ? {
+    setCurrentSession(prev =>
-      ...prev,
+      prev
-      messages: [...prev.messages, newMessage],
+        ? {
-      updatedAt: Date.now()
+            ...prev,
-    } : null);
+            messages: [...prev.messages, newMessage],
+            updatedAt: Date.now(),
+          }
+        : prev
+    );
     handleSubmitWithContent(newMessage.content);
   };
 
   const clearChat = () => {
-    setCurrentSession(prev => prev ? {
+    setCurrentSession(prev =>
-      ...prev,
+      prev ? { ...prev, messages: [], updatedAt: Date.now() } : prev
-      messages: [],
+    );
-      updatedAt: Date.now()
-    } : null);
     setError(null);
   };
 
@@ -296,13 +343,20 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
   };
 
   const handleNewSession = () => {
-    const defaultModel = currentSession?.selectedModel || (models.length > 0 ? models[0].identifier : "");
+    const defaultModel =
-    const defaultVectorDb = currentSession?.selectedVectorDb || "";
+      currentSession?.selectedModel ||
+      (models.length > 0 ? models[0].identifier : "");
+    const defaultVectorDb = currentSession?.selectedVectorDb || "none";
 
-    const newSession = {
+    const newSession: ChatSession = {
       ...SessionUtils.createDefaultSession(),
       selectedModel: defaultModel,
       selectedVectorDb: defaultVectorDb,
+      systemMessage:
+        currentSession?.systemMessage || "You are a helpful assistant.",
+      messages: [],
+      updatedAt: Date.now(),
+      createdAt: Date.now(),
     };
     setCurrentSession(newSession);
     SessionUtils.saveCurrentSession(newSession);
@@ -323,101 +377,200 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
   };
 
   return (
-    <div className="flex flex-col h-full w-full max-w-4xl mx-auto">
+    <div className="flex flex-col h-full w-full max-w-7xl mx-auto">
-      <div className="mb-4 flex justify-between items-center">
+      {/* Header */}
-        <div>
+      <div className="mb-6">
-          <h1 className="text-2xl font-bold">Chat Playground</h1>
+        <div className="flex justify-between items-center mb-4">
-        </div>
+          <h1 className="text-3xl font-bold">Chat Playground</h1>
-
+          <div className="flex justify-between items-center">
-        <div className="flex justify-between items-center">
+            <SessionManager
-          <SessionManager
+              currentSession={currentSession}
-            currentSession={currentSession}
+              onSessionChange={handleSessionChange}
-            onSessionChange={handleSessionChange}
+              onNewSession={handleNewSession}
-            onNewSession={handleNewSession}
+            />
-          />
+            <Button
-          <Button variant="outline" onClick={clearChat} disabled={isGenerating}>
+              variant="outline"
-            Clear Chat
+              onClick={clearChat}
-          </Button>
+              disabled={isGenerating}
-        </div>
-
-        <div className="flex flex-wrap gap-2 items-center">
-          <div className="flex items-center gap-1">
-            <span className="text-sm font-medium text-gray-600">Model:</span>
-            <Select
-              value={currentSession?.selectedModel || ""}
-              onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedModel: value, updatedAt: Date.now() } : null)}
-              disabled={isModelsLoading || isGenerating}
             >
-              <SelectTrigger className="w-[160px]">
+              Clear Chat
-                <SelectValue placeholder={isModelsLoading ? "Loading..." : "Select Model"} />
+            </Button>
-              </SelectTrigger>
-              <SelectContent>
-                {models.map((model) => (
-                  <SelectItem key={model.identifier} value={model.identifier}>
-                    {model.identifier}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
           </div>
-
-          <div className="flex items-center gap-1">
-            <span className="text-sm font-medium text-gray-600">Vector DB:</span>
-            <Select
-              value={currentSession?.selectedVectorDb || ""}
-              onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedVectorDb: value, updatedAt: Date.now() } : null)}
-              disabled={vectorDbsLoading || isGenerating}
-            >
-              <SelectTrigger className="w-[160px]">
-                <SelectValue placeholder={vectorDbsLoading ? "Loading..." : "None"} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">None</SelectItem>
-                {vectorDbs.map((vectorDb) => (
-                  <SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
-                    {vectorDb.identifier}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <VectorDbManager
-            client={client}
-            onVectorDbCreated={refreshVectorDbs}
-          />
         </div>
       </div>
 
-      {modelsError && (
+      {/* Main Two-Column Layout */}
-        <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+      <div className="flex flex-1 gap-6 min-h-0 flex-col lg:flex-row">
-          <p className="text-destructive text-sm">{modelsError}</p>
+        {/* Left Column - Configuration Panel */}
-        </div>
+        <div className="w-full lg:w-80 lg:flex-shrink-0 space-y-6 p-4 border border-border rounded-lg bg-muted/30">
-      )}
+          <h2 className="text-lg font-semibold border-b pb-2 text-left">
+            Settings
+          </h2>
 
-      {vectorDbsError && (
+          {/* Model Configuration */}
-        <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+          <div className="space-y-4 text-left">
-          <p className="text-destructive text-sm">{vectorDbsError}</p>
+            <h3 className="text-lg font-semibold border-b pb-2 text-left">
-        </div>
+              Model Configuration
-      )}
+            </h3>
+            <div className="space-y-3">
+              <div>
+                <label className="text-sm font-medium block mb-2">Model</label>
+                <Select
+                  value={currentSession?.selectedModel || ""}
+                  onValueChange={value =>
+                    setCurrentSession(prev =>
+                      prev
+                        ? {
+                            ...prev,
+                            selectedModel: value,
+                            updatedAt: Date.now(),
+                          }
+                        : prev
+                    )
+                  }
+                  disabled={isModelsLoading || isGenerating}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue
+                      placeholder={
+                        isModelsLoading ? "Loading..." : "Select Model"
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {models.map(model => (
+                      <SelectItem
+                        key={model.identifier}
+                        value={model.identifier}
+                      >
+                        {model.identifier}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {modelsError && (
+                  <p className="text-destructive text-xs mt-1">{modelsError}</p>
+                )}
+              </div>
 
-      {error && (
+              <div>
-        <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+                <label className="text-sm font-medium block mb-2">
-          <p className="text-destructive text-sm">{error}</p>
+                  System Message
-        </div>
+                </label>
-      )}
+                <textarea
+                  value={currentSession?.systemMessage || ""}
+                  onChange={e =>
+                    setCurrentSession(prev =>
+                      prev
+                        ? {
+                            ...prev,
+                            systemMessage: e.target.value,
+                            updatedAt: Date.now(),
+                          }
+                        : prev
+                    )
+                  }
+                  placeholder="You are a helpful assistant."
+                  disabled={isGenerating}
+                  className="w-full h-24 px-3 py-2 text-sm border border-input rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                />
+              </div>
+            </div>
+          </div>
 
-      <Chat
+          {/* Vector Database Configuration */}
-        className="flex-1"
+          <div className="space-y-4 text-left">
-        messages={currentSession?.messages || []}
+            <h3 className="text-lg font-semibold border-b pb-2 text-left">
-        handleSubmit={handleSubmit}
+              VectorDB Configuration
-        input={input}
+            </h3>
-        handleInputChange={handleInputChange}
+
-        isGenerating={isGenerating}
+            <div className="space-y-3">
-        append={append}
+              <div>
-        suggestions={suggestions}
+                <label className="text-sm font-medium block mb-2">
-        setMessages={(messages) => setCurrentSession(prev => prev ? { ...prev, messages, updatedAt: Date.now() } : null)}
+                  Vector Database
-      />
+                </label>
+                <Select
+                  value={currentSession?.selectedVectorDb || "none"}
+                  onValueChange={value =>
+                    setCurrentSession(prev =>
+                      prev
+                        ? {
+                            ...prev,
+                            selectedVectorDb: value,
+                            updatedAt: Date.now(),
+                          }
+                        : prev
+                    )
+                  }
+                  disabled={vectorDbsLoading || isGenerating}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue
+                      placeholder={
+                        vectorDbsLoading ? "Loading..." : "None (No RAG)"
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">None (No RAG)</SelectItem>
+                    {vectorDbs.map(db => (
+                      <SelectItem key={db.identifier} value={db.identifier}>
+                        {db.identifier}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {vectorDbsError && (
+                  <p className="text-destructive text-xs mt-1">
+                    {vectorDbsError}
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <VectorDbManager
+                  client={client}
+                  onVectorDbCreated={refreshVectorDbs}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Document Upload Section */}
+          <div className="space-y-4 text-left">
+            <DocumentUploader
+              client={client}
+              selectedVectorDb={currentSession?.selectedVectorDb || "none"}
+              disabled={isGenerating}
+            />
+          </div>
+        </div>
+
+        {/* Right Column - Chat Interface */}
+        <div className="flex-1 flex flex-col min-h-0 p-4 border border-border rounded-lg bg-background">
+          {error && (
+            <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <p className="text-destructive text-sm">{error}</p>
+            </div>
+          )}
+
+          <Chat
+            className="flex-1"
+            messages={currentSession?.messages || []}
+            handleSubmit={handleSubmit}
+            input={input}
+            handleInputChange={handleInputChange}
+            isGenerating={isGenerating}
+            append={append}
+            suggestions={suggestions}
+            setMessages={messages =>
+              setCurrentSession(prev =>
+                prev ? { ...prev, messages, updatedAt: Date.now() } : prev
+              )
+            }
+          />
+        </div>
+      </div>
     </div>
   );
 }

llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx

@@ -52,10 +52,8 @@ export default function ContentsListPage() {
   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(() => {

llama_stack/ui/components/chat-playground/chat-message.tsx

@@ -161,10 +161,12 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
   const isUser = role === "user";
 
-  const formattedTime = createdAt ? new Date(createdAt).toLocaleTimeString("en-US", {
+  const formattedTime = createdAt
-    hour: "2-digit",
+    ? new Date(createdAt).toLocaleTimeString("en-US", {
-    minute: "2-digit",
+        hour: "2-digit",
-  }) : undefined
+        minute: "2-digit",
+      })
+    : undefined;
 
   if (isUser) {
     return (
@@ -185,7 +187,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
         {showTimeStamp && createdAt ? (
           <time
-            dateTime={createdAt.toISOString()}
+            dateTime={new Date(createdAt).toISOString()}
             className={cn(
               "mt-1 block px-1 text-xs opacity-50",
               animation !== "none" && "duration-500 animate-in fade-in-0"

llama_stack/ui/components/chat-playground/chat.tsx

@@ -203,7 +203,7 @@ export function Chat({
           <div className="flex-1 flex items-center justify-center">
             <div className="max-w-4xl mx-auto w-full">
               <PromptSuggestions
-                label="Try these prompts ✨"
+                label="Try asking a question ✨"
                 append={append}
                 suggestions={suggestions}
               />
@@ -269,7 +269,7 @@ export function ChatMessages({
       onScroll={handleScroll}
       onTouchStart={handleTouchStart}
     >
-      <div className="max-w-4xl mx-auto w-full [grid-column:1/1] [grid-row:1/1]">
+      <div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
         {children}
       </div>
 

llama_stack/ui/components/chat-playground/document-uploader.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type LlamaStackClient from "llama-stack-client";
+
+interface DocumentUploaderProps {
+  client: LlamaStackClient;
+  selectedVectorDb: string;
+  disabled?: boolean;
+}
+
+interface UploadState {
+  isUploading: boolean;
+  uploadProgress: string;
+  uploadError: string | null;
+}
+
+export function DocumentUploader({
+  client,
+  selectedVectorDb,
+  disabled,
+}: DocumentUploaderProps) {
+  const [uploadState, setUploadState] = useState<UploadState>({
+    isUploading: false,
+    uploadProgress: "",
+    uploadError: null,
+  });
+  const [urlInput, setUrlInput] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || null;
+    setSelectedFile(file);
+    if (file) {
+      console.log("File selected:", file.name, file.size, "bytes");
+    }
+  };
+
+  const handleFileUpload = async () => {
+    console.log("Upload button clicked");
+    console.log("Files:", fileInputRef.current?.files?.length);
+    console.log("Selected Vector DB:", selectedVectorDb);
+
+    if (
+      !fileInputRef.current?.files?.length ||
+      !selectedVectorDb ||
+      selectedVectorDb === "none"
+    ) {
+      console.log("Upload blocked: missing file or vector DB");
+      setUploadState({
+        isUploading: false,
+        uploadProgress: "",
+        uploadError:
+          "Please select a file and ensure a Vector Database is selected",
+      });
+      return;
+    }
+
+    const file = fileInputRef.current.files[0];
+    console.log("Starting upload for:", file.name);
+    setUploadState({
+      isUploading: true,
+      uploadProgress: `Uploading ${file.name}...`,
+      uploadError: null,
+    });
+
+    try {
+      // Determine MIME type
+      let mimeType = file.type;
+      if (!mimeType) {
+        // Fallback based on file extension
+        const extension = file.name.split(".").pop()?.toLowerCase();
+        switch (extension) {
+          case "pdf":
+            mimeType = "application/pdf";
+            break;
+          case "txt":
+            mimeType = "text/plain";
+            break;
+          case "md":
+            mimeType = "text/markdown";
+            break;
+          default:
+            mimeType = "application/octet-stream";
+        }
+      }
+
+      setUploadState({
+        isUploading: true,
+        uploadProgress: `Reading ${file.name}...`,
+        uploadError: null,
+      });
+
+      // Use server-side file processing API for better efficiency
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("vectorDbId", selectedVectorDb);
+
+      setUploadState({
+        isUploading: true,
+        uploadProgress: `Processing ${file.name}...`,
+        uploadError: null,
+      });
+
+      const uploadResponse = await fetch("/api/upload-document", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed: ${uploadResponse.statusText}`);
+      }
+
+      const { content, mimeType: processedMimeType } =
+        await uploadResponse.json();
+
+      // Use RagTool to insert the document
+      console.log("Calling RagTool.insert with:", {
+        vector_db_id: selectedVectorDb,
+        chunk_size_in_tokens: 512,
+        content_type: typeof content,
+        content_length: typeof content === "string" ? content.length : "N/A",
+        mime_type: processedMimeType,
+      });
+
+      await client.toolRuntime.ragTool.insert({
+        vector_db_id: selectedVectorDb,
+        chunk_size_in_tokens: 512,
+        documents: [
+          {
+            document_id: `file-${Date.now()}-${file.name}`,
+            content: content,
+            mime_type: processedMimeType,
+            metadata: {
+              source: file.name,
+              uploaded_at: new Date().toISOString(),
+              file_size: file.size,
+            },
+          },
+        ],
+      });
+
+      console.log("RagTool.insert completed successfully");
+
+      const truncatedName =
+        file.name.length > 20 ? file.name.substring(0, 20) + "..." : file.name;
+      setUploadState({
+        isUploading: false,
+        uploadProgress: `Successfully uploaded ${truncatedName}`,
+        uploadError: null,
+      });
+
+      // Clear file input and selected file state
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      setSelectedFile(null);
+    } catch (err) {
+      console.error("Error uploading file:", err);
+      setUploadState({
+        isUploading: false,
+        uploadProgress: "",
+        uploadError:
+          err instanceof Error ? err.message : "Failed to upload file",
+      });
+    }
+  };
+
+  const handleUrlUpload = async () => {
+    if (!urlInput.trim() || !selectedVectorDb || selectedVectorDb === "none")
+      return;
+
+    setUploadState({
+      isUploading: true,
+      uploadProgress: `Fetching content from ${urlInput}...`,
+      uploadError: null,
+    });
+
+    try {
+      // Determine MIME type from URL
+      let mimeType = "text/html";
+      const url = urlInput.toLowerCase();
+      if (url.endsWith(".pdf")) {
+        mimeType = "application/pdf";
+      } else if (url.endsWith(".txt")) {
+        mimeType = "text/plain";
+      } else if (url.endsWith(".md")) {
+        mimeType = "text/markdown";
+      }
+
+      setUploadState({
+        isUploading: true,
+        uploadProgress: `Processing content from ${urlInput}...`,
+        uploadError: null,
+      });
+
+      // Use RagTool to insert the document from URL
+      await client.toolRuntime.ragTool.insert({
+        vector_db_id: selectedVectorDb,
+        chunk_size_in_tokens: 512,
+        documents: [
+          {
+            document_id: `url-${Date.now()}-${encodeURIComponent(urlInput)}`,
+            content: urlInput,
+            mime_type: mimeType,
+            metadata: {
+              source: urlInput,
+              uploaded_at: new Date().toISOString(),
+            },
+          },
+        ],
+      });
+
+      const truncatedUrl =
+        urlInput.length > 30 ? urlInput.substring(0, 30) + "..." : urlInput;
+      setUploadState({
+        isUploading: false,
+        uploadProgress: `Successfully processed ${truncatedUrl}`,
+        uploadError: null,
+      });
+
+      setUrlInput("");
+    } catch (err) {
+      console.error("Error uploading URL:", err);
+      setUploadState({
+        isUploading: false,
+        uploadProgress: "",
+        uploadError:
+          err instanceof Error ? err.message : "Failed to process URL content",
+      });
+    }
+  };
+
+  const clearStatus = () => {
+    setUploadState({
+      isUploading: false,
+      uploadProgress: "",
+      uploadError: null,
+    });
+  };
+
+  if (!selectedVectorDb || selectedVectorDb === "none") {
+    return (
+      <div className="text-sm text-gray-500 text-center py-4">
+        Select a Vector Database to upload documents
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-md font-medium">Upload Documents</h3>
+
+      {uploadState.uploadError && (
+        <div className="p-2 bg-destructive/10 border border-destructive/20 rounded-md">
+          <p className="text-sm text-foreground">{uploadState.uploadError}</p>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearStatus}
+            className="mt-1 h-6 px-2 text-xs"
+          >
+            Clear
+          </Button>
+        </div>
+      )}
+
+      {uploadState.uploadProgress && (
+        <div className="p-2 bg-muted border border-border rounded-md">
+          <p className="text-sm text-foreground">
+            {uploadState.uploadProgress}
+          </p>
+          {uploadState.isUploading && (
+            <div className="mt-2 w-full bg-secondary rounded-full h-1">
+              <div
+                className="bg-primary h-1 rounded-full animate-pulse"
+                style={{ width: "60%" }}
+              ></div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* File Upload */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium block">Upload File</label>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".txt,.pdf,.md"
+          onChange={handleFileSelect}
+          className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+          disabled={disabled || uploadState.isUploading}
+        />
+
+        {selectedFile && (
+          <div className="p-2 bg-muted border border-border rounded-md">
+            <p className="text-sm text-foreground">
+              Selected:{" "}
+              <span className="font-medium">
+                {selectedFile.name.length > 25
+                  ? selectedFile.name.substring(0, 25) + "..."
+                  : selectedFile.name}
+              </span>
+              <span className="text-muted-foreground ml-2">
+                ({(selectedFile.size / 1024).toFixed(1)} KB)
+              </span>
+            </p>
+          </div>
+        )}
+
+        <Button
+          onClick={handleFileUpload}
+          disabled={disabled || !selectedFile || uploadState.isUploading}
+          className="w-full"
+          variant="outline"
+          size="sm"
+        >
+          {uploadState.isUploading
+            ? "Uploading..."
+            : selectedFile
+              ? "Upload File"
+              : "Upload File"}
+        </Button>
+      </div>
+
+      {/* URL Upload */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium block">Or Enter URL</label>
+        <Input
+          value={urlInput}
+          onChange={e => setUrlInput(e.target.value)}
+          placeholder="https://example.com/document.pdf"
+          disabled={disabled || uploadState.isUploading}
+        />
+        <Button
+          onClick={handleUrlUpload}
+          disabled={disabled || !urlInput.trim() || uploadState.isUploading}
+          className="w-full"
+          variant="outline"
+          size="sm"
+        >
+          {uploadState.isUploading ? "Processing..." : "Process URL"}
+        </Button>
+      </div>
+
+      <p className="text-xs text-gray-500">
+        Supported formats: PDF, TXT, MD files and web URLs
+      </p>
+    </div>
+  );
+}

llama_stack/ui/components/chat-playground/session-manager.tsx

@@ -19,6 +19,7 @@ interface ChatSession {
   messages: Message[];
   selectedModel: string;
   selectedVectorDb: string;
+  systemMessage: string;
   createdAt: number;
   updatedAt: number;
 }
@@ -29,10 +30,13 @@ interface SessionManagerProps {
   onNewSession: () => void;
 }
 
-const SESSIONS_STORAGE_KEY = 'chat-playground-sessions';
+const SESSIONS_STORAGE_KEY = "chat-playground-sessions";
-const CURRENT_SESSION_KEY = 'chat-playground-current-session';
+const CURRENT_SESSION_KEY = "chat-playground-current-session";
 
-export function SessionManager({ currentSession, onSessionChange, onNewSession }: SessionManagerProps) {
+export function SessionManager({
+  currentSession,
+  onSessionChange,
+}: SessionManagerProps) {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [newSessionName, setNewSessionName] = useState("");
@@ -56,13 +60,16 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
   };
 
   const createNewSession = () => {
-    const sessionName = newSessionName.trim() || `Session ${sessions.length + 1}`;
+    const sessionName =
+      newSessionName.trim() || `Session ${sessions.length + 1}`;
     const newSession: ChatSession = {
       id: Date.now().toString(),
       name: sessionName,
       messages: [],
       selectedModel: currentSession?.selectedModel || "",
       selectedVectorDb: currentSession?.selectedVectorDb || "",
+      systemMessage:
+        currentSession?.systemMessage || "You are a helpful assistant.",
       createdAt: Date.now(),
       updatedAt: Date.now(),
     };
@@ -85,48 +92,27 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
     }
   };
 
-  // These functions are available for future use but not currently implemented in UI
-  // const deleteSession = (sessionId: string) => {
-  //   const updatedSessions = sessions.filter(s => s.id !== sessionId);
-  //   saveSessions(updatedSessions);
-
-  //   // If we deleted the current session, switch to the first available or create new
-  //   if (currentSession?.id === sessionId) {
-  //     if (updatedSessions.length > 0) {
-  //       switchToSession(updatedSessions[0].id);
-  //     } else {
-  //       localStorage.removeItem(CURRENT_SESSION_KEY);
-  //       onNewSession();
-  //     }
-  //   }
-  // };
-
-  // const renameSession = (sessionId: string, newName: string) => {
-  //   const updatedSessions = sessions.map(session =>
-  //     session.id === sessionId
-  //       ? { ...session, name: newName, updatedAt: Date.now() }
-  //       : session
-  //   );
-  //   saveSessions(updatedSessions);
-
-  //   if (currentSession?.id === sessionId) {
-  //     onSessionChange({ ...currentSession, name: newName });
-  //   }
-  // };
-
   // Update current session in the sessions list
   useEffect(() => {
     if (currentSession) {
-      const updatedSessions = sessions.map(session =>
+      setSessions(prevSessions => {
-        session.id === currentSession.id ? currentSession : session
+        const updatedSessions = prevSessions.map(session =>
-      );
+          session.id === currentSession.id ? currentSession : session
+        );
 
-      // Add session if it doesn't exist
+        // Add session if it doesn't exist
-      if (!sessions.find(s => s.id === currentSession.id)) {
+        if (!prevSessions.find(s => s.id === currentSession.id)) {
-        updatedSessions.push(currentSession);
+          updatedSessions.push(currentSession);
-      }
+        }
 
-      saveSessions(updatedSessions);
+        // Save to localStorage
+        localStorage.setItem(
+          SESSIONS_STORAGE_KEY,
+          JSON.stringify(updatedSessions)
+        );
+
+        return updatedSessions;
+      });
     }
   }, [currentSession]);
 
@@ -141,7 +127,7 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
             <SelectValue placeholder="Select Session" />
           </SelectTrigger>
           <SelectContent>
-            {sessions.map((session) => (
+            {sessions.map(session => (
               <SelectItem key={session.id} value={session.id}>
                 {session.name}
               </SelectItem>
@@ -164,12 +150,12 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
 
           <Input
             value={newSessionName}
-            onChange={(e) => setNewSessionName(e.target.value)}
+            onChange={e => setNewSessionName(e.target.value)}
             placeholder="Session name (optional)"
-            onKeyDown={(e) => {
+            onKeyDown={e => {
-              if (e.key === 'Enter') {
+              if (e.key === "Enter") {
                 createNewSession();
-              } else if (e.key === 'Escape') {
+              } else if (e.key === "Escape") {
                 setShowCreateForm(false);
                 setNewSessionName("");
               }
@@ -197,7 +183,8 @@ export function SessionManager({ currentSession, onSessionChange, onNewSession }
       {currentSession && sessions.length > 1 && (
         <div className="mt-2 text-xs text-gray-500">
           {sessions.length} sessions • Current: {currentSession.name}
-          {currentSession.messages.length > 0 && ` • ${currentSession.messages.length} messages`}
+          {currentSession.messages.length > 0 &&
+            ` • ${currentSession.messages.length} messages`}
         </div>
       )}
     </div>
@@ -237,19 +224,27 @@ export const SessionUtils = {
     if (existingIndex >= 0) {
       sessions[existingIndex] = { ...session, updatedAt: Date.now() };
     } else {
-      sessions.push({ ...session, createdAt: Date.now(), updatedAt: Date.now() });
+      sessions.push({
+        ...session,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      });
     }
 
     localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
     localStorage.setItem(CURRENT_SESSION_KEY, session.id);
   },
 
-  createDefaultSession: (inheritModel?: string, inheritVectorDb?: string): ChatSession => ({
+  createDefaultSession: (
+    inheritModel?: string,
+    inheritVectorDb?: string
+  ): ChatSession => ({
     id: Date.now().toString(),
     name: "Default Session",
     messages: [],
     selectedModel: inheritModel || "",
     selectedVectorDb: inheritVectorDb || "",
+    systemMessage: "You are a helpful assistant.",
     createdAt: Date.now(),
     updatedAt: Date.now(),
   }),

llama_stack/ui/components/layout/app-sidebar.tsx

@@ -79,6 +79,38 @@ interface SidebarItem {
 export function AppSidebar() {
   const pathname = usePathname();
 
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <Link href="/">Llama Stack</Link>
+      </SidebarHeader>
+      <SidebarContent>
+        {/* Chat Playground as its own section */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  className={cn(
+                    "justify-start",
+                    pathname.startsWith(chatPlaygroundItem.url) &&
+                      "bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  )}
+                >
+                  <Link href={chatPlaygroundItem.url}>
+                    <chatPlaygroundItem.icon
+                      className={cn(
+                        pathname.startsWith(chatPlaygroundItem.url) &&
+                          "text-gray-900 dark:text-gray-100",
+                        "mr-2 h-4 w-4"
+                      )}
+                    />
+                    <span>{chatPlaygroundItem.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
   const renderSidebarItems = (items: SidebarItem[]) => {
     return items.map(item => {
       const isActive = pathname.startsWith(item.url);

llama_stack/ui/components/responses/responses-detail.test.tsx

@@ -666,7 +666,7 @@ describe("ResponseDetailView", () => {
             role: "assistant",
             call_id: "call_123",
             content: "sunny and warm",
-          } as unknown, // Using any to bypass the type restriction for this test
+          } as unknown, // Using unknown to bypass the type restriction for this test
         ],
         input: [],
       };
@@ -706,7 +706,7 @@ describe("ResponseDetailView", () => {
             status: "completed",
             call_id: "call_123",
             output: "sunny and warm",
-          } as unknown,
+          } as unknown, // Using unknown to bypass the type restriction for this test
         ],
         input: [],
       };

llama_stack/ui/components/vector-db/vector-db-manager-simple.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import type LlamaStackClient from "llama-stack-client";
+
+interface VectorDbManagerProps {
+  client: LlamaStackClient;
+  onVectorDbCreated: () => void;
+}
+
+export function VectorDbManager({
+  client,
+  onVectorDbCreated,
+}: VectorDbManagerProps) {
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    vectorDbId: "",
+    embeddingModel: "all-MiniLM-L6-v2",
+    embeddingDimension: "384",
+  });
+
+  const handleCreateVectorDb = async () => {
+    if (!formData.vectorDbId.trim()) {
+      setCreateError("Vector DB ID is required");
+      return;
+    }
+
+    setIsCreating(true);
+    setCreateError(null);
+
+    try {
+      // Get available providers to find a vector_io provider
+      const providers = await client.providers.list();
+      const vectorIoProvider = providers.find(p => p.api === "vector_io");
+
+      if (!vectorIoProvider) {
+        throw new Error("No vector_io provider found");
+      }
+
+      await client.vectorDBs.register({
+        vector_db_id: formData.vectorDbId.trim(),
+        embedding_model: formData.embeddingModel,
+        embedding_dimension: parseInt(formData.embeddingDimension),
+        provider_id: vectorIoProvider.provider_id,
+      });
+
+      // Reset form and close
+      setFormData({
+        vectorDbId: "",
+        embeddingModel: "all-MiniLM-L6-v2",
+        embeddingDimension: "384",
+      });
+      setShowCreateForm(false);
+
+      // Refresh the vector DB list
+      onVectorDbCreated();
+    } catch (err) {
+      console.error("Error creating vector DB:", err);
+      setCreateError(
+        err instanceof Error ? err.message : "Failed to create vector database"
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setShowCreateForm(false);
+    setCreateError(null);
+    setFormData({
+      vectorDbId: "",
+      embeddingModel: "all-MiniLM-L6-v2",
+      embeddingDimension: "384",
+    });
+  };
+
+  return (
+    <div className="relative">
+      {!showCreateForm ? (
+        <Button
+          onClick={() => setShowCreateForm(true)}
+          variant="outline"
+          size="default"
+          className="w-full"
+        >
+          + Create Vector DB
+        </Button>
+      ) : (
+        <Card className="absolute top-full right-0 mt-2 p-4 space-y-4 w-80 z-50 bg-background border shadow-lg">
+          <h3 className="text-lg font-semibold">Create Vector Database</h3>
+
+          {createError && (
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <p className="text-destructive text-sm">{createError}</p>
+            </div>
+          )}
+
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Vector DB ID *
+              </label>
+              <Input
+                value={formData.vectorDbId}
+                onChange={e =>
+                  setFormData({ ...formData, vectorDbId: e.target.value })
+                }
+                placeholder="Enter unique vector DB identifier"
+                disabled={isCreating}
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Embedding Model
+              </label>
+              <Select
+                value={formData.embeddingModel}
+                onValueChange={value =>
+                  setFormData({ ...formData, embeddingModel: value })
+                }
+                disabled={isCreating}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all-MiniLM-L6-v2">
+                    all-MiniLM-L6-v2
+                  </SelectItem>
+                  <SelectItem value="text-embedding-ada-002">
+                    text-embedding-ada-002
+                  </SelectItem>
+                  <SelectItem value="text-embedding-3-small">
+                    text-embedding-3-small
+                  </SelectItem>
+                  <SelectItem value="text-embedding-3-large">
+                    text-embedding-3-large
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Embedding Dimension
+              </label>
+              <Select
+                value={formData.embeddingDimension}
+                onValueChange={value =>
+                  setFormData({ ...formData, embeddingDimension: value })
+                }
+                disabled={isCreating}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="384">384 (all-MiniLM-L6-v2)</SelectItem>
+                  <SelectItem value="1536">1536 (ada-002, 3-small)</SelectItem>
+                  <SelectItem value="3072">3072 (3-large)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              onClick={handleCreateVectorDb}
+              disabled={isCreating}
+              className="flex-1"
+            >
+              {isCreating ? "Creating..." : "Create"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              disabled={isCreating}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

llama_stack/ui/components/vector-db/vector-db-manager.tsx

@@ -24,7 +24,10 @@ interface UploadState {
   uploadError: string | null;
 }
 
-export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerProps) {
+export function VectorDbManager({
+  client,
+  onVectorDbCreated,
+}: VectorDbManagerProps) {
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
@@ -78,7 +81,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
       onVectorDbCreated();
     } catch (err) {
       console.error("Error creating vector DB:", err);
-      setCreateError(err instanceof Error ? err.message : "Failed to create vector database");
+      setCreateError(
+        err instanceof Error ? err.message : "Failed to create vector database"
+      );
     } finally {
       setIsCreating(false);
     }
@@ -105,13 +110,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
     const chunks: string[] = [];
 
     for (let i = 0; i < words.length; i += chunkSize) {
-      chunks.push(words.slice(i, i + chunkSize).join(' '));
+      chunks.push(words.slice(i, i + chunkSize).join(" "));
     }
 
     return chunks;
   };
 
-  const ingestDocument = async (content: string, documentId: string, vectorDbId: string) => {
+  const ingestDocument = async (
+    content: string,
+    documentId: string,
+    vectorDbId: string
+  ) => {
     const chunks = chunkText(content);
 
     const vectorChunks = chunks.map((chunk, index) => ({
@@ -165,7 +174,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
       setUploadState({
         isUploading: false,
         uploadProgress: "",
-        uploadError: err instanceof Error ? err.message : "Failed to upload file",
+        uploadError:
+          err instanceof Error ? err.message : "Failed to upload file",
       });
     }
   };
@@ -181,8 +191,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
 
     try {
       const response = await fetch(`/api/fetch-url`, {
-        method: 'POST',
+        method: "POST",
-        headers: { 'Content-Type': 'application/json' },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ url: urlInput }),
       });
 
@@ -212,7 +222,8 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
       setUploadState({
         isUploading: false,
         uploadProgress: "",
-        uploadError: err instanceof Error ? err.message : "Failed to fetch URL content",
+        uploadError:
+          err instanceof Error ? err.message : "Failed to fetch URL content",
       });
     }
   };
@@ -239,13 +250,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
 
           {uploadState.uploadError && (
             <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
-              <p className="text-destructive text-sm">{uploadState.uploadError}</p>
+              <p className="text-destructive text-sm">
+                {uploadState.uploadError}
+              </p>
             </div>
           )}
 
           {uploadState.uploadProgress && (
             <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
-              <p className="text-blue-700 text-sm">{uploadState.uploadProgress}</p>
+              <p className="text-blue-700 text-sm">
+                {uploadState.uploadProgress}
+              </p>
             </div>
           )}
 
@@ -256,7 +271,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
               </label>
               <Input
                 value={formData.vectorDbId}
-                onChange={(e) => setFormData({ ...formData, vectorDbId: e.target.value })}
+                onChange={e =>
+                  setFormData({ ...formData, vectorDbId: e.target.value })
+                }
                 placeholder="Enter unique vector DB identifier"
                 disabled={isCreating || uploadState.isUploading}
               />
@@ -268,17 +285,27 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
               </label>
               <Select
                 value={formData.embeddingModel}
-                onValueChange={(value) => setFormData({ ...formData, embeddingModel: value })}
+                onValueChange={value =>
+                  setFormData({ ...formData, embeddingModel: value })
+                }
                 disabled={isCreating || uploadState.isUploading}
               >
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all-MiniLM-L6-v2">all-MiniLM-L6-v2</SelectItem>
+                  <SelectItem value="all-MiniLM-L6-v2">
-                  <SelectItem value="text-embedding-ada-002">text-embedding-ada-002</SelectItem>
+                    all-MiniLM-L6-v2
-                  <SelectItem value="text-embedding-3-small">text-embedding-3-small</SelectItem>
+                  </SelectItem>
-                  <SelectItem value="text-embedding-3-large">text-embedding-3-large</SelectItem>
+                  <SelectItem value="text-embedding-ada-002">
+                    text-embedding-ada-002
+                  </SelectItem>
+                  <SelectItem value="text-embedding-3-small">
+                    text-embedding-3-small
+                  </SelectItem>
+                  <SelectItem value="text-embedding-3-large">
+                    text-embedding-3-large
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -289,7 +316,9 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
               </label>
               <Select
                 value={formData.embeddingDimension}
-                onValueChange={(value) => setFormData({ ...formData, embeddingDimension: value })}
+                onValueChange={value =>
+                  setFormData({ ...formData, embeddingDimension: value })
+                }
                 disabled={isCreating || uploadState.isUploading}
               >
                 <SelectTrigger>
@@ -339,7 +368,11 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
               />
               <Button
                 onClick={() => handleFileUpload(formData.vectorDbId)}
-                disabled={!formData.vectorDbId || !fileInputRef.current?.files?.length || uploadState.isUploading}
+                disabled={
+                  !formData.vectorDbId ||
+                  !fileInputRef.current?.files?.length ||
+                  uploadState.isUploading
+                }
                 className="mt-2 w-full"
                 variant="outline"
                 size="sm"
@@ -354,13 +387,17 @@ export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerPr
               </label>
               <Input
                 value={urlInput}
-                onChange={(e) => setUrlInput(e.target.value)}
+                onChange={e => setUrlInput(e.target.value)}
                 placeholder="https://example.com/article"
                 disabled={!formData.vectorDbId || uploadState.isUploading}
               />
               <Button
                 onClick={() => handleUrlUpload(formData.vectorDbId)}
-                disabled={!formData.vectorDbId || !urlInput.trim() || uploadState.isUploading}
+                disabled={
+                  !formData.vectorDbId ||
+                  !urlInput.trim() ||
+                  uploadState.isUploading
+                }
                 className="mt-2 w-full"
                 variant="outline"
                 size="sm"

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.17",
+        "llama-stack-client": "^0.2.17",
         "lucide-react": "^0.510.0",
         "next": "15.3.3",
         "next-auth": "^4.24.11",