@bongos/core 1.17.2 → 1.17.3

package/modules/hall-ui/public/work.html

@@ -10,218 +10,10 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <style>
-    /* Page-local styles for the Work Board — the pieces the shared kit doesn't
-       carry (in-flight actions, claimable task cards, history list). Version
-       progress bars + goals moved to the Roadmap page (task 1757). Everything
-       derives from the shared design tokens so instance packs reskin this
-       page along with the rest of the hall. */
-
-    .kbd {
-      display: inline-block;
-      padding: 0 6px;
-      border: 1px solid var(--border-strong);
-      border-radius: 5px;
-      background: var(--surface-2);
-      font-size: 0.85em;
-      font-weight: 600;
-      color: var(--ink-soft);
-    }
-
-    .wip-builder { color: var(--ink); font-weight: 600; }
-    .wip-builder small { color: var(--ink-soft); font-weight: 400; }
-
-    /* ---- #616: claim/release actions on the work board ---- */
-
-    /* Per-task action stack (Claim + Copy prompt). Sits in the task card's last
-       grid cell. */
-    .task__actions {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      gap: 6px;
-    }
-    /* Claim is the primary action — filled accent so it reads above Copy. */
-    .task__claim {
-      background: var(--accent);
-      border: 1px solid var(--accent-deep);
-      color: #fff;
-      border-radius: var(--radius-sm);
-      font-size: 12.5px;
-      font-weight: 600;
-      padding: 5px 14px;
-      cursor: pointer;
-      white-space: nowrap;
-      transition: background 150ms, opacity 150ms;
-    }
-    .task__claim:hover { background: var(--accent-deep); }
-    .task__claim:disabled { opacity: 0.55; cursor: default; }
-
-    /* Files a claimable task is responsible for (touches[]). */
-    .task__touches {
-      margin: 6px 0 0;
-      font-size: 12px;
-      color: var(--ink-faint);
-      word-break: break-word;
-    }
-
-    .task__tag--newcomer {
-      background: var(--ok-weak);
-      color: var(--ok);
-      border-color: color-mix(in srgb, var(--ok) 30%, transparent);
-    }
-    .task__tag--mine {
-      background: var(--accent-weak);
-      color: var(--accent-text);
-      border-color: color-mix(in srgb, var(--accent) 35%, transparent);
-    }
-    /* task 1498 / ADR 0084: per-task rank floor. Outlined + emphasized (not a
-       filled tag) so a gated task reads as "authority required", distinct from
-       the filled newcomer tag. */
-    .task__tag--rank {
-      background: transparent;
-      color: var(--warn);
-      border-color: color-mix(in srgb, var(--warn) 45%, transparent);
-      font-weight: 600;
-      letter-spacing: 0.02em;
-    }
-    /* task 1752: the open (no floor) state — muted/neutral so "Any rank" reads as
-       "open to all", not as a warning like the gated --rank tag above. */
-    .task__tag--rank-open {
-      background: transparent;
-      color: var(--ink-faint);
-      border-color: var(--border);
-    }
-    /* task 1753: the whole card is clickable → opens the shared task-detail overlay. */
-    .task { cursor: pointer; }
-    /* task 1754: collapsed Backlog group. */
-    .backlog-summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
-    .backlog-summary .scroll__h { display: inline; margin: 0; }
-    .backlog-count { font-size: 13px; color: var(--ink-faint); }
-    #backlog-list .history__row { cursor: pointer; }
-
-    /* In-flight table: release action on the viewer's own claims. */
-    .wip__action { text-align: right; white-space: nowrap; }
-    .wip__release {
-      background: var(--surface);
-      border: 1px solid var(--border-strong);
-      color: var(--ink-soft);
-      border-radius: var(--radius-sm);
-      font-size: 12px;
-      font-weight: 600;
-      padding: 4px 11px;
-      cursor: pointer;
-      transition: background 150ms, color 150ms, border-color 150ms;
-    }
-    .wip__release:hover:not(:disabled) {
-      background: var(--danger-weak);
-      color: var(--danger);
-      border-color: color-mix(in srgb, var(--danger) 40%, transparent);
-    }
-    .wip__release:disabled { opacity: 0.55; cursor: default; }
-    .wip__mine-none { color: var(--ink-faint); }
-    .wip__row--mine { background: var(--accent-weak); }
-
-    /* Recently-shipped history. */
-    .history { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
-    .history__row {
-      display: flex; align-items: baseline; gap: 12px;
-      padding: 6px 4px;
-      border-bottom: 1px solid var(--rule-soft);
-    }
-    .history__row:last-child { border-bottom: none; }
-    .history__id {
-      font-weight: 600; color: var(--ink-soft);
-      font-variant-numeric: tabular-nums; min-width: 3.2em;
-    }
-    .history__title { flex: 1 1 auto; color: var(--ink); min-width: 0; }
-    .history__when { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
-
-    @media (max-width: 640px) {
-      .task__actions { grid-column: 2; justify-self: start; flex-direction: row; }
-    }
-
-    /* ---- task 1759: multi-select + the bottom bulk-action toolbar ---- */
-
-    .wip__select-cell { width: 1%; text-align: center; }
-    .wip__select { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
-
-    .bulk-toolbar {
-      position: fixed;
-      left: 50%;
-      bottom: 20px;
-      transform: translateX(-50%);
-      z-index: 120;
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      flex-wrap: wrap;
-      background: var(--ink);
-      color: var(--bg-card);
-      padding: 10px 16px;
-      border-radius: var(--radius);
-      box-shadow: var(--shadow-pop);
-      max-width: min(92vw, 720px);
-    }
-    .bulk-toolbar[hidden] { display: none; }
-    .bulk-toolbar__count { font-size: 13px; font-weight: 600; white-space: nowrap; }
-    .bulk-toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
-    .bulk-toolbar__btn {
-      background: rgba(255, 255, 255, 0.12);
-      border: 1px solid rgba(255, 255, 255, 0.25);
-      color: var(--bg-card);
-      border-radius: var(--radius-sm);
-      font-size: 12.5px;
-      font-weight: 600;
-      padding: 6px 12px;
-      cursor: pointer;
-      white-space: nowrap;
-      transition: background 150ms, opacity 150ms;
-    }
-    .bulk-toolbar__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
-    .bulk-toolbar__btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .bulk-toolbar__clear {
-      background: transparent;
-      border: none;
-      color: var(--bg-card);
-      opacity: 0.75;
-      font-size: 12.5px;
-      cursor: pointer;
-      padding: 4px 6px;
-    }
-    .bulk-toolbar__clear:hover { opacity: 1; }
-
-    @media (max-width: 640px) {
-      .bulk-toolbar { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
-    }
-
-    /* ---- task 1899: capped lists (the goals-page pattern, task 1888) ---- */
-    /* Small header count pill; .pager / .pager__range / .btn-ghost live in the
-       shared style.css and are reused as-is. */
-    .count-pill {
-      display: inline-flex; align-items: center; justify-content: center;
-      min-width: 20px; height: 18px; padding: 0 6px; margin-left: 8px;
-      border-radius: 999px; background: var(--surface-2); color: var(--ink-soft);
-      font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
-      vertical-align: 2px;
-    }
-
-    /* ---- task 1931: paginated Ready list (Per-page dropdown + Prev/Next) ---- */
-    /* .pager / .pager__range / .btn-ghost come from the shared style.css; these
-       extend that pager into a two-sided bar (range left, controls right). */
-    .pager--paged { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
-    .pager__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-    .pager__perpage {
-      display: inline-flex; align-items: center; gap: 6px;
-      font-size: 12px; color: var(--ink-faint);
-    }
-    .pager__perpage select { height: 30px; padding: 2px 8px; font-size: 13px; }
-    .pager__page {
-      font-size: 12.5px; color: var(--ink-soft);
-      font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: center;
-    }
-    .pager__nav .pager__btn:disabled { opacity: 0.4; cursor: default; }
-  </style>
+  <!-- Page-local styles (task 2170) — extracted from the old inline <style>
+       block per the hall placement rules; shared pager/count-pill styles now
+       live in style.css's hall-kit section. -->
+  <link rel="stylesheet" href="/builders/work.css">
 </head>
 <body data-page="work" data-page-title="Work">
 
@@ -249,10 +41,34 @@
           </p>
         </section>
 
-        <!-- 1. IN PROGRESS — the live in-flight list (active claims, all
-             builders). Version-level progress + goals moved to the Roadmap
-             page (task 1757) — this board stays focused on claimable work. -->
-        <section class="scroll" id="wip-scroll" aria-labelledby="wip-h">
+        <!-- task 2170: one queue at a time. The four groups are hash-synced tabs
+             (OTBKit.makeTabs toggles [hidden] — the window stays the only
+             scroller): Ready (default) | In Progress | Backlog | Completed.
+             Deep links: /work#in-progress etc. -->
+        <nav id="work-tabs" aria-label="Work board sections"></nav>
+
+        <!-- READY — the claimable queue: the page's primary object, above the
+             fold as the default tab. -->
+        <section class="scroll" id="claim-scroll" aria-labelledby="claim-h">
+          <h2 id="claim-h" class="scroll__h">Ready — work to do<span class="count-pill" id="ready-count" hidden></span></h2>
+          <p class="scroll__lede">Click <span class="kbd">Claim</span> to take a task right here — no terminal needed. Then click <span class="kbd">📋</span> to copy the task prompt and paste it into a fresh Claude Code session to begin.</p>
+
+          <!-- task 2170: the filter bar is built by OTBKit.makeFilterBar —
+               Search / Sort / Version primary, the rest behind a "Filters"
+               disclosure; state rides the URL query. Control ids are unchanged
+               (f-search, f-sort, f-version, f-goal, f-kind, f-discipline,
+               f-newcomer, f-fit) so work.js reads stay stable. -->
+          <div id="work-filters"></div>
+          <p class="claim-count-line" id="claim-count" aria-live="polite"></p>
+
+          <div class="task-list" id="task-list">
+            <div class="profile__placeholder">…</div>
+          </div>
+          <div id="ready-pager-mount"></div>
+        </section>
+
+        <!-- IN PROGRESS — the live in-flight list (active claims, all builders). -->
+        <section class="scroll" id="wip-scroll" aria-labelledby="wip-h" hidden>
           <h2 id="wip-h" class="scroll__h">In Progress<span class="count-pill" id="wip-count" hidden></span></h2>
           <p class="scroll__lede">What is being built right now. See <a href="/roadmap">Roadmap</a> for version-level progress and goals.</p>
 
@@ -260,175 +76,29 @@
             <thead><tr><th></th><th>#</th><th>Task</th><th>Builder</th><th>For</th><th></th></tr></thead>
             <tbody><tr><td colspan="6" class="ledger__empty">…</td></tr></tbody>
           </table>
-          <div class="pager pager--paged" id="wip-pager" hidden>
-            <span class="pager__range" id="wip-range"></span>
-            <div class="pager__nav">
-              <label class="pager__perpage">
-                <span>Per page</span>
-                <select id="wip-per-page" aria-label="In-progress tasks per page">
-                  <option value="10">10</option>
-                  <option value="25">25</option>
-                  <option value="50">50</option>
-                  <option value="100">100</option>
-                </select>
-              </label>
-              <button class="btn-ghost pager__btn" type="button" id="wip-prev" aria-label="Previous page">‹ Prev</button>
-              <span class="pager__page" id="wip-page" aria-live="polite"></span>
-              <button class="btn-ghost pager__btn" type="button" id="wip-next" aria-label="Next page">Next ›</button>
-            </div>
-          </div>
+          <div id="wip-pager-mount"></div>
         </section>
 
-        <!-- 2. CLAIMABLE TASKS — the claimable queue, filterable, with the
-             copy-prompt action (same as the hall's Claim section). -->
+        <!-- BACKLOG — not-yet-ready tasks (read-only). Its own tab now; the old
+             collapsed <details> solved the same "don't stack it" problem tabs
+             solve properly (task 2170). -->
         <section class="scroll" id="backlog-scroll" aria-labelledby="backlog-h" hidden>
-          <details id="backlog-details">
-            <summary class="backlog-summary"><span id="backlog-h" class="scroll__h">Backlog</span><span class="backlog-count" id="backlog-count"></span></summary>
-            <p class="scroll__lede">Not yet ready — blocked by dependencies or awaiting promotion. These become claimable when their blockers ship. Click a task to see why.</p>
-            <div class="history" id="backlog-list"></div>
-            <div class="pager pager--paged" id="backlog-pager" hidden>
-              <span class="pager__range" id="backlog-range"></span>
-              <div class="pager__nav">
-                <label class="pager__perpage">
-                  <span>Per page</span>
-                  <select id="backlog-per-page" aria-label="Backlog tasks per page">
-                    <option value="10">10</option>
-                    <option value="25">25</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                  </select>
-                </label>
-                <button class="btn-ghost pager__btn" type="button" id="backlog-prev" aria-label="Previous page">‹ Prev</button>
-                <span class="pager__page" id="backlog-page" aria-live="polite"></span>
-                <button class="btn-ghost pager__btn" type="button" id="backlog-next" aria-label="Next page">Next ›</button>
-              </div>
-            </div>
-          </details>
-        </section>
-
-        <section class="scroll" id="claim-scroll" aria-labelledby="claim-h">
-          <h2 id="claim-h" class="scroll__h">Ready — work to do<span class="count-pill" id="ready-count" hidden></span></h2>
-          <p class="scroll__lede">Click <span class="kbd">Claim</span> to take a task right here — no terminal needed. Then click <span class="kbd">📋</span> to copy the task prompt and paste it into a fresh Claude Code session to begin.</p>
-
-          <div class="filters">
-            <label class="filter filter--search">
-              <span>Search</span>
-              <input id="f-search" type="search" placeholder="task #, title, or goal…" aria-label="Search tasks by number, title, or goal" autocomplete="off">
-            </label>
-            <label class="filter">
-              <span>Version</span>
-              <select id="f-version"><option value="">— any —</option></select>
-            </label>
-            <label class="filter">
-              <span>Goal</span>
-              <select id="f-goal"><option value="">— all goals —</option></select>
-            </label>
-            <label class="filter">
-              <span>Kind</span>
-              <select id="f-kind">
-                <option value="">— any —</option>
-                <option value="feature">feature</option>
-                <option value="bug">bug</option>
-                <option value="infra">infra</option>
-                <option value="refactor">refactor</option>
-                <option value="spike">spike</option>
-                <option value="learning-capture">learning-capture</option>
-                <option value="cleanup">cleanup</option>
-                <option value="decision">decision</option>
-                <option value="blocker-resolution">blocker-resolution</option>
-                <option value="unclassified">unclassified</option>
-              </select>
-            </label>
-            <label class="filter">
-              <span>Discipline</span>
-              <select id="f-discipline">
-                <option value="">— any —</option>
-                <option value="engineer">engineer</option>
-                <option value="artist">artist</option>
-                <option value="ideator">ideator</option>
-                <option value="unclassified">unclassified</option>
-              </select>
-            </label>
-            <label class="filter">
-              <span>Newcomer</span>
-              <select id="f-newcomer">
-                <option value="">— any —</option>
-                <option value="yes">newcomer-friendly only</option>
-              </select>
-            </label>
-            <label class="filter">
-              <span>Run mode</span>
-              <select id="f-fit" title="Whether a task's files overlap other visible tasks">
-                <option value="">— any —</option>
-                <option value="parallel">parallel-safe only</option>
-                <option value="conflict">has file conflicts</option>
-              </select>
-            </label>
-            <label class="filter">
-              <span>Sort</span>
-              <select id="f-sort">
-                <option value="cpm" data-currency-tmpl="{label} / minute (high → low)">credits / minute (high → low)</option>
-                <option value="credits" data-currency-tmpl="{label} (high → low)">credits (high → low)</option>
-                <option value="minutes">minutes (low → high)</option>
-                <option value="priority">priority (P0 first)</option>
-                <option value="id">task number (low → high)</option>
-              </select>
-            </label>
-            <span id="claim-count" aria-live="polite" class="filter__count"></span>
-          </div>
-
-          <div class="task-list" id="task-list">
-            <div class="profile__placeholder">…</div>
-          </div>
-          <div class="pager pager--paged" id="ready-pager" hidden>
-            <span class="pager__range" id="ready-range"></span>
-            <div class="pager__nav">
-              <label class="pager__perpage">
-                <span>Per page</span>
-                <select id="ready-per-page" aria-label="Ready tasks per page">
-                  <option value="10">10</option>
-                  <option value="25">25</option>
-                  <option value="50">50</option>
-                  <option value="100">100</option>
-                </select>
-              </label>
-              <button class="btn-ghost pager__btn" type="button" id="ready-prev" aria-label="Previous page">‹ Prev</button>
-              <span class="pager__page" id="ready-page" aria-live="polite"></span>
-              <button class="btn-ghost pager__btn" type="button" id="ready-next" aria-label="Next page">Next ›</button>
-            </div>
-          </div>
+          <h2 id="backlog-h" class="scroll__h">Backlog<span class="backlog-count" id="backlog-count"></span></h2>
+          <p class="scroll__lede">Not yet ready — blocked by dependencies or awaiting promotion. These become claimable when their blockers ship. Click a task to see why.</p>
+          <div class="history" id="backlog-list"></div>
+          <div id="backlog-pager-mount"></div>
         </section>
 
-        <!-- 3. RECENTLY SHIPPED — the last tasks shipped, so a builder can see
-             momentum without leaving for the status dashboard. Public read
-             surface (GET /public/recent-shipped); never gated. -->
+        <!-- COMPLETED — recently shipped + the project-wide momentum summary
+             (task 1469). Public read surface; never gated. -->
         <section class="scroll" id="history-scroll" aria-labelledby="history-h" hidden>
           <h2 id="history-h" class="scroll__h">Completed<span class="count-pill" id="done-count" hidden></span></h2>
-          <!-- task 1469: project-wide "works completed" momentum summary — total
-               works shipped, total currency awarded, and the latest ship. Filled
-               by renderWorksSummary() from public reads; hidden until it loads. -->
           <div class="stat-row" id="works-summary" style="margin-bottom: 14px" hidden></div>
           <p class="scroll__lede">The most recently shipped tasks.</p>
           <div class="history" id="history-list">
             <div class="profile__placeholder">…</div>
           </div>
-          <div class="pager pager--paged" id="done-pager" hidden>
-            <span class="pager__range" id="done-range"></span>
-            <div class="pager__nav">
-              <label class="pager__perpage">
-                <span>Per page</span>
-                <select id="done-per-page" aria-label="Completed tasks per page">
-                  <option value="10">10</option>
-                  <option value="25">25</option>
-                  <option value="50">50</option>
-                  <option value="100">100</option>
-                </select>
-              </label>
-              <button class="btn-ghost pager__btn" type="button" id="done-prev" aria-label="Previous page">‹ Prev</button>
-              <span class="pager__page" id="done-page" aria-live="polite"></span>
-              <button class="btn-ghost pager__btn" type="button" id="done-next" aria-label="Next page">Next ›</button>
-            </div>
-          </div>
+          <div id="done-pager-mount"></div>
         </section>
       </main>
 
@@ -444,7 +114,7 @@
      rows). work.js greys Bulk claim/release out when nothing of that kind is
      selected, and Copy parallel/sequential prompt out when the selection
      can't run that way (file/module conflicts, or an unorderable dependency
-     cycle). -->
+     cycle). Selection clears on tab switch (task 2170). -->
 <div id="bulk-toolbar" class="bulk-toolbar" hidden role="region" aria-label="Bulk actions">
   <span class="bulk-toolbar__count" id="bulk-count"></span>
   <div class="bulk-toolbar__actions">
@@ -461,6 +131,8 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- shared frontend toolkit (window.OTB) — loaded FIRST so work.js can pull from it. -->
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils" defer></script>
+<!-- shared component kit (window.OTBKit) — tabs, pager, filter bar (task 2166). -->
+<script src="/builders/hall-kit.js" defer></script>
 <script src="/builders/task-detail.js?v=2026-07-03-taskdetail" defer></script>
 <script src="/builders/brand-apply.js?v=2026-06-19-r56" defer></script>
 <script src="/builders/work.js?v=2026-07-03-workboard3" defer></script>