@oharness/server 0.6.0 → 0.7.1

package/dist/page.js

@@ -96,6 +96,8 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .fold .ico-sm{width:16px;height:16px;flex:0 0 auto;opacity:.5}
 .fold.open .ico-sm,.fold:hover .ico-sm{opacity:.9}
 .fold-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The routine group's run count, where a project header keeps its actions. */
+.fold .count{flex:0 0 auto;font-size:11px;color:var(--dim);padding-right:4px}
 /* A gap between projects, but not above the first one. The selector names the
    row rather than the button since the header grew a menu control beside it. */
 .fold-row + .fold-row,.session + .fold-row,.show-more + .fold-row{margin-top:6px}
@@ -462,6 +464,18 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   font-size:9.5px;letter-spacing:0;text-transform:none;padding:1px 5px;
   border-radius:4px;background:var(--accent);color:var(--bg);opacity:.85;
 }
+/* The geometry .mk-tag established, which is what a badge looks like here.
+   Quieter than the accent a group header wears: a vendor is marked once at the
+   top of its list, while this can repeat down twenty rows, and twenty accent
+   pills is a column of noise. The two selected states have to move it off
+   var(--sel) — that is what the row under the cursor is painted with, and a
+   pill the same colour as the row it sits on is not a pill. */
+.menu-item .m-tag{
+  flex:0 0 auto;padding:1px 5px;border-radius:4px;background:var(--sel);
+  color:var(--dim);font-size:10px;font-weight:500;letter-spacing:.02em;
+  text-transform:uppercase;
+}
+.menu-item:hover .m-tag,.menu-item.cursor .m-tag{background:var(--field)}
 .menu-more{
   width:100%;padding:8px;border:0;border-radius:7px;background:transparent;
   color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
@@ -824,8 +838,13 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 .q-desc{font-size:12px;line-height:1.45;color:var(--dim);overflow-wrap:anywhere}
 .q-opt.on .q-desc{color:inherit;opacity:.75}
 .q-check{flex:none;width:14px;font-size:12px;line-height:20px}
-.q-other{cursor:text;align-items:center}
-.q-other.on{background:var(--sel)}
+/* The typed answer is a field, so it keeps the plain row fill whether empty,
+   focused or filled; a filled one is marked by its key alone, which takes the
+   accent the picked options wear across the whole row. */
+.q-other{cursor:text;align-items:center;padding-top:12px;padding-bottom:12px}
+.q-other:focus-within,.q-other.on,.q-other.on:focus-visible{background:var(--bg);color:var(--fg);opacity:1}
+.q-other.on .q-key{background:var(--accent);color:var(--bg)}
+.q-other-input::placeholder{color:var(--dim)}
 .q-other-input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:13.5px;padding:0}
 .q-preview{
   margin:0;border-radius:9px;background:var(--bg);padding:10px 12px;font-size:12px;line-height:1.55;
@@ -1000,10 +1019,59 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
    box, and the box's hairline goes with it — a list this long framed by a
    rule reads as a field somebody is meant to type in. */
 .audit-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
-.panel.audit .audit-list{margin:6px 0 10px}
-.panel.audit .audit-list .trail-line{padding:3px 0}
+.panel.audit .audit-list{margin:4px 0 12px}
 .setting-body .audit-list{
-  max-height:200px;overflow-y:auto;border-radius:6px;padding:7px 9px;background:var(--field);
+  max-height:220px;overflow-y:auto;border-radius:8px;padding:4px;background:var(--field);
+}
+/* One grid for the whole trail, so time, outcome and tool line up down the
+   page; each row is a subgrid of it so a row can still take a hover fill. */
+.audit-list{
+  display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;
+  column-gap:12px;font-size:12.5px;
+}
+.audit-row{
+  display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;
+  padding:5px 8px;border-radius:7px;
+}
+.audit-row:hover{background:var(--hover)}
+.audit-row.denied{background:color-mix(in srgb,var(--err) 5%,transparent)}
+.audit-row.denied:hover{background:color-mix(in srgb,var(--err) 9%,transparent)}
+.audit-day{
+  grid-column:1/-1;font-size:11.5px;font-weight:600;color:var(--dim);
+  letter-spacing:.02em;padding:14px 8px 4px;
+}
+.audit-day:first-child{padding-top:2px}
+.audit-time{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
+.audit-pill{
+  display:inline-flex;align-items:center;gap:5px;justify-self:start;
+  font-size:11px;font-weight:600;line-height:1;padding:4px 8px 4px 7px;border-radius:999px;
+}
+.audit-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+.audit-pill.allowed{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
+.audit-pill.denied{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.audit-pill.unanswered{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
+.audit-what{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
+.audit-tool{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-weight:600;color:var(--fg);flex:none}
+.audit-arg{
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:var(--dim);
+  overflow:hidden;text-overflow:ellipsis;min-width:0;
+}
+.audit-notes{display:flex;gap:4px;justify-self:end}
+.audit-tag{
+  font-size:10.5px;color:var(--dim);background:var(--field);padding:2px 7px;border-radius:5px;white-space:nowrap;
+}
+.audit-tag.remembered{color:var(--brand-ink);background:var(--brand-tint)}
+.audit-tag.unanswered{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
+.seg-item .seg-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}
+.seg-item .seg-count{margin-left:6px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
+@media (max-width:640px){
+  .audit-list{grid-template-columns:max-content minmax(0,1fr);row-gap:0}
+  .audit-row{grid-template-columns:max-content minmax(0,1fr);row-gap:3px}
+  .audit-time{grid-column:1}
+  .audit-pill{grid-column:2;justify-self:start}
+  .audit-what{grid-column:1/-1}
+  .audit-notes{grid-column:1/-1;justify-self:start}
+  .audit-notes:empty{display:none}
 }
 /* A row of things to do with what is above them. Links styled as the ghost
    buttons beside them, because a download is a link and pretending otherwise
@@ -1027,8 +1095,56 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 .seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--field);margin:2px 0 12px}
 /* The presets and the calendar on one line, on the same baseline. */
 .usage-window{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
-.perms-card{display:flex;flex-direction:column;gap:8px}
+.perms-card{display:flex;flex-direction:column;gap:10px}
 .perms-card .setting-list{margin:0}
+/* The mode, as the one fact the rest of the page qualifies. */
+.perm-mode{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.perm-mode-name{
+  display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:13px;font-weight:600;padding:6px 12px 6px 10px;border-radius:999px;
+}
+.perm-mode-name::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
+.perm-mode-name.read-only{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
+.perm-mode-name.workspace-write{color:var(--brand-ink);background:var(--brand-tint)}
+.perm-mode-name.full-access{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.perm-mode-steps{display:flex;gap:4px;flex-wrap:wrap}
+.perm-mode-step{font-size:11.5px;color:var(--dim);padding:3px 9px;border-radius:6px;background:var(--field)}
+.perm-mode-step.on{color:var(--fg);background:var(--bg);font-weight:600}
+/* Rules, one group per verdict, each rule a chip in that verdict's colour. */
+.perm-group{display:flex;flex-direction:column;gap:6px}
+.perm-group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
+.perm-group-head .n{font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
+.perm-group-head.allow{color:var(--ok)} .perm-group-head.ask{color:var(--warn)}
+.perm-group-head.deny{color:var(--err)} .perm-group-head.session{color:var(--brand-ink)}
+.perm-chips{display:flex;flex-wrap:wrap;gap:5px}
+.perm-chip{
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12px;
+  padding:3px 9px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.perm-chip.allow{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
+.perm-chip.ask{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
+.perm-chip.deny{color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
+.perm-chip.session{color:var(--brand-ink);background:var(--brand-tint)}
+.perm-empty{
+  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);
+  padding:10px 12px;border-radius:8px;background:var(--field);
+}
+.perm-roots{
+  display:flex;flex-direction:column;max-height:280px;overflow-y:auto;
+  background:var(--field);border-radius:8px;padding:4px;
+}
+.perm-root{
+  display:flex;align-items:baseline;gap:0;min-width:0;padding:4px 8px;border-radius:6px;
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12px;white-space:nowrap;
+}
+.perm-root:hover{background:var(--hover)}
+.perm-root .dir{color:var(--dim);overflow:hidden;text-overflow:ellipsis;min-width:0;direction:rtl;text-align:left}
+.perm-root .dir bdi{direction:ltr}
+.perm-root .base{color:var(--fg);font-weight:600;flex:none}
+.perm-count{
+  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--dim);
+  background:var(--field);padding:1px 7px;border-radius:999px;vertical-align:1px;
+}
 /* ---- date range picker ----------------------------------------------------
    The site's own component, class for class. Borderless like everything else
    here: fills for the chosen days, a shadow to lift the panel, and no ring on
@@ -1188,6 +1304,17 @@ details.provider>summary:hover{background:var(--hover)}
 .tag{font-size:10.5px;color:var(--dim);background:var(--field);border-radius:4px;padding:1px 5px}
 .tag.rec{color:var(--bg);background:var(--accent);opacity:.85}
 .row-head .ghost{margin-left:auto;height:26px;font-size:12px}
+/* A second action sits beside the first rather than splitting the free space
+ * with it. */
+.row-head .ghost+.ghost,.row-head .ghost+.switch,.row-head .switch+.ghost{margin-left:0}
+.routine-where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.routine-history{margin-top:6px}
+.routine-history>summary{cursor:pointer;width:max-content}
+.routine-runs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
+.routine-run{display:flex;gap:10px;align-items:baseline;text-align:left;border:0;background:transparent;color:var(--fg);font:inherit;padding:4px 6px;border-radius:6px}
+button.routine-run{cursor:pointer}
+button.routine-run:hover{background:var(--hover)}
+.routine-run.failed{color:var(--err)}
 .small{font-size:12px;white-space:pre-wrap;word-break:break-all}
 .keyrow{display:flex;gap:6px;margin:8px 0 6px}
 .keyrow input{
@@ -1207,6 +1334,25 @@ details.provider>summary:hover{background:var(--hover)}
    nothing else, and now a subscriber gets a Top up row above it — the thing
    a subscriber does most often here, which had been the fourth entry of a
    menu behind the name. */
+/* The desktop update hint, above the account. A filled row, never an
+   outline: a quiet fill for an ordinary release, the accent for one marked
+   important. The window's menu and the dialogs are the loud path; this is the
+   one that waits to be clicked. */
+#update-hint{flex:0 0 auto;padding:4px 8px 0}
+#update-hint button{
+  width:100%;height:32px;display:flex;align-items:center;gap:8px;
+  padding:0 10px;border:0;border-radius:8px;background:var(--field);color:var(--fg);
+  font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+}
+#update-hint button:hover{background:var(--field-focus)}
+#update-hint button:disabled{cursor:default}
+#update-hint .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
+#update-hint .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#update-hint .pct{font-size:11px;color:var(--dim)}
+#update-hint.important button{background:var(--accent);color:var(--bg)}
+#update-hint.important button:hover{opacity:.9}
+#update-hint.important .dot{background:var(--bg)}
+#update-hint.important .pct{color:inherit;opacity:.8}
 #account{
   display:flex;flex-direction:column;align-items:stretch;gap:2px;
   flex:0 0 auto;padding:8px;
@@ -1545,7 +1691,17 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 /* A dash rather than a bullet: three list markers down the side of a 200px
  * column read as a form to fill in, which is the thing on the other side. */
 .cn-points li::before{content:"—";position:absolute;left:0;opacity:.55}
-.cn-main{display:flex;flex-direction:column;min-width:0}
+.cn-main{display:flex;flex-direction:column;min-width:0;position:relative}
+/* What the ? explains, as a bubble under it rather than a paragraph in the
+ * body: peeking at a detail must not push the field and the buttons down, or
+ * the button being aimed at moves out from under the pointer. The row menu's
+ * fill and shadow, and no outline, like every other thing that floats here. */
+.cn-tip{
+  position:absolute;top:50px;right:16px;z-index:5;width:min(300px,calc(100% - 32px));
+  padding:10px 12px;border-radius:10px;background:var(--bg);
+  box-shadow:0 1px 2px #0000000f,0 8px 28px #00000024;
+}
+.cn-tip>div+div{margin-top:4px}
 /* Below this the two columns would leave the form narrower than its own
  * labels, which is the width the fields actually need. */
 @media (max-width:620px){
@@ -1594,6 +1750,9 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    click. */
 .cn-note{font-size:11.5px;color:var(--dim);line-height:1.45}
 .cn-note .mono{white-space:nowrap}
+.cn-local{display:flex;gap:6px;align-items:flex-start}
+.cn-local .ico-sm{width:13px;height:13px;flex:0 0 auto;margin-top:1.5px;color:var(--fg)}
+.cn-local strong{color:var(--fg);font-weight:600}
 /* The dialog ends on its buttons, so it needs the padding the shared rule
    leaves to whatever follows. */
 #connect .dlg-actions{padding:16px 20px 18px}
@@ -1603,10 +1762,15 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 /* An anchor, not a button, so the shared button.quiet rule does not reach it —
    and it is the one thing here that leaves the app, so it sits apart from the
    two that do not. */
-#connect .dlg-actions a.quiet{
-  margin-left:auto;color:var(--dim);text-decoration:none;font-size:12.5px;
-}
-#connect .dlg-actions a.quiet:hover{color:var(--fg);text-decoration:underline}
+#connect .dlg-actions a.quiet{margin-left:auto;text-decoration:none}
+/* Cancel and Get a key are buttons, and look it: the grey fill the other
+ * dialog buttons have, where Connect carries the colour. Bare text beside a
+ * filled button read as a caption, not as something to press. */
+#connect .dlg-actions button.quiet,#connect .dlg-actions a.quiet{
+  padding:8px 14px;border-radius:9px;background:var(--field);color:var(--fg);
+  font-size:13.5px;line-height:normal;
+}
+#connect .dlg-actions button.quiet:hover,#connect .dlg-actions a.quiet:hover{background:var(--sel)}
 .pp-head{padding:12px 12px 6px}
 .pp-head input{
   width:100%;height:34px;border:0;border-radius:9px;background:var(--field);color:var(--fg);
@@ -1635,6 +1799,18 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 .chip:hover{background:var(--sel)}
 .chip.on{background:var(--accent);color:var(--bg)}
 .chip .sub{font-size:11px;opacity:.6}
+/* A pill, not a word: .sub beside it is a quieter copy of the name, and this
+   is a different kind of claim about the model rather than more of its name.
+   Same geometry as .mk-tag and the picker's own. Both other chip states repaint
+   the background this sits on — hover takes var(--sel), selected takes the
+   accent — so the pill is moved each time rather than dissolving into it. */
+.chip .free{
+  flex:0 0 auto;padding:1px 5px;border-radius:4px;background:var(--sel);
+  color:var(--dim);font-size:10px;font-weight:500;letter-spacing:.02em;
+  text-transform:uppercase;
+}
+.chip:hover .free{background:var(--field)}
+.chip.on .free{background:var(--bg);color:var(--accent)}
 .panel .row-head h2{margin:0}
 .panel .row-head{margin-bottom:14px}
 .muted{color:var(--dim)}
@@ -1729,15 +1905,25 @@ pre.diff{margin:0;font-size:12px;line-height:1.5;overflow-x:auto}
 .d-del{background:var(--del-bg);color:var(--del)}
 .d-same{color:var(--dim)}
 
-details.work{border-radius:10px;margin:0 0 12px;background:var(--panel)}
+/* A line of text, not a box: it reads as part of the reply — what was done
+ * between two paragraphs — and the box is kept for what opens under it. The
+ * chevron trails the words, where it points at what a click will show. */
+details.work{margin:0 0 12px}
 details.work>summary{
-  padding:6px 12px;cursor:pointer;font-size:12px;color:var(--dim);list-style:none;
-  display:flex;gap:8px;align-items:center;
+  padding:3px 0;cursor:pointer;font-size:13.5px;color:var(--dim);list-style:none;
+  display:flex;gap:6px;align-items:center;width:max-content;max-width:100%;
 }
+details.work>summary:hover{color:var(--fg)}
 details.work>summary::-webkit-details-marker{display:none}
-details.work>summary::before{content:"▸";display:inline-block;transition:transform .15s}
-details.work[open]>summary::before{transform:rotate(90deg)}
-.work-body{padding:0 8px 8px}
+details.work>summary::after{
+  content:"";width:6px;height:6px;flex:0 0 auto;margin-left:2px;
+  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
+  transform:rotate(-45deg);transition:transform .15s;
+}
+details.work[open]>summary::after{transform:rotate(45deg)}
+.work-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+details.work.failed>summary{color:var(--err)}
+.work-body{padding:8px;margin-top:4px;border-radius:10px;background:var(--panel)}
 .work-body details.tool{margin-bottom:6px}
 /* the working indicator */
 .working{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:13.5px;margin:0 0 10px}
@@ -1798,9 +1984,28 @@ details.thinking[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
 /* composer */
 form{padding:6px 24px 18px;background:var(--bg)}
 .composer{
+  position:relative;
   max-width:720px;margin:0 auto;border-radius:16px;
   background:var(--field);padding:16px 16px 10px;transition:background .15s,box-shadow .15s;
 }
+/* The top edge, as a grab handle. It spans the box rather than sitting in a
+   corner, because the edge is what a person aims at; the bar only appears
+   under the cursor, so an idle composer keeps its clean top line. */
+#grip{
+  position:absolute;top:0;left:0;right:0;height:12px;cursor:ns-resize;
+  display:grid;place-items:center;touch-action:none;
+}
+/* Faint rather than hidden: a handle nobody can see is a handle nobody
+   finds. A pill, not a rule across the top — this is a thing to grab, and the
+   design carries no borders. */
+#grip::before{
+  content:"";width:32px;height:3px;border-radius:999px;
+  background:var(--dim);opacity:.2;transition:opacity .12s,width .12s;
+}
+#grip:hover::before,#grip.dragging::before{opacity:.5;width:40px}
+/* While dragging, the pointer owns the screen: without this a fast drag
+   selects the transcript behind it. */
+body.resizing{user-select:none;cursor:ns-resize}
 .composer:focus-within{background:var(--field-focus)}
 textarea{
   width:100%;resize:none;min-height:56px;max-height:32vh;padding:0;border:0;
@@ -1823,7 +2028,23 @@ textarea::placeholder{color:var(--dim)}
    the field only has to agree on where each glyph lands, not on what is
    drawn there. The selection is translucent so the words under it stay
    readable; an opaque highlight would sit on top of the mirror. */
-.input-wrap textarea{color:transparent;caret-color:var(--brand)}
+/* The native caret is hidden and one is drawn instead. A textarea offers
+   caret-color and nothing else — no width — and at one device pixel the bar
+   is hard to find on a pale field. See placeCaret(). */
+.input-wrap textarea{color:transparent;caret-color:transparent}
+#caret{
+  position:absolute;width:2px;border-radius:1px;background:var(--brand);
+  pointer-events:none;z-index:2;opacity:0;
+}
+#caret.on{animation:caret-blink 1.06s steps(1,end) infinite}
+@keyframes caret-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
+/* Solid while the caret is moving: a bar that blinks out mid-keystroke reads
+   as a dropped character. The class is taken off and put back to restart the
+   animation, which is what makes the phase reset. */
+#caret.on.moving{animation:none;opacity:1}
+@media (prefers-reduced-motion:reduce){#caret.on{animation:none;opacity:1}}
+/* Measures where the caret goes: the mirror's metrics, none of its ink. */
+#caret-probe{visibility:hidden}
 .input-wrap textarea::selection{background:var(--brand-tint)}
 /* Every metric that decides where a glyph lands has to match the field: font,
    line-height, wrapping, and the padding, which is zero on this textarea.
@@ -1831,7 +2052,7 @@ textarea::placeholder{color:var(--dim)}
    glyphs land where the textarea puts them, and the chip's background — drawn
    outside its own advance width — has somewhere to go instead of being cut off
    at the start of a line. */
-#input-mirror{
+#input-mirror,#caret-probe{
   position:absolute;top:0;bottom:0;left:-6px;right:-6px;padding:0 6px;border:0;
   font:inherit;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;
   color:var(--fg);pointer-events:none;overflow:hidden;
@@ -1923,6 +2144,41 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 .effort-name.on{color:var(--fg);font-weight:600}
 #attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
 #attachments:empty{display:none}
+/* Outside the composer, tracking its width so the rows line up with the box
+   they are waiting on. min-width:0 twice over — here and on the line inside
+   each row — because a flex item defaults to refusing to shrink below its
+   content, and one long queued line would push the page sideways at phone
+   width instead of being cut. */
+#queued{
+  display:flex;flex-direction:column;gap:4px;min-width:0;
+  max-width:720px;margin:0 auto 6px;
+}
+#queued:empty{display:none}
+/* Full width, one per row, because these are sentences rather than file
+   names: a chip that fits three words of a queued message says nothing about
+   which message it is. --panel, not --field: out here the backdrop is the
+   page, and the field's 2% wash is invisible against it. */
+.q{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:10px;padding:7px 10px 7px 12px;font-size:12px;min-width:0}
+/* min-width:0 or the ellipsis never engages: a flex item refuses to shrink
+   below its content by default, so at phone width the row pushed the page
+   sideways instead of cutting the line. */
+.q .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
+/* Not ".mark": that is the connector glyph, and it is a fixed 18px box. */
+.q .tag{flex:0 0 auto;color:var(--dim);font-size:11px}
+/* Joining the turn already running, rather than waiting behind it. The brand
+   colour is what this app uses for the harness being alive, which is exactly
+   what the difference is. */
+.q.soon .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.soon .tag{color:var(--brand)}
+.q .go{
+  flex:0 0 auto;height:22px;padding:0 9px;border:0;border-radius:7px;
+  background:var(--hover);color:var(--fg);cursor:pointer;
+  font:inherit;font-size:11px;white-space:nowrap;
+}
+.q .go:hover{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .q .go:hover{color:var(--brand)}
+.q .x{border:0;background:transparent;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
+.q .x:hover{color:var(--err)}
 .att{
   display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:8px;
   padding:5px 8px;font-size:12px;max-width:260px;
@@ -2013,6 +2269,11 @@ button.primary{
 }
 button.primary svg{width:16px;height:16px}
 button.primary:disabled{opacity:.3;cursor:default}
+/* Idle with messages still waiting: send releases them, and the button says
+   so by quietly breathing rather than by growing an outline. */
+#send.has-queue{animation:queue-wait 2.4s ease-in-out infinite}
+@keyframes queue-wait{0%,100%{opacity:1}50%{opacity:.55}}
+@media (prefers-reduced-motion:reduce){#send.has-queue{animation:none;opacity:.8}}
 button.ghost,a.ghost{
   height:30px;padding:0 12px;border:0;border-radius:8px;
   background:var(--sel);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;
@@ -2119,7 +2380,13 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
 .dlg-actions button.approve kbd{background:#ffffff26}
 /* Only while a "remember" answer is focused, and taking no room otherwise: a
  * reserved empty line under the buttons read as the dialog being unfinished. */
-.ask-scope{padding:8px 20px 4px;font-size:11.5px;line-height:1.6;color:var(--dim)}
+.ask-scope{display:grid;padding:6px 20px 2px;font-size:11.5px;line-height:1.6;color:var(--dim)}
+.ask-scope>span{
+  grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  opacity:0;pointer-events:none;transition:opacity .12s ease;
+}
+.ask-scope[data-show="once"]>[data-scope="once"],.ask-scope[data-show="session"]>[data-scope="session"],
+.ask-scope[data-show="project"]>[data-scope="project"]{opacity:1;pointer-events:auto}
 
 /* Parameters as a reader wants them: names on the left, values as values —
  * text with its line breaks, lists as chips — instead of JSON with line numbers. */
@@ -2207,6 +2474,10 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .composer .picker{position:static;min-width:0}
   .composer .picker-btn{max-width:100%;height:32px}
   #send,#stop{flex:0 0 auto}
+  /* No hover on a touch screen, so the bar is always drawn, and the strip is
+     taller because a thumb is not a cursor. */
+  #grip{height:18px}
+  #grip::before{opacity:.3;width:40px}
   textarea{max-height:32dvh}
   /* Menus span the box rather than hang off one picker: from a picker on the
      right they otherwise open past the edge, where overflow:hidden loses them. */
@@ -2307,6 +2578,9 @@ const isPhone = () => PHONE_QUERY.matches;
  * viewBox and one stroke width with the icons in the markup.
  */
 const ICON_PATHS = {
+  // A padlock: the shackle as a path, the body as a rect.
+  lock: ["M5.33 7.33V5.33a2.67 2.67 0 0 1 5.34 0v2"],
+  lockRects: [[3.33, 7.33, 9.34, 6.67, 1.6]],
   // Same drawing as the Settings item in the nav, so the model picker's
   // "manage" link and the place it leads to are recognisably one thing.
   settings: ["M12.67 4.67h-6", "M9.33 11.33H3.33"],
@@ -2627,6 +2901,7 @@ const cacheEl = document.getElementById("cache");
 const ctxBar = document.querySelector("#ctx i");
 const ctxText = document.getElementById("ctxtext");
 const sessionList = document.getElementById("sessions");
+const sidebarEl = document.querySelector("body > aside");
 const ask = document.getElementById("ask");
 
 let pendingId = null;
@@ -2756,7 +3031,7 @@ function shortModel(full) {
   return cut < 0 ? full : full.slice(cut + 1);
 }
 
-function makePicker(id, onPick, extra) {
+function makePicker(id, onPick, extra, opts = {}) {
   const root = document.getElementById(id);
   const button = root.querySelector(".picker-btn");
   const label = root.querySelector(".picker-value");
@@ -2784,18 +3059,25 @@ function makePicker(id, onPick, extra) {
   let cursor = 0;
   /** Groups the user has folded away; survives repainting. */
   const collapsed = new Set();
+  /**
+   * Groups folded while searching. Kept apart from the browsing folds: a
+   * search opens every vendor, because a match behind a closed header looks
+   * like no result — but a header that then refuses to close is a control
+   * that does nothing, and OpenRouter's twenty matches can bury the one vendor
+   * being looked for. Cleared when the query changes, so each search starts
+   * with everything it found on screen.
+   */
+  const searchFolded = new Set();
+  const folded = (group) => (query ? searchFolded.has(group) : collapsed.has(group));
 
   /** The options a keystroke can land on: what is actually on screen. */
-  const visible = () => {
-    const list = matches();
-    if (query) return list;
-    return list.filter((option) => !option.group || !collapsed.has(option.group));
-  };
+  const visible = () => matches().filter((option) => !option.group || !folded(option.group));
 
   const close = () => {
     menu.hidden = true;
     root.classList.remove("open");
     query = "";
+    searchFolded.clear();
   };
 
   const matches = () => options.filter((option) => matchesQuery(option, query));
@@ -2803,12 +3085,7 @@ function makePicker(id, onPick, extra) {
   const paint = () => {
     const list = matches();
 
-    // Searching must reach into every vendor: a match hidden behind a closed
-    // header looks like no result at all.
-    const searching = query.length > 0;
-    const shown = list.filter(
-      (option) => searching || !option.group || !collapsed.has(option.group),
-    );
+    const shown = list.filter((option) => !option.group || !folded(option.group));
     if (cursor >= shown.length) cursor = Math.max(0, shown.length - 1);
 
     // Only the body is rebuilt: replacing the menu itself would take the
@@ -2828,7 +3105,7 @@ function makePicker(id, onPick, extra) {
       if (option.group && option.group !== lastGroup) {
         lastGroup = option.group;
         const group = option.group;
-        const header = el("button", "menu-group" + (collapsed.has(group) && !searching ? "" : " open"));
+        const header = el("button", "menu-group" + (folded(group) ? "" : " open"));
         header.type = "button";
         header.appendChild(el("span", "chev"));
         // The vendor's mark leads its header, so a folded list reads as a
@@ -2844,15 +3121,16 @@ function makePicker(id, onPick, extra) {
         header.appendChild(el("span", "g-count", String(counts.get(group) || 0)));
         header.addEventListener("click", (e) => {
           e.stopPropagation();
-          if (collapsed.has(group)) collapsed.delete(group);
-          else collapsed.add(group);
+          const set = query ? searchFolded : collapsed;
+          if (set.has(group)) set.delete(group);
+          else set.add(group);
           cursor = 0;
           paint();
         });
         body.appendChild(header);
       }
 
-      if (option.group && collapsed.has(option.group) && !searching) continue;
+      if (option.group && folded(option.group)) continue;
       const i = visibleIndex++;
       const item = el(
         "button",
@@ -2865,6 +3143,10 @@ function makePicker(id, onPick, extra) {
       const mark = option.mark && option.mark();
       if (mark) item.appendChild(mark);
       item.appendChild(el("span", "menu-label", option.label));
+      // Beside the name rather than out at the right margin where sub sits:
+      // this qualifies the model it is attached to, and a badge floated away
+      // from its name is a badge the eye has to pair up again on every row.
+      if (option.tag) item.appendChild(el("span", "m-tag", option.tag));
       if (option.sub) item.appendChild(el("span", "sub", option.sub));
       item.addEventListener("click", () => {
         close();
@@ -2888,10 +3170,14 @@ function makePicker(id, onPick, extra) {
 
     // Everything folded except the vendor holding the current model: opening
     // onto a dozen closed headers hides the one answer the user already has.
+    // A picker may name groups that always open as well — the model picker's
+    // own plan, which is where someone looking for a model should land first.
     collapsed.clear();
     const current = options.find((option) => option.value === value);
+    const alwaysOpen = new Set(opts.openGroups || []);
     for (const option of options) {
-      if (option.group && option.group !== (current && current.group)) collapsed.add(option.group);
+      if (!option.group || alwaysOpen.has(option.group)) continue;
+      if (option.group !== (current && current.group)) collapsed.add(option.group);
     }
     cursor = Math.max(0, visible().findIndex((option) => option.value === value));
     // Searching costs a row of chrome and is pointless below a handful of
@@ -2912,6 +3198,7 @@ function makePicker(id, onPick, extra) {
   };
 
   search.addEventListener("input", () => {
+    if (search.value !== query) searchFolded.clear();
     query = search.value;
     cursor = 0;
     paint();
@@ -3035,6 +3322,7 @@ const modelPicker = makePicker(
     });
     return link;
   },
+  { openGroups: ["official"] },
 );
 const modePicker = makePicker("mode-picker", (mode) => void api("/mode", { session: activeId, mode }).then(applyState));
 
@@ -3437,7 +3725,7 @@ function workGroup() {
   if (!group) {
     group = el("details", "work");
     const summary = el("summary");
-    summary.appendChild(el("span", "work-label", "Working"));
+    summary.appendChild(el("span", "work-label", t("work.working")));
     group.appendChild(summary);
     group.appendChild(el("div", "work-body"));
     parent.appendChild(group);
@@ -3445,10 +3733,127 @@ function workGroup() {
   return group;
 }
 
+/**
+ * A run of tool calls, said in a line: what was done, not how many steps it
+ * took.
+ *
+ * "3 steps" was true and told nobody anything; the reason to look at a folded
+ * group is to know whether it is the part worth opening. So the line is built
+ * from the calls themselves. A call that says what it is for — a command's
+ * description, a subagent's task — is quoted; the rest are named by what they
+ * do, and neighbours of one kind are counted rather than listed ("Read 3
+ * files"). While a call is running its phrase is in the present ("Running a
+ * command"), and a failure leads, in red, because that is the one thing
+ * nobody should have to open the group to find. Two phrases are shown and the
+ * rest counted, which is how Claude Code's desktop app reads.
+ */
 function bumpWorkLabel(group) {
-  const count = group.querySelector(".work-body").children.length;
-  group.querySelector(".work-label").textContent =
-    count === 1 ? "1 step" : count + " steps";
+  const cards = [...group.querySelectorAll(":scope > .work-body > details.tool")];
+  const phrases = [];
+  let failed = false;
+  let failures = 0;
+  for (const card of cards) {
+    const info = card.toolInfo || {};
+    const state = card.classList.contains("failed") ? "failed" : card.classList.contains("done") ? "done" : "running";
+    const input = info.input && typeof info.input === "object" ? info.input : {};
+    const described = typeof input.description === "string" ? input.description.trim() : "";
+    if (state === "failed") {
+      failed = true;
+      // First, not in sequence: counted into a "+2" it would be the one
+      // phrase the red line is about and the one it does not show.
+      phrases.splice(failures++, 0, { text: failedPhrase(info.name, input, described) });
+      continue;
+    }
+    if (described) {
+      phrases.push({ text: described });
+      continue;
+    }
+    const kind = workKind(info.name);
+    const last = phrases.at(-1);
+    if (last && last.kind === kind && last.state === state) {
+      last.count += 1;
+      continue;
+    }
+    phrases.push({ kind, state, count: 1, name: info.name, input });
+  }
+
+  const texts = phrases.map((phrase) => phrase.text || kindPhrase(phrase));
+  const shown = texts.slice(0, 2).map((text, i) => (i ? lowerFirst(text) : text));
+  let label = shown.join(t("work.sep"));
+  if (texts.length > 2) label += " +" + (texts.length - 2);
+  group.querySelector(".work-label").textContent = label || t("work.working");
+  group.classList.toggle("failed", failed);
+}
+
+/** Which verb a tool gets when it did not say what it was for. */
+function workKind(name) {
+  if (name === "bash") return "command";
+  if (name === "read" || name === "artifact_read" || name === "mcp_read_resource") return "read";
+  if (name === "write" || name === "artifact_write") return "write";
+  if (name === "edit") return "edit";
+  if (name === "list" || name === "mcp_list_resources") return "list";
+  if (name === "glob" || name === "grep") return "search";
+  if (name === "recall" || name === "memory") return "recall";
+  if (name === "todo_write") return "plan";
+  if (name === "skill") return "skill";
+  if (name === "ask_user") return "ask";
+  return "other";
+}
+
+/** The last segment of a path, which is what a person recognises. */
+function baseName(value) {
+  if (typeof value !== "string" || !value) return "";
+  return value.replace(/\/+$/, "").split("/").pop() || value;
+}
+
+function kindPhrase(phrase) {
+  const now = phrase.state === "running";
+  const many = phrase.count > 1;
+  const file = baseName(phrase.input.path);
+  switch (phrase.kind) {
+    case "command":
+      return now ? t("work.commandNow") : many ? t("work.commandN", { n: phrase.count }) : t("work.command");
+    case "read":
+    case "write":
+    case "edit":
+      if (now) return t("work." + phrase.kind + "Now", { file: file || "…" });
+      if (many) return t("work." + phrase.kind + "N", { n: phrase.count });
+      return t("work." + phrase.kind, { file: file || "…" });
+    case "list":
+      // No path is the working directory, and "Listed ." reads as a typo.
+      if (!file || file === ".") return t(now ? "work.listHereNow" : "work.listHere");
+      return t(now ? "work.listNow" : "work.list", { dir: file });
+    case "search":
+      return now ? t("work.searchNow") : many ? t("work.searchN", { n: phrase.count }) : t("work.search");
+    case "recall":
+    case "plan":
+    case "ask":
+      return t("work." + phrase.kind + (now ? "Now" : ""));
+    case "skill":
+      return t(now ? "work.skillNow" : "work.skill", { name: String(phrase.input.name || "") });
+    default:
+      return t(now ? "work.otherNow" : "work.other", { tool: toolTitle(phrase.name, phrase.input) });
+  }
+}
+
+function failedPhrase(name, input, described) {
+  if (name === "bash") {
+    const command = typeof input.command === "string" ? input.command.trim().split("\n")[0] : "";
+    const what = described || (command.length > 32 ? command.slice(0, 32) + "…" : command);
+    return t("work.failedRun", { what: what || t("work.aCommand") });
+  }
+  return t("work.failed", { tool: described || toolTitle(name, input) });
+}
+
+/**
+ * The second phrase continues a sentence, so it starts lower-case — unless it
+ * opens with a name or an acronym, which keeps its capital.
+ */
+function lowerFirst(text) {
+  if (text.length > 1 && text[1] === text[1].toLowerCase() && /^[A-Z]/.test(text)) {
+    return text[0].toLowerCase() + text.slice(1);
+  }
+  return text;
 }
 
 // --- tool presentation -----------------------------------------------------
@@ -3569,15 +3974,61 @@ function catalogSummary(text) {
   return "";
 }
 
-function toolCard(id, title, name, input) {
+/**
+ * A card for a call the model is still writing: the name is known, the
+ * arguments are not. Without it a long file write was a reply that said "now
+ * writing the file" and then showed nothing until the whole file had streamed.
+ */
+function pendingToolCard(id, name) {
+  if (P.tools.has(id)) return;
   const card = el("details", "tool");
   const summary = el("summary");
   summary.appendChild(el("span", "dot"));
-  summary.appendChild(el("span", "name", toolTitle(name, input, title)));
+  summary.appendChild(el("span", "name", toolTitle(name)));
   summary.appendChild(el("span", "ms", ""));
   card.appendChild(summary);
-
   const body = el("div", "tool-body");
+  card.appendChild(body);
+
+  card.toolInfo = { name };
+  const group = workGroup();
+  group.querySelector(".work-body").appendChild(card);
+  bumpWorkLabel(group);
+  P.tools.set(id, { card, body, name, input: undefined, group, pending: true });
+  P.streaming = null;
+  follow();
+}
+
+/**
+ * Drop the cards for calls that were announced and never ran — an unknown tool
+ * or bad input is answered without a tool_start, and a retried request gets
+ * fresh ids. Left alone they would pulse forever.
+ */
+function dropPendingTools() {
+  for (const [id, entry] of P.tools) {
+    if (!entry.pending) continue;
+    entry.card.remove();
+    P.tools.delete(id);
+    const count = entry.group.querySelector(".work-body").children.length;
+    if (count) bumpWorkLabel(entry.group);
+    else entry.group.remove();
+  }
+}
+
+function toolCard(id, title, name, input) {
+  const announced = P.tools.get(id);
+  const card = announced ? announced.card : el("details", "tool");
+  if (announced) {
+    card.querySelector(".name").textContent = toolTitle(name, input, title);
+  } else {
+    const summary = el("summary");
+    summary.appendChild(el("span", "dot"));
+    summary.appendChild(el("span", "name", toolTitle(name, input, title)));
+    summary.appendChild(el("span", "ms", ""));
+    card.appendChild(summary);
+  }
+
+  const body = announced ? announced.body : el("div", "tool-body");
   // An app call is its arguments; the app, tool and version are already the
   // title or plumbing. A call with nothing to show gets no "input" label over
   // an empty {} — which was most of what a catalog lookup used to draw. A
@@ -3594,6 +4045,15 @@ function toolCard(id, title, name, input) {
       body.appendChild(pre);
     }
   }
+  card.toolInfo = { name, input };
+  if (announced) {
+    P.tools.set(id, { card, body, name, input, group: announced.group });
+    // The arguments have arrived, and with them the description or the path
+    // the line was waiting for.
+    bumpWorkLabel(announced.group);
+    follow();
+    return;
+  }
   card.appendChild(body);
 
   const group = workGroup();
@@ -3609,6 +4069,8 @@ function finishTool(id, result, ms, isError) {
   if (!entry) return;
   entry.card.classList.add(isError ? "failed" : "done");
   entry.card.querySelector(".ms").textContent = ms + "ms";
+  // Running becomes ran, or the group turns red.
+  if (entry.group) bumpWorkLabel(entry.group);
 
   const text = (result || []).map((part) => (part.type === "text" ? part.text : "")).join("");
   entry.body.appendChild(el("div", "label", isError ? "error" : "result"));
@@ -3664,7 +4126,7 @@ function pane(id) {
     const node = el("div", "pane");
     node.hidden = true;
     log.appendChild(node);
-    entry = { node, title: t("session.untitled"), cwd: "", busy: false, turn: null, streaming: null, tools: new Map(), thinking: null };
+    entry = { node, title: t("session.untitled"), cwd: "", busy: false, queued: [], turn: null, streaming: null, tools: new Map(), thinking: null };
     panes.set(id, entry);
   }
   return entry;
@@ -3811,6 +4273,10 @@ function applyState(s) {
     ctxText.textContent = pct + "%";
   }
   setBusy(Boolean(s.busy));
+  // Addressed by session: a reload and a tab switch both land here, and the
+  // pane this state describes is not always the one an event last touched.
+  if (s.sessionId) pane(s.sessionId).queued = s.queued || [];
+  renderQueued();
 }
 
 let workingNode = null;
@@ -3865,6 +4331,9 @@ function setBusy(busy) {
   sendBtn.hidden = busy;
   stopBtn.hidden = !busy;
   if (!busy) stopWorking();
+  // The row itself does not change, but whether the queue can be released by
+  // hand does, and that is drawn on the send button.
+  renderQueued();
 }
 
 /** "just now", "12m", "3h", "yesterday", "6 Aug" — scannable at a glance. */
@@ -3906,6 +4375,24 @@ function toggleProject(cwd, open) {
   paintSessions();
 }
 
+/** The key the routine group's open state is kept under, beside the projects'. */
+const ROUTINE_GROUP = "\u0000routines";
+
+/**
+ * The header over routine runs. A fold like a project's, with the clock the
+ * Routines page uses, and none of a project's actions: there is no new session
+ * to start in it, and deleting runs is done row by row.
+ */
+function routineHead(count, open) {
+  const head = el("button", "fold" + (open ? " open" : ""));
+  head.type = "button";
+  head.appendChild(navIcon("nav-routines"));
+  head.appendChild(el("span", "fold-name", t("session.routines")));
+  head.appendChild(el("span", "count", String(count)));
+  head.addEventListener("click", () => toggleProject(ROUTINE_GROUP, open));
+  return head;
+}
+
 /** A project header: a folder, a name, and how many sessions it holds. */
 function projectHead(cwd, name, count, open) {
   const head = el("button", "fold" + (open ? " open" : ""));
@@ -3949,7 +4436,17 @@ function projectHead(cwd, name, count, open) {
   more.addEventListener("click", (e) => {
     e.stopPropagation();
     if (menuRow === head) return closeRowMenu();
+    openMenu(more);
+  });
+  // The same menu under the pointer: a right-click on a project is asking for
+  // it, and the browser's own (Back, Reload, View Source) is about the page.
+  head.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openMenu(pointAnchor(e));
+  });
 
+  function openMenu(anchor) {
     // Armed once before it fires, like the session row it borrows from: this
     // is a modal's worth of consequence reached from a list row, and the
     // consequence is spelled out where a dialog would put it.
@@ -3958,7 +4455,7 @@ function projectHead(cwd, name, count, open) {
         del.classList.add("armed");
         del.querySelector(".menu-label").textContent = t("projects.deleteConfirm");
         rowMenu.replaceChildren(el("div", "menu-note", t("projects.deleteNote")), del);
-        placeRowMenu(more);
+        placeRowMenu(anchor);
         return;
       }
       closeRowMenu();
@@ -3971,6 +4468,20 @@ function projectHead(cwd, name, count, open) {
         closeRowMenu();
         void chooseProject(cwd);
       } }),
+      menuItem(t("projects.rename"), { key: "n", run: () => {
+        closeRowMenu();
+        void renameProjectUi(cwd, name);
+      } }),
+      menuItem(t(IS_MAC ? "projects.revealMac" : IS_WIN ? "projects.revealWin" : "projects.reveal"), { key: "f", run: () => {
+        closeRowMenu();
+        void api("/reveal", { path: cwd }).then((body) => {
+          if (body && body.error) addNotice(body.error, "err");
+        });
+      } }),
+      menuItem(t("projects.export"), { key: "e", run: () => {
+        closeRowMenu();
+        exportProjectUi(cwd);
+      } }),
       menuItem(t(pinned ? "projects.unpin" : "projects.pin"), { key: "p", run: () => {
         closeRowMenu();
         void togglePin("project", cwd, !pinned);
@@ -3992,8 +4503,8 @@ function projectHead(cwd, name, count, open) {
       } }));
     }
     items.push(menuSep(), del);
-    openRowMenu(more, head, items);
-  });
+    openRowMenu(anchor, head, items);
+  }
 
   // The header is a button, so the menu control cannot live inside it.
   const wrap = el("div", "fold-row");
@@ -4147,8 +4658,14 @@ function paintSessions() {
   const active = sessionRows.find((s) => s.current);
   const here = active ? active.cwd : (projects.find((p) => p.current) || {}).path;
 
+  // A routine's runs are kept together rather than mixed into the project's
+  // own work: they arrive on their own, often overnight, and the question
+  // someone opens them with is "what did my routines do", not "what was I
+  // doing in this project". Claude Code's desktop app draws the same line.
+  const scheduled = sessionRows.filter((s) => s.routine);
   const byProject = new Map();
   for (const s of sessionRows) {
+    if (s.routine) continue;
     const key = s.cwd || "";
     if (!byProject.has(key)) byProject.set(key, []);
     byProject.get(key).push(s);
@@ -4172,7 +4689,19 @@ function paintSessions() {
   // Everything here belongs to the project already named at the top of the
   // sidebar: a header repeating it is noise, and the rows do not need
   // indenting under a heading that is not there.
-  const named = !(order.length === 1 && order[0] === here);
+  const named = !(order.length === 1 && order[0] === here) || scheduled.length > 0;
+
+  if (scheduled.length) {
+    const open = ROUTINE_GROUP in projectOpen ? projectOpen[ROUTINE_GROUP] === true : true;
+    sessionList.appendChild(routineHead(scheduled.length, open));
+    if (open) {
+      const all = showingAll.has(ROUTINE_GROUP) || scheduled.length <= PREVIEW + 1;
+      for (const s of all ? scheduled : scheduled.slice(0, PREVIEW)) {
+        sessionList.appendChild(sessionRow(s, true));
+      }
+      if (!all) sessionList.appendChild(showMore(ROUTINE_GROUP, true));
+    }
+  }
 
   for (const cwd of order) {
     const list = arrange(byProject.get(cwd), (s) => s.id, sessionOrder[cwd], (s) => s.pinned);
@@ -4387,6 +4916,15 @@ function menuSep() {
   return el("div", "menu-sep");
 }
 
+/**
+ * Something placeRowMenu can hang a menu from when there is no button: the
+ * point a right-click landed on, as a rectangle with no size.
+ */
+function pointAnchor(e) {
+  const rect = { left: e.clientX, right: e.clientX, top: e.clientY, bottom: e.clientY, width: 0, height: 0 };
+  return { getBoundingClientRect: () => rect };
+}
+
 function openRowMenu(button, row, items) {
   closeRowMenu();
   rowMenu.replaceChildren(...items);
@@ -4415,6 +4953,13 @@ document.addEventListener("keydown", (e) => {
 });
 window.addEventListener("resize", closeRowMenu);
 sessionList.addEventListener("scroll", closeRowMenu);
+// Nowhere in the sidebar is the browser's menu the one meant: a row answers
+// with its own above, and the space between rows answers with nothing rather
+// than with Back, Reload and View Source. Text fields keep theirs — paste.
+sidebarEl.addEventListener("contextmenu", (e) => {
+  if (e.target.closest("input, textarea, [contenteditable]")) return;
+  e.preventDefault();
+});
 
 function sessionRow(s, nested) {
   const item = el("div", "session" + (s.current ? " active" : "") + (nested ? " nested" : ""));
@@ -4469,7 +5014,17 @@ function sessionRow(s, nested) {
   more.addEventListener("click", (e) => {
     e.stopPropagation();
     if (menuRow === item) return closeRowMenu();
+    openMenu(more);
+  });
+  // Right-click opens the row's own menu where the pointer is, instead of the
+  // browser's, which has nothing to say about a session.
+  item.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openMenu(pointAnchor(e));
+  });
 
+  function openMenu(anchor) {
     // A transcript cannot be recovered, so the item asks once rather than
     // deleting on the click that opened the menu — but a modal for something
     // reached from a list row is heavier than what it protects against. The
@@ -4479,14 +5034,14 @@ function sessionRow(s, nested) {
         del.classList.add("armed");
         del.querySelector(".menu-label").textContent = t("session.deleteConfirm");
         rowMenu.replaceChildren(el("div", "menu-note", t("session.deleteNote")), del);
-        placeRowMenu(more);
+        placeRowMenu(anchor);
         return;
       }
       closeRowMenu();
       void deleteSession(s.id);
     } });
 
-    openRowMenu(more, item, [
+    openRowMenu(anchor, item, [
       menuItem(t(s.pinned ? "session.unpin" : "session.pin"), { key: "p", run: () => {
         closeRowMenu();
         void togglePin("session", s.id, !s.pinned);
@@ -4504,7 +5059,7 @@ function sessionRow(s, nested) {
       menuSep(),
       del,
     ]);
-  });
+  }
   item.appendChild(more);
 
   item.addEventListener("click", () => {
@@ -4648,12 +5203,30 @@ async function loadModels() {
   const markFor = (id) =>
     markers.get(id) || ((extra) => providerMark(id, id, extra));
 
+  // No context window here. It is a number you consult when choosing a model
+  // once, not every time you pick one off a list you already know, and printed
+  // down the right of four hundred rows it competes with the only thing the
+  // row is for — the name. The panel and the provider dialog still carry it,
+  // where a model is being chosen rather than switched to.
   const listed = models.map((m) => ({
     value: m.id,
-    label: m.id,
+    // Without the provider: the group header above the row already names it,
+    // and "official/" repeated down every row pushes the part that differs to
+    // the right. An aggregator's own namespace stays — "~anthropic/…" under
+    // OpenRouter is what tells its rows apart. The whole id is still what
+    // search matches, so typing it as /model takes it works here too.
+    label: m.id.indexOf(m.provider + "/") === 0 ? m.id.slice(m.provider.length + 1) : m.id,
+    keywords: m.id,
     group: m.provider,
     mark: markFor(m.provider),
-    sub: m.contextWindow ? Math.round(m.contextWindow / 1000) + "k" : "",
+    // The id is left whole even where it already ends in ":free". That suffix
+    // is OpenRouter's routing variant and part of the string somebody types
+    // into /model, and trimming it to save the repetition would render
+    // minimax-m2.7 and minimax-m2.7:free as the same row — two models that
+    // differ in what they cost, told apart by a badge alone. A vendor whose
+    // free models are not named for it gets the badge and nothing else, which
+    // is the case this exists for.
+    ...(m.free ? { tag: t("models.free") } : {}),
   }));
 
   // A vendor with nothing to list is still an answer. Local servers and the
@@ -4675,10 +5248,14 @@ async function loadModels() {
   // nothing discovered yet landed under four hundred rows of the vendors that
   // had — which put the recommended plan, whose whole roster arrives only
   // after signing in, at the very bottom of the menu meant to sell it.
+  // Within a vendor, the server's order: newest first by family, variants
+  // after their model (model-order.ts). A string sort here put claude-opus-4-5
+  // above claude-opus-5 and scattered :batch rows through the list.
+  const rank = new Map(models.map((m, i) => [m.id, i]));
   modelOptions = listed.concat(stubs).sort(
     (a, b) =>
       (order.get(a.group) ?? 9999) - (order.get(b.group) ?? 9999) ||
-      a.value.localeCompare(b.value),
+      (rank.get(a.value) ?? 0) - (rank.get(b.value) ?? 0),
   );
 
   const current = models.find((m) => m.current);
@@ -4937,7 +5514,21 @@ events.onmessage = (message) => {
       break;
     }
 
+    // One event carrying the whole list rather than add/remove pairs: the
+    // page redraws from it, so a dropped event cannot leave a chip behind for
+    // a message that was sent ten minutes ago.
+    case "queue":
+      P.queued = event.queued || [];
+      renderQueued();
+      break;
+
     case "assistant_message": P.streaming = null; break;
+    case "turn_start": dropPendingTools(); break;
+    case "tool_pending":
+      sealThinking();
+      pendingToolCard(event.toolCallId, event.toolName);
+      startWorking(toolTitle(event.toolName));
+      break;
     case "tool_start":
       sealThinking();
       toolCard(event.toolCallId, event.title, event.toolName, event.input);
@@ -5030,6 +5621,12 @@ events.onmessage = (message) => {
       addNotice(t("memory.extracted", { count: event.notes.length, list: event.notes.map((note) => note.summary).join("; ") }));
       break;
     case "notice": addNotice(event.message); break;
+    // A routine ran: its session is new, and the Routines page, if open, has
+    // a result to show.
+    case "sessions":
+      void loadSessions();
+      if (shownPanel === "nav-routines") void showRoutines();
+      break;
     case "error":
       P.streaming = null;
       // A 402 is not an error to print, it is a screen to open. What the
@@ -5048,6 +5645,7 @@ events.onmessage = (message) => {
     case "done": {
       sealThinking();
       stopWorking();
+      dropPendingTools();
       // The fork point comes from the server: one reply can span several
       // stored messages, and a client-side count would drift the moment tool
       // results land in a message of their own.
@@ -5348,8 +5946,16 @@ function showAsk(event) {
   askState = { request, view, expanded: false, raw: false };
 
   paintAskHead(view, request);
-  askScope.textContent = "";
-  askScope.hidden = true;
+  // Every description is laid out up front, one line each and stacked in one
+  // cell, so hovering swaps the text without resizing the dialog. The rule key
+  // closes each line: a long path is what gets cut, and the tooltip has it all.
+  const ruleKey = askRuleKey(request);
+  for (const line of askScope.children) {
+    const scope = line.dataset.scope;
+    line.textContent = t(scope === "once" ? "ask.scopeOnce" : scope === "session" ? "ask.scopeSession" : "ask.scopeProject", { key: ruleKey });
+    line.title = line.textContent;
+  }
+  askScope.dataset.show = "once";
   renderAskBody();
   // The palette is a convenience; this is a turn waiting on an answer. Two
   // stacked modals would leave the deeper one unreachable behind the newer.
@@ -5412,15 +6018,10 @@ for (const button of ask.querySelectorAll("[data-answer]")) {
   const scope = button.dataset.scope;
   if (!scope) continue;
   const describe = () => {
-    if (!askState) return;
-    askScope.textContent = t(scope === "session" ? "ask.scopeSession" : "ask.scopeProject", {
-      key: askRuleKey(askState.request),
-    });
-    askScope.hidden = false;
+    askScope.dataset.show = scope;
   };
   const hide = () => {
-    askScope.textContent = "";
-    askScope.hidden = true;
+    askScope.dataset.show = "once";
   };
   button.addEventListener("mouseenter", describe);
   button.addEventListener("focus", describe);
@@ -5827,6 +6428,7 @@ function questionSettled(entry) {
 // stays small and a half-finished upload cannot start a turn.
 
 const attachEl = document.getElementById("attachments");
+const queuedEl = document.getElementById("queued");
 const fileInput = document.getElementById("file");
 const composerBox = document.getElementById("composer-box");
 let staged = [];
@@ -5847,6 +6449,52 @@ let refs = [];
 const REF_ICON = { file: "file", folder: "folder", connector: "plug", plugin: "plugin", skill: "skill" };
 const refKey = (ref) => ref.kind + ":" + ref.value;
 
+/**
+ * The messages waiting behind the running turn.
+ *
+ * Drawn from the pane rather than from a local list: the queue lives on the
+ * server, so a reload and a second tab show the same thing, and an entry that
+ * has just been sent disappears because the server said so.
+ */
+function renderQueued() {
+  queuedEl.replaceChildren();
+  // The active pane, not the event-scoped P: this row sits in the composer,
+  // and the composer belongs to the tab on screen even while a background
+  // tab is the one streaming.
+  const here = panes.get(activeId);
+  const waiting = (here && here.queued) || [];
+  for (const entry of waiting) {
+    const row = el("div", "q" + (entry.soon ? " soon" : ""));
+    // Two different promises: one joins the turn that is running, the other
+    // waits for it to end. Saying "Queued" for both would misdescribe half.
+    row.appendChild(el("span", "tag", t(entry.soon ? "queue.soon" : "queue.mark")));
+    const names = (entry.attachments || []).join(", ");
+    row.appendChild(el("span", "n", entry.text || names || t("queue.attachmentsOnly")));
+    // Only on the ones that are waiting. A message already handed to the
+    // running turn is as immediate as it gets, and a second button promising
+    // to hurry it would be promising nothing.
+    if (!entry.soon) {
+      // Words, not an arrow. An arrow beside a × on a row that is already
+      // about sending reads as "next" or "move"; the one thing it has to say
+      // is that this message goes now.
+      const now = el("button", "go", t("queue.sendNow"));
+      now.type = "button";
+      now.addEventListener("click", () => void api("/sendnow", { session: activeId, id: entry.id }));
+      row.appendChild(now);
+    }
+    const drop = el("button", "x", "×");
+    drop.type = "button";
+    drop.title = t("queue.drop");
+    drop.addEventListener("click", () => void api("/unqueue", { session: activeId, id: entry.id }));
+    row.appendChild(drop);
+    queuedEl.appendChild(row);
+  }
+  // Idle with something still waiting means the turn was stopped or failed —
+  // the server will not restart a queue on its own after either. The send
+  // button becomes the way to let it go.
+  sendBtn.classList.toggle("has-queue", waiting.length > 0 && !(here && here.busy));
+}
+
 function renderAttachments() {
   attachEl.replaceChildren();
 
@@ -6894,8 +7542,7 @@ input.addEventListener("keydown", (e) => {
   input.setSelectionRange(from, from);
   paintMirror();
   // The box may now fit in fewer lines, and the grower only runs on input.
-  input.style.height = "auto";
-  input.style.height = Math.min(Math.max(input.scrollHeight, 56), window.innerHeight * 0.32) + "px";
+  autosize();
 });
 
 /**
@@ -6937,6 +7584,70 @@ function paintMirror() {
   if (inputMirror.querySelector("mark")) inputMirror.style.setProperty("--at-w", atWidth() + "px");
 }
 
+// --- the caret ------------------------------------------------------------
+
+/**
+ * Draw the caret, because the field cannot draw one thick enough.
+ *
+ * A textarea's caret is one device pixel and the only thing CSS offers is its
+ * colour. On a pale field that bar is genuinely hard to find, so the native
+ * one is hidden and this one is put where it would have been.
+ *
+ * Where that is comes from a probe: the same box as the mirror, with the same
+ * font, width, padding and wrapping, holding the text up to the caret and
+ * then a zero-width marker. Whatever rectangle the marker lands in is where
+ * the field would have drawn the bar — including after a wrap, which is the
+ * case arithmetic on character widths always gets wrong.
+ */
+const caretEl = document.getElementById("caret");
+const caretProbe = document.getElementById("caret-probe");
+let caretRest;
+
+function placeCaret() {
+  // Only when the field has the caret and nothing is selected. A selection
+  // draws its own edges, and a bar inside one reads as a second insertion
+  // point.
+  const showing =
+    document.activeElement === input && input.selectionStart === input.selectionEnd;
+  caretEl.classList.toggle("on", showing);
+  if (!showing) return;
+
+  const head = input.value.slice(0, input.selectionStart);
+  caretProbe.textContent = head;
+  // A trailing newline collapses unless something follows it, which would put
+  // the caret at the end of the line above rather than on the empty one.
+  const marker = document.createElement("span");
+  marker.textContent = String.fromCharCode(0x200b);
+  caretProbe.appendChild(marker);
+
+  // The marker's offsets are inside the probe; the caret is placed against
+  // the wrapper they share. The probe is inset and padded so the mention chip
+  // has somewhere to bleed — read those numbers off it rather than repeating
+  // them here, or the caret drifts the day the padding changes. Scrolling is
+  // the field's, not the probe's.
+  // The line box, which is what the field's own caret fills. Nothing here is
+  // trying to improve on the native geometry — the only reason this caret
+  // exists is that CSS offers no way to make that one wider than a pixel.
+  caretEl.style.left = caretProbe.offsetLeft + marker.offsetLeft + "px";
+  caretEl.style.top = caretProbe.offsetTop + marker.offsetTop - input.scrollTop + "px";
+  caretEl.style.height = marker.offsetHeight + "px";
+
+  // Solid while it is moving, blinking once it settles.
+  caretEl.classList.add("moving");
+  clearTimeout(caretRest);
+  caretRest = setTimeout(() => caretEl.classList.remove("moving"), 420);
+}
+
+// Every way the caret can move. The selectionchange event covers the keyboard
+// and the mouse both, and fires for a textarea in every browser this ships to.
+for (const event of ["input", "focus", "blur", "scroll"]) {
+  input.addEventListener(event, placeCaret);
+}
+document.addEventListener("selectionchange", () => {
+  if (document.activeElement === input) placeCaret();
+});
+window.addEventListener("resize", placeCaret);
+
 /** How wide the field draws an @ sign: the slot the icon has to fit in. */
 function atWidth() {
   const probe = document.createElement("canvas").getContext("2d");
@@ -6975,6 +7686,17 @@ const COMMANDS = [
       return void api("/model", { model: arg }).then(pushNotice);
     },
   },
+  {
+    name: "login",
+    arg: "",
+    hint: () => t("cmd.login"),
+    // The same dialog the sidebar's sign-in row opens, so every way in — the
+    // website and the emailed code — is on screen.
+    run: async () => {
+      const account = await getJson("/account");
+      openConnect((account && account.provider) || "official");
+    },
+  },
   {
     name: "mode",
     arg: "mode",
@@ -7192,8 +7914,9 @@ document.getElementById("composer").addEventListener("submit", (e) => {
   // are sent as prose, because /etc and and/or are things people write.
   if (runCommand(text)) {
     input.value = "";
-    input.style.height = "auto";
-      closeAttachMenu();
+    autosize();
+    paintMirror();
+    closeAttachMenu();
     return;
   }
   // A question waiting in this tab takes what is typed as its answer. People
@@ -7202,12 +7925,19 @@ document.getElementById("composer").addEventListener("submit", (e) => {
   const waiting = openQuestion(activeId);
   if (waiting && text && !staged.length) {
     input.value = "";
-    input.style.height = "auto";
+    autosize();
     paintMirror();
     void sendQuestion(waiting, { outcome: "dismissed", note: text });
     return;
   }
-  if (!text && !staged.length && !refs.length) return;
+  if (!text && !staged.length && !refs.length) {
+    // Send on an empty composer normally does nothing. With messages left
+    // waiting — the turn under them was stopped, or it failed — it is the
+    // release: the server does not restart a queue after either by itself.
+    const here = panes.get(activeId);
+    if (here && !here.busy && (here.queued || []).length) void api("/flush", { session: activeId });
+    return;
+  }
   const ids = staged.map((file) => file.id);
   const shots = staged
     .filter((file) => file.preview)
@@ -7215,7 +7945,7 @@ document.getElementById("composer").addEventListener("submit", (e) => {
   if (shots.length) sentPreviews.set(activeId, shots);
   const referenced = refs.map((ref) => ({ kind: ref.kind, value: ref.value }));
   input.value = "";
-  input.style.height = "auto";
+  autosize();
   paintMirror();
   staged = [];
   refs = [];
@@ -7237,15 +7967,92 @@ input.addEventListener("keydown", (e) => {
   }
 });
 input.addEventListener("input", () => {
-  // Reset first so the box can shrink as well as grow, then clamp. The floor
-  // matches the CSS min-height, or deleting a long paste would leave the box
-  // taller than an empty one.
-  input.style.height = "auto";
-  const wanted = Math.max(input.scrollHeight, 56);
-  input.style.height = Math.min(wanted, window.innerHeight * 0.32) + "px";
+  autosize();
   paintMirror();
+  placeCaret();
 });
 
+// --- the field's height ---------------------------------------------------
+
+/**
+ * How tall the field is: grown to fit what is typed, or what it was dragged to.
+ *
+ * FIELD_MIN matches the CSS floor, so deleting a long paste cannot leave the
+ * box taller than an empty one. The ceilings are a share of the window rather
+ * than fixed numbers: the field must not swallow the conversation on a short
+ * screen. Growing on its own stops at a third of the window; a person dragging
+ * is allowed most of it, because they can see what they are giving up.
+ */
+const FIELD_MIN = 56;
+const fieldGrowMax = () => window.innerHeight * 0.32;
+const fieldDragMax = () => Math.max(FIELD_MIN, window.innerHeight * 0.7);
+const FIELD_KEY = "oharness.composerHeight";
+
+/** Set by dragging the grip; null means the field sizes itself. */
+let fieldHeight = null;
+try {
+  const saved = Number(localStorage.getItem(FIELD_KEY));
+  if (Number.isFinite(saved) && saved >= FIELD_MIN) fieldHeight = saved;
+} catch { /* private window, or storage turned off */ }
+
+function autosize() {
+  if (fieldHeight !== null) {
+    // A dragged height wins over the CSS ceiling, which is there to bound the
+    // field's own growing rather than to overrule the person.
+    input.style.maxHeight = "none";
+    input.style.height = Math.min(fieldHeight, fieldDragMax()) + "px";
+    return;
+  }
+  input.style.maxHeight = "";
+  // Reset first so the box can shrink as well as grow, then clamp.
+  input.style.height = "auto";
+  input.style.height = Math.min(Math.max(input.scrollHeight, FIELD_MIN), fieldGrowMax()) + "px";
+}
+
+function setFieldHeight(px) {
+  fieldHeight = px === null ? null : Math.round(Math.min(Math.max(px, FIELD_MIN), fieldDragMax()));
+  try {
+    if (fieldHeight === null) localStorage.removeItem(FIELD_KEY);
+    else localStorage.setItem(FIELD_KEY, String(fieldHeight));
+  } catch { /* nothing to do: the height still applies for this page */ }
+  autosize();
+}
+
+const grip = document.getElementById("grip");
+grip.addEventListener("pointerdown", (e) => {
+  // Only the primary button, and never a second drag inside the first.
+  if (e.button !== 0) return;
+  e.preventDefault();
+  const startY = e.clientY;
+  const startHeight = input.getBoundingClientRect().height;
+  // Capture is the nicety; the window listeners below are what make the drag
+  // work. The strip is twelve pixels tall, and a pointer moving faster than
+  // the box can follow leaves it within a frame.
+  try { grip.setPointerCapture(e.pointerId); } catch { /* no live pointer to capture */ }
+  grip.classList.add("dragging");
+  document.body.classList.add("resizing");
+
+  // Up is taller: the box grows from its top edge, which is the edge in hand.
+  const move = (ev) => setFieldHeight(startHeight + (startY - ev.clientY));
+  const done = () => {
+    window.removeEventListener("pointermove", move);
+    window.removeEventListener("pointerup", done);
+    window.removeEventListener("pointercancel", done);
+    grip.classList.remove("dragging");
+    document.body.classList.remove("resizing");
+  };
+  window.addEventListener("pointermove", move);
+  window.addEventListener("pointerup", done);
+  window.addEventListener("pointercancel", done);
+});
+// Back to sizing itself. A drag is easy to do by accident on a trackpad, and
+// without this the only way back is to guess the original height.
+grip.addEventListener("dblclick", () => setFieldHeight(null));
+// A dragged height is kept, but never past the ceiling of a window that has
+// since been made shorter.
+window.addEventListener("resize", () => autosize());
+autosize();
+
 // --- the mention chip under the text ------------------------------------
 
 
@@ -8370,6 +9177,11 @@ async function showModels() {
         if (model.contextWindow) {
           chip.appendChild(el("span", "sub", Math.round(model.contextWindow / 1000) + "k"));
         }
+        // Only ever on a model whose vendor quoted zero for both halves.
+        // The server's isFree is the whole of the decision, so a chip without
+        // this is a model nobody has said is free, not one that is known to
+        // cost something.
+        if (model.free) chip.appendChild(el("span", "free", t("models.free")));
         chip.addEventListener("click", () => {
           track("model_switched", { model: model.id, via: "panel" });
           void api("/model", { session: activeId, id: model.id }).then(async (state) => {
@@ -8551,9 +9363,33 @@ function openConnect(providerId, thenModel) {
   field.autocomplete = "off";
   field.spellcheck = false;
 
-  const hint = el("div", "cn-note");
+  const hint = el("div", "cn-note cn-tip");
   hint.hidden = true;
+  hint.setAttribute("role", "tooltip");
   const why = document.getElementById("cn-why");
+  // In the dialog's column rather than its body, so it floats over the body
+  // instead of taking a place in it. Left from the last opening otherwise.
+  const main = why.closest(".cn-main");
+  for (const old of main.querySelectorAll(":scope > .cn-tip")) old.remove();
+  main.appendChild(hint);
+
+  // A third-party key is the one people hesitate over pasting into a new app,
+  // so the dialog says, in plain sight, where it goes and what does not happen
+  // to it. Not for OHarness's own key, which is ours to issue. And not
+  // "secure": it is a plain file only this account can read, and claiming
+  // more would promise something the file does not do.
+  const thirdParty = provider.id !== "official";
+  // One line, the fact in bold. The path and the file mode are behind the
+  // mark with the rest of the detail, for whoever wants to check.
+  // Who the key goes to, by name: "sent only to Together AI" is a claim a
+  // person can check against the address the request goes to, where "stays
+  // on this computer" alone is not quite true — the provider has to see it.
+  const keptLocal = el("div", "cn-note cn-local");
+  keptLocal.appendChild(svgIcon("lock"));
+  const words = el("span");
+  words.appendChild(el("strong", null, t("models.keyLocalLead")));
+  words.appendChild(document.createTextNode(t("models.keyLocalRest", { provider: provider.label || provider.id })));
+  keptLocal.appendChild(words);
 
   // Hovering shows it, clicking keeps it. Peeking is the common case and a
   // click to see two lines and another to put them away is two clicks more
@@ -8659,6 +9495,7 @@ function openConnect(providerId, thenModel) {
       docs.hidden = true;
     }
     why.hidden = mode !== "key";
+    keptLocal.hidden = !(mode === "key" && thirdParty);
     // Hidden rather than left out, so switching modes does not rebuild a
     // button whose click may already have a sign-in running behind it.
     site.hidden = mode !== "account";
@@ -8827,7 +9664,7 @@ function openConnect(providerId, thenModel) {
     site,
     orCode,
     field,
-    hint,
+    keptLocal,
   );
   // Re-attached on every open: the actions row is markup, so a link left from
   // the last vendor would otherwise point at their key page. The link is built
@@ -9836,6 +10673,7 @@ function openProviderPicker(rest, byProvider) {
           if (model.contextWindow) {
             chip.appendChild(el("span", "sub", Math.round(model.contextWindow / 1000) + "k"));
           }
+          if (model.free) chip.appendChild(el("span", "free", t("models.free")));
           chip.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -9903,6 +10741,71 @@ document.getElementById("nav-models").addEventListener("click", () => {
 
 // --- routines and settings -------------------------------------------------
 
+/**
+ * Start a routine by describing it.
+ *
+ * A fresh session with the sentence begun, rather than a form: "every weekday
+ * morning, summarise yesterday's commits" is how people say it, and the agent
+ * turns that into a cron and a prompt that stands on its own. A form asked for
+ * five cron fields to express the same thing.
+ */
+async function newRoutine() {
+  await switchTo({ action: "new" });
+  input.value = t("routines.starter");
+  paintMirror();
+  input.focus();
+  input.setSelectionRange(input.value.length, input.value.length);
+}
+
+/** One run as a line: when, how it went, and what it cost. */
+function runSummary(run) {
+  const when = new Date(run.startedAt).toLocaleString();
+  if (run.skipped) return t("routines.skipped", { when });
+  const parts = [t(run.ok ? "routines.lastOk" : "routines.lastFailed", { when })];
+  if (run.catchUp) parts.push(t("routines.catchUp"));
+  parts.push(t("routines.turns", { n: run.turns }));
+  if (run.costUsd) parts.push("$" + run.costUsd.toFixed(4));
+  return parts.join(" · ");
+}
+
+/**
+ * A routine's past runs, fetched when opened.
+ *
+ * Skipped times are listed with the runs, with why: a routine that "didn't
+ * run" is the question this answers, and the answer is usually that the
+ * previous run was still going. A run opens its session — the whole of what
+ * the agent did, not the last paragraph of it.
+ */
+function routineHistory(routine) {
+  const box = el("details", "routine-history");
+  box.appendChild(el("summary", "muted small", t("routines.history")));
+  const list = el("div", "routine-runs");
+  box.appendChild(list);
+  box.addEventListener("toggle", () => {
+    if (!box.open || list.dataset.loaded) return;
+    list.dataset.loaded = "1";
+    list.appendChild(el("div", "muted small", t("routines.loading")));
+    void getJson("/routine/history?name=" + encodeURIComponent(routine.name)).then((body) => {
+      list.replaceChildren();
+      const runs = (body && body.runs) || [];
+      if (!runs.length) return void list.appendChild(el("div", "muted small", t("routines.noRuns")));
+      for (const run of runs) {
+        const line = el(run.sessionId ? "button" : "div", "routine-run small" + (run.ok || run.skipped ? "" : " failed"));
+        line.appendChild(el("span", null, runSummary(run)));
+        if (run.skipped && run.reason === "still-running") {
+          line.appendChild(el("span", "muted", t("routines.stillRunning")));
+        }
+        if (run.sessionId) {
+          line.type = "button";
+          line.addEventListener("click", () => void openSession(run.sessionId, routine.cwd));
+        }
+        list.appendChild(line);
+      }
+    });
+  });
+  return box;
+}
+
 /**
  * Scheduled runs, read from the scheduler rather than kept here.
  *
@@ -9917,41 +10820,88 @@ async function showRoutines() {
   const routines = body.routines;
 
   const panel = el("div", "panel");
-  panel.appendChild(el("h2", null, t("routines.title")));
+  const top = el("div", "row-head");
+  top.appendChild(el("h2", null, t("routines.title")));
+  const addButton = el("button", "ghost", t("routines.add"));
+  addButton.type = "button";
+  top.appendChild(addButton);
+  panel.appendChild(top);
+
+  addButton.addEventListener("click", () => void newRoutine());
 
   if (!routines || !routines.length) {
     panel.appendChild(el("p", "muted", t("routines.none")));
-    panel.appendChild(el("p", "muted",
-      "Add them under \"schedules\" in oharness.config.json — a name, a five-field cron, and the prompt each firing runs."));
+    panel.appendChild(el("p", "muted", t("routines.empty")));
   } else {
     for (const routine of routines) {
       const row = el("div", "row-card");
       const head = el("div", "row-head");
       head.appendChild(el("span", "row-title", routine.name));
       head.appendChild(el("span", "mono row-cron", routine.cron));
-      if (!routine.enabled) head.appendChild(el("span", "tag", "disabled"));
+      if (!routine.enabled) head.appendChild(el("span", "tag", t("routines.paused")));
+      // Where it runs. A routine is made in one project and runs there, from
+      // whichever project is open when its time comes, so the card says which.
+      if (routine.cwd) {
+        const where = el("span", "muted small routine-where", projectName(routine.cwd));
+        where.title = routine.cwd;
+        head.appendChild(where);
+      }
 
       const run = el("button", "ghost", t("routines.run"));
       run.type = "button";
       run.addEventListener("click", () => {
         run.disabled = true;
         run.textContent = t("routines.running");
-        void api("/routine", { name: routine.name }).then(() => showRoutines());
+        void api("/routine", { name: routine.name }).then((result) => {
+          pushNotice(result);
+          void showRoutines();
+        });
       });
       head.appendChild(run);
+      if (routine.removable) {
+        // Paused rather than deleted: the prompt someone got right is kept,
+        // and a routine that should not run this week is one switch away from
+        // running again.
+        const toggle = el("button", "switch");
+        toggle.type = "button";
+        toggle.setAttribute("role", "switch");
+        toggle.setAttribute("aria-checked", routine.enabled ? "true" : "false");
+        const label = routine.enabled ? t("routines.pause") : t("routines.resume");
+        toggle.setAttribute("aria-label", label);
+        toggle.title = label;
+        toggle.addEventListener("click", () => {
+          toggle.disabled = true;
+          void api("/routine/enabled", { name: routine.name, enabled: !routine.enabled }).then((result) => {
+            pushNotice(result);
+            void showRoutines();
+          });
+        });
+        head.appendChild(toggle);
+
+        const remove = el("button", "ghost", t("routines.remove"));
+        remove.type = "button";
+        remove.addEventListener("click", () => {
+          if (!confirm(t("routines.removeConfirm", { name: routine.name }))) return;
+          remove.disabled = true;
+          void api("/routine/remove", { name: routine.name }).then((result) => {
+            pushNotice(result);
+            void showRoutines();
+          });
+        });
+        head.appendChild(remove);
+      }
       row.appendChild(head);
 
       const bits = [];
-      if (routine.nextRunAt) bits.push("next " + new Date(routine.nextRunAt).toLocaleString());
-      if (routine.lastRun) {
-        bits.push((routine.lastRun.ok ? "last ok" : "last failed") +
-          " · " + routine.lastRun.turns + " turns" +
-          (routine.lastRun.costUsd ? " · $" + routine.lastRun.costUsd.toFixed(4) : ""));
+      if (routine.enabled && routine.nextRunAt) {
+        bits.push(t("routines.next", { when: new Date(routine.nextRunAt).toLocaleString() }));
       }
+      if (routine.lastRun) bits.push(runSummary(routine.lastRun));
       if (bits.length) row.appendChild(el("div", "muted small", bits.join("   ·   ")));
       if (routine.lastRun && routine.lastRun.error) {
         row.appendChild(el("div", "err small", routine.lastRun.error));
       }
+      row.appendChild(routineHistory(routine));
       panel.appendChild(row);
     }
   }
@@ -10445,6 +11395,20 @@ async function showSettings() {
       }),
     );
   }
+  // Only in the desktop app: keeping a computer awake is an Electron call, and
+  // a switch a browser tab cannot honour would be one that lies.
+  const keepAwake = await getJson("/keep-awake");
+  if (keepAwake && !keepAwake.error && keepAwake.available) {
+    target = groups.workspace;
+    field(
+      t("settings.keepAwake"),
+      t(keepAwake.enabled ? "settings.keepAwakeOn" : "settings.keepAwakeOff"),
+      t("settings.keepAwakeHint"),
+      toggle(keepAwake.enabled, t("settings.keepAwake"), (next) => {
+        void api("/keep-awake", { enabled: next }).then(showSettings);
+      }),
+    );
+  }
   const sections = [
     ["settings.section.workspace", [groups.workspace]],
     ["settings.section.sync", [groups.sync, groups.memory]],
@@ -10522,25 +11486,49 @@ async function showPermissions() {
   };
 
   // The mode first, because it decides what the rules below are exceptions to.
+  // Drawn on the scale it sits on, so "workspace-write" reads as the middle
+  // of three rather than as a word to look up.
+  const modes = ["read-only", "workspace-write", "full-access"];
   const modeCard = card(t("perms.mode"));
-  modeCard.appendChild(el("div", "mono", workspace.mode || "—"));
+  const modeRow = el("div", "perm-mode");
+  const current = workspace.mode || "";
+  modeRow.appendChild(el("span", "perm-mode-name " + current, current || "—"));
+  if (modes.indexOf(current) >= 0) {
+    const steps = el("div", "perm-mode-steps");
+    for (const mode of modes) steps.appendChild(el("span", "perm-mode-step" + (mode === current ? " on" : ""), mode));
+    modeRow.appendChild(steps);
+  }
+  modeCard.appendChild(modeRow);
+  if (modes.indexOf(current) >= 0) modeCard.appendChild(el("div", "muted small", t("perms.modeHint." + current)));
 
   const rulesCard = card(t("settings.rules"));
   rulesCard.appendChild(el("div", "muted small", t("settings.rulesHint")));
+  const group = (kind, title, items) => {
+    const box = el("div", "perm-group");
+    const head = el("div", "perm-group-head " + kind, title);
+    head.appendChild(el("span", "n", String(items.length)));
+    box.appendChild(head);
+    const chips = el("div", "perm-chips");
+    for (const item of items) {
+      const chip = el("span", "perm-chip " + kind, item);
+      chip.title = item;
+      chips.appendChild(chip);
+    }
+    box.appendChild(chips);
+    rulesCard.appendChild(box);
+  };
   let any = false;
   for (const kind of ["allow", "ask", "deny"]) {
     if (!rules[kind] || !rules[kind].length) continue;
     any = true;
-    rulesCard.appendChild(listing(kind + "  ·  " + rules[kind].length, rules[kind].join("\n")));
+    group(kind, t("perms.kind." + kind), rules[kind]);
   }
   const session = rules.sessionAllow || [];
   if (session.length) {
     any = true;
-    rulesCard.appendChild(listing(
-      t("settings.sessionApproved") + " — " + t("settings.notPersisted"),
-      session.join("\n")));
+    group("session", t("settings.sessionApproved") + " — " + t("settings.notPersisted"), session);
   }
-  if (!any) rulesCard.appendChild(el("div", "muted small", t("perms.noRules")));
+  if (!any) rulesCard.appendChild(el("div", "perm-empty", t("perms.noRules")));
 
   // The roots, and only where they mean anything: in every other mode the
   // list is not consulted, and an editor for it would be a control that does
@@ -10551,6 +11539,7 @@ async function showPermissions() {
     const derived = all.filter((root) => chosen.indexOf(root) < 0);
 
     const writes = card(t("perms.writes"));
+    writes.previousSibling.appendChild(el("span", "perm-count", String(all.length)));
     writes.appendChild(el("div", "muted small", t("perms.writesHint", { n: all.length })));
 
     // Yours, and editable. A textarea rather than a list with buttons because
@@ -10586,12 +11575,25 @@ async function showPermissions() {
     if (derived.length) {
       // "more" only reads right when there were some above it. With nothing
       // configured — the common case — every one of them is derived.
-      writes.appendChild(listing(
-        chosen.length
-          ? t("perms.derivedMore", { n: derived.length })
-          : t("perms.derivedAll", { n: derived.length }),
-        derived.join("\n"),
-        true));
+      const group = el("div", "setting-list");
+      group.appendChild(el("div", "muted small", chosen.length
+        ? t("perms.derivedMore", { n: derived.length })
+        : t("perms.derivedAll", { n: derived.length })));
+      // The last segment is what tells fifty plugin paths apart; the long
+      // shared prefix is dimmed and gives way first when the line is short.
+      const list = el("div", "perm-roots");
+      for (const root of derived) {
+        const cut = root.replace(/[\\/]+$/, "").search(/[^\\/]+$/);
+        const line = el("div", "perm-root");
+        line.title = root;
+        const dir = el("span", "dir");
+        dir.appendChild(el("bdi", null, cut > 0 ? root.slice(0, cut) : ""));
+        line.appendChild(dir);
+        line.appendChild(el("span", "base", cut > 0 ? root.slice(cut) : root));
+        list.appendChild(line);
+      }
+      group.appendChild(list);
+      writes.appendChild(group);
     }
   }
 }
@@ -10657,25 +11659,48 @@ function auditKind(row) {
  * it does not place anything at all.
  */
 function auditList(rows, withDate) {
-  const list = el("div", "mono small audit-list");
+  const list = el("div", "audit-list");
+  let day = "";
   for (const row of rows) {
     const entry = row.entry;
-    const line = el("div", "trail-line");
     const at = new Date(entry.at);
-    const when = withDate
-      ? at.toLocaleDateString(undefined, { month: "short", day: "numeric" }) + " " + at.toLocaleTimeString()
-      : at.toLocaleTimeString();
-    const outcome = auditOutcome(row);
-    const mark = el("span", auditKind(row) === "denied" ? "err" : null, outcome);
-    line.appendChild(el("span", "muted", when + "  "));
-    line.appendChild(mark);
-    line.appendChild(document.createTextNode("  " + (entry.principal || entry.tool)));
-    const notes = [];
-    if (entry.rule) notes.push(entry.rule);
-    if (row.answer && row.answer.remembered) notes.push("remembered " + row.answer.remembered);
+    // Across sessions the date is a heading rather than a column: the same
+    // "Sep 15" forty times over is noise that pushes the tool off the line.
+    if (withDate) {
+      const label = at.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+      if (label !== day) {
+        day = label;
+        list.appendChild(el("div", "audit-day", label));
+      }
+    }
+    const kind = auditKind(row);
+    const line = el("div", "trail-line audit-row " + kind);
+    line.appendChild(el("span", "audit-time", at.toLocaleTimeString()));
+    line.appendChild(el("span", "audit-pill " + kind, auditOutcome(row)));
+
+    // "Edit(/a/b/c.md)" reads as a tool and what it touched; drawn as one
+    // string the path is as loud as the verb.
+    const label = entry.principal || entry.tool;
+    const what = el("span", "audit-what");
+    const open = label.indexOf("(");
+    if (open > 0 && label.endsWith(")")) {
+      what.appendChild(el("span", "audit-tool", label.slice(0, open)));
+      const arg = el("span", "audit-arg", label.slice(open + 1, -1));
+      arg.title = label.slice(open + 1, -1);
+      what.appendChild(arg);
+    } else {
+      what.appendChild(el("span", "audit-tool", label));
+    }
+    line.appendChild(what);
+
+    const notes = el("span", "audit-notes");
+    if (entry.rule) notes.appendChild(el("span", "audit-tag", entry.rule));
+    if (row.answer && row.answer.remembered) {
+      notes.appendChild(el("span", "audit-tag remembered", "remembered " + row.answer.remembered));
+    }
     // An ask with no answer: the process stopped while the question was up.
-    if (entry.behavior === "ask" && !row.answer) notes.push("unanswered");
-    if (notes.length) line.appendChild(el("span", "muted", "  " + notes.join(" · ")));
+    if (entry.behavior === "ask" && !row.answer) notes.appendChild(el("span", "audit-tag unanswered", "unanswered"));
+    line.appendChild(notes);
     list.appendChild(line);
   }
   return list;
@@ -10754,7 +11779,14 @@ async function showAudit() {
   const seg = (options, chosen, onPick) => {
     const box = el("div", "seg");
     for (const option of options) {
-      const button = el("button", "seg-item" + (option.id === chosen() ? " on" : ""), option.label);
+      const button = el("button", "seg-item" + (option.id === chosen() ? " on" : ""));
+      if (option.color) {
+        const dot = el("span", "seg-dot");
+        dot.style.background = option.color;
+        button.appendChild(dot);
+      }
+      button.appendChild(document.createTextNode(option.label));
+      if (option.count !== undefined) button.appendChild(el("span", "seg-count", String(option.count)));
       button.type = "button";
       button.addEventListener("click", () => {
         if (option.id === chosen()) return;
@@ -10773,8 +11805,15 @@ async function showAudit() {
     (id) => { auditScope = id; void showAudit(); },
   ));
   const filters = ["all", "allowed", "denied", "unanswered"];
+  const rows = auditRows(body.entries);
+  const tally = { all: rows.length, allowed: 0, denied: 0, unanswered: 0 };
+  for (const row of rows) tally[auditKind(row)] += 1;
+  const dots = { allowed: "var(--ok)", denied: "var(--err)", unanswered: "var(--warn)" };
   const filterSeg = seg(
-    filters.map((id) => ({ id, label: t("audit.filter." + id) })),
+    filters.map((id) => ({
+      id, label: t("audit.filter." + id), count: tally[id],
+      ...(dots[id] ? { color: dots[id] } : {}),
+    })),
     () => auditFilter,
     (id) => {
       auditFilter = id;
@@ -10787,7 +11826,6 @@ async function showAudit() {
   controls.appendChild(filterSeg);
   panel.appendChild(controls);
 
-  const rows = auditRows(body.entries);
   const count = el("div", "muted small");
   panel.appendChild(count);
   const listBox = el("div");
@@ -12221,6 +13259,24 @@ async function loadProjects() {
   if (sessionRows.length) paintSessions();
 }
 
+async function renameProjectUi(cwd, name) {
+  const next = window.prompt(t("projects.renamePrompt"), name);
+  if (!next || next.trim() === name) return;
+  const body = await api("/project", { path: cwd, rename: next.trim() });
+  if (body && body.error) return void addNotice(body.error, "err");
+  addNotice(t("projects.renamed", { name: body.project.name }));
+  // Paths key tabs, local open/closed state and drag order. Reloading after
+  // the server has rebuilt the renamed harness drops every stale path at once.
+  window.location.reload();
+}
+
+function exportProjectUi(cwd) {
+  const link = document.createElement("a");
+  link.href = q("/project/export?path=" + encodeURIComponent(cwd));
+  link.download = "";
+  link.click();
+}
+
 function openProjectPicker() {
   const dialog = document.getElementById("project-picker");
   const field = document.getElementById("proj-search");
@@ -12247,6 +13303,25 @@ function openProjectPicker() {
 
       const line = el("div", "proj-row");
       line.appendChild(row);
+      const rename = el("button", "proj-forget", "✎");
+      rename.type = "button";
+      rename.title = t("projects.rename");
+      rename.setAttribute("aria-label", t("projects.rename") + ": " + project.name);
+      rename.addEventListener("click", (e) => {
+        e.stopPropagation();
+        dialog.close();
+        void renameProjectUi(project.path, project.name);
+      });
+      line.appendChild(rename);
+      const archive = el("button", "proj-forget", "↓");
+      archive.type = "button";
+      archive.title = t("projects.export");
+      archive.setAttribute("aria-label", t("projects.export") + ": " + project.name);
+      archive.addEventListener("click", (e) => {
+        e.stopPropagation();
+        exportProjectUi(project.path);
+      });
+      line.appendChild(archive);
       // Not offered for the project this window is standing in: the next
       // switch calls addProject and puts it straight back, so the control
       // would appear to do nothing. Nothing recorded is lost either way —
@@ -12415,6 +13490,7 @@ const paletteListEl = document.getElementById("cmdk-list");
  * the same keyboard already has.
  */
 const IS_MAC = /mac/i.test(navigator.platform || navigator.userAgent || "");
+const IS_WIN = /win/i.test(navigator.platform || navigator.userAgent || "");
 
 /** The rows the current query left on screen, in the order they are drawn. */
 let paletteRows = [];
@@ -12700,6 +13776,53 @@ function paintStarters() {
   }
 }
 
+/**
+ * The desktop shell's update hint. The state lives in the main process, which
+ * decides whether a release gets a dialog or only this row; the page draws it
+ * and passes the click back, where the right question is asked.
+ */
+function paintUpdateHint(state) {
+  const box = document.getElementById("update-hint");
+  if (!box) return;
+  const status = state && state.status;
+  if (status !== "available" && status !== "downloading" && status !== "ready") {
+    box.hidden = true;
+    box.textContent = "";
+    return;
+  }
+  box.hidden = false;
+  box.classList.toggle("important", Boolean(state.important));
+  const button = document.createElement("button");
+  button.type = "button";
+  button.disabled = status === "downloading";
+  if (state.important) button.title = t("update.important");
+  const dot = document.createElement("span");
+  dot.className = "dot";
+  const label = document.createElement("span");
+  label.className = "label";
+  label.textContent =
+    status === "ready"
+      ? t("update.ready")
+      : status === "downloading"
+        ? t("update.downloading", { version: state.version })
+        : t("update.available", { version: state.version });
+  button.append(dot, label);
+  if (status === "downloading") {
+    const pct = document.createElement("span");
+    pct.className = "pct";
+    pct.textContent = (state.percent || 0) + "%";
+    button.append(pct);
+  }
+  button.addEventListener("click", () => window.oharness.updates.act());
+  box.replaceChildren(button);
+}
+if (IS_DESKTOP && window.oharness.updates) {
+  window.oharness.updates.onState(paintUpdateHint);
+  // Asked once as well: a release found before this page loaded (or before a
+  // reopened window) was announced to nobody.
+  window.oharness.updates.state().then(paintUpdateHint, () => {});
+}
+
 void (async () => {
   applyStrings();
   paintStarters();
@@ -12834,6 +13957,7 @@ ${ANALYTICS_STUB}
        people look for one. Signing in is what turns on sync and what lets an
        artifact be published, and until now the only door to it was inside the
        model-provider setup — a place nobody goes to find their account. -->
+  <div id="update-hint" hidden></div>
   <div id="account"></div>
 </aside>
 <div id="scrim"></div>
@@ -12877,7 +14001,13 @@ ${ANALYTICS_STUB}
   <button id="jump" hidden type="button">↓ latest</button>
 
   <form id="composer">
+    <!-- Typed while a turn was running, waiting its turn. Outside the box
+         rather than in it: what is in the box is the message being written,
+         and a row sharing that surface reads as part of it. -->
+    <div id="queued"></div>
     <div class="composer" id="composer-box">
+      <!-- The top edge is a grab handle: drag it to resize the field. -->
+      <div id="grip" role="separator" aria-orientation="horizontal" data-t-title="composer.resize"></div>
       <div id="attachments"></div>
       <!-- A textarea draws its own glyphs and cannot style a range of them, so
            the chip behind a mention is painted on a layer underneath that
@@ -12885,6 +14015,8 @@ ${ANALYTICS_STUB}
            same string twice, and a screen reader should hear it once. -->
       <div class="input-wrap">
         <div id="input-mirror" aria-hidden="true"></div>
+        <div id="caret-probe" aria-hidden="true"></div>
+        <i id="caret" aria-hidden="true"></i>
         <textarea id="input" rows="1" data-t-placeholder="composer.placeholder"></textarea>
       </div>
       <div class="composer-bar">
@@ -13070,11 +14202,11 @@ ${ANALYTICS_STUB}
   </div>
   <div class="dlg-actions">
     <button data-answer="no" class="quiet"><span data-t="ask.no"></span><kbd>esc</kbd></button>
-    <button data-answer="once" class="approve"><span data-t="ask.allow"></span><kbd>↵</kbd></button>
+    <button data-answer="once" data-scope="once" class="approve"><span data-t="ask.allow"></span><kbd>↵</kbd></button>
     <button data-answer="session" data-scope="session"><span data-t="ask.session"></span></button>
     <button data-answer="project" data-scope="project"><span data-t="ask.project"></span></button>
   </div>
-  <div id="ask-scope" class="ask-scope" hidden></div>
+  <div id="ask-scope" class="ask-scope" data-show="once"><span data-scope="once"></span><span data-scope="session"></span><span data-scope="project"></span></div>
 </dialog>
 
 <script>