npm - @polderlabs/openkan - Versions diffs - 0.4.0 - Mend

@polderlabs/openkan 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/CHANGELOG.md +226 -0
package/LICENSE +21 -0
package/README.md +318 -0
package/agents/openkan.md +254 -0
package/bin/install-agent.mjs +63 -0
package/bin/ok.mjs +17 -0
package/bin/openkan.mjs +10 -0
package/dist/.claude/skills/ok-planning/SKILL.md +285 -0
package/dist/.claude/skills/ok-planning/references/integration.md +153 -0
package/dist/.claude/skills/ok-planning/references/schemas.md +270 -0
package/dist/.claude/skills/ok-planning/references/workflows.md +185 -0
package/dist/.claude/skills/ok-planning/scripts/ok-init.sh +14 -0
package/dist/.claude/skills/ok-planning/scripts/ok-resume.sh +38 -0
package/dist/.claude/skills/ok-planning/scripts/ok-status.sh +24 -0
package/dist/agents/openkan.md +254 -0
package/dist/bin/install-agent.mjs +76 -0
package/dist/bin/ok-install.js +58 -0
package/dist/bin/ok.js +138 -0
package/dist/bin/openkan.js +804 -0
package/dist/commands/organize.md +15 -0
package/dist/kanban/agent-profile.js +8 -0
package/dist/kanban/archive.js +49 -0
package/dist/kanban/bizar.js +242 -0
package/dist/kanban/board.js +367 -0
package/dist/kanban/bulk.js +139 -0
package/dist/kanban/changelog.js +186 -0
package/dist/kanban/chat.js +1280 -0
package/dist/kanban/claude-state.js +974 -0
package/dist/kanban/comments.js +80 -0
package/dist/kanban/docs.js +144 -0
package/dist/kanban/fs.js +163 -0
package/dist/kanban/git.js +196 -0
package/dist/kanban/images.js +140 -0
package/dist/kanban/import.js +295 -0
package/dist/kanban/inputs.js +94 -0
package/dist/kanban/insights.js +140 -0
package/dist/kanban/io.js +75 -0
package/dist/kanban/mdx-render.js +348 -0
package/dist/kanban/mdx.js +231 -0
package/dist/kanban/projects.js +545 -0
package/dist/kanban/search.js +121 -0
package/dist/kanban/server.js +3296 -0
package/dist/kanban/tags.js +124 -0
package/dist/kanban/template.js +145 -0
package/dist/kanban/tsx-sandbox.js +187 -0
package/dist/kanban/watcher.js +270 -0
package/dist/ok/commands/goal.js +65 -0
package/dist/ok/commands/index.js +87 -0
package/dist/ok/commands/init.js +15 -0
package/dist/ok/commands/plan.js +155 -0
package/dist/ok/commands/prd.js +202 -0
package/dist/ok/commands/progress.js +31 -0
package/dist/ok/commands/task.js +377 -0
package/dist/ok/ids.js +98 -0
package/dist/ok/lock.js +156 -0
package/dist/ok/migrate.js +197 -0
package/dist/ok/schemas.js +402 -0
package/dist/ok/storage.js +222 -0
package/dist/skills/openkan/SKILL.md +111 -0
package/dist/skills/openkan/agents/openai.yaml +4 -0
package/dist/skills/openkan/examples/simple-task.mdx +34 -0
package/dist/skills/openkan/examples/with-ask.mdx +32 -0
package/dist/skills/openkan/examples/with-choice.mdx +51 -0
package/dist/skills/openkan/examples/with-preview.mdx +54 -0
package/dist/skills/openkan/references/api.md +169 -0
package/dist/skills/openkan/templates/task.mdx +46 -0
package/dist/web/api.js +257 -0
package/dist/web/app.js +4251 -0
package/dist/web/bizar.js +39 -0
package/dist/web/brand/agent-activity-sprite.svg +1 -0
package/dist/web/brand/banner-docs.svg +24 -0
package/dist/web/brand/banner.svg +32 -0
package/dist/web/brand/empty-sessions.svg +17 -0
package/dist/web/brand/empty-tasks.svg +17 -0
package/dist/web/brand/favicon.svg +9 -0
package/dist/web/brand/infinity-loader-animated.svg +220 -0
package/dist/web/brand/infinity-loader-spritesheet.svg +230 -0
package/dist/web/brand/logo-wordmark.svg +10 -0
package/dist/web/brand/logo.svg +9 -0
package/dist/web/brand/pixel-infinity-track.svg +1 -0
package/dist/web/brand/social-card.svg +26 -0
package/dist/web/changelog-view.js +456 -0
package/dist/web/charts.js +269 -0
package/dist/web/chat-sidebar.js +2397 -0
package/dist/web/chat-status-motion.js +154 -0
package/dist/web/claude-pane.js +820 -0
package/dist/web/command-palette.js +381 -0
package/dist/web/contributors-view.js +317 -0
package/dist/web/cross-tab.js +102 -0
package/dist/web/docs-view.js +168 -0
package/dist/web/experience.css +165 -0
package/dist/web/goals-view.js +45 -0
package/dist/web/home-view.js +113 -0
package/dist/web/images.js +311 -0
package/dist/web/index.html +485 -0
package/dist/web/insights.js +217 -0
package/dist/web/keyboard.js +446 -0
package/dist/web/mdx-viewer.js +600 -0
package/dist/web/path-picker.js +787 -0
package/dist/web/preview-frame.html +187 -0
package/dist/web/settings.js +582 -0
package/dist/web/style.css +8545 -0
package/dist/web/task-view.js +1759 -0
package/dist/web/vendor/gsap.min.js +11 -0
package/dist/web/workspace.css +1513 -0
package/package.json +71 -0
package/skills/openkan/SKILL.md +111 -0
package/skills/openkan/agents/openai.yaml +4 -0
package/skills/openkan/examples/simple-task.mdx +34 -0
package/skills/openkan/examples/with-ask.mdx +32 -0
package/skills/openkan/examples/with-choice.mdx +51 -0
package/skills/openkan/examples/with-preview.mdx +54 -0
package/skills/openkan/references/api.md +169 -0
package/skills/openkan/templates/task.mdx +46 -0

package/dist/web/index.html ADDED Viewed

@@ -0,0 +1,485 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <title>OpenKan</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="workspace.css?v=20260904-board-width" />
+    <link rel="stylesheet" href="experience.css" />
+    <!-- M-Brand: SVG favicon, mono-coral. No PNG fallback (spec: no rasters). -->
+    <link rel="icon" type="image/svg+xml" href="./brand/favicon.svg" />
+  </head>
+  <body>
+    <!-- M13: skip-link for keyboard / screen-reader users. Hidden until
+         focused, then promoted to the top-left of the viewport. -->
+    <a href="#board" class="skip-link">Skip to main content</a>
+    <header class="topbar" role="banner">
+      <div class="brand">
+        <!-- M-Brand: wordmark image replaces the inline K-mark span and the
+             OpenKan <h1>. The image uses currentColor for ink-80 in the
+             topbar context. -->
+        <span class="brand-wordmark" role="img" aria-label="OpenKan"></span>
+        <h1 class="visually-hidden">OpenKan</h1>
+        <!-- Brand-level project chip: clicking it opens the same project
+             switcher dropdown as the topbar-right chip. Owned by app.js. -->
+        <button id="brand-project-chip" class="brand-project-chip" type="button"
+                title="Switch project" aria-label="Switch project">
+          <span class="brand-project-label">Project</span>
+          <span class="brand-project-value">
+            <span class="brand-project-dot" aria-hidden="true"></span>
+            <span id="brand-project-name" class="brand-project-name">Loading…</span>
+          </span>
+          <span class="brand-project-caret" aria-hidden="true">▾</span>
+        </button>
+      </div>
+      <button id="home-page-btn" class="topbar-home" type="button" aria-label="Open workspace overview">
+        <span aria-hidden="true">⌂</span><span>Overview</span>
+      </button>
+      <div class="workspace-mode" role="group" aria-label="Workspace mode">
+        <button type="button" data-workspace-mode="tasks" class="active">Tasks</button>
+        <button type="button" data-workspace-mode="chat">Chat</button>
+      </div>
+      <nav class="topbar-tabs" role="tablist" aria-label="Dashboard sections">
+        <button type="button" class="tab" role="tab" data-tab="tasks" aria-selected="true">Tasks</button>
+        <button type="button" class="tab" role="tab" data-tab="docs" aria-selected="false">Docs</button>
+        <button type="button" class="tab" role="tab" data-tab="goals" aria-selected="false">Goals</button>
+        <button type="button" class="tab" role="tab" data-tab="agents" aria-selected="false">Agents</button>
+      </nav>
+      <div class="topbar-right">
+        <span id="status-pill" class="pill pill-disconnected" role="status" aria-live="polite">
+          <span class="pill-dot" aria-hidden="true"></span>
+          <span id="status-text">Disconnected</span>
+        </span>
+        <button id="new-task-btn" class="btn btn-primary topbar-create" type="button">
+          <span class="btn-symbol" aria-hidden="true">+</span>
+          <span class="btn-label">New task</span>
+        </button>
+        <!-- Project switcher: button shows the active project's name; clicking
+             opens a small popover listing every registered project. Owned by
+             web/app.js (OpenKanProjectSwitcher). -->
+        <div class="project-switcher" id="project-switcher">
+          <button id="project-switcher-btn" class="project-switcher-btn" type="button"
+                  aria-haspopup="menu" aria-expanded="false"
+                  title="Switch project">
+            <span class="project-switcher-dot" aria-hidden="true"></span>
+            <span id="project-switcher-label" class="project-switcher-label">…</span>
+            <span class="project-switcher-caret" aria-hidden="true">▾</span>
+          </button>
+          <div id="project-switcher-popover" class="project-switcher-popover" role="menu" hidden></div>
+        </div>
+        <div class="workspace-more">
+          <button id="workspace-more-btn" class="btn-icon" type="button" aria-label="More workspace pages" aria-haspopup="menu" aria-expanded="false" title="More workspace pages">•••</button>
+          <div id="workspace-more-menu" class="workspace-more-menu" role="menu" hidden>
+            <span class="workspace-more-label">Workspace mode</span>
+            <button type="button" role="menuitem" data-workspace-mode="tasks">Task mode</button>
+            <button type="button" role="menuitem" data-workspace-mode="chat">Chat mode</button>
+            <span class="workspace-more-separator"></span>
+            <button type="button" role="menuitem" data-workspace-page="changelog">Changelog</button>
+            <button type="button" role="menuitem" data-workspace-page="insights">Insights</button>
+            <button type="button" role="menuitem" data-workspace-page="contributors">Contributors</button>
+          </div>
+        </div>
+        <button id="settings-btn" class="btn-icon" type="button" aria-label="Settings" title="Settings">⚙</button>
+        <button id="chat-sidebar-toggle-btn" class="btn-icon" type="button"
+                aria-label="Toggle chat sidebar" aria-controls="chat-sidebar"
+                aria-expanded="false" title="Chat sidebar (Alt+C)">💬</button>
+        <button id="palette-btn" class="btn-icon" type="button"
+                aria-label="Open command palette (Cmd/Ctrl K)"
+                title="Command palette (Cmd/Ctrl K)">⌘K</button>
+      </div>
+    </header>
+    <!-- Toast container (used by settings / changelog / contributors) -->
+    <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>
+    <main class="dashboard">
+      <section id="tab-home" class="tab-pane" role="tabpanel" data-tab="home" hidden>
+        <div id="home-root" class="view-root"></div>
+      </section>
+      <!-- ─── TAB: Tasks ───────────────────────────────────────────────── -->
+      <section id="tab-tasks" class="tab-pane" role="tabpanel" data-tab="tasks">
+        <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">
+              <span id="overview-total" class="overview-value">0</span>
+              <span class="overview-label">Visible</span>
+            </div>
+            <div class="overview-stat is-doing">
+              <span id="overview-doing" class="overview-value">0</span>
+              <span class="overview-label">In progress</span>
+            </div>
+            <div class="overview-stat is-review">
+              <span id="overview-review" class="overview-value">0</span>
+              <span class="overview-label">In review</span>
+            </div>
+            <div class="overview-stat is-done">
+              <span id="overview-done" class="overview-value">0</span>
+              <span class="overview-label">Done</span>
+            </div>
+          </div>
+        </div>
+        <!-- Saved filter chips row (populated by app.js). Hidden when empty. -->
+        <div id="saved-filters-bar" class="saved-filters-bar" hidden>
+          <span class="filter-bar-label">Saved</span>
+          <div id="saved-filters-list" class="saved-filters-list"></div>
+        </div>
+        <!-- Category / tag / sort filter bar. Populated + wired up by app.js. -->
+        <div class="filter-bar" id="filter-bar" role="region" aria-label="Filter tasks">
+          <div class="filter-primary">
+            <div class="filter-bar-row search" id="filter-search">
+            <span class="search-icon" aria-hidden="true"></span>
+            <input type="search" id="search-input" autocomplete="off" spellcheck="false"
+                   placeholder="Search titles, descriptions, tags, MDX content…"
+                   aria-label="Search tasks" />
+            <span class="search-meta" id="search-meta" aria-live="polite"></span>
+            </div>
+            <div class="filter-bar-row controls" id="filter-controls">
+              <label class="select-wrap" id="sort-select-wrap">
+                <span class="sr-only">Sort tasks</span>
+                <select id="sort-select" aria-label="Sort tasks">
+                  <option value="newest">Newest first</option>
+                  <option value="oldest">Oldest first</option>
+                  <option value="priority">Priority (urgent→low)</option>
+                  <option value="effort">Effort (xl→xs)</option>
+                  <option value="activity">Last activity</option>
+                </select>
+              </label>
+              <button type="button" id="filter-toggle-btn" class="filter-toggle-btn"
+                      aria-expanded="false" aria-controls="filter-advanced">
+                Filters <span id="filter-count" class="filter-count" hidden>0</span>
+              </button>
+              <div class="archive-toggle" role="group" aria-label="Archive filter">
+                <button type="button" data-archive="active" class="active">Active</button>
+                <button type="button" data-archive="archived">Archived</button>
+                <button type="button" data-archive="both">Both</button>
+              </div>
+            </div>
+          </div>
+          <div id="filter-advanced" class="filter-advanced" hidden>
+            <div class="filter-bar-row categories" id="filter-categories">
+            <span class="filter-bar-label">Category</span>
+            <button type="button" data-category="all" class="all active">All</button>
+            <button type="button" data-category="frontend" class="c-frontend">frontend</button>
+            <button type="button" data-category="backend" class="c-backend">backend</button>
+            <button type="button" data-category="infra" class="c-infra">infra</button>
+            <button type="button" data-category="docs" class="c-docs">docs</button>
+            <button type="button" data-category="test" class="c-test">test</button>
+            <button type="button" data-category="design" class="c-design">design</button>
+            <button type="button" data-category="data" class="c-data">data</button>
+            <button type="button" data-category="security" class="c-security">security</button>
+            <button type="button" data-category="task" class="c-task">task</button>
+            </div>
+            <div class="filter-bar-row tags" id="filter-tags">
+            <span class="filter-bar-label">Tags</span>
+            <button type="button" data-tag="bug" class="t-bug">bug</button>
+            <button type="button" data-tag="feature" class="t-feature">feature</button>
+            <button type="button" data-tag="refactor" class="t-refactor">refactor</button>
+            <button type="button" data-tag="docs" class="t-docs">docs</button>
+            <button type="button" data-tag="test" class="t-test">test</button>
+            <button type="button" data-tag="perf" class="t-perf">perf</button>
+            <button type="button" data-tag="security" class="t-security">security</button>
+            <button type="button" data-tag="a11y" class="t-a11y">a11y</button>
+            </div>
+            <div class="filter-bar-row contributors" id="filter-contributors">
+            <span class="filter-bar-label">Contributors</span>
+            <button type="button" data-contributor="all" class="active">all</button>
+            <button type="button" data-contributor="@me" class="contributor-me">@me</button>
+            <!-- Other contributors are populated by app.js from /api/contributors -->
+            </div>
+            <div class="filter-advanced-actions">
+              <button type="button" id="save-filter-btn" class="filter-bar-save" title="Save current filter">Save view</button>
+              <button type="button" class="filter-bar-clear" id="filter-clear" aria-label="Clear filters">Clear filters</button>
+            </div>
+          </div>
+        </div>
+        <div id="main-content">
+          <main id="board" class="board" role="region" aria-label="Kanban board" tabindex="-1">
+            <!-- Columns are rendered by app.js -->
+          </main>
+        </div>
+        <!-- New Task Modal — Title + Project path (with Browse) + Description
+             + Column / Agent / Model. Opened from the + New Task button in
+             the topbar. Lives inside <main class="dashboard"> which is fine:
+             the New Task button isn't reachable while the task view is open
+             (the topbar is overlaid by the task view), so the modal-collapse
+             bug doesn't apply here. -->
+        <div id="modal-backdrop" class="modal-backdrop" hidden>
+          <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+            <header class="modal-header">
+              <h2 id="modal-title">New Task</h2>
+              <button class="btn-icon" type="button" data-close-modal aria-label="Close">&times;</button>
+            </header>
+            <form id="new-task-form" class="modal-body" novalidate>
+              <p id="task-create-project" class="task-create-context">Create a task in the current project.</p>
+              <label class="field">
+                <span>Task title <span class="field-required">Required</span></span>
+                <input name="title" type="text" required maxlength="200" autocomplete="off" placeholder="What needs to get done?" aria-describedby="task-create-error" />
+              </label>
+              <label class="field">
+                <span>Description <span class="field-optional">Optional</span></span>
+                <textarea name="description" rows="4" placeholder="Describe the outcome, context, and how to verify it. Markdown supported."></textarea>
+              </label>
+              <div class="field-row">
+                <label class="field">
+                  <span>Status</span>
+                  <select name="column">
+                    <option value="backlog">Backlog</option>
+                    <option value="todo" selected>To Do</option>
+                    <option value="doing">In Progress</option>
+                    <option value="review">Review</option>
+                    <option value="done">Done</option>
+                  </select>
+                </label>
+                <label class="field">
+                  <span>Priority</span>
+                  <select name="priority">
+                    <option value="low">Low</option>
+                    <option value="normal" selected>Normal</option>
+                    <option value="high">High</option>
+                    <option value="urgent">Urgent</option>
+                  </select>
+                </label>
+              </div>
+              <details class="task-create-options">
+                <summary>Agent settings <span>Optional</span></summary>
+                <p>Assign an agent and model for later. Creating a task does not start an agent.</p>
+                <div class="field-row">
+                  <label class="field"><span>Agent</span><input name="agent" type="text" placeholder="Use configured default" autocomplete="off" /></label>
+                  <label class="field"><span>Model</span><input name="model" type="text" placeholder="Use configured default" autocomplete="off" /></label>
+                </div>
+              </details>
+              <input type="hidden" name="parentId" value="" />
+              <p id="task-create-error" role="alert" hidden></p>
+              <label class="task-create-open"><input name="openAfterCreate" type="checkbox" /> Open task after creating</label>
+              <footer class="modal-footer">
+                <span class="task-create-shortcut">Ctrl / ⌘ + Enter to create</span>
+                <button type="button" class="btn" id="task-discard-draft">Discard draft</button>
+                <button type="button" class="btn" data-close-modal>Close</button>
+                <button type="submit" class="btn btn-primary" id="task-create-submit">Create task</button>
+              </footer>
+            </form>
+          </div>
+        </div>
+        <!-- Per-task action menu (positioned dynamically) -->
+        <div id="action-menu" class="action-menu" hidden role="menu"></div>
+        <!-- Bulk action bar (shown when ≥ 1 card is selected via Ctrl/Cmd-click) -->
+        <div id="bulk-bar" class="bulk-bar" hidden role="toolbar" aria-label="Bulk actions for selected tasks">
+          <span class="bulk-bar-count" id="bulk-bar-count">0 selected</span>
+          <div class="bulk-bar-group">
+            <div class="bulk-bar-dropdown" id="bulk-move-dropdown">
+              <button type="button" class="bulk-bar-btn" id="bulk-move-btn" aria-haspopup="menu" aria-expanded="false">
+                Move <span class="bulk-bar-caret" aria-hidden="true">▾</span>
+              </button>
+              <div class="bulk-bar-menu" id="bulk-move-menu" role="menu" hidden>
+                <button type="button" data-column="backlog" role="menuitem">Backlog</button>
+                <button type="button" data-column="todo" role="menuitem">To Do</button>
+                <button type="button" data-column="doing" role="menuitem">In Progress</button>
+                <button type="button" data-column="review" role="menuitem">Review</button>
+                <button type="button" data-column="done" role="menuitem">Done</button>
+              </div>
+            </div>
+            <div class="bulk-bar-dropdown" id="bulk-priority-dropdown">
+              <button type="button" class="bulk-bar-btn" id="bulk-priority-btn" aria-haspopup="menu" aria-expanded="false">
+                Priority <span class="bulk-bar-caret" aria-hidden="true">▾</span>
+              </button>
+              <div class="bulk-bar-menu" id="bulk-priority-menu" role="menu" hidden>
+                <button type="button" data-priority="urgent" role="menuitem">🚨 Urgent</button>
+                <button type="button" data-priority="high" role="menuitem">⬆ High</button>
+                <button type="button" data-priority="normal" role="menuitem">➡ Normal</button>
+                <button type="button" data-priority="low" role="menuitem">⬇ Low</button>
+              </div>
+            </div>
+            <button type="button" class="bulk-bar-btn" id="bulk-archive-btn" title="Archive all selected">
+              Archive
+            </button>
+            <button type="button" class="bulk-bar-btn danger" id="bulk-delete-btn" title="Delete all selected">
+              Delete
+            </button>
+          </div>
+          <span class="bulk-bar-spacer"></span>
+          <button type="button" class="bulk-bar-btn ghost" id="bulk-clear-btn" title="Clear selection (Esc)">
+            Clear
+          </button>
+        </div>
+      </section>
+      <!-- ─── TAB: Changelog ──────────────────────────────────────────── -->
+      <section id="tab-changelog" class="tab-pane" role="tabpanel" data-tab="changelog" hidden>
+        <div id="changelog-root" class="view-root"></div>
+      </section>
+      <!-- ─── TAB: Contributors ───────────────────────────────────────── -->
+      <section id="tab-contributors" class="tab-pane" role="tabpanel" data-tab="contributors" hidden>
+        <div id="contributors-root" class="view-root"></div>
+      </section>
+      <!-- ─── TAB: Docs ───────────────────────────────────────────────── -->
+      <section id="tab-docs" class="tab-pane" role="tabpanel" data-tab="docs" hidden>
+        <div class="docs-tab" id="docs-root"></div>
+      </section>
+      <!-- ─── TAB: Agents ─────────────────────────────────────────────── -->
+      <section id="tab-goals" class="tab-pane" role="tabpanel" data-tab="goals" hidden>
+        <div id="goals-root"></div>
+      </section>
+      <section id="tab-agents" class="tab-pane" role="tabpanel" data-tab="agents" hidden>
+        <div id="claude-pane-root" class="claude-pane view-root"></div>
+      </section>
+      <!-- ─── TAB: Insights ───────────────────────────────────────────── -->
+      <section id="tab-insights" class="tab-pane" role="tabpanel" data-tab="insights" hidden>
+        <div id="insights-root" class="view-root"></div>
+      </section>
+      <!-- ─── Add Project + Settings modals are top-level (below) ─────────
+           They used to live inside <main class="dashboard">. When a task
+           view opens, the dashboard gets display:none and the modals
+           collapsed to 0×0. They're now direct children of <body> so
+           they stay reachable regardless of which view is on top. -->
+    </main>
+    <!-- ─── Add Project modal — top-level so it's reachable while the ────
+           task view is open (when .dashboard collapses to display:none).
+           Originally nested inside <main class="dashboard">. -->
+    <div id="project-backdrop" class="modal-backdrop" hidden>
+      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="project-title">
+        <header class="modal-header">
+          <h2 id="project-title">Add project</h2>
+          <button class="btn-icon" type="button" data-close-project aria-label="Close">&times;</button>
+        </header>
+        <form id="project-form" class="modal-body">
+          <label class="field">
+            <span>Name</span>
+            <input name="name" type="text" required maxlength="80" autocomplete="off" />
+          </label>
+          <label class="field">
+            <span>Path</span>
+            <div class="field-row-with-button">
+              <input name="root" type="text" required autocomplete="off"
+                     placeholder="/absolute/path/to/project" />
+              <button type="button" id="project-browse-btn" class="btn btn-sm"
+                      aria-label="Browse for a project folder">📁 Browse…</button>
+            </div>
+          </label>
+          <footer class="modal-footer">
+            <button type="button" class="btn" data-close-project>Cancel</button>
+            <button type="submit" class="btn btn-primary">Add project</button>
+          </footer>
+        </form>
+      </div>
+    </div>
+    <!-- ─── Settings dialog — top-level for the same reason as the Add ──
+           Project modal above. Owned by web/settings.js. -->
+    <div id="settings-backdrop" class="modal-backdrop" hidden>
+      <div class="modal settings-dialog" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+        <header class="modal-header">
+          <h2 id="settings-title">Settings</h2>
+          <button class="btn-icon" type="button" data-close-settings aria-label="Close">&times;</button>
+        </header>
+        <div class="settings-layout">
+          <nav id="settings-nav" class="settings-nav" aria-label="Settings sections"></nav>
+          <div class="settings-pane">
+            <div class="modal-body" id="settings-body">
+              <!-- Populated by settings.js on open. -->
+            </div>
+            <footer class="modal-footer" id="settings-footer">
+              <button type="button" class="btn" data-close-settings>Cancel</button>
+              <button type="button" id="settings-save" class="btn btn-primary">Save</button>
+            </footer>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ─── Template help modal (single instance, reused) ──────────────── -->
+    <div id="template-backdrop" class="modal-backdrop" hidden>
+      <div class="modal template-dialog" role="dialog" aria-modal="true" aria-labelledby="template-title">
+        <header class="modal-header">
+          <h2 id="template-title">Task Template</h2>
+          <button class="btn-icon" type="button" data-close-template aria-label="Close">&times;</button>
+        </header>
+        <div class="modal-body" id="template-body">
+          <!-- Populated by task-view.js on open. -->
+        </div>
+        <footer class="modal-footer">
+          <button type="button" class="btn" id="template-copy-btn">Copy to clipboard</button>
+          <button type="button" class="btn btn-primary" data-close-template>Done</button>
+        </footer>
+      </div>
+    </div>
+    <!-- Task detail view (hidden by default; lives outside the .dashboard
+         panes so it overlays everything when a card is clicked) -->
+    <div id="task-view" hidden></div>
+    <!-- Image lightbox overlay (filled by images.js when an image is opened). -->
+    <div id="image-lightbox" class="image-lightbox" role="dialog" aria-modal="true" aria-label="Image preview" hidden tabindex="-1">
+      <img class="image-lightbox-img" alt="" />
+      <button type="button" class="image-lightbox-close" aria-label="Close">×</button>
+    </div>
+    <footer class="footer">
+      <span>OpenKan v0.3.0 · local-first workspace</span>
+    </footer>
+    <!-- api.js MUST load first; it exposes window.OpenKanAPI used by the others. -->
+    <script src="api.js" defer></script>
+    <!-- cross-tab.js exposes OpenKanCrossTab for sibling-tab sync (M13). -->
+    <script src="cross-tab.js" defer></script>
+    <script src="images.js" defer></script>
+    <script src="mdx-viewer.js" defer></script>
+    <script src="task-view.js" defer></script>
+    <script src="settings.js" defer></script>
+    <script src="changelog-view.js" defer></script>
+    <script src="contributors-view.js" defer></script>
+    <script src="docs-view.js" defer></script>
+    <!-- claude-pane.js exposes window.OpenKanClaude. It must load BEFORE
+         app.js (which calls OpenKanClaude.mount(...) when the Claude tab
+         is activated) but AFTER api.js (so window.OpenKanAPI.api exists). -->
+    <script src="claude-pane.js" defer></script>
+    <!-- GSAP powers the concise, status-specific chat work indicators. -->
+    <script src="vendor/gsap.min.js" defer></script>
+    <script src="chat-status-motion.js" defer></script>
+    <!-- chat-sidebar.js exposes window.OpenKanChatSidebar. It depends on
+         claude-pane.js (for the activity footer) and api.js (for fetch +
+         storage). Loaded before app.js so the toggle button can wire up.
+         Loaded before keyboard.js so its capture-phase Cmd/Ctrl+K handler
+         registers first and can intercept the palette-open shortcut while
+         the sidebar is open. -->
+    <script src="chat-sidebar.js" defer></script>
+    <!-- M13: keyboard module loads before the palette so the palette can
+         subscribe to "palette.open" / "palette.close" / "palette.isOpen". -->
+    <script src="keyboard.js" defer></script>
+    <script src="command-palette.js" defer></script>
+    <!-- path-picker.js exposes window.OpenKanPathPicker. It registers a
+         command-palette action and a Cmd/Ctrl+Shift+O shortcut on boot, so it
+         must load after command-palette.js but before app.js (which wires the
+         Browse button in the Add Project modal). -->
+    <script src="path-picker.js" defer></script>
+    <!-- charts.js / insights.js expose window.OpenKanCharts and
+         window.OpenKanInsights. They load AFTER api.js (window.OpenKanAPI)
+         and BEFORE app.js (which calls them from the tab router). -->
+    <script src="charts.js" defer></script>
+    <script src="insights.js" defer></script>
+    <script src="goals-view.js" defer></script>
+    <script src="home-view.js" defer></script>
+    <script src="app.js" defer></script>
+  </body>
+</html>