@geminilight/mindos 0.5.63 → 0.5.65

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(
@@ -32,13 +49,10 @@ 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 enabledSkillCount = useMemo(
+    () => mcp.skills.filter((skill) => skill.enabled).length,
+    [mcp.skills],
+  );
 
   const copySnippet = async (agentKey: string) => {
     const agent = mcp.agents.find((item) => item.key === agentKey);
@@ -53,25 +67,24 @@ 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>
+      {/* Loading skeleton — shown while initial data loads */}
+      {mcp.loading && tab === 'overview' && <OverviewSkeleton />}
 
-      {tab === 'overview' && (
+      {!mcp.loading && tab === 'overview' && (
         <AgentsOverviewSection
           copy={a.overview}
           buckets={buckets}
           riskQueue={riskQueue}
-          topSkillsLabel={a.overview.topSkills}
-          failedAgentsLabel={a.overview.failedAgents}
-          topSkillsValue={mcp.skills.filter((s) => s.enabled).slice(0, 3).map((s) => s.name).join(', ') || a.overview.na}
-          failedAgentsValue={buckets.notFound.map((x) => x.name).slice(0, 3).join(', ') || a.overview.na}
+          mcpRunning={!!mcp.status?.running}
+          mcpPort={mcp.status?.port ?? null}
+          mcpToolCount={mcp.status?.toolCount ?? 0}
+          enabledSkillCount={enabledSkillCount}
+          allAgents={mcp.agents}
+          pulseCopy={a.workspacePulse}
         />
       )}
 
@@ -85,3 +98,59 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
     </div>
   );
 }
+
+/* ────────── Loading skeleton for Overview ────────── */
+
+function OverviewSkeleton() {
+  return (
+    <div className="space-y-5 animate-pulse" aria-busy="true" aria-label="Loading">
+      {/* Stats bar skeleton */}
+      <div className="rounded-xl border border-border bg-card overflow-hidden">
+        <div className="px-4 py-2.5 border-b border-border bg-muted/10">
+          <div className="h-4 w-32 bg-muted rounded" />
+        </div>
+        <div className="grid grid-cols-3 md:grid-cols-6 divide-x divide-border">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="px-3 py-3.5 flex flex-col items-center gap-2">
+              <div className="h-3 w-16 bg-muted rounded" />
+              <div className="h-5 w-8 bg-muted rounded" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Quick nav skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {Array.from({ length: 2 }).map((_, i) => (
+          <div key={i} className="rounded-xl border border-border bg-card p-4 flex items-start gap-3.5">
+            <div className="w-10 h-10 rounded-lg bg-muted" />
+            <div className="flex-1 space-y-2">
+              <div className="h-4 w-20 bg-muted rounded" />
+              <div className="h-3 w-full bg-muted rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Agent cards skeleton */}
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <div className="h-4 w-24 bg-muted rounded" />
+          <div className="h-3 w-16 bg-muted rounded" />
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="rounded-xl border border-border bg-card p-3.5">
+              <div className="flex items-center gap-2.5 mb-3">
+                <div className="w-7 h-7 rounded-full bg-muted" />
+                <div className="flex-1 h-4 bg-muted rounded" />
+                <div className="h-4 w-16 bg-muted rounded" />
+              </div>
+              <div className="h-3 w-2/3 bg-muted rounded" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}