@geminilight/mindos 0.6.40 → 0.6.41

package/_standalone/components/settings/SettingsContent.tsx

@@ -30,6 +30,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   const router = useRouter();
   const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
   const dataLoaded = useRef(false);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const [font, setFont] = useState('lora');
   const [fontSize, setFontSize] = useState('15px');
@@ -77,9 +78,14 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   }, [visible, isPanel]);
 
   useEffect(() => {
-    if (visible && initialTab) setTab(initialTab);
+    if (visible && initialTab) switchTab(initialTab);
   }, [visible, initialTab]);
 
+  const switchTab = useCallback((id: Tab) => {
+    setTab(id);
+    contentRef.current?.scrollTo?.(0, 0);
+  }, []);
+
   useEffect(() => {
     const fontMap: Record<string, string> = {
       'lora': "'Lora', Georgia, serif",
@@ -164,7 +170,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
 
   const TABS: { id: Tab; label: string; icon: React.ReactNode; badge?: boolean }[] = [
     { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={iconSize} /> },
-    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP & Skills', icon: <Plug size={iconSize} /> },
+    { id: 'mcp', label: t.settings.tabs.mcp ?? 'Connections', icon: <Plug size={iconSize} /> },
     { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Settings size={iconSize} /> },
     { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={iconSize} /> },
     { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
@@ -176,7 +182,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
 
   /* ── Shared content & footer ── */
   const renderContent = () => (
-    <div className={`flex-1 overflow-y-auto min-h-0 ${isPanel ? 'px-4 py-4 space-y-4' : 'px-5 py-5 space-y-5'}`}>
+    <div ref={contentRef} className={`flex-1 overflow-y-auto min-h-0 ${isPanel ? 'px-4 py-4 space-y-4' : 'px-5 py-5 space-y-5'}`}>
       {status === 'load-error' && (tab === 'ai' || tab === 'knowledge') ? (
         <div className="flex flex-col items-center gap-2 py-8 text-center">
           <AlertCircle size={isPanel ? 18 : 20} className="text-destructive" />
@@ -257,7 +263,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
           {TABS.map(tabItem => (
             <button
               key={tabItem.id}
-              onClick={() => setTab(tabItem.id)}
+              onClick={() => switchTab(tabItem.id)}
               className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
                   ? 'border-[var(--amber)] text-foreground'
@@ -308,7 +314,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
           {TABS.map(tabItem => (
             <button
               key={tabItem.id}
-              onClick={() => setTab(tabItem.id)}
+              onClick={() => switchTab(tabItem.id)}
               className={`flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
                   ? 'border-[var(--amber)] text-foreground'
@@ -344,7 +350,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             {TABS.map(tabItem => (
               <button
                 key={tabItem.id}
-                onClick={() => setTab(tabItem.id)}
+                onClick={() => switchTab(tabItem.id)}
                 className={`flex items-center gap-2 w-full px-4 py-2 text-sm font-medium transition-colors relative ${
                   tab === tabItem.id
                     ? 'text-foreground bg-muted'

package/_standalone/components/settings/types.ts

@@ -66,6 +66,7 @@ export interface McpStatus {
   authConfigured: boolean;
   maskedToken?: string;
   authToken?: string;
+  localIP?: string | null;
 }
 
 export interface AgentInfo {
@@ -177,6 +178,8 @@ export interface McpAgentInstallProps {
   agents: AgentInfo[];
   t: Messages;
   onRefresh: () => void;
+  mode?: 'cli' | 'mcp';
+  activeSkillName?: string;
 }
 
 export interface McpSkillsSectionProps {

package/_standalone/components/setup/StepAgents.tsx

@@ -2,16 +2,18 @@
 
 import { useState, useMemo } from 'react';
 import {
-  Loader2, CheckCircle2, XCircle, Brain, ChevronDown,
+  Loader2, CheckCircle2, XCircle, Brain, ChevronDown, Terminal, Plug,
 } from 'lucide-react';
 import { Field, Select } from '@/components/settings/Primitives';
-import type { SetupMessages, McpMessages, Template, AgentEntry, AgentInstallStatus } from './types';
+import type { SetupMessages, McpMessages, AgentEntry, AgentInstallStatus, ConnectionMode } from './types';
 
 export interface StepAgentsProps {
   agents: AgentEntry[];
   agentsLoading: boolean;
   selectedAgents: Set<string>;
   setSelectedAgents: React.Dispatch<React.SetStateAction<Set<string>>>;
+  connectionMode: ConnectionMode;
+  setConnectionMode: React.Dispatch<React.SetStateAction<ConnectionMode>>;
   agentTransport: 'auto' | 'stdio' | 'http';
   setAgentTransport: (v: 'auto' | 'stdio' | 'http') => void;
   agentScope: 'global' | 'project';
@@ -19,13 +21,13 @@ export interface StepAgentsProps {
   agentStatuses: Record<string, AgentInstallStatus>;
   s: SetupMessages;
   settingsMcp: McpMessages;
-  template: Template;
 }
 
 export default function StepAgents({
   agents, agentsLoading, selectedAgents, setSelectedAgents,
+  connectionMode, setConnectionMode,
   agentTransport, setAgentTransport, agentScope, setAgentScope,
-  agentStatuses, s, settingsMcp, template,
+  agentStatuses, s, settingsMcp,
 }: StepAgentsProps) {
   const toggleAgent = (key: string) => {
     setSelectedAgents(prev => {
@@ -105,17 +107,82 @@ export default function StepAgents({
         disabled={agentStatuses[agent.key]?.state === 'installing'}
       />
       <span className="text-sm flex-1" style={{ color: 'var(--foreground)' }}>{agent.name}</span>
-      <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
-        style={{ background: 'color-mix(in srgb, var(--muted-foreground) 8%, transparent)', color: 'var(--muted-foreground)' }}>
-        {getEffectiveTransport(agent)}
-      </span>
+      {connectionMode.mcp && (
+        <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
+          style={{ background: 'color-mix(in srgb, var(--muted-foreground) 8%, transparent)', color: 'var(--muted-foreground)' }}>
+          {getEffectiveTransport(agent)}
+        </span>
+      )}
       {getStatusBadge(agent.key, agent)}
     </label>
   );
 
   return (
     <div className="space-y-5">
-      <p className="text-sm" style={{ color: 'var(--muted-foreground)' }}>{s.agentToolsHint}</p>
+      {/* Connection Mode Toggle */}
+      <div className="space-y-2">
+        <p className="text-xs font-medium" style={{ color: 'var(--muted-foreground)' }}>
+          {s.connectionModeTitle}
+        </p>
+        <div className="grid grid-cols-2 gap-3">
+          <label
+            className="flex items-start gap-3 px-4 py-3 rounded-xl border cursor-pointer transition-all"
+            style={{
+              borderColor: connectionMode.cli ? 'var(--amber)' : 'var(--border)',
+              background: connectionMode.cli ? 'color-mix(in srgb, var(--amber) 6%, transparent)' : 'transparent',
+            }}>
+            <input
+              type="checkbox"
+              checked={connectionMode.cli}
+              onChange={() => setConnectionMode(prev => ({ ...prev, cli: !prev.cli }))}
+              className="form-check mt-0.5"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5 text-sm font-medium" style={{ color: 'var(--foreground)' }}>
+                <Terminal size={13} className="shrink-0" /> CLI
+              </div>
+              <p className="text-2xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
+                {s.connectionModeCliHint}
+              </p>
+            </div>
+          </label>
+          <label
+            className="flex items-start gap-3 px-4 py-3 rounded-xl border cursor-pointer transition-all"
+            style={{
+              borderColor: connectionMode.mcp ? 'var(--amber)' : 'var(--border)',
+              background: connectionMode.mcp ? 'color-mix(in srgb, var(--amber) 6%, transparent)' : 'transparent',
+            }}>
+            <input
+              type="checkbox"
+              checked={connectionMode.mcp}
+              onChange={() => setConnectionMode(prev => ({ ...prev, mcp: !prev.mcp }))}
+              className="form-check mt-0.5"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5 text-sm font-medium" style={{ color: 'var(--foreground)' }}>
+                <Plug size={13} className="shrink-0" /> MCP
+              </div>
+              <p className="text-2xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
+                {s.connectionModeMcpHint}
+              </p>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      {/* Hint — contextual based on connection mode */}
+      {!connectionMode.cli && !connectionMode.mcp ? (
+        <div className="flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs"
+          style={{ background: 'color-mix(in srgb, var(--amber) 8%, transparent)', color: 'var(--amber)' }}>
+          <Brain size={13} className="shrink-0" />
+          <span>{s.agentToolsHintNone}</span>
+        </div>
+      ) : (
+        <p className="text-sm" style={{ color: 'var(--muted-foreground)' }}>
+          {!connectionMode.mcp && connectionMode.cli ? s.agentToolsHintCliOnly : s.agentToolsHint}
+        </p>
+      )}
+
       {agentsLoading ? (
         <div className="flex items-center gap-2 py-4" style={{ color: 'var(--muted-foreground)' }}>
           <Loader2 size={14} className="animate-spin" />
@@ -172,46 +239,45 @@ export default function StepAgents({
               )}
             </div>
           )}
-          {/* Skill context + auto-install hint */}
-          <div className="space-y-1.5">
-            <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
-              {s.skillWhat}
-            </p>
-            <div className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs"
-              style={{ background: 'color-mix(in srgb, var(--muted-foreground) 6%, transparent)', color: 'var(--muted-foreground)' }}>
+          {/* Hint when no agents selected — only relevant for MCP mode */}
+          {connectionMode.mcp && selectedAgents.size === 0 && (
+            <div className="flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs"
+              style={{ background: 'color-mix(in srgb, var(--amber) 8%, transparent)', color: 'var(--amber)' }}>
               <Brain size={13} className="shrink-0" />
-              <span>{s.skillAutoHint(template === 'zh' ? 'mindos-zh' : 'mindos')}</span>
+              <span>{s.agentNoneSelected}</span>
             </div>
-          </div>
-          {/* Advanced options — collapsed by default */}
-          <div>
-            <button
-              type="button"
-              onClick={() => setShowAdvanced(!showAdvanced)}
-              aria-expanded={showAdvanced}
-              className="flex items-center gap-1.5 text-xs py-1.5 transition-colors"
-              style={{ color: 'var(--muted-foreground)' }}>
-              <ChevronDown size={12} className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
-              {s.agentAdvanced}
-            </button>
-            {showAdvanced && (
-              <div className="grid grid-cols-2 gap-4 mt-2">
-                <Field label={s.agentTransport}>
-                  <Select value={agentTransport} onChange={e => setAgentTransport(e.target.value as 'auto' | 'stdio' | 'http')}>
-                    <option value="auto">{s.agentTransportAuto}</option>
-                    <option value="stdio">{settingsMcp.transportStdio}</option>
-                    <option value="http">{settingsMcp.transportHttp}</option>
-                  </Select>
-                </Field>
-                <Field label={s.agentScope}>
-                  <Select value={agentScope} onChange={e => setAgentScope(e.target.value as 'global' | 'project')}>
-                    <option value="global">{s.agentScopeGlobal}</option>
-                    <option value="project">{s.agentScopeProject}</option>
-                  </Select>
-                </Field>
-              </div>
-            )}
-          </div>
+          )}
+          {/* Advanced options — only when MCP is enabled */}
+          {connectionMode.mcp && (
+            <div>
+              <button
+                type="button"
+                onClick={() => setShowAdvanced(!showAdvanced)}
+                aria-expanded={showAdvanced}
+                className="flex items-center gap-1.5 text-xs py-1.5 transition-colors"
+                style={{ color: 'var(--muted-foreground)' }}>
+                <ChevronDown size={12} className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
+                {s.agentAdvanced}
+              </button>
+              {showAdvanced && (
+                <div className="grid grid-cols-2 gap-4 mt-2">
+                  <Field label={s.agentTransport}>
+                    <Select value={agentTransport} onChange={e => setAgentTransport(e.target.value as 'auto' | 'stdio' | 'http')}>
+                      <option value="auto">{s.agentTransportAuto}</option>
+                      <option value="stdio">{settingsMcp.transportStdio}</option>
+                      <option value="http">{settingsMcp.transportHttp}</option>
+                    </Select>
+                  </Field>
+                  <Field label={s.agentScope}>
+                    <Select value={agentScope} onChange={e => setAgentScope(e.target.value as 'global' | 'project')}>
+                      <option value="global">{s.agentScopeGlobal}</option>
+                      <option value="project">{s.agentScopeProject}</option>
+                    </Select>
+                  </Field>
+                </div>
+              )}
+            </div>
+          )}
           <div className="flex gap-2 mt-1">
             <button
               type="button"

package/_standalone/components/setup/StepReview.tsx

@@ -91,32 +91,34 @@ export interface StepReviewProps {
   error: string;
   needsRestart: boolean;
   s: SetupMessages;
-  skillInstallResult: { ok?: boolean; skill?: string; error?: string } | null;
-  setupPhase: 'review' | 'saving' | 'agents' | 'skill' | 'done';
+  setupPhase: 'review' | 'saving' | 'agents' | 'done';
+  cliEnabled: boolean;
+  mcpEnabled: boolean;
 }
 
 export default function StepReview({
   state, selectedAgents, agentStatuses, onRetryAgent, error, needsRestart, s,
-  skillInstallResult, setupPhase,
+  setupPhase, cliEnabled, mcpEnabled,
 }: StepReviewProps) {
   const failedAgents = Object.entries(agentStatuses).filter(([, v]) => v.state === 'error');
 
   // Compact config summary (only key info)
+  const modeLabel = cliEnabled && mcpEnabled ? 'CLI + MCP' : cliEnabled ? 'CLI' : mcpEnabled ? 'MCP' : '—';
   const summaryRows: [string, string][] = [
     [s.kbPath, state.mindRoot],
     [s.webPort, `${state.webPort} / ${state.mcpPort}`],
-    [s.agentToolsTitle, selectedAgents.size > 0 ? s.agentCountSummary(selectedAgents.size) : '—'],
+    [s.agentToolsTitle, mcpEnabled && selectedAgents.size > 0 ? `${modeLabel} · ${s.agentCountSummary(selectedAgents.size)}` : modeLabel],
   ];
 
-  // Progress stepper phases
+  // Progress stepper phases — dynamically built based on selected modes
   type Phase = typeof setupPhase;
+  const showAgentPhase = mcpEnabled && selectedAgents.size > 0;
   const phases: { key: Phase; label: string }[] = [
     { key: 'saving', label: s.phaseSaving },
-    { key: 'agents', label: s.phaseAgents },
-    { key: 'skill', label: s.phaseSkill },
+    ...(showAgentPhase ? [{ key: 'agents' as Phase, label: s.phaseAgents }] : []),
     { key: 'done', label: s.phaseDone },
   ];
-  const phaseOrder: Phase[] = ['saving', 'agents', 'skill', 'done'];
+  const phaseOrder: Phase[] = phases.map(p => p.key);
   const currentIdx = phaseOrder.indexOf(setupPhase);
 
   return (
@@ -198,21 +200,6 @@ export default function StepReview({
         </div>
       )}
 
-      {/* Skill result — compact */}
-      {skillInstallResult && setupPhase === 'done' && (
-        <div className="flex items-center gap-2 text-xs px-3 py-2 rounded-lg" style={{
-          background: skillInstallResult.ok ? 'color-mix(in srgb, var(--success) 6%, transparent)' : 'color-mix(in srgb, var(--error) 6%, transparent)',
-        }}>
-          {skillInstallResult.ok ? (
-            <><CheckCircle2 size={11} className="text-success shrink-0" />
-            <span style={{ color: 'var(--foreground)' }}>{s.skillInstalled} — {skillInstallResult.skill}</span></>
-          ) : (
-            <><XCircle size={11} className="text-error shrink-0" />
-            <span style={{ color: 'var(--error)' }}>{s.skillFailed}{skillInstallResult.error ? `: ${skillInstallResult.error}` : ''}</span></>
-          )}
-        </div>
-      )}
-
       {error && (
         <div className="p-3 rounded-lg text-sm text-error" style={{ background: 'color-mix(in srgb, var(--error) 10%, transparent)' }}>
           {s.completeFailed}: {error}
@@ -300,13 +287,13 @@ function HealthCheckView({ state, selectedAgents, agentStatuses, needsRestart, s
     {
       ok: agentsOk,
       icon: <Plug size={14} />,
-      title: s.healthAgents ?? 'Agent Tools',
+      title: s.healthAgents ?? 'Agent Connection',
       detail: agentsOk
         ? (s.healthAgentsOk?.(successAgents) ?? `${successAgents} agent(s) configured`)
         : selectedAgents.size > 0
           ? (s.healthAgentsPartial ?? 'Configuration in progress...')
           : (s.healthAgentsNone ?? 'No agents configured'),
-      action: agentsOk ? undefined : (s.healthAgentsAction ?? 'You can add agents later in Settings → MCP.'),
+      action: agentsOk ? undefined : (s.healthAgentsAction ?? 'You can add agents later in Settings → Connections.'),
     },
   ];
 
@@ -350,7 +337,7 @@ function HealthCheckView({ state, selectedAgents, agentStatuses, needsRestart, s
         <div className="rounded-xl border p-4 space-y-2" style={{ borderColor: 'var(--border)', background: 'var(--card)' }}>
           <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--muted-foreground)' }}>
             <Shield size={11} />
-            {s.healthTokenTitle ?? 'MCP Auth Token'}
+            {s.healthTokenTitle ?? 'Auth Token'}
           </div>
           <div className="flex items-center gap-2">
             <div className="flex-1 flex items-center px-3 py-2 rounded-lg min-h-[38px]"
@@ -373,7 +360,7 @@ function HealthCheckView({ state, selectedAgents, agentStatuses, needsRestart, s
             </button>
           </div>
           <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
-            {s.healthTokenHint ?? 'Use this token when connecting AI agents. Also available in Settings → MCP.'}
+            {s.healthTokenHint ?? 'Use this token when connecting AI agents. Also available in Settings → Connections.'}
           </p>
         </div>
       )}

package/_standalone/components/setup/types.ts

@@ -28,6 +28,12 @@ export interface SetupState {
   webPassword: string;
 }
 
+// ─── Connection mode (CLI / MCP toggle) ──────────────────────────────────────
+export interface ConnectionMode {
+  cli: boolean;
+  mcp: boolean;
+}
+
 // ─── Port check ──────────────────────────────────────────────────────────────
 export interface PortStatus {
   checking: boolean;