@geminilight/mindos 0.6.28 → 0.6.30

package/app/components/ask/FileChip.tsx

@@ -1,31 +1,96 @@
 'use client';
 
-import { X, FileText, Table, Paperclip } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot } from 'lucide-react';
 
 interface FileChipProps {
   path: string;
   onRemove: () => void;
-  variant?: 'kb' | 'upload';
+  variant?: 'kb' | 'upload' | 'image' | 'skill' | 'agent';
+  /** Base64 image data for hover preview (variant='image' only) */
+  imageData?: string;
+  /** MIME type for image preview */
+  imageMime?: string;
 }
 
-export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipProps) {
+const VARIANT_ICON = {
+  kb: { icon: FileText, cls: 'text-muted-foreground' },
+  upload: { icon: Paperclip, cls: 'text-muted-foreground' },
+  image: { icon: ImageIcon, cls: 'text-muted-foreground' },
+  skill: { icon: Zap, cls: 'text-[var(--amber)]' },
+  agent: { icon: Bot, cls: 'text-muted-foreground' },
+} as const;
+
+const VARIANT_STYLE = {
+  kb: 'border-border bg-muted text-foreground',
+  upload: 'border-border bg-muted text-foreground',
+  image: 'border-border bg-muted text-foreground',
+  skill: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+  agent: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+} as const;
+
+export default function FileChip({ path, onRemove, variant = 'kb', imageData, imageMime }: FileChipProps) {
+  const [showPreview, setShowPreview] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const chipRef = useRef<HTMLSpanElement>(null);
+  const [previewPos, setPreviewPos] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
   const name = path.split('/').pop() ?? path;
-  const isCsv = name.endsWith('.csv');
-  const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
-  const iconClass = variant === 'upload' ? 'text-muted-foreground' : isCsv ? 'text-success' : 'text-muted-foreground';
+  const isCsv = variant === 'kb' && name.endsWith('.csv');
+  const { icon: Icon, cls: iconClass } = isCsv
+    ? { icon: Table, cls: 'text-success' }
+    : VARIANT_ICON[variant];
+  const style = VARIANT_STYLE[variant];
+
+  // Position preview above the chip using getBoundingClientRect
+  useEffect(() => {
+    if (!showPreview || !chipRef.current) { setPreviewPos(null); return; }
+    const rect = chipRef.current.getBoundingClientRect();
+    setPreviewPos({
+      top: rect.top - 8, // 8px gap above chip
+      left: rect.left,
+    });
+  }, [showPreview]);
+
+  const preview = showPreview && previewPos && imageData && imageMime ? (
+    <div
+      className="fixed z-50 p-1 rounded-lg border border-border bg-card shadow-lg pointer-events-none"
+      style={{
+        left: previewPos.left,
+        bottom: window.innerHeight - previewPos.top,
+      }}
+    >
+      <img
+        src={`data:${imageMime};base64,${imageData}`}
+        alt={name}
+        className="max-h-48 max-w-64 rounded object-contain"
+      />
+    </div>
+  ) : null;
 
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">
-      <Icon size={11} className={`${iconClass} shrink-0`} />
-      <span className="truncate" title={path}>{name}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        aria-label={`Remove ${name}`}
-        className="p-1 -mr-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0"
+    <>
+      <span
+        ref={chipRef}
+        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border max-w-[220px] ${style}`}
+        onMouseEnter={() => imageData && setShowPreview(true)}
+        onMouseLeave={() => setShowPreview(false)}
       >
-        <X size={10} />
-      </button>
-    </span>
+        <Icon size={11} className={`${iconClass} shrink-0`} />
+        <span className="truncate" title={path}>{name}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${name}`}
+          className="p-0.5 -mr-1 rounded hover:text-foreground transition-colors shrink-0 text-muted-foreground"
+        >
+          <X size={10} />
+        </button>
+      </span>
+      {mounted && preview && createPortal(preview, document.body)}
+    </>
   );
 }

package/app/components/ask/MentionPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FileText, Table, FolderOpen } from 'lucide-react';
 import HighlightMatch from './HighlightMatch';
 
@@ -11,8 +11,26 @@ interface MentionPopoverProps {
   onSelect: (filePath: string) => void;
 }
 
+/**
+ * Popover for @ file mentions. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function MentionPopover({ results, selectedIndex, query, onSelect }: MentionPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -24,13 +42,13 @@ export default function MentionPopover({ results, selectedIndex, query, onSelect
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <FolderOpen size={11} className="text-muted-foreground/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Files</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
       {results.map((f, idx) => {
         const name = f.split('/').pop() ?? f;
         const dir = f.split('/').slice(0, -1).join('/');

package/app/components/ask/MessageList.tsx

@@ -4,25 +4,46 @@ import { useRef, useEffect } from 'react';
 import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import type { Message } from '@/lib/types';
+import type { Message, ImagePart } from '@/lib/types';
 import { stripThinkingTags } from '@/hooks/useAiOrganize';
 import ToolCallBlock from './ToolCallBlock';
 import ThinkingBlock from './ThinkingBlock';
 
 const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
 
-function UserMessageContent({ content, skillName }: { content: string; skillName?: string }) {
+function UserMessageContent({ content, skillName, images }: { content: string; skillName?: string; images?: ImagePart[] }) {
   const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
-  if (!resolved) return <>{content}</>;
   const prefixMatch = content.match(SKILL_PREFIX_RE);
   const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
   return (
     <>
-      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
-        <Zap size={10} className="shrink-0" />
-        {resolved}
-      </span>
-      {rest}
+      {/* Images */}
+      {images && images.length > 0 && (
+        <div className={`flex flex-wrap gap-1.5${content ? ' mb-2' : ''}`}>
+          {images.map((img, idx) => (
+            img.data ? (
+              <img
+                key={idx}
+                src={`data:${img.mimeType};base64,${img.data}`}
+                alt={`Image ${idx + 1}`}
+                className="max-h-48 max-w-full rounded-md object-contain"
+              />
+            ) : (
+              <div key={idx} className="h-12 px-3 rounded-md bg-muted flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>[Image {idx + 1}]</span>
+              </div>
+            )
+          ))}
+        </div>
+      )}
+      {/* Skill capsule + text */}
+      {resolved && (
+        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
+          <Zap size={10} className="shrink-0" />
+          {resolved}
+        </span>
+      )}
+      {resolved ? rest : content}
     </>
   );
 }
@@ -168,7 +189,7 @@ export default function MessageList({
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
             >
-              <UserMessageContent content={m.content} skillName={m.skillName} />
+              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} />
             </div>
           ) : m.content.startsWith('__error__') ? (
             <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">

package/app/components/ask/SlashCommandPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Zap } from 'lucide-react';
 import type { SlashItem } from '@/hooks/useSlashCommand';
 import HighlightMatch from './HighlightMatch';
@@ -12,8 +12,26 @@ interface SlashCommandPopoverProps {
   onSelect: (item: SlashItem) => void;
 }
 
+/**
+ * Popover for slash commands. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function SlashCommandPopover({ results, selectedIndex, query, onSelect }: SlashCommandPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -25,13 +43,13 @@ export default function SlashCommandPopover({ results, selectedIndex, query, onS
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <Zap size={11} className="text-[var(--amber)]/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Skills</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
         {results.map((item, idx) => (
           <button
             key={item.name}

package/app/components/help/HelpContent.tsx

@@ -3,6 +3,8 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { BookOpen, Rocket, Brain, Keyboard, HelpCircle, Bot, ChevronDown, Copy, Check } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
+import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 
 /* ── Collapsible Section ── */
 function Section({ id, icon, title, defaultOpen = false, children }: {
@@ -56,15 +58,13 @@ function PromptBlock({ text, copyLabel }: { text: string; copyLabel: string }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
-    const clean = text.replace(/^[""]|[""]$/g, '');
-    navigator.clipboard.writeText(clean).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    }).catch((err) => {
-      console.error('[HelpContent] Clipboard copy failed:', err);
-      // Show error feedback in UI
-      setCopied(true); // Reuse copied state to show error
-      setTimeout(() => setCopied(false), 2000);
+    const clean = text.replace(/^["“]|["”]$/g, '');
+    copyToClipboard(clean).then((ok) => {
+      if (ok) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+        toast.copy();
+      }
     });
   }, [text]);
 

package/app/components/panels/AgentsPanel.tsx

@@ -70,6 +70,8 @@ export default function AgentsPanel({
     navOverview: p.navOverview,
     navMcp: p.navMcp,
     navSkills: p.navSkills,
+    navNetwork: p.navNetwork,
+    navSessions: p.navSessions,
   };
 
   const hub = (

package/app/components/panels/AgentsPanelAgentDetail.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { ChevronLeft, X, Loader2, CheckCircle2, AlertCircle, Copy, Check, Monitor, Globe } from 'lucide-react';
+import { ChevronLeft, X, Loader2, CheckCircle2, AlertCircle, Copy, Monitor, Globe } from 'lucide-react';
+import { toast } from '@/lib/toast';
 import { generateSnippet } from '@/lib/mcp-snippets';
 import { copyToClipboard } from '@/lib/clipboard';
 import type { AgentInfo, McpStatus } from '../settings/types';
@@ -48,7 +49,6 @@ export default function AgentsPanelAgentDetail({
   const [installing, setInstalling] = useState(false);
   const [result, setResult] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
   const [transport, setTransport] = useState<'stdio' | 'http'>(() => agent.preferredTransport);
-  const [copied, setCopied] = useState(false);
 
   const snippet = useMemo(() => {
     if (agentStatus === 'notFound') return null;
@@ -70,10 +70,7 @@ export default function AgentsPanelAgentDetail({
   const handleCopy = async () => {
     if (!snippet) return;
     const ok = await copyToClipboard(snippet.snippet);
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
+    if (ok) toast.copy();
   };
 
   const dot =
@@ -183,8 +180,8 @@ export default function AgentsPanelAgentDetail({
               onClick={handleCopy}
               className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
-              {copied ? <Check size={14} /> : <Copy size={14} />}
-              {copied ? copy.copied : copy.copyConfig}
+              <Copy size={14} />
+              {copy.copyConfig}
             </button>
           </>
         )}

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { usePathname, useSearchParams } from 'next/navigation';
-import { LayoutDashboard, Server, Zap } from 'lucide-react';
+import { Globe, History, LayoutDashboard, Server, Zap } from 'lucide-react';
 import { PanelNavRow } from './PanelNavRow';
 
 type HubCopy = {
   navOverview: string;
   navMcp: string;
   navSkills: string;
+  navNetwork: string;
+  navSessions: string;
 };
 
 export function AgentsPanelHubNav({
@@ -25,7 +27,7 @@ export function AgentsPanelHubNav({
   return (
     <div className="py-2">
       <PanelNavRow
-        icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
+        icon={<LayoutDashboard size={14} className={inAgentsRoute && (tab === null || tab === 'overview') ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
         title={copy.navOverview}
         badge={<span className="text-2xs tabular-nums text-muted-foreground/60 px-1.5 py-0.5 rounded bg-muted/40 font-medium">{connectedCount}</span>}
         href="/agents"
@@ -43,6 +45,18 @@ export function AgentsPanelHubNav({
         href="/agents?tab=skills"
         active={inAgentsRoute && tab === 'skills'}
       />
+      <PanelNavRow
+        icon={<Globe size={14} className={inAgentsRoute && tab === 'a2a' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navNetwork}
+        href="/agents?tab=a2a"
+        active={inAgentsRoute && tab === 'a2a'}
+      />
+      <PanelNavRow
+        icon={<History size={14} className={inAgentsRoute && tab === 'sessions' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navSessions}
+        href="/agents?tab=sessions"
+        active={inAgentsRoute && tab === 'sessions'}
+      />
     </div>
   );
 }

package/app/components/panels/EchoPanel.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
 import PanelHeader from './PanelHeader';
 import { PanelNavRow } from './PanelNavRow';
+import EchoSidebarStats from './EchoSidebarStats';
 import { useLocale } from '@/lib/LocaleContext';
 import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
 
@@ -30,7 +31,7 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
-      <div className="flex-1 overflow-y-auto min-h-0">
+      <div className="flex-1 overflow-y-auto min-h-0 flex flex-col">
         <div className="flex flex-col gap-0.5 py-1.5">
           {ECHO_SEGMENT_ORDER.map((segment) => {
             const row = rowBySegment[segment];
@@ -41,6 +42,9 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
             );
           })}
         </div>
+        <div className="mt-auto">
+          <EchoSidebarStats />
+        </div>
       </div>
     </div>
   );

package/app/components/panels/EchoSidebarStats.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { TrendingUp, MessageSquare, AlertCircle } from 'lucide-react';
+import type { ContentChangeEvent } from '@/lib/fs';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface EchoStats {
+  fileCount: number;
+  unreadChanges: number;
+  sessionCount: number;
+}
+
+export default function EchoSidebarStats() {
+  const [stats, setStats] = useState<EchoStats | null>(null);
+  const [recentEvents, setRecentEvents] = useState<ContentChangeEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    const loadStats = async () => {
+      try {
+        setLoading(true);
+        const [monitoring, changes, sessions] = await Promise.all([
+          apiFetch<any>('/api/monitoring'),
+          apiFetch<any>('/api/changes?op=list&limit=3'),
+          apiFetch<any>('/api/ask-sessions'),
+        ]);
+
+        setStats({
+          fileCount: monitoring?.knowledgeBase?.fileCount ?? 0,
+          unreadChanges: changes?.events?.length ?? 0,
+          sessionCount: Array.isArray(sessions) ? sessions.length : 0,
+        });
+
+        setRecentEvents((changes?.events ?? []).slice(0, 3));
+      } catch (err) {
+        console.warn('[EchoSidebarStats] Failed to load stats:', err);
+        setStats({ fileCount: 0, unreadChanges: 0, sessionCount: 0 });
+        setRecentEvents([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadStats();
+    const interval = setInterval(loadStats, 10000); // Refresh every 10s
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading || !stats) {
+    return (
+      <div className="px-3 py-2 text-xs text-muted-foreground">
+        <div className="h-2 w-20 bg-muted rounded animate-pulse" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-3 py-3 border-t border-border">
+      {/* Quick Stats */}
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.fileCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Files</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.unreadChanges}</div>
+          <div className="text-xs text-muted-foreground truncate">Changes</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.sessionCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Chats</div>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      {recentEvents.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <div className="text-xs font-medium text-muted-foreground px-0.5">Recent</div>
+          {recentEvents.map((evt) => {
+            const relTime = formatRelativeTime(evt.ts);
+            const iconType = getIconForOp(evt.op);
+            const fileName = evt.path.split('/').pop() || evt.path;
+            return (
+              <div key={evt.id} className="flex items-start gap-2 p-1.5 rounded hover:bg-muted/40 transition-colors text-xs">
+                <span className="text-muted-foreground shrink-0 mt-0.5">{iconType}</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-foreground truncate font-medium" title={fileName}>{fileName}</p>
+                  <p className="text-muted-foreground text-2xs">{relTime}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getIconForOp(op: string): React.ReactNode {
+  switch (op) {
+    case 'create':
+      return <TrendingUp size={12} className="text-success" />;
+    case 'write':
+    case 'append':
+      return <AlertCircle size={12} className="text-foreground" />;
+    case 'delete':
+      return <AlertCircle size={12} className="text-destructive" />;
+    case 'rename':
+    case 'move':
+      return <MessageSquare size={12} className="text-muted-foreground" />;
+    default:
+      return <AlertCircle size={12} className="text-muted-foreground" />;
+  }
+}
+
+function formatRelativeTime(isoString: string): string {
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch {
+    return 'recently';
+  }
+}