@oharness/server 0.2.1 → 0.4.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;
   }
 }
@@ -323,6 +329,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)}
@@ -339,6 +359,77 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
 .menu-item.on .tick{opacity:1}
 .menu-item .menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .menu-item .sub{margin-left:auto;font-size:11px;color:var(--dim);flex:0 0 auto}
+/* The vendor's mark, on every row of the model menu and on the bar itself.
+ *
+ * A picker holding four hundred models across two dozen vendors is read by
+ * shape before it is read by name: half the ids in it are the vendor's name
+ * repeated, and the rest are strings like gemini-3.6-flash:batch that say
+ * nothing about who answers them. The mark is what makes the list scannable,
+ * and on the composer it is what tells someone, without reading, that the
+ * session is pointed at the official plan rather than at a key of their own.
+ *
+ * Same two shapes as the connector list: the vendor's own icon when the
+ * server has one, and a lettered tile when it does not. Sized to the row —
+ * the type is 13px, so the mark is 15px and not the 28px tile a card gets. */
+/* One block per vendor, whatever the vendor ships.
+ *
+ * A column of these is scanned by its left edge, and the edge has to be the
+ * same one every time. Left alone, it is not: a vendor shipping a tile fills
+ * its square, a vendor shipping bare ink covers half of it, and one shipping
+ * a thin outline covers less than that — the eye finds no common edge and
+ * reads the lighter rows as hanging off the line, even where the boxes are
+ * centred on the text to the pixel.
+ *
+ * So a mark that did not bring a background is given one: the same faint
+ * fill, the same radius, the same inset. A mark that did bring one keeps it
+ * and fills the box, because drawing a second shape around a shape is the
+ * thing this is trying to avoid. Either way the block is identical and the
+ * ink inside it is the vendor's business. */
+.vmark{width:15px;height:15px;flex:0 0 auto;border-radius:4px;object-fit:contain;
+  padding:1.5px;box-sizing:border-box;background:var(--sel)}
+.vmark.filled{padding:0;background:none}
+/* The fallback, and the reason a missing icon is not a broken row: a lettered
+   tile in a colour of its own still tells two vendors apart at a glance. */
+.vmono{
+  width:15px;height:15px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
+  display:grid;place-items:center;color:#fff;
+  font-size:9px;font-weight:600;letter-spacing:0;text-transform:uppercase;
+}
+/* Our own glyph is drawn rather than fetched: the official plan is the one
+   row that must have a mark on a machine that has never been online. */
+/* Typed as svg.vglyph so it outranks the .ico-sm every drawn icon carries:
+   .6 is right for a chrome glyph and too faint for a vendor's mark. Ours is
+   bare strokes, so it takes the same block as any other bare mark. */
+svg.vglyph{width:15px;height:15px;opacity:1;
+  padding:1.5px;box-sizing:border-box;border-radius:4px;background:var(--sel)}
+/* Black-on-transparent is what a good half of these vendors ship, and in the
+   dark theme that is a black square on a black row. Inverted only where the
+   bytes were measured to be exactly that. */
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vmark.invert-dark{filter:invert(1)}}
+:root[data-theme="dark"] .vmark.invert-dark{filter:invert(1)}
+/* Smaller in the group header, which is 10.5px uppercase, and given the gap
+   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}
+/* 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;
+}
+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;
@@ -864,8 +955,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}
@@ -1054,9 +1154,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;
@@ -1440,8 +1547,66 @@ 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;
@@ -1478,8 +1643,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
@@ -1707,6 +1896,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.
@@ -1729,6 +1933,12 @@ const ICON_PATHS = {
     "M10.2 3.2 7.6 5a2.7 2.7 0 0 1-1.7.5l-1.6-.1a.6.6 0 0 0-.45 1.03l5.72 5.72a.6.6 0 0 0 1.03-.45l-.1-1.6A2.7 2.7 0 0 1 11 8.4l1.8-2.6",
     "M6.2 9.8 2.8 13.2",
   ],
+  // The product's own mark: two open arcs around a centre, the same glyph the
+  // application icon draws, at half its scale. Drawn rather than fetched,
+  // because the official plan's rows have to have a mark on a machine that
+  // has never reached the network.
+  oharness: ["M10 3H6a3 3 0 0 0-3 3v4", "M6 13h4a3 3 0 0 0 3-3V6"],
+  oharnessDots: [[8, 8]],
   // A speech bubble with a tail: what a session is, before it has a title.
   chat: [
     "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" +
@@ -1920,6 +2130,120 @@ let atBottom = true;
  * chosen value. It exists because a native select draws its popup and its
  * focus ring with the operating system's chrome, which no stylesheet reaches.
  */
+/**
+ * The mark for one model vendor, for the rows of the model menu.
+ *
+ * The same arrangement the connector list uses, for the same reason: the
+ * vendor's own icon when there is one, a lettered tile when there is not, and
+ * no third-party request from this page either way — the server fetches the
+ * icon once and serves it from this origin, so opening the menu does not tell
+ * two dozen vendors that this machine looked at their name.
+ *
+ * The resolution happens once per vendor rather than once per row. A vendor
+ * with four hundred models would otherwise decode the same image four hundred
+ * times and measure it four hundred times, on every repaint of the list.
+ */
+const providerMarks = new Map();
+
+const providerIconUrl = (id) => q("/provider-icon?id=" + encodeURIComponent(id));
+
+/** What is known about a vendor's icon, and who is waiting to hear. */
+function providerIconState(id) {
+  let state = providerMarks.get(id);
+  if (state) return state;
+  state = { status: "pending", invert: false, filled: false, waiting: [] };
+  providerMarks.set(id, state);
+
+  const probe = new Image();
+  probe.addEventListener("load", () => {
+    state.status = "ok";
+    const profile = markProfile(probe);
+    state.invert = profile.invert;
+    state.filled = profile.filled;
+    const waiting = state.waiting.splice(0);
+    for (const swap of waiting) swap();
+  });
+  // A vendor with no icon is ordinary: local servers have no site to ask, and
+  // plenty of sites answer nothing usable. The tile is a complete answer.
+  probe.addEventListener("error", () => {
+    state.status = "none";
+    state.waiting.length = 0;
+  });
+  probe.src = providerIconUrl(id);
+  return state;
+}
+
+/** A stable hue per vendor, so a tile is the same colour on every repaint. */
+function providerMono(id, label, extra) {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) % 360;
+  const mono = el("span", "vmono" + (extra ? " " + extra : ""), (label || id || "?").trim().charAt(0));
+  mono.style.background = "hsl(" + hash + " 42% 42%)";
+  return mono;
+}
+
+function providerLogo(id, state, extra) {
+  const img = new Image();
+  // A mark that owns its whole box keeps it; one that is bare ink is inset,
+  // so a wide glyph with no margin of its own does not read as bigger and
+  // off-line next to a tile that fills the same square.
+  img.className =
+    "vmark" +
+    (state.filled ? " filled" : "") +
+    (state.invert ? " invert-dark" : "") +
+    (extra ? " " + extra : "");
+  img.alt = "";
+  img.src = providerIconUrl(id);
+  return img;
+}
+
+/**
+ * A vendor's mark, ready to put in a row.
+ *
+ * Returns something to draw now, not a promise: the menu repaints on every
+ * keystroke and cannot wait on the network. A tile goes in, and if the icon
+ * turns out to exist it takes the tile's place — but only if that tile is
+ * still on the page, since the row it was made for may already be gone.
+ */
+function providerMark(id, label, extra) {
+  // Ours is drawn from the same paths as the application icon rather than
+  // fetched from our own site: it is the one mark that has to be there
+  // offline, on the row that is being recommended.
+  if (id === "official") return svgIcon("oharness", "vglyph" + (extra ? " " + extra : ""));
+
+  const state = providerIconState(id);
+  if (state.status === "ok") return providerLogo(id, state, extra);
+
+  const mono = providerMono(id, label, extra);
+  if (state.status === "pending") {
+    state.waiting.push(() => {
+      if (mono.isConnected) mono.replaceWith(providerLogo(id, state, 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");
@@ -1995,6 +2319,10 @@ function makePicker(id, onPick, extra) {
         const header = el("button", "menu-group" + (collapsed.has(group) && !searching ? "" : " open"));
         header.type = "button";
         header.appendChild(el("span", "chev"));
+        // The vendor's mark leads its header, so a folded list reads as a
+        // column of vendors rather than as a column of lowercase words.
+        const groupMark = api.groupMark && api.groupMark(group);
+        if (groupMark) header.appendChild(groupMark);
         header.appendChild(el("span", "g-name", group));
         // A vendor may be worth marking out — the official plan is the one
         // this project stands behind, and a group header is where someone
@@ -2020,6 +2348,10 @@ function makePicker(id, onPick, extra) {
       );
       item.type = "button";
       item.appendChild(el("span", "tick", "✓"));
+      // Between the tick and the name: the row is "is this the one" then
+      // "whose is it" then "which model", which is the order it is read in.
+      const mark = option.mark && option.mark();
+      if (mark) item.appendChild(mark);
       item.appendChild(el("span", "menu-label", option.label));
       if (option.sub) item.appendChild(el("span", "sub", option.sub));
       item.addEventListener("click", () => {
@@ -2111,14 +2443,22 @@ function makePicker(id, onPick, extra) {
   const api = {
     /** Optional: a badge for a group header, e.g. the recommended vendor. */
     groupTag: null,
+    /** Optional: a mark for a group header, e.g. the vendor's own icon. */
+    groupMark: null,
     set(list, current) {
       options = list;
       value = current;
       const match = list.find((option) => option.value === current);
-      // Discovered ids are namespaced and long; the tail is the part that
-      // identifies the model, and the full id is still in the menu.
+      // The mark travels with the choice onto the bar. The label there is a
+      // truncated id — the tail of google/gemini-3.6-flash:batch says nothing
+      // about who is being paid for it, and that is the half of the answer
+      // somebody glances down to check.
+      const stale = button.querySelector(".picker-mark");
+      if (stale) stale.remove();
+      const mark = match && match.mark && match.mark("picker-mark");
+      if (mark) button.insertBefore(mark, label);
       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() {
@@ -3487,10 +3827,23 @@ async function loadModels() {
       (p.recommended ? 0 : (populated.has(p.id) ? 0 : 2000) + (p.configured ? 0 : 1000)) + i,
     ]),
   );
+  // One closure per vendor, not one per model: four hundred rows repaint on
+  // every keystroke in the search field.
+  const vendorLabels = new Map(providers.map((p) => [p.id, p.label || p.id]));
+  const markers = new Map(
+    providers.map((p) => [
+      p.id,
+      (extra) => providerMark(p.id, vendorLabels.get(p.id) || p.id, extra),
+    ]),
+  );
+  const markFor = (id) =>
+    markers.get(id) || ((extra) => providerMark(id, id, extra));
+
   const listed = models.map((m) => ({
     value: m.id,
     label: m.id,
     group: m.provider,
+    mark: markFor(m.provider),
     sub: m.contextWindow ? Math.round(m.contextWindow / 1000) + "k" : "",
   }));
 
@@ -3505,6 +3858,7 @@ async function loadModels() {
       value: "setup:" + p.id,
       label: t(p.configured ? "menu.discover" : "menu.setUp"),
       group: p.id,
+      mark: markFor(p.id),
       sub: "",
     }));
 
@@ -3521,6 +3875,7 @@ async function loadModels() {
   const current = models.find((m) => m.current);
   const recommended = new Set(providers.filter((p) => p.recommended).map((p) => p.id));
   modelPicker.groupTag = (group) => (recommended.has(group) ? t("models.recommended") : null);
+  modelPicker.groupMark = (group) => markFor(group)();
   modelPicker.options = modelOptions;
   modelPicker.set(modelOptions, current ? current.id : null);
 }
@@ -3880,7 +4235,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 }));
@@ -4175,7 +4530,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() {
@@ -4304,8 +4659,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. */
@@ -4342,18 +4699,174 @@ 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.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.description || "").toLowerCase().includes(query),
+      )
+      .slice(0, 4)
+      .map((plugin) => ({
+        type: "plugin",
+        icon: "plugin",
+        label: 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
@@ -4366,7 +4879,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"),
@@ -4374,13 +4887,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") },
   ];
 }
@@ -4388,16 +4909,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");
@@ -4408,6 +4941,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.
@@ -4440,6 +4978,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();
@@ -4449,7 +5007,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);
 }
 
@@ -4548,14 +5109,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();
 
@@ -4570,7 +5136,17 @@ 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.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")));
@@ -4581,7 +5157,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");
@@ -4621,14 +5197,20 @@ function connectorMark(id, label) {
 }
 
 /**
- * Whether a mark is a dark shape on nothing, rather than a picture.
+ * What kind of mark an image is.
  *
  * Measured rather than guessed, because there is no way to tell from a URL or
  * a content type which logos are the black-on-transparent kind. The image is
  * already decoded and comes from this origin, so a 32px sample of it is a few
  * hundred microseconds and taints nothing.
+ *
+ * Two answers come out of the one sample. Filled is whether the mark brought
+ * its own background — a tile with a glyph punched out of it, which owns every
+ * pixel of its box. Invert is whether it is a dark shape on nothing, which in
+ * the dark theme is a black shape on a black row.
  */
-function isDarkFlatGlyph(img) {
+function markProfile(img) {
+  const unknown = { filled: false, invert: false };
   try {
     const size = 32;
     const canvas = document.createElement("canvas");
@@ -4648,27 +5230,57 @@ function isDarkFlatGlyph(img) {
       if (hi - lo > 40) coloured++;
       if (hi < 110) dark++;
     }
-    if (!opaque) return false;
+    if (!opaque) return unknown;
 
     // A mark that fills its whole box brought its own background, and whatever
     // it drew on that background is its business.
-    if (opaque / (size * size) > 0.75) return false;
-    return dark / opaque > 0.7 && coloured / opaque < 0.15;
+    const filled = opaque / (size * size) > 0.75;
+    if (filled) return { filled: true, invert: false };
+    return { filled: false, invert: dark / opaque > 0.7 && coloured / opaque < 0.15 };
   } catch {
     // A canvas that will not read is not worth a broken icon.
-    return false;
+    return unknown;
   }
 }
 
+/** The half of the profile the connector list asks for. */
+function isDarkFlatGlyph(img) {
+  return markProfile(img).invert;
+}
+
 /** One thing this harness already has: attachable, and removable if we added it. */
 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
+  const heading = el("div", "mk-name", 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 })
@@ -4690,7 +5302,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");
@@ -4702,7 +5314,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",
@@ -4714,7 +5326,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");
@@ -4766,7 +5380,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();
 }
@@ -4795,6 +5409,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() {
@@ -4848,12 +5464,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.
  *
@@ -4865,13 +5502,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);
@@ -4880,6 +5525,231 @@ 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;
+  attachMenu.style.bottom = "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. */
@@ -4893,6 +5763,7 @@ function mentionUnderCaret() {
 }
 
 function openMention(mention) {
+  ensureOffer();
   mentionAt = mention.at;
   attachView = "mention";
   attachQuery = mention.query.trim();
@@ -4909,10 +5780,45 @@ function openMention(mention) {
   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);
@@ -4922,9 +5828,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
@@ -4960,6 +5868,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
@@ -4969,6 +5885,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();
@@ -4995,8 +5912,12 @@ 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
@@ -5860,6 +6781,10 @@ async function showModels() {
 
     const top = el("summary", "row-head");
     top.appendChild(el("span", "chev"));
+    // The same mark the model menu puts on every row. This panel is the other
+    // place the full list of vendors is read, and reading it by name alone is
+    // the thing the mark was added to fix.
+    top.appendChild(providerMark(provider.id, provider.label || provider.id));
 
     const naming = el("div", "naming");
     const line = el("div", "name-line");
@@ -7269,6 +8194,7 @@ function openProviderPicker(rest, byProvider) {
 
       const head = el("summary", "pp-item");
       head.appendChild(el("span", "chev"));
+      head.appendChild(providerMark(provider.id, provider.label || provider.id));
       const naming = el("div", "naming");
       naming.appendChild(el("div", "pp-name", provider.label || provider.id));
       if (provider.description) naming.appendChild(el("div", "row-desc", provider.description));
@@ -9180,6 +10106,7 @@ void (async () => {
   for (const button of document.querySelectorAll("#starters button")) {
     button.addEventListener("click", () => {
       input.value = button.dataset.p;
+      paintMirror();
       document.getElementById("composer").requestSubmit();
     });
   }
@@ -9306,7 +10233,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>
@@ -9393,9 +10327,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">