@geminilight/mindos 0.5.69 → 0.6.0

package/app/components/SpaceInitToast.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState, useEffect, useCallback, useTransition } from 'react';
+import { Sparkles, Check, Undo2, X } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath } from '@/lib/utils';
+import { revertSpaceInitAction } from '@/lib/actions';
+
+type InitState = 'working' | 'done' | 'reverted' | 'error';
+
+interface InitInfo {
+  spaceName: string;
+  spacePath: string;
+  description: string;
+  state: InitState;
+}
+
+/**
+ * Global toast that shows AI initialization progress when a new space is created.
+ * Mounted in SidebarLayout so it persists across route transitions.
+ *
+ * States:
+ *  - working: ✨ progress animation
+ *  - done:    ✓ ready + [Review] [Discard] [×] — persists until user acts
+ *  - reverted: ↩ "reverted to template" — auto-dismiss 2s
+ *  - error:   silent dismiss
+ */
+export default function SpaceInitToast() {
+  const [info, setInfo] = useState<InitInfo | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [reverting, startRevert] = useTransition();
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const dismiss = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => setInfo(null), 200);
+  }, []);
+
+  const handleEvent = useCallback((e: Event) => {
+    const detail = (e as CustomEvent).detail as Partial<InitInfo>;
+    if (detail.state === 'working') {
+      setInfo(detail as InitInfo);
+      requestAnimationFrame(() => setVisible(true));
+    } else if (detail.state === 'done') {
+      setInfo((prev) => prev ? { ...prev, state: 'done' } : null);
+      router.refresh();
+    } else {
+      dismiss();
+    }
+  }, [router, dismiss]);
+
+  useEffect(() => {
+    window.addEventListener('mindos:ai-init', handleEvent);
+    return () => window.removeEventListener('mindos:ai-init', handleEvent);
+  }, [handleEvent]);
+
+  const handleReview = useCallback(() => {
+    if (!info) return;
+    dismiss();
+    router.push(`/view/${encodePath(info.spacePath + '/')}`);
+  }, [info, dismiss, router]);
+
+  const handleDiscard = useCallback(() => {
+    if (!info) return;
+    startRevert(async () => {
+      await revertSpaceInitAction(info.spacePath, info.spaceName, info.description);
+      setInfo((prev) => prev ? { ...prev, state: 'reverted' } : null);
+      router.refresh();
+      window.dispatchEvent(new Event('mindos:files-changed'));
+      setTimeout(dismiss, 2000);
+    });
+  }, [info, router, dismiss]);
+
+  const handleAccept = useCallback(() => {
+    dismiss();
+  }, [dismiss]);
+
+  if (!info) return null;
+
+  const h = t.home;
+  const { state } = info;
+  const isDone = state === 'done';
+  const isReverted = state === 'reverted';
+  const isWorking = state === 'working';
+
+  return (
+    <div
+      className={`fixed bottom-6 left-1/2 z-50 -translate-x-1/2 transition-all duration-200 ease-out ${
+        visible
+          ? 'opacity-100 translate-y-0 scale-100'
+          : 'opacity-0 translate-y-3 scale-[0.96] pointer-events-none'
+      }`}
+    >
+      <div
+        className="flex items-center gap-2.5 rounded-full border bg-card/95 backdrop-blur py-2 shadow-lg"
+        style={{
+          borderColor: 'color-mix(in srgb, var(--amber) 40%, var(--border))',
+          boxShadow: '0 8px 24px color-mix(in srgb, var(--amber) 12%, rgba(0,0,0,.2))',
+          paddingLeft: '0.75rem',
+          paddingRight: isDone ? '0.5rem' : '1rem',
+        }}
+      >
+        {/* Icon */}
+        <span
+          className={`inline-flex h-6 w-6 items-center justify-center rounded-full shrink-0 ${
+            isReverted
+              ? 'text-muted-foreground bg-muted'
+              : 'text-[var(--amber)] bg-[var(--amber-subtle)]'
+          } ${isWorking ? 'animate-pulse' : ''}`}
+        >
+          {isReverted ? <Undo2 size={12} /> : isDone ? <Check size={13} strokeWidth={2.5} /> : <Sparkles size={13} />}
+        </span>
+
+        {/* Text */}
+        <span className="text-xs text-foreground whitespace-nowrap select-none font-medium">
+          {isReverted
+            ? h.aiInitReverted(info.spaceName)
+            : isDone
+              ? h.aiInitReady(info.spaceName)
+              : <>{h.aiInitGenerating(info.spaceName)}<DotPulse /></>
+          }
+        </span>
+
+        {/* Action buttons — only in done state */}
+        {isDone && (
+          <div className="flex items-center gap-1 ml-1">
+            <button
+              type="button"
+              onClick={handleReview}
+              className="px-2.5 py-1 rounded-full text-2xs font-medium bg-[var(--amber)] text-white hover:opacity-90 transition-opacity focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {h.aiInitReview}
+            </button>
+            <button
+              type="button"
+              onClick={handleDiscard}
+              disabled={reverting}
+              className="px-2.5 py-1 rounded-full text-2xs font-medium bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              {h.aiInitDiscard}
+            </button>
+            <button
+              type="button"
+              onClick={handleAccept}
+              aria-label="Accept"
+              className="ml-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <X size={12} />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DotPulse() {
+  return (
+    <span className="inline-flex gap-[2px] items-end h-[1em] ml-px">
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_0ms_infinite]" />
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_200ms_infinite]" />
+      <span className="w-[3px] h-[3px] rounded-full bg-muted-foreground animate-[dotBounce_1.2s_400ms_infinite]" />
+      <style>{`
+        @keyframes dotBounce {
+          0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
+          30% { opacity: 1; transform: translateY(-2px); }
+        }
+      `}</style>
+    </span>
+  );
+}

package/app/components/TableOfContents.tsx

@@ -128,6 +128,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
               href={`#${heading.id}`}
               onClick={(e) => handleClick(e, heading.id)}
               className="block text-xs py-1 rounded transition-colors duration-100 leading-snug"
+              suppressHydrationWarning
               style={{
                 paddingLeft: `${8 + indent}px`,
                 paddingRight: '8px',

package/app/components/agents/AgentDetailContent.tsx

@@ -73,6 +73,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
     return map;
   }, [mcp.agents]);
 
+  const isMindOS = agentKey === 'mindos';
   const status = agent ? resolveAgentStatus(agent) : 'notFound';
   const currentScope = agent?.scope === 'project' ? 'project' : 'global';
   const currentTransport: 'stdio' | 'http' = agent?.transport === 'http' ? 'http' : 'stdio';
@@ -214,49 +215,61 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
       </Link>
 
       {/* ═══════════ AGENT PROFILE (consolidated header) ═══════════ */}
-      <section className="rounded-lg border border-border bg-card p-4 space-y-3">
-        <div className="flex items-center gap-3">
+      <section className="rounded-xl border border-border bg-gradient-to-b from-card to-card/80 overflow-hidden">
+        <div className="flex items-center gap-4 p-5">
           <AgentAvatar name={agent.name} status={status} size="md" />
-          <div className="min-w-0">
+          <div className="min-w-0 flex-1">
             <h1 className="text-xl font-semibold tracking-tight font-display text-foreground">{agent.name}</h1>
-            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5">
-              <span className={`text-2xs font-medium px-1.5 py-0.5 rounded ${
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1">
+              <span className={`text-2xs font-medium px-2 py-0.5 rounded-full ${
                 status === 'connected' ? 'bg-success/10 text-success'
                   : status === 'detected' ? 'bg-[var(--amber-subtle)] text-[var(--amber)]'
                     : 'bg-muted text-muted-foreground'
               }`}>{status}</span>
-              <span className="text-2xs text-muted-foreground font-mono">{agent.transport ?? agent.preferredTransport}</span>
-              <span className="text-2xs text-muted-foreground">·</span>
-              <span className="text-2xs text-muted-foreground">{agent.skillMode ?? a.na}</span>
+              <span className="text-2xs text-muted-foreground/60 font-mono">{agent.transport ?? agent.preferredTransport}</span>
+              <span className="text-2xs text-muted-foreground/30" aria-hidden="true">·</span>
+              <span className="text-2xs text-muted-foreground/60">{agent.skillMode ?? a.na}</span>
             </div>
           </div>
         </div>
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground pt-2 border-t border-border">
-          <span>{a.detail.format}: <span className="text-foreground">{agent.format}</span></span>
-          <span>{a.detail.lastActivityAt}: <span className="text-foreground tabular-nums">{agent.runtimeLastActivityAt ?? a.na}</span></span>
-          <span>{configuredMcpServers.length} MCP · {nativeInstalledSkills.length} skills</span>
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-xs text-muted-foreground/70 px-5 py-3 border-t border-border/50 bg-muted/[0.03]">
+          <span>{a.detail.format}: <span className="text-foreground/80 font-medium">{agent.format}</span></span>
+          <span>{a.detail.lastActivityAt}: <span className="text-foreground/80 tabular-nums font-medium">{agent.runtimeLastActivityAt ?? a.na}</span></span>
+          <span className="font-medium text-foreground/80 tabular-nums">{configuredMcpServers.length} MCP · {nativeInstalledSkills.length} skills</span>
         </div>
       </section>
 
       {/* ═══════════ MCP MANAGEMENT ═══════════ */}
-      <section className="rounded-lg border border-border bg-card p-4 space-y-3">
-        <h2 className="text-sm font-medium text-foreground flex items-center gap-1.5">
-          <Server size={14} className="text-muted-foreground" />
+      <section className="rounded-xl border border-border bg-card p-5 space-y-4">
+        <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
+          <div className="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center">
+            <Server size={13} className="text-muted-foreground/70" />
+          </div>
           {a.detail.mcpManagement}
         </h2>
 
         {/* MCP status row */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
-          <DetailLine label={a.detail.mcpInstalled} value={agent.installed ? a.detail.yes : a.detail.no} />
-          <DetailLine label={a.detail.mcpScope} value={agent.scope ?? a.na} />
-          <DetailLine label={a.detail.mcpConfigPath} value={agent.configPath ?? a.na} />
+          {isMindOS ? (
+            <>
+              <DetailLine label="Status" value={mcp.status?.running ? '● Running' : '○ Stopped'} />
+              <DetailLine label="Endpoint" value={mcp.status?.endpoint ?? a.na} />
+              <DetailLine label="Tools" value={mcp.status?.toolCount != null ? String(mcp.status.toolCount) : a.na} />
+            </>
+          ) : (
+            <>
+              <DetailLine label={a.detail.mcpInstalled} value={agent.installed ? a.detail.yes : a.detail.no} />
+              <DetailLine label={a.detail.mcpScope} value={agent.scope ?? a.na} />
+              <DetailLine label={a.detail.mcpConfigPath} value={agent.configPath ?? a.na} />
+            </>
+          )}
         </div>
 
         {/* Configured MCP servers with management */}
-        <div className="rounded-lg border border-border bg-background p-4 space-y-2">
+        <div className="rounded-xl border border-border/60 bg-background/50 p-4 space-y-2.5">
           <div className="flex items-center justify-between">
             <p className="text-xs font-semibold text-foreground">{a.detail.configuredMcpServers}</p>
-            <span className="text-2xs text-muted-foreground tabular-nums">{a.detail.configuredMcpServersCount(configuredMcpServers.length)}</span>
+            <span className="text-2xs text-muted-foreground/60 tabular-nums">{a.detail.configuredMcpServersCount(configuredMcpServers.length)}</span>
           </div>
 
           {mcpHint && (
@@ -272,8 +285,10 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
               {configuredMcpServers.map((name) => {
                 const sharedWith = (crossAgentMcpMap.get(name) ?? []).filter((n) => n !== agent.name);
                 return (
-                  <div key={name} className="flex items-center gap-2 rounded-md border border-border/60 px-2.5 py-2 group/mcp hover:border-border hover:bg-muted/20 transition-all duration-100">
-                    <Server size={11} className="text-[var(--amber)] shrink-0" />
+                  <div key={name} className="flex items-center gap-2.5 rounded-lg border border-border/40 bg-muted/[0.02] px-3 py-2.5 group/mcp hover:border-border/60 hover:bg-muted/[0.06] hover:shadow-[0_1px_3px_rgba(0,0,0,0.02)] transition-all duration-150">
+                    <div className="w-5 h-5 rounded-md bg-[var(--amber)]/[0.08] flex items-center justify-center shrink-0">
+                      <Server size={10} className="text-[var(--amber)]" />
+                    </div>
                     <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">{name}</span>
                     {sharedWith.length > 0 && (
                       <div className="flex items-center gap-1">
@@ -300,38 +315,47 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
         {/* MCP actions */}
         <div className="flex flex-wrap items-center gap-2">
-          <ActionButton
-            onClick={() => void handleCopySnippet()}
-            disabled={false}
-            busy={false}
-            label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
-          />
+          {!isMindOS && (
+            <ActionButton
+              onClick={() => void handleCopySnippet()}
+              disabled={false}
+              busy={false}
+              label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
+            />
+          )}
           <ActionButton
             onClick={() => void mcp.refresh()}
             disabled={false}
             busy={false}
             label={a.detail.mcpRefresh}
           />
-          <ActionButton
-            onClick={() => void handleApplyMcpConfig(currentScope, currentTransport)}
-            disabled={mcpBusy}
-            busy={mcpBusy}
-            label={a.detail.mcpReconnect}
-            variant="primary"
-          />
+          {!isMindOS && (
+            <ActionButton
+              onClick={() => void handleApplyMcpConfig(currentScope, currentTransport)}
+              disabled={mcpBusy}
+              busy={mcpBusy}
+              label={a.detail.mcpReconnect}
+              variant="primary"
+            />
+          )}
         </div>
-        <p className="text-2xs text-muted-foreground truncate">{snippet.path}</p>
+        {!isMindOS && <p className="text-2xs text-muted-foreground truncate">{snippet.path}</p>}
         {mcpMessage && <p className="text-xs text-muted-foreground animate-in fade-in duration-200">{mcpMessage}</p>}
       </section>
 
       {/* ═══════════ SKILL ASSIGNMENTS ═══════════ */}
-      <section className="rounded-lg border border-border bg-card p-4 space-y-3">
+      <section className="rounded-xl border border-border bg-card p-5 space-y-4">
         <div className="flex items-center justify-between">
-          <h2 className="text-sm font-medium text-foreground">{a.detail.skillAssignments}</h2>
-          <div className="flex items-center gap-3 text-2xs text-muted-foreground tabular-nums">
-            <span>MindOS {skillSummary.total}</span>
-            <span>{a.detail.skillsEnabled.split(' ')[0]} {skillSummary.enabled}</span>
-            <span>{a.detail.nativeInstalledSkills} {nativeInstalledSkills.length}</span>
+          <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
+            <div className="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center">
+              <Zap size={13} className="text-muted-foreground/70" />
+            </div>
+            {a.detail.skillAssignments}
+          </h2>
+          <div className="flex items-center gap-2 text-2xs text-muted-foreground/60 tabular-nums">
+            <span className="px-1.5 py-0.5 rounded bg-muted/40">MindOS {skillSummary.total}</span>
+            <span className="px-1.5 py-0.5 rounded bg-emerald-500/[0.06] text-emerald-600 dark:text-emerald-400">{a.detail.skillsEnabled.split(' ')[0]} {skillSummary.enabled}</span>
+            <span className="px-1.5 py-0.5 rounded bg-muted/40">{a.detail.nativeInstalledSkills} {nativeInstalledSkills.length}</span>
           </div>
         </div>
 
@@ -504,9 +528,9 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
 function DetailLine({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-md border border-border px-3 py-2">
-      <p className="text-2xs text-muted-foreground mb-1">{label}</p>
-      <p className="text-sm text-foreground truncate">{value}</p>
+    <div className="rounded-lg border border-border/60 bg-muted/[0.02] px-3.5 py-2.5 hover:bg-muted/[0.06] transition-colors duration-100">
+      <p className="text-2xs text-muted-foreground/60 mb-1 uppercase tracking-wider">{label}</p>
+      <p className="text-sm text-foreground font-medium truncate">{value}</p>
     </div>
   );
 }

package/app/components/agents/AgentsContentPage.tsx

@@ -46,8 +46,9 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
         detectedCount: buckets.detected.length,
         notFoundCount: buckets.notFound.length,
         allSkillsDisabled: mcp.skills.length > 0 && mcp.skills.every((s) => !s.enabled),
+        copy: a.overview,
       }),
-    [mcp.skills, mcp.status?.running, buckets.detected.length, buckets.notFound.length],
+    [mcp.skills, mcp.status?.running, buckets.detected.length, buckets.notFound.length, a.overview],
   );
   const enabledSkillCount = useMemo(
     () => mcp.skills.filter((skill) => skill.enabled).length,

package/app/components/agents/AgentsMcpSection.tsx

@@ -142,8 +142,10 @@ export default function AgentsMcpSection({
       {/* Header */}
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2.5">
-          <h2 className="text-sm font-medium text-foreground flex items-center gap-2">
-            <Server size={15} className="text-muted-foreground" aria-hidden="true" />
+          <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
+            <div className="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center">
+              <Server size={13} className="text-muted-foreground/70" aria-hidden="true" />
+            </div>
             {copy.title}
           </h2>
           <button
@@ -164,8 +166,8 @@ export default function AgentsMcpSection({
       </div>
 
       {/* Compact status strip + risk alerts */}
-      <div className="rounded-lg border border-border bg-card p-3">
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
+      <div className="rounded-xl border border-border/60 bg-gradient-to-r from-card to-card/80 p-3.5">
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs">
           <StatusDot tone="ok" label={copy.filters.connected} count={buckets.connected.length} />
           <StatusDot tone="warn" label={copy.filters.detected} count={buckets.detected.length} />
           {buckets.notFound.length > 0 && (
@@ -294,7 +296,7 @@ function ByAgentView({
             const mcpServers = agent.configuredMcpServers ?? [];
             const nativeSkillCount = (agent.installedSkillNames ?? []).length;
             return (
-              <div key={agent.key} className="rounded-lg border border-border bg-card group hover:border-border/60 hover:shadow-sm transition-all duration-150">
+              <div key={agent.key} className={`rounded-xl border bg-card group hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-150 ${status === 'connected' ? 'border-l-2 border-l-[var(--success)] border-border' : status === 'detected' ? 'border-l-2 border-l-[var(--amber)] border-border' : 'border-border'}`}>
                 {/* Card header with avatar */}
                 <div className="flex items-center gap-3 p-3">
                   <AgentAvatar name={agent.name} status={status} />
@@ -344,8 +346,8 @@ function ByAgentView({
                 {mcpServers.length > 0 && (
                   <div className="flex flex-wrap gap-1 px-3 pb-3 ml-12">
                     {mcpServers.map((name) => (
-                      <span key={name} className="inline-flex items-center gap-1 rounded-full bg-muted/60 px-2 py-0.5 text-2xs text-muted-foreground">
-                        <Server size={9} className="text-[var(--amber)] shrink-0" aria-hidden="true" />
+                      <span key={name} className="inline-flex items-center gap-1.5 rounded-full bg-muted/40 border border-border/30 px-2.5 py-0.5 text-2xs text-muted-foreground hover:bg-muted/60 transition-colors duration-100">
+                        <span className="w-1 h-1 rounded-full bg-[var(--amber)]" aria-hidden="true" />
                         {name}
                       </span>
                     ))}
@@ -450,12 +452,14 @@ function ByServerView({
           const notFoundCount = agentDetails.length - connectedCount - detectedCount + orphanNames.length;
 
           return (
-            <div key={srv.serverName} className="rounded-lg border border-border bg-card p-4 hover:border-border/60 hover:shadow-sm transition-all duration-150">
+            <div key={srv.serverName} className="rounded-xl border border-border bg-card p-4 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200">
               {/* Server header */}
-              <div className="flex items-center justify-between gap-2 mb-2">
-                <div className="flex items-center gap-2 min-w-0">
-                  <Server size={14} className="text-[var(--amber)] shrink-0" aria-hidden="true" />
-                  <span className="text-sm font-medium text-foreground truncate">{srv.serverName}</span>
+              <div className="flex items-center justify-between gap-2 mb-3">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  <div className="w-7 h-7 rounded-lg bg-[var(--amber)]/[0.08] flex items-center justify-center shrink-0">
+                    <Server size={13} className="text-[var(--amber)]" aria-hidden="true" />
+                  </div>
+                  <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 && (

package/app/components/agents/AgentsOverviewSection.tsx

@@ -91,10 +91,10 @@ export default function AgentsOverviewSection({
     <div className="space-y-5">
       {/* ═══════════ HERO STATS BAR ═══════════ */}
       <section
-        className="rounded-xl border border-border bg-card overflow-hidden"
+        className="rounded-xl border border-border bg-gradient-to-b from-card to-card/80 overflow-hidden"
         aria-label={pulseCopy.connected}
       >
-        <div className="flex divide-x divide-border [&>*]:flex-1">
+        <div className="flex divide-x divide-border/50 [&>*]:flex-1">
           <StatCell
             icon={<Zap size={14} aria-hidden="true" />}
             label={pulseCopy.connected}
@@ -231,13 +231,13 @@ export default function AgentsOverviewSection({
         </section>
       ) : (
         <section
-          className="rounded-xl border border-dashed border-border bg-card/50 p-10 text-center"
+          className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-12 text-center"
           aria-label={copy.usagePulse}
         >
-          <div className="w-12 h-12 rounded-full bg-muted/60 flex items-center justify-center mx-auto mb-3">
-            <Cable size={20} className="text-muted-foreground" aria-hidden="true" />
+          <div className="w-14 h-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
+            <Cable size={22} className="text-muted-foreground/50" aria-hidden="true" />
           </div>
-          <p className="text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto">
+          <p className="text-sm text-muted-foreground/70 leading-relaxed max-w-xs mx-auto">
             {copy.nextActionHint as string}
           </p>
         </section>
@@ -269,27 +269,33 @@ function StatCell({
         : 'text-muted-foreground';
   const iconColor =
     tone === 'ok'
-      ? 'text-muted-foreground'
+      ? 'text-emerald-500/70'
       : tone === 'warn'
         ? 'text-amber-500/70'
-        : 'text-muted-foreground/50';
+        : 'text-muted-foreground/40';
+  const hoverBg =
+    tone === 'ok'
+      ? 'hover:bg-emerald-500/[0.04]'
+      : tone === 'warn'
+        ? 'hover:bg-amber-500/[0.04]'
+        : 'hover:bg-muted/20';
 
   return (
     <div
-      className="px-3 py-3.5 text-center hover:bg-muted/20 transition-colors duration-100 group/stat"
+      className={`px-3 py-4 text-center ${hoverBg} transition-colors duration-150 group/stat`}
       role="group"
       aria-label={`${label}: ${value}${total !== undefined ? `/${total}` : ''}`}
     >
-      <div className={`flex items-center justify-center gap-1.5 mb-1.5 ${iconColor} group-hover/stat:text-foreground transition-colors duration-100`}>
+      <div className={`flex items-center justify-center gap-1.5 mb-2 ${iconColor} group-hover/stat:opacity-100 transition-all duration-150`}>
         {icon}
-        <span className="text-2xs text-muted-foreground truncate">{label}</span>
       </div>
-      <p className={`text-lg font-semibold tabular-nums leading-none ${textColor}`}>
+      <p className={`text-xl font-semibold tabular-nums leading-none mb-1.5 ${textColor}`}>
         {value}
         {total !== undefined && (
           <span className="text-xs font-normal text-muted-foreground ml-0.5">/{total}</span>
         )}
       </p>
+      <span className="text-2xs text-muted-foreground/70 truncate block">{label}</span>
     </div>
   );
 }
@@ -315,19 +321,19 @@ function QuickNavCard({
     <Link
       href={href}
       className="group rounded-xl border border-border bg-card p-4 flex items-start gap-3.5
-        hover:border-[var(--amber)]/30 hover:bg-muted/20 hover:shadow-sm
+        hover:border-[var(--amber)]/30 hover:shadow-[0_2px_12px_rgba(0,0,0,0.04)]
         active:scale-[0.99]
-        transition-all duration-150
+        transition-all duration-200
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     >
-      <div className="shrink-0 w-10 h-10 rounded-lg bg-muted/60 flex items-center justify-center text-muted-foreground group-hover:text-[var(--amber)] group-hover:bg-[var(--amber-dim)] transition-colors duration-150">
+      <div className="shrink-0 w-10 h-10 rounded-xl bg-muted/50 flex items-center justify-center text-muted-foreground/70 group-hover:text-[var(--amber)] group-hover:bg-[var(--amber)]/[0.08] transition-all duration-200">
         {icon}
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
           <span className="text-sm font-semibold text-foreground">{title}</span>
           <span
-            className={`text-2xs px-1.5 py-0.5 rounded font-medium select-none ${
+            className={`text-2xs px-2 py-0.5 rounded-full font-medium select-none ${
               statTone === 'ok'
                 ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
                 : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
@@ -336,11 +342,11 @@ function QuickNavCard({
             {stat}
           </span>
         </div>
-        <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">{description}</p>
+        <p className="text-xs text-muted-foreground/70 leading-relaxed line-clamp-2">{description}</p>
       </div>
       <ArrowRight
         size={14}
-        className="shrink-0 mt-1.5 text-muted-foreground/30 group-hover:text-[var(--amber)] group-hover:translate-x-0.5 transition-all duration-150"
+        className="shrink-0 mt-1.5 text-muted-foreground/20 group-hover:text-[var(--amber)] group-hover:translate-x-0.5 transition-all duration-200"
         aria-hidden="true"
       />
     </Link>
@@ -375,11 +381,11 @@ function AgentCard({
   return (
     <Link
       href={`/agents/${encodeURIComponent(agent.key)}`}
-      className="group rounded-xl border border-border bg-card p-3.5
-        hover:border-[var(--amber)]/30 hover:shadow-sm
+      className={`group rounded-xl border border-border bg-card p-3.5
+        hover:border-[var(--amber)]/30 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]
         active:scale-[0.98]
         transition-all duration-150 animate-in
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
       style={{ animationDelay: `${Math.min(index * 30, 300)}ms` }}
     >
       {/* Top row: avatar + name + status */}
@@ -390,27 +396,18 @@ function AgentCard({
             {agent.name}
           </span>
           {agent.transport && status === 'connected' && (
-            <span className="text-2xs text-muted-foreground font-mono">{agent.transport}</span>
+            <span className="text-2xs text-muted-foreground/60 font-mono">{agent.transport}</span>
           )}
         </div>
-        <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 select-none ${statusColor}`}>
+        <span className={`text-2xs px-2 py-0.5 rounded-full font-medium shrink-0 select-none ${statusColor}`}>
           {statusLabel}
         </span>
       </div>
 
       {/* Metrics row */}
-      <div className="flex items-center gap-0 pt-2.5 border-t border-border/50">
+      <div className="flex items-center gap-1 pt-2.5 border-t border-border/40">
         <MetricChip icon={<Server size={11} aria-hidden="true" />} value={mcpCount} label={copy.colMcp as string} />
-        <span className="text-border mx-2 select-none" aria-hidden="true">·</span>
         <MetricChip icon={<Zap size={11} aria-hidden="true" />} value={skillCount} label={copy.colSkills as string} />
-        {agent.skillMode && (
-          <>
-            <span className="text-border mx-2 select-none" aria-hidden="true">·</span>
-            <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground truncate select-none">
-              {agent.skillMode}
-            </span>
-          </>
-        )}
         <span className="flex-1 min-w-[4px]" />
         {hasRuntime && (
           <span
@@ -438,9 +435,13 @@ function MetricChip({
   label: string;
 }) {
   return (
-    <span className="inline-flex items-center gap-1" title={label} aria-label={`${label}: ${value}`}>
-      <span className="text-muted-foreground/60">{icon}</span>
-      <span className={`tabular-nums text-xs ${value > 0 ? 'text-foreground font-medium' : 'text-muted-foreground/50'}`}>
+    <span
+      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md ${value > 0 ? 'bg-muted/40' : ''}`}
+      title={label}
+      aria-label={`${label}: ${value}`}
+    >
+      <span className={value > 0 ? 'text-muted-foreground' : 'text-muted-foreground/30'}>{icon}</span>
+      <span className={`tabular-nums text-xs ${value > 0 ? 'text-foreground font-medium' : 'text-muted-foreground/40'}`}>
         {value}
       </span>
     </span>