kanbango 2.1.0 → 2.5.0

package/bin/kanban.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 const kanban = require('../kanban.js');
+const plan = require('../plan.js');
 const http = require('http');
 const fs = require('fs');
 const path = require('path');
@@ -9,7 +10,7 @@ const BACKLOG = path.join(process.cwd(), 'backlog');
 const COLS = kanban.COLS;
 
 function shortId(taskId) {
-  const match = taskId.match(/^(PI-\d+[\w.-]*|BUG-\d+|CHORE-\d+)/);
+  const match = taskId.match(/^(?:[A-Z]+-)?(\d+)/);
   return match ? match[1] : taskId;
 }
 
@@ -222,21 +223,6 @@ async function cliAdd(title, column, epicGroup) {
   }
 }
 
-async function cliToggle(taskId, idx) {
-  const success = await kanban.doToggle(taskId, idx);
-  if (!success) {
-    console.error(`✗ Nie znaleziono: ${taskId} subtask ${idx}`);
-    process.exit(1);
-  }
-
-  const task = await kanban.getTask(taskId);
-  if (idx < task.subtasks.length) {
-    const subtask = task.subtasks[idx];
-    const mark = subtask.done ? '✓' : '○';
-    console.log(`  [${idx}] ${mark} ${subtask.text}`);
-  }
-}
-
 async function serveWeb(port) {
   const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf-8');
 
@@ -262,7 +248,10 @@ async function serveWeb(port) {
         const task = await kanban.doCreate(body.title || '', body.column || 'planned', body.epic_group || '—', {
           description: body.description,
           specs: body.specs,
+          in_scope: body.in_scope,
+          out_of_scope: body.out_of_scope,
           acceptance_criteria: body.acceptance_criteria,
+          test_cases: body.test_cases,
           subtasks: body.subtasks,
           notes: body.notes
         });
@@ -312,10 +301,12 @@ async function serveWeb(port) {
           const patch = body.patch ? { ...body.patch } : {};
 
           if (body.title !== undefined) patch.title = body.title;
-          if (body.tasks !== undefined) patch.subtasks = body.tasks;
           if (body.description !== undefined) patch.description = body.description;
           if (body.specs !== undefined) patch.specs = body.specs;
+          if (body.in_scope !== undefined) patch.in_scope = body.in_scope;
+          if (body.out_of_scope !== undefined) patch.out_of_scope = body.out_of_scope;
           if (body.acceptance_criteria !== undefined) patch.acceptance_criteria = body.acceptance_criteria;
+          if (body.test_cases !== undefined) patch.test_cases = body.test_cases;
           if (body.subtasks !== undefined) patch.subtasks = body.subtasks;
           if (body.notes !== undefined) patch.notes = body.notes;
           if (body.epic_group !== undefined) patch.epic_group = body.epic_group;
@@ -332,11 +323,66 @@ async function serveWeb(port) {
     }
   });
 
-  server.listen(port, 'localhost', () => {
-    console.log(`\x1b[1;32m→ Kanban GUI: http://localhost:${port}\x1b[0m`);
-    console.log(`  Backlog:   ${BACKLOG}`);
-    console.log('  Ctrl+C żeby zamknąć');
+  const MAX_ATTEMPTS = 10;
+
+  function listenOnce(server, port) {
+    return new Promise((resolve, reject) => {
+      function onError(err) {
+        server.removeListener('listening', onListening);
+        reject(err);
+      }
+      function onListening() {
+        server.removeListener('error', onError);
+        resolve();
+      }
+      server.once('error', onError);
+      server.once('listening', onListening);
+      server.listen(port, 'localhost');
+    });
+  }
+
+  for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
+    try {
+      await listenOnce(server, port + attempt);
+      break;
+    } catch (err) {
+      if (err.code !== 'EADDRINUSE') throw err;
+      console.log(`Port ${port + attempt} zajęty, próbuję ${port + attempt + 1}…`);
+    }
+  }
+
+  if (!server.listening) {
+    console.log(`Porty ${port}–${port + MAX_ATTEMPTS - 1} zajęte, próbuję losowy port…`);
+    await listenOnce(server, 0);
+  }
+
+  const actualPort = server.address().port;
+  const portInfo = await kanban.writeGuiPortFile({ port: actualPort, pid: process.pid });
+
+  async function cleanupGuiPortFile() {
+    try {
+      await kanban.clearGuiPortFile({ pid: process.pid });
+    } catch {
+      // best-effort cleanup
+    }
+  }
+
+  server.on('close', () => {
+    cleanupGuiPortFile();
   });
+
+  process.once('SIGINT', async () => {
+    await cleanupGuiPortFile();
+    server.close(() => process.exit(0));
+  });
+  process.once('SIGTERM', async () => {
+    await cleanupGuiPortFile();
+    server.close(() => process.exit(0));
+  });
+
+  console.log(`\x1b[1;32m→ Kanban GUI: ${portInfo.url}\x1b[0m`);
+  console.log(`  Backlog:   ${BACKLOG}`);
+  console.log('  Ctrl+C żeby zamknąć');
 }
 
 function readBody(req) {
@@ -379,13 +425,42 @@ async function cliMigrate(dryRun) {
   }
 }
 
+function parseJsonPayload(value) {
+  try {
+    return JSON.parse(value || '{}');
+  } catch (error) {
+    throw kanban.createKanbanError('INVALID_JSON', 'Payload is not valid JSON',
+      'Pass a JSON object after --json', { reason: error.message }, false, 400);
+  }
+}
+
+async function cliPlan(action, payload) {
+  try {
+    const handlers = {
+      create: plan.create,
+      advance: plan.advance,
+      evidence: plan.evidence,
+      done: plan.done,
+      status: (input) => plan.status(input.task_id)
+    };
+    if (!handlers[action]) throw kanban.createKanbanError('INVALID_PLAN_ACTION', `Unknown plan action: ${action}`,
+      'Use create, advance, evidence, done, or status', { action }, false, 400);
+    console.log(JSON.stringify(await handlers[action](payload)));
+  } catch (error) {
+    console.log(JSON.stringify({ ok: false, task_id: payload.task_id || null, subtasks: [], error: {
+      code: error.code || 'INTERNAL_ERROR', message: error.message, hint: error.hint || '', details: error.details || {}
+    } }));
+    process.exitCode = 1;
+  }
+}
+
 async function main() {
   const args = process.argv.slice(2);
   const cmd = args[0];
 
-  if (!cmd || cmd === 'serve') {
-    const port = parseInt(args[1] || '5500', 10);
-    await serveWeb(port);
+if (!cmd || cmd === 'serve') {
+  const port = kanban.resolvePreferredGuiPort(args[1]);
+  await serveWeb(port);
   } else if (cmd === 'init') {
     await cliInit();
   } else if (cmd === 'mcp-init') {
@@ -448,8 +523,8 @@ async function main() {
     }
 
     await cliAdd(args[1], column, epicGroup);
-  } else if (cmd === 'toggle' && args[1] && args[2]) {
-    await cliToggle(args[1], parseInt(args[2], 10));
+  } else if (cmd === 'plan' && args[1] && args[2] === '--json') {
+    await cliPlan(args[1], parseJsonPayload(args[3]));
   } else {
     console.error('Unknown command:', cmd);
     process.exit(1);

package/index.html

@@ -71,6 +71,15 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   flex-shrink: 0;
 }
 .new-epic-strip.open { display: flex; }
+.ne-field { display: flex; flex-direction: column; gap: 3px; }
+.ne-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--muted);
+}
+.ne-buttons { display: flex; gap: 8px; align-items: flex-end; }
 .ne-input {
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -378,6 +387,20 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   line-height: 1.45;
   color: var(--text);
 }
+.detail-section.out-of-scope {
+  border-left: 3px solid #e8b4b4;
+  padding-left: 8px;
+}
+.detail-section.out-of-scope .detail-label {
+  color: #a86a6a;
+}
+.detail-section.out-of-scope .detail-list {
+  color: #7a5a5a;
+}
+.edit-block.out-of-scope {
+  border-color: #e8c4c4;
+  background: #fffbfb;
+}
 .edit-meta {
   display: flex;
   flex-direction: column;
@@ -396,6 +419,13 @@ header h1 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
   flex-direction: column;
   gap: 6px;
 }
+.lane-add-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--muted);
+}
 .lane-add-title {
   width: 100%;
   border: 1px solid var(--planned);
@@ -457,20 +487,31 @@ 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-new" onclick="toggleNewForm()">+ Nowy task</button>
+  <button class="btn-new" id="btn-new" onclick="toggleNewForm()">+ New task</button>
 </header>
 
 <div class="new-epic-strip" id="new-strip">
-  <input class="ne-input ne-title" id="ne-title" placeholder="Nazwa taska…" autocomplete="off">
-  <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>
-  </select>
-  <input class="ne-input ne-group" id="ne-group" placeholder="Epik / Faza (opcjonalnie)…" autocomplete="off">
-  <button class="btn-sm btn-confirm" onclick="submitNew()">Dodaj</button>
-  <button class="btn-sm btn-cancel"  onclick="toggleNewForm()">Anuluj</button>
+  <div class="ne-field">
+    <div class="ne-label">Title</div>
+    <input class="ne-input ne-title" id="ne-title" placeholder="Task name…" autocomplete="off">
+  </div>
+  <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>
+    </select>
+  </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">
+  </div>
+  <div class="ne-buttons">
+    <button class="btn-sm btn-confirm" onclick="submitNew()">Add</button>
+    <button class="btn-sm btn-cancel"  onclick="toggleNewForm()">Cancel</button>
+  </div>
 </div>
 
 <div id="board-wrap">
@@ -511,7 +552,7 @@ function render() {
   // Header stats
   const total = allEpics.length;
   const done  = allEpics.filter(e => e.column === "done").length;
-  document.getElementById("hstats").textContent = `${done}/${total} ukończone`;
+  document.getElementById("hstats").textContent = `${done}/${total} done`;
 
   // Col headers
   const hdr = document.getElementById("col-headers");
@@ -551,15 +592,15 @@ function renderSwimlane({ name, epics }) {
 
   // Header
   const hdr = el("div", `sl-header${isCollapsed ? " collapsed" : ""}`);
-  const totalTasks = epics.reduce((s, e) => s + e.tasks.length, 0);
-  const doneTasks  = epics.reduce((s, e) => s + e.tasks.filter(t => t.done).length, 0);
+  const totalTasks = epics.reduce((s, e) => s + e.subtasks.length, 0);
+  const doneTasks  = epics.reduce((s, e) => s + e.subtasks.filter(t => t.done).length, 0);
   const pct = totalTasks > 0 ? Math.round(doneTasks / totalTasks * 100) : null;
 
   hdr.innerHTML = `
     <span class="sl-arrow">▼</span>
-    <span class="sl-name">${escHtml(name === "—" ? "Pozostałe (bez epiku)" : name)}</span>
+    <span class="sl-name">${escHtml(name === "—" ? "Uncategorized (no epic)" : name)}</span>
     <span class="sl-cnt">${epics.length}</span>
-    ${pct !== null ? `<span class="sl-progress" style="margin-left:auto">${pct}% tasków</span>` : ""}
+    ${pct !== null ? `<span class="sl-progress" style="margin-left:auto">${pct}% tasks done</span>` : ""}
   `;
   hdr.onclick = () => {
     if (collapsed.has(name)) collapsed.delete(name);
@@ -577,7 +618,7 @@ function renderSwimlane({ name, epics }) {
     if (col.id !== "done") {
       const addBtn = document.createElement("button");
       addBtn.className = "lane-add";
-      addBtn.textContent = "+ Dodaj tutaj";
+      addBtn.textContent = "+ Add here";
       addBtn.onclick = e => { e.stopPropagation(); showLaneAdd(lane, col.id, name, addBtn); };
       lane.appendChild(addBtn);
     }
@@ -613,8 +654,8 @@ function renderCard(epic, colId) {
   const card = el("div", `card col-${colId}${isExpanded ? " open" : ""}${isEditing ? " editing" : ""}`);
   card.dataset.id = epic.id;
 
-  const totalT = epic.tasks.length;
-  const doneT  = epic.tasks.filter(t => t.done).length;
+  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*/, "");
@@ -646,7 +687,7 @@ function renderCard(epic, colId) {
       // 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} subtasków`;
+      badge.textContent = `${totalT} subtasks`;
       card.appendChild(badge);
     }
 
@@ -673,57 +714,57 @@ function renderCard(epic, colId) {
       actions.appendChild(rb);
     }
 
-    // Expand subtasks button
-    if (totalT > 0) {
-      const expBtn = document.createElement("button");
-      expBtn.className = "cbtn";
-      expBtn.textContent = isExpanded ? "▲" : "▼ Subtaski";
-      expBtn.onclick = e => { e.stopPropagation(); toggleExpand(epic.id); };
-      actions.appendChild(expBtn);
-    }
+    // 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 = "Edytuj";
+    editBtn.title = "Edit";
     editBtn.onclick = e => { e.stopPropagation(); startEdit(epic.id); };
     actions.appendChild(editBtn);
 
     card.appendChild(actions);
 
-    // Subtask list (expanded, view mode)
-    if (isExpanded && totalT > 0) {
-      const lbl = el("div", "subtask-label");
-      lbl.textContent = "Subtaski";
-      card.appendChild(lbl);
-
+    // Details + subtasks (expanded, view mode)
+    if (isExpanded) {
       appendDetailSections(card, epic);
 
-      const list = el("div", "tasks-list");
-      epic.tasks.forEach((task, idx) => {
-        const row = el("div", `task-row${task.done ? " done" : ""}`);
-        const cbId = `v-${epic.id}-${idx}`;
-        row.innerHTML = `
-          <input type="checkbox" id="${cbId}" ${task.done ? "checked" : ""}>
-          <div class="task-copy">
-            <label for="${cbId}">${escHtml(task.text)}</label>
-            ${task.description ? `<div class="task-desc">${escHtml(task.description)}</div>` : ""}
-          </div>
-        `;
-        row.querySelector("input").onchange = async function() {
-          this.disabled = true;
-          await fetch(`/api/epics/${enc(epic.id)}/tasks/${idx}`, { method: "PATCH" });
-          await load();
-        };
-        list.appendChild(row);
-      });
-      card.appendChild(list);
+      if (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;
-      if (totalT > 0) toggleExpand(epic.id);
+      toggleExpand(epic.id);
     };
   }
 
@@ -736,9 +777,12 @@ function renderEditMode(card, epic, colId, shortId) {
     title: displayTitle,
     description: epic.description || "",
     specs: epic.specs || "",
+    in_scope: (epic.in_scope || []).join("\n"),
+    out_of_scope: (epic.out_of_scope || []).join("\n"),
     acceptance_criteria: (epic.acceptance_criteria || []).join("\n"),
+    test_cases: (epic.test_cases || []).join("\n"),
     notes: epic.notes || "",
-    tasks: epic.tasks.map(t => ({ ...t }))
+    tasks: epic.subtasks.map(t => ({ ...t }))
   };
   dirtyEdits[epic.id] = dirty;
 
@@ -756,28 +800,40 @@ function renderEditMode(card, epic, colId, shortId) {
   card.appendChild(titleInput);
 
   const meta = el("div", "edit-meta");
-  meta.appendChild(renderEditBlock("Opis", dirty.description, value => {
+  meta.appendChild(renderEditBlock("Description", dirty.description, value => {
     dirty.description = value;
     dirtyEdits[epic.id] = dirty;
-  }, "Kontekst i plan implementacji..."));
+  }, "Context and implementation plan..."));
   meta.appendChild(renderEditBlock("Specs", dirty.specs, value => {
     dirty.specs = value;
     dirtyEdits[epic.id] = dirty;
-  }, "API, ograniczenia, edge case'y..."));
+  }, "APIs, constraints, edge cases..."));
+  meta.appendChild(renderEditBlock("In Scope", dirty.in_scope, value => {
+    dirty.in_scope = value;
+    dirtyEdits[epic.id] = dirty;
+  }, "What this task covers (one item per line)"));
+  meta.appendChild(renderEditBlock("Out of Scope", dirty.out_of_scope, value => {
+    dirty.out_of_scope = value;
+    dirtyEdits[epic.id] = dirty;
+  }, "What is explicitly not included (one item per line)", "out-of-scope"));
   meta.appendChild(renderEditBlock("Acceptance Criteria", dirty.acceptance_criteria, value => {
     dirty.acceptance_criteria = value;
     dirtyEdits[epic.id] = dirty;
-  }, "Jeden warunek na linie"));
+  }, "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;
-  }, "Opcjonalne notatki"));
+  }, "Optional notes"));
   card.appendChild(meta);
 
   // Subtasks section
   const editTasks = el("div", "edit-tasks");
   const subtaskLbl = el("div", "subtask-label");
-  subtaskLbl.textContent = "Subtaski";
+  subtaskLbl.textContent = "Subtasks";
   editTasks.appendChild(subtaskLbl);
 
   const taskRows = el("div");
@@ -808,14 +864,14 @@ function renderEditMode(card, epic, colId, shortId) {
 
       const desc = document.createElement("textarea");
       desc.className = "edit-task-desc";
-      desc.placeholder = "Opis subtaska...";
+      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 = "Usuń subtask";
+      delBtn.title = "Remove subtask";
       delBtn.onclick = () => { dirty.tasks.splice(idx, 1); dirtyEdits[epic.id] = dirty; refreshRows(); };
 
       fields.appendChild(inp);
@@ -830,7 +886,7 @@ function renderEditMode(card, epic, colId, shortId) {
   // Add subtask input
   const addSubtaskInput = document.createElement("input");
   addSubtaskInput.className = "add-task-inp";
-  addSubtaskInput.placeholder = "+ Nowy subtask… (Enter)";
+  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: "" });
@@ -846,12 +902,12 @@ function renderEditMode(card, epic, colId, shortId) {
   const footer = el("div", "edit-footer");
   const saveBtn = document.createElement("button");
   saveBtn.className = "btn-sm btn-confirm";
-  saveBtn.textContent = "✓ Zapisz";
+  saveBtn.textContent = "✓ Save";
   saveBtn.onclick = async e => { e.stopPropagation(); await saveEdit(epic.id); };
 
-  const cancelBtn = document.createElement("button");
+const cancelBtn = document.createElement("button");
   cancelBtn.className = "btn-sm btn-cancel";
-  cancelBtn.textContent = "Anuluj";
+  cancelBtn.textContent = "Cancel";
   cancelBtn.onclick = e => {
     e.stopPropagation(); delete dirtyEdits[epic.id]; editingId = null; render();
   };
@@ -881,9 +937,12 @@ async function saveEdit(epicId) {
     if (dirty.title !== origTitle) body.title = dirty.title;
     body.description = dirty.description;
     body.specs = dirty.specs;
+    body.in_scope = splitLines(dirty.in_scope);
+    body.out_of_scope = splitLines(dirty.out_of_scope);
     body.acceptance_criteria = splitLines(dirty.acceptance_criteria);
+    body.test_cases = splitLines(dirty.test_cases);
     body.notes = dirty.notes;
-    body.tasks = dirty.tasks.filter(t => t.text.trim()).map((task, idx) => ({
+    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),
@@ -897,8 +956,8 @@ async function saveEdit(epicId) {
       body: JSON.stringify(body),
     });
     if (!res.ok) throw new Error();
-    toast("Zapisano ✓");
-  } catch { toast("Błąd zapisu!", true); }
+    toast("Saved ✓");
+  } catch { toast("Save error!", true); }
   delete dirtyEdits[epicId];
   editingId = null;
   await load();
@@ -917,22 +976,31 @@ function showLaneAdd(lane, colId, groupName, addBtn) {
   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);
+
   const inp = document.createElement("input");
   inp.className = "lane-add-title";
-  inp.placeholder = "Nazwa nowego taska…";
+  inp.placeholder = "New task name…";
   inp.autocomplete = "off";
 
+  const descLabel = el("div", "lane-add-label");
+  descLabel.textContent = "Description";
+  wrap.appendChild(descLabel);
+
   const description = document.createElement("textarea");
   description.className = "lane-add-textarea";
-  description.placeholder = "Opis taska (opcjonalnie)...";
+  description.placeholder = "Task description (optional)...";
 
   const actions = el("div", "lane-add-actions");
   const confirmBtn = document.createElement("button");
   confirmBtn.className = "btn-sm btn-confirm";
-  confirmBtn.textContent = "Dodaj";
+  confirmBtn.textContent = "Add";
   const cancelBtn = document.createElement("button");
   cancelBtn.className = "btn-sm btn-cancel";
-  cancelBtn.textContent = "Anuluj";
+  cancelBtn.textContent = "Cancel";
 
   const doAdd = async () => {
     const title = inp.value.trim();
@@ -950,11 +1018,11 @@ function showLaneAdd(lane, colId, groupName, addBtn) {
       }),
     });
     if (res.ok) {
-      toast("Dodano ✓");
+      toast("Added ✓");
       wrap.remove();
       await load();
     } else {
-      toast("Błąd!", true);
+      toast("Error!", true);
       inp.disabled = false;
       description.disabled = false;
       inp.focus();
@@ -996,13 +1064,13 @@ async function submitNew() {
     body: JSON.stringify({ title, column: col, epic_group: group || "—" }),
   });
   if (res.ok) {
-    toast("Dodano task ✓");
+    toast("Task added ✓");
     document.getElementById("ne-title").value = "";
     document.getElementById("ne-group").value = "";
     toggleNewForm();
     await load();
   } else {
-    toast("Błąd!", true);
+    toast("Error!", true);
   }
 }
 
@@ -1024,14 +1092,23 @@ function splitLines(value) {
 }
 function appendDetailSections(card, epic) {
   if (epic.description) {
-    card.appendChild(renderDetailSection("Opis", epic.description));
+    card.appendChild(renderDetailSection("Description", epic.description));
   }
   if (epic.specs) {
     card.appendChild(renderDetailSection("Specs", epic.specs));
   }
+  if (epic.in_scope && epic.in_scope.length > 0) {
+    card.appendChild(renderDetailListSection("In Scope", epic.in_scope));
+  }
+  if (epic.out_of_scope && epic.out_of_scope.length > 0) {
+    card.appendChild(renderDetailListSection("Out of Scope", epic.out_of_scope, "out-of-scope"));
+  }
   if (epic.acceptance_criteria && epic.acceptance_criteria.length > 0) {
     card.appendChild(renderDetailListSection("Acceptance Criteria", epic.acceptance_criteria));
   }
+  if (epic.test_cases && epic.test_cases.length > 0) {
+    card.appendChild(renderDetailListSection("Test Cases", epic.test_cases));
+  }
   if (epic.notes) {
     card.appendChild(renderDetailSection("Notes", epic.notes));
   }
@@ -1046,8 +1123,8 @@ function renderDetailSection(label, text) {
   wrap.appendChild(textEl);
   return wrap;
 }
-function renderDetailListSection(label, items) {
-  const wrap = el("div", "detail-section");
+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");
@@ -1060,12 +1137,12 @@ function renderDetailListSection(label, items) {
   wrap.appendChild(list);
   return wrap;
 }
-function renderEditBlock(label, value, onInput, placeholder) {
-  const wrap = el("div");
+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 = "edit-block";
+  textarea.className = extraClass ? `edit-block ${extraClass}` : "edit-block";
   textarea.value = value;
   textarea.placeholder = placeholder;
   textarea.oninput = () => onInput(textarea.value);