@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/ActivityBar.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { FolderTree, Search, Settings, RefreshCw, Bot, Compass, ChevronLeft, ChevronRight, Radio, Zap } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { DOT_COLORS, getStatusLevel } from './SyncStatusBar';
+import type { SyncStatus } from './settings/types';
+import Logo from './Logo';
+
+export type PanelId = 'files' | 'search' | 'echo' | 'agents' | 'discover' | 'workflows';
+
+export const RAIL_WIDTH_COLLAPSED = 48;
+export const RAIL_WIDTH_EXPANDED = 180;
+
+interface ActivityBarProps {
+  activePanel: PanelId | null;
+  onPanelChange: (id: PanelId | null) => void;
+  onEchoClick?: () => void;
+  onAgentsClick?: () => void;
+  onDiscoverClick?: () => void;
+  onWorkflowsClick?: () => void;
+  onSpacesClick?: () => void;
+  syncStatus: SyncStatus | null;
+  expanded: boolean;
+  onExpandedChange: (expanded: boolean) => void;
+  onSettingsClick: () => void;
+  onSyncClick: (rect: DOMRect) => void;
+}
+
+interface RailButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  shortcut?: string;
+  active?: boolean;
+  expanded: boolean;
+  onClick: () => void;
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /** Optional overlay badge (e.g. status dot) rendered inside the button */
+  badge?: React.ReactNode;
+  /** Optional data-walkthrough attribute for interactive walkthrough targeting */
+  walkthroughId?: string;
+}
+
+function RailButton({ icon, label, shortcut, active = false, expanded, onClick, buttonRef, badge, walkthroughId }: RailButtonProps) {
+  return (
+    <button
+      ref={buttonRef}
+      onClick={onClick}
+      aria-pressed={active}
+      aria-label={label}
+      title={shortcut ? `${label} (${shortcut})` : label}
+      data-walkthrough={walkthroughId}
+      className={`
+        relative flex items-center ${expanded ? 'justify-start px-3 w-full' : 'justify-center w-10'} h-10 rounded-md transition-colors
+        ${active
+          ? 'text-[var(--amber)] bg-[var(--amber-dim)]'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+        }
+        focus-visible:ring-2 focus-visible:ring-ring
+      `}
+    >
+      {active && (
+        <span className="absolute left-0 top-1/2 -translate-y-1/2 w-[2px] h-[18px] rounded-r-full bg-[var(--amber)]" />
+      )}
+      <span className="shrink-0 flex items-center justify-center w-[18px]">{icon}</span>
+      {badge}
+      {expanded && (
+        <>
+          <span className="ml-2.5 text-sm whitespace-nowrap">{label}</span>
+          {shortcut && (
+            <span className="ml-auto text-2xs text-muted-foreground/60 font-mono shrink-0">{shortcut}</span>
+          )}
+        </>
+      )}
+    </button>
+  );
+}
+
+export default function ActivityBar({
+  activePanel,
+  onPanelChange,
+  onEchoClick,
+  onAgentsClick,
+  onDiscoverClick,
+  onWorkflowsClick,
+  onSpacesClick,
+  syncStatus,
+  expanded,
+  onExpandedChange,
+  onSettingsClick,
+  onSyncClick,
+}: ActivityBarProps) {
+  const lastClickRef = useRef(0);
+  const syncBtnRef = useRef<HTMLButtonElement>(null);
+  const { t } = useLocale();
+  const pathname = usePathname();
+  const router = useRouter();
+  const isHome = pathname === '/';
+
+  // Update badge: Desktop → electron-updater IPC; Browser → npm registry check
+  const [hasUpdate, setHasUpdate] = useState(false);
+  useEffect(() => {
+    const bridge = typeof window !== 'undefined'
+      ? (window as unknown as { mindos?: { checkUpdate?: () => Promise<{ available: boolean }>; onUpdateAvailable?: (cb: () => void) => () => void } }).mindos
+      : undefined;
+
+    if (bridge?.checkUpdate) {
+      const doCheck = bridge.checkUpdate.bind(bridge);
+      const timer = setTimeout(async () => {
+        try {
+          const r = await doCheck();
+          if (r.available) setHasUpdate(true);
+        } catch { /* silent */ }
+      }, 10_000);
+      const cleanup = bridge.onUpdateAvailable?.(() => setHasUpdate(true));
+      return () => { clearTimeout(timer); cleanup?.(); };
+    }
+
+    // Browser/CLI: check npm registry
+    const dismissed = localStorage.getItem('mindos_update_dismissed');
+    const latest = localStorage.getItem('mindos_update_latest');
+    if (latest && latest !== dismissed) { setHasUpdate(true); }
+    const timer = setTimeout(async () => {
+      try {
+        const res = await fetch('/api/update-check', { signal: AbortSignal.timeout(5000) });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data.hasUpdate) {
+          localStorage.removeItem('mindos_update_latest');
+          localStorage.removeItem('mindos_update_dismissed');
+          setHasUpdate(false);
+          return;
+        }
+        const d = localStorage.getItem('mindos_update_dismissed');
+        if (data.latest === d) return;
+        localStorage.setItem('mindos_update_latest', data.latest);
+        setHasUpdate(true);
+      } catch { /* silent */ }
+    }, 5000);
+    const onAvail = () => setHasUpdate(true);
+    const onDismiss = () => setHasUpdate(false);
+    window.addEventListener('mindos:update-available', onAvail);
+    window.addEventListener('mindos:update-dismissed', onDismiss);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('mindos:update-available', onAvail);
+      window.removeEventListener('mindos:update-dismissed', onDismiss);
+    };
+  }, []);
+
+  // Labs feature flags (Echo, Workflows) — always start false to match SSR, hydrate from localStorage in effect
+  const [labsEcho, setLabsEcho] = useState(false);
+  const [labsWorkflows, setLabsWorkflows] = useState(false);
+  useEffect(() => {
+    setLabsEcho(localStorage.getItem('mindos:labs-echo') === '1');
+    setLabsWorkflows(localStorage.getItem('mindos:labs-workflows') === '1');
+    const sync = () => {
+      setLabsEcho(localStorage.getItem('mindos:labs-echo') === '1');
+      setLabsWorkflows(localStorage.getItem('mindos:labs-workflows') === '1');
+    };
+    window.addEventListener('mindos:labs-changed', sync);
+    return () => window.removeEventListener('mindos:labs-changed', sync);
+  }, []);
+
+  /** Debounce rapid clicks (300ms) — shared across all Rail buttons */
+  const debounced = useCallback((fn: () => void) => {
+    const now = Date.now();
+    if (now - lastClickRef.current < 300) return;
+    lastClickRef.current = now;
+    fn();
+  }, []);
+
+  const toggle = useCallback((id: PanelId) => {
+    debounced(() => onPanelChange(activePanel === id ? null : id));
+  }, [activePanel, onPanelChange, debounced]);
+
+  const syncLevel = getStatusLevel(syncStatus, false);
+  const showSyncDot = syncLevel !== 'off' && syncLevel !== 'synced';
+
+  const railWidth = expanded ? RAIL_WIDTH_EXPANDED : RAIL_WIDTH_COLLAPSED;
+
+  // Sync dot badge — positioned differently in collapsed vs expanded
+  const syncBadge = showSyncDot ? (
+    <span className={`absolute ${expanded ? 'left-[26px] top-1.5' : 'top-1.5 right-1.5'} w-2 h-2 rounded-full ${DOT_COLORS[syncLevel]} ${syncLevel === 'error' || syncLevel === 'conflicts' ? 'animate-pulse' : ''}`} />
+  ) : undefined;
+
+  return (
+    <aside
+      className="group hidden md:flex fixed top-0 left-0 h-screen z-[31] flex-col bg-background border-r border-border transition-[width] duration-200 ease-out"
+      style={{ width: `${railWidth}px` }}
+      role="toolbar"
+      aria-label="Navigation"
+      aria-orientation="vertical"
+    >
+      {/* Content wrapper — overflow-hidden prevents text flash during width transitions */}
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        {/* ── Top: Logo — h-[45px] aligns divider with PanelHeader h-[46px] border-b (both at y=45) ── */}
+        <button
+          type="button"
+          onClick={() => {
+            if (isHome) {
+              onPanelChange(activePanel === 'files' ? null : 'files');
+            } else {
+              onPanelChange('files');
+              router.push('/');
+            }
+          }}
+          className={`flex items-center ${expanded ? 'px-3 gap-2' : 'justify-center'} w-full h-[46px] shrink-0 transition-opacity cursor-pointer ${isHome ? 'opacity-100' : 'opacity-50 hover:opacity-80'}`}
+          aria-label="MindOS Home"
+        >
+          <Logo id="rail" className="w-7 h-3.5 shrink-0" />
+          {expanded && <span className="text-sm text-foreground font-brand whitespace-nowrap">MindOS</span>}
+        </button>
+
+        <div className={`${expanded ? 'mx-3' : 'mx-2'} border-t border-border`} />
+
+        {/* ── Middle: Core panel toggles ── */}
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton icon={<FolderTree size={18} />} label={t.sidebar.files} active={!isHome && activePanel === 'files'} expanded={expanded} onClick={() => onSpacesClick ? debounced(onSpacesClick) : toggle('files')} walkthroughId="files-panel" />
+          {labsEcho && <RailButton icon={<Radio size={18} />} label={t.sidebar.echo} active={activePanel === 'echo'} expanded={expanded} onClick={() => onEchoClick ? debounced(onEchoClick) : toggle('echo')} walkthroughId="echo-panel" />}
+          <RailButton icon={<Search size={18} />} label={t.sidebar.searchTitle} shortcut="⌘K" active={activePanel === 'search'} expanded={expanded} onClick={() => toggle('search')} />
+          <RailButton
+            icon={<Bot size={18} />}
+            label={t.sidebar.agents}
+            active={activePanel === 'agents'}
+            expanded={expanded}
+            onClick={() => onAgentsClick ? debounced(onAgentsClick) : toggle('agents')}
+            walkthroughId="agents-panel"
+          />
+          {labsWorkflows && <RailButton icon={<Zap size={18} />} label={t.sidebar.workflows ?? 'Flows'} active={activePanel === 'workflows'} expanded={expanded} onClick={() => onWorkflowsClick ? debounced(onWorkflowsClick) : toggle('workflows')} />}
+        </div>
+
+        {/* ── Spacer ── */}
+        <div className="flex-1" />
+
+        {/* ── Secondary: Explore ── */}
+        <div className={`${expanded ? 'mx-3' : 'mx-2'} border-t border-border`} />
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton icon={<Compass size={18} />} label={t.sidebar.discover} active={activePanel === 'discover'} expanded={expanded} onClick={() => onDiscoverClick ? debounced(onDiscoverClick) : toggle('discover')} />
+        </div>
+
+        {/* ── Bottom: Action buttons (not panel toggles) ── */}
+        <div className={`${expanded ? 'mx-3' : 'mx-2'} border-t border-border`} />
+        <div className={`flex flex-col ${expanded ? 'px-1.5' : 'items-center'} gap-1 py-2`}>
+          <RailButton
+            icon={<Settings size={18} />}
+            label={t.sidebar.settingsTitle}
+            shortcut="⌘,"
+            expanded={expanded}
+            onClick={() => debounced(onSettingsClick)}
+            badge={hasUpdate ? (
+              <span className={`absolute ${expanded ? 'left-[26px] top-1.5' : 'top-1.5 right-1.5'} w-2 h-2 rounded-full bg-error`} />
+            ) : undefined}
+          />
+          {syncStatus?.enabled && syncStatus?.remote && syncStatus.remote !== '(not configured)' && (
+          <RailButton
+            icon={<RefreshCw size={18} />}
+            label={t.sidebar.syncLabel}
+            expanded={expanded}
+            buttonRef={syncBtnRef}
+            badge={syncBadge}
+            onClick={() => debounced(() => {
+              const rect = syncBtnRef.current?.getBoundingClientRect();
+              if (rect) onSyncClick(rect);
+            })}
+          />
+          )}
+        </div>
+      </div>
+
+      {/* ── Hover expand/collapse button — vertically centered on right edge ── */}
+      {/* z-[32] ensures it paints above Panel (z-30). Shows on Rail hover OR self-hover. */}
+      <button
+        onClick={() => onExpandedChange(!expanded)}
+        className="
+          absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-[32]
+          w-5 h-5 rounded-full
+          bg-card border border-border shadow-sm
+          flex items-center justify-center
+          opacity-0 group-hover:opacity-100 hover:!opacity-100
+          transition-opacity duration-200
+          text-muted-foreground hover:text-foreground hover:bg-muted
+          focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring
+        "
+        aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
+        title={expanded ? 'Collapse' : 'Expand'}
+      >
+        {expanded ? <ChevronLeft size={10} /> : <ChevronRight size={10} />}
+      </button>
+    </aside>
+  );
+}

package/_standalone/components/AskFab.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Sparkles } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { usePathname } from 'next/navigation';
+
+interface AskFabProps {
+  /** Toggle the right-side MindOS panel */
+  onToggle: () => void;
+  /** Whether the right panel is currently open (FAB hides when open) */
+  askPanelOpen: boolean;
+}
+
+export default function AskFab({ onToggle, askPanelOpen }: AskFabProps) {
+  const { t } = useLocale();
+  const pathname = usePathname();
+  const label = `${t.ask?.fabLabel ?? 'Ask MindOS'} (⌘/)`;
+
+  // Hide on home page — it already has an inline chatbot
+  const isHome = pathname === '/' || pathname === '';
+  const hidden = askPanelOpen || isHome;
+
+  return (
+    <button
+      onClick={onToggle}
+      className={`
+        group hidden md:flex
+        fixed z-40 bottom-5 right-5
+        items-center justify-center
+        gap-0 hover:gap-2
+        p-3 rounded-2xl
+        text-[var(--amber-foreground)] font-medium text-[13px]
+        shadow-md shadow-[var(--amber)]/15
+        transition-all duration-200 ease-out
+        hover:shadow-lg hover:shadow-[var(--amber)]/20
+        active:scale-95 cursor-pointer overflow-hidden
+        ${hidden ? 'opacity-0 pointer-events-none translate-y-2' : 'opacity-100 translate-y-0'}
+      `}
+      style={{
+        background: 'var(--amber)',
+      }}
+      title={label}
+      aria-label={label}
+    >
+      <Sparkles size={16} className="relative z-10 shrink-0" />
+      <span className="
+        relative z-10
+        max-w-0 group-hover:max-w-[120px]
+        opacity-0 group-hover:opacity-100
+        transition-all duration-200 ease-out
+        whitespace-nowrap overflow-hidden
+      ">
+        {t.ask?.fabLabel ?? 'Ask MindOS'}
+      </span>
+    </button>
+  );
+}

package/_standalone/components/AskModal.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useLocale } from '@/lib/stores/locale-store';
+import AskContent from '@/components/ask/AskContent';
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
+
+interface AskModalProps {
+  open: boolean;
+  onClose: () => void;
+  currentFile?: string;
+  initialMessage?: string;
+  initialAcpAgent?: AcpAgentSelection | null;
+  onFirstMessage?: () => void;
+  askMode?: 'panel' | 'popup';
+  onModeSwitch?: () => void;
+}
+
+export default function AskModal({ open, onClose, currentFile, initialMessage, initialAcpAgent, onFirstMessage, askMode, onModeSwitch }: AskModalProps) {
+  const { t } = useLocale();
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[10vh] modal-backdrop"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={t.ask.title}
+        className="w-full md:max-w-2xl md:mx-4 bg-card border-t md:border border-border/60 rounded-t-2xl md:rounded-2xl shadow-2xl flex flex-col h-[92vh] md:h-auto md:max-h-[75vh]"
+      >
+        <AskContent
+          visible={open}
+          variant="modal"
+          onClose={onClose}
+          currentFile={currentFile}
+          initialMessage={initialMessage}
+          initialAcpAgent={initialAcpAgent}
+          onFirstMessage={onFirstMessage}
+          askMode={askMode}
+          onModeSwitch={onModeSwitch}
+        />
+      </div>
+    </div>
+  );
+}

package/_standalone/components/Backlinks.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { Link as LinkIcon, FileText } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { apiFetch } from '@/lib/api';
+import type { BacklinkItem } from '@/lib/types';
+
+export default function Backlinks({ filePath }: { filePath: string }) {
+  const [backlinks, setBacklinks] = useState<BacklinkItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    setLoading(true);
+    apiFetch<BacklinkItem[]>(`/api/backlinks?path=${encodeURIComponent(filePath)}`)
+      .then(data => {
+        setBacklinks(Array.isArray(data) ? data : []);
+        setLoading(false);
+      })
+      .catch(() => {
+        setBacklinks([]);
+        setLoading(false);
+      });
+  }, [filePath]);
+
+  if (!loading && backlinks.length === 0) return null;
+
+  return (
+    <div className="mt-12 pt-8 border-t border-border">
+      <div className="flex items-center gap-2 mb-6 text-muted-foreground">
+        <LinkIcon size={16} className="text-[var(--amber)]/70" />
+        <h3 className="text-sm font-semibold tracking-wider uppercase">
+          {t.common?.relatedFiles || 'Related Files'}
+        </h3>
+        <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full font-mono">
+          {backlinks.length}
+        </span>
+      </div>
+
+      <div className="grid gap-3">
+        {loading ? (
+          <div className="space-y-3">
+            {[1, 2].map(i => (
+              <div key={i} className="h-20 bg-muted/30 rounded-lg animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          backlinks.map((link) => (
+            <Link
+              key={link.filePath}
+              href={`/view/${link.filePath.split('/').map(encodeURIComponent).join('/')}`}
+              className="group block p-4 rounded-xl border border-border/50 bg-card/30 hover:bg-muted/30 hover:border-[var(--amber)]/30 transition-all duration-200"
+            >
+              <div className="flex items-start gap-3">
+                <div className="mt-1 p-1.5 rounded-md bg-muted group-hover:bg-[var(--amber)]/10 transition-colors">
+                  <FileText size={14} className="text-muted-foreground group-hover:text-[var(--amber)]" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium text-sm text-foreground group-hover:text-[var(--amber)] transition-colors truncate mb-1" title={link.filePath}>
+                    {link.filePath}
+                  </div>
+                  <div className="text-xs text-muted-foreground line-clamp-2 leading-relaxed italic opacity-80 group-hover:opacity-100 transition-opacity" title={link.snippets[0] || ''}>
+                    {link.snippets[0] || ''}
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/Breadcrumb.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight, Home, FileText, Table, Folder, History } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+
+const FRIENDLY_PATHS: Record<string, { icon: React.ReactNode; getLabel: (t: ReturnType<typeof useLocale>['t']) => string }> = {
+  '.mindos/change-log.json': { icon: <History size={13} className="text-[var(--amber)] shrink-0" />, getLabel: (t) => t.changes.title },
+};
+
+function FileTypeIcon({ name }: { name: string }) {
+  const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')).toLowerCase() : '';
+  if (ext === '.csv') return <Table size={13} className="text-success shrink-0" />;
+  if (ext) return <FileText size={13} className="text-muted-foreground shrink-0" />;
+  return <Folder size={13} className="text-yellow-400 shrink-0" />;
+}
+
+export default function Breadcrumb({ filePath }: { filePath: string }) {
+  const { t } = useLocale();
+  const friendly = FRIENDLY_PATHS[filePath];
+
+  if (friendly) {
+    return (
+      <nav className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground flex-nowrap overflow-hidden">
+        <Link
+          href="/"
+          className="p-1.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors shrink-0"
+          title="Home"
+        >
+          <Home size={14} />
+        </Link>
+        <ChevronRight size={12} className="text-muted-foreground/50 shrink-0" />
+        <span className="min-w-0 flex items-center gap-1.5 text-foreground font-medium">
+          {friendly.icon}
+          <span className="block truncate max-w-[180px] sm:max-w-[260px] md:max-w-[360px]">{friendly.getLabel(t)}</span>
+        </span>
+      </nav>
+    );
+  }
+
+  const parts = filePath.split('/');
+  return (
+    <nav className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground flex-nowrap overflow-hidden">
+      <Link
+        href="/"
+        className="p-1.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors shrink-0"
+        title="Home"
+      >
+        <Home size={14} />
+      </Link>
+      {parts.map((part, i) => {
+        const isLast = i === parts.length - 1;
+        const href = '/view/' + parts.slice(0, i + 1).map(encodeURIComponent).join('/');
+        return (
+          <span key={i} className="flex items-center gap-1 min-w-0">
+            <ChevronRight size={12} className="text-muted-foreground/50 shrink-0" />
+            {isLast ? (
+              <span className="min-w-0 flex items-center gap-1.5 px-1 py-0.5 text-foreground font-medium">
+                <FileTypeIcon name={part} />
+                <span className="block truncate max-w-[180px] sm:max-w-[260px] md:max-w-[360px]" suppressHydrationWarning>{part}</span>
+              </span>
+            ) : (
+              <Link href={href} className="block px-1 py-0.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors truncate max-w-[120px] sm:max-w-[160px] md:max-w-[200px]" title={part}>
+                <span suppressHydrationWarning>{part}</span>
+              </Link>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}