@polderlabs/openkan 0.4.0

package/dist/web/cross-tab.js

@@ -0,0 +1,102 @@
+// OpenKan — cross-tab sync (M13).
+// window.OpenKanCrossTab = { publish(event, data), subscribe(event, handler) }
+//
+// Thin wrapper around BroadcastChannel('openkan'). When SSE is unavailable or
+// behind a load balancer that strips long-lived connections, this keeps two
+// tabs of the same project in sync. The channel is fire-and-forget on the
+// publisher side; subscribers receive the parsed payload from message events
+// on other tabs of the same browser, same origin.
+//
+// The event names here mirror what SSE would emit, so app.js can subscribe to
+// cross-tab and SSE with the same handler shape.
+//
+// Graceful degradation: if BroadcastChannel isn't available (older browsers,
+// sandboxed contexts), the wrapper becomes a no-op — publish() does nothing
+// and subscribe() returns an unsubscribe that does nothing. Cross-tab sync is
+// a "nice to have"; SSE remains the source of truth.
+
+(() => {
+  "use strict";
+
+  const CHANNEL_NAME = "openkan";
+
+  /** @type {BroadcastChannel|null} */
+  let channel = null;
+  /** @type {Map<string, Set<Function>>} */
+  const handlers = new Map();
+
+  // Skip origin-mismatch channels silently — the wrapper assumes same-origin.
+  if (typeof BroadcastChannel !== "undefined") {
+    try {
+      channel = new BroadcastChannel(CHANNEL_NAME);
+      channel.addEventListener("message", (ev) => {
+        const data = ev.data;
+        if (!data || typeof data !== "object") return;
+        const { event, payload } = data;
+        if (typeof event !== "string") return;
+        const set = handlers.get(event);
+        if (!set) return;
+        for (const fn of set) {
+          try { fn(payload); } catch (e) {
+            console.error(`[cross-tab] handler for ${event} threw:`, e);
+          }
+        }
+      });
+      // Close on page unload so we don't keep a stale handle around.
+      window.addEventListener("pagehide", () => {
+        try { channel?.close(); } catch {}
+        channel = null;
+      });
+    } catch (err) {
+      // SecurityError / disabled — fall through to no-op below.
+      channel = null;
+    }
+  }
+
+  /**
+   * Publish an event to other tabs. Returns true if a channel is available,
+   * false if the call was a no-op.
+   * @param {string} event
+   * @param {any} data
+   * @returns {boolean}
+   */
+  function publish(event, data) {
+    if (!channel) return false;
+    if (typeof event !== "string" || !event) return false;
+    try {
+      channel.postMessage({ event, payload: data });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Subscribe to events from other tabs. Returns an unsubscribe function.
+   * @param {string} event
+   * @param {(data:any) => void} handler
+   * @returns {() => void}
+   */
+  function subscribe(event, handler) {
+    if (typeof event !== "string" || !event || typeof handler !== "function") {
+      return () => {};
+    }
+    let set = handlers.get(event);
+    if (!set) { set = new Set(); handlers.set(event, set); }
+    set.add(handler);
+    return () => {
+      const s = handlers.get(event);
+      if (!s) return;
+      s.delete(handler);
+      if (s.size === 0) handlers.delete(event);
+    };
+  }
+
+  /**
+   * Test-only: expose hasChannel() so callers can detect whether the wrapper
+   * is actually live. Not part of the public API used by app.js.
+   */
+  function hasChannel() { return channel !== null; }
+
+  window.OpenKanCrossTab = { publish, subscribe, hasChannel };
+})();

package/dist/web/docs-view.js

@@ -0,0 +1,168 @@
+// OpenKan Docs — preview-first MDX workspace with an always-available source editor.
+(() => {
+  "use strict";
+  const { api } = window.OpenKanAPI;
+  let state = null;
+  let renderTimer = 0;
+  const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;", "'":"&#39;" })[c]);
+  const DOC_FILE_PATTERN = /\.(md|mdx|txt)$/i;
+  const flatten = (entries, out = []) => { for (const entry of entries || []) entry.isDir ? flatten(entry.children, out) : out.push(entry); return out; };
+  const safePath = (value = "") => String(value).trim().replace(/^\/+/, "").replace(/\.\.+/g, "");
+  const askPath = (value = "") => safePath(prompt("Document path relative to docs/", value) || "");
+  const fileName = (path) => path ? path.split("/").pop() : "Untitled document";
+  const relativeTime = (iso) => iso ? new Intl.DateTimeFormat(undefined, { month:"short", day:"numeric", hour:"numeric", minute:"2-digit" }).format(new Date(iso)) : "";
+
+  function sourceToolbar() {
+    return `<div class="docs-source-tools" aria-label="Markdown formatting"><button data-doc-format="h2" title="Heading">H2</button><button data-doc-format="bold" title="Bold"><b>B</b></button><button data-doc-format="italic" title="Italic"><i>I</i></button><button data-doc-format="ul" title="Bulleted list">• List</button><button data-doc-format="ol" title="Numbered list">1. List</button><button data-doc-format="link" title="Link">↗</button><button data-doc-format="code" title="Code">&lt;/&gt;</button></div>`;
+  }
+  function visibleTree(entries, query = "") {
+    return (entries || []).flatMap((entry) => {
+      if (entry.isDir) {
+        const children = visibleTree(entry.children, query);
+        return children.length ? [{ ...entry, children }] : [];
+      }
+      return DOC_FILE_PATTERN.test(entry.path) && (!query || entry.path.toLowerCase().includes(query)) ? [entry] : [];
+    });
+  }
+  function directoryCount(entries) {
+    return (entries || []).reduce((count, entry) => count + (entry.isDir ? directoryCount(entry.children) : 1), 0);
+  }
+  function openParentDirectories(path) {
+    const parts = String(path || "").split("/").filter(Boolean);
+    parts.pop();
+    let current = "";
+    for (const part of parts) { current = current ? `${current}/${part}` : part; state.expandedDirs.add(current); }
+  }
+  function docTree(entries, depth = 0) {
+    return entries.map((entry) => {
+      if (!entry.isDir) {
+        const extension = entry.name.includes(".") ? entry.name.split(".").pop().toUpperCase() : "TEXT";
+        return `<button class="docs-tree-file${entry.path === state.path ? " active" : ""}" data-doc-path="${esc(entry.path)}" title="${esc(entry.path)}"><strong>${esc(entry.name)}</strong><span>${extension}</span></button>`;
+      }
+      const open = state.docFilter || state.expandedDirs.has(entry.path) || state.path.startsWith(`${entry.path}/`);
+      const children = docTree(entry.children || [], depth + 1);
+      return `<details class="docs-tree-directory" data-doc-directory="${esc(entry.path)}" ${open ? "open" : ""}><summary class="docs-tree-directory-summary"><span class="docs-tree-directory-name">${esc(entry.name)}</span><small>${directoryCount(entry.children)}</small></summary><div class="docs-tree-children" style="--docs-tree-depth:${depth + 1}">${children}</div></details>`;
+    }).join("");
+  }
+  function renderTree() {
+    const list = state?.root?.querySelector("[data-doc-list]");
+    if (!list) return;
+    const query = String(state.docFilter || "").trim().toLowerCase();
+    const tree = visibleTree(state.entries, query);
+    list.innerHTML = docTree(tree) || `<div class="docs-empty-tree">${query ? "No documents match this filter." : "No documents yet.<br>Create your first workspace note."}</div>`;
+    list.querySelectorAll("[data-doc-path]").forEach((button) => button.addEventListener("click", () => load(button.dataset.docPath)));
+    list.querySelectorAll("[data-doc-directory]").forEach((directory) => directory.addEventListener("toggle", () => {
+      if (directory.open) state.expandedDirs.add(directory.dataset.docDirectory);
+      else state.expandedDirs.delete(directory.dataset.docDirectory);
+    }));
+  }
+  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";
+    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>
+        </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();
+  }
+  function wire() {
+    const root = state.root;
+    renderTree();
+    root.querySelectorAll("[data-doc-action]").forEach((button) => button.addEventListener("click", () => action(button.dataset.docAction)));
+    root.querySelectorAll("[data-doc-format]").forEach((button) => button.addEventListener("click", () => applyFormat(button.dataset.docFormat)));
+    root.querySelector("#docs-editor-input")?.addEventListener("input", (event) => {
+      state.content = event.target.value; state.dirty = true;
+      const status = root.querySelector(".docs-file-ident small");
+      if (status) status.textContent = `${state.path || "Choose a path before saving"} · Unsaved draft`;
+      schedulePreview();
+    });
+    root.querySelector("[data-doc-filter]")?.addEventListener("input", (event) => {
+      state.docFilter = event.target.value;
+      renderTree();
+    });
+    root.addEventListener("contextmenu", contextMenu);
+    document.addEventListener("click", dismissMenu, { once: true });
+  }
+  async function load(path) {
+    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 });
+    render();
+  }
+  async function refresh({ loadInitial = false } = {}) {
+    const docs = await api("GET", "/api/docs");
+    state.entries = docs.entries || [];
+    const files = flatten(state.entries).filter((entry) => DOC_FILE_PATTERN.test(entry.path));
+    if (loadInitial && files.length) return load(state.initialDoc && files.some((file) => file.path === state.initialDoc) ? state.initialDoc : files[0].path);
+    render();
+  }
+  async function renderPreview() {
+    if (!state) return;
+    const rendered = await api("POST", "/api/docs/render", { content: state.content });
+    state.html = rendered.html || rendered.rendered || "";
+  }
+  function schedulePreview() {
+    clearTimeout(renderTimer);
+    renderTimer = setTimeout(async () => {
+      try { await renderPreview(); } catch { return; }
+      if (!state?.root) return;
+      const preview = state.root.querySelector("[data-doc-preview]");
+      if (preview) preview.innerHTML = state.html;
+    }, 480);
+  }
+  async function save() {
+    if (!state.path) return;
+    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 });
+    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; }
+    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)}`;
+    textarea.value = output; textarea.focus(); textarea.setSelectionRange(start + before.length, start + before.length + chosen.length);
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  function applyFormat(kind) {
+    if (kind === "h2") return insertAtSelection("## ", "", "Heading");
+    if (kind === "bold") return insertAtSelection("**", "**", "bold text");
+    if (kind === "italic") return insertAtSelection("*", "*", "emphasis");
+    if (kind === "ul") return insertAtSelection("- ", "", "List item");
+    if (kind === "ol") return insertAtSelection("1. ", "", "List item");
+    if (kind === "code") return insertAtSelection("`", "`", "code");
+    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 === "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."); }
+  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"); }
+  }
+  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 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; } };
+})();

package/dist/web/experience.css

@@ -0,0 +1,165 @@
+/* Chat and task workflows: scoped refinements using the workspace theme. */
+.chat-sidebar[hidden] { display: none !important; }
+.chat-sidebar { container-type: inline-size; box-shadow: none; }
+.chat-sidebar .chat-sidebar__topbar { min-height: 60px; padding: 12px 18px; gap: 12px; background: var(--bg); }
+.chat-sidebar .chat-sidebar__session-chip { min-width: 0; flex: 1; max-width: 100%; }
+.chat-sidebar .chat-sidebar__session-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-sidebar .chat-sidebar__new-chat { flex-shrink: 0; min-height: 36px; }
+.chat-sidebar .chat-sidebar__workspace-tools { order: 2; padding: 0 20px 20px; border: 0; background: transparent; }
+.chat-sidebar .chat-sidebar__workspace-label { display: none; }
+.chat-sidebar .chat-sidebar__hero { order: 1; flex: 1 1 auto; min-height: 100px; padding: 32px 24px 20px; justify-content: center; }
+.chat-sidebar .chat-sidebar__hero-title { font-size: 24px; line-height: 1.25; letter-spacing: -.025em; max-width: 320px; }
+.chat-sidebar .chat-sidebar__hero-copy { font-size: 13px; line-height: 1.65; max-width: 320px; margin: 12px auto 0; }
+.chat-sidebar .chat-sidebar__hero-mark { width: 38px; height: 38px; margin-bottom: 18px; }
+.chat-sidebar .chat-sidebar__quick-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
+.chat-sidebar .chat-sidebar__quick-prompts button { min-height: 42px; white-space: normal; text-align: left; padding: 10px 12px; font-size: 12px; color: var(--text-dim); background: var(--bg-elev); border-color: var(--border); }
+.chat-sidebar .chat-sidebar__quick-prompts button::before { display: none; }
+.chat-sidebar.chat-sidebar--has-messages .chat-sidebar__workspace-tools { display: none; }
+.chat-sidebar .chat-sidebar__transcript { order: 2; flex: 1 1 0; min-height: 0; width: 100%; max-width: none; padding: 24px 20px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; overscroll-behavior: contain; }
+.chat-sidebar:not(.chat-sidebar--has-messages) .chat-sidebar__transcript { display: none; }
+.chat-sidebar .chat-sidebar__composer { order: 3; position: relative; flex: 0 0 auto; padding: 12px 16px 10px; border: 0; background: var(--bg); width: 100%; box-sizing: border-box; }
+.chat-sidebar .chat-sidebar__composer-surface { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elev-2); box-shadow: 0 4px 18px #00000012; }
+.chat-sidebar .chat-sidebar__composer-surface:focus-within { border-color: var(--border); box-shadow: 0 4px 18px #00000012; outline: none; }
+.chat-sidebar .chat-sidebar__composer-input { width: 100%; min-height: 72px; margin: 0; padding: 16px 16px 10px; font: 400 14px/1.6 var(--font-sans, system-ui); color: var(--text); background: transparent; border: 0 !important; outline: none !important; box-shadow: none !important; border-radius: 0; }
+.chat-sidebar .chat-sidebar__composer-input::placeholder { color: var(--text-mute); }
+.chat-sidebar .chat-sidebar__composer-input::selection { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
+.chat-sidebar .chat-sidebar__composer-footer { display: flex; flex-wrap: wrap; gap: 4px; min-height: 46px; padding: 6px 8px 8px; }
+.chat-sidebar .chat-sidebar__composer-model { min-width: 0; max-width: 42%; min-height: 32px; padding-inline: 6px; color: var(--text-dim); }
+.chat-sidebar .chat-sidebar__composer-model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-sidebar .chat-sidebar__composer-send, .chat-sidebar .chat-sidebar__composer-abort { margin-left: auto; flex: 0 0 34px; width: 34px; height: 34px; }
+.chat-sidebar .chat-sidebar__send-hint { display: none; }
+.chat-sidebar button:disabled { opacity: .42; cursor: not-allowed; }
+.chat-sidebar button:focus-visible, .chat-sidebar summary:focus-visible { outline: 2px solid var(--text-dim); outline-offset: 3px; }
+.chat-sidebar__input-help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 4px 0; color: var(--text-mute); font-size: 10px; line-height: 1.5; }
+.chat-sidebar__feedback { margin: 8px 4px 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
+.chat-sidebar__feedback.is-error { color: var(--error, #e87979); }
+.chat-sidebar .chat-sidebar__disclaimer { margin: 6px 0 0; font-size: 10px; line-height: 1.4; }
+.chat-sidebar .chat-bubble-row { margin-block: 0 26px; min-width: 0; }
+.chat-sidebar .chat-bubble-user { border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--accent) 17%, var(--bg-elev)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); max-width: 90%; }
+.chat-sidebar .chat-bubble-body { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
+.chat-sidebar .chat-bubble-body p { margin: 0 0 12px; }
+.chat-sidebar .chat-bubble-body pre { max-width: 100%; overflow: auto; padding: 14px; border-radius: 10px; font-size: 12px; line-height: 1.65; }
+.chat-sidebar .chat-bubble-body table { display: block; max-width: 100%; overflow: auto; }
+/* Preserve the bubble height between debounced incremental markdown renders
+   so the message-done swap doesn't visibly reflow the transcript. */
+.chat-sidebar .chat-bubble-body-stream { min-height: 1.4em; }
+.chat-sidebar .chat-bubble-meta { gap: 8px; font-size: 10px; letter-spacing: .025em; color: var(--text-mute); margin-bottom: 10px; }
+.chat-sidebar .chat-copy-button { width: 30px; height: 30px; font-size: 19px; border-radius: 6px; color: var(--text-dim); }
+.chat-sidebar .chat-bubble-streaming-indicator { min-height: 30px; gap: 10px; margin: 4px 0 18px; }
+.chat-sidebar .chat-sidebar-new-messages { position: absolute; z-index: 7; top: 72px; bottom: auto; right: 20px; padding: 7px 12px; border-radius: 18px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 3px 12px #0002; }
+.chat-sidebar .chat-sidebar__popover { max-width: calc(100% - 16px); max-height: min(440px, 65dvh); overflow-y: auto; scrollbar-width: thin; border-radius: 12px; border-color: var(--border-strong); }
+.chat-sidebar .chat-sidebar__popover-list label { min-height: 38px; }
+.chat-sidebar .chat-sidebar__mention-chip { background: var(--bg-elev); border-color: var(--border); color: var(--text-dim); }
+.workspace-mode-chat .chat-sidebar .chat-sidebar__composer { position: relative; inset: auto !important; transform: none; width: min(100% - 48px, 820px) !important; max-width: 820px; margin: 0 auto 16px; padding: 0 !important; background: transparent; }
+.workspace-mode-chat .chat-sidebar .chat-sidebar__transcript { padding: 28px max(24px, calc((100% - 800px) / 2)); }
+.workspace-mode-chat .chat-sidebar .chat-sidebar__workspace-tools { width: min(100% - 48px, 760px); margin-inline: auto; padding: 0 0 28px; }
+.workspace-mode-chat .chat-sidebar .chat-sidebar__hero { padding-top: 32px; }
+.workspace-mode-chat .chat-sidebar .chat-sidebar__hero-title { font-size: 30px; max-width: 440px; }
+@container (max-width: 380px) {
+  .chat-sidebar__input-help span:last-child { display: none; }
+  .chat-sidebar .chat-sidebar__composer { padding-inline: 10px; }
+  .chat-sidebar .chat-sidebar__composer-model { max-width: 38%; font-size: 11px; }
+  .chat-sidebar .chat-sidebar__composer-effort { max-width: 29%; }
+}
+#modal-backdrop .modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); border-radius: 16px; display: flex; flex-direction: column; }
+#modal-backdrop .modal-header { flex: 0 0 auto; padding: 20px 24px 16px; }
+#new-task-form { overflow-y: auto; min-height: 0; padding: 0 24px 20px; display: flex; flex-direction: column; gap: 18px; }
+#new-task-form .field { gap: 8px; margin: 0; min-width: 0; }
+#new-task-form .field > span { display: flex; align-items: center; gap: 8px; }
+#new-task-form .field-required, #new-task-form .field-optional { color: var(--text-mute); font-size: 11px; font-weight: 400; }
+#new-task-form .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+#new-task-form input:not([type="checkbox"]), #new-task-form textarea, #new-task-form select { width: 100%; min-height: 40px; font-size: 14px; }
+#new-task-form input[aria-invalid="true"] { border-color: var(--error, #e87979); }
+.task-create-context { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.6; }
+.task-create-options { border-block: 1px solid var(--border); padding-block: 14px; }
+.task-create-options summary { cursor: pointer; color: var(--text); font-size: 13px; }
+.task-create-options summary span { margin-left: 8px; color: var(--text-mute); font-size: 11px; }
+.task-create-options p { font-size: 12px; line-height: 1.6; color: var(--text-dim); margin: 12px 0; }
+.task-create-open { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; }
+#task-create-error { margin: 0; padding: 10px 12px; border-radius: 8px; color: var(--error, #e87979); background: color-mix(in srgb, var(--error, #e87979) 8%, transparent); font-size: 13px; line-height: 1.6; }
+#new-task-form .modal-footer { padding: 14px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.task-create-shortcut { flex: 1 0 100%; color: var(--text-mute); font-size: 11px; }
+#task-discard-draft { margin-right: auto; color: var(--text-dim); }
+.project-switcher-identity { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
+.project-switcher-identity .project-switcher-name { max-width: none; }
+.project-switcher-path { color: var(--text-mute); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
+.project-switcher-item { min-height: 58px; }
+.project-switcher-popover { max-height: min(560px, 75dvh); overflow-y: auto; scrollbar-width: thin; }
+@media (max-width: 600px) {
+  #modal-backdrop .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
+  #modal-backdrop .modal-header { padding: 16px; }
+  #new-task-form { padding: 0 16px 16px; gap: 14px; }
+  .task-create-shortcut { display: none; }
+  .chat-sidebar .chat-sidebar__hero { padding: 20px; }
+  .chat-sidebar .chat-sidebar__hero-title { font-size: 23px; }
+  .workspace-mode-chat .chat-sidebar .chat-sidebar__composer { width: calc(100% - 24px) !important; margin-bottom: 10px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-sidebar *, #modal-backdrop *, .project-switcher-item { scroll-behavior: auto !important; transition: none !important; }
+}
+#new-task-form { padding-top: 12px; }
+#new-task-form .modal-footer { position: sticky; bottom: -20px; z-index: 1; background: var(--bg-elev); margin-inline: -24px; padding: 12px 24px 20px; border-top: 1px solid var(--border); }
+#new-task-form textarea { font-family: inherit; line-height: 1.6; }
+/* Let navigation reflow when the chat rail leaves less horizontal room. */
+.topbar { display: flex; gap: 12px; flex-wrap: wrap; height: auto; min-height: 68px; padding-block: 10px; }
+.topbar .brand { min-width: 0; flex: 0 1 auto; }
+.topbar .topbar-tabs { margin-left: auto; flex: 0 0 auto; }
+.topbar .topbar-right { margin-left: auto; }
+.topbar .workspace-mode { display: flex; flex: 0 0 auto; }
+.topbar .brand-project-chip { min-width: 0; max-width: 190px; }
+body.chat-sidebar-open:not(.workspace-mode-chat) .topbar .brand-wordmark { width: 30px; -webkit-mask-image: url('./brand/logo.svg'); mask-image: url('./brand/logo.svg'); }
+@media (min-width: 901px) and (max-width: 1500px) {
+  body.chat-sidebar-open:not(.workspace-mode-chat) .topbar .topbar-tabs { order: 5; margin-left: 0; }
+  body.chat-sidebar-open:not(.workspace-mode-chat) .topbar .workspace-mode { order: 4; }
+}
+@media (max-width: 900px) {
+  .topbar .brand-wordmark { width: 30px; -webkit-mask-image: url('./brand/logo.svg'); mask-image: url('./brand/logo.svg'); }
+  .topbar .brand-project-chip { max-width: 160px; }
+  .topbar .topbar-tabs { width: auto; order: 4; }
+  .topbar .workspace-mode { order: 3; }
+}
+@media (max-width: 600px) {
+  #new-task-form .modal-footer { bottom: -16px; margin-inline: -16px; padding: 12px 16px 16px; }
+}
+.chat-sidebar .chat-sidebar__hero { flex: 1 0 auto; }
+.workspace-mode-chat #board .column:nth-child(n + 3) { display: flex; }
+@media (max-height: 700px) {
+  .chat-sidebar .chat-sidebar__hero, .workspace-mode-chat .chat-sidebar .chat-sidebar__hero { min-height: 100px; padding: 16px 20px; }
+  .chat-sidebar .chat-sidebar__hero-mark { display: none; }
+  .chat-sidebar .chat-sidebar__hero-title, .workspace-mode-chat .chat-sidebar .chat-sidebar__hero-title { font-size: 24px; margin: 0; }
+  .chat-sidebar .chat-sidebar__hero-copy { margin-top: 8px; }
+  .chat-sidebar .chat-sidebar__workspace-tools, .workspace-mode-chat .chat-sidebar .chat-sidebar__workspace-tools { padding-bottom: 16px; }
+}
+.chat-task-search { display: grid; gap: 10px; padding: 12px; font-size: 13px; color: var(--text-dim); }
+.chat-task-search input { width: 100%; min-height: 38px; }
+.chat-task-option { display: block; width: 100%; text-align: left; border: 0; padding: 12px; background: transparent; color: var(--text); font-size: 13px; border-radius: 8px; }
+.chat-task-option:hover { background: var(--bg-elev-2); }
+[data-task-results] { padding: 4px; font-size: 12px; }
+@media (max-width: 600px) {
+  .topbar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
+  .topbar .brand { grid-row: 1; grid-column: 1 / 3; }
+  .topbar #home-page-btn { grid-row: 1; grid-column: 3; }
+  .topbar .workspace-mode { grid-row: 2; grid-column: 1; }
+  .topbar .topbar-right { grid-row: 2; grid-column: 2 / 4; width: auto; min-width: 0; }
+  .topbar .topbar-tabs { grid-row: 3; grid-column: 1 / -1; margin: 0; justify-self: stretch; width: 100%; }
+  .chat-sidebar .chat-sidebar__hero-title, .workspace-mode-chat .chat-sidebar .chat-sidebar__hero-title { font-size: 24px; }
+}
+.chat-sidebar__composer-agent { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; max-width: 180px; padding: 4px 8px; border: 0; border-radius: 7px; color: var(--text); background: transparent; font: 600 12px/1.4 inherit; }
+.chat-sidebar__composer-agent:hover { background: var(--bg-elev); }
+#chat-sidebar-agent-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-agent-option { display: grid; gap: 4px; min-width: 0; }
+.chat-agent-option strong { font-size: 13px; color: var(--text); }
+.chat-agent-option small { font-size: 11px; line-height: 1.5; font-weight: 400; color: var(--text-dim); }
+#chat-sidebar-agent-popover { width: 360px; }
+@container (max-width: 480px) {
+  .chat-sidebar__composer-agent { flex: 1 0 100%; max-width: 100%; justify-content: flex-start; }
+}
+.workspace-mode-chat:has(#task-view:not([hidden])) .chat-sidebar { right: min(48vw, 640px); }
+.workspace-mode-chat #task-view:not([hidden]) { position: fixed; top: var(--topbar-height); bottom: 0; right: 0; left: auto; width: min(48vw, 640px); z-index: 20; overflow: auto; padding: 16px; background: var(--bg); border-left: 1px solid var(--border); }
+.workspace-mode-chat #task-view .task-main { grid-template-columns: 1fr; }
+.workspace-mode-chat #task-view .task-header { display: flex; flex-wrap: wrap; gap: 12px; }
+.workspace-mode-chat #task-view .task-header .task-title { flex: 1 0 100%; }
+@media (max-width: 900px) {
+  .workspace-mode-chat #task-view:not([hidden]) { width: 100%; z-index: 60; }
+  .workspace-mode-chat:has(#task-view:not([hidden])) .chat-sidebar { right: 0; }
+}

package/dist/web/goals-view.js

@@ -0,0 +1,45 @@
+// OpenKan Goals — durable PRD goals from the canonical .ok/ workspace.
+(() => {
+  "use strict";
+  const { api } = window.OpenKanAPI;
+  let root = null;
+  let mounted = false;
+  const STATUS_LABELS = { open: "Open", in_progress: "In progress", met: "Met", dropped: "Dropped" };
+  const STATUS_ORDER = ["open", "in_progress", "met", "dropped"];
+
+  function escapeHtml(value) {
+    const el = document.createElement("span");
+    el.textContent = String(value ?? "");
+    return el.innerHTML;
+  }
+  function goalRow(prd, goal) {
+    const actions = STATUS_ORDER.map((status) => `<button type="button" class="goal-status ${goal.status === status ? "is-active" : ""}" data-prd="${prd.id}" data-goal="${goal.id}" data-status="${status}" aria-pressed="${goal.status === status}">${STATUS_LABELS[status]}</button>`).join("");
+    return `<li class="goal-row"><div><span class="goal-copy">${escapeHtml(goal.text)}</span><span class="goal-current goal-${goal.status}">${STATUS_LABELS[goal.status]}</span></div><div class="goal-actions" aria-label="Set goal status">${actions}</div></li>`;
+  }
+  function render(prds) {
+    if (!root) return;
+    const activeGoals = prds.flatMap((prd) => prd.goals || []).filter((goal) => goal.status !== "met" && goal.status !== "dropped").length;
+    const metGoals = prds.flatMap((prd) => prd.goals || []).filter((goal) => goal.status === "met").length;
+    root.innerHTML = `<div class="goals-view">
+      <header class="goals-header"><div><span class="workspace-eyebrow">Planning workspace</span><h2>Goals</h2><p>Long-horizon outcomes stored directly in <code>.ok/prds</code>.</p></div><div class="goals-summary"><span><strong>${activeGoals}</strong> active</span><span><strong>${metGoals}</strong> met</span></div></header>
+      ${prds.length ? `<div class="goals-list">${prds.map((prd) => `<article class="goal-prd-card"><header><div><span class="goal-prd-id">${escapeHtml(prd.id)}</span><h3>${escapeHtml(prd.title)}</h3></div><span class="goal-prd-status">${escapeHtml(prd.status)}</span></header><p>${escapeHtml(prd.vision)}</p><ul>${(prd.goals || []).map((goal) => goalRow(prd, goal)).join("") || "<li class=\"goal-row-empty\">No goals defined yet.</li>"}</ul></article>`).join("")}</div>` : `<div class="goals-empty"><strong>No goals yet</strong><p>Create a PRD with <code>ok prd add</code>; it will appear here automatically.</p></div>`}
+    </div>`;
+  }
+  async function refresh() {
+    if (!root) return;
+    root.innerHTML = '<div class="goals-loading">Loading durable goals…</div>';
+    try { render((await api("GET", "/api/goals")).prds || []); }
+    catch (error) { root.innerHTML = `<div class="goals-empty"><strong>Goals could not load</strong><p>${escapeHtml(error.message)}</p></div>`; }
+  }
+  async function onClick(event) {
+    const button = event.target.closest("[data-goal][data-status]");
+    if (!button || button.classList.contains("is-active")) return;
+    button.disabled = true;
+    try { await api("PATCH", `/api/goals/${button.dataset.prd}/${button.dataset.goal}`, { status: button.dataset.status }); await refresh(); }
+    catch (error) { button.disabled = false; window.alert(`Could not update goal: ${error.message}`); }
+  }
+  window.OpenKanGoals = {
+    mount(target) { if (mounted && root === target) return; root = target; mounted = true; root.addEventListener("click", onClick); refresh(); },
+    unmount() { if (root) root.removeEventListener("click", onClick); root = null; mounted = false; },
+  };
+})();

package/dist/web/home-view.js

@@ -0,0 +1,113 @@
+// OpenKan Home — a live operational overview built from the active workspace.
+(() => {
+  "use strict";
+  const { api } = window.OpenKanAPI;
+  let frame = 0;
+  let activeRoot = null;
+  const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;", "'":"&#39;" })[c]);
+  const isWorktree = (root) => /\/(?:\.claude|\.git)\/worktrees\//.test(String(root || "").replace(/\\/g, "/"));
+  const flatten = (entries, out = []) => { for (const entry of entries || []) entry.isDir ? flatten(entry.children, out) : out.push(entry); return out; };
+  const countColumns = (tasks) => tasks.reduce((acc, task) => { acc[task.column || "backlog"] = (acc[task.column || "backlog"] || 0) + 1; return acc; }, {});
+  const short = (value) => String(value || "").replace(/^.*\//, "");
+
+  function flowSvg(days) {
+    const points = (days || []).map((day, index) => ({ x: 8 + index * (248 / Math.max(1, days.length - 1)), y: 56 - Math.min(48, (day.total || 0) * 8) }));
+    const line = points.map((point, index) => `${index ? "L" : "M"}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(" ");
+    const area = `${line} L256 64 L8 64 Z`;
+    return `<svg class="home-flow-chart" viewBox="0 0 264 70" role="img" aria-label="Task activity over the last 30 days"><path class="home-flow-area" d="${area}"/><path class="home-flow-line" d="${line}"/>${points.filter((_, i) => i % Math.max(1, Math.ceil(points.length / 7)) === 0).map((p) => `<circle cx="${p.x}" cy="${p.y}" r="2"/>`).join("")}</svg>`;
+  }
+
+  function drawNetwork(canvas, projects, agents, counts) {
+    cancelAnimationFrame(frame);
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    const resize = () => {
+      const box = canvas.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(box.width * dpr));
+      canvas.height = Math.max(1, Math.round(box.height * dpr));
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+      return box;
+    };
+    let box = resize();
+    const seed = [...projects, ...agents].map((item, index) => ({
+      label: item.name || item.id || `Node ${index + 1}`,
+      kind: item.root ? "project" : "agent",
+      angle: (Math.PI * 2 * index) / Math.max(1, projects.length + agents.length),
+      orbit: 0.21 + ((index * 37) % 38) / 100,
+      offset: index * 0.67,
+    }));
+    const taskNode = { label: `${(counts.backlog || 0) + (counts.todo || 0) + (counts.doing || 0) + (counts.review || 0)} active tasks`, kind: "task" };
+    const paint = (time) => {
+      if (!activeRoot?.contains(canvas)) return;
+      box = resize();
+      const width = box.width, height = box.height, cx = width * 0.5, cy = height * 0.5;
+      context.clearRect(0, 0, width, height);
+      const gradient = context.createRadialGradient(cx, cy, 4, cx, cy, Math.max(width, height) * .62);
+      gradient.addColorStop(0, "rgba(111, 104, 255, .15)"); gradient.addColorStop(1, "rgba(111, 104, 255, 0)");
+      context.fillStyle = gradient; context.fillRect(0, 0, width, height);
+      const nodes = seed.map((item, index) => {
+        const r = Math.min(width, height) * item.orbit;
+        const phase = time / 5000 + item.offset;
+        return { ...item, x: cx + Math.cos(item.angle + phase * .2) * r, y: cy + Math.sin(item.angle + phase * .24) * r, radius: item.kind === "project" ? 6 : 4 };
+      });
+      context.lineWidth = 1;
+      nodes.forEach((node, index) => {
+        const next = nodes[(index + 1) % Math.max(1, nodes.length)];
+        if (!next) return;
+        context.strokeStyle = "rgba(126, 149, 195, .22)";
+        context.beginPath(); context.moveTo(cx, cy); context.lineTo(node.x, node.y); context.lineTo(next.x, next.y); context.stroke();
+      });
+      nodes.forEach((node) => {
+        const color = node.kind === "project" ? "#7c73ff" : "#55d6a3";
+        context.fillStyle = color; context.shadowBlur = node.kind === "project" ? 15 : 10; context.shadowColor = color;
+        context.beginPath(); context.arc(node.x, node.y, node.radius, 0, Math.PI * 2); context.fill(); context.shadowBlur = 0;
+      });
+      context.fillStyle = "#111b2c"; context.strokeStyle = "rgba(135, 151, 180, .8)"; context.lineWidth = 1.2;
+      context.beginPath(); context.arc(cx, cy, 18, 0, Math.PI * 2); context.fill(); context.stroke();
+      context.fillStyle = "#e7edff"; context.font = "600 10px ui-monospace, monospace"; context.textAlign = "center"; context.fillText("WORK", cx, cy + 3);
+      frame = requestAnimationFrame(paint);
+    };
+    const observer = new ResizeObserver(() => { box = resize(); }); observer.observe(canvas);
+    canvas._openKanObserver = observer;
+    frame = requestAnimationFrame(paint);
+  }
+
+  function render(root, data) {
+    const projects = data.projects.filter((project) => !isWorktree(project.root));
+    const tasks = data.board.tasks || data.board || [];
+    const counts = countColumns(Array.isArray(tasks) ? tasks : []);
+    const activeAgents = data.agents.filter((agent) => /running|active|working|busy/i.test(String(agent.status || agent.state || "")));
+    const total = Object.values(counts).reduce((sum, count) => sum + count, 0);
+    const goals = data.goals.prds || data.goals || [];
+    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>
+      <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>
+    </section>`;
+    root.querySelectorAll("[data-home-action]").forEach((button) => button.addEventListener("click", () => window.OpenKanTabs?.activate?.(button.dataset.homeAction)));
+    drawNetwork(root.querySelector(".home-network"), projects, activeAgents, counts);
+  }
+
+  async function mount(root) {
+    activeRoot = root;
+    root.innerHTML = `<section class="home-view home-loading">Preparing workspace overview…</section>`;
+    const [projects, board, agents, goals, velocity, docs] = await Promise.allSettled([
+      api("GET", "/api/projects"), api("GET", "/api/board"), api("GET", "/api/claude/agents"), api("GET", "/api/goals"), api("GET", "/api/insights/velocity?days=30"), api("GET", "/api/docs"),
+    ]);
+    if (activeRoot !== root) return;
+    render(root, {
+      projects: projects.status === "fulfilled" ? projects.value.projects || [] : [],
+      board: board.status === "fulfilled" ? board.value : { tasks: [] },
+      agents: agents.status === "fulfilled" ? agents.value.agents || agents.value || [] : [],
+      goals: goals.status === "fulfilled" ? goals.value : [],
+      velocity: velocity.status === "fulfilled" ? velocity.value : { days: [] },
+      docs: docs.status === "fulfilled" ? docs.value : { entries: [] },
+    });
+  }
+  function unmount() { cancelAnimationFrame(frame); activeRoot?.querySelectorAll("canvas").forEach((canvas) => canvas._openKanObserver?.disconnect()); activeRoot = null; }
+  window.OpenKanHome = { mount, unmount };
+})();