@ucsandman/legcli 0.11.0 → 0.13.0

package/src/board/index.html

@@ -39,8 +39,20 @@
     <p id="verdict-sub"></p>
   </section>
 
-  <section class="logins" id="accounts" aria-label="Logins"></section>
-  <p class="head-caption" id="head-caption">Times are local.</p>
+  <!-- Usage is a property of the work, not a region of its own. The strip is
+       one band: a token per login carrying the bucket that will actually stop
+       it. The panels are not rewritten, they move intact behind the disclosure
+       at the end of the strip, with every gauge, notch and spoken sentence. -->
+  <section class="capacity" aria-label="Capacity by login">
+    <div class="capacity-strip">
+      <div class="cap-tokens" id="capacity-tokens"></div>
+      <button type="button" class="btn btn-secondary disclosure cap-open" id="capacity-toggle" aria-expanded="false" aria-controls="capacity-drawer">Capacity and models &gt;</button>
+    </div>
+    <div class="drawer capacity-drawer" id="capacity-drawer" hidden>
+      <section class="logins" id="accounts" aria-label="Logins"></section>
+      <p class="head-caption" id="head-caption">Times are local.</p>
+    </div>
+  </section>
 
   <section class="region-terminals" aria-labelledby="terminals-head">
     <div class="section-head">
@@ -58,6 +70,22 @@
     <p class="empty-line" hidden>No terminal is running. Start one in any repo: <code>leg claude</code>, <code>leg codex</code> or <code>leg agy</code>. It appears here within a second of the agent's first turn.</p>
   </section>
 
+  <!-- C.1: a card is a terminal you are not sitting at. Live cards are rows
+       here, directly under Terminals; finished ones fall into the ledger
+       cell below instead of piling up as rows. -->
+  <section class="region-background" id="background" aria-labelledby="background-head" hidden>
+    <div class="section-head">
+      <h2 id="background-head">Background</h2>
+      <p class="region-meta" role="status" aria-atomic="true"></p>
+    </div>
+    <!-- the live card rows are `.row`: the four-cell grid whose `.r4
+         .row-actions` block is written against the terminal rows, so the two
+         row kinds line up. `.card-list` is the gap between them, the same
+         container the cards drawer uses. -->
+    <div class="card-list" id="background-grid"></div>
+    <div id="card-entry" hidden></div>
+  </section>
+
   <!-- Finished terminals, what landed, and what is queued are all history or
        background. They sit on the ground rather than on a panel, because a
        raised surface here would compete with the terminals that are live. -->
@@ -151,13 +179,33 @@
              first request there is no address above to point at. -->
         <p class="field-help">Stored in this browser's localStorage and sent as a bearer token with every request. Clear the field to sign out.</p>
       </div>
+      <!-- The fallback ladder (docs/redesign-2026-09-17.md B.3). A rung is a
+           destination, not an agent: claude/opus and claude/sonnet are two
+           separate steps down before Leg leaves the login at all. The ids are
+           the ones the order editor used, because the same save button, status
+           span and list container do the same job for the longer shape. -->
       <fieldset class="default-order" id="default-order" hidden>
-        <legend>New terminal handoff order</legend>
-        <p class="field-help">Used by terminals started after you save.</p>
+        <legend>New terminal handoff ladder</legend>
+        <p class="field-help">Each rung is an agent, a login and a model. Leg walks down from the top and takes the first rung that is open. Used by terminals started after you save; a running terminal keeps the copy it started with, and Details on its row edits that one.</p>
         <div id="default-order-list"></div>
-        <button type="button" class="btn btn-secondary" id="default-order-save">Save default</button>
+        <div class="ladder-policy" id="ladder-spend"></div>
+        <fieldset class="ladder-policy" id="ladder-climb"></fieldset>
+        <div class="ladder-policy" id="ladder-reserve"></div>
+        <button type="button" class="btn btn-secondary" id="default-order-save">Save ladder</button>
         <span class="field-status" id="default-order-status" aria-live="polite"></span>
       </fieldset>
+      <!-- Where a terminal that is waiting on a human says so when the board is
+           not the window you are looking at. The tab badge needs no toggle: it
+           needs no permission and costs nothing, so it is always on. -->
+      <fieldset class="notify" id="notify-settings" hidden>
+        <legend>Notifications</legend>
+        <p class="field-help">The tab title says <code>(1) Leg</code> and the favicon gains a dot whenever a terminal is waiting on you. That one is always on.</p>
+        <label class="notify-toggle" for="notify-terminal"><input type="checkbox" id="notify-terminal"> Terminal toast when a terminal waits on you</label>
+        <p class="field-help">Claude Code only, through its Notification hook: the toast reaches the window the agent is already running in.</p>
+        <label class="notify-toggle" for="notify-board"><input type="checkbox" id="notify-board"> Browser notification when a terminal waits on you</label>
+        <p class="field-help" id="notify-board-help"></p>
+        <span class="field-status" id="notify-status" aria-live="polite"></span>
+      </fieldset>
       <!-- Who did what, across every terminal and every card. The owner's, like
            the rest of this panel: the trail names repositories and people. It
            loads when asked rather than on every board render. -->
@@ -196,35 +244,67 @@
   <div class="detail-inner" id="session-drawer-content"></div>
 </div>
 
-<dialog id="new-card-dialog" aria-label="New card">
-  <h2 class="dialog-title">New background card</h2>
+<!-- the announced name is the heading on screen: an aria-label here would be a
+     second name for one thing, and the one a voice-control user says out loud
+     is the one they can read -->
+<dialog id="new-card-dialog" aria-labelledby="new-card-dialog-title">
+  <h2 class="dialog-title" id="new-card-dialog-title">More settings</h2>
   <p class="dialog-intro">An agent works without an interactive terminal in a separate git worktree. The default Build workflow stops with changes in that worktree and does not merge them.</p>
   <form id="new-card-form">
     <div class="form-error" id="new-card-error" hidden></div>
 
-    <div class="form-row">
-      <label for="nc-repo">Repo path</label>
-      <input type="text" id="nc-repo" required autocomplete="off">
-    </div>
+    <!-- Two questions, side by side on a wide screen and stacked on a phone:
+         WHAT is being asked for (left) and WHO runs it (right). The right
+         column opens showing the saved handoff ladder, so the dialog and the
+         one-line entry row above it say the same thing until the reader
+         changes one of them. -->
+    <div class="dialog-cols">
+      <div class="dialog-col">
+
+        <div class="form-row">
+          <label for="nc-task">Task</label>
+          <span class="field-help">Describe one concrete outcome the agent can finish.</span>
+          <textarea id="nc-task" rows="5" required autofocus></textarea>
+        </div>
 
-    <div class="form-row">
-      <label for="nc-task">Task</label>
-      <span class="field-help">Describe one concrete outcome the agent can finish.</span>
-      <textarea id="nc-task" rows="3" required></textarea>
-    </div>
+        <div class="form-row">
+          <label for="nc-repo-known">Repository</label>
+          <select id="nc-repo-known"></select>
+          <label for="nc-repo" class="sub-label">Path</label>
+          <input type="text" id="nc-repo" required autocomplete="off" spellcheck="false">
+        </div>
 
-    <div class="form-row">
-      <label for="nc-first-agent">First agent</label>
-      <select id="nc-first-agent" required></select>
-      <span class="field-help" id="nc-fallback-summary">If it cannot continue, Leg tries the fallback agents shown under Advanced options.</span>
-    </div>
+        <div class="form-row">
+          <label for="nc-trunk">Branch to cut from</label>
+          <input type="text" id="nc-trunk" value="main" autocomplete="off" spellcheck="false">
+          <span class="field-help" id="nc-trunk-help">The card works in its own checkout cut from this branch.</span>
+        </div>
+
+        <div class="form-row">
+          <label for="nc-queue">
+            <input type="checkbox" id="nc-queue" checked>
+            Run now
+          </label>
+          <span class="field-help">Turn this off to save a draft in Backlog.</span>
+        </div>
+
+      </div>
+      <div class="dialog-col">
+
+        <div class="form-row">
+          <span class="form-label" id="nc-chain-label">Who runs it</span>
+          <span class="field-help">Leg starts at the top and takes the next row only when the row above it cannot continue. Each row is a provider and one of its models.</span>
+          <div id="nc-chain-rows" role="group" aria-labelledby="nc-chain-label"></div>
+          <button type="button" class="btn btn-secondary" id="nc-add-row">Add a fallback</button>
+          <span class="field-help" id="nc-fallback-summary"></span>
+          <label for="nc-save-ladder" class="notify-toggle">
+            <input type="checkbox" id="nc-save-ladder">
+            Save as my default ladder
+          </label>
+          <span class="field-help">Writes these rows to Settings, so the one-line entry row and every new terminal use them too.</span>
+        </div>
 
-    <div class="form-row">
-      <label for="nc-queue">
-        <input type="checkbox" id="nc-queue" checked>
-        Run now
-      </label>
-      <span class="field-help">Turn this off to save a draft in Backlog.</span>
+      </div>
     </div>
 
     <details class="advanced-options">
@@ -241,21 +321,9 @@
         <textarea id="nc-custom-pipeline" rows="4" hidden aria-label="Custom workflow JSON" placeholder='[{"name":"build","kind":"agent"}]'></textarea>
       </div>
 
-      <div class="form-row">
-        <label>First-agent permissions and limits</label>
-        <div id="nc-first-controls"></div>
-      </div>
-
-      <div class="form-row">
-        <label>Fallback agents</label>
-        <span class="field-help">Leg tries each row in order only when the agent before it cannot continue.</span>
-        <div id="nc-chain-rows"></div>
-        <button type="button" class="btn btn-secondary" id="nc-add-row">Add fallback agent</button>
-      </div>
-
       <div class="form-row">
         <label for="nc-test-adapter">Scripted first agent (test/demo only)</label>
-        <select id="nc-test-adapter"><option value="">Use the real first agent above</option></select>
+        <select id="nc-test-adapter"><option value="">Use the real first row above</option></select>
       </div>
 
       <div class="form-row">
@@ -264,11 +332,6 @@
         <input type="text" id="nc-leases">
       </div>
 
-      <div class="form-row">
-        <label for="nc-trunk">Trunk branch</label>
-        <input type="text" id="nc-trunk" value="main">
-      </div>
-
       <div class="form-row">
         <label for="nc-land-mode">Merge method</label>
         <select id="nc-land-mode">
@@ -296,8 +359,22 @@
   </form>
 </dialog>
 
+<!-- D14: every binding clicks a button that is already on a row, so this map is
+     the list of those buttons and nothing else can drift from it. sessions.js
+     fills it from the same table the key handler reads. -->
+<div class="keymap" id="keymap" role="dialog" aria-label="Keyboard shortcuts" hidden>
+  <h3 class="drawer-head">Keyboard</h3>
+  <dl class="keymap-list" id="keymap-list"></dl>
+  <button type="button" class="btn btn-secondary" id="keymap-close">Close</button>
+</div>
+
 <div class="sysmsg" id="toast" aria-live="polite"></div>
 
+<!-- strip.js and entry.js are shared with /floor and are read at load by the
+     two files under them (the capacity tokens, the one-line entry), so they
+     are first: deferred scripts run in document order. -->
+<script src="strip.js" defer></script>
+<script src="entry.js" defer></script>
 <script src="board.js" defer></script>
 <script src="sessions.js" defer></script>
 <script src="history.js" defer></script>