@jossuealcala/madre 1.0.2 → 1.0.4

package/public/attribution.js

@@ -7,7 +7,7 @@
 // Appropriate Legal Notices (Settings › Updates and errors › License and authorship). One source
 // for both pages, so the words cannot drift from NOTICE and the terms (test/attribution.test.mjs).
 
-import { t } from './i18n.js';
+import { language, t } from './i18n.js';
 
 export const AUTHOR = 'Jossue Alcalá';
 export const AUTHOR_URL = 'https://jossuealcala.com';
@@ -35,6 +35,49 @@ export function drawAttribution(host, version) {
   return link;
 }
 
+// The keys modules put beside the version (src/modules/sdk.mjs, `footer`, 2026-10-18): drawn here,
+// with MADRE's own icons, so a module never reaches into the page. Each one opens its address in a
+// new tab; hovered or focused, it shows the module's words and the key that goes there. Asked again
+// whenever the modules change.
+const FOOTER_GLYPHS = {
+  heart: '<path d="M10 16.4s-6-3.5-6-7.9A3.3 3.3 0 0 1 10 6.6a3.3 3.3 0 0 1 6 1.9c0 4.4-6 7.9-6 7.9z" fill="currentColor"/>',
+  star: '<path d="M10 3.4l2 4.2 4.6.6-3.4 3.2.9 4.6L10 13.8 5.9 16l.9-4.6-3.4-3.2 4.6-.6z" fill="currentColor"/>',
+  link: '<path d="M8.6 11.4l2.8-2.8M9 5.8l1.5-1.5a3 3 0 0 1 4.2 4.2L13.2 10M11 14.2l-1.5 1.5a3 3 0 0 1-4.2-4.2L6.8 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+};
+const footerWords = (value) => (value == null ? '' : typeof value === 'string' ? value : value[language()] ?? value.en ?? value.es ?? '');
+export async function drawColophonKeys(host) {
+  if (!host) return null;
+  const answer = await fetch('/api/modules/footer', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)).catch(() => null);
+  host.querySelector('.colophon-keys')?.remove();
+  const keys = (answer?.keys ?? []).flatMap((module) => (module.footer ?? []).map((key) => ({ ...key, module: module.id })));
+  if (!keys.length) return null;
+  const make = (tag, className, text) => { const node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; return node; };
+  const box = make('span', 'colophon-keys');
+  for (const key of keys) {
+    const label = footerWords(key.label);
+    const one = make('span', `colophon-key ${key.icon}`);
+    const press = make('a', 'colophon-key-mark');
+    press.href = key.url;
+    press.target = '_blank';
+    press.rel = 'noopener';
+    press.setAttribute('aria-label', label);
+    press.innerHTML = `<svg viewBox="0 0 20 20" aria-hidden="true">${FOOTER_GLYPHS[key.icon] ?? FOOTER_GLYPHS.link}</svg>`; // trusted: our own SVG strings
+    const card = make('span', 'colophon-card');
+    card.setAttribute('role', 'tooltip');
+    card.append(make('b', null, label));
+    if (footerWords(key.text)) card.append(make('span', null, footerWords(key.text)));
+    const go = make('a', 'colophon-card-go', footerWords(key.action) || label);
+    go.href = key.url;
+    go.target = '_blank';
+    go.rel = 'noopener';
+    card.append(go);
+    one.append(press, card);
+    box.append(one);
+  }
+  host.append(box);
+  return box;
+}
+
 // The Appropriate Legal Notices (AGPL v3, section 0 and 5(d)): the copyright, that there is no
 // warranty, that it may be shared under the License, how to read it — and, by term 1(b) of the
 // additional terms, the author's attribution. Built with the Settings blocks both pages share.

package/public/brands.js

@@ -3,7 +3,8 @@
 // Visual identity per agent.
 //
 // Colors follow each vendor's public palette so a Codex bubble reads as Codex
-// and a Claude bubble as Claude. The marks are MADRE's own monograms: the
+// and a Claude bubble as Claude. The marks are drawn by MADRE: free takes that
+// recall each vendor's mark without reproducing it (2026-10-17), because the
 // vendors' logos are registered trademarks and their brand guidelines do not
 // allow embedding them in third-party products without permission. To use an
 // official asset under a license you hold, set `mark` to that inline SVG.
@@ -20,7 +21,8 @@ export const BRANDS = {
     color: '#10A37F',
     colorLight: '#0B7A5F',
     ink: '#FFFFFF',
-    mark: () => glyph('<path fill="currentColor" d="M16 4l10.4 6v12L16 28 5.6 22V10L16 4zm0 3.4L8.5 11.7v8.6L16 24.6l7.5-4.3v-8.6L16 7.4zm0 4.2l3.9 2.2v4.4L16 20.4l-3.9-2.2v-4.4L16 11.6z"/>'),
+    // A free take on OpenAI's blossom (2026-10-17): three rounded links turned 60° and knotted.
+    mark: () => glyph('<g fill="none" stroke="currentColor" stroke-width="2.4"><rect x="11.2" y="4.4" width="9.6" height="23.2" rx="4.8"/><rect x="11.2" y="4.4" width="9.6" height="23.2" rx="4.8" transform="rotate(60 16 16)"/><rect x="11.2" y="4.4" width="9.6" height="23.2" rx="4.8" transform="rotate(120 16 16)"/></g>'),
   },
   claude: {
     label: 'Claude',
@@ -28,7 +30,8 @@ export const BRANDS = {
     color: '#D97757',
     colorLight: '#B85C3C',
     ink: '#FFFFFF',
-    mark: () => glyph('<path fill="currentColor" d="M15 5h2l1.2 8.3 6.1-5.7 1.4 1.4-5.7 6.1L28.3 16v2l-8.3 1.2 5.7 6.1-1.4 1.4-6.1-5.7L17 29h-2l-1.2-8.3-6.1 5.7-1.4-1.4 5.7-6.1L3.7 18v-2l8.3-1.2-5.7-6.1 1.4-1.4 6.1 5.7L15 5z" opacity=".95"/>'),
+    // A free take on Claude's spark (2026-10-17): ten tapered rays of uneven length round a heart.
+    mark: () => glyph('<circle cx="16" cy="16" r="3" fill="currentColor"/><path fill="currentColor" d="M15.5 14.48L16.4 2.61L17.4 2.07L18.27 2.79L16.8 14.61ZM16.49 14.48L22.85 7.14L23.85 7.19L24.02 8.18L17.46 15.34ZM17.29 15.05L28.29 12.41L29.09 13.15L28.67 14.16L17.57 16.33ZM17.6 15.99L25.98 19.58L26.25 20.51L25.38 20.93L17.07 17.19ZM17.3 16.93L23.66 27.24L23.16 28.26L22.02 28.2L16.17 17.59ZM16.5 17.52L15.65 27.59L14.78 28.14L14.04 27.43L15.2 17.39ZM15.51 17.52L8.41 25.81L7.35 25.7L7.12 24.65L14.54 16.66ZM14.71 16.95L6.02 18.92L5.25 18.34L5.71 17.49L14.43 15.67ZM14.4 16.01L3.57 11.55L3.37 10.45L4.32 9.86L14.93 14.81ZM14.7 15.07L9.8 6.91L10.15 5.98L11.13 6.14L15.83 14.41Z"/>'),
   },
   gemini: {
     label: 'Gemini',
@@ -37,7 +40,8 @@ export const BRANDS = {
     colorLight: '#5B45B8',
     ink: '#FFFFFF',
     gradient: 'linear-gradient(135deg, #4796E3 0%, #8E75E8 55%, #D96570 100%)',
-    mark: () => glyph('<path fill="currentColor" d="M16 3c.6 7.1 5.9 12.4 13 13-7.1.6-12.4 5.9-13 13-.6-7.1-5.9-12.4-13-13 7.1-.6 12.4-5.9 13-13z"/>'),
+    // A free take on Gemini's sparkle (2026-10-17): four points in long curves, taller than wide.
+    mark: () => glyph('<path fill="currentColor" d="M16 2.4C16.8 10.2 21.4 15 29 16 21.4 17 16.8 21.8 16 29.6 15.2 21.8 10.6 17 3 16 10.6 15 15.2 10.2 16 2.4z"/>'),
   },
   opencode: {
     label: 'OpenCode',
@@ -45,7 +49,18 @@ export const BRANDS = {
     color: '#F2C94C',
     colorLight: '#9A7A12',
     ink: '#111111',
-    mark: () => glyph('<path fill="currentColor" d="M11 8l-7 8 7 8 2.2-2.2L7.4 16l5.8-5.8L11 8zm10 0l-2.2 2.2 5.8 5.8-5.8 5.8L21 24l7-8-7-8zm-3.6-1.5l2.3.6-5.1 18.4-2.3-.6 5.1-18.4z"/>'),
+    // A free take on OpenCode's block letter (2026-10-17): a square ring with a lighter block inside.
+    mark: () => glyph('<path fill="currentColor" fill-rule="evenodd" d="M6 6h20v20H6zM10.4 10.4v11.2h11.2V10.4z"/><path fill="currentColor" opacity=".5" d="M10.4 15.2h11.2v6.4H10.4z"/>'),
+  },
+  // MADRE's own drawing for Cursor (2026-10-17), a free take on its mark rather than the mark: a
+  // cube seen from above, its three faces in three weights, and a pointer cut out of the right face.
+  cursor: {
+    label: 'Cursor',
+    vendor: 'Cursor',
+    color: '#D9DEE5',
+    colorLight: '#3A3F47',
+    ink: '#111111',
+    mark: () => glyph('<path fill="currentColor" d="M16 3.2 27.4 9.6 16 16 4.6 9.6z"/><path fill="currentColor" opacity=".42" d="M4.6 9.6 16 16v12.8L4.6 22.4z"/><path fill="currentColor" fill-rule="evenodd" opacity=".7" d="M27.4 9.6v12.8L16 28.8V16zM16 16l11.4-6.4-6.2 12-1.9-3.9z"/>'),
   },
 };
 

package/public/code-tools.js

@@ -0,0 +1,143 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// MADRE · © 2026 Jossue Alcalá · GNU AGPL v3 with additional terms (Section 7): ADDITIONAL-TERMS.md
+// The code workspace's arithmetic (1.0.3), kept apart from the page so it can be tested on its own:
+// what an agent changed in a file line by line, where each of those changes stands in the file as
+// it is now, what the file reads like with one of them taken back, and which function a line is in.
+// Nothing here touches the page, the network or the disk.
+
+const lines = (text) => String(text ?? '').replace(/\r\n/g, '\n').split('\n');
+
+// The changes between two texts as runs of lines: each says where it starts on each side and what
+// it removed and put. The common start and end are set aside first; what is left is compared line
+// by line (longest common subsequence). Past `maxCells` comparisons the middle is one change: a
+// file rewritten that much is read as rewritten, not taken apart.
+export function lineDiff(beforeText, afterText, { maxCells = 2_000_000 } = {}) {
+  const a = lines(beforeText);
+  const b = lines(afterText);
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) start += 1;
+  let endA = a.length;
+  let endB = b.length;
+  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) { endA -= 1; endB -= 1; }
+  const A = a.slice(start, endA);
+  const B = b.slice(start, endB);
+  if (!A.length && !B.length) return [];
+  if (A.length * B.length > maxCells) return [{ beforeStart: start, before: A, afterStart: start, after: B }];
+  const n = A.length;
+  const m = B.length;
+  const width = m + 1;
+  const table = new Uint32Array((n + 1) * width);
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      table[i * width + j] = A[i] === B[j] ? table[(i + 1) * width + j + 1] + 1 : Math.max(table[(i + 1) * width + j], table[i * width + j + 1]);
+    }
+  }
+  const hunks = [];
+  let open = null;
+  let i = 0;
+  let j = 0;
+  while (i < n || j < m) {
+    if (i < n && j < m && A[i] === B[j]) { if (open) { hunks.push(open); open = null; } i += 1; j += 1; continue; }
+    if (!open) open = { beforeStart: start + i, before: [], afterStart: start + j, after: [] };
+    if (j < m && (i === n || table[i * width + j + 1] >= table[(i + 1) * width + j])) { open.after.push(B[j]); j += 1; }
+    else { open.before.push(A[i]); i += 1; }
+  }
+  if (open) hunks.push(open);
+  return hunks;
+}
+
+// Where each change of an agent stands in the file as it is now. Untouched since the turn, a change
+// is where the turn left it. Edited since, it is found by its own lines, nearest to where it was; a
+// change whose lines are no longer there (the human rewrote them) is no longer the agent's, and is
+// left out. A change that only removed lines is found by the line the turn left just before it.
+export function placeHunks(currentText, afterText, hunks) {
+  const now = lines(currentText);
+  if (afterText === null || afterText === undefined || String(afterText).replace(/\r\n/g, '\n') === now.join('\n')) return hunks.map((hunk) => ({ ...hunk, at: hunk.afterStart }));
+  const after = lines(afterText);
+  const out = [];
+  for (const hunk of hunks) {
+    let at = -1;
+    if (hunk.after.length) at = nearest(now, hunk.after, hunk.afterStart);
+    else {
+      const before = hunk.afterStart > 0 ? after[hunk.afterStart - 1] : null;
+      if (before === null) at = now.length && now[0] === after[0] ? 0 : -1;
+      else { const found = nearest(now, [before], hunk.afterStart - 1); at = found < 0 ? -1 : found + 1; }
+    }
+    if (at >= 0) out.push({ ...hunk, at });
+  }
+  return out;
+}
+function nearest(haystack, block, hint) {
+  let best = -1;
+  for (let k = 0; k + block.length <= haystack.length; k += 1) {
+    let same = true;
+    for (let x = 0; x < block.length; x += 1) if (haystack[k + x] !== block[x]) { same = false; break; }
+    if (same && (best < 0 || Math.abs(k - hint) < Math.abs(best - hint))) best = k;
+  }
+  return best;
+}
+
+// The file with one change taken back: the lines the agent put, where they stand now, become the
+// lines it removed. Everything else stays byte for byte, line endings included.
+export function revertHunk(currentText, hunk) {
+  const text = String(currentText ?? '');
+  const crlf = /\r\n/.test(text);
+  const now = lines(text);
+  now.splice(hunk.at, hunk.after.length, ...hunk.before);
+  return now.join(crlf ? '\r\n' : '\n');
+}
+
+// A change named by what it says, so «kept» survives a reload and never sticks to another change.
+export function hunkKey(hunk) {
+  let hash = 0x811c9dc5;
+  const said = `${hunk.before.join('\n')}\u0000${hunk.after.join('\n')}`;
+  for (let i = 0; i < said.length; i += 1) {
+    hash ^= said.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash.toString(16).padStart(8, '0');
+}
+
+// The function, class or heading a line belongs to, for the path above the code: the nearest line
+// above it that opens one and is indented no deeper. `null` when nothing encloses it.
+const OPENS = {
+  js: [
+    /^\s*(?:export\s+)?(?:default\s+)?(?:async\s+)?function\s*\*?\s*([A-Za-z_$][\w$]*)/,
+    /^\s*(?:export\s+)?(?:default\s+)?class\s+([A-Za-z_$][\w$]*)/,
+    /^\s*(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:async\s*)?(?:function\b|\([^)]*\)\s*=>|[A-Za-z_$][\w$]*\s*=>)/,
+    /^\s*(?:static\s+)?(?:async\s+)?(?:get\s+|set\s+)?(#?[A-Za-z_$][\w$]*)\s*\([^)]*\)\s*\{\s*$/,
+  ],
+  py: [/^\s*(?:async\s+)?def\s+([A-Za-z_]\w*)/, /^\s*class\s+([A-Za-z_]\w*)/],
+  css: [/^\s*([^{}@\s][^{}]*?)\s*\{\s*$/, /^\s*(@media[^{]*?)\s*\{/],
+  sh: [/^\s*(?:function\s+)?([A-Za-z_][\w-]*)\s*\(\)\s*\{?/],
+};
+const NOT_NAMES = new Set(['if', 'for', 'while', 'switch', 'catch', 'function', 'return', 'else', 'do', 'try']);
+export function symbolAt(textOrLines, index, familyId) {
+  const all = Array.isArray(textOrLines) ? textOrLines : lines(textOrLines);
+  if (index < 0 || index >= all.length) return null;
+  if (familyId === 'md') {
+    for (let k = index; k >= 0; k -= 1) { const heading = all[k].match(/^#{1,6}\s+(.+?)\s*#*\s*$/); if (heading) return heading[1]; }
+    return null;
+  }
+  const patterns = OPENS[familyId];
+  if (!patterns) return null;
+  const depth = (line) => line.match(/^\s*/)[0].replace(/\t/g, '  ').length;
+  let limit = all[index].trim() ? depth(all[index]) : Infinity;
+  // A block closed above the line (a sibling function that ended) is skipped whole: its closing
+  // line is counted at its depth, and the opening line at that depth that matches it is passed over.
+  const closed = new Map();
+  for (let k = index; k >= 0 && index - k < 4000; k -= 1) {
+    const line = all[k];
+    const said = line.trim();
+    if (!said) continue;
+    const indent = depth(line);
+    if (k !== index && indent > limit) continue;
+    if (k !== index && /^[}\])]/.test(said) && !/[{([]\s*$/.test(said)) { closed.set(indent, (closed.get(indent) ?? 0) + 1); continue; }
+    const name = patterns.map((pattern) => said && line.match(pattern)?.[1]).find(Boolean) ?? null;
+    const opens = Boolean(name) || /[{([]\s*$/.test(said) || (familyId === 'py' && /:\s*$/.test(said));
+    if (k !== index && opens && (closed.get(indent) ?? 0) > 0) { closed.set(indent, closed.get(indent) - 1); continue; }
+    if (name && !NOT_NAMES.has(name)) return name.trim().slice(0, 80);
+    if (k !== index) limit = Math.min(limit, indent);
+  }
+  return null;
+}

package/public/editor.js

@@ -35,6 +35,8 @@ const ICONS = {
   wrap: svg('M3.5 5.5h13M3.5 10h10a2.6 2.6 0 0 1 0 5.2H10M11.8 13.3 10 15.2l1.8 1.8M3.5 15h3.5'),
   ask: svg('M4 5.6A2.6 2.6 0 0 1 6.6 3h6.8A2.6 2.6 0 0 1 16 5.6v4.8A2.6 2.6 0 0 1 13.4 13H9.2L5.6 16v-3A2.6 2.6 0 0 1 4 10.4z'),
   link: svg('M8.3 11.7l3.4-3.4M7.2 13.2 6 14.4a2.6 2.6 0 0 1-3.7-3.7l2.6-2.6a2.6 2.6 0 0 1 3.7 0M12.8 6.8 14 5.6a2.6 2.6 0 0 1 3.7 3.7l-2.6 2.6a2.6 2.6 0 0 1-3.7 0'),
+  // The room's chooser chevron (app.js, ICON_CHEVRON), drawn on this grid: a menu opens under it.
+  chevron: svg('M5.25 7.75 10 12.5l4.75-4.75'),
 };
 
 // Spaces or tabs, and how many: what the file already does, not what the editor prefers.
@@ -104,7 +106,11 @@ export function findAll(text, query, { caseSensitive = false, regex = false, wor
   return found;
 }
 
-export function createEditor({ text = '', name = '', family = null, tokenize = null, t = (s) => s, fill = null, onSave = null, onAsk = null, onDirty = null }) {
+// `draft`: what the human had written and not saved, kept by the room while another file was on
+// screen (the code workspace's tabs); the file on disk stays `text`, so the editor knows it is unsaved.
+// `onCaret(line)`: the line the caret is on, whenever it moves. `setMarks` paints lines in the margin
+// (an agent's changes, in its colour) without touching the text.
+export function createEditor({ text = '', draft = null, name = '', family = null, tokenize = null, t = (s) => s, fill = null, onSave = null, onAsk = null, onDirty = null, onCaret = null }) {
   const say = (key, vars) => (vars && fill ? fill(t(key), vars) : t(key));
   const crlf = /\r\n/.test(text);
   const indent = detectIndent(text);
@@ -155,7 +161,7 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
       <div class="ed-code">
         <div class="ed-active" aria-hidden="true"></div>
         <div class="ed-float" hidden>
-          <button type="button" class="ed-chip ask" data-float="ask"><i class="ed-ico">${ICONS.ask}</i><span></span><b>▾</b></button>
+          <button type="button" class="ed-chip ask" data-float="ask"><i class="ed-ico">${ICONS.ask}</i><span></span><i class="ed-chev">${ICONS.chevron}</i></button>
           <button type="button" class="ed-chip" data-float="comment"><i class="ed-ico">${ICONS.comment}</i><span></span></button>
           <button type="button" class="ed-chip" data-float="copy"><i class="ed-ico">${ICONS.link}</i><span></span></button>
         </div>
@@ -202,7 +208,7 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
   $('.ed-indent').textContent = indent.tabs ? t('Tabs') : say('Spaces: {n}', { n: indent.size });
   $('.ed-eol').textContent = crlf ? 'CRLF' : 'LF';
   $('.ed-lang').textContent = family?.label ?? t('Plain text');
-  input.value = saved;
+  input.value = draft === null || draft === undefined ? saved : String(draft).replace(/\r\n/g, '\n');
   // A textarea given its text holds the caret after the last character; the first focus would jump
   // there. Editing starts where reading did: at the top, or at the line asked for.
   input.setSelectionRange?.(0, 0);
@@ -242,6 +248,8 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
     return html;
   }
   let lineCount = 1;
+  let lastCaret = 0;
+  let marks = new Map();
   function countLines() { return lineCount; }
   let frame = 0;
   function draw() {
@@ -264,7 +272,8 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
       const here = [];
       for (let j = markAt; j < matches.length && matches[j].start < end; j += 1) here.push({ ...matches[j], cur: j === current });
       html.push(`<div class="l">${drawLine(line, carry, offset, here) || ' '}</div>`);
-      numbers.push(`<div>${i + 1}</div>`);
+      const mark = marks.get(i + 1);
+      numbers.push(mark ? `<div class="mk" style="--mk:${mark.color}" title="${escape(mark.title ?? '')}">${i + 1}</div>` : `<div>${i + 1}</div>`);
       offset = end + 1;
     }
     hl.innerHTML = html.join('');
@@ -324,6 +333,7 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
     const line = caretLine(at);
     const col = at - (value.lastIndexOf('\n', at - 1) + 1) + 1;
     $('.ed-pos').textContent = say('Ln {line}, Col {col}', { line, col });
+    if (line !== lastCaret) { lastCaret = line; onCaret?.(line); }
     const chosen = input.selectionEnd - input.selectionStart;
     $('.ed-sel').textContent = chosen ? say('{n} selected', { n: chosen }) : '';
     const dirty = isDirty();
@@ -740,6 +750,12 @@ export function createEditor({ text = '', name = '', family = null, tokenize = n
     save,
     // The file on disk changed under the editor and the human chose the disk's version.
     reset(next) { saved = String(next).replace(/\r\n/g, '\n'); input.value = saved; changed(); },
+    // Lines to mark in the margin: [{ from, to, color, title }], one-based. An empty list clears them.
+    setMarks(list = []) {
+      marks = new Map();
+      for (const one of list) for (let n = one.from; n <= one.to; n += 1) marks.set(n, { color: /^[#\w(),.%\s-]{1,40}$/.test(one.color ?? '') ? one.color : 'currentColor', title: one.title ?? '' });
+      draw();
+    },
     // Taken off the page: what it listened to outside itself goes with it.
     destroy() { document.removeEventListener('selectionchange', followSelection); resized?.disconnect(); cancelAnimationFrame(frame); },
   };