@oharness/server 0.4.0 → 0.5.0

package/dist/page.js

@@ -205,6 +205,14 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 }
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
 :root[data-theme="dark"] .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
+/* The account menu is as wide as the account row it opens from, edge to edge.
+   Sized for a session row's three commands, it came out a third narrower than
+   the row under it, so the two read as unrelated boxes; the width is set on
+   open from the row itself, and this lifts the caps that would clamp it. */
+.row-menu.fit-anchor{min-width:0;max-width:none}
+.row-menu.account-menu{
+  padding:10px;max-height:calc(100vh - 24px);overflow-y:auto;
+}
 /*
  * Destructive is carried by the label's colour, not by a filled red bar. A
  * solid block reads as an alert that has already happened rather than as a
@@ -223,8 +231,24 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .row-menu .menu-head{
   padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
 }
+/* A section label, not a surface: the fill belongs to the account's facts
+   above, and on a one-word caption it read as a second card pressed against
+   Dashboard. Space above it does the separating instead. */
+.row-menu .menu-head.menu-section{
+  margin:10px 0 2px;padding:4px 10px;background:transparent;
+}
 .menu-head-main{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
 .menu-head-sub{margin-top:2px;font-size:12px;color:var(--dim)}
+.menu-billing-actions{display:flex;gap:7px;margin-top:10px}
+.menu-billing-action{
+  flex:1;min-height:30px;padding:6px 10px;border:0;border-radius:7px;
+  background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);
+  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
+}
+.menu-billing-action:hover{background:var(--hover)}
+.menu-billing-action.primary{background:var(--accent);color:var(--bg);box-shadow:none}
+.menu-billing-action.primary:hover{opacity:.88}
+.menu-billing-action:disabled{cursor:not-allowed;opacity:.45}
 /* One entry carrying the accent, for the one that is an offer rather than a
    destination. var(--field) was too close to the menu's own surface to read as
    anything in the light theme — a highlight nobody can see is worse than none,
@@ -411,6 +435,11 @@ svg.vglyph{width:15px;height:15px;opacity:1;
    the composer bar's 2px does not provide. */
 .menu-group .vmark,.menu-group .vmono,.menu-group .vglyph{width:13px;height:13px;font-size:8px}
 .picker-btn .vmark,.picker-btn .vmono,.picker-btn .vglyph{width:14px;height:14px;margin-right:5px}
+/* The mode's glyph: a bare stroke, so it takes the row's icon weight and, on
+   the bar, the vendor mark's size and gap so the two pickers line up. */
+.menu-item .mode-mark{opacity:.7}
+.menu-item.on .mode-mark,.menu-item.cursor .mode-mark{opacity:1}
+.picker-btn .mode-mark{width:14px;height:14px;margin-right:5px;opacity:.85}
 /* On a card the row is a title over a line of description, so the mark is
    sized against the block rather than against the type, and sits on the
    title's line instead of floating in the middle of the two. */
@@ -492,8 +521,18 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
  * Tabs are sessions; the drawer beside them shows one artifact whichever tab
  * is in front. Spanning both left a band of empty chrome above the drawer that
  * belonged to neither.
+ *
+ * The strip is the shelf the tabs stand on, in the sidebar's grey, and the
+ * front tab is cut from the page under it — the shape every browser uses.
+ * It used to be the other way round: a transparent strip on the white
+ * transcript with the front tab as a grey pill, so the row read as part of
+ * the conversation rather than as the chrome above it. No bottom padding,
+ * or a grey line would sit between the front tab and the page it is part of.
  */
-#tabs{display:flex;align-items:center;gap:2px;padding:0 12px 2px;overflow-x:auto;flex:0 0 auto}
+#tabs{
+  display:flex;align-items:center;gap:2px;padding:6px 12px 0;overflow-x:auto;flex:0 0 auto;
+  background:var(--panel);
+}
 #tabs:empty{display:none}
 .tab{
   display:flex;align-items:center;gap:7px;max-width:190px;height:30px;padding:0 6px 0 10px;
@@ -501,7 +540,7 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   font:inherit;font-size:12.5px;cursor:pointer;flex:0 0 auto;
 }
 .tab:hover{background:var(--hover);color:var(--fg)}
-.tab.on{background:var(--panel);color:var(--fg)}
+.tab.on{background:var(--bg);color:var(--fg)}
 .tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Which project a tab is in, shown only when the open tabs span more than one:
    two transcripts called "Untitled" in different trees are otherwise the same
@@ -562,7 +601,7 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
   border-left:2px solid transparent;
 }
 .file:hover{background:var(--bg)}
-.file.active{background:var(--bg);border-left-color:var(--accent)}
+.file.active{background:var(--sel)}
 .file .p{font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 .file .n{font-size:11px;font-family:ui-monospace,monospace}
 .file .plus{color:var(--ok)} .file .minus{color:var(--err)}
@@ -638,7 +677,7 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 /* Disabled means "not yet", not "never": it stays legible, and the row says
    why. Hiding it instead left people looking for a control that exists. */
 .switch:disabled{opacity:.45;cursor:default}
-.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.switch:focus-visible{outline:none;filter:brightness(.9)}
 .share-btn{
   border:1px solid var(--line);background:var(--field);color:var(--fg);
   border-radius:5px;padding:2px 8px;font:inherit;font-size:11px;cursor:pointer;
@@ -676,7 +715,7 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
    transcript look like a dialog, and next to the tool cards it sits between —
    which have none — it was the only thing drawing a box around itself. */
 .art-card:hover{background:var(--sel)}
-.art-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.art-card:focus-visible{outline:none;background:var(--sel)}
 .art-card-mark{
   display:flex;align-items:center;justify-content:center;flex:0 0 auto;
   width:28px;height:28px;border-radius:7px;background:var(--field);color:var(--fg);
@@ -798,10 +837,10 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
 /* Filled, not outlined — the same shape .art-search uses. A box drawn with a
  * line around it is the one thing this site does not do, and three of them
  * stacked made the editor look like a form bolted onto the page rather than
- * part of the note. The focus ring stays: that is the one border worth having,
- * and it appears only while the field is being used. */
+ * part of the note. Focus deepens the fill rather than drawing a ring: no
+ * border marks a focused thing anywhere here. */
 .memory-panel input,.memory-panel textarea{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit;line-height:1.5;box-sizing:border-box}
-.memory-panel input:focus,.memory-panel textarea:focus{outline:2px solid var(--ring)}
+.memory-panel input:focus,.memory-panel textarea:focus{outline:none;background:var(--field-focus)}
 .memory-panel textarea{resize:vertical;min-height:130px}
 .memory-panel summary{cursor:pointer;padding:6px 0;font-weight:500}
 .memory-panel .memory-path{overflow-wrap:anywhere;color:var(--dim)}
@@ -845,7 +884,7 @@ details.setting[open]>summary{border-radius:10px 10px 0 0}
 details.setting[open]>summary .chev{transform:rotate(90deg)}
 details.setting>summary .ghost{flex:0 0 auto;height:26px;font-size:12px;margin-left:0}
 details.setting>summary .switch{flex:0 0 auto}
-details.setting>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 /*
  * The artifacts panel: a search field over the whole catalogue.
  *
@@ -1001,10 +1040,20 @@ details.provider>summary:hover{background:var(--hover)}
    separate the account from the list — a hairline as well is a second answer
    to a question the whitespace had settled, and it is the only line left in a
    sidebar that has none. */
+/* A column, not a row. Signed in this used to hold the account button and
+   nothing else, and now a subscriber gets a Top up row above it — the thing
+   a subscriber does most often here, which had been the fourth entry of a
+   menu behind the name. */
 #account{
-  display:flex;align-items:center;gap:8px;
+  display:flex;flex-direction:column;align-items:stretch;gap:2px;
   flex:0 0 auto;padding:8px;
 }
+/* 10px across rather than the nav rows' 8: the account row under it starts
+   with a 24px avatar inset 6px, and at 10px this row's 16px icon lands on
+   the avatar's centre line rather than 4px to the left of it. The balance
+   sits in the aside slot the nav rows keep for a count, because it is what
+   decides whether to click. */
+#account .topup{width:100%;padding:0 10px}
 /* Signed out this holds one nav row and nothing else, so the padding that
    frames an account goes away and the row sits flush with the ones above it.
    8px across, matching the nav list above, so the icon lands on the same
@@ -1015,7 +1064,8 @@ details.provider>summary:hover{background:var(--hover)}
    taller than the nav rows above: a footer is allowed to be the roomiest row
    in the sidebar, and this one has to hold a click aimed at from the corner. */
 #account.out{padding:4px 8px 10px}
-#account.out .nav-item{width:100%;height:34px}
+#account .nav-item{width:100%}
+#account.out .nav-item{height:34px}
 /* The whole row is the control. It used to be a label with a Sign out button
    parked beside it, which gave the rarest action in the sidebar the most
    reliable target in it, and left the name — the thing worth clicking, because
@@ -1083,15 +1133,15 @@ button.signin-site:disabled{opacity:.4;cursor:default}
  * The site's pricing page settled this and says why in its own stylesheet: the
  * offers should read as columns of type rather than as a row of frames, and on
  * a screen that is mostly numbers the frames are the loudest thing on it. So
- * the fill goes quiet and the recommended rung keeps the one outline, which is
- * what makes it a mark rather than a shade somebody has to notice.
+ * the fill goes quiet and the recommended rung takes a deeper fill. No outline
+ * marks anything here, the recommended rung included.
  */
 button.pw-plan{
   display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
   min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:10px;
   background:var(--field);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
 }
-button.pw-plan.featured{border-color:var(--border-strong,var(--fg));background:var(--sel)}
+button.pw-plan.featured{background:var(--sel)}
 .pw-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
 button.pw-plan:hover{background:var(--sel)}
 button.pw-plan.featured:hover{background:var(--hover)}
@@ -1612,7 +1662,7 @@ textarea.boxed{
   padding:7px 9px;resize:vertical;min-height:0;font:inherit;font-size:12px;
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
 }
-textarea.boxed:focus{border-color:var(--dim)}
+textarea.boxed:focus{outline:none;background:var(--field-focus)}
 .composer-bar{display:flex;align-items:center;gap:6px;margin-top:10px}
 .composer.drag{background:var(--field-focus);outline:2px dashed var(--line);outline-offset:-6px}
 .icon-btn{
@@ -1694,6 +1744,13 @@ textarea.boxed:focus{border-color:var(--dim)}
    the arrow keys. A ring around a popup that was just clicked open says
    nothing the row highlight is not already saying. */
 .menu:focus{outline:none}
+/* No ring and no border marks a focused or selected thing anywhere in the app.
+   That includes the browser's own focus outline, which drew a blue ring round
+   the account button while its menu was open. Keyboard focus is carried by a
+   fill instead; the zero-specificity selector leaves every control that
+   already paints its own background alone. */
+:focus,:focus-visible{outline:none}
+:where(button,a,summary,[role="button"],[tabindex]):focus-visible{background-color:var(--hover)}
 /* The triangle the group headers use, turned on a row that leads somewhere:
    the + opens onto four offers, and three of them go one screen deeper. */
 .menu-item .chev{
@@ -1805,14 +1862,134 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   padding:8px 18px 16px;font-size:11.5px;line-height:1.6;color:var(--dim);min-height:34px;
 }
 
+/*
+ * Phone-only chrome, declared before the breakpoint that shows it: a base
+ * rule written after the media query wins the cascade, which is how the
+ * burger spent a release at display:none on every width.
+ */
+#burger{
+  display:none;width:36px;height:36px;margin-left:-8px;border:0;border-radius:8px;
+  background:none;color:var(--fg);font:inherit;font-size:18px;cursor:pointer;place-items:center;
+}
+#burger:hover{background:var(--hover)}
+#nav-close{
+  display:none;width:32px;height:32px;margin-left:auto;border:0;border-radius:8px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;place-items:center;
+}
+#nav-close svg{width:14px;height:14px}
+#nav-close:hover{background:var(--hover);color:var(--fg)}
+#scrim{display:none;position:fixed;inset:0;z-index:19;background:#00000059}
+#review-close{
+  display:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
+  color:var(--fg);cursor:pointer;padding:0;place-items:center;margin-left:8px;
+}
+#review-close svg{width:16px;height:16px}
+
+/*
+ * A phone.
+ *
+ * The desktop layout is three columns that share one window; a phone has room
+ * for one of them at a time. The sidebar becomes a drawer over the transcript,
+ * the review and artifact panes take the whole screen while they are open,
+ * and the composer's bar is split in two: where the session runs and what it
+ * may do sit above the text, the model and the send button below it.
+ */
 @media (max-width:760px){
-  aside{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .2s}
-  aside.open{transform:none}
-  #burger{display:block}
-  /* The burger lives here, so the bar has a reason to exist again. */
-  #top{padding:10px 18px}
+  body>aside{
+    position:fixed;inset:0 auto 0 0;z-index:20;width:min(280px,84vw);flex-basis:auto;
+    transform:translateX(-100%);transition:transform .2s;
+    padding-bottom:env(safe-area-inset-bottom);
+  }
+  body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
+  body.nav-open #scrim{display:block}
+  #nav-close{display:grid}
+  #burger{display:grid}
+  #top{padding:6px 10px}
+  #top:has(#changes-btn:not([hidden])){padding:6px 10px}
+
+  /* Both panes are the screen while open, and each gets a way out of its own:
+     the top bar with the changes button is underneath them. */
+  #review.open,#shelf.open{
+    position:fixed;inset:0;z-index:50;width:100%;height:100%;flex:none;transition:none;
+  }
+  #review-head{padding:10px 10px 8px 16px}
+  #review-close{display:grid}
+  #files{max-height:40%}
+  #shelf-bar{flex-wrap:wrap;row-gap:4px}
+
+  #log{padding:16px 14px 8px}
+  #panel-view{padding:20px 14px 24px}
+  .empty-brand{gap:12px;margin-bottom:22px}
+  .brand-mark,.brand-mark svg{width:48px;height:48px}
+  .brand-name{font-size:30px}
+  #empty{margin-top:4vh}
+
+  /* The composer. The bar's children become items of the box itself so they
+     can be dealt into two rows around the field; the bar element stays in the
+     markup for the desktop layout and the scripts that hang menus off it. */
+  form{padding:6px 12px calc(12px + env(safe-area-inset-bottom))}
+  .composer{
+    position:relative;display:flex;flex-wrap:wrap;align-items:center;
+    column-gap:6px;row-gap:8px;padding:10px 12px 10px;
+  }
+  .composer-bar{display:contents}
+  #attachments{order:-3;flex:0 0 100%;margin-bottom:0}
+  #workspace-picker,#mode-picker{order:-2}
+  .input-wrap{order:-1;flex:0 0 100%}
+  .composer .picker{position:static;min-width:0}
+  .composer .picker-btn{max-width:100%;height:32px}
+  #send,#stop{flex:0 0 auto}
+  textarea{max-height:32dvh}
+  /* Menus span the box rather than hang off one picker: from a picker on the
+     right they otherwise open past the edge, where overflow:hidden loses them. */
+  .composer .menu,#attach-picker .menu{
+    left:0;right:0;width:auto;min-width:0;max-width:none;bottom:calc(100% + 8px);
+  }
+  .menu-body{max-height:min(50dvh,340px)}
+  #jump{right:14px;bottom:160px}
+
+  /* Dialogs, with the keyboard up: vh is the height without it. */
+  #market{max-height:82dvh}
+  #provider-picker,#browse{max-height:76dvh}
+  #project-picker{max-height:70dvh}
+  .mk-grid{grid-template-columns:minmax(0,1fr)}
+  .mk-search{padding-right:44px}
+  .ask-body{max-height:min(260px,40dvh)}
+  .ask-line .n{flex:0 0 28px;padding-right:6px}
+}
+
+/*
+ * A finger, not a pointer.
+ *
+ * Hover reveals nothing on a touch screen, so what the desktop shows on hover
+ * is shown outright; and a field under 16px makes iOS zoom the page when it
+ * is focused, so every field is 16px here whatever it is elsewhere.
+ */
+@media (hover:none) and (pointer:coarse){
+  .session .more,.fold-row .more{display:grid;width:28px;height:28px}
+  .proj-forget{opacity:1}
+  .actions{position:static;opacity:1;margin-top:4px}
+  .turn{margin-bottom:14px}
+  .act{padding:6px 10px}
+  .tab .x{opacity:.55;width:24px;height:24px}
+  #tab-add{width:32px;height:32px}
+  .tab{height:34px}
+  .nav-item,.session,.fold,.project{height:38px}
+  .show-more{height:32px}
+  .icon-btn{width:34px;height:34px}
+  button.primary{width:36px;height:36px}
+  button.ghost,a.ghost{height:36px}
+  .att .x{padding:4px 6px}
+  .cn-x,.mk-close,.theme-btn{width:36px;height:36px}
+  .cn-why{width:28px;height:28px}
+  .switch{width:40px;height:24px}
+  .dlg-actions button{padding:10px 14px}
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea,
+  .menu-search input,.mk-search,.art-search,.keyrow input,.cn-body input,.pp-head input,
+  textarea.boxed{font-size:16px}
+  /* The chip layer under the field has to keep the field's metrics. */
+  #input-mirror{font-size:16px}
 }
-#burger{display:none;background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;font-size:18px}
 `;
 const APP_SCRIPT = String.raw `
 const STRINGS = window.__STRINGS;
@@ -1838,6 +2015,10 @@ if (window.oharness && window.oharness.insetTitlebar) {
 /** Whether this page is the desktop window rather than a browser tab. */
 const IS_DESKTOP = Boolean(window.oharness && window.oharness.desktop);
 
+/** Whether the page is laid out for a phone right now; the stylesheet's breakpoint. */
+const PHONE_QUERY = window.matchMedia("(max-width:760px)");
+const isPhone = () => PHONE_QUERY.matches;
+
 // --- language --------------------------------------------------------------
 
 /**
@@ -1944,6 +2125,31 @@ const ICON_PATHS = {
     "M14 10a1.33 1.33 0 0 1-1.33 1.33H4.67L2 14V3.33A1.33 1.33 0 0 1 3.33 2h9.34" +
       "A1.33 1.33 0 0 1 14 3.33Z",
   ],
+  // The five permission modes. Five short words in a column look alike until
+  // they are read; a glyph in front of each lets the one in use be found by
+  // shape from the bar, the way the vendor mark does for the model.
+  //
+  // Manual is by hand, and a raised palm is also the sign for "wait": three
+  // fingers, a thumb, and the heel of the hand in one sweep. Four fingers
+  // would be the honest count, but at fifteen pixels the fourth turns the
+  // top edge into a comb.
+  modeAsk: [
+    "M12 7.4V4a1.33 1.33 0 0 0-2.67 0",
+    "M9.33 6.7V2.7a1.33 1.33 0 0 0-2.66 0v1.3",
+    "M6.67 7V4A1.33 1.33 0 0 0 4 4v5.33",
+    "M12 5.33a1.33 1.33 0 1 1 2.67 0v4a5.33 5.33 0 0 1-5.34 5.34H8" +
+      "c-1.87 0-3-.58-4-1.56l-2.4-2.4a1.33 1.33 0 0 1 1.89-1.89L4.67 10",
+  ],
+  // Accept edits lets the pencil through.
+  modeEdits: ["M11.3 2.7 13.3 4.7 5.3 12.7H3.3v-2Z", "M9.8 4.2l2 2"],
+  // Plan is read-only: an eye, which looks and does not touch.
+  modePlan: ["M1.6 8s2.4-4.4 6.4-4.4S14.4 8 14.4 8s-2.4 4.4-6.4 4.4S1.6 8 1.6 8Z"],
+  modePlanCircles: [[8, 8, 2.1]],
+  // Auto waves the routine through: a bolt.
+  modeAuto: ["M8.8 1.6 3.6 9h4l-.7 5.4L12.4 7h-4Z"],
+  // Bypass leaves the gate open: a padlock with its shackle swung clear.
+  modeBypass: ["M5.4 7.4V5.2a2.6 2.6 0 0 1 5-1"],
+  modeBypassRects: [[3.2, 7.4, 9.6, 6.2, 1.6]],
 };
 
 function svgIcon(name, extra) {
@@ -2468,12 +2674,16 @@ function makePicker(id, onPick, extra) {
   return api;
 }
 
+// Drawn glyphs rather than vendor tiles: a mode is chrome, not a party being
+// paid, so it gets the bare stroke every other menu icon has.
+const modeMark = (icon) => (extra) => svgIcon(icon, "mode-mark" + (extra ? " " + extra : ""));
+
 const MODES = [
-  { value: "default", label: "Manual", sub: "ask first" },
-  { value: "acceptEdits", label: "Accept edits", sub: "edits pass" },
-  { value: "plan", label: "Plan", sub: "read-only" },
-  { value: "auto", label: "Auto", sub: "routine passes" },
-  { value: "bypassPermissions", label: "Bypass", sub: "all pass" },
+  { value: "default", label: "Manual", sub: "ask first", mark: modeMark("modeAsk") },
+  { value: "acceptEdits", label: "Accept edits", sub: "edits pass", mark: modeMark("modeEdits") },
+  { value: "plan", label: "Plan", sub: "read-only", mark: modeMark("modePlan") },
+  { value: "auto", label: "Auto", sub: "routine passes", mark: modeMark("modeAuto") },
+  { value: "bypassPermissions", label: "Bypass", sub: "all pass", mark: modeMark("modeBypass") },
 ];
 
 const modelPicker = makePicker(
@@ -3493,6 +3703,8 @@ function closeRowMenu() {
   menuRow = null;
   rowMenu.hidden = true;
   rowMenu.replaceChildren();
+  rowMenu.classList.remove("fit-anchor", "account-menu");
+  rowMenu.style.width = "";
 }
 
 /**
@@ -3505,8 +3717,9 @@ function placeRowMenu(button) {
   const anchor = button.getBoundingClientRect();
   const box = rowMenu.getBoundingClientRect();
   const left = Math.min(anchor.left, window.innerWidth - box.width - 8);
-  const below = anchor.bottom + 4;
-  const top = below + box.height > window.innerHeight - 8 ? anchor.top - box.height - 4 : below;
+  const gap = rowMenu.classList.contains("account-menu") ? 8 : 4;
+  const below = anchor.bottom + gap;
+  const top = below + box.height > window.innerHeight - 8 ? anchor.top - box.height - gap : below;
   rowMenu.style.left = Math.max(8, left) + "px";
   rowMenu.style.top = Math.max(8, top) + "px";
 }
@@ -4176,7 +4389,9 @@ events.onmessage = (message) => {
       if (wasSelected) void showArtifact(event.artifact.id);
       // First artifact of the session opens the drawer, the way the first file
       // change makes the review button appear. Later ones do not steal focus.
-      if (artifacts.length === 1) shelf.classList.add("open");
+      // Not on a phone, where the drawer is the whole screen: it would cover
+      // the reply that produced the artifact.
+      if (artifacts.length === 1 && !isPhone()) shelf.classList.add("open");
       break;
     }
 
@@ -4721,7 +4936,7 @@ function attachRows() {
       // draws; a plug in front of three names is three rows told apart by
       // reading.
       mark: kind === "connectors" ? entry.name : undefined,
-      label: entry.name,
+      label: entry.title || entry.name,
       note: entry.description || "",
       ref: {
         kind: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "connector",
@@ -4828,13 +5043,14 @@ function attachRows() {
       .filter((plugin) =>
         !query ||
         plugin.name.toLowerCase().includes(query) ||
+        (plugin.title || "").toLowerCase().includes(query) ||
         (plugin.description || "").toLowerCase().includes(query),
       )
       .slice(0, 4)
       .map((plugin) => ({
         type: "plugin",
         icon: "plugin",
-        label: plugin.name,
+        label: plugin.title || plugin.name,
         note: plugin.description || "",
         ref: { kind: "plugin", value: plugin.name, label: plugin.name },
       }));
@@ -5140,6 +5356,7 @@ function paintMarket() {
   const hit = (entry) =>
     !query ||
     (entry.name || "").toLowerCase().includes(query) ||
+    (entry.title || "").toLowerCase().includes(query) ||
     (entry.description || "").toLowerCase().includes(query) ||
     (entry.label || "").toLowerCase().includes(query);
   const installed = (
@@ -5256,7 +5473,9 @@ function installedRow(entry) {
   row.appendChild(isPlugin ? svgIcon("plugin") : isSkill ? svgIcon("skill") : connectorMark(entry.name, entry.name));
 
   const naming = el("div", "mk-naming");
-  const heading = el("div", "mk-name", entry.name);
+  // A plugin may carry a display title over its id; the id is still what a
+  // reference resolves by, so it is the title that is painted and nothing else.
+  const heading = el("div", "mk-name", entry.title || entry.name);
   /**
    * Where it came from, when that is not "this machine".
    *
@@ -5718,7 +5937,8 @@ function openCommands(command) {
   attachPicker.classList.add("open");
   const bar = attachPicker.getBoundingClientRect().top;
   const box = composerBox.getBoundingClientRect().top;
-  attachMenu.style.bottom = "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
   paintAttachMenu();
 }
 
@@ -5775,7 +5995,8 @@ function openMention(mention) {
   // the sentence it is going into.
   const bar = attachPicker.getBoundingClientRect().top;
   const box = composerBox.getBoundingClientRect().top;
-  attachMenu.style.bottom = "calc(100% + " + Math.round(bar - box + 14) + "px)";
+  // On a phone the menu is positioned from the box itself by the stylesheet.
+  attachMenu.style.bottom = isPhone() ? "" : "calc(100% + " + Math.round(bar - box + 14) + "px)";
   paintAttachMenu();
   searchMentionFiles();
 }
@@ -5924,8 +6145,50 @@ stopBtn.addEventListener("click", () => void api("/interrupt", { session: active
 // almost every time, and a dialog in front of every new session charges the
 // common case for the rare one.
 document.getElementById("new").addEventListener("click", () => void switchTo({ action: "new" }));
+/**
+ * The sidebar as a drawer, on a phone.
+ *
+ * Open from the burger, closed from the scrim, the mark in its own corner,
+ * Escape, or by choosing anything in it: a drawer that stayed over the
+ * transcript after a session was picked hid the very thing that was picked.
+ */
+const sidebar = document.querySelector("body > aside");
+function setNavOpen(open) {
+  sidebar.classList.toggle("open", open);
+  document.body.classList.toggle("nav-open", open);
+}
+function closeNav() {
+  if (sidebar.classList.contains("open")) setNavOpen(false);
+}
 document.getElementById("burger").addEventListener("click", () =>
-  document.querySelector("aside").classList.toggle("open"));
+  setNavOpen(!sidebar.classList.contains("open")));
+document.getElementById("nav-close").addEventListener("click", () => setNavOpen(false));
+document.getElementById("scrim").addEventListener("click", () => setNavOpen(false));
+sidebar.addEventListener("click", (e) => {
+  if (!isPhone() || e.target.closest(".more")) return;
+  if (e.target.closest(".session, .nav-item, .project")) closeNav();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && sidebar.classList.contains("open")) closeNav();
+});
+document.getElementById("review-close").addEventListener("click", () =>
+  review.classList.remove("open"));
+
+// The keyboard takes the bottom of the screen and iOS does not shrink the
+// layout to match, so the composer would sit under it. The body follows the
+// visible viewport instead, on phones only.
+if (window.visualViewport) {
+  const followKeyboard = () => {
+    if (!isPhone()) {
+      document.body.style.height = "";
+      return;
+    }
+    document.body.style.height = Math.round(window.visualViewport.height) + "px";
+    window.scrollTo(0, 0);
+  };
+  window.visualViewport.addEventListener("resize", followKeyboard);
+  window.addEventListener("resize", followKeyboard);
+}
 
 
 // --- review pane (the Codex-shaped part) ----------------------------------
@@ -7498,6 +7761,31 @@ function discoverNow(providerId) {
   });
 }
 
+/** A plus in a ring: adding credits. Drawn like the sidebar's other line icons. */
+function iconTopUp() {
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("class", "ico");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const ring = document.createElementNS(NS, "circle");
+  ring.setAttribute("cx", "8");
+  ring.setAttribute("cy", "8");
+  ring.setAttribute("r", "6.67");
+  svg.appendChild(ring);
+  for (const d of ["M8 5.33v5.34", "M5.33 8h5.34"]) {
+    const path = document.createElementNS(NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
 /** A person, drawn to match the sidebar's other 16px line icons. */
 function iconPerson() {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -7535,6 +7823,15 @@ function iconPerson() {
  * and none of those can be hosted in a local window — they keep working here
  * precisely because this does not reimplement them.
  */
+/**
+ * The teams the account is on, as the last account load found them.
+ *
+ * Kept here so the paywall can name a team by its id without a second
+ * request: the id is what the billing answer carries, and the name is what
+ * a person reads.
+ */
+let knownTeams = [];
+
 async function loadAccount() {
   const host = document.getElementById("account");
   if (!host) return;
@@ -7599,6 +7896,18 @@ async function loadAccount() {
   // Whether there is a shop at all. A self-hosted gateway sells nothing, and
   // an entry that opens a paywall with no plans in it is worse than no entry.
   let sellsCredits = false;
+  // Whether the plan is live. This decides which billing action is primary in
+  // the account card: Subscribe before a plan, Top up afterwards.
+  let subscribed = false;
+  // The team this machine bills to, once the gateway has said what it has.
+  // A team the account was removed from comes back refused, and the line
+  // says so rather than showing a number it could not read.
+  let teamLine = null;
+  knownTeams = Array.isArray(body.teams) ? body.teams : [];
+  const teamNameOf = (id) => {
+    const found = knownTeams.find((team) => team.id === id);
+    return found ? found.name : t("account.teamUnnamed");
+  };
   void getJson("/billing").then((state) => {
     if (!state || !state.signedIn || state.unavailable) return;
     sellsCredits = true;
@@ -7607,8 +7916,28 @@ async function loadAccount() {
     }
     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),
+          });
+    }
   });
 
+  // Switch whose credits the next call spends. Said out loud, because the
+  // only other sign is a different number in this menu next time it opens.
+  const billTo = (id) => {
+    closeRowMenu();
+    void api("/team", { team: id }).then((result) => {
+      if (!result || result.error) return void addNotice((result && result.error) || "could not switch", "err");
+      addNotice(id ? t("account.usingTeam", { team: teamNameOf(id) }) : t("account.usingOwn"));
+      void loadAccount();
+    });
+  };
+
   row.addEventListener("click", (e) => {
     e.stopPropagation();
     if (menuRow === row) return closeRowMenu();
@@ -7617,36 +7946,79 @@ 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) {
+    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));
-      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: () => {
+      // 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 (teamLine) head.appendChild(el("div", "menu-head-sub", teamLine));
+      if (sellsCredits) {
+        const actions = el("div", "menu-billing-actions");
+        if (!subscribed) {
+          const subscribe = el("button", "menu-billing-action primary", t("paywall.subscribe"));
+          subscribe.type = "button";
+          subscribe.addEventListener("click", () => {
             closeRowMenu();
             openPaywall(true);
-          },
-        }),
-      );
+          });
+          actions.appendChild(subscribe);
+        }
+        const topUp = el("button", "menu-billing-action" + (subscribed ? " primary" : ""), t("paywall.topUp"));
+        topUp.type = "button";
+        topUp.disabled = !subscribed;
+        if (!subscribed) topUp.title = t("paywall.needsPlan");
+        topUp.addEventListener("click", () => {
+          closeRowMenu();
+          openPaywall(true);
+        });
+        actions.appendChild(topUp);
+        head.appendChild(actions);
+      }
+      items.push(head);
     }
+    // The dashboard straight under the balance it explains, and above the
+    // workspace list, which is a choice rather than a destination.
     items.push(
       menuItem(t("account.dashboard"), {
         run: () => {
           closeRowMenu();
-          // window.open, so the desktop build hands this to the real browser
-          // rather than loading the site inside the window the agent runs in.
           if (body.site) window.open(body.site + "/" + LOCALE + "/dashboard", "_blank", "noopener");
         },
       }),
+    );
+    // Whose credits the next call spends: Personal, or a team the account is
+    // on, the current one ticked the way the model menu ticks its choice.
+    // Only once there is a team to choose, since a list of one is no choice.
+    if (knownTeams.length) {
+      items.push(el("div", "menu-head menu-section", t("account.workspace")));
+      const choice = (label, id) => {
+        const chosen = (body.team || null) === id;
+        const item = el("button", "menu-item" + (chosen ? " on" : ""));
+        item.type = "button";
+        item.appendChild(el("span", "tick", "\u2713"));
+        item.appendChild(el("span", "menu-label", label));
+        item.addEventListener("click", () => (chosen ? closeRowMenu() : billTo(id)));
+        return item;
+      };
+      items.push(choice(t("account.personal"), null));
+      knownTeams.forEach((team) => items.push(choice(team.name, team.id)));
+    }
+    // The way to a workspace at all, for everyone signed in: Create a team for an
+    // account on none, Manage workspaces once there is one. Both are the team page
+    // on the site, in the real browser, where a team is started, its people
+    // invited and its seats bought.
+    if (body.site) {
+      items.push(
+        menuItem(t(knownTeams.length ? "account.manageTeams" : "account.createTeam"), {
+          run: () => {
+            closeRowMenu();
+            window.open(body.site + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+          },
+        }),
+      );
+    }
+    items.push(
       menuItem(t("account.download"), {
         run: () => {
           closeRowMenu();
@@ -7667,6 +8039,11 @@ async function loadAccount() {
       }),
     );
     openRowMenu(row, row, items);
+    // As wide as the row it opens from, and placed again once it is: the
+    // first placement measured the menu at its own width.
+    rowMenu.classList.add("fit-anchor", "account-menu");
+    rowMenu.style.width = row.getBoundingClientRect().width + "px";
+    placeRowMenu(row);
   });
   host.appendChild(row);
 }
@@ -7953,6 +8330,48 @@ function openPaywall(buying) {
       return;
     }
 
+    // A team is chosen, so the balance that ran out is the team's, and the
+    // shop for it is on the site rather than here — only someone with billing
+    // permission buys for the team, and they do it on the team page. What this screen
+    // can offer is the team's number, who can fix it, and the way back to
+    // spending one's own credits.
+    if (state.team) {
+      const teamName = (knownTeams.find((team) => team.id === state.team.id) || {}).name
+        || t("account.teamUnnamed");
+      if (state.team.refused) {
+        body.appendChild(el("div", "cn-note", t("account.teamRefused", { team: teamName })));
+      } else {
+        const pooled = el("p", "pw-balance");
+        pooled.appendChild(el("strong", null, creditsOf(state.team.balanceMicro || 0)));
+        pooled.appendChild(el("span", "muted", t("paywall.teamUnit", { team: teamName })));
+        body.appendChild(pooled);
+        body.appendChild(
+          el("div", "cn-note",
+            t(state.team.billing ? "paywall.teamOwner" : "paywall.teamMember", { team: teamName })),
+        );
+      }
+      const actions = el("div", "pw-plans");
+      if (state.team.billing || state.team.refused) {
+        const page = el("button", "pw-plan", t("paywall.teamPage"));
+        page.type = "button";
+        page.onclick = () => {
+          window.open((site || "https://oharness.ai") + "/" + LOCALE + "/dashboard/team", "_blank", "noopener");
+        };
+        actions.appendChild(page);
+      }
+      const own = el("button", "pw-plan", t("account.useOwn"));
+      own.type = "button";
+      own.onclick = () => {
+        void api("/team", { team: null }).then(() => {
+          void loadAccount();
+          void check();
+        });
+      };
+      actions.appendChild(own);
+      body.appendChild(actions);
+      return;
+    }
+
     const sub = state.subscription;
     const subscribed = Boolean(sub && (sub.status === "active" || sub.status === "trialing"));
     body.appendChild(
@@ -7964,7 +8383,9 @@ function openPaywall(buying) {
     // checkout for it — so it is not a row. The account page button below is
     // where it lives.
     const packs = plans.filter((plan) => plan.kind === "topup");
-    const subs = plans.filter((plan) => plan.kind === "subscription");
+    // The seat plan is a team's and is bought on the team page; on this
+    // list it would be a rung this account cannot buy for itself.
+    const subs = plans.filter((plan) => plan.kind === "subscription" && !plan.seat);
 
     if (!subs.length && !packs.length) {
       body.appendChild(el("div", "cn-note", t("paywall.notForSale")));
@@ -8122,10 +8543,14 @@ function openPaywall(buying) {
       }
       // Credits on the account mean the turn can be sent again, whether they
       // arrived a second ago or were there the whole time. Both are the same
-      // sentence to whoever is looking at this.
-      if (state.signedIn && Number(state.balanceMicro || 0) > 0) {
+      // sentence to whoever is looking at this. With a team chosen it is the
+      // team's number that decides: the person's own credits are not what
+      // the next call draws on.
+      const pooled = state.team && !state.team.refused ? state.team : undefined;
+      const spendable = pooled ? Number(pooled.balanceMicro || 0) : Number(state.balanceMicro || 0);
+      if (state.signedIn && spendable > 0) {
         closePaywall();
-        return void addNotice(t("paywall.ready", { credits: creditsOf(state.balanceMicro) }));
+        return void addNotice(t("paywall.ready", { credits: creditsOf(spendable) }));
       }
       render(state);
     });
@@ -10136,7 +10561,7 @@ export const PAGE = `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content">
 <meta name="referrer" content="no-referrer">
 <title>OHarness</title>
 <link rel="icon" href="data:image/svg+xml,${encodeURIComponent(FAVICON)}">
@@ -10155,6 +10580,7 @@ ${ANALYTICS_STUB}
       </svg>
     </span>
     <b class="wordmark">OHarness</b>
+    <button id="nav-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
   </header>
   <button id="project" class="project" type="button">
     <span class="avatar" id="project-avatar"></span>
@@ -10191,6 +10617,7 @@ ${ANALYTICS_STUB}
        model-provider setup — a place nobody goes to find their account. -->
   <div id="account"></div>
 </aside>
+<div id="scrim"></div>
 
 <main>
   <div id="top">
@@ -10289,6 +10716,7 @@ ${ANALYTICS_STUB}
       <div id="review-head">
         <span id="review-title" data-t="review.changes"></span>
         <span id="review-sum"></span>
+        <button id="review-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
       </div>
       <div id="files"></div>
       <div id="diff"></div>