@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/agents/DiscoverAgentModal.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Loader2, Globe, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { RemoteAgent } from '@/lib/a2a/types';
+
+interface DiscoverAgentModalProps {
+  open: boolean;
+  onClose: () => void;
+  onDiscover: (url: string) => Promise<RemoteAgent | null>;
+  discovering: boolean;
+  error: string | null;
+}
+
+export default function DiscoverAgentModal({
+  open,
+  onClose,
+  onDiscover,
+  discovering,
+  error,
+}: DiscoverAgentModalProps) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const [url, setUrl] = useState('');
+  const [result, setResult] = useState<RemoteAgent | null>(null);
+
+  if (!open) return null;
+
+  const handleDiscover = async () => {
+    if (!url.trim() || discovering) return;
+    setResult(null);
+    const agent = await onDiscover(url.trim());
+    if (agent) setResult(agent);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleDiscover();
+    if (e.key === 'Escape') onClose();
+  };
+
+  const handleClose = () => {
+    setUrl('');
+    setResult(null);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center overlay-backdrop" onClick={handleClose}>
+      <div
+        className="bg-popover border border-border rounded-xl shadow-lg w-full max-w-md mx-4 p-5"
+        onClick={e => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={p.a2aDiscover}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+            <Globe size={15} className="text-muted-foreground" />
+            {p.a2aDiscover}
+          </h3>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="Close"
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        <p className="text-2xs text-muted-foreground mb-3">{p.a2aDiscoverHint}</p>
+
+        <div className="flex gap-2 mb-4">
+          <input
+            type="url"
+            value={url}
+            onChange={e => setUrl(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={p.a2aDiscoverPlaceholder}
+            disabled={discovering}
+            className="flex-1 px-3 py-2 text-xs rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            autoFocus
+          />
+          <button
+            type="button"
+            onClick={handleDiscover}
+            disabled={discovering || !url.trim()}
+            className="px-3 py-2 text-xs font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring flex items-center gap-1.5 shrink-0"
+          >
+            {discovering && <Loader2 size={12} className="animate-spin" />}
+            {discovering ? p.a2aDiscovering : p.a2aDiscover}
+          </button>
+        </div>
+
+        {error && !result && (
+          <div className="rounded-lg border border-error/30 bg-error/5 px-3 py-2.5 mb-3">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={14} className="text-error mt-0.5 shrink-0" />
+              <div>
+                <p className="text-xs font-medium text-error">{p.a2aDiscoverFailed}</p>
+                <p className="text-2xs text-muted-foreground mt-0.5">{p.a2aDiscoverFailedHint}</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {result && (
+          <div className="rounded-lg border border-success/30 bg-success/5 px-3 py-2.5">
+            <div className="flex items-start gap-2">
+              <CheckCircle2 size={14} className="text-success mt-0.5 shrink-0" />
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-success mb-1.5">{p.a2aDiscoverSuccess}</p>
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-foreground truncate" title={result.card.name}>
+                    {result.card.name}
+                    <span className="text-2xs text-muted-foreground ml-1.5">v{result.card.version}</span>
+                  </p>
+                  <p className="text-2xs text-muted-foreground truncate" title={result.card.description}>
+                    {result.card.description}
+                  </p>
+                  {result.card.skills.length > 0 && (
+                    <div className="mt-1.5">
+                      <p className="text-2xs text-muted-foreground mb-1">{p.a2aSkills}:</p>
+                      <div className="flex flex-wrap gap-1">
+                        {result.card.skills.map(s => (
+                          <span
+                            key={s.id}
+                            className="text-2xs px-1.5 py-0.5 rounded bg-muted/80 text-muted-foreground border border-border/50"
+                            title={s.description}
+                          >
+                            {s.name}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <p className="text-2xs text-muted-foreground mt-1 truncate" title={result.endpoint}>
+                    {p.a2aEndpoint}: {result.endpoint}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/agents/EnvPermSection.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Key, Shield, ShieldCheck } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { AgentInfo } from '../settings/types';
+import { DetailLine } from './agent-detail-primitives';
+
+export default function EnvPermSection({
+  agent,
+  isMindOS,
+}: {
+  agent: AgentInfo;
+  isMindOS: boolean;
+}) {
+  const { t } = useLocale();
+  const d = t.agentsContent.detail;
+
+  const scope = agent.scope ?? (agent.hasProjectScope ? 'project' : agent.hasGlobalScope ? 'global' : '—');
+  const hasHiddenRoot = agent.hiddenRootPresent ?? false;
+
+  const permissions = [
+    { label: d.envFileAccess, allowed: true },
+    { label: d.envNetworkAccess, allowed: agent.transport === 'http' || isMindOS },
+    { label: d.envWriteAccess, allowed: true },
+    { label: d.envReadOnly, allowed: false },
+  ];
+
+  return (
+    <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+      <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+        <div className="w-6 h-6 rounded-md bg-[var(--amber-subtle)] flex items-center justify-center"><Key size={13} className="text-[var(--amber)]" /></div>
+        {d.envPermTitle}
+      </h2>
+
+      <div className="flex flex-wrap gap-x-6 gap-y-1 py-2 border-y border-border/30">
+        <DetailLine label={d.envScope} value={scope} />
+        <DetailLine label={d.format} value={agent.format} />
+        {agent.hiddenRootPath && (
+          <DetailLine label={d.hiddenRoot} value={agent.hiddenRootPath} />
+        )}
+        <DetailLine label={d.skillMode} value={agent.skillMode ?? '—'} />
+      </div>
+
+      <div className="space-y-1">
+        <p className="text-2xs font-medium text-muted-foreground/60 uppercase tracking-wider mb-1.5">
+          {d.envVars}
+        </p>
+        {agent.configuredMcpServers && agent.configuredMcpServers.length > 0 ? (
+          <p className="text-2xs text-muted-foreground">{d.envVarsCount(agent.configuredMcpServers.length)}</p>
+        ) : (
+          <p className="text-2xs text-muted-foreground/50">{d.envVarsEmpty}</p>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <p className="text-2xs font-medium text-muted-foreground/60 uppercase tracking-wider">
+          Permissions
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {permissions.map((perm) => (
+            <div
+              key={perm.label}
+              className={`inline-flex items-center gap-1 px-2 py-0.5 text-2xs rounded-md border ${perm.allowed
+                ? 'text-[var(--success)] bg-[var(--success)]/5 border-[var(--success)]/20'
+                : 'text-muted-foreground/40 bg-muted/5 border-border/30 line-through'
+                }`}
+            >
+              {perm.allowed ? <ShieldCheck size={10} /> : <Shield size={10} />}
+              {perm.label}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {hasHiddenRoot && (
+        <p className="text-2xs text-muted-foreground/50 border-t border-border/20 pt-2">
+          Hidden root directory is active for this agent.
+        </p>
+      )}
+    </section>
+  );
+}

package/_standalone/components/agents/KnowledgeInteractionSection.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  BookOpen, CheckCircle2, AlertCircle, ChevronDown, Clock,
+  FileEdit, FilePlus, Loader2, Search, Terminal, Trash2,
+} from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { encodePath } from '@/lib/utils';
+
+// ---------------------------------------------------------------------------
+// Types & helpers
+// ---------------------------------------------------------------------------
+
+interface AuditEvent {
+  id: string;
+  ts: string;
+  tool: string;
+  params: Record<string, unknown>;
+  result: 'ok' | 'error';
+  message?: string;
+  durationMs?: number;
+}
+
+type InteractionKind = 'read' | 'write' | 'create' | 'delete' | 'search' | 'other';
+
+function classifyTool(tool: string): InteractionKind {
+  if (/search/.test(tool)) return 'search';
+  if (/read|list|get/.test(tool)) return 'read';
+  if (/create|batch_create/.test(tool)) return 'create';
+  if (/delete/.test(tool)) return 'delete';
+  if (/write|update|insert|append|edit|rename|move/.test(tool)) return 'write';
+  return 'other';
+}
+
+const INTERACTION_ICON: Record<InteractionKind, { icon: typeof Clock; color: string }> = {
+  read: { icon: Clock, color: 'text-blue-400' },
+  write: { icon: FileEdit, color: 'text-[var(--amber)]' },
+  create: { icon: FilePlus, color: 'text-[var(--success)]' },
+  delete: { icon: Trash2, color: 'text-[var(--error)]' },
+  search: { icon: Search, color: 'text-purple-400' },
+  other: { icon: Terminal, color: 'text-muted-foreground' },
+};
+
+function interactionAge(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const m = Math.floor(diff / 60_000);
+  if (m < 1) return '<1m';
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(diff / 3_600_000);
+  if (h < 24) return `${h}h`;
+  return `${Math.floor(diff / 86_400_000)}d`;
+}
+
+const VISIBLE_EVENTS = 5;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function KnowledgeInteractionSection() {
+  const { t } = useLocale();
+  const d = t.agentsContent?.detail;
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAll, setShowAll] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const doFetch = () => {
+      fetch('/api/agent-activity?limit=50')
+        .then(r => r.json())
+        .then(data => { if (!cancelled) setEvents(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 stats = useMemo(() => {
+    if (events.length === 0) return null;
+    const reads = events.filter(e => classifyTool(e.tool) === 'read').length;
+    const writes = events.filter(e => ['write', 'create', 'delete'].includes(classifyTool(e.tool))).length;
+    const errors = events.filter(e => e.result === 'error').length;
+    const durations = events.filter(e => typeof e.durationMs === 'number').map(e => e.durationMs!);
+    const avgMs = durations.length > 0 ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length) : null;
+    const files = new Set<string>();
+    for (const e of events) {
+      const p = e.params.path;
+      if (typeof p === 'string') files.add(p);
+    }
+    const errorRate = events.length > 0 ? Math.round((errors / events.length) * 100) : 0;
+    return { total: events.length, reads, writes, errors, errorRate, avgMs, filesCount: files.size };
+  }, [events]);
+
+  const meaningful = useMemo(() => {
+    const writeOps = events.filter(e => {
+      const k = classifyTool(e.tool);
+      return k === 'write' || k === 'create' || k === 'delete';
+    });
+    return writeOps.length >= 3 ? writeOps : events;
+  }, [events]);
+
+  const visible = showAll ? meaningful : meaningful.slice(0, VISIBLE_EVENTS);
+  const hiddenCount = meaningful.length - VISIBLE_EVENTS;
+
+  if (loading) {
+    return (
+      <section className="rounded-xl border border-border bg-card p-4">
+        <div className="flex justify-center py-6">
+          <Loader2 size={16} className="animate-spin text-muted-foreground" />
+        </div>
+      </section>
+    );
+  }
+
+  if (events.length === 0) {
+    return (
+      <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+        <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+          <div className="w-6 h-6 rounded-md bg-[var(--amber-subtle)] flex items-center justify-center"><BookOpen size={13} className="text-[var(--amber)]" /></div>
+          {d?.knowledgeInteraction ?? 'Knowledge Interaction'}
+        </h2>
+        <div className="rounded-lg border border-border/40 bg-card/30 px-4 py-6 text-center">
+          <BookOpen size={20} className="text-muted-foreground/30 mx-auto mb-2" />
+          <p className="text-2xs text-muted-foreground/50">{d?.knowledgeNoData ?? 'No interactions yet. Agents will show activity here once they start working with your knowledge base.'}</p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="rounded-xl border border-border bg-card overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 pt-4 pb-2">
+        <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+          <div className="w-6 h-6 rounded-md bg-[var(--amber-subtle)] flex items-center justify-center"><BookOpen size={13} className="text-[var(--amber)]" /></div>
+          {d?.knowledgeInteraction ?? 'Knowledge Interaction'}
+        </h2>
+        <Link
+          href={`/view/${encodePath('.mindos/agent-audit-log.json')}`}
+          className="text-2xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity"
+        >
+          {d?.viewFullLog ?? 'View log'} →
+        </Link>
+      </div>
+
+      {/* Stats bar */}
+      {stats && (
+        <div className="flex items-center gap-px mx-4 mb-3 rounded-lg overflow-hidden border border-border/40">
+          <div className="flex-1 px-3 py-2 bg-muted/20">
+            <p className="text-2xs text-muted-foreground/50 leading-none mb-1">{d?.statTotalCalls ?? 'Calls'}</p>
+            <p className="text-sm font-semibold text-foreground font-mono tabular-nums leading-none">{stats.total}</p>
+          </div>
+          <div className="flex-1 px-3 py-2 bg-muted/20 border-l border-border/30">
+            <p className="text-2xs text-muted-foreground/50 leading-none mb-1">{d?.statFilesTouched ?? 'Files'}</p>
+            <p className="text-sm font-semibold text-foreground font-mono tabular-nums leading-none">{stats.filesCount}</p>
+          </div>
+          <div className="flex-1 px-3 py-2 bg-muted/20 border-l border-border/30">
+            <p className="text-2xs text-muted-foreground/50 leading-none mb-1">{d?.statReadWrite ?? 'R / W'}</p>
+            <p className="text-sm font-semibold text-foreground font-mono tabular-nums leading-none">
+              <span className="text-blue-400">{stats.reads}</span>
+              <span className="text-muted-foreground/30 mx-0.5">/</span>
+              <span className="text-[var(--amber)]">{stats.writes}</span>
+            </p>
+          </div>
+          <div className="flex-1 px-3 py-2 bg-muted/20 border-l border-border/30">
+            <p className="text-2xs text-muted-foreground/50 leading-none mb-1">{d?.statHealth ?? 'Health'}</p>
+            <p className="text-sm font-semibold font-mono tabular-nums leading-none">
+              {stats.errors > 0 ? (
+                <span className="text-[var(--error)]">{stats.errorRate}% err</span>
+              ) : (
+                <span className="text-[var(--success)]">100%</span>
+              )}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Timeline */}
+      <div className="border-t border-border/40">
+        <div className="px-4 py-2 flex items-center justify-between">
+          <p className="text-2xs text-muted-foreground/40 uppercase tracking-wider">{d?.recentOps ?? 'Recent operations'}</p>
+        </div>
+        {visible.map((ev, i) => {
+          const kind = classifyTool(ev.tool);
+          const { icon: Icon, color } = INTERACTION_ICON[kind];
+          const filePath = typeof ev.params.path === 'string' ? ev.params.path : null;
+          const toolShort = ev.tool.replace(/^mindos_/, '');
+
+          return (
+            <div
+              key={ev.id ?? i}
+              className={`flex items-center gap-3 px-4 py-2 ${i > 0 ? 'border-t border-border/20' : 'border-t border-border/20'} hover:bg-muted/20 transition-colors`}
+            >
+              <div className="w-5 h-5 rounded-md bg-muted/40 flex items-center justify-center shrink-0">
+                <Icon size={11} className={color} />
+              </div>
+              <span className="text-xs font-medium text-foreground/80 font-mono shrink-0 min-w-[90px]">{toolShort}</span>
+              {filePath ? (
+                <Link
+                  href={`/view/${encodePath(filePath)}`}
+                  className="text-xs text-muted-foreground hover:text-[var(--amber)] truncate min-w-0 flex-1 font-mono transition-colors"
+                  title={filePath}
+                >
+                  {filePath}
+                </Link>
+              ) : (
+                <span className="flex-1" />
+              )}
+              {ev.result === 'ok'
+                ? <CheckCircle2 size={10} className="shrink-0 text-[var(--success)]/40" />
+                : <AlertCircle size={10} className="shrink-0 text-[var(--error)]/60" />
+              }
+              <span className="text-2xs text-muted-foreground/30 tabular-nums shrink-0 font-mono w-[28px] text-right" title={ev.ts}>
+                {interactionAge(ev.ts)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Show more */}
+      {hiddenCount > 0 && (
+        <div className="px-4 py-2 border-t border-border/20">
+          <button
+            onClick={() => setShowAll(v => !v)}
+            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+          >
+            <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+            <span>{showAll ? (d?.showLess ?? 'Show less') : `${hiddenCount} more`}</span>
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}

package/_standalone/components/agents/RecentActivityFeed.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import Link from 'next/link';
+import { CheckCircle2, AlertCircle, ChevronDown, Activity, ArrowRight } from 'lucide-react';
+import { encodePath } from '@/lib/utils';
+import { useLocale } from '@/lib/stores/locale-store';
+import {
+  type AgentOp,
+  opKind, KindBadge, relativeTs, getFilePath,
+} from './agent-activity-shared';
+
+const VISIBLE_OPS = 5;
+
+export default function RecentActivityFeed() {
+  const { t, locale } = useLocale();
+  const [ops, setOps] = useState<AgentOp[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAll, setShowAll] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const doFetch = () => {
+      fetch('/api/agent-activity?limit=20')
+        .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); };
+  }, []);
+
+  // Filter out read-only noise, show writes/creates/deletes first
+  const meaningful = useMemo(() => {
+    const writes = ops.filter(op => {
+      const k = opKind(op.tool);
+      return k === 'write' || k === 'create' || k === 'delete';
+    });
+    return writes.length >= 3 ? writes : ops;
+  }, [ops]);
+
+  const visible = showAll ? meaningful : meaningful.slice(0, VISIBLE_OPS);
+  const hiddenCount = meaningful.length - VISIBLE_OPS;
+
+  if (loading) return (
+    <section className="animate-pulse" aria-label="Recent Activity">
+      <div className="h-4 w-36 bg-muted rounded mb-3" />
+      <div className="space-y-2">
+        <div className="h-10 bg-muted/50 rounded-lg" />
+        <div className="h-10 bg-muted/50 rounded-lg" />
+      </div>
+    </section>
+  );
+
+  if (ops.length === 0) return null;
+
+  const copy = t.agentsContent?.overview;
+
+  return (
+    <section aria-label="Recent Activity">
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Activity size={13} /></div>
+        <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
+          {copy?.recentActivity ?? 'Recent Activity'}
+        </h2>
+        <div className="ml-auto">
+          <Link
+            href="/agents?tab=activity"
+            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors"
+          >
+            <ArrowRight size={12} />
+            <span>{copy?.viewAll ?? 'View all'}</span>
+          </Link>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-border bg-card overflow-hidden">
+        {visible.map((op, i) => {
+          const kind = opKind(op.tool);
+          const filePath = getFilePath(op.params);
+
+          return (
+            <div
+              key={op.id ?? i}
+              className={`flex items-center gap-3 px-3.5 py-2.5 ${
+                i > 0 ? 'border-t border-border/30' : ''
+              } hover:bg-muted/30 transition-colors`}
+            >
+              <KindBadge kind={kind} locale={locale} size="sm" />
+
+              {filePath ? (
+                <Link
+                  href={`/view/${encodePath(filePath)}`}
+                  className="text-xs text-[var(--amber)]/80 hover:text-[var(--amber)] truncate min-w-0 flex-1 font-display transition-colors"
+                  title={filePath}
+                >
+                  {filePath}
+                </Link>
+              ) : (
+                <span className="flex-1" />
+              )}
+
+              {/* agent name badge */}
+              {op.agentName && (
+                <span className="text-[0.6rem] font-medium text-muted-foreground/70 bg-muted/60 px-1.5 py-0.5 rounded-full shrink-0" title={op.agentName}>
+                  {op.agentName.length > 20 ? op.agentName.slice(0, 20) + '...' : op.agentName}
+                </span>
+              )}
+
+              {op.result === 'ok'
+                ? <CheckCircle2 size={11} className="shrink-0 text-[var(--success)]/60" />
+                : <AlertCircle size={11} className="shrink-0 text-[var(--error)]/60" />
+              }
+
+              <span className="text-2xs text-muted-foreground/40 tabular-nums shrink-0" title={op.ts}>
+                {relativeTs(op.ts)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {hiddenCount > 0 && (
+        <button
+          onClick={() => setShowAll(v => !v)}
+          className="flex items-center gap-1.5 mt-2 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+        >
+          <ChevronDown size={12} className={`transition-transform duration-200 ${showAll ? 'rotate-180' : ''}`} />
+          <span>{showAll ? (copy?.showLess ?? 'Show less') : `${hiddenCount} more`}</span>
+        </button>
+      )}
+    </section>
+  );
+}