@pellux/goodvibes-tui 1.1.0 → 1.7.0

package/src/panels/modals/skills-modal.ts

@@ -0,0 +1,189 @@
+import { MODAL_TONES } from './modal-theme.ts';
+import { infoRow } from './modal-surface-helpers.ts';
+import { readFileSync, readdirSync, mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, sep } from 'node:path';
+import type { ConfigModalActionContext, ConfigModalRow, ConfigModalSurface, ConfigModalView } from '../../input/config-modal-types.ts';
+import type { SkillOrigin, SkillRecord } from '../skills-panel.ts';
+import { listInstalledEcosystemEntries, type EcosystemCatalogPathOptions, type ShellPathService } from '@/runtime/index.ts';
+
+// ---------------------------------------------------------------------------
+// Skills → config-modal surface (W6.1 group-B port). Project-local and global
+// skill-pack discovery. Disk scans happen only in refresh() (never in
+// buildView), mirroring the panel's onActivate()-triggered load. Browse-only:
+// the panel never had a command-routable mutation verb (no /skills delete/remove
+// subcommand exists), so the only action is refresh/navigate. Selection-blind
+// port: the panel's selected-skill path/deps/includes detail is folded into
+// each row label.
+//
+// discoverSkills() in the panel was async; the sync re-implementation below
+// mirrors the same directory/frontmatter/marketplace-provenance conventions
+// (the two are independent implementations of the same on-disk contract).
+// ---------------------------------------------------------------------------
+
+export interface SkillsModalDeps {
+  readonly shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>;
+  readonly ecosystemPaths?: EcosystemCatalogPathOptions;
+}
+
+function parseFrontmatter(content: string): Record<string, string> {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return {};
+  const result: Record<string, string> = {};
+  for (const line of match[1].split('\n')) {
+    const [key, ...rest] = line.split(':');
+    if (key && rest.length > 0) result[key.trim()] = rest.join(':').trim();
+  }
+  return result;
+}
+
+function getSkillDirectories(cwd: string, homeDir: string): Array<{ root: string; origin: SkillOrigin }> {
+  return [
+    { root: join(cwd, '.goodvibes', 'skills'), origin: 'project-local' },
+    { root: join(cwd, '.goodvibes', 'tui', 'skills'), origin: 'project-local' },
+    { root: join(homeDir, '.goodvibes', 'skills'), origin: 'global' },
+    { root: join(homeDir, '.goodvibes', 'tui', 'skills'), origin: 'global' },
+  ];
+}
+
+function readSkillFileSync(path: string, origin: SkillOrigin): SkillRecord | null {
+  let content = '';
+  try { content = readFileSync(path, 'utf-8'); } catch { return null; }
+  const frontmatter = parseFrontmatter(content);
+  const body = content.replace(/^---\n[\s\S]*?\n---\n?/, '');
+  const name = frontmatter.name ?? path.split(/[\\/]/).pop()?.replace(/\.md$/, '') ?? 'skill';
+  const description = frontmatter.description ?? frontmatter.summary ?? '';
+  const dependencies = frontmatter.depends_on
+    ? frontmatter.depends_on.split(',').map((item) => item.trim()).filter(Boolean)
+    : [];
+  const includes: string[] = [];
+  const includeRegex = /^@([\w/-]+)/gm;
+  let match: RegExpExecArray | null;
+  while ((match = includeRegex.exec(body)) !== null) includes.push(match[1]);
+  return { name, description, path, origin, dependencies, includes, frontmatter };
+}
+
+function scanSkillDirectorySync(root: string, origin: SkillOrigin): SkillRecord[] {
+  let entries: string[] = [];
+  try { entries = readdirSync(root); } catch { return []; }
+  const records: SkillRecord[] = [];
+  for (const entry of entries.sort((a, b) => a.localeCompare(b))) {
+    if (entry.endsWith('.md')) {
+      const record = readSkillFileSync(join(root, entry), origin);
+      if (record) records.push(record);
+      continue;
+    }
+    const record = readSkillFileSync(join(root, entry, 'SKILL.md'), origin);
+    if (record) records.push(record);
+  }
+  return records;
+}
+
+function applyMarketplaceProvenance(records: SkillRecord[], ecosystemPaths: EcosystemCatalogPathOptions): SkillRecord[] {
+  let receipts: ReturnType<typeof listInstalledEcosystemEntries>;
+  try { receipts = listInstalledEcosystemEntries('skill', ecosystemPaths); } catch { return records; }
+  if (receipts.length === 0) return records;
+  return records.map((record) => {
+    const receipt = receipts.find((candidate) => record.path === candidate.targetPath || record.path.startsWith(`${candidate.targetPath}${sep}`));
+    if (!receipt) return record;
+    return { ...record, marketplaceProvenance: receipt.provenanceSummary };
+  });
+}
+
+function discoverSkillsSync(
+  shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>,
+  ecosystemPaths?: EcosystemCatalogPathOptions,
+): SkillRecord[] {
+  const seen = new Set<string>();
+  const records: SkillRecord[] = [];
+  for (const { root, origin } of getSkillDirectories(shellPaths.workingDirectory, shellPaths.homeDirectory)) {
+    for (const record of scanSkillDirectorySync(root, origin)) {
+      if (seen.has(record.name.toLowerCase())) continue;
+      seen.add(record.name.toLowerCase());
+      records.push(record);
+    }
+  }
+  const tagged = ecosystemPaths ? applyMarketplaceProvenance(records, ecosystemPaths) : records;
+  return tagged.sort((a, b) => {
+    const originRank = a.origin === b.origin ? 0 : a.origin === 'project-local' ? -1 : 1;
+    return originRank || a.name.localeCompare(b.name);
+  });
+}
+
+function originLabel(origin: SkillOrigin): string {
+  switch (origin) {
+    case 'project-local': return 'project';
+    case 'global': return 'global';
+    case 'custom': return 'custom';
+  }
+}
+
+class SkillsModalSurface implements ConfigModalSurface {
+  readonly name = 'skills-modal';
+  readonly title = 'Skills';
+  private cached: SkillRecord[] = [];
+  private requestRender: () => void = () => {};
+
+  constructor(private readonly deps: SkillsModalDeps) {}
+
+  readonly actions = [{ key: 'r', id: 'refresh', label: 'refresh' }];
+
+  onOpen(requestRender: () => void): void { this.requestRender = requestRender; this.refresh(); }
+
+  private refresh(): void { this.cached = discoverSkillsSync(this.deps.shellPaths, this.deps.ecosystemPaths); }
+
+  buildView(): ConfigModalView {
+    const rows: ConfigModalRow[] = [];
+    if (this.cached.length === 0) {
+      rows.push(infoRow('empty:0', 'No skills discovered.'));
+      rows.push(infoRow('empty:title', 'Next steps'));
+      rows.push(infoRow('empty:dir', '.goodvibes/skills       — place skill .md files here (project-local) or ~/.goodvibes/skills (global)', { dim: true }));
+      rows.push(infoRow('empty:registry', '/registry search skills — inspect the same skill directories from the shell', { dim: true }));
+      return { title: 'Skills', tabs: [{ id: 'skills', label: 'Skills', rows, emptyText: '' }] };
+    }
+
+    const projectCount = this.cached.filter((s) => s.origin === 'project-local').length;
+    const globalCount = this.cached.filter((s) => s.origin === 'global').length;
+    const header = [`skills ${this.cached.length}  project ${projectCount}  global ${globalCount}`];
+
+    for (const skill of this.cached) {
+      const badge = skill.marketplaceProvenance ? '★' : ' ';
+      const dot = skill.origin === 'project-local' ? '◆' : '•';
+      const detail = [
+        `[${originLabel(skill.origin)}]`,
+        skill.description || 'No description provided.',
+        skill.dependencies.length > 0 ? `deps ${skill.dependencies.length}` : null,
+        skill.includes.length > 0 ? `inc ${skill.includes.length}` : null,
+        skill.marketplaceProvenance ?? null,
+      ].filter((s): s is string => s !== null).join(' · ');
+      rows.push({
+        id: skill.path,
+        label: `${dot} ${badge} ${skill.name.padEnd(24)} ${detail}`,
+        ...(skill.marketplaceProvenance ? { style: { fg: MODAL_TONES.info } } : {}),
+      });
+    }
+
+    return { title: 'Skills', tabs: [{ id: 'skills', label: 'Skills', header, rows }] };
+  }
+
+  onAction(id: string, ctx: ConfigModalActionContext): void {
+    if (id === 'refresh') { this.refresh(); ctx.setStatus('Rescanned skill directories.'); }
+  }
+}
+
+export function createSkillsModalSurface(deps: SkillsModalDeps): ConfigModalSurface {
+  return new SkillsModalSurface(deps);
+}
+
+/**
+ * Deterministic golden fixture: a fresh tmp directory tree wired as both cwd and
+ * homeDir and removed immediately (scanSkillDirectorySync catches missing dirs →
+ * []), so refresh() finds no `.goodvibes/skills` directories and renders the
+ * static empty-state copy. The random tmp path never appears in the output.
+ */
+export function skillsModalGoldenSurface(): ConfigModalSurface {
+  const root = mkdtempSync(join(tmpdir(), 'gv-skills-golden-'));
+  const surface = createSkillsModalSurface({ shellPaths: { workingDirectory: root, homeDirectory: root } });
+  rmSync(root, { recursive: true, force: true });
+  return surface;
+}

package/src/panels/modals/subscription-modal.ts

@@ -0,0 +1,172 @@
+import type { ConfigModalActionContext, ConfigModalSurface, ConfigModalView } from '../../input/config-modal-types.ts';
+import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../../runtime/ui-service-queries.ts';
+import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config';
+import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config';
+import { formatElapsed } from '../../utils/format-elapsed.ts';
+import { toneStyle, statusGlyph, pad, postureLine, kv, type Tone } from './modal-surface-helpers.ts';
+
+interface Row {
+  readonly provider: string;
+  readonly hasOAuthConfig: boolean;
+  readonly subscription: ProviderSubscription | null;
+  readonly pending: PendingSubscriptionLogin | null;
+}
+
+type Status = 'active' | 'pending' | 'available' | 'unconfigured';
+
+function statusOf(row: Row): Status {
+  if (row.subscription) return 'active';
+  if (row.pending) return 'pending';
+  return row.hasOAuthConfig ? 'available' : 'unconfigured';
+}
+
+function statusTone(status: Status): Tone {
+  switch (status) {
+    case 'active': return 'good';
+    case 'pending': return 'warn';
+    case 'available': return 'info';
+    case 'unconfigured': return 'dim';
+  }
+}
+
+const EXPIRING_SOON_MS = 24 * 60 * 60 * 1000;
+
+function isExpiringSoon(sub: ProviderSubscription | null): boolean {
+  if (!sub?.expiresAt) return false;
+  const remaining = sub.expiresAt - Date.now();
+  return remaining > 0 && remaining <= EXPIRING_SOON_MS;
+}
+
+/**
+ * Subscription config-modal surface (migrated from the `subscription` panel).
+ * All reads are synchronous (serviceRegistry.getAll + subscription-manager
+ * queries) so buildView reads them live each tick; a 5s timer keeps an
+ * externally-completed browser OAuth handshake visible without a keypress, the
+ * same cadence the panel used. Enter signs out (surface-managed confirm,
+ * matching the panel's ConfirmState) on an active row, or starts login via the
+ * existing `/subscription login <p> start` command on an available row.
+ */
+class SubscriptionModalSurface implements ConfigModalSurface {
+  readonly name = 'subscription-modal';
+  readonly title = 'Subscriptions';
+  private requestRender: () => void = () => {};
+  private timer: ReturnType<typeof setInterval> | null = null;
+  /** Provider awaiting a second Enter to confirm sign-out (surface-managed so
+   *  only a destructive sign-out is confirm-gated, not a login start). */
+  private pendingLogout: string | null = null;
+
+  constructor(
+    private readonly serviceRegistry: Pick<ServiceInspectionQuery, 'getAll'>,
+    private readonly manager: SubscriptionAccessQuery,
+  ) {}
+
+  readonly actions = [
+    { key: 'enter', id: 'primary', label: 'sign in / out' },
+    { key: 'r', id: 'refresh', label: 'refresh' },
+  ];
+
+  onOpen(requestRender: () => void): void {
+    this.requestRender = requestRender;
+    this.pendingLogout = null;
+    if (this.timer === null) this.timer = setInterval(() => this.requestRender(), 5_000);
+  }
+
+  onClose(): void {
+    if (this.timer !== null) { clearInterval(this.timer); this.timer = null; }
+    this.pendingLogout = null;
+  }
+
+  private buildRows(): Row[] {
+    const services = this.serviceRegistry.getAll();
+    const builtin = listBuiltinSubscriptionProviders();
+    const providers = new Set<string>([
+      ...builtin.map((p) => p.provider),
+      ...Object.values(services).filter((s) => s.authType === 'oauth' && s.oauth).map((s) => s.providerId ?? s.name),
+      ...this.manager.list().map((e) => e.provider),
+      ...this.manager.listPending().map((e) => e.provider),
+    ]);
+    return [...providers].sort((a, b) => a.localeCompare(b)).map((provider) => {
+      const service = Object.values(services).find((s) => (s.providerId ?? s.name) === provider && s.authType === 'oauth' && s.oauth);
+      const builtinEntry = builtin.find((e) => e.provider === provider);
+      return {
+        provider,
+        hasOAuthConfig: Boolean(service?.oauth) || Boolean(builtinEntry),
+        subscription: this.manager.get(provider),
+        pending: this.manager.getPending(provider),
+      } satisfies Row;
+    });
+  }
+
+  buildView(): ConfigModalView {
+    const rows = this.buildRows();
+    const active = rows.filter((r) => r.subscription).length;
+    const pending = rows.filter((r) => r.pending).length;
+    const configured = rows.filter((r) => r.hasOAuthConfig).length;
+    const header = [postureLine([
+      kv('configured', configured),
+      kv('active', active),
+      kv('pending', pending),
+      kv('providers', rows.length),
+    ])];
+
+    return {
+      title: 'Subscriptions',
+      tabs: [{
+        id: 'subscriptions',
+        label: 'Subscriptions',
+        header,
+        rows: rows.map((row) => {
+          const status = statusOf(row);
+          const expiring = isExpiringSoon(row.subscription);
+          const marker = expiring ? ' expiring soon' : '';
+          return {
+            id: `sub:${row.provider}`,
+            label: `${statusGlyph(statusTone(status))} ${pad(row.provider, 16)} ${pad(status.toUpperCase(), 12)} oauth=${row.hasOAuthConfig ? 'yes' : 'no'}  override=${row.subscription ? 'active' : 'off'}${marker}`,
+            style: toneStyle(expiring ? 'warn' : statusTone(status)),
+          };
+        }),
+        emptyText: 'No provider subscriptions yet. Try /subscription login openai start.',
+        hints: ['Enter sign in/out', 'r refresh'],
+      }],
+    };
+  }
+
+  onAction(id: string, ctx: ConfigModalActionContext): void {
+    if (id === 'refresh') { this.pendingLogout = null; ctx.setStatus('refreshed'); this.requestRender(); return; }
+    if (id !== 'primary') return;
+    const provider = ctx.row?.id.startsWith('sub:') ? ctx.row.id.slice('sub:'.length) : null;
+    if (!provider) return;
+    const rows = this.buildRows();
+    const row = rows.find((r) => r.provider === provider);
+    if (!row) return;
+    const status = statusOf(row);
+    if (status === 'active') {
+      // Surface-managed confirm, guarded by provider match so a stale confirm
+      // can never sign out the wrong row.
+      if (this.pendingLogout === provider) {
+        this.pendingLogout = null;
+        this.manager.logout(provider);
+        ctx.setStatus(`Signed out ${provider}.`);
+      } else {
+        this.pendingLogout = provider;
+        ctx.setStatus(`Sign out ${provider}? Press Enter again to confirm.`);
+      }
+    } else if (status === 'available') {
+      this.pendingLogout = null;
+      void ctx.executeCommand?.('subscription', ['login', provider, 'start']);
+      ctx.setStatus(`Starting login for ${provider}…`);
+    } else if (status === 'pending' && row.pending) {
+      ctx.setStatus(`Login pending (${formatElapsed(Date.now() - row.pending.createdAt)} ago). Finish with /subscription login ${provider} finish <code>.`);
+    } else {
+      ctx.setStatus(`${provider} has no OAuth config. Add one or enable a built-in subscription provider.`);
+    }
+    this.requestRender();
+  }
+}
+
+export function createSubscriptionModalSurface(
+  serviceRegistry: Pick<ServiceInspectionQuery, 'getAll'>,
+  manager: SubscriptionAccessQuery,
+): ConfigModalSurface {
+  return new SubscriptionModalSurface(serviceRegistry, manager);
+}

package/src/panels/modals/work-plan-modal.ts

@@ -0,0 +1,149 @@
+import type {
+  ConfigModalActionContext,
+  ConfigModalRow,
+  ConfigModalSurface,
+  ConfigModalView,
+} from '../../input/config-modal-types.ts';
+import type { WorkPlanItemStatus } from '../../work-plans/work-plan-store.ts';
+
+// ---------------------------------------------------------------------------
+// Work Plan → config-modal surface (W6.1 group-B port). Lists the active
+// persistent plan's checklist items with a progress summary + status counts.
+// All mutations (add/edit item, cycle/set status, remove, clear-completed)
+// route to the existing `/work-plan` command path (charter: no
+// destructive/interactive mutation direct-called from a modal; the panel's
+// inline add/edit draft form has no place in a read/navigate modal — the bare
+// `/work-plan add` subcommand is the honest stand-in). Selection-blind port:
+// the panel's selected-item owner/source/notes/linked detail is folded into
+// each row label.
+// ---------------------------------------------------------------------------
+
+const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
+  pending: '[ ]', in_progress: '[>]', blocked: '[!]', done: '[x]', failed: '[x]', cancelled: '[-]',
+};
+
+/** `/work-plan <subcommand> <id>` for each status. */
+const STATUS_COMMAND: Record<WorkPlanItemStatus, string> = {
+  pending: 'pending', in_progress: 'start', blocked: 'block', done: 'done', failed: 'fail', cancelled: 'cancel',
+};
+
+const STATUS_ORDER: readonly WorkPlanItemStatus[] = ['pending', 'in_progress', 'blocked', 'done', 'failed', 'cancelled'];
+
+interface WorkPlanLinkTargetsLike { readonly agentId?: string | undefined; readonly wrfcId?: string | undefined; readonly taskId?: string | undefined; readonly sessionId?: string | undefined; }
+interface WorkPlanItemLike { readonly id: string; readonly title: string; readonly status: WorkPlanItemStatus; readonly owner?: string | undefined; readonly source?: string | undefined; readonly notes?: string | undefined; readonly linked?: WorkPlanLinkTargetsLike | undefined; readonly updatedAt: number; }
+interface WorkPlanLike { readonly projectRoot: string; readonly items: readonly WorkPlanItemLike[]; }
+
+export interface WorkPlanModalDeps {
+  readonly workPlanStore: { getActivePlan(): WorkPlanLike };
+}
+
+function compactDate(value: number): string { return new Date(value).toISOString().replace('T', ' ').slice(0, 16); }
+
+function progressBar(pct: number, width = 20): string {
+  const filled = Math.max(0, Math.min(width, Math.round((pct / 100) * width)));
+  return `[${'#'.repeat(filled)}${'-'.repeat(width - filled)}] ${pct}%`;
+}
+
+function linkedSegments(linked: WorkPlanLinkTargetsLike | undefined): string {
+  if (!linked) return '';
+  return [
+    linked.agentId ? `agent:${linked.agentId}` : null,
+    linked.wrfcId ? `wrfc:${linked.wrfcId}` : null,
+    linked.taskId ? `task:${linked.taskId}` : null,
+    linked.sessionId ? `session:${linked.sessionId}` : null,
+  ].filter((s): s is string => s !== null).join('  ');
+}
+
+class WorkPlanModalSurface implements ConfigModalSurface {
+  readonly name = 'work-plan-modal';
+  readonly title = 'Work Plan';
+  private projectRoot = '';
+  private items: WorkPlanItemLike[] = [];
+
+  constructor(private readonly deps: WorkPlanModalDeps) {}
+
+  private readonly hasRow = (row: ConfigModalRow | null): boolean => row !== null;
+
+  readonly actions = [
+    { key: 'enter', id: 'cycleStatus', label: 'cycle status', enabledFor: this.hasRow },
+    { key: '1', id: 'setPending', label: 'pending', enabledFor: this.hasRow },
+    { key: '2', id: 'setInProgress', label: 'start', enabledFor: this.hasRow },
+    { key: '3', id: 'setBlocked', label: 'block', enabledFor: this.hasRow },
+    { key: '4', id: 'setDone', label: 'done', enabledFor: this.hasRow },
+    { key: '5', id: 'setFailed', label: 'fail', enabledFor: this.hasRow },
+    { key: '6', id: 'setCancelled', label: 'cancel', enabledFor: this.hasRow },
+    { key: 'd', id: 'remove', label: 'delete', enabledFor: this.hasRow },
+    { key: 'c', id: 'clearCompleted', label: 'clear done' },
+    { key: 'a', id: 'add', label: 'add' },
+    { key: 'r', id: 'refresh', label: 'refresh' },
+  ];
+
+  onOpen(): void { this.refresh(); }
+
+  private refresh(): void {
+    const plan = this.deps.workPlanStore.getActivePlan();
+    this.projectRoot = plan.projectRoot;
+    this.items = [...plan.items];
+  }
+
+  private itemFrom(id: string): WorkPlanItemLike | undefined { return this.items.find((i) => i.id === id); }
+
+  buildView(): ConfigModalView {
+    const counts = new Map<WorkPlanItemStatus, number>();
+    for (const status of STATUS_ORDER) counts.set(status, 0);
+    for (const item of this.items) counts.set(item.status, (counts.get(item.status) ?? 0) + 1);
+    const total = this.items.length;
+    const done = (counts.get('done') ?? 0) + (counts.get('cancelled') ?? 0);
+    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+
+    const header = [
+      `Project ${this.projectRoot}`,
+      progressBar(pct),
+      `pending ${counts.get('pending') ?? 0}  active ${counts.get('in_progress') ?? 0}  blocked ${counts.get('blocked') ?? 0}  done ${counts.get('done') ?? 0}  failed ${counts.get('failed') ?? 0}  cancelled ${counts.get('cancelled') ?? 0}`,
+    ];
+
+    const rows: ConfigModalRow[] = this.items.map((item) => {
+      const owner = item.owner ? ` @${item.owner}` : '';
+      const source = item.source ? ` (${item.source})` : '';
+      const notes = item.notes ? ` · ${item.notes}` : '';
+      const linked = linkedSegments(item.linked);
+      const linkPart = linked ? ` · ${linked}` : '';
+      return { id: item.id, label: `${STATUS_LABEL[item.status]} ${item.title}${owner}${source}  updated ${compactDate(item.updatedAt)}${notes}${linkPart}` };
+    });
+
+    return { title: 'Work Plan', tabs: [{ id: 'items', label: 'Items', header, rows, emptyText: 'No work plan items yet.', hints: ['enter cycle status', '1-6 set status', 'd delete', 'c clear done', 'a add'] }] };
+  }
+
+  onAction(id: string, ctx: ConfigModalActionContext): void {
+    if (id === 'refresh') { this.refresh(); ctx.setStatus('Reloaded work plan.'); return; }
+    if (id === 'clearCompleted') { void ctx.executeCommand?.('work-plan', ['clear-done']); ctx.setStatus('Dispatched /work-plan clear-done.'); return; }
+    if (id === 'add') { void ctx.executeCommand?.('work-plan', ['add']); ctx.setStatus('Type the rest on the command line: /work-plan add <title>.'); return; }
+    const item = ctx.row ? this.itemFrom(ctx.row.id) : undefined;
+    if (!item) return;
+    if (id === 'cycleStatus') { void ctx.executeCommand?.('work-plan', ['cycle', item.id]); ctx.setStatus(`Dispatched /work-plan cycle ${item.id}.`); return; }
+    if (id === 'remove') { void ctx.executeCommand?.('work-plan', ['remove', item.id]); ctx.setStatus(`Dispatched /work-plan remove ${item.id}.`); return; }
+    const status: WorkPlanItemStatus | null =
+      id === 'setPending' ? 'pending' : id === 'setInProgress' ? 'in_progress' : id === 'setBlocked' ? 'blocked'
+      : id === 'setDone' ? 'done' : id === 'setFailed' ? 'failed' : id === 'setCancelled' ? 'cancelled' : null;
+    if (!status) return;
+    void ctx.executeCommand?.('work-plan', [STATUS_COMMAND[status], item.id]);
+    ctx.setStatus(`Dispatched /work-plan ${STATUS_COMMAND[status]} ${item.id}.`);
+  }
+}
+
+export function createWorkPlanModalSurface(deps: WorkPlanModalDeps): ConfigModalSurface {
+  return new WorkPlanModalSurface(deps);
+}
+
+/**
+ * Deterministic golden fixture: fixed work-plan items with frozen updatedAt
+ * epoch values — no live store, no wall-clock, no random ids.
+ */
+export function workPlanModalGoldenSurface(): ConfigModalSurface {
+  const FIXED_UPDATED_AT = 1735693200000; // 2025-01-01T01:00:00.000Z
+  const items: readonly WorkPlanItemLike[] = [
+    { id: 'wpi-fixed001', title: 'Migrate KNOWLEDGE/MEMORY/WORK-PLAN panels to modals', status: 'in_progress', owner: 'wo-b', source: 'tui-panel', notes: 'Charter: read/navigate only; mutations route to the command path.', linked: { agentId: 'agent-fixed-1' }, updatedAt: FIXED_UPDATED_AT },
+    { id: 'wpi-fixed002', title: 'Wire modal host redirects', status: 'pending', updatedAt: FIXED_UPDATED_AT },
+  ];
+  return createWorkPlanModalSurface({ workPlanStore: { getActivePlan: () => ({ projectRoot: '/fixed/project', items }) } });
+}

package/src/panels/panel-confirm-overlay.ts

@@ -0,0 +1,72 @@
+// ---------------------------------------------------------------------------
+// PanelConfirmOverlay — arm a confirm from outside, resolve it inside
+// handleInput().
+//
+// Why this exists: SlashCommand.handler(args, ctx) is a single-shot call —
+// there is no "await next keypress" primitive in the command layer. A command
+// that needs a destructive confirm (e.g. /rewind — checkpoint-runtime.ts) can
+// only resolve its target, open+focus a panel, and arm a pending confirm;
+// the actual y/n/Enter/Esc handling has to live in that panel's
+// handleInput() loop. This wraps the project's canonical ConfirmState<T>
+// contract (confirm-state.ts, used inline by GitPanel) so panels opened this
+// way don't each hand-roll the same field + dispatch + render wiring.
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+
+export interface PanelConfirmOverlayHandlers {
+  readonly onConfirm: () => void | Promise<void>;
+  readonly onCancel?: () => void;
+}
+
+export class PanelConfirmOverlay {
+  private state: ConfirmState<{ id: string }> | null = null;
+  private handlers: PanelConfirmOverlayHandlers | null = null;
+
+  /** @param onChange Called after arm() and after a confirmed/cancelled resolution (not on an absorbed keypress) — wire to the host panel's protected markDirty(). */
+  constructor(private readonly onChange: () => void = () => {}) {}
+
+  /** Arm a confirm/cancel prompt. Caller's handlers run only from handleInput(), never eagerly. */
+  arm(opts: { id: string; label: string; verb?: string } & PanelConfirmOverlayHandlers): void {
+    this.state = { subject: { id: opts.id }, label: opts.label, verb: opts.verb };
+    this.handlers = { onConfirm: opts.onConfirm, onCancel: opts.onCancel };
+    this.onChange();
+  }
+
+  get pending(): boolean {
+    return this.state !== null;
+  }
+
+  /**
+   * Call FIRST, before any other key dispatch. Returns true if the key was
+   * consumed by the overlay (confirmed/cancelled/absorbed); false if no
+   * confirm is pending (caller should continue normal dispatch).
+   */
+  handleInput(key: string): boolean {
+    const result = handleConfirmInput(this.state, key);
+    if (result === 'inactive') return false;
+    if (result === 'confirmed') {
+      const handlers = this.handlers;
+      this.state = null;
+      this.handlers = null;
+      this.onChange();
+      if (handlers) void handlers.onConfirm();
+      return true;
+    }
+    if (result === 'cancelled') {
+      const handlers = this.handlers;
+      this.state = null;
+      this.handlers = null;
+      this.onChange();
+      handlers?.onCancel?.();
+      return true;
+    }
+    return true; // absorbed
+  }
+
+  /** The two-line confirm overlay, or null when nothing is pending. */
+  renderLines(width: number): Line[] | null {
+    return this.state ? renderConfirmLines(width, this.state) : null;
+  }
+}