@geminilight/mindos 0.6.39 → 0.6.41

package/app/components/TableOfContents.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { ChevronRight } from 'lucide-react';
 import GithubSlugger from 'github-slugger';
+import { useLocale } from '@/lib/stores/locale-store';
+import { cn } from '@/lib/utils';
 
 interface Heading {
   id: string;
@@ -16,7 +18,6 @@ function parseHeadings(content: string): Heading[] {
   const headings: Heading[] = [];
   let inCodeBlock = false;
   for (const line of lines) {
-    // Toggle code fence state (``` or ~~~, with optional language tag)
     if (/^(`{3,}|~{3,})/.test(line)) {
       inCodeBlock = !inCodeBlock;
       continue;
@@ -42,10 +43,41 @@ interface TableOfContentsProps {
 }
 
 export default function TableOfContents({ content }: TableOfContentsProps) {
-  const headings = parseHeadings(content);
+  const { t } = useLocale();
+  const { headings, minLevel } = useMemo(() => {
+    const h = parseHeadings(content);
+    return { headings: h, minLevel: h.length > 0 ? Math.min(...h.map(x => x.level)) : 1 };
+  }, [content]);
   const [activeId, setActiveId] = useState<string>('');
   const [collapsed, setCollapsed] = useState(false);
+
+  // Broadcast TOC width to content area via CSS variables
+  useEffect(() => {
+    const root = document.documentElement.style;
+    root.setProperty('--toc-width', collapsed ? '0px' : `${NAV_W}px`);
+    if (collapsed) {
+      root.removeProperty('--toc-margin');
+    } else {
+      root.setProperty('--toc-margin', `${NAV_W + 8}px`);
+    }
+    return () => { root.removeProperty('--toc-width'); root.removeProperty('--toc-margin'); };
+  }, [collapsed]);
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const navRef = useRef<HTMLElement | null>(null);
+  const linkRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
+
+  const scrollActiveIntoView = useCallback((id: string) => {
+    const link = linkRefs.current.get(id);
+    const nav = navRef.current;
+    if (!link || !nav || !link.isConnected) return;
+    const navRect = nav.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+    const isAbove = linkRect.top < navRect.top + 40;
+    const isBelow = linkRect.bottom > navRect.bottom - 40;
+    if (isAbove || isBelow) {
+      link.scrollIntoView({ block: 'center', behavior: 'auto' });
+    }
+  }, []);
 
   useEffect(() => {
     if (headings.length === 0) return;
@@ -58,7 +90,11 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
       observerRef.current = new IntersectionObserver(
         (entries) => {
           for (const entry of entries) {
-            if (entry.isIntersecting) { setActiveId(entry.target.id); break; }
+            if (entry.isIntersecting) {
+              setActiveId(entry.target.id);
+              scrollActiveIntoView(entry.target.id);
+              break;
+            }
           }
         },
         { rootMargin: `-${SCROLL_OFFSET}px 0% -70% 0%`, threshold: 0 }
@@ -66,13 +102,12 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
       elements.forEach(el => observerRef.current?.observe(el));
     }, 150);
     return () => { clearTimeout(timer); observerRef.current?.disconnect(); };
+  // headings is derived from content via useMemo; scrollActiveIntoView is stable (no deps)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [content]);
+  }, [headings]);
 
   if (headings.length < 2) return null;
 
-  const minLevel = Math.min(...headings.map(h => h.level));
-
   const handleClick = (e: React.MouseEvent, id: string) => {
     e.preventDefault();
     const el = document.getElementById(id);
@@ -83,29 +118,17 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
   };
 
   return (
-    <aside
-      className="hidden xl:block fixed z-10"
-      style={{
-        top: TOPBAR_H,
-        height: `calc(100vh - ${TOPBAR_H}px)`,
-        // Always reserve full width so content margin doesn't jump
-        width: NAV_W,
-        // Shift right when Ask AI panel is open (CSS var injected by SidebarLayout)
-        right: 'var(--right-panel-width, 0px)',
-        // Slide the entire panel off the right edge when collapsed
-        transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
-        transition: 'transform 200ms ease-in-out, right 200ms ease-out',
-      }}
-    >
-      {/* Collapse / expand button — tab attached to left edge of the panel */}
+    <>
+      {/* Collapse / expand toggle — separate from aside so it stays visible */}
       <button
         onClick={() => setCollapsed(v => !v)}
-        className="absolute top-6 flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
+        className="hidden xl:flex fixed z-10 top-[50px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
         style={{
-          left: -20,           // sticks out to the left of the panel
+          right: `calc(var(--right-panel-width, 0px) + ${collapsed ? 0 : NAV_W}px)`,
           background: 'var(--background)',
+          transition: 'right 200ms ease-in-out',
         }}
-        title={collapsed ? 'Expand TOC' : 'Collapse TOC'}
+        title={collapsed ? t.view.tocExpand : t.view.tocCollapse}
       >
         <ChevronRight
           size={11}
@@ -114,16 +137,28 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
         />
       </button>
 
-      {/* Nav list */}
+      {/* TOC panel */}
+      <aside
+        className="hidden xl:flex flex-col fixed z-10 overflow-hidden"
+        style={{
+          top: TOPBAR_H,
+          height: `calc(100vh - ${TOPBAR_H}px)`,
+          width: NAV_W,
+          right: 'var(--right-panel-width, 0px)',
+          transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
+          transition: 'transform 200ms ease-in-out, right 200ms ease-out',
+        }}
+      >
       <nav
-        className="flex flex-col gap-0.5 overflow-y-auto py-5 pl-2 pr-3 h-full border-l border-border"
+        ref={navRef}
+        aria-label={t.view.tocTitle}
+        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 py-5 pl-2 pr-3 border-l border-border"
         style={{ background: 'var(--background)' }}
       >
         <p
-          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1"
-          style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}
+          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1 text-muted-foreground/50 shrink-0"
         >
-          On this page
+          {t.view.tocTitle}
         </p>
         {headings.map((heading, i) => {
           const indent = (heading.level - minLevel) * 14;
@@ -132,29 +167,41 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
           return (
             <a
               key={`${heading.id}-${i}`}
+              ref={el => {
+                if (el) linkRefs.current.set(heading.id, el);
+                else linkRefs.current.delete(heading.id);
+              }}
               href={`#${heading.id}`}
               onClick={(e) => handleClick(e, heading.id)}
-              className="block text-xs py-1 rounded transition-colors duration-100 leading-snug"
-              suppressHydrationWarning
+              className={cn(
+                'block text-xs py-1 rounded transition-colors duration-100 leading-snug shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+                isActive && 'font-medium',
+              )}
               style={{
                 paddingLeft: `${8 + indent}px`,
                 paddingRight: '8px',
-                borderLeft: isNested ? '1px solid var(--border)' : 'none',
-                marginLeft: isNested ? '8px' : '0',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
+                borderLeft: '2px solid',
+                borderLeftColor: isActive
+                  ? 'var(--amber)'
+                  : isNested
+                    ? 'var(--border)'
+                    : 'transparent',
+                marginLeft: isNested ? '7px' : '0',
                 ...(isActive
                   ? { color: 'var(--amber)', background: 'var(--amber-dim)' }
                   : { color: 'var(--muted-foreground)' }
-                )
+                ),
               }}
+              title={heading.text}
             >
-              {heading.text}
+              <span className="line-clamp-2" suppressHydrationWarning>
+                {heading.text}
+              </span>
             </a>
           );
         })}
       </nav>
     </aside>
+    </>
   );
 }

package/app/components/TrashPageClient.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, useTransition } from 'react';
 import { Trash2, RotateCcw, X, Folder, FileText, Table, AlertTriangle, Loader2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { restoreFromTrashAction, permanentlyDeleteAction, emptyTrashAction } from '@/lib/actions';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 import { toast } from '@/lib/toast';

package/app/components/UpdateOverlay.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Loader2, CheckCircle2 } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 
 const UPDATE_STATE_KEY = 'mindos_update_in_progress';
 const POLL_INTERVAL = 3_000;
@@ -31,7 +31,7 @@ export default function UpdateOverlay() {
             const saved = localStorage.getItem(UPDATE_STATE_KEY);
             if (saved) {
               const { originalVer } = JSON.parse(saved);
-              const data = await fetch('/api/update-check').then(r => r.json());
+              const data = await fetch('/api/update-check', { signal: AbortSignal.timeout(5000) }).then(r => r.json());
               if (data.current && data.current !== originalVer) {
                 setDone(true);
                 localStorage.removeItem(UPDATE_STATE_KEY);

package/app/components/agents/AgentActivitySection.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+/**
+ * AgentActivitySection — Full audit log view for the Agents Activity tab.
+ * Fetches data from /api/agent-activity and displays a filterable, expandable timeline.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Terminal, ChevronDown, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import {
+  type AgentOp, type OpKind,
+  opKind, KIND_STYLE, KIND_LABEL, OpIcon, KindBadge, formatTs, relativeTs, getFilePath,
+} from './agent-activity-shared';
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+function truncateContent(v: unknown, max = 120): string {
+  const s = typeof v === 'string' ? v : JSON.stringify(v);
+  return s.length > max ? s.slice(0, max) + '\u2026' : s;
+}
+
+// ─── Op Card ───────────────────────────────────────────────────────────────────
+
+function OpCard({ op, copy }: { op: AgentOp; copy?: Record<string, string> }) {
+  const router = useRouter();
+  const { locale } = useLocale();
+  const [expanded, setExpanded] = useState(false);
+  const kind = opKind(op.tool);
+  const style = KIND_STYLE[kind];
+  const filePath = getFilePath(op.params);
+
+  return (
+    <div style={{
+      background: 'var(--card)',
+      border: '1px solid var(--border)',
+      borderRadius: 10,
+      overflow: 'hidden',
+      marginBottom: 8,
+    }}>
+      {/* Header row */}
+      <div
+        style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', cursor: 'pointer', userSelect: 'none' }}
+        onClick={() => setExpanded(v => !v)}
+      >
+        {/* kind badge */}
+        <KindBadge kind={kind} locale={locale} />
+
+        {/* file path */}
+        {filePath && (
+          <span
+            style={{ fontSize: '0.72rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
+            onClick={e => { e.stopPropagation(); router.push('/view/' + filePath.split('/').map(encodeURIComponent).join('/')); }}
+            title={filePath}
+            className="font-display"
+          >
+            {filePath}
+          </span>
+        )}
+
+        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+          {/* agent name badge */}
+          {op.agentName && (
+            <span className="font-display" style={{
+              fontSize: '0.62rem', fontWeight: 500,
+              padding: '1px 6px', borderRadius: 999,
+              background: 'var(--muted)', color: 'var(--muted-foreground)',
+              whiteSpace: 'nowrap', maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis',
+            }} title={op.agentName}>
+              {op.agentName.length > 30 ? op.agentName.slice(0, 30) + '...' : op.agentName}
+            </span>
+          )}
+          {/* result */}
+          {op.result === 'ok'
+            ? <CheckCircle2 size={13} style={{ color: 'var(--success)' }} />
+            : <AlertCircle size={13} style={{ color: 'var(--error)' }} />
+          }
+          {/* timestamp */}
+          <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6 }} title={formatTs(op.ts)}>
+            {relativeTs(op.ts)}
+          </span>
+          {/* chevron */}
+          <ChevronDown size={12} style={{ color: 'var(--muted-foreground)', transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
+        </div>
+      </div>
+
+      {/* Expanded details */}
+      {expanded && (
+        <div style={{ borderTop: '1px solid var(--border)', padding: '10px 14px', background: 'var(--background)' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: op.message ? 8 : 0 }}>
+            {Object.entries(op.params).map(([k, v]) => (
+              <div key={k} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
+                <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0, minWidth: 80 }}>
+                  {k}
+                </span>
+                <span className="font-display" style={{ fontSize: '0.72rem', color: 'var(--foreground)', wordBreak: 'break-all', lineHeight: 1.5 }}>
+                  {truncateContent(v)}
+                </span>
+              </div>
+            ))}
+          </div>
+          {op.message && (
+            <div className="font-display" style={{ marginTop: 6, padding: '5px 9px', borderRadius: 5, fontSize: '0.72rem',
+              background: op.result === 'error' ? 'rgba(200,80,80,0.08)' : 'rgba(122,173,128,0.08)',
+              color: op.result === 'error' ? 'var(--error)' : 'var(--success)',
+              border: `1px solid ${op.result === 'error' ? 'rgba(200,80,80,0.2)' : 'rgba(122,173,128,0.2)'}`,
+            }}>
+              {op.message}
+            </div>
+          )}
+          {op.agentName && (
+            <div className="font-display" style={{ marginTop: 6, fontSize: '0.68rem', color: 'var(--muted-foreground)' }}>
+              {copy?.agentLabel ?? 'Agent'}: <span style={{ color: 'var(--foreground)', fontWeight: 500 }}>{op.agentName}</span>
+            </div>
+          )}
+          <div className="font-display" style={{ marginTop: 6, fontSize: '0.65rem', color: 'var(--muted-foreground)', opacity: 0.5 }}>
+            {formatTs(op.ts)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Filter kinds ──────────────────────────────────────────────────────────────
+
+const KINDS: Array<OpKind | 'all'> = ['all', 'write', 'create', 'delete', 'read', 'search'];
+
+// ─── Main section ──────────────────────────────────────────────────────────────
+
+export default function AgentActivitySection() {
+  const { t, locale } = useLocale();
+  const [ops, setOps] = useState<AgentOp[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<OpKind | 'all'>('all');
+
+  useEffect(() => {
+    let cancelled = false;
+    const doFetch = () => {
+      fetch('/api/agent-activity?limit=200')
+        .then(r => r.json())
+        .then(data => { if (!cancelled) setOps(data.events ?? []); })
+        .catch(() => {})
+        .finally(() => { if (!cancelled) setLoading(false); });
+    };
+    doFetch();
+    const onVisible = () => { if (document.visibilityState === 'visible') doFetch(); };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => { cancelled = true; document.removeEventListener('visibilitychange', onVisible); };
+  }, []);
+
+  const filtered = useMemo(() =>
+    filter === 'all' ? ops : ops.filter(op => opKind(op.tool) === filter),
+    [ops, filter]);
+
+  const counts = useMemo(() => {
+    const c: Record<string, number> = { all: ops.length };
+    for (const op of ops) {
+      const k = opKind(op.tool);
+      c[k] = (c[k] ?? 0) + 1;
+    }
+    return c;
+  }, [ops]);
+
+  const copy = t.agentsContent?.activity;
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-16 text-muted-foreground/50">
+        <div className="animate-pulse text-sm font-display">{copy?.loading ?? 'Loading activity...'}</div>
+      </div>
+    );
+  }
+
+  if (ops.length === 0) {
+    return (
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontSize: 12 }}>
+        <Terminal size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
+        <p>{copy?.empty ?? 'No agent operations logged yet.'}</p>
+        <p style={{ marginTop: 6, opacity: 0.6, fontSize: 11 }}>
+          {copy?.emptyHint ?? 'Operations from connected agents will appear here.'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: 760, margin: '0 auto', padding: '1.5rem 1rem' }}>
+      {/* Filter bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: '1.2rem', flexWrap: 'wrap' }}>
+        {KINDS.map(k => {
+          const cnt = counts[k] ?? 0;
+          if (k !== 'all' && !cnt) return null;
+          const s = k !== 'all' ? KIND_STYLE[k] : undefined;
+          const active = filter === k;
+          return (
+            <button
+              key={k}
+              onClick={() => setFilter(k)}
+              className="font-display"
+              style={{
+                display: 'inline-flex', alignItems: 'center', gap: 4,
+                padding: '3px 10px', borderRadius: 999, fontSize: '0.7rem',
+                cursor: 'pointer', border: 'none',
+                background: active ? (s?.bg ?? 'var(--accent)') : 'var(--muted)',
+                color: active ? (s?.text ?? 'var(--foreground)') : 'var(--muted-foreground)',
+                outline: active ? `1px solid ${s?.border ?? 'var(--border)'}` : 'none',
+                transition: 'all .1s',
+              }}
+            >
+              {k !== 'all' && <OpIcon kind={k} size={10} />}
+              {k === 'all' ? (locale?.startsWith('zh') ? '全部' : 'All') : KIND_LABEL[locale?.startsWith('zh') ? 'zh' : 'en'][k]} <span style={{ opacity: 0.6 }}>({cnt})</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Ops list */}
+      <div>
+        {filtered.map((op, i) => <OpCard key={op.id ?? i} op={op} copy={copy} />)}
+      </div>
+    </div>
+  );
+}