@oharness/server 0.3.0 → 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)}
@@ -394,13 +414,22 @@ svg.vglyph{width:15px;height:15px;opacity:1;
 /* 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;
@@ -926,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}
@@ -1116,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;
@@ -1502,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;
@@ -1540,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
@@ -1769,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.
@@ -2081,6 +2223,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 +2457,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() {
@@ -4074,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 }));
@@ -4369,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() {
@@ -4498,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. */
@@ -4536,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
@@ -4560,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"),
@@ -4568,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") },
   ];
 }
@@ -4582,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");
@@ -4602,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.
@@ -4634,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();
@@ -4643,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);
 }
 
@@ -4742,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();
 
@@ -4764,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")));
@@ -4775,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");
@@ -4870,11 +5252,35 @@ 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
+  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 })
@@ -4896,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");
@@ -4908,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",
@@ -4920,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");
@@ -4972,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();
 }
@@ -5001,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() {
@@ -5054,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.
  *
@@ -5071,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);
@@ -5086,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. */
@@ -5099,6 +5763,7 @@ function mentionUnderCaret() {
 }
 
 function openMention(mention) {
+  ensureOffer();
   mentionAt = mention.at;
   attachView = "mention";
   attachQuery = mention.query.trim();
@@ -5115,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);
@@ -5128,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
@@ -5166,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
@@ -5175,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();
@@ -5201,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
@@ -9391,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();
     });
   }
@@ -9517,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>
@@ -9604,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">