npm - kanbango - Versions diffs - 3.3.0 → 3.5.0 - Mend

kanbango 3.3.0 → 3.5.0

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 (15) hide show

package/.ai/lessons.jsonl +1 -0
package/.ai/retro/last-run.json +1 -1
package/.ait-quality.yml +25 -0
package/AGENTS.md +2 -0
package/CHANGELOG.md +32 -4
package/README.md +2 -2
package/agent-playbook.js +12 -6
package/bin/kanban.js +49 -14
package/fenced-text.js +62 -0
package/index.html +1305 -1168
package/kanban.js +107 -82
package/mcp-server.js +89 -144
package/package.json +3 -2
package/tests/run.js +4 -1
package/.opencode/plans/action-error-recipe.md +0 -121

package/index.html CHANGED Viewed

@@ -12,13 +12,15 @@
   --planned: #2563eb;
   --icebox:  #64748b;
   --done:    #16a34a;
-  --bg:      #eef0f3;
+  --bg:      #e8eaef;
   --card:    #ffffff;
   --border:  #dde1e9;
   --text:    #1e293b;
   --muted:   #8fa0b8;
   --radius:  8px;
-  --col-w:   repeat(4, 1fr);
+  --rail-w:  220px;
+  --paper-w: 380px;
+  --now-h:   auto;
 }
 body {
@@ -32,7 +34,7 @@ body {
   flex-direction: column;
 }
-/* ── Header ── */
+/* ── Topbar ── */
 header {
   padding: 0 16px;
   height: 44px;
@@ -59,8 +61,11 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   font-family: inherit;
 }
 .btn-new:hover { filter: brightness(0.9); }
+.btn-new.muted { background: #94a3b8; }
+.btn-new.muted.on { background: #6366f1; }
+.btn-new.secondary { background: #64748b; }
-/* ── New epic form strip ── */
+/* ── New form strips ── */
 .new-epic-strip {
   background: #fff;
   border-bottom: 1px solid var(--border);
@@ -69,6 +74,7 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   gap: 8px;
   align-items: center;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 .new-epic-strip.open { display: flex; }
 .ne-field { display: flex; flex-direction: column; gap: 3px; }
@@ -90,9 +96,9 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   color: var(--text);
 }
 .ne-input:focus { border-color: var(--planned); }
-.ne-title { width: 260px; }
+.ne-title { width: 220px; }
 .ne-col   { width: 130px; }
-.ne-group { width: 200px; }
+.ne-group { width: 180px; }
 .btn-sm {
   border: none; cursor: pointer; border-radius: var(--radius);
   font-size: 11px; padding: 4px 10px; font-weight: 600;
@@ -103,339 +109,203 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
 .btn-cancel  { background: #f1f5f9; color: var(--muted); }
 .btn-cancel:hover { background: #e2e8f0; }
-/* ── Board wrapper ── */
-#board-wrap {
+/* ── Cockpit ── */
+.cockpit {
   flex: 1;
-  overflow-y: auto;
-  padding: 0 12px 16px;
-}
-#board-wrap::-webkit-scrollbar { width: 5px; }
-#board-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
-/* ── Sticky column headers ── */
-.col-headers {
+  min-height: 0;
   display: grid;
-  grid-template-columns: var(--col-w);
-  position: sticky;
-  top: 0;
-  background: var(--bg);
-  z-index: 20;
-  padding: 8px 0 4px;
+  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--paper-w);
+  gap: 0;
 }
-.ch {
-  padding: 6px 12px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.7px;
+/* ── Rail ── */
+#rail {
+  background: #f8fafc;
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 10px 8px;
   display: flex;
-  align-items: center;
-  gap: 6px;
+  flex-direction: column;
+  gap: 4px;
 }
-.ch-count {
-  background: rgba(0,0,0,0.07);
-  border-radius: 10px;
-  padding: 1px 6px;
+#rail::-webkit-scrollbar { width: 4px; }
+#rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
+.rail-label {
   font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
   color: var(--muted);
-  font-weight: 600;
+  padding: 4px 8px 6px;
 }
-.ch.icebox  { color: var(--icebox);  }
-.ch.planned { color: var(--planned); }
-.ch.active  { color: var(--active);  }
-.ch.done    { color: var(--done);    }
-/* ── Swimlane ── */
-.swimlane {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 6px;
-  overflow: hidden;
-}
-.sl-header {
+.rail-item {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
-  background: #f8fafc;
-  border-bottom: 1px solid var(--border);
-  user-select: none;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--text);
+  width: 100%;
 }
-.sl-header-main {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.rail-item:hover { background: #fff; border-color: var(--border); }
+.rail-item.on {
+  background: #fff;
+  border-color: #c7d2fe;
+  box-shadow: 0 1px 3px rgba(99,102,241,0.12);
+}
+.rail-item .ri-title {
   flex: 1;
   min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.sl-name { font-size: 13px; font-weight: 700; color: var(--text); }
-.sl-id {
+.rail-item .ri-id {
   font-size: 10px;
   font-weight: 700;
   color: var(--muted);
   background: #e2e8f0;
   border-radius: 4px;
-  padding: 1px 6px;
-  letter-spacing: 0.3px;
+  padding: 1px 5px;
+  flex-shrink: 0;
 }
-.sl-cnt {
-  font-size: 11px;
+.rail-item .ri-cnt {
+  font-size: 10px;
+  font-weight: 700;
   color: var(--muted);
-  background: #e2e8f0;
-  border-radius: 10px;
-  padding: 1px 6px;
-  font-weight: 600;
+  flex-shrink: 0;
 }
-.sl-status {
-  font-size: 10px;
+.rail-item .ri-status {
+  font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.4px;
+  letter-spacing: 0.3px;
   border-radius: 999px;
-  padding: 2px 8px;
-}
-.sl-status.empty { background: #f1f5f9; color: #64748b; }
-.sl-status.planned { background: #dbeafe; color: #1d4ed8; }
-.sl-status.active { background: #ffedd5; color: #c2410c; }
-.sl-status.done { background: #dcfce7; color: #15803d; }
-.sl-status.archived { background: #f1f5f9; color: #64748b; }
-.sl-progress {
-  font-size: 11px;
-  color: var(--muted);
-  white-space: nowrap;
+  padding: 1px 6px;
+  flex-shrink: 0;
 }
-.sl-toggles {
+.ri-status.empty { background: #f1f5f9; color: #64748b; }
+.ri-status.planned { background: #dbeafe; color: #1d4ed8; }
+.ri-status.active { background: #ffedd5; color: #c2410c; }
+.ri-status.done { background: #dcfce7; color: #15803d; }
+.ri-status.archived { background: #f1f5f9; color: #64748b; }
+/* ── Board center ── */
+.board-center {
   display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+/* ── NOW ── */
+#now {
   flex-shrink: 0;
+  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
+  border-bottom: 1px solid #fed7aa;
+  padding: 10px 12px 12px;
+  max-height: 42%;
+  overflow-y: auto;
 }
-.sl-toggle {
-  border: 1px solid var(--border);
-  background: #fff;
-  color: var(--muted);
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 9px;
-  cursor: pointer;
-  font-family: inherit;
-  display: inline-flex;
+.now-head {
+  display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
+  margin-bottom: 8px;
 }
-.sl-toggle:hover { background: #f1f5f9; color: var(--text); }
-.sl-toggle.on {
-  background: #e0e7ff;
-  border-color: #c7d2fe;
-  color: #3730a3;
+.now-title {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: var(--active);
 }
-.sl-toggle .chev { font-size: 9px; transition: transform 0.15s; display: inline-block; }
-.sl-toggle.on .chev { transform: rotate(90deg); }
-.sl-edit-btn {
-  border: none;
-  background: #e2e8f0;
-  color: var(--muted);
-  border-radius: 6px;
+.now-count {
   font-size: 10px;
   font-weight: 700;
-  padding: 4px 9px;
-  cursor: pointer;
-  font-family: inherit;
-}
-.sl-edit-btn:hover { background: #cbd5e1; color: var(--text); }
-.sl-edit-btn.active { background: #c7d2fe; color: #3730a3; }
-/* ── Epic detail panel (swimlane context) ── */
-.sl-epic-shell {
-  border-bottom: 1px solid var(--border);
-  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
-}
-.sl-epic-detail {
-  padding: 12px 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  font-size: 12px;
+  background: rgba(232,93,4,0.12);
+  color: var(--active);
+  border-radius: 10px;
+  padding: 1px 7px;
 }
-.sl-epic-hero {
+.now-cards {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-.sl-epic-goals {
-  flex: 1;
-  min-width: 220px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-left: 3px solid #6366f1;
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-.sl-epic-goals .sl-epic-label { color: #6366f1; }
-.sl-epic-goals .sl-epic-text {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.45;
-  color: #1e293b;
+  gap: 8px;
 }
-.sl-epic-rollup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-content: flex-start;
+.now-cards .card {
+  width: 240px;
+  max-width: 100%;
 }
-.sl-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  padding: 3px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  color: #475569;
+.now-empty {
+  font-size: 12px;
+  color: #c2410c;
+  opacity: 0.7;
+  font-style: italic;
+  padding: 6px 0;
 }
-.sl-chip strong { color: #0f172a; font-weight: 700; }
-.sl-chip.done { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
-.sl-chip.active { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
-.sl-chip.planned { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
-.sl-chip.icebox { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
-.sl-epic-body {
+/* ── Columns ── */
+#board-cols {
+  flex: 1;
+  min-height: 0;
   display: grid;
-  grid-template-columns: 1.4fr 1fr;
-  gap: 10px;
-}
-@media (max-width: 900px) {
-  .sl-epic-body { grid-template-columns: 1fr; }
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0;
+  overflow: hidden;
 }
-.sl-epic-card {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 10px 12px;
+.col {
+  display: flex;
+  flex-direction: column;
   min-width: 0;
+  border-right: 1px solid var(--border);
+  background: #f4f5f8;
 }
-.sl-epic-card.scope-pair {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px 14px;
-}
-.sl-epic-label {
-  font-size: 10px;
+.col:last-child { border-right: none; }
+.col-head {
+  padding: 8px 12px;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.55px;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-.sl-epic-text {
-  color: #334155;
-  white-space: pre-wrap;
-  line-height: 1.5;
-  word-break: break-word;
-}
-.sl-epic-text.empty { color: #94a3b8; font-style: italic; }
-.sl-epic-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  letter-spacing: 0.7px;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.sl-epic-list li {
-  position: relative;
-  padding: 4px 8px 4px 22px;
-  background: #f8fafc;
-  border-radius: 6px;
-  line-height: 1.4;
-  color: #334155;
-}
-.sl-epic-list li::before {
-  content: "";
-  position: absolute;
-  left: 8px;
-  top: 10px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #6366f1;
-}
-.sl-epic-list.out li {
-  background: #f8fafc;
-  color: #94a3b8;
-}
-.sl-epic-list.out li::before { background: #cbd5e1; }
-.sl-epic-notes {
-  border-style: dashed;
-  color: #64748b;
-}
-.sl-epic-edit-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px 12px;
-  padding: 12px 14px 14px;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  background: #eef0f3;
+  border-bottom: 1px solid var(--border);
 }
-.sl-epic-edit-grid .span2 { grid-column: 1 / -1; }
-.sl-epic-edit-grid label {
-  display: block;
+.col-head.icebox  { color: var(--icebox); }
+.col-head.planned { color: var(--planned); }
+.col-head.done    { color: var(--done); }
+.ch-count {
+  background: rgba(0,0,0,0.07);
+  border-radius: 10px;
+  padding: 1px 6px;
   font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
   color: var(--muted);
-  margin-bottom: 3px;
-}
-.sl-epic-edit-grid input,
-.sl-epic-edit-grid textarea {
-  width: 100%;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 5px 8px;
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--text);
-  box-sizing: border-box;
-  resize: vertical;
-  background: #fff;
-}
-.sl-epic-edit-grid textarea { min-height: 52px; }
-.sl-epic-edit-actions {
-  grid-column: 1 / -1;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
-/* ── Swimlane body grid ── */
-.sl-body {
-  display: grid;
-  grid-template-columns: var(--col-w);
-  min-height: 60px;
+  font-weight: 600;
 }
-.sl-body.hidden { display: none; }
-.lane {
+.col-body {
+  flex: 1;
+  overflow-y: auto;
   padding: 8px;
-  min-height: 56px;
-  border-right: 1px solid #f1f5f9;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.lane:last-child { border-right: none; }
-.lane.col-active  { background: #fefcfb; }
-.lane.col-done    { background: #fafdfb; }
+.col-body::-webkit-scrollbar { width: 4px; }
+.col-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
-/* ── Card ── */
+/* ── Cards ── */
 .card {
   background: var(--card);
   border-radius: var(--radius);
@@ -447,16 +317,17 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   position: relative;
 }
 .card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.11); }
+.card.selected {
+  box-shadow: 0 0 0 2px var(--planned);
+}
 .card.col-planned { border-left-color: var(--planned); }
 .card.col-active  {
   border-left-color: var(--active);
   background: #fffdf9;
   box-shadow: 0 2px 6px rgba(232,93,4,0.10);
 }
-.card.col-done    { border-left-color: var(--done); opacity: 0.6; }
-/* Icebox: tile style */
+.card.col-active.selected { box-shadow: 0 0 0 2px var(--active); }
+.card.col-done    { border-left-color: var(--done); opacity: 0.7; }
 .card.col-icebox {
   background: #edf0f7;
   border-left: none;
@@ -473,107 +344,69 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   background: rgba(0,0,0,0.05); border-radius: 4px;
   padding: 1px 5px; white-space: nowrap;
 }
-.card.col-icebox .card-id { background: rgba(100,116,139,0.12); }
-.card-title { font-size: 14px; font-weight: 600; line-height: 1.3; word-break: break-word; color: var(--text); }
-.card.col-icebox .card-title { font-size: 13px; font-weight: 500; color: #475569; }
+.card-title { font-size: 13px; font-weight: 600; line-height: 1.3; word-break: break-word; color: var(--text); }
+.card.col-icebox .card-title { font-size: 12px; font-weight: 500; color: #475569; }
 .card.col-done .card-title   { text-decoration: line-through; color: var(--muted); }
-/* ── Progress bar ── */
 .prog-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
 .prog-bar { flex: 1; height: 4px; background: #dde1e9; border-radius: 2px; overflow: hidden; }
-.prog-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
+.prog-fill { height: 100%; border-radius: 2px; }
 .prog-fill.planned { background: var(--planned); }
 .prog-fill.active  { background: var(--active);  }
 .prog-fill.done    { background: var(--done);    }
 .prog-fill.icebox  { background: var(--icebox);  }
 .prog-txt { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
-/* ── Card action bar ── */
 .card-actions {
   display: flex; gap: 4px; margin-top: 8px;
   opacity: 0; transition: opacity 0.12s;
 }
 .card:hover .card-actions,
-.card.open .card-actions,
-.card.editing .card-actions { opacity: 1; }
+.card.selected .card-actions { opacity: 1; }
 .cbtn {
   border: none; cursor: pointer; border-radius: 5px;
   font-size: 11px; padding: 3px 8px; font-weight: 600;
   font-family: inherit; background: #edf0f5; color: var(--muted);
-  transition: background 0.1s, color 0.1s;
 }
 .cbtn:hover { background: #dde4f0; color: var(--text); }
-/* Arrow move buttons */
-.cbtn.arr {
-  padding: 3px 9px;
-  font-size: 13px;
-  line-height: 1;
-}
+.cbtn.arr { padding: 3px 9px; font-size: 13px; line-height: 1; }
 .cbtn.arr:hover { background: #d0d8f0; color: var(--planned); }
-.card.col-active .cbtn.arr:hover { background: #ffe4d0; color: var(--active); }
-.cbtn.edit-btn { color: #5a7ab5; }
-.cbtn.edit-btn:hover { background: #e8efff; color: var(--planned); }
-/* ── Expanded card: subtask list (view mode) ── */
-.subtask-label {
-  font-size: 10px; font-weight: 700; text-transform: uppercase;
-  letter-spacing: 0.6px; color: var(--muted);
-  margin: 10px 0 5px; padding-top: 8px;
-  border-top: 1px solid #edf0f5;
-}
-.tasks-list {
-  display: flex; flex-direction: column; gap: 4px;
-}
-.task-row { display: flex; align-items: flex-start; gap: 7px; }
-.task-row input[type="checkbox"] {
-  margin-top: 2px; cursor: pointer; flex-shrink: 0;
-  accent-color: var(--planned);
+.lane-add {
+  background: none; border: 1.5px dashed #d1d5db; border-radius: var(--radius);
+  padding: 5px 10px; font-size: 11px; color: var(--muted); cursor: pointer;
+  width: 100%; text-align: left; font-family: inherit;
+  transition: all 0.15s; margin-top: 2px;
 }
-.task-row label { font-size: 12px; cursor: pointer; line-height: 1.4; color: var(--text); }
-.task-row.done label { text-decoration: line-through; color: var(--muted); }
-.task-copy {
+.lane-add:hover { border-color: var(--planned); color: var(--planned); background: #eff6ff; }
+.lane-addinp {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 7px;
+  margin-top: 2px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
 }
-.task-desc {
-  font-size: 11px;
+.lane-add-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
   color: var(--muted);
-  line-height: 1.4;
 }
-/* ── Edit mode ── */
-.card.editing { box-shadow: 0 0 0 2px var(--planned); cursor: default; }
-.edit-title-input {
-  width: 100%; border: 1px solid var(--planned); border-radius: 4px;
-  padding: 4px 7px; font-size: 13px; font-weight: 500; font-family: inherit;
-  color: var(--text); outline: none; margin-top: 2px;
+.lane-add-title {
+  width: 100%;
+  border: 1px solid var(--planned);
+  border-radius: 4px;
+  padding: 4px 7px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
 }
-.edit-tasks { margin-top: 9px; border-top: 1px solid #f1f5f9; padding-top: 9px; }
-.edit-task-row {
-  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
-}
-.edit-task-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--planned); cursor: pointer; }
-.edit-task-input {
-  flex: 1; border: 1px solid transparent; border-radius: 3px;
-  padding: 2px 5px; font-size: 12px; font-family: inherit;
-  color: var(--text); outline: none; background: transparent;
-}
-.edit-task-input:focus { border-color: var(--planned); background: #fff; }
-.edit-task-input:hover { border-color: var(--border); }
-.edit-task-fields {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.edit-task-desc,
-.edit-block,
 .lane-add-textarea {
   width: 100%;
   border: 1px solid #d7deea;
@@ -584,21 +417,88 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   color: var(--text);
   outline: none;
   resize: vertical;
-  min-height: 56px;
+  min-height: 48px;
   background: #fff;
 }
-.edit-task-desc {
-  min-height: 48px;
+.lane-add-actions { display: flex; gap: 6px; }
+/* ── Paper ── */
+#paper {
+  background: #fff;
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
 }
-.edit-block:focus,
-.edit-task-desc:focus,
-.lane-add-textarea:focus {
-  border-color: var(--planned);
+.paper-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 13px;
+  padding: 24px;
+  text-align: center;
+  line-height: 1.5;
 }
+.paper-head {
+  padding: 12px 14px 10px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.paper-kicker {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.paper-kind {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.paper-badge {
+  font-size: 10px;
+  font-weight: 700;
+  background: #e2e8f0;
+  color: #475569;
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+.paper-badge.col-active { background: #ffedd5; color: #c2410c; }
+.paper-badge.col-planned { background: #dbeafe; color: #1d4ed8; }
+.paper-badge.col-icebox { background: #e2e8f0; color: #64748b; }
+.paper-badge.col-done { background: #dcfce7; color: #15803d; }
+.paper-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.3;
+  word-break: break-word;
+}
+.paper-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.paper-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.paper-body::-webkit-scrollbar { width: 5px; }
+.paper-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
 .detail-section {
-  margin-top: 9px;
-  padding-top: 8px;
-  border-top: 1px solid #edf0f5;
+  padding-top: 2px;
 }
 .detail-label {
   font-size: 10px;
@@ -606,14 +506,17 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--muted);
-  margin-bottom: 4px;
+  margin-bottom: 5px;
 }
 .detail-text {
   font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.5;
   color: var(--text);
   white-space: pre-wrap;
+  word-break: break-word;
 }
+.detail-text .md-text { white-space: pre-wrap; }
+.detail-text.empty { color: #94a3b8; font-style: italic; }
 .detail-list {
   margin: 0;
   padding-left: 18px;
@@ -625,86 +528,167 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   border-left: 3px solid #e8b4b4;
   padding-left: 8px;
 }
-.detail-section.out-of-scope .detail-label {
-  color: #a86a6a;
+.detail-section.out-of-scope .detail-label { color: #a86a6a; }
+.detail-section.out-of-scope .detail-list { color: #7a5a5a; }
+.scope-pair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
-.detail-section.out-of-scope .detail-list {
-  color: #7a5a5a;
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.edit-block.out-of-scope {
-  border-color: #e8c4c4;
-  background: #fffbfb;
+.sl-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
 }
-.edit-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid #f1f5f9;
+.sl-chip strong { color: #0f172a; font-weight: 700; }
+.sl-chip.done { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
+.sl-chip.active { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
+.sl-chip.planned { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
+.sl-chip.icebox { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
+.subtask-label {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.6px; color: var(--muted);
+  margin-bottom: 6px;
 }
-.lane-addinp {
+.tasks-list { display: flex; flex-direction: column; gap: 4px; }
+.task-row { display: flex; align-items: flex-start; gap: 7px; }
+.task-row input[type="checkbox"] {
+  margin-top: 2px; cursor: pointer; flex-shrink: 0;
+  accent-color: var(--planned);
+}
+.task-row label { font-size: 12px; cursor: pointer; line-height: 1.4; color: var(--text); }
+.task-row.done label { text-decoration: line-through; color: var(--muted); }
+.task-copy { display: flex; flex-direction: column; gap: 2px; }
+.task-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
+.adr-card, .evidence-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 6px;
+}
+.adr-card .adr-decision { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
+.adr-card .adr-why { font-size: 12px; color: #475569; line-height: 1.4; }
+.adr-card .adr-meta, .evidence-card .ev-meta {
+  font-size: 10px; color: var(--muted); margin-top: 4px;
+}
+.evidence-card .ev-cmd {
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   background: #fff;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 7px;
-  margin-top: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  border-radius: 4px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+  word-break: break-all;
 }
-.lane-add-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--muted);
+.evidence-card .ev-diff {
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  max-height: 120px;
+  overflow: auto;
+  color: #334155;
 }
-.lane-add-title {
+/* Paper edit */
+.edit-title-input {
+  width: 100%; border: 1px solid var(--planned); border-radius: 4px;
+  padding: 6px 8px; font-size: 15px; font-weight: 600; font-family: inherit;
+  color: var(--text); outline: none;
+}
+.edit-block, .edit-task-desc {
   width: 100%;
-  border: 1px solid var(--planned);
+  border: 1px solid #d7deea;
   border-radius: 4px;
-  padding: 4px 7px;
+  padding: 5px 7px;
   font-size: 12px;
   font-family: inherit;
+  color: var(--text);
   outline: none;
+  resize: vertical;
+  min-height: 56px;
+  background: #fff;
 }
-.lane-add-actions {
-  display: flex;
-  gap: 6px;
+.edit-block:focus, .edit-task-desc:focus { border-color: var(--planned); }
+.edit-block.out-of-scope { border-color: #e8c4c4; background: #fffbfb; }
+.edit-task-row {
+  display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px;
 }
+.edit-task-row input[type="checkbox"] { margin-top: 6px; flex-shrink: 0; accent-color: var(--planned); cursor: pointer; }
+.edit-task-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.edit-task-input {
+  width: 100%; border: 1px solid transparent; border-radius: 3px;
+  padding: 3px 5px; font-size: 12px; font-family: inherit;
+  color: var(--text); outline: none; background: transparent;
+}
+.edit-task-input:focus { border-color: var(--planned); background: #fff; }
 .del-task {
   flex-shrink: 0; border: none; background: none; cursor: pointer;
-  color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px;
-  opacity: 0; transition: opacity 0.1s;
+  color: var(--muted); font-size: 14px; line-height: 1; padding: 4px 2px;
 }
-.edit-task-row:hover .del-task { opacity: 1; }
 .del-task:hover { color: #dc2626; }
-.add-task-row { margin-top: 5px; }
 .add-task-inp {
   width: 100%; border: 1px dashed #cbd5e1; border-radius: 3px;
-  padding: 3px 7px; font-size: 12px; font-family: inherit;
+  padding: 4px 7px; font-size: 12px; font-family: inherit;
   color: var(--text); outline: none; background: transparent;
 }
 .add-task-inp:focus { border-color: var(--planned); border-style: solid; background: #fff; }
-.add-task-inp::placeholder { color: var(--muted); }
 .edit-footer {
-  display: flex; gap: 5px; margin-top: 10px; padding-top: 8px;
-  border-top: 1px solid #f1f5f9;
+  display: flex; gap: 6px; padding-top: 8px;
+  border-top: 1px solid #f1f5f9; margin-top: 4px;
 }
-/* ── Lane add button ── */
-.lane-add {
-  background: none; border: 1.5px dashed #d1d5db; border-radius: var(--radius);
-  padding: 5px 10px; font-size: 11px; color: var(--muted); cursor: pointer;
-  width: 100%; text-align: left; font-family: inherit;
-  transition: all 0.15s; margin-top: 2px;
+.md-mermaid {
+  margin: 8px 0;
+  padding: 10px;
+  background: #f8fafc;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  text-align: center;
+}
+.md-mermaid svg { max-width: 100%; height: auto; }
+.md-mermaid-error {
+  margin: 8px 0;
+  padding: 8px 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius);
+  text-align: left;
+}
+.md-mermaid-error .md-err-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #b91c1c;
+  margin-bottom: 6px;
+}
+.md-mermaid-error pre {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
-.lane-add:hover { border-color: var(--planned); color: var(--planned); background: #eff6ff; }
-/* ── Toast ── */
 .toast {
   position: fixed; bottom: 16px; right: 16px; background: #1e293b;
   color: #fff; padding: 8px 14px; border-radius: 8px;
@@ -713,6 +697,15 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   pointer-events: none; z-index: 999;
 }
 .toast.show { opacity: 1; transform: translateY(0); }
+@media (max-width: 1100px) {
+  :root { --paper-w: 320px; --rail-w: 180px; }
+}
+@media (max-width: 900px) {
+  .cockpit { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
+  #rail { max-height: 140px; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
+  #paper { border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
+}
 </style>
 </head>
 <body>
@@ -721,8 +714,8 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   <h1>Donna Kanban</h1>
   <span class="hstats" id="hstats">—</span>
   <span class="hspacer"></span>
-  <button class="btn-new" id="btn-show-archived" onclick="toggleShowArchived()" style="background:#94a3b8">Show archived</button>
-  <button class="btn-new" id="btn-new-epic" onclick="toggleNewEpicForm()" style="background:#64748b">+ New epic</button>
+  <button class="btn-new muted" id="btn-show-archived" onclick="toggleShowArchived()">Show archived</button>
+  <button class="btn-new secondary" id="btn-new-epic" onclick="toggleNewEpicForm()">+ New epic</button>
   <button class="btn-new" id="btn-new" onclick="toggleNewForm()">+ New task</button>
 </header>
@@ -731,11 +724,11 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
     <div class="ne-label">Epic title</div>
     <input class="ne-input ne-title" id="nx-title" placeholder="Initiative name…" autocomplete="off">
   </div>
-  <div class="ne-field" style="flex:1;min-width:200px">
+  <div class="ne-field" style="flex:1;min-width:160px">
     <div class="ne-label">Description</div>
     <input class="ne-input" id="nx-description" placeholder="Context for agents…" autocomplete="off" style="width:100%">
   </div>
-  <div class="ne-field" style="flex:1;min-width:160px">
+  <div class="ne-field" style="flex:1;min-width:140px">
     <div class="ne-label">Goals</div>
     <input class="ne-input" id="nx-goals" placeholder="Outcome…" autocomplete="off" style="width:100%">
   </div>
@@ -753,10 +746,10 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   <div class="ne-field">
     <div class="ne-label">Column</div>
     <select class="ne-input ne-col" id="ne-col">
-      <option value="icebox">🧊 Icebox</option>
-      <option value="planned" selected>📦 Planned</option>
-      <option value="active">🔥 Active</option>
-      <option value="done">✅ Done</option>
+      <option value="icebox">Icebox</option>
+      <option value="planned" selected>Planned</option>
+      <option value="active">NOW (active)</option>
+      <option value="done">Done</option>
     </select>
   </div>
   <div class="ne-field">
@@ -770,32 +763,61 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   </div>
 </div>
-<div id="board-wrap">
-  <div class="col-headers" id="col-headers"></div>
-  <div id="swimlanes"></div>
-</div>
+<main class="cockpit">
+  <aside id="rail"></aside>
+  <section class="board-center">
+    <div id="now">
+      <div class="now-head">
+        <span class="now-title">NOW</span>
+        <span class="now-count" id="now-count">0</span>
+      </div>
+      <div class="now-cards" id="now-cards"></div>
+    </div>
+    <div id="board-cols">
+      <div class="col" data-col="icebox">
+        <div class="col-head icebox">Icebox <span class="ch-count" id="cnt-icebox">0</span></div>
+        <div class="col-body" id="col-icebox"></div>
+      </div>
+      <div class="col" data-col="planned">
+        <div class="col-head planned">Planned <span class="ch-count" id="cnt-planned">0</span></div>
+        <div class="col-body" id="col-planned"></div>
+      </div>
+      <div class="col" data-col="done">
+        <div class="col-head done">Done <span class="ch-count" id="cnt-done">0</span></div>
+        <div class="col-body" id="col-done"></div>
+      </div>
+    </div>
+  </section>
+  <aside id="paper">
+    <div class="paper-empty">Select a card or epic</div>
+  </aside>
+</main>
 <div class="toast" id="toast"></div>
+<script src="/vendor/fenced-text.js"></script>
+<script src="/vendor/mermaid.min.js"></script>
 <script>
-const COL_DEFS = [
-  { id: "icebox",  label: "🧊 Icebox",  icon: "🧊" },
-  { id: "planned", label: "📦 Planned", icon: "📦" },
-  { id: "active",  label: "🔥 Active",  icon: "🔥" },
-  { id: "done",    label: "✅ Done",    icon: "✅" },
+// Board columns exclude active — active lives in NOW only.
+const BOARD_COLS = [
+  { id: "icebox",  label: "Icebox" },
+  { id: "planned", label: "Planned" },
+  { id: "done",    label: "Done" }
 ];
+// Move order: icebox ↔ planned ↔ active(NOW) ↔ done
+const MOVE_ORDER = ["icebox", "planned", "active", "done"];
-let allTasks   = [];
+let allTasks = [];
 let allEpicEntities = [];
-let colCounts  = {};
-// Separate collapse: epic info panel vs task board (default: info open, tasks open)
-let collapsedInfo = new Set();
-let collapsedTasks = new Set();
-let expanded   = new Set();
-let editingId  = null;
-let dirtyEdits = {}; // taskId -> editable task draft
-let editingEpicId = null;
-let dirtyEpicEdits = {}; // epicId -> draft
+/** @type {null|string} null=all, "—"=no epic, "E001"=epic id */
+let filterKey = null;
+/** @type {null|{kind:'task'|'epic', id:string}} */
+let paperTarget = null;
+let paperEditing = false;
+let dirtyEdits = {};
+let dirtyEpicEdits = {};
 let showArchived = false;
 // ── Load & render ─────────────────────────────────────────────────────────────
@@ -809,785 +831,801 @@ async function load() {
   allTasks = await boardRes.json();
   allEpicEntities = epicsRes.ok ? await epicsRes.json() : [];
   refreshEpicDatalist();
-  render();
-}
-async function archiveEpic(epicId, archived) {
-  const action = archived ? "archive" : "unarchive";
-  await fetch(`/api/epic-entities/${enc(epicId)}/${action}`, { method: "POST" });
-  if (editingEpicId === epicId) editingEpicId = null;
-  await load();
-}
-async function deleteEpicEntity(epicId, title) {
-  if (!confirm(`Delete epic ${epicId} "${title}" and ALL its tasks? This cannot be undone.`)) return;
-  await fetch(`/api/epic-entities/${enc(epicId)}`, { method: "DELETE" });
-  if (editingEpicId === epicId) editingEpicId = null;
-  await load();
-}
-async function deleteTaskCard(taskId, title) {
-  if (!confirm(`Delete task ${taskId}: ${title}?`)) return;
-  await fetch(`/api/tasks/${enc(taskId)}`, { method: "DELETE" });
-  expanded.delete(taskId);
-  editingId = null;
-  await load();
-}
-function toggleShowArchived() {
-  showArchived = !showArchived;
-  const btn = document.getElementById("btn-show-archived");
-  if (btn) {
-    btn.textContent = showArchived ? "Hide archived" : "Show archived";
-    btn.style.background = showArchived ? "#6366f1" : "#94a3b8";
+  // Drop paper target if entity vanished
+  if (paperTarget) {
+    if (paperTarget.kind === "task" && !allTasks.find(t => t.id === paperTarget.id)) {
+      paperTarget = null;
+      paperEditing = false;
+    }
+    if (paperTarget && paperTarget.kind === "epic" && !allEpicEntities.find(e => e.id === paperTarget.id)) {
+      paperTarget = null;
+      paperEditing = false;
+    }
   }
-  load();
+  render();
 }
 function refreshEpicDatalist() {
   const list = document.getElementById("epic-datalist");
-  if (!list) return;
-  list.innerHTML = allEpicEntities.map(e =>
-    `<option value="${escHtml(e.id)}">${escHtml(e.title)}</option>`
-  ).join("");
-}
-function render() {
-  colCounts = {};
-  COL_DEFS.forEach(c => (colCounts[c.id] = 0));
-  allTasks.forEach(e => { if (colCounts[e.column] !== undefined) colCounts[e.column]++; });
-  // Header stats
-  const total = allTasks.length;
-  const done  = allTasks.filter(e => e.column === "done").length;
-  const epicN = allEpicEntities.length;
-  document.getElementById("hstats").textContent = `${done}/${total} done · ${epicN} epics`;
-  // Col headers
-  const hdr = document.getElementById("col-headers");
-  hdr.innerHTML = "";
-  COL_DEFS.forEach(c => {
-    const h = document.createElement("div");
-    h.className = `ch ${c.id}`;
-    h.innerHTML = `${c.label} <span class="ch-count">${colCounts[c.id]}</span>`;
-    hdr.appendChild(h);
-  });
-  // Swimlanes
-  const sl = document.getElementById("swimlanes");
-  sl.innerHTML = "";
-  groupTasks(allTasks).forEach(g => sl.appendChild(renderSwimlane(g)));
-}
-function groupTasks(tasks) {
-  const map = new Map();
-  tasks.forEach(t => {
-    const key = t.epic_id || "—";
-    if (!map.has(key)) map.set(key, []);
-    map.get(key).push(t);
-  });
-  // Include epics that have no tasks yet
-  allEpicEntities.forEach(e => {
-    if (!map.has(e.id)) map.set(e.id, []);
-  });
-  return [...map.entries()]
-    .sort(([a], [b]) => a === "—" ? 1 : b === "—" ? -1 : a.localeCompare(b, "pl"))
-    .map(([key, laneTasks]) => {
-      const entity = allEpicEntities.find(e => e.id === key) || null;
-      const name = key === "—"
-        ? "—"
-        : (entity ? entity.title : (laneTasks[0] && laneTasks[0].epic_group) || key);
-      return {
-        key,
-        name,
-        epicId: key === "—" ? null : key,
-        entity,
-        tasks: laneTasks
-      };
-    });
-}
-function epicListHtml(items, emptyLabel, extraClass) {
-  if (!items || items.length === 0) {
-    return `<div class="sl-epic-text empty">${escHtml(emptyLabel)}</div>`;
-  }
-  return `<ul class="sl-epic-list${extraClass ? " " + extraClass : ""}">${
-    items.map(i => `<li>${escHtml(i)}</li>`).join("")
-  }</ul>`;
-}
-function renderEpicDetailView(entity) {
-  const shell = el("div", "sl-epic-shell");
-  const panel = el("div", "sl-epic-detail");
-  const p = entity.progress || {};
-  const hero = el("div", "sl-epic-hero");
-  const goals = el("div", "sl-epic-goals");
-  goals.innerHTML = `<div class="sl-epic-label">Goals</div>${
-    entity.goals
-      ? `<div class="sl-epic-text">${escHtml(entity.goals)}</div>`
-      : `<div class="sl-epic-text empty">No goals set</div>`
-  }`;
-  hero.appendChild(goals);
-  const rollup = el("div", "sl-epic-rollup");
-  rollup.innerHTML = `
-    <span class="sl-chip"><strong>${p.tasks_total || 0}</strong> total</span>
-    <span class="sl-chip active"><strong>${p.tasks_active || 0}</strong> active</span>
-    <span class="sl-chip planned"><strong>${p.tasks_planned || 0}</strong> planned</span>
-    <span class="sl-chip icebox"><strong>${p.tasks_icebox || 0}</strong> icebox</span>
-    <span class="sl-chip done"><strong>${p.tasks_done || 0}</strong> done</span>
-  `;
-  hero.appendChild(rollup);
-  panel.appendChild(hero);
-  const body = el("div", "sl-epic-body");
-  const descCard = el("div", "sl-epic-card");
-  descCard.innerHTML = `<div class="sl-epic-label">Description</div>${
-    entity.description
-      ? `<div class="sl-epic-text">${escHtml(entity.description)}</div>`
-      : `<div class="sl-epic-text empty">No description yet — click Edit epic to add context for agents.</div>`
-  }`;
-  body.appendChild(descCard);
-  const scopeCard = el("div", "sl-epic-card scope-pair");
-  scopeCard.innerHTML = `
-    <div>
-      <div class="sl-epic-label">In scope</div>
-      ${epicListHtml(entity.in_scope, "Nothing listed", "")}
-    </div>
-    <div>
-      <div class="sl-epic-label">Out of scope</div>
-      ${epicListHtml(entity.out_of_scope, "Nothing listed", "out")}
-    </div>
-  `;
-  body.appendChild(scopeCard);
-  panel.appendChild(body);
-  if (entity.notes) {
-    const notes = el("div", "sl-epic-card sl-epic-notes");
-    notes.innerHTML = `<div class="sl-epic-label">Notes</div><div class="sl-epic-text">${escHtml(entity.notes)}</div>`;
-    panel.appendChild(notes);
-  }
-  shell.appendChild(panel);
-  return shell;
-}
-function renderEpicDetailEdit(entity) {
-  const dirty = dirtyEpicEdits[entity.id] || {
-    title: entity.title || "",
-    description: entity.description || "",
-    goals: entity.goals || "",
-    in_scope: (entity.in_scope || []).join("\n"),
-    out_of_scope: (entity.out_of_scope || []).join("\n"),
-    notes: entity.notes || ""
-  };
-  dirtyEpicEdits[entity.id] = dirty;
-  const shell = el("div", "sl-epic-shell");
-  shell.onclick = e => e.stopPropagation();
-  const grid = el("div", "sl-epic-edit-grid");
-  const titleWrap = el("div", "span2");
-  titleWrap.innerHTML = `<label>Title</label>`;
-  const titleInp = document.createElement("input");
-  titleInp.value = dirty.title;
-  titleInp.oninput = () => { dirty.title = titleInp.value; dirtyEpicEdits[entity.id] = dirty; };
-  titleWrap.appendChild(titleInp);
-  grid.appendChild(titleWrap);
-  const goalsWrap = el("div", "span2");
-  goalsWrap.innerHTML = `<label>Goals</label>`;
-  const goalsTa = document.createElement("textarea");
-  goalsTa.value = dirty.goals;
-  goalsTa.placeholder = "Outcome one-liner…";
-  goalsTa.oninput = () => { dirty.goals = goalsTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  goalsWrap.appendChild(goalsTa);
-  grid.appendChild(goalsWrap);
-  const descWrap = el("div", "span2");
-  descWrap.innerHTML = `<label>Description</label>`;
-  const descTa = document.createElement("textarea");
-  descTa.value = dirty.description;
-  descTa.placeholder = "Context for agents…";
-  descTa.style.minHeight = "72px";
-  descTa.oninput = () => { dirty.description = descTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  descWrap.appendChild(descTa);
-  grid.appendChild(descWrap);
-  const inWrap = el("div", "");
-  inWrap.innerHTML = `<label>In scope (one per line)</label>`;
-  const inTa = document.createElement("textarea");
-  inTa.value = dirty.in_scope;
-  inTa.oninput = () => { dirty.in_scope = inTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  inWrap.appendChild(inTa);
-  grid.appendChild(inWrap);
-  const outWrap = el("div", "");
-  outWrap.innerHTML = `<label>Out of scope (one per line)</label>`;
-  const outTa = document.createElement("textarea");
-  outTa.value = dirty.out_of_scope;
-  outTa.oninput = () => { dirty.out_of_scope = outTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  outWrap.appendChild(outTa);
-  grid.appendChild(outWrap);
-  const notesWrap = el("div", "span2");
-  notesWrap.innerHTML = `<label>Notes</label>`;
-  const notesTa = document.createElement("textarea");
-  notesTa.value = dirty.notes;
-  notesTa.oninput = () => { dirty.notes = notesTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  notesWrap.appendChild(notesTa);
-  grid.appendChild(notesWrap);
-  const actions = el("div", "sl-epic-edit-actions");
-  const saveBtn = document.createElement("button");
-  saveBtn.className = "btn-sm btn-confirm";
-  saveBtn.textContent = "✓ Save epic";
-  saveBtn.onclick = async e => { e.stopPropagation(); await saveEpicEdit(entity.id); };
-  const cancelBtn = document.createElement("button");
-  cancelBtn.className = "btn-sm btn-cancel";
-  cancelBtn.textContent = "Cancel";
-  cancelBtn.onclick = e => {
-    e.stopPropagation();
-    delete dirtyEpicEdits[entity.id];
-    editingEpicId = null;
-    render();
-  };
-  actions.appendChild(saveBtn);
-  actions.appendChild(cancelBtn);
-  grid.appendChild(actions);
-  shell.appendChild(grid);
-  return shell;
-}
-async function saveEpicEdit(epicId) {
-  const dirty = dirtyEpicEdits[epicId];
-  if (!dirty) { editingEpicId = null; render(); return; }
-  const res = await fetch(`/api/epic-entities/${enc(epicId)}`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      title: dirty.title.trim(),
-      description: dirty.description,
-      goals: dirty.goals,
-      in_scope: splitLines(dirty.in_scope),
-      out_of_scope: splitLines(dirty.out_of_scope),
-      notes: dirty.notes
-    })
-  });
-  if (res.ok) {
-    delete dirtyEpicEdits[epicId];
-    editingEpicId = null;
-    toast("Epic saved ✓");
-    await load();
-  } else {
-    toast("Epic save failed", true);
-  }
+  if (!list) return;
+  list.innerHTML = allEpicEntities.map(e =>
+    `<option value="${escHtml(e.id)}">${escHtml(e.title)}</option>`
+  ).join("");
 }
-// ── Swimlane ──────────────────────────────────────────────────────────────────
+function filteredTasks() {
+  if (filterKey === null) return allTasks.slice();
+  if (filterKey === "—") return allTasks.filter(t => !t.epic_id);
+  return allTasks.filter(t => t.epic_id === filterKey);
+}
+function render() {
+  const tasks = filteredTasks();
+  const total = allTasks.length;
+  const done = allTasks.filter(t => t.column === "done").length;
+  document.getElementById("hstats").textContent =
+    `${done}/${total} done · ${allEpicEntities.length} epics` +
+    (filterKey === null ? "" : filterKey === "—" ? " · filter: No epic" : ` · filter: ${filterKey}`);
+  renderRail();
+  renderNow(tasks);
+  renderBoardCols(tasks);
+  renderPaper();
+  queueMermaidRun(document.getElementById("paper"));
+}
+// ── Rail ──────────────────────────────────────────────────────────────────────
+function renderRail() {
+  const rail = document.getElementById("rail");
+  rail.innerHTML = "";
+  rail.appendChild(Object.assign(el("div", "rail-label"), { textContent: "Initiatives" }));
+  rail.appendChild(makeRailItem({
+    key: null,
+    title: "All",
+    idLabel: null,
+    count: allTasks.length,
+    status: null,
+    on: filterKey === null && !(paperTarget && paperTarget.kind === "epic")
+  }));
+  const orphanCount = allTasks.filter(t => !t.epic_id).length;
+  rail.appendChild(makeRailItem({
+    key: "—",
+    title: "No epic",
+    idLabel: null,
+    count: orphanCount,
+    status: null,
+    on: filterKey === "—"
+  }));
-function toggleSet(set, key) {
-  if (set.has(key)) set.delete(key);
-  else set.add(key);
+  allEpicEntities
+    .slice()
+    .sort((a, b) => String(a.id).localeCompare(String(b.id)))
+    .forEach(entity => {
+      const p = entity.progress || {};
+      const cnt = p.tasks_total != null
+        ? p.tasks_total
+        : allTasks.filter(t => t.epic_id === entity.id).length;
+      const selected = paperTarget && paperTarget.kind === "epic" && paperTarget.id === entity.id;
+      rail.appendChild(makeRailItem({
+        key: entity.id,
+        title: entity.title || entity.id,
+        idLabel: entity.id,
+        count: cnt,
+        status: entity.status || null,
+        on: selected || filterKey === entity.id,
+        entity
+      }));
+    });
 }
-function makeToggleBtn(label, isOn, onClick) {
+function makeRailItem({ key, title, idLabel, count, status, on, entity }) {
   const btn = document.createElement("button");
   btn.type = "button";
-  btn.className = `sl-toggle${isOn ? " on" : ""}`;
-  btn.innerHTML = `<span class="chev">▶</span>${label}`;
-  btn.onclick = e => { e.stopPropagation(); onClick(); };
+  btn.className = `rail-item${on ? " on" : ""}`;
+  btn.innerHTML = `
+    <span class="ri-title">${escHtml(title)}</span>
+    ${idLabel ? `<span class="ri-id">${escHtml(idLabel)}</span>` : ""}
+    ${status ? `<span class="ri-status ${escHtml(status)}">${escHtml(status)}</span>` : ""}
+    <span class="ri-cnt">${count}</span>
+  `;
+  btn.onclick = () => {
+    if (key === null) {
+      filterKey = null;
+      // keep paper if open
+    } else if (key === "—") {
+      filterKey = "—";
+      if (paperTarget && paperTarget.kind === "epic") {
+        paperTarget = null;
+        paperEditing = false;
+      }
+    } else {
+      filterKey = key;
+      openPaper("epic", key);
+      return; // openPaper → render
+    }
+    render();
+  };
   return btn;
 }
-function renderSwimlane({ key, name, epicId, entity, tasks }) {
-  const infoOpen = entity ? !collapsedInfo.has(key) : false;
-  const tasksOpen = !collapsedTasks.has(key);
-  const isEditingEpic = epicId && editingEpicId === epicId;
-  const wrap = el("div", "swimlane");
-  const hdr = el("div", "sl-header");
-  const totalTasks = tasks.reduce((s, e) => s + (e.subtasks || []).length, 0);
-  const doneTasks  = tasks.reduce((s, e) => s + (e.subtasks || []).filter(t => t.done).length, 0);
-  const pct = totalTasks > 0 ? Math.round(doneTasks / totalTasks * 100) : null;
-  const cardsDone = tasks.filter(t => t.column === "done").length;
-  const status = entity ? (entity.status || "empty") : null;
-  const main = el("div", "sl-header-main");
-  const titleHtml = name === "—"
-    ? "Uncategorized (no epic)"
-    : escHtml(name);
-  main.innerHTML = `
-    <span class="sl-name">${titleHtml}</span>
-    ${epicId ? `<span class="sl-id">${escHtml(epicId)}</span>` : ""}
-    ${status ? `<span class="sl-status ${escHtml(status)}">${escHtml(status)}</span>` : ""}
-    <span class="sl-cnt">${tasks.length} cards · ${cardsDone} done</span>
-    ${pct !== null ? `<span class="sl-progress">${pct}% subtasks</span>` : ""}
-  `;
-  hdr.appendChild(main);
-  const toggles = el("div", "sl-toggles");
+// ── NOW + columns ─────────────────────────────────────────────────────────────
-  if (entity) {
-    toggles.appendChild(makeToggleBtn("Info", infoOpen, () => {
-      toggleSet(collapsedInfo, key);
-      render();
+function renderNow(tasks) {
+  const active = tasks.filter(t => t.column === "active");
+  document.getElementById("now-count").textContent = String(active.length);
+  const wrap = document.getElementById("now-cards");
+  wrap.innerHTML = "";
+  if (active.length === 0) {
+    wrap.appendChild(Object.assign(el("div", "now-empty"), {
+      textContent: "Nothing in NOW — move a planned card here →"
     }));
+  } else {
+    active.forEach(t => wrap.appendChild(renderCard(t, "active")));
   }
+  // lane-add into NOW
+  const addBtn = document.createElement("button");
+  addBtn.className = "lane-add";
+  addBtn.textContent = "+ Add to NOW";
+  addBtn.style.width = "240px";
+  addBtn.onclick = e => {
+    e.stopPropagation();
+    showLaneAdd(wrap, "active", currentEpicRef(), addBtn);
+  };
+  wrap.appendChild(addBtn);
+}
-  toggles.appendChild(makeToggleBtn("Tasks", tasksOpen, () => {
-    toggleSet(collapsedTasks, key);
-    render();
-  }));
-  if (epicId && entity) {
-    const editBtn = document.createElement("button");
-    editBtn.type = "button";
-    editBtn.className = `sl-edit-btn${isEditingEpic ? " active" : ""}`;
-    editBtn.textContent = isEditingEpic ? "Editing…" : "Edit";
-    editBtn.onclick = e => {
-      e.stopPropagation();
-      if (editingEpicId === epicId) {
-        editingEpicId = null;
-        delete dirtyEpicEdits[epicId];
-      } else {
-        editingEpicId = epicId;
-        collapsedInfo.delete(key);
-      }
-      render();
-    };
-    toggles.appendChild(editBtn);
-    const archBtn = document.createElement("button");
-    archBtn.type = "button";
-    archBtn.className = "sl-edit-btn";
-    archBtn.textContent = entity.archived ? "Unarchive" : "Archive";
-    archBtn.onclick = e => {
-      e.stopPropagation();
-      archiveEpic(epicId, !entity.archived);
-    };
-    toggles.appendChild(archBtn);
-    const delBtn = document.createElement("button");
-    delBtn.type = "button";
-    delBtn.className = "sl-edit-btn";
-    delBtn.textContent = "Delete";
-    delBtn.title = "Delete epic and all child tasks";
-    delBtn.onclick = e => {
-      e.stopPropagation();
-      deleteEpicEntity(epicId, entity.title || name);
-    };
-    toggles.appendChild(delBtn);
-  }
-  hdr.appendChild(toggles);
-  wrap.appendChild(hdr);
-  if (entity && (infoOpen || isEditingEpic)) {
-    wrap.appendChild(
-      isEditingEpic ? renderEpicDetailEdit(entity) : renderEpicDetailView(entity)
-    );
-  }
-  const body = el("div", `sl-body${tasksOpen ? "" : " hidden"}`);
-  COL_DEFS.forEach(col => {
-    const lane = el("div", `lane col-${col.id}`);
-    tasks.filter(e => e.column === col.id).forEach(e => lane.appendChild(renderCard(e, col.id)));
+function renderBoardCols(tasks) {
+  BOARD_COLS.forEach(col => {
+    const list = tasks.filter(t => t.column === col.id);
+    document.getElementById("cnt-" + col.id).textContent = String(list.length);
+    const body = document.getElementById("col-" + col.id);
+    body.innerHTML = "";
+    list.forEach(t => body.appendChild(renderCard(t, col.id)));
     if (col.id !== "done") {
       const addBtn = document.createElement("button");
       addBtn.className = "lane-add";
       addBtn.textContent = "+ Add here";
-      addBtn.onclick = e => { e.stopPropagation(); showLaneAdd(lane, col.id, epicId || name, addBtn); };
-      lane.appendChild(addBtn);
+      addBtn.onclick = e => {
+        e.stopPropagation();
+        showLaneAdd(body, col.id, currentEpicRef(), addBtn);
+      };
+      body.appendChild(addBtn);
     }
-    body.appendChild(lane);
   });
-  wrap.appendChild(body);
-  return wrap;
 }
-// ── Card ──────────────────────────────────────────────────────────────────────
+function currentEpicRef() {
+  if (filterKey && filterKey !== "—") return filterKey;
+  return "";
+}
 function getNeighborCols(colId) {
-  const idx = COL_DEFS.findIndex(c => c.id === colId);
+  const idx = MOVE_ORDER.indexOf(colId);
   return {
-    prev: idx > 0                    ? COL_DEFS[idx - 1] : null,
-    next: idx < COL_DEFS.length - 1 ? COL_DEFS[idx + 1] : null,
+    prev: idx > 0 ? MOVE_ORDER[idx - 1] : null,
+    next: idx >= 0 && idx < MOVE_ORDER.length - 1 ? MOVE_ORDER[idx + 1] : null
   };
 }
-async function moveCard(epicId, targetColId) {
-  await fetch(`/api/epics/${enc(epicId)}/move`, {
+async function moveCard(taskId, targetColId) {
+  await fetch(`/api/epics/${enc(taskId)}/move`, {
     method: "PATCH",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ column: targetColId }),
+    body: JSON.stringify({ column: targetColId })
   });
-  expanded.delete(epicId);
   await load();
 }
-function renderCard(epic, colId) {
-  const isEditing  = editingId === epic.id;
-  const isExpanded = expanded.has(epic.id);
-  const card = el("div", `card col-${colId}${isExpanded ? " open" : ""}${isEditing ? " editing" : ""}`);
-  card.dataset.id = epic.id;
+function renderCard(task, colId) {
+  const selected = paperTarget && paperTarget.kind === "task" && paperTarget.id === task.id;
+  const card = el("div", `card col-${colId}${selected ? " selected" : ""}`);
+  card.dataset.id = task.id;
-  const totalT = epic.subtasks.length;
-  const doneT  = epic.subtasks.filter(t => t.done).length;
-  const pct    = totalT > 0 ? Math.round(doneT / totalT * 100) : 0;
-  const shortId = (epic.id.match(/^PI-\d+/) || [epic.id])[0];
-  const displayTitle = epic.title.replace(/^[\w.-]+:\s*/, "");
+  const subtasks = task.subtasks || [];
+  const totalT = subtasks.length;
+  const doneT = subtasks.filter(t => t.done).length;
+  const pct = totalT > 0 ? Math.round(doneT / totalT * 100) : 0;
+  const shortId = (String(task.id).match(/^PI-\d+/) || [task.id])[0];
+  const displayTitle = String(task.title || "").replace(/^[\w.-]+:\s*/, "");
-  if (isEditing) {
-    renderEditMode(card, epic, colId, shortId);
-  } else {
-    // Top row: ID badge
-    const top = el("div", "card-top");
-    const idBadge = el("span", "card-id");
-    idBadge.textContent = shortId;
-    top.appendChild(idBadge);
-    card.appendChild(top);
-    // Title
-    const titleEl = el("div", "card-title");
-    titleEl.textContent = displayTitle;
-    card.appendChild(titleEl);
-    // Progress (skip for icebox — frozen, not in progress)
-    if (totalT > 0 && colId !== "icebox") {
-      const pr = el("div", "prog-row");
-      pr.innerHTML = `
-        <div class="prog-bar"><div class="prog-fill ${colId}" style="width:${pct}%"></div></div>
-        <span class="prog-txt">${doneT}/${totalT}</span>
-      `;
-      card.appendChild(pr);
-    } else if (totalT > 0 && colId === "icebox") {
-      // For icebox show just a count badge
-      const badge = el("span", "prog-txt");
-      badge.style.cssText = "display:inline-block;margin-top:5px;background:rgba(100,116,139,0.12);border-radius:4px;padding:1px 6px;";
-      badge.textContent = `${totalT} subtasks`;
-      card.appendChild(badge);
+  const top = el("div", "card-top");
+  const idBadge = el("span", "card-id");
+  idBadge.textContent = shortId;
+  top.appendChild(idBadge);
+  card.appendChild(top);
+  const titleEl = el("div", "card-title");
+  titleEl.textContent = displayTitle;
+  card.appendChild(titleEl);
+  if (totalT > 0 && colId !== "icebox") {
+    const pr = el("div", "prog-row");
+    pr.innerHTML = `
+      <div class="prog-bar"><div class="prog-fill ${colId}" style="width:${pct}%"></div></div>
+      <span class="prog-txt">${doneT}/${totalT}</span>
+    `;
+    card.appendChild(pr);
+  } else if (totalT > 0 && colId === "icebox") {
+    const badge = el("span", "prog-txt");
+    badge.style.cssText = "display:inline-block;margin-top:5px;background:rgba(100,116,139,0.12);border-radius:4px;padding:1px 6px;";
+    badge.textContent = `${totalT} subtasks`;
+    card.appendChild(badge);
+  }
+  const actions = el("div", "card-actions");
+  const { prev, next } = getNeighborCols(colId);
+  if (prev) {
+    const lb = document.createElement("button");
+    lb.className = "cbtn arr";
+    lb.textContent = "←";
+    lb.title = `→ ${prev}`;
+    lb.onclick = async e => { e.stopPropagation(); await moveCard(task.id, prev); };
+    actions.appendChild(lb);
+  }
+  if (next) {
+    const rb = document.createElement("button");
+    rb.className = "cbtn arr";
+    rb.textContent = "→";
+    rb.title = `→ ${next}`;
+    rb.onclick = async e => { e.stopPropagation(); await moveCard(task.id, next); };
+    actions.appendChild(rb);
+  }
+  const delBtn = document.createElement("button");
+  delBtn.className = "cbtn";
+  delBtn.textContent = "✕";
+  delBtn.title = "Delete task";
+  delBtn.onclick = e => {
+    e.stopPropagation();
+    deleteTaskCard(task.id, displayTitle);
+  };
+  actions.appendChild(delBtn);
+  card.appendChild(actions);
+  card.onclick = e => {
+    if (e.target.tagName === "BUTTON" || e.target.tagName === "INPUT") return;
+    openPaper("task", task.id);
+  };
+  return card;
+}
+// ── Paper ─────────────────────────────────────────────────────────────────────
+function openPaper(kind, id) {
+  if (paperTarget && (paperTarget.kind !== kind || paperTarget.id !== id)) {
+    paperEditing = false;
+    dirtyEdits = {};
+    dirtyEpicEdits = {};
+  }
+  paperTarget = { kind, id };
+  render();
+}
+function closePaper() {
+  paperTarget = null;
+  paperEditing = false;
+  dirtyEdits = {};
+  dirtyEpicEdits = {};
+  render();
+}
+function renderPaper() {
+  const paper = document.getElementById("paper");
+  paper.innerHTML = "";
+  if (!paperTarget) {
+    paper.appendChild(Object.assign(el("div", "paper-empty"), {
+      textContent: "Select a card or epic to open the paper"
+    }));
+    return;
+  }
+  if (paperTarget.kind === "task") {
+    const task = allTasks.find(t => t.id === paperTarget.id);
+    if (!task) {
+      paper.appendChild(Object.assign(el("div", "paper-empty"), { textContent: "Task not found" }));
+      return;
     }
+    if (paperEditing) renderTaskPaperEdit(paper, task);
+    else renderTaskPaperView(paper, task);
+    return;
+  }
-    // Actions
-    const actions = el("div", "card-actions");
-    // ← arrow
-    const { prev, next } = getNeighborCols(colId);
-    if (prev) {
-      const lb = document.createElement("button");
-      lb.className = "cbtn arr";
-      lb.textContent = "←";
-      lb.title = `→ ${prev.label}`;
-      lb.onclick = async e => { e.stopPropagation(); await moveCard(epic.id, prev.id); };
-      actions.appendChild(lb);
+  const entity = allEpicEntities.find(e => e.id === paperTarget.id);
+  if (!entity) {
+    paper.appendChild(Object.assign(el("div", "paper-empty"), { textContent: "Epic not found" }));
+    return;
+  }
+  if (paperEditing) renderEpicPaperEdit(paper, entity);
+  else renderEpicPaperView(paper, entity);
+}
+function paperHead(kindLabel, badges, title, actions) {
+  const head = el("div", "paper-head");
+  const kicker = el("div", "paper-kicker");
+  kicker.appendChild(Object.assign(el("span", "paper-kind"), { textContent: kindLabel }));
+  (badges || []).forEach(b => {
+    const sp = el("span", `paper-badge${b.cls ? " " + b.cls : ""}`);
+    sp.textContent = b.text;
+    kicker.appendChild(sp);
+  });
+  head.appendChild(kicker);
+  head.appendChild(Object.assign(el("div", "paper-title"), { textContent: title }));
+  if (actions && actions.length) {
+    const row = el("div", "paper-actions");
+    actions.forEach(a => row.appendChild(a));
+    head.appendChild(row);
+  }
+  return head;
+}
+function makePaperBtn(label, cls, onClick) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = cls || "btn-sm btn-cancel";
+  b.textContent = label;
+  b.onclick = onClick;
+  return b;
+}
+function renderTaskPaperView(paper, task) {
+  const displayTitle = String(task.title || "").replace(/^[\w.-]+:\s*/, "");
+  const badges = [
+    { text: task.id, cls: "" },
+    { text: task.column === "active" ? "NOW" : task.column, cls: "col-" + task.column }
+  ];
+  if (task.epic_id) badges.push({ text: task.epic_id, cls: "" });
+  if (task.plan && task.plan.status) badges.push({ text: "plan:" + task.plan.status, cls: "" });
+  const actions = [
+    makePaperBtn("Edit", "btn-sm btn-confirm", () => { paperEditing = true; render(); }),
+    makePaperBtn("Close", "btn-sm btn-cancel", () => closePaper())
+  ];
+  paper.appendChild(paperHead("Task", badges, displayTitle, actions));
+  const body = el("div", "paper-body");
+  if (task.description) body.appendChild(renderDetailSection("What", task.description));
+  if (task.rationale) body.appendChild(renderDetailSection("Rationale", task.rationale));
+  if (task.outcome) body.appendChild(renderDetailSection("Outcome", task.outcome));
+  if (task.specs) body.appendChild(renderDetailSection("Specs", task.specs));
+  if ((task.in_scope && task.in_scope.length) || (task.out_of_scope && task.out_of_scope.length)) {
+    const pair = el("div", "scope-pair");
+    if (task.in_scope && task.in_scope.length) {
+      pair.appendChild(renderDetailListSection("In Scope", task.in_scope));
     }
-    // → arrow
-    if (next) {
-      const rb = document.createElement("button");
-      rb.className = "cbtn arr";
-      rb.textContent = "→";
-      rb.title = `→ ${next.label}`;
-      rb.onclick = async e => { e.stopPropagation(); await moveCard(epic.id, next.id); };
-      actions.appendChild(rb);
+    if (task.out_of_scope && task.out_of_scope.length) {
+      pair.appendChild(renderDetailListSection("Out of Scope", task.out_of_scope, "out-of-scope"));
     }
+    body.appendChild(pair);
+  }
-    // Expand details button
-    const expBtn = document.createElement("button");
-    expBtn.className = "cbtn";
-    expBtn.textContent = isExpanded ? "▲" : "▼ Details";
-    expBtn.onclick = e => { e.stopPropagation(); toggleExpand(epic.id); };
-    actions.appendChild(expBtn);
-    // Edit button
-    const editBtn = document.createElement("button");
-    editBtn.className = "cbtn edit-btn";
-    editBtn.textContent = "✎";
-    editBtn.title = "Edit";
-    editBtn.onclick = e => { e.stopPropagation(); startEdit(epic.id); };
-    actions.appendChild(editBtn);
-    const delBtn = document.createElement("button");
-    delBtn.className = "cbtn";
-    delBtn.textContent = "✕";
-    delBtn.title = "Delete task";
-    delBtn.onclick = e => {
-      e.stopPropagation();
-      deleteTaskCard(epic.id, displayTitle);
-    };
-    actions.appendChild(delBtn);
-    card.appendChild(actions);
-    // Details + subtasks (expanded, view mode)
-    if (isExpanded) {
-      appendDetailSections(card, epic);
-      if (totalT > 0) {
-        const lbl = el("div", "subtask-label");
-        lbl.textContent = "Subtasks";
-        card.appendChild(lbl);
-        const list = el("div", "tasks-list");
-        epic.subtasks.forEach((task, idx) => {
-          const row = el("div", `task-row${task.done ? " done" : ""}`);
-          const cbId = `v-${epic.id}-${idx}`;
-          row.innerHTML = `
-            <input type="checkbox" id="${cbId}" ${task.done ? "checked" : ""}>
-            <div class="task-copy">
-              <label for="${cbId}">${escHtml(task.text)}</label>
-              ${task.description ? `<div class="task-desc">${escHtml(task.description)}</div>` : ""}
-            </div>
-          `;
-          row.querySelector("input").onchange = async function() {
-            this.disabled = true;
-            await fetch(`/api/epics/${enc(epic.id)}/tasks/${idx}`, { method: "PATCH" });
-            await load();
-          };
-          list.appendChild(row);
-        });
-        card.appendChild(list);
-      }
-    }
+  if (task.acceptance_criteria && task.acceptance_criteria.length) {
+    body.appendChild(renderDetailListSection("Acceptance Criteria", task.acceptance_criteria));
+  }
+  if (task.test_cases && task.test_cases.length) {
+    body.appendChild(renderDetailListSection("Test Cases", task.test_cases));
+  }
+  if (task.notes) body.appendChild(renderDetailSection("Notes", task.notes));
-    card.onclick = e => {
-      if (e.target.tagName === "BUTTON" || e.target.tagName === "INPUT" || e.target.tagName === "LABEL") return;
-      toggleExpand(epic.id);
-    };
+  const subtasks = task.subtasks || [];
+  if (subtasks.length > 0) {
+    const wrap = el("div", "detail-section");
+    wrap.appendChild(Object.assign(el("div", "subtask-label"), {
+      textContent: `Steps / subtasks (${subtasks.filter(s => s.done).length}/${subtasks.length})`
+    }));
+    const list = el("div", "tasks-list");
+    subtasks.forEach((st, idx) => {
+      const row = el("div", `task-row${st.done ? " done" : ""}`);
+      const cbId = `p-${task.id}-${idx}`;
+      row.innerHTML = `
+        <input type="checkbox" id="${cbId}" ${st.done ? "checked" : ""}>
+        <div class="task-copy">
+          <label for="${cbId}">${escHtml(st.text)}</label>
+          ${st.description ? `<div class="task-desc">${escHtml(st.description)}</div>` : ""}
+        </div>
+      `;
+      row.querySelector("input").onchange = async function() {
+        this.disabled = true;
+        await fetch(`/api/epics/${enc(task.id)}/tasks/${idx}`, { method: "PATCH" });
+        await load();
+      };
+      list.appendChild(row);
+    });
+    wrap.appendChild(list);
+    body.appendChild(wrap);
   }
-  return card;
+  // ADR (read-only)
+  const adrs = Array.isArray(task.adr) ? task.adr : [];
+  if (adrs.length > 0) {
+    const wrap = el("div", "detail-section");
+    wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: "ADR" }));
+    adrs.forEach(a => {
+      const card = el("div", "adr-card");
+      card.innerHTML = `
+        <div class="adr-decision">${escHtml(a.decision || "")}</div>
+        <div class="adr-why">${escHtml(a.why || "")}</div>
+        <div class="adr-meta">${escHtml(a.id || "")}${a.created ? " · " + escHtml(a.created) : ""}</div>
+      `;
+      wrap.appendChild(card);
+    });
+    body.appendChild(wrap);
+  }
+  // Evidence (read-only)
+  const evidence = Array.isArray(task.evidence) ? task.evidence : [];
+  if (evidence.length > 0) {
+    const wrap = el("div", "detail-section");
+    wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: "Evidence" }));
+    evidence.forEach(ev => {
+      const card = el("div", "evidence-card");
+      const cmd = el("div", "ev-cmd");
+      cmd.textContent = ev.test_command || "(no command)";
+      card.appendChild(cmd);
+      const meta = el("div", "ev-meta");
+      meta.textContent = `exit ${ev.exit_code == null ? "?" : ev.exit_code}${ev.created ? " · " + ev.created : ""}`;
+      card.appendChild(meta);
+      if (ev.diff) {
+        const diff = el("div", "ev-diff");
+        diff.textContent = ev.diff;
+        card.appendChild(diff);
+      }
+      wrap.appendChild(card);
+    });
+    body.appendChild(wrap);
+  }
+  paper.appendChild(body);
 }
-function renderEditMode(card, epic, colId, shortId) {
-  const displayTitle = epic.title.replace(/^[\w.-]+:\s*/, "");
-  const dirty = dirtyEdits[epic.id] || {
+function renderTaskPaperEdit(paper, task) {
+  const displayTitle = String(task.title || "").replace(/^[\w.-]+:\s*/, "");
+  const dirty = dirtyEdits[task.id] || {
     title: displayTitle,
-    description: epic.description || "",
-    specs: epic.specs || "",
-    in_scope: (epic.in_scope || []).join("\n"),
-    out_of_scope: (epic.out_of_scope || []).join("\n"),
-    acceptance_criteria: (epic.acceptance_criteria || []).join("\n"),
-    test_cases: (epic.test_cases || []).join("\n"),
-    notes: epic.notes || "",
-    tasks: epic.subtasks.map(t => ({ ...t }))
+    description: task.description || "",
+    rationale: task.rationale || "",
+    outcome: task.outcome || "",
+    specs: task.specs || "",
+    in_scope: (task.in_scope || []).join("\n"),
+    out_of_scope: (task.out_of_scope || []).join("\n"),
+    acceptance_criteria: (task.acceptance_criteria || []).join("\n"),
+    test_cases: (task.test_cases || []).join("\n"),
+    notes: task.notes || "",
+    tasks: (task.subtasks || []).map(t => ({ ...t }))
   };
-  dirtyEdits[epic.id] = dirty;
+  dirtyEdits[task.id] = dirty;
-  const top = el("div", "card-top");
-  const idBadge = el("span", "card-id");
-  idBadge.textContent = shortId;
-  top.appendChild(idBadge);
-  card.appendChild(top);
+  const badges = [
+    { text: task.id, cls: "" },
+    { text: task.column === "active" ? "NOW" : task.column, cls: "col-" + task.column }
+  ];
+  paper.appendChild(paperHead("Task · edit", badges, "Editing", []));
+  const body = el("div", "paper-body");
-  // Title input
   const titleInput = document.createElement("input");
   titleInput.className = "edit-title-input";
   titleInput.value = dirty.title;
-  titleInput.oninput = () => { dirty.title = titleInput.value; dirtyEdits[epic.id] = dirty; };
-  card.appendChild(titleInput);
-  const meta = el("div", "edit-meta");
-  meta.appendChild(renderEditBlock("Description", dirty.description, value => {
-    dirty.description = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "Context and implementation plan..."));
-  meta.appendChild(renderEditBlock("Specs", dirty.specs, value => {
-    dirty.specs = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "APIs, constraints, edge cases..."));
-  meta.appendChild(renderEditBlock("In Scope", dirty.in_scope, value => {
-    dirty.in_scope = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "What this task covers (one item per line)"));
-  meta.appendChild(renderEditBlock("Out of Scope", dirty.out_of_scope, value => {
-    dirty.out_of_scope = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "What is explicitly not included (one item per line)", "out-of-scope"));
-  meta.appendChild(renderEditBlock("Acceptance Criteria", dirty.acceptance_criteria, value => {
-    dirty.acceptance_criteria = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "One condition per line"));
-  meta.appendChild(renderEditBlock("Test Cases", dirty.test_cases, value => {
-    dirty.test_cases = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "One scenario per line"));
-  meta.appendChild(renderEditBlock("Notes", dirty.notes, value => {
-    dirty.notes = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "Optional notes"));
-  card.appendChild(meta);
-  // Subtasks section
-  const editTasks = el("div", "edit-tasks");
-  const subtaskLbl = el("div", "subtask-label");
-  subtaskLbl.textContent = "Subtasks";
-  editTasks.appendChild(subtaskLbl);
+  titleInput.oninput = () => { dirty.title = titleInput.value; dirtyEdits[task.id] = dirty; };
+  body.appendChild(titleInput);
+  body.appendChild(renderEditBlock("What", dirty.description, v => { dirty.description = v; dirtyEdits[task.id] = dirty; }, "What we are doing…"));
+  body.appendChild(renderEditBlock("Rationale", dirty.rationale, v => { dirty.rationale = v; dirtyEdits[task.id] = dirty; }, "Why this approach…"));
+  body.appendChild(renderEditBlock("Outcome", dirty.outcome, v => { dirty.outcome = v; dirtyEdits[task.id] = dirty; }, "Intended effect…"));
+  body.appendChild(renderEditBlock("Specs", dirty.specs, v => { dirty.specs = v; dirtyEdits[task.id] = dirty; }, "APIs, constraints…"));
+  body.appendChild(renderEditBlock("In Scope", dirty.in_scope, v => { dirty.in_scope = v; dirtyEdits[task.id] = dirty; }, "One item per line"));
+  body.appendChild(renderEditBlock("Out of Scope", dirty.out_of_scope, v => { dirty.out_of_scope = v; dirtyEdits[task.id] = dirty; }, "One item per line", "out-of-scope"));
+  body.appendChild(renderEditBlock("Acceptance Criteria", dirty.acceptance_criteria, v => { dirty.acceptance_criteria = v; dirtyEdits[task.id] = dirty; }, "One condition per line"));
+  body.appendChild(renderEditBlock("Test Cases", dirty.test_cases, v => { dirty.test_cases = v; dirtyEdits[task.id] = dirty; }, "One scenario per line"));
+  body.appendChild(renderEditBlock("Notes", dirty.notes, v => { dirty.notes = v; dirtyEdits[task.id] = dirty; }, "Optional notes"));
+  const editTasks = el("div", "detail-section");
+  editTasks.appendChild(Object.assign(el("div", "subtask-label"), { textContent: "Steps / subtasks" }));
   const taskRows = el("div");
   const refreshRows = () => {
     taskRows.innerHTML = "";
-    dirty.tasks.forEach((task, idx) => {
+    dirty.tasks.forEach((st, idx) => {
       const row = el("div", "edit-task-row");
       const cb = document.createElement("input");
       cb.type = "checkbox";
-      cb.checked = task.done;
-      cb.onchange = () => { dirty.tasks[idx].done = cb.checked; dirtyEdits[epic.id] = dirty; };
+      cb.checked = st.done;
+      cb.onchange = () => { dirty.tasks[idx].done = cb.checked; dirtyEdits[task.id] = dirty; };
       const fields = el("div", "edit-task-fields");
       const inp = document.createElement("input");
       inp.className = "edit-task-input";
-      inp.value = task.text;
-      inp.oninput = () => { dirty.tasks[idx].text = inp.value; dirtyEdits[epic.id] = dirty; };
-      inp.onkeydown = e => {
-        if (e.key === "Enter") { e.preventDefault(); addSubtaskInput.focus(); }
-        if (e.key === "Backspace" && inp.value === "") {
-          e.preventDefault();
-          dirty.tasks.splice(idx, 1);
-          dirtyEdits[epic.id] = dirty;
-          refreshRows();
-        }
-      };
+      inp.value = st.text;
+      inp.oninput = () => { dirty.tasks[idx].text = inp.value; dirtyEdits[task.id] = dirty; };
       const desc = document.createElement("textarea");
       desc.className = "edit-task-desc";
-      desc.placeholder = "Subtask description...";
-      desc.value = task.description || "";
-      desc.oninput = () => { dirty.tasks[idx].description = desc.value; dirtyEdits[epic.id] = dirty; };
-      const delBtn = document.createElement("button");
-      delBtn.className = "del-task";
-      delBtn.textContent = "×";
-      delBtn.title = "Remove subtask";
-      delBtn.onclick = () => { dirty.tasks.splice(idx, 1); dirtyEdits[epic.id] = dirty; refreshRows(); };
+      desc.placeholder = "Subtask description…";
+      desc.value = st.description || "";
+      desc.oninput = () => { dirty.tasks[idx].description = desc.value; dirtyEdits[task.id] = dirty; };
+      const del = document.createElement("button");
+      del.className = "del-task";
+      del.textContent = "×";
+      del.onclick = () => { dirty.tasks.splice(idx, 1); dirtyEdits[task.id] = dirty; refreshRows(); };
       fields.appendChild(inp);
       fields.appendChild(desc);
-      row.appendChild(cb); row.appendChild(fields); row.appendChild(delBtn);
+      row.appendChild(cb);
+      row.appendChild(fields);
+      row.appendChild(del);
       taskRows.appendChild(row);
     });
   };
   refreshRows();
   editTasks.appendChild(taskRows);
-  // Add subtask input
-  const addSubtaskInput = document.createElement("input");
-  addSubtaskInput.className = "add-task-inp";
-  addSubtaskInput.placeholder = "+ New subtask… (Enter)";
-  addSubtaskInput.onkeydown = e => {
-    if (e.key === "Enter" && addSubtaskInput.value.trim()) {
-      dirty.tasks.push({ done: false, text: addSubtaskInput.value.trim(), description: "" });
-      dirtyEdits[epic.id] = dirty;
-      addSubtaskInput.value = "";
+  const addInp = document.createElement("input");
+  addInp.className = "add-task-inp";
+  addInp.placeholder = "+ New step… (Enter)";
+  addInp.onkeydown = e => {
+    if (e.key === "Enter" && addInp.value.trim()) {
+      dirty.tasks.push({ done: false, text: addInp.value.trim(), description: "" });
+      dirtyEdits[task.id] = dirty;
+      addInp.value = "";
       refreshRows();
     }
   };
-  editTasks.appendChild(addSubtaskInput);
-  card.appendChild(editTasks);
+  editTasks.appendChild(addInp);
+  body.appendChild(editTasks);
+  // ADR / evidence stay read-only hint
+  if ((task.adr && task.adr.length) || (task.evidence && task.evidence.length)) {
+    const hint = el("div", "detail-text empty");
+    hint.textContent = "ADR and evidence are read-only in GUI (set via MCP/CLI).";
+    body.appendChild(hint);
+  }
-  // Footer
   const footer = el("div", "edit-footer");
-  const saveBtn = document.createElement("button");
-  saveBtn.className = "btn-sm btn-confirm";
-  saveBtn.textContent = "✓ Save";
-  saveBtn.onclick = async e => { e.stopPropagation(); await saveEdit(epic.id); };
-const cancelBtn = document.createElement("button");
-  cancelBtn.className = "btn-sm btn-cancel";
-  cancelBtn.textContent = "Cancel";
-  cancelBtn.onclick = e => {
-    e.stopPropagation(); delete dirtyEdits[epic.id]; editingId = null; render();
-  };
+  footer.appendChild(makePaperBtn("✓ Save", "btn-sm btn-confirm", async () => {
+    await saveTaskEdit(task.id);
+  }));
+  footer.appendChild(makePaperBtn("Cancel", "btn-sm btn-cancel", () => {
+    delete dirtyEdits[task.id];
+    paperEditing = false;
+    render();
+  }));
+  body.appendChild(footer);
-  footer.appendChild(saveBtn); footer.appendChild(cancelBtn);
-  card.appendChild(footer);
+  paper.appendChild(body);
   setTimeout(() => titleInput.focus(), 0);
 }
-// ── Edit helpers ──────────────────────────────────────────────────────────────
-function startEdit(id) {
-  if (editingId && editingId !== id) delete dirtyEdits[editingId];
-  editingId = id;
-  expanded.add(id);
-  render();
-}
-async function saveEdit(epicId) {
-  const dirty = dirtyEdits[epicId];
-  if (!dirty) { editingId = null; render(); return; }
-  const body = {};
-  const epic = allTasks.find(e => e.id === epicId);
-  if (epic) {
-    const origTitle = epic.title.replace(/^[\w.-]+:\s*/, "");
-    if (dirty.title !== origTitle) body.title = dirty.title;
-    body.description = dirty.description;
-    body.specs = dirty.specs;
-    body.in_scope = splitLines(dirty.in_scope);
-    body.out_of_scope = splitLines(dirty.out_of_scope);
-    body.acceptance_criteria = splitLines(dirty.acceptance_criteria);
-    body.test_cases = splitLines(dirty.test_cases);
-    body.notes = dirty.notes;
-    body.subtasks = dirty.tasks.filter(t => t.text.trim()).map((task, idx) => ({
-      id: task.id || `st-${idx + 1}`,
-      text: task.text.trim(),
-      done: Boolean(task.done),
-      description: (task.description || "").trim()
-    }));
-  }
+async function saveTaskEdit(taskId) {
+  const dirty = dirtyEdits[taskId];
+  if (!dirty) { paperEditing = false; render(); return; }
+  const body = {
+    title: dirty.title,
+    description: dirty.description,
+    rationale: dirty.rationale,
+    outcome: dirty.outcome,
+    specs: dirty.specs,
+    in_scope: splitLines(dirty.in_scope),
+    out_of_scope: splitLines(dirty.out_of_scope),
+    acceptance_criteria: splitLines(dirty.acceptance_criteria),
+    test_cases: splitLines(dirty.test_cases),
+    notes: dirty.notes,
+    subtasks: dirty.tasks.filter(t => t.text.trim()).map((st, idx) => ({
+      id: st.id || `st-${idx + 1}`,
+      text: st.text.trim(),
+      done: Boolean(st.done),
+      description: (st.description || "").trim()
+    }))
+  };
   try {
-    const res = await fetch(`/api/epics/${enc(epicId)}`, {
+    const res = await fetch(`/api/epics/${enc(taskId)}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
+      body: JSON.stringify(body)
     });
     if (!res.ok) throw new Error();
     toast("Saved ✓");
-  } catch { toast("Save error!", true); }
-  delete dirtyEdits[epicId];
-  editingId = null;
+    delete dirtyEdits[taskId];
+    paperEditing = false;
+    await load();
+  } catch {
+    toast("Save error!", true);
+  }
+}
+function renderEpicPaperView(paper, entity) {
+  const p = entity.progress || {};
+  const badges = [
+    { text: entity.id, cls: "" },
+    { text: entity.status || "empty", cls: "" }
+  ];
+  if (entity.archived) badges.push({ text: "archived", cls: "" });
+  const actions = [
+    makePaperBtn("Edit", "btn-sm btn-confirm", () => { paperEditing = true; render(); }),
+    makePaperBtn(entity.archived ? "Unarchive" : "Archive", "btn-sm btn-cancel", () => {
+      archiveEpic(entity.id, !entity.archived);
+    }),
+    makePaperBtn("Delete", "btn-sm btn-cancel", () => {
+      deleteEpicEntity(entity.id, entity.title || entity.id);
+    }),
+    makePaperBtn("Close", "btn-sm btn-cancel", () => closePaper())
+  ];
+  paper.appendChild(paperHead("Epic", badges, entity.title || entity.id, actions));
+  const body = el("div", "paper-body");
+  const chips = el("div", "chip-row");
+  chips.innerHTML = `
+    <span class="sl-chip"><strong>${p.tasks_total || 0}</strong> total</span>
+    <span class="sl-chip active"><strong>${p.tasks_active || 0}</strong> NOW</span>
+    <span class="sl-chip planned"><strong>${p.tasks_planned || 0}</strong> planned</span>
+    <span class="sl-chip icebox"><strong>${p.tasks_icebox || 0}</strong> icebox</span>
+    <span class="sl-chip done"><strong>${p.tasks_done || 0}</strong> done</span>
+  `;
+  body.appendChild(chips);
+  if (entity.goals) body.appendChild(renderDetailSection("Goals", entity.goals));
+  if (entity.description) body.appendChild(renderDetailSection("What", entity.description));
+  if (entity.rationale) body.appendChild(renderDetailSection("Rationale", entity.rationale));
+  if (entity.outcome) body.appendChild(renderDetailSection("Outcome", entity.outcome));
+  if ((entity.in_scope && entity.in_scope.length) || (entity.out_of_scope && entity.out_of_scope.length)) {
+    const pair = el("div", "scope-pair");
+    pair.appendChild(renderDetailListSection("In Scope", entity.in_scope || []));
+    pair.appendChild(renderDetailListSection("Out of Scope", entity.out_of_scope || [], "out-of-scope"));
+    body.appendChild(pair);
+  }
+  if (entity.notes) body.appendChild(renderDetailSection("Notes", entity.notes));
+  // Rollup ADRs from child tasks (shapeEpic full)
+  const adrs = Array.isArray(entity.adrs) ? entity.adrs : [];
+  if (adrs.length > 0) {
+    const wrap = el("div", "detail-section");
+    wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: "ADR (from tasks)" }));
+    adrs.forEach(a => {
+      const card = el("div", "adr-card");
+      card.innerHTML = `
+        <div class="adr-decision">${escHtml(a.decision || "")}</div>
+        <div class="adr-why">${escHtml(a.why || "")}</div>
+        <div class="adr-meta">${escHtml(a.task_id || "")}${a.task_title ? " · " + escHtml(a.task_title) : ""}${a.created ? " · " + escHtml(a.created) : ""}</div>
+      `;
+      wrap.appendChild(card);
+    });
+    body.appendChild(wrap);
+  }
+  paper.appendChild(body);
+}
+function renderEpicPaperEdit(paper, entity) {
+  const dirty = dirtyEpicEdits[entity.id] || {
+    title: entity.title || "",
+    description: entity.description || "",
+    rationale: entity.rationale || "",
+    outcome: entity.outcome || "",
+    goals: entity.goals || "",
+    in_scope: (entity.in_scope || []).join("\n"),
+    out_of_scope: (entity.out_of_scope || []).join("\n"),
+    notes: entity.notes || ""
+  };
+  dirtyEpicEdits[entity.id] = dirty;
+  paper.appendChild(paperHead("Epic · edit", [{ text: entity.id, cls: "" }], "Editing", []));
+  const body = el("div", "paper-body");
+  const titleWrap = el("div", "detail-section");
+  titleWrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: "Title" }));
+  const titleInp = document.createElement("input");
+  titleInp.className = "edit-title-input";
+  titleInp.value = dirty.title;
+  titleInp.oninput = () => { dirty.title = titleInp.value; dirtyEpicEdits[entity.id] = dirty; };
+  titleWrap.appendChild(titleInp);
+  body.appendChild(titleWrap);
+  body.appendChild(renderEditBlock("Goals", dirty.goals, v => { dirty.goals = v; dirtyEpicEdits[entity.id] = dirty; }, "Outcome one-liner…"));
+  body.appendChild(renderEditBlock("What", dirty.description, v => { dirty.description = v; dirtyEpicEdits[entity.id] = dirty; }, "What this initiative does…"));
+  body.appendChild(renderEditBlock("Rationale", dirty.rationale, v => { dirty.rationale = v; dirtyEpicEdits[entity.id] = dirty; }, "Why…"));
+  body.appendChild(renderEditBlock("Outcome", dirty.outcome, v => { dirty.outcome = v; dirtyEpicEdits[entity.id] = dirty; }, "Intended effect…"));
+  body.appendChild(renderEditBlock("In Scope", dirty.in_scope, v => { dirty.in_scope = v; dirtyEpicEdits[entity.id] = dirty; }, "One per line"));
+  body.appendChild(renderEditBlock("Out of Scope", dirty.out_of_scope, v => { dirty.out_of_scope = v; dirtyEpicEdits[entity.id] = dirty; }, "One per line", "out-of-scope"));
+  body.appendChild(renderEditBlock("Notes", dirty.notes, v => { dirty.notes = v; dirtyEpicEdits[entity.id] = dirty; }, "Notes"));
+  const footer = el("div", "edit-footer");
+  footer.appendChild(makePaperBtn("✓ Save epic", "btn-sm btn-confirm", async () => {
+    await saveEpicEdit(entity.id);
+  }));
+  footer.appendChild(makePaperBtn("Cancel", "btn-sm btn-cancel", () => {
+    delete dirtyEpicEdits[entity.id];
+    paperEditing = false;
+    render();
+  }));
+  body.appendChild(footer);
+  paper.appendChild(body);
+  setTimeout(() => titleInp.focus(), 0);
+}
+async function saveEpicEdit(epicId) {
+  const dirty = dirtyEpicEdits[epicId];
+  if (!dirty) { paperEditing = false; render(); return; }
+  const res = await fetch(`/api/epic-entities/${enc(epicId)}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      title: dirty.title.trim(),
+      description: dirty.description,
+      rationale: dirty.rationale,
+      outcome: dirty.outcome,
+      goals: dirty.goals,
+      in_scope: splitLines(dirty.in_scope),
+      out_of_scope: splitLines(dirty.out_of_scope),
+      notes: dirty.notes
+    })
+  });
+  if (res.ok) {
+    delete dirtyEpicEdits[epicId];
+    paperEditing = false;
+    toast("Epic saved ✓");
+    await load();
+  } else {
+    toast("Epic save failed", true);
+  }
+}
+// ── CRUD helpers ──────────────────────────────────────────────────────────────
+async function archiveEpic(epicId, archived) {
+  const action = archived ? "archive" : "unarchive";
+  await fetch(`/api/epic-entities/${enc(epicId)}/${action}`, { method: "POST" });
   await load();
 }
-function toggleExpand(id) {
-  if (expanded.has(id)) expanded.delete(id);
-  else expanded.add(id);
-  render();
+async function deleteEpicEntity(epicId, title) {
+  if (!confirm(`Delete epic ${epicId} "${title}" and ALL its tasks? This cannot be undone.`)) return;
+  await fetch(`/api/epic-entities/${enc(epicId)}`, { method: "DELETE" });
+  if (paperTarget && paperTarget.kind === "epic" && paperTarget.id === epicId) {
+    paperTarget = null;
+    paperEditing = false;
+  }
+  if (filterKey === epicId) filterKey = null;
+  await load();
 }
-// ── Lane "add here" ───────────────────────────────────────────────────────────
+async function deleteTaskCard(taskId, title) {
+  if (!confirm(`Delete task ${taskId}: ${title}?`)) return;
+  await fetch(`/api/tasks/${enc(taskId)}`, { method: "DELETE" });
+  if (paperTarget && paperTarget.kind === "task" && paperTarget.id === taskId) {
+    paperTarget = null;
+    paperEditing = false;
+  }
+  await load();
+}
-function showLaneAdd(lane, colId, groupName, addBtn) {
-  const existing = lane.querySelector(".lane-addinp");
-  if (existing) { existing.remove(); return; }
+function toggleShowArchived() {
+  showArchived = !showArchived;
+  const btn = document.getElementById("btn-show-archived");
+  if (btn) {
+    btn.textContent = showArchived ? "Hide archived" : "Show archived";
+    btn.classList.toggle("on", showArchived);
+  }
+  load();
+}
-  const wrap = el("div", "lane-addinp");
+// ── Lane add ──────────────────────────────────────────────────────────────────
-  const titleLabel = el("div", "lane-add-label");
-  titleLabel.textContent = "Task title";
-  wrap.appendChild(titleLabel);
+function showLaneAdd(container, colId, epicRef, addBtn) {
+  const existing = container.querySelector(".lane-addinp");
+  if (existing) { existing.remove(); return; }
+  const wrap = el("div", "lane-addinp");
+  wrap.appendChild(Object.assign(el("div", "lane-add-label"), { textContent: "Task title" }));
   const inp = document.createElement("input");
   inp.className = "lane-add-title";
   inp.placeholder = "New task name…";
   inp.autocomplete = "off";
-  const descLabel = el("div", "lane-add-label");
-  descLabel.textContent = "Description";
-  wrap.appendChild(descLabel);
+  wrap.appendChild(Object.assign(el("div", "lane-add-label"), { textContent: "Description" }));
   const description = document.createElement("textarea");
   description.className = "lane-add-textarea";
-  description.placeholder = "Task description (optional)...";
+  description.placeholder = "Optional…";
   const actions = el("div", "lane-add-actions");
   const confirmBtn = document.createElement("button");
@@ -1602,17 +1640,21 @@ function showLaneAdd(lane, colId, groupName, addBtn) {
     if (!title) return;
     inp.disabled = true;
     description.disabled = true;
-    const epicRef = groupName === "—" ? "" : groupName;
+    const payload = {
+      title,
+      column: colId,
+      description: description.value.trim()
+    };
+    if (epicRef) {
+      payload.epic = epicRef;
+      if (/^E\d+/i.test(epicRef)) payload.epic_id = epicRef;
+    } else {
+      payload.epic = "—";
+    }
     const res = await fetch("/api/tasks", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        title,
-        column: colId,
-        epic: epicRef,
-        epic_id: epicRef && /^E\d+/i.test(epicRef) ? epicRef : undefined,
-        description: description.value.trim()
-      }),
+      body: JSON.stringify(payload)
     });
     if (res.ok) {
       toast("Added ✓");
@@ -1635,11 +1677,12 @@ function showLaneAdd(lane, colId, groupName, addBtn) {
   actions.appendChild(confirmBtn);
   actions.appendChild(cancelBtn);
   wrap.appendChild(actions);
-  lane.insertBefore(wrap, addBtn);
+  if (addBtn && addBtn.parentNode === container) container.insertBefore(wrap, addBtn);
+  else container.appendChild(wrap);
   inp.focus();
 }
-// ── New task / epic forms (header) ────────────────────────────────────────────
+// ── New task / epic forms ─────────────────────────────────────────────────────
 function toggleNewForm() {
   const epicStrip = document.getElementById("new-epic-strip");
@@ -1647,6 +1690,9 @@ function toggleNewForm() {
   const strip = document.getElementById("new-strip");
   strip.classList.toggle("open");
   if (strip.classList.contains("open")) {
+    if (filterKey && filterKey !== "—") {
+      document.getElementById("ne-group").value = filterKey;
+    }
     document.getElementById("ne-title").focus();
   }
 }
@@ -1663,14 +1709,17 @@ function toggleNewEpicForm() {
 async function submitNew() {
   const title = document.getElementById("ne-title").value.trim();
-  const col   = document.getElementById("ne-col").value;
+  const col = document.getElementById("ne-col").value;
   const group = document.getElementById("ne-group").value.trim();
   if (!title) { document.getElementById("ne-title").focus(); return; }
+  const payload = { title, column: col, epic: group || "—" };
+  if (group && /^E\d+/i.test(group)) payload.epic_id = group;
   const res = await fetch("/api/tasks", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ title, column: col, epic: group || "—" }),
+    body: JSON.stringify(payload)
   });
   if (res.ok) {
     toast("Task added ✓");
@@ -1692,7 +1741,7 @@ async function submitNewEpic() {
   const res = await fetch("/api/epics", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ title, description, goals }),
+    body: JSON.stringify({ title, description, goals })
   });
   if (res.ok) {
     toast("Epic added ✓");
@@ -1700,13 +1749,18 @@ async function submitNewEpic() {
     document.getElementById("nx-description").value = "";
     document.getElementById("nx-goals").value = "";
     toggleNewEpicForm();
+    const created = await res.json();
+    if (created && created.id) {
+      filterKey = created.id;
+      openPaper("epic", created.id);
+      return;
+    }
     await load();
   } else {
     toast("Error!", true);
   }
 }
-// Key handler for new form
 document.getElementById("ne-title").addEventListener("keydown", e => {
   if (e.key === "Enter") submitNew();
   if (e.key === "Escape") toggleNewForm();
@@ -1726,68 +1780,43 @@ function el(tag, cls) {
 function splitLines(value) {
   return String(value || "").split("\n").map(line => line.trim()).filter(Boolean);
 }
-function appendDetailSections(card, epic) {
-  if (epic.description) {
-    card.appendChild(renderDetailSection("Description", epic.description));
-  }
-  if (epic.specs) {
-    card.appendChild(renderDetailSection("Specs", epic.specs));
-  }
-  if (epic.in_scope && epic.in_scope.length > 0) {
-    card.appendChild(renderDetailListSection("In Scope", epic.in_scope));
-  }
-  if (epic.out_of_scope && epic.out_of_scope.length > 0) {
-    card.appendChild(renderDetailListSection("Out of Scope", epic.out_of_scope, "out-of-scope"));
-  }
-  if (epic.acceptance_criteria && epic.acceptance_criteria.length > 0) {
-    card.appendChild(renderDetailListSection("Acceptance Criteria", epic.acceptance_criteria));
-  }
-  if (epic.test_cases && epic.test_cases.length > 0) {
-    card.appendChild(renderDetailListSection("Test Cases", epic.test_cases));
-  }
-  if (epic.notes) {
-    card.appendChild(renderDetailSection("Notes", epic.notes));
-  }
-}
 function renderDetailSection(label, text) {
   const wrap = el("div", "detail-section");
-  const labelEl = el("div", "detail-label");
-  labelEl.textContent = label;
+  wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: label }));
   const textEl = el("div", "detail-text");
-  textEl.textContent = text;
-  wrap.appendChild(labelEl);
+  fillRichText(textEl, text);
   wrap.appendChild(textEl);
   return wrap;
 }
 function renderDetailListSection(label, items, extraClass) {
   const wrap = el("div", extraClass ? `detail-section ${extraClass}` : "detail-section");
-  const labelEl = el("div", "detail-label");
-  labelEl.textContent = label;
+  wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: label }));
+  if (!items || items.length === 0) {
+    wrap.appendChild(Object.assign(el("div", "detail-text empty"), { textContent: "Nothing listed" }));
+    return wrap;
+  }
   const list = el("ul", "detail-list");
   items.forEach(item => {
     const li = document.createElement("li");
     li.textContent = item;
     list.appendChild(li);
   });
-  wrap.appendChild(labelEl);
   wrap.appendChild(list);
   return wrap;
 }
 function renderEditBlock(label, value, onInput, placeholder, extraClass) {
-  const wrap = el("div", extraClass ? `detail-section ${extraClass}` : null);
-  const labelEl = el("div", "detail-label");
-  labelEl.textContent = label;
+  const wrap = el("div", extraClass ? `detail-section ${extraClass}` : "detail-section");
+  wrap.appendChild(Object.assign(el("div", "detail-label"), { textContent: label }));
   const textarea = document.createElement("textarea");
   textarea.className = extraClass ? `edit-block ${extraClass}` : "edit-block";
   textarea.value = value;
-  textarea.placeholder = placeholder;
+  textarea.placeholder = placeholder || "";
   textarea.oninput = () => onInput(textarea.value);
-  wrap.appendChild(labelEl);
   wrap.appendChild(textarea);
   return wrap;
 }
 function escHtml(s) {
-  return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function enc(s) { return encodeURIComponent(s); }
@@ -1801,7 +1830,115 @@ function toast(msg, err = false) {
   toastTimer = setTimeout(() => t.classList.remove("show"), 2500);
 }
-// ── Init ──────────────────────────────────────────────────────────────────────
+// ── Mermaid ───────────────────────────────────────────────────────────────────
+let mermaidReady = false;
+let mermaidRunTimer = null;
+let mermaidSeq = 0;
+function parseFencedSegments(text) {
+  if (window.FencedText && typeof window.FencedText.parseFencedText === "function") {
+    return window.FencedText.parseFencedText(text);
+  }
+  return text ? [{ type: "text", value: String(text) }] : [];
+}
+function fillRichText(container, text) {
+  container.textContent = "";
+  const segments = parseFencedSegments(text);
+  if (segments.length === 0) return;
+  segments.forEach(seg => {
+    if (seg.type === "mermaid") {
+      const box = el("div", "md-mermaid");
+      box.dataset.mermaidSource = seg.value;
+      const pre = document.createElement("pre");
+      pre.className = "mermaid";
+      pre.textContent = seg.value;
+      box.appendChild(pre);
+      container.appendChild(box);
+    } else if (seg.value) {
+      const span = el("div", "md-text");
+      span.textContent = seg.value;
+      container.appendChild(span);
+    }
+  });
+}
+function showMermaidFallback(box, source, err) {
+  box.className = "md-mermaid-error";
+  box.textContent = "";
+  const label = el("div", "md-err-label");
+  label.textContent = err && err.message
+    ? `Mermaid error: ${err.message}`
+    : "Mermaid render failed";
+  const pre = document.createElement("pre");
+  pre.textContent = source || box.dataset.mermaidSource || "";
+  box.appendChild(label);
+  box.appendChild(pre);
+}
+function ensureMermaidInit() {
+  if (mermaidReady) return true;
+  if (typeof mermaid === "undefined" || !mermaid) return false;
+  try {
+    mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "neutral" });
+    mermaidReady = true;
+    return true;
+  } catch (err) {
+    console.error("mermaid.initialize failed", err);
+    return false;
+  }
+}
+async function runMermaidIn(root) {
+  const scope = root || document;
+  const nodes = [...scope.querySelectorAll("pre.mermaid")].filter(
+    n => !n.dataset.processed && n.textContent.trim()
+  );
+  if (nodes.length === 0) return;
+  if (!ensureMermaidInit()) {
+    nodes.forEach(pre => {
+      const box = pre.closest(".md-mermaid") || pre.parentElement;
+      if (box) showMermaidFallback(box, pre.textContent, new Error("mermaid library not loaded"));
+    });
+    return;
+  }
+  for (const pre of nodes) {
+    const source = pre.textContent;
+    const box = pre.closest(".md-mermaid") || pre.parentElement;
+    const id = `mmd-${Date.now()}-${++mermaidSeq}`;
+    try {
+      const out = await mermaid.render(id, source);
+      if (!pre.isConnected) continue;
+      const svg = typeof out === "string" ? out : (out && out.svg);
+      if (!svg) throw new Error("empty mermaid output");
+      if (box && box.isConnected) {
+        box.innerHTML = svg;
+        box.dataset.processed = "1";
+      } else if (pre.isConnected) {
+        pre.outerHTML = svg;
+      }
+    } catch (err) {
+      const stray = document.getElementById(id);
+      if (stray) stray.remove();
+      const strayD = document.getElementById("d" + id);
+      if (strayD) strayD.remove();
+      if (box) showMermaidFallback(box, source, err);
+      else {
+        pre.dataset.processed = "error";
+        pre.title = (err && err.message) || "mermaid error";
+      }
+    }
+  }
+}
+function queueMermaidRun(root) {
+  clearTimeout(mermaidRunTimer);
+  mermaidRunTimer = setTimeout(() => {
+    runMermaidIn(root).catch(err => console.error("mermaid run failed", err));
+  }, 0);
+}
 load();
 </script>
 </body>