kanbango 3.1.0 → 3.2.0

package/index.html

@@ -157,16 +157,28 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 12px;
+  padding: 8px 12px;
   background: #f8fafc;
   border-bottom: 1px solid var(--border);
-  cursor: pointer;
   user-select: none;
 }
-.sl-header:hover { background: #f1f5f9; }
-.sl-arrow { font-size: 10px; color: var(--muted); transition: transform 0.15s; }
-.sl-header.collapsed .sl-arrow { transform: rotate(-90deg); }
-.sl-name { font-size: 12px; font-weight: 600; color: var(--text); }
+.sl-header-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.sl-name { font-size: 13px; font-weight: 700; color: var(--text); }
+.sl-id {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--muted);
+  background: #e2e8f0;
+  border-radius: 4px;
+  padding: 1px 6px;
+  letter-spacing: 0.3px;
+}
 .sl-cnt {
   font-size: 11px;
   color: var(--muted);
@@ -175,10 +187,232 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   padding: 1px 6px;
   font-weight: 600;
 }
+.sl-status {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  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;
+}
+.sl-toggles {
+  display: flex;
+  align-items: center;
+  gap: 4px;
   margin-left: auto;
+  flex-shrink: 0;
+}
+.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;
+  align-items: center;
+  gap: 4px;
+}
+.sl-toggle:hover { background: #f1f5f9; color: var(--text); }
+.sl-toggle.on {
+  background: #e0e7ff;
+  border-color: #c7d2fe;
+  color: #3730a3;
+}
+.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;
+  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;
+}
+.sl-epic-hero {
+  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;
+}
+.sl-epic-rollup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-content: flex-start;
+}
+.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;
+}
+.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 {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 10px;
+}
+@media (max-width: 900px) {
+  .sl-epic-body { grid-template-columns: 1fr; }
+}
+.sl-epic-card {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 10px 12px;
+  min-width: 0;
+}
+.sl-epic-card.scope-pair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 14px;
+}
+.sl-epic-label {
+  font-size: 10px;
+  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;
+  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;
+}
+.sl-epic-edit-grid .span2 { grid-column: 1 / -1; }
+.sl-epic-edit-grid label {
+  display: block;
+  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 ── */
@@ -487,9 +721,30 @@ 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" id="btn-new" onclick="toggleNewForm()">+ New task</button>
 </header>
 
+<div class="new-epic-strip" id="new-epic-strip">
+  <div class="ne-field">
+    <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-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-label">Goals</div>
+    <input class="ne-input" id="nx-goals" placeholder="Outcome…" autocomplete="off" style="width:100%">
+  </div>
+  <div class="ne-buttons">
+    <button class="btn-sm btn-confirm" onclick="submitNewEpic()">Add epic</button>
+    <button class="btn-sm btn-cancel" onclick="toggleNewEpicForm()">Cancel</button>
+  </div>
+</div>
+
 <div class="new-epic-strip" id="new-strip">
   <div class="ne-field">
     <div class="ne-label">Title</div>
@@ -506,7 +761,8 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   </div>
   <div class="ne-field">
     <div class="ne-label">Epic</div>
-    <input class="ne-input ne-group" id="ne-group" placeholder="Epic group (optional)…" autocomplete="off">
+    <input class="ne-input ne-group" id="ne-group" list="epic-datalist" placeholder="E001 or title…" autocomplete="off">
+    <datalist id="epic-datalist"></datalist>
   </div>
   <div class="ne-buttons">
     <button class="btn-sm btn-confirm" onclick="submitNew()">Add</button>
@@ -532,23 +788,70 @@ const COL_DEFS = [
 let allTasks   = [];
 let allEpicEntities = [];
 let colCounts  = {};
-let collapsed  = new Set();
+// 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
+let showArchived = false;
 
 // ── Load & render ─────────────────────────────────────────────────────────────
 
 async function load() {
+  const q = showArchived ? "?include_archived=true" : "";
   const [boardRes, epicsRes] = await Promise.all([
-    fetch("/api/board"),
-    fetch("/api/epics")
+    fetch("/api/board" + q),
+    fetch("/api/epics" + q)
   ]);
   allTasks = await boardRes.json();
   allEpicEntities = epicsRes.ok ? await epicsRes.json() : [];
+  refreshEpicDatalist();
   render();
 }
 
+async function archiveEpic(epicId, archived) {
+  const action = archived ? "archive" : "unarchive";
+  await fetch(`/api/epic-entities/${enc(epicId)}/${action}`, { method: "POST" });
+  if (editingEpicId === epicId) editingEpicId = null;
+  await load();
+}
+
+async function deleteEpicEntity(epicId, title) {
+  if (!confirm(`Delete epic ${epicId} "${title}" and ALL its tasks? This cannot be undone.`)) return;
+  await fetch(`/api/epic-entities/${enc(epicId)}`, { method: "DELETE" });
+  if (editingEpicId === epicId) editingEpicId = null;
+  await load();
+}
+
+async function deleteTaskCard(taskId, title) {
+  if (!confirm(`Delete task ${taskId}: ${title}?`)) return;
+  await fetch(`/api/tasks/${enc(taskId)}`, { method: "DELETE" });
+  expanded.delete(taskId);
+  editingId = null;
+  await load();
+}
+
+function toggleShowArchived() {
+  showArchived = !showArchived;
+  const btn = document.getElementById("btn-show-archived");
+  if (btn) {
+    btn.textContent = showArchived ? "Hide archived" : "Show archived";
+    btn.style.background = showArchived ? "#6366f1" : "#94a3b8";
+  }
+  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("");
+}
+
 function render() {
   colCounts = {};
   COL_DEFS.forEach(c => (colCounts[c.id] = 0));
@@ -557,7 +860,8 @@ function render() {
   // Header stats
   const total = allTasks.length;
   const done  = allTasks.filter(e => e.column === "done").length;
-  document.getElementById("hstats").textContent = `${done}/${total} done`;
+  const epicN = allEpicEntities.length;
+  document.getElementById("hstats").textContent = `${done}/${total} done · ${epicN} epics`;
 
   // Col headers
   const hdr = document.getElementById("col-headers");
@@ -582,10 +886,15 @@ function groupTasks(tasks) {
     if (!map.has(key)) map.set(key, []);
     map.get(key).push(t);
   });
+  // Include epics that have no tasks yet
+  allEpicEntities.forEach(e => {
+    if (!map.has(e.id)) map.set(e.id, []);
+  });
+
   return [...map.entries()]
     .sort(([a], [b]) => a === "—" ? 1 : b === "—" ? -1 : a.localeCompare(b, "pl"))
     .map(([key, laneTasks]) => {
-      const entity = allEpicEntities.find(e => e.id === key);
+      const entity = allEpicEntities.find(e => e.id === key) || null;
       const name = key === "—"
         ? "—"
         : (entity ? entity.title : (laneTasks[0] && laneTasks[0].epic_group) || key);
@@ -593,56 +902,304 @@ function groupTasks(tasks) {
         key,
         name,
         epicId: key === "—" ? null : key,
-        status: entity ? entity.status : null,
-        description: entity ? entity.description : "",
-        goals: entity ? entity.goals : "",
+        entity,
         tasks: laneTasks
       };
     });
 }
 
+function epicListHtml(items, emptyLabel, extraClass) {
+  if (!items || items.length === 0) {
+    return `<div class="sl-epic-text empty">${escHtml(emptyLabel)}</div>`;
+  }
+  return `<ul class="sl-epic-list${extraClass ? " " + extraClass : ""}">${
+    items.map(i => `<li>${escHtml(i)}</li>`).join("")
+  }</ul>`;
+}
+
+function renderEpicDetailView(entity) {
+  const shell = el("div", "sl-epic-shell");
+  const panel = el("div", "sl-epic-detail");
+  const p = entity.progress || {};
+
+  const hero = el("div", "sl-epic-hero");
+  const goals = el("div", "sl-epic-goals");
+  goals.innerHTML = `<div class="sl-epic-label">Goals</div>${
+    entity.goals
+      ? `<div class="sl-epic-text">${escHtml(entity.goals)}</div>`
+      : `<div class="sl-epic-text empty">No goals set</div>`
+  }`;
+  hero.appendChild(goals);
+
+  const rollup = el("div", "sl-epic-rollup");
+  rollup.innerHTML = `
+    <span class="sl-chip"><strong>${p.tasks_total || 0}</strong> total</span>
+    <span class="sl-chip active"><strong>${p.tasks_active || 0}</strong> active</span>
+    <span class="sl-chip planned"><strong>${p.tasks_planned || 0}</strong> planned</span>
+    <span class="sl-chip icebox"><strong>${p.tasks_icebox || 0}</strong> icebox</span>
+    <span class="sl-chip done"><strong>${p.tasks_done || 0}</strong> done</span>
+  `;
+  hero.appendChild(rollup);
+  panel.appendChild(hero);
+
+  const body = el("div", "sl-epic-body");
+
+  const descCard = el("div", "sl-epic-card");
+  descCard.innerHTML = `<div class="sl-epic-label">Description</div>${
+    entity.description
+      ? `<div class="sl-epic-text">${escHtml(entity.description)}</div>`
+      : `<div class="sl-epic-text empty">No description yet — click Edit epic to add context for agents.</div>`
+  }`;
+  body.appendChild(descCard);
+
+  const scopeCard = el("div", "sl-epic-card scope-pair");
+  scopeCard.innerHTML = `
+    <div>
+      <div class="sl-epic-label">In scope</div>
+      ${epicListHtml(entity.in_scope, "Nothing listed", "")}
+    </div>
+    <div>
+      <div class="sl-epic-label">Out of scope</div>
+      ${epicListHtml(entity.out_of_scope, "Nothing listed", "out")}
+    </div>
+  `;
+  body.appendChild(scopeCard);
+  panel.appendChild(body);
+
+  if (entity.notes) {
+    const notes = el("div", "sl-epic-card sl-epic-notes");
+    notes.innerHTML = `<div class="sl-epic-label">Notes</div><div class="sl-epic-text">${escHtml(entity.notes)}</div>`;
+    panel.appendChild(notes);
+  }
+
+  shell.appendChild(panel);
+  return shell;
+}
+
+function renderEpicDetailEdit(entity) {
+  const dirty = dirtyEpicEdits[entity.id] || {
+    title: entity.title || "",
+    description: entity.description || "",
+    goals: entity.goals || "",
+    in_scope: (entity.in_scope || []).join("\n"),
+    out_of_scope: (entity.out_of_scope || []).join("\n"),
+    notes: entity.notes || ""
+  };
+  dirtyEpicEdits[entity.id] = dirty;
+
+  const shell = el("div", "sl-epic-shell");
+  shell.onclick = e => e.stopPropagation();
+
+  const grid = el("div", "sl-epic-edit-grid");
+
+  const titleWrap = el("div", "span2");
+  titleWrap.innerHTML = `<label>Title</label>`;
+  const titleInp = document.createElement("input");
+  titleInp.value = dirty.title;
+  titleInp.oninput = () => { dirty.title = titleInp.value; dirtyEpicEdits[entity.id] = dirty; };
+  titleWrap.appendChild(titleInp);
+  grid.appendChild(titleWrap);
+
+  const goalsWrap = el("div", "span2");
+  goalsWrap.innerHTML = `<label>Goals</label>`;
+  const goalsTa = document.createElement("textarea");
+  goalsTa.value = dirty.goals;
+  goalsTa.placeholder = "Outcome one-liner…";
+  goalsTa.oninput = () => { dirty.goals = goalsTa.value; dirtyEpicEdits[entity.id] = dirty; };
+  goalsWrap.appendChild(goalsTa);
+  grid.appendChild(goalsWrap);
+
+  const descWrap = el("div", "span2");
+  descWrap.innerHTML = `<label>Description</label>`;
+  const descTa = document.createElement("textarea");
+  descTa.value = dirty.description;
+  descTa.placeholder = "Context for agents…";
+  descTa.style.minHeight = "72px";
+  descTa.oninput = () => { dirty.description = descTa.value; dirtyEpicEdits[entity.id] = dirty; };
+  descWrap.appendChild(descTa);
+  grid.appendChild(descWrap);
+
+  const inWrap = el("div", "");
+  inWrap.innerHTML = `<label>In scope (one per line)</label>`;
+  const inTa = document.createElement("textarea");
+  inTa.value = dirty.in_scope;
+  inTa.oninput = () => { dirty.in_scope = inTa.value; dirtyEpicEdits[entity.id] = dirty; };
+  inWrap.appendChild(inTa);
+  grid.appendChild(inWrap);
+
+  const outWrap = el("div", "");
+  outWrap.innerHTML = `<label>Out of scope (one per line)</label>`;
+  const outTa = document.createElement("textarea");
+  outTa.value = dirty.out_of_scope;
+  outTa.oninput = () => { dirty.out_of_scope = outTa.value; dirtyEpicEdits[entity.id] = dirty; };
+  outWrap.appendChild(outTa);
+  grid.appendChild(outWrap);
+
+  const notesWrap = el("div", "span2");
+  notesWrap.innerHTML = `<label>Notes</label>`;
+  const notesTa = document.createElement("textarea");
+  notesTa.value = dirty.notes;
+  notesTa.oninput = () => { dirty.notes = notesTa.value; dirtyEpicEdits[entity.id] = dirty; };
+  notesWrap.appendChild(notesTa);
+  grid.appendChild(notesWrap);
+
+  const actions = el("div", "sl-epic-edit-actions");
+  const saveBtn = document.createElement("button");
+  saveBtn.className = "btn-sm btn-confirm";
+  saveBtn.textContent = "✓ Save epic";
+  saveBtn.onclick = async e => { e.stopPropagation(); await saveEpicEdit(entity.id); };
+  const cancelBtn = document.createElement("button");
+  cancelBtn.className = "btn-sm btn-cancel";
+  cancelBtn.textContent = "Cancel";
+  cancelBtn.onclick = e => {
+    e.stopPropagation();
+    delete dirtyEpicEdits[entity.id];
+    editingEpicId = null;
+    render();
+  };
+  actions.appendChild(saveBtn);
+  actions.appendChild(cancelBtn);
+  grid.appendChild(actions);
+
+  shell.appendChild(grid);
+  return shell;
+}
+
+async function saveEpicEdit(epicId) {
+  const dirty = dirtyEpicEdits[epicId];
+  if (!dirty) { editingEpicId = null; render(); return; }
+  const res = await fetch(`/api/epic-entities/${enc(epicId)}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      title: dirty.title.trim(),
+      description: dirty.description,
+      goals: dirty.goals,
+      in_scope: splitLines(dirty.in_scope),
+      out_of_scope: splitLines(dirty.out_of_scope),
+      notes: dirty.notes
+    })
+  });
+  if (res.ok) {
+    delete dirtyEpicEdits[epicId];
+    editingEpicId = null;
+    toast("Epic saved ✓");
+    await load();
+  } else {
+    toast("Epic save failed", true);
+  }
+}
+
 // ── Swimlane ──────────────────────────────────────────────────────────────────
 
-function renderSwimlane({ key, name, epicId, status, description, goals, tasks }) {
-  const isCollapsed = collapsed.has(key);
+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");
 
-  // Header
-  const hdr = el("div", `sl-header${isCollapsed ? " collapsed" : ""}`);
+  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 statusBadge = status ? `<span class="sl-cnt" title="derived status">${escHtml(status)}</span>` : "";
-
-  hdr.innerHTML = `
-    <span class="sl-arrow">▼</span>
-    <span class="sl-name">${escHtml(name === "—" ? "Uncategorized (no epic)" : name)}${epicId ? ` <small style="opacity:.6">${escHtml(epicId)}</small>` : ""}</span>
+  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>
-    ${statusBadge}
-    ${pct !== null ? `<span class="sl-progress" style="margin-left:auto">${pct}% subtasks</span>` : ""}
+    ${pct !== null ? `<span class="sl-progress">${pct}% subtasks</span>` : ""}
   `;
-  hdr.onclick = () => {
-    if (collapsed.has(key)) collapsed.delete(key);
-    else collapsed.add(key);
+  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 (!isCollapsed && (description || goals)) {
-    const meta = el("div", "sl-body");
-    meta.style.cssText = "display:block;padding:6px 12px 0;font-size:12px;opacity:.85";
-    meta.innerHTML = `${goals ? `<div><strong>Goals:</strong> ${escHtml(goals)}</div>` : ""}${description ? `<div>${escHtml(description)}</div>` : ""}`;
-    wrap.appendChild(meta);
+  if (entity && (infoOpen || isEditingEpic)) {
+    wrap.appendChild(
+      isEditingEpic ? renderEpicDetailEdit(entity) : renderEpicDetailView(entity)
+    );
   }
 
-  // Body
-  const body = el("div", `sl-body${isCollapsed ? " hidden" : ""}`);
+  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)));
-    // Add button only in non-done columns
     if (col.id !== "done") {
       const addBtn = document.createElement("button");
       addBtn.className = "lane-add";
@@ -757,6 +1314,16 @@ function renderCard(epic, colId) {
     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)
@@ -1072,9 +1639,11 @@ function showLaneAdd(lane, colId, groupName, addBtn) {
   inp.focus();
 }
 
-// ── New epic form (header) ────────────────────────────────────────────────────
+// ── New task / epic forms (header) ────────────────────────────────────────────
 
 function toggleNewForm() {
+  const epicStrip = document.getElementById("new-epic-strip");
+  if (epicStrip) epicStrip.classList.remove("open");
   const strip = document.getElementById("new-strip");
   strip.classList.toggle("open");
   if (strip.classList.contains("open")) {
@@ -1082,6 +1651,16 @@ function toggleNewForm() {
   }
 }
 
+function toggleNewEpicForm() {
+  const taskStrip = document.getElementById("new-strip");
+  if (taskStrip) taskStrip.classList.remove("open");
+  const strip = document.getElementById("new-epic-strip");
+  strip.classList.toggle("open");
+  if (strip.classList.contains("open")) {
+    document.getElementById("nx-title").focus();
+  }
+}
+
 async function submitNew() {
   const title = document.getElementById("ne-title").value.trim();
   const col   = document.getElementById("ne-col").value;
@@ -1104,11 +1683,38 @@ async function submitNew() {
   }
 }
 
+async function submitNewEpic() {
+  const title = document.getElementById("nx-title").value.trim();
+  const description = document.getElementById("nx-description").value.trim();
+  const goals = document.getElementById("nx-goals").value.trim();
+  if (!title) { document.getElementById("nx-title").focus(); return; }
+
+  const res = await fetch("/api/epics", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ title, description, goals }),
+  });
+  if (res.ok) {
+    toast("Epic added ✓");
+    document.getElementById("nx-title").value = "";
+    document.getElementById("nx-description").value = "";
+    document.getElementById("nx-goals").value = "";
+    toggleNewEpicForm();
+    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();
 });
+document.getElementById("nx-title").addEventListener("keydown", e => {
+  if (e.key === "Enter") submitNewEpic();
+  if (e.key === "Escape") toggleNewEpicForm();
+});
 
 // ── Utils ─────────────────────────────────────────────────────────────────────