@polderlabs/openkan 0.4.2 → 0.4.4

package/dist/kanban/mdx-render.js

@@ -159,6 +159,66 @@ function escapeHtml(text) {
 function normalizeWhitespace(text) {
     return text.replace(/\s+/g, " ").trim();
 }
+// ─── Inline markdown → HTML ─────────────────────────────────────────────────────
+//
+// Transforms a single line of plain text into HTML that handles the most common
+// inline constructs: `code`, **bold**, *italic*, __bold__, _italic_, and
+// [text](url). MDX-style `{expr}` is escaped so it shows up literally without
+// crashing the render — we don't have a real JSX runtime. The final result is
+// fed back through escapeHtml so any literal HTML still survives sanitisation
+// as escaped entities.
+//
+// Order matters:
+//   1. Inline code is matched first so its contents are never re-interpreted.
+//   2. Bold is matched before italic because `**` would otherwise partially
+//      match `*` runs.
+//   3. Links and images are matched last so the link text gets one pass of
+//      bold/italic without infinite recursion.
+//   4. Anything that looks like an MDX expression `{...}` is neutralised to
+//      `{...}` so the braces stay visible but never confuse a
+//      downstream JSX-aware consumer.
+function renderInlineMarkdown(line) {
+    if (!line)
+        return "";
+    // 1. Carve out inline code (and remember the placeholders so we can put the
+    //    code back after the other patterns have run).
+    const codeSlots = [];
+    const withPlaceholders = line.replace(/`([^`\n]+)`/g, (_match, code) => {
+        const idx = codeSlots.length;
+        codeSlots.push(`<code>${escapeHtml(code)}</code>`);
+        return `CODE${idx}`;
+    });
+    // 2. Escape the remaining text so any literal HTML shows up as text.
+    let escaped = escapeHtml(withPlaceholders);
+    // 3. Neutralise MDX-style `{expr}` so the braces survive visually but don't
+    //    get interpreted downstream. Match an opening brace followed by any
+    //    non-empty, non-brace, non-newline body and a closing brace.
+    escaped = escaped.replace(/&#123;([^{}\n]+)&#125;/g, (_match, inner) => `&#123;${inner}&#125;`);
+    // 4. Inline images: ![alt](url) — must come before links so the leading `!`
+    //    isn't accidentally consumed.
+    escaped = escaped.replace(/!\[([^\]\n]*)\]\(([^()\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g, (_match, alt, url) => {
+        if (!/^https?:|^mailto:|^data:image\//i.test(url))
+            return _match;
+        return `<img src="${url}" alt="${escapeHtml(alt)}" />`;
+    });
+    // 5. Links: [text](url) — URL must be a safe scheme.
+    escaped = escaped.replace(/\[([^\]\n]+)\]\(([^()\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g, (_match, text, url) => {
+        if (!/^https?:|^mailto:|^data:image\//i.test(url))
+            return _match;
+        return `<a href="${url}">${text}</a>`;
+    });
+    // 6. Bold (must come before italic): **...** or __...__
+    escaped = escaped.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+    escaped = escaped.replace(/__([^_\n]+)__/g, "<strong>$1</strong>");
+    // 7. Italic: *...* or _..._ — guard against the middle-of-word underscores
+    //    in things like `foo_bar_baz` by requiring the surrounding characters to
+    //    not be word characters.
+    escaped = escaped.replace(/(^|[^*\w])\*([^*\n]+)\*(?=[^*\w]|$)/g, "$1<em>$2</em>");
+    escaped = escaped.replace(/(^|[^\w_])_([^_\n]+)_(?=[^\w_]|$)/g, "$1<em>$2</em>");
+    // 8. Restore code placeholders.
+    escaped = escaped.replace(/CODE(\d+)/g, (_match, idx) => codeSlots[Number(idx)] ?? "");
+    return escaped;
+}
 function blockPreview(blockLines) {
     return normalizeWhitespace(trimLines(blockLines.join(" "))).slice(0, 80);
 }
@@ -220,7 +280,7 @@ function blockToHtml(block, siblingIndex, opts) {
         case "heading": {
             const m = trimmed.match(/^(#{1,6})\s(.*)/);
             const level = m ? m[1].length : 2;
-            inner = `<h${level}>${escapeHtml(m ? m[2] : trimmed.replace(/^#+\s/, ""))}</h${level}>`;
+            inner = `<h${level}>${renderInlineMarkdown(m ? m[2] : trimmed.replace(/^#+\s/, ""))}</h${level}>`;
             break;
         }
         case "code": {
@@ -233,28 +293,28 @@ function blockToHtml(block, siblingIndex, opts) {
         case "list": {
             const items = block.lines.map((l) => {
                 const text = l.replace(/^\s*[-*+]\s/, "").replace(/^\s*\d+\.\s/, "");
-                return `<li>${escapeHtml(text.trim())}</li>`;
+                return `<li>${renderInlineMarkdown(text.trim())}</li>`;
             }).join("");
             inner = trimmed.startsWith("1.") ? `<ol>${items}</ol>` : `<ul>${items}</ul>`;
             break;
         }
         case "quote": {
             const text = block.lines.map((l) => l.replace(/^>\s?/, "")).join(" ");
-            inner = `<blockquote>${escapeHtml(text.trim())}</blockquote>`;
+            inner = `<blockquote>${renderInlineMarkdown(text.trim())}</blockquote>`;
             break;
         }
         case "table": {
             // Simple pipe table: first row = header, second row = separator, rest = body
             const rows = block.lines.map((l) => l.trim()).filter((l) => l.startsWith("|"));
             if (rows.length < 2) {
-                inner = `<p>${escapeHtml(trimmed)}</p>`;
+                inner = `<p>${renderInlineMarkdown(trimmed)}</p>`;
             }
             else {
                 const cells = rows[0].split("|").map((c) => c.trim()).filter((c) => c !== "");
-                const header = `<thead><tr>${cells.map((c) => `<th>${escapeHtml(c)}</th>`).join("")}</tr></thead>`;
+                const header = `<thead><tr>${cells.map((c) => `<th>${renderInlineMarkdown(c)}</th>`).join("")}</tr></thead>`;
                 const bodyRows = rows.slice(2).map((row) => {
                     const cells = row.split("|").map((c) => c.trim()).filter((c) => c !== "");
-                    return `<tr>${cells.map((c) => `<td>${escapeHtml(c)}</td>`).join("")}</tr>`;
+                    return `<tr>${cells.map((c) => `<td>${renderInlineMarkdown(c)}</td>`).join("")}</tr>`;
                 }).join("");
                 inner = `<table>${header}<tbody>${bodyRows}</tbody></table>`;
             }
@@ -262,7 +322,7 @@ function blockToHtml(block, siblingIndex, opts) {
         }
         case "paragraph":
         default: {
-            inner = `<p>${escapeHtml(normalizeWhitespace(trimmed))}</p>`;
+            inner = `<p>${renderInlineMarkdown(normalizeWhitespace(trimmed))}</p>`;
             break;
         }
     }
@@ -286,7 +346,7 @@ export function stripMdxFrontmatter(mdx) {
 // ─── Main render function ──────────────────────────────────────────────────────
 const SANITIZE_ALLOWED_TAGS = new Set([
     "h1", "h2", "h3", "h4", "h5", "h6", "p", "ul", "ol", "li",
-    "code", "pre", "blockquote", "a", "strong", "em", "hr", "br",
+    "code", "pre", "blockquote", "a", "strong", "em", "hr", "br", "img",
     "table", "thead", "tbody", "tr", "th", "td",
     "section", "iframe", "button", "input", "select", "option", "label",
 ]);
@@ -335,10 +395,18 @@ export async function renderMdx(source, opts) {
     });
     let html = htmlParts.join("\n");
     // Sanitize final HTML
+    //
+    // `allowedSchemes` + `allowedSchemesByTag` + `allowedSchemesAppliedToAttributes`
+    // already strip `javascript:` URLs. The renderInlineMarkdown helper also
+    // refuses to emit an `<a href>` for unsafe schemes — so we don't need an
+    // additional `urlFilter` callback (which isn't part of sanitize-html's public
+    // type surface anyway). The scheme list below is the single source of truth.
     const clean = sanitizeHtml(html, {
         allowedTags: Array.from(SANITIZE_ALLOWED_TAGS),
         allowedAttributes: SANITIZE_ALLOWED_ATTRS,
         allowedSchemes: SANITIZE_ALLOWED_SCHEMES,
+        allowedSchemesByTag: { a: ["http", "https", "mailto"], img: ["http", "https", "data"] },
+        allowedSchemesAppliedToAttributes: ["href", "src"],
     });
     return {
         html: clean,

package/dist/web/app.js

@@ -719,7 +719,7 @@
   }
 
   function effectiveState(t) {
-    return t.state ?? t.status ?? "idle";
+    return window.OpenKanStatus?.displayState(t) ?? "pending";
   }
 
   function makeTagChip(tag, opts = {}) {

package/dist/web/contributors-view.js

@@ -198,7 +198,7 @@
       const list = el("div", "contributor-tasks");
       for (const t of tasks) {
         const item = el("div", "contributor-task", { "data-id": t.id });
-        const dot = el("span", `task-status-dot state-${t.state ?? t.status ?? "idle"}`);
+        const dot = el("span", `task-status-dot state-${window.OpenKanStatus?.displayState(t) ?? "pending"}`);
         item.append(dot);
         item.append(el("span", "task-title-text", { text: t.title || "(untitled)" }));
         item.append(el("span", "task-column-text", { text: t.column || "" }));

package/dist/web/docs-view.js

@@ -1,4 +1,7 @@
-// OpenKan Docs — preview-first MDX workspace with an always-available source editor.
+// OpenKan Docs — preview-first MDX workspace with an in-place source editor.
+// The rendered preview is the default surface; an "Edit" button swaps it for a
+// toolbar + textarea so the user can shape MDX without leaving the page, then
+// calls back into the existing /api/docs/* API to persist.
 (() => {
   "use strict";
   const { api } = window.OpenKanAPI;
@@ -56,19 +59,36 @@
       else state.expandedDirs.delete(directory.dataset.docDirectory);
     }));
   }
+  function renderPreviewBody() {
+    if (state.html) return state.html;
+    if (state.editing) return `<section class="docs-preview-empty"><h3>Start a durable note.</h3><p>Markdown previews here as you write. **bold**, *italic*, ` + "`code`" + `, and [links](https://example.com) all render.</p></section>`;
+    return `<section class="docs-preview-empty"><h3>Pick a document, or start a new one.</h3><p>The rendered MDX lives here. Click <strong>Edit</strong> above to open the source panel — the preview keeps pace as you type.</p><button data-doc-action="new">New document</button></section>`;
+  }
+  function editorView() {
+    return `<section class="docs-editor-shell" aria-label="Source editor">${sourceToolbar()}<textarea id="docs-editor-input" spellcheck="true" placeholder="# Start writing…">${esc(state.content)}</textarea><footer class="docs-editor-foot"><span>${state.content.length.toLocaleString()} characters</span><span class="docs-editor-hint">MDX / Markdown · preview updates as you type</span></footer></section>`;
+  }
   function render() {
     if (!state?.root) return;
     const files = flatten(state.entries).filter((entry) => DOC_FILE_PATTERN.test(entry.path));
     const status = state.dirty ? "Unsaved draft" : state.path ? `Saved ${relativeTime(state.mtime)}` : "New draft";
+    const editLabel = state.editing ? "Done editing" : "Edit document";
+    const stageBody = state.editing
+      ? editorView()
+      : `<article class="docs-rendered docs-mdx-preview" tabindex="0" data-doc-preview>${renderPreviewBody()}</article>`;
     state.root.innerHTML = `<section class="docs-shell">
-      <header class="docs-commandbar"><div><span class="workspace-eyebrow">Knowledge workspace</span><h2>Docs that stay readable while you write.</h2><p>MDX renders as the document itself. Open source only when you need to shape it.</p></div><div class="docs-command-actions"><button data-doc-action="new">New document</button><button class="docs-agent-button" data-doc-action="generate">Generate with agent</button></div></header>
-      <div class="docs-workspace docs-workspace--${state.sourceOpen ? "source-open" : "preview-only"}">
-        <aside class="docs-sidebar"><div class="docs-sidebar-head"><div><span>docs/</span><small>${files.length} documents · folders preserved</small></div><button data-doc-action="new" aria-label="New document">+</button></div><div class="docs-sidebar-search"><input type="search" value="${esc(state.docFilter || "")}" placeholder="Filter documents" aria-label="Filter documents" data-doc-filter></div><div class="docs-file-list docs-folder-tree" data-doc-list></div></aside>
-        <main class="docs-stage"><header class="docs-filebar"><div class="docs-file-ident"><span class="docs-file-icon">⌁</span><span><strong>${esc(fileName(state.path))}</strong><small>${esc(state.path || "Choose a path before saving")} · ${status}</small></span></div><div class="docs-file-actions"><button data-doc-action="source" aria-pressed="${state.sourceOpen}">${state.sourceOpen ? "Hide source" : "Edit source"}</button><button data-doc-action="save" ${state.path ? "" : "disabled"}>Save</button><button data-doc-action="more" aria-label="More document actions">•••</button></div></header>
-          <div class="docs-preview-toolbar"><span><i></i> Preview</span><button data-doc-action="focus-preview">Reading view</button><button data-doc-action="help">MDX help</button></div>
-          <article class="docs-rendered docs-mdx-preview" tabindex="0" data-doc-preview>${state.html || `<section class="docs-preview-empty"><h3>Start a durable note.</h3><p>Create a document or choose one from the library. MDX previews here exactly as it will be read.</p><button data-doc-action="new">New document</button></section>`}</article>
+      <div class="docs-workspace docs-workspace--${state.editing ? "editing" : "reading"}">
+        <aside class="docs-sidebar"><div class="docs-sidebar-head"><div><span>docs/</span><small>${files.length} documents · folders preserved</small></div><button data-doc-action="new" aria-label="New document">+</button></div><div class="docs-sidebar-search"><input type="search" value="${esc(state.docFilter || "")}" placeholder="Filter documents" aria-label="Filter documents" data-doc-filter></div><div class="docs-file-list docs-folder-tree" data-doc-list></div><div class="docs-sidebar-foot"><button data-doc-action="generate">Generate with agent</button></div></aside>
+        <main class="docs-stage">
+          <header class="docs-filebar"><div class="docs-file-ident"><span class="docs-file-icon">⌁</span><span><strong>${esc(fileName(state.path))}</strong><small>${esc(state.path || "Choose a path before saving")} · ${status}</small></span></div>
+            <div class="docs-file-actions">
+              ${state.editing
+                ? `<button class="docs-btn-secondary" data-doc-action="cancel-edit">Discard</button><button class="docs-btn-primary" data-doc-action="save" ${state.path ? "" : "disabled"}>Save changes</button>`
+                : `<button class="docs-btn-secondary" data-doc-action="help" title="MDX syntax help">MDX help</button><button class="docs-btn-primary" data-doc-action="source" aria-pressed="${state.editing}">${editLabel}</button>`}
+              <button data-doc-action="more" aria-label="More document actions" class="docs-btn-icon">•••</button>
+            </div>
+          </header>
+          ${stageBody}
         </main>
-        <aside class="docs-source-panel" aria-label="Markdown source"><header><div><span>Source</span><small>MDX / Markdown</small></div><button data-doc-action="source" aria-label="Close source">×</button></header>${sourceToolbar()}<textarea id="docs-editor-input" spellcheck="true" placeholder="# Start writing…">${esc(state.content)}</textarea><footer><span>${state.content.length.toLocaleString()} characters</span><button data-doc-action="render">Refresh preview</button></footer></aside>
       </div><div id="docs-context-menu" class="docs-context-menu" hidden></div></section>`;
     wire();
   }
@@ -94,7 +114,7 @@
     if (!path || !state) return;
     const doc = await api("GET", `/api/docs/${encodeURI(path)}?raw=0`);
     openParentDirectories(path);
-    Object.assign(state, { path, content: doc.raw || "", html: doc.html || doc.rendered || "", mtime: doc.mtime || "", dirty: false, sourceOpen: false });
+    Object.assign(state, { path, content: doc.raw || "", html: doc.html || doc.rendered || "", mtime: doc.mtime || "", dirty: false, editing: false });
     render();
   }
   async function refresh({ loadInitial = false } = {}) {
@@ -123,11 +143,12 @@
     await renderPreview();
     const doc = await api("PUT", `/api/docs/${encodeURI(state.path)}`, { content: state.content });
     Object.assign(state, { html: doc.html || doc.rendered || state.html, mtime: doc.mtime || new Date().toISOString(), dirty: false });
+    state.editing = false;
     await refresh();
   }
   function insertAtSelection(before, after = "", placeholder = "text") {
     const textarea = state.root.querySelector("#docs-editor-input");
-    if (!textarea) { state.sourceOpen = true; render(); requestAnimationFrame(() => insertAtSelection(before, after, placeholder)); return; }
+    if (!textarea) { state.editing = true; render(); requestAnimationFrame(() => insertAtSelection(before, after, placeholder)); return; }
     const start = textarea.selectionStart, end = textarea.selectionEnd;
     const chosen = textarea.value.slice(start, end) || placeholder;
     const output = `${textarea.value.slice(0, start)}${before}${chosen}${after}${textarea.value.slice(end)}`;
@@ -144,25 +165,33 @@
     if (kind === "link") { const url = prompt("Link URL", "https://"); if (url) insertAtSelection("[", `](${url})`, "link text"); }
   }
   async function action(name) {
-    if (name === "new") { const path = askPath("notes/new-document.mdx"); if (!path) return; Object.assign(state, { path, content: "# New document\n\n", html: "<h1>New document</h1>", mtime: "", dirty: true, sourceOpen: true }); return render(); }
-    if (name === "source") { state.sourceOpen = !state.sourceOpen; return render(); }
+    if (name === "new") { const path = askPath("notes/new-document.mdx"); if (!path) return; Object.assign(state, { path, content: "# New document\n\n", html: "<h1>New document</h1>", mtime: "", dirty: true, editing: true }); return render(); }
+    if (name === "source") { state.editing = !state.editing; return render(); }
+    if (name === "cancel-edit") {
+      // Reload the canonical content from the server so we drop unsaved edits.
+      if (state.path) {
+        const doc = await api("GET", `/api/docs/${encodeURI(state.path)}?raw=0`);
+        Object.assign(state, { content: doc.raw || "", html: doc.html || doc.rendered || "", mtime: doc.mtime || "", dirty: false, editing: false });
+      } else {
+        state.editing = false;
+      }
+      return render();
+    }
     if (name === "save") return save();
-    if (name === "render") { await renderPreview(); return render(); }
-    if (name === "focus-preview") { state.sourceOpen = false; render(); state.root.querySelector("[data-doc-preview]")?.focus(); return; }
     if (name === "more") return openMoreMenu();
     if (name === "help") return showHelp();
     if (name === "generate") return generate();
   }
-  function showHelp() { alert("OpenKan MDX\n\n# Heading\n**bold** · *italic* · `code`\n- bullet\n1. numbered\n[link](https://example.com)\n\nUse the source panel for exact MDX. The Preview stays rendered through OpenKan's MDX pipeline, including headings, tables, code, quotes, lists, and supported MDX blocks."); }
+  function showHelp() { alert("OpenKan MDX\n\n# Heading\n**bold** · *italic* · `code`\n- bullet\n1. numbered\n[link](https://example.com)\n\nClick **Edit document** to switch into the source editor. The preview re-renders as you type and Save writes back to the same path."); }
   async function generate() {
     const path = askPath(state.path || "guides/new-guide.mdx"); if (!path) return;
     const promptText = prompt("What should the configured agent write?", "Create a practical, complete guide."); if (!promptText) return;
     state.root.classList.add("is-generating");
-    try { const doc = await api("POST", "/api/docs/generate", { path, prompt: promptText, model: "default", effort: "high", permissionMode: "bypassPermissions" }); Object.assign(state, { path, content: doc.raw || "", html: doc.html || doc.rendered || "", mtime: doc.mtime || "", dirty: false, sourceOpen: false }); await refresh(); } finally { state?.root?.classList.remove("is-generating"); }
+    try { const doc = await api("POST", "/api/docs/generate", { path, prompt: promptText, model: "default", effort: "high", permissionMode: "bypassPermissions" }); Object.assign(state, { path, content: doc.raw || "", html: doc.html || doc.rendered || "", mtime: doc.mtime || "", dirty: false, editing: false }); await refresh(); } finally { state?.root?.classList.remove("is-generating"); }
   }
   function menuAt(html, x, y) { const menu = state.root.querySelector("#docs-context-menu"); menu.innerHTML = html; menu.hidden = false; menu.style.left = `${x}px`; menu.style.top = `${y}px`; return menu; }
   function dismissMenu(event) { if (!event?.target?.closest?.("#docs-context-menu")) { const menu = state?.root?.querySelector("#docs-context-menu"); if (menu) menu.hidden = true; } }
-  function openMoreMenu() { const trigger = state.root.querySelector('[data-doc-action="more"]'); const box = trigger.getBoundingClientRect(); const menu = menuAt(`<button data-doc-menu="rename">Rename document</button><button data-doc-menu="delete" class="danger">Delete document</button>`, box.left, box.bottom + 6); menu.onclick = async (event) => { const actionName = event.target.dataset.docMenu; menu.hidden = true; if (actionName === "delete" && state.path && confirm(`Delete ${state.path}?`)) { await api("DELETE", `/api/docs/${encodeURI(state.path)}`); Object.assign(state, { path:"", content:"", html:"", dirty:false }); await refresh({ loadInitial:true }); } if (actionName === "rename" && state.path) { const next = askPath(state.path); if (!next || next === state.path) return; await api("PUT", `/api/docs/${encodeURI(next)}`, { content: state.content }); await api("DELETE", `/api/docs/${encodeURI(state.path)}`); state.path = next; await refresh(); } }; }
+  function openMoreMenu() { const trigger = state.root.querySelector('[data-doc-action="more"]'); const box = trigger.getBoundingClientRect(); const menu = menuAt(`<button data-doc-menu="rename">Rename document</button><button data-doc-menu="delete" class="danger">Delete document</button>`, box.left, box.bottom + 6); menu.onclick = async (event) => { const actionName = event.target.dataset.docMenu; menu.hidden = true; if (actionName === "delete" && state.path && confirm(`Delete ${state.path}?`)) { await api("DELETE", `/api/docs/${encodeURI(state.path)}`); Object.assign(state, { path:"", content:"", html:"", dirty:false, editing:false }); await refresh({ loadInitial:true }); } if (actionName === "rename" && state.path) { const next = askPath(state.path); if (!next || next === state.path) return; await api("PUT", `/api/docs/${encodeURI(next)}`, { content: state.content }); await api("DELETE", `/api/docs/${encodeURI(state.path)}`); state.path = next; await refresh(); } }; }
   function contextMenu(event) { const file = event.target.closest("[data-doc-path]"); const editor = event.target.closest("#docs-editor-input"); if (!file && !editor) return; event.preventDefault(); const menu = file ? menuAt(`<button data-doc-menu="open">Open</button><button data-doc-menu="rename">Rename</button><button data-doc-menu="delete" class="danger">Delete</button>`, event.clientX, event.clientY) : menuAt(`<button data-doc-format="h2">Heading</button><button data-doc-format="bold">Bold</button><button data-doc-format="italic">Italic</button><button data-doc-format="ul">Bulleted list</button><button data-doc-format="link">Link</button>`, event.clientX, event.clientY); menu.onclick = async (actionEvent) => { menu.hidden = true; const format = actionEvent.target.dataset.docFormat; if (format) return applyFormat(format); const menuAction = actionEvent.target.dataset.docMenu, path = file?.dataset.docPath; if (menuAction === "open") return load(path); if (menuAction === "delete" && confirm(`Delete ${path}?`)) { await api("DELETE", `/api/docs/${encodeURI(path)}`); return refresh({ loadInitial: path === state.path }); } if (menuAction === "rename") { const next = askPath(path); if (!next || next === path) return; const doc = await api("GET", `/api/docs/${encodeURI(path)}?raw=0`); await api("PUT", `/api/docs/${encodeURI(next)}`, { content: doc.raw || "" }); await api("DELETE", `/api/docs/${encodeURI(path)}`); if (path === state.path) state.path = next; return refresh(); } }; }
-  window.OpenKanDocs = { async mount(root, options = {}) { if (state?.root === root) return; state = { root, entries: [], path:"", content:"", html:"", mtime:"", dirty:false, sourceOpen:false, docFilter:"", expandedDirs:new Set(), initialDoc:options.initialDoc || "" }; await refresh({ loadInitial:true }); }, unmount() { clearTimeout(renderTimer); state = null; } };
+  window.OpenKanDocs = { async mount(root, options = {}) { if (state?.root === root) return; state = { root, entries: [], path:"", content:"", html:"", mtime:"", dirty:false, editing:false, docFilter:"", expandedDirs:new Set(), initialDoc:options.initialDoc || "" }; await refresh({ loadInitial:true }); }, unmount() { clearTimeout(renderTimer); state = null; } };
 })();

package/dist/web/home-view.js

@@ -83,7 +83,7 @@
     const metGoals = (Array.isArray(goals) ? goals : []).flatMap((prd) => prd.goals || []).filter((goal) => goal.status === "met").length;
     const docs = flatten(data.docs.entries || []).filter((entry) => /\.mdx?$/i.test(entry.path)).length;
     root.innerHTML = `<section class="home-view home-command-center">
-      <header class="home-command-header"><div><span class="workspace-eyebrow">Workspace command center</span><h2>See the work before it becomes noise.</h2><p>One place for the active project, live operators, work in flight, and the signals that need your attention.</p></div><div class="home-command-actions"><button data-home-action="tasks">Open board</button><button data-home-action="agents">Inspect agents</button></div></header>
+      <header class="home-command-header"><div><span class="workspace-eyebrow">Workspace command center</span></div><div class="home-command-actions"><button data-home-action="tasks">Open board</button><button data-home-action="agents">Inspect agents</button></div></header>
       <section class="home-network-card"><div class="home-network-copy"><span class="home-section-label">LIVE WORKSPACE MAP</span><h3>${esc(projects.find((project) => project.active)?.name || "OpenKan")}</h3><p>${activeAgents.length ? `${activeAgents.length} agent${activeAgents.length === 1 ? " is" : "s are"} active across the workspace.` : "No agents are currently active. Start from a task or an agent session when you are ready."}</p><div class="home-network-legend"><span><i class="is-project"></i>Project</span><span><i class="is-agent"></i>Agent</span><span><i class="is-work"></i>Work</span></div></div><canvas class="home-network" aria-label="Animated workspace relationship map"></canvas></section>
       <section class="home-stat-grid"><article><span>Active tasks</span><strong>${total - (counts.done || 0)}</strong><small>${counts.doing || 0} in progress · ${counts.review || 0} in review</small></article><article><span>Projects</span><strong>${projects.length}</strong><small>${projects.filter((project) => project.active).length ? "1 currently selected" : "Select a project to begin"}</small></article><article><span>Knowledge base</span><strong>${docs}</strong><small>Markdown and MDX documents</small></article><article><span>Goals met</span><strong>${metGoals}</strong><small>Durable .ok planning goals</small></article></section>
       <section class="home-dashboard-grid"><article class="home-activity-card"><header><div><span class="home-section-label">FLOW</span><h3>Activity cadence</h3></div><span>${(data.velocity.days || []).length || 30} days</span></header>${flowSvg(data.velocity.days || [])}<footer><span>Quiet</span><span>Today</span></footer></article><article class="home-queue-card"><header><div><span class="home-section-label">QUEUE</span><h3>Where work sits</h3></div><button data-home-action="tasks">View board</button></header><div class="home-queue-list">${[["Backlog","backlog"],["Ready","todo"],["In progress","doing"],["Review","review"],["Done","done"]].map(([label, key]) => `<div><span>${label}</span><b>${counts[key] || 0}</b><i style="--queue:${Math.min(100, ((counts[key] || 0) / Math.max(1, total)) * 100)}%"></i></div>`).join("")}</div></article><article class="home-operators-card"><header><div><span class="home-section-label">OPERATORS</span><h3>Agents and projects</h3></div><button data-home-action="agents">All agents</button></header><div class="home-operator-list">${[...activeAgents, ...projects.slice(0, Math.max(0, 4 - activeAgents.length))].slice(0,4).map((item) => `<div><i class="${item.root ? "project" : "agent"}"></i><span><strong>${esc(item.name || item.id || short(item.root))}</strong><small>${esc(item.root ? short(item.root) : item.status || item.state || "Idle")}</small></span></div>`).join("") || "<p class=home-empty>No workspace signals yet.</p>"}</div></article></section>

package/dist/web/index.html

@@ -104,8 +104,6 @@
         <div class="workspace-intro">
           <div>
             <span class="workspace-eyebrow">Project workspace</span>
-            <h2>Move work forward</h2>
-            <p>Plan, coordinate, and review every task in one durable board.</p>
           </div>
           <div id="board-overview" class="board-overview" aria-label="Board summary">
             <div class="overview-stat">
@@ -436,7 +434,7 @@
     </div>
 
     <footer class="footer">
-      <span>OpenKan v0.3.0 · local-first workspace</span>
+      <span>OpenKan v0.3.0</span>
     </footer>
 
     <!-- api.js MUST load first; it exposes window.OpenKanAPI used by the others. -->
@@ -445,6 +443,9 @@
     <script src="cross-tab.js" defer></script>
     <script src="images.js" defer></script>
     <script src="mdx-viewer.js" defer></script>
+    <!-- status.js exposes window.OpenKanStatus used by task-view.js, app.js,
+         and contributors-view.js. Must load before any of them. -->
+    <script src="status.js" defer></script>
     <script src="task-view.js" defer></script>
     <script src="settings.js" defer></script>
     <script src="changelog-view.js" defer></script>

package/dist/web/status.js

@@ -0,0 +1,40 @@
+// web/status.js — shared task status derivation for the web UI.
+//
+// Mirrors `kanban/board.ts:mapColumnToStatus()` so the board cards and
+// opened-task panel render the same canonical state. The server stores
+// `state` only when an explicit lifecycle state exists (running / done /
+// failed / cancelled / waiting-for-input); for the rest it defaults to
+// `idle` regardless of column, which made every card look idle. This
+// helper falls back to column + archived when `state` is the default
+// idle marker.
+//
+// Output values: "pending" | "in_progress" | "review" | "done" |
+// "cancelled" | "running" | "waiting-for-input" | "failed".
+// (The trailing four mirror the explicit lifecycle states so the helper
+// stays lossless when the server has already recorded one.)
+
+(function () {
+  "use strict";
+
+  function displayState(task) {
+    if (!task) return "pending";
+    if (task.archived) return "cancelled";
+    const explicit = task.state ?? task.status;
+    // Explicit lifecycle states pass through unchanged so callers can
+    // still observe "running", "failed", "waiting-for-input", etc.
+    if (explicit && explicit !== "idle") return explicit;
+    // Otherwise derive from the column. The server defaults `state` to
+    // "idle" for everything that hasn't been claimed by an agent, so we
+    // trust the column here.
+    switch (task.column) {
+      case "doing":   return "in_progress";
+      case "review":  return "review";
+      case "done":    return "done";
+      case "todo":
+      case "backlog":
+      default:        return "pending";
+    }
+  }
+
+  window.OpenKanStatus = { displayState };
+})();

package/dist/web/style.css

@@ -473,6 +473,31 @@ body.chat-sidebar-resizing {
   flex-direction: column;
   gap: 8px;
   scrollbar-width: thin;
+  /* Firefox thumb + track — thumb uses the muted --border-strong so the
+     scrollbar disappears into the column chrome until hovered. */
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+/* Webkit/Blink override (Chrome / Safari / Edge). The base ::-webkit-scrollbar
+   rule near the top of this file targets the whole page; .column-body is the
+   only task-list scroll container, so we scope and shrink it here. Width is
+   intentional: 8px wide with a 2px transparent border on the thumb yields a
+   ~4px visible pill, subtle against the column body surface. */
+.column-body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.column-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.column-body::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+.column-body::-webkit-scrollbar-thumb:hover {
+  background: var(--border);
 }
 
 .column-empty {
@@ -593,14 +618,19 @@ body.chat-sidebar-resizing {
   flex-shrink: 0;
 }
 
-.status-dot.idle {
+.status-dot.idle,
+.status-dot.pending {
   background: var(--idle);
 }
-.status-dot.running {
+.status-dot.running,
+.status-dot.in_progress {
   background: var(--running);
   animation: pulse 1.4s ease-in-out infinite;
   box-shadow: 0 0 0 0 rgba(68, 147, 248, 0.5);
 }
+.status-dot.review {
+  background: var(--warn);
+}
 .status-dot.done {
   background: var(--done);
 }
@@ -1164,8 +1194,14 @@ body.chat-sidebar-resizing {
 .state-pill {
   text-transform: capitalize;
 }
-.state-pill.state-idle { color: var(--text-mute); }
-.state-pill.state-running { color: var(--accent-hover); }
+.state-pill.state-idle,
+.state-pill.state-pending { color: var(--text-mute); }
+.state-pill.state-running,
+.state-pill.state-in_progress { color: var(--accent-hover); }
+.state-pill.state-review {
+  color: var(--warn);
+  border-color: rgba(210, 153, 34, 0.4);
+}
 .state-pill.state-waiting,
 .state-pill.state-waiting-for-input {
   color: var(--warn);
@@ -2409,6 +2445,87 @@ button.tag-chip {
   color: var(--text-mute);
 }
 
+/* ---------- Task meta "Show details" toggle (tsk-KNQwScRg) ----------
+   Collapses the secondary metadata (column, category, priority, effort,
+   runner, source, created/updated timestamps) behind a native <details>
+   toggle. Priority is hidden behind the toggle too because the header
+   status column already shows a priority pill next to the title — keeping
+   it in two places was the loudest piece of chrome in the panel. The
+   primary dl (stale warning + assignees + last activity) and the tag row
+   stay above the fold. */
+
+/* Smaller visual gap between the always-visible primary dl and the tags
+   row — they read as one block. */
+.task-header-meta .meta-dl-primary {
+  margin-bottom: 0;
+}
+
+/* Native <details>/<summary> defaults — strip the disclosure marker and
+   render a small caret that rotates when open. Keyboard accessible (Enter
+   and Space toggle) and announced correctly by screen readers via the
+   implicit role. */
+.task-header-meta .task-meta-details {
+  border-top: 1px solid var(--border);
+  padding-top: var(--space-2);
+}
+.task-header-meta .task-meta-details-toggle {
+  list-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-mute);
+  padding: 2px 0;
+  user-select: none;
+}
+.task-header-meta .task-meta-details-toggle::-webkit-details-marker {
+  display: none;
+}
+.task-header-meta .task-meta-details-toggle::marker {
+  display: none;
+  content: "";
+}
+.task-header-meta .task-meta-details-toggle::before {
+  content: "▸";
+  display: inline-block;
+  font-size: 10px;
+  color: var(--text-mute);
+  transition: transform var(--transition);
+}
+.task-header-meta .task-meta-details[open] > .task-meta-details-toggle::before {
+  transform: rotate(90deg);
+}
+.task-header-meta .task-meta-details-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.task-header-meta .task-meta-details-toggle:hover {
+  color: var(--text);
+}
+
+/* The collapsed dl sits inside the <details> body with a small indent so
+   it visually nests under the toggle label. Uses the existing meta-dl
+   grid from above. */
+.task-header-meta .meta-dl-details {
+  margin-top: var(--space-2);
+  padding-left: var(--space-4);
+  border-left: 2px solid var(--border);
+}
+
+/* Compact relative-time styling for the "Activity" cell in the primary
+   dl — it stays front-and-center but at lower visual weight than the
+   assignees row. */
+.task-header-meta .meta-dl dd.meta-last-activity {
+  font-size: 12px;
+  color: var(--text-mute);
+  font-variant-numeric: tabular-nums;
+}
+
 /* Keep the old class names as no-op aliases so any inline usage elsewhere
    still renders. New code should use the dl/dt/dd structure above. */
 .task-header-meta .meta-label {
@@ -8199,9 +8316,9 @@ body.workspace-mode-chat { padding-left: 0; }
 .home-command-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
 .home-command-header h2 { max-width:720px; margin:5px 0 8px; color:var(--ink-100); font-size:clamp(30px,4vw,52px); letter-spacing:-.052em; line-height:.98; }
 .home-command-header p { max-width:650px; margin:0; color:var(--ink-60); line-height:1.55; }
-.home-command-actions,.docs-command-actions { display:flex; flex-wrap:wrap; gap:8px; }
-.home-command-actions button,.docs-command-actions button { min-height:36px; padding:0 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elev); color:var(--ink-80); cursor:pointer; font:700 12px inherit; }
-.home-command-actions button:hover,.docs-command-actions button:hover { border-color:var(--border-strong); background:var(--bg-elev-2); }
+.home-command-actions { display:flex; flex-wrap:wrap; gap:8px; }
+.home-command-actions button { min-height:36px; padding:0 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elev); color:var(--ink-80); cursor:pointer; font:700 12px inherit; }
+.home-command-actions button:hover { border-color:var(--border-strong); background:var(--bg-elev-2); }
 .home-network-card { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(350px,1.28fr); min-height:270px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--bg-elev) 96%,#121d38),var(--bg)); }
 .home-network-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,4vw,50px); border-right:1px solid var(--border); }
 .home-section-label { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.1em; }
@@ -8214,32 +8331,203 @@ body.workspace-mode-chat { padding-left: 0; }
 .home-dashboard-grid { display:grid; grid-template-columns:1.1fr 1fr .9fr; gap:10px; }.home-dashboard-grid article { min-height:220px; padding:18px; }.home-dashboard-grid header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.home-dashboard-grid h3 { margin:5px 0 0; color:var(--ink-100); font-size:15px; }.home-dashboard-grid header>span,.home-dashboard-grid header button { color:var(--ink-50); font-size:11px; }.home-dashboard-grid header button { padding:0;border:0;background:none;cursor:pointer; }.home-flow-chart { width:100%; height:122px; margin-top:20px; overflow:visible; }.home-flow-area { fill:color-mix(in srgb,var(--accent) 14%,transparent); }.home-flow-line { fill:none; stroke:var(--accent); stroke-width:2; }.home-flow-chart circle { fill:var(--accent); }.home-activity-card footer { display:flex; justify-content:space-between; color:var(--ink-50); font-size:10px; }.home-queue-list { display:grid; gap:10px; margin-top:22px; }.home-queue-list>div { display:grid; grid-template-columns:88px 24px 1fr; align-items:center; gap:8px; color:var(--ink-60); font-size:11px; }.home-queue-list b { color:var(--ink-100); text-align:right; }.home-queue-list i { display:block; height:4px; border-radius:5px; background:linear-gradient(90deg,var(--accent) var(--queue),var(--bg) var(--queue)); }.home-operator-list { display:grid; gap:10px; margin-top:20px; }.home-operator-list>div { display:flex; align-items:center; gap:8px; }.home-operator-list span { display:grid; min-width:0; }.home-operator-list strong { overflow:hidden; color:var(--ink-80); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.home-operator-list small { color:var(--ink-50); font-size:10px; }.home-loading { padding:50px; color:var(--ink-60); }
 @media(max-width:900px){.home-network-card,.home-dashboard-grid{grid-template-columns:1fr}.home-network-copy{border-right:0;border-bottom:1px solid var(--border)}.home-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-command-header{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.home-stat-grid{grid-template-columns:1fr}.home-command-center{padding:22px 16px}}
 
-/* Preview-first docs: the rendered MDX document owns the canvas, while source
-   slides in as an editor instead of replacing the reading experience. */
+/* Docs workspace — Preview-first docs page, no banner.
+   The renderer is the default surface. An "Edit document" button in the file
+   bar swaps the rendered preview for an in-place source editor (toolbar +
+   textarea). All chrome below stays in sync with the workspace-mode class on
+   `.docs-workspace`. */
 #tab-docs { background:var(--bg); }
 .docs-shell { min-height:calc(100vh - var(--topbar-height)); background:var(--bg); }
-.docs-commandbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px clamp(20px,3vw,48px) 20px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg-elev) 90%,transparent); }
-.docs-commandbar h2 { margin:5px 0 7px; color:var(--ink-100); font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; }.docs-commandbar p { max-width:640px; margin:0; color:var(--ink-60); line-height:1.5; }.docs-agent-button { border-color:color-mix(in srgb,var(--accent) 42%,var(--border)) !important; background:color-mix(in srgb,var(--accent) 11%,var(--bg-elev)) !important; }
-.docs-workspace { display:grid; grid-template-columns:250px minmax(0,1fr) 0; min-height:calc(100vh - 183px); transition:grid-template-columns .22s ease; }.docs-workspace--source-open { grid-template-columns:250px minmax(0,1fr) minmax(320px,30vw); }.docs-sidebar { display:flex; flex-direction:column; min-width:0; padding:14px 10px; border-right:1px solid var(--border); background:var(--bg); }.docs-sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:0 5px 10px; color:var(--ink-60); font:700 11px ui-monospace,monospace; }.docs-sidebar-head div { display:grid; gap:3px; }.docs-sidebar-head small { color:var(--ink-50); font:10px inherit; }.docs-sidebar-head button { width:28px;height:28px;border:1px solid var(--border);border-radius:7px;background:var(--bg-elev);color:var(--ink-80);cursor:pointer;font-size:17px; }.docs-sidebar-search { padding:0 3px 10px; }.docs-sidebar-search input { width:100%;box-sizing:border-box;min-height:31px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:var(--bg-elev);color:var(--text);font:11px inherit;outline:none; }.docs-sidebar-search input:focus { border-color:var(--border-strong); }.docs-file-list { display:grid; gap:3px; overflow:auto; padding:0 2px 16px; }.docs-file { display:grid; gap:2px; width:100%; min-width:0; padding:8px 9px; border:1px solid transparent !important; border-radius:8px !important; background:transparent !important; color:var(--ink-60) !important; cursor:pointer; text-align:left; }.docs-file span { overflow:hidden; color:var(--ink-50); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.docs-file strong { overflow:hidden; color:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.docs-file:hover { background:var(--bg-elev-2) !important; color:var(--ink-90) !important; }.docs-file.active { border-color:color-mix(in srgb,var(--accent) 34%,var(--border)) !important; background:color-mix(in srgb,var(--accent) 10%,var(--bg-elev)) !important; color:var(--ink-100) !important; }.docs-empty-tree { padding:16px 9px; color:var(--ink-50); font-size:11px; line-height:1.5; }.docs-stage { display:flex; min-width:0; flex-direction:column; background:var(--bg-elev); }.docs-filebar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:0 22px; border-bottom:1px solid var(--border); }.docs-file-ident { display:flex; min-width:0; align-items:center; gap:9px; }.docs-file-ident>span:last-child { display:grid; gap:2px; min-width:0; }.docs-file-ident strong { overflow:hidden; color:var(--ink-90); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.docs-file-ident small { overflow:hidden; color:var(--ink-50); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.docs-file-icon { display:grid; width:28px;height:28px;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--accent); }.docs-file-actions { display:flex; gap:6px; }.docs-file-actions button,.docs-preview-toolbar button,.docs-source-panel button { min-height:28px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--ink-60);cursor:pointer;font:700 11px inherit; }.docs-file-actions button:hover,.docs-preview-toolbar button:hover,.docs-source-panel button:hover { border-color:var(--border-strong);color:var(--ink-100); }.docs-preview-toolbar { display:flex; align-items:center; gap:7px; min-height:42px; padding:0 22px; border-bottom:1px solid var(--border); background:var(--bg); }.docs-preview-toolbar>span { display:flex;align-items:center;gap:6px;margin-right:auto;color:var(--ink-60);font-size:11px;font-weight:700; }.docs-preview-toolbar i { width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px color-mix(in srgb,var(--success) 65%,transparent); }.docs-mdx-preview { max-width:900px; width:100%; box-sizing:border-box; margin:0 auto; padding:clamp(28px,5vw,72px); color:var(--ink-80); line-height:1.7; }.docs-mdx-preview h1,.docs-mdx-preview h2,.docs-mdx-preview h3,.docs-mdx-preview h4 { color:var(--ink-100); letter-spacing:-.03em; }.docs-mdx-preview h1 { margin-top:0; font-size:clamp(30px,4vw,50px); line-height:1.05; border:0; }.docs-mdx-preview h2 { margin-top:2.3em; font-size:1.7em; }.docs-mdx-preview h3 { margin-top:2em; }.docs-mdx-preview p,.docs-mdx-preview li { max-width:76ch; }.docs-mdx-preview pre { padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg); overflow:auto; }.docs-mdx-preview table { width:100%; border-collapse:collapse; margin:22px 0; }.docs-mdx-preview th,.docs-mdx-preview td { padding:10px 12px; border:1px solid var(--border); text-align:left; }.docs-mdx-preview th { background:var(--bg); }.docs-mdx-preview blockquote { margin:20px 0;padding:8px 18px;border-left:3px solid var(--accent);color:var(--ink-60); }.docs-preview-empty { display:grid;place-items:start;gap:7px;min-height:280px;align-content:center; }.docs-preview-empty h3,.docs-preview-empty p { margin:0; }.docs-preview-empty button { margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--ink-80);cursor:pointer; }.docs-source-panel { display:flex; min-width:0; overflow:hidden; flex-direction:column; border-left:1px solid var(--border); background:var(--bg); opacity:0; pointer-events:none; transition:opacity .16s ease; }.docs-workspace--source-open .docs-source-panel { opacity:1; pointer-events:auto; }.docs-source-panel>header { display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 14px;border-bottom:1px solid var(--border); }.docs-source-panel>header div { display:grid;gap:2px; }.docs-source-panel header span { color:var(--ink-80);font-size:12px;font-weight:800; }.docs-source-panel header small { color:var(--ink-50);font-size:10px; }.docs-source-tools { display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border); }.docs-source-panel textarea { flex:1; min-height:0; width:100%; box-sizing:border-box; padding:16px; border:0; outline:0; resize:none; background:var(--bg); color:var(--ink-80); font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.docs-source-panel footer { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:0 12px;border-top:1px solid var(--border);color:var(--ink-50);font-size:10px; }.docs-context-menu { position:fixed;z-index:150;display:grid;min-width:160px;padding:5px;border:1px solid var(--border-strong);border-radius:9px;background:var(--bg-elev);box-shadow:var(--shadow-2); }.docs-context-menu[hidden] { display:none; }.docs-context-menu button { padding:8px;border:0;border-radius:6px;background:transparent;color:var(--ink-70);cursor:pointer;text-align:left;font:600 11px inherit; }.docs-context-menu button:hover { background:var(--bg-elev-2);color:var(--ink-100); }.docs-context-menu .danger { color:var(--danger); }.docs-tab.is-generating { cursor:progress; }.docs-tab.is-generating .docs-stage { opacity:.6;pointer-events:none; }
-@media(max-width:1050px){.docs-workspace--source-open{grid-template-columns:210px minmax(0,1fr) minmax(290px,34vw)}.docs-commandbar{align-items:flex-start;flex-direction:column}}@media(max-width:760px){.docs-workspace,.docs-workspace--source-open{grid-template-columns:1fr;min-height:0}.docs-sidebar{max-height:175px;border-right:0;border-bottom:1px solid var(--border)}.docs-source-panel{min-height:430px;border-left:0;border-top:1px solid var(--border)}.docs-mdx-preview{padding:32px 20px}.docs-filebar,.docs-preview-toolbar{padding-inline:14px}.docs-commandbar{padding:22px 16px 16px}}
+/* The old command bar (`Knowledge workspace / Docs that stay readable…`) is
+   gone. We keep an inert selector so any leftover markup from a stale build
+   collapses instead of stacking a phantom header on top of the file bar. */
+.docs-commandbar { display:none !important; }
+.docs-workspace { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 56px); }
+.docs-workspace--editing { grid-template-columns:260px minmax(0,1fr); }
+.docs-sidebar { display:flex; flex-direction:column; min-width:0; padding:14px 10px; border-right:1px solid var(--border); background:var(--bg); gap:6px; }
+.docs-sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:0 5px 10px; color:var(--ink-60); font:700 11px ui-monospace,monospace; }
+.docs-sidebar-head div { display:grid; gap:3px; }
+.docs-sidebar-head small { color:var(--ink-50); font:10px inherit; }
+.docs-sidebar-head button { width:28px;height:28px;border:1px solid var(--border);border-radius:7px;background:var(--bg-elev);color:var(--ink-80);cursor:pointer;font-size:17px; }
+.docs-sidebar-head button:hover { border-color:var(--border-strong); color:var(--ink-100); }
+.docs-sidebar-search { padding:0 3px 8px; }
+.docs-sidebar-search input { width:100%;box-sizing:border-box;min-height:31px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:var(--bg-elev);color:var(--text);font:11px inherit;outline:none; }
+.docs-sidebar-search input:focus { border-color:var(--border-strong); }
+.docs-file-list { display:grid; gap:3px; overflow:auto; padding:0 2px 12px; }
+.docs-sidebar-foot { padding:10px 3px 4px; border-top:1px solid var(--border); }
+.docs-sidebar-foot button { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg-elev); color:var(--ink-80); cursor:pointer; font:700 11px inherit; }
+.docs-sidebar-foot button:hover { border-color:var(--border-strong); color:var(--ink-100); }
+.docs-file { display:grid; gap:2px; width:100%; min-width:0; padding:8px 9px; border:1px solid transparent !important; border-radius:8px !important; background:transparent !important; color:var(--ink-60) !important; cursor:pointer; text-align:left; }
+.docs-file span { overflow:hidden; color:var(--ink-50); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
+.docs-file strong { overflow:hidden; color:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
+.docs-file:hover { background:var(--bg-elev-2) !important; color:var(--ink-90) !important; }
+.docs-file.active { border-color:color-mix(in srgb,var(--accent) 34%,var(--border)) !important; background:color-mix(in srgb,var(--accent) 10%,var(--bg-elev)) !important; color:var(--ink-100) !important; }
+.docs-empty-tree { padding:16px 9px; color:var(--ink-50); font-size:11px; line-height:1.5; }
+.docs-stage { display:flex; min-width:0; flex-direction:column; background:var(--bg-elev); }
+.docs-filebar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:0 22px; border-bottom:1px solid var(--border); }
+.docs-file-ident { display:flex; min-width:0; align-items:center; gap:9px; }
+.docs-file-ident>span:last-child { display:grid; gap:2px; min-width:0; }
+.docs-file-ident strong { overflow:hidden; color:var(--ink-90); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
+.docs-file-ident small { overflow:hidden; color:var(--ink-50); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
+.docs-file-icon { display:grid; width:28px;height:28px;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--accent); }
+.docs-file-actions { display:flex; gap:6px; align-items:center; }
+
+/* Button primitives — small, readable, consistent across the docs file bar. */
+.docs-btn-primary,
+.docs-btn-secondary,
+.docs-btn-icon,
+.docs-file-actions button { min-height:28px; padding:0 11px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink-70); cursor:pointer; font:700 11px/1 inherit; letter-spacing:.02em; transition: border-color .12s ease, color .12s ease, background .12s ease; }
+.docs-file-actions button:hover,
+.docs-btn-primary:hover,
+.docs-btn-secondary:hover,
+.docs-btn-icon:hover { border-color:var(--border-strong); color:var(--ink-100); }
+.docs-btn-primary { background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--ink-100); }
+.docs-btn-primary:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg-elev)); border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
+.docs-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
+.docs-btn-secondary { background:var(--bg-elev); }
+.docs-btn-icon { width:30px; min-height:28px; padding:0; font-size:13px; line-height:1; }
+
+/* Rendered document — readable, breathable, capped. */
+.docs-mdx-preview {
+  max-width: 760px;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding: clamp(28px, 4.5vw, 56px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 96px);
+  color: var(--ink-80);
+  font-size: 15px;
+  line-height: 1.72;
+  letter-spacing: 0.005em;
+}
+.docs-mdx-preview > * + * { margin-top: 1.1em; }
+.docs-mdx-preview h1,
+.docs-mdx-preview h2,
+.docs-mdx-preview h3,
+.docs-mdx-preview h4 { color: var(--ink-100); letter-spacing: -.025em; line-height: 1.2; }
+.docs-mdx-preview h1 { margin-top: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
+.docs-mdx-preview h2 { margin-top: 2.4em; font-size: 1.55em; font-weight: 700; }
+.docs-mdx-preview h3 { margin-top: 2em; font-size: 1.2em; font-weight: 700; color: var(--ink-90); }
+.docs-mdx-preview h4 { margin-top: 1.8em; font-size: 1em; font-weight: 700; color: var(--ink-90); text-transform: uppercase; letter-spacing: .06em; }
+.docs-mdx-preview p,
+.docs-mdx-preview li { max-width: 70ch; }
+.docs-mdx-preview ul,
+.docs-mdx-preview ol { padding-left: 1.4em; }
+.docs-mdx-preview li { margin: 4px 0; }
+.docs-mdx-preview li::marker { color: var(--ink-50); }
+.docs-mdx-preview hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--border); }
+.docs-mdx-preview strong { color: var(--ink-100); font-weight: 700; }
+.docs-mdx-preview em { color: var(--ink-90); }
+.docs-mdx-preview a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
+.docs-mdx-preview a:hover { text-decoration-thickness: 2px; }
+.docs-mdx-preview code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88em;
+  padding: 2px 5px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--ink-90);
+}
+.docs-mdx-preview pre {
+  max-width: 100%;
+  margin: 1.4em 0;
+  padding: 16px 18px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  overflow-x: auto;
+  white-space: pre;
+  scrollbar-width: thin;
+}
+.docs-mdx-preview pre code {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--ink-90);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre;
+}
+.docs-mdx-preview blockquote {
+  margin: 1.6em 0;
+  padding: 4px 18px;
+  border-left: 3px solid var(--accent);
+  color: var(--ink-70);
+  font-style: italic;
+}
+.docs-mdx-preview blockquote > * + * { margin-top: .8em; }
+.docs-mdx-preview table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: 1.6em 0;
+  font-size: 14px;
+}
+.docs-mdx-preview th,
+.docs-mdx-preview td {
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+.docs-mdx-preview th { background: var(--bg); color: var(--ink-100); font-weight: 700; }
+.docs-mdx-preview tr:nth-child(odd) td { background: color-mix(in srgb, var(--bg-elev) 60%, transparent); }
+.docs-mdx-preview img { max-width: 100%; height: auto; border-radius: 6px; }
+
+/* Per-block wrappers emitted by the server renderer — keep spacing sane. */
+.docs-mdx-preview section.mdx-block { display: block; }
+.docs-mdx-preview section.mdx-block > * + * { margin-top: inherit; }
+
+/* Empty state. */
+.docs-preview-empty { display:grid; place-items:start; gap:10px; min-height:320px; align-content:center; }
+.docs-preview-empty h3 { margin:0; color:var(--ink-100); font-size:18px; }
+.docs-preview-empty p { margin:0; color:var(--ink-60); font-size:14px; line-height:1.55; max-width:52ch; }
+.docs-preview-empty button { margin-top:6px; padding:9px 14px; border:1px solid var(--border); border-radius:7px; background:var(--bg-elev); color:var(--ink-80); cursor:pointer; font:700 12px inherit; }
+.docs-preview-empty button:hover { border-color:var(--border-strong); color:var(--ink-100); }
+
+/* In-place editor — replaces the preview when `state.editing` flips on. */
+.docs-editor-shell { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; background: var(--bg); }
+.docs-source-tools { display:flex; flex-wrap:wrap; gap:4px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-elev); }
+.docs-source-tools button { min-height:28px; min-width:34px; padding:0 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink-70); cursor:pointer; font:700 11px inherit; }
+.docs-source-tools button:hover { border-color:var(--border-strong); color:var(--ink-100); }
+.docs-editor-shell textarea { flex:1 1 auto; min-height:0; width:100%; box-sizing:border-box; padding:22px clamp(18px, 4vw, 40px); border:0; outline:0; resize:none; background:var(--bg); color:var(--ink-90); font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
+.docs-editor-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:0 16px; border-top:1px solid var(--border); color:var(--ink-50); font-size:10px; background:var(--bg-elev); }
+.docs-editor-hint { letter-spacing:.04em; text-transform:uppercase; }
+
+.docs-context-menu { position:fixed; z-index:150; display:grid; min-width:160px; padding:5px; border:1px solid var(--border-strong); border-radius:9px; background:var(--bg-elev); box-shadow:var(--shadow-2); }
+.docs-context-menu[hidden] { display:none; }
+.docs-context-menu button { padding:8px; border:0; border-radius:6px; background:transparent; color:var(--ink-70); cursor:pointer; text-align:left; font:600 11px inherit; }
+.docs-context-menu button:hover { background:var(--bg-elev-2); color:var(--ink-100); }
+.docs-context-menu .danger { color:var(--danger); }
+.docs-tab.is-generating { cursor:progress; }
+.docs-tab.is-generating .docs-stage { opacity:.6; pointer-events:none; }
+
+@media(max-width:760px){
+  .docs-workspace,
+  .docs-workspace--editing { grid-template-columns:1fr; min-height:0; }
+  .docs-sidebar { max-height:200px; border-right:0; border-bottom:1px solid var(--border); }
+  .docs-mdx-preview { padding:24px 18px 56px; }
+  .docs-editor-shell textarea { padding:18px 16px; }
+  .docs-filebar { padding-inline:14px; }
+}
 
 /* Docs owns its own scroll regions. The application shell intentionally does
    not scroll, so letting the preview inherit a fixed/min-height mix trapped
-   long documents below the viewport. Keep the command bar fixed and make the
-   document stage, file tree, and source editor independently scrollable. */
+   long documents below the viewport. The file bar stays sticky and the
+   document stage, file tree, and source editor scroll independently. */
 #tab-docs { min-height: 0; overflow: hidden; }
 .docs-shell { display: flex; min-height: 0; height: 100%; flex-direction: column; overflow: hidden; }
 .docs-workspace { min-height: 0; flex: 1 1 auto; }
 .docs-sidebar,
 .docs-stage,
-.docs-source-panel { min-height: 0; }
+.docs-editor-shell { min-height: 0; }
 .docs-file-list { min-height: 0; flex: 1 1 auto; }
 .docs-stage { overflow: auto; overscroll-behavior: contain; }
-.docs-filebar,
-.docs-preview-toolbar { position: sticky; z-index: 2; }
-.docs-filebar { top: 0; background: var(--bg-elev); }
-.docs-preview-toolbar { top: 58px; }
-.docs-source-panel textarea { min-height: 0; }
+.docs-filebar { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); }
+.docs-editor-shell textarea { min-height: 0; }
 
 /* Docs navigation mirrors the actual docs/ filesystem. Directory rows own
    expansion; documents stay compact and the active document is unambiguous. */
@@ -8314,26 +8602,26 @@ body.workspace-mode-chat { padding-left: 0; }
    shell's scrolling contract. They are deliberately restrained in both themes. */
 .docs-file-list,
 .docs-stage,
-.docs-source-panel textarea,
+.docs-editor-shell textarea,
 .docs-mdx-preview pre {
   scrollbar-width: thin;
   scrollbar-color: color-mix(in srgb, var(--ink-50) 55%, transparent) transparent;
 }
 .docs-file-list::-webkit-scrollbar,
 .docs-stage::-webkit-scrollbar,
-.docs-source-panel textarea::-webkit-scrollbar,
+.docs-editor-shell textarea::-webkit-scrollbar,
 .docs-mdx-preview pre::-webkit-scrollbar { width: 9px; height: 9px; }
 .docs-file-list::-webkit-scrollbar-track,
 .docs-stage::-webkit-scrollbar-track,
-.docs-source-panel textarea::-webkit-scrollbar-track,
+.docs-editor-shell textarea::-webkit-scrollbar-track,
 .docs-mdx-preview pre::-webkit-scrollbar-track { background: transparent; }
 .docs-file-list::-webkit-scrollbar-thumb,
 .docs-stage::-webkit-scrollbar-thumb,
-.docs-source-panel textarea::-webkit-scrollbar-thumb,
+.docs-editor-shell textarea::-webkit-scrollbar-thumb,
 .docs-mdx-preview pre::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ink-50) 58%, transparent); background-clip: padding-box; }
 .docs-file-list::-webkit-scrollbar-thumb:hover,
 .docs-stage::-webkit-scrollbar-thumb:hover,
-.docs-source-panel textarea::-webkit-scrollbar-thumb:hover,
+.docs-editor-shell textarea::-webkit-scrollbar-thumb:hover,
 .docs-mdx-preview pre::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink-70) 74%, transparent); }
 /* Medium screens keep every primary destination reachable without a scrolling
    tab strip. The brand project picker remains the single project control. */

package/dist/web/task-view.js

@@ -49,7 +49,7 @@
   }
 
   function effectiveState(t) {
-    return t.state ?? t.status ?? "idle";
+    return window.OpenKanStatus?.displayState(t) ?? "pending";
   }
 
   // Build a clickable tag chip. When the user clicks one in the task view,
@@ -1028,89 +1028,24 @@
   }
 
   // ─── Render task header metadata strip ──────────────────────────────────────
-  // Clean, scannable dl/dt/dd grid with tag chips and assignees below.
+  // Tightened layout (tsk-KNQwScRg): primary context — assignees + tags +
+  // stale warning — stays front and center. Secondary context (column,
+  // category, priority, effort, runner, source, timestamps) is collapsed
+  // behind a native <details> "Show details" toggle so the panel reads
+  // cleanly at a glance. Priority duplicates the header status pill, so it
+  // is moved to the details section too. Nothing is deleted — every field
+  // remains reachable.
   function renderMetadata(root, task, lastActivity) {
     root.innerHTML = "";
     const meta = el("div", "task-header-meta");
 
-    // ── Definition list — label/value pairs in a clean grid ──────────────
-    const dl = el("dl", "meta-dl");
-
-    // Column → human label
-    if (task.column) {
-      const lbl = el("dt", null, { text: "Column" });
-      const val = el("dd", null, { text: COLUMN_LABEL[task.column] || task.column });
-      dl.append(lbl, val);
-    }
-
-    // Category
-    const cat = String(task.category || "").toLowerCase();
-    if (cat) {
-      const lbl = el("dt", null, { text: "Category" });
-      const catCls = CATEGORIES.has(cat) ? `tag-chip category c-${cat}` : "tag-chip category";
-      const val = el("dd", null, {});
-      val.append(el("span", catCls, { text: cat, title: `category: ${cat}` }));
-      dl.append(lbl, val);
-    }
-
-    // Priority
-    const p = PRIORITY_META[task.priority];
-    if (p && task.priority) {
-      const lbl = el("dt", null, { text: "Priority" });
-      const val = el("dd", null, {});
-      val.append(el("span", `tag-chip priority priority-${task.priority}`, {
-        text: `${p.code} ${p.label}`,
-        title: `priority: ${p.label}`,
-      }));
-      dl.append(lbl, val);
-    }
-
-    // Effort
-    if (task.effort) {
-      const effortText = String(task.effort).toUpperCase();
-      const lbl = el("dt", null, { text: "Effort" });
-      const val = el("dd", null, {});
-      val.append(el("span", "tag-chip effort", { text: effortText, title: `effort: ${effortText}` }));
-      dl.append(lbl, val);
-    }
-
-    // Agent / model
-    if (task.agent || task.model) {
-      const lbl = el("dt", null, { text: "Runner" });
-      const val = el("dd", "runner-value", {});
-      if (task.agent) val.append(el("span", "runner-agent", { text: task.agent }));
-      if (task.agent && task.model) val.append(el("span", "runner-sep", { text: " · " }));
-      if (task.model) val.append(el("span", "runner-model", { text: task.model }));
-      dl.append(lbl, val);
-    }
-
-    // Source path (where it was imported from). Render as a clickable link
-    // so the user can jump straight to the file. The path is repo-relative
-    // (e.g. "docs/roadmap.mdx"), so we prefix with "/" for an absolute path
-    // that the dev server will serve.
-    if (task.source?.path) {
-      const lbl = el("dt", null, { text: "Source" });
-      const val = el("dd", "source-dd", {});
-      const path = String(task.source.path);
-      const line = task.source.line ?? "?";
-      const link = el("a", "source-link", {
-        href: `/${path}`,
-        target: "_blank",
-        rel: "noopener",
-        title: `Open ${path}:${line} in a new tab`,
-      });
-      link.append(
-        el("span", "source-link-icon", { text: "📄", "aria-hidden": "true" }),
-        el("span", "source-link-text", { text: `${path}:${line}` }),
-      );
-      val.append(link);
-      dl.append(lbl, val);
-    }
+    // ── Always-visible: primary context ─────────────────────────────────
+    const dl = el("dl", "meta-dl meta-dl-primary");
 
     // Stale — surfaces when the server detected the source file has changed
     // since import. The user can re-derive tags via the organize endpoint
     // (kind: "rederive"). Falls back to /api/tasks/:id/organize if Thor's
-    // per-task endpoint ships first.
+    // per-task endpoint ships first. Always shown (rare, but critical).
     if (task.stale === true) {
       const lbl = el("dt", null, { text: "Stale" });
       const val = el("dd", "meta-stale", {});
@@ -1157,7 +1092,7 @@
       dl.append(lbl, val);
     }
 
-    // Assignees
+    // Assignees — visible by default (action-driving context).
     const assigneesList = getAssignees(task);
     if (assigneesList.length > 0) {
       const lbl = el("dt", null, { text: "Assignees" });
@@ -1173,26 +1108,21 @@
       dl.append(lbl, val);
     }
 
-    // Created / updated timestamps
-    if (task.createdAt) {
-      const lbl = el("dt", null, { text: "Created" });
-      const val = el("dd", null, { text: shortDate(task.createdAt), title: task.createdAt });
-      dl.append(lbl, val);
-    }
-    if (task.updatedAt && task.updatedAt !== task.createdAt) {
-      const lbl = el("dt", null, { text: "Updated" });
-      const val = el("dd", null, { text: relativeTime(task.updatedAt), title: task.updatedAt });
-      dl.append(lbl, val);
-    }
+    // Last activity — recent-activity is the user-named "front and center"
+    // content, so we promote it out of the collapsed details. Compact
+    // relative time so it doesn't add visual weight.
     if (lastActivity) {
-      const lbl = el("dt", null, { text: "Last activity" });
-      const val = el("dd", null, { text: relativeTime(lastActivity), title: lastActivity });
+      const lbl = el("dt", null, { text: "Activity" });
+      const val = el("dd", "meta-last-activity", {
+        text: relativeTime(lastActivity),
+        title: lastActivity,
+      });
       dl.append(lbl, val);
     }
 
     if (dl.children.length > 0) meta.append(dl);
 
-    // ── Tag chips row — below the dl ────────────────────────────────────
+    // ── Tag chips row — also always-visible ─────────────────────────────
     const tags = Array.isArray(task.tags) ? task.tags : [];
     if (tags.length > 0) {
       const tagRow = el("div", "meta-tag-row");
@@ -1202,6 +1132,106 @@
       meta.append(tagRow);
     }
 
+    // ── Collapsed secondary metadata behind a native <details> toggle ────
+    const detailDl = el("dl", "meta-dl meta-dl-details");
+    let hasDetailItem = false;
+    const pushDetail = (lblText, valueEl) => {
+      detailDl.append(
+        el("dt", null, { text: lblText }),
+        valueEl,
+      );
+      hasDetailItem = true;
+    };
+
+    // Column → human label
+    if (task.column) {
+      pushDetail("Column", el("dd", null, { text: COLUMN_LABEL[task.column] || task.column }));
+    }
+
+    // Category
+    const cat = String(task.category || "").toLowerCase();
+    if (cat) {
+      const catCls = CATEGORIES.has(cat) ? `tag-chip category c-${cat}` : "tag-chip category";
+      const val = el("dd", null, {});
+      val.append(el("span", catCls, { text: cat, title: `category: ${cat}` }));
+      pushDetail("Category", val);
+    }
+
+    // Priority — moved here from the always-visible dl; it duplicates the
+    // pill in the header status column, but stays reachable.
+    const p = PRIORITY_META[task.priority];
+    if (p && task.priority) {
+      const val = el("dd", null, {});
+      val.append(el("span", `tag-chip priority priority-${task.priority}`, {
+        text: `${p.code} ${p.label}`,
+        title: `priority: ${p.label}`,
+      }));
+      pushDetail("Priority", val);
+    }
+
+    // Effort
+    if (task.effort) {
+      const effortText = String(task.effort).toUpperCase();
+      const val = el("dd", null, {});
+      val.append(el("span", "tag-chip effort", { text: effortText, title: `effort: ${effortText}` }));
+      pushDetail("Effort", val);
+    }
+
+    // Agent / model
+    if (task.agent || task.model) {
+      const val = el("dd", "runner-value", {});
+      if (task.agent) val.append(el("span", "runner-agent", { text: task.agent }));
+      if (task.agent && task.model) val.append(el("span", "runner-sep", { text: " · " }));
+      if (task.model) val.append(el("span", "runner-model", { text: task.model }));
+      pushDetail("Runner", val);
+    }
+
+    // Source path (where it was imported from). Render as a clickable link
+    // so the user can jump straight to the file. The path is repo-relative
+    // (e.g. "docs/roadmap.mdx"), so we prefix with "/" for an absolute path
+    // that the dev server will serve.
+    if (task.source?.path) {
+      const val = el("dd", "source-dd", {});
+      const path = String(task.source.path);
+      const line = task.source.line ?? "?";
+      const link = el("a", "source-link", {
+        href: `/${path}`,
+        target: "_blank",
+        rel: "noopener",
+        title: `Open ${path}:${line} in a new tab`,
+      });
+      link.append(
+        el("span", "source-link-icon", { text: "📄", "aria-hidden": "true" }),
+        el("span", "source-link-text", { text: `${path}:${line}` }),
+      );
+      val.append(link);
+      pushDetail("Source", val);
+    }
+
+    // Created / updated timestamps (long-form).
+    if (task.createdAt) {
+      pushDetail(
+        "Created",
+        el("dd", null, { text: shortDate(task.createdAt), title: task.createdAt }),
+      );
+    }
+    if (task.updatedAt && task.updatedAt !== task.createdAt) {
+      pushDetail(
+        "Updated",
+        el("dd", null, { text: relativeTime(task.updatedAt), title: task.updatedAt }),
+      );
+    }
+
+    if (hasDetailItem) {
+      const details = el("details", "task-meta-details");
+      const summary = el("summary", "task-meta-details-toggle", {
+        text: "Show details",
+        "aria-label": "Show secondary metadata (column, category, priority, effort, runner, source, timestamps)",
+      });
+      details.append(summary, detailDl);
+      meta.append(details);
+    }
+
     root.append(meta);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polderlabs/openkan",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Local-first MDX kanban with native Claude Code control plane, .ok/ planning system, and embedded chat sidebar.",
   "type": "module",
   "license": "MIT",