@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/setup/StepKB.tsx

@@ -1,263 +0,0 @@
-'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';
-import { TEMPLATES } from './constants';
-
-// Derive parent dir from current input for ls — supports both / and \ separators
-function getParentDir(p: string): string {
-  if (!p.trim()) return '';
-  const trimmed = p.trim();
-  // Already a directory (ends with separator)
-  if (trimmed.endsWith('/') || trimmed.endsWith('\\')) return trimmed;
-  // Find last separator (/ or \)
-  const lastSlash = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
-  return lastSlash >= 0 ? trimmed.slice(0, lastSlash + 1) : '';
-}
-
-export interface StepKBProps {
-  state: SetupState;
-  update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
-  t: Messages;
-  homeDir: string;
-}
-
-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('\\') ? '\\' : '/';
-  const placeholder = homeDir !== '~' ? [homeDir, 'MindOS', 'mind'].join(sep) : s.kbPathDefault;
-  const [pathInfo, setPathInfo] = useState<{ exists: boolean; empty: boolean; count: number } | null>(null);
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [activeSuggestion, setActiveSuggestion] = useState(-1);
-  const [showTemplatePickerAnyway, setShowTemplatePickerAnyway] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const justSelectedRef = useRef(false);
-
-  // Debounced autocomplete
-  useEffect(() => {
-    // Skip when a suggestion was just selected — prevents dropdown flicker
-    if (justSelectedRef.current) { justSelectedRef.current = false; return; }
-    if (!state.mindRoot.trim()) { setSuggestions([]); return; }
-    const timer = setTimeout(() => {
-      const parent = getParentDir(state.mindRoot) || homeDir;
-      fetch('/api/setup/ls', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ path: parent }),
-      })
-        .then(r => r.json())
-        .then(d => {
-          if (!d.dirs?.length) { setSuggestions([]); return; }
-          // Normalize parent to end with a separator (preserve existing / or \)
-          const endsWithSep = parent.endsWith('/') || parent.endsWith('\\');
-          const localSep = parent.includes('\\') ? '\\' : '/';
-          const parentNorm = endsWithSep ? parent : parent + localSep;
-          const typed = state.mindRoot.trim();
-          const full: string[] = (d.dirs as string[]).map((dir: string) => parentNorm + dir);
-          const endsWithAnySep = typed.endsWith('/') || typed.endsWith('\\');
-          const filtered = endsWithAnySep ? full : full.filter(f => f.startsWith(typed));
-          setSuggestions(filtered.slice(0, 20));
-          setShowSuggestions(filtered.length > 0);
-          setActiveSuggestion(-1);
-        })
-        .catch(e => { console.warn('[SetupWizard] autocomplete fetch failed:', e); setSuggestions([]); });
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [state.mindRoot, homeDir]);
-
-  // Debounced path check
-  useEffect(() => {
-    if (!state.mindRoot.trim()) { setPathInfo(null); return; }
-    const timer = setTimeout(() => {
-      fetch('/api/setup/check-path', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ path: state.mindRoot }),
-      })
-        .then(r => r.json())
-        .then(d => {
-          setPathInfo(d);
-          setShowTemplatePickerAnyway(false);
-          // Non-empty directory: default to skip template (user can opt-in to merge)
-          if (d?.exists && !d.empty) update('template', '');
-        })
-        .catch(e => { console.warn('[SetupWizard] check-path failed:', e); setPathInfo(null); });
-    }, 600);
-    return () => clearTimeout(timer);
-  }, [state.mindRoot, update]);
-
-  const hideSuggestions = () => {
-    setSuggestions([]);
-    setShowSuggestions(false);
-    setActiveSuggestion(-1);
-  };
-
-  const selectSuggestion = (val: string) => {
-    justSelectedRef.current = true;
-    update('mindRoot', val);
-    hideSuggestions();
-    inputRef.current?.focus();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!showSuggestions || suggestions.length === 0) return;
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setActiveSuggestion(i => Math.min(i + 1, suggestions.length - 1));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setActiveSuggestion(i => Math.max(i - 1, -1));
-    } else if (e.key === 'Enter' && activeSuggestion >= 0) {
-      e.preventDefault();
-      selectSuggestion(suggestions[activeSuggestion]);
-    } else if (e.key === 'Escape') {
-      setShowSuggestions(false);
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <Field label={s.kbPath} hint={s.kbPathHint}>
-        <div className="relative">
-          <input
-            ref={inputRef}
-            value={state.mindRoot}
-            onChange={e => { update('mindRoot', e.target.value); setShowSuggestions(true); }}
-            onKeyDown={handleKeyDown}
-            onBlur={() => setTimeout(() => hideSuggestions(), 150)}
-            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
-            placeholder={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: 'var(--border)',
-              color: 'var(--foreground)',
-            }}
-          />
-          {showSuggestions && suggestions.length > 0 && (
-            <div
-              role="listbox"
-              className="absolute z-50 left-0 right-0 top-full mt-1 rounded-lg border overflow-auto"
-              style={{
-                background: 'var(--card)',
-                borderColor: 'var(--border)',
-                boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-                maxHeight: '220px',
-              }}>
-              {suggestions.map((suggestion, i) => (
-                <button
-                  key={suggestion}
-                  type="button"
-                  role="option"
-                  aria-selected={i === activeSuggestion}
-                  onMouseDown={() => selectSuggestion(suggestion)}
-                  className="w-full text-left px-3 py-2 text-sm font-mono transition-colors"
-                  style={{
-                    background: i === activeSuggestion ? 'var(--muted)' : 'transparent',
-                    color: 'var(--foreground)',
-                    borderTop: i > 0 ? '1px solid var(--border)' : undefined,
-                  }}>
-                  {suggestion}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-        {/* Recommended default — one-click accept */}
-        {state.mindRoot !== placeholder && placeholder !== s.kbPathDefault && (
-          <button type="button"
-            onClick={() => update('mindRoot', placeholder)}
-            className="mt-1.5 px-2.5 py-1 text-xs rounded-md border transition-colors hover:bg-muted/50"
-            style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
-            {s.kbPathUseDefault(placeholder)}
-          </button>
-        )}
-      </Field>
-      {/* Template selection — conditional on directory state */}
-      {pathInfo && pathInfo.exists && !pathInfo.empty && !showTemplatePickerAnyway ? (
-        <div>
-          <label className="text-sm text-foreground font-medium mb-3 block">{s.template}</label>
-          <div className="rounded-lg border p-3 text-sm" style={{ borderColor: 'var(--amber)', background: 'color-mix(in srgb, var(--amber) 6%, transparent)' }}>
-            <p style={{ color: 'var(--amber)' }}>
-              {s.kbPathHasFiles(pathInfo.count)}
-            </p>
-            <div className="flex gap-2 mt-2">
-              <button type="button"
-                onClick={() => update('template', '')}
-                className="px-2.5 py-1 text-xs rounded-md border transition-colors"
-                style={{
-                  borderColor: 'var(--amber)',
-                  color: state.template === '' ? 'var(--background)' : 'var(--amber)',
-                  background: state.template === '' ? 'var(--amber)' : 'transparent',
-                }}>
-                {state.template === '' ? <>{s.kbTemplateSkip} ✓</> : s.kbTemplateSkip}
-              </button>
-              <button type="button"
-                onClick={() => setShowTemplatePickerAnyway(true)}
-                className="px-2.5 py-1 text-xs rounded-md border transition-colors hover:bg-muted/50"
-                style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}>
-                {s.kbTemplateMerge}
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : (
-      <div>
-        <label className="text-sm text-foreground font-medium mb-3 block">{s.template}</label>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-          {TEMPLATES.map(tpl => (
-            <button key={tpl.id} onClick={() => update('template', tpl.id)}
-              className="flex flex-col items-start gap-2 p-4 rounded-xl border text-left transition-all duration-150"
-              style={{
-                background: state.template === tpl.id ? 'var(--amber-dim)' : 'var(--card)',
-                borderColor: state.template === tpl.id ? 'var(--amber)' : 'var(--border)',
-              }}>
-              <div className="flex items-center gap-2">
-                <span style={{ color: 'var(--amber)' }}>{tpl.icon}</span>
-                <span className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>
-                  {t.onboarding.templates[tpl.id as 'en' | 'zh' | 'empty'].title}
-                </span>
-              </div>
-              <div className="w-full rounded-lg px-2.5 py-1.5 text-xs leading-relaxed font-display"
-                style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
-                {tpl.dirs.map(d => <div key={d}>{d}</div>)}
-              </div>
-            </button>
-          ))}
-        </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/StepPorts.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { Loader2, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
-import { Field, Input } from '@/components/settings/Primitives';
-import type { SetupState, PortStatus, SetupMessages } from './types';
-
-// ─── PortField ────────────────────────────────────────────────────────────────
-function PortField({
-  label, hint, value, onChange, status, onCheckPort, s,
-}: {
-  label: string; hint: string; value: number;
-  onChange: (v: number) => void;
-  status: PortStatus;
-  onCheckPort: (port: number) => void;
-  s: SetupMessages;
-}) {
-  // Debounce auto-check on input change (500ms)
-  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = parseInt(e.target.value, 10) || value;
-    onChange(v);
-    clearTimeout(timerRef.current);
-    if (v >= 1024 && v <= 65535) {
-      timerRef.current = setTimeout(() => onCheckPort(v), 500);
-    }
-  };
-  const handleBlur = () => {
-    // Cancel pending debounce — onBlur fires the check immediately
-    clearTimeout(timerRef.current);
-    onCheckPort(value);
-  };
-  useEffect(() => () => clearTimeout(timerRef.current), []);
-
-  return (
-    <Field label={label} hint={hint}>
-      <div className="space-y-1.5">
-        <Input
-          type="number" min={1024} max={65535} value={value}
-          onChange={handleChange}
-          onBlur={handleBlur}
-        />
-        {status.checking && (
-          <p className="text-xs flex items-center gap-1" role="status" style={{ color: 'var(--muted-foreground)' }}>
-            <Loader2 size={11} className="animate-spin" /> {s.portChecking}
-          </p>
-        )}
-        {!status.checking && status.available === false && (
-          <div className="flex items-center gap-2" role="alert">
-            <p className="text-xs flex items-center gap-1" style={{ color: 'var(--amber)' }}>
-              <AlertTriangle size={11} /> {s.portInUse(value)}
-            </p>
-            {status.suggestion !== null && (
-              <button type="button"
-                onClick={() => {
-                  onChange(status.suggestion!);
-                  setTimeout(() => onCheckPort(status.suggestion!), 0);
-                }}
-                className="text-xs px-2 py-0.5 rounded border transition-colors"
-                style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
-                {s.portSuggest(status.suggestion)}
-              </button>
-            )}
-          </div>
-        )}
-        {!status.checking && status.available === true && (
-          <p className="text-xs flex items-center gap-1" style={{ color: 'var(--success)' }}>
-            <CheckCircle2 size={11} /> {status.isSelf ? s.portSelf : s.portAvailable}
-          </p>
-        )}
-      </div>
-    </Field>
-  );
-}
-
-// ─── Step 3: Ports ────────────────────────────────────────────────────────────
-export interface StepPortsProps {
-  state: SetupState;
-  update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
-  webPortStatus: PortStatus;
-  mcpPortStatus: PortStatus;
-  setWebPortStatus: (s: PortStatus) => void;
-  setMcpPortStatus: (s: PortStatus) => void;
-  checkPort: (port: number, which: 'web' | 'mcp') => void;
-  portConflict: boolean;
-  s: SetupMessages;
-}
-
-export default function StepPorts({
-  state, update, webPortStatus, mcpPortStatus, setWebPortStatus, setMcpPortStatus, checkPort, portConflict, s,
-}: StepPortsProps) {
-  return (
-    <div className="space-y-5">
-      <PortField
-        label={s.webPort} hint={s.portHint} value={state.webPort}
-        onChange={v => { update('webPort', v); setWebPortStatus({ checking: false, available: null, isSelf: false, suggestion: null }); }}
-        status={webPortStatus}
-        onCheckPort={port => checkPort(port, 'web')}
-        s={s}
-      />
-      <PortField
-        label={s.mcpPort} hint={s.portHint} value={state.mcpPort}
-        onChange={v => { update('mcpPort', v); setMcpPortStatus({ checking: false, available: null, isSelf: false, suggestion: null }); }}
-        status={mcpPortStatus}
-        onCheckPort={port => checkPort(port, 'mcp')}
-        s={s}
-      />
-      {portConflict && (
-        <p className="text-xs flex items-center gap-1.5" role="alert" style={{ color: 'var(--amber)' }}>
-          <AlertTriangle size={12} /> {s.portConflict}
-        </p>
-      )}
-      {!portConflict && (webPortStatus.available === null || mcpPortStatus.available === null) && !webPortStatus.checking && !mcpPortStatus.checking && (
-        <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>{s.portVerifyHint}</p>
-      )}
-      <p className="text-xs flex items-center gap-1.5" style={{ color: 'var(--muted-foreground)' }}>
-        <Info size={12} /> {s.portRestartWarning}
-      </p>
-    </div>
-  );
-}