@geminilight/mindos 0.6.35 → 0.6.37

package/_standalone/components/settings/UpdateTab.tsx

@@ -8,8 +8,10 @@ import { useLocale } from '@/lib/LocaleContext';
 interface MindosDesktopBridge {
   checkUpdate: () => Promise<{ available: boolean; version?: string }>;
   installUpdate: () => Promise<void>;
+  onUpdateAvailable?: (cb: (info: { version?: string }) => void) => () => void;
   onUpdateProgress?: (cb: (progress: { percent: number }) => void) => () => void;
   onUpdateReady?: (cb: () => void) => () => void;
+  onUpdateError?: (cb: (info: { message?: string }) => void) => () => void;
   getAppInfo?: () => Promise<{ version?: string }>;
 }
 
@@ -83,12 +85,26 @@ function DesktopUpdateTab() {
     }).catch((err) => { console.warn("[UpdateTab] getAppInfo failed:", err); });
     handleCheck();
     const cleanups: Array<() => void> = [];
+    if (bridge.onUpdateAvailable) {
+      cleanups.push(bridge.onUpdateAvailable((info) => {
+        setAvailable(true);
+        if (info?.version) setVersion(info.version);
+        // Move to idle so the "Update to vX.Y.Z" button appears
+        setState((prev) => prev === 'checking' ? 'idle' : prev);
+      }));
+    }
     if (bridge.onUpdateProgress) {
       cleanups.push(bridge.onUpdateProgress((p) => setProgress(Math.round(p.percent))));
     }
     if (bridge.onUpdateReady) {
       cleanups.push(bridge.onUpdateReady(() => setState('ready')));
     }
+    if (bridge.onUpdateError) {
+      cleanups.push(bridge.onUpdateError((info) => {
+        setState('error');
+        setErrorMsg(info?.message || 'Update failed. Please try again.');
+      }));
+    }
     return () => cleanups.forEach((fn) => fn());
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/_standalone/components/setup/StepAI.tsx

@@ -1,16 +1,35 @@
 'use client';
 
-import { Brain, Zap, SkipForward, CheckCircle2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { Brain, Zap, SkipForward, CheckCircle2, ChevronDown, ChevronRight, Copy } from 'lucide-react';
 import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
-import type { SetupState, SetupMessages } from './types';
+import type { SetupState, SetupMessages, PortStatus } from './types';
+import StepPorts from './StepPorts';
 
 export interface StepAIProps {
   state: SetupState;
   update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
   s: SetupMessages;
+  onCopyToken: () => void;
+  // Port props (embedded in Advanced section)
+  webPortStatus: PortStatus;
+  mcpPortStatus: PortStatus;
+  setWebPortStatus: (s: PortStatus) => void;
+  setMcpPortStatus: (s: PortStatus) => void;
+  checkPort: (port: number, which: 'web' | 'mcp') => void;
+  portConflict: boolean;
 }
 
-export default function StepAI({ state, update, s }: StepAIProps) {
+export default function StepAI({ state, update, s, onCopyToken, webPortStatus, mcpPortStatus, setWebPortStatus, setMcpPortStatus, checkPort, portConflict }: StepAIProps) {
+  const [portsOpen, setPortsOpen] = useState(false);
+
+  // Auto-expand Advanced section if port check finds a problem
+  useEffect(() => {
+    if (!portsOpen && (webPortStatus.available === false || mcpPortStatus.available === false || portConflict)) {
+      setPortsOpen(true);
+    }
+  }, [webPortStatus.available, mcpPortStatus.available, portConflict, portsOpen]);
+
   const providers = [
     { id: 'anthropic' as const, icon: <Brain size={18} />, label: 'Anthropic', desc: 'Claude — claude-sonnet-4-6' },
     { id: 'openai' as const, icon: <Zap size={18} />, label: 'OpenAI', desc: 'GPT or any OpenAI-compatible API' },
@@ -70,6 +89,50 @@ export default function StepAI({ state, update, s }: StepAIProps) {
           )}
         </div>
       )}
+
+      {/* Advanced: Port Settings (collapsed) */}
+      <div className="pt-3 mt-1" style={{ borderTop: '1px solid var(--border)' }}>
+        <button
+          type="button"
+          onClick={() => setPortsOpen(!portsOpen)}
+          className="flex items-center gap-1.5 text-xs font-medium"
+          style={{ color: 'var(--muted-foreground)' }}>
+          {portsOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {s.advancedPorts}
+        </button>
+        {portsOpen && (
+          <div className="mt-3 space-y-5">
+            {/* MCP Auth Token (read-only) */}
+            <div className="space-y-1.5">
+              <p className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>
+                🔑 {s.tokenSectionTitle}
+              </p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 truncate text-xs font-mono px-3 py-2 rounded-lg"
+                  style={{ background: 'var(--muted)', color: 'var(--foreground)' }}>
+                  {state.authToken}
+                </code>
+                <button type="button" onClick={onCopyToken}
+                  className="flex items-center gap-1 px-2.5 py-2 text-xs rounded-lg border transition-colors hover:bg-muted shrink-0"
+                  style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                  <Copy size={12} /> {s.copyToken}
+                </button>
+              </div>
+              <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+                {s.tokenSectionHint}
+              </p>
+            </div>
+
+            {/* Port Settings */}
+            <StepPorts
+              state={state} update={update}
+              webPortStatus={webPortStatus} mcpPortStatus={mcpPortStatus}
+              setWebPortStatus={setWebPortStatus} setMcpPortStatus={setMcpPortStatus}
+              checkPort={checkPort} portConflict={portConflict} s={s}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/_standalone/components/setup/StepDots.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { CheckCircle2 } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 
 export interface StepDotsProps {
@@ -7,32 +8,39 @@ export interface StepDotsProps {
   setStep: (s: number) => void;
   stepTitles: readonly string[];
   disabled?: boolean;
+  /** Number of "numbered" steps to show (Confirm step is not numbered) */
+  numberedSteps?: number;
 }
 
-export default function StepDots({ step, setStep, stepTitles, disabled }: StepDotsProps) {
+export default function StepDots({ step, setStep, stepTitles, disabled, numberedSteps }: StepDotsProps) {
   const { t } = useLocale();
+  const count = numberedSteps ?? stepTitles.length;
+  // Only render dots for numbered steps (exclude Confirm)
+  const dotsToShow = stepTitles.slice(0, count);
+  const isConfirmStep = step >= count;
+
   return (
     <div className="flex items-center gap-2 mb-8" role="navigation" aria-label="Setup steps">
-      {stepTitles.map((title: string, i: number) => (
+      {dotsToShow.map((title: string, i: number) => (
         <div key={i} className="flex items-center gap-2">
-          {i > 0 && <div className="w-8 h-px" style={{ background: i <= step ? 'var(--amber)' : 'var(--border)' }} />}
+          {i > 0 && <div className="w-8 h-px" style={{ background: i <= step || isConfirmStep ? 'var(--amber)' : 'var(--border)' }} />}
           <button onClick={() => setStep(i)}
             aria-current={i === step ? 'step' : undefined}
             aria-label={title}
             className="flex flex-col items-center gap-1 p-1 -m-1 disabled:cursor-not-allowed disabled:opacity-60"
-            disabled={disabled || i >= step}
-            title={(disabled || i >= step) ? t.hints.cannotJumpForward : undefined}>
+            disabled={disabled || i > step}
+            title={(disabled || i > step) ? t.hints.cannotJumpForward : undefined}>
             <div
               className="w-6 h-6 rounded-full text-xs font-medium flex items-center justify-center transition-colors"
               style={{
-                background: i <= step ? 'var(--amber)' : 'var(--muted)',
-                color: i <= step ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
-                opacity: i <= step ? 1 : 0.5,
+                background: (i < step || isConfirmStep) ? 'var(--amber)' : i === step ? 'var(--amber)' : 'var(--muted)',
+                color: (i <= step || isConfirmStep) ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
+                opacity: (i <= step || isConfirmStep) ? 1 : 0.5,
               }}>
-              {i + 1}
+              {(i < step || isConfirmStep) ? <CheckCircle2 size={14} /> : i + 1}
             </div>
             <span className="text-[10px] leading-tight hidden sm:inline max-w-[4rem] text-center truncate"
-              style={{ color: i === step ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: i <= step ? 1 : 0.5 }}>
+              style={{ color: (i === step && !isConfirmStep) ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: (i <= step || isConfirmStep) ? 1 : 0.5 }}>
               {title}
             </span>
           </button>

package/_standalone/components/setup/StepKB.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { AlertCircle } from 'lucide-react';
 import { Field } from '@/components/settings/Primitives';
 import type { Messages } from '@/lib/i18n';
 import type { SetupState } from './types';
@@ -26,6 +27,7 @@ export interface StepKBProps {
 
 export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
   const s = t.setup;
+  const [passwordTouched, setPasswordTouched] = useState(false);
   // Build platform-aware placeholder, e.g. /Users/alice/MindOS/mind or C:\Users\alice\MindOS\mind
   // Windows homedir always contains \, e.g. C:\Users\Alice — safe to detect by separator
   const sep = homeDir.includes('\\') ? '\\' : '/';
@@ -232,6 +234,30 @@ export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
         </div>
       </div>
       )}
+
+      {/* ── Security ── */}
+      <div className="pt-2 mt-2" style={{ borderTop: '1px solid var(--border)' }}>
+        <Field label={<>{s.webPassword} <span style={{ color: 'var(--error)' }}>*</span></>} hint={s.webPasswordHint}>
+          <input
+            type="password"
+            value={state.webPassword}
+            onChange={e => { update('webPassword', e.target.value); setPasswordTouched(true); }}
+            onBlur={() => setPasswordTouched(true)}
+            placeholder="••••••••"
+            className="w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+            style={{
+              background: 'var(--input, var(--card))',
+              borderColor: passwordTouched && !state.webPassword.trim() ? 'var(--error)' : 'var(--border)',
+              color: 'var(--foreground)',
+            }}
+          />
+          {passwordTouched && !state.webPassword.trim() && (
+            <p className="text-xs flex items-center gap-1 mt-1" style={{ color: 'var(--error)' }}>
+              <AlertCircle size={11} /> {s.webPasswordRequired}
+            </p>
+          )}
+        </Field>
+      </div>
     </div>
   );
 }

package/_standalone/components/setup/constants.tsx

@@ -7,7 +7,8 @@ export const TEMPLATES: Array<{ id: Template; icon: React.ReactNode; dirs: strin
   { id: 'empty', icon: <FileText size={18} />, dirs: ['README.md', 'CONFIG.json', 'INSTRUCTION.md'] },
 ];
 
-export const TOTAL_STEPS = 6;
+export const TOTAL_STEPS = 4;
 export const STEP_KB = 0;
-export const STEP_PORTS = 2;
-export const STEP_AGENTS = 4;
+export const STEP_AI = 1;
+export const STEP_AGENTS = 2;
+export const STEP_REVIEW = 3;

package/_standalone/lib/i18n/modules/onboarding.ts

@@ -15,7 +15,7 @@ export const onboardingEn = {
     dismiss: 'Dismiss',
   },
   setup: {
-    stepTitles: ['Knowledge Base', 'AI Provider', 'Ports', 'Security', 'Agent Tools', 'Review'],
+    stepTitles: ['Knowledge Base', 'AI Configuration', 'Agent Tools', 'Confirm'],
     // Step 1
     kbPath: 'Knowledge base path',
     kbPathHint: 'Absolute path to your notes directory.',
@@ -56,8 +56,12 @@ export const onboardingEn = {
     generateToken: 'Generate',
     copyToken: 'Copy',
     copiedToken: 'Copied!',
-    webPassword: 'Web UI Password',
-    webPasswordHint: 'Optional. Protect browser access with a password.',
+    webPassword: 'Web Password',
+    webPasswordHint: 'Protect your knowledge base from unauthorized browser access.',
+    webPasswordRequired: 'Password is required to protect your data.',
+    advancedPorts: 'Advanced Settings',
+    tokenSectionTitle: 'MCP Auth Token (auto-generated)',
+    tokenSectionHint: 'Used by AI agents to connect to your MindOS server.',
     // Step 5 — Agent Tools
     agentToolsTitle: 'Agent Tools',
     agentToolsHint: 'Select AI agents to configure with MindOS MCP. Agents marked "not installed" can be configured now — they will work once you install the app.',
@@ -210,7 +214,7 @@ export const onboardingZh = {
     dismiss: '关闭',
   },
   setup: {
-    stepTitles: ['知识库', 'AI 服务商', '端口', '安全', 'Agent 工具', '确认'],
+    stepTitles: ['知识库', 'AI 配置', 'Agent 工具', '确认'],
     // Step 1
     kbPath: '知识库路径',
     kbPathHint: '笔记目录的绝对路径。',
@@ -251,8 +255,12 @@ export const onboardingZh = {
     generateToken: '生成',
     copyToken: '复制',
     copiedToken: '已复制！',
-    webPassword: '网页访问密码',
-    webPasswordHint: '可选。设置后浏览器访问需要登录。',
+    webPassword: '访问密码',
+    webPasswordHint: '保护你的知识库，防止未授权的浏览器访问。',
+    webPasswordRequired: '密码是必填项，用于保护你的数据。',
+    advancedPorts: '高级设置',
+    tokenSectionTitle: 'MCP 认证令牌（已自动生成）',
+    tokenSectionHint: 'AI Agent 连接你的 MindOS 服务器时使用。',
     // Step 5 — Agent Tools
     agentToolsTitle: 'Agent 工具',
     agentToolsHint: '选择要与 MindOS MCP 配置的 AI Agent。标注「未安装」的 agent 可以先行配置，安装应用后即可生效。',

package/app/components/settings/UpdateTab.tsx

@@ -8,8 +8,10 @@ import { useLocale } from '@/lib/LocaleContext';
 interface MindosDesktopBridge {
   checkUpdate: () => Promise<{ available: boolean; version?: string }>;
   installUpdate: () => Promise<void>;
+  onUpdateAvailable?: (cb: (info: { version?: string }) => void) => () => void;
   onUpdateProgress?: (cb: (progress: { percent: number }) => void) => () => void;
   onUpdateReady?: (cb: () => void) => () => void;
+  onUpdateError?: (cb: (info: { message?: string }) => void) => () => void;
   getAppInfo?: () => Promise<{ version?: string }>;
 }
 
@@ -83,12 +85,26 @@ function DesktopUpdateTab() {
     }).catch((err) => { console.warn("[UpdateTab] getAppInfo failed:", err); });
     handleCheck();
     const cleanups: Array<() => void> = [];
+    if (bridge.onUpdateAvailable) {
+      cleanups.push(bridge.onUpdateAvailable((info) => {
+        setAvailable(true);
+        if (info?.version) setVersion(info.version);
+        // Move to idle so the "Update to vX.Y.Z" button appears
+        setState((prev) => prev === 'checking' ? 'idle' : prev);
+      }));
+    }
     if (bridge.onUpdateProgress) {
       cleanups.push(bridge.onUpdateProgress((p) => setProgress(Math.round(p.percent))));
     }
     if (bridge.onUpdateReady) {
       cleanups.push(bridge.onUpdateReady(() => setState('ready')));
     }
+    if (bridge.onUpdateError) {
+      cleanups.push(bridge.onUpdateError((info) => {
+        setState('error');
+        setErrorMsg(info?.message || 'Update failed. Please try again.');
+      }));
+    }
     return () => cleanups.forEach((fn) => fn());
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/app/components/setup/StepAI.tsx

@@ -1,16 +1,35 @@
 'use client';
 
-import { Brain, Zap, SkipForward, CheckCircle2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { Brain, Zap, SkipForward, CheckCircle2, ChevronDown, ChevronRight, Copy } from 'lucide-react';
 import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
-import type { SetupState, SetupMessages } from './types';
+import type { SetupState, SetupMessages, PortStatus } from './types';
+import StepPorts from './StepPorts';
 
 export interface StepAIProps {
   state: SetupState;
   update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
   s: SetupMessages;
+  onCopyToken: () => void;
+  // Port props (embedded in Advanced section)
+  webPortStatus: PortStatus;
+  mcpPortStatus: PortStatus;
+  setWebPortStatus: (s: PortStatus) => void;
+  setMcpPortStatus: (s: PortStatus) => void;
+  checkPort: (port: number, which: 'web' | 'mcp') => void;
+  portConflict: boolean;
 }
 
-export default function StepAI({ state, update, s }: StepAIProps) {
+export default function StepAI({ state, update, s, onCopyToken, webPortStatus, mcpPortStatus, setWebPortStatus, setMcpPortStatus, checkPort, portConflict }: StepAIProps) {
+  const [portsOpen, setPortsOpen] = useState(false);
+
+  // Auto-expand Advanced section if port check finds a problem
+  useEffect(() => {
+    if (!portsOpen && (webPortStatus.available === false || mcpPortStatus.available === false || portConflict)) {
+      setPortsOpen(true);
+    }
+  }, [webPortStatus.available, mcpPortStatus.available, portConflict, portsOpen]);
+
   const providers = [
     { id: 'anthropic' as const, icon: <Brain size={18} />, label: 'Anthropic', desc: 'Claude — claude-sonnet-4-6' },
     { id: 'openai' as const, icon: <Zap size={18} />, label: 'OpenAI', desc: 'GPT or any OpenAI-compatible API' },
@@ -70,6 +89,50 @@ export default function StepAI({ state, update, s }: StepAIProps) {
           )}
         </div>
       )}
+
+      {/* Advanced: Port Settings (collapsed) */}
+      <div className="pt-3 mt-1" style={{ borderTop: '1px solid var(--border)' }}>
+        <button
+          type="button"
+          onClick={() => setPortsOpen(!portsOpen)}
+          className="flex items-center gap-1.5 text-xs font-medium"
+          style={{ color: 'var(--muted-foreground)' }}>
+          {portsOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {s.advancedPorts}
+        </button>
+        {portsOpen && (
+          <div className="mt-3 space-y-5">
+            {/* MCP Auth Token (read-only) */}
+            <div className="space-y-1.5">
+              <p className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>
+                🔑 {s.tokenSectionTitle}
+              </p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 truncate text-xs font-mono px-3 py-2 rounded-lg"
+                  style={{ background: 'var(--muted)', color: 'var(--foreground)' }}>
+                  {state.authToken}
+                </code>
+                <button type="button" onClick={onCopyToken}
+                  className="flex items-center gap-1 px-2.5 py-2 text-xs rounded-lg border transition-colors hover:bg-muted shrink-0"
+                  style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                  <Copy size={12} /> {s.copyToken}
+                </button>
+              </div>
+              <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+                {s.tokenSectionHint}
+              </p>
+            </div>
+
+            {/* Port Settings */}
+            <StepPorts
+              state={state} update={update}
+              webPortStatus={webPortStatus} mcpPortStatus={mcpPortStatus}
+              setWebPortStatus={setWebPortStatus} setMcpPortStatus={setMcpPortStatus}
+              checkPort={checkPort} portConflict={portConflict} s={s}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/app/components/setup/StepDots.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { CheckCircle2 } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 
 export interface StepDotsProps {
@@ -7,32 +8,39 @@ export interface StepDotsProps {
   setStep: (s: number) => void;
   stepTitles: readonly string[];
   disabled?: boolean;
+  /** Number of "numbered" steps to show (Confirm step is not numbered) */
+  numberedSteps?: number;
 }
 
-export default function StepDots({ step, setStep, stepTitles, disabled }: StepDotsProps) {
+export default function StepDots({ step, setStep, stepTitles, disabled, numberedSteps }: StepDotsProps) {
   const { t } = useLocale();
+  const count = numberedSteps ?? stepTitles.length;
+  // Only render dots for numbered steps (exclude Confirm)
+  const dotsToShow = stepTitles.slice(0, count);
+  const isConfirmStep = step >= count;
+
   return (
     <div className="flex items-center gap-2 mb-8" role="navigation" aria-label="Setup steps">
-      {stepTitles.map((title: string, i: number) => (
+      {dotsToShow.map((title: string, i: number) => (
         <div key={i} className="flex items-center gap-2">
-          {i > 0 && <div className="w-8 h-px" style={{ background: i <= step ? 'var(--amber)' : 'var(--border)' }} />}
+          {i > 0 && <div className="w-8 h-px" style={{ background: i <= step || isConfirmStep ? 'var(--amber)' : 'var(--border)' }} />}
           <button onClick={() => setStep(i)}
             aria-current={i === step ? 'step' : undefined}
             aria-label={title}
             className="flex flex-col items-center gap-1 p-1 -m-1 disabled:cursor-not-allowed disabled:opacity-60"
-            disabled={disabled || i >= step}
-            title={(disabled || i >= step) ? t.hints.cannotJumpForward : undefined}>
+            disabled={disabled || i > step}
+            title={(disabled || i > step) ? t.hints.cannotJumpForward : undefined}>
             <div
               className="w-6 h-6 rounded-full text-xs font-medium flex items-center justify-center transition-colors"
               style={{
-                background: i <= step ? 'var(--amber)' : 'var(--muted)',
-                color: i <= step ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
-                opacity: i <= step ? 1 : 0.5,
+                background: (i < step || isConfirmStep) ? 'var(--amber)' : i === step ? 'var(--amber)' : 'var(--muted)',
+                color: (i <= step || isConfirmStep) ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
+                opacity: (i <= step || isConfirmStep) ? 1 : 0.5,
               }}>
-              {i + 1}
+              {(i < step || isConfirmStep) ? <CheckCircle2 size={14} /> : i + 1}
             </div>
             <span className="text-[10px] leading-tight hidden sm:inline max-w-[4rem] text-center truncate"
-              style={{ color: i === step ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: i <= step ? 1 : 0.5 }}>
+              style={{ color: (i === step && !isConfirmStep) ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: (i <= step || isConfirmStep) ? 1 : 0.5 }}>
               {title}
             </span>
           </button>

package/app/components/setup/StepKB.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { AlertCircle } from 'lucide-react';
 import { Field } from '@/components/settings/Primitives';
 import type { Messages } from '@/lib/i18n';
 import type { SetupState } from './types';
@@ -26,6 +27,7 @@ export interface StepKBProps {
 
 export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
   const s = t.setup;
+  const [passwordTouched, setPasswordTouched] = useState(false);
   // Build platform-aware placeholder, e.g. /Users/alice/MindOS/mind or C:\Users\alice\MindOS\mind
   // Windows homedir always contains \, e.g. C:\Users\Alice — safe to detect by separator
   const sep = homeDir.includes('\\') ? '\\' : '/';
@@ -232,6 +234,30 @@ export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
         </div>
       </div>
       )}
+
+      {/* ── Security ── */}
+      <div className="pt-2 mt-2" style={{ borderTop: '1px solid var(--border)' }}>
+        <Field label={<>{s.webPassword} <span style={{ color: 'var(--error)' }}>*</span></>} hint={s.webPasswordHint}>
+          <input
+            type="password"
+            value={state.webPassword}
+            onChange={e => { update('webPassword', e.target.value); setPasswordTouched(true); }}
+            onBlur={() => setPasswordTouched(true)}
+            placeholder="••••••••"
+            className="w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+            style={{
+              background: 'var(--input, var(--card))',
+              borderColor: passwordTouched && !state.webPassword.trim() ? 'var(--error)' : 'var(--border)',
+              color: 'var(--foreground)',
+            }}
+          />
+          {passwordTouched && !state.webPassword.trim() && (
+            <p className="text-xs flex items-center gap-1 mt-1" style={{ color: 'var(--error)' }}>
+              <AlertCircle size={11} /> {s.webPasswordRequired}
+            </p>
+          )}
+        </Field>
+      </div>
     </div>
   );
 }

package/app/components/setup/constants.tsx

@@ -7,7 +7,8 @@ export const TEMPLATES: Array<{ id: Template; icon: React.ReactNode; dirs: strin
   { id: 'empty', icon: <FileText size={18} />, dirs: ['README.md', 'CONFIG.json', 'INSTRUCTION.md'] },
 ];
 
-export const TOTAL_STEPS = 6;
+export const TOTAL_STEPS = 4;
 export const STEP_KB = 0;
-export const STEP_PORTS = 2;
-export const STEP_AGENTS = 4;
+export const STEP_AI = 1;
+export const STEP_AGENTS = 2;
+export const STEP_REVIEW = 3;

package/app/components/setup/index.tsx

@@ -6,11 +6,9 @@ import { useLocale } from '@/lib/LocaleContext';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
 import type { SetupState, PortStatus, AgentEntry, AgentInstallStatus } from './types';
-import { TOTAL_STEPS, STEP_KB, STEP_PORTS, STEP_AGENTS } from './constants';
+import { TOTAL_STEPS, STEP_KB, STEP_AI, STEP_AGENTS, STEP_REVIEW } from './constants';
 import StepKB from './StepKB';
 import StepAI from './StepAI';
-import StepPorts from './StepPorts';
-import StepSecurity from './StepSecurity';
 import StepAgents from './StepAgents';
 import StepReview from './StepReview';
 import { RestartButton } from './StepReview';
@@ -122,8 +120,8 @@ export default function SetupWizard() {
     openaiModel: 'gpt-5.4',
     openaiBaseUrl: '',
     openaiKeyMask: '',
-    webPort: 3000,
-    mcpPort: 8787,
+    webPort: 3456,
+    mcpPort: 8781,
     authToken: '',
     webPassword: '',
   });
@@ -184,16 +182,16 @@ export default function SetupWizard() {
       });
   }, []);
 
-  // Auto-check ports when entering Step 3
+  // Auto-check ports when entering AI step (ports are in Advanced section)
   useEffect(() => {
-    if (step === STEP_PORTS) {
+    if (step === STEP_AI) {
       checkPort(state.webPort, 'web');
       checkPort(state.mcpPort, 'mcp');
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [step]);
 
-  // Load agents when entering Step 5
+  // Load agents when entering Agents step
   useEffect(() => {
     if (step === STEP_AGENTS && !agentsLoaded && !agentsLoading) {
       setAgentsLoading(true);
@@ -256,15 +254,17 @@ export default function SetupWizard() {
   const portConflict = state.webPort === state.mcpPort;
 
   const canNext = () => {
-    if (step === STEP_KB) return state.mindRoot.trim().length > 0;
-    if (step === STEP_PORTS) {
+    if (step === STEP_KB) {
+      // KB path required + password required
+      return state.mindRoot.trim().length > 0 && state.webPassword.trim().length > 0;
+    }
+    if (step === STEP_AI) {
+      // Ports validation (only when Advanced is open and ports were modified)
       if (portConflict) return false;
       if (webPortStatus.checking || mcpPortStatus.checking) return false;
-      if (webPortStatus.available !== true || mcpPortStatus.available !== true) return false;
-      return (
-        state.webPort >= 1024 && state.webPort <= 65535 &&
-        state.mcpPort >= 1024 && state.mcpPort <= 65535
-      );
+      // Allow next if ports haven't been checked yet (user didn't open Advanced)
+      if (webPortStatus.available === false || mcpPortStatus.available === false) return false;
+      return true;
     }
     return true;
   };
@@ -359,32 +359,22 @@ export default function SetupWizard() {
         </div>
 
         <div className="flex justify-center">
-          <StepDots step={step} setStep={setStep} stepTitles={s.stepTitles} disabled={submitting || completed} />
+          <StepDots step={step} setStep={setStep} stepTitles={s.stepTitles} disabled={submitting || completed} numberedSteps={STEP_REVIEW} />
         </div>
 
         <h2 className="text-lg font-semibold mb-5" style={{ color: 'var(--foreground)' }}>
-          {s.stepTitles[step]}
+          {step === STEP_REVIEW ? `✓ ${s.stepTitles[step]}` : s.stepTitles[step]}
         </h2>
 
         {step === 0 && <StepKB state={state} update={update} t={t} homeDir={homeDir} />}
-        {step === 1 && <StepAI state={state} update={update} s={s} />}
-        {step === 2 && (
-          <StepPorts
-            state={state} update={update}
+        {step === 1 && (
+          <StepAI state={state} update={update} s={s} onCopyToken={copyToken}
             webPortStatus={webPortStatus} mcpPortStatus={mcpPortStatus}
             setWebPortStatus={setWebPortStatus} setMcpPortStatus={setMcpPortStatus}
-            checkPort={checkPort} portConflict={portConflict} s={s}
-          />
-        )}
-        {step === 3 && (
-          <StepSecurity
-            authToken={state.authToken}
-            onCopy={copyToken} onGenerate={generateToken}
-            webPassword={state.webPassword} onPasswordChange={v => update('webPassword', v)}
-            s={s}
+            checkPort={checkPort} portConflict={portConflict}
           />
         )}
-        {step === 4 && (
+        {step === 2 && (
           <StepAgents
             agents={agents} agentsLoading={agentsLoading}
             selectedAgents={selectedAgents} setSelectedAgents={setSelectedAgents}
@@ -394,7 +384,7 @@ export default function SetupWizard() {
             template={state.template}
           />
         )}
-        {step === 5 && (
+        {step === 3 && (
           <StepReview
             state={state} selectedAgents={selectedAgents}
             agentStatuses={agentStatuses} onRetryAgent={retryAgent}