@jossuealcala/madre 0.4.1 → 0.5.0

package/public/app.js

@@ -3,6 +3,7 @@ import { CONDITIONS, allConditions, detectPlatform, diagnose, fixesFor, PLATFORM
 import { answerFor, INQUIRIES, STRIKES } from './inquiry.js';
 import { DEFAULT_LANGUAGE, LANGUAGES, isLanguage, language, pick, setLanguage, t } from './i18n.js';
 import { resay } from './resay.js';
+import { familyOf, languageLabel, tokenize } from './syntax.js';
 
 // Before anything is written on the screen. The constants below are sentences, and a sentence
 // chosen in the wrong language stays wrong for the life of the page.
@@ -61,6 +62,7 @@ const els = {
 // server (/api/commands) and run there, read-only, as fact cards.
 const CLIENT_COMMANDS = [
   { name: 'create', title: 'CREATE', usage: '/create <what to make>', summary: t('Arm CREATE for this message: the agent may add new files to the project where they belong.'), available: true, client: true },
+  { name: 'module', title: 'MODULE', usage: '/module <what it should do>', summary: t('Build one MADRE module with the guided SDK flow: the agent writes it, then you review and install it.'), available: true, client: true },
   { name: 'image', title: t('Image'), usage: '/image <what to draw>', summary: t('Ask for an image: arms CREATE with the image scope and routes to an agent that can generate images.'), available: true, client: true },
   { name: 'stopall', title: t('STOP ALL'), usage: '/stopall', summary: t('Master brake: halt every plan and turn in flight. Never reaches an agent.'), available: true, client: true },
 ];
@@ -122,6 +124,7 @@ const state = {
   pending: [],             // attachments uploaded for the next message
   projectRoot: '',
   create: false,           // creation lease armed for the next message
+  moduleCommand: false,    // /module is being composed: CREATE plus the guided SDK contract
   ashInstalled: false,
   ash: false,              // Ash asked for on this message: compact replies, nothing rewritten
   chosenModel: {},         // id -> model name picked in the composer
@@ -138,6 +141,17 @@ const failureKey = (failure) => `${failure.time ?? ''}|${failure.agent ?? ''}|${
 const saveDismissed = () => { try { localStorage.setItem('pulse.mother.dismissed', JSON.stringify([...dismissed].slice(-400))); } catch { /* no storage */ } };
 const openFailures = () => state.failures.filter((failure) => !failure.recovered && !dismissed.has(failureKey(failure)));
 
+// Which agent last wrote to a path, taken from what the room already recorded: the artifacts a
+// creation lease produced, and the files a CONTROL turn changed. Nothing new is stored and nothing
+// is inferred from the filesystem — if MADRE did not see it happen, the file carries no mark.
+const touched = new Map();
+function markTouched(agent, files) {
+  for (const file of files ?? []) {
+    const path = typeof file === 'string' ? file : file?.path;
+    if (path && agent) touched.set(String(path).replace(/^\.?\//, ''), agent);
+  }
+}
+
 
 
 /* ---------- helpers ---------- */
@@ -297,6 +311,8 @@ const viewer = {
 const viewerUI = {
   selection: document.querySelector('#viewer-selection'),
   review: document.querySelector('#viewer-review'),
+  lang: document.querySelector('#viewer-lang'),
+  hintSelect: document.querySelector('#viewer-hint-select'),
   menu: document.querySelector('#viewer-menu'),
   path: null,      // project-relative path of the open text file, if any
   from: null, to: null,
@@ -312,6 +328,9 @@ function setSelection(from, to) {
   const has = from !== null;
   viewerUI.selection.hidden = !has;
   viewerUI.review.hidden = !has;
+  // The button only exists once something is selected, and nobody guesses that a line number is
+  // clickable. While there is nothing selected and the file is readable as text, say how.
+  if (viewerUI.hintSelect) viewerUI.hintSelect.hidden = has || !viewerUI.lineNodes.length;
   if (has) viewerUI.selection.textContent = lo === hi ? `L${lo}` : `L${lo}-${hi}`;
 }
 function referenceForSelection() {
@@ -323,7 +342,11 @@ function referenceForSelection() {
 function reviewWith(agentId) {
   const reference = referenceForSelection();
   const current = els.input.value.trim();
-  els.input.value = `${reference} ${current ? current : 'review this: '}`;
+  // The reference and the cursor, nothing else. This used to seed "review this: " — an English
+  // phrase in a Spanish room, and worse, a sentence MADRE put in the human's mouth: whatever they
+  // typed next landed after it and read like somebody else's words. They just chose an agent and
+  // a range; they know what they want to ask.
+  els.input.value = current ? `${reference} ${current}` : `${reference} `;
   if (agentId && state.agents.get(agentId)?.ready) { els.target.value = agentId; renderPicker(); }
   hideViewerMenu();
   viewer.dialog.close();
@@ -333,17 +356,27 @@ function reviewWith(agentId) {
 }
 function showViewerMenu(x, y) {
   const menuNode = viewerUI.menu;
-  menuNode.replaceChildren(el('div', 'hint', t('REVIEW {what} WITH', { what: referenceForSelection() })));
+  // Two lines: what is being sent, and the question. One line put the verb at one end and its
+  // preposition at the other, and in Spanish the sentence ended on a dangling «CON» that the
+  // menu then cut off.
+  const head = el('div', 'hint');
+  head.append(el('b', null, referenceForSelection()));
+  head.append(el('span', null, t('review it with')));
+  menuNode.replaceChildren(head);
   for (const agent of state.agents.values()) {
     const item = paint(el('button', `item${agent.ready ? '' : ' off'}`), agent.id);
     item.type = 'button';
-    item.append(el('b', null, `@${agent.id}`), el('span', null, agent.ready ? label(agent.id) : t('{label} · not ready', { label: label(agent.id) })));
+    // `@codex Codex` says one thing twice. The handle is the name; beside it goes only what the
+    // handle does not already tell you — the vendor, or why it cannot take this.
+    const aside = agent.ready ? (brandOf(agent.id).vendor ?? '') : t('no session');
+    item.append(el('b', null, `@${agent.id}`), el('span', null, aside));
     item.disabled = !agent.ready;
     item.addEventListener('click', () => reviewWith(agent.id));
     menuNode.append(item);
   }
   menuNode.hidden = false;
-  const width = 240, height = 40 + 36 * state.agents.size;
+  // The header is two lines now and the reference can wrap; leave room rather than clip it.
+  const width = 260, height = 62 + 36 * state.agents.size;
   menuNode.style.left = `${Math.min(x, window.innerWidth - width - 12)}px`;
   menuNode.style.top = `${Math.min(y, window.innerHeight - height - 12)}px`;
 }
@@ -355,14 +388,26 @@ viewerUI.review?.addEventListener('click', (event) => {
 viewer.dialog.addEventListener('click', (event) => { if (!viewerUI.menu.hidden && !viewerUI.menu.contains(event.target) && event.target !== viewerUI.review) hideViewerMenu(); });
 viewer.dialog.addEventListener('close', () => { hideViewerMenu(); setSelection(null, null); ripley.frame = null; ripley.history = []; ripleyClearErrors(); if (ripley.nav) ripley.nav.hidden = true; });
 
-function codeView(text, { line = null, lines = null } = {}) {
+function codeView(text, { line = null, lines = null, name = null } = {}) {
   const pre = el('pre', 'code');
   viewerUI.lineNodes = [];
   const rows = text.replace(/\n$/, '').split('\n');
+  // Read by what the file is. The highlighter never rewrites a line — it hands back spans over
+  // the same characters — so what is on screen and what is on disk stay the same bytes, and a
+  // selection sent to an agent is the file, not a rendering of it.
+  const family = familyOf(name ?? '');
+  if (viewerUI.lang) {
+    const label = languageLabel(name ?? '');
+    viewerUI.lang.textContent = label ?? '';
+    viewerUI.lang.hidden = !label;
+  }
+  const carry = { inBlock: false };
   rows.forEach((content, index) => {
     const n = index + 1;
     const ln = el('span', 'ln', String(n));
-    const tx = el('span', 'tx', content || ' ');
+    const tx = el('span', 'tx');
+    if (!content) tx.append(' ');
+    else for (const piece of tokenize(content, family, carry)) tx.append(piece.kind ? el('span', `t-${piece.kind}`, piece.text) : piece.text);
     ln.dataset.n = n; tx.dataset.n = n;
     const marked = lines ? n >= lines.from && n <= lines.to : n === line;
     if (marked) { ln.classList.add('hl'); tx.classList.add('hl'); }
@@ -392,7 +437,7 @@ function showViewerSource() {
   if (ripley.nav) ripley.nav.hidden = true;
   ripleyClearErrors();
   ripley.frame = null;
-  const pre = codeView(viewerMode.text, { line: viewerMode.line, lines: viewerMode.lines });
+  const pre = codeView(viewerMode.text, { line: viewerMode.line, lines: viewerMode.lines, name: viewerUI.path ?? viewer.path.textContent });
   viewer.body.replaceChildren(pre);
   if (!state.ripley && viewerMode.kind) {
     const hint = el('div', 'viewer-hint');
@@ -772,7 +817,7 @@ function renderPicker() {
     text.append(t('to '));
     text.append(el('b', null, `@${current.id}`));
     if (current.local) {
-      const note = el('span', 'pick-note', t('memory · answers & asks the crew · never writes'));
+      const note = el('span', 'pick-note', t('memory · never writes'));
       const measured = state.localModel?.checked;
       note.title = `${t('@madre runs on this machine and speaks for what the room remembers. "@madre, ask the crew …" opens a round with every agent online. To change files, write to a CLI agent.')}${
         measured ? `\n\n${t('Measured against this room {when}: it landed where the crew landed on {matched} of {n} real questions{verdict}', { when: agoWords(measured.at), matched: measured.matched, n: measured.n, verdict: measured.passed ? t('. Ready to be worked in.') : t(' — not yet.') })}` : `\n\n${t('Nobody has measured it against this project yet: MU/TH/UR → the three tests, or the line in the room when it joined.')}`}`;
@@ -784,12 +829,18 @@ function renderPicker() {
     modeChip.title = t('Permission mode for this message · {hint}', { hint: MODES[state.mode].hint });
     modeChip.addEventListener('click', (event) => { event.stopPropagation(); toggleModeMenu(current.id, modeChip); });
     text.append(modeChip);
+    // An agent with no models to choose from gets no chooser. @madre answers on whatever chat
+    // model Ollama holds, which is decided on Ollama's card and not here, so the chip only opened
+    // an empty menu — and it was the piece that pushed this row onto a second line.
     const chosen = state.chosenModel[current.id];
-    const modelChip = el('button', 'model-chip', chosen ? `${chosen} ▾` : t('default model ▾'));
-    modelChip.type = 'button';
-    modelChip.title = t('Choose the model for this agent');
-    modelChip.addEventListener('click', (event) => { event.stopPropagation(); toggleModelMenu(current.id, modelChip); });
-    text.append(modelChip);
+    const choices = state.models[current.id]?.models ?? null;
+    if (!current.local && (choices === null || choices.length)) {
+      const modelChip = el('button', 'model-chip', chosen ? `${chosen} ▾` : t('default model ▾'));
+      modelChip.type = 'button';
+      modelChip.title = t('Choose the model for this agent');
+      modelChip.addEventListener('click', (event) => { event.stopPropagation(); toggleModelMenu(current.id, modelChip); });
+      text.append(modelChip);
+    }
     els.picker.append(text);
   }
   if (typeof renderCreateScopes === 'function') renderCreateScopes();
@@ -881,7 +932,11 @@ function toggleModeMenu(id, anchor) {
   const scopes = state.capabilities[id]?.scopes;
   const canRaise = Boolean(scopes?.write?.capable);
   const title = el('div', 'model-menu-title');
-  title.append(el('b', null, `@${id}`), t(' · mode for this message · ceiling #{cap}', { cap }));
+  // Short enough to sit on one line at any width the menu takes. That it applies to this message
+  // and not to every one after it is the mode chip's own tooltip, and the list below is literally
+  // the modes — so the header carries the two facts nothing else here does: who, and how far.
+  title.append(el('b', null, `@${id}`), t(' · ceiling #{cap}', { cap }));
+  title.title = t('Permission mode for this message · {hint}', { hint: MODES[cap].hint });
   modeMenu.append(title);
   const ladder = el('div', 'mode-ladder');
   for (const n of [0, 1, 2, 3, 4]) {
@@ -1083,19 +1138,20 @@ function bridgeCard(agent) {
   card.id = `bridge-${agent.id}`;
   const session = state.sessions?.[agent.id];
   const signedIn = session?.state === 'signed-in';
-  const stage = !agent.detected ? 'missing' : !agent.ready ? 'inert' : signedIn ? 'ready' : 'signed-out';
+  const routeBlocked = Boolean(agent.route?.custom && !agent.route?.allowed);
+  const stage = !agent.detected ? 'missing' : !agent.ready ? 'inert' : routeBlocked ? 'route-blocked' : signedIn ? 'ready' : 'signed-out';
   const head = el('div', 'head');
   head.append(avatar(agent.id, { size: 30, status: stage === 'ready' ? 'ready' : agent.detected ? 'detected' : 'offline' }));
   const title = el('div', 'title');
   title.append(el('b', null, agent.label));
   title.append(el('span', 'vendor', brandOf(agent.id).vendor));
   head.append(title);
-  head.append(el('span', `state ${stage}`, stage === 'missing' ? t('NOT INSTALLED') : stage === 'inert' ? t('NO ADAPTER') : stage === 'ready' ? t('READY') : t('SIGNED OUT')));
+  head.append(el('span', `state ${stage}`, stage === 'missing' ? t('NOT INSTALLED') : stage === 'inert' ? t('NO ADAPTER') : stage === 'route-blocked' ? t('ROUTE BLOCKED') : stage === 'ready' ? t('READY') : t('SIGNED OUT')));
   card.append(head);
   const detail = el('div', 'detail');
   if (agent.id === 'madre') detail.append(ollamaDetail(agent));
   else if (stage === 'missing') detail.append(agent.install ? t('Not on this computer · {command}', { command: agent.install.display }) : t('Not on this computer.'));
-  else detail.append(`${agent.version ?? t('version unknown')}${session?.detail ? ` · ${session.detail}` : ''}`);
+  else detail.append(`${agent.version ?? t('version unknown')}${session?.detail ? ` · ${session.detail}` : ''}${agent.route?.destination ? ` · ${t('route: {destination}', { destination: agent.route.destination })}` : ''}`);
   card.append(detail);
   // What is behind this door: the account it needs, and whether there is a way in without paying.
   if (agent.account) {
@@ -1445,7 +1501,10 @@ function showReplyMenu(source, x, y) {
   for (const agent of state.agents.values()) {
     const item = paint(el('button', `item${agent.ready ? '' : ' off'}`), agent.id);
     item.type = 'button';
-    item.append(el('b', null, `@${agent.id}`), el('span', null, agent.ready ? (agent.id === source.sender ? t('the same agent') : label(agent.id)) : t('{label} · not ready', { label: label(agent.id) })));
+    // The same twice-said name as the viewer's menu: the handle IS the name. Beside it goes only
+    // what the handle does not carry — that this is the one who just spoke, its vendor, or why not.
+    const aside = !agent.ready ? t('no session') : agent.id === source.sender ? t('the same agent') : (brandOf(agent.id).vendor ?? '');
+    item.append(el('b', null, `@${agent.id}`), el('span', null, aside));
     item.disabled = !agent.ready;
     item.addEventListener('click', () => replyWith(agent.id, source));
     replyMenu.append(item);
@@ -1637,6 +1696,11 @@ function renderThinking(event) {
   return node;
 }
 
+function warnUnknownModuleFields(installed) {
+  const unknown = installed?.unknown ?? [];
+  if (unknown.length) setTimeout(() => toast(t('MU/TH/UR › {name} declares {fields}, which this MADRE does not know. A typo, or a field from a newer version.', { name: installed.name, fields: unknown.join(', ') })), 2600);
+}
+
 // The archivist reports: which agent read which stretch of the room and how many notes it kept.
 // module · @codex wrote read-mail.module.mjs · INSTALL FOR EVERY ROOM · INSTALL FOR THIS PROJECT · LATER
 function renderModuleProposed(event) {
@@ -1652,6 +1716,7 @@ function renderModuleProposed(event) {
       const payload = await fetch('/api/extensions/install-file', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path, scope }) }).then((response) => response.json());
       if (payload.error) throw new Error(payload.error);
       toast(t('MU/TH/UR › {name} installed for {where}. Switch it on in MODULES.', { name: payload.installed.name, where: scope === 'project' ? t('this project') : t('every room') }));
+      warnUnknownModuleFields(payload.installed);
       modules.items = payload.extensions ?? modules.items; if (modules.dialog.open) renderModules();
     } catch (error) { toast(t('The module was not installed: {error}', { error: error.message })); button.disabled = false; }
   };
@@ -2394,12 +2459,12 @@ function renderEventNode(event) {
     case 'mode.requested': node = renderModeRequest(event); break;
     case 'control.started': node = renderControlStarted(event); break;
     case 'create.reverted': node = renderCreateReverted(event); break;
-    case 'control.changed': node = renderControlChanged(event); if (!replaying) ripleyMaybeReload((event.payload.files ?? []).map((file) => file.path)); break;
+    case 'control.changed': markTouched(event.payload.agent, event.payload.files); node = renderControlChanged(event); if (!replaying) ripleyMaybeReload((event.payload.files ?? []).map((file) => file.path)); break;
     case 'control.reverted': node = renderControlReverted(event); break;
     case 'mode.granted':
     case 'mode.denied': settleModeRequest(event); return;
     case 'plan.ignored': node = renderPlanIgnored(event); break;
-    case 'artifacts.created': attachArtifacts(event); if (!replaying) ripleyMaybeReload((event.payload.files ?? []).map((file) => file.path)); return;
+    case 'artifacts.created': markTouched(event.payload.agent, event.payload.files); attachArtifacts(event); if (!replaying) ripleyMaybeReload((event.payload.files ?? []).map((file) => file.path)); return;
     case 'command.output': node = renderCommandCard(event); break;
     case 'eyecat.flagged': node = renderEyecat(event); break;
     case 'eyecat.settled': settleEyecat(event); return;
@@ -2563,6 +2628,13 @@ function treeNode(path, entry) {
     item.append(button, children);
   } else {
     button.append(el('span', 'caret', ''), el('span', 'name', entry.name), el('span', 'size', formatSize(entry.size)));
+    const by = touched.get(path);
+    if (by) {
+      // Its colour is the agent's own, so the tree reads the same way the thread does.
+      const dot = paint(el('span', 'touched'), by);
+      dot.title = t('{agent} wrote this file in this room', { agent: `@${by}` });
+      button.append(dot);
+    }
     button.addEventListener('click', () => { void openViewer({ root: 'project', path, label: path }); });
     item.append(button);
   }
@@ -2650,10 +2722,14 @@ async function loadChats() {
 }
 
 async function openChat(id) {
+  if (id === chats.active) { setChats(false); return; }
   const response = await fetch(`/api/chats/${id}`, { method: 'POST' });
   const result = await response.json().catch(() => ({}));
   if (!response.ok) { toast(`MU/TH/UR › ${result.error ?? 'that conversation could not be opened.'}`); return; }
-  window.location.reload();
+  const payload = await fetch('/api/state').then((one) => one.json()).catch(() => null);
+  if (!payload) { window.location.reload(); return; }
+  await paintConversation(payload);
+  setChats(false);
 }
 
 function setChats(open) {
@@ -2750,7 +2826,7 @@ document.querySelector('#mother-button')?.addEventListener('mouseleave', endHove
 document.querySelector('#mother-button')?.addEventListener('click', endHover);
 
 // Debug surface for tests and for the curious: window.__pulse.trackHold(true, t)
-globalThis.__pulse = { trackHold, armExpendable, disarmExpendable, beginHover, endHover, state, moduleCard, openCore: (...args) => openCore(...args), get core() { return core; } };
+globalThis.__pulse = { trackHold, armExpendable, disarmExpendable, beginHover, endHover, state, moduleCard, runSlashCommand, syncModuleComposer, openCore: (...args) => openCore(...args), get core() { return core; } };
 
 els.thread.addEventListener('wheel', (event) => trackHold(event.deltaY > 0), { passive: true });
 let touchY = null;
@@ -2825,10 +2901,59 @@ function setConnection(value) {
 }
 if (typeof ResizeObserver === 'function' && els.composer) new ResizeObserver(placeToast).observe(els.composer);
 window.addEventListener?.('resize', placeToast);
-const stream = new EventSource(`/api/events?since=${state.lastSequence}`);
-stream.onopen = () => { setConnection('live'); replaying = false; };
-stream.onerror = () => setConnection('reconnecting');
-stream.onmessage = ({ data }) => renderEvent(JSON.parse(data));
+let stream = null;
+function connectStream() {
+  stream?.close?.();
+  stream = new EventSource(`/api/events?since=${state.lastSequence}`);
+  stream.onopen = () => { setConnection('live'); replaying = false; };
+  stream.onerror = () => setConnection('reconnecting');
+  stream.onmessage = ({ data }) => renderEvent(JSON.parse(data));
+}
+connectStream();
+
+// Everything the thread on screen knows that belongs to ONE conversation. Switching used to
+// reload the page, which is the brute way to be sure none of this was left over — and it cost a
+// whole boot: every fetch again, every panel again, the stream again. Repainting in place is
+// only safe while this list is complete, so it is written out rather than guessed at.
+function forgetConversation() {
+  state.seen.clear();
+  state.userMessages.clear();
+  state.ratings.clear();
+  state.ratingNodes.clear();
+  state.running.clear();
+  state.plansRunning.clear();
+  state.agentStats.clear();
+  touched.clear();
+  state.failures.length = 0;
+  state.pending.length = 0;
+  state.replyTo = null;
+  state.lastSender = null;
+  state.lastSequence = 0;
+  state.brakeArmed = false;
+  els.column.replaceChildren();
+  renderReplyQuote();
+  paintMotherBadge();
+  updateStopAll();
+}
+
+// The new conversation, painted where the old one was. The room, the crew and the archive do not
+// change between conversations — only the transcript does.
+async function paintConversation(payload) {
+  replaying = true;
+  forgetConversation();
+  chats.list = payload.chats?.chats ?? chats.list;
+  chats.active = payload.chats?.active ?? chats.active;
+  renderChats();
+  const here = chats.list.find((chat) => chat.id === chats.active);
+  const mark = document.querySelector('.project.chat-here');
+  if (mark) mark.textContent = here && chats.list.length > 1 ? here.title : '';
+  for (const event of payload.events ?? []) renderEvent(event);
+  renderAgents();
+  renderPicker();
+  renderOnboarding();
+  scrollToEnd();
+  connectStream();
+}
 
 /* ---------- composer ---------- */
 
@@ -2850,12 +2975,52 @@ els.input.addEventListener('input', autosize);
 els.input.addEventListener('scroll', syncHighlightScroll);
 autosize();
 
+// /module has its own visual language before it ever reaches an agent. The class is also the
+// animation trigger: it is added once when the prefix becomes a command, and removed when the
+// human edits away from it or the message leaves the composer.
+const MODULE_COMMAND = /^\/module(?:\s|$)/i;
+// A refusal that only flashes is a refusal the room forgets. `/module` needs #2 because writing a
+// module is writing a file, so the answer lands in the thread where every other decision of the
+// room lands — and it carries the way out: the button that arms the mode, without arming it.
+function moduleModeNotice() {
+  const node = el('div', 'system alert module-notice');
+  node.append(el('b', null, t('MU/TH/UR › ')));
+  node.append(t('/module writes a file, so it needs #2 CREATE. Your request is still in the composer.'));
+  const arm = el('button', 'cmd', t('ARM #2 CREATE'));
+  arm.type = 'button';
+  // The human arms it, here as everywhere: the command asked, the click grants.
+  arm.addEventListener('click', () => { setMode(2, { wink: true }); els.input.focus(); });
+  node.append(arm);
+  removeEmpty();
+  els.column.append(node);
+  node.scrollIntoView({ behavior: 'smooth', block: 'end' });
+}
+
+function askForModuleMode() {
+  toast(t('MU/TH/UR › /module needs #2 CREATE. Choose #2 in the mode chip, then send again.'));
+}
+function syncModuleComposer() {
+  const active = MODULE_COMMAND.test(els.input.value.trimStart());
+  if (state.moduleCommand === active) return;
+  state.moduleCommand = active;
+  els.composer.classList.toggle('module-command', active);
+  updateCrewLabel();
+  updatePlaceholder();
+  if (active && !state.create) askForModuleMode();
+}
+els.input.addEventListener('input', syncModuleComposer);
+syncModuleComposer();
+
 /* ---------- labels inside the field: @agent mentions and /commands ---------- */
 
 function allCommands() { return [...CLIENT_COMMANDS, ...(state.commands ?? [])]; }
 function knownAgentIds() { return [...state.agents.keys()]; }
 function escapeHtml(text) { return text.replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char])); }
 
+// The layer that draws over the field. Its one law: it decorates the characters that are there
+// and never adds, removes or re-typesets one. The caret belongs to the textarea underneath and is
+// placed by the textarea's own metrics — so the instant this layer writes a word the human did
+// not type, or draws it in another font, the two disagree and the caret lands inside a pill.
 function renderHighlight() {
   const text = els.input.value;
   const agents = knownAgentIds();
@@ -2864,7 +3029,11 @@ function renderHighlight() {
     const key = name.toLowerCase();
     if (sigil === '#') {
       if (!/^[0-4]$/.test(name)) return whole;
-      return `${lead}<span class="chip mode m${name}">#${name} ${MODES[Number(name)].label}</span>`;
+      // Only what was typed. This used to spell the mode out — `#2` drawn as `#2 CREATE` — and
+      // every character after it sat seven places to the right of its own caret. The name of the
+      // mode is already on the chip above the field; here the colour is enough.
+      const chip = `<span class="chip mode m${name}" title="${escapeHtml(MODES[Number(name)].label)}">#${name}</span>`;
+      return `${lead}${chip}`;
     }
     if (sigil === '!') {
       if (!/\.[A-Za-z0-9]{1,8}(?::\d+(?:-\d+)?)?$/.test(name)) return whole;
@@ -2961,6 +3130,7 @@ function pickMenu(index = menu.index) {
   els.input.setSelectionRange(caret, caret);
   closeMenu();
   autosize();
+  syncModuleComposer();
   els.input.focus();
 }
 els.input.addEventListener('input', () => { menu.index = 0; renderMenu(); });
@@ -2982,8 +3152,17 @@ async function runSlashCommand(text) {
   const name = match[1].toLowerCase();
   const rest = (match[2] ?? '').trim();
   if (name === 'stopall') { await stopAll(); return { handled: true }; }
-  if (name === 'create' || name === 'image') {
-    if (!rest) { toast(t('MU/TH/UR › /{name} needs a request after it, e.g. "/{name} a poster for the launch".', { name })); return { handled: true }; }
+  if (name === 'create' || name === 'image' || name === 'module') {
+    if (!rest) {
+      toast(name === 'module'
+        ? t('MU/TH/UR › /module needs a job, e.g. "/module summarize today’s commits".')
+        : t('MU/TH/UR › /{name} needs a request after it, e.g. "/{name} a poster for the launch".', { name }));
+      return { handled: true };
+    }
+    if (name === 'module' && !state.create) {
+      moduleModeNotice();
+      return { handled: true, preserve: true };
+    }
     let target = els.target.value;
     if (name === 'image') {
       const capable = [...state.agents.values()].filter((agent) => agent.ready && state.capabilities[agent.id]?.scopes?.imageGen?.enabled).map((agent) => agent.id);
@@ -2996,6 +3175,13 @@ async function runSlashCommand(text) {
       }
     }
     if (!state.create) setMode(2);
+    if (name === 'module') {
+      return {
+        handled: false,
+        target,
+        text: t('Create a MADRE module for this request: {request} Write exactly one <id>.module.mjs file for review. Do not install it; MADRE will show the human an install card.', { request: rest }),
+      };
+    }
     return { handled: false, text: rest, target };
   }
   const known = allCommands().find((item) => item.name === name);
@@ -3093,6 +3279,7 @@ function updateCrewLabel() {
   const order = state.ash && state.ashInstalled;
   els.crewLabel.textContent = state.intruder && state.mode < 3 ? t('INTRUDER ›') : state.mode >= 3 ? `MU/TH/UR · ${MODES[state.mode].label} @${(state.modeArmedFor ?? els.target.value ?? '').toUpperCase()} ›`
     : state.mode === 0 ? t('HUMAN · GHOST ›')
+      : state.moduleCommand ? (state.create ? 'MU/TH/UR · MODULE · CREATE ›' : t('MU/TH/UR · MODULE · NEEDS #2 ›'))
       : order ? (state.create ? 'MU/TH/UR · ASH · CREATE ›' : 'MU/TH/UR · ASH ›')
         : state.create ? t('HUMAN · CREATE ›')
           : state.expendable ? t('CREW · EXPENDABLE ›') : t('HUMAN ›');
@@ -3206,6 +3393,7 @@ els.composer.addEventListener('submit', async (event) => {
     els.input.value = '';
     els.composer.classList.remove('stopall');
     autosize();
+    syncModuleComposer();
     await stopAll();
     return;
   }
@@ -3235,7 +3423,13 @@ els.composer.addEventListener('submit', async (event) => {
     els.input.disabled = true;
     const result = await runSlashCommand(text).catch((error) => { toast(t('The command failed: {error}', { error: error.message })); return { handled: true }; });
     els.input.disabled = false;
-    if (result.handled) { els.input.value = ''; autosize(); els.input.focus(); return; }
+    if (result.handled) {
+      if (!result.preserve) els.input.value = '';
+      autosize();
+      syncModuleComposer();
+      els.input.focus();
+      return;
+    }
     outgoing = result.text ?? text;
     target = result.target ?? target;
   }
@@ -3259,6 +3453,7 @@ els.composer.addEventListener('submit', async (event) => {
       renderPendingAttachments();
       resetModeAfterSend(); // one mode per message; standing leases fall back to #2, everyone else to #1
       autosize();
+      syncModuleComposer();
     }
   } catch (error) {
     toast(t('Could not reach MADRE: {error}', { error: error.message }));
@@ -3844,8 +4039,30 @@ function metrics(box, rows) {
 }
 
 // Every card has the same floors in the same order, whatever the module is: what it is, what it
-// does, what it touches, how it is doing — and then, last and alone, the switch. The eye learns
-// the shape once and finds the button in the same place on all of them.
+// does, what it touches, how it is doing — and then its actions, with the main switch last. A DEV
+// module also offers uninstall there; a module MADRE ships never does.
+function removeModuleButton(item, { className = 'remove-module', text = t('UNINSTALL') } = {}) {
+  const remove = el('button', className, text);
+  remove.type = 'button';
+  remove.title = t('Delete module file {file}', { file: item.file });
+  remove.addEventListener('click', async () => {
+    if (!window.confirm(t("Remove {name}? Its file {file} is deleted. MADRE's own modules cannot be removed.", { name: item.name, file: item.file }))) return;
+    remove.disabled = true;
+    try {
+      const response = await fetch(`/api/extensions/${item.id}`, { method: 'DELETE' });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(payload.error ?? `HTTP ${response.status}`);
+      modules.items = payload.extensions ?? modules.items;
+      toast(t('MU/TH/UR › {name} removed.', { name: item.name }));
+      renderModules();
+    } catch (error) {
+      toast(t('It was not removed: {error}', { error: error.message }));
+      remove.disabled = false;
+    }
+  });
+  return remove;
+}
+
 function cardShell(item, { on, state: stateText }) {
   const card = el('article', `module-card${on ? '' : ' off'}`);
   card.id = `module-${item.id}`;
@@ -3933,9 +4150,10 @@ function cardShell(item, { on, state: stateText }) {
   }
 
   // FLOOR 4 · the module's own: what it reads, what it lets you set.
-  // FLOOR 5 · and the switch, alone, at the bottom of every card.
+  // FLOOR 5 · actions at the bottom: DEV uninstall first, the main switch last.
   const panel = el('div', 'card-panel');
   const actions = el('div', 'actions');
+  if (item.external) actions.append(removeModuleButton(item));
   card.append(panel, actions);
   return { card, panel, actions };
 }
@@ -4012,6 +4230,10 @@ modules.file?.addEventListener('change', async () => {
     modules.items = result.extensions ?? modules.items;
     renderModules();
     toast(`MU/TH/UR › ${t('{name} installed', { name: result.installed.name })}${result.installed.version ? ` · v${result.installed.version}` : ''}. ${t('It loads in every room on this computer.')}`);
+    // A key the contract does not answer to. Not fatal — a module written for a newer MADRE may
+    // carry fields this one has not learned — but a misspelling is far likelier, and it used to
+    // install in silence and leave the author wondering why their card came out empty.
+    warnUnknownModuleFields(result.installed);
   } catch (error) { toast(t('The module was not installed: {error}', { error: error.message })); }
   finally { modules.add.disabled = false; }
 });
@@ -4403,17 +4625,7 @@ function renderModulesDev() {
     for (const item of yours) {
       const chip = el('span', 'dev-chip');
       chip.append(el('b', null, item.name), ` · ${item.origin === 'project' ? 'this project' : 'every room'} `);
-      const remove = el('button', 'act-link', t('REMOVE')); remove.type = 'button'; remove.title = `Delete ${item.file}`;
-      remove.addEventListener('click', async () => {
-        if (!window.confirm(t("Remove {name}? Its file {file} is deleted. MADRE's own modules cannot be removed.", { name: item.name, file: item.file }))) return;
-        remove.disabled = true;
-        try {
-          const payload = await fetch(`/api/extensions/${item.id}`, { method: 'DELETE' }).then((response) => response.json());
-          if (payload.error) throw new Error(payload.error);
-          modules.items = payload.extensions ?? modules.items; toast(t('MU/TH/UR › {name} removed.', { name: item.name })); renderModules();
-        } catch (error) { toast(t('It was not removed: {error}', { error: error.message })); remove.disabled = false; }
-      });
-      chip.append(remove);
+      chip.append(removeModuleButton(item, { className: 'act-link', text: t('REMOVE') }));
       list.append(chip);
     }
     body.append(list);