@geminilight/mindos 0.5.63 → 0.5.64

package/app/app/api/changes/route.ts

@@ -22,10 +22,16 @@ export async function GET(req: NextRequest) {
 
     if (op === 'list') {
       const path = req.nextUrl.searchParams.get('path') ?? undefined;
+      const sourceParam = req.nextUrl.searchParams.get('source');
+      const source = sourceParam === 'user' || sourceParam === 'agent' || sourceParam === 'system'
+        ? sourceParam
+        : undefined;
+      const opFilter = req.nextUrl.searchParams.get('event_op') ?? undefined;
+      const q = req.nextUrl.searchParams.get('q') ?? undefined;
       const limitParam = req.nextUrl.searchParams.get('limit');
       const limit = limitParam ? Number(limitParam) : 50;
       if (!Number.isFinite(limit) || limit <= 0) return err('invalid limit');
-      return NextResponse.json({ events: listContentChanges({ path, limit }) });
+      return NextResponse.json({ events: listContentChanges({ path, source, op: opFilter, q, limit }) });
     }
 
     return err(`unknown op: ${op}`);

package/app/app/api/mcp/install-skill/route.ts

@@ -3,35 +3,15 @@ import { NextRequest, NextResponse } from 'next/server';
 import { execSync } from 'child_process';
 import path from 'path';
 import fs from 'fs';
+import { SKILL_AGENT_REGISTRY } from '@/lib/mcp-agents';
 
 /* ── Constants ────────────────────────────────────────────────── */
 
 const GITHUB_SOURCE = 'GeminiLight/MindOS';
 
-// Universal agents read directly from ~/.agents/skills/ — no symlink needed.
-const UNIVERSAL_AGENTS = new Set([
-  'amp', 'cline', 'codex', 'cursor', 'gemini-cli',
-  'github-copilot', 'kimi-cli', 'opencode', 'warp',
-]);
-
 // Agents that do NOT support Skills at all
 const SKILL_UNSUPPORTED = new Set<string>([]);
 
-// MCP agent key → npx skills agent name (for non-universal agents)
-const AGENT_NAME_MAP: Record<string, string> = {
-  'claude-code': 'claude-code',
-  'windsurf': 'windsurf',
-  'trae': 'trae',
-  'openclaw': 'openclaw',
-  'codebuddy': 'codebuddy',
-  'iflow-cli': 'iflow-cli',
-  'pi': 'pi',
-  'augment': 'augment',
-  'qwen-code': 'qwen-code',
-  'trae-cn': 'trae-cn',
-  'roo': 'roo',
-};
-
 /* ── Helpers ──────────────────────────────────────────────────── */
 
 /** Fallback: find local skills directory for offline installs */
@@ -78,9 +58,14 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Invalid skill name' }, { status: 400 });
     }
 
-    const additionalAgents = (agents || [])
-      .filter(key => !UNIVERSAL_AGENTS.has(key) && !SKILL_UNSUPPORTED.has(key))
-      .map(key => AGENT_NAME_MAP[key] || key);
+    const additionalAgents = (agents || []).flatMap((key) => {
+      if (SKILL_UNSUPPORTED.has(key)) return [];
+      const reg = SKILL_AGENT_REGISTRY[key];
+      if (!reg) return [key]; // Forward-compatible fallback for unknown keys.
+      if (reg.mode === 'unsupported') return [];
+      if (reg.mode === 'universal') return [];
+      return [reg.skillAgentName || key];
+    });
 
     // Try GitHub source first, fall back to local path
     const sources = [GITHUB_SOURCE];

package/app/app/layout.tsx

@@ -11,6 +11,7 @@ import UpdateBanner from '@/components/UpdateBanner';
 import UpdateOverlay from '@/components/UpdateOverlay';
 import { cookies } from 'next/headers';
 import type { Locale } from '@/lib/i18n';
+import '@/lib/renderers/index'; // globally register built-in renderers once
 
 const geistSans = Inter({
   variable: '--font-geist-sans',

package/app/app/page.tsx

@@ -2,7 +2,6 @@ import { redirect } from 'next/navigation';
 import { readSettings } from '@/lib/settings';
 import { getRecentlyModified, getFileContent, getFileTree } from '@/lib/fs';
 import { getAllRenderers } from '@/lib/renderers/registry';
-import '@/lib/renderers/index'; // registers all renderers
 import HomeContent from '@/components/HomeContent';
 import type { FileNode } from '@/lib/core/types';
 
@@ -83,7 +82,7 @@ export default function HomePage() {
     console.error('[HomePage] Failed to load recent files:', err);
   }
 
-  // Derive plugin entry paths from registry — no hardcoded list needed
+  // Derive renderer entry paths from registry — used by plugin and app-builtin sections on home.
   const entryPaths = getAllRenderers()
     .map(r => r.entryPath)
     .filter((p): p is string => !!p);

package/app/app/view/[...path]/ViewPageClient.tsx

@@ -17,7 +17,6 @@ import { resolveRenderer, isRendererEnabled } from '@/lib/renderers/registry';
 import { encodePath } from '@/lib/utils';
 import { useLocale } from '@/lib/LocaleContext';
 import DirPicker from '@/components/DirPicker';
-import '@/lib/renderers/index'; // registers all renderers
 
 interface ViewPageClientProps {
   filePath: string;

package/app/components/HomeContent.tsx

@@ -5,8 +5,7 @@ import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, Chevron
 import { useState, useEffect, useMemo } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
-import { getAllRenderers } from '@/lib/renderers/registry';
-import '@/lib/renderers/index'; // registers all renderers
+import { getAllRenderers, getPluginRenderers } from '@/lib/renderers/registry';
 import OnboardingView from './OnboardingView';
 import GuideCard from './GuideCard';
 import CreateSpaceModal from './CreateSpaceModal';
@@ -124,8 +123,10 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
 
   const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
 
-  // Only show renderers that are available (have entryPath + file exists) as quick-access chips
-  const availablePlugins = getAllRenderers().filter(r => r.entryPath && existingSet.has(r.entryPath));
+  // User-manageable plugins: only show available entry files
+  const availablePlugins = getPluginRenderers().filter(r => r.entryPath && existingSet.has(r.entryPath));
+  // App-builtin features: always visible, with active/inactive state
+  const builtinFeatures = getAllRenderers().filter((r) => r.appBuiltinFeature && r.id !== 'csv');
 
   const lastFile = recent[0];
 
@@ -275,7 +276,41 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
         <CreateSpaceModal t={t} dirPaths={dirPaths ?? []} />
       </section>
 
-      {/* ── Section 2: Extensions ── */}
+      {/* ── Section 2: Built-in capabilities ── */}
+      {builtinFeatures.length > 0 && (
+        <section className="mb-8">
+          <SectionTitle icon={<Puzzle size={13} />} count={builtinFeatures.length}>
+            {t.home.builtinFeatures}
+          </SectionTitle>
+          <div className="flex flex-wrap gap-2">
+            {builtinFeatures.map((r) => {
+              const active = !!r.entryPath && existingSet.has(r.entryPath);
+              if (active && r.entryPath) {
+                return (
+                  <Link key={r.id} href={`/view/${encodePath(r.entryPath)}`}>
+                    <span className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-border text-xs transition-all duration-150 hover:border-amber-500/30 hover:bg-muted/60">
+                      <span className="text-sm leading-none" suppressHydrationWarning>{r.icon}</span>
+                      <span className="font-medium text-foreground">{r.name}</span>
+                    </span>
+                  </Link>
+                );
+              }
+              return (
+                <span
+                  key={r.id}
+                  className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground opacity-70"
+                  title={r.entryPath ? t.home.createToActivate.replace('{file}', r.entryPath) : t.home.builtinInactive}
+                >
+                  <span className="text-sm leading-none" suppressHydrationWarning>{r.icon}</span>
+                  <span className="font-medium">{r.name}</span>
+                </span>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* ── Section 3: Extensions ── */}
       {availablePlugins.length > 0 && (
         <section className="mb-8">
           <SectionTitle
@@ -310,7 +345,7 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
         </section>
       )}
 
-      {/* ── Section 3: Recently Edited ── */}
+      {/* ── Section 4: Recently Edited ── */}
       {recent.length > 0 && (
         <section className="mb-12">
           <SectionTitle icon={<Clock size={13} />} count={recent.length}>{t.home.recentlyEdited}</SectionTitle>

package/app/components/RightAgentDetailPanel.tsx

@@ -70,6 +70,7 @@ export default function RightAgentDetailPanel({
     connected: p.connected,
     installing: p.installing,
     install: p.install,
+    installFailed: p.installFailed,
     copyConfig: p.copyConfig,
     copied: p.copied,
     transportLocal: p.transportLocal,

package/app/components/SidebarLayout.tsx

@@ -31,6 +31,7 @@ import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
 import { WalkthroughProvider } from './walkthrough';
 import McpProvider from '@/hooks/useMcpData';
+import '@/lib/renderers/index'; // client-side renderer registration source of truth
 import { useLeftPanel } from '@/hooks/useLeftPanel';
 import { useAskPanel } from '@/hooks/useAskPanel';
 import type { Tab } from './settings/types';

package/app/components/agents/AgentsContentPage.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import Link from 'next/link';
 import { useLocale } from '@/lib/LocaleContext';
 import { useMcpData } from '@/hooks/useMcpData';
 import { copyToClipboard } from '@/lib/clipboard';
@@ -20,6 +19,24 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
   const a = t.agentsContent;
   const mcp = useMcpData();
   const [copyState, setCopyState] = useState<string | null>(null);
+  const pageHeader = useMemo(() => {
+    if (tab === 'skills') {
+      return {
+        title: a.navSkills,
+        subtitle: a.skills.capabilityGroups,
+      };
+    }
+    if (tab === 'mcp') {
+      return {
+        title: a.navMcp,
+        subtitle: a.mcp.connectionGraph,
+      };
+    }
+    return {
+      title: a.title,
+      subtitle: a.subtitle,
+    };
+  }, [a, tab]);
 
   const buckets = useMemo(() => bucketAgents(mcp.agents), [mcp.agents]);
   const riskQueue = useMemo(
@@ -33,13 +50,6 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
     [mcp.skills, mcp.status?.running, buckets.detected.length, buckets.notFound.length],
   );
 
-  const navClass = (target: AgentsDashboardTab) =>
-    `px-3 py-1.5 text-xs rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-      tab === target
-        ? 'border-border bg-[var(--amber-dim)] text-[var(--amber)]'
-        : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-    }`;
-
   const copySnippet = async (agentKey: string) => {
     const agent = mcp.agents.find((item) => item.key === agentKey);
     if (!agent) return;
@@ -53,16 +63,10 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-10">
       <header className="mb-6">
-        <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">{a.title}</h1>
-        <p className="mt-1 text-sm text-muted-foreground">{a.subtitle}</p>
+        <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">{pageHeader.title}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">{pageHeader.subtitle}</p>
       </header>
 
-      <div className="mb-6 flex items-center gap-2 border-b border-border pb-3" role="tablist" aria-label={a.title}>
-        <Link href="/agents" role="tab" id="agents-tab-overview" aria-controls="agents-panel-overview" aria-selected={tab === 'overview'} className={navClass('overview')}>{a.navOverview}</Link>
-        <Link href="/agents?tab=mcp" role="tab" id="agents-tab-mcp" aria-controls="agents-panel-mcp" aria-selected={tab === 'mcp'} className={navClass('mcp')}>{a.navMcp}</Link>
-        <Link href="/agents?tab=skills" role="tab" id="agents-tab-skills" aria-controls="agents-panel-skills" aria-selected={tab === 'skills'} className={navClass('skills')}>{a.navSkills}</Link>
-      </div>
-
       {tab === 'overview' && (
         <AgentsOverviewSection
           copy={a.overview}

package/app/components/agents/AgentsMcpSection.tsx

@@ -1,9 +1,12 @@
 'use client';
 
+import { useMemo, useState } from 'react';
 import Link from 'next/link';
-import { RefreshCw, Server } from 'lucide-react';
+import { RefreshCw, Search, Server } from 'lucide-react';
 import type { McpContextValue } from '@/hooks/useMcpData';
 import type { AgentBuckets } from './agents-content-model';
+import type { AgentStatusFilter } from './agents-content-model';
+import { filterAgentsForMcpTable } from './agents-content-model';
 
 export default function AgentsMcpSection({
   copy,
@@ -16,6 +19,18 @@ export default function AgentsMcpSection({
     title: string;
     refresh: string;
     connectionGraph: string;
+    tabs: {
+      manage: string;
+      topology: string;
+    };
+    searchPlaceholder: string;
+    emptyState: string;
+    filters: {
+      all: string;
+      connected: string;
+      detected: string;
+      notFound: string;
+    };
     table: { agent: string; status: string; transport: string; actions: string };
     actions: { copySnippet: string; copied: string; testConnection: string; reconnect: string };
     status: { connected: string; detected: string; notFound: string };
@@ -25,80 +40,178 @@ export default function AgentsMcpSection({
   copyState: string | null;
   onCopySnippet: (agentKey: string) => Promise<void>;
 }) {
+  const [query, setQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<AgentStatusFilter>('all');
+  const [busyAction, setBusyAction] = useState<string | null>(null);
+  const [view, setView] = useState<'manage' | 'topology'>('manage');
+  const filteredAgents = useMemo(
+    () => filterAgentsForMcpTable(mcp.agents, query, statusFilter),
+    [mcp.agents, query, statusFilter],
+  );
+
+  async function handleTestConnection(agentKey: string) {
+    setBusyAction(`test:${agentKey}`);
+    try {
+      await mcp.refresh();
+    } finally {
+      setBusyAction(null);
+    }
+  }
+
+  async function handleReconnect(agent: typeof mcp.agents[number]) {
+    setBusyAction(`reconnect:${agent.key}`);
+    try {
+      const scope = agent.scope === 'project' ? 'project' : 'global';
+      const transport = agent.transport === 'http' ? 'http' : 'stdio';
+      await mcp.installAgent(agent.key, { scope, transport });
+      await mcp.refresh();
+    } finally {
+      setBusyAction(null);
+    }
+  }
+
   return (
-    <section role="tabpanel" id="agents-panel-mcp" aria-labelledby="agents-tab-mcp" className="rounded-lg border border-border bg-card p-4 space-y-4">
+    <section className="rounded-lg border border-border bg-card p-4 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-sm font-medium text-foreground flex items-center gap-2">
-          <Server size={15} className="text-muted-foreground" />
-          {copy.title}
-        </h2>
-        <button
-          type="button"
-          onClick={() => void mcp.refresh()}
-          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-        >
-          <RefreshCw size={13} />
-          {copy.refresh}
-        </button>
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-medium text-foreground flex items-center gap-2">
+            <Server size={15} className="text-muted-foreground" />
+            {copy.title}
+          </h2>
+          <button
+            type="button"
+            onClick={() => void mcp.refresh()}
+            className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            <RefreshCw size={13} />
+            {copy.refresh}
+          </button>
+        </div>
+        <div className="flex items-center gap-1 rounded-md border border-border p-1 bg-background">
+          <StatusFilterButton active={view === 'manage'} label={copy.tabs.manage} onClick={() => setView('manage')} />
+          <StatusFilterButton active={view === 'topology'} label={copy.tabs.topology} onClick={() => setView('topology')} />
+        </div>
       </div>
 
-      <div className="rounded-md border border-border bg-background p-3">
-        <p className="text-xs font-medium text-muted-foreground mb-2">{copy.connectionGraph}</p>
-        <div className="flex flex-wrap items-center gap-2 text-xs">
-          <NodePill label={copy.status.connected} count={buckets.connected.length} tone="ok" />
-          <span className="text-muted-foreground">→</span>
-          <NodePill label={copy.status.detected} count={buckets.detected.length} tone="warn" />
-          <span className="text-muted-foreground">→</span>
-          <NodePill label={copy.status.notFound} count={buckets.notFound.length} tone="neutral" />
-          <span className="mx-2 text-muted-foreground">|</span>
-          <NodePill label={copy.title} count={mcp.status?.running ? 1 : 0} tone={mcp.status?.running ? 'ok' : 'neutral'} />
+      {view === 'topology' ? (
+        <div className="rounded-md border border-border bg-background p-3">
+          <p className="text-xs font-medium text-muted-foreground mb-2">{copy.connectionGraph}</p>
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <NodePill label={copy.status.connected} count={buckets.connected.length} tone="ok" />
+            <span className="text-muted-foreground">→</span>
+            <NodePill label={copy.status.detected} count={buckets.detected.length} tone="warn" />
+            <span className="text-muted-foreground">→</span>
+            <NodePill label={copy.status.notFound} count={buckets.notFound.length} tone="neutral" />
+            <span className="mx-2 text-muted-foreground">|</span>
+            <NodePill label={copy.title} count={mcp.status?.running ? 1 : 0} tone={mcp.status?.running ? 'ok' : 'neutral'} />
+          </div>
         </div>
-      </div>
+      ) : (
+        <>
+          <div className="flex flex-col md:flex-row gap-2">
+            <label className="relative flex-1">
+              <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={copy.searchPlaceholder}
+                className="w-full h-9 rounded-md border border-border bg-background pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </label>
+            <div role="group" aria-label={copy.table.status} className="flex items-center gap-1 rounded-md border border-border p-1 bg-background">
+              <StatusFilterButton active={statusFilter === 'all'} label={copy.filters.all} onClick={() => setStatusFilter('all')} />
+              <StatusFilterButton active={statusFilter === 'connected'} label={copy.filters.connected} onClick={() => setStatusFilter('connected')} />
+              <StatusFilterButton active={statusFilter === 'detected'} label={copy.filters.detected} onClick={() => setStatusFilter('detected')} />
+              <StatusFilterButton active={statusFilter === 'notFound'} label={copy.filters.notFound} onClick={() => setStatusFilter('notFound')} />
+            </div>
+          </div>
 
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="text-left border-b border-border">
-              <th className="py-2 font-medium text-muted-foreground">{copy.table.agent}</th>
-              <th className="py-2 font-medium text-muted-foreground">{copy.table.status}</th>
-              <th className="py-2 font-medium text-muted-foreground">{copy.table.transport}</th>
-              <th className="py-2 font-medium text-muted-foreground">{copy.table.actions}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {mcp.agents.map((agent) => (
-              <tr key={agent.key} className="border-b border-border/60">
-                <td className="py-2 text-foreground">
-                  <Link href={`/agents/${encodeURIComponent(agent.key)}`} className="hover:underline">{agent.name}</Link>
-                </td>
-                <td className="py-2 text-muted-foreground">{agent.present ? (agent.installed ? copy.status.connected : copy.status.detected) : copy.status.notFound}</td>
-                <td className="py-2 text-muted-foreground">{agent.transport ?? agent.preferredTransport}</td>
-                <td className="py-2">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={() => void onCopySnippet(agent.key)}
-                      className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    >
-                      {copyState === agent.key ? copy.actions.copied : copy.actions.copySnippet}
-                    </button>
-                    <button type="button" className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-                      {copy.actions.testConnection}
-                    </button>
-                    <button type="button" className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-                      {copy.actions.reconnect}
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-left border-b border-border">
+                  <th className="py-2 font-medium text-muted-foreground">{copy.table.agent}</th>
+                  <th className="py-2 font-medium text-muted-foreground">{copy.table.status}</th>
+                  <th className="py-2 font-medium text-muted-foreground">{copy.table.transport}</th>
+                  <th className="py-2 font-medium text-muted-foreground">{copy.table.actions}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredAgents.map((agent) => (
+                  <tr key={agent.key} className="border-b border-border/60">
+                    <td className="py-2 text-foreground">
+                      <Link href={`/agents/${encodeURIComponent(agent.key)}`} className="hover:underline">{agent.name}</Link>
+                    </td>
+                    <td className="py-2 text-muted-foreground">{agent.present ? (agent.installed ? copy.status.connected : copy.status.detected) : copy.status.notFound}</td>
+                    <td className="py-2 text-muted-foreground">{agent.transport ?? agent.preferredTransport}</td>
+                    <td className="py-2">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => void onCopySnippet(agent.key)}
+                          className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                        >
+                          {copyState === agent.key ? copy.actions.copied : copy.actions.copySnippet}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => void handleTestConnection(agent.key)}
+                          disabled={!agent.installed || busyAction !== null}
+                          className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          {copy.actions.testConnection}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => void handleReconnect(agent)}
+                          disabled={busyAction !== null}
+                          className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          {copy.actions.reconnect}
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+                {filteredAgents.length === 0 && (
+                  <tr>
+                    <td colSpan={4} className="py-4 text-sm text-muted-foreground text-center">
+                      {copy.emptyState}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
     </section>
   );
 }
 
+function StatusFilterButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={`px-2.5 h-7 rounded text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        active ? 'bg-[var(--amber-dim)] text-[var(--amber)]' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
 function NodePill({
   label,
   count,

package/app/components/agents/AgentsOverviewSection.tsx

@@ -32,7 +32,7 @@ export default function AgentsOverviewSection({
   failedAgentsValue: string;
 }) {
   return (
-    <div className="space-y-4" role="tabpanel" id="agents-panel-overview" aria-labelledby="agents-tab-overview">
+    <div className="space-y-4">
       <section className="grid grid-cols-1 md:grid-cols-3 gap-3">
         <StatCard title={copy.connected} value={String(buckets.connected.length)} tone="ok" />
         <StatCard title={copy.detected} value={String(buckets.detected.length)} tone="warn" />