@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/TrashPageClient.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+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 { restoreFromTrashAction, permanentlyDeleteAction, emptyTrashAction } from '@/lib/actions';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { toast } from '@/lib/toast';
+import type { TrashMeta } from '@/lib/core/trash';
+
+function relativeTimeShort(iso: string): string {
+  const delta = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(delta / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function daysUntil(iso: string): number {
+  return Math.max(0, Math.ceil((new Date(iso).getTime() - Date.now()) / 86400000));
+}
+
+export default function TrashPageClient({ initialItems }: { initialItems: TrashMeta[] }) {
+  const { t } = useLocale();
+  const router = useRouter();
+  const [items, setItems] = useState(initialItems);
+  const [isPending, startTransition] = useTransition();
+  const [confirmEmpty, setConfirmEmpty] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState<TrashMeta | null>(null);
+  const [conflictItem, setConflictItem] = useState<TrashMeta | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const handleRestore = useCallback(async (item: TrashMeta) => {
+    setBusyId(item.id);
+    try {
+      const result = await restoreFromTrashAction(item.id, 'restore');
+      if (result.success) {
+        setItems(prev => prev.filter(i => i.id !== item.id));
+        toast.success(t.trash.restored);
+        router.refresh();
+      } else if (result.conflict) {
+        setConflictItem(item);
+      } else {
+        toast.error(result.error ?? 'Failed to restore');
+      }
+    } finally {
+      setBusyId(null);
+    }
+  }, [t, router]);
+
+  const handleConflictResolve = useCallback(async (mode: 'overwrite' | 'copy') => {
+    if (!conflictItem) return;
+    const result = await restoreFromTrashAction(conflictItem.id, mode);
+    if (result.success) {
+      setItems(prev => prev.filter(i => i.id !== conflictItem.id));
+      toast.success(t.trash.restored);
+      setConflictItem(null);
+      router.refresh();
+    } else {
+      toast.error(result.error ?? 'Failed to restore');
+    }
+  }, [conflictItem, t, router]);
+
+  const handlePermanentDelete = useCallback(async () => {
+    if (!confirmDelete) return;
+    const result = await permanentlyDeleteAction(confirmDelete.id);
+    if (result.success) {
+      setItems(prev => prev.filter(i => i.id !== confirmDelete.id));
+      toast.success(t.trash.deleted);
+    } else {
+      toast.error(result.error ?? 'Failed to delete');
+    }
+    setConfirmDelete(null);
+  }, [confirmDelete, t]);
+
+  const handleEmptyTrash = useCallback(async () => {
+    startTransition(async () => {
+      const result = await emptyTrashAction();
+      if (result.success) {
+        setItems([]);
+        toast.success(t.trash.emptied(result.count ?? 0));
+      } else {
+        toast.error(result.error ?? 'Failed to empty trash');
+      }
+      setConfirmEmpty(false);
+    });
+  }, [t]);
+
+  return (
+    <div className="min-h-screen">
+      <div className="px-4 md:px-6 pt-6 md:pt-8">
+        <div className="content-width xl:mr-[220px] rounded-xl border border-border bg-card px-4 py-3 md:px-5 md:py-4">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
+                <Trash2 size={15} />
+                {t.trash.title}
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t.trash.subtitle}
+              </p>
+              {items.length > 0 && (
+                <div className="mt-2 text-xs text-muted-foreground">
+                  {t.trash.itemCount(items.length)}
+                </div>
+              )}
+            </div>
+            {items.length > 0 && (
+              <button
+                type="button"
+                onClick={() => setConfirmEmpty(true)}
+                disabled={isPending}
+                className="px-2.5 py-1.5 rounded-md text-xs font-medium bg-error/10 text-error hover:bg-error/20 transition-colors disabled:opacity-50"
+              >
+                {t.trash.emptyTrash}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="px-4 md:px-6 py-4 md:py-6">
+        <div className="content-width xl:mr-[220px]">
+          {items.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
+              <Trash2 size={32} className="mx-auto text-muted-foreground/30 mb-3" />
+              <p className="text-sm text-muted-foreground font-display">{t.trash.empty}</p>
+              <p className="text-xs text-muted-foreground/60 mt-1">{t.trash.emptySubtext}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+              {items.map(item => {
+                const days = daysUntil(item.expiresAt);
+                const isExpiring = days <= 3;
+                return (
+                  <div
+                    key={item.id}
+                    className="rounded-xl border border-border bg-card p-4 flex flex-col gap-3 hover:border-border/80 transition-colors"
+                  >
+                    <div className="flex items-start gap-3 min-w-0">
+                      <div className="w-9 h-9 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                        {item.isDirectory
+                          ? <Folder size={16} className="text-muted-foreground" />
+                          : item.fileName.endsWith('.csv')
+                            ? <Table size={16} className="text-success" />
+                            : <FileText size={16} className="text-muted-foreground" />
+                        }
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium text-foreground truncate" title={item.fileName}>
+                          {item.fileName}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate mt-0.5" title={item.originalPath}>
+                          {t.trash.from}: {item.originalPath.split('/').slice(0, -1).join('/') || '/'}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-2xs text-muted-foreground">
+                          {t.trash.deletedAgo(relativeTimeShort(item.deletedAt))}
+                        </span>
+                        <span className={`text-2xs ${isExpiring ? 'text-error' : 'text-muted-foreground/60'}`}>
+                          {isExpiring && <AlertTriangle size={9} className="inline mr-0.5" />}
+                          {t.trash.expiresIn(days)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <button
+                          type="button"
+                          onClick={() => handleRestore(item)}
+                          disabled={busyId === item.id}
+                          className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-success/10 text-success hover:bg-success/20 transition-colors disabled:opacity-50"
+                        >
+                          {busyId === item.id ? <Loader2 size={11} className="animate-spin" /> : <RotateCcw size={11} />}
+                          {t.trash.restore}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setConfirmDelete(item)}
+                          className="p-1 rounded-md text-muted-foreground hover:text-error hover:bg-error/10 transition-colors"
+                          title={t.trash.deletePermanently}
+                        >
+                          <X size={13} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Empty Trash Confirmation */}
+      <ConfirmDialog
+        open={confirmEmpty}
+        title={t.trash.emptyTrash}
+        message={t.trash.emptyTrashConfirm}
+        confirmLabel={t.trash.emptyTrash}
+        cancelLabel={t.export?.cancel ?? 'Cancel'}
+        onConfirm={() => void handleEmptyTrash()}
+        onCancel={() => setConfirmEmpty(false)}
+        variant="destructive"
+      />
+
+      {/* Permanent Delete Confirmation */}
+      <ConfirmDialog
+        open={!!confirmDelete}
+        title={t.trash.deletePermanently}
+        message={confirmDelete ? t.trash.deletePermanentlyConfirm(confirmDelete.fileName) : ''}
+        confirmLabel={t.trash.deletePermanently}
+        cancelLabel={t.export?.cancel ?? 'Cancel'}
+        onConfirm={() => void handlePermanentDelete()}
+        onCancel={() => setConfirmDelete(null)}
+        variant="destructive"
+      />
+
+      {/* Restore Conflict Dialog */}
+      {conflictItem && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+          <div className="bg-card border border-border rounded-xl shadow-xl max-w-sm w-full mx-4 p-5">
+            <div className="flex items-center gap-2 mb-3">
+              <AlertTriangle size={16} className="text-[var(--amber)]" />
+              <h3 className="text-sm font-semibold font-display">{t.trash.restoreConflict}</h3>
+            </div>
+            <p className="text-xs text-muted-foreground mb-4">
+              &quot;{conflictItem.fileName}&quot; — {conflictItem.originalPath}
+            </p>
+            <div className="flex items-center gap-2 justify-end">
+              <button
+                type="button"
+                onClick={() => setConflictItem(null)}
+                className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              >
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleConflictResolve('copy')}
+                className="px-3 py-1.5 rounded-md text-xs font-medium bg-muted text-foreground hover:bg-muted/80 transition-colors"
+              >
+                {t.trash.saveAsCopy}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleConflictResolve('overwrite')}
+                className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors"
+              >
+                {t.trash.overwrite}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/agents/AgentDetailContent.tsx

@@ -2,8 +2,10 @@
 
 import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
-import { ArrowLeft, ChevronDown, Globe, Server, Search, Trash2, Zap } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import {
+  ArrowLeft, Activity, Globe, Key, Loader2, Server, Search,
+  Shield, ShieldCheck, Trash2, Wifi, WifiOff, Zap,
+} from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { toast } from '@/lib/toast';
 import { useMcpData } from '@/hooks/useMcpData';
@@ -11,6 +13,7 @@ import { useA2aRegistry } from '@/hooks/useA2aRegistry';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
 import { generateSnippet } from '@/lib/mcp-snippets';
+import type { AgentInfo, McpStatus } from '../settings/types';
 import {
   aggregateCrossAgentMcpServers,
   aggregateCrossAgentSkills,
@@ -43,7 +46,6 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const [confirmMcpRemove, setConfirmMcpRemove] = useState<string | null>(null);
   const [mcpHint, setMcpHint] = useState<string | null>(null);
   const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
-  const [a2aOpen, setA2aOpen] = useState(false);
 
   const filteredSkills = useMemo(
     () =>
@@ -86,7 +88,11 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
     () => agent ? generateSnippet(agent, mcp.status, currentTransport) : { snippet: '', path: '' },
     [agent, mcp.status, currentTransport],
   );
-  const nativeInstalledSkills = agent?.installedSkillNames ?? [];
+  const mindosSkillNames = useMemo(() => new Set(mcp.skills.map((s) => s.name)), [mcp.skills]);
+  const nativeInstalledSkills = useMemo(
+    () => (agent?.installedSkillNames ?? []).filter((n) => !mindosSkillNames.has(n)),
+    [agent?.installedSkillNames, mindosSkillNames],
+  );
   const configuredMcpServers = agent?.configuredMcpServers ?? [];
 
 
@@ -361,48 +367,6 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         </div>
       </section>
 
-      {/* ═══════════ A2A CAPABILITIES ═══════════ */}
-      <section className="rounded-xl border border-border bg-card overflow-hidden">
-        <button
-          type="button"
-          onClick={() => setA2aOpen(!a2aOpen)}
-          className="w-full flex items-center justify-between gap-2 px-4 py-3 text-left hover:bg-muted/20 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-expanded={a2aOpen}
-        >
-          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
-            <Globe size={12} className="text-muted-foreground/50" />
-            {p.a2aCapabilities}
-          </h2>
-          <ChevronDown
-            size={13}
-            className={cn('shrink-0 text-muted-foreground/50 transition-transform duration-200', a2aOpen && 'rotate-180')}
-            aria-hidden="true"
-          />
-        </button>
-        <div
-          className={cn(
-            'grid transition-[grid-template-rows] duration-250 ease-out',
-            a2aOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
-          )}
-        >
-          <div className="overflow-hidden" {...(!a2aOpen && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
-            <div className="px-4 pb-3 pt-1 space-y-2 border-t border-border/40">
-              <div className="flex items-baseline gap-2 px-0.5 min-w-0">
-                <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider shrink-0 min-w-[60px]">{p.a2aStatus}</span>
-                <span className={`text-xs font-medium ${
-                  status === 'connected' ? 'text-[var(--success)]' : 'text-muted-foreground'
-                }`}>
-                  {status === 'connected' ? p.a2aConnected : p.a2aUnavailable}
-                </span>
-              </div>
-              {a2a.agents.length === 0 && (
-                <p className="text-2xs text-muted-foreground/50">{p.a2aNoRemoteHint}</p>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
-
       {/* ═══════════ SKILL ASSIGNMENTS ═══════════ */}
       <section className="rounded-xl border border-border bg-card p-4 space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-2">
@@ -518,7 +482,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
           <p className="text-sm text-muted-foreground">{a.detail.noSkills}</p>
         )}
 
-        {/* Native installed skills — same row style */}
+        {/* Native installed skills */}
         {nativeInstalledSkills.length > 0 && (
           <div>
             <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
@@ -543,6 +507,59 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         {editError && <p className="text-xs text-error">{editError}</p>}
       </section>
 
+      {/* ═══════════ A2A CAPABILITIES ═══════════ */}
+      <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+            <Globe size={12} className="text-muted-foreground/50" />
+            {p.a2aCapabilities}
+          </h2>
+          <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${
+            status === 'connected' ? 'bg-[var(--success)]/15 text-[var(--success)]' : 'bg-muted text-muted-foreground/60'
+          }`}>
+            {status === 'connected' ? p.a2aConnected : p.a2aUnavailable}
+          </span>
+        </div>
+
+        <div className="flex flex-wrap gap-x-6 gap-y-1 py-2 border-y border-border/30">
+          <DetailLine label={p.a2aStatus} value={status === 'connected' ? p.a2aConnected : p.a2aUnavailable} />
+          <DetailLine label={a.detail.transport} value={agent.transport ?? agent.preferredTransport} />
+          {a2a.agents.length > 0 && (
+            <DetailLine label="Remote agents" value={String(a2a.agents.length)} />
+          )}
+        </div>
+
+        {a2a.agents.length > 0 ? (
+          <div className="space-y-1">
+            {a2a.agents.map((remote) => (
+              <div key={remote.id} className="flex items-center gap-2.5 rounded-md px-2 py-1.5 hover:bg-muted/30 transition-colors duration-100">
+                <div className="w-6 h-6 rounded-md bg-muted/40 flex items-center justify-center shrink-0">
+                  <Globe size={11} className="text-muted-foreground/60" />
+                </div>
+                <span className="text-xs text-foreground flex-1 min-w-0 truncate">{remote.card.name}</span>
+                {remote.reachable ? (
+                  <Wifi size={11} className="text-[var(--success)] shrink-0" />
+                ) : (
+                  <WifiOff size={11} className="text-muted-foreground/50 shrink-0" />
+                )}
+                <span className="text-2xs text-muted-foreground/50 tabular-nums shrink-0">{remote.card.skills.length} skills</span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-2xs text-muted-foreground/50">{p.a2aNoRemoteHint}</p>
+        )}
+      </section>
+
+      {/* ═══════════ RUNTIME & DIAGNOSTICS ═══════════ */}
+      <RuntimeDiagSection agent={agent} status={status} isMindOS={isMindOS} mcpStatus={mcp.status} />
+
+      {/* ═══════════ ENVIRONMENT & PERMISSIONS ═══════════ */}
+      <EnvPermSection agent={agent} isMindOS={isMindOS} />
+
+      {/* ═══════════ ACTIVITY & USAGE ═══════════ */}
+      <ActivitySection agent={agent} />
+
       {/* ═══════════ Confirm Dialogs ═══════════ */}
       <ConfirmDialog
         open={confirmDelete !== null}
@@ -609,3 +626,202 @@ function formatRelativeTime(iso: string | undefined | null): string {
     return iso;
   }
 }
+
+/* ═══════════ Runtime & Diagnostics ═══════════ */
+
+function RuntimeDiagSection({
+  agent,
+  status,
+  isMindOS,
+  mcpStatus,
+}: {
+  agent: AgentInfo;
+  status: string;
+  isMindOS: boolean;
+  mcpStatus: McpStatus | null;
+}) {
+  const { t } = useLocale();
+  const d = t.agentsContent.detail;
+  const [pingState, setPingState] = useState<'idle' | 'pinging' | 'ok' | 'fail'>('idle');
+  const [pingMs, setPingMs] = useState(0);
+
+  const handlePing = useCallback(async () => {
+    setPingState('pinging');
+    const start = performance.now();
+    try {
+      const res = await fetch('/api/mcp/status', { method: 'GET', signal: AbortSignal.timeout(5000) });
+      const elapsed = Math.round(performance.now() - start);
+      setPingMs(elapsed);
+      setPingState(res.ok ? 'ok' : 'fail');
+    } catch {
+      setPingState('fail');
+    }
+  }, []);
+
+  return (
+    <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
+          <Activity size={12} className="text-muted-foreground/50" />
+          {d.runtimeDiagTitle}
+        </h2>
+        <button
+          type="button"
+          onClick={() => void handlePing()}
+          disabled={pingState === 'pinging'}
+          className="inline-flex items-center gap-1 px-2.5 py-1 text-2xs font-medium rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {pingState === 'pinging' ? (
+            <><Loader2 size={10} className="animate-spin" /> {d.runtimePinging}</>
+          ) : (
+            <><Wifi size={10} /> {d.runtimePing}</>
+          )}
+        </button>
+      </div>
+
+      {pingState === 'ok' && (
+        <div role="status" className="rounded-md bg-[var(--success)]/10 border border-[var(--success)]/20 px-3 py-1.5 text-2xs text-[var(--success)] font-medium animate-in fade-in duration-200">
+          {d.runtimePingOk(pingMs)}
+        </div>
+      )}
+      {pingState === 'fail' && (
+        <div role="status" className="rounded-md bg-error/10 border border-error/20 px-3 py-1.5 text-2xs text-error font-medium animate-in fade-in duration-200">
+          {d.runtimePingFail}
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-x-6 gap-y-1 py-2 border-y border-border/30">
+        <DetailLine label={d.status} value={status} />
+        <DetailLine label={d.transport} value={agent.transport ?? agent.preferredTransport} />
+        {isMindOS && mcpStatus && (
+          <>
+            <DetailLine label={d.runtimeVersion} value={mcpStatus.endpoint} />
+            <DetailLine label={d.port} value={String(mcpStatus.port)} />
+          </>
+        )}
+        <DetailLine label={d.lastActivityAt} value={formatRelativeTime(agent.runtimeLastActivityAt)} />
+        {agent.runtimeConversationSignal !== undefined && (
+          <DetailLine label={d.conversationSignal} value={agent.runtimeConversationSignal ? 'Active' : 'Inactive'} />
+        )}
+        {agent.runtimeUsageSignal !== undefined && (
+          <DetailLine label={d.usageSignal} value={agent.runtimeUsageSignal ? 'Active' : 'Inactive'} />
+        )}
+      </div>
+
+      {!agent.runtimeLastActivityAt && pingState === 'idle' && (
+        <p className="text-2xs text-muted-foreground/50">{d.runtimeNoData}</p>
+      )}
+    </section>
+  );
+}
+
+/* ═══════════ Environment & Permissions ═══════════ */
+
+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">
+        <Key size={12} className="text-muted-foreground/50" />
+        {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="grid grid-cols-2 gap-1.5">
+          {permissions.map(({ label, allowed }) => (
+            <div key={label} className="flex items-center gap-1.5 rounded-md px-2 py-1.5 bg-muted/20">
+              {allowed ? (
+                <ShieldCheck size={12} className="text-[var(--success)] shrink-0" />
+              ) : (
+                <Shield size={12} className="text-muted-foreground/40 shrink-0" />
+              )}
+              <span className="text-2xs text-foreground/80">{label}</span>
+              <span className={`ml-auto text-2xs font-medium ${allowed ? 'text-[var(--success)]' : 'text-muted-foreground/50'}`}>
+                {allowed ? d.envAllowed : d.envRestricted}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ═══════════ Activity & Usage ═══════════ */
+
+function ActivitySection({ agent }: { agent: AgentInfo }) {
+  const { t } = useLocale();
+  const d = t.agentsContent.detail;
+
+  const hasActivity = !!agent.runtimeLastActivityAt;
+
+  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">
+        <Activity size={12} className="text-muted-foreground/50" />
+        {d.activityTitle}
+      </h2>
+
+      {hasActivity ? (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          <StatCard label={d.activityLastInvocation} value={formatRelativeTime(agent.runtimeLastActivityAt)} />
+          <StatCard label={d.activityTotal} value={agent.runtimeConversationSignal ? 'Active' : '—'} />
+          <StatCard label={d.activityLast7d} value={agent.runtimeUsageSignal ? 'Active' : '—'} />
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed border-border/50 bg-muted/10 px-4 py-6 text-center">
+          <Activity size={20} className="text-muted-foreground/30 mx-auto mb-2" />
+          <p className="text-2xs text-muted-foreground/50">{d.activityNoData}</p>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5">
+      <p className="text-2xs text-muted-foreground/50 uppercase tracking-wider mb-0.5">{label}</p>
+      <p className="text-sm font-medium text-foreground font-mono tabular-nums">{value}</p>
+    </div>
+  );
+}

package/app/components/agents/AgentsContentPage.tsx

@@ -16,6 +16,7 @@ import AgentsOverviewSection from './AgentsOverviewSection';
 import AgentsMcpSection from './AgentsMcpSection';
 import AgentsSkillsSection from './AgentsSkillsSection';
 import AgentsPanelA2aTab from './AgentsPanelA2aTab';
+import AgentsPanelSessionsTab from './AgentsPanelSessionsTab';
 
 export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab }) {
   const { t } = useLocale();
@@ -23,6 +24,12 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
   const mcp = useMcpData();
   const a2a = useA2aRegistry();
   const pageHeader = useMemo(() => {
+    if (tab === 'sessions') {
+      return {
+        title: 'Sessions',
+        subtitle: 'Active ACP agent sessions.',
+      };
+    }
     if (tab === 'a2a') {
       return {
         title: a.navNetwork,
@@ -114,6 +121,10 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
           onRemove={a2a.remove}
         />
       )}
+
+      {tab === 'sessions' && (
+        <AgentsPanelSessionsTab />
+      )}
     </div>
   );
 }