@geminilight/mindos 0.5.27 → 0.5.29

package/app/components/settings/UpdateTab.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Download, RefreshCw, CheckCircle2, AlertCircle, Loader2, ExternalLink } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface UpdateInfo {
+  current: string;
+  latest: string;
+  hasUpdate: boolean;
+}
+
+type UpdateState = 'idle' | 'checking' | 'updating' | 'updated' | 'error' | 'timeout';
+
+const CHANGELOG_URL = 'https://github.com/GeminiLight/MindOS/releases';
+const POLL_INTERVAL = 5_000;
+const POLL_TIMEOUT = 4 * 60 * 1000; // 4 minutes
+
+export function UpdateTab() {
+  const { t } = useLocale();
+  const u = t.settings.update;
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+  const [state, setState] = useState<UpdateState>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const originalVersion = useRef<string>('');
+
+  const checkUpdate = useCallback(async () => {
+    setState('checking');
+    setErrorMsg('');
+    try {
+      const data = await apiFetch<UpdateInfo>('/api/update-check');
+      setInfo(data);
+      if (!originalVersion.current) originalVersion.current = data.current;
+      setState('idle');
+    } catch {
+      setState('error');
+      setErrorMsg(u?.error ?? 'Failed to check for updates.');
+    }
+  }, [u]);
+
+  useEffect(() => { checkUpdate(); }, [checkUpdate]);
+
+  useEffect(() => {
+    return () => {
+      clearInterval(pollRef.current);
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const handleUpdate = useCallback(async () => {
+    setState('updating');
+    setErrorMsg('');
+
+    try {
+      await apiFetch('/api/update', { method: 'POST' });
+    } catch {
+      // Expected — server may die during update
+    }
+
+    pollRef.current = setInterval(async () => {
+      try {
+        const data = await apiFetch<UpdateInfo>('/api/update-check');
+        if (data.current !== originalVersion.current) {
+          clearInterval(pollRef.current);
+          clearTimeout(timeoutRef.current);
+          setInfo(data);
+          setState('updated');
+          setTimeout(() => window.location.reload(), 2000);
+        }
+      } catch {
+        // Server still restarting
+      }
+    }, POLL_INTERVAL);
+
+    timeoutRef.current = setTimeout(() => {
+      clearInterval(pollRef.current);
+      setState('timeout');
+    }, POLL_TIMEOUT);
+  }, []);
+
+  return (
+    <div className="space-y-5">
+      {/* Version Card */}
+      <div className="rounded-xl border border-border bg-card p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-foreground">MindOS</span>
+          {info && (
+            <span className="text-xs font-mono text-muted-foreground">v{info.current}</span>
+          )}
+        </div>
+
+        {state === 'checking' && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Loader2 size={13} className="animate-spin" />
+            {u?.checking ?? 'Checking for updates...'}
+          </div>
+        )}
+
+        {state === 'idle' && info && !info.hasUpdate && (
+          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 size={13} />
+            {u?.upToDate ?? "You're up to date"}
+          </div>
+        )}
+
+        {state === 'idle' && info?.hasUpdate && (
+          <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+            <Download size={13} />
+            {u?.available ? u.available(info.current, info.latest) : `Update available: v${info.current} → v${info.latest}`}
+          </div>
+        )}
+
+        {state === 'updating' && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+              <Loader2 size={13} className="animate-spin" />
+              {u?.updating ?? 'Updating MindOS... The server will restart shortly.'}
+            </div>
+            <p className="text-2xs text-muted-foreground">
+              {u?.updatingHint ?? 'This may take 1–3 minutes. Do not close this page.'}
+            </p>
+          </div>
+        )}
+
+        {state === 'updated' && (
+          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 size={13} />
+            {u?.updated ?? 'Updated successfully! Reloading...'}
+          </div>
+        )}
+
+        {state === 'timeout' && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
+              <AlertCircle size={13} />
+              {u?.timeout ?? 'Update may still be in progress.'}
+            </div>
+            <p className="text-2xs text-muted-foreground">
+              {u?.timeoutHint ?? 'Check your terminal:'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos logs</code>
+            </p>
+          </div>
+        )}
+
+        {state === 'error' && (
+          <div className="flex items-center gap-2 text-xs text-destructive">
+            <AlertCircle size={13} />
+            {errorMsg}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={checkUpdate}
+          disabled={state === 'checking' || state === 'updating'}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          <RefreshCw size={12} className={state === 'checking' ? 'animate-spin' : ''} />
+          {u?.checkButton ?? 'Check for Updates'}
+        </button>
+
+        {info?.hasUpdate && state !== 'updating' && state !== 'updated' && (
+          <button
+            onClick={handleUpdate}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-white transition-colors"
+            style={{ background: 'var(--amber)' }}
+          >
+            <Download size={12} />
+            {u?.updateButton ? u.updateButton(info.latest) : `Update to v${info.latest}`}
+          </button>
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="border-t border-border pt-4 space-y-2">
+        <a
+          href={CHANGELOG_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ExternalLink size={12} />
+          {u?.releaseNotes ?? 'View release notes'}
+        </a>
+        <p className="text-2xs text-muted-foreground/60">
+          {u?.hint ?? 'Updates are installed via npm. Equivalent to running'} <code className="font-mono bg-muted px-1 py-0.5 rounded">mindos update</code> {u?.inTerminal ?? 'in your terminal.'}
+        </p>
+      </div>
+    </div>
+  );
+}

package/app/components/settings/types.ts

@@ -33,7 +33,7 @@ export interface SettingsData {
   envValues?: Record<string, string>;
 }
 
-export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync';
+export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update';
 
 export const CONTENT_WIDTHS = [
   { value: '680px', label: 'Narrow (680px)' },

package/app/components/walkthrough/WalkthroughOverlay.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useEffect, useCallback, useId } from 'react';
+import { useLocale } from '@/lib/LocaleContext';
+import { useWalkthrough } from './WalkthroughProvider';
+import { walkthroughSteps } from './steps';
+import WalkthroughTooltip from './WalkthroughTooltip';
+
+/**
+ * Full-screen overlay with SVG spotlight mask.
+ * Finds the target element via data-walkthrough attribute, measures it,
+ * and cuts a transparent rect into the semi-transparent overlay.
+ */
+export default function WalkthroughOverlay() {
+  const wt = useWalkthrough();
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const maskId = useId();
+
+  const step = wt ? walkthroughSteps[wt.currentStep] : null;
+
+  const measureTarget = useCallback(() => {
+    if (!step) return;
+    const el = document.querySelector(`[data-walkthrough="${step.anchor}"]`);
+    if (el) {
+      setTargetRect(el.getBoundingClientRect());
+    } else {
+      setTargetRect(null);
+    }
+  }, [step]);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 768);
+    measureTarget();
+
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+      measureTarget();
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', measureTarget, true);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', measureTarget, true);
+    };
+  }, [measureTarget]);
+
+  // Re-measure when step changes
+  useEffect(() => {
+    measureTarget();
+    // Slight delay to account for animations
+    const timer = setTimeout(measureTarget, 100);
+    return () => clearTimeout(timer);
+  }, [wt?.currentStep, measureTarget]);
+
+  // ESC to dismiss — depend on skip only, not the entire context object
+  const skipFn = wt?.skip;
+  useEffect(() => {
+    if (!skipFn) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        skipFn();
+      }
+    };
+    window.addEventListener('keydown', handler, true);
+    return () => window.removeEventListener('keydown', handler, true);
+  }, [skipFn]);
+
+  if (!wt || !step) return null;
+
+  // Mobile: bottom sheet instead of spotlight
+  if (isMobile) {
+    return <MobileWalkthroughSheet />;
+  }
+
+  const PAD = 6; // padding around spotlight rect
+  const RADIUS = 8;
+
+  return (
+    <>
+      {/* SVG overlay with spotlight hole */}
+      <svg
+        className="fixed inset-0 z-[100] pointer-events-auto"
+        width="100%"
+        height="100%"
+        onClick={(e) => {
+          // Click outside spotlight → skip
+          if (targetRect) {
+            const x = e.clientX;
+            const y = e.clientY;
+            const inSpotlight =
+              x >= targetRect.left - PAD &&
+              x <= targetRect.right + PAD &&
+              y >= targetRect.top - PAD &&
+              y <= targetRect.bottom + PAD;
+            if (!inSpotlight) {
+              wt.skip();
+            }
+          }
+        }}
+      >
+        <defs>
+          <mask id={maskId}>
+            <rect width="100%" height="100%" fill="white" />
+            {targetRect && (
+              <rect
+                x={targetRect.left - PAD}
+                y={targetRect.top - PAD}
+                width={targetRect.width + PAD * 2}
+                height={targetRect.height + PAD * 2}
+                rx={RADIUS}
+                ry={RADIUS}
+                fill="black"
+              />
+            )}
+          </mask>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill="rgba(0, 0, 0, 0.5)"
+          mask={`url(#${maskId})`}
+        />
+      </svg>
+
+      {/* Tooltip */}
+      {targetRect && (
+        <WalkthroughTooltip
+          stepIndex={wt.currentStep}
+          rect={targetRect}
+          position={step.position}
+        />
+      )}
+    </>
+  );
+}
+
+/** Mobile fallback: bottom sheet card */
+function MobileWalkthroughSheet() {
+  const wt = useWalkthrough();
+  const { t } = useLocale();
+
+  if (!wt) return null;
+
+  const stepData = t.walkthrough.steps[wt.currentStep] as { title: string; body: string } | undefined;
+  if (!stepData) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm"
+        onClick={wt.skip}
+      />
+      {/* Bottom sheet */}
+      <div
+        className="fixed bottom-0 left-0 right-0 z-[101] rounded-t-2xl border-t shadow-lg p-5 pb-8 animate-in slide-in-from-bottom duration-300"
+        style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+      >
+        {/* Step counter */}
+        <div className="flex items-center gap-2 mb-3">
+          <span
+            className="text-2xs font-mono px-1.5 py-0.5 rounded-full"
+            style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
+          >
+            {t.walkthrough.step(wt.currentStep + 1, wt.totalSteps)}
+          </span>
+          {/* Progress dots */}
+          <div className="flex items-center gap-1 ml-auto">
+            {Array.from({ length: wt.totalSteps }, (_, i) => (
+              <div
+                key={i}
+                className="w-1.5 h-1.5 rounded-full"
+                style={{
+                  background: i === wt.currentStep ? 'var(--amber)' : 'var(--border)',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+
+        <h3
+          className="text-base font-semibold font-display mb-1"
+          style={{ color: 'var(--foreground)' }}
+        >
+          {stepData.title}
+        </h3>
+        <p className="text-sm leading-relaxed mb-5" style={{ color: 'var(--muted-foreground)' }}>
+          {stepData.body}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <button
+            onClick={wt.skip}
+            className="text-sm transition-colors hover:opacity-80"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            {t.walkthrough.skip}
+          </button>
+          <div className="flex items-center gap-2">
+            {wt.currentStep > 0 && (
+              <button
+                onClick={wt.back}
+                className="text-sm px-3 py-2 rounded-lg transition-colors hover:bg-muted"
+                style={{ color: 'var(--muted-foreground)' }}
+              >
+                {t.walkthrough.back}
+              </button>
+            )}
+            <button
+              onClick={wt.next}
+              className="text-sm px-4 py-2 rounded-lg font-medium transition-all hover:opacity-90"
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+            >
+              {wt.currentStep === wt.totalSteps - 1 ? t.walkthrough.done : t.walkthrough.next}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/app/components/walkthrough/WalkthroughProvider.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react';
+import { walkthroughSteps } from './steps';
+import WalkthroughOverlay from './WalkthroughOverlay';
+
+type WalkthroughStatus = 'idle' | 'active' | 'completed' | 'dismissed';
+
+interface WalkthroughContextValue {
+  status: WalkthroughStatus;
+  currentStep: number;
+  totalSteps: number;
+  start: () => void;
+  next: () => void;
+  back: () => void;
+  skip: () => void;
+}
+
+const WalkthroughContext = createContext<WalkthroughContextValue | null>(null);
+
+export function useWalkthrough() {
+  return useContext(WalkthroughContext);
+}
+
+interface WalkthroughProviderProps {
+  children: ReactNode;
+}
+
+export default function WalkthroughProvider({ children }: WalkthroughProviderProps) {
+  const [status, setStatus] = useState<WalkthroughStatus>('idle');
+  const [currentStep, setCurrentStep] = useState(0);
+  const totalSteps = walkthroughSteps.length;
+
+  // Persist to backend
+  const persistStep = useCallback((step: number, dismissed: boolean) => {
+    fetch('/api/setup', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        guideState: {
+          walkthroughStep: step,
+          walkthroughDismissed: dismissed,
+        },
+      }),
+    }).catch(() => {});
+  }, []);
+
+  // Check for auto-start via ?welcome=1 or guideState
+  useEffect(() => {
+    // Handle ?welcome=1 URL param — single owner, clean up immediately
+    const params = new URLSearchParams(window.location.search);
+    const isWelcome = params.get('welcome') === '1';
+    if (isWelcome) {
+      const url = new URL(window.location.href);
+      url.searchParams.delete('welcome');
+      window.history.replaceState({}, '', url.pathname + (url.search || ''));
+      // Notify GuideCard about first visit
+      window.dispatchEvent(new Event('mindos:first-visit'));
+    }
+
+    // Only auto-start walkthrough on desktop
+    if (window.innerWidth < 768) return;
+
+    fetch('/api/setup')
+      .then(r => r.json())
+      .then(data => {
+        const gs = data.guideState;
+        if (!gs) return;
+        // Already dismissed or completed
+        if (gs.walkthroughDismissed) return;
+        // Check if walkthrough should start
+        if (gs.active && !gs.dismissed && gs.walkthroughStep === undefined) {
+          // First time — only start if ?welcome=1 was present
+          if (isWelcome) {
+            setStatus('active');
+            setCurrentStep(0);
+          }
+        } else if (typeof gs.walkthroughStep === 'number' && gs.walkthroughStep >= 0 && gs.walkthroughStep < totalSteps && !gs.walkthroughDismissed) {
+          // Resume walkthrough
+          setStatus('active');
+          setCurrentStep(gs.walkthroughStep);
+        }
+      })
+      .catch(() => {});
+  }, [totalSteps]);
+
+  const start = useCallback(() => {
+    setCurrentStep(0);
+    setStatus('active');
+    persistStep(0, false);
+  }, [persistStep]);
+
+  const next = useCallback(() => {
+    const nextStep = currentStep + 1;
+    if (nextStep >= totalSteps) {
+      setStatus('completed');
+      persistStep(totalSteps, false);
+    } else {
+      setCurrentStep(nextStep);
+      persistStep(nextStep, false);
+    }
+  }, [currentStep, totalSteps, persistStep]);
+
+  const back = useCallback(() => {
+    if (currentStep > 0) {
+      const prevStep = currentStep - 1;
+      setCurrentStep(prevStep);
+      persistStep(prevStep, false);
+    }
+  }, [currentStep, persistStep]);
+
+  const skip = useCallback(() => {
+    setStatus('dismissed');
+    persistStep(currentStep, true);
+  }, [currentStep, persistStep]);
+
+  const value: WalkthroughContextValue = {
+    status,
+    currentStep,
+    totalSteps,
+    start,
+    next,
+    back,
+    skip,
+  };
+
+  return (
+    <WalkthroughContext.Provider value={value}>
+      {children}
+      {status === 'active' && <WalkthroughOverlay />}
+    </WalkthroughContext.Provider>
+  );
+}

package/app/components/walkthrough/WalkthroughTooltip.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLocale } from '@/lib/LocaleContext';
+import { useWalkthrough } from './WalkthroughProvider';
+
+interface WalkthroughTooltipProps {
+  stepIndex: number;
+  rect: DOMRect;
+  position: 'right' | 'bottom';
+}
+
+export default function WalkthroughTooltip({ stepIndex, rect, position }: WalkthroughTooltipProps) {
+  const wt = useWalkthrough();
+  const { t } = useLocale();
+
+  // Track viewport dimensions in state to avoid stale values and SSR hazard
+  const [viewport, setViewport] = useState({ width: 1024, height: 768 });
+  useEffect(() => {
+    const update = () => setViewport({ width: window.innerWidth, height: window.innerHeight });
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  if (!wt) return null;
+
+  const stepData = t.walkthrough.steps[stepIndex] as { title: string; body: string } | undefined;
+  if (!stepData) return null;
+
+  // Calculate tooltip position
+  const GAP = 12;
+  let top: number;
+  let left: number;
+
+  if (position === 'right') {
+    top = rect.top + rect.height / 2;
+    left = rect.right + GAP;
+  } else {
+    top = rect.bottom + GAP;
+    left = rect.left + rect.width / 2;
+  }
+
+  // Clamp to viewport
+  const maxLeft = viewport.width - 320;
+  const maxTop = viewport.height - 200;
+  left = Math.min(left, maxLeft);
+  top = Math.min(top, maxTop);
+  top = Math.max(top, 8);
+
+  return (
+    <div
+      className="fixed z-[102] w-[280px] rounded-xl border shadow-lg animate-in fade-in slide-in-from-left-2 duration-200"
+      style={{
+        top: `${top}px`,
+        left: `${left}px`,
+        transform: position === 'right' ? 'translateY(-50%)' : 'translateX(-50%)',
+        background: 'var(--card)',
+        borderColor: 'var(--amber)',
+      }}
+    >
+      <div className="p-4">
+        {/* Step indicator */}
+        <div className="flex items-center gap-2 mb-2">
+          <span
+            className="text-2xs font-mono px-1.5 py-0.5 rounded-full"
+            style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
+          >
+            {t.walkthrough.step(stepIndex + 1, wt.totalSteps)}
+          </span>
+        </div>
+
+        {/* Content */}
+        <h3
+          className="text-sm font-semibold font-display mb-1"
+          style={{ color: 'var(--foreground)' }}
+        >
+          {stepData.title}
+        </h3>
+        <p className="text-xs leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>
+          {stepData.body}
+        </p>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between mt-4 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
+          <button
+            onClick={wt.skip}
+            className="text-xs transition-colors hover:opacity-80"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            {t.walkthrough.skip}
+          </button>
+          <div className="flex items-center gap-2">
+            {stepIndex > 0 && (
+              <button
+                onClick={wt.back}
+                className="text-xs px-2.5 py-1 rounded-lg transition-colors hover:bg-muted"
+                style={{ color: 'var(--muted-foreground)' }}
+              >
+                {t.walkthrough.back}
+              </button>
+            )}
+            <button
+              onClick={wt.next}
+              className="text-xs px-3 py-1.5 rounded-lg font-medium transition-all hover:opacity-90"
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+            >
+              {stepIndex === wt.totalSteps - 1 ? t.walkthrough.done : t.walkthrough.next}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Progress dots */}
+      <div className="flex items-center justify-center gap-1.5 pb-3">
+        {Array.from({ length: wt.totalSteps }, (_, i) => (
+          <div
+            key={i}
+            className="w-1.5 h-1.5 rounded-full transition-all duration-200"
+            style={{
+              background: i === stepIndex ? 'var(--amber)' : 'var(--border)',
+              transform: i === stepIndex ? 'scale(1.3)' : undefined,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/components/walkthrough/index.ts

@@ -0,0 +1,3 @@
+export { default as WalkthroughProvider, useWalkthrough } from './WalkthroughProvider';
+export { walkthroughSteps } from './steps';
+export type { WalkthroughAnchor } from './steps';