@geminilight/mindos 0.5.18 → 0.5.19

package/app/app/api/ask/route.ts

@@ -57,11 +57,12 @@ function convertToModelMessages(messages: FrontendMessage[]): ModelMessage[] {
           type: 'tool-call',
           toolCallId: part.toolCallId,
           toolName: part.toolName,
-          input: part.input,
+          input: part.input ?? {},
         });
-        if (part.state === 'done' || part.state === 'error') {
-          completedToolCalls.push(part);
-        }
+        // Always emit a tool result for every tool call. Orphaned tool calls
+        // (running/pending from interrupted streams) get an empty result;
+        // without one the API rejects the request.
+        completedToolCalls.push(part);
       }
       // 'reasoning' parts are display-only; not sent back to model
     }

package/app/app/api/setup/route.ts

@@ -30,6 +30,7 @@ export async function GET() {
       openaiApiKey: maskApiKey(s.ai.providers.openai.apiKey),
       openaiModel: s.ai.providers.openai.model,
       openaiBaseUrl: s.ai.providers.openai.baseUrl ?? '',
+      guideState: s.guideState ?? null,
     });
   } catch (e) {
     return NextResponse.json(
@@ -95,9 +96,33 @@ export async function POST(req: NextRequest) {
     );
 
     // Build config
+    // Merge AI config: empty apiKey means "keep existing" — never overwrite a
+    // configured key with blank just because the user didn't re-enter it.
+    let mergedAi = current.ai;
+    if (ai) {
+      const inAnthropicKey = ai.providers?.anthropic?.apiKey;
+      const inOpenaiKey    = ai.providers?.openai?.apiKey;
+      mergedAi = {
+        provider: ai.provider ?? current.ai.provider,
+        providers: {
+          anthropic: {
+            apiKey: inAnthropicKey || current.ai.providers.anthropic.apiKey,
+            model:  ai.providers?.anthropic?.model || current.ai.providers.anthropic.model,
+          },
+          openai: {
+            apiKey:  inOpenaiKey || current.ai.providers.openai.apiKey,
+            model:   ai.providers?.openai?.model  || current.ai.providers.openai.model,
+            baseUrl: ai.providers?.openai?.baseUrl ?? current.ai.providers.openai.baseUrl ?? '',
+          },
+        },
+      };
+    }
+
     const disabledSkills = body.template === 'zh' ? ['mindos'] : ['mindos-zh'];
+    // Determine guide template from setup template
+    const guideTemplate = body.template === 'zh' ? 'zh' : body.template === 'empty' ? 'empty' : 'en';
     const config: ServerSettings = {
-      ai: ai ?? current.ai,
+      ai: mergedAi,
       mindRoot: resolvedRoot,
       port: webPort,
       mcpPort: mcpPortNum,
@@ -106,6 +131,14 @@ export async function POST(req: NextRequest) {
       startMode: current.startMode,
       setupPending: false,  // clear the flag
       disabledSkills,
+      guideState: {
+        active: true,
+        dismissed: false,
+        template: guideTemplate as 'en' | 'zh' | 'empty',
+        step1Done: false,
+        askedAI: false,
+        nextStepIndex: 0,
+      },
     };
 
     writeSettings(config);
@@ -124,3 +157,33 @@ export async function POST(req: NextRequest) {
     );
   }
 }
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { guideState: patch } = body;
+    if (!patch || typeof patch !== 'object') {
+      return NextResponse.json({ error: 'guideState object required' }, { status: 400 });
+    }
+    const current = readSettings();
+    const existing = current.guideState ?? {
+      active: false, dismissed: false, template: 'en' as const,
+      step1Done: false, askedAI: false, nextStepIndex: 0,
+    };
+    // Merge only known fields
+    const updated = { ...existing };
+    if (typeof patch.dismissed === 'boolean') updated.dismissed = patch.dismissed;
+    if (typeof patch.step1Done === 'boolean') updated.step1Done = patch.step1Done;
+    if (typeof patch.askedAI === 'boolean') updated.askedAI = patch.askedAI;
+    if (typeof patch.nextStepIndex === 'number' && patch.nextStepIndex >= 0) updated.nextStepIndex = patch.nextStepIndex;
+    if (typeof patch.active === 'boolean') updated.active = patch.active;
+
+    writeSettings({ ...current, guideState: updated });
+    return NextResponse.json({ ok: true, guideState: updated });
+  } catch (e) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : String(e) },
+      { status: 500 },
+    );
+  }
+}

package/app/app/globals.css

@@ -288,6 +288,7 @@ body {
 /* Micro type scale: text-2xs = 10px (between nothing and text-xs 12px) */
 @layer utilities {
   .text-2xs { font-size: 10px; line-height: 1.4; }
+  .animate-spin-slow { animation: spin 3s linear infinite; }
 }
 
 /* Hide scrollbar but keep scroll functionality */

package/app/components/AskFab.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { usePathname } from 'next/navigation';
 import { Sparkles } from 'lucide-react';
 import AskModal from './AskModal';
+import { useAskModal } from '@/hooks/useAskModal';
 
 export default function AskFab() {
   const [open, setOpen] = useState(false);
@@ -12,10 +13,49 @@ export default function AskFab() {
     ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
     : undefined;
 
+  // Listen to useAskModal store for cross-component open requests (e.g. from GuideCard)
+  const askModal = useAskModal();
+  const [initialMessage, setInitialMessage] = useState('');
+  const [openSource, setOpenSource] = useState<'user' | 'guide' | 'guide-next'>('user');
+
+  useEffect(() => {
+    if (askModal.open) {
+      setInitialMessage(askModal.initialMessage);
+      setOpenSource(askModal.source);
+      setOpen(true);
+      askModal.close(); // Reset store state after consuming
+    }
+  }, [askModal.open, askModal.initialMessage, askModal.source, askModal.close]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setInitialMessage('');
+    setOpenSource('user');
+  }, []);
+
+  // Dispatch correct PATCH based on how the modal was opened
+  const handleFirstMessage = useCallback(() => {
+    const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
+
+    if (openSource === 'guide') {
+      // Task ② completion: mark askedAI
+      fetch('/api/setup', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ guideState: { askedAI: true } }),
+      }).then(notifyGuide).catch(() => {});
+    } else if (openSource === 'guide-next') {
+      // Next-step advancement: GuideCard already PATCHed nextStepIndex optimistically.
+      // Just notify GuideCard to re-fetch for consistency; no additional PATCH needed.
+      notifyGuide();
+    }
+    // For 'user' source: no guide action needed
+  }, [openSource]);
+
   return (
     <>
       <button
-        onClick={() => setOpen(true)}
+        onClick={() => { setInitialMessage(''); setOpenSource('user'); setOpen(true); }}
         className="
           group
           fixed z-40
@@ -53,7 +93,13 @@ export default function AskFab() {
         </span>
       </button>
 
-      <AskModal open={open} onClose={() => setOpen(false)} currentFile={currentFile} />
+      <AskModal
+        open={open}
+        onClose={handleClose}
+        currentFile={currentFile}
+        initialMessage={initialMessage}
+        onFirstMessage={handleFirstMessage}
+      />
     </>
   );
 }

package/app/components/AskModal.tsx

@@ -17,11 +17,14 @@ interface AskModalProps {
   open: boolean;
   onClose: () => void;
   currentFile?: string;
+  initialMessage?: string;
+  onFirstMessage?: () => void;
 }
 
-export default function AskModal({ open, onClose, currentFile }: AskModalProps) {
+export default function AskModal({ open, onClose, currentFile, initialMessage, onFirstMessage }: AskModalProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const abortRef = useRef<AbortController | null>(null);
+  const firstMessageFired = useRef(false);
   const { t } = useLocale();
 
   const [input, setInput] = useState('');
@@ -43,7 +46,8 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
         if (cancelled) return;
         await session.initSessions();
       })();
-      setInput('');
+      setInput(initialMessage || '');
+      firstMessageFired.current = false;
       setAttachedFiles(currentFile ? [currentFile] : []);
       upload.clearAttachments();
       mention.resetMention();
@@ -119,6 +123,11 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
     const requestMessages = [...session.messages, userMsg];
     session.setMessages([...requestMessages, { role: 'assistant', content: '' }]);
     setInput('');
+    // Notify guide card on first user message (ref prevents duplicate fires during re-render)
+    if (onFirstMessage && !firstMessageFired.current) {
+      firstMessageFired.current = true;
+      onFirstMessage();
+    }
     setAttachedFiles(currentFile ? [currentFile] : []);
     setIsLoading(true);
     setLoadingPhase('connecting');

package/app/components/GuideCard.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { X, Sparkles, FolderOpen, MessageCircle, RefreshCw, Check, ChevronRight } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { openAskModal } from '@/hooks/useAskModal';
+import type { GuideState } from '@/lib/settings';
+
+const DIR_ICONS: Record<string, string> = {
+  profile: '👤', notes: '📝', connections: '🔗',
+  workflows: '🔄', resources: '📚', projects: '🚀',
+};
+
+const EMPTY_FILES = ['INSTRUCTION.md', 'README.md', 'CONFIG.json'];
+
+interface GuideCardProps {
+  /** Called when user clicks a file/dir to open it in FileView */
+  onNavigate?: (path: string) => void;
+}
+
+export default function GuideCard({ onNavigate }: GuideCardProps) {
+  const { t } = useLocale();
+  const g = t.guide;
+
+  const [guideState, setGuideState] = useState<GuideState | null>(null);
+  const [expanded, setExpanded] = useState<'kb' | 'ai' | 'sync' | null>(null);
+  const [isFirstVisit, setIsFirstVisit] = useState(false);
+  const [browsedCount, setBrowsedCount] = useState(0);
+
+  // Fetch guide state from backend
+  const fetchGuideState = useCallback(() => {
+    fetch('/api/setup')
+      .then(r => r.json())
+      .then(data => {
+        const gs = data.guideState;
+        if (gs?.active && !gs.dismissed) {
+          setGuideState(gs);
+          if (gs.step1Done) setBrowsedCount(1);
+        } else {
+          // Guide inactive or dismissed — clear local state
+          setGuideState(null);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    fetchGuideState();
+
+    // ?welcome=1 → first visit, auto-expand explore task
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('welcome') === '1') {
+      setIsFirstVisit(true);
+      const url = new URL(window.location.href);
+      url.searchParams.delete('welcome');
+      window.history.replaceState({}, '', url.pathname + (url.search || ''));
+    }
+
+    // Re-fetch when guide state is updated (e.g. after AskFab patches askedAI)
+    const handleGuideUpdate = () => fetchGuideState();
+    window.addEventListener('focus', handleGuideUpdate);
+    window.addEventListener('guide-state-updated', handleGuideUpdate);
+    return () => {
+      window.removeEventListener('focus', handleGuideUpdate);
+      window.removeEventListener('guide-state-updated', handleGuideUpdate);
+    };
+  }, [fetchGuideState]);
+
+  // Auto-expand KB task on first visit
+  useEffect(() => {
+    if (isFirstVisit && guideState && !guideState.step1Done) {
+      setExpanded('kb');
+    }
+  }, [isFirstVisit, guideState]);
+
+  // Patch guideState to backend
+  const patchGuide = useCallback((patch: Partial<GuideState>) => {
+    setGuideState(prev => prev ? { ...prev, ...patch } : prev);
+    fetch('/api/setup', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ guideState: patch }),
+    }).catch(() => {});
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    patchGuide({ dismissed: true });
+    setGuideState(null);
+  }, [patchGuide]);
+
+  const handleFileOpen = useCallback((path: string) => {
+    onNavigate?.(path);
+    if (browsedCount === 0) {
+      setBrowsedCount(1);
+      patchGuide({ step1Done: true });
+      // Collapse after a beat
+      setTimeout(() => setExpanded(null), 300);
+    }
+  }, [browsedCount, patchGuide, onNavigate]);
+
+  const handleSkipKB = useCallback(() => {
+    setBrowsedCount(1);
+    patchGuide({ step1Done: true });
+    setExpanded(null);
+  }, [patchGuide]);
+
+  const handleStartAI = useCallback(() => {
+    const gs = guideState;
+    const isEmpty = gs?.template === 'empty';
+    const prompt = isEmpty ? g.ai.promptEmpty : g.ai.prompt;
+    openAskModal(prompt, 'guide');
+    // Don't optimistically set askedAI here — wait until user actually sends a message
+    // AskFab.onFirstMessage will PATCH askedAI:true
+  }, [guideState, g]);
+
+  const handleNextStepClick = useCallback(() => {
+    if (!guideState) return;
+    const idx = guideState.nextStepIndex;
+    const steps = g.done.steps;
+    if (idx < steps.length) {
+      openAskModal(steps[idx].prompt, 'guide-next');
+      // Optimistic local update — AskFab will persist to backend on first message
+      patchGuide({ nextStepIndex: idx + 1 });
+    }
+  }, [guideState, g, patchGuide]);
+
+  const handleSyncClick = useCallback(() => {
+    // Dispatch ⌘, to open Settings modal
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: ',', metaKey: true, bubbles: true }));
+  }, []);
+
+  // Auto-dismiss final state after 8 seconds
+  const autoDismissRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const step1Done_ = guideState?.step1Done;
+  const step2Done_ = guideState?.askedAI;
+  const nextIdx_ = guideState?.nextStepIndex ?? 0;
+  const allDone_ = step1Done_ && step2Done_;
+  const allNextDone_ = allDone_ && nextIdx_ >= g.done.steps.length;
+
+  useEffect(() => {
+    if (allNextDone_) {
+      autoDismissRef.current = setTimeout(() => handleDismiss(), 8000);
+    }
+    return () => { if (autoDismissRef.current) clearTimeout(autoDismissRef.current); };
+  }, [allNextDone_, handleDismiss]);
+
+  // Don't render if no active guide
+  if (!guideState) return null;
+
+  const step1Done = guideState.step1Done;
+  const step2Done = guideState.askedAI;
+  const allDone = step1Done && step2Done;
+  const nextIdx = guideState.nextStepIndex;
+  const nextSteps = g.done.steps;
+  const allNextDone = nextIdx >= nextSteps.length;
+  const isEmptyTemplate = guideState.template === 'empty';
+
+  // After all next-steps done → final state (auto-dismisses after 8s)
+  if (allDone && allNextDone) {
+    return (
+      <div className="mb-6 rounded-xl border px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300"
+        style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
+        <Sparkles size={16} className="animate-spin-slow" style={{ color: 'var(--amber)' }} />
+        <span className="text-sm font-semibold flex-1" style={{ color: 'var(--foreground)' }}>
+          ✨ {g.done.titleFinal}
+        </span>
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
+          style={{ color: 'var(--muted-foreground)' }}>
+          <X size={14} />
+        </button>
+      </div>
+    );
+  }
+
+  // Collapsed done state with next-step prompts
+  if (allDone) {
+    const step = nextSteps[nextIdx];
+    return (
+      <div className="mb-6 rounded-xl border px-5 py-4 animate-in fade-in duration-300"
+        style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
+        <div className="flex items-center gap-3">
+          <Sparkles size={16} style={{ color: 'var(--amber)' }} />
+          <span className="text-sm font-semibold flex-1" style={{ color: 'var(--foreground)' }}>
+            🎉 {g.done.title}
+          </span>
+          <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
+            style={{ color: 'var(--muted-foreground)' }}>
+            <X size={14} />
+          </button>
+        </div>
+        {step && (
+          <button
+            onClick={handleNextStepClick}
+            className="mt-3 flex items-center gap-2 text-sm transition-colors hover:opacity-80 cursor-pointer animate-in fade-in slide-in-from-left-2 duration-300"
+            style={{ color: 'var(--amber)' }}
+          >
+            <ChevronRight size={14} />
+            <span>{step.hint}</span>
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // Main guide card with 3 tasks
+  return (
+    <div className="mb-6 rounded-xl border overflow-hidden"
+      style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
+
+      {/* Header */}
+      <div className="flex items-center gap-3 px-5 pt-4 pb-2">
+        <Sparkles size={16} style={{ color: 'var(--amber)' }} />
+        <span className="text-sm font-semibold flex-1 font-display" style={{ color: 'var(--foreground)' }}>
+          {g.title}
+        </span>
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
+          style={{ color: 'var(--muted-foreground)' }}>
+          <X size={14} />
+        </button>
+      </div>
+
+      {/* Task cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 px-5 py-3">
+        {/* ① Explore KB */}
+        <TaskCard
+          icon={<FolderOpen size={16} />}
+          title={g.kb.title}
+          cta={g.kb.cta}
+          done={step1Done}
+          active={expanded === 'kb'}
+          onClick={() => step1Done ? null : setExpanded(expanded === 'kb' ? null : 'kb')}
+        />
+        {/* ② Chat with AI */}
+        <TaskCard
+          icon={<MessageCircle size={16} />}
+          title={g.ai.title}
+          cta={g.ai.cta}
+          done={step2Done}
+          active={expanded === 'ai'}
+          onClick={() => {
+            if (!step2Done) handleStartAI();
+          }}
+        />
+        {/* ③ Sync (optional) */}
+        <TaskCard
+          icon={<RefreshCw size={16} />}
+          title={g.sync.title}
+          cta={g.sync.cta}
+          done={false}
+          optional={g.sync.optional}
+          active={false}
+          onClick={handleSyncClick}
+        />
+      </div>
+
+      {/* Expanded content: Explore KB */}
+      {expanded === 'kb' && !step1Done && (
+        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
+          <div className="rounded-lg border p-4" style={{ background: 'var(--card)', borderColor: 'var(--border)' }}>
+            <p className="text-xs mb-3" style={{ color: 'var(--muted-foreground)' }}>
+              {isEmptyTemplate ? g.kb.emptyDesc : g.kb.fullDesc}
+            </p>
+
+            {isEmptyTemplate ? (
+              <div className="flex flex-col gap-1.5">
+                {EMPTY_FILES.map(file => (
+                  <button key={file} onClick={() => handleFileOpen(file)}
+                    className="text-left text-xs px-3 py-2 rounded-lg border transition-colors hover:border-amber-500/30 hover:bg-muted/50"
+                    style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                    📄 {(g.kb.emptyFiles as Record<string, string>)[file.split('.')[0].toLowerCase()] || file}
+                  </button>
+                ))}
+                <p className="text-xs mt-2" style={{ color: 'var(--muted-foreground)', opacity: 0.7 }}>
+                  {g.kb.emptyHint}
+                </p>
+              </div>
+            ) : (
+              <>
+                <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
+                  {Object.entries(DIR_ICONS).map(([key, icon]) => (
+                    <button key={key} onClick={() => handleFileOpen(key.charAt(0).toUpperCase() + key.slice(1))}
+                      className="text-left text-xs px-3 py-2 rounded-lg border transition-colors hover:border-amber-500/30 hover:bg-muted/50"
+                      style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                      <span className="mr-1.5">{icon}</span>
+                      <span className="capitalize">{key}</span>
+                      <span className="block text-2xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
+                        {(g.kb.dirs as Record<string, string>)[key]}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+                <p className="text-xs mt-3" style={{ color: 'var(--amber)' }}>
+                  💡 {g.kb.instructionHint}
+                </p>
+              </>
+            )}
+
+            <div className="flex items-center justify-between mt-3 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
+              <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+                {g.kb.progress(browsedCount)}
+              </span>
+              <button onClick={handleSkipKB}
+                className="text-xs px-3 py-1 rounded-lg transition-colors hover:bg-muted"
+                style={{ color: 'var(--muted-foreground)' }}>
+                {g.skip}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Expose callback for AskModal integration
+export { type GuideCardProps };
+
+// Reusable sub-component
+function TaskCard({ icon, title, cta, done, active, optional, onClick }: {
+  icon: React.ReactNode;
+  title: string;
+  cta: string;
+  done: boolean;
+  active: boolean;
+  optional?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={done}
+      className={`
+        flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-center
+        transition-all duration-150
+        ${done ? 'opacity-60' : 'hover:border-amber-500/30 hover:bg-muted/50 cursor-pointer'}
+        ${active ? 'border-amber-500/40 bg-muted/50' : ''}
+      `}
+      style={{ borderColor: done || active ? 'var(--amber)' : 'var(--border)' }}
+    >
+      <span
+        className={done ? 'animate-in zoom-in-50 duration-300' : ''}
+        style={{ color: done ? 'var(--success)' : 'var(--amber)' }}
+      >
+        {done ? <Check size={16} /> : icon}
+      </span>
+      <span className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>
+        {title}
+      </span>
+      {optional && (
+        <span className="text-2xs px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+          {optional}
+        </span>
+      )}
+      {!done && !optional && (
+        <span className="text-2xs" style={{ color: 'var(--amber)' }}>
+          {cta} →
+        </span>
+      )}
+    </button>
+  );
+}

package/app/components/HomeContent.tsx

@@ -8,7 +8,7 @@ import { encodePath, relativeTime } from '@/lib/utils';
 import { getAllRenderers } from '@/lib/renderers/registry';
 import '@/lib/renderers/index'; // registers all renderers
 import OnboardingView from './OnboardingView';
-import WelcomeBanner from './WelcomeBanner';
+import GuideCard from './GuideCard';
 
 interface RecentFile {
   path: string;
@@ -70,7 +70,7 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
 
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-12">
-      <WelcomeBanner />
+      <GuideCard onNavigate={(path) => { window.location.href = `/view/${encodeURIComponent(path)}`; }} />
       {/* Hero */}
       <div className="mb-10">
         <div className="flex items-center gap-2 mb-3">

package/app/components/ask/ToolCallBlock.tsx

@@ -41,7 +41,8 @@ function formatInput(input: unknown): string {
   return parts.join(', ');
 }
 
-function truncateOutput(output: string, maxLen = 200): string {
+function truncateOutput(output: string | undefined, maxLen = 200): string {
+  if (!output) return '';
   if (output.length <= maxLen) return output;
   return output.slice(0, maxLen) + '…';
 }