@geminilight/mindos 0.6.39 → 0.6.41

package/_standalone/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>
+  );
+}

package/_standalone/components/agents/AgentsMcpSection.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { RefreshCw, Search, Server } from 'lucide-react';
-import type { McpContextValue } from '@/hooks/useMcpData';
+import type { McpContextValue } from '@/lib/stores/mcp-store';
 import type { AgentBuckets, AgentStatusFilter, AgentTransportFilter } from './agents-content-model';
 import {
   ActionButton,
@@ -339,6 +339,9 @@ function ByAgentView({
                         variant="primary"
                       />
                     )}
+                    {!agent.installed && (
+                      <span className="text-2xs text-muted-foreground/60">or CLI Skill</span>
+                    )}
                   </div>
                 </div>
 
@@ -385,14 +388,10 @@ function ByServerView({
   const [reconnectingServer, setReconnectingServer] = useState<string | null>(null);
   const [reconnectMsg, setReconnectMsg] = useState<Record<string, string>>({});
 
-  const isMindosServer = (name: string) => name.toLowerCase().includes('mindos');
-
   const handleAddAgent = useCallback(
-    async (agentKey: string, serverName: string) => {
+    async (agentKey: string, _serverName: string) => {
       setPickerServer(null);
-      if (isMindosServer(serverName)) {
-        await onInstallMindos(agentKey);
-      }
+      await onInstallMindos(agentKey);
     },
     [onInstallMindos],
   );
@@ -442,10 +441,7 @@ function ByServerView({
             .map((name) => allAgents.find((a) => a.name === name))
             .filter(Boolean) as typeof allAgents;
           const orphanNames = srv.agents.filter((name) => !agentDetails.some((a) => a.name === name));
-          const canManage = isMindosServer(srv.serverName);
-          const availableToAdd = canManage
-            ? allAgents.filter((a) => !srv.agents.includes(a.name))
-            : [];
+          const availableToAdd = allAgents.filter((a) => !srv.agents.includes(a.name));
 
           const connectedCount = agentDetails.filter((a) => resolveAgentStatus(a) === 'connected').length;
           const detectedCount = agentDetails.filter((a) => resolveAgentStatus(a) === 'detected').length;
@@ -462,7 +458,7 @@ function ByServerView({
                   <span className="text-sm font-semibold text-foreground truncate">{srv.serverName}</span>
                 </div>
                 <div className="flex items-center gap-1.5 shrink-0">
-                  {canManage && agentDetails.length > 0 && (
+                  {agentDetails.length > 0 && (
                     <ActionButton
                       onClick={() => void handleReconnectAllInServer(srv.serverName, agentDetails)}
                       disabled={reconnectingServer !== null || busyAction !== null}
@@ -471,8 +467,7 @@ function ByServerView({
                       busyLabel={copy.reconnectAllRunning}
                     />
                   )}
-                  {canManage && (
-                    <div className="relative">
+                  <div className="relative">
                       <AddAvatarButton
                         onClick={() => setPickerServer(pickerServer === srv.serverName ? null : srv.serverName)}
                         label={copy.addAgent}
@@ -486,7 +481,6 @@ function ByServerView({
                         onClose={() => setPickerServer(null)}
                       />
                     </div>
-                  )}
                 </div>
               </div>
 
@@ -526,7 +520,7 @@ function ByServerView({
                       <AgentAvatar
                         name={agent.name}
                         status={agentStatus}
-                        onRemove={canManage ? () => setConfirmState({ agentName: agent.name, serverName: srv.serverName }) : undefined}
+                        onRemove={() => setConfirmState({ agentName: agent.name, serverName: srv.serverName })}
                       />
                     </Link>
                   );

package/_standalone/components/agents/AgentsOverviewSection.tsx

@@ -79,15 +79,16 @@ export default function AgentsOverviewSection({
   a2aCount?: number;
 }) {
   const allHealthy = riskQueue.length === 0 && mcpRunning;
-  const totalAgents = allAgents.length;
   const [riskOpen, setRiskOpen] = useState(false);
 
   const sortedAgents = useMemo(
     () =>
-      [...allAgents].sort((a, b) => {
-        const rank = (x: AgentInfo) => (x.present && x.installed ? 0 : x.present ? 1 : 2);
-        return rank(a) - rank(b) || a.name.localeCompare(b.name);
-      }),
+      [...allAgents]
+        .filter(a => a.present) // hide not-found agents from overview
+        .sort((a, b) => {
+          const rank = (x: AgentInfo) => (x.installed ? 0 : 1);
+          return rank(a) - rank(b) || a.name.localeCompare(b.name);
+        }),
     [allAgents],
   );
 
@@ -103,7 +104,7 @@ export default function AgentsOverviewSection({
             icon={<Zap size={14} aria-hidden="true" />}
             label={pulseCopy.connected}
             value={buckets.connected.length}
-            total={totalAgents}
+            total={sortedAgents.length}
             tone="ok"
           />
           <StatCell
@@ -143,6 +144,26 @@ export default function AgentsOverviewSection({
         </div>
       </section>
 
+      {/* ═══════════ QUICK NAVIGATION ═══════════ */}
+      <nav className="grid grid-cols-1 md:grid-cols-2 gap-3" aria-label="Quick navigation">
+        <QuickNavCard
+          href="/agents?tab=mcp"
+          icon={<Server size={18} aria-hidden="true" />}
+          title="MCP"
+          stat={mcpRunning ? copy.toolsUnit(mcpToolCount) : copy.mcpOffline}
+          statTone={mcpRunning ? 'ok' : 'warn'}
+          description={copy.nextActionHint as string}
+        />
+        <QuickNavCard
+          href="/agents?tab=skills"
+          icon={<Zap size={18} aria-hidden="true" />}
+          title="Skills"
+          stat={copy.enabledUnit(enabledSkillCount)}
+          statTone="ok"
+          description={`${pulseCopy.enabledSkills}: ${enabledSkillCount}`}
+        />
+      </nav>
+
       {/* ═══════════ RISK CAPSULE ═══════════ */}
       {riskQueue.length > 0 && (
         <div>
@@ -206,26 +227,6 @@ export default function AgentsOverviewSection({
         </div>
       )}
 
-      {/* ═══════════ QUICK NAVIGATION ═══════════ */}
-      <nav className="grid grid-cols-1 md:grid-cols-2 gap-3" aria-label="Quick navigation">
-        <QuickNavCard
-          href="/agents?tab=mcp"
-          icon={<Server size={18} aria-hidden="true" />}
-          title="MCP"
-          stat={mcpRunning ? copy.toolsUnit(mcpToolCount) : copy.mcpOffline}
-          statTone={mcpRunning ? 'ok' : 'warn'}
-          description={copy.nextActionHint as string}
-        />
-        <QuickNavCard
-          href="/agents?tab=skills"
-          icon={<Zap size={18} aria-hidden="true" />}
-          title="Skills"
-          stat={copy.enabledUnit(enabledSkillCount)}
-          statTone="ok"
-          description={`${pulseCopy.enabledSkills}: ${enabledSkillCount}`}
-        />
-      </nav>
-
       {/* ═══════════ RECENT ACTIVITY ═══════════ */}
       <RecentActivityFeed />
 
@@ -235,7 +236,7 @@ export default function AgentsOverviewSection({
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-sm font-medium text-foreground">{copy.usagePulse}</h2>
             <span className="text-2xs text-muted-foreground tabular-nums select-none">
-              {copy.agentCount(totalAgents)}
+              {copy.agentCount(sortedAgents.length)}
             </span>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">

package/_standalone/components/agents/AgentsPanelA2aTab.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback } from 'react';
 import { Check, ChevronDown, ChevronUp, Clock, Code2, Download, Globe, Loader2, MessageSquare, Network, RefreshCw, RotateCcw, Save, Settings2, Trash2, Wifi, WifiOff, Wrench, Zap } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import { useAcpConfig } from '@/hooks/useAcpConfig';
 import type { RemoteAgent, DelegationRecord } from '@/lib/a2a/types';
 import type { AcpRegistryEntry } from '@/lib/acp/types';

package/_standalone/components/agents/AgentsPanelSessionsTab.tsx

@@ -33,7 +33,12 @@ export default function AgentsPanelSessionsTab() {
     }
   }, []);
 
-  useEffect(() => { fetchSessions(); }, [fetchSessions]);
+  useEffect(() => {
+    fetchSessions();
+    const onVisible = () => { if (document.visibilityState === 'visible') fetchSessions(); };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => { document.removeEventListener('visibilitychange', onVisible); };
+  }, [fetchSessions]);
 
   const handleClose = useCallback(async (sessionId: string) => {
     try {

package/_standalone/components/agents/AgentsSkillsSection.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { ChevronDown, ChevronRight, Search, Trash2, Zap } from 'lucide-react';
 import { Toggle } from '@/components/settings/Primitives';
 import { apiFetch } from '@/lib/api';
-import type { McpContextValue } from '@/hooks/useMcpData';
+import type { McpContextValue } from '@/lib/stores/mcp-store';
 import type {
   AgentBuckets,
   SkillCapabilityFilter,

package/_standalone/components/agents/DiscoverAgentModal.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { X, Loader2, Globe, AlertCircle, CheckCircle2 } from 'lucide-react';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
 import type { RemoteAgent } from '@/lib/a2a/types';
 
 interface DiscoverAgentModalProps {

package/_standalone/components/agents/RecentActivityFeed.tsx

@@ -2,89 +2,35 @@
 
 import { useEffect, useState, useMemo } from 'react';
 import Link from 'next/link';
-import {
-  Terminal, FileEdit, FilePlus, Trash2, Search, Clock,
-  CheckCircle2, AlertCircle, ChevronDown, ArrowRight,
-} from 'lucide-react';
+import { CheckCircle2, AlertCircle, ChevronDown, Activity, ArrowRight } from 'lucide-react';
 import { encodePath } from '@/lib/utils';
-import { useLocale } from '@/lib/LocaleContext';
-
-/* ── Types ── */
-
-interface AgentOp {
-  id: string;
-  ts: string;
-  tool: string;
-  params: Record<string, unknown>;
-  result: 'ok' | 'error';
-  message?: string;
-}
-
-type OpKind = 'read' | 'write' | 'create' | 'delete' | 'search' | 'other';
-
-/* ── Helpers ── */
-
-function opKind(tool: string): OpKind {
-  if (/search/.test(tool)) return 'search';
-  if (/read|list|get/.test(tool)) return 'read';
-  if (/create/.test(tool)) return 'create';
-  if (/delete/.test(tool)) return 'delete';
-  if (/write|update|insert|append/.test(tool)) return 'write';
-  return 'other';
-}
-
-const KIND_COLOR: Record<OpKind, string> = {
-  read: 'text-blue-400',
-  write: 'text-[var(--amber)]',
-  create: 'text-[var(--success)]',
-  delete: 'text-[var(--error)]',
-  search: 'text-purple-400',
-  other: 'text-muted-foreground',
-};
-
-function OpIcon({ kind }: { kind: OpKind }) {
-  const cls = `shrink-0 ${KIND_COLOR[kind]}`;
-  const s = 12;
-  if (kind === 'read') return <Clock size={s} className={cls} />;
-  if (kind === 'write') return <FileEdit size={s} className={cls} />;
-  if (kind === 'create') return <FilePlus size={s} className={cls} />;
-  if (kind === 'delete') return <Trash2 size={s} className={cls} />;
-  if (kind === 'search') return <Search size={s} className={cls} />;
-  return <Terminal size={s} className={cls} />;
-}
-
-function relativeTs(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`;
-}
-
-function getFilePath(params: Record<string, unknown>): string | null {
-  return typeof params.path === 'string' ? params.path : null;
-}
+import { useLocale } from '@/lib/stores/locale-store';
+import {
+  type AgentOp,
+  opKind, KindBadge, relativeTs, getFilePath,
+} from './agent-activity-shared';
 
 const VISIBLE_OPS = 5;
 
-/* ── Component ── */
-
 export default function RecentActivityFeed() {
-  const { t } = useLocale();
+  const { t, locale } = useLocale();
   const [ops, setOps] = useState<AgentOp[]>([]);
   const [loading, setLoading] = useState(true);
   const [showAll, setShowAll] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
-    fetch('/api/agent-activity?limit=20')
-      .then(r => r.json())
-      .then(data => { if (!cancelled) setOps(data.events ?? []); })
-      .catch(() => {})
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
+    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
@@ -93,36 +39,48 @@ export default function RecentActivityFeed() {
       const k = opKind(op.tool);
       return k === 'write' || k === 'create' || k === 'delete';
     });
-    // If few writes, also show reads/searches
     return writes.length >= 3 ? writes : ops;
   }, [ops]);
 
   const visible = showAll ? meaningful : meaningful.slice(0, VISIBLE_OPS);
   const hiddenCount = meaningful.length - VISIBLE_OPS;
 
-  if (loading || ops.length === 0) return null;
+  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 justify-between mb-3">
-        <h2 className="text-sm font-medium text-foreground">
+      <div className="flex items-center gap-2 mb-4">
+        <span className="text-[var(--amber)]"><Activity size={13} /></span>
+        <h2 className="text-sm font-semibold font-display text-foreground">
           {copy?.recentActivity ?? 'Recent Activity'}
         </h2>
-        <Link
-          href={`/view/${encodePath('.mindos/agent-audit-log.json')}`}
-          className="text-2xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity font-display"
-        >
-          {copy?.viewAll ?? 'View all'} →
-        </Link>
+        <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 font-display"
+          >
+            <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);
-          const toolShort = op.tool.replace(/^mindos_/, '');
 
           return (
             <div
@@ -131,11 +89,7 @@ export default function RecentActivityFeed() {
                 i > 0 ? 'border-t border-border/30' : ''
               } hover:bg-muted/30 transition-colors`}
             >
-              <OpIcon kind={kind} />
-
-              <span className="text-xs font-medium text-foreground font-display shrink-0">
-                {toolShort}
-              </span>
+              <KindBadge kind={kind} locale={locale} size="sm" />
 
               {filePath ? (
                 <Link
@@ -149,6 +103,13 @@ export default function RecentActivityFeed() {
                 <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 font-display" 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" />