@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/agents/AgentsPrimitives.tsx

@@ -1,360 +0,0 @@
-'use client';
-
-import { Loader2, Plus, X } from 'lucide-react';
-import { useEffect, useRef } from 'react';
-import { useFocusTrap } from '@/lib/hooks/useFocusTrap';
-
-/* ────────── Pill / Status / Search ────────── */
-
-export function PillButton({ active, label, onClick }: { active: boolean; label: string; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-pressed={active}
-      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-text)] font-medium shadow-[0_1px_2px_rgba(200,135,58,0.08)]'
-          : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'
-      }`}
-    >
-      {label}
-    </button>
-  );
-}
-
-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/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-2 h-2 rounded-full ${dotCls}`} aria-hidden="true" />
-      <span className="text-xs">{label}</span>
-      <span className={`tabular-nums font-medium ${countCls}`}>{count}</span>
-    </span>
-  );
-}
-
-export function SearchInput({
-  value,
-  onChange,
-  placeholder,
-  ariaLabel,
-  icon: Icon,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  placeholder: string;
-  ariaLabel: string;
-  icon: React.ComponentType<{ size?: number; className?: string }>;
-}) {
-  return (
-    <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-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.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={13} />
-        </button>
-      )}
-    </label>
-  );
-}
-
-/* ────────── Action / Bulk / Empty ────────── */
-
-export function ActionButton({
-  onClick,
-  disabled,
-  busy,
-  label,
-  busyLabel,
-  variant = 'default',
-}: {
-  onClick: () => void;
-  disabled: boolean;
-  busy: boolean;
-  label: string;
-  busyLabel?: string;
-  variant?: 'default' | 'primary';
-}) {
-  const base = 'inline-flex items-center justify-center gap-1.5 text-2xs min-h-[28px] px-2.5 rounded-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150';
-  const variants = {
-    default: 'border border-border hover:bg-muted',
-    primary: 'bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90',
-  };
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-busy={busy}
-      className={`${base} ${variants[variant]}`}
-    >
-      {busy && <Loader2 size={12} className="animate-spin" aria-hidden="true" />}
-      {busy ? (busyLabel ?? label) : label}
-    </button>
-  );
-}
-
-export function BulkMessage({ message }: { message: string | null }) {
-  if (!message) return null;
-  return (
-    <span role="status" aria-live="polite" className="text-2xs text-muted-foreground animate-in fade-in duration-200">
-      {message}
-    </span>
-  );
-}
-
-export function EmptyState({ message, icon, className }: { message: string; icon?: React.ReactNode; className?: string }) {
-  return (
-    <div className={`rounded-xl border border-border/40 bg-card/30 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 ────────── */
-
-/** Dual-mode palette: soft pastels in light, muted tones in dark — [bg, border, text] */
-const AVATAR_PALETTES: [string, string, string][] = [
-  ['bg-rose-100/70 dark:bg-rose-900/30',       'border-rose-300/50 dark:border-rose-700/40',      'text-rose-600/80 dark:text-rose-400/80'],
-  ['bg-violet-100/70 dark:bg-violet-900/30',   'border-violet-300/50 dark:border-violet-700/40',  'text-violet-600/80 dark:text-violet-400/80'],
-  ['bg-emerald-100/70 dark:bg-emerald-900/30', 'border-emerald-300/50 dark:border-emerald-700/40','text-emerald-600/80 dark:text-emerald-400/80'],
-  ['bg-sky-100/70 dark:bg-sky-900/30',         'border-sky-300/50 dark:border-sky-700/40',        'text-sky-600/80 dark:text-sky-400/80'],
-  ['bg-amber-100/70 dark:bg-amber-900/30',     'border-amber-300/50 dark:border-amber-700/40',    'text-amber-700/80 dark:text-amber-400/80'],
-  ['bg-teal-100/70 dark:bg-teal-900/30',       'border-teal-300/50 dark:border-teal-700/40',      'text-teal-600/80 dark:text-teal-400/80'],
-  ['bg-pink-100/70 dark:bg-pink-900/30',       'border-pink-300/50 dark:border-pink-700/40',      'text-pink-600/80 dark:text-pink-400/80'],
-  ['bg-indigo-100/70 dark:bg-indigo-900/30',   'border-indigo-300/50 dark:border-indigo-700/40',  'text-indigo-600/80 dark:text-indigo-400/80'],
-  ['bg-lime-100/70 dark:bg-lime-900/30',       'border-lime-300/50 dark:border-lime-700/40',      'text-lime-700/80 dark:text-lime-400/80'],
-  ['bg-fuchsia-100/70 dark:bg-fuchsia-900/30', 'border-fuchsia-300/50 dark:border-fuchsia-700/40','text-fuchsia-600/80 dark:text-fuchsia-400/80'],
-  ['bg-cyan-100/70 dark:bg-cyan-900/30',       'border-cyan-300/50 dark:border-cyan-700/40',      'text-cyan-600/80 dark:text-cyan-400/80'],
-  ['bg-orange-100/70 dark:bg-orange-900/30',   'border-orange-300/50 dark:border-orange-700/40',  'text-orange-600/80 dark:text-orange-400/80'],
-];
-
-function hashName(str: string): number {
-  let h = 0;
-  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) | 0;
-  return Math.abs(h);
-}
-
-function initials(name: string): string {
-  const parts = name.split(/[\s\-_]+/).filter(Boolean);
-  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
-  return name.slice(0, 2).toUpperCase();
-}
-
-export function AgentAvatar({
-  name,
-  status,
-  size = 'md',
-  onRemove,
-  href,
-}: {
-  name: string;
-  status?: 'connected' | 'detected' | 'notFound';
-  size?: 'sm' | 'md';
-  onRemove?: () => void;
-  href?: string;
-}) {
-  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} ${bg} ${border} ${text} border rounded-full flex items-center justify-center font-semibold select-none`}>
-        {initials(name)}
-      </div>
-      {status && (
-        <span className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-card ${dotColor}`} aria-hidden="true" />
-      )}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove(); }}
-          className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 scale-75 group-hover/avatar:opacity-100 group-hover/avatar:scale-100 transition-all duration-150 cursor-pointer focus-visible:opacity-100 focus-visible:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label={`Remove ${name}`}
-        >
-          <X size={9} />
-        </button>
-      )}
-    </div>
-  );
-}
-
-export function AddAvatarButton({
-  onClick,
-  label,
-  size = 'md',
-}: {
-  onClick: () => void;
-  label: string;
-  size?: 'sm' | 'md';
-}) {
-  const sizeClasses = size === 'sm' ? 'w-7 h-7' : 'w-9 h-9';
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      title={label}
-      aria-label={label}
-      className={`${sizeClasses} rounded-full border-2 border-dashed border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:border-foreground/30 hover:bg-muted cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
-    >
-      <Plus size={14} />
-    </button>
-  );
-}
-
-/* ────────── Confirm Dialog ────────── */
-
-export function ConfirmDialog({
-  open,
-  title,
-  message,
-  confirmLabel,
-  cancelLabel,
-  onConfirm,
-  onCancel,
-  variant = 'destructive',
-}: {
-  open: boolean;
-  title: string;
-  message: string;
-  confirmLabel: string;
-  cancelLabel: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  variant?: 'destructive' | 'default';
-}) {
-  const cancelRef = useRef<HTMLButtonElement>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
-
-  useFocusTrap(dialogRef, open);
-
-  useEffect(() => {
-    if (open) cancelRef.current?.focus();
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) return;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onCancel();
-    }
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [open, onCancel]);
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title">
-      <div className="absolute inset-0 overlay-backdrop" onClick={onCancel} aria-hidden="true" />
-      <div ref={dialogRef} className="relative bg-card border border-border rounded-lg shadow-xl p-5 max-w-sm w-full mx-4 animate-in fade-in zoom-in-95 duration-200">
-        <h3 id="confirm-dialog-title" className="text-sm font-medium text-foreground mb-1.5">{title}</h3>
-        <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{message}</p>
-        <div className="flex justify-end gap-2">
-          <button
-            ref={cancelRef}
-            type="button"
-            onClick={onCancel}
-            className="px-3 min-h-[32px] text-sm rounded-md border border-border hover:bg-muted cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-150"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            className={`px-3 min-h-[32px] text-sm rounded-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors duration-150 ${
-              variant === 'destructive'
-                ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
-                : 'bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90'
-            }`}
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ────────── Agent Picker Popover ────────── */
-
-export function AgentPickerPopover({
-  open,
-  agents,
-  emptyLabel,
-  onSelect,
-  onClose,
-}: {
-  open: boolean;
-  agents: Array<{ key: string; name: string }>;
-  emptyLabel: string;
-  onSelect: (agentKey: string) => void;
-  onClose: () => void;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function onClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
-    }
-    document.addEventListener('mousedown', onClick);
-    return () => document.removeEventListener('mousedown', onClick);
-  }, [open, onClose]);
-
-  useEffect(() => {
-    if (!open) return;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose();
-    }
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div ref={ref} className="absolute right-0 top-full mt-1 z-30 w-56 rounded-lg border border-border bg-card shadow-lg animate-in fade-in slide-in-from-top-1 duration-150">
-      {agents.length === 0 ? (
-        <p className="px-3 py-2.5 text-xs text-muted-foreground">{emptyLabel}</p>
-      ) : (
-        <div className="py-1 max-h-48 overflow-y-auto">
-          {agents.map((agent) => (
-            <button
-              key={agent.key}
-              type="button"
-              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"
-            >
-              {(() => { 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>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/_standalone/components/agents/AgentsSkillsByAgent.tsx

@@ -1,231 +0,0 @@
-'use client';
-
-import { useMemo, useState } from 'react';
-import Link from 'next/link';
-import { ChevronDown, ChevronRight, Zap } from 'lucide-react';
-import { Toggle } from '@/components/settings/Primitives';
-import type { McpContextValue } from '@/lib/stores/mcp-store';
-import {
-  aggregateCrossAgentSkills,
-  capabilityForSkill,
-  resolveAgentStatus,
-  sortAgentsByStatus,
-} from './agents-content-model';
-import { AgentAvatar, EmptyState } from './AgentsPrimitives';
-import type { SkillsSectionCopy } from './AgentsSkillsSection';
-
-/* ────────── By Agent View ────────── */
-
-export default function ByAgentView({
-  copy,
-  agents,
-  skills,
-  crossAgentSkills,
-  query,
-  onToggleSkill,
-  onOpenDetail,
-}: {
-  copy: SkillsSectionCopy;
-  agents: ReturnType<typeof sortAgentsByStatus>;
-  skills: McpContextValue['skills'];
-  crossAgentSkills: ReturnType<typeof aggregateCrossAgentSkills>;
-  query: string;
-  onToggleSkill: (name: string, enabled: boolean) => Promise<boolean>;
-  onOpenDetail: (name: string) => void;
-}) {
-  const q = query.trim().toLowerCase();
-
-  const filteredAgents = useMemo(() => {
-    if (!q) return agents;
-    return agents.filter((a) => {
-      const haystack = `${a.name} ${a.key}`.toLowerCase();
-      if (haystack.includes(q)) return true;
-      const nativeSkills = a.installedSkillNames ?? [];
-      return nativeSkills.some((s) => s.toLowerCase().includes(q));
-    });
-  }, [agents, q]);
-
-  const filteredSkills = useMemo(() => {
-    if (!q) return skills;
-    return skills.filter((s) => s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q));
-  }, [skills, q]);
-
-  if (filteredAgents.length === 0) {
-    return <EmptyState message={copy.noAgentsYet} />;
-  }
-
-  return (
-    <div className="space-y-3">
-      {filteredAgents.map((agent) => {
-        const agentStatus = resolveAgentStatus(agent);
-        const nativeSkills = (agent.installedSkillNames ?? []).sort();
-        const mcpServers = agent.configuredMcpServers ?? [];
-        const agentMindosSkills = (agent.present ? filteredSkills : [])
-          .slice()
-          .sort((a, b) => {
-            if (a.enabled !== b.enabled) return a.enabled ? -1 : 1;
-            return a.name.localeCompare(b.name);
-          });
-        const totalSkills = nativeSkills.length + agentMindosSkills.length;
-
-        return (
-          <AgentCard
-            key={agent.key}
-            agentKey={agent.key}
-            name={agent.name}
-            status={agentStatus}
-            skillMode={agent.skillMode}
-            mcpCount={mcpServers.length}
-            totalSkills={totalSkills}
-            nativeSkills={nativeSkills}
-            mindosSkills={agentMindosSkills}
-            copy={copy}
-            onToggleSkill={onToggleSkill}
-            onOpenDetail={onOpenDetail}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-/* ────────── Agent Card (Skills ByAgent) ────────── */
-
-function AgentCard({
-  agentKey,
-  name,
-  status,
-  skillMode,
-  mcpCount,
-  totalSkills,
-  nativeSkills,
-  mindosSkills,
-  copy,
-  onToggleSkill,
-  onOpenDetail,
-}: {
-  agentKey: string;
-  name: string;
-  status: 'connected' | 'detected' | 'notFound';
-  skillMode: string | undefined;
-  mcpCount: number;
-  totalSkills: number;
-  nativeSkills: string[];
-  mindosSkills: McpContextValue['skills'];
-  copy: SkillsSectionCopy;
-  onToggleSkill: (name: string, enabled: boolean) => Promise<boolean>;
-  onOpenDetail: (name: string) => void;
-}) {
-  const [nativeExpanded, setNativeExpanded] = useState(false);
-  const NATIVE_COLLAPSE_THRESHOLD = 6;
-  const showNativeToggle = nativeSkills.length > NATIVE_COLLAPSE_THRESHOLD;
-  const visibleNative = nativeExpanded ? nativeSkills : nativeSkills.slice(0, NATIVE_COLLAPSE_THRESHOLD);
-
-  return (
-    <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">
-      <div className="flex items-center gap-3 p-4 pb-0">
-        <AgentAvatar name={name} status={status} />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <Link href={`/agents/${encodeURIComponent(agentKey)}`} className="text-sm font-medium text-foreground hover:underline cursor-pointer truncate">
-              {name}
-            </Link>
-            {skillMode && (
-              <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${
-                skillMode === 'universal' ? 'bg-muted text-muted-foreground'
-                  : skillMode === 'additional' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
-                    : 'bg-muted text-muted-foreground'
-              }`}>
-                {skillMode}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-2 mt-0.5 text-2xs text-muted-foreground">
-            <span className="tabular-nums">{copy.quickStatsMcp(mcpCount)}</span>
-            <span aria-hidden="true">·</span>
-            <span className="tabular-nums">{copy.quickStatsSkills(totalSkills)}</span>
-          </div>
-        </div>
-      </div>
-
-      <div className="p-4 pt-3 space-y-3">
-        {/* Native skills */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">
-              {copy.agentNativeSkills} <span className="tabular-nums">({nativeSkills.length})</span>
-            </p>
-            {showNativeToggle && (
-              <button
-                type="button"
-                onClick={() => setNativeExpanded(!nativeExpanded)}
-                className="text-2xs text-muted-foreground hover:text-foreground cursor-pointer flex items-center gap-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded transition-colors duration-150"
-              >
-                {nativeExpanded ? (
-                  <><ChevronDown size={12} />{copy.collapseNative}</>
-                ) : (
-                  <><ChevronRight size={12} />{copy.showAllNative(nativeSkills.length)}</>
-                )}
-              </button>
-            )}
-          </div>
-          {nativeSkills.length === 0 ? (
-            <p className="text-2xs text-muted-foreground/60">—</p>
-          ) : (
-            <div className="space-y-0.5 max-h-[200px] overflow-y-auto">
-              {visibleNative.map((n) => (
-                <button
-                  key={n}
-                  type="button"
-                  onClick={() => onOpenDetail(n)}
-                  className="w-full flex items-center gap-1.5 py-1 min-h-[28px] hover:bg-muted/30 -mx-1.5 px-1.5 rounded transition-colors duration-100 cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  <Zap size={12} className="shrink-0 text-muted-foreground/50" aria-hidden="true" />
-                  <span className="text-xs text-foreground truncate hover:text-[var(--amber)] transition-colors duration-150">{n}</span>
-                </button>
-              ))}
-              {!nativeExpanded && nativeSkills.length > NATIVE_COLLAPSE_THRESHOLD && (
-                <button
-                  type="button"
-                  onClick={() => setNativeExpanded(true)}
-                  className="w-full text-left text-2xs text-muted-foreground hover:text-foreground py-1 px-1.5 -mx-1.5 cursor-pointer transition-colors duration-150"
-                >
-                  +{nativeSkills.length - NATIVE_COLLAPSE_THRESHOLD}
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* MindOS skills */}
-        {mindosSkills.length > 0 && (
-          <div>
-            <p className="text-2xs font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
-              {copy.agentMindosSkills} <span className="tabular-nums">({mindosSkills.filter((s) => s.enabled).length}/{mindosSkills.length})</span>
-            </p>
-            <div className="space-y-0.5 max-h-[240px] overflow-y-auto">
-              {mindosSkills.map((skill) => (
-                <div key={skill.name} className="flex items-center justify-between gap-2 py-1 min-h-[32px] hover:bg-muted/30 -mx-1.5 px-1.5 rounded transition-colors duration-100">
-                  <div className="flex items-center gap-1.5 min-w-0">
-                    <Zap size={12} className={`shrink-0 ${skill.enabled ? 'text-[var(--amber)]' : 'text-muted-foreground/50'}`} aria-hidden="true" />
-                    <button
-                      type="button"
-                      onClick={() => onOpenDetail(skill.name)}
-                      className="text-xs text-foreground truncate hover:text-[var(--amber)] cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded text-left"
-                    >
-                      {skill.name}
-                    </button>
-                    <span className="text-2xs text-muted-foreground shrink-0">
-                      {copy.groupLabels[capabilityForSkill(skill) as keyof typeof copy.groupLabels]}
-                    </span>
-                  </div>
-                  <Toggle size="sm" checked={skill.enabled} onChange={(v) => void onToggleSkill(skill.name, v)} />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}