@pi-archimedes/subagent 2.1.0 → 2.3.0

package/src/agent-panel.ts

@@ -0,0 +1,1442 @@
+/**
+ * Agent Manager TUI panel.
+ * Overlay with 5 screens: List, Detail, Edit, Name Input, Confirm Delete.
+ */
+
+import * as fs from "node:fs";
+import * as path from "node:path";
+import {
+  matchesKey,
+  Key,
+  truncateToWidth,
+  CURSOR_MARKER,
+} from "@earendil-works/pi-tui";
+import type { AgentConfig } from "./agents.js";
+import { discoverAgentsAll } from "./agents.js";
+import { validateAgentName } from "./frontmatter-io.js";
+import {
+  visibleWidth,
+  padEnd,
+  wrapText,
+  renderHeader,
+  renderFooter,
+  wrapWithBorder,
+} from "@pi-archimedes/core/overlay";
+import { saveAgent, type ManagerState } from "./agent-store.js";
+
+// ── Screen constants ────────────────────────────────────────────────────────
+
+const LIST_VIEWPORT = 8;
+const DETAIL_VIEWPORT_HEIGHT = 14;
+const EDIT_PROMPT_VIEWPORT_HEIGHT = 8;
+const MODEL_SELECTOR_HEIGHT = 10;
+const TOOL_PICKER_HEIGHT = 14;
+const EDIT_FIELDS = ["name", "description", "tools", "model", "thinking"] as const;
+type EditField = (typeof EDIT_FIELDS)[number];
+
+// ── Theme helper type ───────────────────────────────────────────────────────
+
+interface Theme {
+  fg(token: string, text: string): string;
+  bold(text: string): string;
+}
+
+// ── TUI context ─────────────────────────────────────────────────────────────
+
+interface TUIContext {
+  requestRender(): void;
+}
+
+interface ModelInfo {
+  id: string;
+  provider: string;
+  fullId: string;
+}
+
+interface ToolInfo {
+  name: string;
+  description: string;
+}
+
+// ── Component return type ───────────────────────────────────────────────────
+
+interface Component {
+  render(width: number): string[];
+  handleInput(data: string): void;
+  invalidate(): void;
+  dispose(): void;
+}
+
+// ── Helper functions ────────────────────────────────────────────────────────
+
+function fuzzyFilter(items: AgentConfig[], query: string): AgentConfig[] {
+  if (!query) return items;
+  const q = query.toLowerCase();
+  return items.filter(
+    (a) =>
+      a.name.toLowerCase().includes(q) ||
+      a.description.toLowerCase().includes(q),
+  );
+}
+
+function scopeLabel(source: "global" | "user" | "project"): string {
+  if (source === "global") return "home";
+  return source === "user" ? "user" : "proj";
+}
+
+function agentModel(a: AgentConfig): string {
+  return a.model ?? "default";
+}
+
+function filterModels(models: ModelInfo[], query: string): ModelInfo[] {
+  if (!query) return models;
+  const q = query.toLowerCase();
+  return models.filter(
+    (m) =>
+      m.fullId.toLowerCase().includes(q) ||
+      m.id.toLowerCase().includes(q) ||
+      m.provider.toLowerCase().includes(q),
+  );
+}
+
+// ── List screen ─────────────────────────────────────────────────────────────
+
+function renderList(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+  const filtered = fuzzyFilter(state.agents, state.filterQuery);
+
+  // Header
+  lines.push(renderHeader(` Agents [${state.agents.length}] `, width, theme));
+  lines.push(padEnd("", width));
+
+  // Search bar
+  if (state.filterMode || state.filterQuery.length > 0) {
+    const cursor = state.filterMode ? CURSOR_MARKER : "";
+    const queryText = state.filterQuery.length > 0 ? state.filterQuery : "type to filter...";
+    const placeholder = state.filterQuery.length === 0;
+    const searchLine = `◎ ${placeholder ? theme.fg("dim", queryText) : queryText}${cursor}`;
+    lines.push(padEnd(searchLine, width));
+  } else {
+    lines.push(padEnd(`◎ ${theme.fg("dim", "type to filter...")}`, width));
+  }
+  lines.push(padEnd("", width));
+
+  // Agent rows or empty state
+  const start = state.listScroll;
+  const end = Math.min(start + LIST_VIEWPORT, filtered.length);
+
+  if (filtered.length === 0) {
+    lines.push(padEnd("", width));
+    lines.push(padEnd(theme.fg("dim", "No agents found"), width));
+    lines.push(padEnd(theme.fg("dim", "Press n to create your first agent"), width));
+  } else {
+    for (let i = start; i < end; i++) {
+      const agent = filtered[i];
+      if (!agent) continue;
+      const isCursor = i === state.listCursor;
+      const cursorMark = isCursor ? ">" : " ";
+
+      const name = truncateToWidth(agent.name, 16);
+      const model = truncateToWidth(agentModel(agent), 12);
+      const scope = `[${scopeLabel(agent.source)}]`;
+      const desc = truncateToWidth(agent.description, Math.max(1, width - 1 - 16 - 1 - 12 - 1 - 8 - 1));
+
+      const nameCol = isCursor
+        ? theme.fg("accent", padEnd(name, 16))
+        : padEnd(name, 16);
+      const modelCol = theme.fg("dim", padEnd(model, 12));
+      const scopeCol = theme.fg("dim", padEnd(scope, 8));
+      const descCol = theme.fg("dim", desc);
+
+      const line = `${cursorMark} ${nameCol} ${modelCol} ${scopeCol} ${descCol}`;
+      lines.push(padEnd(line, width));
+    }
+  }
+
+  // Fill remaining viewport rows
+  while (lines.length < 4 + LIST_VIEWPORT + 2) {
+    lines.push(padEnd("", width));
+  }
+
+  // Preview bar
+  if (filtered.length > 0 && state.listCursor >= 0 && state.listCursor < filtered.length) {
+    const previewAgent = filtered[state.listCursor];
+    if (!previewAgent) {
+      lines.push(padEnd("", width));
+    } else {
+      const preview = theme.fg(
+        "dim",
+        truncateToWidth(`Preview: ${previewAgent.description}`, width),
+      );
+      lines.push(preview);
+    }
+  }
+
+  // Footer
+  lines.push(renderFooter(" [enter] view  [n] new  [c] clone  [d] delete  [/] search  [esc] close ", width, theme));
+
+  return lines;
+}
+
+function handleListInput(
+  state: ManagerState,
+  data: string,
+  done: () => void,
+  requestRender: () => void,
+): "close" | void {
+  const filtered = fuzzyFilter(state.agents, state.filterQuery);
+
+  if (matchesKey(data, Key.up)) {
+    if (state.listCursor > 0) {
+      state.listCursor--;
+      if (state.listCursor < state.listScroll) {
+        state.listScroll = state.listCursor;
+      }
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.down)) {
+    if (state.listCursor < filtered.length - 1) {
+      state.listCursor++;
+      if (state.listCursor >= state.listScroll + LIST_VIEWPORT) {
+        state.listScroll = state.listCursor - LIST_VIEWPORT + 1;
+      }
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.enter)) {
+    const selected = filtered[state.listCursor];
+    if (selected) {
+      state.screen = "detail";
+      state.detailAgent = selected;
+      state.detailScroll = 0;
+      requestRender();
+    }
+  } else if (matchesKey(data, "n")) {
+    state.screen = "name-input";
+    state.nameInputMode = "new";
+    state.nameInputBuffer = "";
+    state.nameInputCursor = 0;
+    state.nameInputScope = "user";
+    state.nameInputSource = null;
+    state.nameInputError = null;
+    state.isNew = true;
+    requestRender();
+  } else if (matchesKey(data, "c")) {
+    const source = filtered[state.listCursor];
+    if (source) {
+      state.screen = "name-input";
+      state.nameInputMode = "clone";
+      state.nameInputBuffer = `${source.name}-copy`;
+      state.nameInputCursor = state.nameInputBuffer.length;
+      state.nameInputScope = source.source;
+      state.nameInputSource = source;
+      state.nameInputError = null;
+      state.isNew = true;
+      requestRender();
+    }
+  } else if (matchesKey(data, "d")) {
+    const target = filtered[state.listCursor];
+    if (target) {
+      state.screen = "confirm-delete";
+      state.deleteTarget = target;
+      state.deleteFromScreen = "list";
+      requestRender();
+    }
+  } else if (matchesKey(data, "/")) {
+    state.filterMode = true;
+    requestRender();
+  } else if (matchesKey(data, Key.backspace)) {
+    if (state.filterQuery.length > 0) {
+      state.filterQuery = state.filterQuery.slice(0, -1);
+      state.listCursor = 0;
+      state.listScroll = 0;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.escape)) {
+    if (state.filterQuery.length > 0) {
+      state.filterQuery = "";
+      state.filterMode = false;
+      state.listCursor = 0;
+      state.listScroll = 0;
+      requestRender();
+    } else {
+      return "close";
+    }
+  } else {
+    // Single printable char
+    if (state.filterMode || state.filterQuery.length > 0) {
+      if (data.length === 1 && data >= " " && data <= "~") {
+        state.filterQuery += data;
+        state.filterMode = false;
+        state.listCursor = 0;
+        state.listScroll = 0;
+        requestRender();
+      }
+    }
+  }
+}
+
+// ── Detail screen ───────────────────────────────────────────────────────────
+
+function renderDetail(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+  const agent = state.detailAgent;
+  if (!agent) {
+    lines.push(renderHeader(" No agent selected ", width, theme));
+    lines.push(renderFooter(" [esc] back ", width, theme));
+    return lines;
+  }
+
+  // Header
+  lines.push(renderHeader(` Agent: ${agent.name} [${scopeLabel(agent.source)}] `, width, theme));
+
+  // Frontmatter section
+  const fieldLines: string[] = [];
+  fieldLines.push(theme.fg("accent", `name:`) + ` ${agent.name}`);
+  fieldLines.push(theme.fg("accent", `description:`) + ` ${agent.description}`);
+  if (agent.tools && agent.tools.length > 0) {
+    fieldLines.push(theme.fg("accent", `tools:`) + ` ${agent.tools.join(", ")}`);
+  } else {
+    fieldLines.push(theme.fg("accent", `tools:`) + ` ${theme.fg("dim", "(none)")}`);
+  }
+  fieldLines.push(theme.fg("accent", `model:`) + ` ${agentModel(agent)}`);
+  fieldLines.push(theme.fg("accent", `thinking:`) + ` ${agent.thinking ?? theme.fg("dim", "(none)")}`);
+
+  for (const fl of fieldLines) {
+    lines.push(padEnd(fl, width));
+  }
+
+  // Extra fields
+  if (agent.extraFields && Object.keys(agent.extraFields).length > 0) {
+    lines.push(padEnd(theme.fg("dim", "─".repeat(width)), width));
+    for (const [key, value] of Object.entries(agent.extraFields).sort()) {
+      lines.push(padEnd(theme.fg("dim", `${key}: ${value}`), width));
+    }
+  }
+
+  // Body separator
+  lines.push(padEnd(theme.fg("dim", "---"), width));
+
+  // Body (systemPrompt) - scrollable
+  const bodyLines = wrapText(agent.systemPrompt, width);
+  const bodyViewport = Math.max(6, 14 - lines.length);
+  const bodyStart = state.detailScroll;
+  const bodyEnd = Math.min(bodyStart + bodyViewport, bodyLines.length);
+
+  // Scroll indicator: more above
+  if (bodyStart > 0) {
+    lines.push(padEnd(theme.fg("dim", `↑ ${bodyStart} more`), width));
+  }
+
+  for (let i = bodyStart; i < bodyEnd; i++) {
+    const line = bodyLines[i];
+    if (line != null) lines.push(padEnd(line, width));
+  }
+
+  // Scroll indicator: more below
+  const remainingBelow = bodyLines.length - bodyEnd;
+  if (remainingBelow > 0) {
+    lines.push(padEnd(theme.fg("dim", `↓ ${remainingBelow} more`), width));
+  }
+
+  // Footer
+  lines.push(renderFooter(" [e] edit  [d] delete  [esc] back ", width, theme));
+
+  return lines;
+}
+
+function handleDetailInput(
+  state: ManagerState,
+  data: string,
+  requestRender: () => void,
+): void {
+  if (matchesKey(data, Key.up)) {
+    if (state.detailScroll > 0) {
+      state.detailScroll--;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.down)) {
+    if (state.detailAgent) {
+      const bodyLines = wrapText(state.detailAgent.systemPrompt, state.lastContentWidth);
+      const bodyViewport = Math.max(6, DETAIL_VIEWPORT_HEIGHT - 9);
+      if (state.detailScroll < bodyLines.length - bodyViewport) {
+        state.detailScroll++;
+        requestRender();
+      }
+    }
+    requestRender();
+  } else if (matchesKey(data, "e")) {
+    // Create mutable copy
+    const agent = state.detailAgent;
+    if (agent) {
+      state.screen = "edit";
+      const copy: AgentConfig = { ...agent };
+      if (agent.tools) copy.tools = [...agent.tools];
+      state.editAgent = copy;
+      state.editOriginal = { ...agent };
+      if (agent.tools) state.editOriginal.tools = [...agent.tools];
+      state.editReturnScreen = "detail";
+      state.editFieldIndex = 0;
+      state.editInField = false;
+      state.editDirty = false;
+      state.editFieldCursor = 0;
+      state.editPromptMode = false;
+      state.editPromptCursor = 0;
+      state.editPromptScroll = 0;
+      state.editDiscardPrompt = false;
+      state.editError = null;
+      state.isNew = false;
+      requestRender();
+    }
+  } else if (matchesKey(data, "d")) {
+    state.screen = "confirm-delete";
+    state.deleteTarget = state.detailAgent;
+    state.deleteFromScreen = "detail";
+    requestRender();
+  } else if (matchesKey(data, Key.escape)) {
+    state.screen = "list";
+    requestRender();
+  }
+}
+
+// ── Edit screen ─────────────────────────────────────────────────────────────
+
+function renderEdit(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+  const agent = state.editAgent;
+  if (!agent) return lines;
+
+  // Discard prompt
+  if (state.editDiscardPrompt) {
+    lines.push(renderHeader(" Discard changes? ", width, theme));
+    lines.push(padEnd("", width));
+    lines.push(padEnd(theme.fg("dim", "Unsaved changes will be lost."), width));
+    lines.push(padEnd("", width));
+    lines.push(renderFooter(" [y] discard  [n / esc] keep editing ", width, theme));
+    return lines;
+  }
+
+  // Model picker
+  if (state.modelPickerOpen) {
+    return renderModelPicker(state, width, theme);
+  }
+
+  // Tool picker
+  if (state.toolPickerOpen) {
+    return renderToolPicker(state, width, theme);
+  }
+
+  // Header
+  const dirtyMark = state.editDirty ? " *" : "";
+  lines.push(renderHeader(` Edit: ${agent.name}${dirtyMark} `, width, theme));
+
+  // Error line
+  if (state.editError) {
+    lines.push(padEnd(theme.fg("error", `Error: ${state.editError}`), width));
+  }
+
+  // System prompt edit mode
+  if (state.editPromptMode) {
+    lines.push(padEnd(theme.fg("dim", "systemPrompt:"), width));
+    const promptLines = wrapText(agent.systemPrompt, width);
+    const promptViewport = Math.max(6, 14 - lines.length - 2);
+    const promptStart = state.editPromptScroll;
+    const promptEnd = Math.min(promptStart + promptViewport, promptLines.length);
+
+    for (let i = promptStart; i < promptEnd; i++) {
+      const line = promptLines[i];
+      if (line != null) lines.push(padEnd(line, width));
+    }
+
+    // Hint line
+    lines.push(padEnd(theme.fg("dim", " [↑↓] scroll  [ctrl+s] save  [esc] done "), width));
+    return lines;
+  }
+
+  // Field list
+  const fields: { key: EditField; value: string; empty: boolean }[] = EDIT_FIELDS.map((key) => {
+    let value: string;
+    let empty: boolean;
+    switch (key) {
+      case "name":
+        value = agent.name;
+        empty = false;
+        break;
+      case "description":
+        value = agent.description;
+        empty = value.length === 0;
+        break;
+      case "tools":
+        value = agent.tools ? agent.tools.join(", ") : "";
+        empty = value.length === 0;
+        break;
+      case "model":
+        value = agent.model ?? "";
+        empty = value.length === 0;
+        break;
+      case "thinking":
+        value = agent.thinking ?? "";
+        empty = value.length === 0;
+        break;
+    }
+    return { key, value, empty };
+  });
+
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i];
+    if (!field) continue;
+    const { key, value, empty } = field;
+    const isCurrent = i === state.editFieldIndex;
+    const prefix = isCurrent ? "> " : "  ";
+
+    if (isCurrent && state.editInField) {
+      // In-field editing
+      const label = `${key}: `;
+      const labelWidth = visibleWidth(label);
+      const availWidth = width - labelWidth - 2; // prefix takes 2
+
+      if (key === "description") {
+        // Multi-line description editing (3 lines viewport)
+        const descLines = wrapText(value, availWidth);
+        lines.push(padEnd(`${prefix}${label}`, width));
+        for (let j = 0; j < 3 && j < descLines.length; j++) {
+          const descLine = descLines[j];
+          const lineContent = padEnd(descLine ?? "", availWidth);
+          // Place cursor at end of last visible line
+          const displayLine = j === 2 || j === descLines.length - 1
+            ? lineContent + CURSOR_MARKER
+            : lineContent;
+          lines.push(padEnd(`  ${displayLine}`, width));
+        }
+      } else {
+        // Single-line editing
+        const truncated = truncateToWidth(value, availWidth);
+        const inputLine = `${prefix}${label}${truncated}${CURSOR_MARKER}`;
+        lines.push(padEnd(inputLine, width));
+      }
+    } else {
+      // Normal field display
+      const label = `${key}: `;
+      const displayValue = empty
+        ? theme.fg("dim", "(not set)")
+        : truncateToWidth(value, width - visibleWidth(prefix + label));
+      const display = isCurrent
+        ? theme.fg("accent", `${prefix}${label}`) + displayValue
+        : `${prefix}${label}${displayValue}`;
+      lines.push(padEnd(display, width));
+    }
+  }
+
+  // Hint
+  lines.push(renderFooter(" [↑↓] fields  [enter] edit  [t] tools  [m] model  [p] prompt  [ctrl+s] save  [esc] back ", width, theme));
+
+  return lines;
+}
+
+function renderModelPicker(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+
+  // Header
+  lines.push(renderHeader(" Select Model ", width, theme));
+  lines.push(padEnd("", width));
+
+  // Search box
+  const searchLine = `Search: ${state.modelSearchQuery}${CURSOR_MARKER}`;
+  lines.push(padEnd(searchLine, width));
+  lines.push(padEnd("", width));
+
+  // Current model
+  const currentModel = state.editAgent ? agentModel(state.editAgent) : "default";
+  lines.push(
+    padEnd(theme.fg("dim", "Current: ") + theme.fg("warning", currentModel), width),
+  );
+  lines.push(padEnd("", width));
+
+  // Model list
+  const list = state.filteredModels;
+  if (list.length === 0) {
+    lines.push(padEnd(theme.fg("dim", "No matching models"), width));
+  } else {
+    let startIdx = 0;
+    if (list.length > MODEL_SELECTOR_HEIGHT) {
+      startIdx = Math.max(0, state.modelCursor - Math.floor(MODEL_SELECTOR_HEIGHT / 2));
+      startIdx = Math.min(startIdx, list.length - MODEL_SELECTOR_HEIGHT);
+    }
+    const endIdx = Math.min(startIdx + MODEL_SELECTOR_HEIGHT, list.length);
+
+    if (startIdx > 0) {
+      lines.push(padEnd(theme.fg("dim", `↑ ${startIdx} more`), width));
+    }
+
+    for (let i = startIdx; i < endIdx; i++) {
+      const model = list[i];
+      if (!model) continue;
+      const isSelected = i === state.modelCursor;
+      const prefix = isSelected ? theme.fg("accent", "> ") : "  ";
+      const modelText = isSelected ? theme.fg("accent", model.id) : model.id;
+      const provider = theme.fg("dim", ` [${model.provider}]`);
+      lines.push(padEnd(`${prefix}${modelText}${provider}`, width));
+    }
+
+    const remaining = list.length - endIdx;
+    if (remaining > 0) {
+      lines.push(padEnd(theme.fg("dim", `↓ ${remaining} more`), width));
+    }
+  }
+
+  // Pad to fixed height
+  while (lines.length < 18) {
+    lines.push(padEnd("", width));
+  }
+
+  // Footer
+  lines.push(renderFooter(" [enter] select  [esc] cancel  type to search ", width, theme));
+
+  return lines;
+}
+
+function renderToolPicker(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+
+  // Header
+  lines.push(renderHeader(" Select Tools ", width, theme));
+  lines.push(padEnd("", width));
+
+  // Search box
+  const searchLine = `Search: ${state.toolSearch}`;
+  lines.push(padEnd(searchLine, width));
+  lines.push(padEnd("", width));
+
+  // Help line
+  lines.push(padEnd(theme.fg("dim", "space toggle · enter confirm · esc cancel · ↑↓ navigate"), width));
+  lines.push(padEnd("", width));
+
+  // Tool list
+  const list = state.filteredTools;
+  if (list.length === 0) {
+    lines.push(padEnd(theme.fg("dim", "No matching tools"), width));
+  } else {
+    let startIdx = 0;
+    if (list.length > TOOL_PICKER_HEIGHT) {
+      startIdx = Math.max(0, state.toolCursor - Math.floor(TOOL_PICKER_HEIGHT / 2));
+      startIdx = Math.min(startIdx, list.length - TOOL_PICKER_HEIGHT);
+    }
+    const endIdx = Math.min(startIdx + TOOL_PICKER_HEIGHT, list.length);
+
+    if (startIdx > 0) {
+      lines.push(padEnd(theme.fg("dim", `↑ ${startIdx} more`), width));
+    }
+
+    for (let i = startIdx; i < endIdx; i++) {
+      const tool = list[i];
+      if (!tool) continue;
+      const isCursor = i === state.toolCursor;
+      const checked = state.toolSelected.has(tool.name);
+      const cursor = isCursor ? theme.fg("accent", "> ") : "  ";
+      const box = checked ? theme.fg("accent", "[x] ") : "[ ] ";
+      const nameText = isCursor ? theme.fg("accent", tool.name) : tool.name;
+      const desc = tool.description ? ` ${theme.fg("dim", "— " + tool.description)}` : "";
+      const rowText = cursor + box + nameText + desc;
+      lines.push(padEnd(truncateToWidth(rowText, width), width));
+    }
+
+    const remaining = list.length - endIdx;
+    if (remaining > 0) {
+      lines.push(padEnd(theme.fg("dim", `↓ ${remaining} more`), width));
+    }
+  }
+
+  // Pad to fixed height
+  while (lines.length < 18) {
+    lines.push(padEnd("", width));
+  }
+
+  // Footer
+  lines.push(renderFooter(" [enter] confirm  [esc] cancel  [space] toggle  [type] search ", width, theme));
+
+  return lines;
+}
+
+function handleEditInput(
+  state: ManagerState,
+  data: string,
+  requestRender: () => void,
+): void {
+  // Discard prompt handling
+  if (state.editDiscardPrompt) {
+    if (matchesKey(data, "y")) {
+      state.editDiscardPrompt = false;
+      state.editDirty = false;
+      // Re-read from original
+      if (state.editOriginal) {
+        const origCopy: AgentConfig = { ...state.editOriginal };
+        if (state.editOriginal.tools) origCopy.tools = [...state.editOriginal.tools];
+        state.editAgent = origCopy;
+      }
+      state.editFieldIndex = 0;
+      state.editInField = false;
+      state.editPromptMode = false;
+      state.editError = null;
+      requestRender();
+    } else if (matchesKey(data, "n") || matchesKey(data, Key.escape)) {
+      state.editDiscardPrompt = false;
+      requestRender();
+    }
+    return;
+  }
+
+  if (!state.editAgent) return;
+
+  // Model picker mode
+  if (state.modelPickerOpen) {
+    if (matchesKey(data, Key.escape)) {
+      state.modelPickerOpen = false;
+      state.modelSearchQuery = "";
+      requestRender();
+    } else if (matchesKey(data, Key.enter)) {
+      const selected = state.filteredModels[state.modelCursor];
+      if (selected) {
+        state.editAgent.model = selected.fullId;
+        state.modelPickerOpen = false;
+        state.modelSearchQuery = "";
+        state.editDirty = true;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.up)) {
+      if (state.filteredModels.length > 0) {
+        state.modelCursor =
+          state.modelCursor > 0
+            ? state.modelCursor - 1
+            : state.filteredModels.length - 1;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.down)) {
+      if (state.filteredModels.length > 0) {
+        state.modelCursor =
+          state.modelCursor < state.filteredModels.length - 1
+            ? state.modelCursor + 1
+            : 0;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.modelSearchQuery.length > 0) {
+        state.modelSearchQuery = state.modelSearchQuery.slice(0, -1);
+        state.filteredModels = filterModels(state.models, state.modelSearchQuery);
+        state.modelCursor = Math.min(state.modelCursor, Math.max(0, state.filteredModels.length - 1));
+        requestRender();
+      }
+    } else if (data.length === 1 && data >= " " && data <= "~") {
+      state.modelSearchQuery += data;
+      state.filteredModels = filterModels(state.models, state.modelSearchQuery);
+      state.modelCursor = Math.min(state.modelCursor, Math.max(0, state.filteredModels.length - 1));
+      requestRender();
+    }
+    return;
+  }
+
+  // Tool picker mode
+  if (state.toolPickerOpen) {
+    if (matchesKey(data, Key.escape)) {
+      state.toolPickerOpen = false;
+      state.toolSearch = "";
+      requestRender();
+    } else if (matchesKey(data, Key.enter)) {
+      const names = [...state.toolSelected];
+      if (names.length > 0) {
+        state.editAgent.tools = names;
+      } else {
+        delete state.editAgent.tools;
+      }
+      state.toolPickerOpen = false;
+      state.toolSearch = "";
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.up)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = state.toolCursor > 0 ? state.toolCursor - 1 : state.filteredTools.length - 1;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.down)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = state.toolCursor < state.filteredTools.length - 1 ? state.toolCursor + 1 : 0;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.pageUp)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = Math.max(0, state.toolCursor - TOOL_PICKER_HEIGHT);
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.pageDown)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = Math.min(state.filteredTools.length - 1, state.toolCursor + TOOL_PICKER_HEIGHT);
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.home)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = 0;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.end)) {
+      if (state.filteredTools.length > 0) {
+        state.toolCursor = state.filteredTools.length - 1;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.space) || matchesKey(data, Key.tab)) {
+      // Toggle current tool
+      const tool = state.filteredTools[state.toolCursor];
+      if (tool) {
+        if (state.toolSelected.has(tool.name)) {
+          state.toolSelected.delete(tool.name);
+        } else {
+          state.toolSelected.add(tool.name);
+        }
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.toolSearch.length > 0) {
+        state.toolSearch = state.toolSearch.slice(0, -1);
+        const q = state.toolSearch.toLowerCase();
+        state.filteredTools = state.tools.filter(
+          (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q),
+        );
+        state.toolCursor = Math.min(state.toolCursor, Math.max(0, state.filteredTools.length - 1));
+        requestRender();
+      }
+    } else if (data.length === 1 && data >= " " && data <= "~") {
+      state.toolSearch += data;
+      const q = state.toolSearch.toLowerCase();
+      state.filteredTools = state.tools.filter(
+        (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q),
+      );
+      state.toolCursor = Math.min(state.toolCursor, Math.max(0, state.filteredTools.length - 1));
+      requestRender();
+    }
+    return;
+  }
+
+  // System prompt edit mode
+  if (state.editPromptMode) {
+    if (matchesKey(data, Key.ctrl("s"))) {
+      saveAgent(state, requestRender);
+    } else if (matchesKey(data, Key.escape)) {
+      state.editPromptMode = false;
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.enter)) {
+      // Insert newline at cursor
+      const before = state.editAgent.systemPrompt.slice(0, state.editPromptCursor);
+      const after = state.editAgent.systemPrompt.slice(state.editPromptCursor);
+      state.editAgent.systemPrompt = before + "\n" + after;
+      state.editPromptCursor++;
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.up)) {
+      if (state.editPromptScroll > 0) {
+        state.editPromptScroll--;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.down)) {
+      const promptLines = wrapText(state.editAgent.systemPrompt, state.lastContentWidth);
+      const promptViewport = Math.max(6, EDIT_PROMPT_VIEWPORT_HEIGHT - 4 - 2);
+      if (state.editPromptScroll < promptLines.length - promptViewport) {
+        state.editPromptScroll++;
+        requestRender();
+      }
+    } else if (data.length === 1 && (data >= " " && data <= "~")) {
+      // Append char to systemPrompt at cursor
+      const before = state.editAgent.systemPrompt.slice(0, state.editPromptCursor);
+      const after = state.editAgent.systemPrompt.slice(state.editPromptCursor);
+      state.editAgent.systemPrompt = before + data + after;
+      state.editPromptCursor++;
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.editPromptCursor > 0) {
+        const before = state.editAgent.systemPrompt.slice(0, state.editPromptCursor - 1);
+        const after = state.editAgent.systemPrompt.slice(state.editPromptCursor);
+        state.editAgent.systemPrompt = before + after;
+        state.editPromptCursor--;
+        state.editDirty = true;
+        requestRender();
+      }
+    }
+    return;
+  }
+
+  // In-field edit mode
+  if (state.editInField) {
+    const field = EDIT_FIELDS[state.editFieldIndex];
+    if (!field) return;
+    if (matchesKey(data, Key.enter)) {
+      // Exit field edit, mark dirty
+      state.editInField = false;
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.escape)) {
+      state.editInField = false;
+      state.editDirty = true;
+      requestRender();
+    } else if (matchesKey(data, Key.ctrl("a"))) {
+      state.editFieldCursor = 0;
+      requestRender();
+    } else if (matchesKey(data, Key.ctrl("e"))) {
+      const val = getFieldValue(state.editAgent, field);
+      state.editFieldCursor = val.length;
+      requestRender();
+    } else if (matchesKey(data, Key.left)) {
+      if (state.editFieldCursor > 0) {
+        state.editFieldCursor--;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.right)) {
+      const val = getFieldValue(state.editAgent, field);
+      if (state.editFieldCursor < val.length) {
+        state.editFieldCursor++;
+        requestRender();
+      }
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.editFieldCursor > 0) {
+        const val = getFieldValue(state.editAgent, field);
+        const newVal = val.slice(0, state.editFieldCursor - 1) + val.slice(state.editFieldCursor);
+        setFieldValue(state.editAgent, field, newVal);
+        state.editFieldCursor--;
+        state.editDirty = true;
+        requestRender();
+      }
+    } else if (data.length === 1 && data >= " " && data <= "~") {
+      const val = getFieldValue(state.editAgent, field);
+      const newVal = val.slice(0, state.editFieldCursor) + data + val.slice(state.editFieldCursor);
+      setFieldValue(state.editAgent, field, newVal);
+      state.editFieldCursor++;
+      state.editDirty = true;
+      requestRender();
+    }
+    return;
+  }
+
+  // Normal edit mode (field cycling)
+  if (matchesKey(data, Key.up)) {
+    if (state.editFieldIndex > 0) {
+      state.editFieldIndex--;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.down)) {
+    if (state.editFieldIndex < EDIT_FIELDS.length - 1) {
+      state.editFieldIndex++;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.enter)) {
+    const field = EDIT_FIELDS[state.editFieldIndex];
+    if (field === "model") {
+      state.modelPickerOpen = true;
+      state.modelSearchQuery = "";
+      state.filteredModels = state.models;
+      const current = agentModel(state.editAgent);
+      const idx = state.models.findIndex(
+        (m) => m.fullId === current || m.id === current,
+      );
+      state.modelCursor = idx >= 0 ? idx : 0;
+      requestRender();
+    } else if (field === "tools") {
+      state.toolPickerOpen = true;
+      state.toolSelected = new Set(state.editAgent.tools ?? []);
+      state.toolSearch = "";
+      state.filteredTools = state.tools;
+      state.toolCursor = 0;
+      requestRender();
+    } else if (field) {
+      state.editInField = true;
+      state.editFieldCursor = getFieldValue(state.editAgent, field).length;
+      requestRender();
+    }
+  } else if (matchesKey(data, "m")) {
+    const field = EDIT_FIELDS[state.editFieldIndex];
+    if (field === "model") {
+      state.modelPickerOpen = true;
+      state.modelSearchQuery = "";
+      state.filteredModels = state.models;
+      const current = agentModel(state.editAgent);
+      const idx = state.models.findIndex(
+        (m) => m.fullId === current || m.id === current,
+      );
+      state.modelCursor = idx >= 0 ? idx : 0;
+      requestRender();
+    }
+  } else if (matchesKey(data, "t")) {
+    const field = EDIT_FIELDS[state.editFieldIndex];
+    if (field === "tools") {
+      state.toolPickerOpen = true;
+      state.toolSelected = new Set(state.editAgent.tools ?? []);
+      state.toolSearch = "";
+      state.filteredTools = state.tools;
+      state.toolCursor = 0;
+      requestRender();
+    }
+  } else if (matchesKey(data, "p")) {
+    state.editPromptMode = true;
+    state.editPromptCursor = state.editAgent.systemPrompt.length;
+    state.editPromptScroll = 0;
+    requestRender();
+  } else if (matchesKey(data, Key.ctrl("s"))) {
+    saveAgent(state, requestRender);
+  } else if (matchesKey(data, Key.escape)) {
+    if (state.editDirty) {
+      state.editDiscardPrompt = true;
+      requestRender();
+    } else {
+      state.screen = state.editReturnScreen;
+      requestRender();
+    }
+  }
+}
+
+function getFieldValue(agent: AgentConfig, field: EditField): string {
+  switch (field) {
+    case "name":
+      return agent.name;
+    case "description":
+      return agent.description;
+    case "tools":
+      return agent.tools ? agent.tools.join(", ") : "";
+    case "model":
+      return agent.model ?? "";
+    case "thinking":
+      return agent.thinking ?? "";
+  }
+}
+
+function setFieldValue(agent: AgentConfig, field: EditField, value: string): void {
+  switch (field) {
+    case "name":
+      agent.name = value;
+      break;
+    case "description":
+      agent.description = value;
+      break;
+    case "tools": {
+      const parsed = value
+        ? value.split(",").map((t) => t.trim()).filter(Boolean)
+        : [];
+      if (parsed.length > 0) {
+        agent.tools = parsed;
+      } else {
+        delete agent.tools;
+      }
+      break;
+    }
+    case "model":
+      if (value) {
+        agent.model = value;
+      } else {
+        delete agent.model;
+      }
+      break;
+    case "thinking":
+      if (value) {
+        agent.thinking = value;
+      } else {
+        delete agent.thinking;
+      }
+      break;
+  }
+}
+
+// ── Name Input screen ───────────────────────────────────────────────────────
+
+function renderNameInput(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+
+  // Header
+  const title = state.nameInputMode === "new" ? " New Agent " : " Clone Agent ";
+  lines.push(renderHeader(title, width, theme));
+
+  // Label
+  lines.push(padEnd(theme.fg("accent", "Name:"), width));
+
+  // Input box
+  const boxWidth = Math.min(width - 2, 60);
+  const boxInner = boxWidth - 2;
+  const beforeCursor = state.nameInputBuffer.slice(0, state.nameInputCursor);
+  const afterCursor = state.nameInputBuffer.slice(state.nameInputCursor);
+  const inputContent = `${beforeCursor}${CURSOR_MARKER}${afterCursor}`;
+  const paddedInput = padEnd(inputContent, boxInner);
+  lines.push(padEnd(`│${paddedInput}│`, width));
+
+  // Scope indicator
+  const scopeText = `Scope: [${state.nameInputScope}]  [tab] toggle`;
+  lines.push(padEnd(theme.fg("dim", scopeText), width));
+
+  // Cross-scope collision warning — check higher-precedence scopes
+  const scopeOrder = ["global", "user", "project"];
+  const currentIdx = scopeOrder.indexOf(state.nameInputScope);
+  let collisionAgent: AgentConfig | undefined;
+  let collisionScope: string | undefined;
+  for (const scope of scopeOrder.slice(currentIdx + 1)) {
+    const scopeAgents = scope === "global" ? state.globalAgents : scope === "user" ? state.userAgents : state.projectAgents;
+    const found = scopeAgents.find((a) => a.name === state.nameInputBuffer.trim());
+    if (found) {
+      collisionAgent = found;
+      collisionScope = scope;
+      break;
+    }
+  }
+  if (collisionAgent) {
+    lines.push(padEnd(theme.fg("warning", `Warning: a ${collisionScope} agent "${collisionAgent.name}" exists and will take precedence`), width));
+  } else if (state.nameInputError) {
+    lines.push(padEnd(theme.fg("error", `  ${state.nameInputError}`), width));
+  } else {
+    lines.push(padEnd("", width));
+  }
+
+  // Footer
+  lines.push(renderFooter(" [enter] continue  [esc] cancel ", width, theme));
+
+  return lines;
+}
+
+function handleNameInput(
+  state: ManagerState,
+  data: string,
+  requestRender: () => void,
+): void {
+  if (matchesKey(data, Key.tab)) {
+    const scopes = ["global", "user", "project"];
+    const currentIdx = scopes.indexOf(state.nameInputScope);
+    const nextIdx = (currentIdx + 1) % scopes.length;
+    state.nameInputScope = scopes[nextIdx] as "global" | "user" | "project";
+    if (state.nameInputScope === "global" && !state.globalDir) {
+      state.nameInputError = "No global agents directory found";
+    } else if (state.nameInputScope === "project" && !state.projectDir) {
+      state.nameInputError = "No project agents directory found";
+    } else {
+      state.nameInputError = null;
+    }
+    requestRender();
+  } else if (matchesKey(data, Key.backspace)) {
+    if (state.nameInputCursor > 0) {
+      state.nameInputBuffer =
+        state.nameInputBuffer.slice(0, state.nameInputCursor - 1) +
+        state.nameInputBuffer.slice(state.nameInputCursor);
+      state.nameInputCursor--;
+      state.nameInputError = null;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.left)) {
+    if (state.nameInputCursor > 0) {
+      state.nameInputCursor--;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.right)) {
+    if (state.nameInputCursor < state.nameInputBuffer.length) {
+      state.nameInputCursor++;
+      requestRender();
+    }
+  } else if (matchesKey(data, Key.enter)) {
+    const name = state.nameInputBuffer.trim();
+    const nameError = validateAgentName(name);
+    if (nameError) {
+      state.nameInputError = nameError;
+      requestRender();
+      return;
+    }
+    if (state.nameInputScope === "global" && !state.globalDir) {
+      state.nameInputError = "No global agents directory found";
+      requestRender();
+      return;
+    }
+    if (state.nameInputScope === "project" && !state.projectDir) {
+      state.nameInputError = "No project agents directory found";
+      requestRender();
+      return;
+    }
+
+    // Check for duplicate name
+    const duplicate = state.agents.find(
+      (a) => a.name === name && a.source === state.nameInputScope,
+    );
+    if (duplicate) {
+      state.nameInputError = `Agent "${name}" already exists`;
+      requestRender();
+      return;
+    }
+
+    const dir = state.nameInputScope === "global" ? state.globalDir
+      : state.nameInputScope === "user" ? state.userDir
+      : state.projectDir;
+    if (!dir) {
+      state.nameInputError = "Target directory not available";
+      requestRender();
+      return;
+    }
+
+    const filePath = path.join(dir, `${name}.md`);
+
+    let newAgent: AgentConfig;
+    if (state.nameInputMode === "clone" && state.nameInputSource) {
+      const src = state.nameInputSource;
+      newAgent = {
+        ...src,
+        name,
+        source: state.nameInputScope,
+        filePath,
+      };
+      if (src.tools) newAgent.tools = [...src.tools];
+      if (src.extraFields) newAgent.extraFields = { ...src.extraFields };
+    } else {
+      newAgent = {
+        name,
+        description: "",
+        systemPrompt: "",
+        source: state.nameInputScope,
+        filePath,
+      };
+    }
+
+    // Switch to edit screen with new agent
+    state.editAgent = newAgent;
+    state.editOriginal = { ...newAgent };
+    if (newAgent.tools) state.editOriginal.tools = [...newAgent.tools];
+    state.editReturnScreen = "list";
+    state.editFieldIndex = 0;
+    state.editInField = false;
+    state.editDirty = false;
+    state.editFieldCursor = 0;
+    state.editPromptMode = false;
+    state.editPromptCursor = 0;
+    state.editPromptScroll = 0;
+    state.editDiscardPrompt = false;
+    state.editError = null;
+    state.isNew = true;
+    state.screen = "edit";
+    requestRender();
+  } else if (matchesKey(data, Key.escape)) {
+    state.screen = "list";
+    requestRender();
+  } else if (data.length === 1 && data >= " " && data <= "~") {
+    state.nameInputBuffer =
+      state.nameInputBuffer.slice(0, state.nameInputCursor) +
+      data +
+      state.nameInputBuffer.slice(state.nameInputCursor);
+    state.nameInputCursor++;
+    state.nameInputError = null;
+    requestRender();
+  }
+}
+
+// ── Confirm Delete screen ───────────────────────────────────────────────────
+
+function renderConfirmDelete(state: ManagerState, width: number, theme: Theme): string[] {
+  const lines: string[] = [];
+  const target = state.deleteTarget;
+
+  if (!target) {
+    lines.push(renderHeader(" Delete? ", width, theme));
+    lines.push(renderFooter(" [esc] cancel ", width, theme));
+    return lines;
+  }
+
+  // Header
+  lines.push(renderHeader(` Delete "${target.name}"? `, width, theme));
+
+  // File path
+  lines.push(padEnd(theme.fg("dim", `File: ${target.filePath}`), width));
+
+  // Warning
+  lines.push(padEnd(theme.fg("error", "This cannot be undone."), width));
+
+  // Spacer
+  lines.push(padEnd("", width));
+
+  // Footer
+  lines.push(renderFooter(" [y] confirm  [n / esc] cancel ", width, theme));
+
+  return lines;
+}
+
+function handleConfirmDelete(
+  state: ManagerState,
+  data: string,
+  requestRender: () => void,
+): void {
+  if (matchesKey(data, "y") || data === "Y") {
+    if (state.deleteTarget) {
+      try {
+        fs.unlinkSync(state.deleteTarget.filePath);
+      } catch {
+        // File may not exist
+      }
+
+      // Refresh agents list
+      const cwd = process.cwd();
+      const discovery = discoverAgentsAll(cwd);
+      state.globalAgents = discovery.global;
+      state.userAgents = discovery.user;
+      state.projectAgents = discovery.project;
+      state.globalDir = discovery.globalDir;
+      state.agents = [...discovery.global, ...discovery.user, ...discovery.project];
+
+      state.listCursor = 0;
+      state.listScroll = 0;
+      state.filterQuery = "";
+      state.filterMode = false;
+    }
+    state.screen = "list";
+    requestRender();
+  } else if (matchesKey(data, "n") || data === "N" || matchesKey(data, Key.escape)) {
+    state.screen = state.deleteFromScreen;
+    requestRender();
+  }
+}
+
+// ── Main panel factory ──────────────────────────────────────────────────────
+
+export function createAgentPanel(
+  globalAgents: AgentConfig[],
+  userAgents: AgentConfig[],
+  projectAgents: AgentConfig[],
+  globalDir: string | null,
+  userDir: string,
+  projectDir: string | null,
+  tui: TUIContext,
+  theme: Theme,
+  done: () => void,
+  models: ModelInfo[],
+  tools: ToolInfo[],
+): Component {
+  const state: ManagerState = {
+    screen: "list",
+    agents: [...globalAgents, ...userAgents, ...projectAgents],
+    globalAgents,
+    userAgents,
+    projectAgents,
+    globalDir,
+    userDir,
+    projectDir,
+
+    listCursor: 0,
+    listScroll: 0,
+    filterQuery: "",
+    filterMode: false,
+
+    detailAgent: null,
+    detailScroll: 0,
+
+    editAgent: null,
+    editFieldIndex: 0,
+    editInField: false,
+    editDirty: false,
+    editFieldCursor: 0,
+    editPromptMode: false,
+    editPromptCursor: 0,
+    editPromptScroll: 0,
+    editDiscardPrompt: false,
+    editError: null,
+    editOriginal: null,
+    editReturnScreen: "list",
+
+    nameInputBuffer: "",
+    nameInputCursor: 0,
+    nameInputScope: "user",
+    nameInputMode: "new",
+    nameInputSource: null,
+    nameInputError: null,
+
+    models,
+    modelPickerOpen: false,
+    modelSearchQuery: "",
+    modelCursor: 0,
+    filteredModels: models,
+
+    tools,
+    toolPickerOpen: false,
+    toolCursor: 0,
+    toolSelected: new Set<string>(),
+    toolSearch: "",
+    filteredTools: tools,
+
+    deleteTarget: null,
+    deleteFromScreen: "list",
+
+    isNew: false,
+
+    lastWidth: 84,
+    lastContentWidth: 80,
+  };
+
+  let cachedWidth: number | undefined;
+  let cachedLines: string[] | undefined;
+
+  function requestRender(): void {
+    cachedWidth = undefined;
+    cachedLines = undefined;
+    tui.requestRender();
+  }
+
+  function handleInput(data: string): void {
+    const result: "close" | void = (() => {
+      switch (state.screen) {
+        case "list":
+          return handleListInput(state, data, done, requestRender);
+        case "detail":
+          return handleDetailInput(state, data, requestRender);
+        case "edit":
+          return handleEditInput(state, data, requestRender);
+        case "name-input":
+          return handleNameInput(state, data, requestRender);
+        case "confirm-delete":
+          return handleConfirmDelete(state, data, requestRender);
+      }
+    })();
+
+    if (result === "close") {
+      done();
+    }
+  }
+
+  return {
+    render(width: number): string[] {
+      state.lastWidth = width;
+      const innerWidth = Math.max(1, width - 2);
+      const contentWidth = Math.max(1, innerWidth - 2); // minus 1 space padding each side
+      state.lastContentWidth = contentWidth;
+      if (cachedLines && cachedWidth === width) {
+        return cachedLines;
+      }
+
+      // Pass content width (minus border + padding) to screen renderers
+      let lines: string[];
+      switch (state.screen) {
+        case "list":
+          lines = renderList(state, contentWidth, theme);
+          break;
+        case "detail":
+          lines = renderDetail(state, contentWidth, theme);
+          break;
+        case "edit":
+          lines = renderEdit(state, contentWidth, theme);
+          break;
+        case "name-input":
+          lines = renderNameInput(state, contentWidth, theme);
+          break;
+        case "confirm-delete":
+          lines = renderConfirmDelete(state, contentWidth, theme);
+          break;
+      }
+
+      const bordered = wrapWithBorder(lines, width, theme);
+      cachedWidth = width;
+      cachedLines = bordered;
+      return bordered;
+    },
+
+    handleInput,
+
+    invalidate(): void {
+      cachedWidth = undefined;
+      cachedLines = undefined;
+    },
+
+    dispose(): void {
+      // No resources to clean up
+    },
+  };
+}