npm - create-walle - Versions diffs - 0.9.30 → 0.9.31 - Mend

create-walle 0.9.30 → 0.9.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/template/claude-task-manager/docs/prompt-manager-redesign-proposal.html ADDED Viewed

@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CTM Prompt Manager — Redesign Proposal</title>
+<style>
+  /* ===== CTM theme tokens (copied verbatim from index.html so this mock reads native) ===== */
+  :root {
+    --bg: #1a1b26; --bg-light: #24283b; --bg-lighter: #2f3349; --bg-card: #24283b;
+    --bg-panel: #1f2335; --bg-elevated: #2b3045; --bg-input: #1a1b26;
+    --bg-hover: rgba(255,255,255,0.06); --code-bg: rgba(122,162,247,0.12);
+    --fg: #c0caf5; --fg-dim: #565f89; --fg-muted: #8b94bd;
+    --accent: #7aa2f7; --accent-hover: #89b4fa; --accent-fg: #0d1117; --accent-soft: rgba(122,162,247,0.13);
+    --green: #9ece6a; --success-soft: rgba(158,206,106,0.14);
+    --red: #f7768e; --danger-soft: rgba(247,118,142,0.14);
+    --yellow: #e0af68; --warning-soft: rgba(224,175,104,0.14);
+    --purple: #bb9af7; --border: #3b4261; --focus-ring: rgba(122,162,247,0.32);
+    --overlay-bg: rgba(5,8,15,0.72);
+    --syn-kw: #bb9af7; --syn-fn: #7aa2f7; --syn-str: #9ece6a; --syn-num: #ff9e64;
+    --syn-com: #565f89; --syn-type: #2ac3de; --syn-prop: #73daca; --syn-punc: #89ddff;
+    --shadow-lg: 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
+  }
+  html[data-theme="light"] {
+    --bg: #f6f7f9; --bg-light: #ffffff; --bg-lighter: #eceef2; --bg-card: #ffffff;
+    --bg-panel: #fafbfc; --bg-elevated: #ffffff; --bg-input: #ffffff;
+    --bg-hover: rgba(15,23,42,0.045); --code-bg: rgba(15,23,42,0.06);
+    --fg: #0f172a; --fg-dim: #3d4b5e; --fg-muted: #52606f;
+    --accent: #3b66e0; --accent-hover: #2c54c8; --accent-fg: #ffffff; --accent-soft: rgba(59,102,224,0.10);
+    --green: #15803d; --success-soft: rgba(21,128,61,0.10);
+    --red: #b91c1c; --danger-soft: rgba(185,28,28,0.10);
+    --yellow: #92400e; --warning-soft: rgba(146,64,14,0.10);
+    --purple: #7c3aed; --border: rgba(15,23,42,0.10); --focus-ring: rgba(59,102,224,0.32);
+    --overlay-bg: rgba(15,23,42,0.40);
+    --syn-kw: #7c3aed; --syn-fn: #2c54c8; --syn-str: #15803d; --syn-num: #b45309;
+    --syn-com: #94a3b8; --syn-type: #0e7490; --syn-prop: #0f766e; --syn-punc: #2563eb;
+    --shadow-lg: 0 24px 60px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg); color: var(--fg);
+    line-height: 1.55; -webkit-font-smoothing: antialiased;
+  }
+  .mono { font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
+  a { color: var(--accent); }
+  /* ===== proposal chrome ===== */
+  .topbar {
+    position: sticky; top: 0; z-index: 50;
+    display: flex; align-items: center; gap: 18px;
+    padding: 12px 26px; background: color-mix(in srgb, var(--bg) 86%, transparent);
+    backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--border);
+  }
+  .topbar .brand { font-weight: 700; letter-spacing: -0.01em; font-size: 15px; }
+  .topbar .brand b { color: var(--accent); }
+  .topbar nav { display: flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
+  .topbar nav a { font-size: 12.5px; color: var(--fg-muted); text-decoration: none; padding: 5px 10px; border-radius: 7px; }
+  .topbar nav a:hover { background: var(--bg-hover); color: var(--fg); }
+  .topbar .spacer { flex: 1; }
+  .toggle {
+    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
+    font-size: 12px; color: var(--fg-dim); background: var(--bg-light);
+    border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; user-select: none;
+  }
+  .toggle:hover { color: var(--fg); border-color: var(--accent); }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px 120px; }
+  .hero { padding: 64px 0 30px; }
+  .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
+  .hero h1 { font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 750; max-width: 19ch; }
+  .hero h1 em { font-style: normal; color: var(--accent); }
+  .hero p.lead { margin-top: 18px; font-size: 17px; color: var(--fg-muted); max-width: 66ch; line-height: 1.6; }
+  .meta-row { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-dim); }
+  .meta-row b { color: var(--fg); font-weight: 600; }
+  section { padding: 46px 0; border-top: 1px solid var(--border); }
+  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
+  .sec-num { font-size: 12px; font-weight: 700; color: var(--accent); font-family: 'SF Mono', Menlo, monospace; background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; }
+  h2 { font-size: 27px; letter-spacing: -0.02em; font-weight: 700; }
+  .sec-sub { color: var(--fg-muted); font-size: 15px; max-width: 74ch; margin: 14px 0 30px; line-height: 1.6; }
+  /* ===== issue audit cards ===== */
+  .issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
+  .issue { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 20px 18px; position: relative; overflow: hidden; }
+  .issue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
+  .issue .tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); background: var(--danger-soft); padding: 3px 8px; border-radius: 5px; margin-bottom: 11px; }
+  .issue h3 { font-size: 15.5px; font-weight: 650; margin-bottom: 8px; }
+  .issue p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; }
+  .issue code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--fg-dim); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
+  .issue .fix { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--fg); display: flex; gap: 8px; }
+  .issue .fix b { color: var(--green); font-weight: 700; flex-shrink: 0; }
+  /* ===== mock frame ===== */
+  .mock { margin-top: 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg); }
+  .mock-caption { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--bg-lighter); border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--fg-dim); }
+  .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+  .mock-caption .url { margin-left: 10px; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--fg-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 4px 12px; flex: 1; }
+  .mock-label { font-size: 11.5px; color: var(--fg-dim); margin: 16px 0 6px; font-family: 'SF Mono', Menlo, monospace; }
+  /* shared app shell inside mocks */
+  .shell-header { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
+  .searchbox { display: flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 7px 13px; color: var(--fg-dim); font-size: 13px; }
+  .searchbox svg { flex-shrink: 0; opacity: 0.7; }
+  .kbd { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--bg); }
+  .grow { flex: 1; }
+  .btn-accent { font-size: 12.5px; font-weight: 600; color: var(--accent-fg); background: var(--accent); border: 0; border-radius: 8px; padding: 6px 13px; cursor: default; }
+  /* ===== axis table (the real problem) ===== */
+  .axis-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
+  .axis-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-dim); padding: 9px 12px; border-bottom: 1px solid var(--border); font-weight: 700; }
+  .axis-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--fg-muted); vertical-align: top; line-height: 1.5; }
+  .axis-table td b { color: var(--fg); font-weight: 600; }
+  .axis-table .ax { font-family: 'SF Mono', Menlo, monospace; color: var(--accent); white-space: nowrap; }
+  .axis-table .collide { color: var(--red); }
+  /* ===== prompt-manager sidebar/list mock ===== */
+  .pm-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 452px; background: var(--bg); }
+  .pm-side { border-right: 1px solid var(--border); background: var(--bg-panel); padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; }
+  .pm-bigsearch { display: flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--fg-dim); }
+  .pm-bigsearch svg { opacity: 0.6; }
+  .pm-group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin: 0 4px 7px; }
+  .pm-quick { display: flex; flex-direction: column; gap: 2px; }
+  .pm-qitem { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--fg-muted); cursor: pointer; }
+  .pm-qitem:hover { background: var(--bg-hover); color: var(--fg); }
+  .pm-qitem.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+  .pm-qitem .ct { margin-left: auto; font-size: 10.5px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; }
+  .pm-qitem.active .ct { color: var(--accent); }
+  .pm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+  .tag-chip { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--bg-lighter); color: var(--fg-muted); border: 1px solid var(--border); cursor: pointer; }
+  .tag-chip:hover { border-color: var(--accent); }
+  .tag-chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
+  .pm-main { padding: 16px 18px; overflow: hidden; }
+  .pm-mainhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+  .pm-mainhead h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-muted); }
+  .pm-mainhead .count { font-size: 11px; color: var(--fg-dim); background: var(--bg-lighter); border-radius: 20px; padding: 2px 9px; font-weight: 600; }
+  .pm-row { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; background: var(--bg-card); cursor: pointer; transition: border-color .12s, transform .12s; }
+  .pm-row:hover { border-color: var(--accent); transform: translateX(2px); }
+  .pm-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
+  .pm-row .star { color: var(--yellow); flex-shrink: 0; }
+  .pm-row .star.off { color: var(--fg-dim); }
+  .pm-row .pbody { flex: 1; min-width: 0; }
+  .pm-row .ptitle { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+  .pm-row .ptitle mark { background: var(--warning-soft); color: var(--yellow); border-radius: 3px; padding: 0 2px; }
+  .pm-row .psub { font-size: 11px; color: var(--fg-dim); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
+  .mini-tag { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 5px; padding: 1px 6px; }
+  .vbadge { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--green); background: var(--success-soft); border-radius: 5px; padding: 1px 6px; }
+  .pm-row .when { margin-left: auto; font-size: 10.5px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; flex-shrink: 0; }
+  /* ===== editor split mock ===== */
+  .ed-toolbar { display: flex; align-items: center; gap: 5px; padding: 8px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--fg-dim); }
+  .ed-toolbar .tb { border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; background: var(--bg-light); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; }
+  .ed-toolbar .seg { display: inline-flex; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
+  .ed-toolbar .seg b { font-weight: 600; font-size: 11px; color: var(--fg-muted); padding: 3px 9px; border-radius: 5px; }
+  .ed-toolbar .seg b.on { background: var(--accent); color: var(--accent-fg); }
+  .token-meter { margin-left: auto; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--fg-dim); display: inline-flex; gap: 6px; align-items: center; }
+  .token-meter .ok { color: var(--green); }
+  .ed-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 312px; background: var(--bg); }
+  .ed-pane { padding: 18px 20px; font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.85; overflow: hidden; }
+  .ed-pane.left { border-right: 1px solid var(--border); }
+  .ed-pane .ln { color: var(--fg); white-space: pre-wrap; }
+  .var-tok { color: var(--purple); background: color-mix(in srgb, var(--purple) 16%, transparent); border-radius: 4px; padding: 0 3px; }
+  .ctx-tok { color: var(--syn-num); background: color-mix(in srgb, var(--syn-num) 16%, transparent); border-radius: 4px; padding: 0 3px; }
+  .md-h { color: var(--syn-fn); font-weight: 700; }
+  .md-bullet { color: var(--accent); }
+  .md-code { color: var(--syn-str); }
+  .pane-tag { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; display: block; }
+  .prev-body { font-family: -apple-system, system-ui, sans-serif; font-size: 13px; line-height: 1.65; color: var(--fg); }
+  .prev-body h3 { font-size: 16px; margin-bottom: 8px; }
+  .prev-body p { color: var(--fg-muted); margin-bottom: 8px; }
+  .prev-body .pill { color: var(--accent); font-weight: 600; }
+  /* ===== centered floating mock stage (fill-form, palette) ===== */
+  .mock-stage { padding: 40px 20px; background: var(--bg); display: grid; place-items: center; background-image: radial-gradient(circle at 1px 1px, var(--bg-hover) 1px, transparent 0); background-size: 22px 22px; }
+  .fillform { width: 430px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-lg); padding: 18px 20px; }
+  .ff-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
+  .ff-head .fft { font-size: 14px; font-weight: 650; }
+  .ff-head .ffs { font-size: 11px; color: var(--fg-dim); margin-left: auto; font-family: 'SF Mono', Menlo, monospace; }
+  .ff-field { margin-bottom: 13px; }
+  .ff-field label { display: block; font-size: 10.5px; color: var(--fg-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
+  .ff-field label b { color: var(--purple); font-family: 'SF Mono', Menlo, monospace; text-transform: none; letter-spacing: 0; }
+  .ff-input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--fg); font-family: 'SF Mono', Menlo, monospace; display: flex; align-items: center; gap: 8px; }
+  .ff-input.focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
+  .ff-input .ph { color: var(--fg-dim); }
+  .ff-input.select { justify-content: space-between; }
+  .ff-actions { display: flex; gap: 9px; margin-top: 18px; }
+  .ff-btn { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 8px; border-radius: 8px; cursor: default; }
+  .ff-btn.primary { background: var(--accent); color: var(--accent-fg); }
+  .ff-btn.ghost { background: var(--bg-light); color: var(--fg-muted); border: 1px solid var(--border); }
+  .palette { width: 500px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-lg); overflow: hidden; }
+  .pal-search { display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--fg); }
+  .pal-search svg { opacity: 0.6; }
+  .pal-search .cursor { width: 1.5px; height: 17px; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
+  .pal-sec { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); padding: 10px 17px 5px; }
+  .pal-item { display: flex; align-items: center; gap: 12px; padding: 9px 17px; cursor: pointer; }
+  .pal-item.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
+  .pal-item .pi-icn { color: var(--accent); flex-shrink: 0; }
+  .pal-item .pi-title { font-size: 13.5px; color: var(--fg); }
+  .pal-item .pi-title b { color: var(--accent); }
+  .pal-item .pi-sub { font-size: 10.5px; color: var(--fg-dim); margin-left: auto; font-family: 'SF Mono', Menlo, monospace; }
+  .pal-foot { display: flex; gap: 16px; padding: 9px 17px; border-top: 1px solid var(--border); background: var(--bg-panel); font-size: 11px; color: var(--fg-dim); }
+  /* ===== prior-art callout ===== */
+  .priorart { display: flex; gap: 13px; margin-top: 20px; padding: 14px 17px; background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 11px; font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; }
+  .priorart .pa-icn { color: var(--purple); flex-shrink: 0; margin-top: 1px; }
+  .priorart b { color: var(--fg); font-weight: 600; }
+  .priorart code { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; }
+  /* ===== alternative option cards ===== */
+  .alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
+  .alt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
+  .alt-card.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
+  .alt-card h4 { font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+  .alt-card .rectag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-fg); background: var(--accent); padding: 2px 8px; border-radius: 20px; }
+  .alt-card .sub { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 13px; }
+  .alt-card ul { list-style: none; }
+  .alt-card li { font-size: 13px; color: var(--fg-muted); padding: 5px 0 5px 22px; position: relative; line-height: 1.5; }
+  .alt-card li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
+  .alt-card li.con::before { content: '×'; color: var(--red); }
+  .alt-card code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; }
+  /* ===== roadmap ===== */
+  .roadmap { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
+  .phase { display: flex; gap: 16px; padding: 17px 18px; background: var(--bg-card); border: 1px solid var(--border); }
+  .phase:first-child { border-radius: 12px 12px 0 0; }
+  .phase:last-child { border-radius: 0 0 12px 12px; }
+  .phase .pn { font-family: 'SF Mono', Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; width: 92px; }
+  .phase .pn small { display: block; color: var(--fg-dim); font-weight: 400; font-size: 10px; margin-top: 3px; }
+  .phase .pbody h4 { font-size: 14px; margin-bottom: 4px; }
+  .phase .pbody p { font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; }
+  .phase .pbody code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--fg-dim); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
+  .phase .risk { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 20px; margin-left: auto; flex-shrink: 0; height: fit-content; }
+  .risk.low { color: var(--green); background: var(--success-soft); }
+  .risk.med { color: var(--yellow); background: var(--warning-soft); }
+  footer { padding: 50px 0 0; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12.5px; line-height: 1.7; }
+  footer a { color: var(--fg-muted); }
+  @media (max-width: 900px) {
+    .alt-grid { grid-template-columns: 1fr; }
+    .pm-shell, .ed-split { grid-template-columns: 1fr; }
+    .pm-side, .ed-pane.left { border-right: 0; border-bottom: 1px solid var(--border); }
+    .hero h1 { font-size: 32px; }
+    .palette, .fillform { width: 100%; }
+  }
+</style>
+</head>
+<body>
+<div class="topbar">
+  <div class="brand">CTM <b>Prompt Manager</b> — Redesign Proposal</div>
+  <nav>
+    <a href="#problem">The problem</a>
+    <a href="#audit">Issues</a>
+    <a href="#find">Findability</a>
+    <a href="#editor">Editor</a>
+    <a href="#reuse">Reuse</a>
+    <a href="#plan">Roadmap</a>
+  </nav>
+  <div class="spacer"></div>
+  <div class="toggle" onclick="toggleTheme()">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>
+    <span id="themeLabel">Dark</span>
+  </div>
+</div>
+<div class="wrap">
+  <div class="hero">
+    <div class="eyebrow">Design proposal · v1</div>
+    <h1>Organize, author, and <em>reuse</em> prompts — without the maze.</h1>
+    <p class="lead">
+      The Prompt Manager isn't short on features — it's <b>over-axised</b>. Prompts are filed across
+      seven overlapping systems at once, the editor is a plain rich-text box that ignores what a prompt
+      actually is, and the most valuable capabilities are already in the database but never reach the UI.
+      This proposal fixes <b>findability</b>, <b>authoring</b>, and <b>reuse</b> in three phases — reusing
+      the schema and plumbing that already exist.
+    </p>
+    <div class="meta-row">
+      <div><b>Scope</b> · #prompts page only — sessions untouched</div>
+      <div><b>Surprise</b> · templates, variables &amp; chains already in the DB</div>
+      <div><b>Theme</b> · native CTM tokens — toggle top-right</div>
+    </div>
+  </div>
+  <!-- ===================== THE REAL PROBLEM ===================== -->
+  <section id="problem">
+    <div class="sec-head"><span class="sec-num">01</span><h2>The real problem isn't too few features</h2></div>
+    <p class="sec-sub">
+      A deep dive across the frontend (<code class="mono">public/js/prompts.js</code>, ~4,260 lines),
+      backend (<code class="mono">api-prompts.js</code> + <code class="mono">db.js</code>), and the live UI
+      found the opposite of "missing features." Prompts can be filed along <b>seven independent axes at the
+      same time</b> — each its own filter, with no canonical mental model for where a prompt "lives." The
+      result is decision fatigue when saving and ambiguity when finding.
+    </p>
+    <table class="axis-table">
+      <thead><tr><th>Axis today</th><th>What it's for</th><th>Where it collides</th></tr></thead>
+      <tbody>
+        <tr><td class="ax">folders</td><td>Manual hierarchy in the sidebar</td><td class="collide">Overlaps tags &amp; domains — three ways to "categorize"</td></tr>
+        <tr><td class="ax">7 domains</td><td>Hardcoded: coding, ops, writing, research, personal, meta, general</td><td class="collide">Same job as tags, but fixed &amp; auto-assigned — can't edit</td></tr>
+        <tr><td class="ax">5 lifecycle states</td><td>draft / used / frequent / template / archived</td><td class="collide">Mixes <b>status</b> (draft) with <b>type</b> (template) with <b>usage</b> (frequent)</td></tr>
+        <tr><td class="ax">groups</td><td>1-level parent/child "composite" prompts</td><td class="collide">A fourth container concept beside folders</td></tr>
+        <tr><td class="ax">tags</td><td>Free-form per-prompt labels</td><td class="collide">The natural primary axis — but demoted below all the above</td></tr>
+        <tr><td class="ax">star</td><td>Favorite flag</td><td class="collide">Near-duplicate of pin</td></tr>
+        <tr><td class="ax">pin</td><td>Float-to-top flag</td><td class="collide">Near-duplicate of star</td></tr>
+      </tbody>
+    </table>
+    <p class="sec-sub" style="margin-top: 26px;">
+      Meanwhile, the editor is a <code class="mono">contenteditable</code> div driven by
+      <code class="mono">document.execCommand</code> (<code class="mono">prompts.js:184</code>,
+      <code class="mono">:358</code>) — WYSIWYG bold/italic/lists built for documents, not for the templated
+      markdown that coding prompts actually are. And three powerful capabilities already exist in the schema
+      but have <b>no real UI</b>: <code class="mono">is_template</code>/<code class="mono">template_vars</code>,
+      the <code class="mono">templates</code> table, and a full <code class="mono">chains</code> /
+      <code class="mono">chain_nodes</code> / <code class="mono">chain_edges</code> workflow graph
+      (<code class="mono">db.js</code> schema ~671–813).
+    </p>
+  </section>
+  <!-- ===================== AUDIT ===================== -->
+  <section id="audit">
+    <div class="sec-head"><span class="sec-num">02</span><h2>Issue audit — traced to code</h2></div>
+    <p class="sec-sub">Each issue is tied to the responsible code so the redesign targets causes, not symptoms.</p>
+    <div class="issues">
+      <div class="issue">
+        <span class="tag">Organization</span>
+        <h3>Seven filters, no mental model</h3>
+        <p>The sidebar header stacks <code>#pe-context-filter</code>, <code>#pe-lifecycle-filter</code>, a star toggle, search, and AI-search — plus folders, groups, and pins elsewhere. Saving a prompt means picking among redundant axes.</p>
+        <div class="fix"><b>FIX</b><span>Collapse to one model: search + favorites + tags primary; the rest auto-derived.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Editor</span>
+        <h3>A document editor for code prompts</h3>
+        <p>Plain <code>contenteditable</code> + <code>execCommand</code> — no markdown highlighting, no <code>{{variable}}</code> awareness, no live preview, no token count. Prompts are markdown, but you edit them as styled rich text.</p>
+        <div class="fix"><b>FIX</b><span>A markdown/code editor with variable highlighting, preview, and a live token meter.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Latent power</span>
+        <h3>Templates &amp; variables exist — invisibly</h3>
+        <p><code>template_vars</code>, the <code>templates</code> table, and <code>chains</code> graph are all in <code>db.js</code>, but there's no form to fill variables and no chain UI. The best capability is dormant.</p>
+        <div class="fix"><b>FIX</b><span>Variable fill-in form at insert time; surface chains as a Phase&nbsp;4 capability.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Reuse</span>
+        <h3>No quick path from prompt → session</h3>
+        <p>Reuse means: open #prompts, hunt, copy, switch tabs, paste. <code>sendToNewSession</code> (<code>prompts.js:2278</code>) exists, but there's no fast keyboard-first insert from wherever you are.</p>
+        <div class="fix"><b>FIX</b><span>A command-palette quick-insert over title + body, keyboard-only.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Search</span>
+        <h3>Strong engine, weak surface</h3>
+        <p>FTS5 full-text (<code>prompts_fts</code>) and semantic AI-search already exist server-side, but the UI buries them in a small box beside four other controls, with no scope clarity.</p>
+        <div class="fix"><b>FIX</b><span>Promote search to the primary affordance; results-first list, body matches highlighted.</span></div>
+      </div>
+      <div class="issue" style="--red: var(--green);">
+        <span class="tag" style="color: var(--green); background: var(--success-soft);">Reusable</span>
+        <h3>What's already good — keep it</h3>
+        <p>Versioning (<code>prompt_versions</code>), usage tracking (<code>prompt_usage</code>), FTS5, the copilot/improve endpoints, image annotation, and the token system all stay. This is mostly a <b>front-end</b> reshaping.</p>
+        <div class="fix"><b>KEEP</b><span>No schema rewrite — activate what's there, add small additive endpoints.</span></div>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== FINDABILITY ===================== -->
+  <section id="find">
+    <div class="sec-head"><span class="sec-num">03</span><h2>Findability — one model, not seven</h2></div>
+    <p class="sec-sub">
+      Phase 1 flagship. Make the sidebar answer one question — "which prompt do I want?" — with a big
+      search up top, three quick-views (Favorites / Recent / All), and <b>tags as the one editable axis</b>.
+      Domains and lifecycle become auto-derived facets, not manual choices you have to make on every save.
+    </p>
+    <div class="mock">
+      <div class="mock-caption"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">localhost:3456/#prompts</span></div>
+      <div class="shell-header">
+        <strong style="font-size:13px;">Prompts</strong>
+        <div class="grow"></div>
+        <div class="searchbox" style="width:240px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><span>Search title &amp; body…</span><span class="kbd">⌘K</span></div>
+        <button class="btn-accent">+ New</button>
+      </div>
+      <div class="pm-shell">
+        <div class="pm-side">
+          <div class="pm-bigsearch"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><span>review</span></div>
+          <div>
+            <div class="pm-group-title">Views</div>
+            <div class="pm-quick">
+              <div class="pm-qitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>All prompts<span class="ct">142</span></div>
+              <div class="pm-qitem active"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 27l2-7L2 9h7z"/></svg>Favorites<span class="ct">9</span></div>
+              <div class="pm-qitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Recent<span class="ct">20</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="pm-group-title">Tags</div>
+            <div class="pm-tags">
+              <span class="tag-chip on">#review</span>
+              <span class="tag-chip">#debugging</span>
+              <span class="tag-chip">#refactor</span>
+              <span class="tag-chip">#ctm</span>
+              <span class="tag-chip">#walle</span>
+              <span class="tag-chip">#writing</span>
+              <span class="tag-chip">#perf</span>
+            </div>
+          </div>
+        </div>
+        <div class="pm-main">
+          <div class="pm-mainhead"><h4>Favorites · #review</h4><span class="count">4 matches</span></div>
+          <div class="pm-row sel">
+            <svg class="star" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 27l2-7L2 9h7z"/></svg>
+            <div class="pbody"><div class="ptitle">Deep code <mark>review</mark> — find bugs &amp; cleanups <span class="mini-tag">{{2 vars}}</span></div><div class="psub"><span class="mini-tag">#review</span><span class="mini-tag">#ctm</span><span class="vbadge">v7</span><span>used 23×</span></div></div>
+            <span class="when">2h ago</span>
+          </div>
+          <div class="pm-row">
+            <svg class="star" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 27l2-7L2 9h7z"/></svg>
+            <div class="pbody"><div class="ptitle">PR <mark>review</mark> checklist</div><div class="psub"><span class="mini-tag">#review</span><span class="vbadge">v3</span><span>used 11×</span></div></div>
+            <span class="when">1d ago</span>
+          </div>
+          <div class="pm-row">
+            <svg class="star" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 27l2-7L2 9h7z"/></svg>
+            <div class="pbody"><div class="ptitle">Security <mark>review</mark> pass — OWASP top 10 <span class="mini-tag">{{file}}</span></div><div class="psub"><span class="mini-tag">#review</span><span class="mini-tag">#perf</span><span>used 6×</span></div></div>
+            <span class="when">3d ago</span>
+          </div>
+          <div class="pm-row">
+            <svg class="star" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 27l2-7L2 9h7z"/></svg>
+            <div class="pbody"><div class="ptitle">Self-<mark>review</mark> before commit</div><div class="psub"><span class="mini-tag">#review</span><span class="vbadge">v2</span></div></div>
+            <span class="when">5d ago</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="priorart">
+      <svg class="pa-icn" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+      <div><b>Prior art:</b> Raycast, Promptlight, and LangSmith all converge on <b>tags + favorites + powerful search</b> over deep folder trees — true nested folders are rare and often deliberately rejected. Google AI Studio's title-only search is the field's most-cited weakness; CTM already has FTS5 over the body, so don't repeat it.</div>
+    </div>
+    <h3 style="font-size:18px; margin:34px 0 4px;">Two ways to get there</h3>
+    <div class="alt-grid">
+      <div class="alt-card rec">
+        <h4>Option A — Consolidate &amp; simplify <span class="rectag">Recommended</span></h4>
+        <div class="sub">Reduce seven axes to one clear model.</div>
+        <ul>
+          <li>Primary: <code>search</code> + <code>Favorites/Recent/All</code> + editable <code>#tags</code></li>
+          <li>Merge <b>domains → tags</b> (reuse <code>autoTagAllPrompts</code> to backfill)</li>
+          <li>Lifecycle becomes auto signal (frequent/recent), not a manual field</li>
+          <li>Fold <b>star + pin</b> into one Favorite</li>
+          <li>Folders optional/secondary for those who want them</li>
+          <li class="con">More migration + a settling period for existing data</li>
+        </ul>
+      </div>
+      <div class="alt-card">
+        <h4>Option B — Additive polish</h4>
+        <div class="sub">Keep every axis, improve the surface.</div>
+        <ul>
+          <li>Unify the scattered controls into one filter bar</li>
+          <li>Promote search; highlight body matches</li>
+          <li>Keep folders, domains, lifecycle, groups as-is</li>
+          <li>Lower risk, no data migration</li>
+          <li class="con">The underlying overlap (the real problem) remains</li>
+        </ul>
+      </div>
+    </div>
+    <p class="sec-sub" style="margin-top:18px;"><b>Recommendation:</b> Option A. The overlap <em>is</em> the complaint — polishing seven axes only makes a prettier maze. The domain→tag backfill already exists, so migration is mostly mechanical.</p>
+  </section>
+  <!-- ===================== EDITOR ===================== -->
+  <section id="editor">
+    <div class="sec-head"><span class="sec-num">04</span><h2>Editor — author what a prompt really is</h2></div>
+    <p class="sec-sub">
+      Phase 2 flagship. Prompts here are templated markdown sent to coding agents. The editor should treat
+      them that way: highlight markdown structure and <code>{{variables}}</code>, preview the rendered result,
+      and show a live token meter — instead of a styled rich-text box.
+    </p>
+    <div class="mock">
+      <div class="mock-caption"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">localhost:3456/#prompts → Deep code review</span></div>
+      <div class="ed-toolbar">
+        <span class="seg"><b class="on">Edit</b><b>Preview</b><b>Split</b></span>
+        <span class="tb">{{ }}</span>
+        <span class="tb">/ snippet</span>
+        <span class="tb">@ file</span>
+        <span class="token-meter">⌁ <span class="ok">412</span> / 200k tokens · 1,840 chars</span>
+      </div>
+      <div class="ed-split">
+        <div class="ed-pane left">
+          <span class="pane-tag">Markdown · source</span>
+          <div class="ln"><span class="md-h"># Deep code review</span></div>
+          <div class="ln">&nbsp;</div>
+          <div class="ln">Review <span class="var-tok">{{file}}</span> on branch <span class="var-tok">{{branch}}</span> and</div>
+          <div class="ln">report bugs, then cleanups. Be specific.</div>
+          <div class="ln">&nbsp;</div>
+          <div class="ln"><span class="md-h">## Context</span></div>
+          <div class="ln"><span class="md-bullet">-</span> Recent diff: <span class="ctx-tok">!`git diff HEAD~1`</span></div>
+          <div class="ln"><span class="md-bullet">-</span> Conventions: <span class="ctx-tok">@CLAUDE.md</span></div>
+          <div class="ln"><span class="md-bullet">-</span> Date: <span class="ctx-tok">{date}</span></div>
+          <div class="ln">&nbsp;</div>
+          <div class="ln">Focus on <span class="md-code">`correctness`</span> first.</div>
+        </div>
+        <div class="ed-pane">
+          <span class="pane-tag">Live preview · variables filled</span>
+          <div class="prev-body">
+            <h3>Deep code review</h3>
+            <p>Review <span class="pill">server.js</span> on branch <span class="pill">prompts</span> and report bugs, then cleanups. Be specific.</p>
+            <h3 style="font-size:14px;">Context</h3>
+            <p>• Recent diff: <span style="color:var(--syn-num)">‹3 files, +88 −12›</span><br>
+               • Conventions: <span style="color:var(--syn-num)">‹CLAUDE.md, 2.1k›</span><br>
+               • Date: <span style="color:var(--syn-num)">2026-06-23</span></p>
+            <p>Focus on <code style="font-family:'SF Mono',Menlo,monospace;color:var(--syn-str)">correctness</code> first.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="priorart">
+      <svg class="pa-icn" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+      <div><b>Prior art:</b> A live in-editor <b>token counter</b> is documented mainly in Google AI Studio — a genuine differentiator. The Anthropic Console "Variables window" separates template text from inputs; Claude Code's <code>!`cmd`</code> and <code>@file</code> inject live repo context. Both map directly onto what CTM prompts need.</div>
+    </div>
+    <h3 style="font-size:18px; margin:34px 0 4px;">Two editor directions</h3>
+    <div class="alt-grid">
+      <div class="alt-card rec">
+        <h4>Option A — Markdown / code editor <span class="rectag">Recommended</span></h4>
+        <div class="sub">CodeMirror-style, built for markdown prompts.</div>
+        <ul>
+          <li>Markdown + <code>{{variable}}</code> + <code>!`cmd`</code>/<code>@file</code> syntax highlighting</li>
+          <li>Edit / Preview / Split modes; live preview pane</li>
+          <li>Live token + character meter against the model limit</li>
+          <li><code>/</code> snippet insert (reuse the existing slash picker)</li>
+          <li>Image paste &amp; annotation retained as an add-on layer</li>
+          <li class="con">Larger build: introduce CodeMirror; migrate HTML content → markdown</li>
+        </ul>
+      </div>
+      <div class="alt-card">
+        <h4>Option B — Enhanced WYSIWYG</h4>
+        <div class="sub">Keep <code>contenteditable</code>, add the missing bits.</div>
+        <ul>
+          <li>Render <code>{{variables}}</code> as inline chips</li>
+          <li>Add a token/char counter + a preview toggle</li>
+          <li>Slash-snippet insert; keep image annotation first-class</li>
+          <li>Lower risk; no content-format migration</li>
+          <li class="con">No real syntax highlighting; <code>execCommand</code> quirks remain</li>
+        </ul>
+      </div>
+    </div>
+    <p class="sec-sub" style="margin-top:18px;"><b>Recommendation:</b> Option A for coding prompts — markdown is the native format and highlighting/preview pay off daily. Keep B as the low-risk fallback if the markdown migration proves heavier than expected; image annotation survives either way.</p>
+  </section>
+  <!-- ===================== REUSE ===================== -->
+  <section id="reuse">
+    <div class="sec-head"><span class="sec-num">05</span><h2>Reuse — turn prompts into instruments</h2></div>
+    <p class="sec-sub">
+      Phase 3 flagship, and the highest-leverage win. Activate the <code>template_vars</code> already in the
+      schema: when you insert a prompt, fill its variables in a quick form, and reach any prompt from anywhere
+      with a keyboard-first command palette. Dynamic context (<code>{date}</code>, <code>{clipboard}</code>,
+      <code>!`cmd`</code>, <code>@file</code>) makes a single saved prompt adapt to the current repo.
+    </p>
+    <div class="mock-label">A · Fill-in form at insert time — from <code class="mono">template_vars</code></div>
+    <div class="mock">
+      <div class="mock-caption"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">Insert "Deep code review" → fill variables</span></div>
+      <div class="mock-stage">
+        <div class="fillform">
+          <div class="ff-head"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M4 7h16M4 12h10M4 17h7"/></svg><span class="fft">Deep code review</span><span class="ffs">2 variables</span></div>
+          <div class="ff-field">
+            <label>file <b>{{file}}</b></label>
+            <div class="ff-input focused"><span>server.js</span><span class="grow"></span><span style="width:1.5px;height:15px;background:var(--accent);"></span></div>
+          </div>
+          <div class="ff-field">
+            <label>branch <b>{{branch}}</b> · choices</label>
+            <div class="ff-input select"><span>prompts</span><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></div>
+          </div>
+          <div class="ff-field">
+            <label>auto-filled context</label>
+            <div class="ff-input"><span class="ph">!`git diff HEAD~1` → ‹3 files, +88 −12›</span></div>
+          </div>
+          <div class="ff-actions">
+            <div class="ff-btn ghost">Copy</div>
+            <div class="ff-btn primary">Send to session ↵</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mock-label" style="margin-top:26px;">B · Command-palette quick-insert — fuzzy over title + body, keyboard-only</div>
+    <div class="mock">
+      <div class="mock-caption"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">Press ⌘K anywhere → insert a prompt</span></div>
+      <div class="mock-stage">
+        <div class="palette">
+          <div class="pal-search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><span>rev</span><span class="cursor"></span></div>
+          <div class="pal-sec">Prompts</div>
+          <div class="pal-item sel"><svg class="pi-icn" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h10M4 17h7"/></svg><span class="pi-title">Deep code <b>rev</b>iew — find bugs &amp; cleanups</span><span class="pi-sub">2 vars · used 23×</span></div>
+          <div class="pal-item"><svg class="pi-icn" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h10M4 17h7"/></svg><span class="pi-title">PR <b>rev</b>iew checklist</span><span class="pi-sub">used 11×</span></div>
+          <div class="pal-item"><svg class="pi-icn" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h10M4 17h7"/></svg><span class="pi-title">Security <b>rev</b>iew pass — OWASP top 10</span><span class="pi-sub">1 var · used 6×</span></div>
+          <div class="pal-foot"><span><span class="kbd">↑</span><span class="kbd">↓</span> navigate</span><span><span class="kbd">↵</span> fill &amp; insert</span><span><span class="kbd">⌥↵</span> insert raw</span><span><span class="kbd">esc</span> close</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="priorart">
+      <svg class="pa-icn" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+      <div><b>Prior art:</b> Espanso Forms (<code>type: choice</code>), VS Code tabstops (<code>${1|a,b,c|}</code>), and Copilot's <code>${input:var}</code> are the reference models for fill-in fields with defaults, choice dropdowns, and a final-cursor marker. Raycast/Promptlight set the bar for the palette. CTM already has the global-hotkey daemon (<code>bin/ctm-hotkey.swift</code>) and <code>sendToNewSession</code> plumbing to wire it up.</div>
+    </div>
+    <p class="sec-sub" style="margin-top:22px;">
+      <b>Beyond v1:</b> the dormant <code>chains</code> / <code>chain_nodes</code> / <code>chain_edges</code>
+      tables describe prompt workflows (a graph of prompts with conditions). Surfacing even a linear "run these
+      in sequence" view is a natural Phase 4 — the data model is already there.
+    </p>
+  </section>
+  <!-- ===================== ROADMAP ===================== -->
+  <section id="plan">
+    <div class="sec-head"><span class="sec-num">06</span><h2>Phased roadmap</h2></div>
+    <p class="sec-sub">One flagship per phase, ordered by leverage-per-risk. Each phase is independently shippable and reuses existing schema and endpoints — no rewrite.</p>
+    <div class="roadmap">
+      <div class="phase">
+        <div class="pn">Phase 1<small>Findability</small></div>
+        <div class="pbody"><h4>One organization model</h4><p>Consolidate the sidebar in <code>prompts.js</code>/<code>prompts.css</code>: big search + Favorites/Recent/All + tags. Backfill domains→tags via <code>autoTagAllPrompts</code>; collapse star+pin. Mostly front-end + a data migration.</p></div>
+        <span class="risk med">Med</span>
+      </div>
+      <div class="phase">
+        <div class="pn">Phase 2<small>Editor</small></div>
+        <div class="pbody"><h4>Markdown / code editor</h4><p>Introduce a CodeMirror-style editor: markdown + <code>{{var}}</code> highlighting, Edit/Preview/Split, live token meter, <code>/</code> snippets. Keep image annotation as an add-on. Migrate stored HTML → markdown.</p></div>
+        <span class="risk med">Med</span>
+      </div>
+      <div class="phase">
+        <div class="pn">Phase 3<small>Reuse</small></div>
+        <div class="pbody"><h4>Variables + quick-insert</h4><p>Fill-in form from <code>template_vars</code> (defaults, choice dropdowns, cursor marker); <code>⌘K</code> command palette over title+body wired to <code>sendToNewSession</code>; dynamic context <code>{date}</code>/<code>!`cmd`</code>/<code>@file</code>.</p></div>
+        <span class="risk low">Low</span>
+      </div>
+      <div class="phase">
+        <div class="pn">Phase 4<small>Stretch</small></div>
+        <div class="pbody"><h4>Chains &amp; version diff</h4><p>Surface the dormant <code>chains</code> graph (start with linear sequences) and add a side-by-side version diff over <code>prompt_versions</code>. Both build on data that already exists.</p></div>
+        <span class="risk low">Low</span>
+      </div>
+    </div>
+  </section>
+  <footer>
+    CTM Prompt Manager redesign proposal · self-contained mock using the live app theme tokens ·
+    toggle <a href="javascript:toggleTheme()">dark / light</a> to preview both.<br>
+    What I'd build first → <b>Phase 3 (Reuse)</b> is the lowest-risk, highest-leverage win and activates schema that already exists; <b>Phase 1 (Findability)</b> removes the daily friction.
+    Build is a separate greenlit step — implemented on <a href="javascript:void(0)">/ctm-dev</a> with tests, per project rules.
+  </footer>
+</div>
+<script>
+  function toggleTheme() {
+    const html = document.documentElement;
+    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    document.getElementById('themeLabel').textContent = next === 'dark' ? 'Dark' : 'Light';
+  }
+  // subtle staggered reveal on load
+  document.querySelectorAll('section, .hero').forEach((el, i) => {
+    el.style.opacity = '0'; el.style.transform = 'translateY(10px)';
+    el.style.transition = 'opacity .5s ease, transform .5s ease';
+    setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'none'; }, 60 + i * 55);
+  });
+</script>
+</body>
+</html>