@aion0/forge 0.5.49 → 0.5.50

package/components/CraftTerminalPicker.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+// First-launch picker for a craft's terminal: choose agent, then (if Claude) pick session.
+
+import React, { useEffect, useState } from 'react';
+import type { SessionInfo } from './TerminalLauncher';
+
+export interface AgentSummary { id: string; name?: string; path?: string; cliType?: string; }
+
+export interface CraftTerminalChoice {
+  agentId: string;
+  agentName?: string;
+  // Session selection — only meaningful when agent supports sessions (e.g. claude)
+  sessionMode: 'last' | 'new' | 'specific';
+  sessionId?: string;          // required when sessionMode === 'specific'
+}
+
+async function fetchCraftSessions(cwd: string): Promise<SessionInfo[]> {
+  try {
+    const res = await fetch(`/api/craft-system/sessions?cwd=${encodeURIComponent(cwd)}`);
+    if (!res.ok) return [];
+    const data = await res.json();
+    return Array.isArray(data) ? data : [];
+  } catch {
+    return [];
+  }
+}
+
+function formatRelativeTime(iso: string): string {
+  if (!iso) return '';
+  const diff = Date.now() - new Date(iso).getTime();
+  if (diff < 60_000) return 'just now';
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return new Date(iso).toLocaleDateString();
+}
+function formatSize(b: number): string {
+  if (!b) return '';
+  if (b < 1024) return `${b}B`;
+  if (b < 1_048_576) return `${(b / 1024).toFixed(0)}KB`;
+  return `${(b / 1_048_576).toFixed(1)}MB`;
+}
+
+const SESSION_AWARE = new Set(['claude', 'claude-code']);  // matched by id or cliType
+
+export default function CraftTerminalPicker({ projectName, craftDir, defaultAgentId, onPick, onCancel }: {
+  projectName: string;
+  craftDir: string;
+  defaultAgentId?: string;
+  onPick: (choice: CraftTerminalChoice) => void;
+  onCancel: () => void;
+}) {
+  const [agents, setAgents] = useState<AgentSummary[]>([]);
+  const [agentId, setAgentId] = useState<string>(defaultAgentId || '');
+  const [sessions, setSessions] = useState<SessionInfo[] | null>(null);
+  const [showAll, setShowAll] = useState(false);
+
+  // Load agents
+  useEffect(() => {
+    fetch('/api/agents')
+      .then(r => r.ok ? r.json() : { agents: [] })
+      .then((res: any) => {
+        const list = (res.agents || []).filter((a: any) => a.enabled !== false);
+        setAgents(list);
+        if (!agentId && list.length > 0) {
+          setAgentId(res.defaultAgent && list.find((a: any) => a.id === res.defaultAgent) ? res.defaultAgent : list[0].id);
+        }
+      });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Load sessions when picked agent supports them
+  const picked = agents.find(a => a.id === agentId);
+  const sessionAware = !!picked && (SESSION_AWARE.has(picked.id) || (picked.cliType && SESSION_AWARE.has(picked.cliType)));
+
+  useEffect(() => {
+    if (!sessionAware) { setSessions(null); return; }
+    setSessions(null);
+    fetchCraftSessions(craftDir)
+      .then(list => {
+        // Already sorted by API but keep defensive sort
+        const sorted = [...list].sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
+        setSessions(sorted);
+      });
+  }, [sessionAware, craftDir]);
+
+  const last = sessions?.[0];
+
+  return (
+    <div className="absolute inset-0 z-40 flex items-center justify-center bg-black/60" onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div className="bg-[var(--bg-primary)] border border-[var(--border)] rounded-lg shadow-2xl w-[420px] max-w-[95vw]">
+        <div className="px-4 py-2 border-b border-[var(--border)] flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--text-primary)]">🖥 Open craft terminal</span>
+          <div className="flex-1" />
+          <button onClick={onCancel} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">✕</button>
+        </div>
+
+        <div className="p-4 space-y-3 text-xs">
+          {/* Agent picker */}
+          <div>
+            <div className="text-[10px] text-[var(--text-secondary)] mb-1">Agent</div>
+            <select value={agentId} onChange={e => setAgentId(e.target.value)}
+              className="w-full text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1">
+              {agents.length === 0 && <option value="">no agents detected</option>}
+              {agents.map(a => <option key={a.id} value={a.id}>{a.name || a.id}</option>)}
+            </select>
+          </div>
+
+          {/* Session picker — only for session-aware agents */}
+          {sessionAware && (
+            <div>
+              <div className="text-[10px] text-[var(--text-secondary)] mb-1">
+                Session <span className="opacity-60">— scoped to this craft's directory</span>
+              </div>
+
+              {sessions === null && <div className="text-[10px] text-[var(--text-secondary)] py-1">Loading sessions…</div>}
+
+              {sessions && (
+                <div className="space-y-1.5">
+                  {/* Resume last (default) — only when sessions exist */}
+                  {last && (
+                    <button onClick={() => onPick({ agentId, agentName: picked?.name, sessionMode: 'last', sessionId: last.id })}
+                      className="w-full text-left px-2.5 py-1.5 rounded border border-emerald-500/40 hover:border-emerald-500 hover:bg-emerald-500/5 transition-colors">
+                      <div className="text-[11px] font-semibold flex items-center gap-1.5 text-[var(--text-primary)]">
+                        <span className="text-emerald-400">●</span> Resume last session
+                      </div>
+                      <div className="text-[9px] text-[var(--text-secondary)] font-mono mt-0.5 flex gap-2">
+                        <span>{last.id.slice(0, 12)}…</span>
+                        <span>{formatRelativeTime(last.modified)}</span>
+                        <span>{formatSize(last.size)}</span>
+                      </div>
+                    </button>
+                  )}
+
+                  {/* Fresh — always available */}
+                  <button onClick={() => onPick({ agentId, agentName: picked?.name, sessionMode: 'new' })}
+                    className="w-full text-left px-2.5 py-1.5 rounded border border-[var(--border)] hover:border-[var(--accent)] hover:bg-[var(--accent)]/5 transition-colors">
+                    <div className="text-[11px] font-semibold text-[var(--text-primary)]">+ New session</div>
+                    <div className="text-[9px] text-[var(--text-secondary)]">Start a fresh Claude session in this craft's directory</div>
+                  </button>
+
+                  {/* Other sessions */}
+                  {sessions.length > 1 && (
+                    <button onClick={() => setShowAll(v => !v)}
+                      className="w-full text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] py-1 text-left">
+                      {showAll ? '▼' : '▶'} Other sessions ({sessions.length - 1})
+                    </button>
+                  )}
+
+                  {showAll && sessions.slice(1).map(s => (
+                    <button key={s.id} onClick={() => onPick({ agentId, agentName: picked?.name, sessionMode: 'specific', sessionId: s.id })}
+                      className="w-full text-left px-2.5 py-1 rounded hover:bg-[var(--bg-tertiary)] transition-colors flex items-center gap-2 text-[10px]">
+                      <span className="font-mono text-[var(--text-secondary)]">{s.id.slice(0, 10)}</span>
+                      <span className="text-[var(--text-secondary)]">{formatRelativeTime(s.modified)}</span>
+                      <span className="text-[var(--text-secondary)] opacity-60 ml-auto">{formatSize(s.size)}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {!sessionAware && (
+            <button onClick={() => onPick({ agentId, agentName: picked?.name, sessionMode: 'new' })}
+              className="w-full px-3 py-2 rounded bg-[var(--accent)]/30 text-[var(--accent)] hover:bg-[var(--accent)]/40 text-xs">
+              Open terminal with {picked?.name || agentId}
+            </button>
+          )}
+        </div>
+
+        <div className="px-4 py-2 border-t border-[var(--border)] flex justify-end">
+          <button onClick={onCancel}
+            className="text-[10px] px-3 py-1 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/CraftsDropdown.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+// Compact crafts menu for the project tab bar. Shows the active craft as a
+// chip (with ⚙ refine + 🗑 delete shortcuts) plus a dropdown listing all
+// available crafts. Replaces the previous flat tab-per-craft layout that
+// blew the workspace bar wide once a few crafts existed.
+
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+
+interface Craft {
+  name: string;
+  displayName: string;
+  description?: string;
+  scope: 'builtin' | 'project' | string;
+}
+
+export default function CraftsDropdown({
+  crafts,
+  activeTab,
+  projectPath,
+  onPick,
+  onNew,
+  onRefine,
+  onDelete,
+  onMarketplace,
+  onPublish,
+  onEditManifest,
+}: {
+  crafts: Craft[];
+  activeTab: string;
+  projectPath: string;
+  onPick: (name: string) => void;
+  onNew: () => void;
+  onRefine: (name: string) => void;
+  onDelete: (name: string, displayName: string) => void;
+  onMarketplace: () => void;
+  onPublish: (name: string) => void;
+  onEditManifest: (name: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [updates, setUpdates] = useState<{ name: string; from?: string; to: string }[]>([]);
+
+  // Background poll for available updates. Cheap (just a registry version compare).
+  useEffect(() => {
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const r = await fetch(`/api/craft-system/marketplace/updates?projectPath=${encodeURIComponent(projectPath)}`);
+        if (!r.ok) return;
+        const j = await r.json();
+        if (!cancelled) setUpdates(j.updates || []);
+      } catch {}
+    };
+    poll();
+    // Re-check whenever the dropdown opens, plus every 5 minutes in background
+    const id = setInterval(poll, 5 * 60_000);
+    return () => { cancelled = true; clearInterval(id); };
+  }, [projectPath, crafts.length]);
+
+  const updatesByName = useMemo(() => {
+    const m = new Map<string, { from?: string; to: string }>();
+    for (const u of updates) m.set(u.name, { from: u.from, to: u.to });
+    return m;
+  }, [updates]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [open]);
+
+  const activeName = activeTab.startsWith('craft:') ? activeTab.slice('craft:'.length) : null;
+  const active = activeName ? crafts.find(c => c.name === activeName) : null;
+
+  return (
+    <div className="relative inline-flex items-stretch gap-0.5" ref={popoverRef}>
+      {/* Active craft chip with refine + delete */}
+      {active && (
+        <>
+          <button
+            onClick={() => onPick(active.name)}
+            className="text-[11px] font-medium px-2.5 py-1 rounded bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40"
+            title={active.description || active.displayName}
+          >
+            {active.displayName}
+          </button>
+          {active.scope === 'project' && (
+            <>
+              <button onClick={() => onEditManifest(active.name)}
+                className="text-[10px] px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--accent)]/20 hover:text-[var(--accent)]"
+                title="Edit craft.yaml (version, displayName, tags, requires)">📝</button>
+              <button onClick={() => onRefine(active.name)}
+                className="text-[10px] px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--accent)]/20 hover:text-[var(--accent)]"
+                title="Refine this craft (AI iterates on it)">⚙</button>
+              <button onClick={() => onPublish(active.name)}
+                className="text-[10px] px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--accent)]/20 hover:text-[var(--accent)]"
+                title="Publish to the crafts marketplace">📦</button>
+              <button onClick={() => onDelete(active.name, active.displayName)}
+                className="text-[10px] px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:bg-red-500/20 hover:text-red-300"
+                title="Delete this craft">🗑</button>
+            </>
+          )}
+        </>
+      )}
+
+      {/* Dropdown trigger */}
+      <button
+        onClick={() => setOpen(v => !v)}
+        className={`relative text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+          open ? 'bg-[var(--bg-tertiary)] text-[var(--accent)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
+        }`}
+        title={updates.length > 0 ? `${updates.length} craft update${updates.length === 1 ? '' : 's'} available` : `${crafts.length} craft${crafts.length === 1 ? '' : 's'}`}
+      >
+        {active ? '▾' : `🛠 Crafts ${crafts.length > 0 ? `(${crafts.length})` : ''} ▾`}
+        {updates.length > 0 && (
+          <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] px-1 rounded-full bg-yellow-500 text-black text-[8px] font-bold leading-[14px] flex items-center justify-center"
+            title={`${updates.length} update${updates.length === 1 ? '' : 's'} available`}>
+            {updates.length}
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown menu */}
+      {open && (
+        <div className="absolute top-full left-0 mt-1 z-30 bg-[var(--bg-primary)] border border-[var(--border)] rounded-lg shadow-xl min-w-[260px] max-w-[400px] py-1">
+          {crafts.length === 0 && (
+            <div className="px-3 py-2 text-[11px] text-[var(--text-secondary)] italic">
+              No crafts yet — click + Craft to add one.
+            </div>
+          )}
+          {crafts.map(c => {
+            const isActive = c.name === activeName;
+            const upd = updatesByName.get(c.name);
+            return (
+              <div key={c.name}
+                className={`group flex items-center gap-2 px-2 py-1.5 cursor-pointer ${
+                  isActive ? 'bg-[var(--accent)]/10' : 'hover:bg-[var(--bg-tertiary)]'
+                }`}
+                onClick={() => { onPick(c.name); setOpen(false); }}
+              >
+                <span className={`flex-1 text-[11px] truncate ${isActive ? 'text-[var(--accent)] font-semibold' : 'text-[var(--text-primary)]'}`}>
+                  {c.displayName}
+                </span>
+                {upd && (
+                  <span className="text-[8px] px-1 py-0.5 rounded bg-yellow-500/20 text-yellow-300"
+                    title={`Update available: ${upd.from || '?'} → ${upd.to}`}>
+                    ↑ {upd.to}
+                  </span>
+                )}
+                {c.description && <span className="text-[9px] text-[var(--text-secondary)] truncate max-w-[120px] opacity-0 group-hover:opacity-100">{c.description}</span>}
+                {c.scope === 'builtin' && (
+                  <span className="text-[8px] px-1 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">builtin</span>
+                )}
+              </div>
+            );
+          })}
+          {updates.length > 0 && (
+            <button onClick={() => { setOpen(false); onMarketplace(); }}
+              className="w-full px-3 py-2 text-left bg-yellow-500/10 hover:bg-yellow-500/15 border-t border-yellow-500/30 text-[10px] text-yellow-300 flex items-center gap-2">
+              <span>⚠ {updates.length} update{updates.length === 1 ? '' : 's'} available — open Marketplace to apply</span>
+              <span className="ml-auto opacity-70">→</span>
+            </button>
+          )}
+          {crafts.length > 0 && <div className="border-t border-[var(--border)] my-1" />}
+          <div className="px-2 py-1 flex items-center gap-1">
+            <button onClick={() => { setOpen(false); onNew(); }}
+              className="text-[10px] px-2 py-1 rounded bg-[var(--accent)]/20 text-[var(--accent)] hover:bg-[var(--accent)]/30 flex-1 text-left"
+              title="Build a new craft">
+              + New craft
+            </button>
+            <button onClick={() => { setOpen(false); onMarketplace(); }}
+              className="text-[10px] px-2 py-1 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--accent)]"
+              title="Browse the crafts marketplace">
+              🛒 Marketplace
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/CraftsMarketplacePanel.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+// Read-only browse view of the global crafts registry, used inside the
+// Dashboard Marketplace tab. Installation requires a target project; we
+// surface a project picker per row that lists the user's recent projects.
+
+import React, { useState, useEffect, useMemo } from 'react';
+
+interface RegistryItem {
+  name: string;
+  displayName: string;
+  description?: string;
+  version: string;
+  author?: string;
+  tags?: string[];
+  requires?: { hasFile?: string[]; hasGlob?: string[] };
+  files?: string[];
+  sourceUrl?: string;
+}
+
+interface ProjectInfo {
+  path: string;
+  name: string;
+}
+
+export default function CraftsMarketplacePanel({ searchQuery = '' }: { searchQuery?: string }) {
+  const [items, setItems] = useState<RegistryItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
+
+  const refresh = async (force = false) => {
+    setLoading(true); setError(null);
+    try {
+      const r = await fetch(`/api/craft-system/registry${force ? '?refresh=1' : ''}`);
+      const j = await r.json();
+      if (!r.ok) throw new Error(j.error || `${r.status}`);
+      setItems(j.items || []);
+    } catch (e: any) { setError(e?.message || String(e)); }
+    finally { setLoading(false); }
+  };
+
+  // Force-refresh on mount so we don't show stale entries right after a publish landed.
+  useEffect(() => { refresh(true); }, []);
+
+  // Pull recent projects (favorites + last opened) for the install picker
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/favorites').then(r => r.ok ? r.json() : []).catch(() => []),
+      fetch('/api/projects').then(r => r.ok ? r.json() : []).catch(() => []),
+    ]).then(([favs, all]) => {
+      const favSet = new Set<string>(Array.isArray(favs) ? favs : []);
+      const list = Array.isArray(all) ? all : [];
+      const ranked = list.map((p: any) => ({
+        path: p.path,
+        name: p.name || p.path.split('/').pop(),
+        fav: favSet.has(p.path),
+      }));
+      ranked.sort((a, b) => Number(b.fav) - Number(a.fav) || a.name.localeCompare(b.name));
+      setProjects(ranked);
+    }).catch(() => {});
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(it =>
+      `${it.name} ${it.displayName} ${it.description || ''} ${(it.tags || []).join(' ')}`
+        .toLowerCase().includes(q)
+    );
+  }, [items, searchQuery]);
+
+  const flash = (msg: string) => { setToast(msg); setTimeout(() => setToast(null), 2500); };
+
+  const install = async (name: string, projectPath: string) => {
+    setBusyId(`${name}::${projectPath}`);
+    try {
+      const r = await fetch('/api/craft-system/marketplace/install', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectPath, name }),
+      });
+      const j = await r.json();
+      if (!j.ok) throw new Error(j.error || 'install failed');
+      flash(`Installed ${name} → ${projectPath.split('/').pop()}`);
+    } catch (e: any) { flash(`Failed: ${e?.message || e}`); }
+    finally { setBusyId(null); }
+  };
+
+  return (
+    <div className="flex-1 overflow-auto relative">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-[var(--border)] bg-[var(--bg-secondary)]/30 sticky top-0 z-10">
+        <span className="text-[10px] text-[var(--text-secondary)]">{items.length} craft{items.length === 1 ? '' : 's'} in registry</span>
+        <div className="flex-1" />
+        <button onClick={() => refresh(true)} disabled={loading}
+          className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]">
+          {loading ? '⏳' : '↻ Sync'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="m-4 p-2 text-[11px] text-red-300 bg-red-500/10 border border-red-500/30 rounded">
+          {error}
+        </div>
+      )}
+
+      {!loading && filtered.length === 0 && (
+        <div className="p-8 text-center text-xs text-[var(--text-secondary)]">
+          {items.length === 0
+            ? 'No crafts in the registry yet. Build one in any project, then click 📦 Publish to submit it.'
+            : 'No crafts match your search.'}
+        </div>
+      )}
+
+      {filtered.map(it => (
+        <div key={it.name} className="px-4 py-3 border-b border-[var(--border)]/50 flex items-start gap-3">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-[12px] font-semibold text-[var(--text-primary)]">{it.displayName}</span>
+              <span className="text-[9px] font-mono text-[var(--text-secondary)]">{it.name}</span>
+              <span className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">v{it.version}</span>
+              {it.author && <span className="text-[9px] text-[var(--text-secondary)]">by {it.author}</span>}
+              {it.sourceUrl && (
+                <a href={it.sourceUrl} target="_blank" rel="noreferrer" className="text-[9px] text-[var(--accent)] hover:underline">
+                  source ↗
+                </a>
+              )}
+            </div>
+            {it.description && <div className="text-[11px] text-[var(--text-secondary)] mt-0.5">{it.description}</div>}
+            {it.tags && it.tags.length > 0 && (
+              <div className="flex gap-1 mt-1 flex-wrap">
+                {it.tags.map(t => (
+                  <span key={t} className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">{t}</span>
+                ))}
+              </div>
+            )}
+            {it.requires && (it.requires.hasFile?.length || it.requires.hasGlob?.length) && (
+              <div className="text-[9px] text-[var(--text-secondary)] opacity-70 mt-1 font-mono">
+                requires: {[...(it.requires.hasFile || []), ...(it.requires.hasGlob || [])].join(', ')}
+              </div>
+            )}
+          </div>
+
+          {/* Install picker */}
+          <div className="shrink-0">
+            <ProjectPickerInstall
+              craftName={it.name}
+              projects={projects}
+              busy={busyId?.startsWith(it.name + '::') || false}
+              onInstall={(p) => install(it.name, p)}
+            />
+          </div>
+        </div>
+      ))}
+
+      {toast && (
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 px-3 py-1.5 text-xs rounded bg-[var(--bg-tertiary)] border border-[var(--border)] shadow-lg z-50">
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProjectPickerInstall({ craftName, projects, busy, onInstall }: {
+  craftName: string; projects: { path: string; name: string }[]; busy: boolean; onInstall: (p: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  if (projects.length === 0) {
+    return <span className="text-[10px] text-[var(--text-secondary)] italic">no projects</span>;
+  }
+  return (
+    <div className="relative">
+      <button onClick={() => setOpen(v => !v)} disabled={busy}
+        className="text-[10px] px-2.5 py-1 rounded bg-[var(--accent)]/30 text-[var(--accent)] hover:bg-[var(--accent)]/40 disabled:opacity-40">
+        {busy ? '⏳' : 'Install ▾'}
+      </button>
+      {open && !busy && (
+        <div className="absolute right-0 mt-1 z-30 bg-[var(--bg-primary)] border border-[var(--border)] rounded shadow-xl min-w-[240px] max-h-72 overflow-auto">
+          <div className="px-2 py-1 text-[10px] text-[var(--text-secondary)] border-b border-[var(--border)]">Install to which project?</div>
+          {projects.map(p => (
+            <button key={p.path} onClick={() => { setOpen(false); onInstall(p.path); }}
+              className="w-full text-left px-2 py-1 text-[10px] hover:bg-[var(--bg-tertiary)]">
+              <div className="font-medium text-[var(--text-primary)]">{p.name}</div>
+              <div className="text-[9px] text-[var(--text-secondary)] truncate">{p.path}</div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}