@oharness/server 0.4.0 → 0.5.1

package/dist/page.js

@@ -1,6 +1,7 @@
 import { CLIENT_SCRIPT } from "./markdown.js";
 import { ANALYTICS_CLIENT, ANALYTICS_STUB } from "./analytics.js";
 import { LOCALES, STRINGS } from "./i18n.js";
+import { THEME_CSS } from "./theme.js";
 /**
  * The browser page, inlined.
  *
@@ -16,48 +17,9 @@ import { LOCALES, STRINGS } from "./i18n.js";
  * rather than a default, and the reason it is one variable to grep for rather
  * than a setting buried in a config file.
  */
+// The palette lives in theme.ts; everything below reads it through var().
 const STYLE = String.raw `
-:root{
-  /* Native scrollbars and form controls read this, not our variables: without
-     it every scroller keeps a white track in dark mode. */
-  color-scheme:light;
-  --bg:#fff; --panel:#f7f7f8; --fg:#1a1a1a; --dim:#6b7280; --line:#00000010;
-  --accent:#111827; --ok:#15803d; --warn:#b45309; --err:#b91c1c;
-  --add:#065f46; --add-bg:#ecfdf5; --del:#991b1b; --del-bg:#fef2f2;
-  --hover:#00000008; --sel:#00000012; --focus:#111827; --ring:#1118271a;
-  --field:#00000006; --field-focus:#0000000d; --track:#0000001f;
-  /* What separates the mention chip from the field behind it. A shadow on
-     paper; on the dark theme a shadow falls on something already black, so it
-     is the faintest of light edges instead. Neither is a border: a hard ring
-     made each mention read as a small input field inside a sentence. */
-  --mention-lift:0 1px 2px #0000000f, 0 0 0 1px #0000000a;
-  --kw:#7c3aed; --str:#047857; --com:#94a3b8; --num:#b45309;
-}
-/* The dark palette, reached two ways: the system asked for it and nothing
-   here overrode that, or somebody picked it. Written once and used by both
-   selectors — two copies of twenty colours is two places for one of them to
-   drift. */
-@media (prefers-color-scheme:dark){
-  :root:not([data-theme="light"]){
-    color-scheme:dark;
-    --bg:#0e1013; --panel:#15171c; --fg:#e6e6e6; --dim:#8b93a1; --line:#ffffff14;
-    --accent:#e5e7eb; --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
-    --add:#6ee7b7; --add-bg:#052e22; --del:#fca5a5; --del-bg:#3b1214;
-    --hover:#ffffff0a; --sel:#ffffff1a; --focus:#6b7280; --ring:#ffffff14;
-    --field:#ffffff08; --field-focus:#ffffff12; --track:#ffffff2e;
-    --mention-lift:0 0 0 1px #ffffff1f, 0 1px 3px #00000073;
-    --kw:#c4b5fd; --str:#6ee7b7; --com:#64748b; --num:#fcd34d;
-  }
-}
-:root[data-theme="dark"]{
-  color-scheme:dark;
-  --bg:#0e1013; --panel:#15171c; --fg:#e6e6e6; --dim:#8b93a1; --line:#ffffff14;
-  --accent:#e5e7eb; --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
-  --add:#6ee7b7; --add-bg:#052e22; --del:#fca5a5; --del-bg:#3b1214;
-  --hover:#ffffff0a; --sel:#ffffff1a; --focus:#6b7280; --ring:#ffffff14;
-  --field:#ffffff08; --field-focus:#ffffff12; --track:#ffffff2e;
-  --kw:#c4b5fd; --str:#6ee7b7; --com:#64748b; --num:#fcd34d;
-}
+${THEME_CSS}
 *{box-sizing:border-box}
 /* The hidden attribute works through the browser's own display:none, which is
    a bare element rule any class with a display beats — so .hidden = true left
@@ -134,7 +96,6 @@ 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}
-.fold-count{font-size:11px;color:var(--dim);flex:0 0 auto}
 /* 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}
@@ -205,6 +166,14 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 }
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
 :root[data-theme="dark"] .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
+/* The account menu is as wide as the account row it opens from, edge to edge.
+   Sized for a session row's three commands, it came out a third narrower than
+   the row under it, so the two read as unrelated boxes; the width is set on
+   open from the row itself, and this lifts the caps that would clamp it. */
+.row-menu.fit-anchor{min-width:0;max-width:none}
+.row-menu.account-menu{
+  padding:10px;max-height:calc(100vh - 24px);overflow-y:auto;
+}
 /*
  * Destructive is carried by the label's colour, not by a filled red bar. A
  * solid block reads as an alert that has already happened rather than as a
@@ -223,8 +192,46 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .row-menu .menu-head{
   padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
 }
+/* A section label, not a surface: the fill belongs to the account's facts
+   above, and on a one-word caption it read as a second card pressed against
+   Dashboard. Space above it does the separating instead. */
+.row-menu .menu-head.menu-section{
+  margin:10px 0 2px;padding:4px 10px;background:transparent;
+}
 .menu-head-main{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
 .menu-head-sub{margin-top:2px;font-size:12px;color:var(--dim)}
+/* The billing card borrows .menu-head's surface but not its caption type: the
+   uppercase and tracking belong to section labels, and on a balance and a
+   plan name they turned two facts into one shouted line. */
+.row-menu .menu-head.account-card{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px}
+.menu-head-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.menu-head-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
+.plan-pill{
+  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;max-width:60%;
+  padding:2px 8px;border-radius:999px;background:var(--field);color:var(--dim);
+  font-size:11.5px;font-weight:500;white-space:nowrap;
+}
+.plan-pill-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:currentColor;opacity:.7}
+.plan-pill-name{overflow:hidden;text-overflow:ellipsis}
+.plan-pill-status{font-weight:400;opacity:.8}
+/* Live is the brand's lime, the colour the app gives to things that are on. */
+.plan-pill.ok{background:var(--brand-tint);color:var(--brand-ink)}
+.plan-pill.ok .plan-pill-dot{background:var(--brand);opacity:1}
+.plan-pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
+.plan-pill.warn .plan-pill-dot{opacity:1}
+.menu-head-amount{display:flex;align-items:baseline;gap:5px;margin-top:6px}
+.menu-head-num{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--fg);font-variant-numeric:tabular-nums}
+.menu-head-unit{font-size:12px;color:var(--dim)}
+.menu-billing-actions{display:flex;gap:7px;margin-top:10px}
+.menu-billing-action{
+  flex:1;min-height:30px;padding:6px 10px;border:0;border-radius:7px;
+  background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);
+  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
+}
+.menu-billing-action:hover{background:var(--hover)}
+.menu-billing-action.primary{background:var(--accent);color:var(--bg);box-shadow:none}
+.menu-billing-action.primary:hover{opacity:.88}
+.menu-billing-action:disabled{cursor:not-allowed;opacity:.45}
 /* One entry carrying the accent, for the one that is an offer rather than a
    destination. var(--field) was too close to the menu's own surface to read as
    anything in the light theme — a highlight nobody can see is worse than none,
@@ -411,6 +418,11 @@ svg.vglyph{width:15px;height:15px;opacity:1;
    the composer bar's 2px does not provide. */
 .menu-group .vmark,.menu-group .vmono,.menu-group .vglyph{width:13px;height:13px;font-size:8px}
 .picker-btn .vmark,.picker-btn .vmono,.picker-btn .vglyph{width:14px;height:14px;margin-right:5px}
+/* The mode's glyph: a bare stroke, so it takes the row's icon weight and, on
+   the bar, the vendor mark's size and gap so the two pickers line up. */
+.menu-item .mode-mark{opacity:.7}
+.menu-item.on .mode-mark,.menu-item.cursor .mode-mark{opacity:1}
+.picker-btn .mode-mark{width:14px;height:14px;margin-right:5px;opacity:.85}
 /* On a card the row is a title over a line of description, so the mark is
    sized against the block rather than against the type, and sits on the
    title's line instead of floating in the middle of the two. */
@@ -492,8 +504,18 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
  * Tabs are sessions; the drawer beside them shows one artifact whichever tab
  * is in front. Spanning both left a band of empty chrome above the drawer that
  * belonged to neither.
+ *
+ * The strip is the shelf the tabs stand on, in the sidebar's grey, and the
+ * front tab is cut from the page under it — the shape every browser uses.
+ * It used to be the other way round: a transparent strip on the white
+ * transcript with the front tab as a grey pill, so the row read as part of
+ * the conversation rather than as the chrome above it. No bottom padding,
+ * or a grey line would sit between the front tab and the page it is part of.
  */
-#tabs{display:flex;align-items:center;gap:2px;padding:0 12px 2px;overflow-x:auto;flex:0 0 auto}
+#tabs{
+  display:flex;align-items:center;gap:2px;padding:6px 12px 0;overflow-x:auto;flex:0 0 auto;
+  background:var(--panel);
+}
 #tabs:empty{display:none}
 .tab{
   display:flex;align-items:center;gap:7px;max-width:190px;height:30px;padding:0 6px 0 10px;
@@ -501,7 +523,7 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   font:inherit;font-size:12.5px;cursor:pointer;flex:0 0 auto;
 }
 .tab:hover{background:var(--hover);color:var(--fg)}
-.tab.on{background:var(--panel);color:var(--fg)}
+.tab.on{background:var(--bg);color:var(--fg)}
 .tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Which project a tab is in, shown only when the open tabs span more than one:
    two transcripts called "Untitled" in different trees are otherwise the same
@@ -511,7 +533,7 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   font-size:11px;opacity:.6;flex:0 0 auto;
 }
 .tab .where::after{content:"/";padding-left:5px;opacity:.5}
-.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:0 0 auto}
+.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
 .tab .x{
   width:17px;height:17px;border:0;border-radius:5px;background:transparent;color:inherit;
   font:inherit;font-size:14px;line-height:1;cursor:pointer;opacity:0;flex:0 0 auto;
@@ -562,7 +584,7 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
   border-left:2px solid transparent;
 }
 .file:hover{background:var(--bg)}
-.file.active{background:var(--bg);border-left-color:var(--accent)}
+.file.active{background:var(--sel)}
 .file .p{font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 .file .n{font-size:11px;font-family:ui-monospace,monospace}
 .file .plus{color:var(--ok)} .file .minus{color:var(--err)}
@@ -633,12 +655,12 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
   border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);
   transition:transform .15s;
 }
-.switch[aria-checked="true"]{background:var(--accent)}
+.switch[aria-checked="true"]{background:var(--brand)}
 .switch[aria-checked="true"]::after{transform:translateX(14px)}
 /* Disabled means "not yet", not "never": it stays legible, and the row says
    why. Hiding it instead left people looking for a control that exists. */
 .switch:disabled{opacity:.45;cursor:default}
-.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.switch:focus-visible{outline:none;filter:brightness(.9)}
 .share-btn{
   border:1px solid var(--line);background:var(--field);color:var(--fg);
   border-radius:5px;padding:2px 8px;font:inherit;font-size:11px;cursor:pointer;
@@ -676,7 +698,7 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
    transcript look like a dialog, and next to the tool cards it sits between —
    which have none — it was the only thing drawing a box around itself. */
 .art-card:hover{background:var(--sel)}
-.art-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.art-card:focus-visible{outline:none;background:var(--sel)}
 .art-card-mark{
   display:flex;align-items:center;justify-content:center;flex:0 0 auto;
   width:28px;height:28px;border-radius:7px;background:var(--field);color:var(--fg);
@@ -770,6 +792,60 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
  * they are answering. */
 .connection-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:2px}
 .connection-card .err{color:var(--fg)}
+
+/* A question from the agent, in the transcript rather than a modal: answering
+ * may take a look back up the conversation, which a modal would cover. Options
+ * are filled rows; the chosen one takes the accent fill, never a ring. */
+.question-card{background:var(--panel);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px;outline:none}
+.q-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.q-tag,.q-tab{font:inherit;font-size:11.5px;line-height:1.7;padding:0 9px;border:0;border-radius:999px;background:var(--field);color:var(--dim)}
+.q-tab{cursor:pointer}
+.q-tab:hover{background:var(--hover);color:var(--fg)}
+.q-tab.on{background:var(--sel);color:var(--fg)}
+.q-tab.done::after{content:" ✓"}
+.q-hint{font-size:11.5px;color:var(--dim);margin-left:auto}
+.q-text{font-size:14.5px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
+.q-layout{display:flex;flex-direction:column;gap:8px;min-width:0}
+.q-options{display:flex;flex-direction:column;gap:4px}
+.q-opt{
+  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:0;border-radius:9px;
+  padding:8px 10px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;
+}
+.q-opt:hover,.q-opt:focus-visible{outline:none;background:var(--sel)}
+.q-opt.on{background:var(--accent);color:var(--bg)}
+.q-opt.on:focus-visible{background:var(--accent);opacity:.9}
+.q-key{
+  flex:none;min-width:18px;height:18px;border-radius:5px;background:var(--field);color:var(--dim);
+  font-size:11px;display:grid;place-items:center;margin-top:1px;
+}
+.q-opt.on .q-key{background:#ffffff26;color:inherit}
+.q-words{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.q-label{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
+.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)}
+.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;
+  white-space:pre-wrap;overflow:auto;max-height:280px;
+}
+.q-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.q-actions .q-keys{margin-right:auto}
+.q-actions button{padding:7px 13px;border:0;border-radius:9px;background:var(--field);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
+.q-actions button:hover{background:var(--sel)}
+.q-actions button.approve{background:var(--accent);color:var(--bg)}
+.q-actions button.approve:hover{opacity:.88}
+.q-actions button.quiet{background:transparent;color:var(--dim)}
+.q-actions button.quiet:hover{background:var(--hover);color:var(--fg)}
+.q-actions button:disabled{opacity:.45;cursor:default}
+.q-keys{font-size:11.5px;color:var(--dim)}
+.q-error{font-size:12px;color:var(--err)}
+.question-card.settled{gap:4px;padding:10px 14px}
+.q-settled-title{font-size:12px;color:var(--dim)}
+.q-settled-line{display:flex;gap:8px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
+.q-settled-head{color:var(--dim);flex:none}
 .who{
   font-size:11.5px;color:var(--dim);margin-bottom:6px;font-weight:500;letter-spacing:.01em;
 }
@@ -786,6 +862,7 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 }
 .user{margin-bottom:18px}
 .panel{max-width:720px;margin:8px auto 0}
+.panel-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding-block:48px;font-size:13px}
 .panel h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
 /* Only the gap below. The horizontal margin belongs to whatever is placing the
  * card: setting all four here quietly reset the auto margins that keep a card
@@ -798,14 +875,27 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 /* Filled, not outlined — the same shape .art-search uses. A box drawn with a
  * line around it is the one thing this site does not do, and three of them
  * stacked made the editor look like a form bolted onto the page rather than
- * part of the note. The focus ring stays: that is the one border worth having,
- * and it appears only while the field is being used. */
+ * part of the note. Focus deepens the fill rather than drawing a ring: no
+ * border marks a focused thing anywhere here. */
 .memory-panel input,.memory-panel textarea{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit;line-height:1.5;box-sizing:border-box}
-.memory-panel input:focus,.memory-panel textarea:focus{outline:2px solid var(--ring)}
+.memory-panel input:focus,.memory-panel textarea:focus{outline:none;background:var(--field-focus)}
 .memory-panel textarea{resize:vertical;min-height:130px}
 .memory-panel summary{cursor:pointer;padding:6px 0;font-weight:500}
 .memory-panel .memory-path{overflow-wrap:anywhere;color:var(--dim)}
 .memory-panel .memory-search{width:100%}
+.memory-summary{padding:14px 16px;margin-bottom:10px}
+.memory-state{font-size:15px;font-weight:600}
+.memory-summary p{margin:4px 0}
+.memory-error{color:var(--warn);overflow-wrap:anywhere}
+.memory-summary .memory-actions{flex-wrap:wrap;align-items:center;margin-top:12px}
+.memory-summary .signin-site{width:auto;flex:0 0 auto;padding:0 16px}
+.memory-about{margin:6px 0 4px;color:var(--dim)}
+.memory-about summary{cursor:pointer;width:max-content}
+/* Prose, so it breaks between words; the shared .small breaks anywhere, which suits a path. */
+.memory-panel .section-title+.memory-notes-intro{margin:-4px 0 10px;word-break:normal;overflow-wrap:anywhere}
+.memory-empty{padding:14px 16px}
+.memory-empty-title{font-size:13.5px;font-weight:500;margin-bottom:4px}
+.memory-empty p{margin:0;word-break:normal;overflow-wrap:anywhere}
 /* Built like a settings row: one flex line, the marker drawn rather than left
  * to the browser, so the summary text and everything below it share one left
  * edge. */
@@ -825,6 +915,18 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 /* The form's own background is the page's, which on a card reads as a second
  * card inside the first one — the same doubling the padding was making. */
 .memory-actions{display:flex;gap:8px;margin-top:14px}
+.memory-recent{margin:6px 0}
+.memory-recent>summary{cursor:pointer;color:var(--dim)}
+.memory-recent>div{padding:2px 0 2px 15px}
+.memory-backup{display:flex;align-items:center;gap:12px;padding:8px 0 8px 15px}
+.memory-backup-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
+.memory-versions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0}
+.memory-version h4{margin:0 0 6px}
+.memory-version pre{margin:0;background:var(--field);border-radius:8px;padding:10px 12px;overflow-wrap:anywhere}
+.memory-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px 15px;color:var(--dim)}
+.memory-link{background:var(--field);color:var(--fg);border:0;border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer}
+.memory-link.missing{color:var(--dim);cursor:default;text-decoration:line-through}
+.memory-panel select{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit}
 /*
  * A settings row: name, value, and everything else behind the triangle.
  *
@@ -845,7 +947,7 @@ details.setting[open]>summary{border-radius:10px 10px 0 0}
 details.setting[open]>summary .chev{transform:rotate(90deg)}
 details.setting>summary .ghost{flex:0 0 auto;height:26px;font-size:12px;margin-left:0}
 details.setting>summary .switch{flex:0 0 auto}
-details.setting>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 /*
  * The artifacts panel: a search field over the whole catalogue.
  *
@@ -890,10 +992,19 @@ details.setting>summary:focus-visible{outline:2px solid var(--accent);outline-of
 /* Lists that could be forty lines long scroll where they are rather than
    growing the page under them. */
 .scroll-box{
-  max-height:200px;overflow-y:auto;border:1px solid var(--line);
+  max-height:200px;overflow-y:auto;background:var(--field);
   border-radius:6px;padding:7px 9px;
 }
 .trail-line{padding:2px 0}
+/* On its own page the trail is the page: it flows rather than scrolling in a
+   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}
+.setting-body .audit-list{
+  max-height:200px;overflow-y:auto;border-radius:6px;padding:7px 9px;background:var(--field);
+}
 /* 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
    costs the browser's own save machinery. */
@@ -914,6 +1025,97 @@ details.setting>summary:focus-visible{outline:2px solid var(--accent);outline-of
  * and five tints of one colour cannot do it.
  */
 .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 .setting-list{margin:0}
+/* ---- 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
+   any state. */
+.drp{position:relative;display:inline-flex;margin:2px 0 12px}
+.drp-trigger{
+  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
+  border:0;border-radius:9px;background:var(--field);color:var(--dim);
+  font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;
+}
+.drp-trigger:hover{color:var(--fg)}
+.drp-trigger.on{background:var(--sel);color:var(--fg)}
+.drp-trigger svg{flex:none;width:14px;height:14px;opacity:.75}
+.drp-pop{
+  position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:max-content;
+  max-width:calc(100vw - 32px);padding:16px;border-radius:14px;background:var(--bg);
+  box-shadow:0 12px 40px #00000029,0 2px 6px #0000000f;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drp-pop{background:var(--panel)}}
+:root[data-theme="dark"] .drp-pop{background:var(--panel)}
+.drp-nav{
+  position:absolute;top:12px;right:12px;left:12px;display:flex;
+  justify-content:space-between;pointer-events:none;
+}
+.drp-arrow{
+  display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;
+  border-radius:999px;background:transparent;color:var(--dim);
+  cursor:pointer;pointer-events:auto;
+}
+.drp-arrow svg{width:16px;height:16px}
+.drp-arrow:hover:not(:disabled){background:var(--hover);color:var(--fg)}
+.drp-arrow:disabled{opacity:.3;cursor:default}
+.drp-months{display:flex;justify-content:center;gap:28px}
+.drp-month-name{
+  height:30px;margin-top:-4px;font-size:14px;font-weight:600;line-height:30px;
+  text-align:center;color:var(--fg);
+}
+.drp-grid{display:grid;grid-template-columns:repeat(7,34px);grid-auto-rows:34px;row-gap:2px;margin-top:6px}
+.drp-weekday{display:grid;place-items:center;font-size:11.5px;font-weight:500;color:var(--dim)}
+/* A day is a full-width cell, so the range fill runs unbroken across a week;
+   the number sits in a circle inside it. */
+.drp-day{
+  position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;
+  border:0;border-radius:0;background:transparent;color:var(--fg);
+  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;
+}
+.drp-day>span{
+  position:relative;display:grid;place-items:center;width:30px;height:30px;
+  border-radius:999px;transition:background .12s ease;
+}
+.drp-day:hover:not(:disabled)>span{background:var(--hover)}
+.drp-day:disabled{color:var(--dim);opacity:.45;cursor:default}
+.drp-day.is-inside{background:var(--field)}
+.drp-day.is-start{background:linear-gradient(to right,transparent 50%,var(--field) 50%)}
+.drp-day.is-end{background:linear-gradient(to left,transparent 50%,var(--field) 50%)}
+.drp-day.is-edge>span,.drp-day.is-edge:hover>span{background:var(--fg);color:var(--bg);font-weight:600}
+/* Today: a small dot under the number, so it reads without a ring. */
+.drp-day.is-today>span::after{
+  content:"";position:absolute;bottom:3px;left:50%;translate:-50% 0;
+  width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.55;
+}
+.drp-day:focus-visible{outline:none}
+.drp-day:focus-visible>span{background:var(--sel)}
+.drp-foot{
+  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
+  gap:10px 16px;margin-top:14px;padding-top:12px;font-size:13px;color:var(--dim);
+  box-shadow:0 -1px 0 var(--line);
+}
+.drp-summary strong{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
+.drp-actions{display:inline-flex;gap:6px;margin-left:auto}
+.drp-cancel,.drp-apply{
+  padding:7px 14px;border:0;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;
+}
+.drp-cancel{background:transparent;color:var(--dim)}
+.drp-cancel:hover{background:var(--hover);color:var(--fg)}
+.drp-apply{background:var(--fg);color:var(--bg)}
+.drp-apply:hover:not(:disabled){opacity:.88}
+.drp-apply:disabled{opacity:.35;cursor:default}
+/* One month on a narrow screen — the later one, which holds today — and the
+   panel floats over the middle of it rather than hanging off a trigger the
+   width of the screen cannot accommodate. */
+@media (max-width:640px){
+  .drp-month.is-first{display:none}
+  .drp-pop{
+    position:fixed;top:18vh;left:50%;width:min(100vw - 32px,300px);translate:-50% 0;
+  }
+}
 .seg-item{
   border:0;background:transparent;color:var(--dim);font:inherit;font-size:12.5px;
   padding:5px 11px;border-radius:7px;cursor:pointer;
@@ -1001,10 +1203,20 @@ details.provider>summary:hover{background:var(--hover)}
    separate the account from the list — a hairline as well is a second answer
    to a question the whitespace had settled, and it is the only line left in a
    sidebar that has none. */
+/* A column, not a row. Signed in this used to hold the account button and
+   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. */
 #account{
-  display:flex;align-items:center;gap:8px;
+  display:flex;flex-direction:column;align-items:stretch;gap:2px;
   flex:0 0 auto;padding:8px;
 }
+/* 10px across rather than the nav rows' 8: the account row under it starts
+   with a 24px avatar inset 6px, and at 10px this row's 16px icon lands on
+   the avatar's centre line rather than 4px to the left of it. The balance
+   sits in the aside slot the nav rows keep for a count, because it is what
+   decides whether to click. */
+#account .topup{width:100%;padding:0 10px}
 /* Signed out this holds one nav row and nothing else, so the padding that
    frames an account goes away and the row sits flush with the ones above it.
    8px across, matching the nav list above, so the icon lands on the same
@@ -1015,7 +1227,8 @@ details.provider>summary:hover{background:var(--hover)}
    taller than the nav rows above: a footer is allowed to be the roomiest row
    in the sidebar, and this one has to hold a click aimed at from the corner. */
 #account.out{padding:4px 8px 10px}
-#account.out .nav-item{width:100%;height:34px}
+#account .nav-item{width:100%}
+#account.out .nav-item{height:34px}
 /* The whole row is the control. It used to be a label with a Sign out button
    parked beside it, which gave the rarest action in the sidebar the most
    reliable target in it, and left the name — the thing worth clicking, because
@@ -1083,15 +1296,15 @@ button.signin-site:disabled{opacity:.4;cursor:default}
  * The site's pricing page settled this and says why in its own stylesheet: the
  * offers should read as columns of type rather than as a row of frames, and on
  * a screen that is mostly numbers the frames are the loudest thing on it. So
- * the fill goes quiet and the recommended rung keeps the one outline, which is
- * what makes it a mark rather than a shade somebody has to notice.
+ * the fill goes quiet and the recommended rung takes a deeper fill. No outline
+ * marks anything here, the recommended rung included.
  */
 button.pw-plan{
   display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
   min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:10px;
   background:var(--field);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
 }
-button.pw-plan.featured{border-color:var(--border-strong,var(--fg));background:var(--sel)}
+button.pw-plan.featured{background:var(--sel)}
 .pw-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
 button.pw-plan:hover{background:var(--sel)}
 button.pw-plan.featured:hover{background:var(--hover)}
@@ -1242,17 +1455,17 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    acts, and a button inside a button is not a thing. The forget stays hidden
    until the row is under the pointer — it is the rarer of the two by a wide
    margin, and a column of them reads as a list of things to delete. */
-/* The project header, plus the one control that acts on the whole project.
-   Same shape as a session row's: hidden until the row is hovered, and held
-   open while its menu is. */
+/* The project header, plus the controls that act on the whole project: a new
+   session there, and the menu. Always shown, in place of a count — they are
+   what the header is for. */
 .fold-row{display:flex;align-items:center}
 .fold-row .fold{flex:1;min-width:0}
 .fold-row .more{
-  display:none;width:20px;height:20px;border:0;border-radius:5px;background:transparent;
+  display:grid;width:20px;height:20px;border:0;border-radius:5px;background:transparent;
   color:var(--dim);cursor:pointer;padding:0;place-items:center;flex:0 0 auto;margin-right:6px;
 }
-.fold-row:hover .more,.fold-row .fold.menu-open + .more{display:grid}
-.fold-row .more:hover,.fold-row .fold.menu-open + .more{background:var(--sel);color:var(--fg)}
+.fold-row .fold-new{margin-right:2px}
+.fold-row .more:hover,.fold-row .fold.menu-open ~ .more:last-child{background:var(--sel);color:var(--fg)}
 .fold-row .more .ico-sm{width:14px;height:14px;opacity:1}
 .proj-row{display:flex;align-items:center;border-radius:8px}
 .proj-row:hover{background:var(--hover)}
@@ -1271,15 +1484,23 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
  * here, the projects themselves, and the few actions worth a shortcut. */
 #palette{width:min(560px,92vw);max-height:min(60vh,520px)}
 #palette[open]{display:flex;flex-direction:column}
-#cmdk-list{overflow-y:auto;padding:2px 8px 8px;flex:1}
+/* One left edge for everything: the field's magnifier, each row's icon, the
+   group labels and the key hints all start 22px in, and the field's text
+   starts where the row labels do. Rows sit 8px in so their highlight has room;
+   their own 14px padding brings the content back to the shared edge. */
+.cmdk-head{position:relative;padding:12px 12px 8px}
+.cmdk-head .ico-sm{position:absolute;left:22px;top:calc(50% - 5.5px);pointer-events:none}
+#palette .cmdk-head input{height:40px;padding:0 10px 0 35px;font-size:14px}
+#cmdk-list{overflow-y:auto;padding:0 8px 8px;flex:1;scroll-padding-block:4px}
 .cmdk-group{
-  padding:9px 8px 4px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
+  padding:12px 14px 5px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
   color:var(--dim);
 }
+.cmdk-group:first-child{padding-top:6px}
 .cmdk-item{
-  width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;
+  width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;
   background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
-  padding:8px;text-align:left;
+  padding:8px 14px;text-align:left;
 }
 /* Hover and the keyboard cursor are the same highlight: a list driven by both
    at once needs one answer to "which row does Enter take". */
@@ -1290,9 +1511,9 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
   font-size:11px;color:var(--dim);flex:0 0 auto;max-width:45%;
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
-.cmdk-empty{padding:12px 8px;font-size:12.5px;color:var(--dim)}
+.cmdk-empty{padding:12px 14px;font-size:12.5px;color:var(--dim)}
 .cmdk-foot{
-  display:flex;gap:14px;padding:8px 12px 10px;font-size:11px;color:var(--dim);
+  display:flex;gap:16px;padding:9px 22px 11px;font-size:11px;color:var(--dim);
   box-shadow:0 -1px 0 var(--line);
 }
 .cmdk-foot kbd{
@@ -1456,11 +1677,25 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 .act .ico-sm{width:13px;height:13px;opacity:.9}
 .md{word-break:break-word}
 .md-p{margin:0 0 10px;white-space:pre-wrap}
-.md-h{margin:16px 0 8px;font-size:15px}
+.md-h{margin:16px 0 8px;font-size:14px}
+.md-h1{font-size:18px} .md-h2{font-size:16px} .md-h3{font-size:15px}
+.md>.md-h:first-child{margin-top:0}
 .md-list{margin:0 0 10px;padding-left:22px}
+.md-list .md-list{margin:2px 0 0}
+.md-list>li{margin:2px 0}
+.md-loose>li>.md-p{margin:0 0 6px}
+.md-list>li.md-task{list-style:none}
+.md-check{margin:0 7px 0 -20px;vertical-align:-1px}
 .md-quote{margin:0 0 10px;padding-left:12px;border-left:3px solid var(--line);color:var(--dim)}
 .md-code{background:var(--field);border-radius:5px;padding:1.5px 5px;font-size:13px}
 .md-link{color:var(--accent)}
+.md-dead{text-decoration:underline dotted;text-underline-offset:3px}
+.md-hr{border:0;height:1px;background:var(--line);margin:14px 0}
+.md-table-wrap{overflow-x:auto;margin:0 0 12px}
+.md-table{border-collapse:collapse;font-size:13px}
+.md-table th,.md-table td{padding:6px 12px;text-align:left;vertical-align:top}
+.md-table th{font-weight:600;background:var(--field)}
+.md-table tbody tr:nth-child(even){background:var(--hover)}
 .code-wrap{border-radius:10px;overflow:hidden;margin:0 0 12px;background:var(--panel)}
 .code-bar{
   display:flex;justify-content:space-between;align-items:center;padding:4px 10px;
@@ -1478,7 +1713,7 @@ details.tool>summary{
   font-size:13px;list-style:none;
 }
 details.tool>summary::-webkit-details-marker{display:none}
-.tool .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}
+.tool .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}
 .tool.done .dot{background:var(--ok)}
 .tool.failed .dot{background:var(--err)}
 .tool .name{font-family:ui-monospace,monospace}
@@ -1486,6 +1721,9 @@ details.tool>summary::-webkit-details-marker{display:none}
 .tool-body{padding:2px 12px 10px}
 .tool-body pre{margin:0;overflow-x:auto;font-size:12px;max-height:340px}
 .tool-body .label{font-size:11px;color:var(--dim);margin:0 0 4px}
+.tool-body .kv{margin:0 0 8px}
+.tool-summary{font-size:12.5px;line-height:1.5;margin:0 0 6px}
+details.tool-raw>summary{font-size:11px;color:var(--dim);cursor:pointer;margin:0 0 4px}
 pre.diff{margin:0;font-size:12px;line-height:1.5;overflow-x:auto}
 .d-add{background:var(--add-bg);color:var(--add)}
 .d-del{background:var(--del-bg);color:var(--del)}
@@ -1506,13 +1744,29 @@ details.work[open]>summary::before{transform:rotate(90deg)}
 .working-time{font-size:12px;opacity:.7}
 .spinner{
   width:12px;height:12px;flex:0 0 auto;border-radius:50%;
-  border:1.5px solid var(--line);border-top-color:var(--dim);
+  border:1.5px solid var(--line);border-top-color:var(--brand);
   animation:spin .7s linear infinite;
 }
 @keyframes spin{to{transform:rotate(360deg)}}
+/* A silver band sweeps the brand-coloured label while the model is still
+   thinking; the reasoning block stops, and falls back to --dim, once
+   sealThinking drops its spinner. */
+.working-label,
+details.thinking>summary:has(.spinner) .t-label{
+  background:linear-gradient(90deg,var(--brand-ink) 0%,var(--brand-ink) 42%,var(--brand-shine) 50%,var(--brand-ink) 58%,var(--brand-ink) 100%);
+  background-size:250% 100%;
+  -webkit-background-clip:text;background-clip:text;
+  -webkit-text-fill-color:transparent;color:transparent;
+  animation:shimmer 1.8s linear infinite;
+}
+@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
 @media (prefers-reduced-motion:reduce){
   /* A spinner is decoration; the elapsed seconds carry the same information. */
   .spinner{animation:none;border-top-color:var(--line)}
+  .working-label,
+  details.thinking>summary:has(.spinner) .t-label{
+    animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--brand-ink);
+  }
 }
 
 /* reasoning */
@@ -1523,6 +1777,13 @@ details.thinking>summary{
 }
 details.thinking>summary::-webkit-details-marker{display:none}
 details.thinking>summary:hover{color:var(--fg)}
+/* A chevron after the label says the block opens; it turns down when open. */
+details.thinking>summary::after{
+  content:"";width:5px;height:5px;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.thinking[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
 .thinking-body{
   white-space:pre-wrap;color:var(--dim);font-size:13.5px;line-height:1.6;
   margin-top:8px;padding-left:12px;border-left:2px solid var(--line);
@@ -1562,8 +1823,8 @@ 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(--fg)}
-.input-wrap textarea::selection{background:#3b82f640}
+.input-wrap textarea{color:transparent;caret-color:var(--brand)}
+.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.
    Six pixels wider on each side with the text pushed back in by six: the
@@ -1608,11 +1869,11 @@ textarea::placeholder{color:var(--dim)}
    where a glyph lands has to match: font, line-height, wrapping, and the
    padding, which is zero on the composer's textarea and must be zero here. */
 textarea.boxed{
-  border:1px solid var(--line);background:var(--field);border-radius:6px;
+  border:0;background:var(--field);border-radius:6px;
   padding:7px 9px;resize:vertical;min-height:0;font:inherit;font-size:12px;
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
 }
-textarea.boxed:focus{border-color:var(--dim)}
+textarea.boxed:focus{outline:none;background:var(--field-focus)}
 .composer-bar{display:flex;align-items:center;gap:6px;margin-top:10px}
 .composer.drag{background:var(--field-focus);outline:2px dashed var(--line);outline-offset:-6px}
 .icon-btn{
@@ -1625,6 +1886,41 @@ textarea.boxed:focus{border-color:var(--dim)}
    settings on one bar, none of them shouting over the others. */
 #workspace-picker .picker-btn{gap:6px}
 #workspace-picker .ico-sm{width:13px;height:13px;opacity:1;flex:0 0 auto}
+/*
+ * Reasoning effort. A setting of its own beside the model rather than rows in
+ * the model list: the two are picked independently, and folding tiers into
+ * the list would multiply every model by six.
+ *
+ * The panel is a rail of stops read left to right, faster to smarter, because
+ * the tiers are one quantity and a list would present them as unrelated
+ * options. Stops come from the model: a tier it lacks is not drawn at all.
+ */
+#effort-picker .picker-btn{gap:5px}
+#effort-picker .picker-btn .ico-sm{width:13px;height:13px;opacity:1}
+#effort-picker .menu{min-width:272px;width:272px;padding:14px 14px 12px;left:auto;right:0}
+.effort-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
+.effort-title{font-size:13px;color:var(--dim)}
+.effort-current{font-size:13px;font-weight:600;color:var(--fg)}
+.effort-desc{margin-top:3px;font-size:12px;line-height:1.4;color:var(--dim);min-height:34px}
+.effort-ends{display:flex;justify-content:space-between;margin:10px 0 6px;font-size:11.5px;color:var(--dim)}
+.effort-rail{
+  --stop:26px;position:relative;display:flex;align-items:center;justify-content:space-between;
+  height:26px;border-radius:13px;background:var(--hover);
+}
+/* Filled up to the centre of the chosen stop, so the amount reads at a glance. */
+.effort-fill{position:absolute;left:0;top:0;bottom:0;border-radius:13px;background:var(--line);transition:width .15s}
+.effort-stop{
+  position:relative;z-index:1;width:26px;height:26px;padding:0;border:0;outline:0;border-radius:50%;
+  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
+}
+.effort-stop:focus{outline:0}
+.effort-stop:focus-visible .effort-dot{background:var(--fg)}
+.effort-stop:hover .effort-dot{background:var(--fg);opacity:.7}
+.effort-dot{width:6px;height:6px;border-radius:50%;background:var(--dim);opacity:.6}
+.effort-knob{width:18px;height:18px;border-radius:50%;background:var(--fg)}
+.effort-names{display:flex;justify-content:space-between;margin-top:6px}
+.effort-name{width:26px;display:flex;justify-content:center;font-size:11px;color:var(--dim);white-space:nowrap}
+.effort-name.on{color:var(--fg);font-weight:600}
 #attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
 #attachments:empty{display:none}
 .att{
@@ -1694,6 +1990,13 @@ textarea.boxed:focus{border-color:var(--dim)}
    the arrow keys. A ring around a popup that was just clicked open says
    nothing the row highlight is not already saying. */
 .menu:focus{outline:none}
+/* No ring and no border marks a focused or selected thing anywhere in the app.
+   That includes the browser's own focus outline, which drew a blue ring round
+   the account button while its menu was open. Keyboard focus is carried by a
+   fill instead; the zero-specificity selector leaves every control that
+   already paints its own background alone. */
+:focus,:focus-visible{outline:none}
+:where(button,a,summary,[role="button"],[tabindex]):focus-visible{background-color:var(--hover)}
 /* The triangle the group headers use, turned on a row that leads somewhere:
    the + opens onto four offers, and three of them go one screen deeper. */
 .menu-item .chev{
@@ -1733,36 +2036,48 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
  * happen to which file. The parameters used to be dumped as JSON, which put
  * escaped newlines and the tool's own field names in front of the one thing
  * worth reading — so the body renders the payload instead, and the plumbing
- * moved behind a toggle. */
-#ask{width:min(620px,94vw);max-width:min(620px,94vw)}
-.ask-head{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
-.ask-tags{display:flex;align-items:center;gap:8px;margin-bottom:7px}
+ * moved behind a toggle.
+ *
+ * Three parts and no rules between them: what (head), the payload (one filled
+ * block, aligned with the head), and the answer. Hairlines between four
+ * sections made the middle read as leftovers from different components. */
+#ask{width:min(620px,94vw);max-width:min(620px,94vw);padding-bottom:10px}
+.ask-head{padding:18px 20px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
 .ask-tag{
-  font-size:11.5px;line-height:1.5;padding:1px 8px;border-radius:999px;
+  align-self:flex-start;font-size:11.5px;line-height:1.7;padding:0 9px;border-radius:999px;
   background:var(--field);color:var(--dim);
 }
-.ask-tool{font-size:11.5px;color:var(--dim)}
-.ask-target{
+.ask-title{display:flex;align-items:center;gap:10px;min-width:0}
+.ask-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;flex:none}
+.ask-target{font-size:15px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;min-width:0}
+.ask-target.mono{
   font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
-  font-size:13.5px;line-height:1.5;word-break:break-all;white-space:pre-wrap;
+  font-size:13.5px;font-weight:500;white-space:pre-wrap;
 }
-.ask-meta{font-size:12px;color:var(--dim);margin-top:3px;word-break:break-all}
-.ask-body{max-height:260px;overflow:auto;padding:8px 0}
+.ask-target .dir{color:var(--dim);font-weight:400}
+.ask-meta{font-size:12px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
+.ask-body{margin:0 20px;border-radius:10px;background:var(--field);max-height:280px;overflow:auto;padding:8px 0}
 .ask-body.clamped{max-height:none;overflow:hidden}
 .ask-line{
   display:flex;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
   font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
 }
 .ask-line .n{
-  flex:0 0 40px;text-align:right;padding-right:10px;color:var(--dim);
+  flex:0 0 36px;text-align:right;padding-right:12px;color:var(--dim);
   opacity:.65;user-select:none;
 }
+.ask-body.diff .ask-line .n{flex-basis:28px;text-align:center;padding-right:4px}
 .ask-line .s{flex:1;padding-right:14px}
 .ask-line.add{background:var(--add-bg)}
 .ask-line.add .s{color:var(--add)}
 .ask-line.del{background:var(--del-bg)}
 .ask-line.del .s{color:var(--del)}
-.ask-more{display:flex;gap:6px;padding:2px 18px 12px;border-bottom:1px solid var(--line)}
+.ask-body .ask-code{
+  margin:0;padding:2px 14px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;
+}
+.ask-body .kv{padding:4px 14px}
+.ask-more{display:flex;gap:4px;padding:6px 14px 0}
 .ask-more button{
   border:0;border-radius:7px;background:transparent;color:var(--dim);
   font:inherit;font-size:12px;padding:4px 8px;cursor:pointer;
@@ -1771,7 +2086,7 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
 /* The three allow options are one decision at three scopes, not three
  * decisions, so they sit on one row as peers. Splitting them across two rows
  * under a "remember the answer" heading asked the same question twice. */
-.dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px 4px}
+.dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 20px 4px}
 /* Holds the way out apart from the answers without a spacer element: a growing
  * spacer claims width of its own, which forced the row to wrap one button early
  * on a narrow window. The quiet button leads its row, so the gap goes after it. */
@@ -1798,21 +2113,161 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
 .dlg-actions button.quiet{background:transparent;color:var(--dim)}
 .dlg-actions button.quiet:hover{background:var(--hover);color:var(--fg)}
 .dlg-actions kbd{
-  font:inherit;font-size:11px;opacity:.6;border:1px solid currentColor;border-radius:4px;
-  padding:0 4px;line-height:1.5;
+  font:inherit;font-size:11px;opacity:.7;background:var(--field);border-radius:4px;
+  padding:0 5px;line-height:1.6;
+}
+.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)}
+
+/* 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. */
+.kv{display:grid;grid-template-columns:minmax(64px,max-content) minmax(0,1fr);column-gap:14px;row-gap:6px;font-size:12.5px;line-height:1.55}
+.kv-k{color:var(--dim);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;overflow-wrap:anywhere}
+.kv-v{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
+.kv-v.empty{color:var(--dim)}
+.kv-chip{display:inline-block;margin:0 4px 2px 0;padding:0 8px;border-radius:999px;background:var(--sel);font-size:12px;white-space:nowrap}
+.kv-v pre{margin:0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
+
+/*
+ * Phone-only chrome, declared before the breakpoint that shows it: a base
+ * rule written after the media query wins the cascade, which is how the
+ * burger spent a release at display:none on every width.
+ */
+#burger{
+  display:none;width:36px;height:36px;margin-left:-8px;border:0;border-radius:8px;
+  background:none;color:var(--fg);font:inherit;font-size:18px;cursor:pointer;place-items:center;
 }
-.ask-scope{
-  padding:8px 18px 16px;font-size:11.5px;line-height:1.6;color:var(--dim);min-height:34px;
+#burger:hover{background:var(--hover)}
+#nav-close{
+  display:none;width:32px;height:32px;margin-left:auto;border:0;border-radius:8px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;place-items:center;
 }
+#nav-close svg{width:14px;height:14px}
+#nav-close:hover{background:var(--hover);color:var(--fg)}
+#scrim{display:none;position:fixed;inset:0;z-index:19;background:#00000059}
+#review-close{
+  display:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
+  color:var(--fg);cursor:pointer;padding:0;place-items:center;margin-left:8px;
+}
+#review-close svg{width:16px;height:16px}
 
+/*
+ * A phone.
+ *
+ * The desktop layout is three columns that share one window; a phone has room
+ * for one of them at a time. The sidebar becomes a drawer over the transcript,
+ * the review and artifact panes take the whole screen while they are open,
+ * and the composer's bar is split in two: where the session runs and what it
+ * may do sit above the text, the model and the send button below it.
+ */
 @media (max-width:760px){
-  aside{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .2s}
-  aside.open{transform:none}
-  #burger{display:block}
-  /* The burger lives here, so the bar has a reason to exist again. */
-  #top{padding:10px 18px}
+  body>aside{
+    position:fixed;inset:0 auto 0 0;z-index:20;width:min(280px,84vw);flex-basis:auto;
+    transform:translateX(-100%);transition:transform .2s;
+    padding-bottom:env(safe-area-inset-bottom);
+  }
+  body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
+  body.nav-open #scrim{display:block}
+  #nav-close{display:grid}
+  #burger{display:grid}
+  #top{padding:6px 10px}
+  #top:has(#changes-btn:not([hidden])){padding:6px 10px}
+
+  /* Both panes are the screen while open, and each gets a way out of its own:
+     the top bar with the changes button is underneath them. */
+  #review.open,#shelf.open{
+    position:fixed;inset:0;z-index:50;width:100%;height:100%;flex:none;transition:none;
+  }
+  #review-head{padding:10px 10px 8px 16px}
+  #review-close{display:grid}
+  #files{max-height:40%}
+  #shelf-bar{flex-wrap:wrap;row-gap:4px}
+
+  #log{padding:16px 14px 8px}
+  #panel-view{padding:20px 14px 24px}
+  .empty-brand{gap:12px;margin-bottom:22px}
+  .brand-mark,.brand-mark svg{width:48px;height:48px}
+  .brand-name{font-size:30px}
+  #empty{margin-top:4vh}
+
+  /* The composer. The bar's children become items of the box itself so they
+     can be dealt into two rows around the field; the bar element stays in the
+     markup for the desktop layout and the scripts that hang menus off it. */
+  form{padding:6px 12px calc(12px + env(safe-area-inset-bottom))}
+  .composer{
+    position:relative;display:flex;flex-wrap:wrap;align-items:center;
+    column-gap:6px;row-gap:8px;padding:10px 12px 10px;
+  }
+  .composer-bar{display:contents}
+  #attachments{order:-3;flex:0 0 100%;margin-bottom:0}
+  #workspace-picker,#mode-picker{order:-2}
+  .input-wrap{order:-1;flex:0 0 100%}
+  .composer .picker{position:static;min-width:0}
+  .composer .picker-btn{max-width:100%;height:32px}
+  #send,#stop{flex:0 0 auto}
+  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. */
+  .composer .menu,#attach-picker .menu{
+    left:0;right:0;width:auto;min-width:0;max-width:none;bottom:calc(100% + 8px);
+  }
+  .menu-body{max-height:min(50dvh,340px)}
+  #effort-picker .menu{left:0;width:auto;padding:16px 16px 14px}
+  .effort-rail{--stop:40px;height:40px;border-radius:20px}
+  .effort-fill{border-radius:20px}
+  .effort-stop,.effort-name{width:40px}
+  .effort-stop{height:40px}
+  .effort-knob{width:28px;height:28px}
+  #jump{right:14px;bottom:160px}
+
+  /* Dialogs, with the keyboard up: vh is the height without it. */
+  #market{max-height:82dvh}
+  #provider-picker,#browse{max-height:76dvh}
+  #project-picker{max-height:70dvh}
+  .mk-grid{grid-template-columns:minmax(0,1fr)}
+  .mk-search{padding-right:44px}
+  .ask-body{max-height:min(260px,40dvh)}
+  .ask-line .n{flex:0 0 28px;padding-right:6px}
+  .ask-head{padding:16px 16px 10px}
+  .ask-body{margin:0 16px}
+  .kv{grid-template-columns:minmax(0,1fr);row-gap:2px}
+  .kv-v{margin-bottom:6px}
+}
+
+/*
+ * A finger, not a pointer.
+ *
+ * Hover reveals nothing on a touch screen, so what the desktop shows on hover
+ * is shown outright; and a field under 16px makes iOS zoom the page when it
+ * is focused, so every field is 16px here whatever it is elsewhere.
+ */
+@media (hover:none) and (pointer:coarse){
+  .session .more,.fold-row .more{display:grid;width:28px;height:28px}
+  .proj-forget{opacity:1}
+  .actions{position:static;opacity:1;margin-top:4px}
+  .turn{margin-bottom:14px}
+  .act{padding:6px 10px}
+  .tab .x{opacity:.55;width:24px;height:24px}
+  #tab-add{width:32px;height:32px}
+  .tab{height:34px}
+  .nav-item,.session,.fold,.project{height:38px}
+  .show-more{height:32px}
+  .icon-btn{width:34px;height:34px}
+  button.primary{width:36px;height:36px}
+  button.ghost,a.ghost{height:36px}
+  .att .x{padding:4px 6px}
+  .cn-x,.mk-close,.theme-btn{width:36px;height:36px}
+  .cn-why{width:28px;height:28px}
+  .switch{width:40px;height:24px}
+  .dlg-actions button{padding:10px 14px}
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea,
+  .menu-search input,.mk-search,.art-search,.keyrow input,.cn-body input,.pp-head input,
+  textarea.boxed{font-size:16px}
+  /* The chip layer under the field has to keep the field's metrics. */
+  #input-mirror{font-size:16px}
 }
-#burger{display:none;background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;font-size:18px}
 `;
 const APP_SCRIPT = String.raw `
 const STRINGS = window.__STRINGS;
@@ -1838,6 +2293,10 @@ if (window.oharness && window.oharness.insetTitlebar) {
 /** Whether this page is the desktop window rather than a browser tab. */
 const IS_DESKTOP = Boolean(window.oharness && window.oharness.desktop);
 
+/** Whether the page is laid out for a phone right now; the stylesheet's breakpoint. */
+const PHONE_QUERY = window.matchMedia("(max-width:760px)");
+const isPhone = () => PHONE_QUERY.matches;
+
 // --- language --------------------------------------------------------------
 
 /**
@@ -1877,6 +2336,9 @@ const ICON_PATHS = {
   // both menus open upward, and both mark themselves with a caret that reads as
   // "there is a list here" rather than one that promises a direction.
   caret: ["M4.5 6.5 8 10l3.5-3.5"],
+  // The account control can both open and close its menu, so it uses the
+  // familiar paired chevrons instead of borrowing a one-way dropdown caret.
+  chevronsVertical: ["M5.5 6.5 8 4l2.5 2.5", "M5.5 9.5 8 12l2.5-2.5"],
   // The three themes, drawn the same way the site draws them so the two
   // controls are recognisably the same control.
   themeSystem: ["M6 13.4h4"],
@@ -1944,6 +2406,37 @@ const ICON_PATHS = {
     "M14 10a1.33 1.33 0 0 1-1.33 1.33H4.67L2 14V3.33A1.33 1.33 0 0 1 3.33 2h9.34" +
       "A1.33 1.33 0 0 1 14 3.33Z",
   ],
+  // The five permission modes. Five short words in a column look alike until
+  // they are read; a glyph in front of each lets the one in use be found by
+  // shape from the bar, the way the vendor mark does for the model.
+  //
+  // Manual is by hand, and a raised palm is also the sign for "wait": three
+  // fingers, a thumb, and the heel of the hand in one sweep. Four fingers
+  // would be the honest count, but at fifteen pixels the fourth turns the
+  // top edge into a comb.
+  modeAsk: [
+    "M12 7.4V4a1.33 1.33 0 0 0-2.67 0",
+    "M9.33 6.7V2.7a1.33 1.33 0 0 0-2.66 0v1.3",
+    "M6.67 7V4A1.33 1.33 0 0 0 4 4v5.33",
+    "M12 5.33a1.33 1.33 0 1 1 2.67 0v4a5.33 5.33 0 0 1-5.34 5.34H8" +
+      "c-1.87 0-3-.58-4-1.56l-2.4-2.4a1.33 1.33 0 0 1 1.89-1.89L4.67 10",
+  ],
+  // Accept edits lets the pencil through.
+  modeEdits: ["M11.3 2.7 13.3 4.7 5.3 12.7H3.3v-2Z", "M9.8 4.2l2 2"],
+  // Plan is read-only: an eye, which looks and does not touch.
+  modePlan: ["M1.6 8s2.4-4.4 6.4-4.4S14.4 8 14.4 8s-2.4 4.4-6.4 4.4S1.6 8 1.6 8Z"],
+  modePlanCircles: [[8, 8, 2.1]],
+  // Auto waves the routine through: a bolt.
+  modeAuto: ["M8.8 1.6 3.6 9h4l-.7 5.4L12.4 7h-4Z"],
+  // Bypass leaves the gate open: a padlock with its shackle swung clear.
+  modeBypass: ["M5.4 7.4V5.2a2.6 2.6 0 0 1 5-1"],
+  modeBypassRects: [[3.2, 7.4, 9.6, 6.2, 1.6]],
+  // The date picker's trigger and its month arrows. The same marks the site's
+  // picker draws, because it is the same control.
+  calendar: ["M2 6.5h12M5.5 1.5v3M10.5 1.5v3"],
+  calendarRects: [[2, 3, 12, 11, 2.5]],
+  chevronLeft: ["M10 3.5 5.5 8l4.5 4.5"],
+  chevronRight: ["M6 3.5 10.5 8 6 12.5"],
 };
 
 function svgIcon(name, extra) {
@@ -2064,6 +2557,25 @@ async function getJson(path) {
 }
 
 /** A banner for a panel that could not load, in place of blank fields. */
+/**
+ * A memory error in this page's language. The engine sends a code and its
+ * values with the English message; the page says it in its own words when it
+ * has them, and passes the message through when it does not.
+ */
+function memoryText(failure) {
+  const key = failure && failure.code ? "memory.err." + failure.code : "";
+  if (key && (STRINGS.en[key] || (STRINGS[LOCALE] && STRINGS[LOCALE][key]))) return t(key, failure.params || {});
+  return (failure && failure.message) || t("memory.failed");
+}
+
+/** Stands in while a panel fetches, so a click never lands on a blank page. */
+function panelLoading() {
+  const panel = el("div", "panel panel-loading");
+  panel.appendChild(el("span", "spinner"));
+  panel.appendChild(el("span", "working-label", t("market.loading")));
+  return panel;
+}
+
 function panelError(message) {
   const panel = el("div", "panel");
   const box = el("div", "row-card");
@@ -2468,12 +2980,16 @@ function makePicker(id, onPick, extra) {
   return api;
 }
 
+// Drawn glyphs rather than vendor tiles: a mode is chrome, not a party being
+// paid, so it gets the bare stroke every other menu icon has.
+const modeMark = (icon) => (extra) => svgIcon(icon, "mode-mark" + (extra ? " " + extra : ""));
+
 const MODES = [
-  { value: "default", label: "Manual", sub: "ask first" },
-  { value: "acceptEdits", label: "Accept edits", sub: "edits pass" },
-  { value: "plan", label: "Plan", sub: "read-only" },
-  { value: "auto", label: "Auto", sub: "routine passes" },
-  { value: "bypassPermissions", label: "Bypass", sub: "all pass" },
+  { value: "default", label: "Manual", sub: "ask first", mark: modeMark("modeAsk") },
+  { value: "acceptEdits", label: "Accept edits", sub: "edits pass", mark: modeMark("modeEdits") },
+  { value: "plan", label: "Plan", sub: "read-only", mark: modeMark("modePlan") },
+  { value: "auto", label: "Auto", sub: "routine passes", mark: modeMark("modeAuto") },
+  { value: "bypassPermissions", label: "Bypass", sub: "all pass", mark: modeMark("modeBypass") },
 ];
 
 const modelPicker = makePicker(
@@ -2522,6 +3038,139 @@ const modelPicker = makePicker(
 );
 const modePicker = makePicker("mode-picker", (mode) => void api("/mode", { session: activeId, mode }).then(applyState));
 
+/**
+ * Reasoning effort for the session on screen.
+ *
+ * Not built on makePicker: that draws a searchable list, and effort is one
+ * quantity on a scale. The stops are whatever the current model accepts, plus
+ * "off" where the model can be asked not to think, so a tier the model would
+ * clamp away is never offered in the first place.
+ *
+ * What the server reports is the tier the next request will carry. A pick is
+ * kept as picked on the session, so moving to a model without "max" shows the
+ * tier it lands on, and moving back shows "max" again.
+ */
+const effortPicker = (() => {
+  const root = document.getElementById("effort-picker");
+  const button = root.querySelector(".picker-btn");
+  const label = root.querySelector(".picker-value");
+  const menu = root.querySelector(".menu");
+  let stops = [];
+  let value = null;
+
+  const name = (stop) => t("effort." + stop);
+  const close = () => {
+    root.classList.remove("open");
+    menu.hidden = true;
+  };
+
+  const pick = (next) => {
+    if (!next || next === value) return;
+    value = next;
+    paint(true);
+    track("effort_changed", { effort: next });
+    void api("/effort", { session: activeId, effort: next }).then(applyState);
+  };
+
+  function paint(refocus) {
+    const index = Math.max(0, stops.indexOf(value));
+    label.textContent = value ? t("effort.short." + value) : "…";
+    button.title = t("effort.tooltip") + ": " + (value ? name(value) : "");
+    if (menu.hidden && !refocus) return;
+
+    menu.replaceChildren();
+    const head = el("div", "effort-head");
+    head.appendChild(el("span", "effort-title", t("effort.title")));
+    head.appendChild(el("span", "effort-current", value ? name(value) : ""));
+    menu.appendChild(head);
+    menu.appendChild(el("div", "effort-desc", value ? t("effort.desc." + value) : ""));
+
+    const ends = el("div", "effort-ends");
+    ends.appendChild(el("span", null, t("effort.faster")));
+    ends.appendChild(el("span", null, t("effort.smarter")));
+    menu.appendChild(ends);
+
+    const rail = el("div", "effort-rail");
+    rail.setAttribute("role", "radiogroup");
+    rail.setAttribute("aria-label", t("effort.tooltip"));
+    const fill = el("span", "effort-fill");
+    const share = stops.length > 1 ? index / (stops.length - 1) : 0;
+    // From the rail's left edge to the far side of the chosen stop.
+    fill.style.width = "calc((100% - var(--stop)) * " + share + " + var(--stop))";
+    rail.appendChild(fill);
+
+    const names = el("div", "effort-names");
+    stops.forEach((stop, i) => {
+      const on = i === index;
+      const dot = el("button", "effort-stop" + (on ? " on" : ""));
+      dot.type = "button";
+      dot.setAttribute("role", "radio");
+      dot.setAttribute("aria-checked", on ? "true" : "false");
+      dot.setAttribute("aria-label", name(stop));
+      dot.tabIndex = on ? 0 : -1;
+      dot.title = name(stop);
+      dot.appendChild(el("span", on ? "effort-knob" : "effort-dot"));
+      dot.addEventListener("click", () => pick(stop));
+      dot.addEventListener("keydown", (e) => {
+        const step = e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : 0;
+        if (!step) return;
+        e.preventDefault();
+        pick(stops[Math.min(stops.length - 1, Math.max(0, index + step))]);
+      });
+      rail.appendChild(dot);
+      names.appendChild(el("span", "effort-name" + (on ? " on" : ""), t("effort.short." + stop)));
+    });
+    menu.appendChild(rail);
+    menu.appendChild(names);
+
+    if (refocus) {
+      const active = rail.querySelector(".effort-stop.on");
+      if (active) active.focus();
+    }
+  }
+
+  const open = () => {
+    for (const other of document.querySelectorAll(".picker.open")) {
+      if (other !== root) {
+        other.classList.remove("open");
+        other.querySelector(".menu").hidden = true;
+      }
+    }
+    root.classList.add("open");
+    menu.hidden = false;
+    paint(true);
+  };
+
+  button.addEventListener("click", (e) => {
+    e.stopPropagation();
+    menu.hidden ? open() : close();
+  });
+  menu.addEventListener("click", (e) => e.stopPropagation());
+  document.addEventListener("click", close);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !menu.hidden) {
+      close();
+      button.focus();
+    }
+  });
+
+  return {
+    set(state) {
+      const levels = Array.isArray(state.effortLevels) ? state.effortLevels : [];
+      // A model with no tiers has nothing to set; hiding beats a control that
+      // does nothing.
+      root.hidden = levels.length === 0 || !state.effort;
+      if (root.hidden) {
+        close();
+        return;
+      }
+      stops = (state.effortOff ? ["off"] : []).concat(levels);
+      value = state.effort;
+      paint(false);
+    },
+  };
+})();
+
 /**
  * Which tree the session about to start will run in.
  *
@@ -2802,19 +3451,149 @@ function bumpWorkLabel(group) {
     count === 1 ? "1 step" : count + " steps";
 }
 
+// --- tool presentation -----------------------------------------------------
+// Shared by the tool cards and the approval dialog, so a call reads the same
+// whether it is waiting on an answer or already done.
+
+/** Display names and marks for Cloud apps, learned from catalog answers and connection cards. */
+const cloudApps = new Map();
+
+function learnCloudApp(slug, label, logo) {
+  if (typeof slug !== "string" || !slug) return;
+  const known = cloudApps.get(slug) || {};
+  cloudApps.set(slug, {
+    label: typeof label === "string" && label ? label : known.label,
+    logo: typeof logo === "string" && logo ? logo : known.logo,
+  });
+}
+
+function cloudAppName(slug) {
+  const known = cloudApps.get(slug);
+  if (known && known.label) return known.label;
+  const words = String(slug || "").replace(/_/g, " ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+/** The app's mark, only when it is https — see connectionCard for why. */
+function cloudAppLogo(slug) {
+  const known = cloudApps.get(slug);
+  if (!known || !known.logo) return undefined;
+  try {
+    const parsed = new URL(known.logo);
+    return parsed.protocol === "https:" ? parsed.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function isEmptyInput(value) {
+  return value === undefined || value === null ||
+    (typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0);
+}
+
+/** mcp__github__create_issue reads as "github · create_issue". */
+function friendlyToolName(name) {
+  const match = /^mcp__(.+?)__(.+)$/.exec(name || "");
+  return match ? match[1] + " · " + match[2] : name || "";
+}
+
+/**
+ * A call's one-line name, worked out here rather than taken from the engine:
+ * the engine's titles are English, and a replayed transcript only carries the
+ * tool's name — which is how a reload used to turn "Gmail · send_email" back
+ * into cloud_app_execute.
+ */
+function toolTitle(name, input, fallback) {
+  const args = input && typeof input === "object" ? input : {};
+  if (name === "cloud_app_tools") {
+    return typeof args.app === "string" ? t("tool.cloudAppTools", { app: cloudAppName(args.app) }) : t("tool.cloudApps");
+  }
+  if (name === "cloud_app_execute" && typeof args.app === "string") {
+    return cloudAppName(args.app) + (typeof args.tool === "string" ? " · " + args.tool : "");
+  }
+  if (name === "ask_user" && Array.isArray(args.questions)) {
+    return t("tool.ask", { header: args.questions.map((q) => q && q.header).filter(Boolean).join(" · ") });
+  }
+  // The engine's own title when a tool wrote one, like Bash(npm test). Its
+  // default is the bare name followed by a JSON preview, which says less than
+  // the readable name does and is cut off mid-string.
+  if (fallback && fallback !== name && !fallback.startsWith(name + "(")) return fallback;
+  return friendlyToolName(name);
+}
+
+/** Parameters as a table: text keeps its line breaks, short lists become chips. */
+function paramTable(params) {
+  const table = el("div", "kv");
+  for (const [key, value] of Object.entries(params)) {
+    const cell = el("div", "kv-v");
+    if (value === null || value === undefined || value === "") {
+      cell.textContent = "—";
+      cell.classList.add("empty");
+    } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      cell.textContent = String(value);
+    } else if (Array.isArray(value) && value.length && value.every((item) => typeof item === "string" || typeof item === "number")) {
+      for (const item of value) cell.appendChild(el("span", "kv-chip", String(item)));
+    } else {
+      const pre = el("pre", "mono");
+      pre.textContent = JSON.stringify(value, null, 2);
+      cell.appendChild(pre);
+    }
+    table.append(el("div", "kv-k", key), cell);
+  }
+  return table;
+}
+
+/**
+ * One line for a catalog answer, which is otherwise a single line of JSON.
+ * Written against the fields rather than a schema: a shape it does not
+ * recognise falls back to showing the raw answer, never to a wrong sentence.
+ */
+function catalogSummary(text) {
+  let data;
+  try { data = JSON.parse(text); } catch { return ""; }
+  if (!data || typeof data !== "object") return "";
+  if (typeof data.app === "string") learnCloudApp(data.app, data.label, data.logo);
+  if (Array.isArray(data.apps)) {
+    const names = data.apps.map((app) => {
+      if (typeof app === "string") return cloudAppName(app);
+      if (!app || typeof app !== "object") return "";
+      const slug = app.slug || app.app || app.id;
+      learnCloudApp(slug, app.label || app.name, app.logo);
+      return app.label || app.name || (slug ? cloudAppName(slug) : "");
+    }).filter(Boolean);
+    return names.length ? t("tool.catalogApps", { n: names.length, names: names.join(", ") }) : "";
+  }
+  if (Array.isArray(data.tools) && typeof data.app === "string") {
+    return t("tool.catalogTools", { app: cloudAppName(data.app), n: data.tools.length });
+  }
+  return "";
+}
+
 function toolCard(id, title, name, input) {
   const card = el("details", "tool");
   const summary = el("summary");
   summary.appendChild(el("span", "dot"));
-  summary.appendChild(el("span", "name", title || name));
+  summary.appendChild(el("span", "name", toolTitle(name, input, title)));
   summary.appendChild(el("span", "ms", ""));
   card.appendChild(summary);
 
   const body = el("div", "tool-body");
-  body.appendChild(el("div", "label", "input"));
-  const pre = el("pre", "mono");
-  pre.textContent = JSON.stringify(input, null, 2);
-  body.appendChild(pre);
+  // 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
+  // question has its own card.
+  const shown = name === "cloud_app_execute" && input && typeof input === "object" ? input.arguments : input;
+  if (name !== "ask_user" && !isEmptyInput(shown)) {
+    body.appendChild(el("div", "label", "input"));
+    const tabular = shown && typeof shown === "object" && !Array.isArray(shown) &&
+      (name.startsWith("cloud_app_") || name.startsWith("mcp__"));
+    if (tabular) body.appendChild(paramTable(shown));
+    else {
+      const pre = el("pre", "mono");
+      pre.textContent = JSON.stringify(shown, null, 2);
+      body.appendChild(pre);
+    }
+  }
   card.appendChild(body);
 
   const group = workGroup();
@@ -2844,7 +3623,18 @@ function finishTool(id, result, ms, isError) {
   } else {
     const pre = el("pre", "mono");
     pre.textContent = text.length > 4000 ? text.slice(0, 4000) + "\n… truncated" : text;
-    entry.body.appendChild(pre);
+    const summary = entry.name === "cloud_app_tools" && !isError ? catalogSummary(text) : "";
+    if (summary) {
+      entry.body.appendChild(el("div", "tool-summary", summary));
+      const raw = el("details", "tool-raw");
+      raw.appendChild(el("summary", "", t("tool.rawResult")));
+      raw.appendChild(pre);
+      entry.body.appendChild(raw);
+      // The answer may have named the app better than its slug did.
+      entry.card.querySelector(".name").textContent = toolTitle(entry.name, entry.input);
+    } else {
+      entry.body.appendChild(pre);
+    }
   }
   if (isError) {
     // A failed step is the one thing worth surfacing without a click.
@@ -2997,6 +3787,7 @@ function applyState(s) {
   if (!s) return;
   if (s.model) modelPicker.set(modelPicker.options || [], s.model);
   if (s.mode) modePicker.set(MODES, s.mode);
+  effortPicker.set(s);
   if (s.cwd) {
     // Kept so the approval dialog can show a path the way the user thinks of
     // it — src/web/page.ts, not the whole absolute path they already know.
@@ -3069,7 +3860,9 @@ function stopWorking() {
 function setBusy(busy) {
   if (P) P.busy = busy;
   paintTabs();
+  // While a turn runs, the send arrow becomes a stop square in the same spot.
   sendBtn.disabled = busy;
+  sendBtn.hidden = busy;
   stopBtn.hidden = !busy;
   if (!busy) stopWorking();
 }
@@ -3124,9 +3917,21 @@ function projectHead(cwd, name, count, open) {
   if ((projects.find((project) => project.path === cwd) || {}).pinned) {
     head.appendChild(svgIcon("pin", "pin-mark"));
   }
-  if (count) head.appendChild(el("span", "fold-count", String(count)));
   head.addEventListener("click", () => toggleProject(cwd, open));
 
+  // A fresh session in this project without switching to it first. Where the
+  // count used to sit: the count said how much was there, and this is the one
+  // thing people came to the header to do about it.
+  const add = el("button", "more fold-new");
+  add.type = "button";
+  add.title = t("nav.new");
+  add.setAttribute("aria-label", t("nav.new"));
+  add.appendChild(navIcon("new"));
+  add.addEventListener("click", (e) => {
+    e.stopPropagation();
+    void switchTo({ action: "new", cwd });
+  });
+
   /*
    * Deleting a project is deleting its transcripts, and it lives here rather
    * than beside "remove from list" in the picker because this header is the
@@ -3193,6 +3998,7 @@ function projectHead(cwd, name, count, open) {
   // The header is a button, so the menu control cannot live inside it.
   const wrap = el("div", "fold-row");
   wrap.appendChild(head);
+  wrap.appendChild(add);
   wrap.appendChild(more);
 
   draggable(wrap, {
@@ -3493,6 +4299,8 @@ function closeRowMenu() {
   menuRow = null;
   rowMenu.hidden = true;
   rowMenu.replaceChildren();
+  rowMenu.classList.remove("fit-anchor", "account-menu");
+  rowMenu.style.width = "";
 }
 
 /**
@@ -3505,8 +4313,9 @@ function placeRowMenu(button) {
   const anchor = button.getBoundingClientRect();
   const box = rowMenu.getBoundingClientRect();
   const left = Math.min(anchor.left, window.innerWidth - box.width - 8);
-  const below = anchor.bottom + 4;
-  const top = below + box.height > window.innerHeight - 8 ? anchor.top - box.height - 4 : below;
+  const gap = rowMenu.classList.contains("account-menu") ? 8 : 4;
+  const below = anchor.bottom + gap;
+  const top = below + box.height > window.innerHeight - 8 ? anchor.top - box.height - gap : below;
   rowMenu.style.left = Math.max(8, left) + "px";
   rowMenu.style.top = Math.max(8, top) + "px";
 }
@@ -3884,6 +4693,7 @@ const connectionCards = new Map();
 
 function connectionCard(card) {
   connectionCards.set(card.id, card);
+  learnCloudApp(card.app, card.label, card.logo);
   const target = pane(card.session);
   let box = target.node.querySelector('[data-connection-id="' + card.id + '"]');
   if (!box) {
@@ -4015,6 +4825,11 @@ function renderHistory(entries, into) {
   for (const card of connectionCards.values()) {
     if (pane(card.session) === P) connectionCard(card);
   }
+  // A question still waiting, drawn again under the history that just
+  // replaced the pane. Settled ones are already in it, as their tool card.
+  for (const entry of questionCards.values()) {
+    if (entry.status === "open" && pane(entry.session) === P) paintQuestion(entry);
+  }
   atBottom = true;
   log.scrollTop = log.scrollHeight;
 }
@@ -4176,11 +4991,27 @@ events.onmessage = (message) => {
       if (wasSelected) void showArtifact(event.artifact.id);
       // First artifact of the session opens the drawer, the way the first file
       // change makes the review button appear. Later ones do not steal focus.
-      if (artifacts.length === 1) shelf.classList.add("open");
+      // Not on a phone, where the drawer is the whole screen: it would cover
+      // the reply that produced the artifact.
+      if (artifacts.length === 1 && !isPhone()) shelf.classList.add("open");
       break;
     }
 
     case "permission_request": showAsk(event); break;
+    case "question_request": questionCard(event); break;
+    case "question_result": settleQuestion(event); break;
+    // Sent once per (re)connect, after the replay: a card this page still
+    // shows as open but the server no longer holds closed while we were away.
+    case "pending_interactions":
+      for (const entry of questionCards.values()) {
+        if ((entry.status === "open" || entry.status === "sending") && !event.ids.includes(entry.id)) closeQuestion(entry.id);
+      }
+      break;
+    // Answered in another window, or the turn waiting on it stopped.
+    case "interaction_closed":
+      withdrawAsk(event.id);
+      closeQuestion(event.id);
+      break;
     case "permission_result":
       if (!event.allowed) addNotice("denied: " + (event.reason || ""), "err");
       else if (event.remembered) addNotice("remembered: " + event.remembered);
@@ -4192,6 +5023,12 @@ events.onmessage = (message) => {
       break;
 
     case "model_changed": addNotice(event.from + " → " + event.to); break;
+    case "memory_recall":
+      addNotice(t("memory.recalled", { count: event.notes.length, list: event.notes.map((note) => note.summary).join("; ") }));
+      break;
+    case "memory_extracted":
+      addNotice(t("memory.extracted", { count: event.notes.length, list: event.notes.map((note) => note.summary).join("; ") }));
+      break;
     case "notice": addNotice(event.message); break;
     case "error":
       P.streaming = null;
@@ -4288,6 +5125,12 @@ const askExpand = document.getElementById("ask-expand");
 const askRaw = document.getElementById("ask-raw");
 const askScope = document.getElementById("ask-scope");
 let askState = null;
+/**
+ * Requests that arrived while another was on screen, oldest first. A second
+ * request used to overwrite the first one's id, which left that turn waiting
+ * on an answer nobody could give any more.
+ */
+const askQueue = [];
 
 /**
  * The rule a "remember" answer would write.
@@ -4328,65 +5171,123 @@ function askSize(text) {
   return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 }
 
-const askLines = (text, kind) =>
-  text.split("\n").map((s) => ({ s, kind }));
+/** Lines of a payload. A file ending in a newline has no empty last line to show. */
+const askLines = (text, kind) => {
+  const lines = text.split("\n");
+  if (lines.length > 1 && lines[lines.length - 1] === "") lines.pop();
+  return lines.map((s) => ({ s, kind }));
+};
 
 /**
  * The request, rearranged for a reader.
  *
  * The payload of a write is the file content, not the JSON object carrying it;
  * the payload of an edit is the substitution, which only means anything as a
- * diff. Tools with no special handling still get their parameters, just as
- * indented JSON under the toggle rather than as the headline.
+ * diff. A command leads with what it is for when the model said, and shows
+ * the command whole underneath. Other tools get their parameters as a table,
+ * with the JSON behind the toggle — and a call with no parameters gets no body.
  */
 function askView(request) {
   const name = (request.toolName || "").toLowerCase();
   const input = request.input && typeof request.input === "object" ? request.input : {};
-  const view = { tag: t("ask.tagCall"), target: request.title, meta: "", lines: [] };
+  const view = {
+    tag: t("ask.tagCall"),
+    target: toolTitle(request.toolName, input, request.title),
+    path: "",
+    mono: false,
+    logo: undefined,
+    meta: [],
+    lines: [],
+    code: "",
+    params: null,
+  };
 
   if (name === "write" && typeof input.content === "string") {
-    const count = input.content === "" ? 0 : input.content.split("\n").length;
     view.tag = t("ask.tagWrite");
-    view.target = askPath(input.path);
-    view.meta = [
-      count === 1 ? t("ask.oneLine") : t("ask.nLines", { n: count }),
+    view.path = askPath(input.path);
+    view.lines = input.content === "" ? [] : askLines(input.content, "");
+    view.meta.push(
+      view.lines.length === 1 ? t("ask.oneLine") : t("ask.nLines", { n: view.lines.length }),
       askSize(input.content),
-    ].join(" · ");
-    view.lines = askLines(input.content, "");
+    );
     return view;
   }
 
   if (name === "edit" && typeof input.newString === "string") {
-    const removed = askLines(String(input.oldString ?? ""), "del");
-    const added = askLines(input.newString, "add");
+    const removed = input.oldString ? askLines(String(input.oldString), "del") : [];
+    const added = input.newString ? askLines(input.newString, "add") : [];
     view.tag = input.replaceAll ? t("ask.tagEditAll") : t("ask.tagEdit");
-    view.target = askPath(input.path);
-    view.meta = t("ask.diffStat", { added: added.length, removed: removed.length });
+    view.path = askPath(input.path);
+    view.meta.push(t("ask.diffStat", { added: added.length, removed: removed.length }));
     view.lines = removed.concat(added);
     return view;
   }
 
   if (name === "bash" && typeof input.command === "string") {
     view.tag = t("ask.tagBash");
-    // The command is the thing being judged, so it is the headline and there
-    // is no body to fold under it.
-    view.target = input.command;
-    view.meta = typeof input.description === "string" ? input.description : "";
+    if (typeof input.description === "string" && input.description.trim()) {
+      view.target = input.description.trim();
+      view.code = input.command;
+    } else {
+      view.target = input.command;
+      view.mono = true;
+    }
+    return view;
+  }
+
+  if (name === "cloud_app_execute" || name === "cloud_app_tools") {
+    view.tag = t("ask.tagApp");
+    if (typeof input.app === "string") view.logo = cloudAppLogo(input.app);
+    if (name === "cloud_app_execute" && !isEmptyInput(input.arguments)) view.params = input.arguments;
     return view;
   }
 
   if (typeof input.url === "string") {
     view.tag = t("ask.tagFetch");
     view.target = input.url;
+    view.mono = true;
+    const rest = Object.fromEntries(Object.entries(input).filter(([key]) => key !== "url"));
+    if (!isEmptyInput(rest)) view.params = rest;
     return view;
   }
 
-  if (typeof input.path === "string") view.target = askPath(input.path);
-  else if (typeof input.pattern === "string") view.target = input.pattern;
-  view.lines = askLines(JSON.stringify(input, null, 2), "");
+  if (typeof input.path === "string") view.meta.push(askPath(input.path));
+  else if (typeof input.pattern === "string") view.meta.push(input.pattern);
+  if (!isEmptyInput(input)) view.params = input;
   return view;
 }
 
+function paintAskHead(view, request) {
+  document.getElementById("ask-tag").textContent = view.tag;
+  const target = document.getElementById("ask-target");
+  target.replaceChildren();
+  target.classList.toggle("mono", view.mono || Boolean(view.path));
+  if (view.path) {
+    // The directory is context; the file name is the thing being approved.
+    const cut = view.path.lastIndexOf("/");
+    if (cut >= 0) target.appendChild(el("span", "dir", view.path.slice(0, cut + 1)));
+    target.appendChild(el("span", "base", view.path.slice(cut + 1)));
+  } else {
+    target.textContent = view.target || "";
+  }
+
+  const logo = document.getElementById("ask-logo");
+  logo.hidden = !view.logo;
+  if (view.logo) {
+    logo.onerror = () => { logo.hidden = true; };
+    logo.src = view.logo;
+  } else {
+    logo.removeAttribute("src");
+  }
+
+  const meta = document.getElementById("ask-meta");
+  // Which rule made the harness ask belongs with the other metadata, and in
+  // the page's own language rather than the engine's English sentence.
+  const rule = request.rule ? t("ask.rule", { rule: request.rule }) : request.reason;
+  meta.textContent = view.meta.concat(rule ? [rule] : []).filter(Boolean).join(" · ");
+  meta.hidden = meta.textContent === "";
+}
+
 /** A path shown relative to the working directory when it sits inside it. */
 function askPath(value) {
   if (typeof value !== "string") return "";
@@ -4396,52 +5297,81 @@ function askPath(value) {
 
 function renderAskBody() {
   if (!askState) return;
+  const { view, request } = askState;
   askBody.replaceChildren();
-  const all = askState.view.lines;
-  const shown = askState.raw
-    ? askLines(JSON.stringify(askState.request.input, null, 2), "")
-    : askState.expanded ? all : all.slice(0, ASK_FOLD);
-  for (const [index, line] of shown.entries()) {
-    const row = el("div", "ask-line" + (line.kind ? " " + line.kind : ""));
-    // A diff has no line numbers to give: the replacement has not happened, so
-    // counting the rows would name positions that do not exist in the file.
-    const gutter = line.kind === "del" ? "−" : line.kind === "add" ? "+" : String(index + 1);
-    row.append(el("span", "n", gutter), el("span", "s", line.s || " "));
-    askBody.append(row);
-  }
-  askBody.classList.toggle("clamped", !askState.expanded && !askState.raw);
-  askBody.hidden = shown.length === 0;
-
-  const foldable = !askState.raw && all.length > ASK_FOLD;
-  askExpand.hidden = !foldable;
-  askExpand.textContent = askState.expanded ? t("ask.collapse") : t("ask.expand", { n: all.length });
+  askBody.classList.remove("diff", "clamped");
+  let foldable = false;
+
+  if (askState.raw) {
+    const pre = el("pre", "ask-code");
+    pre.textContent = JSON.stringify(request.input, null, 2);
+    askBody.appendChild(pre);
+  } else if (view.lines.length) {
+    const shown = askState.expanded ? view.lines : view.lines.slice(0, ASK_FOLD);
+    foldable = view.lines.length > ASK_FOLD;
+    askBody.classList.toggle("diff", view.lines.some((line) => line.kind));
+    for (const [index, line] of shown.entries()) {
+      const row = el("div", "ask-line" + (line.kind ? " " + line.kind : ""));
+      // A diff has no line numbers to give: the replacement has not happened, so
+      // counting the rows would name positions that do not exist in the file.
+      const gutter = line.kind === "del" ? "−" : line.kind === "add" ? "+" : String(index + 1);
+      row.append(el("span", "n", gutter), el("span", "s", line.s || " "));
+      askBody.appendChild(row);
+    }
+    askBody.classList.toggle("clamped", !askState.expanded);
+  } else if (view.code) {
+    const pre = el("pre", "ask-code");
+    pre.textContent = view.code;
+    askBody.appendChild(pre);
+  } else if (view.params) {
+    askBody.appendChild(paramTable(view.params));
+  }
+  askBody.hidden = askBody.childElementCount === 0;
+
+  askExpand.hidden = askState.raw || !foldable;
+  askExpand.textContent = askState.expanded ? t("ask.collapse") : t("ask.expand", { n: view.lines.length });
+  // Raw parameters only where the body is a rearrangement of them. A file or
+  // a command is already shown whole, and an empty call has nothing to reveal.
+  // This button used to be shown always, which on a command left one orphaned
+  // row between two rules.
+  askRaw.hidden = !view.params;
   askRaw.textContent = askState.raw ? t("ask.rawHide") : t("ask.raw");
   askMore.hidden = askExpand.hidden && askRaw.hidden;
 }
 
 function showAsk(event) {
+  if (pendingId === event.id || askQueue.some((queued) => queued.id === event.id)) return;
+  if (pendingId) return void askQueue.push(event);
   pendingId = event.id;
   const request = event.request;
   const view = askView(request);
   askState = { request, view, expanded: false, raw: false };
 
-  document.getElementById("ask-tag").textContent = view.tag;
-  document.getElementById("ask-tool").textContent = request.toolName || "";
-  document.getElementById("ask-target").textContent = view.target || "";
-  const meta = document.getElementById("ask-meta");
-  // The reason explains which rule made the harness ask; it belongs with the
-  // other metadata, not above the thing being approved.
-  meta.textContent = [view.meta, request.reason].filter(Boolean).join(" · ");
-  meta.hidden = meta.textContent === "";
+  paintAskHead(view, request);
   askScope.textContent = "";
+  askScope.hidden = true;
   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.
   if (paletteDialog.open) paletteDialog.close();
-  ask.showModal();
+  if (!ask.open) ask.showModal();
   ask.querySelector('[data-answer="once"]').focus();
 }
 
+function nextAsk() {
+  const next = askQueue.shift();
+  if (next) showAsk(next);
+}
+
+/** Taken down without an answer: another window answered it, or its turn stopped. */
+function withdrawAsk(id) {
+  const queued = askQueue.findIndex((entry) => entry.id === id);
+  if (queued >= 0) askQueue.splice(queued, 1);
+  if (pendingId !== id) return;
+  pendingId = null;
+  ask.close();
+}
+
 askExpand.addEventListener("click", () => {
   askState.expanded = !askState.expanded;
   renderAskBody();
@@ -4456,6 +5386,9 @@ ask.addEventListener("close", () => {
   // Escape, the backdrop, anything other than a button: a dismissal is a
   // refusal. Approval has to be an explicit act.
   if (pendingId) answer(false, null);
+  askState = null;
+  // After the close has finished: showModal on a dialog still closing throws.
+  setTimeout(nextAsk, 0);
 });
 
 // Enter approves once, which is the answer the dialog is focused on anyway.
@@ -4470,15 +5403,8 @@ ask.addEventListener("keydown", (event) => {
 for (const button of ask.querySelectorAll("[data-answer]")) {
   button.addEventListener("click", () => {
     const choice = button.dataset.answer;
-    const id = pendingId;
-    pendingId = null;
+    answer(choice !== "no", choice === "session" || choice === "project" ? choice : null);
     ask.close();
-    if (!id) return;
-    void api("/permission", {
-      id,
-      allow: choice !== "no",
-      remember: choice === "session" || choice === "project" ? choice : undefined,
-    });
   });
 
   // What a scope actually costs, spelled out before it is chosen rather than
@@ -4490,11 +5416,16 @@ for (const button of ask.querySelectorAll("[data-answer]")) {
     askScope.textContent = t(scope === "session" ? "ask.scopeSession" : "ask.scopeProject", {
       key: askRuleKey(askState.request),
     });
+    askScope.hidden = false;
+  };
+  const hide = () => {
+    askScope.textContent = "";
+    askScope.hidden = true;
   };
   button.addEventListener("mouseenter", describe);
   button.addEventListener("focus", describe);
-  button.addEventListener("mouseleave", () => { askScope.textContent = ""; });
-  button.addEventListener("blur", () => { askScope.textContent = ""; });
+  button.addEventListener("mouseleave", hide);
+  button.addEventListener("blur", hide);
 }
 
 function answer(allow, remember) {
@@ -4504,7 +5435,390 @@ function answer(allow, remember) {
   // Which way the answer went and how far it was remembered — never what was
   // being asked about, which is a command line or a path.
   track("permission_answered", { allow: allow, remember: remember || "once" });
-  void api("/permission", { id, allow, remember });
+  void api("/permission", { id, allow, remember: remember || undefined });
+}
+
+
+// --- questions -------------------------------------------------------------
+// The ask_user tool. The card lives in the transcript of its own session, is
+// drawn again after a reload (the server replays what is still waiting), and
+// ends as one line saying how it was answered.
+
+/** Every question this page has seen, by the server's interaction id. */
+const questionCards = new Map();
+
+function questionCard(event) {
+  // Only a server interaction can be answered; anything without its id is not one.
+  if (typeof event.id !== "string") return;
+  let entry = questionCards.get(event.id);
+  if (!entry) {
+    const questions = (event.request && event.request.questions) || [];
+    entry = {
+      id: event.id,
+      session: event.session,
+      request: event.request,
+      step: 0,
+      preview: 0,
+      status: "open",
+      error: "",
+      result: null,
+      picks: Object.fromEntries(questions.map((q) => [q.id, { selected: [], other: "" }])),
+    };
+    questionCards.set(event.id, entry);
+  }
+  paintQuestion(entry);
+  const box = questionBox(entry);
+  if (pane(entry.session) === panes.get(activeId)) {
+    follow();
+    // Focus moves to the card only when nothing is being typed: a question
+    // arriving mid-sentence must not swallow the next keystrokes.
+    if (document.activeElement !== input || !input.value) {
+      const first = box.querySelector(".q-opt");
+      if (first) first.focus({ preventScroll: true });
+    }
+  }
+}
+
+function questionBox(entry) {
+  const target = pane(entry.session);
+  let box = target.node.querySelector('[data-question-id="' + entry.id + '"]');
+  if (!box) {
+    box = el("section", "question-card column");
+    box.dataset.questionId = entry.id;
+    box.tabIndex = -1;
+    box.setAttribute("aria-live", "polite");
+    box.addEventListener("keydown", (e) => questionKey(entry, e));
+    target.node.appendChild(box);
+  }
+  return box;
+}
+
+function openQuestion(session) {
+  for (const entry of questionCards.values()) {
+    if (entry.session === session && entry.status === "open") return entry;
+  }
+  return undefined;
+}
+
+const questionAnswered = (entry, q) => {
+  const pick = entry.picks[q.id];
+  return Boolean(pick && (pick.selected.length || pick.other.trim()));
+};
+
+function paintQuestion(entry) {
+  const box = questionBox(entry);
+  const focused = document.activeElement && box.contains(document.activeElement)
+    ? document.activeElement.dataset.index || (document.activeElement.classList.contains("q-other-input") ? "other" : "")
+    : "";
+  box.replaceChildren();
+  const questions = entry.request.questions || [];
+  const live = entry.status === "open" || entry.status === "sending";
+  box.classList.toggle("settled", !live);
+  if (!live) {
+    for (const node of questionSettled(entry)) box.appendChild(node);
+    return;
+  }
+
+  const q = questions[entry.step] || questions[0];
+  const pick = entry.picks[q.id];
+
+  const head = el("div", "q-head");
+  if (questions.length > 1) {
+    questions.forEach((item, index) => {
+      const tab = el("button", "q-tab" + (index === entry.step ? " on" : "") + (questionAnswered(entry, item) ? " done" : ""), item.header);
+      tab.type = "button";
+      tab.onclick = () => { entry.step = index; entry.preview = 0; paintQuestion(entry); };
+      head.appendChild(tab);
+    });
+  } else {
+    head.appendChild(el("span", "q-tag", q.header));
+  }
+  if (q.multiSelect) head.appendChild(el("span", "q-hint", t("question.multi")));
+  box.appendChild(head);
+  box.appendChild(el("div", "q-text", q.question));
+
+  const layout = el("div", "q-layout");
+  const list = el("div", "q-options");
+  list.setAttribute("role", "group");
+  q.options.forEach((option, index) => {
+    const on = pick.selected.includes(option.label);
+    const row = el("button", "q-opt" + (on ? " on" : ""));
+    row.type = "button";
+    row.dataset.index = String(index);
+    row.setAttribute("aria-pressed", String(on));
+    row.appendChild(el("span", "q-key", String(index + 1)));
+    const words = el("span", "q-words");
+    words.appendChild(el("span", "q-label", option.label));
+    if (option.description) words.appendChild(el("span", "q-desc", option.description));
+    row.appendChild(words);
+    row.appendChild(el("span", "q-check", on ? "✓" : ""));
+    row.onclick = () => pickOption(entry, q, index);
+    const show = () => {
+      if (entry.preview === index) return;
+      entry.preview = index;
+      const panel = box.querySelector(".q-preview");
+      if (!panel) return;
+      panel.textContent = option.preview || "";
+      panel.hidden = !option.preview;
+    };
+    row.addEventListener("mouseenter", show);
+    row.addEventListener("focus", show);
+    list.appendChild(row);
+  });
+
+  const other = el("label", "q-opt q-other" + (pick.other.trim() ? " on" : ""));
+  other.appendChild(el("span", "q-key", String(q.options.length + 1)));
+  const field = el("input", "q-other-input");
+  field.type = "text";
+  field.maxLength = 2000;
+  field.placeholder = t("question.other");
+  field.value = pick.other;
+  field.addEventListener("input", () => {
+    pick.other = field.value;
+    // One answer to a single-choice question: typing replaces the pick.
+    if (!q.multiSelect && field.value.trim() && pick.selected.length) {
+      pick.selected = [];
+      for (const row of list.querySelectorAll(".q-opt[data-index]")) {
+        row.classList.remove("on");
+        row.setAttribute("aria-pressed", "false");
+        row.querySelector(".q-check").textContent = "";
+      }
+    }
+    other.classList.toggle("on", Boolean(field.value.trim()));
+    paintQuestionActions(entry, box);
+  });
+  field.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.isComposing) {
+      e.preventDefault();
+      advanceQuestion(entry);
+    }
+  });
+  other.appendChild(field);
+  list.appendChild(other);
+  layout.appendChild(list);
+
+  // Under the options, not beside them: side by side halved both inside a chat
+  // column, and most options carry no preview at all. It follows the row under
+  // the pointer or the keyboard, and folds away for a row that has none.
+  if (q.options.some((option) => option.preview)) {
+    const preview = el("pre", "q-preview mono");
+    const shown = (q.options[entry.preview] || q.options[0]).preview || "";
+    preview.textContent = shown;
+    preview.hidden = !shown;
+    layout.appendChild(preview);
+  }
+  box.appendChild(layout);
+
+  const actions = el("div", "q-actions");
+  box.appendChild(actions);
+  paintQuestionActions(entry, box);
+  if (entry.error) box.appendChild(el("div", "q-error", entry.error));
+
+  // Keep the keyboard where it was across the redraw a pick causes.
+  if (focused === "other") field.focus();
+  else if (focused) {
+    const again = list.querySelector('.q-opt[data-index="' + focused + '"]');
+    if (again) again.focus();
+  }
+}
+
+function paintQuestionActions(entry, box) {
+  const actions = box.querySelector(".q-actions");
+  if (!actions) return;
+  actions.replaceChildren();
+  const questions = entry.request.questions || [];
+  const last = entry.step >= questions.length - 1;
+  const sending = entry.status === "sending";
+
+  // The hint holds the left end; every button sits together at the right,
+  // Skip nearest the reader's way in and Submit last.
+  actions.appendChild(el("span", "q-keys", t("question.keys")));
+  const skip = el("button", "quiet", t("question.skip"));
+  skip.type = "button";
+  skip.disabled = sending;
+  skip.onclick = () => void sendQuestion(entry, { outcome: "dismissed" });
+  actions.appendChild(skip);
+
+  if (entry.step > 0) {
+    const back = el("button", "", t("question.back"));
+    back.type = "button";
+    back.disabled = sending;
+    back.onclick = () => { entry.step--; entry.preview = 0; paintQuestion(entry); };
+    actions.appendChild(back);
+  }
+  const primary = el("button", "approve", last ? t("question.submit") : t("question.next"));
+  primary.type = "button";
+  primary.disabled = sending || (last
+    ? !questions.every((q) => questionAnswered(entry, q))
+    : !questionAnswered(entry, questions[entry.step]));
+  primary.onclick = () => advanceQuestion(entry);
+  actions.appendChild(primary);
+}
+
+function pickOption(entry, q, index) {
+  if (entry.status !== "open") return;
+  const pick = entry.picks[q.id];
+  const label = q.options[index].label;
+  if (q.multiSelect) {
+    pick.selected = pick.selected.includes(label)
+      ? pick.selected.filter((chosen) => chosen !== label)
+      : pick.selected.concat(label);
+  } else {
+    pick.selected = pick.selected[0] === label ? [] : [label];
+    if (pick.selected.length) pick.other = "";
+  }
+  entry.preview = index;
+  paintQuestion(entry);
+  // A single choice with more questions after it moves on by itself; the last
+  // one still waits for Submit, so a slip of the finger is not sent.
+  const questions = entry.request.questions;
+  if (!q.multiSelect && pick.selected.length && entry.step < questions.length - 1) {
+    entry.step++;
+    entry.preview = 0;
+    paintQuestion(entry);
+    const first = questionBox(entry).querySelector(".q-opt");
+    if (first) first.focus();
+  }
+}
+
+function advanceQuestion(entry) {
+  if (entry.status !== "open") return;
+  const questions = entry.request.questions;
+  if (!questionAnswered(entry, questions[entry.step])) return;
+  if (entry.step < questions.length - 1) {
+    entry.step++;
+    entry.preview = 0;
+    paintQuestion(entry);
+    const first = questionBox(entry).querySelector(".q-opt");
+    if (first) first.focus();
+    return;
+  }
+  const unanswered = questions.findIndex((q) => !questionAnswered(entry, q));
+  if (unanswered >= 0) {
+    entry.step = unanswered;
+    return void paintQuestion(entry);
+  }
+  const answers = {};
+  for (const q of questions) {
+    const pick = entry.picks[q.id];
+    const other = pick.other.trim();
+    answers[q.id] = other ? { selected: pick.selected, other } : { selected: pick.selected };
+  }
+  void sendQuestion(entry, { outcome: "answered", answers });
+}
+
+function questionKey(entry, e) {
+  if (entry.status !== "open" || e.metaKey || e.ctrlKey || e.altKey) return;
+  if (e.target && e.target.tagName === "INPUT") return;
+  const questions = entry.request.questions;
+  const q = questions[entry.step];
+  if (!q) return;
+  if (/^[1-9]$/.test(e.key)) {
+    const n = Number(e.key);
+    if (n <= q.options.length) {
+      e.preventDefault();
+      return void pickOption(entry, q, n - 1);
+    }
+    if (n === q.options.length + 1) {
+      e.preventDefault();
+      const field = questionBox(entry).querySelector(".q-other-input");
+      if (field) field.focus();
+      return;
+    }
+  }
+  // Enter moves on rather than toggling the focused row; Space still toggles.
+  if (e.key === "Enter") {
+    e.preventDefault();
+    return void advanceQuestion(entry);
+  }
+  if ((e.key === "ArrowRight" && entry.step < questions.length - 1) || (e.key === "ArrowLeft" && entry.step > 0)) {
+    e.preventDefault();
+    entry.step += e.key === "ArrowRight" ? 1 : -1;
+    entry.preview = 0;
+    paintQuestion(entry);
+    const first = questionBox(entry).querySelector(".q-opt");
+    if (first) first.focus();
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    void sendQuestion(entry, { outcome: "dismissed" });
+  }
+}
+
+async function sendQuestion(entry, answer) {
+  if (entry.status !== "open") return;
+  entry.status = "sending";
+  entry.error = "";
+  paintQuestion(entry);
+  const reply = await api("/question", { id: entry.id, answer });
+  if (reply && reply.error) {
+    // Gone already means it was settled elsewhere; the result event says how.
+    // A 404 is that case with the event lost on the way (a stream that
+    // reconnected): the question is over, so the card says so instead of
+    // offering an answer nobody is waiting for.
+    if (entry.status === "sending" && reply.error === "no such pending question") {
+      entry.status = "closed";
+    } else if (entry.status === "sending") {
+      entry.status = "open";
+      entry.error = reply.error;
+    }
+    return void paintQuestion(entry);
+  }
+  // Counts and outcome only, never the questions or what was chosen.
+  track("question_answered", {
+    questions: entry.request.questions.length,
+    outcome: answer.outcome,
+    other: Boolean(answer.answers && Object.values(answer.answers).some((pick) => pick.other)),
+  });
+  if (entry.status === "sending" || entry.status === "closed") {
+    entry.status = answer.outcome;
+    entry.result = answer;
+  }
+  paintQuestion(entry);
+  if (pane(entry.session) === panes.get(activeId)) input.focus();
+}
+
+/** The engine's own account of how the question ended — authoritative over the page's. */
+function settleQuestion(event) {
+  for (const entry of questionCards.values()) {
+    if (entry.session !== event.session || !entry.request || entry.request.id !== event.id) continue;
+    if (!event.result) continue;
+    entry.status = event.result.outcome;
+    entry.result = event.result;
+    paintQuestion(entry);
+  }
+}
+
+function closeQuestion(id) {
+  const entry = questionCards.get(id);
+  if (!entry || (entry.status !== "open" && entry.status !== "sending")) return;
+  entry.status = "closed";
+  paintQuestion(entry);
+}
+
+function questionSettled(entry) {
+  const result = entry.result || {};
+  const titles = {
+    answered: "question.answered",
+    dismissed: "question.dismissed",
+    aborted: "question.aborted",
+    unavailable: "question.unavailable",
+  };
+  const nodes = [el("div", "q-settled-title", t(titles[entry.status] || "question.closed"))];
+  if (entry.status === "answered" && result.answers) {
+    for (const q of entry.request.questions) {
+      const pick = result.answers[q.id] || {};
+      const parts = (pick.selected || []).slice();
+      if (pick.other) parts.push(pick.other);
+      const line = el("div", "q-settled-line");
+      line.append(el("span", "q-settled-head", q.header), el("span", "", parts.join(", ")));
+      nodes.push(line);
+    }
+  }
+  if (entry.status === "dismissed" && result.note) {
+    nodes.push(el("div", "q-settled-line", t("question.note", { note: result.note })));
+  }
+  return nodes;
 }
 
 
@@ -4721,7 +6035,7 @@ function attachRows() {
       // draws; a plug in front of three names is three rows told apart by
       // reading.
       mark: kind === "connectors" ? entry.name : undefined,
-      label: entry.name,
+      label: entry.title || entry.name,
       note: entry.description || "",
       ref: {
         kind: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "connector",
@@ -4828,13 +6142,14 @@ function attachRows() {
       .filter((plugin) =>
         !query ||
         plugin.name.toLowerCase().includes(query) ||
+        (plugin.title || "").toLowerCase().includes(query) ||
         (plugin.description || "").toLowerCase().includes(query),
       )
       .slice(0, 4)
       .map((plugin) => ({
         type: "plugin",
         icon: "plugin",
-        label: plugin.name,
+        label: plugin.title || plugin.name,
         note: plugin.description || "",
         ref: { kind: "plugin", value: plugin.name, label: plugin.name },
       }));
@@ -5140,6 +6455,7 @@ function paintMarket() {
   const hit = (entry) =>
     !query ||
     (entry.name || "").toLowerCase().includes(query) ||
+    (entry.title || "").toLowerCase().includes(query) ||
     (entry.description || "").toLowerCase().includes(query) ||
     (entry.label || "").toLowerCase().includes(query);
   const installed = (
@@ -5256,7 +6572,9 @@ function installedRow(entry) {
   row.appendChild(isPlugin ? svgIcon("plugin") : isSkill ? svgIcon("skill") : connectorMark(entry.name, entry.name));
 
   const naming = el("div", "mk-naming");
-  const heading = el("div", "mk-name", entry.name);
+  // A plugin may carry a display title over its id; the id is still what a
+  // reference resolves by, so it is the title that is painted and nothing else.
+  const heading = el("div", "mk-name", entry.title || entry.name);
   /**
    * Where it came from, when that is not "this machine".
    *
@@ -5718,7 +7036,8 @@ function openCommands(command) {
   attachPicker.classList.add("open");
   const bar = attachPicker.getBoundingClientRect().top;
   const box = composerBox.getBoundingClientRect().top;
-  attachMenu.style.bottom = "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
   paintAttachMenu();
 }
 
@@ -5775,7 +7094,8 @@ function openMention(mention) {
   // the sentence it is going into.
   const bar = attachPicker.getBoundingClientRect().top;
   const box = composerBox.getBoundingClientRect().top;
-  attachMenu.style.bottom = "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
   paintAttachMenu();
   searchMentionFiles();
 }
@@ -5876,6 +7196,17 @@ document.getElementById("composer").addEventListener("submit", (e) => {
       closeAttachMenu();
     return;
   }
+  // A question waiting in this tab takes what is typed as its answer. People
+  // answer "none of these — I want..." in the composer, and a second turn could
+  // not start while this one waits anyway.
+  const waiting = openQuestion(activeId);
+  if (waiting && text && !staged.length) {
+    input.value = "";
+    input.style.height = "auto";
+    paintMirror();
+    void sendQuestion(waiting, { outcome: "dismissed", note: text });
+    return;
+  }
   if (!text && !staged.length && !refs.length) return;
   const ids = staged.map((file) => file.id);
   const shots = staged
@@ -5924,12 +7255,54 @@ stopBtn.addEventListener("click", () => void api("/interrupt", { session: active
 // almost every time, and a dialog in front of every new session charges the
 // common case for the rare one.
 document.getElementById("new").addEventListener("click", () => void switchTo({ action: "new" }));
+/**
+ * The sidebar as a drawer, on a phone.
+ *
+ * Open from the burger, closed from the scrim, the mark in its own corner,
+ * Escape, or by choosing anything in it: a drawer that stayed over the
+ * transcript after a session was picked hid the very thing that was picked.
+ */
+const sidebar = document.querySelector("body > aside");
+function setNavOpen(open) {
+  sidebar.classList.toggle("open", open);
+  document.body.classList.toggle("nav-open", open);
+}
+function closeNav() {
+  if (sidebar.classList.contains("open")) setNavOpen(false);
+}
 document.getElementById("burger").addEventListener("click", () =>
-  document.querySelector("aside").classList.toggle("open"));
-
-
-// --- review pane (the Codex-shaped part) ----------------------------------
-// The deliverable of a coding agent is the diff, so changed files get a pane
+  setNavOpen(!sidebar.classList.contains("open")));
+document.getElementById("nav-close").addEventListener("click", () => setNavOpen(false));
+document.getElementById("scrim").addEventListener("click", () => setNavOpen(false));
+sidebar.addEventListener("click", (e) => {
+  if (!isPhone() || e.target.closest(".more")) return;
+  if (e.target.closest(".session, .nav-item, .project")) closeNav();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && sidebar.classList.contains("open")) closeNav();
+});
+document.getElementById("review-close").addEventListener("click", () =>
+  review.classList.remove("open"));
+
+// The keyboard takes the bottom of the screen and iOS does not shrink the
+// layout to match, so the composer would sit under it. The body follows the
+// visible viewport instead, on phones only.
+if (window.visualViewport) {
+  const followKeyboard = () => {
+    if (!isPhone()) {
+      document.body.style.height = "";
+      return;
+    }
+    document.body.style.height = Math.round(window.visualViewport.height) + "px";
+    window.scrollTo(0, 0);
+  };
+  window.visualViewport.addEventListener("resize", followKeyboard);
+  window.addEventListener("resize", followKeyboard);
+}
+
+
+// --- review pane (the Codex-shaped part) ----------------------------------
+// The deliverable of a coding agent is the diff, so changed files get a pane
 // of their own rather than living inside a tool card the reader has to hunt
 // for. Activity collapses; the change stays.
 
@@ -7498,6 +8871,31 @@ function discoverNow(providerId) {
   });
 }
 
+/** A plus in a ring: adding credits. Drawn like the sidebar's other line icons. */
+function iconTopUp() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("class", "ico");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const ring = document.createElementNS(NS, "circle");
+  ring.setAttribute("cx", "8");
+  ring.setAttribute("cy", "8");
+  ring.setAttribute("r", "6.67");
+  svg.appendChild(ring);
+  for (const d of ["M8 5.33v5.34", "M5.33 8h5.34"]) {
+    const path = document.createElementNS(NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
 /** A person, drawn to match the sidebar's other 16px line icons. */
 function iconPerson() {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -7535,6 +8933,15 @@ function iconPerson() {
  * and none of those can be hosted in a local window — they keep working here
  * precisely because this does not reimplement them.
  */
+/**
+ * The teams the account is on, as the last account load found them.
+ *
+ * Kept here so the paywall can name a team by its id without a second
+ * request: the id is what the billing answer carries, and the name is what
+ * a person reads.
+ */
+let knownTeams = [];
+
 async function loadAccount() {
   const host = document.getElementById("account");
   if (!host) return;
@@ -7581,7 +8988,7 @@ async function loadAccount() {
   const name = body.name || body.email || t("account.signedIn");
   row.appendChild(avatarFor(name, body.avatar));
   row.appendChild(el("span", "who-name", name));
-  row.appendChild(svgIcon("caret", "acct-caret"));
+  row.appendChild(svgIcon("chevronsVertical", "acct-caret"));
 
   // The balance, once it can be read. Running out mid-turn is the failure this
   // prevents: a number that appears only in a paywall is a number nobody sees
@@ -7590,25 +8997,85 @@ async function loadAccount() {
   // worth reading on the way to the dashboard rather than at a glance. Asked
   // for separately so a gateway having a bad day cannot keep the row from
   // saying who is signed in, which is the thing it is actually for.
-  let balance = null;
-  // The plan, from the same answer the balance comes out of. It was already in
-  // the response and thrown away, and it is the other half of the sentence:
-  // "0 credits" reads as a problem to someone on a plan and as a fact of life
-  // to someone who never subscribed, and the two want different next steps.
-  let plan = null;
   // Whether there is a shop at all. A self-hosted gateway sells nothing, and
   // an entry that opens a paywall with no plans in it is worse than no entry.
   let sellsCredits = false;
+  // Whether the plan is live. This decides which billing action is primary in
+  // the account card: Subscribe before a plan, Top up afterwards.
+  let subscribed = false;
+  // The team this machine bills to, once the gateway has said what it has.
+  // A team the account was removed from comes back refused, and the line
+  // says so rather than showing a number it could not read.
+  let teamLine = null;
+  // Whether the headline is a chosen team's rather than the person's, and
+  // whether this person may pay for it. A team is bought and topped up on its
+  // page on the site, and only by members with billing rights.
+  let onTeam = false;
+  let teamBilling = false;
+  // The card's parts, kept apart rather than joined into sentences: whose
+  // workspace (top left), its plan and whether that plan is live (top right),
+  // and the balance under both. Joined with middle dots they read as one
+  // shouted caption with nothing in it standing out.
+  let workspaceName = null;
+  let planName = null;
+  let planStatus = null;
+  let credits = null;
+  knownTeams = Array.isArray(body.teams) ? body.teams : [];
+  const teamNameOf = (id) => {
+    const found = knownTeams.find((team) => team.id === id);
+    return found ? found.name : t("account.teamUnnamed");
+  };
   void getJson("/billing").then((state) => {
     if (!state || !state.signedIn || state.unavailable) return;
     sellsCredits = true;
-    if (state.balanceMicro !== undefined) {
-      balance = t("paywall.balance", { credits: creditsOf(state.balanceMicro) });
-    }
+    // The plan, from the same answer the balance comes out of: "0 credits"
+    // reads as a problem to someone on a plan and as a fact of life to someone
+    // who never subscribed, and the two want different next steps.
     const sub = state.subscription;
-    plan = sub && sub.plan ? t("account.plan", { plan: sub.plan, status: sub.status }) : t("account.noPlan");
+    subscribed = Boolean(sub && (sub.status === "active" || sub.status === "trialing"));
+    // A plan's name as the catalogue spells it ("Team"), not its id ("team");
+    // the id stands in only for a plan the catalogue no longer lists.
+    const planLabel = (id) => {
+      const found = (Array.isArray(state.plans) ? state.plans : []).find((one) => one && one.id === id);
+      return (found && found.label) || id;
+    };
+    workspaceName = t("account.personal");
+    planName = sub && sub.plan ? planLabel(sub.plan) : null;
+    planStatus = sub && sub.plan ? sub.status : null;
+    credits = state.balanceMicro !== undefined ? creditsOf(state.balanceMicro) : null;
+    if (state.team && state.team.refused) {
+      teamLine = t("account.teamRefused", { team: teamNameOf(state.team.id) });
+    } else if (state.team) {
+      // A chosen team is whose money the next call spends, so the card is the
+      // team's alone: its balance and its plan, which decides Subscribe or Top
+      // up. The person's own plan used to lead instead, and a member of a
+      // paying team with no plan of their own was told "No subscription" and
+      // offered one. Their own balance is not shown beside it — two balances in
+      // one card left it unclear which the next call draws on — and choosing
+      // Personal in this menu shows it.
+      const name = teamNameOf(state.team.id);
+      const teamSub = state.team.subscription;
+      teamBilling = state.team.billing === true;
+      subscribed = Boolean(teamSub && (teamSub.status === "active" || teamSub.status === "trialing"));
+      workspaceName = name;
+      planName = teamSub && teamSub.plan ? planLabel(teamSub.plan) : null;
+      planStatus = teamSub && teamSub.plan ? teamSub.status : null;
+      credits = creditsOf(state.team.balanceMicro || 0);
+      onTeam = true;
+    }
   });
 
+  // Switch whose credits the next call spends. Said out loud, because the
+  // only other sign is a different number in this menu next time it opens.
+  const billTo = (id) => {
+    closeRowMenu();
+    void api("/team", { team: id }).then((result) => {
+      if (!result || result.error) return void addNotice((result && result.error) || "could not switch", "err");
+      addNotice(id ? t("account.usingTeam", { team: teamNameOf(id) }) : t("account.usingOwn"));
+      void loadAccount();
+    });
+  };
+
   row.addEventListener("click", (e) => {
     e.stopPropagation();
     if (menuRow === row) return closeRowMenu();
@@ -7617,36 +9084,139 @@ async function loadAccount() {
     // dim lines the size of a footnote, above the things to click — which is
     // backwards: the balance is why somebody opened this menu, and the plan
     // is what decides which of the entries below is the one they want.
-    if (balance || plan) {
-      const head = el("div", "menu-head");
-      if (balance) head.appendChild(el("div", "menu-head-main", balance));
-      if (plan) head.appendChild(el("div", "menu-head-sub", plan));
-      items.push(head);
-    }
-    // Buying, before the dashboard. Somebody who opened this menu after seeing
-    // "0 credits" two lines up wants the shop, and the dashboard is a longer
-    // way to the same place. It opens the paywall this app already has rather
-    // than a browser tab: the balance refreshes itself there, and the turn
-    // that could not be paid for is one click from being sent again.
-    if (sellsCredits) {
-      items.push(
-        menuItem(t("account.getCredits"), {
-          run: () => {
+    if (workspaceName || teamLine) {
+      const head = el("div", "menu-head account-card");
+      if (workspaceName) {
+        const top = el("div", "menu-head-top");
+        top.appendChild(el("span", "menu-head-name", workspaceName));
+        // The plan as a pill whose dot says whether it is live: green for a
+        // plan that pays, amber for one whose payment failed, grey for none.
+        // The word for the status is written only when it is not the ordinary
+        // one — "Active" beside every paying plan is a word nobody reads.
+        const live = planStatus === "active" || planStatus === "trialing";
+        const pill = el("span", "plan-pill" + (live ? " ok" : planStatus === "past_due" ? " warn" : ""));
+        pill.appendChild(el("i", "plan-pill-dot"));
+        pill.appendChild(el("span", "plan-pill-name", planName || t("account.noPlan")));
+        if (planName && planStatus && planStatus !== "active") {
+          pill.appendChild(el("span", "plan-pill-status", t("account.status." + planStatus)));
+        }
+        if (planName && planStatus) pill.title = t("account.status." + planStatus);
+        top.appendChild(pill);
+        head.appendChild(top);
+      }
+      if (credits !== null) {
+        const amount = el("div", "menu-head-amount");
+        amount.appendChild(el("span", "menu-head-num", credits));
+        amount.appendChild(el("span", "menu-head-unit", t("account.creditsUnit")));
+        head.appendChild(amount);
+      }
+      // A team the account was removed from: said in place of a balance the
+      // gateway would not give.
+      if (teamLine) head.appendChild(el("div", "menu-head-sub", teamLine));
+      if (sellsCredits && onTeam) {
+        // One action, on the team page: that is where a team plan is bought
+        // and a team balance topped up. Members without billing rights get
+        // none — a button that can only fail is worse than its absence, and
+        // the paywall already tells them to ask when the credits run out.
+        if (teamBilling) {
+          const actions = el("div", "menu-billing-actions");
+          const go = el("button", "menu-billing-action primary", t(subscribed ? "paywall.topUp" : "paywall.subscribe"));
+          go.type = "button";
+          go.addEventListener("click", () => {
+            closeRowMenu();
+            if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+          });
+          actions.appendChild(go);
+          head.appendChild(actions);
+        }
+      } else if (sellsCredits) {
+        const actions = el("div", "menu-billing-actions");
+        if (!subscribed) {
+          const subscribe = el("button", "menu-billing-action primary", t("paywall.subscribe"));
+          subscribe.type = "button";
+          subscribe.addEventListener("click", () => {
             closeRowMenu();
             openPaywall(true);
-          },
-        }),
-      );
+          });
+          actions.appendChild(subscribe);
+        }
+        const topUp = el("button", "menu-billing-action" + (subscribed ? " primary" : ""), t("paywall.topUp"));
+        topUp.type = "button";
+        topUp.disabled = !subscribed;
+        if (!subscribed) topUp.title = t("paywall.needsPlan");
+        topUp.addEventListener("click", () => {
+          closeRowMenu();
+          openPaywall(true);
+        });
+        actions.appendChild(topUp);
+        head.appendChild(actions);
+      }
+      items.push(head);
     }
+    // The dashboard straight under the balance it explains, and above the
+    // workspace list, which is a choice rather than a destination.
     items.push(
       menuItem(t("account.dashboard"), {
         run: () => {
           closeRowMenu();
-          // window.open, so the desktop build hands this to the real browser
-          // rather than loading the site inside the window the agent runs in.
           if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard", "_blank", "noopener");
         },
       }),
+    );
+    // Whose credits the next call spends: Personal, or a team the account is
+    // on, the current one ticked the way the model menu ticks its choice.
+    // Only once there is a team to choose, since a list of one is no choice.
+    if (knownTeams.length) {
+      items.push(el("div", "menu-head menu-section", t("account.workspace")));
+      const choice = (label, id) => {
+        const chosen = (body.team || null) === id;
+        const item = el("button", "menu-item" + (chosen ? " on" : ""));
+        item.type = "button";
+        item.appendChild(el("span", "tick", "\u2713"));
+        item.appendChild(el("span", "menu-label", label));
+        item.addEventListener("click", () => (chosen ? closeRowMenu() : billTo(id)));
+        return item;
+      };
+      items.push(choice(t("account.personal"), null));
+      knownTeams.forEach((team) => items.push(choice(team.name, team.id)));
+    }
+    // The way to a workspace at all, for everyone signed in: Create a team for an
+    // account on none, Manage workspaces once there is one. Both are the team page
+    // on the site, in the real browser, where a team is started, its people
+    // invited and its seats bought.
+    if (body.site) {
+      items.push(
+        menuItem(t(knownTeams.length ? "account.manageTeams" : "account.createTeam"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+          },
+        }),
+      );
+    }
+    // The two pages this menu had no way to reach, under the workspace rows
+    // they belong beside: what a team costs and how to ask for the parts of it
+    // that are not self-serve, and the way to reach a person at all. Both open
+    // in the real browser like every other outbound item here — in the desktop
+    // build the window handler routes them there rather than loading the site
+    // inside the window the session lives in.
+    if (body.site) {
+      items.push(
+        menuItem(t("account.enterprise"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/enterprise", "_blank", "noopener");
+          },
+        }),
+        menuItem(t("account.contact"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/contact", "_blank", "noopener");
+          },
+        }),
+      );
+    }
+    items.push(
       menuItem(t("account.download"), {
         run: () => {
           closeRowMenu();
@@ -7667,6 +9237,11 @@ async function loadAccount() {
       }),
     );
     openRowMenu(row, row, items);
+    // As wide as the row it opens from, and placed again once it is: the
+    // first placement measured the menu at its own width.
+    rowMenu.classList.add("fit-anchor", "account-menu");
+    rowMenu.style.width = row.getBoundingClientRect().width + "px";
+    placeRowMenu(row);
   });
   host.appendChild(row);
 }
@@ -7953,6 +9528,48 @@ function openPaywall(buying) {
       return;
     }
 
+    // A team is chosen, so the balance that ran out is the team's, and the
+    // shop for it is on the site rather than here — only someone with billing
+    // permission buys for the team, and they do it on the team page. What this screen
+    // can offer is the team's number, who can fix it, and the way back to
+    // spending one's own credits.
+    if (state.team) {
+      const teamName = (knownTeams.find((team) => team.id === state.team.id) || {}).name
+        || t("account.teamUnnamed");
+      if (state.team.refused) {
+        body.appendChild(el("div", "cn-note", t("account.teamRefused", { team: teamName })));
+      } else {
+        const pooled = el("p", "pw-balance");
+        pooled.appendChild(el("strong", null, creditsOf(state.team.balanceMicro || 0)));
+        pooled.appendChild(el("span", "muted", t("paywall.teamUnit", { team: teamName })));
+        body.appendChild(pooled);
+        body.appendChild(
+          el("div", "cn-note",
+            t(state.team.billing ? "paywall.teamOwner" : "paywall.teamMember", { team: teamName })),
+        );
+      }
+      const actions = el("div", "pw-plans");
+      if (state.team.billing || state.team.refused) {
+        const page = el("button", "pw-plan", t("paywall.teamPage"));
+        page.type = "button";
+        page.onclick = () => {
+          window.open((site || "https://oharness.ai") + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+        };
+        actions.appendChild(page);
+      }
+      const own = el("button", "pw-plan", t("account.useOwn"));
+      own.type = "button";
+      own.onclick = () => {
+        void api("/team", { team: null }).then(() => {
+          void loadAccount();
+          void check();
+        });
+      };
+      actions.appendChild(own);
+      body.appendChild(actions);
+      return;
+    }
+
     const sub = state.subscription;
     const subscribed = Boolean(sub && (sub.status === "active" || sub.status === "trialing"));
     body.appendChild(
@@ -7964,7 +9581,9 @@ function openPaywall(buying) {
     // checkout for it — so it is not a row. The account page button below is
     // where it lives.
     const packs = plans.filter((plan) => plan.kind === "topup");
-    const subs = plans.filter((plan) => plan.kind === "subscription");
+    // The seat plan is a team's and is bought on the team page; on this
+    // list it would be a rung this account cannot buy for itself.
+    const subs = plans.filter((plan) => plan.kind === "subscription" && !plan.seat);
 
     if (!subs.length && !packs.length) {
       body.appendChild(el("div", "cn-note", t("paywall.notForSale")));
@@ -8122,10 +9741,14 @@ function openPaywall(buying) {
       }
       // Credits on the account mean the turn can be sent again, whether they
       // arrived a second ago or were there the whole time. Both are the same
-      // sentence to whoever is looking at this.
-      if (state.signedIn && Number(state.balanceMicro || 0) > 0) {
+      // sentence to whoever is looking at this. With a team chosen it is the
+      // team's number that decides: the person's own credits are not what
+      // the next call draws on.
+      const pooled = state.team && !state.team.refused ? state.team : undefined;
+      const spendable = pooled ? Number(pooled.balanceMicro || 0) : Number(state.balanceMicro || 0);
+      if (state.signedIn && spendable > 0) {
         closePaywall();
-        return void addNotice(t("paywall.ready", { credits: creditsOf(state.balanceMicro) }));
+        return void addNotice(t("paywall.ready", { credits: creditsOf(spendable) }));
       }
       render(state);
     });
@@ -8274,6 +9897,7 @@ async function refreshModelCount() {
 document.getElementById("nav-models").addEventListener("click", () => {
   setNav("nav-models");
   focusProvider = null;
+  panelBody.replaceChildren(panelLoading());
   void showModels();
 });
 
@@ -8356,6 +9980,11 @@ async function showSettings() {
   const panel = el("div", "panel");
   panel.appendChild(el("h2", null, t("settings.title")));
 
+  // Rows are grouped by what they are about. Each group is filled as the page
+  // is built and drawn at the end under its heading, and only when it has rows.
+  const groups = { workspace: el("div"), sync: el("div"), memory: el("div"), activity: el("div"), advanced: el("div") };
+  let target = groups.workspace;
+
   // A click on a button inside a summary toggles the disclosure as well as
   // running the button, so every action on a row gets this. Without it a
   // switch would flip and open the row underneath it, which reads as the page
@@ -8391,10 +10020,40 @@ async function showSettings() {
     if (long) body.appendChild(el("div", "mono small", value));
     if (hint) body.appendChild(el("div", "muted small", hint));
     row.appendChild(body);
-    panel.appendChild(row);
+    target.appendChild(row);
     return body;
   };
 
+  /**
+   * What a door row shows when it is opened, read the first time it is.
+   *
+   * Every row here that leads to a page is opened by somebody who wants a
+   * look before they decide to go there, and a row whose whole body was a
+   * sentence and a button made them go there to find out whether it was worth
+   * going. So each one carries the shape of its page: the figures, the first
+   * few rules, the last few decisions.
+   *
+   * On first open, not on paint. Two of these walk every session on disk, and
+   * the rows are on screen whether or not anybody cares — which is why the
+   * totals were left off them in the first place.
+   */
+  const preview = (body, load) => {
+    const box = el("div");
+    body.appendChild(box);
+    const row = body.parentNode;
+    let loaded = false;
+    row.addEventListener("toggle", () => {
+      if (!row.open || loaded) return;
+      loaded = true;
+      box.appendChild(el("div", "muted small", t("preview.loading")));
+      void load(box).then(
+        () => {},
+        (err) => { box.replaceChildren(el("div", "muted small", String(err && err.message || err))); },
+      );
+    });
+    return box;
+  };
+
   // A labelled block inside an opened row: what the label names, printed as
   // typed. Used for the permission rules and the settings files, both of
   // which are lists someone reads once and closes again.
@@ -8436,64 +10095,140 @@ async function showSettings() {
   change.type = "button";
   change.addEventListener("click", openProjectPicker);
   field(t("settings.cwd"), settings.cwd || "—", t("settings.cwdHint"), change);
-  writesField(settings);
+  permissionsField(settings);
 
   // A door, not a report: the numbers live on a page of their own, and the row
   // here carries no total of its own because working one out means walking
   // every session on disk — a cost this page would then pay on every paint,
   // for a figure most visits are not here for.
+  target = groups.activity;
   const openUsage = el("button", "ghost", t("usage.open"));
   openUsage.type = "button";
   openUsage.addEventListener("click", () => {
     setNav("usage");
     void showUsage();
   });
-  field(t("usage.title"), t("usage.value"), t("usage.hint"), openUsage);
+  const usageRow = field(t("usage.title"), t("usage.value"), t("usage.hint"), openUsage);
+  preview(usageRow, async (box) => {
+    const body = await getJson("/usage?range=30d");
+    box.replaceChildren();
+    if (body.error) return void box.appendChild(el("div", "muted small", body.error));
+    const totals = body.totals || {};
+    const sent = (totals.input || 0) + (totals.cacheRead || 0) + (totals.cacheWrite || 0);
+    const moved = sent + (totals.output || 0);
+    const facts = [
+      "$" + (totals.costUsd || 0).toFixed(2),
+      t("usage.tokens", { n: formatTokens(moved) }),
+    ];
+    if (totals.cacheRead) facts.push(t("usage.cached", { pct: Math.round((totals.cacheRead / sent) * 100) }));
+    facts.push(totals.sessions === 1 ? t("usage.overSession") : t("usage.overSessions", { n: totals.sessions || 0 }));
+    // The default window, said out loud: the figures on the page move with
+    // its picker, and a preview that named no window would be read as all time.
+    box.appendChild(el("div", "mono small", facts.join("   ·   ")));
+    box.appendChild(el("div", "muted small", t("usage.range.30d")));
+  });
 
   /*
    * Memory sits here rather than in the sidebar, and only when a plugin has
    * actually registered it: a row for a page that does not exist would be a
    * dead end, and the memory plugin can be switched off.
    */
+  target = groups.memory;
   for (const page of pluginPages.values()) {
     const open = el("button", "ghost", t("settings.memoryOpen"));
     open.type = "button";
     open.addEventListener("click", () => { setNav("nav-plugin-" + page.id); void showMemoryPage(page.id); });
-    field(t("settings.memory"), "", t("settings.memoryHint"), open);
+    const row = field(t("settings.memory"), "", t("settings.memoryHint"), open);
+    const id = page.id;
+    preview(row, async (box) => {
+      const result = await getJson("/plugin-page?id=" + encodeURIComponent(id)
+        + "&session=" + encodeURIComponent(activeId || ""));
+      box.replaceChildren();
+      if (result.error && !result.entries) {
+        return void box.appendChild(el("div", "muted small", result.error));
+      }
+      // The same state the page opens with, worked out the same way — one
+      // sentence rather than the card, because the card is the page.
+      const state = !result.signedIn ? "local"
+        : result.accountChanged ? "account"
+        : !result.enabled ? "off"
+        : result.syncing ? "syncing"
+        : (result.errors && result.errors.length) || result.error ? "error" : "on";
+      box.appendChild(el("div", "small", t("memory.state." + state)));
+      const entries = result.entries || [];
+      const project = entries.filter((entry) => entry.scope !== "user").length;
+      box.appendChild(el("div", "muted small", result.userAvailable
+        ? t("memory.countsScoped", { project, user: entries.length - project })
+        : t("memory.counts", { count: entries.length })));
+    });
   }
 
-  rulesField(settings.permissions || {});
+  target = groups.activity;
   auditField(settings.audit || { on: true, source: "user" });
+  target = groups.advanced;
   filesField(settings.settingsPaths);
 
   /**
-   * What runs, what stops to ask, and what is refused — one row, not four.
+   * What runs, what stops to ask, what is refused, and where writes may land
+   * — one row, and a page behind it.
    *
-   * Each kind used to get a card of its own, so a project with a handful of
-   * allow rules pushed every setting under it off the screen for a list that
-   * is read after something surprising happened and not before. The counts
-   * answer "is anything set here?" from the closed line; the rules themselves
-   * are one click down.
+   * These were two rows called Rules and Writes, which is two names for one
+   * subject: both are the permission policy, both are read after something
+   * surprising happened, and neither is a thing anybody sets from here. The
+   * row answers "is anything set?" from its closed line; the lists, and the
+   * one editor among them, are on the page.
    */
-  function rulesField(rules) {
-    const kinds = ["allow", "ask", "deny"];
-    const summary = [];
-    for (const kind of kinds) {
+  function permissionsField(settings) {
+    const workspace = settings.workspace || {};
+    const rules = settings.permissions || {};
+    const roots = (workspace.writableRoots || []).length;
+
+    const summary = [workspace.mode || "—"];
+    if (workspace.mode === "workspace-write") summary.push(roots + " roots");
+    for (const kind of ["allow", "ask", "deny"]) {
       if (rules[kind] && rules[kind].length) summary.push(kind + " " + rules[kind].length);
     }
-    const session = rules.sessionAllow || [];
-    if (session.length) summary.push(t("settings.sessionApproved") + " " + session.length);
-    if (!summary.length) return;
+    const session = (rules.sessionAllow || []).length;
+    if (session) summary.push(t("settings.sessionApproved") + " " + session);
 
-    const body = field(t("settings.rules"), summary.join("   ·   "), t("settings.rulesHint"));
-    for (const kind of kinds) {
-      if (rules[kind] && rules[kind].length) body.appendChild(listing(kind, rules[kind].join("\n")));
-    }
-    if (session.length) {
+    const open = el("button", "ghost", t("perms.open"));
+    open.type = "button";
+    open.addEventListener("click", () => { setNav("permissions"); void showPermissions(); });
+    const body = field(t("perms.title"), summary.join("   ·   "), t("perms.hint"), open);
+
+    /*
+     * No read behind this one: everything here came with the settings the row
+     * was built from, so it is all free and is shown at once.
+     *
+     * The mode and the roots lead, because they are the part that is always
+     * there. A project with no rules of its own is the common case, and this
+     * row answered it with one sentence saying nothing was set — while the
+     * page behind it had a mode and fifty-two directories to show.
+     */
+    const shown = 4;
+    body.appendChild(el("div", "mono small", [
+      workspace.mode || "—",
+      workspace.mode === "workspace-write" ? t("perms.rootsCount", { n: roots }) : "",
+    ].filter(Boolean).join("   ·   ")));
+    const chosen = settings.configuredRoots || [];
+    const rootList = chosen.length ? chosen : (workspace.writableRoots || []);
+    if (workspace.mode === "workspace-write" && rootList.length) {
       body.appendChild(listing(
-        t("settings.sessionApproved") + " — " + t("settings.notPersisted"),
-        session.join("\n")));
+        chosen.length ? t("perms.mine") : t("perms.writes"),
+        rootList.slice(0, shown).join("\n")));
     }
+
+    let hidden = 0;
+    let ruled = false;
+    for (const kind of ["allow", "ask", "deny"]) {
+      const list = rules[kind] || [];
+      if (!list.length) continue;
+      ruled = true;
+      body.appendChild(listing(kind + "  ·  " + list.length, list.slice(0, shown).join("\n")));
+      hidden += Math.max(0, list.length - shown);
+    }
+    if (!ruled) body.appendChild(el("div", "muted small", t("perms.noRules")));
+    if (hidden) body.appendChild(el("div", "muted small", t("perms.more", { n: hidden })));
   }
 
   /**
@@ -8513,10 +10248,30 @@ async function showSettings() {
   function auditField(audit) {
     const mine = audit.source !== "project";
 
+    /*
+     * A door beside the switch.
+     *
+     * The row answers the question it is passed on the way to something else
+     * — is this on, and what did the session I am in just get allowed to do —
+     * and the page behind it answers the one the trail is actually opened
+     * for: when was this ever allowed, which is a question a single session
+     * rarely holds the answer to. Leaving that to the export meant answering
+     * it by reading JSON lines by hand.
+     */
+    const open = el("button", "ghost", t("settings.auditOpen"));
+    open.type = "button";
+    open.addEventListener("click", () => {
+      auditScope = "session";
+      auditFilter = "all";
+      setNav("audit");
+      void showAudit();
+    });
+
     const body = field(
       t("settings.audit"),
       t(audit.on ? "settings.auditOnValue" : "settings.auditOffValue"),
       mine ? t(audit.on ? "settings.auditOn" : "settings.auditOff") : t("settings.auditProject"),
+      open,
       toggle(audit.on, t("settings.audit"), (next) => {
         void api("/audit", { enabled: next }).then((result) => {
           if (result && result.error) addNotice(result.error, "err");
@@ -8532,8 +10287,40 @@ async function showSettings() {
       body.appendChild(el("div", "muted small", t("settings.auditFile", { path: audit.file })));
     }
 
-    const details = el("div");
-    body.appendChild(details);
+    preview(body, async (box) => {
+      const result = await getJson("/audit");
+      box.replaceChildren();
+      if (result && result.error) return void box.appendChild(panelError(result.error));
+      const rows = auditRows(result.entries);
+      if (!rows.length) {
+        box.appendChild(el("div", "muted small", t("settings.auditEmpty")));
+        /*
+         * An empty session is not an empty machine, and the row said only the
+         * first of those — which reads as a trail that records nothing.
+         *
+         * The wider read happens only here, in the one case where the cheap
+         * one came back with nothing: it is a file read per session, and
+         * paying it to decorate a row that already had something to show
+         * would be the cost this preview is lazy to avoid.
+         */
+        const everywhere = await getJson("/audit?session=all");
+        if (everywhere.error) return;
+        const all = auditRows(everywhere.entries);
+        if (all.length) {
+          box.appendChild(el("div", "muted small", t("audit.elsewhere", { n: all.length })));
+        }
+        return;
+      }
+      // The most recent handful, and a count of what is behind them. The row
+      // used to print two hundred lines into a box inside a disclosure inside
+      // a scrolling page, and stop dead at the two hundredth with a number
+      // and nowhere to go; the rest of them are what the page is for.
+      box.appendChild(auditList(rows.slice(0, AUDIT_PREVIEW), false));
+      if (rows.length > AUDIT_PREVIEW) {
+        box.appendChild(el("div", "muted small",
+          t("settings.auditMore", { n: rows.length - AUDIT_PREVIEW })));
+      }
+    });
 
     /*
      * Taking the record away with you.
@@ -8548,76 +10335,7 @@ async function showSettings() {
      * "send me the audit" means, and building it out of one export per session
      * is not a thing anybody should be asked to do by hand.
      */
-    const exports = el("div", "row-actions");
-    for (const scope of ["session", "all"]) {
-      const link = el("a", "ghost", t("settings.auditExport" + (scope === "all" ? "All" : "")));
-      link.href = q("/audit/export?session=" + encodeURIComponent(scope === "all" ? "all" : activeId));
-      // The server names it; this only tells the browser to save rather than
-      // to navigate, which it would otherwise do with a JSON content type.
-      link.setAttribute("download", "");
-      exports.appendChild(link);
-    }
-    body.appendChild(exports);
-
-    // Read on first open, not on every settings paint: the trail is a file
-    // read per session and the row is on screen whether or not anyone cares.
-    const row = body.parentNode;
-    let loaded = false;
-    row.addEventListener("toggle", () => {
-      if (!row.open || loaded) return;
-      loaded = true;
-      void getJson("/audit").then((result) => renderTrail(details, result));
-    });
-  }
-
-  /**
-   * The trail, newest first, one line per question.
-   *
-   * A decision and the answer that closed it are one row, not two: they are
-   * one event as far as anybody reading this is concerned, and the pair is
-   * exactly what the old single-line format could not express — it recorded
-   * that something was asked and never what was answered.
-   */
-  function renderTrail(target, body) {
-    target.replaceChildren();
-    if (body && body.error) return void target.appendChild(panelError(body.error));
-
-    const entries = (body && body.entries) || [];
-    if (!entries.length) {
-      return void target.appendChild(el("div", "muted small", t("settings.auditEmpty")));
-    }
-
-    const answers = new Map();
-    for (const entry of entries) if (entry.kind === "answer") answers.set(entry.id, entry);
-
-    const list = el("div", "mono small scroll-box");
-
-    const decisions = entries.filter((entry) => entry.kind === "decision").reverse();
-    for (const entry of decisions.slice(0, 200)) {
-      const line = el("div", "trail-line");
-      const when = new Date(entry.at).toLocaleTimeString();
-      const answer = answers.get(entry.id);
-      // The answer replaces the behaviour it answered rather than following
-      // it: "ask → allowed" is one fact, and printing both reads as two.
-      const outcome = answer ? answer.outcome : entry.behavior;
-      const mark = el("span", outcome === "denied" || outcome === "unavailable" ? "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 (answer && answer.remembered) notes.push("remembered " + answer.remembered);
-      // An ask with no answer: the process stopped while the question was up.
-      if (entry.behavior === "ask" && !answer) notes.push("unanswered");
-      if (notes.length) line.appendChild(el("span", "muted", "  " + notes.join(" · ")));
-      list.appendChild(line);
-    }
-    target.appendChild(list);
-    if (decisions.length > 200) {
-      target.appendChild(el("div", "muted small",
-        t("settings.auditMore", { n: decisions.length - 200 })));
-    }
+    body.appendChild(auditExports(activeId));
   }
 
   /**
@@ -8651,72 +10369,9 @@ async function showSettings() {
    * rebuilt at launch, so a control over it would be a control that silently
    * reverts.
    */
-  function writesField(settings) {
-    const workspace = settings.workspace || {};
-    if (workspace.mode !== "workspace-write") {
-      return void field(t("settings.writes"), workspace.mode || "—");
-    }
-
-    const all = workspace.writableRoots || [];
-    const chosen = settings.configuredRoots || [];
-    const derived = all.filter((root) => chosen.indexOf(root) < 0);
-
-    const body = field(
-      t("settings.writes"),
-      workspace.mode + "   ·   " + all.length + " roots",
-      all.length + " writable roots — a policy gate on tool arguments, not a sandbox: a shell command can still reach any path you can.",
-    );
-
-    // Yours, and editable. A textarea rather than a list with buttons because
-    // the thing being edited is a handful of paths, and typing one is what
-    // someone came here to do.
-    const mine = el("div", "setting-list");
-    mine.appendChild(el("div", "muted small", "Roots you configured"));
-    body.appendChild(mine);
-
-    const box = el("textarea", "boxed");
-    box.value = chosen.join("\n");
-    box.rows = Math.max(2, chosen.length + 1);
-    box.spellcheck = false;
-    box.style.width = "100%";
-    box.placeholder = "One absolute path per line";
-    mine.appendChild(box);
-
-    const save = el("button", "ghost", "Save roots");
-    save.type = "button";
-    save.addEventListener("click", () => {
-      save.disabled = true;
-      const roots = box.value.split("\n").map((line) => line.trim()).filter(Boolean);
-      void api("/settings/writable-roots", { roots }).then((result) => {
-        save.disabled = false;
-        if (result && result.error) return void addNotice(result.error, "err");
-        // Said out loud, because the row above will go on showing the old
-        // list until then and someone would reasonably read that as a failure.
-        addNotice("saved — takes effect the next time the app starts");
-      });
-    });
-    mine.appendChild(save);
-
-    if (derived.length) {
-      const theirs = el("div", "setting-list");
-      // "more" only reads right when there were some above it. With nothing
-      // configured — the common case — every one of them is derived.
-      theirs.appendChild(el("div", "muted small",
-        (chosen.length ? derived.length + " more come" : "All " + derived.length + " come") +
-          " from installed plugins and are rebuilt at launch:"));
-      // Scrolls in its own box rather than growing the page. Expanded, forty
-      // cache paths is the same wall of text this row was collapsed to escape
-      // — the click should reveal the list, not restore the problem.
-      const list = el("div", "mono small scroll-box");
-      list.style.opacity = ".7";
-      list.textContent = derived.join("\n");
-      theirs.appendChild(list);
-      body.appendChild(theirs);
-    }
-  }
-
   // Sync, above analytics, because it is the one on this page that decides
   // where the work goes rather than whether a counter is incremented.
+  target = groups.sync;
   const sync = await getJson("/sync");
   if (sync && !sync.error) {
     // Three states, not two. Off and "on but signed out" both send nothing,
@@ -8778,6 +10433,7 @@ async function showSettings() {
   // Last, and only when this build could actually send something. A switch
   // that does nothing is worse than no switch: it invites someone to believe
   // they turned something off that was never on.
+  target = groups.activity;
   const analytics = await getJson("/analytics");
   if (analytics && !analytics.error && analytics.available) {
     field(
@@ -8789,6 +10445,17 @@ async function showSettings() {
       }),
     );
   }
+  const sections = [
+    ["settings.section.workspace", [groups.workspace]],
+    ["settings.section.sync", [groups.sync, groups.memory]],
+    ["settings.section.activity", [groups.activity]],
+    ["settings.section.advanced", [groups.advanced]],
+  ];
+  for (const [title, parts] of sections) {
+    if (!parts.some((part) => part.childNodes.length)) continue;
+    panel.appendChild(el("div", "section-title", t(title)));
+    for (const part of parts) panel.appendChild(part);
+  }
   panelBody.appendChild(panel);
 }
 
@@ -8805,8 +10472,672 @@ async function showSettings() {
  * counted twice, nothing survives a session that was deleted, and a run
  * started from the terminal is in the totals the same as one started here.
  */
+/**
+ * The permission policy, on a page.
+ *
+ * Everything the Settings row summarises: the mode, the rules in each of the
+ * three kinds, what was approved for this session only, and the writable
+ * roots — the one editable thing here, which is why the page exists rather
+ * than a taller row. A textarea inside a disclosure inside a scrolling page
+ * was an editor nobody could see the whole of while typing in it.
+ */
+async function showPermissions() {
+  const settings = await getJson("/settings");
+  if (shownPanel !== "permissions") return;
+  panelBody.replaceChildren();
+  if (settings.error) return void panelBody.appendChild(panelError(settings.error));
+
+  const workspace = settings.workspace || {};
+  const rules = settings.permissions || {};
+
+  const panel = el("div", "panel");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("perms.title")));
+  const back = el("button", "ghost", t("usage.back"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("nav-settings");
+    void showSettings();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+  panelBody.appendChild(panel);
+
+  // A labelled block: what the label names, printed as typed.
+  const listing = (label, text, faint) => {
+    const group = el("div", "setting-list");
+    group.appendChild(el("div", "muted small", label));
+    const list = el("div", "mono small" + (faint ? " scroll-box" : ""));
+    if (faint) list.style.opacity = ".7";
+    list.textContent = text;
+    group.appendChild(list);
+    return group;
+  };
+
+  const card = (title) => {
+    panel.appendChild(el("h3", "section-title", title));
+    const box = el("section", "row-card perms-card");
+    panel.appendChild(box);
+    return box;
+  };
+
+  // The mode first, because it decides what the rules below are exceptions to.
+  const modeCard = card(t("perms.mode"));
+  modeCard.appendChild(el("div", "mono", workspace.mode || "—"));
+
+  const rulesCard = card(t("settings.rules"));
+  rulesCard.appendChild(el("div", "muted small", t("settings.rulesHint")));
+  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")));
+  }
+  const session = rules.sessionAllow || [];
+  if (session.length) {
+    any = true;
+    rulesCard.appendChild(listing(
+      t("settings.sessionApproved") + " — " + t("settings.notPersisted"),
+      session.join("\n")));
+  }
+  if (!any) rulesCard.appendChild(el("div", "muted small", 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
+  // nothing until a setting somewhere else changes.
+  if (workspace.mode === "workspace-write") {
+    const all = workspace.writableRoots || [];
+    const chosen = settings.configuredRoots || [];
+    const derived = all.filter((root) => chosen.indexOf(root) < 0);
+
+    const writes = card(t("perms.writes"));
+    writes.appendChild(el("div", "muted small", t("perms.writesHint", { n: all.length })));
+
+    // Yours, and editable. A textarea rather than a list with buttons because
+    // the thing being edited is a handful of paths, and typing one is what
+    // someone came here to do.
+    const mine = el("div", "setting-list");
+    mine.appendChild(el("div", "muted small", t("perms.mine")));
+    writes.appendChild(mine);
+
+    const box = el("textarea", "boxed");
+    box.value = chosen.join("\n");
+    box.rows = Math.max(3, chosen.length + 1);
+    box.spellcheck = false;
+    box.style.width = "100%";
+    box.placeholder = t("perms.placeholder");
+    mine.appendChild(box);
+
+    const save = el("button", "ghost", t("perms.save"));
+    save.type = "button";
+    save.addEventListener("click", () => {
+      save.disabled = true;
+      const roots = box.value.split("\n").map((line) => line.trim()).filter(Boolean);
+      void api("/settings/writable-roots", { roots }).then((result) => {
+        save.disabled = false;
+        if (result && result.error) return void addNotice(result.error, "err");
+        // Said out loud, because the list above will go on showing the old
+        // one until then and someone would reasonably read that as a failure.
+        addNotice(t("perms.saved"));
+      });
+    });
+    mine.appendChild(save);
+
+    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));
+    }
+  }
+}
+
+/*
+ * ---- the permission trail -------------------------------------------------
+ *
+ * Two readers of one record. The Settings row shows the last few decisions of
+ * the session someone is in; the page shows every session on this machine,
+ * filtered by how each decision ended. They share the pairing and the line
+ * below rather than each having a copy — the pairing is the part that was
+ * wrong before it existed, and one of them would have kept being wrong.
+ */
+
+/** How much of the trail the Settings row shows before it points at the page. */
+const AUDIT_PREVIEW = 12;
+
+/** How many lines the page draws at once, and adds each time it is asked for more. */
+const AUDIT_PAGE = 200;
+
+/**
+ * Decisions newest first, each carrying the answer that closed it.
+ *
+ * A decision and its answer are one event to anybody reading this, and were
+ * two lines on disk because that is when each was known. Keyed by session as
+ * well as id: ids are unique within the file they were written in, and the
+ * page reads every file at once.
+ */
+function auditRows(entries) {
+  const list = entries || [];
+  const key = (entry) => (entry.session || "") + "/" + entry.id;
+  const answers = new Map();
+  for (const entry of list) if (entry.kind === "answer") answers.set(key(entry), entry);
+  return list
+    .filter((entry) => entry.kind === "decision")
+    .map((entry) => ({ entry, answer: answers.get(key(entry)) || null }))
+    .sort((a, b) => b.entry.at - a.entry.at);
+}
+
+/**
+ * How a decision ended.
+ *
+ * The answer replaces the behaviour it answered rather than following it:
+ * "ask → allowed" is one fact, and printing both reads as two.
+ */
+function auditOutcome(row) {
+  return row.answer ? row.answer.outcome : row.entry.behavior;
+}
+
+/** Which of the page's filters a row belongs to. */
+function auditKind(row) {
+  if (row.entry.behavior === "ask" && !row.answer) return "unanswered";
+  const outcome = auditOutcome(row);
+  if (outcome === "denied" || outcome === "deny" || outcome === "unavailable") return "denied";
+  return "allowed";
+}
+
+/**
+ * The trail as lines, newest first.
+ *
+ * withDate, because the two readers ask over different spans: within one
+ * session the time of day places an entry, and across every session on disk
+ * it does not place anything at all.
+ */
+function auditList(rows, withDate) {
+  const list = el("div", "mono small audit-list");
+  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);
+    // 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(" · ")));
+    list.appendChild(line);
+  }
+  return list;
+}
+
+/**
+ * The two downloads, for whichever scope is on screen.
+ *
+ * Plain links rather than buttons that fetch and build a blob: the server
+ * already names the file and hands it over, and a download the page assembles
+ * in memory is one the browser cannot resume, cannot stream, and shows in no
+ * download list.
+ */
+function auditExports(session) {
+  const exports = el("div", "row-actions");
+  for (const scope of ["session", "all"]) {
+    const link = el("a", "ghost", t("settings.auditExport" + (scope === "all" ? "All" : "")));
+    link.href = q("/audit/export?session=" + encodeURIComponent(scope === "all" ? "all" : session));
+    // The server names it; this only tells the browser to save rather than
+    // to navigate, which it would otherwise do with a JSON content type.
+    link.setAttribute("download", "");
+    exports.appendChild(link);
+  }
+  return exports;
+}
+
+/** Which slice of the trail the page is showing, for this page load. */
+let auditScope = "session";
+let auditFilter = "all";
+
+/**
+ * Every permission decision, one page of them at a time.
+ *
+ * Its own page for the same reason usage has one: what it holds outgrew the
+ * row it was reached from. The scope is the part that could not live there at
+ * all — the row reads the session it is in, and "when did I ever allow this"
+ * is a question about the others.
+ */
+async function showAudit() {
+  const scope = auditScope;
+  const body = await getJson(
+    "/audit" + (scope === "all" ? "?session=all" : activeId ? "?session=" + encodeURIComponent(activeId) : ""),
+  );
+  if (shownPanel !== "audit") return;
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+
+  const panel = el("div", "panel audit");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("settings.audit")));
+  // Back to where this was opened from: the sidebar row it lit is already
+  // showing as active, so without this the only exit is a click that looks
+  // like a no-op.
+  const back = el("button", "ghost", t("usage.back"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("nav-settings");
+    void showSettings();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+
+  /*
+   * Two segmented controls, and they are not the same kind of control.
+   *
+   * The scope reloads, because it is a different read; the filter does not,
+   * because everything it can show is already here. Keeping them side by side
+   * anyway: which decisions and whose are one question asked in two halves,
+   * and splitting them across the page would hide that changing one changes
+   * what the other is choosing from.
+   */
+  const controls = el("div", "audit-controls");
+  // chosen is read at click time, not closed over: the filter changes this
+  // control in place, and a guard against the value it was built with would
+  // refuse to go back to the one it opened on.
+  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);
+      button.type = "button";
+      button.addEventListener("click", () => {
+        if (option.id === chosen()) return;
+        onPick(option.id);
+      });
+      box.appendChild(button);
+    }
+    return box;
+  };
+  controls.appendChild(seg(
+    [
+      { id: "session", label: t("audit.scope.session") },
+      { id: "all", label: t("audit.scope.all") },
+    ],
+    () => scope,
+    (id) => { auditScope = id; void showAudit(); },
+  ));
+  const filters = ["all", "allowed", "denied", "unanswered"];
+  const filterSeg = seg(
+    filters.map((id) => ({ id, label: t("audit.filter." + id) })),
+    () => auditFilter,
+    (id) => {
+      auditFilter = id;
+      // Back to the top of the list: a filter changed under a list someone
+      // had paged five hundred lines into is a different list.
+      shown = AUDIT_PAGE;
+      paint();
+    },
+  );
+  controls.appendChild(filterSeg);
+  panel.appendChild(controls);
+
+  const rows = auditRows(body.entries);
+  const count = el("div", "muted small");
+  panel.appendChild(count);
+  const listBox = el("div");
+  panel.appendChild(listBox);
+  const foot = el("div");
+  panel.appendChild(foot);
+
+  // Said out loud rather than left to a total that quietly stops short: a
+  // machine with more sessions than one read returns is one where "nothing
+  // was ever denied" would otherwise be a claim this page cannot make.
+  if (body.more) panel.appendChild(el("div", "muted small", t("audit.capped")));
+  panel.appendChild(auditExports(scope === "all" ? "all" : activeId));
+  panelBody.appendChild(panel);
+
+  // How far down the list has been asked to go. Reset by a repaint rather
+  // than kept across one: a filter that changed under a list scrolled to its
+  // five-hundredth line is a different list.
+  let shown = AUDIT_PAGE;
+  paint();
+
+  function paint() {
+    const picked = auditFilter === "all" ? rows : rows.filter((row) => auditKind(row) === auditFilter);
+    // Only the filter is repainted in place; changing the scope is a reload,
+    // and the control comes back with it.
+    filterSeg.querySelectorAll(".seg-item").forEach((button, index) => {
+      button.classList.toggle("on", filters[index] === auditFilter);
+    });
+
+    count.textContent = [
+      picked.length === 1 ? t("audit.countOne") : t("audit.count", { n: picked.length }),
+      scope === "all" && body.sessions ? t("audit.acrossSessions", { n: body.sessions }) : "",
+    ].filter(Boolean).join("   ·   ");
+
+    listBox.replaceChildren();
+    foot.replaceChildren();
+    if (!rows.length) {
+      return void listBox.appendChild(el("div", "muted small",
+        t(scope === "all" ? "audit.noneAll" : "settings.auditEmpty")));
+    }
+    if (!picked.length) {
+      return void listBox.appendChild(el("div", "muted small", t("audit.noMatch")));
+    }
+    listBox.appendChild(auditList(picked.slice(0, shown), scope === "all"));
+    if (picked.length > shown) {
+      const more = el("button", "ghost", t("audit.showMore"));
+      more.type = "button";
+      more.addEventListener("click", () => {
+        shown += AUDIT_PAGE;
+        paint();
+      });
+      foot.appendChild(more);
+    }
+  }
+}
+
 /** The window the usage page is asking about, for this page load. */
 let usageRange = "30d";
+/**
+ * The first and last day of a picked window, once one has been picked.
+ *
+ * Kept as UTC day keys rather than as a pair of timestamps: they are what the
+ * server is asked for, what it echoes back, and what the calendar below reads
+ * — and a window that means one thing on the wire and another on screen is
+ * the single failure a date picker cannot recover from.
+ */
+let usageFrom = null;
+let usageTo = null;
+
+const DAY_MS = 86400000;
+/**
+ * The longest window that may be picked, matching the site's own picker.
+ *
+ * A year of daily columns is already hairs wide; past it the walk is every
+ * session on disk for a curve that says nothing the presets do not.
+ */
+const MAX_CUSTOM_DAYS = 366;
+const dayKey = (ms) => new Date(ms).toISOString().slice(0, 10);
+const dayMs = (key) => Date.parse(key + "T00:00:00Z");
+/** The first UTC day of the month holding ms. */
+const monthOf = (ms) => Date.UTC(new Date(ms).getUTCFullYear(), new Date(ms).getUTCMonth(), 1);
+const shiftMonth = (first, by) =>
+  Date.UTC(new Date(first).getUTCFullYear(), new Date(first).getUTCMonth() + by, 1);
+
+/**
+ * A range of UTC days, picked on a calendar of our own.
+ *
+ * The same component the site's usage page uses, down to the class names —
+ * not the browser's date field, which looks different in every browser,
+ * cannot show a range, and draws an outlined box that belongs to no design
+ * here. Click a first day, then a last one; while the second is being chosen
+ * the range follows the pointer. Days after max cannot be picked, nor a
+ * second day more than maxDays from the first.
+ *
+ * Nothing is applied until Apply: closing the panel, clicking away from it or
+ * pressing Escape leaves the page showing the window it was already showing,
+ * because the days inside it are a draft until then.
+ */
+function dateRangePicker(options) {
+  const root = el("span", "drp");
+  const maxMs = dayMs(options.max);
+  const maxDays = options.maxDays;
+
+  let start = dayMs(options.from);
+  let end = dayMs(options.to);
+  let hover = null;
+  let month = monthOf(dayMs(options.to));
+  let open = false;
+  let pop = null;
+
+  const reset = () => {
+    start = dayMs(options.from);
+    end = dayMs(options.to);
+    hover = null;
+    month = monthOf(dayMs(options.to));
+  };
+
+  const monthName = new Intl.DateTimeFormat(LOCALE, { month: "long", year: "numeric", timeZone: "UTC" });
+  const short = new Intl.DateTimeFormat(LOCALE, { month: "short", day: "numeric", timeZone: "UTC" });
+  const shortYear = new Intl.DateTimeFormat(LOCALE, {
+    month: "short", day: "numeric", year: "numeric", timeZone: "UTC",
+  });
+  // Sunday-first where the reader's language puts it there, Monday-first
+  // everywhere else.
+  const firstWeekday = /^(en|ja|ko)$/.test(LOCALE) ? 0 : 1;
+  const weekdayName = new Intl.DateTimeFormat(LOCALE, { weekday: "narrow", timeZone: "UTC" });
+  // 2023-01-01 was a Sunday.
+  const weekdays = Array.from({ length: 7 }, (_, index) =>
+    weekdayName.format(Date.UTC(2023, 0, 1 + ((firstWeekday + index) % 7))));
+
+  const span = (a, b) => {
+    const n = Math.round((b - a) / DAY_MS) + 1;
+    return n === 1 ? t("usage.range.oneDay") : t("usage.range.days", { n });
+  };
+  const rangeText = (a, b) =>
+    a === b ? shortYear.format(a)
+      : new Date(a).getUTCFullYear() === new Date(b).getUTCFullYear()
+        ? short.format(a) + " – " + shortYear.format(b)
+        : shortYear.format(a) + " – " + shortYear.format(b);
+
+  const trigger = el("button", "drp-trigger");
+  trigger.type = "button";
+  trigger.setAttribute("aria-haspopup", "dialog");
+  const paintTrigger = () => {
+    trigger.replaceChildren(svgIcon("calendar"));
+    trigger.appendChild(document.createTextNode(options.active
+      ? rangeText(dayMs(options.from), dayMs(options.to))
+      : t("usage.range.custom")));
+    trigger.setAttribute("aria-pressed", options.active ? "true" : "false");
+    trigger.setAttribute("aria-expanded", open ? "true" : "false");
+    trigger.classList.toggle("on", Boolean(options.active));
+  };
+  root.appendChild(trigger);
+
+  /*
+   * The cells, kept so a hover can repaint the range without rebuilding them.
+   *
+   * The structure is built once per month shown; choosing and hovering only
+   * toggle classes on what is already there. Rebuilding the grid on every
+   * mouseenter replaced the button under the pointer, which fired mouseenter
+   * on its replacement — a rebuild loop that swallowed the click meant to
+   * close the range, so picking a second day never took.
+   */
+  let cells = [];
+  let foot = null;
+
+  const pick = (day) => {
+    if (end === null) {
+      const first = Math.min(day, start);
+      const last = Math.max(day, start);
+      start = first;
+      end = last;
+      hover = null;
+    } else {
+      start = day;
+      end = null;
+    }
+    paintRange();
+  };
+
+  const disabled = (day) =>
+    day > maxMs || (end === null && Math.abs(day - start) > (maxDays - 1) * DAY_MS);
+
+  /** The chosen range, and what the footer says about it. Classes only. */
+  function paintRange() {
+    // While the second day is being chosen, the range runs to the pointer.
+    const lastShown = end === null ? hover : end;
+    const low = lastShown === null ? start : Math.min(start, lastShown);
+    const high = lastShown === null ? start : Math.max(start, lastShown);
+    for (const cell of cells) {
+      const at = cell.at;
+      const edgeStart = at === low;
+      const edgeEnd = at === high;
+      cell.button.classList.toggle("is-inside", at > low && at < high);
+      cell.button.classList.toggle("is-edge", edgeStart || edgeEnd);
+      cell.button.classList.toggle("is-start", edgeStart && high > low);
+      cell.button.classList.toggle("is-end", edgeEnd && high > low);
+      cell.button.disabled = disabled(at);
+      if (edgeStart || edgeEnd) cell.button.setAttribute("aria-current", "date");
+      else cell.button.removeAttribute("aria-current");
+    }
+    if (!foot) return;
+    foot.replaceChildren();
+    const summary = el("span", "drp-summary");
+    if (end === null) summary.appendChild(document.createTextNode(t("usage.range.pickEnd")));
+    else {
+      summary.appendChild(el("strong", null, rangeText(start, end)));
+      summary.appendChild(el("span", "muted", " · " + span(start, end)));
+    }
+    foot.appendChild(summary);
+
+    const actions = el("span", "drp-actions");
+    const cancel = el("button", "drp-cancel", t("usage.range.cancel"));
+    cancel.type = "button";
+    cancel.addEventListener("click", () => close());
+    const apply = el("button", "drp-apply", t("usage.range.apply"));
+    apply.type = "button";
+    if (end === null) apply.disabled = true;
+    else {
+      apply.addEventListener("click", () => {
+        const from = dayKey(start);
+        const to = dayKey(end);
+        close();
+        options.onApply(from, to);
+      });
+    }
+    actions.appendChild(cancel);
+    actions.appendChild(apply);
+    foot.appendChild(actions);
+  }
+
+  const renderMonth = (first, className) => {
+    const box = el("div", "drp-month " + className);
+    box.appendChild(el("div", "drp-month-name", monthName.format(first)));
+    const grid = el("div", "drp-grid");
+    grid.setAttribute("role", "grid");
+    for (const name of weekdays) {
+      const cell = el("span", "drp-weekday", name);
+      cell.setAttribute("aria-hidden", "true");
+      grid.appendChild(cell);
+    }
+    const date = new Date(first);
+    const year = date.getUTCFullYear();
+    const index = date.getUTCMonth();
+    const length = new Date(Date.UTC(year, index + 1, 0)).getUTCDate();
+    const lead = (date.getUTCDay() - firstWeekday + 7) % 7;
+    for (let i = 0; i < lead; i += 1) grid.appendChild(el("span"));
+    for (let day = 1; day <= length; day += 1) {
+      const at = Date.UTC(year, index, day);
+      const button = el("button", "drp-day" + (at === maxMs ? " is-today" : ""));
+      button.type = "button";
+      button.appendChild(el("span", null, String(day)));
+      button.setAttribute("aria-label", shortYear.format(at));
+      button.addEventListener("click", () => { if (!button.disabled) pick(at); });
+      button.addEventListener("mouseenter", () => {
+        if (end !== null || button.disabled) return;
+        hover = at;
+        paintRange();
+      });
+      cells.push({ at, button });
+      grid.appendChild(button);
+    }
+    box.appendChild(grid);
+    return box;
+  };
+
+  function paintPop() {
+    if (!pop) return;
+    pop.replaceChildren();
+    cells = [];
+    const nav = el("div", "drp-nav");
+    const back = el("button", "drp-arrow");
+    back.type = "button";
+    back.appendChild(svgIcon("chevronLeft"));
+    back.setAttribute("aria-label", t("usage.range.previous"));
+    back.addEventListener("click", () => { month = shiftMonth(month, -1); paintPop(); });
+    const forward = el("button", "drp-arrow");
+    forward.type = "button";
+    forward.appendChild(svgIcon("chevronRight"));
+    forward.setAttribute("aria-label", t("usage.range.next"));
+    if (month >= monthOf(maxMs)) forward.disabled = true;
+    else forward.addEventListener("click", () => { month = shiftMonth(month, 1); paintPop(); });
+    nav.appendChild(back);
+    nav.appendChild(forward);
+    pop.appendChild(nav);
+
+    const months = el("div", "drp-months");
+    months.appendChild(renderMonth(shiftMonth(month, -1), "is-first"));
+    months.appendChild(renderMonth(month, "is-second"));
+    pop.appendChild(months);
+
+    foot = el("div", "drp-foot");
+    pop.appendChild(foot);
+    paintRange();
+  }
+
+  /*
+   * Kept inside the window.
+   *
+   * The trigger sits near the left of a panel that can be narrower than two
+   * months, and the pop is anchored to it — so on a window this app is
+   * routinely used at, Apply was past the right edge of the screen and the
+   * calendar had no way to say yes. Measured rather than guessed at: the
+   * width depends on the locale's month names.
+   */
+  function fit() {
+    // The narrow layout centres the panel on the screen, so there is nothing
+    // to nudge; a measured offset there would drag it back off the edge.
+    if (!pop || matchMedia("(max-width:640px)").matches) return;
+    pop.style.left = "0px";
+    const box = pop.getBoundingClientRect();
+    const over = box.right - (document.documentElement.clientWidth - 12);
+    if (over > 0) pop.style.left = -Math.min(over, Math.max(box.left - 12, 0)) + "px";
+  }
+
+  // Bound while the panel is up and taken down with it: a click-away handler
+  // that outlives its panel is a page that reacts to clicks on nothing.
+  const away = (event) => { if (!root.contains(event.target)) close(); };
+  const escape = (event) => { if (event.key === "Escape") close(); };
+
+  function close() {
+    if (!open) return;
+    open = false;
+    document.removeEventListener("pointerdown", away);
+    document.removeEventListener("keydown", escape);
+    if (pop) pop.remove();
+    pop = null;
+    // Back to the window the page is showing, so reopening does not resume a
+    // half-made choice that was abandoned.
+    reset();
+    paintTrigger();
+  }
+
+  trigger.addEventListener("click", () => {
+    if (open) return void close();
+    open = true;
+    reset();
+    pop = el("div", "drp-pop");
+    pop.setAttribute("role", "dialog");
+    pop.setAttribute("aria-label", t("usage.range.custom"));
+    root.appendChild(pop);
+    paintPop();
+    fit();
+    paintTrigger();
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", escape);
+  });
+
+  paintTrigger();
+  return root;
+}
 
 /**
  * What was spent over time, one line per model.
@@ -8972,7 +11303,13 @@ function usageChart(body, models) {
 }
 
 async function showUsage() {
-  const body = await getJson("/usage?range=" + encodeURIComponent(usageRange));
+  // The days ride along only when they are the window being asked for; the
+  // server ignores them otherwise, and a preset request that carried a stale
+  // pair would be one keystroke from answering for the wrong fortnight.
+  const asked = usageRange === "custom" && usageFrom && usageTo
+    ? "/usage?range=custom&from=" + encodeURIComponent(usageFrom) + "&to=" + encodeURIComponent(usageTo)
+    : "/usage?range=" + encodeURIComponent(usageRange);
+  const body = await getJson(asked);
   panelBody.replaceChildren();
   if (body.error) return void panelBody.appendChild(panelError(body.error));
 
@@ -9002,6 +11339,13 @@ async function showUsage() {
    * figures above it did not would be lying about one of them.
    */
   const picked = body.range || "30d";
+  // What the server says the window is, which is not always what was asked
+  // for: a picked range is clamped to today and to a year, and the calendar
+  // has to open on the days the figures beside it are actually counting.
+  const today = new Date().toISOString().slice(0, 10);
+  const shownFrom = body.from || today;
+  const shownTo = body.to || today;
+  const windowRow = el("div", "usage-window");
   const ranges = el("div", "seg");
   for (const id of ["7d", "30d", "90d", "all"]) {
     const button = el("button", "seg-item" + (id === picked ? " on" : ""), t("usage.range." + id));
@@ -9013,7 +11357,31 @@ async function showUsage() {
     });
     ranges.appendChild(button);
   }
-  panel.appendChild(ranges);
+  windowRow.appendChild(ranges);
+  /*
+   * A window the presets cannot express.
+   *
+   * Beside them rather than as a fifth item on the same control: the presets
+   * are one click each and this one opens a calendar, and a segmented control
+   * whose last segment behaves differently from the other four is a control
+   * that has to be learned. It shows the days it is showing once it is the
+   * chosen window, so the page never has a range on it that nothing on screen
+   * names.
+   */
+  windowRow.appendChild(dateRangePicker({
+    from: shownFrom,
+    to: shownTo,
+    max: today,
+    maxDays: MAX_CUSTOM_DAYS,
+    active: picked === "custom",
+    onApply: (from, to) => {
+      usageRange = "custom";
+      usageFrom = from;
+      usageTo = to;
+      void showUsage();
+    },
+  }));
+  panel.appendChild(windowRow);
 
   // Prompt tokens only. The cache share is a share of what was sent, and
   // nothing that was generated could have come from a cache.
@@ -9348,52 +11716,259 @@ async function showMemoryPage(id) {
   if (result.error && !result.entries) return void panelBody.appendChild(panelError(result.error));
   const panel = el("div", "panel memory-panel"); panelBody.appendChild(panel);
   panel.appendChild(el("h2", "", t("memory.title")));
-  panel.appendChild(el("p", "muted", t("memory.intro")));
-  panel.appendChild(el("p", "mono small memory-path", result.location));
-  const status = el("p", "", !result.signedIn ? t("memory.localOnly") : result.accountChanged ? t("memory.accountChanged") : !result.enabled ? t("memory.syncOff") : result.syncing ? t("memory.syncing") : t("memory.syncOn"));
-  panel.appendChild(status);
-  if (result.lastSync) panel.appendChild(el("p", "muted small", t("memory.lastSync", { when: new Date(result.lastSync).toLocaleString(LOCALE) })));
-  if (result.error) panel.appendChild(panelError(result.error));
+  /*
+   * One card for what a visit is for: is sync working, how many notes there
+   * are, and what to do next. The state is said once, in words, with a line
+   * on what it means; an error sits inside it rather than in a separate
+   * "could not load" box, which read as the page itself being broken. The
+   * same message from both scopes is shown once.
+   */
+  const failures = [];
+  for (const failure of (result.errors && result.errors.length ? result.errors : result.error ? [{ message: result.error }] : [])) {
+    const same = failures.find((one) => memoryText(one) === memoryText(failure));
+    if (same) same.scope = "both"; else failures.push({ ...failure });
+  }
+  const needsSignIn = !result.signedIn || failures.some((one) => one.code === "signInFirst" || one.code === "signInAgain");
+  const state = !result.signedIn ? "local" : result.accountChanged ? "account" : !result.enabled ? "off" : result.syncing ? "syncing" : failures.length ? "error" : "on";
+  const summaryCard = el("section", "row-card memory-summary");
+  panel.appendChild(summaryCard);
+  const status = el("div", "memory-state", t("memory.state." + state));
+  summaryCard.appendChild(status);
+  summaryCard.appendChild(el("p", "muted small", t("memory.stateHint." + state)));
+  for (const failure of failures) {
+    const text = memoryText(failure);
+    const message = !result.userAvailable || !failure.scope || failure.scope === "both" ? text
+      : failure.scope === "user" ? t("memory.errorUser", { message: text })
+      : t("memory.errorProject", { message: text });
+    summaryCard.appendChild(el("p", "small memory-error", message));
+  }
+  const facts = [];
+  const projectCount = result.entries.filter((entry) => entry.scope !== "user").length;
+  facts.push(result.userAvailable
+    ? t("memory.countsScoped", { project: projectCount, user: result.entries.length - projectCount })
+    : t("memory.counts", { count: result.entries.length }));
+  // The ceiling is only news when it is close.
+  if (result.limits && result.entries.length > result.limits.maxNotes * 0.8) facts.push(t("memory.usage", { count: result.entries.length, max: result.limits.maxNotes }));
+  if (result.lastSync) facts.push(t("memory.lastSync", { when: new Date(result.lastSync).toLocaleString(LOCALE) }));
+  summaryCard.appendChild(el("p", "muted small", facts.join(" · ")));
+  if (result.omitted) summaryCard.appendChild(el("p", "muted small", t("memory.omitted", { count: result.omitted })));
+  if (result.quota && result.quota.tier === "free" && result.quota.maxNotes) {
+    summaryCard.appendChild(el("p", "muted small", t("memory.tierFree", { notes: result.quota.maxNotes, kb: Math.max(1, Math.round((result.quota.maxNoteBytes || 0) / 1024)) })));
+  }
+  // Where the files are, and how sync behaves, is looked up once; folded away by default.
+  const about = el("details", "memory-about small");
+  about.appendChild(el("summary", "muted", t("memory.aboutStorage")));
+  about.appendChild(el("p", "muted", t("memory.intro")));
+  if (result.locations && result.locations.user) {
+    about.appendChild(el("p", "muted small", t("memory.projectLocation")));
+    about.appendChild(el("p", "mono small memory-path", result.locations.project));
+    about.appendChild(el("p", "muted small", t("memory.userLocation")));
+    about.appendChild(el("p", "mono small memory-path", result.locations.user));
+  } else about.appendChild(el("p", "mono small memory-path", result.location));
+  panel.appendChild(about);
+  for (const pull of result.recent || []) {
+    const details = el("details", "memory-recent small");
+    details.appendChild(el("summary", "", t("memory.recentPulled", {
+      when: new Date(pull.at).toLocaleString(LOCALE), created: pull.created.length, updated: pull.updated.length, deleted: pull.deleted.length, merged: (pull.merged || []).length,
+    })));
+    for (const [key, notes] of [["memory.recentCreated", pull.created], ["memory.recentUpdated", pull.updated], ["memory.recentDeleted", pull.deleted], ["memory.recentMerged", pull.merged || []]]) {
+      for (const note of notes) details.appendChild(el("div", "muted", t(key, { summary: note.summary })));
+    }
+    panel.appendChild(details);
+  }
   const act = async (input) => {
     try {
       const reply = await api("/plugin-page", { page: id, session, input }, 120000);
-      if (reply.error) throw new Error(reply.error);
+      if (reply.error) throw Object.assign(new Error(reply.error), { code: reply.code, params: reply.params });
       await showMemoryPage(id);
     } catch (error) {
       if (activeId === session && shownPanel === "nav-plugin-" + id) {
         await showMemoryPage(id);
-        panelBody.appendChild(panelError(error.message || t("memory.failed")));
+        // In the summary card, in the page's language. The generic "could not
+        // load" box read as the page being broken, and its hint about the
+        // server's URL token has nothing to do with a refused action.
+        const note = el("p", "small memory-error", memoryText(error));
+        const card = panelBody.querySelector(".memory-summary");
+        (card || panelBody).appendChild(note);
+        note.scrollIntoView({ block: "nearest" });
       }
     }
   };
-  const controls = el("div", ""); controls.style.cssText = "display:flex;gap:12px;align-items:center;margin:16px 0";
+  const controls = el("div", "memory-actions");
+  if (needsSignIn) {
+    const signIn = el("button", "signin-site", t("memory.signIn")); signIn.type = "button";
+    signIn.onclick = async () => { const account = await getJson("/account"); openConnect(account && account.provider); };
+    controls.appendChild(signIn);
+  }
   const toggle = el("button", "ghost", result.enabled ? t("memory.turnOff") : t("memory.turnOn"));
   toggle.setAttribute("role", "switch"); toggle.setAttribute("aria-label", t("memory.switchLabel")); toggle.setAttribute("aria-checked", String(result.enabled));
   toggle.disabled = !result.enabled && (!result.signedIn || result.accountChanged);
   toggle.onclick = async () => { toggle.disabled = true; await act({ action: "enable", enabled: !result.enabled }); toggle.disabled = false; };
-  controls.appendChild(toggle);
+  // Signed out, "turn off cloud sync" is a switch for something that is not
+  // happening; the sign-in button is the action that means something.
+  if (result.signedIn || !result.enabled) controls.appendChild(toggle);
   if (result.signedIn) {
     const sync = el("button", "ghost", t("memory.syncNow")); sync.disabled = !result.ready || result.syncing;
     sync.onclick = async () => { sync.disabled = true; status.textContent = t("memory.syncing"); await act({ action: "sync" }); sync.disabled = false; };
     controls.appendChild(sync);
   }
   const refresh = el("button", "ghost", t("memory.refresh")); refresh.onclick = () => { void showMemoryPage(id); }; controls.appendChild(refresh);
-  panel.appendChild(controls);
+  summaryCard.appendChild(controls);
+  // A conflict is what sync could not combine: both sides changed the same part.
+  // All three versions are shown, and whatever is set aside is backed up.
   for (const conflict of result.conflicts || []) {
-    const row = el("section", "row-card"); row.appendChild(el("strong", "", t("memory.conflict", { id: conflict.id })));
-    for (const [label, note] of [[t("memory.local"), conflict.local], [t("memory.cloud"), conflict.cloud]]) {
-      row.appendChild(el("h4", "", label)); const text = el("pre", "small", note ? note.summary + "\n" + note.body : t("memory.deleted")); text.style.whiteSpace = "pre-wrap"; row.appendChild(text);
+    const row = el("section", "row-card memory-conflict");
+    row.appendChild(el("strong", "", t("memory.conflict", { id: conflict.id })));
+    const fields = (conflict.fields || []).map((field) => t("memory.field." + field)).join(t("memory.fieldSeparator"));
+    if (fields) row.appendChild(el("p", "muted small", t("memory.conflictFields", { fields })));
+    const versions = el("div", "memory-versions");
+    const shown = [[t("memory.local"), conflict.local], [t("memory.cloud"), conflict.cloud]];
+    if (conflict.base) shown.unshift([t("memory.base"), conflict.base]);
+    for (const [label, note] of shown) {
+      const column = el("div", "memory-version");
+      column.appendChild(el("h4", "small", label));
+      const text = el("pre", "small", note ? note.summary + "\n\n" + note.body + (note.tags && note.tags.length ? "\n\n" + note.tags.join(", ") : "") : t("memory.deleted"));
+      text.style.whiteSpace = "pre-wrap";
+      column.appendChild(text);
+      versions.appendChild(column);
     }
-    for (const [choice, label] of [["local", t("memory.keepLocal")], ["cloud", t("memory.takeCloud")]]) {
-      const button = el("button", "ghost", label); button.onclick = () => { void act({ action: "resolve", id: conflict.id, choice }); }; row.appendChild(button);
+    row.appendChild(versions);
+    const actions = el("div", "memory-actions");
+    for (const [choice, label] of [["local", t("memory.keepLocal")], ["cloud", t("memory.takeCloud")], ["both", t("memory.keepBoth")]]) {
+      if (choice === "both" && !(conflict.local && conflict.cloud)) continue;
+      const button = el("button", "ghost", label); button.type = "button";
+      button.onclick = () => { void act({ action: "resolve", scope: conflict.scope, id: conflict.id, choice }); };
+      actions.appendChild(button);
+    }
+    const byHand = el("button", "ghost", t("memory.mergeByHand")); byHand.type = "button";
+    actions.appendChild(byHand);
+    row.appendChild(actions);
+    const start = conflict.local || conflict.cloud || { summary: "", body: "", tags: [] };
+    const form = el("form", "memory-editor"); form.hidden = true;
+    const summary = el("input", ""); summary.value = start.summary; summary.required = true; summary.setAttribute("aria-label", t("memory.summaryLabel"));
+    const body = el("textarea", ""); body.value = start.body; body.rows = 8; body.required = true; body.setAttribute("aria-label", t("memory.bodyLabel"));
+    const tags = el("input", ""); tags.value = (start.tags || []).join(", "); tags.setAttribute("aria-label", t("memory.tagsLabel"));
+    for (const control of [summary, body, tags]) {
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box;margin:8px 0";
+      form.appendChild(control);
     }
+    const save = el("button", "ghost", t("memory.mergeSave")); save.type = "submit";
+    form.appendChild(save);
+    form.onsubmit = async (event) => {
+      event.preventDefault(); save.disabled = true;
+      await act({ action: "resolve", scope: conflict.scope, id: conflict.id, choice: "manual", note: {
+        summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean), type: start.type || "",
+      } });
+      save.disabled = false;
+    };
+    byHand.onclick = () => { form.hidden = !form.hidden; };
+    row.appendChild(form);
     panel.appendChild(row);
   }
+  // Tidying: what a review of the notes found, and a merge waiting to be applied.
+  const labelOf = (scope, id) => {
+    const found = result.entries.find((entry) => entry.id === id && entry.scope === scope);
+    return found ? found.summary : id;
+  };
+  if (result.proposal) {
+    const proposal = result.proposal;
+    const card = el("section", "row-card memory-conflict");
+    card.appendChild(el("strong", "", t("memory.mergeTitle", { count: proposal.ids.length })));
+    card.appendChild(el("p", "muted small", proposal.source === "model" ? t("memory.mergeFromModel") : t("memory.mergeByHandHint")));
+    const sources = el("ul", "muted small");
+    proposal.ids.forEach((id, index) => {
+      sources.appendChild(el("li", "", (index === 0 ? t("memory.mergeKeeps") : t("memory.mergeRemoves")) + labelOf(proposal.scope, id)));
+    });
+    card.appendChild(sources);
+    const form = el("form", "memory-editor");
+    const summary = el("input", ""); summary.value = proposal.draft.summary; summary.required = true; summary.setAttribute("aria-label", t("memory.summaryLabel"));
+    const body = el("textarea", ""); body.value = proposal.draft.body; body.rows = 10; body.required = true; body.setAttribute("aria-label", t("memory.bodyLabel"));
+    const tags = el("input", ""); tags.value = (proposal.draft.tags || []).join(", "); tags.setAttribute("aria-label", t("memory.tagsLabel"));
+    for (const control of [summary, body, tags]) {
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box;margin:8px 0";
+      form.appendChild(control);
+    }
+    const mergeActions = el("div", "memory-actions");
+    const apply = el("button", "ghost", t("memory.mergeApply")); apply.type = "submit"; mergeActions.appendChild(apply);
+    const cancel = el("button", "ghost", t("memory.mergeCancel")); cancel.type = "button";
+    cancel.onclick = () => { void act({ action: "cancelMerge" }); };
+    mergeActions.appendChild(cancel);
+    form.appendChild(mergeActions);
+    form.onsubmit = async (event) => {
+      event.preventDefault();
+      if (!confirm(t("memory.mergeConfirm"))) return;
+      apply.disabled = true;
+      await act({ action: "merge", note: { summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean), type: proposal.draft.type || "" } });
+      apply.disabled = false;
+    };
+    card.appendChild(form);
+    panel.appendChild(card);
+  }
+  const findings = result.review || [];
+  const consolidate = result.consolidate || {};
+  const tidy = el("details", "row-card memory-note");
+  const tidyHead = el("summary", "");
+  tidyHead.appendChild(el("span", "chev"));
+  tidyHead.appendChild(el("span", "memory-note-name", t("memory.review", { count: result.reviewTotal || findings.length })));
+  tidy.appendChild(tidyHead);
+  tidy.appendChild(el("p", "muted small", consolidate.auto ? t("memory.reviewAutoOn") : t("memory.reviewIntro")));
+  if (consolidate.lastAuto) {
+    tidy.appendChild(el("p", "muted small", t("memory.reviewLastAuto", { when: new Date(consolidate.lastAuto.at).toLocaleString(LOCALE), count: consolidate.lastAuto.merged.length })));
+  }
+  if (!findings.length) tidy.appendChild(el("p", "muted", t("memory.reviewNone")));
+  for (const finding of findings) {
+    const row = el("div", "memory-backup");
+    const text = el("div", "memory-backup-text");
+    text.appendChild(el("div", "", t("memory.finding." + finding.kind, { count: finding.ids.length })));
+    const names = finding.ids.map((id) => labelOf(finding.scope, id)).join(" / ");
+    text.appendChild(el("div", "muted small", names + (finding.detail && finding.detail.length ? " · " + finding.detail.join(", ") : "")));
+    row.appendChild(text);
+    const buttons = el("div", "memory-actions");
+    if (finding.kind === "duplicate") {
+      if (consolidate.modelAvailable) {
+        const suggest = el("button", "ghost", t("memory.mergeSuggest")); suggest.type = "button";
+        suggest.onclick = async () => {
+          suggest.disabled = true; suggest.textContent = t("memory.mergeThinking");
+          await act({ action: "propose", scope: finding.scope, ids: finding.ids, model: true });
+        };
+        buttons.appendChild(suggest);
+      }
+      const manual = el("button", "ghost", t("memory.mergeManual")); manual.type = "button";
+      manual.onclick = () => { void act({ action: "propose", scope: finding.scope, ids: finding.ids, model: false }); };
+      buttons.appendChild(manual);
+    } else {
+      const open = el("button", "ghost", t("memory.reviewOpen")); open.type = "button";
+      open.onclick = () => {
+        search.value = ""; draw();
+        const found = list.querySelector('[data-note-id="' + CSS.escape(finding.ids[0]) + '"]');
+        if (found) { found.open = true; found.scrollIntoView({ block: "center" }); }
+      };
+      buttons.appendChild(open);
+    }
+    const dismiss = el("button", "ghost", t("memory.reviewDismiss")); dismiss.type = "button";
+    dismiss.onclick = () => { void act({ action: "dismiss", key: finding.key }); };
+    buttons.appendChild(dismiss);
+    row.appendChild(buttons);
+    tidy.appendChild(row);
+  }
+  // Nothing to tidy is not worth a row.
+  if (findings.length || consolidate.lastAuto) panel.appendChild(tidy);
   const editor = (note, extra) => {
     const form = el("form", "memory-editor"), summary = el("input", ""), body = el("textarea", ""), tags = el("input", "");
     summary.placeholder = t("memory.summaryPlaceholder"); summary.value = note?.summary || ""; summary.required = true;
     body.placeholder = t("memory.bodyPlaceholder"); body.value = note?.body || ""; body.rows = 6; body.required = true;
     tags.placeholder = t("memory.tagsPlaceholder"); tags.value = (note?.tags || []).join(", ");
+    const type = el("select", "");
+    for (const [value, label] of [["", t("memory.typeNone")], ["user", t("memory.typeUser")], ["feedback", t("memory.typeFeedback")], ["project", t("memory.typeProject")], ["reference", t("memory.typeReference")]]) {
+      const option = el("option", "", label); option.value = value; type.appendChild(option);
+    }
+    type.value = note?.type || "";
+    const scope = el("select", "");
+    for (const [value, label] of [["project", t("memory.scopeProject")], ["user", t("memory.scopeUser")]]) {
+      const option = el("option", "", label); option.value = value; scope.appendChild(option);
+    }
+    // A note moves between scopes by being written anew there; editing keeps it where it is.
+    scope.value = note?.scope || "project"; scope.disabled = !!note;
     /*
      * A label each, and a line saying what the field is for.
      *
@@ -9417,6 +11992,8 @@ async function showMemoryPage(id) {
     form.appendChild(labelled(summary, t("memory.summaryLabel"), t("memory.summaryHint")));
     form.appendChild(labelled(body, t("memory.bodyLabel"), t("memory.bodyHint")));
     form.appendChild(labelled(tags, t("memory.tagsLabel"), t("memory.tagsHint")));
+    form.appendChild(labelled(type, t("memory.typeLabel"), ""));
+    if (result.userAvailable) form.appendChild(labelled(scope, t("memory.scopeLabel"), note ? "" : t("memory.scopeHint")));
     const actions = el("div", "memory-actions");
     const save = el("button", "ghost", note ? t("memory.save") : t("memory.add")); save.type = "submit"; actions.appendChild(save);
     // Delete belongs beside Save, not stranded under the card: they are the two
@@ -9424,21 +12001,29 @@ async function showMemoryPage(id) {
     if (extra) actions.appendChild(extra);
     form.appendChild(actions);
     form.onsubmit = async (event) => { event.preventDefault(); save.disabled = true;
-      await act({ action: "save", ...(note ? { id: note.id, expectedHash: note.hash } : {}), note: { summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean) } }); save.disabled = false;
+      await act({ action: "save", scope: note ? note.scope : scope.value, ...(note ? { id: note.id, expectedHash: note.hash } : {}), note: { type: type.value, summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean) } }); save.disabled = false;
     };
     return form;
   };
-  const add = el("details", "row-card memory-note");
-  const addHead = el("summary", "");
-  addHead.appendChild(el("span", "chev"));
-  addHead.appendChild(el("span", "memory-note-name", t("memory.add")));
-  add.appendChild(addHead); add.appendChild(editor()); panel.appendChild(add);
-  const search = el("input", "memory-search"); search.placeholder = t("memory.search"); search.setAttribute("aria-label", t("memory.search")); search.style.margin = "16px 0"; panel.appendChild(search);
+  // What notes are, said once above the list. They come from conversations,
+  // so there is no form for writing one here; existing notes open to edit.
+  panel.appendChild(el("div", "section-title", t("memory.notesTitle", { count: result.entries.length })));
+  // With no notes the empty state below says all of this, with an example.
+  if (result.entries.length) panel.appendChild(el("p", "muted small memory-notes-intro", t("memory.notesIntro")));
+  const search = el("input", "memory-search"); search.placeholder = t("memory.search"); search.setAttribute("aria-label", t("memory.search")); search.style.margin = "16px 0"; search.hidden = !result.entries.length; panel.appendChild(search);
   const list = el("div", ""); panel.appendChild(list);
   const draw = () => {
     list.replaceChildren(); const query = search.value.toLowerCase();
-    const entries = result.entries.filter((note) => (note.summary + " " + note.body + " " + note.tags.join(" ")).toLowerCase().includes(query));
-    if (!entries.length) list.appendChild(el("p", "muted", t("memory.none")));
+    const entries = result.entries.filter((note) => (note.summary + " " + note.body + " " + note.tags.join(" ") + " " + (note.type || "") + " " + note.id).toLowerCase().includes(query));
+    if (!entries.length) {
+      if (result.entries.length) list.appendChild(el("p", "muted small", t("memory.none")));
+      else {
+        const empty = el("div", "row-card memory-empty");
+        empty.appendChild(el("div", "memory-empty-title", t("memory.emptyTitle")));
+        empty.appendChild(el("p", "muted small", t("memory.empty")));
+        list.appendChild(empty);
+      }
+    }
     for (const note of entries) {
       const row = el("details", "row-card memory-note");
       /*
@@ -9455,14 +12040,71 @@ async function showMemoryPage(id) {
       head.appendChild(el("span", "chev"));
       head.appendChild(el("span", "memory-note-name", note.summary));
       head.appendChild(el("span", "memory-id mono", note.id));
+      const kind = [note.scope === "user" ? t("memory.scopeUser") : "", note.type ? t("memory.type" + note.type.charAt(0).toUpperCase() + note.type.slice(1)) : ""].filter(Boolean).join(" · ");
+      if (kind) head.appendChild(el("span", "memory-id", kind));
       row.appendChild(head);
+      row.dataset.noteId = note.id;
+      /*
+       * Links written as [[id]] in a note, both ways.
+       *
+       * Resolved by the plugin, since only it sees both scopes; the page only
+       * draws them. A link to a note that does not exist is shown struck
+       * through rather than hidden: it usually names a note someone meant to
+       * write.
+       */
+      const links = note.links || { out: [], in: [], dangling: [] };
+      if (links.out.length || links.in.length || links.dangling.length) {
+        const line = el("div", "memory-links small");
+        const chip = (target) => {
+          const button = el("button", "memory-link", target); button.type = "button";
+          button.onclick = () => {
+            const found = list.querySelector('[data-note-id="' + CSS.escape(target) + '"]');
+            if (found) { found.open = true; found.scrollIntoView({ block: "center" }); }
+          };
+          return button;
+        };
+        if (links.out.length || links.dangling.length) {
+          line.appendChild(el("span", "", t("memory.linksOut")));
+          for (const target of links.out) line.appendChild(chip(target));
+          for (const target of links.dangling) { const missing = el("span", "memory-link missing", target); missing.title = t("memory.missing"); line.appendChild(missing); }
+        }
+        if (links.in.length) {
+          line.appendChild(el("span", "", t("memory.linksIn")));
+          for (const target of links.in) line.appendChild(chip(target));
+        }
+        row.appendChild(line);
+      }
       const remove = el("button", "ghost", t("memory.delete")); remove.type = "button";
-      remove.onclick = () => { if (confirm(t("memory.confirmDelete"))) void act({ action: "delete", id: note.id, expectedHash: note.hash }); };
+      remove.onclick = () => {
+        const linked = links.in.length ? t("memory.confirmDeleteLinked", { count: links.in.length }) : "";
+        if (confirm(linked + t("memory.confirmDelete"))) void act({ action: "delete", scope: note.scope, id: note.id, expectedHash: note.hash });
+      };
       row.appendChild(editor(note, remove));
       list.appendChild(row);
     }
   };
   search.oninput = draw; draw();
+  // Backups: every version replaced or removed without anyone looking, newest first.
+  const backupList = result.backups || [];
+  const backups = el("details", "row-card memory-note");
+  const backupsHead = el("summary", "");
+  backupsHead.appendChild(el("span", "chev"));
+  backupsHead.appendChild(el("span", "memory-note-name", t("memory.backups", { count: backupList.length })));
+  backups.appendChild(backupsHead);
+  if (!backupList.length) backups.appendChild(el("p", "muted", t("memory.backupsNone")));
+  for (const backup of backupList) {
+    const row = el("div", "memory-backup");
+    const text = el("div", "memory-backup-text");
+    text.appendChild(el("div", "", backup.summary));
+    const scopeLabel = backup.scope === "user" ? t("memory.scopeUser") : backup.scope === "project" ? t("memory.scopeProject") : "";
+    text.appendChild(el("div", "muted small", [new Date(backup.backedUpAt).toLocaleString(LOCALE), backup.reason ? t("memory.backupReason." + backup.reason) : "", scopeLabel, backup.id].filter(Boolean).join(" · ")));
+    row.appendChild(text);
+    const restore = el("button", "ghost", t("memory.restore")); restore.type = "button";
+    restore.onclick = () => { if (confirm(t("memory.confirmRestore"))) void act({ action: "restore", file: backup.file }); };
+    row.appendChild(restore);
+    backups.appendChild(row);
+  }
+  if (backupList.length) panel.appendChild(backups);
 }
 
 /**
@@ -9474,7 +12116,7 @@ async function showMemoryPage(id) {
  * sessions have no reason to open. It keeps the row it came from lit, so the
  * sidebar still says where in the app this is.
  */
-const SUB_PANELS = { usage: "nav-settings" };
+const SUB_PANELS = { usage: "nav-settings", audit: "nav-settings", permissions: "nav-settings" };
 
 /** Which panel the panel view is currently showing, sub-panels included. */
 let shownPanel = null;
@@ -9563,6 +12205,8 @@ function repaintPanel() {
   else if (shownPanel === "nav-routines") void showRoutines();
   else if (shownPanel === "nav-settings") void showSettings();
   else if (shownPanel === "usage") void showUsage();
+  else if (shownPanel === "audit") void showAudit();
+  else if (shownPanel === "permissions") void showPermissions();
   else if (shownPanel?.startsWith("nav-plugin-")) void showMemoryPage(shownPanel.slice("nav-plugin-".length));
 }
 
@@ -10136,7 +12780,7 @@ export const PAGE = `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content">
 <meta name="referrer" content="no-referrer">
 <title>OHarness</title>
 <link rel="icon" href="data:image/svg+xml,${encodeURIComponent(FAVICON)}">
@@ -10155,6 +12799,7 @@ ${ANALYTICS_STUB}
       </svg>
     </span>
     <b class="wordmark">OHarness</b>
+    <button id="nav-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
   </header>
   <button id="project" class="project" type="button">
     <span class="avatar" id="project-avatar"></span>
@@ -10191,6 +12836,7 @@ ${ANALYTICS_STUB}
        model-provider setup — a place nobody goes to find their account. -->
   <div id="account"></div>
 </aside>
+<div id="scrim"></div>
 
 <main>
   <div id="top">
@@ -10260,12 +12906,16 @@ ${ANALYTICS_STUB}
           <button type="button" class="picker-btn"><span class="picker-value">…</span><svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 6.5 8 10l3.5-3.5"/></svg></button>
           <div class="menu" hidden></div>
         </div>
+        <div class="picker" id="effort-picker" hidden>
+          <button type="button" class="picker-btn" aria-haspopup="true"><svg class="ico-sm" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.4 11.5a5.6 5.6 0 1 1 11.2 0"/><path d="M8 11.5 10.7 7.6"/></svg><span class="picker-value">…</span><svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 6.5 8 10l3.5-3.5"/></svg></button>
+          <div class="menu" hidden></div>
+        </div>
         <div class="picker" id="mode-picker">
           <button type="button" class="picker-btn"><span class="picker-value">…</span><svg class="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 6.5 8 10l3.5-3.5"/></svg></button>
           <div class="menu" hidden></div>
         </div>
         <span class="composer-spacer"></span>
-        <button id="stop" class="ghost" type="button" hidden data-t="composer.stop"></button>
+        <button id="stop" class="primary" type="button" hidden data-t-title="composer.stop"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1.5"/></svg></button>
         <button id="send" class="primary" type="submit" data-t-title="composer.send"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3.4M3.6 7.8 8 3.2l4.4 4.6"/></svg></button>
       </div>
     </div>
@@ -10289,6 +12939,7 @@ ${ANALYTICS_STUB}
       <div id="review-head">
         <span id="review-title" data-t="review.changes"></span>
         <span id="review-sum"></span>
+        <button id="review-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
       </div>
       <div id="files"></div>
       <div id="diff"></div>
@@ -10314,7 +12965,7 @@ ${ANALYTICS_STUB}
 </dialog>
 
 <dialog id="palette">
-  <div class="pp-head"><input id="cmdk-search" type="text" data-t-placeholder="palette.placeholder" autocomplete="off" spellcheck="false"></div>
+  <div class="pp-head cmdk-head"><svg class="ico-sm" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.33" cy="7.33" r="5.33"/><path d="m14 14-2.87-2.87"/></svg><input id="cmdk-search" type="text" data-t-placeholder="palette.placeholder" autocomplete="off" spellcheck="false"></div>
   <div id="cmdk-list"></div>
   <div class="cmdk-foot">
     <span><kbd>↑↓</kbd><span data-t="palette.moveHint"></span></span>
@@ -10405,8 +13056,11 @@ ${ANALYTICS_STUB}
 
 <dialog id="ask">
   <div class="ask-head">
-    <div class="ask-tags"><span id="ask-tag" class="ask-tag"></span><span id="ask-tool" class="ask-tool"></span></div>
-    <div id="ask-target" class="ask-target"></div>
+    <span id="ask-tag" class="ask-tag"></span>
+    <div class="ask-title">
+      <img id="ask-logo" class="ask-logo" alt="" referrerpolicy="no-referrer" hidden>
+      <div id="ask-target" class="ask-target"></div>
+    </div>
     <div id="ask-meta" class="ask-meta"></div>
   </div>
   <div id="ask-body" class="ask-body"></div>
@@ -10420,7 +13074,7 @@ ${ANALYTICS_STUB}
     <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"></div>
+  <div id="ask-scope" class="ask-scope" hidden></div>
 </dialog>
 
 <script>