@geminilight/mindos 0.5.11 → 0.5.13

package/app/components/AskModal.tsx

@@ -11,6 +11,7 @@ import MessageList from '@/components/ask/MessageList';
 import MentionPopover from '@/components/ask/MentionPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
+import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
 
 interface AskModalProps {
   open: boolean;
@@ -27,7 +28,6 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
   const [isLoading, setIsLoading] = useState(false);
   const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
   const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
-  const [maxSteps, setMaxSteps] = useState(20);
   const [showHistory, setShowHistory] = useState(false);
 
   const session = useAskSession(currentFile);
@@ -135,7 +135,6 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
           currentFile,
           attachedFiles,
           uploadedFiles: upload.localAttachments,
-          maxSteps,
         }),
         signal: controller.signal,
       });
@@ -151,25 +150,22 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
 
       if (!res.body) throw new Error('No response body');
 
-      const reader = res.body.getReader();
-      const decoder = new TextDecoder();
-      let assistantContent = '';
       setLoadingPhase('thinking');
 
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        const chunk = decoder.decode(value, { stream: true });
-        if (chunk) setLoadingPhase('streaming');
-        assistantContent += chunk;
-        session.setMessages(prev => {
-          const updated = [...prev];
-          updated[updated.length - 1] = { role: 'assistant', content: assistantContent };
-          return updated;
-        });
-      }
+      const finalMessage = await consumeUIMessageStream(
+        res.body,
+        (msg) => {
+          setLoadingPhase('streaming');
+          session.setMessages(prev => {
+            const updated = [...prev];
+            updated[updated.length - 1] = msg;
+            return updated;
+          });
+        },
+        controller.signal,
+      );
 
-      if (!assistantContent.trim()) {
+      if (!finalMessage.content.trim() && (!finalMessage.parts || finalMessage.parts.length === 0)) {
         session.setMessages(prev => {
           const updated = [...prev];
           updated[updated.length - 1] = { role: 'assistant', content: `__error__${t.ask.errorNoResponse}` };
@@ -181,8 +177,12 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
         session.setMessages(prev => {
           const updated = [...prev];
           const lastIdx = updated.length - 1;
-          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant' && !updated[lastIdx].content.trim()) {
-            updated[lastIdx] = { role: 'assistant', content: `__error__${t.ask.stopped}` };
+          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant') {
+            const last = updated[lastIdx];
+            const hasContent = last.content.trim() || (last.parts && last.parts.length > 0);
+            if (!hasContent) {
+              updated[lastIdx] = { role: 'assistant', content: `__error__${t.ask.stopped}` };
+            }
           }
           return updated;
         });
@@ -191,9 +191,13 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
         session.setMessages(prev => {
           const updated = [...prev];
           const lastIdx = updated.length - 1;
-          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant' && !updated[lastIdx].content.trim()) {
-            updated[lastIdx] = { role: 'assistant', content: `__error__${errMsg}` };
-            return updated;
+          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant') {
+            const last = updated[lastIdx];
+            const hasContent = last.content.trim() || (last.parts && last.parts.length > 0);
+            if (!hasContent) {
+              updated[lastIdx] = { role: 'assistant', content: `__error__${errMsg}` };
+              return updated;
+            }
           }
           return [...updated, { role: 'assistant', content: `__error__${errMsg}` }];
         });
@@ -202,7 +206,7 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
       setIsLoading(false);
       abortRef.current = null;
     }
-  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, maxSteps, t.ask.errorNoResponse, t.ask.stopped]);
+  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, t.ask.errorNoResponse, t.ask.stopped]);
 
   const handleResetSession = useCallback(() => {
     if (isLoading) return;
@@ -382,14 +386,6 @@ export default function AskModal({ open, onClose, currentFile }: AskModalProps)
         <div className="hidden md:flex px-4 pb-2 items-center gap-3 text-xs text-muted-foreground/50 shrink-0">
           <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
           <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
-          <span className="inline-flex items-center gap-1">
-            <span>Agent steps</span>
-            <select value={maxSteps} onChange={(e) => setMaxSteps(Number(e.target.value))} disabled={isLoading} className="bg-transparent border border-border rounded px-1.5 py-0.5 text-xs text-foreground">
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={30}>30</option>
-            </select>
-          </span>
           <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
         </div>
       </div>

package/app/components/SettingsModal.tsx

@@ -6,7 +6,7 @@ import { useLocale } from '@/lib/LocaleContext';
 import { getAllRenderers, loadDisabledState, isRendererEnabled } from '@/lib/renderers/registry';
 import { apiFetch } from '@/lib/api';
 import '@/lib/renderers/index';
-import type { AiSettings, SettingsData, Tab } from './settings/types';
+import type { AiSettings, AgentSettings, SettingsData, Tab } from './settings/types';
 import { FONTS } from './settings/types';
 import { AiTab } from './settings/AiTab';
 import { AppearanceTab } from './settings/AppearanceTab';
@@ -88,7 +88,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
       await apiFetch('/api/settings', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: data.ai, mindRoot: data.mindRoot, webPassword: data.webPassword, authToken: data.authToken }),
+        body: JSON.stringify({ ai: data.ai, agent: data.agent, mindRoot: data.mindRoot, webPassword: data.webPassword, authToken: data.authToken }),
       });
       setStatus('saved');
       setTimeout(() => setStatus('idle'), 2500);
@@ -104,6 +104,10 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
   }, []);
 
+  const updateAgent = useCallback((patch: Partial<AgentSettings>) => {
+    setData(d => d ? { ...d, agent: { ...(d.agent ?? {}), ...patch } } : d);
+  }, []);
+
   const restoreFromEnv = useCallback(async () => {
     if (!data) return;
     const defaults: AiSettings = {
@@ -198,7 +202,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
             </div>
           ) : (
             <>
-              {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} t={t} />}
+              {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} t={t} />}
               {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
               {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
               {tab === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}

package/app/components/ask/MessageList.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { useRef, useEffect } from 'react';
-import { Sparkles, Loader2, AlertCircle } from 'lucide-react';
+import { Sparkles, Loader2, AlertCircle, Wrench } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Message } from '@/lib/types';
+import ToolCallBlock from './ToolCallBlock';
+import ThinkingBlock from './ThinkingBlock';
 
 function AssistantMessage({ content, isStreaming }: { content: string; isStreaming: boolean }) {
   return (
@@ -28,6 +30,61 @@ function AssistantMessage({ content, isStreaming }: { content: string; isStreami
   );
 }
 
+function AssistantMessageWithParts({ message, isStreaming }: { message: Message; isStreaming: boolean }) {
+  const parts = message.parts;
+  if (!parts || parts.length === 0) {
+    // Fallback to plain text rendering
+    return message.content ? (
+      <AssistantMessage content={message.content} isStreaming={isStreaming} />
+    ) : null;
+  }
+
+  // Check if the last part is a running tool call — show a spinner after it
+  const lastPart = parts[parts.length - 1];
+  const showTrailingSpinner = isStreaming && lastPart.type === 'tool-call' && (lastPart.state === 'running' || lastPart.state === 'pending');
+
+  return (
+    <div>
+      {parts.map((part, idx) => {
+        if (part.type === 'reasoning') {
+          const isLastPart = isStreaming && idx === parts.length - 1;
+          return <ThinkingBlock key={`reasoning-${idx}`} text={part.text} isStreaming={isLastPart} />;
+        }
+        if (part.type === 'text') {
+          const isLastTextPart = isStreaming && idx === parts.length - 1;
+          return part.text ? (
+            <AssistantMessage key={idx} content={part.text} isStreaming={isLastTextPart} />
+          ) : null;
+        }
+        if (part.type === 'tool-call') {
+          return <ToolCallBlock key={part.toolCallId} part={part} />;
+        }
+        return null;
+      })}
+      {showTrailingSpinner && (
+        <div className="flex items-center gap-2 py-1 mt-1">
+          <Loader2 size={12} className="animate-spin" style={{ color: 'var(--amber)' }} />
+          <span className="text-xs text-muted-foreground animate-pulse">Executing tool…</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StepCounter({ parts }: { parts: Message['parts'] }) {
+  if (!parts) return null;
+  const toolCalls = parts.filter(p => p.type === 'tool-call');
+  if (toolCalls.length === 0) return null;
+  const lastToolCall = toolCalls[toolCalls.length - 1];
+  const toolLabel = lastToolCall.type === 'tool-call' ? lastToolCall.toolName : '';
+  return (
+    <div className="flex items-center gap-1.5 mt-1.5 text-xs text-muted-foreground/70">
+      <Wrench size={10} />
+      <span>Step {toolCalls.length}{toolLabel ? ` — ${toolLabel}` : ''}</span>
+    </div>
+  );
+}
+
 interface MessageListProps {
   messages: Message[];
   isLoading: boolean;
@@ -102,8 +159,13 @@ export default function MessageList({
             </div>
           ) : (
             <div className="max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
-              {m.content ? (
-                <AssistantMessage content={m.content} isStreaming={isLoading && i === messages.length - 1} />
+              {(m.parts && m.parts.length > 0) || m.content ? (
+                <>
+                  <AssistantMessageWithParts message={m} isStreaming={isLoading && i === messages.length - 1} />
+                  {isLoading && i === messages.length - 1 && (
+                    <StepCounter parts={m.parts} />
+                  )}
+                </>
               ) : isLoading && i === messages.length - 1 ? (
                 <div className="flex items-center gap-2 py-1">
                   <Loader2 size={14} className="animate-spin" style={{ color: 'var(--amber)' }} />

package/app/components/ask/ThinkingBlock.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Brain } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface ThinkingBlockProps {
+  text: string;
+  isStreaming?: boolean;
+}
+
+export default function ThinkingBlock({ text, isStreaming }: ThinkingBlockProps) {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useLocale();
+
+  if (!text && !isStreaming) return null;
+
+  return (
+    <div className="my-1 rounded-md border border-border/40 bg-muted/20 text-xs">
+      <button
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/30 transition-colors rounded-md"
+      >
+        {expanded ? (
+          <ChevronDown size={12} className="shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight size={12} className="shrink-0 text-muted-foreground" />
+        )}
+        <Brain size={12} className="shrink-0 text-muted-foreground" />
+        <span className="text-muted-foreground font-medium">
+          {t.ask.thinkingLabel}
+          {isStreaming && !expanded && (
+            <span className="ml-1 animate-pulse">...</span>
+          )}
+        </span>
+        {!expanded && text && (
+          <span className="text-muted-foreground/60 truncate flex-1 ml-1">
+            {text.slice(0, 80)}{text.length > 80 ? '...' : ''}
+          </span>
+        )}
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2 pt-0.5 border-t border-border/30">
+          <div className="text-muted-foreground whitespace-pre-wrap leading-relaxed">
+            {text}
+            {isStreaming && (
+              <span className="inline-block w-1 h-3 bg-muted-foreground/40 ml-0.5 align-middle animate-pulse rounded-sm" />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/ask/ToolCallBlock.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Loader2, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react';
+import type { ToolCallPart } from '@/lib/types';
+
+const DESTRUCTIVE_TOOLS = new Set(['delete_file', 'move_file', 'rename_file', 'write_file']);
+
+const TOOL_ICONS: Record<string, string> = {
+  search: '🔍',
+  list_files: '📂',
+  read_file: '📖',
+  write_file: '✏️',
+  create_file: '📄',
+  append_to_file: '📝',
+  insert_after_heading: '📌',
+  update_section: '✏️',
+  delete_file: '🗑️',
+  rename_file: '📝',
+  move_file: '📦',
+  get_backlinks: '🔗',
+  get_history: '📜',
+  get_file_at_version: '⏪',
+  get_recent: '🕐',
+  append_csv: '📊',
+};
+
+function formatInput(input: unknown): string {
+  if (!input || typeof input !== 'object') return String(input ?? '');
+  const obj = input as Record<string, unknown>;
+  const parts: string[] = [];
+  for (const val of Object.values(obj)) {
+    if (typeof val === 'string') {
+      parts.push(val.length > 60 ? `${val.slice(0, 60)}…` : val);
+    } else if (Array.isArray(val)) {
+      parts.push(`[${val.length} items]`);
+    } else if (val !== undefined && val !== null) {
+      parts.push(String(val));
+    }
+  }
+  return parts.join(', ');
+}
+
+function truncateOutput(output: string, maxLen = 200): string {
+  if (output.length <= maxLen) return output;
+  return output.slice(0, maxLen) + '…';
+}
+
+export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
+  const [expanded, setExpanded] = useState(false);
+  const icon = TOOL_ICONS[part.toolName] ?? '🔧';
+  const inputSummary = formatInput(part.input);
+  const isDestructive = DESTRUCTIVE_TOOLS.has(part.toolName);
+
+  return (
+    <div className={`my-1 rounded-md border text-xs font-mono ${
+      isDestructive
+        ? 'border-amber-500/30 bg-amber-500/5'
+        : 'border-border/50 bg-muted/30'
+    }`}>
+      <button
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/50 transition-colors rounded-md"
+      >
+        {expanded ? <ChevronDown size={12} className="shrink-0 text-muted-foreground" /> : <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
+        {isDestructive && <AlertTriangle size={11} className="shrink-0 text-amber-500" />}
+        <span>{icon}</span>
+        <span className={`font-medium ${isDestructive ? 'text-amber-600 dark:text-amber-400' : 'text-foreground'}`}>{part.toolName}</span>
+        <span className="text-muted-foreground truncate flex-1">({inputSummary})</span>
+        <span className="shrink-0 ml-auto">
+          {part.state === 'pending' || part.state === 'running' ? (
+            <Loader2 size={12} className="animate-spin text-amber-500" />
+          ) : part.state === 'done' ? (
+            <CheckCircle2 size={12} className="text-success" />
+          ) : (
+            <XCircle size={12} className="text-error" />
+          )}
+        </span>
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2 pt-0.5 border-t border-border/30 space-y-1">
+          <div className="text-muted-foreground">
+            <span className="font-semibold">Input: </span>
+            <span className="break-all whitespace-pre-wrap">{JSON.stringify(part.input, null, 2)}</span>
+          </div>
+          {part.output !== undefined && (
+            <div className="text-muted-foreground">
+              <span className="font-semibold">Output: </span>
+              <span className="break-all whitespace-pre-wrap">{truncateOutput(part.output)}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/settings/AiTab.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
-import type { AiSettings, ProviderConfig, SettingsData } from './types';
+import type { AiSettings, AgentSettings, ProviderConfig, SettingsData } from './types';
 import { Field, Select, Input, EnvBadge, ApiKeyInput } from './Primitives';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
@@ -28,10 +28,11 @@ function errorMessage(t: any, code?: ErrorCode): string {
 interface AiTabProps {
   data: SettingsData;
   updateAi: (patch: Partial<AiSettings>) => void;
+  updateAgent: (patch: Partial<AgentSettings>) => void;
   t: any;
 }
 
-export function AiTab({ data, updateAi, t }: AiTabProps) {
+export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   const env = data.envOverrides ?? {};
   const envVal = data.envValues ?? {};
   const provider = data.ai.provider;
@@ -224,6 +225,79 @@ export function AiTab({ data, updateAi, t }: AiTabProps) {
           <span>{t.settings.ai.envHint}</span>
         </div>
       )}
+
+      {/* Agent Behavior */}
+      <div className="pt-3 border-t border-border">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">{t.settings.agent.title}</h3>
+
+        <div className="space-y-4">
+          <Field label={t.settings.agent.maxSteps} hint={t.settings.agent.maxStepsHint}>
+            <Select
+              value={String(data.agent?.maxSteps ?? 20)}
+              onChange={e => updateAgent({ maxSteps: Number(e.target.value) })}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+              <option value="25">25</option>
+              <option value="30">30</option>
+            </Select>
+          </Field>
+
+          <Field label={t.settings.agent.contextStrategy} hint={t.settings.agent.contextStrategyHint}>
+            <Select
+              value={data.agent?.contextStrategy ?? 'auto'}
+              onChange={e => updateAgent({ contextStrategy: e.target.value as 'auto' | 'off' })}
+            >
+              <option value="auto">{t.settings.agent.contextStrategyAuto}</option>
+              <option value="off">{t.settings.agent.contextStrategyOff}</option>
+            </Select>
+          </Field>
+
+          {provider === 'anthropic' && (
+            <>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm text-foreground">{t.settings.agent.thinking}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">{t.settings.agent.thinkingHint}</div>
+                </div>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={data.agent?.enableThinking ?? false}
+                  onClick={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })}
+                  className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                    data.agent?.enableThinking ? 'bg-amber-500' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+                      data.agent?.enableThinking ? 'translate-x-4' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {data.agent?.enableThinking && (
+                <Field label={t.settings.agent.thinkingBudget} hint={t.settings.agent.thinkingBudgetHint}>
+                  <Input
+                    type="number"
+                    value={String(data.agent?.thinkingBudget ?? 5000)}
+                    onChange={e => {
+                      const v = parseInt(e.target.value, 10);
+                      if (!isNaN(v)) updateAgent({ thinkingBudget: Math.max(1000, Math.min(50000, v)) });
+                    }}
+                    min={1000}
+                    max={50000}
+                    step={1000}
+                  />
+                </Field>
+              )}
+            </>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

package/app/components/settings/types.ts

@@ -14,8 +14,16 @@ export interface AiSettings {
   };
 }
 
+export interface AgentSettings {
+  maxSteps?: number;
+  enableThinking?: boolean;
+  thinkingBudget?: number;
+  contextStrategy?: 'auto' | 'off';
+}
+
 export interface SettingsData {
   ai: AiSettings;
+  agent?: AgentSettings;
   mindRoot: string;
   webPassword?: string;
   authToken?: string;   // masked: first-xxxx-••••-last pattern

package/app/components/setup/StepReview.tsx

@@ -7,7 +7,24 @@ import {
 import type { SetupState, SetupMessages, AgentInstallStatus } from './types';
 
 // ─── Restart Block ────────────────────────────────────────────────────────────
-function RestartBlock({ s, newPort }: { s: SetupMessages; newPort: number }) {
+
+/** Restart warning banner — shown in the content area */
+export function RestartBanner({ s }: { s: SetupMessages }) {
+  return (
+    <div className="space-y-2">
+      <div className="p-3 rounded-lg text-sm flex items-center gap-2"
+        style={{ background: 'color-mix(in srgb, var(--amber) 10%, transparent)', color: 'var(--amber)' }}>
+        <AlertTriangle size={14} /> {s.restartRequired}
+      </div>
+      <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+        {s.restartManual} <code className="font-mono">mindos start</code>
+      </p>
+    </div>
+  );
+}
+
+/** Restart button — shown in the bottom navigation bar (same position as Complete/Saving button) */
+export function RestartButton({ s, newPort }: { s: SetupMessages; newPort: number }) {
   const [restarting, setRestarting] = useState(false);
   const [done, setDone] = useState(false);
   const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
@@ -40,34 +57,23 @@ function RestartBlock({ s, newPort }: { s: SetupMessages; newPort: number }) {
 
   if (done) {
     return (
-      <div className="p-3 rounded-lg text-sm flex items-center gap-2"
-        style={{ background: 'color-mix(in srgb, var(--success) 10%, transparent)', color: 'var(--success)' }}>
+      <span className="flex items-center gap-1.5 px-5 py-2 text-sm font-medium rounded-lg"
+        style={{ background: 'color-mix(in srgb, var(--success) 15%, transparent)', color: 'var(--success)' }}>
         <CheckCircle2 size={14} /> {s.restartDone}
-      </div>
+      </span>
     );
   }
 
   return (
-    <div className="space-y-3">
-      <div className="p-3 rounded-lg text-sm flex items-center gap-2"
-        style={{ background: 'color-mix(in srgb, var(--amber) 10%, transparent)', color: 'var(--amber)' }}>
-        <AlertTriangle size={14} /> {s.restartRequired}
-      </div>
-      <div className="flex items-center gap-3">
-        <button
-          type="button"
-          onClick={handleRestart}
-          disabled={restarting}
-          className="flex items-center gap-1.5 px-4 py-2 text-sm rounded-lg transition-colors disabled:opacity-50"
-          style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
-          {restarting ? <Loader2 size={13} className="animate-spin" /> : null}
-          {restarting ? s.restarting : s.restartNow}
-        </button>
-        <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
-          {s.restartManual} <code className="font-mono">mindos start</code>
-        </span>
-      </div>
-    </div>
+    <button
+      type="button"
+      onClick={handleRestart}
+      disabled={restarting}
+      className="flex items-center gap-1.5 px-5 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
+      style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
+      {restarting ? <Loader2 size={13} className="animate-spin" /> : null}
+      {restarting ? s.restarting : s.restartNow}
+    </button>
   );
 }
 
@@ -205,7 +211,7 @@ export default function StepReview({
           {s.completeFailed}: {error}
         </div>
       )}
-      {needsRestart && setupPhase === 'done' && <RestartBlock s={s} newPort={state.webPort} />}
+      {needsRestart && setupPhase === 'done' && <RestartBanner s={s} />}
     </div>
   );
 }

package/app/components/setup/index.tsx

@@ -11,6 +11,7 @@ import StepPorts from './StepPorts';
 import StepSecurity from './StepSecurity';
 import StepAgents from './StepAgents';
 import StepReview from './StepReview';
+import { RestartButton } from './StepReview';
 import StepDots from './StepDots';
 
 // ─── Helpers (shared by handleComplete + retryAgent) ─────────────────────────
@@ -439,14 +440,16 @@ export default function SetupWizard() {
               {s.next} <ChevronRight size={14} />
             </button>
           ) : completed ? (
-            // After completing: show Done link (no restart needed) or nothing (RestartBlock handles it)
-            !needsRestart ? (
+            // After completing: show Done link or Restart button in the same position
+            needsRestart ? (
+              <RestartButton s={s} newPort={state.webPort} />
+            ) : (
               <a href="/?welcome=1"
                 className="flex items-center gap-1 px-5 py-2 text-sm font-medium rounded-lg transition-colors"
                 style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
                 {s.completeDone} &rarr;
               </a>
-            ) : null
+            )
           ) : (
             <button
               onClick={handleComplete}