@geminilight/mindos 0.6.39 → 0.6.40

package/_standalone/components/settings/UninstallTab.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Trash2, AlertTriangle, CheckCircle2, Loader2, ShieldCheck } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { SettingCard } from './Primitives';
 
 type Phase = 'idle' | 'confirming' | 'running' | 'success' | 'error';

package/_standalone/components/settings/UpdateTab.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Download, RefreshCw, CheckCircle2, AlertCircle, Loader2, ExternalLink, Circle, Monitor } from 'lucide-react';
 import { apiFetch, ApiError } from '@/lib/api';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 interface MindosDesktopBridge {
   checkUpdate: () => Promise<{ available: boolean; version?: string }>;
@@ -56,7 +56,7 @@ type UpdateState = 'idle' | 'checking' | 'updating' | 'updated' | 'error' | 'tim
 
 const CHANGELOG_URL = 'https://github.com/GeminiLight/MindOS/releases';
 const POLL_INTERVAL = 3_000;
-const POLL_TIMEOUT = 5 * 60 * 1000; // 5 minutes
+const POLL_TIMEOUT = 15 * 60 * 1000; // 15 minutes — legacy fallback build can take 10min+ on slow machines
 const UPDATE_STATE_KEY = 'mindos_update_in_progress';
 
 const STAGE_LABELS: Record<string, { en: string; zh: string }> = {

package/_standalone/components/settings/types.ts

@@ -1,5 +1,6 @@
 import type { Locale, Messages } from '@/lib/i18n';
 import type React from 'react';
+import type { ProviderId } from '@/lib/agent/providers';
 
 export interface ProviderConfig {
   apiKey: string;
@@ -8,11 +9,8 @@ export interface ProviderConfig {
 }
 
 export interface AiSettings {
-  provider: 'anthropic' | 'openai';
-  providers: {
-    anthropic?: ProviderConfig;
-    openai?: ProviderConfig;
-  };
+  provider: ProviderId;
+  providers: Partial<Record<ProviderId, ProviderConfig>>;
 }
 
 export interface AgentSettings {
@@ -115,6 +113,7 @@ export interface SkillInfo {
 /** 🟢 MINOR #7: Moved from SyncTab.tsx for consistency */
 export interface SyncStatus {
   enabled: boolean;
+  needsSetup?: boolean;
   provider?: string;
   remote?: string;
   branch?: string;

package/_standalone/components/setup/StepAI.tsx

@@ -1,17 +1,20 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Brain, Zap, SkipForward, CheckCircle2, ChevronDown, ChevronRight, Copy } from 'lucide-react';
+import { ChevronDown, ChevronRight, Copy, ExternalLink } from 'lucide-react';
 import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
-import type { SetupState, SetupMessages, PortStatus } from './types';
+import type { SetupState, SetupMessages, PortStatus, ProviderSetupConfig } from './types';
+import type { ProviderId } from '@/lib/agent/providers';
+import { PROVIDER_PRESETS, isProviderId, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
+import ProviderSelect from '@/components/shared/ProviderSelect';
 import StepPorts from './StepPorts';
+import { useLocale } from '@/lib/stores/locale-store';
 
 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;
@@ -21,76 +24,96 @@ export interface StepAIProps {
 }
 
 export default function StepAI({ state, update, s, onCopyToken, webPortStatus, mcpPortStatus, setWebPortStatus, setMcpPortStatus, checkPort, portConflict }: StepAIProps) {
+  const { locale } = useLocale();
   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' },
-    { id: 'skip' as const, icon: <SkipForward size={18} />, label: s.aiSkipTitle, desc: s.aiSkipDesc },
-  ];
+  const currentProvider = state.provider !== 'skip' && isProviderId(state.provider) ? state.provider : null;
+  const currentPreset = currentProvider ? PROVIDER_PRESETS[currentProvider] : null;
+  const currentConfig = currentProvider ? (state.providerConfigs[currentProvider] ?? { apiKey: '', model: currentPreset?.defaultModel ?? '' }) : null;
+
+  const patchConfig = (patch: Partial<ProviderSetupConfig>) => {
+    if (!currentProvider) return;
+    const prev = state.providerConfigs[currentProvider] ?? { apiKey: '', model: currentPreset?.defaultModel ?? '' };
+    update('providerConfigs', {
+      ...state.providerConfigs,
+      [currentProvider]: { ...prev, ...patch },
+    });
+  };
+
+  const configuredProviders = new Set(
+    Object.entries(state.providerConfigs)
+      .filter(([id, cfg]) => (cfg && (cfg.apiKey || cfg.apiKeyMask)) || PROVIDER_PRESETS[id as ProviderId]?.apiKeyFallback)
+      .map(([id]) => id as ProviderId),
+  );
+
   return (
     <div className="space-y-5">
-      <div className="grid grid-cols-1 gap-3">
-        {providers.map(p => (
-          <button key={p.id} onClick={() => update('provider', p.id)}
-            className="flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150"
-            style={{
-              background: state.provider === p.id ? 'var(--amber-dim)' : 'var(--card)',
-              borderColor: state.provider === p.id ? 'var(--amber)' : 'var(--border)',
-            }}>
-            <span className="mt-0.5" style={{ color: state.provider === p.id ? 'var(--amber)' : 'var(--muted-foreground)' }}>
-              {p.icon}
-            </span>
-            <div>
-              <p className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>{p.label}</p>
-              <p className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{p.desc}</p>
-            </div>
-            {state.provider === p.id && (
-              <CheckCircle2 size={16} className="ml-auto mt-0.5 shrink-0" style={{ color: 'var(--amber)' }} />
-            )}
-          </button>
-        ))}
-      </div>
-      {state.provider !== 'skip' && (
+      <ProviderSelect
+        value={state.provider}
+        onChange={id => update('provider', id)}
+        showSkip
+        configuredProviders={configuredProviders}
+      />
+
+      {currentProvider && currentPreset && currentConfig && (
         <div className="space-y-4 pt-2">
+          {/* API Key */}
           <Field label={s.apiKey}>
             <ApiKeyInput
-              value={state.provider === 'anthropic' ? state.anthropicKey : state.openaiKey}
-              onChange={v => update(state.provider === 'anthropic' ? 'anthropicKey' : 'openaiKey', v)}
-              placeholder={
-                (state.provider === 'anthropic' ? state.anthropicKeyMask : state.openaiKeyMask)
-                || (state.provider === 'anthropic' ? 'sk-ant-...' : 'sk-...')
-              }
+              value={currentConfig.apiKey}
+              onChange={v => patchConfig({ apiKey: v })}
+              placeholder={currentConfig.apiKeyMask || `${getApiKeyEnvVar(currentProvider as ProviderId) ?? 'API Key'}...`}
             />
-            {(state.provider === 'anthropic' ? state.anthropicKeyMask : state.openaiKeyMask) && !(state.provider === 'anthropic' ? state.anthropicKey : state.openaiKey) && (
+            {currentConfig.apiKeyMask && !currentConfig.apiKey && (
               <p className="text-xs mt-1" style={{ color: 'var(--muted-foreground)' }}>
                 {s.apiKeyExisting ?? 'Existing key configured. Leave blank to keep it.'}
               </p>
             )}
+            {currentPreset.signupUrl && !currentConfig.apiKey && !currentConfig.apiKeyMask && (
+              <a
+                href={currentPreset.signupUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-xs mt-1.5 hover:underline"
+                style={{ color: 'var(--amber)' }}
+              >
+                <ExternalLink size={10} />
+                {currentPreset.apiKeyFallback
+                  ? (locale === 'zh' ? `下载 ${currentPreset.nameZh}` : `Download ${currentPreset.name}`)
+                  : (locale === 'zh' ? `获取 ${currentPreset.nameZh} API Key` : `Get ${currentPreset.name} API Key`)}
+              </a>
+            )}
           </Field>
+
+          {/* Base URL — before Model so defaults are correct when listing models */}
+          {currentPreset.supportsBaseUrl && (
+            <Field label={s.baseUrl} hint={s.baseUrlHint}>
+              <Input
+                value={currentConfig.baseUrl ?? ''}
+                onChange={e => patchConfig({ baseUrl: e.target.value })}
+                placeholder={currentPreset.fixedBaseUrl || getDefaultBaseUrl(currentProvider as ProviderId) || 'https://api.openai.com/v1'}
+              />
+            </Field>
+          )}
+
+          {/* Model */}
           <Field label={s.model}>
             <Input
-              value={state.provider === 'anthropic' ? state.anthropicModel : state.openaiModel}
-              onChange={e => update(state.provider === 'anthropic' ? 'anthropicModel' : 'openaiModel', e.target.value)}
+              value={currentConfig.model}
+              onChange={e => patchConfig({ model: e.target.value })}
+              placeholder={currentPreset.defaultModel}
             />
           </Field>
-          {state.provider === 'openai' && (
-            <Field label={s.baseUrl} hint={s.baseUrlHint}>
-              <Input value={state.openaiBaseUrl} onChange={e => update('openaiBaseUrl', e.target.value)}
-                placeholder="https://api.openai.com/v1" />
-            </Field>
-          )}
         </div>
       )}
 
-      {/* Advanced: Port Settings (collapsed) */}
+      {/* Advanced: Port Settings */}
       <div className="pt-3 mt-1" style={{ borderTop: '1px solid var(--border)' }}>
         <button
           type="button"
@@ -102,7 +125,6 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
         </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}
@@ -123,7 +145,6 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
               </p>
             </div>
 
-            {/* Port Settings */}
             <StepPorts
               state={state} update={update}
               webPortStatus={webPortStatus} mcpPortStatus={mcpPortStatus}

package/_standalone/components/setup/StepDots.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CheckCircle2 } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 export interface StepDotsProps {
   step: number;

package/_standalone/components/setup/StepReview.tsx

@@ -1,10 +1,15 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import {
-  Loader2, AlertTriangle, CheckCircle2, XCircle,
+  Loader2, AlertTriangle, CheckCircle2, XCircle, Copy, Check,
+  FolderOpen, Brain, Plug, Shield,
 } from 'lucide-react';
+import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 import type { SetupState, SetupMessages, AgentInstallStatus } from './types';
+import { PROVIDER_PRESETS, isProviderId } from '@/lib/agent/providers';
+import { useLocale } from '@/lib/stores/locale-store';
 
 // ─── Restart Block ────────────────────────────────────────────────────────────
 
@@ -116,7 +121,8 @@ export default function StepReview({
 
   return (
     <div className="space-y-5">
-      {/* Compact config summary */}
+      {/* Compact config summary — hidden once done (health check replaces it) */}
+      {setupPhase !== 'done' && (
       <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
         {summaryRows.map(([label, value], i) => (
           <div key={i} className="flex items-center justify-between px-4 py-2.5 text-sm"
@@ -129,19 +135,20 @@ export default function StepReview({
           </div>
         ))}
       </div>
+      )}
 
       {/* Before submit: review hint */}
       {setupPhase === 'review' && (
         <p className="text-sm" style={{ color: 'var(--muted-foreground)' }}>{s.reviewHint}</p>
       )}
 
-      {/* Progress stepper — visible during/after setup */}
-      {setupPhase !== 'review' && (
+      {/* Progress stepper — visible during setup, hidden once done */}
+      {setupPhase !== 'review' && setupPhase !== 'done' && (
         <div className="space-y-2 py-2">
           {phases.map(({ key, label }, i) => {
             const idx = phaseOrder.indexOf(key);
-            const isDone = currentIdx > idx || (key === 'done' && setupPhase === 'done');
-            const isActive = setupPhase === key && key !== 'done';
+            const isDone = currentIdx > idx;
+            const isActive = setupPhase === key;
             const isPending = currentIdx < idx;
             return (
               <div key={key} className="flex items-center gap-3">
@@ -211,7 +218,168 @@ export default function StepReview({
           {s.completeFailed}: {error}
         </div>
       )}
-      {needsRestart && setupPhase === 'done' && <RestartBanner s={s} />}
+
+      {/* Health Check Summary — shown when setup is done */}
+      {setupPhase === 'done' && (
+        <HealthCheckView
+          state={state}
+          selectedAgents={selectedAgents}
+          agentStatuses={agentStatuses}
+          needsRestart={needsRestart}
+          s={s}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ── Health Check Summary ─────────────────────────────────────────────────── */
+
+function HealthCheckView({ state, selectedAgents, agentStatuses, needsRestart, s }: {
+  state: SetupState;
+  selectedAgents: Set<string>;
+  agentStatuses: Record<string, AgentInstallStatus>;
+  needsRestart: boolean;
+  s: SetupMessages;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(t);
+  }, [copied]);
+
+  const handleCopyToken = useCallback(async () => {
+    if (!state.authToken) return;
+    const ok = await copyToClipboard(state.authToken);
+    if (ok) { setCopied(true); toast.copy(); }
+  }, [state.authToken]);
+
+  const { locale } = useLocale();
+
+  // Derive health check statuses
+  const kbOk = !!state.mindRoot;
+  const aiOk = state.provider !== 'skip';
+  const successAgents = Object.values(agentStatuses).filter(a => a.state === 'ok').length;
+  const agentsOk = successAgents > 0;
+  const hasToken = !!state.authToken;
+
+  // Resolve provider display name and model from dynamic config
+  let providerDisplayName = '';
+  let providerModelName = '';
+  if (aiOk && isProviderId(state.provider as string)) {
+    const preset = PROVIDER_PRESETS[state.provider as keyof typeof PROVIDER_PRESETS];
+    providerDisplayName = locale === 'zh' ? preset.nameZh : preset.name;
+    const cfg = state.providerConfigs[state.provider as keyof typeof PROVIDER_PRESETS];
+    providerModelName = cfg?.model || preset.defaultModel;
+  }
+
+  const checks: Array<{
+    ok: boolean;
+    icon: React.ReactNode;
+    title: string;
+    detail: string;
+    action?: string;
+  }> = [
+    {
+      ok: kbOk,
+      icon: <FolderOpen size={14} />,
+      title: s.healthKb ?? 'Knowledge Base',
+      detail: kbOk ? state.mindRoot : (s.healthKbNone ?? 'Not configured'),
+    },
+    {
+      ok: aiOk,
+      icon: <Brain size={14} />,
+      title: s.healthAi ?? 'AI Provider',
+      detail: aiOk
+        ? `${providerDisplayName} (${providerModelName || 'default'})`
+        : (s.healthAiNone ?? 'Not configured — AI features disabled'),
+      action: aiOk ? undefined : (s.healthAiAction ?? 'Add an API key in Settings → AI.'),
+    },
+    {
+      ok: agentsOk,
+      icon: <Plug size={14} />,
+      title: s.healthAgents ?? 'Agent Tools',
+      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.'),
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {/* Health check items */}
+      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
+        {checks.map(({ ok, icon, title, detail, action }, i) => (
+          <div key={i}
+            className="flex items-start gap-3 px-4 py-3"
+            style={{
+              background: i % 2 === 0 ? 'var(--card)' : 'transparent',
+              borderTop: i > 0 ? '1px solid var(--border)' : undefined,
+            }}>
+            <div className="w-5 h-5 rounded-full flex items-center justify-center shrink-0 mt-0.5"
+              style={{
+                background: ok
+                  ? 'color-mix(in srgb, var(--success) 15%, transparent)'
+                  : 'color-mix(in srgb, var(--amber) 15%, transparent)',
+                color: ok ? 'var(--success)' : 'var(--amber)',
+              }}>
+              {ok ? <CheckCircle2 size={12} /> : <AlertTriangle size={10} />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5 text-sm font-medium" style={{ color: 'var(--foreground)' }}>
+                {icon} {title}
+              </div>
+              <p className="text-xs mt-0.5 break-words" style={{ color: ok ? 'var(--muted-foreground)' : 'var(--amber-text)' }}>
+                {detail}
+              </p>
+              {action && (
+                <p className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{action}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Auth Token — always shown prominently */}
+      {hasToken && (
+        <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'}
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 flex items-center px-3 py-2 rounded-lg min-h-[38px]"
+              style={{ background: 'var(--muted)', border: '1px solid var(--border)' }}>
+              <code className="flex-1 text-xs font-mono break-all select-all leading-relaxed" style={{ color: 'var(--foreground)' }}>
+                {state.authToken}
+              </code>
+            </div>
+            <button
+              type="button"
+              onClick={handleCopyToken}
+              className="shrink-0 p-2 rounded-lg border transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+              style={{
+                borderColor: copied ? 'color-mix(in srgb, var(--success) 50%, transparent)' : 'var(--border)',
+                background: copied ? 'color-mix(in srgb, var(--success) 10%, transparent)' : 'transparent',
+                color: copied ? 'var(--success)' : 'var(--muted-foreground)',
+              }}
+              title={s.healthTokenCopy ?? 'Copy token'}>
+              {copied ? <Check size={14} /> : <Copy size={14} />}
+            </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.'}
+          </p>
+        </div>
+      )}
+
+      {/* Restart banner */}
+      {needsRestart && <RestartBanner s={s} />}
     </div>
   );
 }

package/_standalone/components/setup/types.ts

@@ -1,4 +1,5 @@
 import type { Messages } from '@/lib/i18n';
+import type { ProviderId } from '@/lib/agent/providers';
 
 // ─── i18n type aliases ───────────────────────────────────────────────────────
 export type SetupMessages = Messages['setup'];
@@ -7,18 +8,20 @@ export type McpMessages = Messages['settings']['mcp'];
 // ─── Template ────────────────────────────────────────────────────────────────
 export type Template = 'en' | 'zh' | 'empty' | '';
 
+// ─── Per-provider config stored in setup state ───────────────────────────────
+export interface ProviderSetupConfig {
+  apiKey: string;
+  model: string;
+  baseUrl?: string;
+  apiKeyMask?: string;
+}
+
 // ─── Setup state ─────────────────────────────────────────────────────────────
 export interface SetupState {
   mindRoot: string;
   template: Template;
-  provider: 'anthropic' | 'openai' | 'skip';
-  anthropicKey: string;
-  anthropicModel: string;
-  anthropicKeyMask: string;   // masked existing key from server (display only)
-  openaiKey: string;
-  openaiModel: string;
-  openaiBaseUrl: string;
-  openaiKeyMask: string;      // masked existing key from server (display only)
+  provider: ProviderId | 'skip';
+  providerConfigs: Partial<Record<ProviderId, ProviderSetupConfig>>;
   webPort: number;
   mcpPort: number;
   authToken: string;

package/_standalone/components/shared/ProviderSelect.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle2, ChevronDown, SkipForward } from 'lucide-react';
+import { type ProviderId, PROVIDER_PRESETS, groupedProviders } from '@/lib/agent/providers';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface ProviderSelectProps {
+  value: ProviderId | 'skip';
+  onChange: (id: ProviderId | 'skip') => void;
+  showSkip?: boolean;
+  compact?: boolean;
+  configuredProviders?: Set<ProviderId>;
+}
+
+export default function ProviderSelect({
+  value, onChange, showSkip = false, compact = false, configuredProviders,
+}: ProviderSelectProps) {
+  const { locale } = useLocale();
+  const [showMore, setShowMore] = useState(false);
+  const groups = groupedProviders();
+
+  const renderItem = (id: ProviderId) => {
+    const preset = PROVIDER_PRESETS[id];
+    const displayName = locale === 'zh' ? preset.nameZh : preset.name;
+    const isSelected = value === id;
+    const isConfigured = configuredProviders?.has(id);
+
+    if (compact) {
+      return (
+        <button
+          key={id}
+          type="button"
+          onClick={() => onChange(id)}
+          className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all text-sm ${
+            isSelected
+              ? 'border-[var(--amber)] bg-[var(--amber-subtle)] shadow-sm'
+              : 'border-border/50 hover:border-border hover:bg-muted/30'
+          }`}
+        >
+          <span className={`font-medium ${isSelected ? 'text-foreground' : 'text-muted-foreground'}`}>
+            {displayName}
+          </span>
+          {isConfigured && !isSelected && (
+            <CheckCircle2 size={12} className="text-success ml-auto shrink-0" />
+          )}
+          {isSelected && (
+            <CheckCircle2 size={14} className="ml-auto shrink-0" style={{ color: 'var(--amber)' }} />
+          )}
+        </button>
+      );
+    }
+
+    return (
+      <button
+        key={id}
+        type="button"
+        onClick={() => onChange(id)}
+        className="flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150"
+        style={{
+          background: isSelected ? 'var(--amber-dim)' : 'var(--card)',
+          borderColor: isSelected ? 'var(--amber)' : 'var(--border)',
+        }}
+      >
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>{displayName}</p>
+          <p className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
+            {preset.defaultModel}
+          </p>
+        </div>
+        {isConfigured && !isSelected && (
+          <CheckCircle2 size={14} className="text-success shrink-0 mt-0.5" />
+        )}
+        {isSelected && (
+          <CheckCircle2 size={16} className="shrink-0 mt-0.5" style={{ color: 'var(--amber)' }} />
+        )}
+      </button>
+    );
+  };
+
+  const { primary: primaryItems, more: moreItems } = groups;
+
+  return (
+    <div className="space-y-2">
+      {/* Primary providers — always visible */}
+      <div className={compact ? 'flex flex-wrap gap-2' : 'grid grid-cols-1 gap-2'}>
+        {primaryItems.map(renderItem)}
+      </div>
+
+      {/* Show more toggle */}
+      {moreItems.length > 0 && (
+        <>
+          <button
+            type="button"
+            onClick={() => setShowMore(!showMore)}
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
+          >
+            <ChevronDown size={12} className={`transition-transform ${showMore ? 'rotate-180' : ''}`} />
+            {showMore
+              ? (locale === 'zh' ? '收起' : 'Show less')
+              : (locale === 'zh' ? `更多 (${moreItems.length})` : `More providers (${moreItems.length})`)}
+          </button>
+
+          {showMore && (
+            <div className={compact ? 'flex flex-wrap gap-2' : 'grid grid-cols-1 gap-2'}>
+              {moreItems.map(renderItem)}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Skip option — only in onboarding */}
+      {showSkip && (
+        <button
+          type="button"
+          onClick={() => onChange('skip')}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg border text-left transition-all text-sm w-full mt-1"
+          style={{
+            background: value === 'skip' ? 'var(--amber-dim)' : 'var(--card)',
+            borderColor: value === 'skip' ? 'var(--amber)' : 'var(--border)',
+          }}
+        >
+          <SkipForward size={14} className="shrink-0" style={{ color: value === 'skip' ? 'var(--amber)' : 'var(--muted-foreground)' }} />
+          <span className={`font-medium ${value === 'skip' ? 'text-foreground' : 'text-muted-foreground'}`}>
+            {locale === 'zh' ? '暂时跳过' : 'Skip for now'}
+          </span>
+          {value === 'skip' && (
+            <CheckCircle2 size={14} className="ml-auto shrink-0" style={{ color: 'var(--amber)' }} />
+          )}
+        </button>
+      )}
+    </div>
+  );
+}

package/_standalone/components/walkthrough/WalkthroughOverlay.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState, useEffect, useCallback, useId } from 'react';
-import { useLocale } from '@/lib/LocaleContext';
-import { useWalkthrough } from './WalkthroughProvider';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useWalkthrough } from '@/lib/stores/walkthrough-store';
 import { walkthroughSteps } from './steps';
 import WalkthroughTooltip from './WalkthroughTooltip';
 

package/_standalone/components/walkthrough/WalkthroughTooltip.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useLocale } from '@/lib/LocaleContext';
-import { useWalkthrough } from './WalkthroughProvider';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useWalkthrough } from '@/lib/stores/walkthrough-store';
 
 interface WalkthroughTooltipProps {
   stepIndex: number;