@geminilight/mindos 0.2.0 → 0.2.1

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());
 }

package/app/components/settings/SyncTab.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { RefreshCw, AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';
+import { RefreshCw, AlertCircle, CheckCircle2, Loader2, GitBranch, Copy, Check, ExternalLink } from 'lucide-react';
 import { SectionLabel } from './Primitives';
 import { apiFetch } from '@/lib/api';
 
-interface SyncStatus {
+export interface SyncStatus {
   enabled: boolean;
   provider?: string;
   remote?: string;
@@ -23,7 +23,7 @@ interface SyncTabProps {
   t: any;
 }
 
-function timeAgo(iso: string | null | undefined): string {
+export function timeAgo(iso: string | null | undefined): string {
   if (!iso) return 'never';
   const diff = Date.now() - new Date(iso).getTime();
   if (diff < 60000) return 'just now';
@@ -32,6 +32,95 @@ function timeAgo(iso: string | null | undefined): string {
   return `${Math.floor(diff / 86400000)}d ago`;
 }
 
+/* ── Copy-to-clipboard button ──────────────────────────────────── */
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors shrink-0"
+      title="Copy command"
+    >
+      {copied ? <Check size={12} className="text-green-500" /> : <Copy size={12} />}
+    </button>
+  );
+}
+
+/* ── Empty state (Task D) ──────────────────────────────────────── */
+
+function SyncEmptyState({ t }: { t: any }) {
+  const syncT = t.settings?.sync;
+  const cmd = 'mindos sync init';
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center shrink-0">
+          <GitBranch size={18} className="text-muted-foreground" />
+        </div>
+        <div>
+          <h3 className="text-sm font-medium text-foreground">
+            {syncT?.emptyTitle ?? 'Cross-device Sync'}
+          </h3>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {syncT?.emptyDesc ?? 'Automatically sync your knowledge base across devices via Git.'}
+          </p>
+        </div>
+      </div>
+
+      {/* Steps */}
+      <div className="space-y-3">
+        <SectionLabel>{syncT?.emptyStepsTitle ?? 'Setup'}</SectionLabel>
+        <ol className="space-y-2.5 text-xs text-muted-foreground">
+          <li className="flex items-start gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-muted flex items-center justify-center shrink-0 text-[10px] font-medium text-foreground mt-0.5">1</span>
+            <span>{syncT?.emptyStep1 ?? 'Create a private Git repo (GitHub, GitLab, etc.) or use an existing one.'}</span>
+          </li>
+          <li className="flex items-start gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-muted flex items-center justify-center shrink-0 text-[10px] font-medium text-foreground mt-0.5">2</span>
+            <div className="flex-1">
+              <span>{syncT?.emptyStep2 ?? 'Run this command in your terminal:'}</span>
+              <div className="flex items-center gap-1.5 mt-1.5 px-3 py-2 bg-muted rounded-lg font-mono text-xs text-foreground">
+                <code className="flex-1 select-all">{cmd}</code>
+                <CopyButton text={cmd} />
+              </div>
+            </div>
+          </li>
+          <li className="flex items-start gap-2.5">
+            <span className="w-5 h-5 rounded-full bg-muted flex items-center justify-center shrink-0 text-[10px] font-medium text-foreground mt-0.5">3</span>
+            <span>{syncT?.emptyStep3 ?? 'Follow the prompts to connect your repo. Sync starts automatically.'}</span>
+          </li>
+        </ol>
+      </div>
+
+      {/* Features */}
+      <div className="grid grid-cols-2 gap-2 text-[11px] text-muted-foreground">
+        {[
+          syncT?.featureAutoCommit ?? 'Auto-commit on save',
+          syncT?.featureAutoPull ?? 'Auto-pull from remote',
+          syncT?.featureConflict ?? 'Conflict detection',
+          syncT?.featureMultiDevice ?? 'Works across devices',
+        ].map((f, i) => (
+          <div key={i} className="flex items-center gap-1.5">
+            <CheckCircle2 size={11} className="text-green-500/60 shrink-0" />
+            <span>{f}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ── Main SyncTab ──────────────────────────────────────────────── */
+
 export function SyncTab({ t }: SyncTabProps) {
   const [status, setStatus] = useState<SyncStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -101,17 +190,7 @@ export function SyncTab({ t }: SyncTabProps) {
   }
 
   if (!status || !status.enabled) {
-    return (
-      <div className="space-y-5">
-        <SectionLabel>Sync</SectionLabel>
-        <div className="text-sm text-muted-foreground space-y-2">
-          <p>Git sync is not configured.</p>
-          <p className="text-xs">
-            Run <code className="font-mono px-1 py-0.5 bg-muted rounded">mindos sync init</code> in the terminal to set up.
-          </p>
-        </div>
-      </div>
-    );
+    return <SyncEmptyState t={t} />;
   }
 
   const conflicts = status.conflicts || [];
@@ -186,21 +265,34 @@ export function SyncTab({ t }: SyncTabProps) {
         </div>
       )}
 
-      {/* Conflicts */}
+      {/* Conflicts (Task H — enhanced with links) */}
       {conflicts.length > 0 && (
         <div className="pt-2 border-t border-border">
           <SectionLabel>Conflicts ({conflicts.length})</SectionLabel>
-          <div className="space-y-1">
+          <div className="space-y-1.5">
             {conflicts.map((c, i) => (
-              <div key={i} className="flex items-center gap-2 text-xs">
-                <AlertCircle size={12} className="text-amber-500 shrink-0" />
-                <span className="font-mono truncate">{c.file}</span>
-                <span className="text-muted-foreground shrink-0">{timeAgo(c.time)}</span>
+              <div key={i} className="flex items-center gap-2 text-xs group">
+                <AlertCircle size={12} className="text-red-500 shrink-0" />
+                <a
+                  href={`/view/${encodeURIComponent(c.file)}`}
+                  className="font-mono truncate hover:text-foreground hover:underline transition-colors"
+                  title={`Open ${c.file}`}
+                >
+                  {c.file}
+                </a>
+                <a
+                  href={`/view/${encodeURIComponent(c.file + '.sync-conflict')}`}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity shrink-0 text-muted-foreground hover:text-foreground"
+                  title="View remote version (.sync-conflict)"
+                >
+                  <ExternalLink size={11} />
+                </a>
+                <span className="text-muted-foreground shrink-0 ml-auto">{timeAgo(c.time)}</span>
               </div>
             ))}
           </div>
           <p className="text-xs text-muted-foreground mt-2">
-            Remote versions saved as <code className="font-mono">.sync-conflict</code> files.
+            Click a file to view your version. Hover and click <ExternalLink size={10} className="inline" /> to see the remote version.
           </p>
         </div>
       )}

package/app/lib/agent/log.ts

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+import { getMindRoot } from '@/lib/fs';
+
+const LOG_FILE = '.agent-log.json';
+const MAX_SIZE = 500 * 1024; // 500KB
+
+interface AgentOpEntry {
+  ts: string;
+  tool: string;
+  params: Record<string, unknown>;
+  result: 'ok' | 'error';
+  message?: string;
+}
+
+/**
+ * Append an agent operation entry to .agent-log.json (JSON Lines format).
+ * Each line is a self-contained JSON object — easy to parse, grep, and tail.
+ * Auto-truncates when file exceeds MAX_SIZE.
+ */
+export function logAgentOp(entry: AgentOpEntry): void {
+  try {
+    const root = getMindRoot();
+    const logPath = path.join(root, LOG_FILE);
+
+    const line = JSON.stringify(entry) + '\n';
+
+    // Check size and truncate if needed
+    if (fs.existsSync(logPath)) {
+      const stat = fs.statSync(logPath);
+      if (stat.size > MAX_SIZE) {
+        const content = fs.readFileSync(logPath, 'utf-8');
+        const lines = content.trimEnd().split('\n');
+        // Keep the newer half
+        const kept = lines.slice(Math.floor(lines.length / 2));
+        fs.writeFileSync(logPath, kept.join('\n') + '\n');
+      }
+    }
+
+    fs.appendFileSync(logPath, line);
+  } catch {
+    // Logging should never break tool execution
+  }
+}