ompchamber 0.3.0

package/src/client/components/settings/categories/agent-settings/SidebarList.tsx

@@ -0,0 +1,42 @@
+import type { FunctionComponent } from 'preact/compat';
+import { Bot } from 'lucide-preact';
+import type { AgentItem } from '@/shared/types';
+import { SettingsSidebarList } from '@/client/components/settings/SettingsSidebarList';
+
+interface AgentSidebarListProps {
+  agents: AgentItem[];
+  selectedAgentId: string | null;
+  onSelectAgent: (agentId: string) => void;
+  onAddNewAgent: () => void;
+  selectedProject: string;
+  onChangeProject: (project: string) => void;
+}
+
+export const AgentSidebarList: FunctionComponent<AgentSidebarListProps> = ({
+  agents,
+  selectedAgentId,
+  onSelectAgent,
+  onAddNewAgent,
+  selectedProject,
+  onChangeProject,
+}) => (
+  <SettingsSidebarList
+    items={agents}
+    selectedId={selectedAgentId}
+    onSelect={onSelectAgent}
+    onAddNew={onAddNewAgent}
+    addTitle="Create new agent"
+    builtInLabel="Built-in Agents"
+    customLabel="Custom Agents"
+    formatName={(name) => name}
+    nameClassName="font-semibold text-xs text-ink truncate"
+    selectedProject={selectedProject}
+    onChangeProject={onChangeProject}
+    renderIcon={(isBuiltIn) => (
+      <div className="relative">
+        <Bot className={`w-3.5 h-3.5 ${isBuiltIn ? 'text-ink/80' : 'text-ink/60'} flex-shrink-0`} />
+        {isBuiltIn && <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-ink" />}
+      </div>
+    )}
+  />
+);

package/src/client/components/settings/categories/behavior-settings/Editor.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import { Check, Code, Copy, Info, RotateCcw, Save, ShieldCheck } from 'lucide-preact';
+import type { InstructionFileKind, InstructionSaveResult } from '@/shared/types';
+
+/** Per-file copy: what the file is, and how omp loads it. */
+const FILE_COPY: Record<InstructionFileKind, { title: string; badge: string; tooltip: string; placeholder: string }> = {
+  agents: {
+    title: 'Global AGENTS.md',
+    badge: 'context file',
+    tooltip:
+      'User context file omp loads when a session starts (~/.omp/agent/AGENTS.md, relocated by PI_CODING_AGENT_DIR). It shadows every other user-level context file, so it is the place for long-lived global rules. Recognizable permission directives are also mirrored into config.yml tools.approval. Saving empty content removes the file.',
+    placeholder: 'Type instructions in <mandatory_rules> tags...',
+  },
+  rules: {
+    title: 'Global RULES.md',
+    badge: 'sticky rule',
+    tooltip:
+      'User sticky rule (~/.omp/agent/RULES.md). Its whole body is re-sent on every request and re-read when a session starts or after /clear and /new, so it keeps its hold in long conversations — keep it to a few hard requirements. Saving empty content removes the file.',
+    placeholder: 'One hard requirement per line, e.g. Never commit or push unless asked.',
+  },
+};
+
+interface BehaviorEditorProps {
+  kind: InstructionFileKind;
+  content: string;
+  /** Native file this editor writes, or null in MOCK mode where nothing hits disk. */
+  filePath: string | null;
+  /** False when the native file does not exist yet — Save creates it. */
+  exists: boolean;
+  isMock: boolean;
+  onSave: (newContent: string) => Promise<InstructionSaveResult>;
+  /** Omitted for RULES.md, which has no shipped default to restore. */
+  onReset?: () => Promise<InstructionSaveResult>;
+}
+
+export const BehaviorEditor: FunctionComponent<BehaviorEditorProps> = ({
+  kind,
+  content,
+  filePath,
+  exists,
+  isMock,
+  onSave,
+  onReset,
+}) => {
+  const [editorValue, setEditorValue] = useState(content);
+  const [copied, setCopied] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [note, setNote] = useState<string | null>(null);
+
+  useEffect(() => {
+    setEditorValue(content);
+  }, [content]);
+
+  const copy = FILE_COPY[kind];
+  const lines = editorValue.split('\n');
+  const lineCount = lines.length;
+  const charCount = editorValue.length;
+  const tokenEstimate = Math.round(charCount / 4);
+
+  const statusLabel = isMock
+    ? 'Demo preset — MOCK=true, nothing is written to disk'
+    : filePath
+      ? `${filePath}${exists ? '' : ' · not created yet'}`
+      : 'Native path unavailable';
+
+  const runPersist = async (persist: () => Promise<InstructionSaveResult>) => {
+    setSaving(true);
+    setError(null);
+    setNote(null);
+    try {
+      const result = await persist();
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      setNote(result.note ?? null);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(editorValue);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleSave = () => runPersist(() => onSave(editorValue));
+
+  const handleReset = async () => {
+    if (!onReset) return;
+    if (!window.confirm(`Replace ${filePath ?? 'the stored content'} with the shipped default rules?`)) return;
+    await runPersist(onReset);
+  };
+
+  const handleInsertRule = (ruleSnippet: string) => {
+    setEditorValue((prev) => `${prev.trim()}\n\n${ruleSnippet}\n`);
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-full bg-paper text-ink p-6 md:p-8 overflow-hidden">
+      {/* Header Bar */}
+      <div className="flex items-center justify-between pb-4 border-b border-ink/10">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-bold tracking-tight text-ink flex items-center gap-2">
+            <span>{copy.title}</span>
+            <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border border-ink/15 text-ink/50 font-medium">
+              {copy.badge}
+            </span>
+          </h2>
+          <div className="group relative">
+            <Info className="w-4 h-4 text-ink/40 cursor-help" />
+            <div className="absolute left-0 top-6 hidden group-hover:block w-80 p-2.5 rounded-lg bg-ink text-paper text-xs shadow-lg z-20 leading-relaxed pointer-events-none">
+              {copy.tooltip}
+            </div>
+          </div>
+        </div>
+
+        {/* Action Buttons Top */}
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleCopy}
+            title="Copy to clipboard"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-ink/20 hover:border-ink/40 hover:bg-ink/5 text-ink transition-colors cursor-pointer"
+          >
+            {copied ? <Check className="w-3.5 h-3.5 text-ink" /> : <Copy className="w-3.5 h-3.5" />}
+            <span>{copied ? 'Copied' : 'Copy'}</span>
+          </button>
+          {onReset && (
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={saving}
+              title="Reset to default rules"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-ink/20 hover:border-ink/40 hover:bg-ink/5 text-ink transition-colors cursor-pointer disabled:opacity-50"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              <span>Reset</span>
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-4 py-2 text-xs font-medium rounded-lg bg-ink text-paper hover:bg-ink/90 transition-colors shadow-xs cursor-pointer disabled:opacity-50"
+          >
+            {saved ? <Check className="w-3.5 h-3.5" /> : <Save className="w-3.5 h-3.5" />}
+            <span>{saving ? 'Saving…' : saved ? 'Saved' : 'Save Changes'}</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Persist Feedback */}
+      {(error || note) && (
+        <div className={`pt-3 text-xs font-mono break-words ${error ? 'text-error' : 'text-ink/60'}`}>
+          {error ?? note}
+        </div>
+      )}
+
+      {/* Quick Insert Snippet Chips */}
+      <div className="py-3 flex items-center gap-2 overflow-x-auto text-xs border-b border-ink/10">
+        <span className="text-ink/50 uppercase tracking-wider text-[10px] font-bold whitespace-nowrap">
+          Quick Insert:
+        </span>
+        <button
+          type="button"
+          onClick={() =>
+            handleInsertRule(
+              `<mandatory_rules>\nALWAY USE CODEGRAPH (codegraph_codegraph_explore) TOOL MCP FIRST BEFORE OTHER TOOL BUILT-IN.\n</mandatory_rules>`
+            )
+          }
+          className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 whitespace-nowrap transition-colors flex items-center gap-1.5 text-ink cursor-pointer"
+        >
+          <Code className="w-3.5 h-3.5 text-ink/60" />
+          + CodeGraph Rule
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            handleInsertRule(
+              `<mandatory_rules>\nIF SUBAGENT NOT DEFINE MODELID, DELEGATE TASK USING INHERIT WITH PARENT MODELID.\n</mandatory_rules>`
+            )
+          }
+          className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 whitespace-nowrap transition-colors flex items-center gap-1.5 text-ink cursor-pointer"
+        >
+          <ShieldCheck className="w-3.5 h-3.5 text-ink/60" />
+          + Model Inheritance
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            handleInsertRule(
+              `<mandatory_rules>\nWHEN COMMIT, ALWAYS USE CONVENTIONAL COMMIT. JANGAN COMMIT SAMPAI AKU MINTA.\n</mandatory_rules>`
+            )
+          }
+          className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 whitespace-nowrap transition-colors flex items-center gap-1.5 text-ink cursor-pointer"
+        >
+          <ShieldCheck className="w-3.5 h-3.5 text-ink/60" />
+          + Conventional Commit Guard
+        </button>
+      </div>
+
+      {/* Code Editor Area with Line Numbers */}
+      <div className="flex-1 min-h-0 mt-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-ink/5 overflow-hidden flex flex-col font-mono text-xs focus-within:border-ink transition-colors">
+        <div className="flex-1 flex overflow-hidden">
+          {/* Line Numbers */}
+          <div className="w-10 py-3 pr-2 select-none text-right font-mono text-xs text-ink/30 border-r border-ink/10 bg-ink/[0.02] overflow-hidden leading-relaxed">
+            {Array.from({ length: Math.max(lineCount, 12) }).map((_, i) => (
+              <div key={i}>{i + 1}</div>
+            ))}
+          </div>
+
+          {/* Text Area */}
+          <textarea
+            value={editorValue}
+            onChange={(e) => setEditorValue(e.currentTarget.value)}
+            spellcheck={false}
+            className="flex-1 p-3 bg-transparent text-ink font-mono text-xs leading-relaxed resize-none focus:outline-none overflow-y-auto"
+            placeholder={copy.placeholder}
+          />
+        </div>
+
+        {/* Editor Status Bar */}
+        <div className="p-2.5 border-t border-ink/10 bg-paper flex items-center justify-between gap-4 text-xs font-mono text-ink/60">
+          <div className="flex items-center gap-4 shrink-0">
+            <span>{lineCount} lines</span>
+            <span>{charCount} chars</span>
+            <span>~{tokenEstimate} tokens</span>
+          </div>
+          <div className="flex items-center gap-2 min-w-0">
+            <span className={`w-2 h-2 rounded-full shrink-0 ${exists && !isMock ? 'bg-ink/60' : 'bg-ink/25'}`} />
+            <span className="truncate" title={statusLabel}>{statusLabel}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/client/components/settings/categories/chat-settings/FollowUpSection.tsx

@@ -0,0 +1,120 @@
+import { Check, Compass, ListOrdered } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+
+interface ChatFollowUpSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+export function ChatFollowUpSection({ settings, onUpdate }: ChatFollowUpSectionProps) {
+  return (
+    <section className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold text-ink">Follow-up Dispatch</h4>
+        <p className="text-[11px] text-ink/60 mt-0.5">
+          Choose how new user prompts are handled while the AI agent is actively executing.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Queue Mode Card */}
+        <div
+          onClick={() => onUpdate({ followUpBehavior: 'queue' })}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => e.key === 'Enter' && onUpdate({ followUpBehavior: 'queue' })}
+          className={`p-3.5 rounded-lg border text-left transition-all cursor-pointer flex flex-col justify-between select-none ${
+            settings.followUpBehavior === 'queue'
+              ? 'border-ink bg-ink/5 ring-1 ring-ink/20 shadow-xs'
+              : 'border-ink/15 bg-paper hover:border-ink/30 hover:bg-ink/[0.02]'
+          }`}
+        >
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <div
+                  className={`w-7 h-7 rounded-md flex items-center justify-center ${
+                    settings.followUpBehavior === 'queue'
+                      ? 'bg-ink text-paper'
+                      : 'bg-ink/5 text-ink/70'
+                  }`}
+                >
+                  <ListOrdered size={15} />
+                </div>
+                <span className="font-semibold text-xs text-ink">Queue Mode</span>
+              </div>
+              <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+                Sequential
+              </span>
+            </div>
+            <p className="text-[11px] text-ink/65 leading-relaxed">
+              Messages wait in an execution queue and run in succession once current inference completes.
+            </p>
+          </div>
+
+          <div className="mt-3 pt-2.5 border-t border-ink/10 flex items-center justify-between text-[11px]">
+            <span className="text-ink/50 text-[10px]">Recommended for batch operations</span>
+            <div
+              className={`w-4 h-4 rounded-full border flex items-center justify-center ${
+                settings.followUpBehavior === 'queue'
+                  ? 'border-ink bg-ink text-paper'
+                  : 'border-ink/30 bg-transparent'
+              }`}
+            >
+              {settings.followUpBehavior === 'queue' && <Check size={10} strokeWidth={3} />}
+            </div>
+          </div>
+        </div>
+
+        {/* Steering Mode Card */}
+        <div
+          onClick={() => onUpdate({ followUpBehavior: 'steering' })}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => e.key === 'Enter' && onUpdate({ followUpBehavior: 'steering' })}
+          className={`p-3.5 rounded-lg border text-left transition-all cursor-pointer flex flex-col justify-between select-none ${
+            settings.followUpBehavior === 'steering'
+              ? 'border-ink bg-ink/5 ring-1 ring-ink/20 shadow-xs'
+              : 'border-ink/15 bg-paper hover:border-ink/30 hover:bg-ink/[0.02]'
+          }`}
+        >
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <div
+                  className={`w-7 h-7 rounded-md flex items-center justify-center ${
+                    settings.followUpBehavior === 'steering'
+                      ? 'bg-ink text-paper'
+                      : 'bg-ink/5 text-ink/70'
+                  }`}
+                >
+                  <Compass size={15} />
+                </div>
+                <span className="font-semibold text-xs text-ink">Steering Mode</span>
+              </div>
+              <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+                Intervention
+              </span>
+            </div>
+            <p className="text-[11px] text-ink/65 leading-relaxed">
+              Immediately redirects current agent trajectory and focuses runtime resources onto the new instruction.
+            </p>
+          </div>
+
+          <div className="mt-3 pt-2.5 border-t border-ink/10 flex items-center justify-between text-[11px]">
+            <span className="text-ink/50 text-[10px]">Recommended for active debugging</span>
+            <div
+              className={`w-4 h-4 rounded-full border flex items-center justify-center ${
+                settings.followUpBehavior === 'steering'
+                  ? 'border-ink bg-ink text-paper'
+                  : 'border-ink/30 bg-transparent'
+              }`}
+            >
+              {settings.followUpBehavior === 'steering' && <Check size={10} strokeWidth={3} />}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/client/components/settings/categories/chat-settings/KeybindingsSection.tsx

@@ -0,0 +1,107 @@
+import { Compass, CornerDownLeft, Keyboard, WrapText } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+
+export type KeybindingOption = 'Enter' | 'Shift + Enter' | 'Ctrl / Cmd + Enter';
+
+interface ChatKeybindingsSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+export function ChatKeybindingsSection({ settings, onUpdate }: ChatKeybindingsSectionProps) {
+  const options: KeybindingOption[] = ['Enter', 'Shift + Enter', 'Ctrl / Cmd + Enter'];
+
+  const handleKeybindingChange = (
+    action: 'keybindingSend' | 'keybindingNewLine' | 'keybindingSteering',
+    newValue: KeybindingOption
+  ) => {
+    onUpdate((prev) => {
+      const updates: Partial<SettingsState> = { [action]: newValue };
+
+      const otherActions = (
+        [
+          'keybindingSend',
+          'keybindingNewLine',
+          'keybindingSteering',
+        ] as const
+      ).filter((a) => a !== action);
+
+      for (const other of otherActions) {
+        if (prev[other] === newValue) {
+          updates[other] = prev[action];
+        }
+      }
+
+      return { ...prev, ...updates };
+    });
+  };
+
+  const keybindingRows = [
+    {
+      id: 'keybindingSend' as const,
+      label: 'Send Message',
+      desc: 'Submit prompt and initiate agent reasoning',
+      icon: CornerDownLeft,
+      value: settings.keybindingSend || 'Enter',
+    },
+    {
+      id: 'keybindingNewLine' as const,
+      label: 'Line Break',
+      desc: 'Insert newline inside input box without dispatching',
+      icon: WrapText,
+      value: settings.keybindingNewLine || 'Shift + Enter',
+    },
+    {
+      id: 'keybindingSteering' as const,
+      label: 'Steering Intervention',
+      desc: 'Send prompt with steering interruption priority',
+      icon: Compass,
+      value: settings.keybindingSteering || 'Ctrl / Cmd + Enter',
+    },
+  ];
+
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Keyboard size={15} className="text-ink/70" />
+          <h4 className="text-sm font-semibold text-ink">Keyboard Shortcuts</h4>
+        </div>
+        <span className="text-[10px] text-ink/50 font-mono">Auto-conflict resolution</span>
+      </div>
+
+      <div className="bg-paper border border-ink/15 rounded-lg divide-y divide-ink/10 shadow-xs overflow-hidden">
+        {keybindingRows.map((row) => (
+          <div
+            key={row.id}
+            className="p-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3 hover:bg-ink/[0.015] transition-colors"
+          >
+            <div className="flex items-start gap-3">
+              <div className="w-7 h-7 rounded-md bg-ink/5 flex items-center justify-center text-ink/70 flex-shrink-0 mt-0.5">
+                <row.icon size={14} />
+              </div>
+              <div>
+                <div className="font-semibold text-xs text-ink">{row.label}</div>
+                <div className="text-[11px] text-ink/60 mt-0.5">{row.desc}</div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 self-end sm:self-center">
+              <select
+                value={row.value}
+                onChange={(e) => handleKeybindingChange(row.id, e.currentTarget.value as KeybindingOption)}
+                className="bg-paper border border-ink/20 rounded-md px-2.5 py-1.5 outline-none focus:border-ink text-[11px] font-medium text-ink cursor-pointer hover:border-ink/40 transition-colors"
+              >
+                {options.map((opt) => (
+                  <option key={opt} value={opt}>
+                    {opt}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/client/components/settings/categories/chat-settings/TransportSection.tsx

@@ -0,0 +1,101 @@
+import { Check, Radio, Zap } from 'lucide-preact';
+import type { SettingsState, StreamTransport } from '@/shared/types';
+
+interface ChatTransportSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+const OPTIONS: Array<{
+  id: StreamTransport;
+  label: string;
+  badge: string;
+  icon: typeof Zap;
+  description: string;
+  note: string;
+}> = [
+  {
+    id: 'websocket',
+    label: 'WebSocket',
+    badge: 'Default',
+    icon: Zap,
+    description:
+      'One duplex socket carries every agent frame — no per-event HTTP framing, protocol-level ping keepalive, and capped client backoff on drops.',
+    note: 'Lowest overhead per frame',
+  },
+  {
+    id: 'sse',
+    label: 'Server-Sent Events',
+    badge: 'Fallback',
+    icon: Radio,
+    description:
+      'Long-lived HTTP response stream with automatic browser reconnection. Pick this when a proxy or network blocks the WebSocket upgrade.',
+    note: 'Works through HTTP-only proxies',
+  },
+];
+
+export function ChatTransportSection({ settings, onUpdate }: ChatTransportSectionProps) {
+  const active = settings.streamTransport ?? 'websocket';
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold text-ink">Streaming Transport</h4>
+        <p className="text-[11px] text-ink/60 mt-0.5">
+          Wire protocol for live agent events. Applies to the next connection — reconnect or send a new prompt to switch.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {OPTIONS.map(({ id, label, badge, icon: Icon, description, note }) => {
+          const selected = active === id;
+          const select = () => onUpdate({ streamTransport: id });
+          return (
+            <div
+              key={id}
+              onClick={select}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => e.key === 'Enter' && select()}
+              className={`p-3.5 rounded-lg border text-left transition-all cursor-pointer flex flex-col justify-between select-none ${
+                selected
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20 shadow-xs'
+                  : 'border-ink/15 bg-paper hover:border-ink/30 hover:bg-ink/[0.02]'
+              }`}
+            >
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`w-7 h-7 rounded-md flex items-center justify-center ${
+                        selected ? 'bg-ink text-paper' : 'bg-ink/5 text-ink/70'
+                      }`}
+                    >
+                      <Icon size={15} />
+                    </div>
+                    <span className="font-semibold text-xs text-ink">{label}</span>
+                  </div>
+                  <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+                    {badge}
+                  </span>
+                </div>
+                <p className="text-[11px] text-ink/65 leading-relaxed">{description}</p>
+              </div>
+
+              <div className="mt-3 pt-2.5 border-t border-ink/10 flex items-center justify-between text-[11px]">
+                <span className="text-ink/50 text-[10px]">{note}</span>
+                <div
+                  className={`w-4 h-4 rounded-full border flex items-center justify-center ${
+                    selected ? 'border-ink bg-ink text-paper' : 'border-ink/30 bg-transparent'
+                  }`}
+                >
+                  {selected && <Check size={10} strokeWidth={3} />}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}