@geminilight/mindos 0.5.69 → 0.5.70

package/app/components/agents/AgentDetailContent.tsx

@@ -214,34 +214,36 @@ 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>
 
@@ -253,10 +255,10 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         </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 +274,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">
@@ -325,13 +329,18 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
       </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 +513,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/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>
@@ -372,14 +378,22 @@ function AgentCard({
         ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
         : 'bg-zinc-500/10 text-zinc-500';
 
+  const accentBorder =
+    status === 'connected'
+      ? 'border-l-[var(--success)]'
+      : status === 'detected'
+        ? 'border-l-[var(--amber)]'
+        : '';
+
   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 bg-card p-3.5
+        ${accentBorder ? `border-l-2 ${accentBorder} border-border` : 'border-border'}
+        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,26 +404,22 @@ 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="text-2xs px-1.5 py-0.5 rounded-md bg-muted/50 text-muted-foreground/70 truncate select-none">
+            {agent.skillMode}
+          </span>
         )}
         <span className="flex-1 min-w-[4px]" />
         {hasRuntime && (
@@ -438,9 +448,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>

package/app/components/agents/AgentsPrimitives.tsx

@@ -11,8 +11,10 @@ export function PillButton({ active, label, onClick }: { active: boolean; label:
       type="button"
       onClick={onClick}
       aria-pressed={active}
-      className={`px-2.5 min-h-[28px] rounded text-xs cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-        active ? 'bg-[var(--amber-dim)] text-[var(--amber)] font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+      className={`relative px-2.5 min-h-[28px] rounded text-xs cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        active
+          ? 'bg-[var(--amber-dim)] text-[var(--amber)] font-medium shadow-[0_1px_2px_rgba(200,135,58,0.08)]'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'
       }`}
     >
       {label}
@@ -21,11 +23,13 @@ export function PillButton({ active, label, onClick }: { active: boolean; label:
 }
 
 export function StatusDot({ tone, label, count }: { tone: 'ok' | 'warn' | 'neutral'; label: string; count: number }) {
-  const dotCls = tone === 'ok' ? 'bg-[var(--success)]' : tone === 'warn' ? 'bg-[var(--amber)]' : 'bg-muted-foreground';
+  const dotCls = tone === 'ok' ? 'bg-[var(--success)]' : tone === 'warn' ? 'bg-[var(--amber)]' : 'bg-muted-foreground/60';
+  const countCls = tone === 'ok' ? 'text-foreground' : tone === 'warn' ? 'text-[var(--amber)]' : 'text-muted-foreground';
   return (
     <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-      <span className={`w-1.5 h-1.5 rounded-full ${dotCls}`} aria-hidden="true" />
-      {label} <span className="tabular-nums text-foreground">{count}</span>
+      <span className={`w-2 h-2 rounded-full ${dotCls} ${tone === 'ok' ? 'ring-2 ring-[var(--success)]/20' : ''}`} aria-hidden="true" />
+      <span className="text-xs">{label}</span>
+      <span className={`tabular-nums font-medium ${countCls}`}>{count}</span>
     </span>
   );
 }
@@ -44,23 +48,23 @@ export function SearchInput({
   icon: React.ComponentType<{ size?: number; className?: string }>;
 }) {
   return (
-    <label className="relative block">
-      <Icon size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+    <label className="relative block group/search">
+      <Icon size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/60 group-focus-within/search:text-[var(--amber)] pointer-events-none transition-colors duration-150" />
       <input
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         aria-label={ariaLabel}
-        className="w-full h-9 rounded-md border border-border bg-background pl-8 pr-8 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-150"
+        className="w-full h-9 rounded-lg border border-border bg-background pl-9 pr-8 text-sm text-foreground placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--amber)]/30 focus-visible:border-[var(--amber)]/40 transition-all duration-150"
       />
       {value.length > 0 && (
         <button
           type="button"
           onClick={() => onChange('')}
           aria-label="Clear search"
-          className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-sm text-muted-foreground hover:text-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-150"
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-150"
         >
-          <X size={14} />
+          <X size={13} />
         </button>
       )}
     </label>
@@ -112,20 +116,35 @@ export function BulkMessage({ message }: { message: string | null }) {
   );
 }
 
-export function EmptyState({ message, className }: { message: string; className?: string }) {
+export function EmptyState({ message, icon, className }: { message: string; icon?: React.ReactNode; className?: string }) {
   return (
-    <div className={`rounded-lg border border-dashed border-border bg-card/50 p-8 text-center ${className ?? ''}`}>
-      <p className="text-sm text-muted-foreground">{message}</p>
+    <div className={`rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-10 text-center ${className ?? ''}`}>
+      {icon && (
+        <div className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-3 text-muted-foreground/40">
+          {icon}
+        </div>
+      )}
+      <p className="text-sm text-muted-foreground/70 leading-relaxed max-w-xs mx-auto">{message}</p>
     </div>
   );
 }
 
 /* ────────── Agent Avatar ────────── */
 
-const AVATAR_COLORS = [
-  'bg-blue-500', 'bg-emerald-500', 'bg-violet-500', 'bg-rose-500',
-  'bg-amber-600', 'bg-cyan-600', 'bg-indigo-500', 'bg-pink-500',
-  'bg-teal-500', 'bg-orange-500', 'bg-sky-500', 'bg-fuchsia-500',
+/** Soft pastel palette: [bg, border, text] — watercolor aesthetic */
+const AVATAR_PALETTES: [string, string, string][] = [
+  ['bg-rose-100/70',     'border-rose-300/50',    'text-rose-600/80'],
+  ['bg-violet-100/70',   'border-violet-300/50',  'text-violet-600/80'],
+  ['bg-emerald-100/70',  'border-emerald-300/50', 'text-emerald-600/80'],
+  ['bg-sky-100/70',      'border-sky-300/50',     'text-sky-600/80'],
+  ['bg-amber-100/70',    'border-amber-300/50',   'text-amber-700/80'],
+  ['bg-teal-100/70',     'border-teal-300/50',    'text-teal-600/80'],
+  ['bg-pink-100/70',     'border-pink-300/50',    'text-pink-600/80'],
+  ['bg-indigo-100/70',   'border-indigo-300/50',  'text-indigo-600/80'],
+  ['bg-lime-100/70',     'border-lime-300/50',    'text-lime-700/80'],
+  ['bg-fuchsia-100/70',  'border-fuchsia-300/50', 'text-fuchsia-600/80'],
+  ['bg-cyan-100/70',     'border-cyan-300/50',    'text-cyan-600/80'],
+  ['bg-orange-100/70',   'border-orange-300/50',  'text-orange-600/80'],
 ];
 
 function hashName(str: string): number {
@@ -153,13 +172,13 @@ export function AgentAvatar({
   onRemove?: () => void;
   href?: string;
 }) {
-  const color = AVATAR_COLORS[hashName(name) % AVATAR_COLORS.length];
+  const [bg, border, text] = AVATAR_PALETTES[hashName(name) % AVATAR_PALETTES.length];
   const sizeClasses = size === 'sm' ? 'w-7 h-7 text-[10px]' : 'w-9 h-9 text-xs';
   const dotColor = status === 'connected' ? 'bg-[var(--success)]' : status === 'detected' ? 'bg-[var(--amber)]' : 'bg-muted-foreground';
 
   return (
     <div className="relative group/avatar" title={name}>
-      <div className={`${sizeClasses} ${color} rounded-full flex items-center justify-center text-white font-medium select-none shadow-sm`}>
+      <div className={`${sizeClasses} ${bg} ${border} ${text} border rounded-full flex items-center justify-center font-semibold select-none`}>
         {initials(name)}
       </div>
       {status && (
@@ -322,9 +341,11 @@ export function AgentPickerPopover({
               onClick={() => onSelect(agent.key)}
               className="w-full text-left px-3 py-2 text-xs text-foreground hover:bg-muted cursor-pointer flex items-center gap-2 transition-colors duration-100"
             >
-              <div className={`w-6 h-6 rounded-full ${AVATAR_COLORS[hashName(agent.name) % AVATAR_COLORS.length]} flex items-center justify-center text-white text-[9px] font-medium shrink-0`}>
+              {(() => { const [bg, bdr, txt] = AVATAR_PALETTES[hashName(agent.name) % AVATAR_PALETTES.length]; return (
+              <div className={`w-6 h-6 rounded-full border ${bg} ${bdr} ${txt} flex items-center justify-center text-[9px] font-semibold shrink-0`}>
                 {initials(agent.name)}
               </div>
+              ); })()}
               {agent.name}
             </button>
           ))}

package/app/components/agents/AgentsSkillsSection.tsx

@@ -207,7 +207,12 @@ export default function AgentsSkillsSection({
     <section className="space-y-4 overflow-hidden" aria-label={copy.title}>
       {/* Header */}
       <div className="flex items-center justify-between gap-3">
-        <h2 className="text-sm font-medium text-foreground">{copy.title}</h2>
+        <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" aria-hidden="true" />
+          </div>
+          {copy.title}
+        </h2>
         <div className="flex items-center gap-1 rounded-md border border-border p-0.5 bg-background" role="tablist" aria-label={copy.title}>
           <PillButton active={view === 'bySkill'} label={copy.tabs.bySkill} onClick={() => setView('bySkill')} />
           <PillButton active={view === 'byAgent'} label={copy.tabs.byAgent} onClick={() => setView('byAgent')} />
@@ -215,8 +220,8 @@ export default function AgentsSkillsSection({
       </div>
 
       {/* Compact status strip */}
-      <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">
           <span className="inline-flex items-center gap-1.5 text-muted-foreground">
             <span className="w-1.5 h-1.5 rounded-full bg-[var(--success)]" aria-hidden="true" />
             {copy.summaryEnabled(enabledCount)}
@@ -446,8 +451,12 @@ function BySkillView({
         <div className="space-y-3">
           {sortedGrouped.map(([groupKey, sortedSkills]) => (
             <div key={groupKey}>
-              <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
-                {copy.groupLabels[groupKey as keyof typeof copy.groupLabels]} <span className="tabular-nums">({sortedSkills.length})</span>
+              <div className="flex items-center gap-2 mb-2.5">
+                <span className="w-1 h-4 rounded-full bg-[var(--amber)]/40" aria-hidden="true" />
+                <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                  {copy.groupLabels[groupKey as keyof typeof copy.groupLabels]}
+                </span>
+                <span className="text-2xs tabular-nums text-muted-foreground/50 font-medium">({sortedSkills.length})</span>
               </div>
               <div className="space-y-3">
                 {sortedSkills.map((skill) => {
@@ -457,7 +466,7 @@ function BySkillView({
                   const isUserSkill = skill.kind === 'mindos' && skill.source === 'user';
 
                   return (
-                    <div key={skill.name} className="rounded-lg border border-border bg-card p-4 hover:border-border/60 hover:shadow-sm transition-all duration-150">
+                    <div key={skill.name} 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">
                       {/* Skill header */}
                       <div className="flex items-center justify-between gap-2 mb-2">
                         <div className="flex items-center gap-2 min-w-0">
@@ -676,7 +685,7 @@ function AgentCard({
   const visibleNative = nativeExpanded ? nativeSkills : nativeSkills.slice(0, NATIVE_COLLAPSE_THRESHOLD);
 
   return (
-    <div className="rounded-lg border border-border bg-card hover:border-border/60 hover:shadow-sm transition-all duration-150 overflow-hidden">
+    <div className="rounded-xl border border-border bg-card hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200 overflow-hidden">
       {/* Card header with avatar */}
       <div className="flex items-center gap-3 p-4 pb-0">
         <AgentAvatar name={name} status={status} />

package/app/components/agents/SkillDetailPopover.tsx

@@ -217,14 +217,14 @@ export default function SkillDetailPopover({
         className="fixed right-0 top-0 z-50 h-full w-full max-w-md border-l border-border bg-card shadow-2xl flex flex-col animate-in slide-in-from-right duration-200"
       >
         {/* ─── Header ─── */}
-        <div className="flex items-center gap-3 px-5 py-4 border-b border-border shrink-0">
-          <div className="w-9 h-9 rounded-lg bg-muted/60 flex items-center justify-center text-muted-foreground shrink-0">
+        <div className="flex items-center gap-3 px-5 py-4 border-b border-border/60 bg-gradient-to-r from-card to-card/80 shrink-0">
+          <div className="w-9 h-9 rounded-xl bg-[var(--amber)]/[0.08] flex items-center justify-center text-[var(--amber)] shrink-0">
             <CapIcon size={18} />
           </div>
           <div className="flex-1 min-w-0">
             <h2 className="text-sm font-semibold text-foreground truncate">{skillName}</h2>
-            <div className="flex items-center gap-2 mt-0.5">
-              <span className={`text-2xs px-1.5 py-0.5 rounded font-medium select-none ${
+            <div className="flex items-center gap-2 mt-1">
+              <span className={`text-2xs px-2 py-0.5 rounded-full font-medium select-none ${
                 isNative
                   ? 'bg-muted text-muted-foreground'
                   : skill?.source === 'builtin'
@@ -233,7 +233,7 @@ export default function SkillDetailPopover({
               }`}>
                 {sourceLabel}
               </span>
-              <span className="text-2xs text-muted-foreground capitalize">{capability}</span>
+              <span className="text-2xs text-muted-foreground/60 capitalize">{capability}</span>
             </div>
           </div>
           <button
@@ -267,9 +267,9 @@ export default function SkillDetailPopover({
 
           {/* Path */}
           {skillPath && (
-            <div className="rounded-lg border border-border bg-background p-3">
-              <span className="text-2xs text-muted-foreground block mb-1">{copy.path}</span>
-              <code className="text-xs text-foreground font-mono break-all leading-relaxed">{skillPath}</code>
+            <div className="rounded-xl border border-border/50 bg-muted/[0.03] p-3.5">
+              <span className="text-2xs text-muted-foreground/60 block mb-1.5 uppercase tracking-wider">{copy.path}</span>
+              <code className="text-xs text-foreground/80 font-mono break-all leading-relaxed">{skillPath}</code>
             </div>
           )}
 
@@ -410,9 +410,9 @@ function MetaCard({
       : tone === 'muted' ? 'text-muted-foreground'
         : 'text-foreground';
   return (
-    <div className="rounded-lg border border-border bg-background px-3 py-2.5">
-      <span className="text-2xs text-muted-foreground block mb-0.5">{label}</span>
-      <span className={`text-sm font-medium capitalize ${valueColor}`}>{value}</span>
+    <div className="rounded-xl border border-border/50 bg-muted/[0.03] px-3.5 py-3 hover:bg-muted/[0.06] transition-colors duration-100">
+      <span className="text-2xs text-muted-foreground/60 block mb-1 uppercase tracking-wider">{label}</span>
+      <span className={`text-sm font-semibold capitalize ${valueColor}`}>{value}</span>
     </div>
   );
 }