@oharness/server 0.1.0 → 0.2.0

package/dist/page.js

@@ -28,8 +28,12 @@ const STYLE = String.raw `
   --field:#00000006; --field-focus:#0000000d; --track:#0000001f;
   --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{
+  :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;
@@ -39,6 +43,15 @@ const STYLE = String.raw `
     --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;
+}
 *{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
@@ -184,7 +197,8 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
   position:fixed;z-index:60;min-width:172px;max-width:228px;padding:5px;border-radius:10px;
   background:var(--bg);box-shadow:0 1px 2px #0000000f,0 8px 28px #00000024;
 }
-@media (prefers-color-scheme:dark){.row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+:root[data-theme="dark"] .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
 /*
  * Destructive is carried by the label's colour, not by a filled red bar. A
  * solid block reads as an alert that has already happened rather than as a
@@ -196,6 +210,35 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .row-menu .menu-note{
   padding:4px 8px 8px;font-size:11.5px;line-height:1.45;color:var(--dim);
 }
+/* The account's own two facts, on a surface of their own. A fill separates
+   them from the things to click without drawing a line to do it — the menu
+   already had two rules in it and a third would have made a list of five
+   entries look like three lists. */
+.row-menu .menu-head{
+  padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
+}
+.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)}
+/* One entry carrying the accent, for the one that is an offer rather than a
+   destination. var(--field) was too close to the menu's own surface to read as
+   anything in the light theme — a highlight nobody can see is worse than none,
+   because it costs the layout and returns nothing. */
+.menu-item.accent{background:var(--accent);color:var(--bg)}
+.menu-item.accent:hover{background:var(--accent);opacity:.88}
+/* The theme row: a label and three targets, laid out like a settings line
+   rather than a command. */
+.menu-theme{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:4px 8px;min-height:32px;
+}
+.theme-group{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--field)}
+.theme-btn{
+  display:grid;place-items:center;width:26px;height:22px;border:0;border-radius:6px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
+}
+.theme-btn:hover{color:var(--fg)}
+.theme-btn[aria-pressed="true"]{background:var(--bg);color:var(--fg)}
+.theme-btn .ico-sm{width:14px;height:14px}
 /* The letter that does the same thing without the mouse. Dim, right-aligned,
    and only ever one character — a menu whose right edge is a column of chords
    is a keyboard reference, not a menu. */
@@ -284,7 +327,8 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
 .menu-footer{padding:5px 3px 3px;box-shadow:0 -1px 0 var(--line)}
 .menu-item.cursor{background:var(--hover)}
 .menu-empty{padding:10px 8px;font-size:12.5px;color:var(--dim)}
-@media (prefers-color-scheme:dark){.menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+:root[data-theme="dark"] .menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
 .menu-item{
   display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:7px 8px;border:0;
   border-radius:7px;background:transparent;color:var(--fg);font:inherit;font-size:13px;
@@ -601,7 +645,40 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
  */
 .menu.pop{position:fixed;bottom:auto;left:auto;min-width:220px}
 #log{padding:28px 24px 8px}
-.turn{position:relative;max-width:720px;margin:0 auto 26px}
+/*
+ * One column width, named once.
+ *
+ * A turn and a connection card are different things that must line up, and
+ * before this they lined up by both happening to be laid out inside the pane —
+ * which stopped being true the moment one of them got a max-width. On a wide
+ * window the card then ran the full 1600px while every message sat in a 720px
+ * column, so the one element asking for a decision was the one that did not
+ * look like it belonged to the conversation.
+ */
+.column{max-width:720px;margin-left:auto;margin-right:auto}
+.turn{position:relative;margin-bottom:26px}
+
+/*
+ * The connection card: an app's own mark, its name, what is being asked, and
+ * the two answers. It is the only place a third party's brand appears in the
+ * transcript, so it stays inside the column and keeps the site's own shapes —
+ * a fill and a radius, no outline.
+ */
+.connection-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
+.connection-head{display:flex;align-items:center;gap:10px}
+/*
+ * Fixed box, contained image: a vendor logo is whatever aspect ratio the vendor
+ * chose, and letting it set its own height made cards jump by ten pixels
+ * depending on which app was asking.
+ */
+.connection-logo{width:28px;height:28px;border-radius:7px;object-fit:contain;flex:none;background:var(--bg)}
+.connection-name{font-size:14px;font-weight:600}
+.connection-card p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
+/* The answers sit at the end of the row: this card is a question, and the two
+ * replies belong where a reader arrives last rather than under the sentence
+ * 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)}
 .who{
   font-size:11.5px;color:var(--dim);margin-bottom:6px;font-weight:500;letter-spacing:.01em;
 }
@@ -619,7 +696,44 @@ 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 h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
-.row-card{background:var(--panel);border-radius:10px;padding:12px 14px;margin:0 0 8px}
+/* 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
+ * in the reading column, and the card sat flush left while every message beside
+ * it was centred. */
+.row-card{background:var(--panel);border-radius:10px;padding:12px 14px;margin-bottom:8px}
+.memory-field{margin:14px 0}
+.memory-label{display:block;font-size:12.5px;font-weight:500;margin-bottom:2px}
+.memory-field .muted{margin-bottom:6px}
+/* Filled, not outlined — the same shape .art-search uses. A box drawn with a
+ * line around it is the one thing this site does not do, and three of them
+ * stacked made the editor look like a form bolted onto the page rather than
+ * part of the note. The focus ring stays: that is the one border worth having,
+ * and it appears only while the field is being used. */
+.memory-panel input,.memory-panel textarea{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit;line-height:1.5;box-sizing:border-box}
+.memory-panel input:focus,.memory-panel textarea:focus{outline:2px solid var(--ring)}
+.memory-panel textarea{resize:vertical;min-height:130px}
+.memory-panel summary{cursor:pointer;padding:6px 0;font-weight:500}
+.memory-panel .memory-path{overflow-wrap:anywhere;color:var(--dim)}
+.memory-panel .memory-search{width:100%}
+/* 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. */
+.memory-panel details.memory-note>summary{display:flex;align-items:center;gap:8px;list-style:none;padding:2px 0 6px}
+.memory-panel details.memory-note>summary::-webkit-details-marker{display:none}
+.memory-panel details.memory-note[open]>summary .chev{transform:rotate(90deg)}
+.memory-note-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.memory-id{flex:0 0 auto;font-size:11px;color:var(--dim);letter-spacing:.02em;user-select:all}
+/* No card of its own — the note row is already one — and indented to the
+ * summary's text rather than the card's edge, which is what .setting-body does
+ * for the same shape. The 15px is the marker column: a chevron and the gap
+ * after it, the same distance the summary text is pushed. Left at the form's
+ * own padding the fields sat nine pixels to the right of the title they
+ * belonged to, which is the sort of gap that reads as a mistake without
+ * anyone being able to say what is wrong. */
+.memory-editor{margin:0;padding:2px 0 4px 15px;background:transparent}
+/* 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}
 /*
  * A settings row: name, value, and everything else behind the triangle.
  *
@@ -783,16 +897,16 @@ details.provider>summary:hover{background:var(--hover)}
  * is filled: everything below it is an alternative for someone who cannot use
  * a browser here. Its own class rather than .primary, which is the composer's
  * 30x30 icon button and would collapse this into a circle. */
+/* No rule above it. The padding and the button's own hover surface already
+   separate the account from the list — a hairline as well is a second answer
+   to a question the whitespace had settled, and it is the only line left in a
+   sidebar that has none. */
 #account{
-  border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;
+  display:flex;align-items:center;gap:8px;
   flex:0 0 auto;padding:8px;
 }
 /* Signed out this holds one nav row and nothing else, so the padding that
-   frames an account goes away and the row sits flush with the ones above it —
-   and the rule above it goes too. A hairline fences off a footer, which is
-   what this is once there is an account in it, with a name and an avatar of
-   its own; signed out there is nothing on the other side of the line, just
-   the next row in the same list, drawn as if it belonged somewhere else.
+   frames an account goes away and the row sits flush with the ones above it.
    8px across, matching the nav list above, so the icon lands on the same
    vertical as every other row rather than 4px inside it. */
 /* Not 4px, which is the gap between two rows in a list. This row is the last
@@ -800,7 +914,7 @@ details.provider>summary:hover{background:var(--hover)}
    another row, and at 4px the text sat on the frame. 10px below, and a row
    taller than the nav rows above: a footer is allowed to be the roomiest row
    in the sidebar, and this one has to hold a click aimed at from the corner. */
-#account.out{border-top:0;padding:4px 8px 10px}
+#account.out{padding:4px 8px 10px}
 #account.out .nav-item{width:100%;height:34px}
 /* The whole row is the control. It used to be a label with a Sign out button
    parked beside it, which gave the rarest action in the sidebar the most
@@ -834,7 +948,19 @@ button.signin-site:hover{opacity:.88}
 button.signin-site:disabled{opacity:.4;cursor:default}
 .pw-balance{display:flex;align-items:baseline;gap:6px;margin:0}
 .pw-balance strong{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
-.pw-plans{display:flex;flex-direction:column;gap:8px}
+/* The paywall's own width, and its own padding. Everything here is scoped to
+   #paywall: the same .cn-body and .dlg-actions serve the connect dialog, and
+   the last time a rule meant for one of them was written without a scope it
+   resized three screens nobody had complained about. */
+#paywall{width:min(620px,94vw);max-width:min(620px,94vw)}
+#paywall .cn-body{padding:16px 22px 4px;gap:14px}
+#paywall .dlg-actions{padding:18px 22px 20px}
+#paywall .cn-head{padding:20px 22px 2px}
+/* Two across on a screen with room, one on a phone. Four tiers in a single
+   column made a dialog taller than the window it interrupts, which is the one
+   shape a modal should not have. */
+.pw-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+@media (max-width:560px){.pw-plans{grid-template-columns:1fr}}
 /* Every row carries the colour. This dialog interrupts a turn that could not
  * be paid for, so each row is the way out of it rather than one recommendation
  * and a set of alternatives — and an outlined row beside a filled one reads as
@@ -845,14 +971,63 @@ button.signin-site:disabled{opacity:.4;cursor:default}
  * .primary is the composer's 30x30 icon button, and inheriting its width,
  * height and display:grid collapsed this row into a square with the label
  * clipped inside it. */
+/* Quiet cards, one mark.
+ *
+ * These used to be filled with the accent, every one of them, on the reasoning
+ * that each row is the way out of a turn that could not be paid for. That held
+ * when they were a short flat list. At four tiers plus a ladder of top-ups it
+ * is eight blocks of inverted colour in a small dialog, and the eye has
+ * nowhere to rest — the reader is choosing between shades rather than reading
+ * prices.
+ *
+ * The site's pricing page settled this and says why in its own stylesheet: the
+ * offers should read as columns of type rather than as a row of frames, and on
+ * a screen that is mostly numbers the frames are the loudest thing on it. So
+ * the fill goes quiet and the recommended rung keeps the one outline, which is
+ * what makes it a mark rather than a shade somebody has to notice.
+ */
 button.pw-plan{
-  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
-  min-height:36px;padding:8px 12px;border:1px solid transparent;border-radius:8px;
-  background:var(--accent);color:var(--bg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
-}
-button.pw-plan:hover{opacity:.88}
+  display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
+  min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:10px;
+  background:var(--field);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+}
+button.pw-plan.featured{border-color:var(--border-strong,var(--fg));background:var(--sel)}
+.pw-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
+button.pw-plan:hover{background:var(--sel)}
+button.pw-plan.featured:hover{background:var(--hover)}
 button.pw-plan:disabled{opacity:.4;cursor:default}
-.pw-plan-credits{color:var(--bg);opacity:.75;font-variant-numeric:tabular-nums;flex:0 0 auto}
+.pw-plan-name{display:flex;align-items:center;gap:6px;min-width:0;font-weight:500}
+.pw-plan-under{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.pw-plan-credits{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11.5px}
+.pw-plan-under>span:first-child{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11.5px}
+/* Sits under the price rather than beside the name: the badge up there says
+   which rung to take, this one says what taking it for a year costs. */
+.pw-save{font-size:11px;font-weight:500;color:var(--fg);flex:0 0 auto;font-variant-numeric:tabular-nums}
+/* The money, hard against the right edge and in the same tabular figures as
+   the credits, so four rows read as a column of prices rather than four
+   sentences that happen to end in numbers. */
+.pw-plan-price{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
+/* The one inverted thing left, and the same shape the site uses for it. */
+.pw-tag{
+  font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:999px;
+  background:var(--fg);color:var(--bg);flex:0 0 auto;
+}
+/* One choice about the four rows beneath, so it is a control rather than four
+   more buttons. */
+.pw-toggle{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--field);margin-bottom:2px}
+.pw-tab{
+  flex:1;height:28px;border:0;border-radius:8px;background:transparent;color:var(--dim);
+  font:inherit;font-size:12.5px;cursor:pointer;
+}
+.pw-tab:hover{color:var(--fg)}
+.pw-tab.on{background:var(--bg);color:var(--fg);font-weight:500}
+/* A labelled break, not a rule: what follows is a different kind of purchase,
+   and a bare line would read as the list simply continuing. */
+.pw-sep{
+  display:flex;align-items:center;gap:8px;margin:4px 0 2px;
+  font-size:11.5px;color:var(--dim);
+}
+.pw-sep::after{content:"";flex:1;height:1px;background:var(--line)}
 .provider-advanced{margin-top:8px}
 .provider-advanced>summary{
   font-size:12px;color:var(--dim);cursor:pointer;list-style:none;padding:2px 0;
@@ -915,8 +1090,9 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    measured to be dark, flat and mostly transparent — a logo with colour in it,
    or one carrying its own background, is left exactly as its owner drew it. */
 @media (prefers-color-scheme:dark){
-  .mk-logo.invert-dark{filter:invert(1)}
+  :root:not([data-theme="light"]) .mk-logo.invert-dark{filter:invert(1)}
 }
+:root[data-theme="dark"] .mk-logo.invert-dark{filter:invert(1)}
 /* The fallback, and the reason the icon is allowed to fail: a lettered tile
    still tells two adjacent rows apart, which is the whole job. */
 .mk-mono{display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff}
@@ -1512,6 +1688,13 @@ 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 three themes, drawn the same way the site draws them so the two
+  // controls are recognisably the same control.
+  themeSystem: ["M6 13.4h4"],
+  themeLight: ["M8 1.4v1.4M8 13.2v1.4M1.4 8h1.4M13.2 8h1.4M3.4 3.4l1 1M11.6 11.6l1 1M12.6 3.4l-1 1M4.4 11.6l-1 1"],
+  themeDark: ["M13.2 9.6A5.6 5.6 0 0 1 6.4 2.8a5.6 5.6 0 1 0 6.8 6.8Z"],
+  themeSystemRects: [[1.8, 2.6, 12.4, 8.6, 1.6]],
+  themeLightCircles: [[8, 8, 3.1]],
   // A page with its corner turned back, which is the one mark that reads as
   // "file" at thirteen pixels without any lines of text inside it.
   file: [
@@ -1570,6 +1753,15 @@ function svgIcon(name, extra) {
   }
   // The radius is per-circle because the icons it serves disagree: a fork's
   // node is a dot, a settings knob is a ring you look through.
+  for (const [x, y, w, h, rx] of ICON_PATHS[name + "Rects"] || []) {
+    const rect = document.createElementNS(NS, "rect");
+    rect.setAttribute("x", String(x));
+    rect.setAttribute("y", String(y));
+    rect.setAttribute("width", String(w));
+    rect.setAttribute("height", String(h));
+    rect.setAttribute("rx", String(rx ?? 1.6));
+    svg.appendChild(rect);
+  }
   for (const [cx, cy, r] of ICON_PATHS[name + "Circles"] || []) {
     const circle = document.createElementNS(NS, "circle");
     circle.setAttribute("cx", String(cx));
@@ -2121,7 +2313,7 @@ let P = null;
 
 function turn(role) {
   hideEmpty();
-  const wrap = el("div", "turn " + role);
+  const wrap = el("div", "turn column " + role);
   wrap.appendChild(el("div", "who", role === "user" ? "you" : "assistant"));
   P.node.appendChild(wrap);
   follow();
@@ -2988,8 +3180,49 @@ function placeRowMenu(button) {
  * reads the menu that is actually open instead of a list that has to be kept
  * in step with it.
  */
+/**
+ * The three themes, side by side and pressed rather than cycled.
+ *
+ * A cycling entry made the reader click twice to reach dark and told them the
+ * current state only by reading a word. Three targets say what the options are
+ * and which one is on, in one glance and one click — and it is the control the
+ * site already uses in the same menu, so the two are recognisably the same
+ * thing rather than two designs for one preference.
+ *
+ * Not a menuItem: this row is not a command, and closing the menu on click
+ * would hide the change the click was for.
+ */
+function themeRow() {
+  const row = el("div", "menu-theme");
+  row.appendChild(el("span", "menu-label", t("theme.label")));
+  const group = el("div", "theme-group");
+  group.setAttribute("role", "group");
+  group.setAttribute("aria-label", t("theme.label"));
+  THEMES.forEach((option) => {
+    const button = el("button", "theme-btn");
+    button.type = "button";
+    button.title = t("theme." + option);
+    button.setAttribute("aria-label", t("theme." + option));
+    button.setAttribute("aria-pressed", String(option === theme));
+    button.appendChild(svgIcon("theme" + option[0].toUpperCase() + option.slice(1)));
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      theme = option;
+      applyTheme();
+      // The menu stays open and repaints its own pressed states: the point of
+      // three buttons is that the next one is one click away.
+      [...group.children].forEach((node, i) => {
+        node.setAttribute("aria-pressed", String(THEMES[i] === theme));
+      });
+    });
+    group.appendChild(button);
+  });
+  row.appendChild(group);
+  return row;
+}
+
 function menuItem(label, opts) {
-  const item = el("button", "menu-item" + (opts.danger ? " danger" : ""));
+  const item = el("button", "menu-item" + (opts.danger ? " danger" : "") + (opts.cls ? " " + opts.cls : ""));
   item.type = "button";
   item.appendChild(el("span", "menu-label", label));
   if (opts.key) {
@@ -3229,6 +3462,9 @@ async function loadModels() {
   if (body.error) return void addNotice(body.error, "err");
   const models = body.models || [];
   providers = body.providers || [];
+  // Kept for the connect dialog, which needs somewhere to send a person for a
+  // key and is opened from places that have no response of their own to read.
+  modelsSite = body.site || modelsSite;
 
   // Grouped by vendor. Three things decide the order, in this order:
   //
@@ -3289,6 +3525,90 @@ async function loadModels() {
   modelPicker.set(modelOptions, current ? current.id : null);
 }
 
+const connectionCards = new Map();
+
+function connectionCard(card) {
+  connectionCards.set(card.id, card);
+  const target = pane(card.session);
+  let box = target.node.querySelector('[data-connection-id="' + card.id + '"]');
+  if (!box) {
+    box = el("section", "row-card column connection-card");
+    box.dataset.connectionId = card.id;
+    box.setAttribute("aria-live", "polite");
+    target.node.appendChild(box);
+  }
+  box.replaceChildren();
+  const head = el("div", "connection-head");
+  /*
+   * The app's own mark, when Cloud sent one and it is https. A logo is the
+   * fastest way to tell Gmail from a page pretending to be Gmail, which is
+   * exactly why the URL is not taken on trust: it arrives from a vendor
+   * catalogue, and an http or javascript: src would be a hole opened for
+   * decoration. A card without one is a card with a blank square, never a
+   * broken image.
+   */
+  if (card.logo) {
+    let safe;
+    try { const parsed = new URL(card.logo); if (parsed.protocol === "https:") safe = parsed.href; } catch { safe = undefined; }
+    if (safe) {
+      const logo = el("img", "connection-logo");
+      logo.src = safe; logo.alt = ""; logo.loading = "lazy"; logo.referrerPolicy = "no-referrer";
+      logo.onerror = () => logo.remove();
+      head.appendChild(logo);
+    }
+  }
+  head.appendChild(el("span", "connection-name", card.label));
+  box.appendChild(head);
+  /*
+   * The key when there is one, the text when there is not. The engine writes
+   * both because the same card also reaches surfaces with no translation
+   * table; here, where there is one, a card that spoke a different language
+   * from the window around it was the bug.
+   */
+  box.appendChild(el("p", "", card.messageKey ? t(card.messageKey) : card.message));
+  if (card.state !== "required" && card.state !== "authorizing") return;
+  const actions = el("div", "connection-actions");
+  const start = el("button", "ghost", card.state === "authorizing" ? t("connect.open") : t("connect.action", { app: card.label }));
+  const cancel = el("button", "ghost", t("connect.cancel"));
+  actions.appendChild(start);
+  actions.appendChild(cancel);
+  box.appendChild(actions);
+  start.onclick = async () => {
+    start.disabled = true;
+    // Reserve a window in the click gesture; credentials never enter its URL.
+    const popup = window.open("about:blank", "_blank");
+    if (popup) popup.opener = null;
+    try {
+      const result = await api("/cloud-connection", { id: card.id, action: "start" }, 60000);
+      if (result.error) throw new Error(result.error);
+      if (result.redirectUrl) {
+        const url = new URL(result.redirectUrl);
+        if (url.protocol !== "https:" || url.username || url.password) throw new Error("无效授权链接");
+        if (popup && !popup.closed) popup.location.replace(url.href);
+        else {
+          const currentBox = target.node.querySelector('[data-connection-id="' + card.id + '"]');
+          if (currentBox && connectionCards.get(card.id)?.state === "authorizing") {
+            const link = el("a", "", t("connect.openLink"));
+            link.href = url.href; link.target = "_blank"; link.rel = "noopener noreferrer";
+            currentBox.appendChild(link);
+          }
+        }
+      } else if (popup) popup.close();
+    } catch (error) {
+      if (popup) popup.close();
+      box.appendChild(el("p", "err", error.message || t("connect.failed")));
+    } finally { start.disabled = false; }
+  };
+  cancel.onclick = async () => {
+    cancel.disabled = true;
+    try {
+      const result = await api("/cloud-connection", { id: card.id, action: "cancel" });
+      if (result.error) throw new Error(result.error);
+    } catch { box.appendChild(el("p", "err", t("connect.cancelFailed"))); }
+    finally { cancel.disabled = false; }
+  };
+}
+
 function renderHistory(entries, into) {
   P = into || P;
   const hasHistory = (entries || []).length > 0;
@@ -3337,6 +3657,9 @@ function renderHistory(entries, into) {
     }
     if (P.turn) turnActions(P.turn, entry.keepMessages);
   }
+  for (const card of connectionCards.values()) {
+    if (pane(card.session) === P) connectionCard(card);
+  }
   atBottom = true;
   log.scrollTop = log.scrollHeight;
 }
@@ -3385,6 +3708,9 @@ events.onmessage = (message) => {
   }
 
   switch (event.type) {
+    case "connection_card":
+      connectionCard(event.card);
+      break;
     case "prompt": {
       // The previews this tab made a moment ago, so a message just sent looks
       // like the same message will after a reload — the transcript has not
@@ -3617,9 +3943,17 @@ let askState = null;
  */
 function askRuleKey(request) {
   const name = request.toolName || "";
-  const capitalized = name.charAt(0).toUpperCase() + name.slice(1);
+  // The spelling candidates() writes a rule in: capitalized, unless the name is
+  // already snake_case and would only be disfigured by it.
+  const capitalized = name.includes("_") ? name : name.charAt(0).toUpperCase() + name.slice(1);
   const input = request.input;
   if (!input || typeof input !== "object") return capitalized;
+  // A platform app call is named by its app, and by the app's own tool when it
+  // is executing one — see principalArgument() on the server.
+  if (typeof input.app === "string") {
+    const app = typeof input.tool === "string" ? input.app + ":" + input.tool : input.app;
+    return capitalized + "(" + app + ")";
+  }
   const field =
     name === "bash" ? "command"
     : "path" in input ? "path"
@@ -5438,6 +5772,7 @@ async function showModels() {
   if (body.error) return void panelBody.appendChild(panelError(body.error));
   const models = body.models || [];
   const list = body.providers || [];
+  modelsSite = body.site || modelsSite;
 
   const panel = el("div", "panel");
   const head = el("div", "row-head");
@@ -5587,8 +5922,29 @@ async function showModels() {
     // Who is signed in, when anyone is. A plan whose credential is an account
     // has one question a "connected" tag cannot answer — whose — and it is the
     // question a stale login gets wrong.
+    // Which key, when a key is what this machine is using. Shown for the same
+    // reason the account email is: "connected" does not say by what, and the
+    // one thing somebody needs in order to revoke it is the name they gave it.
+    if (provider.keyLabel) {
+      cardBody.appendChild(
+        el("div", "muted small", t("models.usingKey", { label: provider.keyLabel })),
+      );
+    }
     if (provider.account) {
-      cardBody.appendChild(el("div", "muted small", t("models.signedInAs", { email: provider.account })));
+      // Whose, and whether it still counts. The email comes from the stored
+      // credential and survives it going stale, so claiming "signed in" on the
+      // strength of it told people they had a session when they had the
+      // remains of one — which is exactly how a dead sign-in button came to
+      // look like a bug in the button rather than in the sentence above it.
+      cardBody.appendChild(
+        el(
+          "div",
+          "muted small",
+          provider.configured
+            ? t("models.signedInAs", { email: provider.account })
+            : t("models.wasSignedInAs", { email: provider.account }),
+        ),
+      );
     }
 
     // An account-backed plan holds no key the subscriber could paste: the
@@ -5601,7 +5957,10 @@ async function showModels() {
     // emailed code for a machine with no browser — and having a second copy of
     // them on this card meant anything added to the sign-in had to be added
     // twice, with the copy that was missed going quietly stale.
-    if (provider.signIn && (!provider.configured || String(provider.source || "").startsWith("env:"))) {
+    // Nothing to sign in to. The card says what is missing and how to supply
+    // it, in the same terms the CLI uses, rather than showing a button whose
+    // only possible outcome is a dialog that also cannot work.
+    const signInButton = () => {
       const go = el("button", "signin-site", t("models.signIn"));
       go.type = "button";
       go.addEventListener("click", (e) => {
@@ -5609,7 +5968,23 @@ async function showModels() {
         e.stopPropagation();
         openConnect(provider.id);
       });
-      cardBody.appendChild(go);
+      return go;
+    };
+
+    if (provider.readiness === "no-account-system") {
+      cardBody.appendChild(el("div", "muted small", t("models.noAccounts")));
+      cardBody.appendChild(el("div", "muted small", t("models.noAccountsHow")));
+    } else if (provider.readiness === "cannot-renew") {
+      // The engine's own message about why the renewal failed. Shown rather
+      // than summarised: this is somebody's own machine, and "could not be
+      // renewed" without the reason is a sentence they can do nothing with.
+      // The button stays, because signing in again is a real answer here —
+      // unlike the case above, where there is nothing to sign in to.
+      cardBody.appendChild(el("div", "muted small", t("models.cannotRenew")));
+      if (provider.readinessDetail) cardBody.appendChild(el("div", "muted small", provider.readinessDetail));
+      cardBody.appendChild(signInButton());
+    } else if (provider.signIn && (!provider.configured || String(provider.source || "").startsWith("env:"))) {
+      cardBody.appendChild(signInButton());
     }
 
     // The key field, for every vendor that takes one — the account plans
@@ -5811,6 +6186,8 @@ function openReconnect(providerId) {
  * paste and works everywhere, including where no mail is reachable. The
  * sign-in is one line below it for the accounts that prefer it.
  */
+let modelsSite = "";
+
 function openConnect(providerId, thenModel) {
   const provider = providers.find((p) => p.id === providerId);
   if (!provider) return;
@@ -5823,7 +6200,44 @@ function openConnect(providerId, thenModel) {
   // would be an advertisement in the way of the field they came to fill in.
   document.getElementById("cn-aside").hidden = !provider.signIn;
   document.getElementById("cn-title").textContent = provider.label || provider.id;
-  document.getElementById("cn-desc").textContent = provider.description || "";
+  // What this dialog is answering. A credential that ran out and one that was
+  // never created both arrive here, and telling someone to "sign in" when what
+  // happened is "your session ended" leaves them wondering whether the first
+  // one ever worked.
+  // The provider's own description advertises signing in. Left in place on a
+  // build that cannot sign in, it contradicts the sentence directly beneath it
+  // — which is what made the dialog read as an error rather than as one of two
+  // doors being shut.
+  document.getElementById("cn-desc").textContent =
+    provider.readiness === "no-account-system"
+      ? t("models.keyOnlyDesc")
+      : provider.readiness === "expired"
+        ? t("models.expired")
+        : provider.readiness === "cannot-renew"
+          ? t("models.cannotRenew")
+          : provider.description || "";
+
+  // Nothing to sign in *to*, which is not the same as nothing to do. The
+  // official plan takes two credentials: an account, which needs a project
+  // this build does not know, and an oh- key, which is a bearer token for the
+  // gateway and needs no project at all. So the dialog explains why the first
+  // is unavailable and offers the second, rather than the Cancel button it
+  // offered at first — which told someone with a perfectly good key that they
+  // could not use this provider.
+  //
+  // An earlier version wrote a notice instead of opening anything. addNotice
+  // puts its text in the transcript when no panel is up, so the explanation
+  // arrived labelled as the assistant, reading as something the model said.
+  const noAccounts = provider.readiness === "no-account-system";
+  if (noAccounts) {
+    // The left column sells having an account. Wrong thing to show beside a
+    // sentence saying accounts do not exist in this build.
+    document.getElementById("cn-aside").hidden = true;
+  }
+  // Undone on every open rather than only where it is set: this dialog is one
+  // node reused by every provider, and a control hidden for one that stayed
+  // hidden for the next is the classic way a shared dialog goes wrong.
+  save.hidden = false;
 
   // Which of the two ways in this dialog is for. Fixed once, not switchable:
   // a provider whose credential is a key gets the key field, and one with an
@@ -5832,7 +6246,7 @@ function openConnect(providerId, thenModel) {
   // window whose whole job is "sign in" — two unrelated things wearing one
   // title. Pasting an oh- key is a settings action and lives on the
   // provider's card, where the other vendors' key fields already are.
-  const mode = provider.signIn ? "account" : "key";
+  const mode = provider.signIn && !noAccounts ? "account" : "key";
   let flow = null;
 
   const field = document.createElement("input");
@@ -5897,7 +6311,12 @@ function openConnect(providerId, thenModel) {
    * as though the code is the way in and the button above it is an aside.
    */
   const focusPrimary = () => {
-    if (mode === "account" && !flow && siteButton) siteButton.focus();
+    // Whatever the way in is. In account mode that is the website button; with
+    // no account system it is the one that fetches a key, which is the same
+    // shape of thing and deserves the same treatment. The field is where the
+    // cursor goes only when pasting is what is left.
+    const opener = mode === "account" && !flow ? siteButton : noAccounts ? keyButton : undefined;
+    if (opener) opener.focus();
     else field.focus();
   };
 
@@ -5908,6 +6327,13 @@ function openConnect(providerId, thenModel) {
       // Two lines, and the variable name kept whole: as one sentence it wrapped
       // mid-identifier, which reads as a different variable than the one to set.
       hint.replaceChildren(el("div", null, t("models.keyStored")));
+      // Why the other half of this dialog is missing, and how to get it back.
+      // Behind the mark rather than in the body: it is an answer to a question
+      // most readers do not have, and the ones who do will look for it.
+      if (noAccounts) {
+        hint.appendChild(el("div", null, t("models.noAccounts")));
+        hint.appendChild(el("div", null, t("models.noAccountsHow")));
+      }
       if ((provider.envVars || []).length) {
         const line = el("div");
         line.appendChild(document.createTextNode(t("models.keyEnv") + " "));
@@ -5943,7 +6369,11 @@ function openConnect(providerId, thenModel) {
     // the reader choose by position, and position would put the emphasis on
     // the wrong one here — in account mode the fallback is what sits in the
     // actions row, and the way in is the button above the field.
-    save.classList.toggle("approve", mode === "key");
+    // The same reasoning as account mode, now that key mode can also have a
+    // button above the field: whichever control is the way in carries the
+    // colour, and the actions row holds the fallback. Two filled buttons make
+    // the reader choose by position, and position would pick the wrong one.
+    save.classList.toggle("approve", mode === "key" && !noAccounts);
     field.value = "";
     focusPrimary();
   };
@@ -6028,7 +6458,79 @@ function openConnect(providerId, thenModel) {
   document.getElementById("cn-cancel").onclick = () => dialog.close();
   document.getElementById("cn-x").onclick = () => dialog.close();
 
-  body.replaceChildren(site, orCode, field, hint);
+  // Where the key comes from. The text above says a key is the way in and then
+  // said nothing about getting one, which is half an instruction. siteUrl has a
+  // default, so this resolves even on a build that knows no account project.
+  // A button, not a link. The link left the person with a key on their
+  // clipboard and a field to find again; the browser round trip ends with the
+  // key already stored, because the site hands it back over the same loopback
+  // the sign-in uses. It is also where keys are listed and revoked, so
+  // "create one" and "revoke the one this machine was using" are the same
+  // trip.
+  //
+  // Degrades to the link when this window was not reached over loopback: the
+  // site will only redirect a credential to 127.0.0.1, so from a LAN address
+  // the round trip cannot complete and copy-and-paste is the honest offer.
+  let keyButton = null;
+  const keyLink = () => {
+    const href = (modelsSite || "https://oharness.ai") + "/" + LOCALE + "/dashboard/keys";
+    const go = el("button", "signin-site", t("models.getOhKey"));
+    go.type = "button";
+    go.onclick = (e) => {
+      e.preventDefault();
+      const inDialog = (reason) => {
+        hint.textContent = reason;
+        hint.hidden = false;
+        field.focus();
+      };
+      startWebsiteSignIn(
+        provider.id,
+        () => {
+          if (dialog.open) void done("connected " + provider.id);
+        },
+        go,
+        (reason) => {
+          // Reached over a LAN address, so the site will not redirect a
+          // credential back here. The tab still opens — copying a key across
+          // is the way in that remains — and the field below is where it goes.
+          window.open(href, "_blank", "noopener");
+          inDialog(reason);
+        },
+        "key",
+        inDialog,
+      );
+    };
+    keyButton = go;
+    // The same wrapper the website sign-in uses. signin-site carries flex:1,
+    // which is right in a row and wrong in the column this body is — there it
+    // resolves to flex-basis:0 on the height and squashes the button to 25px
+    // above a 38px field. Putting it in the row it was written for fixes that
+    // without changing a rule four other places depend on.
+    const row = el("div", "keyrow");
+    row.appendChild(go);
+    return row;
+  };
+
+  body.replaceChildren(
+    // Why the account half of this dialog is missing, above the half that
+    // still works. Absent for every provider that has nothing to explain.
+    // One line and a button. The recipe for turning sign-in back on used to sit
+    // here as a five-line paragraph, in front of everybody, for the few people
+    // building their own fork — and a dialog whose first screenful is
+    // configuration for somebody else is a dialog nobody reads. It moved
+    // behind the mark, which is what the mark is for.
+    // The button, and the sentence that makes the field beneath it an
+    // alternative rather than a step. "Signing in is not available" moved
+    // behind the mark with the rest of it: the description already says this
+    // dialog connects with a key, so the line answered a question only
+    // somebody expecting a sign-in would ask — and they are exactly who opens
+    // the mark.
+    ...(noAccounts ? [keyLink(), el("div", "cn-note", t("models.orPasteKey"))] : []),
+    site,
+    orCode,
+    field,
+    hint,
+  );
   // Re-attached on every open: the actions row is markup, so a link left from
   // the last vendor would otherwise point at their key page. The link is built
   // fresh each time, so the previous one has to be taken out by hand — testing
@@ -6164,16 +6666,53 @@ async function loadAccount() {
   // 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;
   void getJson("/billing").then((state) => {
-    if (!state || !state.signedIn || state.unavailable || state.balanceMicro === undefined) return;
-    balance = t("paywall.balance", { credits: creditsOf(state.balanceMicro) });
+    if (!state || !state.signedIn || state.unavailable) return;
+    sellsCredits = true;
+    if (state.balanceMicro !== undefined) {
+      balance = t("paywall.balance", { credits: creditsOf(state.balanceMicro) });
+    }
+    const sub = state.subscription;
+    plan = sub && sub.plan ? t("account.plan", { plan: sub.plan, status: sub.status }) : t("account.noPlan");
   });
 
   row.addEventListener("click", (e) => {
     e.stopPropagation();
     if (menuRow === row) return closeRowMenu();
     const items = [];
-    if (balance) items.push(el("div", "menu-note", balance));
+    // The two facts, in one block with a surface under them. They were two
+    // dim lines the size of a footnote, above the things to click — which is
+    // backwards: the balance is why somebody opened this menu, and the plan
+    // is what decides which of the entries below is the one they want.
+    if (balance || plan) {
+      const head = el("div", "menu-head");
+      if (balance) head.appendChild(el("div", "menu-head-main", balance));
+      if (plan) head.appendChild(el("div", "menu-head-sub", plan));
+      items.push(head);
+    }
+    // Buying, before the dashboard. Somebody who opened this menu after seeing
+    // "0 credits" two lines up wants the shop, and the dashboard is a longer
+    // way to the same place. It opens the paywall this app already has rather
+    // than a browser tab: the balance refreshes itself there, and the turn
+    // that could not be paid for is one click from being sent again.
+    if (sellsCredits) {
+      items.push(
+        menuItem(t("account.getCredits"), {
+          run: () => {
+            closeRowMenu();
+            openPaywall(true);
+          },
+        }),
+      );
+    }
     items.push(
       menuItem(t("account.dashboard"), {
         run: () => {
@@ -6183,7 +6722,14 @@ async function loadAccount() {
           if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard", "_blank", "noopener");
         },
       }),
-      menuSep(),
+      menuItem(t("account.download"), {
+        run: () => {
+          closeRowMenu();
+          if (body.site) window.open(body.site + "/" + LOCALE + "/download", "_blank", "noopener");
+        },
+        cls: "accent",
+      }),
+      themeRow(),
       menuItem(t("account.signOut"), {
         run: () => {
           closeRowMenu();
@@ -6260,13 +6806,18 @@ function websiteSignIn(provider, onSignedIn, onUnavailable) {
  * redirect back to, so the browser route is shut and the emailed code is the
  * way in. The caller is the one that can put that where the user is looking.
  */
-function startWebsiteSignIn(providerId, onSignedIn, button, onUnavailable) {
+function startWebsiteSignIn(providerId, onSignedIn, button, onUnavailable, intent, onError) {
   if (button) button.disabled = true;
-  void api("/signin/browser", { provider: providerId, locale: LOCALE })
+  void api("/signin/browser", { provider: providerId, locale: LOCALE, ...(intent ? { intent } : {}) })
     .then((result) => {
       if (!result || result.error) {
         const message = (result && result.error) || "could not start the sign-in";
         if (result && result.fallback === "code" && onUnavailable) return void onUnavailable(message);
+        // A caller with a dialog open has somewhere better to put this.
+        // addNotice writes to the transcript when no panel is up, so an error
+        // from a button in a modal would arrive behind the modal, under an
+        // assistant heading, reading as something the model said.
+        if (onError) return void onError(message);
         return void addNotice(message, "err");
       }
       // Only now: a sign-in that never started has nothing to wait for, and a
@@ -6297,6 +6848,23 @@ const PAYWALL_POLL_MS = 5000;
 let paywallTimer = null;
 
 /** Credits as a person reads them, from the micro-credits the ledger keeps. */
+/**
+ * What a plan costs, in the currency it is sold in.
+ *
+ * The gateway has always sent amountCents and currency and the paywall threw
+ * them away, so every row said how many credits and never how much money —
+ * which is the one number somebody deciding between four rows needs.
+ */
+function moneyOf(cents, currency) {
+  if (typeof cents !== "number") return "";
+  return (cents / 100).toLocaleString(LOCALE, {
+    style: "currency",
+    currency: (currency || "usd").toUpperCase(),
+    minimumFractionDigits: cents % 100 === 0 ? 0 : 2,
+    maximumFractionDigits: 2,
+  });
+}
+
 function creditsOf(micro) {
   return (Number(micro || 0) / 1000000).toLocaleString(LOCALE, {
     minimumFractionDigits: 0,
@@ -6329,11 +6897,51 @@ function closePaywall() {
  * never talks to — so the way this screen learns it worked is by watching the
  * balance, which is also the only number that was ever the real answer.
  */
-function openPaywall() {
+/** Which interval the paywall is showing. Monthly by default: it is the
+ * smaller commitment, and this dialog is interrupting somebody who wanted to
+ * send a message, not shopping. */
+/**
+ * Light, dark, or whatever the system says.
+ *
+ * Three states rather than a switch, because following the system was the
+ * behaviour before this existed and taking it away to gain a toggle is a
+ * trade nobody asked for. Stored per browser: it describes this screen in
+ * this room, not the account.
+ */
+const THEMES = ["system", "light", "dark"];
+let theme = "system";
+try {
+  const saved = localStorage.getItem("oharness-theme");
+  if (THEMES.indexOf(saved) > 0) theme = saved;
+} catch {
+  // Private windows and blocked site data both throw here. Following the
+  // system is the right answer when the preference cannot be read.
+}
+function applyTheme() {
+  if (theme === "system") document.documentElement.removeAttribute("data-theme");
+  else document.documentElement.setAttribute("data-theme", theme);
+  try {
+    if (theme === "system") localStorage.removeItem("oharness-theme");
+    else localStorage.setItem("oharness-theme", theme);
+  } catch {
+    // Unstorable is not unusable: it applies for this tab and forgets after.
+  }
+}
+applyTheme();
+
+let pwInterval = "month";
+
+/**
+ * @param buying  Opened deliberately, rather than by a turn that could not be
+ *   paid for. The screen is the same and the sentence at the top is not: a
+ *   dialog that says "this turn could not be paid for" to somebody who chose
+ *   Subscribe from a menu is describing a failure that did not happen.
+ */
+function openPaywall(buying) {
   const dialog = document.getElementById("paywall");
   const body = document.getElementById("pw-body");
-  document.getElementById("pw-title").textContent = t("paywall.title");
-  document.getElementById("pw-desc").textContent = t("paywall.desc");
+  document.getElementById("pw-title").textContent = t(buying ? "paywall.titleBuy" : "paywall.title");
+  document.getElementById("pw-desc").textContent = t(buying ? "paywall.descBuy" : "paywall.desc");
 
   let site = "";
   // Whether a checkout has been opened in a browser tab. Kept as state rather
@@ -6355,7 +6963,11 @@ function openPaywall() {
 
   const buy = (plan, button) => {
     button.disabled = true;
-    void api("/billing/checkout", { plan: plan.id, locale: LOCALE })
+    void api("/billing/checkout", {
+      plan: plan.id,
+      locale: LOCALE,
+      ...(plan.buyCents ? { amount: plan.buyCents } : {}),
+    })
       .then((result) => {
         if (!result || result.error || !result.url) {
           return void addNotice((result && result.error) || "could not start the checkout", "err");
@@ -6423,26 +7035,157 @@ function openPaywall() {
     );
 
     const plans = state.plans || [];
+    // payg is configured on the site, not bought here — the gateway refuses a
+    // checkout for it — so it is not a row. The account page button below is
+    // where it lives.
     const packs = plans.filter((plan) => plan.kind === "topup");
     const subs = plans.filter((plan) => plan.kind === "subscription");
-    const ordered = subscribed ? packs.concat(subs) : subs.concat(packs);
 
-    if (!ordered.length) {
+    if (!subs.length && !packs.length) {
       body.appendChild(el("div", "cn-note", t("paywall.notForSale")));
       return;
     }
 
-    const list = el("div", "pw-plans");
-    ordered.forEach((plan) => {
-      const row = el("button", "pw-plan");
+    /**
+     * What a yearly rung saves against paying monthly for the same tier.
+     *
+     * The only thing on these cards nobody can work out by looking. Monthly is
+     * one price per credit across all four tiers — buying up buys volume, not
+     * a discount — so a rate printed on those rows would be the same number
+     * four times. The year is where the money actually differs, and seeing it
+     * takes multiplying a price by twelve in your head.
+     *
+     * Computed rather than configured, so it cannot disagree with what the
+     * checkout charges. Zero is returned as nothing: Starter's year is twelve
+     * months at the same price, and a "Save 0%" badge on it would be a worse
+     * lie than silence.
+     */
+    const savingOn = (plan) => {
+      if (plan.interval !== "year" || !plan.tier) return 0;
+      const monthly = subs.find((p) => p.tier === plan.tier && p.interval === "month");
+      if (!monthly || typeof monthly.amountCents !== "number" || typeof plan.amountCents !== "number") return 0;
+      const full = monthly.amountCents * 12;
+      if (full <= 0 || plan.amountCents >= full) return 0;
+      return Math.round((1 - plan.amountCents / full) * 100);
+    };
+
+    /** One row: what it is, how many credits, and how much money. */
+    const planRow = (plan, suffix) => {
+      const row = el("button", "pw-plan" + (plan.popular ? " featured" : ""));
       row.type = "button";
-      const label = plan.kind === "topup" ? t("paywall.topUp") : t("paywall.subscribe");
-      row.appendChild(el("span", null, label + " \u00b7 " + (plan.label || plan.id)));
-      row.appendChild(el("span", "pw-plan-credits", creditsOf(plan.creditsMicro)));
+      // Two lines rather than one, because two of these sit side by side on a
+      // wide screen and the three-column row they used to be does not survive
+      // being halved. The line that decides is on top.
+      const top = el("span", "pw-plan-top");
+      const name = el("span", "pw-plan-name");
+      name.appendChild(document.createTextNode(plan.label || plan.id));
+      // The catalogue marks one rung. Saying so is the whole of the advice
+      // this dialog can give about which to pick.
+      if (plan.popular) name.appendChild(el("span", "pw-tag", t("paywall.popular")));
+      top.appendChild(name);
+      const money = moneyOf(plan.amountCents, plan.currency);
+      if (money) top.appendChild(el("span", "pw-plan-price", money + (suffix || "")));
+      row.appendChild(top);
+      // The pack's own label is already "2,000 credits", so repeating the
+      // number underneath it said the same thing twice. Subscriptions need
+      // the line — their names are tiers, not amounts.
+      // The same sentence the pricing page prints, for the same reason it
+      // prints it: "12,000 credits" does not say whether that arrives once or
+      // twelve times, and the answer is the second one. A subscription is an
+      // allowance, and a card that states a total without its period is
+      // describing a top-up.
+      const count = creditsOf(plan.creditsMicro);
+      const amount =
+        plan.kind === "subscription"
+          ? t(plan.interval === "year" ? "paywall.everyYear" : "paywall.everyMonth", { credits: count })
+          : count + " " + t("paywall.unit");
+      const saved = savingOn(plan);
+      if ((plan.label || "") !== amount || saved) {
+        const under = el("span", "pw-plan-under");
+        if ((plan.label || "") !== amount) under.appendChild(el("span", null, amount));
+        // Under the price it is about, not beside the name. The badge by the
+        // name says which rung to pick; this one says what the year costs.
+        if (saved) under.appendChild(el("span", "pw-save", t("paywall.save", { percent: saved })));
+        row.appendChild(under);
+      }
       row.onclick = () => buy(plan, row);
-      list.appendChild(row);
-    });
-    body.appendChild(list);
+      return row;
+    };
+
+    // Four tiers sold two ways came out as eight rows with four repeated
+    // names and nothing saying which was which. They are the same four
+    // offers; the interval is a choice about them, so it is a control rather
+    // than eight buttons.
+    const byInterval = { month: subs.filter((p) => p.interval === "month"),
+                         year: subs.filter((p) => p.interval === "year") };
+    const intervals = ["month", "year"].filter((k) => byInterval[k].length > 0);
+    const other = subs.filter((p) => p.interval !== "month" && p.interval !== "year");
+
+    if (subs.length) {
+      if (intervals.length > 1) {
+        const toggle = el("div", "pw-toggle");
+        intervals.forEach((key) => {
+          const tab = el("button", "pw-tab" + (key === pwInterval ? " on" : ""));
+          tab.type = "button";
+          tab.textContent = t(key === "year" ? "paywall.yearly" : "paywall.monthly");
+          tab.onclick = () => {
+            pwInterval = key;
+            render(state);
+          };
+          toggle.appendChild(tab);
+        });
+        body.appendChild(toggle);
+      }
+      const showing = intervals.length > 1 ? byInterval[pwInterval] || [] : subs;
+      const list = el("div", "pw-plans");
+      showing.concat(other).forEach((plan) => {
+        list.appendChild(planRow(plan, t(plan.interval === "year" ? "paywall.perYear" : "paywall.perMonth")));
+      });
+      body.appendChild(list);
+    }
+
+    // The one-off, at the bottom, for whoever already has a plan. A top-up
+    // covers a month that ran short rather than standing in for a subscription,
+    // and the gateway refuses one from an account with none — so without a
+    // plan this is the sentence saying so rather than rows that end in a
+    // refusal after the click. The rows come back the moment there is a
+    // subscription to top up.
+    if (packs.length && !subscribed) {
+      body.appendChild(el("div", "cn-note", t("paywall.needsPlan")));
+    } else if (packs.length) {
+      body.appendChild(el("div", "pw-sep", t("paywall.orOnce")));
+      const once = el("div", "pw-plans");
+      packs.forEach((plan) => {
+        // A pack is one rung of a ladder the catalogue already defines, and
+        // the paywall was showing the bottom one as though it were the whole
+        // offer. The presets are the amounts the catalogue means people to
+        // pick from; the rate beside them turns each into its credits, so the
+        // rows cannot disagree with what the checkout grants.
+        const ladder = plan.custom;
+        const presets = ladder && ladder.presetCents ? ladder.presetCents : [];
+        if (!presets.length) return void once.appendChild(planRow(plan, ""));
+        presets.forEach((cents) => {
+          const micro = (ladder.creditsMicroPerCent || 0) * cents;
+          once.appendChild(
+            planRow(
+              {
+                ...plan,
+                // Not the pack's own label: at $50 that would still read
+                // "2,000 credits", which is the wrong number on the button.
+                label: creditsOf(micro) + " " + t("paywall.unit"),
+                creditsMicro: micro,
+                amountCents: cents,
+                // What the checkout is told. Absent on a rung that is the
+                // pack's own price, so that purchase stays the plain one.
+                ...(cents === plan.amountCents ? {} : { buyCents: cents }),
+              },
+              "",
+            ),
+          );
+        });
+      });
+      body.appendChild(once);
+    }
     if (awaiting) body.appendChild(el("div", "cn-note", t("paywall.opened")));
   };
 
@@ -6781,6 +7524,18 @@ async function showSettings() {
   });
   field(t("usage.title"), t("usage.value"), t("usage.hint"), openUsage);
 
+  /*
+   * 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.
+   */
+  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);
+  }
+
   rulesField(settings.permissions || {});
   auditField(settings.audit || { on: true, source: "user" });
   filesField(settings.settingsPaths);
@@ -7632,6 +8387,157 @@ async function refreshRoutineCount() {
 
 /** Sidebar entries that open a view of their own rather than a conversation. */
 const PANEL_NAV = new Set(["nav-artifacts", "nav-models", "nav-routines", "nav-settings"]);
+const pluginPages = new Map();
+async function refreshPluginPages() {
+  const session = activeId;
+  const result = await getJson("/plugin-pages?session=" + encodeURIComponent(session || ""));
+  if (activeId !== session) return;
+  for (const id of pluginPages.keys()) { document.getElementById("nav-plugin-" + id)?.remove(); PANEL_NAV.delete("nav-plugin-" + id); }
+  pluginPages.clear();
+  /*
+   * Remembered, not put in the sidebar.
+   *
+   * A plugin page is reached from a row in Settings instead. The sidebar is
+   * the set of places a session goes back to, and Memory is not one of them —
+   * it is read now and then and adjusted less often than that, which is the
+   * same reason usage lives behind a Settings row rather than beside Models.
+   * Every one of these becomes a SUB_PANEL, so the Settings row it came from
+   * stays lit while it is open.
+   */
+  for (const page of result.pages || []) {
+    if (page.renderer !== "memory") continue;
+    pluginPages.set(page.id, page);
+    SUB_PANELS["nav-plugin-" + page.id] = "nav-settings";
+  }
+}
+
+/** Ids for label/control pairs; only has to be unique within the document. */
+let fieldSeq = 0;
+
+async function showMemoryPage(id) {
+  const session = activeId;
+  const result = await getJson("/plugin-page?id=" + encodeURIComponent(id) + "&session=" + encodeURIComponent(session || ""));
+  if (shownPanel !== "nav-plugin-" + id || activeId !== session) return;
+  panelBody.replaceChildren(); panelNotes.replaceChildren();
+  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));
+  const act = async (input) => {
+    try {
+      const reply = await api("/plugin-page", { page: id, session, input }, 120000);
+      if (reply.error) throw new Error(reply.error);
+      await showMemoryPage(id);
+    } catch (error) {
+      if (activeId === session && shownPanel === "nav-plugin-" + id) {
+        await showMemoryPage(id);
+        panelBody.appendChild(panelError(error.message || t("memory.failed")));
+      }
+    }
+  };
+  const controls = el("div", ""); controls.style.cssText = "display:flex;gap:12px;align-items:center;margin:16px 0";
+  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);
+  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);
+  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);
+    }
+    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);
+    }
+    panel.appendChild(row);
+  }
+  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(", ");
+    /*
+     * A label each, and a line saying what the field is for.
+     *
+     * Three boxes with only placeholders said nothing at all once they had
+     * content in them, which is every note anyone opens to edit. And the fact
+     * worth knowing here is not which box is which — it is that only the
+     * summary is ever in front of the model, so a vague one makes the note
+     * unfindable no matter how good the body is.
+     */
+    const labelled = (control, label, hint) => {
+      const group = el("div", "memory-field");
+      const name = el("label", "memory-label", label);
+      control.id = "mem-" + (fieldSeq += 1);
+      name.htmlFor = control.id;
+      group.appendChild(name);
+      if (hint) group.appendChild(el("div", "muted small", hint));
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box";
+      group.appendChild(control);
+      return group;
+    };
+    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")));
+    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
+    // things this form can do, and stacking them read as two separate sections.
+    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;
+    };
+    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);
+  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")));
+    for (const note of entries) {
+      const row = el("details", "row-card memory-note");
+      /*
+       * Summary and id on one line, the way a settings row is built.
+       *
+       * The id is how the model refers to this note and how a person quotes it
+       * in a bug report, so it stays visible — but it is a handle, not content,
+       * and on a line of its own it read as the first thing in the note. On the
+       * same line as the summary it also stops being a third left edge: the
+       * disclosure marker indents the summary text, so anything under it lined
+       * up with neither the marker nor the fields below.
+       */
+      const head = el("summary", "");
+      head.appendChild(el("span", "chev"));
+      head.appendChild(el("span", "memory-note-name", note.summary));
+      head.appendChild(el("span", "memory-id mono", note.id));
+      row.appendChild(head);
+      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 }); };
+      row.appendChild(editor(note, remove));
+      list.appendChild(row);
+    }
+  };
+  search.oninput = draw; draw();
+}
 
 /**
  * Panels reached from a row inside another panel rather than from the sidebar.
@@ -7721,6 +8627,7 @@ function paintProject() {
 
 /** Repaint whichever panel is on screen, if one is. */
 function repaintPanel() {
+  void refreshPluginPages();
   if (panelView.hidden) return;
   // Off what was opened, not off which sidebar row is lit: a sub-panel lights
   // the row it was reached from, so asking the sidebar would answer "settings"
@@ -7730,6 +8637,7 @@ 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?.startsWith("nav-plugin-")) void showMemoryPage(shownPanel.slice("nav-plugin-".length));
 }
 
 async function loadProjects() {
@@ -8277,6 +9185,7 @@ void (async () => {
   }
   await loadSessions();
   await refreshRoutineCount();
+  await refreshPluginPages();
   await refreshModelCount();
   await loadAccount();
   input.focus();