web+coder: discover Claude's enabled commands + plugin skills; icon-split commands vs skills

claude is PTY (no ACP discovery), so claude-command-discovery.ts reads its enabled set from disk (user-global): ~/.claude/commands/*.md + every enabled plugin's skills/<name>/SKILL.md (kind=skill) and commands/*.md (kind=command), from ~/.claude/settings.json:enabledPlugins + installed_plugins.json install paths, frontmatter-parsed, bare names, deduped. The snapshot claude branch discovers these live (snapshot cache rate-limits the reads). The coder / menu now shows up to three icon'd groups: <agent> commands (Terminal), <agent> skills (Puzzle), BooCoder skills (Sparkles) via a new optional icon on SlashCommandGroup. AgentCommand gains a kind field in both coder + web copies (parity test enforces); mergeCommandsByName made generic to preserve it. Invocation unchanged (literal /name -> claude). Project-local plugins deferred. BooChat unaffected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/web/src/components/SlashCommandPicker.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import type { CSSProperties, RefObject } from 'react';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '@/lib/utils';
 
@@ -11,6 +11,7 @@ export interface SlashCommandItem {
 export interface SlashCommandGroup {
   label: string;
   items: SlashCommandItem[];
+  icon?: ReactNode;
 }
 
 interface Props {
@@ -50,7 +51,7 @@ export function SlashCommandPicker({
     () =>
       groups
         ? groups
-            .map((g) => ({ label: g.label, items: filterByPrefix(g.items, query) }))
+            .map((g) => ({ label: g.label, icon: g.icon, items: filterByPrefix(g.items, query) }))
             .filter((g) => g.items.length > 0)
         : null,
     [groups, query],
@@ -203,7 +204,8 @@ export function SlashCommandPicker({
       {filteredGroups
         ? filteredGroups.map((g) => (
             <div key={g.label}>
-              <div className="px-2.5 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+              <div className="px-2.5 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70 flex items-center gap-1.5">
+                {g.icon}
                 {g.label}
               </div>
               {g.items.map((item) => renderItem(item, (runningIndex += 1)))}