feat(UI): Adding linter and prettier for UI (#3156)

.pre-commit-config.yaml

@@ -2,6 +2,7 @@ exclude: 'build/'
 
 default_language_version:
     python: python3.12
+    node: "22"
 
 repos:
 -   repo: https://github.com/pre-commit/pre-commit-hooks
@@ -145,6 +146,20 @@ repos:
         pass_filenames: false
         require_serial: true
         files: ^.github/workflows/.*$
+      - id: ui-prettier
+        name: Format UI code with Prettier
+        entry: bash -c 'cd llama_stack/ui && npm run format'
+        language: system
+        files: ^llama_stack/ui/.*\.(ts|tsx)$
+        pass_filenames: false
+        require_serial: true
+      - id: ui-eslint
+        name: Lint UI code with ESLint
+        entry: bash -c 'cd llama_stack/ui && npm run lint -- --fix --quiet'
+        language: system
+        files: ^llama_stack/ui/.*\.(ts|tsx)$
+        pass_filenames: false
+        require_serial: true
 
 ci:
     autofix_commit_msg: 🎨 [pre-commit.ci] Auto format from pre-commit.com hooks

llama_stack/ui/.nvmrc

@@ -0,0 +1 @@
+22.5.1

llama_stack/ui/.prettierignore

@@ -1,3 +1,12 @@
 # Ignore artifacts:
 build
 coverage
+.next
+node_modules
+dist
+*.lock
+*.log
+
+# Generated files
+*.min.js
+*.min.css

llama_stack/ui/.prettierrc

@@ -1 +1,10 @@
-{}
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

llama_stack/ui/app/api/v1/[...path]/route.ts

@@ -47,7 +47,7 @@ async function proxyRequest(request: NextRequest, method: string) {
     const responseText = await response.text();
 
     console.log(
-      `Response from FastAPI: ${response.status} ${response.statusText}`,
+      `Response from FastAPI: ${response.status} ${response.statusText}`
     );
 
     // Create response with same status and headers
@@ -74,7 +74,7 @@ async function proxyRequest(request: NextRequest, method: string) {
         backend_url: BACKEND_URL,
         timestamp: new Date().toISOString(),
       },
-      { status: 500 },
+      { status: 500 }
     );
   }
 }

llama_stack/ui/app/auth/signin/page.tsx

@@ -51,9 +51,9 @@ export default function SignInPage() {
               onClick={() => {
                 console.log("Signing in with GitHub...");
                 signIn("github", { callbackUrl: "/auth/signin" }).catch(
-                  (error) => {
+                  error => {
                     console.error("Sign in error:", error);
-                  },
+                  }
                 );
               }}
               className="w-full"

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

@@ -29,14 +29,13 @@ export default function ChatPlaygroundPage() {
 
   const isModelsLoading = modelsLoading ?? true;
 
-
   useEffect(() => {
     const fetchModels = async () => {
       try {
         setModelsLoading(true);
         setModelsError(null);
         const modelList = await client.models.list();
-        const llmModels = modelList.filter(model => model.model_type === 'llm');
+        const llmModels = modelList.filter(model => model.model_type === "llm");
         setModels(llmModels);
         if (llmModels.length > 0) {
           setSelectedModel(llmModels[0].identifier);
@@ -53,26 +52,42 @@ export default function ChatPlaygroundPage() {
   }, [client]);
 
   const extractTextContent = (content: unknown): string => {
-    if (typeof content === 'string') {
+    if (typeof content === "string") {
       return content;
     }
     if (Array.isArray(content)) {
       return content
-        .filter(item => item && typeof item === 'object' && 'type' in item && item.type === 'text')
+        .filter(
-        .map(item => (item && typeof item === 'object' && 'text' in item) ? String(item.text) : '')
+          item =>
-        .join('');
+            item &&
+            typeof item === "object" &&
+            "type" in item &&
+            item.type === "text"
+        )
+        .map(item =>
+          item && typeof item === "object" && "text" in item
+            ? String(item.text)
+            : ""
+        )
+        .join("");
     }
-    if (content && typeof content === 'object' && 'type' in content && content.type === 'text' && 'text' in content) {
+    if (
-      return String(content.text) || '';
+      content &&
+      typeof content === "object" &&
+      "type" in content &&
+      content.type === "text" &&
+      "text" in content
+    ) {
+      return String(content.text) || "";
     }
-    return '';
+    return "";
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value);
   };
 
-const handleSubmit = async (event?: { preventDefault?: () => void }) => {
+  const handleSubmit = async (event?: { preventDefault?: () => void }) => {
     event?.preventDefault?.();
     if (!input.trim()) return;
 
@@ -89,16 +104,19 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
 
     // Use the helper function with the content
     await handleSubmitWithContent(userMessage.content);
-};
+  };
 
-const handleSubmitWithContent = async (content: string) => {
+  const handleSubmitWithContent = async (content: string) => {
     setIsGenerating(true);
     setError(null);
 
     try {
       const messageParams: CompletionCreateParams["messages"] = [
         ...messages.map(msg => {
-        const msgContent = typeof msg.content === 'string' ? msg.content : extractTextContent(msg.content);
+          const msgContent =
+            typeof msg.content === "string"
+              ? msg.content
+              : extractTextContent(msg.content);
           if (msg.role === "user") {
             return { role: "user" as const, content: msgContent };
           } else if (msg.role === "assistant") {
@@ -107,7 +125,7 @@ const handleSubmitWithContent = async (content: string) => {
             return { role: "system" as const, content: msgContent };
           }
         }),
-      { role: "user" as const, content }
+        { role: "user" as const, content },
       ];
 
       const response = await client.chat.completions.create({
@@ -149,7 +167,7 @@ const handleSubmitWithContent = async (content: string) => {
     } 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?",
@@ -163,7 +181,7 @@ const handleSubmitWithContent = async (content: string) => {
       content: message.content,
       createdAt: new Date(),
     };
-    setMessages(prev => [...prev, newMessage])
+    setMessages(prev => [...prev, newMessage]);
     handleSubmitWithContent(newMessage.content);
   };
 
@@ -177,12 +195,20 @@ const handleSubmitWithContent = async (content: string) => {
       <div className="mb-4 flex justify-between items-center">
         <h1 className="text-2xl font-bold">Chat Playground (Completions)</h1>
         <div className="flex gap-2">
-          <Select value={selectedModel} onValueChange={setSelectedModel} disabled={isModelsLoading || isGenerating}>
+          <Select
+            value={selectedModel}
+            onValueChange={setSelectedModel}
+            disabled={isModelsLoading || isGenerating}
+          >
             <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder={isModelsLoading ? "Loading models..." : "Select Model"} />
+              <SelectValue
+                placeholder={
+                  isModelsLoading ? "Loading models..." : "Select Model"
+                }
+              />
             </SelectTrigger>
             <SelectContent>
-              {models.map((model) => (
+              {models.map(model => (
                 <SelectItem key={model.identifier} value={model.identifier}>
                   {model.identifier}
                 </SelectItem>

llama_stack/ui/app/logs/chat-completions/[id]/page.tsx

@@ -33,12 +33,12 @@ export default function ChatCompletionDetailPage() {
       } catch (err) {
         console.error(
           `Error fetching chat completion detail for ID ${id}:`,
-          err,
+          err
         );
         setError(
           err instanceof Error
             ? err
-            : new Error("Failed to fetch completion detail"),
+            : new Error("Failed to fetch completion detail")
         );
       } finally {
         setIsLoading(false);

llama_stack/ui/app/logs/responses/[id]/page.tsx

@@ -13,10 +13,10 @@ export default function ResponseDetailPage() {
   const client = useAuthClient();
 
   const [responseDetail, setResponseDetail] = useState<OpenAIResponse | null>(
-    null,
+    null
   );
   const [inputItems, setInputItems] = useState<InputItemListResponse | null>(
-    null,
+    null
   );
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isLoadingInputItems, setIsLoadingInputItems] = useState<boolean>(true);
@@ -25,7 +25,7 @@ export default function ResponseDetailPage() {
 
   // Helper function to convert ResponseObject to OpenAIResponse
   const convertResponseObject = (
-    responseData: ResponseObject,
+    responseData: ResponseObject
   ): OpenAIResponse => {
     return {
       id: responseData.id,
@@ -73,12 +73,12 @@ export default function ResponseDetailPage() {
         } else {
           console.error(
             `Error fetching response detail for ID ${id}:`,
-            responseResult.reason,
+            responseResult.reason
           );
           setError(
             responseResult.reason instanceof Error
               ? responseResult.reason
-              : new Error("Failed to fetch response detail"),
+              : new Error("Failed to fetch response detail")
           );
         }
 
@@ -90,18 +90,18 @@ export default function ResponseDetailPage() {
         } else {
           console.error(
             `Error fetching input items for response ID ${id}:`,
-            inputItemsResult.reason,
+            inputItemsResult.reason
           );
           setInputItemsError(
             inputItemsResult.reason instanceof Error
               ? inputItemsResult.reason
-              : new Error("Failed to fetch input items"),
+              : new Error("Failed to fetch input items")
           );
         }
       } catch (err) {
         console.error(`Unexpected error fetching data for ID ${id}:`, err);
         setError(
-          err instanceof Error ? err : new Error("Unexpected error occurred"),
+          err instanceof Error ? err : new Error("Unexpected error occurred")
         );
       } finally {
         setIsLoading(false);

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

@@ -18,7 +18,10 @@ import {
   PropertiesCard,
   PropertyItem,
 } from "@/components/layout/detail-layout";
-import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
 
 export default function ContentDetailPage() {
   const params = useParams();
@@ -28,13 +31,13 @@ export default function ContentDetailPage() {
   const contentId = params.contentId as string;
   const client = useAuthClient();
 
-  const getTextFromContent = (content: any): string => {
+  const getTextFromContent = (content: unknown): string => {
-    if (typeof content === 'string') {
+    if (typeof content === "string") {
       return content;
-    } else if (content && content.type === 'text') {
+    } else if (content && content.type === "text") {
       return content.text;
     }
-    return '';
+    return "";
   };
 
   const [store, setStore] = useState<VectorStore | null>(null);
@@ -44,7 +47,9 @@ export default function ContentDetailPage() {
   const [error, setError] = useState<Error | null>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [editedContent, setEditedContent] = useState("");
-  const [editedMetadata, setEditedMetadata] = useState<Record<string, any>>({});
+  const [editedMetadata, setEditedMetadata] = useState<Record<string, unknown>>(
+    {}
+  );
   const [isEditingEmbedding, setIsEditingEmbedding] = useState(false);
   const [editedEmbedding, setEditedEmbedding] = useState<number[]>([]);
 
@@ -64,8 +69,13 @@ export default function ContentDetailPage() {
         setFile(fileResponse as VectorStoreFile);
 
         const contentsAPI = new ContentsAPI(client);
-        const contentsResponse = await contentsAPI.listContents(vectorStoreId, fileId);
+        const contentsResponse = await contentsAPI.listContents(
-        const targetContent = contentsResponse.data.find(c => c.id === contentId);
+          vectorStoreId,
+          fileId
+        );
+        const targetContent = contentsResponse.data.find(
+          c => c.id === contentId
+        );
 
         if (targetContent) {
           setContent(targetContent);
@@ -76,7 +86,9 @@ export default function ContentDetailPage() {
           throw new Error(`Content ${contentId} not found`);
         }
       } catch (err) {
-        setError(err instanceof Error ? err : new Error("Failed to load content."));
+        setError(
+          err instanceof Error ? err : new Error("Failed to load content.")
+        );
       } finally {
         setIsLoading(false);
       }
@@ -88,7 +100,8 @@ export default function ContentDetailPage() {
     if (!content) return;
 
     try {
-      const updates: { content?: string; metadata?: Record<string, any> } = {};
+      const updates: { content?: string; metadata?: Record<string, unknown> } =
+        {};
 
       if (editedContent !== getTextFromContent(content.content)) {
         updates.content = editedContent;
@@ -100,25 +113,32 @@ export default function ContentDetailPage() {
 
       if (Object.keys(updates).length > 0) {
         const contentsAPI = new ContentsAPI(client);
-        const updatedContent = await contentsAPI.updateContent(vectorStoreId, fileId, contentId, updates);
+        const updatedContent = await contentsAPI.updateContent(
+          vectorStoreId,
+          fileId,
+          contentId,
+          updates
+        );
         setContent(updatedContent);
       }
 
       setIsEditing(false);
     } catch (err) {
-      console.error('Failed to update content:', err);
+      console.error("Failed to update content:", err);
     }
   };
 
   const handleDelete = async () => {
-    if (!confirm('Are you sure you want to delete this content?')) return;
+    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`);
+      router.push(
+        `/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`
+      );
     } catch (err) {
-      console.error('Failed to delete content:', err);
+      console.error("Failed to delete content:", err);
     }
   };
 
@@ -134,10 +154,19 @@ export default function ContentDetailPage() {
 
   const breadcrumbSegments: BreadcrumbSegment[] = [
     { label: "Vector Stores", href: "/logs/vector-stores" },
-    { label: store?.name || vectorStoreId, href: `/logs/vector-stores/${vectorStoreId}` },
+    {
+      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: fileId,
+      href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}`,
+    },
+    {
+      label: "Contents",
+      href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`,
+    },
     { label: contentId },
   ];
 
@@ -186,7 +215,7 @@ export default function ContentDetailPage() {
           {isEditing ? (
             <textarea
               value={editedContent}
-              onChange={(e) => setEditedContent(e.target.value)}
+              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..."
             />
@@ -206,16 +235,23 @@ export default function ContentDetailPage() {
           <div className="flex gap-2">
             {isEditingEmbedding ? (
               <>
-                <Button size="sm" onClick={() => {
+                <Button
+                  size="sm"
+                  onClick={() => {
                     setIsEditingEmbedding(false);
-                }}>
+                  }}
+                >
                   <Save className="h-4 w-4 mr-1" />
                   Save
                 </Button>
-                <Button size="sm" variant="outline" onClick={() => {
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
                     setEditedEmbedding(content?.embedding || []);
                     setIsEditingEmbedding(false);
-                }}>
+                  }}
+                >
                   <X className="h-4 w-4 mr-1" />
                   Cancel
                 </Button>
@@ -237,14 +273,16 @@ export default function ContentDetailPage() {
                 </p>
                 <textarea
                   value={JSON.stringify(editedEmbedding, null, 2)}
-                  onChange={(e) => {
+                  onChange={e => {
                     try {
                       const parsed = JSON.parse(e.target.value);
-                      if (Array.isArray(parsed) && parsed.every(v => typeof v === 'number')) {
+                      if (
+                        Array.isArray(parsed) &&
+                        parsed.every(v => typeof v === "number")
+                      ) {
                         setEditedEmbedding(parsed);
                       }
-                    } catch {
+                    } catch {}
-                    }
                   }}
                   className="w-full h-32 p-3 border rounded-md resize-none font-mono text-xs"
                   placeholder="Enter embedding as JSON array..."
@@ -259,8 +297,15 @@ export default function ContentDetailPage() {
                 </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` : ''}]
+                    {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>
@@ -284,7 +329,7 @@ export default function ContentDetailPage() {
                 <div key={key} className="flex gap-2">
                   <Input
                     value={key}
-                    onChange={(e) => {
+                    onChange={e => {
                       const newMetadata = { ...editedMetadata };
                       delete newMetadata[key];
                       newMetadata[e.target.value] = value;
@@ -294,11 +339,13 @@ export default function ContentDetailPage() {
                     className="flex-1"
                   />
                   <Input
-                    value={typeof value === 'string' ? value : JSON.stringify(value)}
+                    value={
-                    onChange={(e) => {
+                      typeof value === "string" ? value : JSON.stringify(value)
+                    }
+                    onChange={e => {
                       setEditedMetadata({
                         ...editedMetadata,
-                        [key]: e.target.value
+                        [key]: e.target.value,
                       });
                     }}
                     placeholder="Value"
@@ -312,7 +359,7 @@ export default function ContentDetailPage() {
                 onClick={() => {
                   setEditedMetadata({
                     ...editedMetadata,
-                    ['']: ''
+                    [""]: "",
                   });
                 }}
               >
@@ -325,7 +372,7 @@ export default function ContentDetailPage() {
                 <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)}
+                    {typeof value === "string" ? value : JSON.stringify(value)}
                   </span>
                 </div>
               ))}
@@ -351,15 +398,15 @@ export default function ContentDetailPage() {
         value={`${getTextFromContent(content.content).length} chars`}
       />
       {content.metadata.chunk_window && (
-        <PropertyItem
+        <PropertyItem label="Position" value={content.metadata.chunk_window} />
-          label="Position"
-          value={content.metadata.chunk_window}
-        />
       )}
       {file && (
         <>
           <PropertyItem label="File Status" value={file.status} />
-          <PropertyItem label="File Usage" value={`${file.usage_bytes} bytes`} />
+          <PropertyItem
+            label="File Usage"
+            value={`${file.usage_bytes} bytes`}
+          />
         </>
       )}
       {store && (

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

@@ -18,7 +18,10 @@ import {
   PropertiesCard,
   PropertyItem,
 } from "@/components/layout/detail-layout";
-import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
 import {
   Table,
   TableBody,
@@ -36,23 +39,21 @@ export default function ContentsListPage() {
   const fileId = params.fileId as string;
   const client = useAuthClient();
 
-  const getTextFromContent = (content: any): string => {
+  const getTextFromContent = (content: unknown): string => {
-    if (typeof content === 'string') {
+    if (typeof content === "string") {
       return content;
-    } else if (content && content.type === 'text') {
+    } else if (content && content.type === "text") {
       return content.text;
     }
-    return '';
+    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(() => {
@@ -65,7 +66,9 @@ export default function ContentsListPage() {
         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."));
+        setErrorStore(
+          err instanceof Error ? err : new Error("Failed to load vector store.")
+        );
       } finally {
         setIsLoadingStore(false);
       }
@@ -80,10 +83,15 @@ export default function ContentsListPage() {
       setIsLoadingFile(true);
       setErrorFile(null);
       try {
-        const response = await client.vectorStores.files.retrieve(vectorStoreId, fileId);
+        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."));
+        setErrorFile(
+          err instanceof Error ? err : new Error("Failed to load file.")
+        );
       } finally {
         setIsLoadingFile(false);
       }
@@ -99,10 +107,16 @@ export default function ContentsListPage() {
       setErrorContents(null);
       try {
         const contentsAPI = new ContentsAPI(client);
-        const contentsResponse = await contentsAPI.listContents(vectorStoreId, fileId, { limit: 100 });
+        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."));
+        setErrorContents(
+          err instanceof Error ? err : new Error("Failed to load contents.")
+        );
       } finally {
         setIsLoadingContents(false);
       }
@@ -116,26 +130,36 @@ export default function ContentsListPage() {
       await contentsAPI.deleteContent(vectorStoreId, fileId, contentId);
       setContents(contents.filter(content => content.id !== contentId));
     } catch (err) {
-      console.error('Failed to delete content:', err);
+      console.error("Failed to delete content:", err);
     }
   };
 
   const handleViewContent = (contentId: string) => {
-    router.push(`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents/${contentId}`);
+    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: 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: fileId,
+      href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}`,
+    },
     { label: "Contents" },
   ];
 
   if (errorStore) {
-    return <DetailErrorView title={title} id={vectorStoreId} error={errorStore} />;
+    return (
+      <DetailErrorView title={title} id={vectorStoreId} error={errorStore} />
+    );
   }
   if (isLoadingStore) {
     return <DetailLoadingView title={title} />;
@@ -175,7 +199,7 @@ export default function ContentsListPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {contents.map((content) => (
+                {contents.map(content => (
                   <TableRow key={content.id}>
                     <TableCell className="font-mono text-xs">
                       <Button
@@ -189,7 +213,10 @@ export default function ContentsListPage() {
                     </TableCell>
                     <TableCell>
                       <div className="max-w-md">
-                        <p className="text-sm truncate" title={getTextFromContent(content.content)}>
+                        <p
+                          className="text-sm truncate"
+                          title={getTextFromContent(content.content)}
+                        >
                           {getTextFromContent(content.content)}
                         </p>
                       </div>
@@ -197,12 +224,25 @@ export default function ContentsListPage() {
                     <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(', ')}...]`}>
+                          <span
-                            [{content.embedding.slice(0, 3).map(v => v.toFixed(3)).join(', ')}...] ({content.embedding.length}D)
+                            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>
+                        <span className="text-gray-400 dark:text-gray-500 italic">
+                          No embedding
+                        </span>
                       )}
                     </TableCell>
                     <TableCell className="text-xs text-gray-500">
@@ -211,7 +251,9 @@ export default function ContentsListPage() {
                         : `${content.metadata.content_length || 0} chars`}
                     </TableCell>
                     <TableCell className="text-xs">
-                      {new Date(content.created_timestamp * 1000).toLocaleString()}
+                      {new Date(
+                        content.created_timestamp * 1000
+                      ).toLocaleString()}
                     </TableCell>
                     <TableCell>
                       <div className="flex gap-1">

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

@@ -4,9 +4,12 @@ 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 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 { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { List } from "lucide-react";
 import {
@@ -17,7 +20,10 @@ import {
   PropertiesCard,
   PropertyItem,
 } from "@/components/layout/detail-layout";
-import { PageBreadcrumb, BreadcrumbSegment } from "@/components/layout/page-breadcrumb";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
 
 export default function FileDetailPage() {
   const params = useParams();
@@ -46,7 +52,9 @@ export default function FileDetailPage() {
         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."));
+        setErrorStore(
+          err instanceof Error ? err : new Error("Failed to load vector store.")
+        );
       } finally {
         setIsLoadingStore(false);
       }
@@ -61,10 +69,15 @@ export default function FileDetailPage() {
       setIsLoadingFile(true);
       setErrorFile(null);
       try {
-        const response = await client.vectorStores.files.retrieve(vectorStoreId, fileId);
+        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."));
+        setErrorFile(
+          err instanceof Error ? err : new Error("Failed to load file.")
+        );
       } finally {
         setIsLoadingFile(false);
       }
@@ -79,10 +92,15 @@ export default function FileDetailPage() {
       setIsLoadingContents(true);
       setErrorContents(null);
       try {
-        const response = await client.vectorStores.files.content(vectorStoreId, fileId);
+        const response = await client.vectorStores.files.content(
+          vectorStoreId,
+          fileId
+        );
         setContents(response);
       } catch (err) {
-        setErrorContents(err instanceof Error ? err : new Error("Failed to load contents."));
+        setErrorContents(
+          err instanceof Error ? err : new Error("Failed to load contents.")
+        );
       } finally {
         setIsLoadingContents(false);
       }
@@ -91,20 +109,27 @@ export default function FileDetailPage() {
   }, [vectorStoreId, fileId, client]);
 
   const handleViewContents = () => {
-    router.push(`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`);
+    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: 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} />;
+    return (
+      <DetailErrorView title={title} id={vectorStoreId} error={errorStore} />
+    );
   }
   if (isLoadingStore) {
     return <DetailLoadingView title={title} />;
@@ -136,19 +161,29 @@ export default function FileDetailPage() {
                 <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="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="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="font-medium text-gray-600 dark:text-gray-400">
-                    <span className="ml-2">{new Date(file.created_at * 1000).toLocaleString()}</span>
+                      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="font-medium text-gray-600 dark:text-gray-400">
+                      Content Strategy:
+                    </span>
                     <span className="ml-2">{file.chunking_strategy.type}</span>
                   </div>
                 </div>
@@ -166,9 +201,7 @@ export default function FileDetailPage() {
               </div>
             </div>
           ) : (
-            <p className="text-gray-500 italic text-sm">
+            <p className="text-gray-500 italic text-sm">File not found.</p>
-              File not found.
-            </p>
           )}
         </CardContent>
       </Card>
@@ -192,16 +225,27 @@ export default function FileDetailPage() {
             <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="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="font-medium text-gray-600 dark:text-gray-400">
-                  <span className="ml-2">{contents.content.reduce((total, item) => total + item.text.length, 0)}</span>
+                    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>
+                <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)}...

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } 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 } from "llama-stack-client/resources/vector-stores/files";
@@ -11,7 +11,6 @@ export default function VectorStoreDetailPage() {
   const params = useParams();
   const id = params.id as string;
   const client = useAuthClient();
-  const router = useRouter();
 
   const [store, setStore] = useState<VectorStore | null>(null);
   const [files, setFiles] = useState<VectorStoreFile[]>([]);
@@ -34,9 +33,7 @@ export default function VectorStoreDetailPage() {
         setStore(response as VectorStore);
       } catch (err) {
         setErrorStore(
-          err instanceof Error
+          err instanceof Error ? err : new Error("Failed to load vector store.")
-            ? err
-            : new Error("Failed to load vector store."),
         );
       } finally {
         setIsLoadingStore(false);
@@ -55,18 +52,18 @@ export default function VectorStoreDetailPage() {
       setIsLoadingFiles(true);
       setErrorFiles(null);
       try {
-        const result = await client.vectorStores.files.list(id as any);
+        const result = await client.vectorStores.files.list(id);
-        setFiles((result as any).data);
+        setFiles((result as { data: VectorStoreFile[] }).data);
       } catch (err) {
         setErrorFiles(
-          err instanceof Error ? err : new Error("Failed to load files."),
+          err instanceof Error ? err : new Error("Failed to load files.")
         );
       } finally {
         setIsLoadingFiles(false);
       }
     };
     fetchFiles();
-  }, [id]);
+  }, [id, client.vectorStores.files]);
 
   return (
     <VectorStoreDetailView

llama_stack/ui/app/logs/vector-stores/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { useAuthClient } from "@/hooks/use-auth-client";
 import type {
   ListVectorStoresResponse,
   VectorStore,
@@ -12,7 +11,6 @@ import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -21,7 +19,6 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function VectorStoresPage() {
-  const client = useAuthClient();
   const router = useRouter();
   const {
     data: stores,
@@ -37,7 +34,7 @@ export default function VectorStoresPage() {
         after: params.after,
         limit: params.limit,
         order: params.order,
-      } as any);
+      } as Parameters<typeof client.vectorStores.list>[0]);
       return response as ListVectorStoresResponse;
     },
     errorMessagePrefix: "vector stores",
@@ -54,9 +51,9 @@ export default function VectorStoresPage() {
     if (status === "loading") {
       return (
         <div className="space-y-2">
-            <Skeleton className="h-8 w-full"/>
+          <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-4 w-full"/>
+          <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full"/>
+          <Skeleton className="h-4 w-full" />
         </div>
       );
     }
@@ -88,7 +85,7 @@ export default function VectorStoresPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-              {stores.map((store) => {
+            {stores.map(store => {
               const fileCounts = store.file_counts;
               const metadata = store.metadata || {};
               const providerId = metadata.provider_id ?? "";

llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx

@@ -14,7 +14,7 @@ describe("ChatCompletionDetailView", () => {
         isLoading={true}
         error={null}
         id="test-id"
-      />,
+      />
     );
     // Use the data-slot attribute for Skeletons
     const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
@@ -28,10 +28,10 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={{ name: "Error", message: "Network Error" }}
         id="err-id"
-      />,
+      />
     );
     expect(
-      screen.getByText(/Error loading details for ID err-id: Network Error/),
+      screen.getByText(/Error loading details for ID err-id: Network Error/)
     ).toBeInTheDocument();
   });
 
@@ -42,11 +42,11 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={{ name: "Error", message: "" }}
         id="err-id"
-      />,
+      />
     );
     // Use regex to match the error message regardless of whitespace
     expect(
-      screen.getByText(/Error loading details for ID\s*err-id\s*:/),
+      screen.getByText(/Error loading details for ID\s*err-id\s*:/)
     ).toBeInTheDocument();
   });
 
@@ -57,11 +57,11 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={{} as Error}
         id="err-id"
-      />,
+      />
     );
     // Use regex to match the error message regardless of whitespace
     expect(
-      screen.getByText(/Error loading details for ID\s*err-id\s*:/),
+      screen.getByText(/Error loading details for ID\s*err-id\s*:/)
     ).toBeInTheDocument();
   });
 
@@ -72,10 +72,10 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={null}
         id="notfound-id"
-      />,
+      />
     );
     expect(
-      screen.getByText("No details found for ID: notfound-id."),
+      screen.getByText("No details found for ID: notfound-id.")
     ).toBeInTheDocument();
   });
 
@@ -100,7 +100,7 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={null}
         id={mockCompletion.id}
-      />,
+      />
     );
     // Input
     expect(screen.getByText("Input")).toBeInTheDocument();
@@ -112,7 +112,7 @@ describe("ChatCompletionDetailView", () => {
     expect(screen.getByText("Properties")).toBeInTheDocument();
     expect(screen.getByText("Created:")).toBeInTheDocument();
     expect(
-      screen.getByText(new Date(1710000000 * 1000).toLocaleString()),
+      screen.getByText(new Date(1710000000 * 1000).toLocaleString())
     ).toBeInTheDocument();
     expect(screen.getByText("ID:")).toBeInTheDocument();
     expect(screen.getByText("comp_123")).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={null}
         id={mockCompletion.id}
-      />,
+      />
     );
     // Output should include the tool call block (should be present twice: input and output)
     const toolCallLabels = screen.getAllByText("Tool Call");
@@ -178,13 +178,13 @@ describe("ChatCompletionDetailView", () => {
         isLoading={false}
         error={null}
         id={mockCompletion.id}
-      />,
+      />
     );
     // Input section should be present but empty
     expect(screen.getByText("Input")).toBeInTheDocument();
     // Output section should show fallback message
     expect(
-      screen.getByText("No message found in assistant's choice."),
+      screen.getByText("No message found in assistant's choice.")
     ).toBeInTheDocument();
     // Properties should show N/A for finish reason
     expect(screen.getByText("Finish Reason:")).toBeInTheDocument();

llama_stack/ui/components/chat-completions/chat-completion-detail.tsx

@@ -53,14 +53,14 @@ export function ChatCompletionDetailView({
           {completion.choices?.[0]?.message?.tool_calls &&
           Array.isArray(completion.choices[0].message.tool_calls) &&
           !completion.input_messages?.some(
-            (im) =>
+            im =>
               im.role === "assistant" &&
               im.tool_calls &&
               Array.isArray(im.tool_calls) &&
-              im.tool_calls.length > 0,
+              im.tool_calls.length > 0
           )
             ? completion.choices[0].message.tool_calls.map(
-                (toolCall: any, index: number) => {
+                (toolCall: { function?: { name?: string } }, index: number) => {
                   const assistantToolCallMessage: ChatMessage = {
                     role: "assistant",
                     tool_calls: [toolCall],
@@ -72,7 +72,7 @@ export function ChatCompletionDetailView({
                       message={assistantToolCallMessage}
                     />
                   );
-                },
+                }
               )
             : null}
         </CardContent>
@@ -89,7 +89,7 @@ export function ChatCompletionDetailView({
             />
           ) : (
             <p className="text-gray-500 italic text-sm">
-              No message found in assistant's choice.
+              No message found in assistant&apos;s choice.
             </p>
           )}
         </CardContent>
@@ -120,13 +120,18 @@ export function ChatCompletionDetailView({
               value={
                 <div>
                   <ul className="list-disc list-inside pl-4 mt-1">
-                    {toolCalls.map((toolCall: any, index: number) => (
+                    {toolCalls.map(
+                      (
+                        toolCall: { function?: { name?: string } },
+                        index: number
+                      ) => (
                         <li key={index}>
                           <span className="text-gray-900 font-medium">
                             {toolCall.function?.name || "N/A"}
                           </span>
                         </li>
-                    ))}
+                      )
+                    )}
                   </ul>
                 </div>
               }

llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx

@@ -83,7 +83,7 @@ describe("ChatCompletionsTable", () => {
     // Default pass-through implementations
     truncateText.mockImplementation((text: string | undefined) => text);
     extractTextFromContentPart.mockImplementation((content: unknown) =>
-      typeof content === "string" ? content : "extracted text",
+      typeof content === "string" ? content : "extracted text"
     );
     extractDisplayableText.mockImplementation((message: unknown) => {
       const msg = message as { content?: string };
@@ -138,7 +138,7 @@ describe("ChatCompletionsTable", () => {
     if (row) {
       fireEvent.click(row);
       expect(mockPush).toHaveBeenCalledWith(
-        "/logs/chat-completions/completion_123",
+        "/logs/chat-completions/completion_123"
       );
     } else {
       throw new Error('Row with "Test prompt" not found for router mock test.');
@@ -162,7 +162,7 @@ describe("ChatCompletionsTable", () => {
       expect(tableCaption).toBeInTheDocument();
       if (tableCaption) {
         const captionSkeleton = tableCaption.querySelector(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(captionSkeleton).toBeInTheDocument();
       }
@@ -172,7 +172,7 @@ describe("ChatCompletionsTable", () => {
       expect(tableBody).toBeInTheDocument();
       if (tableBody) {
         const bodySkeletons = tableBody.querySelectorAll(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(bodySkeletons.length).toBeGreaterThan(0);
       }
@@ -192,14 +192,14 @@ describe("ChatCompletionsTable", () => {
 
       render(<ChatCompletionsTable {...defaultProps} />);
       expect(
-        screen.getByText("Unable to load chat completions"),
+        screen.getByText("Unable to load chat completions")
       ).toBeInTheDocument();
       expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
 
     test.each([{ name: "Error", message: "" }, {}])(
       "renders default error message when error has no message",
-      (errorObject) => {
+      errorObject => {
         mockedUsePagination.mockReturnValue({
           data: [],
           status: "error",
@@ -210,14 +210,14 @@ describe("ChatCompletionsTable", () => {
 
         render(<ChatCompletionsTable {...defaultProps} />);
         expect(
-          screen.getByText("Unable to load chat completions"),
+          screen.getByText("Unable to load chat completions")
         ).toBeInTheDocument();
         expect(
           screen.getByText(
-            "An unexpected error occurred while loading the data.",
+            "An unexpected error occurred while loading the data."
-          ),
+          )
         ).toBeInTheDocument();
-      },
+      }
     );
   });
 
@@ -225,7 +225,7 @@ describe("ChatCompletionsTable", () => {
     test('renders "No chat completions found." and no table when data array is empty', () => {
       render(<ChatCompletionsTable {...defaultProps} />);
       expect(
-        screen.getByText("No chat completions found."),
+        screen.getByText("No chat completions found.")
       ).toBeInTheDocument();
 
       // Ensure that the table structure is NOT rendered in the empty state
@@ -292,7 +292,7 @@ describe("ChatCompletionsTable", () => {
 
       // Table caption
       expect(
-        screen.getByText("A list of your recent chat completions."),
+        screen.getByText("A list of your recent chat completions.")
       ).toBeInTheDocument();
 
       // Table headers
@@ -306,14 +306,14 @@ describe("ChatCompletionsTable", () => {
       expect(screen.getByText("Test output")).toBeInTheDocument();
       expect(screen.getByText("llama-test-model")).toBeInTheDocument();
       expect(
-        screen.getByText(new Date(1710000000 * 1000).toLocaleString()),
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
       ).toBeInTheDocument();
 
       expect(screen.getByText("Another input")).toBeInTheDocument();
       expect(screen.getByText("Another output")).toBeInTheDocument();
       expect(screen.getByText("llama-another-model")).toBeInTheDocument();
       expect(
-        screen.getByText(new Date(1710001000 * 1000).toLocaleString()),
+        screen.getByText(new Date(1710001000 * 1000).toLocaleString())
       ).toBeInTheDocument();
     });
   });
@@ -328,7 +328,7 @@ describe("ChatCompletionsTable", () => {
           return typeof text === "string" && text.length > effectiveMaxLength
             ? text.slice(0, effectiveMaxLength) + "..."
             : text;
-        },
+        }
       );
 
       const longInput =
@@ -368,7 +368,7 @@ describe("ChatCompletionsTable", () => {
 
       // The truncated text should be present for both input and output
       const truncatedTexts = screen.getAllByText(
-        longInput.slice(0, 10) + "...",
+        longInput.slice(0, 10) + "..."
       );
       expect(truncatedTexts.length).toBe(2); // one for input, one for output
     });
@@ -420,7 +420,7 @@ describe("ChatCompletionsTable", () => {
       // Verify the extracted text appears in the table
       expect(screen.getByText("Extracted input")).toBeInTheDocument();
       expect(
-        screen.getByText("Extracted output from assistant"),
+        screen.getByText("Extracted output from assistant")
       ).toBeInTheDocument();
     });
   });

llama_stack/ui/components/chat-completions/chat-completions-table.tsx

@@ -5,6 +5,7 @@ import {
   UsePaginationOptions,
   ListChatCompletionsResponse,
 } from "@/lib/types";
+import { ListChatCompletionsParams } from "@/lib/llama-stack-client";
 import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
 import {
   extractTextFromContentPart,
@@ -38,14 +39,14 @@ export function ChatCompletionsTable({
       limit: number;
       model?: string;
       order?: string;
-    },
+    }
   ) => {
     const response = await client.chat.completions.list({
       after: params.after,
       limit: params.limit,
       ...(params.model && { model: params.model }),
       ...(params.order && { order: params.order }),
-    } as any);
+    } as ListChatCompletionsParams);
 
     return response as ListChatCompletionsResponse;
   };

llama_stack/ui/components/chat-completions/chat-messasge-item.tsx

@@ -37,7 +37,11 @@ export function ChatMessageItem({ message }: ChatMessageItemProps) {
       ) {
         return (
           <>
-            {message.tool_calls.map((toolCall: any, index: number) => {
+            {message.tool_calls.map(
+              (
+                toolCall: { function?: { name?: string; arguments?: unknown } },
+                index: number
+              ) => {
                 const formattedToolCall = formatToolCallToString(toolCall);
                 const toolCallContent = (
                   <ToolCallBlock>
@@ -51,7 +55,8 @@ export function ChatMessageItem({ message }: ChatMessageItemProps) {
                     content={toolCallContent}
                   />
                 );
-            })}
+              }
+            )}
           </>
         );
       } else {

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

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import React, { useMemo, useState } from "react"
+import React, { useMemo, useState } from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { motion } from "framer-motion"
+import { motion } from "framer-motion";
-import { Ban, ChevronRight, Code2, Loader2, Terminal } from "lucide-react"
+import { Ban, ChevronRight, Code2, Loader2, Terminal } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@/components/ui/collapsible";
-import { FilePreview } from "@/components/ui/file-preview"
+import { FilePreview } from "@/components/ui/file-preview";
-import { MarkdownRenderer } from "@/components/chat-playground/markdown-renderer"
+import { MarkdownRenderer } from "@/components/chat-playground/markdown-renderer";
 
 const chatBubbleVariants = cva(
   "group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]",
@@ -52,66 +52,66 @@ const chatBubbleVariants = cva(
       },
     ],
   }
-)
+);
 
-type Animation = VariantProps<typeof chatBubbleVariants>["animation"]
+type Animation = VariantProps<typeof chatBubbleVariants>["animation"];
 
 interface Attachment {
-  name?: string
+  name?: string;
-  contentType?: string
+  contentType?: string;
-  url: string
+  url: string;
 }
 
 interface PartialToolCall {
-  state: "partial-call"
+  state: "partial-call";
-  toolName: string
+  toolName: string;
 }
 
 interface ToolCall {
-  state: "call"
+  state: "call";
-  toolName: string
+  toolName: string;
 }
 
 interface ToolResult {
-  state: "result"
+  state: "result";
-  toolName: string
+  toolName: string;
   result: {
-    __cancelled?: boolean
+    __cancelled?: boolean;
-    [key: string]: any
+    [key: string]: unknown;
-  }
+  };
 }
 
-type ToolInvocation = PartialToolCall | ToolCall | ToolResult
+type ToolInvocation = PartialToolCall | ToolCall | ToolResult;
 
 interface ReasoningPart {
-  type: "reasoning"
+  type: "reasoning";
-  reasoning: string
+  reasoning: string;
 }
 
 interface ToolInvocationPart {
-  type: "tool-invocation"
+  type: "tool-invocation";
-  toolInvocation: ToolInvocation
+  toolInvocation: ToolInvocation;
 }
 
 interface TextPart {
-  type: "text"
+  type: "text";
-  text: string
+  text: string;
 }
 
 // For compatibility with AI SDK types, not used
 interface SourcePart {
-  type: "source"
+  type: "source";
-  source?: any
+  source?: unknown;
 }
 
 interface FilePart {
-  type: "file"
+  type: "file";
-  mimeType: string
+  mimeType: string;
-  data: string
+  data: string;
 }
 
 interface StepStartPart {
-  type: "step-start"
+  type: "step-start";
 }
 
 type MessagePart =
@@ -120,22 +120,22 @@ type MessagePart =
   | ToolInvocationPart
   | SourcePart
   | FilePart
-  | StepStartPart
+  | StepStartPart;
 
 export interface Message {
-  id: string
+  id: string;
-  role: "user" | "assistant" | (string & {})
+  role: "user" | "assistant" | (string & {});
-  content: string
+  content: string;
-  createdAt?: Date
+  createdAt?: Date;
-  experimental_attachments?: Attachment[]
+  experimental_attachments?: Attachment[];
-  toolInvocations?: ToolInvocation[]
+  toolInvocations?: ToolInvocation[];
-  parts?: MessagePart[]
+  parts?: MessagePart[];
 }
 
 export interface ChatMessageProps extends Message {
-  showTimeStamp?: boolean
+  showTimeStamp?: boolean;
-  animation?: Animation
+  animation?: Animation;
-  actions?: React.ReactNode
+  actions?: React.ReactNode;
 }
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({
@@ -150,21 +150,21 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   parts,
 }) => {
   const files = useMemo(() => {
-    return experimental_attachments?.map((attachment) => {
+    return experimental_attachments?.map(attachment => {
-      const dataArray = dataUrlToUint8Array(attachment.url)
+      const dataArray = dataUrlToUint8Array(attachment.url);
       const file = new File([dataArray], attachment.name ?? "Unknown", {
         type: attachment.contentType,
-      })
+      });
-      return file
+      return file;
-    })
+    });
-  }, [experimental_attachments])
+  }, [experimental_attachments]);
 
-  const isUser = role === "user"
+  const isUser = role === "user";
 
   const formattedTime = createdAt?.toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
-  })
+  });
 
   if (isUser) {
     return (
@@ -174,7 +174,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         {files ? (
           <div className="mb-1 flex flex-wrap gap-2">
             {files.map((file, index) => {
-              return <FilePreview file={file} key={index} />
+              return <FilePreview file={file} key={index} />;
             })}
           </div>
         ) : null}
@@ -195,7 +195,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
           </time>
         ) : null}
       </div>
-    )
+    );
   }
 
   if (parts && parts.length > 0) {
@@ -230,23 +230,23 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
               </time>
             ) : null}
           </div>
-        )
+        );
       } else if (part.type === "reasoning") {
-        return <ReasoningBlock key={`reasoning-${index}`} part={part} />
+        return <ReasoningBlock key={`reasoning-${index}`} part={part} />;
       } else if (part.type === "tool-invocation") {
         return (
           <ToolCall
             key={`tool-${index}`}
             toolInvocations={[part.toolInvocation]}
           />
-        )
+        );
       }
-      return null
+      return null;
-    })
+    });
   }
 
   if (toolInvocations && toolInvocations.length > 0) {
-    return <ToolCall toolInvocations={toolInvocations} />
+    return <ToolCall toolInvocations={toolInvocations} />;
   }
 
   return (
@@ -272,17 +272,17 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         </time>
       ) : null}
     </div>
-  )
+  );
-}
+};
 
 function dataUrlToUint8Array(data: string) {
-  const base64 = data.split(",")[1]
+  const base64 = data.split(",")[1];
-  const buf = Buffer.from(base64, "base64")
+  const buf = Buffer.from(base64, "base64");
-  return new Uint8Array(buf)
+  return new Uint8Array(buf);
 }
 
 const ReasoningBlock = ({ part }: { part: ReasoningPart }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className="mb-2 flex flex-col items-start sm:max-w-[70%]">
@@ -319,20 +319,20 @@ const ReasoningBlock = ({ part }: { part: ReasoningPart }) => {
         </CollapsibleContent>
       </Collapsible>
     </div>
-  )
+  );
-}
+};
 
 function ToolCall({
   toolInvocations,
 }: Pick<ChatMessageProps, "toolInvocations">) {
-  if (!toolInvocations?.length) return null
+  if (!toolInvocations?.length) return null;
 
   return (
     <div className="flex flex-col items-start gap-2">
       {toolInvocations.map((invocation, index) => {
         const isCancelled =
           invocation.state === "result" &&
-          invocation.result.__cancelled === true
+          invocation.result.__cancelled === true;
 
         if (isCancelled) {
           return (
@@ -350,7 +350,7 @@ function ToolCall({
                 </span>
               </span>
             </div>
-          )
+          );
         }
 
         switch (invocation.state) {
@@ -373,7 +373,7 @@ function ToolCall({
                 </span>
                 <Loader2 className="h-3 w-3 animate-spin" />
               </div>
-            )
+            );
           case "result":
             return (
               <div
@@ -395,11 +395,11 @@ function ToolCall({
                   {JSON.stringify(invocation.result, null, 2)}
                 </pre>
               </div>
-            )
+            );
           default:
-            return null
+            return null;
         }
       })}
     </div>
-  )
+  );
 }

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   forwardRef,
@@ -6,48 +6,48 @@ import {
   useRef,
   useState,
   type ReactElement,
-} from "react"
+} from "react";
-import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react"
+import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { useAutoScroll } from "@/hooks/use-auto-scroll"
+import { useAutoScroll } from "@/hooks/use-auto-scroll";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { type Message } from "@/components/chat-playground/chat-message"
+import { type Message } from "@/components/chat-playground/chat-message";
-import { CopyButton } from "@/components/ui/copy-button"
+import { CopyButton } from "@/components/ui/copy-button";
-import { MessageInput } from "@/components/chat-playground/message-input"
+import { MessageInput } from "@/components/chat-playground/message-input";
-import { MessageList } from "@/components/chat-playground/message-list"
+import { MessageList } from "@/components/chat-playground/message-list";
-import { PromptSuggestions } from "@/components/chat-playground/prompt-suggestions"
+import { PromptSuggestions } from "@/components/chat-playground/prompt-suggestions";
 
 interface ChatPropsBase {
   handleSubmit: (
     event?: { preventDefault?: () => void },
     options?: { experimental_attachments?: FileList }
-  ) => void
+  ) => void;
-  messages: Array<Message>
+  messages: Array<Message>;
-  input: string
+  input: string;
-  className?: string
+  className?: string;
-  handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>
+  handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>;
-  isGenerating: boolean
+  isGenerating: boolean;
-  stop?: () => void
+  stop?: () => void;
   onRateResponse?: (
     messageId: string,
     rating: "thumbs-up" | "thumbs-down"
-  ) => void
+  ) => void;
-  setMessages?: (messages: any[]) => void
+  setMessages?: (messages: Message[]) => void;
-  transcribeAudio?: (blob: Blob) => Promise<string>
+  transcribeAudio?: (blob: Blob) => Promise<string>;
 }
 
 interface ChatPropsWithoutSuggestions extends ChatPropsBase {
-  append?: never
+  append?: never;
-  suggestions?: never
+  suggestions?: never;
 }
 
 interface ChatPropsWithSuggestions extends ChatPropsBase {
-  append: (message: { role: "user"; content: string }) => void
+  append: (message: { role: "user"; content: string }) => void;
-  suggestions: string[]
+  suggestions: string[];
 }
 
-type ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions
+type ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions;
 
 export function Chat({
   messages,
@@ -63,34 +63,34 @@ export function Chat({
   setMessages,
   transcribeAudio,
 }: ChatProps) {
-  const lastMessage = messages.at(-1)
+  const lastMessage = messages.at(-1);
-  const isEmpty = messages.length === 0
+  const isEmpty = messages.length === 0;
-  const isTyping = lastMessage?.role === "user"
+  const isTyping = lastMessage?.role === "user";
 
-  const messagesRef = useRef(messages)
+  const messagesRef = useRef(messages);
-  messagesRef.current = messages
+  messagesRef.current = messages;
 
   // Enhanced stop function that marks pending tool calls as cancelled
   const handleStop = useCallback(() => {
-    stop?.()
+    stop?.();
 
-    if (!setMessages) return
+    if (!setMessages) return;
 
-    const latestMessages = [...messagesRef.current]
+    const latestMessages = [...messagesRef.current];
     const lastAssistantMessage = latestMessages.findLast(
-      (m) => m.role === "assistant"
+      m => m.role === "assistant"
-    )
+    );
 
-    if (!lastAssistantMessage) return
+    if (!lastAssistantMessage) return;
 
-    let needsUpdate = false
+    let needsUpdate = false;
-    let updatedMessage = { ...lastAssistantMessage }
+    let updatedMessage = { ...lastAssistantMessage };
 
     if (lastAssistantMessage.toolInvocations) {
       const updatedToolInvocations = lastAssistantMessage.toolInvocations.map(
-        (toolInvocation) => {
+        toolInvocation => {
           if (toolInvocation.state === "call") {
-            needsUpdate = true
+            needsUpdate = true;
             return {
               ...toolInvocation,
               state: "result",
@@ -98,28 +98,32 @@ export function Chat({
                 content: "Tool execution was cancelled",
                 __cancelled: true, // Special marker to indicate cancellation
               },
-            } as const
+            } as const;
           }
-          return toolInvocation
+          return toolInvocation;
         }
-      )
+      );
 
       if (needsUpdate) {
         updatedMessage = {
           ...updatedMessage,
           toolInvocations: updatedToolInvocations,
-        }
+        };
       }
     }
 
     if (lastAssistantMessage.parts && lastAssistantMessage.parts.length > 0) {
-      const updatedParts = lastAssistantMessage.parts.map((part: any) => {
+      const updatedParts = lastAssistantMessage.parts.map(
+        (part: {
+          type: string;
+          toolInvocation?: { state: string; toolName: string };
+        }) => {
           if (
             part.type === "tool-invocation" &&
             part.toolInvocation &&
             part.toolInvocation.state === "call"
           ) {
-          needsUpdate = true
+            needsUpdate = true;
             return {
               ...part,
               toolInvocation: {
@@ -130,29 +134,30 @@ export function Chat({
                   __cancelled: true,
                 },
               },
+            };
           }
+          return part;
         }
-        return part
+      );
-      })
 
       if (needsUpdate) {
         updatedMessage = {
           ...updatedMessage,
           parts: updatedParts,
-        }
+        };
       }
     }
 
     if (needsUpdate) {
       const messageIndex = latestMessages.findIndex(
-        (m) => m.id === lastAssistantMessage.id
+        m => m.id === lastAssistantMessage.id
-      )
+      );
       if (messageIndex !== -1) {
-        latestMessages[messageIndex] = updatedMessage
+        latestMessages[messageIndex] = updatedMessage;
-        setMessages(latestMessages)
+        setMessages(latestMessages);
       }
     }
-  }, [stop, setMessages, messagesRef])
+  }, [stop, setMessages, messagesRef]);
 
   const messageOptions = useCallback(
     (message: Message) => ({
@@ -189,7 +194,7 @@ export function Chat({
       ),
     }),
     [onRateResponse]
-  )
+  );
 
   return (
     <ChatContainer className={className}>
@@ -237,15 +242,15 @@ export function Chat({
         </div>
       </div>
     </ChatContainer>
-  )
+  );
 }
-Chat.displayName = "Chat"
+Chat.displayName = "Chat";
 
 export function ChatMessages({
   messages,
   children,
 }: React.PropsWithChildren<{
-  messages: Message[]
+  messages: Message[];
 }>) {
   const {
     containerRef,
@@ -253,7 +258,7 @@ export function ChatMessages({
     handleScroll,
     shouldAutoScroll,
     handleTouchStart,
-  } = useAutoScroll([messages])
+  } = useAutoScroll([messages]);
 
   return (
     <div
@@ -281,7 +286,7 @@ export function ChatMessages({
         </div>
       )}
     </div>
-  )
+  );
 }
 
 export const ChatContainer = forwardRef<
@@ -294,56 +299,56 @@ export const ChatContainer = forwardRef<
       className={cn("flex flex-col max-h-full w-full", className)}
       {...props}
     />
-  )
+  );
-})
+});
-ChatContainer.displayName = "ChatContainer"
+ChatContainer.displayName = "ChatContainer";
 
 interface ChatFormProps {
-  className?: string
+  className?: string;
-  isPending: boolean
+  isPending: boolean;
   handleSubmit: (
     event?: { preventDefault?: () => void },
     options?: { experimental_attachments?: FileList }
-  ) => void
+  ) => void;
   children: (props: {
-    files: File[] | null
+    files: File[] | null;
-    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>
+    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
-  }) => ReactElement
+  }) => ReactElement;
 }
 
 export const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(
   ({ children, handleSubmit, isPending, className }, ref) => {
-    const [files, setFiles] = useState<File[] | null>(null)
+    const [files, setFiles] = useState<File[] | null>(null);
 
     const onSubmit = (event: React.FormEvent) => {
-      // if (isPending) {
+      if (isPending) {
-      //   event.preventDefault()
+        event.preventDefault();
-      //   return
+        return;
-      // }
+      }
 
       if (!files) {
-        handleSubmit(event)
+        handleSubmit(event);
-        return
+        return;
       }
 
-      const fileList = createFileList(files)
+      const fileList = createFileList(files);
-      handleSubmit(event, { experimental_attachments: fileList })
+      handleSubmit(event, { experimental_attachments: fileList });
-      setFiles(null)
+      setFiles(null);
-    }
+    };
 
     return (
       <form ref={ref} onSubmit={onSubmit} className={className}>
         {children({ files, setFiles })}
       </form>
-    )
+    );
   }
-)
+);
-ChatForm.displayName = "ChatForm"
+ChatForm.displayName = "ChatForm";
 
 function createFileList(files: File[] | FileList): FileList {
-  const dataTransfer = new DataTransfer()
+  const dataTransfer = new DataTransfer();
   for (const file of Array.from(files)) {
-    dataTransfer.items.add(file)
+    dataTransfer.items.add(file);
   }
-  return dataTransfer.files
+  return dataTransfer.files;
 }

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

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion";
-import { X } from "lucide-react"
+import { X } from "lucide-react";
 
 interface InterruptPromptProps {
-  isOpen: boolean
+  isOpen: boolean;
-  close: () => void
+  close: () => void;
 }
 
 export function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
@@ -37,5 +37,5 @@ export function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
         </motion.div>
       )}
     </AnimatePresence>
-  )
+  );
 }

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

@@ -1,12 +1,12 @@
-import React, { Suspense, useEffect, useState } from "react"
+import React, { Suspense, useEffect, useState } from "react";
-import Markdown from "react-markdown"
+import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm"
+import remarkGfm from "remark-gfm";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { CopyButton } from "@/components/ui/copy-button"
+import { CopyButton } from "@/components/ui/copy-button";
 
 interface MarkdownRendererProps {
-  children: string
+  children: string;
 }
 
 export function MarkdownRenderer({ children }: MarkdownRendererProps) {
@@ -16,34 +16,34 @@ export function MarkdownRenderer({ children }: MarkdownRendererProps) {
         {children}
       </Markdown>
     </div>
-  )
+  );
 }
 
 interface HighlightedPre extends React.HTMLAttributes<HTMLPreElement> {
-  children: string
+  children: string;
-  language: string
+  language: string;
 }
 
 const HighlightedPre = React.memo(
   ({ children, language, ...props }: HighlightedPre) => {
-    const [tokens, setTokens] = useState<any[] | null>(null)
+    const [tokens, setTokens] = useState<unknown[] | null>(null);
-    const [isSupported, setIsSupported] = useState(false)
+    const [isSupported, setIsSupported] = useState(false);
 
     useEffect(() => {
-      let mounted = true
+      let mounted = true;
 
       const loadAndHighlight = async () => {
         try {
-          const { codeToTokens, bundledLanguages } = await import("shiki")
+          const { codeToTokens, bundledLanguages } = await import("shiki");
 
-          if (!mounted) return
+          if (!mounted) return;
 
           if (!(language in bundledLanguages)) {
-            setIsSupported(false)
+            setIsSupported(false);
-            return
+            return;
           }
 
-          setIsSupported(true)
+          setIsSupported(true);
 
           const { tokens: highlightedTokens } = await codeToTokens(children, {
             lang: language as keyof typeof bundledLanguages,
@@ -52,31 +52,31 @@ const HighlightedPre = React.memo(
               light: "github-light",
               dark: "github-dark",
             },
-          })
+          });
 
           if (mounted) {
-            setTokens(highlightedTokens)
+            setTokens(highlightedTokens);
           }
-        } catch (error) {
+        } catch {
           if (mounted) {
-            setIsSupported(false)
+            setIsSupported(false);
-          }
           }
         }
+      };
 
-      loadAndHighlight()
+      loadAndHighlight();
 
       return () => {
-        mounted = false
+        mounted = false;
-      }
+      };
-    }, [children, language])
+    }, [children, language]);
 
     if (!isSupported) {
-      return <pre {...props}>{children}</pre>
+      return <pre {...props}>{children}</pre>;
     }
 
     if (!tokens) {
-      return <pre {...props}>{children}</pre>
+      return <pre {...props}>{children}</pre>;
     }
 
     return (
@@ -89,7 +89,7 @@ const HighlightedPre = React.memo(
                   const style =
                     typeof token.htmlStyle === "string"
                       ? undefined
-                      : token.htmlStyle
+                      : token.htmlStyle;
 
                   return (
                     <span
@@ -99,7 +99,7 @@ const HighlightedPre = React.memo(
                     >
                       {token.content}
                     </span>
-                  )
+                  );
                 })}
               </span>
               {lineIndex !== tokens.length - 1 && "\n"}
@@ -107,15 +107,15 @@ const HighlightedPre = React.memo(
           ))}
         </code>
       </pre>
-    )
+    );
   }
-)
+);
-HighlightedPre.displayName = "HighlightedCode"
+HighlightedPre.displayName = "HighlightedCode";
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
-  children: React.ReactNode
+  children: React.ReactNode;
-  className?: string
+  className?: string;
-  language: string
+  language: string;
 }
 
 const CodeBlock = ({
@@ -127,12 +127,12 @@ const CodeBlock = ({
   const code =
     typeof children === "string"
       ? children
-      : childrenTakeAllStringContents(children)
+      : childrenTakeAllStringContents(children);
 
   const preClass = cn(
     "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
     className
-  )
+  );
 
   return (
     <div className="group/code relative mb-4">
@@ -152,27 +152,27 @@ const CodeBlock = ({
         <CopyButton content={code} copyMessage="Copied code to clipboard" />
       </div>
     </div>
-  )
+  );
-}
+};
 
-function childrenTakeAllStringContents(element: any): string {
+function childrenTakeAllStringContents(element: unknown): string {
   if (typeof element === "string") {
-    return element
+    return element;
   }
 
   if (element?.props?.children) {
-    let children = element.props.children
+    const children = element.props.children;
 
     if (Array.isArray(children)) {
       return children
-        .map((child) => childrenTakeAllStringContents(child))
+        .map(child => childrenTakeAllStringContents(child))
-        .join("")
+        .join("");
     } else {
-      return childrenTakeAllStringContents(children)
+      return childrenTakeAllStringContents(children);
     }
   }
 
-  return ""
+  return "";
 }
 
 const COMPONENTS = {
@@ -184,8 +184,14 @@ const COMPONENTS = {
   strong: withClass("strong", "font-semibold"),
   a: withClass("a", "text-primary underline underline-offset-2"),
   blockquote: withClass("blockquote", "border-l-2 border-primary pl-4"),
-  code: ({ children, className, node, ...rest }: any) => {
+  code: ({
-    const match = /language-(\w+)/.exec(className || "")
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => {
+    const match = /language-(\w+)/.exec(className || "");
     return match ? (
       <CodeBlock className={className} language={match[1]} {...rest}>
         {children}
@@ -199,9 +205,9 @@ const COMPONENTS = {
       >
         {children}
       </code>
-    )
+    );
   },
-  pre: ({ children }: any) => children,
+  pre: ({ children }: { children: React.ReactNode }) => children,
   ol: withClass("ol", "list-decimal space-y-2 pl-6"),
   ul: withClass("ul", "list-disc space-y-2 pl-6"),
   li: withClass("li", "my-1.5"),
@@ -220,14 +226,14 @@ const COMPONENTS = {
   tr: withClass("tr", "m-0 border-t p-0 even:bg-muted"),
   p: withClass("p", "whitespace-pre-wrap"),
   hr: withClass("hr", "border-foreground/20"),
-}
+};
 
 function withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {
-  const Component = ({ node, ...props }: any) => (
+  const Component = ({ ...props }: Record<string, unknown>) => (
     <Tag className={classes} {...props} />
-  )
+  );
-  Component.displayName = Tag
+  Component.displayName = Tag;
-  return Component
+  return Component;
 }
 
-export default MarkdownRenderer
+export default MarkdownRenderer;

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

@@ -1,41 +1,41 @@
-"use client"
+"use client";
 
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion";
-import { ArrowUp, Info, Loader2, Mic, Paperclip, Square } from "lucide-react"
+import { ArrowUp, Info, Loader2, Mic, Paperclip, Square } from "lucide-react";
-import { omit } from "remeda"
+import { omit } from "remeda";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { useAudioRecording } from "@/hooks/use-audio-recording"
+import { useAudioRecording } from "@/hooks/use-audio-recording";
-import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea"
+import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea";
-import { AudioVisualizer } from "@/components/ui/audio-visualizer"
+import { AudioVisualizer } from "@/components/ui/audio-visualizer";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { FilePreview } from "@/components/ui/file-preview"
+import { FilePreview } from "@/components/ui/file-preview";
-import { InterruptPrompt } from "@/components/chat-playground/interrupt-prompt"
+import { InterruptPrompt } from "@/components/chat-playground/interrupt-prompt";
 
 interface MessageInputBaseProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  value: string
+  value: string;
-  submitOnEnter?: boolean
+  submitOnEnter?: boolean;
-  stop?: () => void
+  stop?: () => void;
-  isGenerating: boolean
+  isGenerating: boolean;
-  enableInterrupt?: boolean
+  enableInterrupt?: boolean;
-  transcribeAudio?: (blob: Blob) => Promise<string>
+  transcribeAudio?: (blob: Blob) => Promise<string>;
 }
 
 interface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {
-  allowAttachments?: false
+  allowAttachments?: false;
 }
 
 interface MessageInputWithAttachmentsProps extends MessageInputBaseProps {
-  allowAttachments: true
+  allowAttachments: true;
-  files: File[] | null
+  files: File[] | null;
-  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>
+  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
 }
 
 type MessageInputProps =
   | MessageInputWithoutAttachmentProps
-  | MessageInputWithAttachmentsProps
+  | MessageInputWithAttachmentsProps;
 
 export function MessageInput({
   placeholder = "Ask AI...",
@@ -48,8 +48,8 @@ export function MessageInput({
   transcribeAudio,
   ...props
 }: MessageInputProps) {
-  const [isDragging, setIsDragging] = useState(false)
+  const [isDragging, setIsDragging] = useState(false);
-  const [showInterruptPrompt, setShowInterruptPrompt] = useState(false)
+  const [showInterruptPrompt, setShowInterruptPrompt] = useState(false);
 
   const {
     isListening,
@@ -61,123 +61,124 @@ export function MessageInput({
     stopRecording,
   } = useAudioRecording({
     transcribeAudio,
-    onTranscriptionComplete: (text) => {
+    onTranscriptionComplete: text => {
-      props.onChange?.({ target: { value: text } } as any)
+      props.onChange?.({
+        target: { value: text },
+      } as React.ChangeEvent<HTMLTextAreaElement>);
     },
-  })
+  });
 
   useEffect(() => {
     if (!isGenerating) {
-      setShowInterruptPrompt(false)
+      setShowInterruptPrompt(false);
     }
-  }, [isGenerating])
+  }, [isGenerating]);
 
   const addFiles = (files: File[] | null) => {
     if (props.allowAttachments) {
-      props.setFiles((currentFiles) => {
+      props.setFiles(currentFiles => {
         if (currentFiles === null) {
-          return files
+          return files;
         }
 
         if (files === null) {
-          return currentFiles
+          return currentFiles;
         }
 
-        return [...currentFiles, ...files]
+        return [...currentFiles, ...files];
-      })
+      });
-    }
     }
+  };
 
   const onDragOver = (event: React.DragEvent) => {
-    if (props.allowAttachments !== true) return
+    if (props.allowAttachments !== true) return;
-    event.preventDefault()
+    event.preventDefault();
-    setIsDragging(true)
+    setIsDragging(true);
-  }
+  };
 
   const onDragLeave = (event: React.DragEvent) => {
-    if (props.allowAttachments !== true) return
+    if (props.allowAttachments !== true) return;
-    event.preventDefault()
+    event.preventDefault();
-    setIsDragging(false)
+    setIsDragging(false);
-  }
+  };
 
   const onDrop = (event: React.DragEvent) => {
-    setIsDragging(false)
+    setIsDragging(false);
-    if (props.allowAttachments !== true) return
+    if (props.allowAttachments !== true) return;
-    event.preventDefault()
+    event.preventDefault();
-    const dataTransfer = event.dataTransfer
+    const dataTransfer = event.dataTransfer;
     if (dataTransfer.files.length) {
-      addFiles(Array.from(dataTransfer.files))
+      addFiles(Array.from(dataTransfer.files));
-    }
     }
+  };
 
   const onPaste = (event: React.ClipboardEvent) => {
-    const items = event.clipboardData?.items
+    const items = event.clipboardData?.items;
-    if (!items) return
+    if (!items) return;
 
-    const text = event.clipboardData.getData("text")
+    const text = event.clipboardData.getData("text");
     if (text && text.length > 500 && props.allowAttachments) {
-      event.preventDefault()
+      event.preventDefault();
-      const blob = new Blob([text], { type: "text/plain" })
+      const blob = new Blob([text], { type: "text/plain" });
       const file = new File([blob], "Pasted text", {
         type: "text/plain",
         lastModified: Date.now(),
-      })
+      });
-      addFiles([file])
+      addFiles([file]);
-      return
+      return;
     }
 
     const files = Array.from(items)
-      .map((item) => item.getAsFile())
+      .map(item => item.getAsFile())
-      .filter((file) => file !== null)
+      .filter(file => file !== null);
 
     if (props.allowAttachments && files.length > 0) {
-      addFiles(files)
+      addFiles(files);
-    }
     }
+  };
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault()
+      event.preventDefault();
 
       if (isGenerating && stop && enableInterrupt) {
         if (showInterruptPrompt) {
-          stop()
+          stop();
-          setShowInterruptPrompt(false)
+          setShowInterruptPrompt(false);
-          event.currentTarget.form?.requestSubmit()
+          event.currentTarget.form?.requestSubmit();
         } else if (
           props.value ||
           (props.allowAttachments && props.files?.length)
         ) {
-          setShowInterruptPrompt(true)
+          setShowInterruptPrompt(true);
-          return
+          return;
         }
       }
 
-      event.currentTarget.form?.requestSubmit()
+      event.currentTarget.form?.requestSubmit();
     }
 
-    onKeyDownProp?.(event)
+    onKeyDownProp?.(event);
-  }
+  };
 
-  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [textAreaHeight, setTextAreaHeight] = useState<number>(0)
+  const [textAreaHeight, setTextAreaHeight] = useState<number>(0);
 
   useEffect(() => {
     if (textAreaRef.current) {
-      setTextAreaHeight(textAreaRef.current.offsetHeight)
+      setTextAreaHeight(textAreaRef.current.offsetHeight);
     }
-  }, [props.value])
+  }, [props.value]);
 
   const showFileList =
-    props.allowAttachments && props.files && props.files.length > 0
+    props.allowAttachments && props.files && props.files.length > 0;
-
 
   useAutosizeTextArea({
     ref: textAreaRef,
     maxHeight: 240,
     borderWidth: 1,
     dependencies: [props.value, showFileList],
-  })
+  });
 
   return (
     <div
@@ -220,24 +221,24 @@ export function MessageInput({
             <div className="absolute inset-x-3 bottom-0 z-20 overflow-x-scroll py-3">
               <div className="flex space-x-3">
                 <AnimatePresence mode="popLayout">
-                  {props.files?.map((file) => {
+                  {props.files?.map(file => {
                     return (
                       <FilePreview
                         key={file.name + String(file.lastModified)}
                         file={file}
                         onRemove={() => {
-                          props.setFiles((files) => {
+                          props.setFiles(files => {
-                            if (!files) return null
+                            if (!files) return null;
 
                             const filtered = Array.from(files).filter(
-                              (f) => f !== file
+                              f => f !== file
-                            )
+                            );
-                            if (filtered.length === 0) return null
+                            if (filtered.length === 0) return null;
-                            return filtered
+                            return filtered;
-                          })
+                          });
                         }}
                       />
-                    )
+                    );
                   })}
                 </AnimatePresence>
               </div>
@@ -256,8 +257,8 @@ export function MessageInput({
             aria-label="Attach a file"
             disabled={true}
             onClick={async () => {
-              const files = await showFileUploadDialog()
+              const files = await showFileUploadDialog();
-              addFiles(files)
+              addFiles(files);
             }}
           >
             <Paperclip className="h-4 w-4" />
@@ -308,12 +309,12 @@ export function MessageInput({
         onStopRecording={stopRecording}
       />
     </div>
-  )
+  );
 }
-MessageInput.displayName = "MessageInput"
+MessageInput.displayName = "MessageInput";
 
 interface FileUploadOverlayProps {
-  isDragging: boolean
+  isDragging: boolean;
 }
 
 function FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {
@@ -333,29 +334,29 @@ function FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {
         </motion.div>
       )}
     </AnimatePresence>
-  )
+  );
 }
 
 function showFileUploadDialog() {
-  const input = document.createElement("input")
+  const input = document.createElement("input");
 
-  input.type = "file"
+  input.type = "file";
-  input.multiple = true
+  input.multiple = true;
-  input.accept = "*/*"
+  input.accept = "*/*";
-  input.click()
+  input.click();
 
-  return new Promise<File[] | null>((resolve) => {
+  return new Promise<File[] | null>(resolve => {
-    input.onchange = (e) => {
+    input.onchange = e => {
-      const files = (e.currentTarget as HTMLInputElement).files
+      const files = (e.currentTarget as HTMLInputElement).files;
 
       if (files) {
-        resolve(Array.from(files))
+        resolve(Array.from(files));
-        return
+        return;
       }
 
-      resolve(null)
+      resolve(null);
-    }
+    };
-  })
+  });
 }
 
 function TranscribingOverlay() {
@@ -385,12 +386,12 @@ function TranscribingOverlay() {
         Transcribing audio...
       </p>
     </motion.div>
-  )
+  );
 }
 
 interface RecordingPromptProps {
-  isVisible: boolean
+  isVisible: boolean;
-  onStopRecording: () => void
+  onStopRecording: () => void;
 }
 
 function RecordingPrompt({ isVisible, onStopRecording }: RecordingPromptProps) {
@@ -418,15 +419,15 @@ function RecordingPrompt({ isVisible, onStopRecording }: RecordingPromptProps) {
         </motion.div>
       )}
     </AnimatePresence>
-  )
+  );
 }
 
 interface RecordingControlsProps {
-  isRecording: boolean
+  isRecording: boolean;
-  isTranscribing: boolean
+  isTranscribing: boolean;
-  audioStream: MediaStream | null
+  audioStream: MediaStream | null;
-  textAreaHeight: number
+  textAreaHeight: number;
-  onStopRecording: () => void
+  onStopRecording: () => void;
 }
 
 function RecordingControls({
@@ -448,7 +449,7 @@ function RecordingControls({
           onClick={onStopRecording}
         />
       </div>
-    )
+    );
   }
 
   if (isTranscribing) {
@@ -459,8 +460,8 @@ function RecordingControls({
       >
         <TranscribingOverlay />
       </div>
-    )
+    );
   }
 
-  return null
+  return null;
 }

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

@@ -2,18 +2,18 @@ import {
   ChatMessage,
   type ChatMessageProps,
   type Message,
-} from "@/components/chat-playground/chat-message"
+} from "@/components/chat-playground/chat-message";
-import { TypingIndicator } from "@/components/chat-playground/typing-indicator"
+import { TypingIndicator } from "@/components/chat-playground/typing-indicator";
 
-type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>
+type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>;
 
 interface MessageListProps {
-  messages: Message[]
+  messages: Message[];
-  showTimeStamps?: boolean
+  showTimeStamps?: boolean;
-  isTyping?: boolean
+  isTyping?: boolean;
   messageOptions?:
     | AdditionalMessageOptions
-    | ((message: Message) => AdditionalMessageOptions)
+    | ((message: Message) => AdditionalMessageOptions);
 }
 
 export function MessageList({
@@ -28,7 +28,7 @@ export function MessageList({
         const additionalOptions =
           typeof messageOptions === "function"
             ? messageOptions(message)
-            : messageOptions
+            : messageOptions;
 
         return (
           <ChatMessage
@@ -37,9 +37,9 @@ export function MessageList({
             {...message}
             {...additionalOptions}
           />
-        )
+        );
       })}
       {isTyping && <TypingIndicator />}
     </div>
-  )
+  );
 }

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

@@ -1,7 +1,7 @@
 interface PromptSuggestionsProps {
-  label: string
+  label: string;
-  append: (message: { role: "user"; content: string }) => void
+  append: (message: { role: "user"; content: string }) => void;
-  suggestions: string[]
+  suggestions: string[];
 }
 
 export function PromptSuggestions({
@@ -13,7 +13,7 @@ export function PromptSuggestions({
     <div className="space-y-6">
       <h2 className="text-center text-2xl font-bold">{label}</h2>
       <div className="flex gap-6 text-sm">
-        {suggestions.map((suggestion) => (
+        {suggestions.map(suggestion => (
           <button
             key={suggestion}
             onClick={() => append({ role: "user", content: suggestion })}
@@ -24,5 +24,5 @@ export function PromptSuggestions({
         ))}
       </div>
     </div>
-  )
+  );
 }

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

@@ -1,4 +1,4 @@
-import { Dot } from "lucide-react"
+import { Dot } from "lucide-react";
 
 export function TypingIndicator() {
   return (
@@ -11,5 +11,5 @@ export function TypingIndicator() {
         </div>
       </div>
     </div>
-  )
+  );
 }

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

@@ -56,7 +56,8 @@ const manageItems = [
   },
 ];
 
-const optimizeItems: { title: string; url: string; icon: React.ElementType }[] = [
+const optimizeItems: { title: string; url: string; icon: React.ElementType }[] =
+  [
     {
       title: "Evaluations",
       url: "",
@@ -67,7 +68,7 @@ const optimizeItems: { title: string; url: string; icon: React.ElementType }[] =
       url: "",
       icon: Settings2,
     },
-];
+  ];
 
 interface SidebarItem {
   title: string;
@@ -79,7 +80,7 @@ export function AppSidebar() {
   const pathname = usePathname();
 
   const renderSidebarItems = (items: SidebarItem[]) => {
-    return items.map((item) => {
+    return items.map(item => {
       const isActive = pathname.startsWith(item.url);
       return (
         <SidebarMenuItem key={item.title}>
@@ -88,14 +89,14 @@ export function AppSidebar() {
             className={cn(
               "justify-start",
               isActive &&
-                "bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100",
+                "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={item.url}>
               <item.icon
                 className={cn(
                   isActive && "text-gray-900 dark:text-gray-100",
-                  "mr-2 h-4 w-4",
+                  "mr-2 h-4 w-4"
                 )}
               />
               <span>{item.title}</span>
@@ -106,7 +107,7 @@ export function AppSidebar() {
     });
   };
 
-return (
+  return (
     <Sidebar>
       <SidebarHeader>
         <Link href="/">Llama Stack</Link>
@@ -130,7 +131,7 @@ return (
           <SidebarGroupLabel>Optimize</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-            {optimizeItems.map((item) => (
+              {optimizeItems.map(item => (
                 <SidebarMenuItem key={item.title}>
                   <SidebarMenuButton
                     disabled
@@ -138,7 +139,9 @@ return (
                   >
                     <item.icon className="mr-2 h-4 w-4" />
                     <span>{item.title}</span>
-                  <span className="ml-2 text-xs text-gray-500">(Coming Soon)</span>
+                    <span className="ml-2 text-xs text-gray-500">
+                      (Coming Soon)
+                    </span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               ))}

llama_stack/ui/components/layout/detail-layout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
-export function DetailLoadingView({ title }: { title: string }) {
+export function DetailLoadingView() {
   return (
     <>
       <Skeleton className="h-8 w-3/4 mb-6" /> {/* Title Skeleton */}

llama_stack/ui/components/logs/logs-table-scroll.test.tsx

@@ -67,7 +67,7 @@ describe("LogsTable Viewport Loading", () => {
       () => {
         expect(mockLoadMore).toHaveBeenCalled();
       },
-      { timeout: 300 },
+      { timeout: 300 }
     );
 
     expect(mockLoadMore).toHaveBeenCalledTimes(1);
@@ -81,11 +81,11 @@ describe("LogsTable Viewport Loading", () => {
         {...defaultProps}
         status="loading-more"
         onLoadMore={mockLoadMore}
-      />,
+      />
     );
 
     // Wait for possible triggers
-    await new Promise((resolve) => setTimeout(resolve, 300));
+    await new Promise(resolve => setTimeout(resolve, 300));
 
     expect(mockLoadMore).not.toHaveBeenCalled();
   });
@@ -94,15 +94,11 @@ describe("LogsTable Viewport Loading", () => {
     const mockLoadMore = jest.fn();
 
     render(
-      <LogsTable
+      <LogsTable {...defaultProps} status="loading" onLoadMore={mockLoadMore} />
-        {...defaultProps}
-        status="loading"
-        onLoadMore={mockLoadMore}
-      />,
     );
 
     // Wait for possible triggers
-    await new Promise((resolve) => setTimeout(resolve, 300));
+    await new Promise(resolve => setTimeout(resolve, 300));
 
     expect(mockLoadMore).not.toHaveBeenCalled();
   });
@@ -111,18 +107,18 @@ describe("LogsTable Viewport Loading", () => {
     const mockLoadMore = jest.fn();
 
     render(
-      <LogsTable {...defaultProps} hasMore={false} onLoadMore={mockLoadMore} />,
+      <LogsTable {...defaultProps} hasMore={false} onLoadMore={mockLoadMore} />
     );
 
     // Wait for possible triggers
-    await new Promise((resolve) => setTimeout(resolve, 300));
+    await new Promise(resolve => setTimeout(resolve, 300));
 
     expect(mockLoadMore).not.toHaveBeenCalled();
   });
 
   test("sentinel element should not be rendered when loading", () => {
     const { container } = render(
-      <LogsTable {...defaultProps} status="loading-more" />,
+      <LogsTable {...defaultProps} status="loading-more" />
     );
 
     // Check that no sentinel row with height: 1 exists
@@ -132,7 +128,7 @@ describe("LogsTable Viewport Loading", () => {
 
   test("sentinel element should be rendered when not loading and hasMore", () => {
     const { container } = render(
-      <LogsTable {...defaultProps} hasMore={true} status="idle" />,
+      <LogsTable {...defaultProps} hasMore={true} status="idle" />
     );
 
     // Check that sentinel row exists

llama_stack/ui/components/logs/logs-table.test.tsx

@@ -70,7 +70,7 @@ describe("LogsTable", () => {
   describe("Loading State", () => {
     test("renders skeleton UI when isLoading is true", () => {
       const { container } = render(
-        <LogsTable {...defaultProps} status="loading" />,
+        <LogsTable {...defaultProps} status="loading" />
       );
 
       // Check for skeleton in the table caption
@@ -78,7 +78,7 @@ describe("LogsTable", () => {
       expect(tableCaption).toBeInTheDocument();
       if (tableCaption) {
         const captionSkeleton = tableCaption.querySelector(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(captionSkeleton).toBeInTheDocument();
       }
@@ -88,7 +88,7 @@ describe("LogsTable", () => {
       expect(tableBody).toBeInTheDocument();
       if (tableBody) {
         const bodySkeletons = tableBody.querySelectorAll(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(bodySkeletons.length).toBeGreaterThan(0);
       }
@@ -102,7 +102,7 @@ describe("LogsTable", () => {
 
     test("renders correct number of skeleton rows", () => {
       const { container } = render(
-        <LogsTable {...defaultProps} status="loading" />,
+        <LogsTable {...defaultProps} status="loading" />
       );
 
       const skeletonRows = container.querySelectorAll("tbody tr");
@@ -118,10 +118,10 @@ describe("LogsTable", () => {
           {...defaultProps}
           status="error"
           error={{ name: "Error", message: errorMessage } as Error}
-        />,
+        />
       );
       expect(
-        screen.getByText("Unable to load chat completions"),
+        screen.getByText("Unable to load chat completions")
       ).toBeInTheDocument();
       expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
@@ -132,29 +132,25 @@ describe("LogsTable", () => {
           {...defaultProps}
           status="error"
           error={{ name: "Error", message: "" } as Error}
-        />,
+        />
       );
       expect(
-        screen.getByText("Unable to load chat completions"),
+        screen.getByText("Unable to load chat completions")
       ).toBeInTheDocument();
       expect(
-        screen.getByText(
+        screen.getByText("An unexpected error occurred while loading the data.")
-          "An unexpected error occurred while loading the data.",
-        ),
       ).toBeInTheDocument();
     });
 
     test("renders default error message when error prop is an object without message", () => {
       render(
-        <LogsTable {...defaultProps} status="error" error={{} as Error} />,
+        <LogsTable {...defaultProps} status="error" error={{} as Error} />
       );
       expect(
-        screen.getByText("Unable to load chat completions"),
+        screen.getByText("Unable to load chat completions")
       ).toBeInTheDocument();
       expect(
-        screen.getByText(
+        screen.getByText("An unexpected error occurred while loading the data.")
-          "An unexpected error occurred while loading the data.",
-        ),
       ).toBeInTheDocument();
     });
 
@@ -164,7 +160,7 @@ describe("LogsTable", () => {
           {...defaultProps}
           status="error"
           error={{ name: "Error", message: "Test error" } as Error}
-        />,
+        />
       );
       const table = screen.queryByRole("table");
       expect(table).not.toBeInTheDocument();
@@ -178,7 +174,7 @@ describe("LogsTable", () => {
           {...defaultProps}
           data={[]}
           emptyMessage="Custom empty message"
-        />,
+        />
       );
       expect(screen.getByText("Custom empty message")).toBeInTheDocument();
 
@@ -214,7 +210,7 @@ describe("LogsTable", () => {
           {...defaultProps}
           data={mockData}
           caption="Custom table caption"
-        />,
+        />
       );
 
       // Table caption
@@ -311,8 +307,8 @@ describe("LogsTable", () => {
       // Verify truncated text is displayed
       const truncatedTexts = screen.getAllByText("This is a ...");
       expect(truncatedTexts).toHaveLength(2); // one for input, one for output
-      truncatedTexts.forEach((textElement) =>
+      truncatedTexts.forEach(textElement =>
-        expect(textElement).toBeInTheDocument(),
+        expect(textElement).toBeInTheDocument()
       );
     });
 
@@ -332,12 +328,12 @@ describe("LogsTable", () => {
 
       // Model name should not be passed to truncateText
       expect(truncateText).not.toHaveBeenCalledWith(
-        "very-long-model-name-that-should-not-be-truncated",
+        "very-long-model-name-that-should-not-be-truncated"
       );
 
       // Full model name should be displayed
       expect(
-        screen.getByText("very-long-model-name-that-should-not-be-truncated"),
+        screen.getByText("very-long-model-name-that-should-not-be-truncated")
       ).toBeInTheDocument();
     });
   });

llama_stack/ui/components/logs/logs-table.tsx

@@ -142,7 +142,7 @@ export function LogsTable({
         <Table>
           <TableCaption className="sr-only">{caption}</TableCaption>
           <TableBody>
-            {data.map((row) => (
+            {data.map(row => (
               <TableRow
                 key={row.id}
                 onClick={() => router.push(row.detailPath)}

llama_stack/ui/components/responses/grouping/grouped-items-display.tsx

@@ -22,7 +22,7 @@ export function GroupedItemsDisplay({
 
   return (
     <>
-      {groupedItems.map((groupedItem) => {
+      {groupedItems.map(groupedItem => {
         // If this is a function call with an output, render the grouped component
         if (
           groupedItem.outputItem &&

llama_stack/ui/components/responses/hooks/function-call-grouping.ts

@@ -18,7 +18,7 @@ export interface GroupedItem {
  * @returns Array of grouped items with their outputs
  */
 export function useFunctionCallGrouping(
-  items: AnyResponseItem[],
+  items: AnyResponseItem[]
 ): GroupedItem[] {
   return useMemo(() => {
     const groupedItems: GroupedItem[] = [];

llama_stack/ui/components/responses/items/item-renderer.tsx

@@ -52,7 +52,7 @@ export function ItemRenderer({
   // Fallback to generic item for unknown types
   return (
     <GenericItemComponent
-      item={item as any}
+      item={item as Record<string, unknown>}
       index={index}
       keyPrefix={keyPrefix}
     />

llama_stack/ui/components/responses/items/message-item.tsx

@@ -20,7 +20,7 @@ export function MessageItemComponent({
     content = item.content;
   } else if (Array.isArray(item.content)) {
     content = item.content
-      .map((c) => {
+      .map(c => {
         return c.type === "input_text" || c.type === "output_text"
           ? c.text
           : JSON.stringify(c);

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

@@ -18,7 +18,7 @@ describe("ResponseDetailView", () => {
   describe("Loading State", () => {
     test("renders loading skeleton when isLoading is true", () => {
       const { container } = render(
-        <ResponseDetailView {...defaultProps} isLoading={true} />,
+        <ResponseDetailView {...defaultProps} isLoading={true} />
       );
 
       // Check for skeleton elements
@@ -36,13 +36,13 @@ describe("ResponseDetailView", () => {
         <ResponseDetailView
           {...defaultProps}
           error={{ name: "Error", message: errorMessage }}
-        />,
+        />
       );
 
       expect(screen.getByText("Responses Details")).toBeInTheDocument();
       // The error message is split across elements, so we check for parts
       expect(
-        screen.getByText(/Error loading details for ID/),
+        screen.getByText(/Error loading details for ID/)
       ).toBeInTheDocument();
       expect(screen.getByText(/test_id/)).toBeInTheDocument();
       expect(screen.getByText(/Network Error/)).toBeInTheDocument();
@@ -53,11 +53,11 @@ describe("ResponseDetailView", () => {
         <ResponseDetailView
           {...defaultProps}
           error={{ name: "Error", message: "" }}
-        />,
+        />
       );
 
       expect(
-        screen.getByText(/Error loading details for ID/),
+        screen.getByText(/Error loading details for ID/)
       ).toBeInTheDocument();
       expect(screen.getByText(/test_id/)).toBeInTheDocument();
     });
@@ -124,14 +124,14 @@ describe("ResponseDetailView", () => {
       // Check properties - use regex to handle text split across elements
       expect(screen.getByText(/Created/)).toBeInTheDocument();
       expect(
-        screen.getByText(new Date(1710000000 * 1000).toLocaleString()),
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
       ).toBeInTheDocument();
 
       // Check for the specific ID label (not Previous Response ID)
       expect(
         screen.getByText((content, element) => {
           return element?.tagName === "STRONG" && content === "ID:";
-        }),
+        })
       ).toBeInTheDocument();
       expect(screen.getByText("resp_123")).toBeInTheDocument();
 
@@ -166,7 +166,7 @@ describe("ResponseDetailView", () => {
       };
 
       render(
-        <ResponseDetailView {...defaultProps} response={minimalResponse} />,
+        <ResponseDetailView {...defaultProps} response={minimalResponse} />
       );
 
       // Should show required properties
@@ -179,7 +179,7 @@ describe("ResponseDetailView", () => {
       expect(screen.queryByText("Top P")).not.toBeInTheDocument();
       expect(screen.queryByText("Parallel Tool Calls")).not.toBeInTheDocument();
       expect(
-        screen.queryByText("Previous Response ID"),
+        screen.queryByText("Previous Response ID")
       ).not.toBeInTheDocument();
     });
 
@@ -196,7 +196,7 @@ describe("ResponseDetailView", () => {
 
       // The error is shown in the properties sidebar, not as a separate "Error" label
       expect(
-        screen.getByText("invalid_request: The request was invalid"),
+        screen.getByText("invalid_request: The request was invalid")
       ).toBeInTheDocument();
     });
   });
@@ -218,7 +218,7 @@ describe("ResponseDetailView", () => {
           {...defaultProps}
           response={mockResponse}
           isLoadingInputItems={true}
-        />,
+        />
       );
 
       // Check for skeleton loading in input items section
@@ -227,7 +227,7 @@ describe("ResponseDetailView", () => {
           {...defaultProps}
           response={mockResponse}
           isLoadingInputItems={true}
-        />,
+        />
       );
 
       const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
@@ -243,16 +243,16 @@ describe("ResponseDetailView", () => {
             name: "Error",
             message: "Failed to load input items",
           }}
-        />,
+        />
       );
 
       expect(
         screen.getByText(
-          "Error loading input items: Failed to load input items",
+          "Error loading input items: Failed to load input items"
-        ),
+        )
       ).toBeInTheDocument();
       expect(
-        screen.getByText("Falling back to response input data."),
+        screen.getByText("Falling back to response input data.")
       ).toBeInTheDocument();
 
       // Should still show fallback input data
@@ -276,7 +276,7 @@ describe("ResponseDetailView", () => {
           {...defaultProps}
           response={mockResponse}
           inputItems={mockInputItems}
-        />,
+        />
       );
 
       // Should show input items data, not response.input
@@ -295,7 +295,7 @@ describe("ResponseDetailView", () => {
           {...defaultProps}
           response={mockResponse}
           inputItems={emptyInputItems}
-        />,
+        />
       );
 
       // Should show fallback input data
@@ -313,7 +313,7 @@ describe("ResponseDetailView", () => {
           {...defaultProps}
           response={responseWithoutInput}
           inputItems={null}
-        />,
+        />
       );
 
       expect(screen.getByText("No input data available.")).toBeInTheDocument();
@@ -443,7 +443,7 @@ describe("ResponseDetailView", () => {
       render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
 
       expect(
-        screen.getByText('input_function({"param": "value"})'),
+        screen.getByText('input_function({"param": "value"})')
       ).toBeInTheDocument();
       expect(screen.getByText("Function Call")).toBeInTheDocument();
     });
@@ -468,7 +468,7 @@ describe("ResponseDetailView", () => {
       render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
 
       expect(
-        screen.getByText("web_search_call(status: completed)"),
+        screen.getByText("web_search_call(status: completed)")
       ).toBeInTheDocument();
       expect(screen.getByText("Function Call")).toBeInTheDocument();
       expect(screen.getByText("(Web Search)")).toBeInTheDocument();
@@ -522,7 +522,7 @@ describe("ResponseDetailView", () => {
       render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
 
       expect(
-        screen.getByText("First output Second output"),
+        screen.getByText("First output Second output")
       ).toBeInTheDocument();
       expect(screen.getByText("Assistant")).toBeInTheDocument();
     });
@@ -549,7 +549,7 @@ describe("ResponseDetailView", () => {
       render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
 
       expect(
-        screen.getByText('search_function({"query": "test"})'),
+        screen.getByText('search_function({"query": "test"})')
       ).toBeInTheDocument();
       expect(screen.getByText("Function Call")).toBeInTheDocument();
     });
@@ -598,7 +598,7 @@ describe("ResponseDetailView", () => {
       render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
 
       expect(
-        screen.getByText("web_search_call(status: completed)"),
+        screen.getByText("web_search_call(status: completed)")
       ).toBeInTheDocument();
       expect(screen.getByText(/Function Call/)).toBeInTheDocument();
       expect(screen.getByText("(Web Search)")).toBeInTheDocument();
@@ -616,7 +616,7 @@ describe("ResponseDetailView", () => {
             type: "unknown_type",
             custom_field: "custom_value",
             data: { nested: "object" },
-          } as any,
+          } as unknown,
         ],
         input: [],
       };
@@ -625,7 +625,7 @@ describe("ResponseDetailView", () => {
 
       // Should show JSON stringified content
       expect(
-        screen.getByText(/custom_field.*custom_value/),
+        screen.getByText(/custom_field.*custom_value/)
       ).toBeInTheDocument();
       expect(screen.getByText("(unknown_type)")).toBeInTheDocument();
     });
@@ -666,7 +666,7 @@ describe("ResponseDetailView", () => {
             role: "assistant",
             call_id: "call_123",
             content: "sunny and warm",
-          } as any, // Using any to bypass the type restriction for this test
+          } as unknown, // Using any to bypass the type restriction for this test
         ],
         input: [],
       };
@@ -676,7 +676,7 @@ describe("ResponseDetailView", () => {
       // Should show the function call and message as separate items (not grouped)
       expect(screen.getByText("Function Call")).toBeInTheDocument();
       expect(
-        screen.getByText('get_weather({"city": "Tokyo"})'),
+        screen.getByText('get_weather({"city": "Tokyo"})')
       ).toBeInTheDocument();
       expect(screen.getByText("Assistant")).toBeInTheDocument();
       expect(screen.getByText("sunny and warm")).toBeInTheDocument();
@@ -706,7 +706,7 @@ describe("ResponseDetailView", () => {
             status: "completed",
             call_id: "call_123",
             output: "sunny and warm",
-          } as any, // Using any to bypass the type restriction for this test
+          } as unknown,
         ],
         input: [],
       };
@@ -717,7 +717,7 @@ describe("ResponseDetailView", () => {
       expect(screen.getByText("Function Call")).toBeInTheDocument();
       expect(screen.getByText("Arguments")).toBeInTheDocument();
       expect(
-        screen.getByText('get_weather({"city": "Tokyo"})'),
+        screen.getByText('get_weather({"city": "Tokyo"})')
       ).toBeInTheDocument();
       // Use getAllByText since there are multiple "Output" elements (card title and output label)
       const outputElements = screen.getAllByText("Output");

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

@@ -146,7 +146,7 @@ describe("ResponsesTable", () => {
       expect(tableCaption).toBeInTheDocument();
       if (tableCaption) {
         const captionSkeleton = tableCaption.querySelector(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(captionSkeleton).toBeInTheDocument();
       }
@@ -156,7 +156,7 @@ describe("ResponsesTable", () => {
       expect(tableBody).toBeInTheDocument();
       if (tableBody) {
         const bodySkeletons = tableBody.querySelectorAll(
-          '[data-slot="skeleton"]',
+          '[data-slot="skeleton"]'
         );
         expect(bodySkeletons.length).toBeGreaterThan(0);
       }
@@ -176,14 +176,14 @@ describe("ResponsesTable", () => {
 
       render(<ResponsesTable {...defaultProps} />);
       expect(
-        screen.getByText("Unable to load chat completions"),
+        screen.getByText("Unable to load chat completions")
       ).toBeInTheDocument();
       expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
 
     test.each([{ name: "Error", message: "" }, {}])(
       "renders default error message when error has no message",
-      (errorObject) => {
+      errorObject => {
         mockedUsePagination.mockReturnValue({
           data: [],
           status: "error",
@@ -194,14 +194,14 @@ describe("ResponsesTable", () => {
 
         render(<ResponsesTable {...defaultProps} />);
         expect(
-          screen.getByText("Unable to load chat completions"),
+          screen.getByText("Unable to load chat completions")
         ).toBeInTheDocument();
         expect(
           screen.getByText(
-            "An unexpected error occurred while loading the data.",
+            "An unexpected error occurred while loading the data."
-          ),
+          )
         ).toBeInTheDocument();
-      },
+      }
     );
   });
 
@@ -275,7 +275,7 @@ describe("ResponsesTable", () => {
 
       // Table caption
       expect(
-        screen.getByText("A list of your recent responses."),
+        screen.getByText("A list of your recent responses.")
       ).toBeInTheDocument();
 
       // Table headers
@@ -289,14 +289,14 @@ describe("ResponsesTable", () => {
       expect(screen.getByText("Test output")).toBeInTheDocument();
       expect(screen.getByText("llama-test-model")).toBeInTheDocument();
       expect(
-        screen.getByText(new Date(1710000000 * 1000).toLocaleString()),
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
       ).toBeInTheDocument();
 
       expect(screen.getByText("Another input")).toBeInTheDocument();
       expect(screen.getByText("Another output")).toBeInTheDocument();
       expect(screen.getByText("llama-another-model")).toBeInTheDocument();
       expect(
-        screen.getByText(new Date(1710001000 * 1000).toLocaleString()),
+        screen.getByText(new Date(1710001000 * 1000).toLocaleString())
       ).toBeInTheDocument();
     });
   });
@@ -487,7 +487,7 @@ describe("ResponsesTable", () => {
 
       render(<ResponsesTable {...defaultProps} />);
       expect(
-        screen.getByText('search_function({"query": "test"})'),
+        screen.getByText('search_function({"query": "test"})')
       ).toBeInTheDocument();
     });
 
@@ -548,7 +548,7 @@ describe("ResponsesTable", () => {
 
       render(<ResponsesTable {...defaultProps} />);
       expect(
-        screen.getByText("web_search_call(status: completed)"),
+        screen.getByText("web_search_call(status: completed)")
       ).toBeInTheDocument();
     });
 
@@ -565,7 +565,7 @@ describe("ResponsesTable", () => {
             id: "unknown_123",
             status: "completed",
             custom_field: "custom_value",
-          } as any,
+          } as unknown,
         ],
         input: [{ type: "message", content: "input" }],
       };
@@ -594,7 +594,7 @@ describe("ResponsesTable", () => {
           {
             type: "unknown_type",
             data: "some data",
-          } as any,
+          } as unknown,
         ],
         input: [{ type: "message", content: "input" }],
       };
@@ -623,7 +623,7 @@ describe("ResponsesTable", () => {
           return typeof text === "string" && text.length > effectiveMaxLength
             ? text.slice(0, effectiveMaxLength) + "..."
             : text;
-        },
+        }
       );
 
       const longInput =
@@ -665,7 +665,7 @@ describe("ResponsesTable", () => {
 
       // The truncated text should be present for both input and output
       const truncatedTexts = screen.getAllByText(
-        longInput.slice(0, 10) + "...",
+        longInput.slice(0, 10) + "..."
       );
       expect(truncatedTexts.length).toBe(2); // one for input, one for output
     });

llama_stack/ui/components/responses/responses-table.tsx

@@ -27,7 +27,7 @@ interface ResponsesTableProps {
  * Helper function to convert ResponseListResponse.Data to OpenAIResponse
  */
 const convertResponseListData = (
-  responseData: ResponseListResponse.Data,
+  responseData: ResponseListResponse.Data
 ): OpenAIResponse => {
   return {
     id: responseData.id,
@@ -56,8 +56,8 @@ function getInputText(response: OpenAIResponse): string {
 }
 
 function getOutputText(response: OpenAIResponse): string {
-  const firstMessage = response.output.find((item) =>
+  const firstMessage = response.output.find(item =>
-    isMessageItem(item as any),
+    isMessageItem(item as Record<string, unknown>)
   );
   if (firstMessage) {
     const content = extractContentFromItem(firstMessage as MessageItem);
@@ -66,15 +66,15 @@ function getOutputText(response: OpenAIResponse): string {
     }
   }
 
-  const functionCall = response.output.find((item) =>
+  const functionCall = response.output.find(item =>
-    isFunctionCallItem(item as any),
+    isFunctionCallItem(item as Record<string, unknown>)
   );
   if (functionCall) {
     return formatFunctionCall(functionCall as FunctionCallItem);
   }
 
-  const webSearchCall = response.output.find((item) =>
+  const webSearchCall = response.output.find(item =>
-    isWebSearchCallItem(item as any),
+    isWebSearchCallItem(item as Record<string, unknown>)
   );
   if (webSearchCall) {
     return formatWebSearchCall(webSearchCall as WebSearchCallItem);
@@ -95,7 +95,7 @@ function extractContentFromItem(item: {
   } else if (Array.isArray(item.content)) {
     const textContent = item.content.find(
       (c: ResponseInputMessageContent) =>
-        c.type === "input_text" || c.type === "output_text",
+        c.type === "input_text" || c.type === "output_text"
     );
     return textContent?.text || "";
   }
@@ -131,14 +131,14 @@ export function ResponsesTable({ paginationOptions }: ResponsesTableProps) {
       limit: number;
       model?: string;
       order?: string;
-    },
+    }
   ) => {
     const response = await client.responses.list({
       after: params.after,
       limit: params.limit,
       ...(params.model && { model: params.model }),
       ...(params.order && { order: params.order }),
-    } as any);
+    } as Parameters<typeof client.responses.list>[0]);
 
     const listResponse = response as ResponseListResponse;
 

llama_stack/ui/components/responses/utils/item-types.ts

@@ -29,7 +29,7 @@ export type AnyResponseItem =
   | FunctionCallOutputItem;
 
 export function isMessageInput(
-  item: ResponseInput,
+  item: ResponseInput
 ): item is ResponseInput & { type: "message" } {
   return item.type === "message";
 }
@@ -39,23 +39,23 @@ export function isMessageItem(item: AnyResponseItem): item is MessageItem {
 }
 
 export function isFunctionCallItem(
-  item: AnyResponseItem,
+  item: AnyResponseItem
 ): item is FunctionCallItem {
   return item.type === "function_call" && "name" in item;
 }
 
 export function isWebSearchCallItem(
-  item: AnyResponseItem,
+  item: AnyResponseItem
 ): item is WebSearchCallItem {
   return item.type === "web_search_call";
 }
 
 export function isFunctionCallOutputItem(
-  item: AnyResponseItem,
+  item: AnyResponseItem
 ): item is FunctionCallOutputItem {
   return (
     item.type === "function_call_output" &&
     "call_id" in item &&
-    typeof (item as any).call_id === "string"
+    typeof (item as Record<string, unknown>).call_id === "string"
   );
 }

llama_stack/ui/components/ui/audio-visualizer.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { useEffect, useRef } from "react"
+import { useEffect, useRef } from "react";
 
 // Configuration constants for the audio analyzer
 const AUDIO_CONFIG = {
@@ -14,12 +14,12 @@ const AUDIO_CONFIG = {
     MAX_INTENSITY: 255, // Maximum gray value (brighter)
     INTENSITY_RANGE: 155, // MAX_INTENSITY - MIN_INTENSITY
   },
-} as const
+} as const;
 
 interface AudioVisualizerProps {
-  stream: MediaStream | null
+  stream: MediaStream | null;
-  isRecording: boolean
+  isRecording: boolean;
-  onClick: () => void
+  onClick: () => void;
 }
 
 export function AudioVisualizer({
@@ -28,91 +28,91 @@ export function AudioVisualizer({
   onClick,
 }: AudioVisualizerProps) {
   // Refs for managing audio context and animation
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const audioContextRef = useRef<AudioContext | null>(null)
+  const audioContextRef = useRef<AudioContext | null>(null);
-  const analyserRef = useRef<AnalyserNode | null>(null)
+  const analyserRef = useRef<AnalyserNode | null>(null);
-  const animationFrameRef = useRef<number>()
+  const animationFrameRef = useRef<number>();
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // Cleanup function to stop visualization and close audio context
   const cleanup = () => {
     if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current)
+      cancelAnimationFrame(animationFrameRef.current);
     }
     if (audioContextRef.current) {
-      audioContextRef.current.close()
+      audioContextRef.current.close();
-    }
     }
+  };
 
   // Cleanup on unmount
   useEffect(() => {
-    return cleanup
+    return cleanup;
-  }, [])
+  }, []);
 
   // Start or stop visualization based on recording state
   useEffect(() => {
     if (stream && isRecording) {
-      startVisualization()
+      startVisualization();
     } else {
-      cleanup()
+      cleanup();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stream, isRecording])
+  }, [stream, isRecording]);
 
   // Handle window resize
   useEffect(() => {
     const handleResize = () => {
       if (canvasRef.current && containerRef.current) {
-        const container = containerRef.current
+        const container = containerRef.current;
-        const canvas = canvasRef.current
+        const canvas = canvasRef.current;
-        const dpr = window.devicePixelRatio || 1
+        const dpr = window.devicePixelRatio || 1;
 
         // Set canvas size based on container and device pixel ratio
-        const rect = container.getBoundingClientRect()
+        const rect = container.getBoundingClientRect();
         // Account for the 2px total margin (1px on each side)
-        canvas.width = (rect.width - 2) * dpr
+        canvas.width = (rect.width - 2) * dpr;
-        canvas.height = (rect.height - 2) * dpr
+        canvas.height = (rect.height - 2) * dpr;
 
         // Scale canvas CSS size to match container minus margins
-        canvas.style.width = `${rect.width - 2}px`
+        canvas.style.width = `${rect.width - 2}px`;
-        canvas.style.height = `${rect.height - 2}px`
+        canvas.style.height = `${rect.height - 2}px`;
-      }
       }
+    };
 
-    window.addEventListener("resize", handleResize)
+    window.addEventListener("resize", handleResize);
     // Initial setup
-    handleResize()
+    handleResize();
 
-    return () => window.removeEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize);
-  }, [])
+  }, []);
 
   // Initialize audio context and start visualization
   const startVisualization = async () => {
     try {
-      const audioContext = new AudioContext()
+      const audioContext = new AudioContext();
-      audioContextRef.current = audioContext
+      audioContextRef.current = audioContext;
 
-      const analyser = audioContext.createAnalyser()
+      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = AUDIO_CONFIG.FFT_SIZE
+      analyser.fftSize = AUDIO_CONFIG.FFT_SIZE;
-      analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING
+      analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING;
-      analyserRef.current = analyser
+      analyserRef.current = analyser;
 
-      const source = audioContext.createMediaStreamSource(stream!)
+      const source = audioContext.createMediaStreamSource(stream!);
-      source.connect(analyser)
+      source.connect(analyser);
 
-      draw()
+      draw();
     } catch (error) {
-      console.error("Error starting visualization:", error)
+      console.error("Error starting visualization:", error);
-    }
     }
+  };
 
   // Calculate the color intensity based on bar height
   const getBarColor = (normalizedHeight: number) => {
     const intensity =
       Math.floor(normalizedHeight * AUDIO_CONFIG.COLOR.INTENSITY_RANGE) +
-      AUDIO_CONFIG.COLOR.MIN_INTENSITY
+      AUDIO_CONFIG.COLOR.MIN_INTENSITY;
-    return `rgb(${intensity}, ${intensity}, ${intensity})`
+    return `rgb(${intensity}, ${intensity}, ${intensity})`;
-  }
+  };
 
   // Draw a single bar of the visualizer
   const drawBar = (
@@ -123,52 +123,52 @@ export function AudioVisualizer({
     height: number,
     color: string
   ) => {
-    ctx.fillStyle = color
+    ctx.fillStyle = color;
     // Draw upper bar (above center)
-    ctx.fillRect(x, centerY - height, width, height)
+    ctx.fillRect(x, centerY - height, width, height);
     // Draw lower bar (below center)
-    ctx.fillRect(x, centerY, width, height)
+    ctx.fillRect(x, centerY, width, height);
-  }
+  };
 
   // Main drawing function
   const draw = () => {
-    if (!isRecording) return
+    if (!isRecording) return;
 
-    const canvas = canvasRef.current
+    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d")
+    const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx || !analyserRef.current) return
+    if (!canvas || !ctx || !analyserRef.current) return;
 
-    const dpr = window.devicePixelRatio || 1
+    const dpr = window.devicePixelRatio || 1;
-    ctx.scale(dpr, dpr)
+    ctx.scale(dpr, dpr);
 
-    const analyser = analyserRef.current
+    const analyser = analyserRef.current;
-    const bufferLength = analyser.frequencyBinCount
+    const bufferLength = analyser.frequencyBinCount;
-    const frequencyData = new Uint8Array(bufferLength)
+    const frequencyData = new Uint8Array(bufferLength);
 
     const drawFrame = () => {
-      animationFrameRef.current = requestAnimationFrame(drawFrame)
+      animationFrameRef.current = requestAnimationFrame(drawFrame);
 
       // Get current frequency data
-      analyser.getByteFrequencyData(frequencyData)
+      analyser.getByteFrequencyData(frequencyData);
 
       // Clear canvas - use CSS pixels for clearing
-      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr)
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
 
       // Calculate dimensions in CSS pixels
       const barWidth = Math.max(
         AUDIO_CONFIG.MIN_BAR_WIDTH,
         canvas.width / dpr / bufferLength - AUDIO_CONFIG.BAR_SPACING
-      )
+      );
-      const centerY = canvas.height / dpr / 2
+      const centerY = canvas.height / dpr / 2;
-      let x = 0
+      let x = 0;
 
       // Draw each frequency bar
       for (let i = 0; i < bufferLength; i++) {
-        const normalizedHeight = frequencyData[i] / 255 // Convert to 0-1 range
+        const normalizedHeight = frequencyData[i] / 255; // Convert to 0-1 range
         const barHeight = Math.max(
           AUDIO_CONFIG.MIN_BAR_HEIGHT,
           normalizedHeight * centerY
-        )
+        );
 
         drawBar(
           ctx,
@@ -177,14 +177,14 @@ export function AudioVisualizer({
           barWidth,
           barHeight,
           getBarColor(normalizedHeight)
-        )
+        );
 
-        x += barWidth + AUDIO_CONFIG.BAR_SPACING
+        x += barWidth + AUDIO_CONFIG.BAR_SPACING;
-      }
       }
+    };
 
-    drawFrame()
+    drawFrame();
-  }
+  };
 
   return (
     <div
@@ -194,5 +194,5 @@ export function AudioVisualizer({
     >
       <canvas ref={canvasRef} className="h-full w-full" />
     </div>
-  )
+  );
 }

llama_stack/ui/components/ui/breadcrumb.tsx

@@ -14,7 +14,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
       data-slot="breadcrumb-list"
       className={cn(
         "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -33,7 +33,7 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 function Button({
   className,
@@ -43,9 +43,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -53,7 +53,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

llama_stack/ui/components/ui/card.tsx

@@ -8,7 +8,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card"
       className={cn(
         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
+        className
       )}
       {...props}
     />
@@ -21,7 +21,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
+        className
       )}
       {...props}
     />
@@ -54,7 +54,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
@@ -16,7 +16,7 @@ function CollapsibleTrigger({
       data-slot="collapsible-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function CollapsibleContent({
@@ -27,7 +27,7 @@ function CollapsibleContent({
       data-slot="collapsible-content"
       {...props}
     />
-  )
+  );
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

llama_stack/ui/components/ui/copy-button.tsx

@@ -1,21 +1,21 @@
-"use client"
+"use client";
 
-import { Check, Copy } from "lucide-react"
+import { Check, Copy } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
 type CopyButtonProps = {
-  content: string
+  content: string;
-  copyMessage?: string
+  copyMessage?: string;
-}
+};
 
 export function CopyButton({ content, copyMessage }: CopyButtonProps) {
   const { isCopied, handleCopy } = useCopyToClipboard({
     text: content,
     copyMessage,
-  })
+  });
 
   return (
     <Button
@@ -40,5 +40,5 @@ export function CopyButton({ content, copyMessage }: CopyButtonProps) {
         )}
       />
     </Button>
-  )
+  );
 }

llama_stack/ui/components/ui/dropdown-menu.tsx

@@ -43,7 +43,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
+          className
         )}
         {...props}
       />
@@ -75,7 +75,7 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
@@ -93,7 +93,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -129,7 +129,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -156,7 +156,7 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
+        className
       )}
       {...props}
     />
@@ -185,7 +185,7 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
+        className
       )}
       {...props}
     />
@@ -212,7 +212,7 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className,
+        className
       )}
       {...props}
     >
@@ -231,7 +231,7 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/file-preview.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import React, { useEffect } from "react"
+import React, { useEffect } from "react";
-import { motion } from "framer-motion"
+import { motion } from "framer-motion";
-import { FileIcon, X } from "lucide-react"
+import { FileIcon, X } from "lucide-react";
 
 interface FilePreviewProps {
-  file: File
+  file: File;
-  onRemove?: () => void
+  onRemove?: () => void;
 }
 
 export const FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
   (props, ref) => {
     if (props.file.type.startsWith("image/")) {
-      return <ImageFilePreview {...props} ref={ref} />
+      return <ImageFilePreview {...props} ref={ref} />;
     }
 
     if (
@@ -20,13 +20,13 @@ export const FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
       props.file.name.endsWith(".txt") ||
       props.file.name.endsWith(".md")
     ) {
-      return <TextFilePreview {...props} ref={ref} />
+      return <TextFilePreview {...props} ref={ref} />;
     }
 
-    return <GenericFilePreview {...props} ref={ref} />
+    return <GenericFilePreview {...props} ref={ref} />;
   }
-)
+);
-FilePreview.displayName = "FilePreview"
+FilePreview.displayName = "FilePreview";
 
 const ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
   ({ file, onRemove }, ref) => {
@@ -62,23 +62,23 @@ const ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
           </button>
         ) : null}
       </motion.div>
-    )
+    );
   }
-)
+);
-ImageFilePreview.displayName = "ImageFilePreview"
+ImageFilePreview.displayName = "ImageFilePreview";
 
 const TextFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
   ({ file, onRemove }, ref) => {
-    const [preview, setPreview] = React.useState<string>("")
+    const [preview, setPreview] = React.useState<string>("");
 
     useEffect(() => {
-      const reader = new FileReader()
+      const reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = e => {
-        const text = e.target?.result as string
+        const text = e.target?.result as string;
-        setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""))
+        setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""));
-      }
+      };
-      reader.readAsText(file)
+      reader.readAsText(file);
-    }, [file])
+    }, [file]);
 
     return (
       <motion.div
@@ -111,10 +111,10 @@ const TextFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
           </button>
         ) : null}
       </motion.div>
-    )
+    );
   }
-)
+);
-TextFilePreview.displayName = "TextFilePreview"
+TextFilePreview.displayName = "TextFilePreview";
 
 const GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
   ({ file, onRemove }, ref) => {
@@ -147,7 +147,7 @@ const GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
           </button>
         ) : null}
       </motion.div>
-    )
+    );
   }
-)
+);
-GenericFilePreview.displayName = "GenericFilePreview"
+GenericFilePreview.displayName = "GenericFilePreview";

llama_stack/ui/components/ui/input.tsx

@@ -11,7 +11,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/select.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
@@ -30,7 +30,7 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -47,7 +47,7 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -82,7 +82,7 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
 function SelectLabel({
@@ -95,7 +95,7 @@ function SelectLabel({
       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -119,7 +119,7 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -132,7 +132,7 @@ function SelectSeparator({
       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -150,7 +150,7 @@ function SelectScrollUpButton({
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -168,7 +168,7 @@ function SelectScrollDownButton({
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
 export {
@@ -182,4 +182,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};

llama_stack/ui/components/ui/separator.tsx

@@ -18,7 +18,7 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/sheet.tsx

@@ -37,7 +37,7 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
+        className
       )}
       {...props}
     />
@@ -67,7 +67,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className,
+          className
         )}
         {...props}
       >

llama_stack/ui/components/ui/sidebar.tsx

@@ -85,12 +85,12 @@ function SidebarProvider({
       // This sets the cookie to keep the sidebar state.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open],
+    [setOpenProp, open]
   );
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
   }, [isMobile, setOpen, setOpenMobile]);
 
   // Adds a keyboard shortcut to toggle the sidebar.
@@ -123,7 +123,7 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
 
   return (
@@ -140,7 +140,7 @@ function SidebarProvider({
           }
           className={cn(
             "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className,
+            className
           )}
           {...props}
         >
@@ -171,7 +171,7 @@ function Sidebar({
         data-slot="sidebar"
         className={cn(
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className,
+          className
         )}
         {...props}
       >
@@ -223,7 +223,7 @@ function Sidebar({
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"
             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
         )}
       />
       <div
@@ -237,7 +237,7 @@ function Sidebar({
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className,
+          className
         )}
         {...props}
       >
@@ -267,7 +267,7 @@ function SidebarTrigger({
       variant="ghost"
       size="icon"
       className={cn("size-7", className)}
-      onClick={(event) => {
+      onClick={event => {
         onClick?.(event);
         toggleSidebar();
       }}
@@ -297,7 +297,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className,
+        className
       )}
       {...props}
     />
@@ -311,7 +311,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       className={cn(
         "bg-background relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className,
+        className
       )}
       {...props}
     />
@@ -375,7 +375,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className,
+        className
       )}
       {...props}
     />
@@ -407,7 +407,7 @@ function SidebarGroupLabel({
       className={cn(
         "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className,
+        className
       )}
       {...props}
     />
@@ -430,7 +430,7 @@ function SidebarGroupAction({
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
-        className,
+        className
       )}
       {...props}
     />
@@ -492,7 +492,7 @@ const sidebarMenuButtonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 function SidebarMenuButton({
@@ -570,7 +570,7 @@ function SidebarMenuAction({
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
           "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className,
+        className
       )}
       {...props}
     />
@@ -592,7 +592,7 @@ function SidebarMenuBadge({
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
-        className,
+        className
       )}
       {...props}
     />
@@ -645,7 +645,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       className={cn(
         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
-        className,
+        className
       )}
       {...props}
     />
@@ -691,7 +691,7 @@ function SidebarMenuSubButton({
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/sonner.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { Toaster as Sonner, ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = "system" } = useTheme();
 
   return (
     <Sonner
@@ -19,7 +19,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }
       {...props}
     />
-  )
+  );
-}
+};
 
-export { Toaster }
+export { Toaster };

llama_stack/ui/components/ui/table.tsx

@@ -45,7 +45,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
       data-slot="table-footer"
       className={cn(
         "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className,
+        className
       )}
       {...props}
     />
@@ -58,7 +58,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
       data-slot="table-row"
       className={cn(
         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className,
+        className
       )}
       {...props}
     />
@@ -71,7 +71,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
       data-slot="table-head"
       className={cn(
         "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
+        className
       )}
       {...props}
     />
@@ -84,7 +84,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
       data-slot="table-cell"
       className={cn(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
+        className
       )}
       {...props}
     />

llama_stack/ui/components/ui/tooltip.tsx

@@ -47,7 +47,7 @@ function TooltipContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
+          className
         )}
         {...props}
       >

llama_stack/ui/components/vector-stores/vector-store-detail.tsx

@@ -85,7 +85,7 @@ export function VectorStoreDetailView({
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {files.map((file) => (
+                {files.map(file => (
                   <TableRow key={file.id}>
                     <TableCell>
                       <Button

llama_stack/ui/e2e/logs-table-scroll.spec.ts

@@ -45,7 +45,7 @@ test.describe("LogsTable Scroll and Progressive Loading", () => {
     const scrollContainer = page.locator("div.overflow-auto").first();
 
     // Scroll to near the bottom
-    await scrollContainer.evaluate((element) => {
+    await scrollContainer.evaluate(element => {
       element.scrollTop = element.scrollHeight - element.clientHeight - 100;
     });
 

llama_stack/ui/eslint.config.mjs

@@ -10,7 +10,13 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
+  ...compat.plugins("prettier"),
+  {
+    rules: {
+      "prettier/prettier": "error",
+    },
+  },
 ];
 
 export default eslintConfig;

llama_stack/ui/hooks/use-audio-recording.ts

@@ -1,85 +1,85 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import { recordAudio } from "@/lib/audio-utils"
+import { recordAudio } from "@/lib/audio-utils";
 
 interface UseAudioRecordingOptions {
-  transcribeAudio?: (blob: Blob) => Promise<string>
+  transcribeAudio?: (blob: Blob) => Promise<string>;
-  onTranscriptionComplete?: (text: string) => void
+  onTranscriptionComplete?: (text: string) => void;
 }
 
 export function useAudioRecording({
   transcribeAudio,
   onTranscriptionComplete,
 }: UseAudioRecordingOptions) {
-  const [isListening, setIsListening] = useState(false)
+  const [isListening, setIsListening] = useState(false);
-  const [isSpeechSupported, setIsSpeechSupported] = useState(!!transcribeAudio)
+  const [isSpeechSupported, setIsSpeechSupported] = useState(!!transcribeAudio);
-  const [isRecording, setIsRecording] = useState(false)
+  const [isRecording, setIsRecording] = useState(false);
-  const [isTranscribing, setIsTranscribing] = useState(false)
+  const [isTranscribing, setIsTranscribing] = useState(false);
-  const [audioStream, setAudioStream] = useState<MediaStream | null>(null)
+  const [audioStream, setAudioStream] = useState<MediaStream | null>(null);
-  const activeRecordingRef = useRef<any>(null)
+  const activeRecordingRef = useRef<any>(null);
 
   useEffect(() => {
     const checkSpeechSupport = async () => {
       const hasMediaDevices = !!(
         navigator.mediaDevices && navigator.mediaDevices.getUserMedia
-      )
+      );
-      setIsSpeechSupported(hasMediaDevices && !!transcribeAudio)
+      setIsSpeechSupported(hasMediaDevices && !!transcribeAudio);
-    }
+    };
 
-    checkSpeechSupport()
+    checkSpeechSupport();
-  }, [transcribeAudio])
+  }, [transcribeAudio]);
 
   const stopRecording = async () => {
-    setIsRecording(false)
+    setIsRecording(false);
-    setIsTranscribing(true)
+    setIsTranscribing(true);
     try {
       // First stop the recording to get the final blob
-      recordAudio.stop()
+      recordAudio.stop();
       // Wait for the recording promise to resolve with the final blob
-      const recording = await activeRecordingRef.current
+      const recording = await activeRecordingRef.current;
       if (transcribeAudio) {
-        const text = await transcribeAudio(recording)
+        const text = await transcribeAudio(recording);
-        onTranscriptionComplete?.(text)
+        onTranscriptionComplete?.(text);
       }
     } catch (error) {
-      console.error("Error transcribing audio:", error)
+      console.error("Error transcribing audio:", error);
     } finally {
-      setIsTranscribing(false)
+      setIsTranscribing(false);
-      setIsListening(false)
+      setIsListening(false);
       if (audioStream) {
-        audioStream.getTracks().forEach((track) => track.stop())
+        audioStream.getTracks().forEach(track => track.stop());
-        setAudioStream(null)
+        setAudioStream(null);
-      }
-      activeRecordingRef.current = null
       }
+      activeRecordingRef.current = null;
     }
+  };
 
   const toggleListening = async () => {
     if (!isListening) {
       try {
-        setIsListening(true)
+        setIsListening(true);
-        setIsRecording(true)
+        setIsRecording(true);
         // Get audio stream first
         const stream = await navigator.mediaDevices.getUserMedia({
           audio: true,
-        })
+        });
-        setAudioStream(stream)
+        setAudioStream(stream);
 
         // Start recording with the stream
-        activeRecordingRef.current = recordAudio(stream)
+        activeRecordingRef.current = recordAudio(stream);
       } catch (error) {
-        console.error("Error recording audio:", error)
+        console.error("Error recording audio:", error);
-        setIsListening(false)
+        setIsListening(false);
-        setIsRecording(false)
+        setIsRecording(false);
         if (audioStream) {
-          audioStream.getTracks().forEach((track) => track.stop())
+          audioStream.getTracks().forEach(track => track.stop());
-          setAudioStream(null)
+          setAudioStream(null);
         }
       }
     } else {
-      await stopRecording()
+      await stopRecording();
-    }
     }
+  };
 
   return {
     isListening,
@@ -89,5 +89,5 @@ export function useAudioRecording({
     audioStream,
     toggleListening,
     stopRecording,
-  }
+  };
 }

llama_stack/ui/hooks/use-auto-scroll.ts

@@ -1,67 +1,67 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
 // How many pixels from the bottom of the container to enable auto-scroll
-const ACTIVATION_THRESHOLD = 50
+const ACTIVATION_THRESHOLD = 50;
 // Minimum pixels of scroll-up movement required to disable auto-scroll
-const MIN_SCROLL_UP_THRESHOLD = 10
+const MIN_SCROLL_UP_THRESHOLD = 10;
 
 export function useAutoScroll(dependencies: React.DependencyList) {
-  const containerRef = useRef<HTMLDivElement | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null);
-  const previousScrollTop = useRef<number | null>(null)
+  const previousScrollTop = useRef<number | null>(null);
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
 
   const scrollToBottom = () => {
     if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
     }
+  };
 
   const handleScroll = () => {
     if (containerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = containerRef.current
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
 
       const distanceFromBottom = Math.abs(
         scrollHeight - scrollTop - clientHeight
-      )
+      );
 
       const isScrollingUp = previousScrollTop.current
         ? scrollTop < previousScrollTop.current
-        : false
+        : false;
 
       const scrollUpDistance = previousScrollTop.current
         ? previousScrollTop.current - scrollTop
-        : 0
+        : 0;
 
       const isDeliberateScrollUp =
-        isScrollingUp && scrollUpDistance > MIN_SCROLL_UP_THRESHOLD
+        isScrollingUp && scrollUpDistance > MIN_SCROLL_UP_THRESHOLD;
 
       if (isDeliberateScrollUp) {
-        setShouldAutoScroll(false)
+        setShouldAutoScroll(false);
       } else {
-        const isScrolledToBottom = distanceFromBottom < ACTIVATION_THRESHOLD
+        const isScrolledToBottom = distanceFromBottom < ACTIVATION_THRESHOLD;
-        setShouldAutoScroll(isScrolledToBottom)
+        setShouldAutoScroll(isScrolledToBottom);
       }
 
-      previousScrollTop.current = scrollTop
+      previousScrollTop.current = scrollTop;
-    }
     }
+  };
 
   const handleTouchStart = () => {
-    setShouldAutoScroll(false)
+    setShouldAutoScroll(false);
-  }
+  };
 
   useEffect(() => {
     if (containerRef.current) {
-      previousScrollTop.current = containerRef.current.scrollTop
+      previousScrollTop.current = containerRef.current.scrollTop;
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (shouldAutoScroll) {
-      scrollToBottom()
+      scrollToBottom();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencies)
+  }, dependencies);
 
   return {
     containerRef,
@@ -69,5 +69,5 @@ export function useAutoScroll(dependencies: React.DependencyList) {
     handleScroll,
     shouldAutoScroll,
     handleTouchStart,
-  }
+  };
 }

llama_stack/ui/hooks/use-autosize-textarea.ts

@@ -1,10 +1,10 @@
-import { useLayoutEffect, useRef } from "react"
+import { useLayoutEffect, useRef } from "react";
 
 interface UseAutosizeTextAreaProps {
-  ref: React.RefObject<HTMLTextAreaElement | null>
+  ref: React.RefObject<HTMLTextAreaElement | null>;
-  maxHeight?: number
+  maxHeight?: number;
-  borderWidth?: number
+  borderWidth?: number;
-  dependencies: React.DependencyList
+  dependencies: React.DependencyList;
 }
 
 export function useAutosizeTextArea({
@@ -13,27 +13,27 @@ export function useAutosizeTextArea({
   borderWidth = 0,
   dependencies,
 }: UseAutosizeTextAreaProps) {
-  const originalHeight = useRef<number | null>(null)
+  const originalHeight = useRef<number | null>(null);
 
   useLayoutEffect(() => {
-    if (!ref.current) return
+    if (!ref.current) return;
 
-    const currentRef = ref.current
+    const currentRef = ref.current;
-    const borderAdjustment = borderWidth * 2
+    const borderAdjustment = borderWidth * 2;
 
     if (originalHeight.current === null) {
-      originalHeight.current = currentRef.scrollHeight - borderAdjustment
+      originalHeight.current = currentRef.scrollHeight - borderAdjustment;
     }
 
-    currentRef.style.removeProperty("height")
+    currentRef.style.removeProperty("height");
-    const scrollHeight = currentRef.scrollHeight
+    const scrollHeight = currentRef.scrollHeight;
 
     // Make sure we don't go over maxHeight
-    const clampedToMax = Math.min(scrollHeight, maxHeight)
+    const clampedToMax = Math.min(scrollHeight, maxHeight);
     // Make sure we don't go less than the original height
-    const clampedToMin = Math.max(clampedToMax, originalHeight.current)
+    const clampedToMin = Math.max(clampedToMax, originalHeight.current);
 
-    currentRef.style.height = `${clampedToMin + borderAdjustment}px`
+    currentRef.style.height = `${clampedToMin + borderAdjustment}px`;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maxHeight, ref, ...dependencies])
+  }, [maxHeight, ref, ...dependencies]);
 }

llama_stack/ui/hooks/use-copy-to-clipboard.ts

@@ -1,36 +1,36 @@
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useRef, useState } from "react";
-import { toast } from "sonner"
+import { toast } from "sonner";
 
 type UseCopyToClipboardProps = {
-  text: string
+  text: string;
-  copyMessage?: string
+  copyMessage?: string;
-}
+};
 
 export function useCopyToClipboard({
   text,
   copyMessage = "Copied to clipboard!",
 }: UseCopyToClipboardProps) {
-  const [isCopied, setIsCopied] = useState(false)
+  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleCopy = useCallback(() => {
     navigator.clipboard
       .writeText(text)
       .then(() => {
-        toast.success(copyMessage)
+        toast.success(copyMessage);
-        setIsCopied(true)
+        setIsCopied(true);
         if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current)
+          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null
+          timeoutRef.current = null;
         }
         timeoutRef.current = setTimeout(() => {
-          setIsCopied(false)
+          setIsCopied(false);
-        }, 2000)
+        }, 2000);
       })
       .catch(() => {
-        toast.error("Failed to copy to clipboard.")
+        toast.error("Failed to copy to clipboard.");
-      })
+      });
-  }, [text, copyMessage])
+  }, [text, copyMessage]);
 
-  return { isCopied, handleCopy }
+  return { isCopied, handleCopy };
 }

llama_stack/ui/hooks/use-infinite-scroll.ts

@@ -20,7 +20,7 @@ interface UseInfiniteScrollOptions {
  */
 export function useInfiniteScroll(
   onLoadMore: (() => void) | undefined,
-  options: UseInfiniteScrollOptions = {},
+  options: UseInfiniteScrollOptions = {}
 ) {
   const { enabled = true, threshold = 0.1, rootMargin = "100px" } = options;
   const sentinelRef = useRef<HTMLTableRowElement>(null);
@@ -29,7 +29,7 @@ export function useInfiniteScroll(
     if (!onLoadMore || !enabled) return;
 
     const observer = new IntersectionObserver(
-      (entries) => {
+      entries => {
         const [entry] = entries;
         if (entry.isIntersecting) {
           onLoadMore();
@@ -38,7 +38,7 @@ export function useInfiniteScroll(
       {
         threshold,
         rootMargin,
-      },
+      }
     );
 
     const sentinel = sentinelRef.current;

llama_stack/ui/hooks/use-mobile.ts

@@ -4,7 +4,7 @@ const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
+    undefined
   );
 
   React.useEffect(() => {

llama_stack/ui/hooks/use-pagination.ts

@@ -38,7 +38,7 @@ interface UsePaginationParams<T> extends UsePaginationOptions {
       limit: number;
       model?: string;
       order?: string;
-    },
+    }
   ) => Promise<PaginationResponse<T>>;
   errorMessagePrefix: string;
   enabled?: boolean;
@@ -81,7 +81,7 @@ export function usePagination<T>({
       const fetchLimit = targetRows || limit;
 
       try {
-        setState((prev) => ({
+        setState(prev => ({
           ...prev,
           status: isInitialLoad ? "loading" : "loading-more",
           error: null,
@@ -94,7 +94,7 @@ export function usePagination<T>({
           ...(order && { order }),
         });
 
-        setState((prev) => ({
+        setState(prev => ({
           ...prev,
           data: isInitialLoad
             ? response.data
@@ -124,14 +124,14 @@ export function usePagination<T>({
             ? new Error(`${errorMessage} ${err.message}`)
             : new Error(errorMessage);
 
-        setState((prev) => ({
+        setState(prev => ({
           ...prev,
           error,
           status: "error",
         }));
       }
     },
-    [limit, model, order, fetchFunction, errorMessagePrefix, client, router],
+    [limit, model, order, fetchFunction, errorMessagePrefix, client, router]
   );
 
   /**

llama_stack/ui/lib/audio-utils.ts

@@ -1,50 +1,50 @@
 type RecordAudioType = {
-  (stream: MediaStream): Promise<Blob>
+  (stream: MediaStream): Promise<Blob>;
-  stop: () => void
+  stop: () => void;
-  currentRecorder?: MediaRecorder
+  currentRecorder?: MediaRecorder;
-}
+};
 
 export const recordAudio = (function (): RecordAudioType {
   const func = async function recordAudio(stream: MediaStream): Promise<Blob> {
     try {
       const mediaRecorder = new MediaRecorder(stream, {
         mimeType: "audio/webm;codecs=opus",
-      })
+      });
-      const audioChunks: Blob[] = []
+      const audioChunks: Blob[] = [];
 
       return new Promise((resolve, reject) => {
-        mediaRecorder.ondataavailable = (event) => {
+        mediaRecorder.ondataavailable = event => {
           if (event.data.size > 0) {
-            audioChunks.push(event.data)
+            audioChunks.push(event.data);
-          }
           }
+        };
 
         mediaRecorder.onstop = () => {
-          const audioBlob = new Blob(audioChunks, { type: "audio/webm" })
+          const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
-          resolve(audioBlob)
+          resolve(audioBlob);
-        }
+        };
 
         mediaRecorder.onerror = () => {
-          reject(new Error("MediaRecorder error occurred"))
+          reject(new Error("MediaRecorder error occurred"));
-        }
+        };
 
-        mediaRecorder.start(1000)
+        mediaRecorder.start(1000);
-        ;(func as RecordAudioType).currentRecorder = mediaRecorder
+        (func as RecordAudioType).currentRecorder = mediaRecorder;
-      })
+      });
     } catch (error) {
       const errorMessage =
-        error instanceof Error ? error.message : "Unknown error occurred"
+        error instanceof Error ? error.message : "Unknown error occurred";
-      throw new Error("Failed to start recording: " + errorMessage)
+      throw new Error("Failed to start recording: " + errorMessage);
-    }
     }
+  };
 
-  ;(func as RecordAudioType).stop = () => {
+  (func as RecordAudioType).stop = () => {
-    const recorder = (func as RecordAudioType).currentRecorder
+    const recorder = (func as RecordAudioType).currentRecorder;
     if (recorder && recorder.state !== "inactive") {
-      recorder.stop()
+      recorder.stop();
-    }
-    delete (func as RecordAudioType).currentRecorder
     }
+    delete (func as RecordAudioType).currentRecorder;
+  };
 
-  return func as RecordAudioType
+  return func as RecordAudioType;
-})()
+})();

llama_stack/ui/lib/config-validator.ts

@@ -27,19 +27,19 @@ export function validateServerConfig() {
       !optionalConfigs.GITHUB_CLIENT_SECRET
     ) {
       console.log(
-        "\n📝 GitHub OAuth not configured (authentication features disabled)",
+        "\n📝 GitHub OAuth not configured (authentication features disabled)"
       );
       console.log("   To enable GitHub OAuth:");
       console.log("   1. Go to https://github.com/settings/applications/new");
       console.log(
-        "   2. Set Application name: Llama Stack UI (or your preferred name)",
+        "   2. Set Application name: Llama Stack UI (or your preferred name)"
       );
       console.log("   3. Set Homepage URL: http://localhost:8322");
       console.log(
-        "   4. Set Authorization callback URL: http://localhost:8322/api/auth/callback/github",
+        "   4. Set Authorization callback URL: http://localhost:8322/api/auth/callback/github"
       );
       console.log(
-        "   5. Create the app and copy the Client ID and Client Secret",
+        "   5. Create the app and copy the Client ID and Client Secret"
       );
       console.log("   6. Add them to your .env.local file:");
       console.log("      GITHUB_CLIENT_ID=your_client_id");

llama_stack/ui/lib/contents-api.ts

@@ -11,7 +11,7 @@ export interface VectorStoreContentItem {
   vector_store_id: string;
   file_id: string;
   content: VectorStoreContent;
-  metadata: Record<string, any>;
+  metadata: Record<string, unknown>;
   embedding?: number[];
 }
 
@@ -32,11 +32,18 @@ export interface VectorStoreListContentsResponse {
 export class ContentsAPI {
   constructor(private client: LlamaStackClient) {}
 
-  async getFileContents(vectorStoreId: string, fileId: string): Promise<VectorStoreContentsResponse> {
+  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> {
+  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);
 
@@ -47,16 +54,11 @@ export class ContentsAPI {
     return targetContent;
   }
 
-  async updateContent(
+  async updateContent(): Promise<VectorStoreContentItem> {
-    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> {
+  async deleteContent(): Promise<VectorStoreContentDeleteResponse> {
     throw new Error("Individual content deletion not yet implemented in API");
   }
 
@@ -70,18 +72,27 @@ export class ContentsAPI {
       before?: string;
     }
   ): Promise<VectorStoreListContentsResponse> {
-    const fileContents = await this.client.vectorStores.files.content(vectorStoreId, fileId);
+    const fileContents = await this.client.vectorStores.files.content(
+      vectorStoreId,
+      fileId
+    );
     const contentItems: VectorStoreContentItem[] = [];
 
     fileContents.content.forEach((content, contentIndex) => {
-      const rawContent = content as any;
+      const rawContent = content as Record<string, unknown>;
 
       // 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 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 contentId =
-      const objectType = rawContent.object || 'vector_store.file.content';
+        rawContent.chunk_metadata?.chunk_id ||
+        rawContent.id ||
+        `content_${fileId}_${contentIndex}`;
+      const objectType = rawContent.object || "vector_store.file.content";
       contentItems.push({
         id: contentId,
         object: objectType,
@@ -92,7 +103,7 @@ export class ContentsAPI {
         embedding: embedding,
         metadata: {
           ...chunkMetadata, // chunk_metadata fields from API
-          content_length: content.type === 'text' ? content.text.length : 0,
+          content_length: content.type === "text" ? content.text.length : 0,
         },
       });
     });
@@ -104,7 +115,7 @@ export class ContentsAPI {
     }
 
     return {
-      object: 'list',
+      object: "list",
       data: filteredItems,
       has_more: contentItems.length > (options?.limit || contentItems.length),
     };

llama_stack/ui/lib/format-message-content.test.ts

@@ -18,7 +18,7 @@ describe("extractTextFromContentPart", () => {
   it("should extract text from an array of text content objects", () => {
     const content = [{ type: "text", text: "Which planet do humans live on?" }];
     expect(extractTextFromContentPart(content)).toBe(
-      "Which planet do humans live on?",
+      "Which planet do humans live on?"
     );
   });
 
@@ -37,7 +37,7 @@ describe("extractTextFromContentPart", () => {
       { type: "text", text: "It's an image." },
     ];
     expect(extractTextFromContentPart(content)).toBe(
-      "Look at this: [Image] It's an image.",
+      "Look at this: [Image] It's an image."
     );
   });
 
@@ -53,7 +53,7 @@ describe("extractTextFromContentPart", () => {
   });
 
   it("should handle arrays with plain strings", () => {
-    const content = ["This is", " a test."] as any;
+    const content = ["This is", " a test."] as unknown;
     expect(extractTextFromContentPart(content)).toBe("This is  a test.");
   });
 
@@ -65,7 +65,7 @@ describe("extractTextFromContentPart", () => {
       null,
       undefined,
       { type: "text", noTextProperty: true },
-    ] as any;
+    ] as unknown;
     expect(extractTextFromContentPart(content)).toBe("Valid");
   });
 
@@ -75,15 +75,17 @@ describe("extractTextFromContentPart", () => {
       "Just a string.",
       { type: "image_url", image_url: { url: "http://example.com/image.png" } },
       { type: "text", text: "Last part." },
-    ] as any;
+    ] as unknown;
     expect(extractTextFromContentPart(content)).toBe(
-      "First part. Just a string. [Image] Last part.",
+      "First part. Just a string. [Image] Last part."
     );
   });
 });
 
 describe("extractDisplayableText (composite function)", () => {
-  const mockFormatToolCallToString = (toolCall: any) => {
+  const mockFormatToolCallToString = (toolCall: {
+    function?: { name?: string; arguments?: unknown };
+  }) => {
     if (!toolCall || !toolCall.function || !toolCall.function.name) return "";
     const args = toolCall.function.arguments
       ? JSON.stringify(toolCall.function.arguments)
@@ -125,7 +127,7 @@ describe("extractDisplayableText (composite function)", () => {
       tool_calls: [toolCall],
     };
     expect(extractDisplayableText(messageWithEffectivelyEmptyContent)).toBe(
-      mockFormatToolCallToString(toolCall),
+      mockFormatToolCallToString(toolCall)
     );
 
     const messageWithEmptyContent: ChatMessage = {
@@ -134,7 +136,7 @@ describe("extractDisplayableText (composite function)", () => {
       tool_calls: [toolCall],
     };
     expect(extractDisplayableText(messageWithEmptyContent)).toBe(
-      mockFormatToolCallToString(toolCall),
+      mockFormatToolCallToString(toolCall)
     );
   });
 
@@ -149,7 +151,7 @@ describe("extractDisplayableText (composite function)", () => {
     };
     const expectedToolCallStr = mockFormatToolCallToString(toolCall);
     expect(extractDisplayableText(message)).toBe(
-      `The result is: ${expectedToolCallStr}`,
+      `The result is: ${expectedToolCallStr}`
     );
   });
 
@@ -167,7 +169,7 @@ describe("extractDisplayableText (composite function)", () => {
     };
     const expectedToolCallStr = mockFormatToolCallToString(toolCall);
     expect(extractDisplayableText(message)).toBe(
-      `Okay, checking weather for London. ${expectedToolCallStr}`,
+      `Okay, checking weather for London. ${expectedToolCallStr}`
     );
   });
 
@@ -178,7 +180,7 @@ describe("extractDisplayableText (composite function)", () => {
       tool_calls: [],
     };
     expect(extractDisplayableText(messageEmptyToolCalls)).toBe(
-      "No tools here.",
+      "No tools here."
     );
 
     const messageUndefinedToolCalls: ChatMessage = {
@@ -187,7 +189,7 @@ describe("extractDisplayableText (composite function)", () => {
       tool_calls: undefined,
     };
     expect(extractDisplayableText(messageUndefinedToolCalls)).toBe(
-      "Still no tools.",
+      "Still no tools."
     );
   });
 });

llama_stack/ui/lib/format-message-content.ts

@@ -2,7 +2,7 @@ import { ChatMessage, ChatMessageContentPart } from "@/lib/types";
 import { formatToolCallToString } from "@/lib/format-tool-call";
 
 export function extractTextFromContentPart(
-  content: string | ChatMessageContentPart[] | null | undefined,
+  content: string | ChatMessageContentPart[] | null | undefined
 ): string {
   if (content === null || content === undefined) {
     return "";
@@ -37,7 +37,7 @@ export function extractTextFromContentPart(
 }
 
 export function extractDisplayableText(
-  message: ChatMessage | undefined | null,
+  message: ChatMessage | undefined | null
 ): string {
   if (!message) {
     return "";

llama_stack/ui/lib/format-tool-call.tsx

@@ -5,7 +5,9 @@
  *                 with `name` and `arguments`.
  * @returns A formatted string or an empty string if data is malformed.
  */
-export function formatToolCallToString(toolCall: any): string {
+export function formatToolCallToString(toolCall: {
+  function?: { name?: string; arguments?: unknown };
+}): string {
   if (
     !toolCall ||
     !toolCall.function ||
@@ -24,7 +26,7 @@ export function formatToolCallToString(toolCall: any): string {
   } else {
     try {
       argsString = JSON.stringify(args);
-    } catch (error) {
+    } catch {
       return "";
     }
   }

llama_stack/ui/lib/truncate-text.ts

@@ -1,6 +1,6 @@
 export function truncateText(
   text: string | null | undefined,
-  maxLength: number = 50,
+  maxLength: number = 50
 ): string {
   if (!text) return "N/A";
   if (text.length <= maxLength) return text;