@geminilight/mindos 0.5.69 → 0.6.0

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>
   );
 }

package/app/components/agents/agents-content-model.ts

@@ -56,11 +56,10 @@ export function groupSkillsByCapability(skills: SkillInfo[]): Record<SkillCapabi
   };
 }
 
-function buildBaseRiskItems(args: { mcpRunning: boolean; detectedCount: number; notFoundCount: number }): RiskItem[] {
-  const items: RiskItem[] = [];
-  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: 'MCP server is not running' });
-  if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: `${args.detectedCount} detected agent(s) need configuration` });
-  return items;
+export interface RiskCopy {
+  riskMcpStopped: string;
+  riskDetected: (n: number) => string;
+  riskSkillsDisabled: string;
 }
 
 export function buildRiskQueue(args: {
@@ -68,9 +67,12 @@ export function buildRiskQueue(args: {
   detectedCount: number;
   notFoundCount: number;
   allSkillsDisabled: boolean;
+  copy: RiskCopy;
 }): RiskItem[] {
-  const items = buildBaseRiskItems(args);
-  if (args.allSkillsDisabled) items.push({ id: 'skills-disabled', severity: 'warn', title: 'All skills are disabled' });
+  const items: RiskItem[] = [];
+  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: args.copy.riskMcpStopped });
+  if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: args.copy.riskDetected(args.detectedCount) });
+  if (args.allSkillsDisabled) items.push({ id: 'skills-disabled', severity: 'warn', title: args.copy.riskSkillsDisabled });
   return items;
 }
 
@@ -178,12 +180,18 @@ export function filterAgentsForMcpWorkspace(
   });
 }
 
+const defaultRiskCopy: RiskCopy = {
+  riskMcpStopped: 'MCP server is not running.',
+  riskDetected: (n: number) => `${n} detected agent(s) need configuration.`,
+  riskSkillsDisabled: 'All skills are disabled.',
+};
+
 export function buildMcpRiskQueue(args: {
   mcpRunning: boolean;
   detectedCount: number;
   notFoundCount: number;
 }): RiskItem[] {
-  return buildBaseRiskItems(args);
+  return buildRiskQueue({ ...args, allSkillsDisabled: false, copy: defaultRiskCopy });
 }
 
 export interface McpBulkReconnectResult {