@geminilight/mindos 0.1.9 → 0.2.1

package/app/components/OnboardingView.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Sparkles, Globe, BookOpen, FileText, Loader2, GitBranch } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+
+type Template = 'en' | 'zh' | 'empty';
+
+const TEMPLATES: Array<{
+  id: Template;
+  icon: React.ReactNode;
+  dirs: string[];
+}> = [
+  {
+    id: 'en',
+    icon: <Globe size={20} />,
+    dirs: ['Profile/', 'Connections/', 'Notes/', 'Workflows/', 'Resources/', 'Projects/'],
+  },
+  {
+    id: 'zh',
+    icon: <BookOpen size={20} />,
+    dirs: ['画像/', '关系/', '笔记/', '流程/', '资源/', '项目/'],
+  },
+  {
+    id: 'empty',
+    icon: <FileText size={20} />,
+    dirs: ['README.md', 'CONFIG.json', 'INSTRUCTION.md'],
+  },
+];
+
+export default function OnboardingView() {
+  const { t } = useLocale();
+  const router = useRouter();
+  const [loading, setLoading] = useState<Template | null>(null);
+
+  const ob = t.onboarding;
+
+  async function handleSelect(template: Template) {
+    setLoading(template);
+    try {
+      const res = await fetch('/api/init', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ template }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `HTTP ${res.status}`);
+      }
+      router.refresh();
+    } catch (e) {
+      console.error('[Onboarding] init failed:', e);
+      setLoading(null);
+    }
+  }
+
+  return (
+    <div className="content-width px-4 md:px-6 py-12 md:py-20">
+      {/* Header */}
+      <div className="text-center mb-10">
+        <div className="inline-flex items-center gap-2 mb-4">
+          <Sparkles size={18} style={{ color: 'var(--amber)' }} />
+          <h1
+            className="text-2xl font-semibold tracking-tight"
+            style={{ fontFamily: "'IBM Plex Mono', monospace", color: 'var(--foreground)' }}
+          >
+            MindOS
+          </h1>
+        </div>
+        <p
+          className="text-sm leading-relaxed max-w-md mx-auto"
+          style={{ color: 'var(--muted-foreground)' }}
+        >
+          {ob.subtitle}
+        </p>
+      </div>
+
+      {/* Template cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto mb-10">
+        {TEMPLATES.map((tpl) => {
+          const isLoading = loading === tpl.id;
+          const isDisabled = loading !== null;
+          return (
+            <button
+              key={tpl.id}
+              disabled={isDisabled}
+              onClick={() => handleSelect(tpl.id)}
+              className="group relative flex flex-col items-start gap-3 p-5 rounded-xl border text-left transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/5 disabled:opacity-60 disabled:cursor-not-allowed"
+              style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+            >
+              {/* Icon + title */}
+              <div className="flex items-center gap-2.5 w-full">
+                <span style={{ color: 'var(--amber)' }}>{tpl.icon}</span>
+                <span
+                  className="text-sm font-semibold"
+                  style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans', sans-serif" }}
+                >
+                  {ob.templates[tpl.id].title}
+                </span>
+                {isLoading && (
+                  <Loader2 size={14} className="animate-spin ml-auto" style={{ color: 'var(--amber)' }} />
+                )}
+              </div>
+
+              {/* Description */}
+              <p className="text-xs leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>
+                {ob.templates[tpl.id].desc}
+              </p>
+
+              {/* Directory preview */}
+              <div
+                className="w-full rounded-lg px-3 py-2 text-[11px] leading-relaxed"
+                style={{
+                  background: 'var(--muted)',
+                  fontFamily: "'IBM Plex Mono', monospace",
+                  color: 'var(--muted-foreground)',
+                  opacity: 0.8,
+                }}
+              >
+                {tpl.dirs.map((d) => (
+                  <div key={d}>{d}</div>
+                ))}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Import hint */}
+      <p
+        className="text-center text-xs leading-relaxed max-w-sm mx-auto"
+        style={{ color: 'var(--muted-foreground)', opacity: 0.6, fontFamily: "'IBM Plex Mono', monospace" }}
+      >
+        {ob.importHint}
+      </p>
+
+      {/* Sync hint card */}
+      <div
+        className="max-w-md mx-auto mt-6 flex items-center gap-3 px-4 py-3 rounded-lg border text-left"
+        style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+      >
+        <GitBranch size={16} style={{ color: 'var(--muted-foreground)', flexShrink: 0 }} />
+        <div className="min-w-0">
+          <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+            {ob.syncHint ?? 'Want cross-device sync? Run'}
+            {' '}
+            <code
+              className="font-mono px-1 py-0.5 rounded select-all"
+              style={{ background: 'var(--muted)', fontSize: '11px' }}
+            >
+              mindos sync init
+            </code>
+            {' '}
+            {ob.syncHintSuffix ?? 'in the terminal after setup.'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/SettingsModal.tsx

@@ -13,13 +13,15 @@ import { AppearanceTab } from './settings/AppearanceTab';
 import { KnowledgeTab } from './settings/KnowledgeTab';
 import { PluginsTab } from './settings/PluginsTab';
 import { ShortcutsTab } from './settings/ShortcutsTab';
+import { SyncTab } from './settings/SyncTab';
 
 interface SettingsModalProps {
   open: boolean;
   onClose: () => void;
+  initialTab?: Tab;
 }
 
-export default function SettingsModal({ open, onClose }: SettingsModalProps) {
+export default function SettingsModal({ open, onClose, initialTab }: SettingsModalProps) {
   const [tab, setTab] = useState<Tab>('ai');
   const [data, setData] = useState<SettingsData | null>(null);
   const [saving, setSaving] = useState(false);
@@ -47,6 +49,11 @@ export default function SettingsModal({ open, onClose }: SettingsModalProps) {
     setStatus('idle');
   }, [open]);
 
+  // Switch to requested tab when opening with initialTab
+  useEffect(() => {
+    if (open && initialTab) setTab(initialTab);
+  }, [open, initialTab]);
+
   // Apply font immediately
   useEffect(() => {
     const fontMap: Record<string, string> = {
@@ -131,6 +138,7 @@ export default function SettingsModal({ open, onClose }: SettingsModalProps) {
     { id: 'ai', label: t.settings.tabs.ai },
     { id: 'appearance', label: t.settings.tabs.appearance },
     { id: 'knowledge', label: t.settings.tabs.knowledge },
+    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync' },
     { id: 'plugins', label: t.settings.tabs.plugins },
     { id: 'shortcuts', label: t.settings.tabs.shortcuts },
   ];
@@ -193,6 +201,7 @@ export default function SettingsModal({ open, onClose }: SettingsModalProps) {
               {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
               {tab === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}
               {tab === 'shortcuts' && <ShortcutsTab t={t} />}
+              {tab === 'sync' && <SyncTab t={t} />}
             </>
           )}
         </div>

package/app/components/Sidebar.tsx

@@ -8,7 +8,9 @@ import FileTree from './FileTree';
 import SearchModal from './SearchModal';
 import AskModal from './AskModal';
 import SettingsModal from './SettingsModal';
+import SyncStatusBar, { SyncDot, MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
+import type { Tab } from './settings/types';
 import { useLocale } from '@/lib/LocaleContext';
 
 interface SidebarProps {
@@ -40,9 +42,13 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
   const [searchOpen, setSearchOpen] = useState(false);
   const [askOpen, setAskOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState<Tab | undefined>(undefined);
   const [mobileOpen, setMobileOpen] = useState(false);
   const { t } = useLocale();
 
+  // Shared sync status for collapsed dot & mobile dot
+  const { status: syncStatus } = useSyncStatus();
+
   const pathname = usePathname();
   const currentFile = pathname.startsWith('/view/')
     ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
@@ -60,6 +66,8 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
 
   useEffect(() => { setMobileOpen(false); }, [pathname]);
 
+  const openSyncSettings = () => { setSettingsTab('sync'); setSettingsOpen(true); };
+
   const sidebarContent = (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
@@ -88,6 +96,10 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
       <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
         <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} />
       </div>
+      <SyncStatusBar
+        collapsed={collapsed}
+        onOpenSyncSettings={openSyncSettings}
+      />
     </div>
   );
 
@@ -97,10 +109,14 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
         {sidebarContent}
       </aside>
 
+      {/* #7 — Collapsed sidebar: expand button with sync health dot */}
       {collapsed && (
-        <button onClick={onExpand} className="hidden md:flex fixed top-4 left-0 z-30 items-center justify-center w-6 h-10 bg-card border border-border rounded-r-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.sidebar.expandTitle}>
-          <PanelLeftOpen size={14} />
-        </button>
+        <div className="hidden md:flex fixed top-4 left-0 z-30 flex-col items-center gap-2">
+          <button onClick={onExpand} className="relative flex items-center justify-center w-6 h-10 bg-card border border-border rounded-r-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.sidebar.expandTitle}>
+            <PanelLeftOpen size={14} />
+            <SyncDot status={syncStatus} />
+          </button>
+        </div>
       )}
 
       {/* Mobile navbar */}
@@ -113,6 +129,14 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
           <span className="font-semibold text-foreground text-sm tracking-wide">MindOS</span>
         </Link>
         <div className="flex items-center gap-0.5">
+          {/* #8 — Mobile sync dot: visible when there's a problem */}
+          <button
+            onClick={openSyncSettings}
+            className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
+            aria-label="Sync status"
+          >
+            <MobileSyncDot status={syncStatus} />
+          </button>
           <button onClick={() => setSearchOpen(true)} className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
             <Search size={20} />
           </button>
@@ -130,7 +154,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
 
       <SearchModal open={searchOpen} onClose={() => setSearchOpen(false)} />
       <AskModal open={askOpen} onClose={() => setAskOpen(false)} currentFile={currentFile} />
-      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+      <SettingsModal open={settingsOpen} onClose={() => { setSettingsOpen(false); setSettingsTab(undefined); }} initialTab={settingsTab} />
     </>
   );
 }

package/app/components/SyncStatusBar.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw, CheckCircle2, XCircle } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+import type { SyncStatus } from './settings/SyncTab';
+import { timeAgo } from './settings/SyncTab';
+
+export type StatusLevel = 'synced' | 'unpushed' | 'conflicts' | 'error' | 'off' | 'syncing';
+
+export function getStatusLevel(status: SyncStatus | null, syncing: boolean): StatusLevel {
+  if (syncing) return 'syncing';
+  if (!status || !status.enabled) return 'off';
+  if (status.lastError) return 'error';
+  if (status.conflicts && status.conflicts.length > 0) return 'conflicts';
+  const unpushed = parseInt(status.unpushed || '0', 10);
+  if (unpushed > 0) return 'unpushed';
+  return 'synced';
+}
+
+export const DOT_COLORS: Record<StatusLevel, string> = {
+  synced: 'bg-green-500',
+  unpushed: 'bg-yellow-500',
+  conflicts: 'bg-red-500',       // #6 — conflicts more prominent than unpushed
+  error: 'bg-red-500',
+  off: 'bg-muted-foreground/40',
+  syncing: 'bg-blue-500',
+};
+
+interface SyncStatusBarProps {
+  collapsed?: boolean;
+  onOpenSyncSettings: () => void;
+}
+
+// #1 — Hook to force re-render every 60s so timeAgo stays fresh
+function useTick(intervalMs: number) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick(n => n + 1), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+}
+
+export function useSyncStatus() {
+  const [status, setStatus] = useState<SyncStatus | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const data = await apiFetch<SyncStatus>('/api/sync');
+      setStatus(data);
+    } catch {
+      setStatus(null);
+    } finally {
+      setLoaded(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+
+    const start = () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(fetchStatus, 30_000);
+    };
+    const stop = () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    };
+
+    start();
+
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        fetchStatus();
+        start();
+      } else {
+        stop();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+
+    return () => {
+      stop();
+      document.removeEventListener('visibilitychange', onVisibility);
+    };
+  }, [fetchStatus]);
+
+  return { status, loaded, fetchStatus };
+}
+
+export default function SyncStatusBar({ collapsed, onOpenSyncSettings }: SyncStatusBarProps) {
+  const { status, loaded, fetchStatus } = useSyncStatus();
+  const [syncing, setSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<'success' | 'error' | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
+  const prevLevelRef = useRef<StatusLevel>('off');
+  const [hintDismissed, setHintDismissed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      try { return !!localStorage.getItem('sync-hint-dismissed'); } catch {}
+    }
+    return false;
+  });
+  const { t } = useLocale();
+
+  // #1 — refresh timeAgo display every 60s
+  useTick(60_000);
+
+  // Task G — detect first sync or recovery from error and show toast
+  useEffect(() => {
+    if (!loaded || syncing) return;
+    const currentLevel = getStatusLevel(status, false);
+    const prev = prevLevelRef.current;
+    if (prev !== currentLevel) {
+      const syncT = (t as any).sidebar?.sync;
+      // Recovery: was error/conflicts, now synced
+      if ((prev === 'error' || prev === 'conflicts') && currentLevel === 'synced') {
+        setToast(syncT?.syncRestored ?? 'Sync restored');
+        setTimeout(() => setToast(null), 3000);
+      }
+      prevLevelRef.current = currentLevel;
+    }
+  }, [status, loaded, syncing, t]);
+
+  const handleSyncNow = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (syncing) return;
+    setSyncing(true);
+    setSyncResult(null);
+    try {
+      await apiFetch('/api/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'now' }),
+      });
+      await fetchStatus();
+      setSyncResult('success');                       // #2 — flash feedback
+    } catch {
+      await fetchStatus();
+      setSyncResult('error');                         // #2
+    } finally {
+      setSyncing(false);
+      setTimeout(() => setSyncResult(null), 2500);    // #2 — auto-clear
+    }
+  };
+
+  if (!loaded || collapsed) return null;
+
+  const level = getStatusLevel(status, syncing);
+
+  // Task E — Show dismissible hint when sync is not configured
+  if (level === 'off') {
+    if (hintDismissed) return null;
+    const syncT = (t as any).sidebar?.sync;
+    return (
+      <div className="hidden md:flex items-center justify-between px-4 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0 animate-in fade-in duration-300">
+        <button
+          onClick={onOpenSyncSettings}
+          className="flex items-center gap-2 min-w-0 hover:text-foreground transition-colors truncate"
+          title={syncT?.enableHint ?? 'Set up cross-device sync'}
+        >
+          <span className="w-2 h-2 rounded-full shrink-0 bg-muted-foreground/40" />
+          <span className="truncate">{syncT?.enableSync ?? 'Enable sync'} →</span>
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            try { localStorage.setItem('sync-hint-dismissed', '1'); } catch {}
+            setHintDismissed(true);
+          }}
+          className="p-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0 ml-2 text-muted-foreground/50 hover:text-muted-foreground"
+          title="Dismiss"
+        >
+          <span className="text-[10px]">✕</span>
+        </button>
+      </div>
+    );
+  }
+
+  const syncT = (t as any).sidebar?.sync;
+  const unpushedCount = parseInt(status?.unpushed || '0', 10);
+  const conflictCount = status?.conflicts?.length || 0;
+
+  let label: string;
+  let tooltip: string;
+  switch (level) {
+    case 'syncing':
+      label = syncT?.syncing ?? 'Syncing...';
+      tooltip = label;
+      break;
+    case 'synced':
+      label = `${syncT?.synced ?? 'Synced'} · ${timeAgo(status?.lastSync)}`;
+      tooltip = label;
+      break;
+    case 'unpushed':
+      // #4 — clearer wording
+      label = `${unpushedCount} ${syncT?.unpushed ?? 'awaiting push'}`;
+      tooltip = syncT?.unpushedHint ?? `${unpushedCount} commit(s) not yet pushed to remote`;
+      break;
+    case 'conflicts':
+      label = `${conflictCount} ${syncT?.conflicts ?? 'conflicts'}`;
+      tooltip = syncT?.conflictsHint ?? `${conflictCount} file(s) have merge conflicts — resolve in Settings > Sync`;
+      break;
+    case 'error':
+      label = syncT?.syncError ?? 'Sync error';
+      // #5 — show actual error message on hover
+      tooltip = status?.lastError || label;
+      break;
+    default:
+      label = syncT?.syncOff ?? 'Sync off';
+      tooltip = label;
+  }
+
+  return (
+    // #3 — fade-in via animate-in
+    <div className="hidden md:flex items-center justify-between px-4 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0 animate-in fade-in duration-300">
+      <button
+        onClick={onOpenSyncSettings}
+        className="flex items-center gap-2 min-w-0 hover:text-foreground transition-colors truncate"
+        title={tooltip}
+      >
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${DOT_COLORS[level]} ${
+            level === 'syncing' ? 'animate-pulse' :
+            level === 'conflicts' ? 'animate-pulse' : ''   // #6 — conflicts pulse
+          }`}
+        />
+        <span className="truncate">{toast || label}</span>
+      </button>
+      <div className="flex items-center gap-1 shrink-0 ml-2">
+        {/* #2 — sync result flash */}
+        {(syncResult === 'success' || toast) && <CheckCircle2 size={12} className="text-green-500 animate-in fade-in duration-200" />}
+        {syncResult === 'error' && <XCircle size={12} className="text-red-500 animate-in fade-in duration-200" />}
+        <button
+          onClick={handleSyncNow}
+          disabled={syncing}
+          className="p-1 rounded hover:bg-muted hover:text-foreground transition-colors disabled:opacity-40"
+          title={syncT?.syncNow ?? 'Sync now'}
+        >
+          <RefreshCw size={12} className={syncing ? 'animate-spin' : ''} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// #7 — Minimal dot for collapsed sidebar
+export function SyncDot({ status, syncing }: { status: SyncStatus | null; syncing?: boolean }) {
+  const level = getStatusLevel(status, syncing ?? false);
+  if (level === 'off') return null;
+  return (
+    <span
+      className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${DOT_COLORS[level]} ${
+        level === 'conflicts' || level === 'error' ? 'animate-pulse' : ''
+      }`}
+    />
+  );
+}
+
+// #8 — Small dot for mobile header
+export function MobileSyncDot({ status, syncing }: { status: SyncStatus | null; syncing?: boolean }) {
+  const level = getStatusLevel(status, syncing ?? false);
+  if (level === 'off' || level === 'synced') return null;  // only show when attention needed
+  return (
+    <span
+      className={`w-1.5 h-1.5 rounded-full ${DOT_COLORS[level]} ${
+        level === 'conflicts' || level === 'error' ? 'animate-pulse' : ''
+      }`}
+    />
+  );
+}

package/app/components/renderers/AgentInspectorRenderer.tsx

@@ -26,14 +26,17 @@ interface AgentOp {
 
 function parseOps(content: string): AgentOp[] {
   const ops: AgentOp[] = [];
-  const re = /```agent-op\n([\s\S]*?)```/g;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(content)) !== null) {
+
+  // JSON Lines format: each line is a JSON object
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#') || trimmed.startsWith('//')) continue;
     try {
-      const op = JSON.parse(m[1].trim()) as AgentOp;
+      const op = JSON.parse(trimmed) as AgentOp;
       if (op.tool && op.ts) ops.push(op);
-    } catch { /* skip malformed */ }
+    } catch { /* skip non-JSON lines */ }
   }
+
   // newest first
   return ops.sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime());
 }