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

kanbango 3.4.1 → 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 (8) hide show

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;
-}
-.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;
+.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-task-desc,
-.edit-block,
 .lane-add-textarea {
   width: 100%;
   border: 1px solid #d7deea;
@@ -584,75 +417,106 @@ 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;
 }
-.detail-section {
-  margin-top: 9px;
-  padding-top: 8px;
-  border-top: 1px solid #edf0f5;
+.paper-head {
+  padding: 12px 14px 10px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
-.detail-label {
+.paper-kicker {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.paper-kind {
   font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-weight: 800;
   letter-spacing: 0.6px;
+  text-transform: uppercase;
   color: var(--muted);
-  margin-bottom: 4px;
 }
-.detail-text {
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--text);
-  white-space: pre-wrap;
+.paper-badge {
+  font-size: 10px;
+  font-weight: 700;
+  background: #e2e8f0;
+  color: #475569;
+  border-radius: 4px;
+  padding: 1px 6px;
 }
-.detail-text .md-text {
-  white-space: pre-wrap;
+.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;
 }
-.md-mermaid {
-  margin: 8px 0;
-  padding: 10px;
-  background: #f8fafc;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow-x: auto;
-  text-align: center;
+.paper-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.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;
+.paper-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
-.md-mermaid-error .md-err-label {
+.paper-body::-webkit-scrollbar { width: 5px; }
+.paper-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
+.detail-section {
+  padding-top: 2px;
+}
+.detail-label {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #b91c1c;
-  margin-bottom: 6px;
+  letter-spacing: 0.6px;
+  color: var(--muted);
+  margin-bottom: 5px;
 }
-.md-mermaid-error pre {
-  margin: 0;
-  font-size: 11px;
-  line-height: 1.4;
+.detail-text {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
-.sl-epic-text .md-mermaid { margin: 6px 0 0; }
+.detail-text .md-text { white-space: pre-wrap; }
+.detail-text.empty { color: #94a3b8; font-style: italic; }
 .detail-list {
   margin: 0;
   padding-left: 18px;
@@ -664,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;
+}
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.detail-section.out-of-scope .detail-list {
-  color: #7a5a5a;
+.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-block.out-of-scope {
-  border-color: #e8c4c4;
-  background: #fffbfb;
+.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;
 }
-.edit-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid #f1f5f9;
+.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-addinp {
+.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;
@@ -752,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>
@@ -760,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>
@@ -770,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>
@@ -792,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">
@@ -809,34 +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 ─────────────────────────────────────────────────────────────
@@ -850,203 +831,672 @@ async function load() {
   allTasks = await boardRes.json();
   allEpicEntities = epicsRes.ok ? await epicsRes.json() : [];
   refreshEpicDatalist();
+  // 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;
+    }
+  }
   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();
+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("");
 }
-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();
+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);
 }
-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 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 === "—"
+  }));
+  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 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";
+function makeRailItem({ key, title, idLabel, count, status, on, entity }) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  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;
+}
+// ── NOW + columns ─────────────────────────────────────────────────────────────
+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")));
   }
-  load();
+  // 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);
 }
-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 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(body, col.id, currentEpicRef(), addBtn);
+      };
+      body.appendChild(addBtn);
+    }
+  });
 }
-function render() {
-  colCounts = {};
-  COL_DEFS.forEach(c => (colCounts[c.id] = 0));
-  allTasks.forEach(e => { if (colCounts[e.column] !== undefined) colCounts[e.column]++; });
+function currentEpicRef() {
+  if (filterKey && filterKey !== "—") return filterKey;
+  return "";
+}
-  // 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);
+function getNeighborCols(colId) {
+  const idx = MOVE_ORDER.indexOf(colId);
+  return {
+    prev: idx > 0 ? MOVE_ORDER[idx - 1] : null,
+    next: idx >= 0 && idx < MOVE_ORDER.length - 1 ? MOVE_ORDER[idx + 1] : null
+  };
+}
+async function moveCard(taskId, targetColId) {
+  await fetch(`/api/epics/${enc(taskId)}/move`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ column: targetColId })
   });
+  await load();
+}
+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 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*/, "");
+  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);
+  }
-  // Swimlanes
-  const sl = document.getElementById("swimlanes");
-  sl.innerHTML = "";
-  groupTasks(allTasks).forEach(g => sl.appendChild(renderSwimlane(g)));
-  queueMermaidRun();
+  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;
 }
-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, []);
+// ── 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;
+  }
+  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));
+    }
+    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);
+  }
-  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
+  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));
+  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);
+  }
-function epicListHtml(items, emptyLabel, extraClass) {
-  if (!items || items.length === 0) {
-    return `<div class="sl-epic-text empty">${escHtml(emptyLabel)}</div>`;
+  // 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);
   }
-  return `<ul class="sl-epic-list${extraClass ? " " + extraClass : ""}">${
-    items.map(i => `<li>${escHtml(i)}</li>`).join("")
-  }</ul>`;
+  // 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 renderEpicDetailView(entity) {
-  const shell = el("div", "sl-epic-shell");
-  const panel = el("div", "sl-epic-detail");
-  const p = entity.progress || {};
+function renderTaskPaperEdit(paper, task) {
+  const displayTitle = String(task.title || "").replace(/^[\w.-]+:\s*/, "");
+  const dirty = dirtyEdits[task.id] || {
+    title: displayTitle,
+    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[task.id] = dirty;
-  const hero = el("div", "sl-epic-hero");
-  const goals = el("div", "sl-epic-goals");
-  goals.appendChild(Object.assign(el("div", "sl-epic-label"), { textContent: "Goals" }));
-  if (entity.goals) {
-    const goalsText = el("div", "sl-epic-text");
-    fillRichText(goalsText, entity.goals);
-    goals.appendChild(goalsText);
-  } else {
-    goals.appendChild(Object.assign(el("div", "sl-epic-text empty"), { textContent: "No goals set" }));
+  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");
+  const titleInput = document.createElement("input");
+  titleInput.className = "edit-title-input";
+  titleInput.value = dirty.title;
+  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((st, idx) => {
+      const row = el("div", "edit-task-row");
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      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 = 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 = 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(del);
+      taskRows.appendChild(row);
+    });
+  };
+  refreshRows();
+  editTasks.appendChild(taskRows);
+  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(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);
+  }
+  const footer = el("div", "edit-footer");
+  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);
+  paper.appendChild(body);
+  setTimeout(() => titleInput.focus(), 0);
+}
+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(taskId)}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) throw new Error();
+    toast("Saved ✓");
+    delete dirtyEdits[taskId];
+    paperEditing = false;
+    await load();
+  } catch {
+    toast("Save error!", true);
   }
-  hero.appendChild(goals);
+}
-  const rollup = el("div", "sl-epic-rollup");
-  rollup.innerHTML = `
+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> active</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>
   `;
-  hero.appendChild(rollup);
-  panel.appendChild(hero);
-  const body = el("div", "sl-epic-body");
-  const descCard = el("div", "sl-epic-card");
-  descCard.appendChild(Object.assign(el("div", "sl-epic-label"), { textContent: "What" }));
-  if (entity.description) {
-    const descText = el("div", "sl-epic-text");
-    fillRichText(descText, entity.description);
-    descCard.appendChild(descText);
-  } else {
-    descCard.appendChild(Object.assign(el("div", "sl-epic-text empty"), {
-      textContent: "No description yet — click Edit epic to add what this initiative does."
-    }));
-  }
-  body.appendChild(descCard);
-  if (entity.rationale) {
-    const rationaleCard = el("div", "sl-epic-card");
-    rationaleCard.appendChild(Object.assign(el("div", "sl-epic-label"), { textContent: "Rationale" }));
-    const rationaleText = el("div", "sl-epic-text");
-    fillRichText(rationaleText, entity.rationale);
-    rationaleCard.appendChild(rationaleText);
-    body.appendChild(rationaleCard);
-  }
-  if (entity.outcome) {
-    const outcomeCard = el("div", "sl-epic-card");
-    outcomeCard.appendChild(Object.assign(el("div", "sl-epic-label"), { textContent: "Outcome" }));
-    const outcomeText = el("div", "sl-epic-text");
-    fillRichText(outcomeText, entity.outcome);
-    outcomeCard.appendChild(outcomeText);
-    body.appendChild(outcomeCard);
+  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);
   }
-  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.appendChild(Object.assign(el("div", "sl-epic-label"), { textContent: "Notes" }));
-    const notesText = el("div", "sl-epic-text");
-    fillRichText(notesText, entity.notes);
-    notes.appendChild(notesText);
-    panel.appendChild(notes);
+  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);
   }
-  shell.appendChild(panel);
-  return shell;
+  paper.appendChild(body);
 }
-function renderEpicDetailEdit(entity) {
+function renderEpicPaperEdit(paper, entity) {
   const dirty = dirtyEpicEdits[entity.id] || {
     title: entity.title || "",
     description: entity.description || "",
@@ -1059,105 +1509,43 @@ function renderEpicDetailEdit(entity) {
   };
   dirtyEpicEdits[entity.id] = dirty;
-  const shell = el("div", "sl-epic-shell");
-  shell.onclick = e => e.stopPropagation();
+  paper.appendChild(paperHead("Epic · edit", [{ text: entity.id, cls: "" }], "Editing", []));
+  const body = el("div", "paper-body");
-  const grid = el("div", "sl-epic-edit-grid");
-  const titleWrap = el("div", "span2");
-  titleWrap.innerHTML = `<label>Title</label>`;
+  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);
-  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>What</label>`;
-  const descTa = document.createElement("textarea");
-  descTa.value = dirty.description;
-  descTa.placeholder = "What this initiative does…";
-  descTa.style.minHeight = "72px";
-  descTa.oninput = () => { dirty.description = descTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  descWrap.appendChild(descTa);
-  grid.appendChild(descWrap);
-  const rationaleWrap = el("div", "span2");
-  rationaleWrap.innerHTML = `<label>Rationale</label>`;
-  const rationaleTa = document.createElement("textarea");
-  rationaleTa.value = dirty.rationale;
-  rationaleTa.placeholder = "Why this approach, not alternatives…";
-  rationaleTa.oninput = () => { dirty.rationale = rationaleTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  rationaleWrap.appendChild(rationaleTa);
-  grid.appendChild(rationaleWrap);
-  const outcomeWrap = el("div", "span2");
-  outcomeWrap.innerHTML = `<label>Outcome</label>`;
-  const outcomeTa = document.createElement("textarea");
-  outcomeTa.value = dirty.outcome;
-  outcomeTa.placeholder = "Intended effect / goal…";
-  outcomeTa.oninput = () => { dirty.outcome = outcomeTa.value; dirtyEpicEdits[entity.id] = dirty; };
-  outcomeWrap.appendChild(outcomeTa);
-  grid.appendChild(outcomeWrap);
-  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();
+  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];
-    editingEpicId = null;
+    paperEditing = false;
     render();
-  };
-  actions.appendChild(saveBtn);
-  actions.appendChild(cancelBtn);
-  grid.appendChild(actions);
-  shell.appendChild(grid);
-  return shell;
+  }));
+  body.appendChild(footer);
+  paper.appendChild(body);
+  setTimeout(() => titleInp.focus(), 0);
 }
 async function saveEpicEdit(epicId) {
   const dirty = dirtyEpicEdits[epicId];
-  if (!dirty) { editingEpicId = null; render(); return; }
+  if (!dirty) { paperEditing = false; render(); return; }
   const res = await fetch(`/api/epic-entities/${enc(epicId)}`, {
     method: "PATCH",
     headers: { "Content-Type": "application/json" },
@@ -1174,7 +1562,7 @@ async function saveEpicEdit(epicId) {
   });
   if (res.ok) {
     delete dirtyEpicEdits[epicId];
-    editingEpicId = null;
+    paperEditing = false;
     toast("Epic saved ✓");
     await load();
   } else {
@@ -1182,516 +1570,62 @@ async function saveEpicEdit(epicId) {
   }
 }
-// ── Swimlane ──────────────────────────────────────────────────────────────────
-function toggleSet(set, key) {
-  if (set.has(key)) set.delete(key);
-  else set.add(key);
-}
-function makeToggleBtn(label, isOn, onClick) {
-  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(); };
-  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");
-  if (entity) {
-    toggles.appendChild(makeToggleBtn("Info", infoOpen, () => {
-      toggleSet(collapsedInfo, key);
-      render();
-    }));
-  }
-  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)));
-    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);
-    }
-    body.appendChild(lane);
-  });
-  wrap.appendChild(body);
-  return wrap;
-}
-// ── Card ──────────────────────────────────────────────────────────────────────
-function getNeighborCols(colId) {
-  const idx = COL_DEFS.findIndex(c => c.id === colId);
-  return {
-    prev: idx > 0                    ? COL_DEFS[idx - 1] : null,
-    next: idx < COL_DEFS.length - 1 ? COL_DEFS[idx + 1] : null,
-  };
-}
+// ── CRUD helpers ──────────────────────────────────────────────────────────────
-async function moveCard(epicId, targetColId) {
-  await fetch(`/api/epics/${enc(epicId)}/move`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ column: targetColId }),
-  });
-  expanded.delete(epicId);
+async function archiveEpic(epicId, archived) {
+  const action = archived ? "archive" : "unarchive";
+  await fetch(`/api/epic-entities/${enc(epicId)}/${action}`, { method: "POST" });
   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;
-  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*/, "");
-  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);
-    }
-    // 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);
-    }
-    // → 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);
-    }
-    // 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);
-      }
-    }
-    card.onclick = e => {
-      if (e.target.tagName === "BUTTON" || e.target.tagName === "INPUT" || e.target.tagName === "LABEL") return;
-      toggleExpand(epic.id);
-    };
+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;
   }
-  return card;
-}
-function renderEditMode(card, epic, colId, shortId) {
-  const displayTitle = epic.title.replace(/^[\w.-]+:\s*/, "");
-  const dirty = dirtyEdits[epic.id] || {
-    title: displayTitle,
-    description: epic.description || "",
-    rationale: epic.rationale || "",
-    outcome: epic.outcome || "",
-    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 }))
-  };
-  dirtyEdits[epic.id] = dirty;
-  const top = el("div", "card-top");
-  const idBadge = el("span", "card-id");
-  idBadge.textContent = shortId;
-  top.appendChild(idBadge);
-  card.appendChild(top);
-  // 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("What", dirty.description, value => {
-    dirty.description = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "What we are doing..."));
-  meta.appendChild(renderEditBlock("Rationale", dirty.rationale, value => {
-    dirty.rationale = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "Why this approach, not alternatives..."));
-  meta.appendChild(renderEditBlock("Outcome", dirty.outcome, value => {
-    dirty.outcome = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "Intended effect / goal..."));
-  meta.appendChild(renderEditBlock("Specs", dirty.specs, value => {
-    dirty.specs = value;
-    dirtyEdits[epic.id] = dirty;
-  }, "APIs, constraints, edge cases (how)..."));
-  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);
-  const taskRows = el("div");
-  const refreshRows = () => {
-    taskRows.innerHTML = "";
-    dirty.tasks.forEach((task, 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; };
-      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();
-        }
-      };
-      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(); };
-      fields.appendChild(inp);
-      fields.appendChild(desc);
-      row.appendChild(cb); row.appendChild(fields); row.appendChild(delBtn);
-      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 = "";
-      refreshRows();
-    }
-  };
-  editTasks.appendChild(addSubtaskInput);
-  card.appendChild(editTasks);
-  // 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(saveBtn); footer.appendChild(cancelBtn);
-  card.appendChild(footer);
-  setTimeout(() => titleInput.focus(), 0);
-}
-// ── Edit helpers ──────────────────────────────────────────────────────────────
-function startEdit(id) {
-  if (editingId && editingId !== id) delete dirtyEdits[editingId];
-  editingId = id;
-  expanded.add(id);
-  render();
+  if (filterKey === epicId) filterKey = null;
+  await load();
 }
-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.rationale = dirty.rationale;
-    body.outcome = dirty.outcome;
-    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 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;
   }
-  try {
-    const res = await fetch(`/api/epics/${enc(epicId)}`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    });
-    if (!res.ok) throw new Error();
-    toast("Saved ✓");
-  } catch { toast("Save error!", true); }
-  delete dirtyEdits[epicId];
-  editingId = null;
   await load();
 }
-function toggleExpand(id) {
-  if (expanded.has(id)) expanded.delete(id);
-  else expanded.add(id);
-  render();
+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();
 }
-// ── Lane "add here" ───────────────────────────────────────────────────────────
+// ── Lane add ──────────────────────────────────────────────────────────────────
-function showLaneAdd(lane, colId, groupName, addBtn) {
-  const existing = lane.querySelector(".lane-addinp");
+function showLaneAdd(container, colId, epicRef, addBtn) {
+  const existing = container.querySelector(".lane-addinp");
   if (existing) { existing.remove(); return; }
   const wrap = el("div", "lane-addinp");
-  const titleLabel = el("div", "lane-add-label");
-  titleLabel.textContent = "Task title";
-  wrap.appendChild(titleLabel);
+  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");
@@ -1706,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 ✓");
@@ -1739,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");
@@ -1751,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();
   }
 }
@@ -1767,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 ✓");
@@ -1796,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 ✓");
@@ -1804,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();
@@ -1830,47 +1780,57 @@ 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("What", epic.description));
-  }
-  if (epic.rationale) {
-    card.appendChild(renderDetailSection("Rationale", epic.rationale));
-  }
-  if (epic.outcome) {
-    card.appendChild(renderDetailSection("Outcome", epic.outcome));
-  }
-  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");
   fillRichText(textEl, text);
-  wrap.appendChild(labelEl);
   wrap.appendChild(textEl);
   return wrap;
 }
+function renderDetailListSection(label, items, extraClass) {
+  const wrap = el("div", extraClass ? `detail-section ${extraClass}` : "detail-section");
+  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(list);
+  return wrap;
+}
+function renderEditBlock(label, value, onInput, placeholder, extraClass) {
+  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.oninput = () => onInput(textarea.value);
+  wrap.appendChild(textarea);
+  return wrap;
+}
+function escHtml(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function enc(s) { return encodeURIComponent(s); }
+let toastTimer;
+function toast(msg, err = false) {
+  const t = document.getElementById("toast");
+  t.textContent = msg;
+  t.style.background = err ? "#dc2626" : "#1e293b";
+  t.classList.add("show");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => t.classList.remove("show"), 2500);
+}
-// ── Mermaid in detail fields (view mode only) ─────────────────────────────────
+// ── Mermaid ───────────────────────────────────────────────────────────────────
 let mermaidReady = false;
 let mermaidRunTimer = null;
@@ -1887,7 +1847,6 @@ 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");
@@ -1922,11 +1881,7 @@ function ensureMermaidInit() {
   if (mermaidReady) return true;
   if (typeof mermaid === "undefined" || !mermaid) return false;
   try {
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: "strict",
-      theme: "neutral"
-    });
+    mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "neutral" });
     mermaidReady = true;
     return true;
   } catch (err) {
@@ -1941,7 +1896,6 @@ async function runMermaidIn(root) {
     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;
@@ -1949,15 +1903,12 @@ async function runMermaidIn(root) {
     });
     return;
   }
-  // Prefer per-node render so one bad diagram never blocks siblings.
   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);
-      // Board re-render may detach this node while await was in flight.
       if (!pre.isConnected) continue;
       const svg = typeof out === "string" ? out : (out && out.svg);
       if (!svg) throw new Error("empty mermaid output");
@@ -1968,7 +1919,6 @@ async function runMermaidIn(root) {
         pre.outerHTML = svg;
       }
     } catch (err) {
-      // Remove orphaned error SVG mermaid may leave in <body>
       const stray = document.getElementById(id);
       if (stray) stray.remove();
       const strayD = document.getElementById("d" + id);
@@ -1988,49 +1938,7 @@ function queueMermaidRun(root) {
     runMermaidIn(root).catch(err => console.error("mermaid run failed", err));
   }, 0);
 }
-function renderDetailListSection(label, items, extraClass) {
-  const wrap = el("div", extraClass ? `detail-section ${extraClass}` : "detail-section");
-  const labelEl = el("div", "detail-label");
-  labelEl.textContent = label;
-  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 textarea = document.createElement("textarea");
-  textarea.className = extraClass ? `edit-block ${extraClass}` : "edit-block";
-  textarea.value = value;
-  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;");
-}
-function enc(s) { return encodeURIComponent(s); }
-let toastTimer;
-function toast(msg, err = false) {
-  const t = document.getElementById("toast");
-  t.textContent = msg;
-  t.style.background = err ? "#dc2626" : "#1e293b";
-  t.classList.add("show");
-  clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => t.classList.remove("show"), 2500);
-}
-// ── Init ──────────────────────────────────────────────────────────────────────
 load();
 </script>
 </body>