@oharness/server 0.5.0 → 0.6.0

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}
@@ -239,6 +200,28 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 }
 .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;
@@ -550,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;
@@ -672,7 +655,7 @@ 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. */
@@ -809,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;
 }
@@ -825,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
@@ -845,6 +883,19 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 .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. */
@@ -864,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.
  *
@@ -929,10 +992,19 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 /* 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. */
@@ -953,6 +1025,97 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
  * 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;
@@ -1292,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)}
@@ -1321,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". */
@@ -1340,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{
@@ -1506,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;
@@ -1528,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}
@@ -1536,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)}
@@ -1556,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 */
@@ -1573,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);
@@ -1612,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
@@ -1658,7 +1869,7 @@ 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;
 }
@@ -1675,6 +1886,41 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
    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{
@@ -1790,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;
@@ -1828,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. */
@@ -1855,12 +2113,22 @@ 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;
-}
-.ask-scope{
-  padding:8px 18px 16px;font-size:11.5px;line-height:1.6;color:var(--dim);min-height:34px;
-}
+  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
@@ -1946,6 +2214,12 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
     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. */
@@ -1956,6 +2230,10 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .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}
 }
 
 /*
@@ -2058,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"],
@@ -2150,6 +2431,12 @@ const ICON_PATHS = {
   // 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) {
@@ -2270,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");
@@ -2732,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.
  *
@@ -3012,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();
@@ -3054,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.
@@ -3207,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.
@@ -3279,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();
 }
@@ -3334,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
@@ -3403,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, {
@@ -4097,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) {
@@ -4228,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;
 }
@@ -4396,6 +4998,20 @@ events.onmessage = (message) => {
     }
 
     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);
@@ -4407,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;
@@ -4503,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.
@@ -4543,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 "";
@@ -4611,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();
@@ -4671,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.
@@ -4685,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
@@ -4705,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) {
@@ -4719,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;
 }
 
 
@@ -6097,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
@@ -7878,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
@@ -7887,12 +8997,6 @@ 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;
@@ -7903,6 +9007,19 @@ async function loadAccount() {
   // 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);
@@ -7911,19 +9028,40 @@ async function loadAccount() {
   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"));
-    if (state.team) {
-      teamLine = state.team.refused
-        ? t("account.teamRefused", { team: teamNameOf(state.team.id) })
-        : t("account.team", {
-            team: teamNameOf(state.team.id),
-            credits: creditsOf(state.team.balanceMicro || 0),
-          });
+    // 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;
     }
   });
 
@@ -7946,14 +9084,52 @@ 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 || teamLine) {
-      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));
-      // Under the person's own line: it is the second balance in play, and
-      // the one the next call actually draws on while a team is chosen.
+    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) {
+      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"));
@@ -8018,6 +9194,28 @@ async function loadAccount() {
         }),
       );
     }
+    // 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: () => {
@@ -8699,6 +9897,7 @@ async function refreshModelCount() {
 document.getElementById("nav-models").addEventListener("click", () => {
   setNav("nav-models");
   focusProvider = null;
+  panelBody.replaceChildren(panelLoading());
   void showModels();
 });
 
@@ -8781,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
@@ -8816,14 +10020,44 @@ 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;
   };
 
-  // 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.
-  const listing = (label, text) => {
+  /**
+   * 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.
+  const listing = (label, text) => {
     const group = el("div", "setting-list");
     group.appendChild(el("div", "muted small", label));
     const list = el("div", "mono small");
@@ -8861,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 })));
   }
 
   /**
@@ -8938,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");
@@ -8957,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.
@@ -8973,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));
   }
 
   /**
@@ -9076,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,
@@ -9203,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(
@@ -9214,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);
 }
 
@@ -9230,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.
@@ -9397,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));
 
@@ -9427,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));
@@ -9438,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.
@@ -9773,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.
      *
@@ -9842,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
@@ -9849,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");
       /*
@@ -9880,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);
 }
 
 /**
@@ -9899,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;
@@ -9988,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));
 }
 
@@ -10687,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>
@@ -10742,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>
@@ -10833,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>
@@ -10848,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>