@oharness/server 0.3.0 → 0.5.0

package/dist/page.js

@@ -26,6 +26,11 @@ const STYLE = String.raw `
   --add:#065f46; --add-bg:#ecfdf5; --del:#991b1b; --del-bg:#fef2f2;
   --hover:#00000008; --sel:#00000012; --focus:#111827; --ring:#1118271a;
   --field:#00000006; --field-focus:#0000000d; --track:#0000001f;
+  /* What separates the mention chip from the field behind it. A shadow on
+     paper; on the dark theme a shadow falls on something already black, so it
+     is the faintest of light edges instead. Neither is a border: a hard ring
+     made each mention read as a small input field inside a sentence. */
+  --mention-lift:0 1px 2px #0000000f, 0 0 0 1px #0000000a;
   --kw:#7c3aed; --str:#047857; --com:#94a3b8; --num:#b45309;
 }
 /* The dark palette, reached two ways: the system asked for it and nothing
@@ -40,6 +45,7 @@ const STYLE = String.raw `
     --add:#6ee7b7; --add-bg:#052e22; --del:#fca5a5; --del-bg:#3b1214;
     --hover:#ffffff0a; --sel:#ffffff1a; --focus:#6b7280; --ring:#ffffff14;
     --field:#ffffff08; --field-focus:#ffffff12; --track:#ffffff2e;
+    --mention-lift:0 0 0 1px #ffffff1f, 0 1px 3px #00000073;
     --kw:#c4b5fd; --str:#6ee7b7; --com:#64748b; --num:#fcd34d;
   }
 }
@@ -199,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
@@ -217,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,
@@ -323,6 +353,20 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
   padding:0 10px;font:inherit;font-size:12.5px;
 }
 .menu-search input:focus{outline:none;background:var(--field-focus)}
+/* Eighty-one skills with no way to narrow them is a list nobody reads to the
+   end. Matches the name and the description both, because the name is terse
+   and chosen by whoever wrote the skill. */
+/* Quiet: it is a provenance note on a row whose subject is the name. */
+.mk-tag{
+  margin-left:7px;padding:1px 5px;border-radius:4px;vertical-align:1px;
+  background:var(--sel);color:var(--dim);font-size:10px;font-weight:500;
+  letter-spacing:.02em;text-transform:uppercase;
+}
+.mk-search{
+  width:100%;height:32px;margin:10px 0 2px;border:0;border-radius:8px;
+  background:var(--field);color:var(--fg);padding:0 11px;font:inherit;font-size:13px;
+}
+.mk-search:focus{outline:none;background:var(--field-focus)}
 .menu-body{overflow-y:auto;max-height:min(46vh,340px)}
 .menu-footer{padding:5px 3px 3px;box-shadow:0 -1px 0 var(--line)}
 .menu-item.cursor{background:var(--hover)}
@@ -391,16 +435,30 @@ 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. */
+/* Centred on the naming block, not on the first line of it. A 20px tile
+ * beside a title over a description is read as the row's own mark, and a
+ * mark that sits on the title alone leaves the row bottom-heavy — the same
+ * complaint as the margin above, one level in. */
 details.provider>summary .vmark,details.provider>summary .vmono,details.provider>summary .vglyph,
 .pp-item .vmark,.pp-item .vmono,.pp-item .vglyph{
-  width:20px;height:20px;border-radius:5px;font-size:11px;align-self:flex-start;margin-top:1px;
+  width:20px;height:20px;border-radius:5px;font-size:11px;
 }
 details.provider>summary .vmark,.pp-item .vmark,
 details.provider>summary .vglyph,.pp-item .vglyph{padding:2.5px}
 details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
+.menu-head{
+  padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;
+  text-transform:uppercase;color:var(--dim);
+}
+.menu-head:first-child{padding-top:4px}
 .menu-group{
   display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;
   font:inherit;font-size:10.5px;color:var(--dim);padding:7px 8px 5px;cursor:pointer;
@@ -463,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;
@@ -472,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
@@ -533,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)}
@@ -609,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;
@@ -647,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);
@@ -769,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)}
@@ -816,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.
  *
@@ -926,8 +994,17 @@ details.setting>summary:focus-visible{outline:2px solid var(--accent);outline-of
 .section{background:var(--panel);border-radius:12px;overflow:hidden}
 .section details.provider + details.provider{box-shadow:0 -1px 0 var(--line)}
 details.provider{padding:0}
-details.provider>summary{
-  padding:12px 14px;cursor:pointer;list-style:none;margin:0;gap:10px;
+/* Padding on all four sides and no margin, because the row is measured
+ * between the dividers and not around the box that draws the hover.
+ *
+ * The .panel .row-head rule carries a 14px bottom margin for the single
+ * heading row it was written for, and a provider card's summary is a
+ * .row-head too. It
+ * landed outside the summary and inside the divider, so every card had 12px
+ * of air above its content and 26px below — the whole row reading as pinned
+ * to its top edge, which is what it was. */
+.panel details.provider>summary,details.provider>summary{
+  padding:14px;cursor:pointer;list-style:none;margin:0;gap:10px;
 }
 details.provider>summary::-webkit-details-marker{display:none}
 .naming{flex:1;min-width:0}
@@ -963,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
@@ -977,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
@@ -1045,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)}
@@ -1116,9 +1204,16 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    wrong for a list that wants two columns. */
 #market{width:min(860px,94vw);max-width:min(860px,94vw);max-height:76vh}
 #market[open]{display:flex;flex-direction:column}
-.mk-head{padding:18px 20px 10px}
-#mk-list{overflow-y:auto;padding:2px 12px 6px;flex:1}
-.mk-foot{padding:10px 16px 14px;display:flex;justify-content:flex-end;box-shadow:0 -1px 0 var(--line)}
+.mk-head{padding:18px 20px 10px;position:relative}
+#mk-list{overflow-y:auto;padding:2px 12px 14px;flex:1}
+/* Where every other window puts it. A "Done" under the list meant scrolling
+   past eighty rows to leave, for a dialog that changes nothing on the way out. */
+.mk-close{
+  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;
+  border:0;background:transparent;color:var(--dim);display:grid;place-items:center;cursor:pointer;
+}
+.mk-close:hover{background:var(--hover);color:var(--fg)}
+.mk-close .ico-sm{width:14px;height:14px;opacity:1}
 .mk-group{
   font-size:10.5px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase;
   padding:12px 8px 6px;
@@ -1502,14 +1597,72 @@ textarea{
 }
 textarea:focus{outline:none}
 textarea::placeholder{color:var(--dim)}
-/* The rule above is the composer's: no border, no padding, transparent. A
-   textarea in a settings row needs to look like something you can type in. */
+.input-wrap{position:relative}
+/* Block, not the inline-block a textarea is by default: inline leaves room
+   under the baseline for a descender, so the wrapper ends up a few pixels
+   taller than the field inside it and the two scroll by different amounts. */
+/* Above the backdrop, and that needs saying: the mirror is absolutely
+   positioned, which puts it in front of a static sibling however the two are
+   ordered in the markup. Without this the chip paints over the words it is
+   drawn for. */
+.input-wrap textarea{display:block;position:relative;z-index:1}
+/* The field draws the caret and the selection; the mirror draws the words.
+   With the glyphs in the mirror a mention can carry something a textarea
+   never could — an icon in the slot the @ sign would have taken — because
+   the field only has to agree on where each glyph lands, not on what is
+   drawn there. The selection is translucent so the words under it stay
+   readable; an opaque highlight would sit on top of the mirror. */
+.input-wrap textarea{color:transparent;caret-color:var(--fg)}
+.input-wrap textarea::selection{background:#3b82f640}
+/* Every metric that decides where a glyph lands has to match the field: font,
+   line-height, wrapping, and the padding, which is zero on this textarea.
+   Six pixels wider on each side with the text pushed back in by six: the
+   glyphs land where the textarea puts them, and the chip's background — drawn
+   outside its own advance width — has somewhere to go instead of being cut off
+   at the start of a line. */
+#input-mirror{
+  position:absolute;top:0;bottom:0;left:-6px;right:-6px;padding:0 6px;border:0;
+  font:inherit;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;
+  color:var(--fg);pointer-events:none;overflow:hidden;
+}
+/**
+ * The floating chip's surface, inline. No remove button — Backspace takes the
+ * whole mention instead — and the icon lives in the slot the @ sign vacated.
+ *
+ * White on the field, dark on the dark field — the same two tokens the chip
+ * above the box uses. Vertical padding does not enter the inline advance and
+ * the line-height leaves room for it. Horizontal padding is given back as
+ * negative margin so no glyph moves: the wash reaches into the whitespace on
+ * either side of the mention. A space is four pixels wide, and the menu
+ * inserts two of them on each side (see roomBefore), which is what allows
+ * four of padding and still four of clearance to the next word.
+ *
+ * The shadow is a lift, not an outline. A hard ring made each mention read as
+ * a small input field dropped into the middle of a sentence.
+ */
+#input-mirror mark{
+  background:var(--bg);color:var(--fg);border-radius:6px;
+  padding:3px 4px;margin:0 -4px;
+  box-shadow:var(--mention-lift);
+  box-decoration-break:clone;-webkit-box-decoration-break:clone;
+}
+/* The @ sign's own advance width, measured on every paint, with the icon of
+   what was mentioned drawn in it instead. The width is the field's, so the
+   name after it lands exactly where the field puts it. */
+#input-mirror mark .at{
+  display:inline-block;width:var(--at-w,13.5px);vertical-align:-1.5px;
+  color:var(--dim);
+}
+#input-mirror mark .at svg{width:11px;height:11px;display:block;margin-left:.5px}
+/* The mirror sits exactly under the textarea, so every metric that decides
+   where a glyph lands has to match: font, line-height, wrapping, and the
+   padding, which is zero on the composer's textarea and must be zero here. */
 textarea.boxed{
   border:1px solid var(--line);background:var(--field);border-radius:6px;
   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{
@@ -1540,8 +1693,32 @@ textarea.boxed:focus{border-color:var(--dim)}
 /* Wider than the model picker's: these rows carry a name and the folder it
    sits in, and truncating the folder away leaves three files called index.ts. */
 #attach-picker .menu{min-width:min(380px,86vw)}
-#attach-picker .menu-item{cursor:pointer}
+#attach-picker .menu-item{cursor:pointer;gap:9px;padding-left:9px;padding-right:9px}
+#attach-picker .menu-item .tick{width:auto;opacity:.55;margin-left:auto;padding-left:8px}
+#attach-picker .menu-item.on .tick{opacity:.85}
+/* A step up from hover, not a slab of ink. The keyboard cursor and the pointer
+   should not look identical — one of them means Enter takes this row — but the
+   menu is a quiet surface and the difference is worth one tone, not two. */
+#attach-picker .menu-item.cursor{background:var(--sel)}
+#attach-picker .menu-item.cursor .ico-sm{opacity:.8}
 #attach-picker .menu-item .ico-sm{opacity:.55}
+/* The stacked rows carry a name over a sentence, so they are already two lines
+   tall; the mark beside them is a label for the kind, not an illustration, and
+   at 16px it was the widest thing in a row whose job is the words. */
+/* Centred on the name, not on the row. A stacked row is a name over a
+   sentence, so its box centre sits somewhere in the gap between the two lines
+   and a mark aligned to it reads as sagging. The name's line box is 22px at
+   this size and the mark is 13px, so half the difference puts one centre on
+   the other. The rule above this one sets the 1px the flush-left tick needed
+   when every row was a single line; on these it is the same 1px of sag. */
+#attach-picker .menu-item.stacked .ico-sm{width:13px;height:13px;margin-top:4.5px}
+/* The vendor mark at the row's glyph size, the mono tile lettered to match. */
+#attach-picker .menu-item .mk-logo,#attach-picker .menu-item .mk-mono{
+  width:16px;height:16px;border-radius:4px;margin-top:3px;font-size:9px;
+}
+#attach-picker .menu-item.stacked .tick{margin-top:0}
+#attach-picker .menu-item.stacked{padding-top:5px;padding-bottom:5px}
+#attach-picker .menu-item.stacked .stack{gap:1px}
 #attach-picker .menu-item.on .ico-sm{opacity:.9}
 .menu-hint{padding:6px 8px 8px;font-size:11.5px;color:var(--dim)}
 /* A row that has something to say about itself: the name on one line and a
@@ -1567,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{
@@ -1678,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;
@@ -1711,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 --------------------------------------------------------------
 
 /**
@@ -1769,6 +2077,21 @@ const ICON_PATHS = {
   // Stacked plates, because a plugin arrives as a bundle of contributions
   // rather than as one thing.
   plugin: ["M8 1.33 1.33 4.67 8 8l6.67-3.33Z", "M1.33 11.33 8 14.67l6.67-3.34", "M1.33 8 8 11.33 14.67 8"],
+  /* A bookmark: one path, and the only shape in this menu that is neither a
+     sheet nor a folder. The open book it replaced was two mirrored paths
+     meeting at a spine, which at the 13px these rows use closed into a blob —
+     two strokes a pixel apart read as one thick one. */
+  skill: ["M4.5 2.5h7v11l-3.5-2.6-3.5 2.6Z"],
+  /* A prompt caret: what a command line looks like anywhere else. */
+  command: ["M4 5.5 6.5 8 4 10.5", "M8.5 10.5H12"],
+  /* A bare chevron. The other back arrow has a shaft, which is right on a
+     page header and heavy on a menu row sitting one line above the thing it
+     returns to. */
+  chevronLeft: ["M9.5 4.5 6 8l3.5 3.5"],
+  /* Two strokes, for the corner of a dialog. */
+  close: ["M4.5 4.5l7 7", "M11.5 4.5l-7 7"],
+  search: ["M11.5 11.5 14 14"],
+  searchCircles: [[7.3, 7.3, 4.6]],
   // A shopfront: an awning over a counter, for the list of what is on offer.
   market: ["M2 6.67h12", "M3.33 6.67 4.67 2.67h6.66l1.34 4", "M2.67 6.67v6.66h10.67V6.67"],
   // An arrow pointing back the way the menu came in.
@@ -1802,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) {
@@ -2081,6 +2429,27 @@ function providerMark(id, label, extra) {
   return mono;
 }
 
+/**
+ * The model id, shortened to what the bar has room for: everything after the
+ * last slash.
+ *
+ * The rule used to be a length test — over 28 characters keep the tail, under
+ * it keep the whole thing — which is how "~deepseek/deepseek-v4-flash" reached
+ * the bar at 27 characters, naming its vendor twice and then being cut
+ * mid-word by the ellipsis anyway. Length was the wrong question: what to drop
+ * does not depend on how long the string happens to be.
+ *
+ * What to drop is the namespace, every time. The vendor's mark is drawn
+ * immediately to the left of this, so the prefix is a picture repeated in
+ * words — and an aggregator's id nests, which makes the prefix the longer half
+ * of a name whose distinguishing half is at the end. The whole id stays in the
+ * title attribute and in the menu.
+ */
+function shortModel(full) {
+  const cut = full.lastIndexOf("/");
+  return cut < 0 ? full : full.slice(cut + 1);
+}
+
 function makePicker(id, onPick, extra) {
   const root = document.getElementById(id);
   const button = root.querySelector(".picker-btn");
@@ -2294,10 +2663,8 @@ function makePicker(id, onPick, extra) {
       if (stale) stale.remove();
       const mark = match && match.mark && match.mark("picker-mark");
       if (mark) button.insertBefore(mark, label);
-      // Discovered ids are namespaced and long; the tail is the part that
-      // identifies the model, and the full id is still in the menu.
       const full = match ? match.label : current || "—";
-      label.textContent = full.length > 28 ? full.slice(full.indexOf("/") + 1) : full;
+      label.textContent = shortModel(full);
       label.title = full;
     },
     get value() {
@@ -2307,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(
@@ -3332,6 +3703,8 @@ function closeRowMenu() {
   menuRow = null;
   rowMenu.hidden = true;
   rowMenu.replaceChildren();
+  rowMenu.classList.remove("fit-anchor", "account-menu");
+  rowMenu.style.width = "";
 }
 
 /**
@@ -3344,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";
 }
@@ -4015,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;
     }
 
@@ -4074,7 +4450,7 @@ events.onmessage = (message) => {
     case "state": applyState(event.state); break;
     case "connectors_changed":
       if (authorizing === event.connector) authorizing = null;
-      offer = { connectors: event.connectors, plugins: event.plugins || [] };
+      offer = { connectors: event.connectors, plugins: event.plugins || [], skills: event.skills || [] };
       // The failure already said what went wrong; this only announces the
       // half that is worth celebrating.
       if (event.authorized) addNotice(t("market.authorized", { name: event.connector }));
@@ -4369,7 +4745,7 @@ const sentPreviews = new Map();
  * server turns the list into a short block above the prompt.
  */
 let refs = [];
-const REF_ICON = { file: "file", folder: "folder", connector: "plug", plugin: "plugin" };
+const REF_ICON = { file: "file", folder: "folder", connector: "plug", plugin: "plugin", skill: "skill" };
 const refKey = (ref) => ref.kind + ":" + ref.value;
 
 function renderAttachments() {
@@ -4498,8 +4874,10 @@ attachMenu.replaceChildren(attachBody);
 let attachView = "root";
 /** The last answer from /files, for the mention list. */
 let fileList = { entries: [] };
+/** Whether the context endpoint has answered once, for the mention list. */
+let offerLoaded = false;
 /** Connectors and plugins, refreshed each time the menu opens. */
-let offer = { connectors: [], plugins: [] };
+let offer = { connectors: [], plugins: [], skills: [] };
 /** The connectors on offer rather than the ones already here. */
 let market = [];
 /** The connector whose sign-in is open in a browser tab, if any. */
@@ -4536,18 +4914,175 @@ function addRef(kind, value) {
 
 /** The rows on screen, in the order they are painted — what a key can land on. */
 function attachRows() {
+  /**
+   * What this project can reach, three or four deep, over the full catalogue.
+   *
+   * The menu used to hand every one of these straight to a dialog, which is
+   * the right home for eighty skills and the wrong one for the two somebody
+   * actually attaches. So the menu answers the common question itself — what
+   * is here, attach one — and the dialog keeps the uncommon ones: read all of
+   * them, install something new, take something off.
+   */
+  if (attachView === "skills" || attachView === "plugins" || attachView === "connectors") {
+    const kind = attachView;
+    const items =
+      kind === "skills" ? offer.skills || []
+      : kind === "plugins" ? offer.plugins || []
+      : offer.connectors || [];
+    const row = (entry) => ({
+      type: "offer-ref",
+      icon: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "plug",
+      // A connector is known by its vendor's mark, the same one the dialog
+      // draws; a plug in front of three names is three rows told apart by
+      // reading.
+      mark: kind === "connectors" ? entry.name : undefined,
+      label: entry.title || entry.name,
+      note: entry.description || "",
+      ref: {
+        kind: kind === "skills" ? "skill" : kind === "plugins" ? "plugin" : "connector",
+        value: entry.name,
+        label: entry.name,
+      },
+    });
+    /**
+     * One list, with the project's own first.
+     *
+     * A skill checked into the repository is likelier to be the one wanted
+     * here, so it is not left to sort alphabetically among eighty that happen
+     * to be installed. That is an ordering, not a division: both are usable in
+     * this session and a heading between them would be drawing a line where
+     * the user does not have to act on one.
+     */
+    const local = kind === "connectors" ? [] : items.filter((entry) => entry.source === "project");
+    const shown = [...local, ...items.filter((entry) => !local.includes(entry))].slice(0, 6);
+    const rows = shown.map(row);
+    const empty = { skills: "add.noSkills", plugins: "add.noPlugins", connectors: "add.noConnectors" };
+    const hidden = items.length - shown.length;
+    return [
+      { type: "up", icon: "chevronLeft", label: t("add.back") },
+      ...rows,
+      ...(!items.length ? [{ type: "hint", label: t(empty[kind]) }] : []),
+      ...(hidden > 0 ? [{ type: "hint", label: t("add.andMore", { n: hidden }) }] : []),
+      // Browse is only a different question where there is somewhere to browse:
+      // connectors have a registry of ones not installed, skills and plugins
+      // are whatever is on this machine already. "More" only when the menu
+      // is holding some back; with everything in view it is the catalogue.
+      ...(kind === "connectors"
+        ? [{ type: "market", kind, icon: "search", label: t(hidden > 0 ? "add.browse" : "add.browseAll") }]
+        : []),
+      { type: "manage", kind, icon: "settings", label: t("add.manage") },
+    ];
+  }
+
+  if (attachView === "command") {
+    return COMMANDS.filter((one) => !attachQuery || one.name.startsWith(attachQuery)).map((one) => ({
+      type: "command",
+      icon: "command",
+      label: "/" + one.name + (one.arg ? " <" + one.arg + ">" : ""),
+      note: one.hint(),
+      command: one.name,
+    }));
+  }
   if (attachView === "mention") {
-    return (fileList.entries || []).map((entry) => ({
+    /**
+     * Skills first, then files.
+     *
+     * The @ began as a way to name a file and files are still most of what it
+     * names, but a skill is the other thing worth pointing at from inside a
+     * sentence — and the only one where naming it does something: the model is
+     * told which skills exist, so naming one asks for it directly instead of
+     * leaving the choice to whether the task happened to match a description.
+     * There are a handful of them against thousands of files, so they go above
+     * rather than competing on rank.
+     */
+    const query = attachQuery.toLowerCase();
+    /**
+     * A skill matches on what it is for, not only on what it is called.
+     *
+     * Names are terse and chosen by whoever wrote the skill; the sentence
+     * under the name is the one a person would think of. Someone after the
+     * video tools types "video", and only the description contains it.
+     */
+    const skills = (offer.skills || [])
+      .filter((skill) =>
+        !query ||
+        skill.name.toLowerCase().includes(query) ||
+        (skill.description || "").toLowerCase().includes(query),
+      )
+      /**
+       * A few, not all of them.
+       *
+       * This list is mostly files and should stay that way: eighty skills
+       * answering a one-letter query push every file below a fold nobody
+       * scrolls, and @ was a way to name a file first. Four, because a skill
+       * row is two lines — six of them filled the menu exactly and the files
+       * began again just past its bottom edge, which is the same problem with
+       * a smaller number on it. The query narrows them as fast as anyone
+       * types, and the whole catalogue is a click away under the + menu.
+       */
+      .slice(0, 4)
+      .map((skill) => ({
+        type: "skill",
+        icon: "skill",
+        label: skill.name,
+        // Under the name rather than beside it. A file's sub is a folder and
+        // fits the right-hand slot; a skill's is the sentence it is chosen on,
+        // and in that slot it pushes the name it belongs to off the row.
+        note: skill.description || "",
+        ref: { kind: "skill", value: skill.name, label: skill.name },
+      }));
+    /**
+     * Plugins, on the same terms as skills and after them.
+     *
+     * A plugin is a bundle rather than a thing the model loads, so naming one
+     * is a weaker instruction than naming a skill — "use the ottoport plugin"
+     * steers which tools get reached for rather than pulling in a page of
+     * instructions. Worth offering, not worth offering first.
+     */
+    const plugins = (offer.plugins || [])
+      .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.title || plugin.name,
+        note: plugin.description || "",
+        ref: { kind: "plugin", value: plugin.name, label: plugin.name },
+      }));
+    const files = (fileList.entries || []).map((entry) => ({
       type: entry.dir ? "folder" : "file",
       icon: entry.dir ? "folder" : "file",
       label: entry.name,
       sub: folderOf(entry.path),
       ref: { kind: entry.dir ? "folder" : "file", value: entry.path, label: entry.name },
     }));
+    /**
+     * Headed, but only where a heading distinguishes something.
+     *
+     * Two kinds of thing share this list and they are not interchangeable —
+     * one is a file to read, the other is a way of working the model loads.
+     * A heading each says so. With only one kind present the heading is a
+     * label on a list of one kind, which is noise.
+     */
+    const sections = [
+      [t("add.skills"), skills],
+      [t("add.plugins"), plugins],
+      [t("mention.files"), files],
+    ].filter(([, rows]) => rows.length);
+    // One kind present is a list of one kind, and a heading over it labels
+    // nothing. Headings appear when there is something to tell apart.
+    if (sections.length < 2) return sections.flatMap(([, rows]) => rows);
+    return sections.flatMap(([label, rows]) => [{ type: "group", label }, ...rows]);
   }
 
   const connectors = (offer.connectors || []).length;
   const plugins = (offer.plugins || []).length;
+  const skills = (offer.skills || []).length;
   return [
     // Two rows, because the dialogs behind them are two: only macOS has a
     // panel that takes a file and a folder in one pass, and everywhere else a
@@ -4560,7 +5095,7 @@ function attachRows() {
     // word in the slot that otherwise holds a number, and it reads as a value
     // rather than as an absence.
     {
-      type: "market",
+      type: "into",
       kind: "connectors",
       icon: "plug",
       label: t("add.connectors"),
@@ -4568,13 +5103,21 @@ function attachRows() {
       into: true,
     },
     {
-      type: "market",
+      type: "into",
       kind: "plugins",
       icon: "plugin",
       label: t("add.plugins"),
       sub: plugins ? String(plugins) : "",
       into: true,
     },
+    {
+      type: "into",
+      kind: "skills",
+      icon: "skill",
+      label: t("add.skills"),
+      sub: skills ? String(skills) : "",
+      into: true,
+    },
     { type: "upload", icon: "upload", label: t("add.upload") },
   ];
 }
@@ -4582,16 +5125,28 @@ function attachRows() {
 function paintAttachMenu() {
   const rows = attachRows();
   if (attachCursor >= rows.length) attachCursor = Math.max(0, rows.length - 1);
+  // The list opens with the cursor at 0, and 0 is a heading whenever the list
+  // is grouped. Nudged here rather than at every call site that sets it.
+  while (rows[attachCursor] && rows[attachCursor].type === "group" && attachCursor < rows.length - 1) {
+    attachCursor++;
+  }
   attachBody.replaceChildren();
 
   rows.forEach((row, i) => {
+    if (row.type === "group") {
+      attachBody.appendChild(el("div", "menu-head", row.label));
+      return;
+    }
+    if (row.type === "hint") {
+      attachBody.appendChild(el("div", "menu-hint", row.label));
+      return;
+    }
     const item = el(
       "div",
       "menu-item" + (row.ref && referenced(row.ref) ? " on" : "") + (i === attachCursor ? " cursor" : ""),
     );
     item.setAttribute("role", "button");
-    item.appendChild(el("span", "tick", "✓"));
-    item.appendChild(svgIcon(row.icon));
+    item.appendChild(row.mark ? connectorMark(row.mark, row.label) : svgIcon(row.icon));
     if (row.note) {
       item.classList.add("stacked");
       const stack = el("span", "stack");
@@ -4602,6 +5157,11 @@ function paintAttachMenu() {
       item.appendChild(el("span", "menu-label", row.label));
     }
     if (row.sub) item.appendChild(el("span", "sub", row.sub));
+    // At the end rather than the start. A tick that is invisible until a row
+    // is chosen still held a column open in front of every row that was not,
+    // which put the icons a third of the way into the menu and the words
+    // further still. On the right it costs nothing until there is one.
+    if (row.ref && referenced(row.ref)) item.appendChild(el("span", "tick", "✓"));
     if (row.into) item.appendChild(el("span", "chev"));
     // An installed connector is removed from the row that says it is
     // installed, which is the row someone looking to remove it goes to.
@@ -4634,6 +5194,26 @@ function paintAttachMenu() {
 }
 
 function chooseAttachRow(row) {
+  if (row.type === "hint") return;
+  if (row.type === "up") return void showAttachView("root");
+  if (row.type === "into") return void showAttachView(row.kind);
+  if (row.type === "offer-ref") {
+    /**
+     * The same thing, named the same way, whichever menu it was picked from.
+     *
+     * A skill picked with @ lands in the sentence; picked from here it used to
+     * become a chip floating above the box instead — two representations of
+     * one idea, and the user has to learn which menu produces which. A
+     * connector keeps the chip: it is not something anybody writes into a
+     * sentence, it is a capability this message is sent with.
+     */
+    if (row.ref.kind === "skill" || row.ref.kind === "plugin") return void mentionAtCaret(row.ref.value);
+    return void toggleRef(row.ref);
+  }
+  if (row.type === "manage") {
+    closeAttachMenu();
+    return void openMarket(row.kind);
+  }
   if (row.type === "pick") return void pickFromDisk(row.kind);
   if (row.type === "market") {
     closeAttachMenu();
@@ -4643,7 +5223,10 @@ function chooseAttachRow(row) {
     closeAttachMenu();
     return void fileInput.click();
   }
-  if (attachView === "mention" && row.ref) return void insertMention(row.ref.value);
+  if (row.type === "command") return void insertCommand(row.command);
+  if (attachView === "mention" && row.ref) {
+    return void insertMention(row.ref.value);
+  }
   toggleRef(row.ref);
 }
 
@@ -4742,14 +5325,19 @@ const marketDialog = document.getElementById("market");
 const marketList = document.getElementById("mk-list");
 let marketKind = "connectors";
 
+const marketSearch = document.getElementById("mk-search");
+marketSearch.addEventListener("input", () => paintMarket());
+
 async function openMarket(kind) {
   marketKind = kind;
-  document.getElementById("mk-title").textContent = t(
-    kind === "plugins" ? "add.plugins" : "add.connectors",
-  );
-  document.getElementById("mk-note").textContent = t(
-    kind === "plugins" ? "market.pluginsNote" : "market.connectorsNote",
-  );
+  // Cleared on open: a query left over from the last screen would hide most of
+  // this one and look like an empty catalogue.
+  marketSearch.value = "";
+  marketSearch.placeholder = t("menu.search");
+  const titles = { plugins: "add.plugins", skills: "add.skills", connectors: "add.connectors" };
+  const notes = { plugins: "market.pluginsNote", skills: "market.skillsNote", connectors: "market.connectorsNote" };
+  document.getElementById("mk-title").textContent = t(titles[kind] || titles.connectors);
+  document.getElementById("mk-note").textContent = t(notes[kind] || notes.connectors);
   marketList.replaceChildren(el("div", "mk-desc", t("market.loading")));
   marketDialog.showModal();
 
@@ -4764,7 +5352,18 @@ async function openMarket(kind) {
 
 function paintMarket() {
   marketList.replaceChildren();
-  const installed = marketKind === "plugins" ? offer.plugins || [] : offer.connectors || [];
+  const query = (marketSearch.value || "").trim().toLowerCase();
+  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 = (
+    marketKind === "plugins" ? offer.plugins || []
+    : marketKind === "skills" ? offer.skills || []
+    : offer.connectors || []
+  ).filter(hit);
 
   if (installed.length) {
     marketList.appendChild(el("div", "mk-group", t("market.installed")));
@@ -4775,7 +5374,7 @@ function paintMarket() {
 
   // Only connectors have somewhere to come from yet. Saying so beats an
   // "Available" heading over an empty space that reads as a failed load.
-  const available = marketKind === "connectors" ? market.filter((one) => !one.installed) : [];
+  const available = marketKind === "connectors" ? market.filter((one) => !one.installed && hit(one)) : [];
   if (available.length) {
     marketList.appendChild(el("div", "mk-group", t("market.available")));
     const grid = el("div", "mk-grid");
@@ -4870,11 +5469,37 @@ function isDarkFlatGlyph(img) {
 function installedRow(entry) {
   const row = el("div", "mk-item");
   const isPlugin = marketKind === "plugins";
-  row.appendChild(isPlugin ? svgIcon("plugin") : connectorMark(entry.name, entry.name));
+  const isSkill = marketKind === "skills";
+  row.appendChild(isPlugin ? svgIcon("plugin") : isSkill ? svgIcon("skill") : connectorMark(entry.name, entry.name));
 
   const naming = el("div", "mk-naming");
-  naming.appendChild(el("div", "mk-name", entry.name));
-  const detail = isPlugin
+  // 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".
+   *
+   * A list of eighty skills is mostly things somebody installed, and the four
+   * that ship here look exactly like them — which matters the moment one
+   * misbehaves and the question is whose it is. Runtime plugins get the same
+   * treatment for the same reason: memory and media are ours, and anything
+   * beside them was configured.
+   */
+  // A runtime plugin says so in its source; a skill carries its own flag. Reading
+  // only one of them is how the two that ship here — memory and the media
+  // plugin — ended up as the only rows in the panel with no provenance at all.
+  const tag =
+    entry.builtin || entry.source === "builtin" ? "built-in"
+    : entry.source === "runtime" ? "runtime"
+    : "";
+  if (tag) heading.appendChild(el("span", "mk-tag", tag));
+  naming.appendChild(heading);
+  // A skill has nothing to connect to and nothing to be offline from, so the
+  // slot that carries a connector's state carries what the skill is for —
+  // which is also the sentence the model decides on.
+  const detail = isSkill
+    ? entry.description || entry.source
+    : isPlugin
     ? entry.description || entry.source
     : entry.connected
       ? t("add.tools", { n: entry.tools })
@@ -4896,7 +5521,7 @@ function installedRow(entry) {
     const said = idle === 1 ? t("market.serverIdle") : t("market.serversIdle", { n: idle });
     acts.appendChild(el("span", "mk-state", said));
   }
-  const ref = { kind: isPlugin ? "plugin" : "connector", value: entry.name, label: entry.name };
+  const ref = { kind: isPlugin ? "plugin" : isSkill ? "skill" : "connector", value: entry.name, label: entry.name };
   const attach = el("button", "mk-icon-btn", referenced(ref) ? "✓" : "+");
   attach.type = "button";
   attach.title = t("market.attach");
@@ -4908,7 +5533,7 @@ function installedRow(entry) {
 
   // A connector that asked to be signed in to gets the one button that moves
   // it forward, in front of the one that removes it.
-  if (!isPlugin && entry.needsAuth) {
+  if (!isPlugin && !isSkill && entry.needsAuth) {
     const go = el(
       "button",
       "mk-btn go",
@@ -4920,7 +5545,9 @@ function installedRow(entry) {
     acts.appendChild(go);
   }
 
-  if (!isPlugin) {
+  // Removal is a connector's alone: a plugin is a directory on disk and a
+  // skill is a file in one, and neither is undone from a composer menu.
+  if (!isPlugin && !isSkill) {
     const drop = el("button", "mk-icon-btn drop", "×");
     drop.type = "button";
     drop.title = t("add.remove");
@@ -4972,7 +5599,7 @@ async function installConnector(id, remove) {
     addNotice(body.error, "err");
     return void paintMarket();
   }
-  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [] };
+  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [], skills: body.skills || [] };
   for (const entry of market) if (entry.id === id) entry.installed = remove !== true;
   paintMarket();
 }
@@ -5001,6 +5628,8 @@ async function authorizeConnector(id) {
   addNotice(t("market.authOpened", { name: id }));
 }
 
+document.getElementById("mk-close").appendChild(svgIcon("close"));
+document.getElementById("mk-close").setAttribute("aria-label", t("market.close"));
 document.getElementById("mk-close").addEventListener("click", () => marketDialog.close());
 
 async function loadMentionFiles() {
@@ -5054,12 +5683,33 @@ function openAttachMenu() {
   // projects changes what is connected, and a connector can drop between two
   // messages.
   void getJson("/context").then((body) => {
-    if (body.error || attachMenu.hidden) return;
+    if (body.error) return;
+    offerLoaded = true;
+    if (attachMenu.hidden) return;
     offer = body;
     paintAttachMenu();
   });
 }
 
+/**
+ * The same list, for a mention that was never opened from the + button.
+ *
+ * The + menu refreshes on every open because a connector can drop between two
+ * messages. A mention cannot do that: it reopens on every keystroke, and a
+ * fetch per character is a fetch per character. So it asks once, and a skill
+ * list that is a few minutes stale is the right trade against a skill list
+ * that is empty because nobody happened to click the +.
+ */
+function ensureOffer() {
+  if (offerLoaded) return;
+  offerLoaded = true;
+  void getJson("/context").then((body) => {
+    if (body.error) return;
+    offer = body;
+    if (attachView === "mention") paintAttachMenu();
+    });
+}
+
 /**
  * Arrow keys and Enter over the rows, shared by the menu and the mention list.
  *
@@ -5071,13 +5721,21 @@ function moveAttachCursor(e) {
   if (e.key === "ArrowDown" || e.key === "ArrowUp") {
     e.preventDefault();
     if (!rows.length) return true;
-    attachCursor = (attachCursor + (e.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length;
+    const step = e.key === "ArrowDown" ? 1 : -1;
+    // Past the headings rather than onto them: a heading is not a choice, and
+    // a cursor resting on one is a keypress that appears to do nothing.
+    let next = attachCursor;
+    for (let i = 0; i < rows.length; i++) {
+      next = (next + step + rows.length) % rows.length;
+      if (rows[next].type !== "group") break;
+    }
+    attachCursor = next;
     paintAttachMenu();
     const active = attachBody.querySelector(".cursor");
     if (active) active.scrollIntoView({ block: "nearest" });
     return true;
   }
-  if (e.key === "Enter" || (e.key === "Tab" && attachView === "mention")) {
+  if (e.key === "Enter" || (e.key === "Tab" && (attachView === "mention" || attachView === "command"))) {
     e.preventDefault();
     const row = rows[attachCursor];
     if (row) chooseAttachRow(row);
@@ -5086,6 +5744,232 @@ function moveAttachCursor(e) {
   return false;
 }
 
+// --- the chip behind a mention ---------------------------------------------
+
+const inputMirror = document.getElementById("input-mirror");
+
+/** Every name an @ can stand for. */
+function mentionNames() {
+  return new Map([
+    ...(offer.skills || []).map((skill) => [skill.name, "skill"]),
+    ...(offer.plugins || []).map((plugin) => [plugin.name, "plugin"]),
+  ]);
+}
+
+/**
+ * Backspace takes the whole mention, not a letter of it.
+ *
+ * The chip is drawn as one object and behaves as one everywhere else — it is
+ * inserted whole and sent whole — so deleting it a character at a time leaves
+ * a trail of half-names that are no longer anything, each of them still
+ * looking like a word the harness understood until the wash disappears. Only
+ * when the caret is against it and nothing is selected: a selection is the
+ * user being specific, and editing inside a name is allowed, it just is not
+ * what a keystroke at the edge means.
+ */
+input.addEventListener("keydown", (e) => {
+  if (e.key !== "Backspace" && e.key !== "Delete") return;
+  if (input.selectionStart !== input.selectionEnd) return;
+  const caret = input.selectionStart;
+  const names = mentionNames();
+  if (!names.size) return;
+
+  let from = caret;
+  let to = caret;
+  if (e.key === "Backspace") {
+    const hit = /(^|\s)@([^\s@]+)$/.exec(input.value.slice(0, caret));
+    if (!hit || !names.has(hit[2])) return;
+    from = caret - hit[2].length - 1;
+  } else {
+    const after = input.value.slice(caret);
+    const hit = /^@([^\s@]+)/.exec(after);
+    // Forward-delete only from the start of one: mid-name it is an ordinary
+    // character, and the caret is visibly inside a word.
+    const start = caret === 0 || /\s/.test(input.value[caret - 1] ?? "");
+    if (!hit || !start || !names.has(hit[1])) return;
+    to = caret + hit[1].length + 1;
+  }
+
+  e.preventDefault();
+  input.value = input.value.slice(0, from) + input.value.slice(to);
+  input.setSelectionRange(from, from);
+  paintMirror();
+  // The box may now fit in fewer lines, and the grower only runs on input.
+  input.style.height = "auto";
+  input.style.height = Math.min(Math.max(input.scrollHeight, 56), window.innerHeight * 0.32) + "px";
+});
+
+/**
+ * Paint the backdrop: the same text, with the mentions in it marked.
+ *
+ * Only names that are actually a skill or a plugin are marked. Highlighting
+ * any @word would promise something about an email address and a typo, and
+ * the promise this makes — that the harness knows what was named — is exactly
+ * what a reader is checking when they glance at it.
+ */
+function paintMirror() {
+  if (!inputMirror) return;
+  // Typing an @ asks for the list, but text can also arrive whole — pasted, or
+  // restored as a draft — and that text has mentions in it too. Guarded, so
+  // this is one request in the life of the page rather than one per keystroke.
+  ensureOffer();
+  const names = mentionNames();
+  inputMirror.replaceChildren();
+  if (!names.size) return void (inputMirror.textContent = input.value);
+
+  const text = input.value;
+  let at = 0;
+  // Word-initial, matching what the mention parser accepts, so what lights up
+  // is what the menu would have offered.
+  const pattern = /(^|\s)@([^\s@]+)/g;
+  for (let hit = pattern.exec(text); hit; hit = pattern.exec(text)) {
+    const start = hit.index + hit[1].length;
+    if (!names.has(hit[2])) continue;
+    inputMirror.appendChild(document.createTextNode(text.slice(at, start)));
+    const mark = el("mark", "");
+    const slot = el("span", "at");
+    slot.appendChild(svgIcon(names.get(hit[2])));
+    mark.appendChild(slot);
+    mark.appendChild(document.createTextNode(hit[2]));
+    inputMirror.appendChild(mark);
+    at = start + hit[2].length + 1;
+  }
+  inputMirror.appendChild(document.createTextNode(text.slice(at)));
+  if (inputMirror.querySelector("mark")) inputMirror.style.setProperty("--at-w", atWidth() + "px");
+}
+
+/** How wide the field draws an @ sign: the slot the icon has to fit in. */
+function atWidth() {
+  const probe = document.createElement("canvas").getContext("2d");
+  probe.font = getComputedStyle(input).font;
+  return probe.measureText("@").width;
+}
+
+// The mirror has no scrollbar of its own; the text it holds is the text the
+// textarea is scrolling.
+input.addEventListener("scroll", () => {
+  if (inputMirror) inputMirror.scrollTop = input.scrollTop;
+});
+
+// --- / commands ------------------------------------------------------------
+
+/**
+ * What a slash does that the sidebar does not.
+ *
+ * The palette on Cmd-K is navigation: go somewhere, open something. These are
+ * the other half — act on the session in front of you — and they are here
+ * because that half had no surface at all. A command that only opens a panel
+ * belongs in the palette, not in this list; two ways to reach the same screen
+ * is how a user ends up unsure which one has the thing they want.
+ *
+ * Each takes the rest of the line as its argument, which is why the menu
+ * inserts a trailing space: the next thing typed is the argument, not a
+ * search for another command.
+ */
+const COMMANDS = [
+  {
+    name: "model",
+    arg: "id",
+    hint: () => t("cmd.model"),
+    run: (arg) => {
+      if (!arg) return void document.querySelector("#model-picker .picker-btn")?.click();
+      return void api("/model", { model: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "mode",
+    arg: "mode",
+    hint: () => t("cmd.mode"),
+    run: (arg) => {
+      if (!arg) return void document.querySelector("#mode-picker .picker-btn")?.click();
+      return void api("/mode", { mode: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "rename",
+    arg: "title",
+    hint: () => t("cmd.rename"),
+    run: (arg) => {
+      if (!arg) return void addNotice(t("cmd.needsTitle"), "notice err");
+      return void api("/rename", { id: activeId, title: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "schedule",
+    arg: "name",
+    hint: () => t("cmd.schedule"),
+    run: (arg) => {
+      // The panel manages routines; this runs one without leaving the
+      // composer. Creating one from here would need somewhere to keep it,
+      // which is the panel's job and not a line of text's.
+      if (!arg) return void document.getElementById("nav-routines")?.click();
+      return void api("/routine", { name: arg }).then(pushNotice);
+    },
+  },
+  {
+    name: "new",
+    arg: "",
+    hint: () => t("cmd.new"),
+    run: () => void switchTo({ action: "new" }),
+  },
+];
+
+function pushNotice(body) {
+  if (body && body.error) addNotice(body.error, "notice err");
+}
+
+/** The /word being typed, or null. Only ever the first word of the box. */
+function commandUnderCaret() {
+  // Anchored at the start, and only while the first word is still being
+  // typed: a path is full of slashes and "and/or" is a word, and neither is
+  // an attempt to run something.
+  const before = input.value.slice(0, input.selectionStart);
+  const match = /^\/([a-z-]*)$/i.exec(before);
+  return match ? { query: match[1] } : null;
+}
+
+function openCommands(command) {
+  ensureOffer();
+  attachView = "command";
+  attachQuery = command.query.trim().toLowerCase();
+  attachCursor = 0;
+  attachMenu.hidden = false;
+  attachPicker.classList.add("open");
+  const bar = attachPicker.getBoundingClientRect().top;
+  const box = composerBox.getBoundingClientRect().top;
+  // 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();
+}
+
+/** Insert the command, with the space its argument starts after. */
+function insertCommand(name) {
+  const rest = input.value.slice(input.selectionStart);
+  input.value = "/" + name + " " + rest.replace(/^\s+/, "");
+  paintMirror();
+  closeAttachMenu();
+  input.focus();
+  const at = name.length + 2;
+  input.setSelectionRange(at, at);
+}
+
+/**
+ * Run what was typed, or say it is not a command.
+ *
+ * Returns whether the line was handled, so the submit path can tell a command
+ * from a prompt. An unknown slash word is a prompt: people write /etc and
+ * and/or, and refusing to send those would be the feature getting in the way
+ * of the thing it was added to.
+ */
+function runCommand(text) {
+  const match = /^\/([a-z-]+)(?:\s+([\s\S]*))?$/i.exec(text);
+  if (!match) return false;
+  const command = COMMANDS.find((one) => one.name === match[1].toLowerCase());
+  if (!command) return false;
+  command.run((match[2] || "").trim());
+  return true;
+}
+
 // --- @ mentions ------------------------------------------------------------
 
 /** The @word being typed at the caret, or null. */
@@ -5099,6 +5983,7 @@ function mentionUnderCaret() {
 }
 
 function openMention(mention) {
+  ensureOffer();
   mentionAt = mention.at;
   attachView = "mention";
   attachQuery = mention.query.trim();
@@ -5110,15 +5995,51 @@ 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();
 }
 
+/** Write an @name into the box at the caret, from a menu that is not the @ one. */
+function mentionAtCaret(name) {
+  const caret = input.selectionStart ?? input.value.length;
+  const before = input.value.slice(0, caret);
+  const head = roomBefore(before) + "@" + name + "  ";
+  input.value = head + input.value.slice(caret);
+  closeAttachMenu();
+  input.focus();
+  input.setSelectionRange(head.length, head.length);
+  paintMirror();
+}
+
+/**
+ * Two spaces on either side of a mention, not one.
+ *
+ * The chip's horizontal padding is taken out of the whitespace next to it,
+ * because the field decides where every glyph lands and the mirror cannot add
+ * width of its own. One space is four pixels: enough for the wash to clear
+ * the letters, not enough for the chip to read as an object with room around
+ * it. A second space gives four pixels of padding and four more between the
+ * chip and the next word; three between two chips, which each take four of
+ * them. The model sees the extra spaces, which it reads the same as one.
+ */
+function roomBefore(before) {
+  if (!before || /\n$/.test(before)) return before;
+  const bare = before.replace(/ +$/, "");
+  // Two chips in a row each take four pixels of the gap between them, so
+  // two spaces would leave them touching. A third keeps the same four pixels
+  // of daylight a chip has from a word.
+  const last = /@([^\s@]+)$/.exec(bare);
+  const afterChip = last && mentionNames().has(last[1]);
+  return bare + (afterChip ? "   " : "  ");
+}
+
 function insertMention(path) {
   const caret = input.selectionStart;
-  const head = input.value.slice(0, mentionAt) + "@" + path + " ";
+  const head = roomBefore(input.value.slice(0, mentionAt)) + "@" + path + "  ";
   input.value = head + input.value.slice(caret);
+  paintMirror();
   closeAttachMenu();
   input.focus();
   input.setSelectionRange(head.length, head.length);
@@ -5128,9 +6049,11 @@ function insertMention(path) {
 }
 
 input.addEventListener("input", () => {
+  const command = commandUnderCaret();
+  if (command) return void openCommands(command);
   const mention = mentionUnderCaret();
   if (mention) return void openMention(mention);
-  if (attachView === "mention") closeAttachMenu();
+  if (attachView === "mention" || attachView === "command") closeAttachMenu();
 });
 
 // Before the composer's own Enter handling, which would otherwise send the
@@ -5166,6 +6089,14 @@ document.addEventListener("keydown", (e) => {
 document.getElementById("composer").addEventListener("submit", (e) => {
   e.preventDefault();
   const text = input.value.trim();
+  // A command runs instead of being sent. Unknown slash words fall through and
+  // are sent as prose, because /etc and and/or are things people write.
+  if (runCommand(text)) {
+    input.value = "";
+    input.style.height = "auto";
+      closeAttachMenu();
+    return;
+  }
   if (!text && !staged.length && !refs.length) return;
   const ids = staged.map((file) => file.id);
   const shots = staged
@@ -5175,6 +6106,7 @@ document.getElementById("composer").addEventListener("submit", (e) => {
   const referenced = refs.map((ref) => ({ kind: ref.kind, value: ref.value }));
   input.value = "";
   input.style.height = "auto";
+  paintMirror();
   staged = [];
   refs = [];
   renderAttachments();
@@ -5201,16 +6133,62 @@ input.addEventListener("input", () => {
   input.style.height = "auto";
   const wanted = Math.max(input.scrollHeight, 56);
   input.style.height = Math.min(wanted, window.innerHeight * 0.32) + "px";
+  paintMirror();
 });
 
+// --- the mention chip under the text ------------------------------------
+
+
 stopBtn.addEventListener("click", () => void api("/interrupt", { session: activeId }));
 // Straight into a session, in the tree already open. Where it runs is asked on
 // the composer instead of on the way in: the project on screen is the answer
 // 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) ----------------------------------
@@ -6783,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");
@@ -6820,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;
@@ -6884,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;
@@ -6892,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();
@@ -6902,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();
@@ -6952,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);
 }
@@ -7238,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(
@@ -7249,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")));
@@ -7407,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);
     });
@@ -9391,6 +10531,7 @@ void (async () => {
   for (const button of document.querySelectorAll("#starters button")) {
     button.addEventListener("click", () => {
       input.value = button.dataset.p;
+      paintMirror();
       document.getElementById("composer").requestSubmit();
     });
   }
@@ -9420,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)}">
@@ -9439,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>
@@ -9475,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">
@@ -9517,7 +10660,14 @@ ${ANALYTICS_STUB}
   <form id="composer">
     <div class="composer" id="composer-box">
       <div id="attachments"></div>
-      <textarea id="input" rows="1" data-t-placeholder="composer.placeholder"></textarea>
+      <!-- A textarea draws its own glyphs and cannot style a range of them, so
+           the chip behind a mention is painted on a layer underneath that
+           mirrors the same text in the same metrics. aria-hidden: it is the
+           same string twice, and a screen reader should hear it once. -->
+      <div class="input-wrap">
+        <div id="input-mirror" aria-hidden="true"></div>
+        <textarea id="input" rows="1" data-t-placeholder="composer.placeholder"></textarea>
+      </div>
       <div class="composer-bar">
         <div class="picker" id="attach-picker">
           <button id="attach" class="icon-btn" type="button" data-t-title="composer.attach"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M8 3.2v9.6M3.2 8h9.6"/></svg></button>
@@ -9566,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>
@@ -9604,9 +10755,10 @@ ${ANALYTICS_STUB}
   <div class="mk-head">
     <div id="mk-title" class="cn-title"></div>
     <div id="mk-note" class="row-desc"></div>
+    <input id="mk-search" class="mk-search" type="text" autocomplete="off" spellcheck="false">
+    <button id="mk-close" class="mk-close" type="button"></button>
   </div>
   <div id="mk-list"></div>
-  <div class="mk-foot"><button id="mk-close" class="ghost" type="button" data-t="market.close"></button></div>
 </dialog>
 
 <dialog id="provider-picker">