larkup 0.1.14 → 0.1.21

package/components/demo/demo-workspace.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import useSWR from "swr";
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
 import {
   AlertTriangle,
   CornerDownLeft,
@@ -13,20 +13,20 @@ import {
   Cpu,
   Database,
   ExternalLink,
-} from "lucide-react";
-import type { IndexType, VectorStoreId } from "@larkup/core/types";
-import type { QueryHit } from "@larkup/vector-stores/adapter";
-import { getEmbeddingModel } from "@larkup/core/embeddings/registry";
-import { getVectorStore } from "@larkup/vector-stores/registry";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Textarea } from "@/components/ui/textarea";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Skeleton } from "@/components/ui/skeleton";
-
-import { useWorkspace } from "@/components/workspace/workspace-provider";
-import { cn } from "@/lib/utils";
+} from 'lucide-react';
+import type { IndexType, VectorStoreId } from '@larkup/core/types';
+import type { QueryHit } from '@larkup/vector-stores/adapter';
+import { getEmbeddingModel } from '@larkup/core/embeddings/registry';
+import { getVectorStore } from '@larkup/vector-stores/registry';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Textarea } from '@/components/ui/textarea';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { cn } from '@/lib/utils';
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
@@ -47,7 +47,7 @@ interface DemoStatus {
 interface DemoResult {
   query: string;
   hits: QueryHit[];
-  source: "server" | "direct";
+  source: 'server' | 'direct';
   endpoint?: string;
   tookMs: number;
 }
@@ -55,29 +55,26 @@ interface DemoResult {
 const TOP_K_PRESETS = [1, 3, 5, 8, 10];
 
 const SAMPLE_QUERIES = [
-  "What is this corpus about?",
-  "Summarize the key concepts.",
-  "How does retrieval work?",
+  'What is this corpus about?',
+  'Summarize the key concepts.',
+  'How does retrieval work?',
 ];
 
 export function DemoWorkspace() {
   const { activeServer } = useWorkspace();
   const serverId = activeServer?.id ?? null;
 
-  const statusKey = serverId
-    ? `/api/demo?serverId=${encodeURIComponent(serverId)}`
-    : "/api/demo";
+  const statusKey = serverId ? `/api/demo?serverId=${encodeURIComponent(serverId)}` : '/api/demo';
   const { data, isLoading } = useSWR<DemoStatus>(statusKey, fetcher, {
     refreshInterval: 5000,
   });
 
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState('');
   const [topK, setTopK] = useState<number>(5);
   const [running, setRunning] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<DemoResult | null>(null);
 
-  // Clear any stale result when switching the target server.
   useEffect(() => {
     setResult(null);
     setError(null);
@@ -99,20 +96,20 @@ export function DemoWorkspace() {
     setRunning(true);
     setError(null);
     try {
-      const res = await fetch("/api/demo", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const res = await fetch('/api/demo', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ query: question, topK, serverId }),
       });
       const body = await res.json();
       if (!res.ok) {
-        setError(body.error ?? "Query failed.");
+        setError(body.error ?? 'Query failed.');
         setResult(null);
         return;
       }
       setResult(body as DemoResult);
     } catch {
-      setError("Could not reach the retrieval endpoint.");
+      setError('Could not reach the retrieval endpoint.');
       setResult(null);
     } finally {
       setRunning(false);
@@ -120,8 +117,8 @@ export function DemoWorkspace() {
   }
 
   return (
-    <div className="space-y-6 px-6 py-6 md:px-8">
-      <SourceSummary server={server} config={config} />
+    <div className="space-y-6  w-full">
+      {/* <SourceSummary server={server} config={config} /> */}
 
       {!ready && (
         <Alert variant="default" className="text-orange-500">
@@ -144,7 +141,7 @@ export function DemoWorkspace() {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                   e.preventDefault();
                   run(query);
                 }
@@ -166,10 +163,10 @@ export function DemoWorkspace() {
                     type="button"
                     onClick={() => setTopK(k)}
                     className={cn(
-                      "min-w-8 rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors",
+                      'min-w-8 rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors',
                       topK === k
-                        ? "bg-white border text-foreground shadow-sm"
-                        : "text-muted-foreground hover:text-foreground",
+                        ? 'bg-white border text-foreground '
+                        : 'text-muted-foreground hover:text-foreground',
                     )}
                   >
                     {k}
@@ -178,16 +175,13 @@ export function DemoWorkspace() {
               </div>
             </div>
 
-            <Button
-              onClick={() => run(query)}
-              disabled={!ready || running || !query.trim()}
-            >
+            <Button onClick={() => run(query)} disabled={!ready || running || !query.trim()}>
               {running ? (
                 <Loader2 className="size-4 animate-spin" />
               ) : (
                 <Search className="size-4" />
               )}
-              {running ? "Searching…" : "Search"}
+              {running ? 'Searching…' : 'Search'}
               {!running && (
                 <kbd className="ml-1 hidden items-center gap-0.5 rounded border border-primary-foreground/30 px-1 text-[10px] opacity-80 sm:inline-flex">
                   <CornerDownLeft className="size-2.5" />
@@ -236,14 +230,14 @@ function SourceSummary({
   server,
   config,
 }: {
-  server: DemoStatus["server"];
-  config: DemoStatus["config"];
+  server: DemoStatus['server'];
+  config: DemoStatus['config'];
 }) {
   const model = getEmbeddingModel(config.embeddingModelId);
   const store = getVectorStore(config.vectorStore);
 
   return (
-    <Card>
+    <Card className="">
       <CardContent className="flex flex-wrap items-center gap-x-6 gap-y-4 py-4">
         <div className="flex items-center gap-2">
           {server.running ? (
@@ -262,24 +256,10 @@ function SourceSummary({
           )}
         </div>
 
-        <Meta
-          icon={Cpu}
-          label="Model"
-          value={model?.label ?? config.embeddingModelId}
-        />
-        <Meta
-          icon={Database}
-          label="Store"
-          value={store?.label ?? config.vectorStore}
-        />
-        <Meta
-          icon={Sparkles}
-          label="Index"
-          value={config.indexType.toUpperCase()}
-        />
-        {server.running && (
-          <Meta icon={Server} label="Endpoint" value={server.endpoint} mono />
-        )}
+        <Meta icon={Cpu} label="Model" value={model?.label ?? config.embeddingModelId} />
+        <Meta icon={Database} label="Store" value={store?.label ?? config.vectorStore} />
+        <Meta icon={Sparkles} label="Index" value={config.indexType.toUpperCase()} />
+        {server.running && <Meta icon={Server} label="Endpoint" value={server.endpoint} mono />}
       </CardContent>
     </Card>
   );
@@ -302,12 +282,7 @@ function Meta({
         <Icon className="size-3.5" />
         {label}
       </span>
-      <span
-        className={cn(
-          "text-sm font-medium leading-tight",
-          mono && "font-mono text-xs",
-        )}
-      >
+      <span className={cn('text-sm font-medium leading-tight', mono && 'font-mono text-xs')}>
         {value}
       </span>
     </div>
@@ -322,8 +297,7 @@ function Results({ result }: { result: DemoResult }) {
           <Search className="mb-1 size-6 text-muted-foreground/60" />
           <p className="text-sm font-medium">No matches found</p>
           <p className="text-sm text-muted-foreground">
-            Nothing in the index scored against that query. Try rephrasing or
-            indexing more content.
+            Nothing in the index scored against that query. Try rephrasing or indexing more content.
           </p>
         </CardContent>
       </Card>
@@ -334,10 +308,10 @@ function Results({ result }: { result: DemoResult }) {
     <div className="space-y-3">
       <div className="flex items-center justify-between">
         <h2 className="text-sm font-medium">
-          {result.hits.length} result{result.hits.length === 1 ? "" : "s"}
+          {result.hits.length} result{result.hits.length === 1 ? '' : 's'}
         </h2>
         <span className="font-mono text-xs text-muted-foreground tabular-nums">
-          {result.source === "server" ? "via server" : "via direct"} ·{" "}
+          {result.source === 'server' ? 'via server' : 'via direct'} ·{' '}
           {result.tookMs.toLocaleString()}ms
         </span>
       </div>
@@ -364,22 +338,15 @@ function HitCard({ hit, rank }: { hit: QueryHit; rank: number }) {
           <div className="flex items-start justify-between gap-3">
             <div className="flex min-w-0 items-center gap-2">
               <FileText className="size-4 shrink-0 text-muted-foreground" />
-              <h3 className="truncate text-sm font-medium">
-                {hit.title || "Untitled"}
-              </h3>
+              <h3 className="truncate text-sm font-medium">{hit.title || 'Untitled'}</h3>
             </div>
-            <Badge
-              variant="secondary"
-              className="shrink-0 font-mono text-[11px] tabular-nums"
-            >
+            <Badge variant="secondary" className="shrink-0 font-mono text-[11px] tabular-nums">
               {pct}%
             </Badge>
           </div>
 
           <p className="text-sm leading-relaxed text-muted-foreground">
-            {hit.text.length > 360
-              ? `${hit.text.slice(0, 360).trim()}…`
-              : hit.text}
+            {hit.text.length > 360 ? `${hit.text.slice(0, 360).trim()}…` : hit.text}
           </p>
 
           {hit.url && (

package/components/global-settings.tsx

@@ -1,32 +1,27 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import useSWR from "swr";
-import { Loader2, Save, ChevronLeft } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { toast } from "sonner";
-import { RagConfig } from "@larkup/core/types";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
-import { useSearchParams, useRouter, usePathname } from "next/navigation";
-import { useWorkspace } from "@/components/workspace/workspace-provider";
+import { useState, useEffect } from 'react';
+import useSWR from 'swr';
+import { Loader2, Save, ChevronLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from 'sonner';
+import { RagConfig } from '@larkup/core/types';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { Switch } from './ui/switch';
 
-const fetcher = (url: string) =>
-  fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
+const fetcher = (url: string) => fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
 
 export function GlobalSettings({ onBack }: { onBack: () => void }) {
-  const { data, isLoading, mutate } = useSWR("/api/config", fetcher);
+  const { data, isLoading, mutate } = useSWR('/api/config', fetcher);
   const [form, setForm] = useState<Partial<RagConfig>>({});
   const [saving, setSaving] = useState(false);
 
   const searchParams = useSearchParams();
-  const highlightSerper = searchParams.get("settings") === "serper";
+  const highlightSerper = searchParams.get('settings') === 'serper';
   const router = useRouter();
   const pathname = usePathname();
   const { setMode } = useWorkspace();
@@ -40,26 +35,25 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
   const handleSave = async () => {
     setSaving(true);
     try {
-      const res = await fetch("/api/config", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
+      const res = await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ ...data?.config, ...form }),
       });
       const json = await res.json();
-      if (!res.ok)
-        throw new Error(json.error ?? "Failed to save configuration");
+      if (!res.ok) throw new Error(json.error ?? 'Failed to save configuration');
 
       await mutate(json, { revalidate: false });
-      toast.success("Global Settings saved");
+      toast.success('Global Settings saved');
 
       if (highlightSerper) {
         // Remove the query param if it was set
         const params = new URLSearchParams(searchParams);
-        params.delete("settings");
+        params.delete('settings');
         router.replace(`${pathname}?${params.toString()}`);
       }
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to save");
+      toast.error(err instanceof Error ? err.message : 'Failed to save');
     } finally {
       setSaving(false);
     }
@@ -76,21 +70,11 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
   return (
     <div className="flex flex-col min-h-0 h-full">
       <div className="border-b px-4 py-3 font-semibold flex items-center gap-2 shrink-0 bg-muted/30">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6 shrink-0"
-          onClick={onBack}
-        >
+        <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={onBack}>
           <ChevronLeft className="h-4 w-4" />
         </Button>
         <span className="flex-1 truncate">Global Settings</span>
-        <Button
-          size="sm"
-          onClick={handleSave}
-          disabled={saving}
-          className="h-7 px-3 text-xs"
-        >
+        <Button size="sm" onClick={handleSave} disabled={saving} className="h-7 px-3 text-xs">
           {saving ? (
             <Loader2 className="h-3 w-3 mr-1 animate-spin" />
           ) : (
@@ -103,19 +87,17 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
       <div className="flex-1 min-h-0 p-4 space-y-6 overflow-y-auto ">
         <div className="space-y-4">
           <div className=" bg-card text-card-foreground  p-3 space-y-3">
-            <h4 className="font-semibold leading-none tracking-tight text-sm">
-              Embedding
-            </h4>
+            <h4 className="font-semibold leading-none tracking-tight text-sm">Embedding</h4>
             <div className="space-y-1.5">
               <Label className="text-xs">Provider</Label>
               <Select
-                value={form.embeddingProvider ?? undefined}
+                value={form.embeddingProvider || ''}
                 onValueChange={(v) =>
-                  setForm({ ...form, embeddingProvider: v! })
+                  setForm({ ...form, embeddingProvider: v === null ? undefined : v })
                 }
               >
                 <SelectTrigger className="h-8! text-sm w-full">
-                  <span>{form.embeddingProvider || "Select provider"}</span>
+                  <span>{form.embeddingProvider || 'Select provider'}</span>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="openai">OpenAI</SelectItem>
@@ -123,9 +105,7 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
                   <SelectItem value="cohere">Cohere</SelectItem>
                   <SelectItem value="mistral">Mistral</SelectItem>
                   <SelectItem value="deepseek">DeepSeek</SelectItem>
-                  <SelectItem value="vercel_ai_gateway">
-                    Vercel AI Gateway
-                  </SelectItem>
+                  <SelectItem value="vercel_ai_gateway">Vercel AI Gateway</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -134,31 +114,25 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
               <Input
                 type="password"
                 className="h-8 text-sm"
-                value={form.embeddingApiKey || ""}
-                onChange={(e) =>
-                  setForm({ ...form, embeddingApiKey: e.target.value })
-                }
+                value={form.embeddingApiKey || ''}
+                onChange={(e) => setForm({ ...form, embeddingApiKey: e.target.value })}
                 placeholder="sk-..."
               />
             </div>
           </div>
 
           <div className="  text-card-foreground  p-3 space-y-3">
-            <h4 className="font-semibold leading-none tracking-tight text-sm">
-              Chat (LLM)
-            </h4>
+            <h4 className="font-semibold leading-none tracking-tight text-sm">Chat (LLM)</h4>
             <div className="space-y-1.5">
               <Label className="text-xs">Provider</Label>
               <Select
-                value={form.chatProvider ?? form.embeddingProvider ?? undefined}
-                onValueChange={(v) => setForm({ ...form, chatProvider: v! })}
+                value={form.chatProvider || form.embeddingProvider || ''}
+                onValueChange={(v) =>
+                  setForm({ ...form, chatProvider: v === null ? undefined : v })
+                }
               >
                 <SelectTrigger className="h-8! w-full text-sm">
-                  <span>
-                    {form.chatProvider ||
-                      form.embeddingProvider ||
-                      "Select provider"}
-                  </span>
+                  <span>{form.chatProvider || form.embeddingProvider || 'Select provider'}</span>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="openai">OpenAI</SelectItem>
@@ -166,9 +140,7 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
                   <SelectItem value="cohere">Cohere</SelectItem>
                   <SelectItem value="mistral">Mistral</SelectItem>
                   <SelectItem value="deepseek">DeepSeek</SelectItem>
-                  <SelectItem value="vercel_ai_gateway">
-                    Vercel AI Gateway
-                  </SelectItem>
+                  <SelectItem value="vercel_ai_gateway">Vercel AI Gateway</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -177,50 +149,50 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
               <Input
                 type="password"
                 className="h-8 text-sm"
-                value={form.chatApiKey || ""}
-                onChange={(e) =>
-                  setForm({ ...form, chatApiKey: e.target.value })
-                }
+                value={form.chatApiKey || ''}
+                onChange={(e) => setForm({ ...form, chatApiKey: e.target.value })}
                 placeholder="Leave blank to use Embedding Key"
               />
             </div>
           </div>
 
           <div className=" bg-card text-card-foreground  p-3 space-y-3">
-            <h4 className="font-semibold leading-none tracking-tight text-sm">
-              Web Search
-            </h4>
+            <h4 className="font-semibold leading-none tracking-tight text-sm">Web Search</h4>
             <div className="space-y-1.5">
               <Label className="text-xs">Serper.dev API Key</Label>
               <Input
                 type="password"
-                className={`h-8 text-sm ${highlightSerper && !form.serperApiKey ? "border-red-500 focus-visible:ring-red-500" : ""}`}
-                value={form.serperApiKey || ""}
-                onChange={(e) =>
-                  setForm({ ...form, serperApiKey: e.target.value })
-                }
+                className={`h-8 text-sm ${
+                  highlightSerper && !form.serperApiKey
+                    ? 'border-red-500 focus-visible:ring-red-500'
+                    : ''
+                }`}
+                value={form.serperApiKey || ''}
+                onChange={(e) => setForm({ ...form, serperApiKey: e.target.value })}
                 placeholder="Serper API Key"
               />
               {highlightSerper && !form.serperApiKey && (
-                <p className="text-[10px] text-red-500">
-                  API Key is required for web search.
-                </p>
+                <p className="text-[10px] text-red-500">API Key is required for web search.</p>
               )}
             </div>
           </div>
 
           <div className=" bg-card text-card-foreground  p-3 space-y-3">
-            <h4 className="font-semibold leading-none tracking-tight text-sm">
-              Scraper
-            </h4>
+            <div className="flex items-center justify-between">
+              <h4 className="font-semibold leading-none tracking-tight text-sm">Scraper</h4>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  checked={form.useScraperProxy || false}
+                  onCheckedChange={(checked) => setForm({ ...form, useScraperProxy: checked })}
+                />
+              </div>
+            </div>
             <div className="space-y-1.5">
               <Label className="text-xs">Proxy Server</Label>
               <Input
                 className="h-8 text-sm"
-                value={form.scraperProxyServer || ""}
-                onChange={(e) =>
-                  setForm({ ...form, scraperProxyServer: e.target.value })
-                }
+                value={form.scraperProxyServer || ''}
+                onChange={(e) => setForm({ ...form, scraperProxyServer: e.target.value })}
                 placeholder="http://proxy.example.com:8080"
               />
             </div>
@@ -228,10 +200,8 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
               <Label className="text-xs">Proxy Username</Label>
               <Input
                 className="h-8 text-sm"
-                value={form.scraperProxyUsername || ""}
-                onChange={(e) =>
-                  setForm({ ...form, scraperProxyUsername: e.target.value })
-                }
+                value={form.scraperProxyUsername || ''}
+                onChange={(e) => setForm({ ...form, scraperProxyUsername: e.target.value })}
               />
             </div>
             <div className="space-y-1.5">
@@ -239,10 +209,8 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
               <Input
                 type="password"
                 className="h-8 text-sm"
-                value={form.scraperProxyPassword || ""}
-                onChange={(e) =>
-                  setForm({ ...form, scraperProxyPassword: e.target.value })
-                }
+                value={form.scraperProxyPassword || ''}
+                onChange={(e) => setForm({ ...form, scraperProxyPassword: e.target.value })}
               />
             </div>
             <div className="space-y-1.5 pt-2">
@@ -250,30 +218,25 @@ export function GlobalSettings({ onBack }: { onBack: () => void }) {
               <Input
                 type="password"
                 className="h-8 text-sm"
-                value={form.firecrawlApiKey || ""}
-                onChange={(e) =>
-                  setForm({ ...form, firecrawlApiKey: e.target.value })
-                }
+                value={form.firecrawlApiKey || ''}
+                onChange={(e) => setForm({ ...form, firecrawlApiKey: e.target.value })}
                 placeholder="fc-..."
               />
             </div>
           </div>
 
           <div className="bg-card text-card-foreground p-3 space-y-3 rounded-lg border">
-            <h4 className="font-semibold leading-none tracking-tight text-sm">
-              Workspace Mode
-            </h4>
+            <h4 className="font-semibold leading-none tracking-tight text-sm">Workspace Mode</h4>
             <p className="text-xs text-muted-foreground">
-              Switch to simple mode for a streamlined experience without
-              pipeline configuration.
+              Switch to simple mode for a streamlined experience without pipeline configuration.
             </p>
             <Button
               variant="outline"
               size="sm"
               className="w-full text-xs"
               onClick={async () => {
-                await setMode("simple");
-                router.push("/simple/chat");
+                await setMode('simple');
+                router.push('/simple/chat');
               }}
             >
               Switch to Simple Mode

package/components/index/global-index-progress.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import useSWR from 'swr';
+import { Loader2 } from 'lucide-react';
+import type { IndexRun } from '@larkup/core/types';
+import { IndexActionDialog } from './index-action-dialog';
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+interface IndexStatus {
+  run: IndexRun | null;
+  running: boolean;
+}
+
+const ACTIVE: IndexRun['status'][] = ['chunking', 'embedding', 'upserting'];
+
+export function GlobalIndexProgress() {
+  const { data } = useSWR<IndexStatus>('/api/index', fetcher, {
+    refreshInterval: (d) => (d?.run && ACTIVE.includes(d.run.status) ? 1000 : 0),
+  });
+
+  const running = Boolean(data?.run && ACTIVE.includes(data.run.status));
+
+  if (!running || !data?.run) {
+    return null;
+  }
+
+  const { run } = data;
+  const pct = run.totalChunks > 0 ? Math.round((run.processedChunks / run.totalChunks) * 100) : 5; // indeterminate/start
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <IndexActionDialog
+        trigger={
+          <button className="flex items-center gap-3 rounded-full border bg-background px-4 py-2 text-sm font-medium  transition-all hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+            <Loader2 className="size-4 animate-spin text-primary" />
+            <div className="flex flex-col items-start gap-0.5">
+              <span className="text-xs leading-none text-muted-foreground">Storing...</span>
+              <span className="leading-none">{pct}%</span>
+            </div>
+          </button>
+        }
+      />
+    </div>
+  );
+}