@12ui/design 0.2.76 → 0.2.78

package/dist/mcp-slate-ui-script-remote.js

@@ -4,6 +4,8 @@
  *
  * The messages. The host wraps every app message as untrusted input, so each one
  * names what happened and carries no command, flag, path, price or credit word;
+ * a Generate more or Edit click that the workspace runner on the person's Mac
+ * will draw sends none (remoteAfterRun);
  * the agent confirms through the model-visible data tool, which returns the
  * server's own trusted text. Six messages exist, one per click (spec v2 9.2):
  * Generate more with new options, Generate more based on a design, Edit,
@@ -47,10 +49,49 @@ export const SLATE_UI_REMOTE = String.raw `
   // is on the server and the person can ask their agent for it.
   function remoteTellRun(action, opId) {
     messageAgent(remoteRunMessage(action, opId)).then(function () {}, function (err) {
-      setStatus(tpl(COPY.sentRefused, { detail: errText(err) }), "err");
+      setStatus(t("sentRefused", { detail: errText(err) }), "err");
     });
   }
 
+  // ---- the workspace runner: a click it draws is not a message in the thread ----
+  // The run result says whether the workspace runner on the person's Mac holds the workspace (runner.alive). Then the
+  // agent is not told: the runner claims the request within seconds and the op's phase turns to "drawing". The agent
+  // is told after all, with the same message, when the request is still the agent's ("agent") once RUNNER_GRACE_MS
+  // has passed, or when a claimed request goes back to the agent because the runner's lease lapsed. Each check reads
+  // the status itself, so a card the host hides (no polling) still decides on fresh state. A round that waits on the
+  // person (its round carries a pause) is nobody's to draw yet: no runner may claim it, so the screen keeps watching
+  // and tells nobody, however long the person takes; once it goes on, the runner gets its grace again from then.
+  var RUNNER_GRACE_MS = 20000;
+  var RUNNER_RECHECK_MS = 10000;
+  var runnerWatch = {};
+  function remoteAfterRun(action, opId, runner) {
+    if (!(runner && runner.alive === true)) { remoteTellRun(action, opId); return; }
+    runnerWatch[opId] = { action: action, waited: false };
+    setTimeout(function () { runnerCheck(opId); }, RUNNER_GRACE_MS);
+  }
+  function opWaitsOnPerson(op) {
+    var round = op.kind === "round" ? roundOfOp(op) : null;
+    return !!(round && round.pause);
+  }
+  function runnerCheck(opId) {
+    if (!runnerWatch[opId] || !state.view) return;
+    callTool(TOOLS.status, { runDir: state.view.runDir, since: state.view.stamp }).then(function (result) {
+      var sc = result.structuredContent || {};
+      if (sc.schema) applyView(sc, true);
+    }).catch(function () {}).then(function () { runnerJudge(opId); });
+  }
+  function runnerJudge(opId) {
+    var watch = runnerWatch[opId];
+    if (!watch) return;
+    var op = state.view.ops.filter(function (o) { return o.opId === opId; })[0];
+    if (!op || op.state !== "running") { delete runnerWatch[opId]; return; }
+    if (op.phase === "drawing") { setTimeout(function () { runnerCheck(opId); }, RUNNER_RECHECK_MS); return; }
+    if (opWaitsOnPerson(op)) { watch.waited = true; setTimeout(function () { runnerCheck(opId); }, RUNNER_RECHECK_MS); return; }
+    if (watch.waited) { watch.waited = false; setTimeout(function () { runnerCheck(opId); }, RUNNER_GRACE_MS); return; }
+    delete runnerWatch[opId];
+    remoteTellRun(watch.action, opId);
+  }
+
   // ---- the marked image ----
   var MARK_COLORS = [
     { name: "magenta", hex: "#ff00ff", rgb: [255, 0, 255] },
@@ -68,7 +109,7 @@ export const SLATE_UI_REMOTE = String.raw `
     return new Promise(function (resolve, reject) {
       var img = document.createElement("img");
       img.onload = function () { resolve(img); };
-      img.onerror = function () { reject(new Error("the image could not be read")); };
+      img.onerror = function () { reject(new Error(t("markReadFailed"))); };
       img.src = src;
     });
   }
@@ -77,7 +118,7 @@ export const SLATE_UI_REMOTE = String.raw `
     canvas.width = w;
     canvas.height = h;
     var ctx = canvas.getContext && canvas.getContext("2d");
-    if (!ctx) throw new Error("no canvas is available");
+    if (!ctx) throw new Error(t("markNoCanvas"));
     return { canvas: canvas, ctx: ctx };
   }
   // The colour farthest (in RGB) from the image's mean; the first listed wins a tie.
@@ -122,7 +163,7 @@ export const SLATE_UI_REMOTE = String.raw `
     return wantImage(version, "full", true).then(markPicture).then(function (img) {
       var sw = img.naturalWidth || img.width;
       var sh = img.naturalHeight || img.height;
-      if (!(sw > 0) || !(sh > 0)) throw new Error("the image has no size");
+      if (!(sw > 0) || !(sh > 0)) throw new Error(t("markNoSize"));
       var color = markColorFor(img);
       var scale = Math.min(1, MARK_LONG_EDGE / Math.max(sw, sh));
       for (;;) {
@@ -134,12 +175,12 @@ export const SLATE_UI_REMOTE = String.raw `
         for (var q = 0; q < MARK_QUALITIES.length; q++) {
           var url = target.canvas.toDataURL("image/jpeg", MARK_QUALITIES[q]);
           var comma = url.indexOf(",");
-          if (url.indexOf("data:image/jpeg") !== 0 || comma < 0) throw new Error("the canvas could not export a JPEG");
+          if (url.indexOf("data:image/jpeg") !== 0 || comma < 0) throw new Error(t("markNoJpeg"));
           var data = url.slice(comma + 1);
           if (base64Bytes(data) <= MARK_MAX_BYTES) return { mimeType: "image/jpeg", data: data, color: color.name };
         }
         scale *= MARK_SHRINK;
-        if (Math.max(sw, sh) * scale < MARK_MIN_LONG_EDGE) throw new Error("the marked image would be too large");
+        if (Math.max(sw, sh) * scale < MARK_MIN_LONG_EDGE) throw new Error(t("markTooLarge"));
       }
     });
   }

package/dist/mcp-slate-ui-script-remote.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-remote.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-remote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHxC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-remote.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-remote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxC,CAAC"}

package/dist/mcp-slate-ui-script-scribble.js

@@ -69,7 +69,7 @@ export const SLATE_UI_SCRIBBLE = String.raw `
   function scribbleAttach(wrap, d) {
     var canvas = document.createElement("canvas");
     canvas.className = "scribble";
-    canvas.setAttribute("aria-label", COPY.scribbleHint);
+    canvas.setAttribute("aria-label", t("scribbleHint"));
     d.canvas = canvas;
     wrap.appendChild(canvas);
     // The bitmap follows the size the image is shown at; the strokes repaint from their permille points.

package/dist/mcp-slate-ui-script-select.js

@@ -39,19 +39,19 @@ export const SLATE_UI_SELECT = String.raw `
     if (!version || state.busy || samePick(version) || !pickable(version)) return;
     state.busy = true;
     syncControls();
-    setStatus(COPY.recording);
+    setStatus(t("recording"));
     callTool(TOOLS.pick, { runDir: state.view.runDir, versionId: version.versionId }).then(function (result) {
       var sc = result.structuredContent || {};
       if (sc.view) applyView(sc.view, true);
       var label = sc.pick ? sc.pick.label : version.label;
       var rev = sc.rev !== undefined ? sc.rev : state.view.rev;
       return messageAgent(selectMessage(label, rev)).then(function () {
-        setStatus(tpl(COPY.selectedLine, { label: label }), "ok");
+        setStatus(t("selectedLine", { label: label }), "ok");
       }, function (err) {
-        setStatus(tpl(COPY.selectedRefused, { label: label, detail: errText(err) }), "err");
+        setStatus(t("selectedRefused", { label: label, detail: errText(err) }), "err");
       });
     }, function (err) {
-      setStatus(tpl(COPY.couldNotSelect, { detail: errText(err) }), "err");
+      setStatus(t("couldNotSelect", { detail: errText(err) }), "err");
     }).then(function () { state.busy = false; syncControls(); });
   }
 
@@ -63,9 +63,9 @@ export const SLATE_UI_SELECT = String.raw `
       if (sc.view) applyView(sc.view, true);
       var rev = sc.rev !== undefined ? sc.rev : state.view.rev;
       return messageAgent(handoffMessage(kind, version.label, handoffId, rev)).then(function () {
-        setStatus(COPY.sent, "ok");
+        setStatus(t("sent"), "ok");
       }, function (err) {
-        setStatus(tpl(COPY.sentRefused, { detail: errText(err) }), "err");
+        setStatus(t("sentRefused", { detail: errText(err) }), "err");
       });
     });
   }

package/dist/mcp-slate-ui-script-stage.d.ts

@@ -5,8 +5,9 @@
  * Convert, then Select (primary) at the far right. Nothing else shows until a
  * button is clicked; the dialogs live
  * in mcp-slate-ui-script-dialog.ts. One band above the image says what is
- * running, stopped or failed, with Resume when the work can resume. Mounted
- * only in fullscreen.
+ * running (on the local plugin; on the hosted server the person's agent says
+ * it), stopped or failed, with Resume when the work can resume. Mounted only
+ * in fullscreen.
  */
 export declare const SLATE_UI_STAGE: string;
 //# sourceMappingURL=mcp-slate-ui-script-stage.d.ts.map

package/dist/mcp-slate-ui-script-stage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,QAwK1B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAmL1B,CAAC"}

package/dist/mcp-slate-ui-script-stage.js

@@ -5,8 +5,9 @@
  * Convert, then Select (primary) at the far right. Nothing else shows until a
  * button is clicked; the dialogs live
  * in mcp-slate-ui-script-dialog.ts. One band above the image says what is
- * running, stopped or failed, with Resume when the work can resume. Mounted
- * only in fullscreen.
+ * running (on the local plugin; on the hosted server the person's agent says
+ * it), stopped or failed, with Resume when the work can resume. Mounted only
+ * in fullscreen.
  */
 export const SLATE_UI_STAGE = String.raw `
   var stageBuilt = false;
@@ -25,24 +26,25 @@ export const SLATE_UI_STAGE = String.raw `
     var stage = $("stage");
     stage.textContent = "";
     var head = el("header", "stagehead");
-    head.appendChild(el("h1", "sr", COPY.title));
+    head.appendChild(el("h1", "sr", t("title")));
     head.appendChild(buildTabs());
     head.appendChild(el("span", "spacer"));
-    stageEls.close = iconButton(COPY.closeWorkspace, ICON_CLOSE, closeWorkspace);
+    stageEls.close = iconButton(t("closeWorkspace"), ICON_CLOSE, closeWorkspace);
     head.appendChild(stageEls.close);
 
     stageEls.body = el("div", "stagebody");
     stageEls.rail = el("nav", "rail");
-    stageEls.rail.setAttribute("aria-label", COPY.tabDesigns);
+    stageEls.rail.setAttribute("aria-label", t("tabDesigns"));
     var main = el("section", "main");
+    stageEls.pause = el("div", "pausebar hidden");
     stageEls.band = el("div", "band hidden");
     stageEls.band.setAttribute("role", "status");
     stageEls.hero = el("div", "hero");
     var row = el("div", "actionrow");
-    stageEls.edit = button(COPY.edit, "", function () { openDialog("edit", stageEls.edit); });
-    stageEls.branch = button(COPY.branch, "", function () { openDialog("branch", stageEls.branch); });
-    stageEls.convert = button(COPY.convert, "", function () { openDialog("convert", stageEls.convert); });
-    stageEls.select = button(COPY.select, "primary", function () { doSelect(selectedVersion()); });
+    stageEls.edit = button(t("edit"), "", function () { openDialog("edit", stageEls.edit); });
+    stageEls.branch = button(t("branch"), "", function () { openDialog("branch", stageEls.branch); });
+    stageEls.convert = button(t("convert"), "", function () { openDialog("convert", stageEls.convert); });
+    stageEls.select = button(t("select"), "primary", function () { doSelect(selectedVersion()); });
     stageEls.editWhy = el("span", "sr");
     stageEls.editWhy.id = "edit-why";
     // Select is last: the row is right-aligned, so it ends at the picture's right edge.
@@ -54,6 +56,7 @@ export const SLATE_UI_STAGE = String.raw `
     // A line set before the workspace was built (the first view arrives first) still shows.
     stageEls.status.textContent = state.status.text;
     if (state.status.kind) stageEls.status.className = "status " + state.status.kind;
+    main.appendChild(stageEls.pause);
     main.appendChild(stageEls.band);
     main.appendChild(stageEls.hero);
     main.appendChild(row);
@@ -74,19 +77,25 @@ export const SLATE_UI_STAGE = String.raw `
     stageBuilt = true;
   }
 
-  // A chip is one version of an option; its title carries the words of the edit that made it.
-  function chipTitle(v) { return v.prompt ? v.label + ": " + v.prompt : v.label; }
+  // A chip is one version of an option; its title carries the words of the edit that made it (the person's own words;
+  // an edit made from a drawing alone says so, rather than show the instruction the server wrote for the model).
+  function chipTitle(v) {
+    if (v.promptFromMarks) return t("versionTitleMarks", { label: v.label });
+    return v.prompt ? t("versionTitle", { label: v.label, prompt: v.prompt }) : v.label;
+  }
 
   function buildRail(rail) {
     var v = state.view;
     v.rounds.slice().sort(function (a, b) { return b.index - a.index; }).forEach(function (round) {
       var section = el("div", "round");
-      var head = el("h2", "roundhead", COPY.roundPrefix + round.index);
+      var head = el("h2", "roundhead", t("roundHeading", { n: round.index }));
       var title = roundTitle(round);
       if (title) head.title = title;
       section.appendChild(head);
       var list = el("ul", "options");
-      orderedCandidates().filter(function (c) { return c.roundId === round.roundId; }).sort(byLabel).forEach(function (c) {
+      var ofRound = orderedCandidates().filter(function (c) { return c.roundId === round.roundId; }).sort(byLabel);
+      if (ofRound.length) setShape(list, ratioOf(ofRound[0]));
+      ofRound.forEach(function (c) {
         var item = el("li", "option");
         item.appendChild(thumbButton(c, "opt"));
         var versions = versionsOf(c);
@@ -96,7 +105,7 @@ export const SLATE_UI_STAGE = String.raw `
             var on = state.sel.versionId === version.versionId;
             var chip = button(version.label, "chip" + (on ? " selected" : ""), function () { selectCandidate(c.candidateId, version.versionId); });
             chip.title = chipTitle(version);
-            chip.setAttribute("aria-label", COPY.versionPrefix + version.label);
+            chip.setAttribute("aria-label", t("versionName", { label: version.label }));
             chip.setAttribute("aria-pressed", on ? "true" : "false");
             chips.appendChild(chip);
           });
@@ -107,7 +116,10 @@ export const SLATE_UI_STAGE = String.raw `
       section.appendChild(list);
       rail.appendChild(section);
     });
+    // The Generate more tile is one more tile of the newest round's columns and ratio, at the end of the selection.
     var slot = el("div", "moreslot");
+    var newest = orderedCandidates()[0];
+    if (newest) setShape(slot, ratioOf(newest));
     slot.appendChild(moreTile());
     rail.appendChild(slot);
   }
@@ -116,7 +128,7 @@ export const SLATE_UI_STAGE = String.raw `
   function buildBand(node, band) {
     node.appendChild(el("span", "bandtext" + (band.kind === "failed" ? " err" : ""), band.text));
     if (band.op.resumable) {
-      var b = button(COPY.resume, "textbtn", function () { actResume(band.op, b); });
+      var b = button(t("resume"), "textbtn", function () { actResume(band.op, b); });
       node.appendChild(b);
     }
   }
@@ -137,7 +149,7 @@ export const SLATE_UI_STAGE = String.raw `
     // Edit is off when the shown version cannot be edited; the reason is its accessible description, not a tooltip.
     var blocked = !v || !v.editable;
     stageEls.edit.disabled = blocked;
-    stageEls.editWhy.textContent = blocked && v && v.editBlockedReason ? v.editBlockedReason : "";
+    stageEls.editWhy.textContent = blocked && v && v.editBlockedReason ? serverText(v.editBlockedL10n, v.editBlockedReason) : "";
     if (blocked && v && v.editBlockedReason) stageEls.edit.setAttribute("aria-describedby", "edit-why"); else stageEls.edit.removeAttribute("aria-describedby");
     stageEls.branch.disabled = !v;
     stageEls.convert.disabled = !v;
@@ -149,7 +161,6 @@ export const SLATE_UI_STAGE = String.raw `
     if (!stageBuilt) buildStageSkeleton();
     stageEls.close.classList.toggle("hidden", !canInline());
     syncTabs();
-    syncProgressLine(v);
     var onDesigns = state.tab === "designs";
     stageEls.body.classList.toggle("hidden", !onDesigns);
     stageEls.inspiration.classList.toggle("hidden", onDesigns);
@@ -163,13 +174,14 @@ export const SLATE_UI_STAGE = String.raw `
       stageEls.hero.__sig = "";
       stageEls.hero.textContent = "";
       stageEls.hero.classList.add("note");
-      stageEls.hero.appendChild(el("div", "heronote", COPY.empty));
-      syncStageControls(COPY.select, true);
+      stageEls.hero.appendChild(el("div", "heronote", t("empty")));
+      syncStageControls(t("select"), true);
       return;
     }
     var railSig = JSON.stringify([state.sel, v.rounds.map(function (r) { return [r.roundId, r.index, r.kind, r.fromVersionId]; }),
       orderedCandidates().map(function (x) { return thumbSignature(x).concat([x.versionIds]); })]);
     setIfChanged(stageEls.rail, railSig, buildRail);
+    syncPauseHost(stageEls.pause, true);
     var band = activeBand(v);
     stageEls.band.classList.toggle("hidden", !band);
     setIfChanged(stageEls.band, band ? JSON.stringify([band.kind, band.text, band.op.opId, band.op.resumable]) : "", function (node) { if (band) buildBand(node, band); });

package/dist/mcp-slate-ui-script-stage.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKvC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmLvC,CAAC"}

package/dist/mcp-slate-ui-script-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-state.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAqS1B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-state.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,QAyT1B,CAAC"}

package/dist/mcp-slate-ui-script-state.js

@@ -14,7 +14,7 @@ export const SLATE_UI_STATE = String.raw `
     host: {}, view: null,
     sel: { candidateId: null, versionId: null, followLatest: true },
     tab: "designs", query: "", dialog: null, more: null,
-    busy: false, status: { text: "", kind: "", source: "", phase: "" }, lastOpText: "", lastBandOp: "",
+    busy: false, status: { text: "", kind: "" }, lastRunOp: "",
     thumbs: {}, fulls: {}, refs: {}, lastOpStates: {}, opBusy: {}, awaitEdit: null,
     insp: { local: null, writing: false, dirty: false, searching: false, noMatch: "", waiters: [] }
   };
@@ -42,15 +42,24 @@ export const SLATE_UI_STATE = String.raw `
     return h.slice(0, 8) + "-" + h.slice(8, 12) + "-" + h.slice(12, 16) + "-" + h.slice(16, 20) + "-" + h.slice(20);
   }
   function visible() { return document.visibilityState !== "hidden"; }
-  function errText(err) { return err && err.message ? err.message : String(err); }
-  // "source" is "op" for a line the screen derives from the ops' own state, "" for a message about a click.
-  function setStatus(text, kind, source, phase) {
-    state.status = { text: text || "", kind: kind || "", source: source || "", phase: phase || "" };
+  // What went wrong, in the person's language when the server named it by code, else as it was said.
+  function errText(err) {
+    var words = err && err.l10n ? said(err.l10n) : "";
+    return words || (err && err.message ? err.message : String(err));
+  }
+  // An op's error, an option's failure, the reason this Mac cannot draw: the screen's words for the code, else the server's.
+  function serverText(ref, english) { return said(ref) || english || ""; }
+  // What a click did. The workspace's status line says it; the card has no status line, so only an error reaches it,
+  // beside Select, and nothing else takes room there.
+  function setStatus(text, kind) {
+    state.status = { text: text || "", kind: kind || "" };
     var nodes = document.querySelectorAll("[data-status]");
     for (var i = 0; i < nodes.length; i++) {
       nodes[i].textContent = state.status.text;
       nodes[i].className = "status" + (kind ? " " + kind : "");
     }
+    var alert = $("cardalert");
+    if (alert) alert.textContent = state.status.kind === "err" ? state.status.text : "";
   }
 
   // ---- lookups over the current view ----
@@ -80,10 +89,50 @@ export const SLATE_UI_STATE = String.raw `
     return all.filter(function (c) { return c.roundId === newest || keep[c.candidateId]; });
   }
   function versionsOf(c) { return c.versionIds.map(ver).filter(Boolean); }
-  function runningOps() { return state.view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; }); }
+  function isRunning(op) { return !!op && (op.state === "starting" || op.state === "running"); }
+  function runningOps() { return state.view.ops.filter(isRunning); }
+  function newestRunning(view) { var running = view.ops.filter(isRunning); return running.length ? running[running.length - 1] : null; }
   function selectedCandidate() { return cand(state.sel.candidateId); }
   function selectedVersion() { return ver(state.sel.versionId); }
-  function optionName(c) { return COPY.optionPrefix + c.label + (c.state === "failed" ? COPY.failedSuffix : ""); }
+  function optionName(c) { return t(c.state === "failed" ? "optionNameFailed" : "optionName", { label: c.label }); }
+
+  // ---- an option without a picture: drawing, or stopped; and the ratio of its tile ----
+  // The work an option without a picture belongs to: the op the view names for it, else the newest op of its round.
+  function holdingOp(c) {
+    var named = c.busyOpId ? state.view.ops.filter(function (o) { return o.opId === c.busyOpId; })[0] : null;
+    if (named) return named;
+    return state.view.ops.filter(function (o) { var r = o.kind === "round" && roundOfOp(o); return !!r && r.roundId === c.roundId; }).pop() || null;
+  }
+  // An option is being drawn while it has no picture and its work runs (with no op to read, the view's own busy flag).
+  function drawing(c) {
+    if (c.state !== "pending") return false;
+    // A round that waits for the person's references is not being drawn yet (the inspiration pause).
+    if (pausedFor(c)) return false;
+    var op = holdingOp(c);
+    return op ? isRunning(op) : !!c.busy;
+  }
+  // Why an option is still without a picture when nothing draws it: what its work said when it stopped (the band's words).
+  function stoppedReason(c) {
+    var op = holdingOp(c);
+    if (op && op.error && op.error.message && (TARGET === "remote" || op.state === "failed")) return serverText(op.error.l10n, op.error.message);
+    return t("interrupted");
+  }
+  // The ratio of an option's tile: its picture's, or for an option still without one what its round draws (a sibling's
+  // picture, else the brief's aspect at the sizes the drawing prompt asks for), so the tile keeps its size when it lands.
+  var ASPECT_RATIO = { landscape: 1536 / 1024, portrait: 1024 / 1536, square: 1 };
+  function sized(v) { return !!v && v.width > 0 && v.height > 0; }
+  function ratioOf(c) {
+    var v = latestVersion(c);
+    if (!sized(v)) v = state.view.candidates.filter(function (x) { return x.roundId === c.roundId; }).map(latestVersion).filter(sized)[0];
+    if (sized(v)) return v.width / v.height;
+    var aspect = state.view.brief && state.view.brief.aspect;
+    return ASPECT_RATIO[aspect] || ASPECT_RATIO.landscape;
+  }
+  // A grid of tiles takes the ratio of its first option: it is the Generate more tile's ratio and sets the columns' width.
+  function setShape(node, ratio) {
+    node.style.setProperty("--ar", String(ratio));
+    node.style.setProperty("--shape", String(Math.round(Math.sqrt(ratio) * 1000) / 1000));
+  }
 
   function ensureSelection() {
     var v = state.view;
@@ -147,7 +196,7 @@ export const SLATE_UI_STATE = String.raw `
   function run(job) {
     callTool(job.tool, job.args).then(function (result) {
       var block = (result.content || []).find(function (b) { return b.type === "image"; });
-      if (!block) throw new Error("no image block returned");
+      if (!block) throw new Error(t("pictureNotReturned"));
       var src = "data:" + block.mimeType + ";base64," + block.data;
       job.cache[job.key] = src;
       job.resolve(src);
@@ -205,27 +254,26 @@ export const SLATE_UI_STATE = String.raw `
     else clearPoll();
   });
 
-  // ---- what the ops say: the band of the workspace, the status line of the card ----
+  // ---- what the ops say: the band of the workspace ----
   function opLabel(op) {
     var parent = op.edit && ver(op.edit.parentVersionId);
     var c = parent && cand(parent.candidateId);
     return c ? c.label : (op.target || "");
   }
+  // The round an op draws: the one it names by id (both servers send ops[].roundId), else, from a server older than
+  // that field, the newest round that runs. Never matched by words: the target text is English, for the agent.
   function roundOfOp(op) {
     var rounds = state.view.rounds;
-    var named = rounds.filter(function (r) { return COPY.roundPrefix + r.index === op.target; })[0];
-    if (named) return named;
+    if (op.roundId) return roundById(op.roundId) || null;
     var running = rounds.filter(function (r) { return r.state === "running"; });
     return running.length ? running[running.length - 1] : null;
   }
   function progressText(op) {
-    // The hosted server has no runner of its own: a running op is waiting for the person's agent to draw and upload.
-    if (TARGET === "remote" && op.phase === "agent") return COPY.waitingForAgent;
     if (op.kind === "round") {
       var r = roundOfOp(op);
-      return r ? tpl(COPY.designingProgress, { n: r.readyCount, m: r.count }) : COPY.designing;
+      return r ? t("designingProgress", { n: r.readyCount, m: r.count }) : t("designing");
     }
-    return tpl(COPY.editing, { label: opLabel(op) });
+    return t("editing", { label: opLabel(op) });
   }
   // The newest op. The local plugin stamps every op with a time; the hosted server sends none (data minimization), so
   // its ops are already oldest first and the last one is the newest.
@@ -233,54 +281,26 @@ export const SLATE_UI_STATE = String.raw `
     if (TARGET === "remote") return view.ops[view.ops.length - 1];
     return view.ops.slice().sort(function (a, b) { return Date.parse(a.startedAt) - Date.parse(b.startedAt); }).pop();
   }
-  // The one thing worth a band: work that is running, else work that stopped or failed as the newest word.
+  // The one thing worth a band: work that is running, else work that stopped or failed as the newest word. On the hosted
+  // server the person's own agent does the running work and says what it is doing, and the options it is drawing
+  // shimmer, so running work there has no band.
   function activeBand(view) {
-    var running = view.ops.filter(function (o) { return o.state === "starting" || o.state === "running"; });
-    if (running.length) { var op = running[running.length - 1]; return { kind: "run", op: op, text: progressText(op) }; }
+    var running = newestRunning(view);
+    if (running) return TARGET === "remote" ? null : { kind: "run", op: running, text: progressText(running) };
     var last = latestOp(view);
-    if (last && last.state === "interrupted") return { kind: "stopped", op: last, text: TARGET === "remote" && last.error && last.error.message ? last.error.message : COPY.interrupted };
-    if (last && last.state === "failed" && last.error) return { kind: "failed", op: last, text: last.error.message };
+    if (last && last.state === "interrupted") return { kind: "stopped", op: last, text: TARGET === "remote" && last.error && last.error.message ? serverText(last.error.l10n, last.error.message) : t("interrupted") };
+    if (last && last.state === "failed" && last.error) return { kind: "failed", op: last, text: serverText(last.error.l10n, last.error.message) };
     return null;
   }
 
-  // The card has one status line, so it also carries the running, stopped and failed words; the workspace has a band.
-  function syncProgressLine(view) {
-    var band = activeBand(view);
-    // The workspace's band speaks for running work, so a line about an earlier click ("Selected E.") is stale the
-    // moment a new op starts; a refusal stays, because the person has not read it away.
-    var bandOp = band && band.kind === "run" ? band.op.opId : "";
-    if (bandOp && bandOp !== state.lastBandOp && isFullscreen() && state.status.kind !== "err") setStatus("", "");
-    state.lastBandOp = bandOp;
-    if (isFullscreen() || !band) {
-      state.lastOpText = "";
-      if (state.status.source === "op" && state.status.phase === "progress") setStatus("", "");
-      return;
-    }
-    // A message about a click stays until these words themselves change.
-    if (band.text !== state.lastOpText) { state.lastOpText = band.text; setStatus(band.text, band.kind === "failed" ? "err" : "", "op", "progress"); }
-  }
-  // What a finished op produced. A failure is the band's to say in the workspace.
-  function syncDoneLine(prev, view) {
-    var was = {};
-    if (prev) prev.ops.forEach(function (o) { was[o.opId] = o.state; });
-    var finished = view.ops.filter(function (o) {
-      return (was[o.opId] === "starting" || was[o.opId] === "running") && (o.state === "succeeded" || o.state === "failed");
-    }).pop();
-    if (!finished) return;
-    if (finished.state === "failed") return;
-    var made = view.versions.filter(function (v) { return finished.resultVersionIds.indexOf(v.versionId) >= 0; });
-    if (finished.kind === "round") {
-      var n = made.length;
-      if (n === 0) return;
-      var round = roundOfOp(finished);
-      var failedCount = round ? view.candidates.filter(function (c) { return c.roundId === round.roundId && c.state === "failed"; }).length : 0;
-      var text = (n === 1 ? COPY.roundReadyOne : tpl(COPY.roundReadyMany, { n: n })) + (failedCount ? " " + tpl(COPY.roundFailed, { n: failedCount }) : "");
-      setStatus(text, failedCount ? "" : "ok", "op", "done");
-    } else {
-      setStatus(tpl(COPY.editReady, { label: made.length ? made[made.length - 1].label : opLabel(finished) }), "ok", "op", "done");
-    }
+  // A line about an earlier click ("Selected E.") is stale the moment new work starts; a refusal stays, because the
+  // person has not read it away. What the work makes needs no line: its options fill in on the thumbnails.
+  function syncStaleLine(view) {
+    var running = newestRunning(view);
+    var id = running ? running.opId : "";
+    if (id && id !== state.lastRunOp && state.status.kind !== "err") setStatus("", "");
+    state.lastRunOp = id;
   }
-  function syncOpStatus(prev, view) { syncProgressLine(view); syncDoneLine(prev, view); }
 
   // ---- tell the agent, best effort, when work that was running has finished ----
   function announceSettled(prev, next) {

package/dist/mcp-slate-ui-script-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script-state.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqSvC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script-state.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyTvC,CAAC"}

package/dist/mcp-slate-ui-script.d.ts

@@ -1,9 +1,9 @@
 /**
  * The workspace view's script, assembled from single-purpose fragments that
  * share one scope: bridge (host protocol), state (view state, picture queue,
- * polling, what the ops say), progress, inline (the card), select (Select and
+ * polling, what the ops say), l10n (the person's language and every word, `t(key)`), progress, inline (the card), select (Select and
  * the hand-offs), inspiration (the tabs and the Inspiration tab), stage
- * (fullscreen), dialog (Edit, Branch and Convert), more (the Generate more tile and its panel), scribble (the drawing layer of Edit), the hosted and browser targets' words, then the handshake, last, so every function and
+ * (fullscreen), pause (the inspiration pause of the hosted server), dialog (Edit, Branch and Convert), more (the Generate more tile and its panel), scribble (the drawing layer of Edit), the hosted and browser targets' words, then the handshake, last, so every function and
  * variable exists before the first message can arrive. The tool names come
  * from the view contract (SLATE_UI_TOOLS), not from the server's own module.
  *

package/dist/mcp-slate-ui-script.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAgB3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MAyB/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AA2B3D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,aAAa,KAAG,MA0B/C,CAAC;AAEb,eAAO,MAAM,eAAe,QAA8B,CAAC"}

package/dist/mcp-slate-ui-script.js

@@ -1,28 +1,41 @@
-import { SLATE_CONVERT_CHOICES, SLATE_CONVERT_DESCRIPTIONS, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_REMOTE_CONVERT_DESCRIPTIONS, SLATE_UI_COPY } from './mcp-slate-ui-copy.js';
-import { SLATE_UI_TOOLS } from './slate-view-contract.js';
+import { SLATE_BROWSER_PAGE_KEYS, SLATE_CONVERT_CHOICES, SLATE_CONVERT_DESCRIPTION_KEYS, SLATE_CONVERT_MAX_WIDTH, SLATE_MORE_COUNTS, SLATE_REMOTE_CONVERT_CHOICES, SLATE_REMOTE_CONVERT_DESCRIPTION_KEYS } from './mcp-slate-ui-copy.js';
+import { SLATE_UI_LOCALES } from './mcp-slate-ui-locales/index.js';
+import { SLATE_EDIT_PROMPT_MAX_BYTES, SLATE_UI_TOOLS } from './slate-view-contract.js';
 import { SLATE_UI_BRIDGE } from './mcp-slate-ui-script-bridge.js';
 import { SLATE_UI_BROWSER } from './mcp-slate-ui-script-browser.js';
 import { SLATE_UI_DIALOG } from './mcp-slate-ui-script-dialog.js';
 import { SLATE_UI_INLINE } from './mcp-slate-ui-script-inline.js';
 import { SLATE_UI_INSPIRATION } from './mcp-slate-ui-script-inspiration.js';
+import { buildSlateUiL10n } from './mcp-slate-ui-script-l10n.js';
 import { SLATE_UI_MORE } from './mcp-slate-ui-script-more.js';
+import { SLATE_UI_NO_PAUSE, SLATE_UI_PAUSE } from './mcp-slate-ui-script-pause.js';
 import { SLATE_UI_PROGRESS } from './mcp-slate-ui-script-progress.js';
 import { SLATE_UI_REMOTE } from './mcp-slate-ui-script-remote.js';
 import { SLATE_UI_SCRIBBLE } from './mcp-slate-ui-script-scribble.js';
 import { SLATE_UI_SELECT } from './mcp-slate-ui-script-select.js';
 import { SLATE_UI_STAGE } from './mcp-slate-ui-script-stage.js';
 import { SLATE_UI_STATE } from './mcp-slate-ui-script-state.js';
+/**
+ * Every shipped catalogue as the screen carries it: all keys but the words of the browser page around it (that page
+ * carries its own, SLATE_BROWSER_PAGE_KEYS; the title is both's).
+ */
+const screenMessages = () => {
+    const pageOnly = new Set(SLATE_BROWSER_PAGE_KEYS.filter((key) => key !== 'title'));
+    return Object.fromEntries(Object.entries(SLATE_UI_LOCALES).map(([tag, messages]) => [
+        tag, Object.fromEntries(Object.entries(messages).filter(([key]) => !pageOnly.has(key))),
+    ]));
+};
 const HANDSHAKE = String.raw `
   // ---- connect: handlers are registered above, before the handshake ----
   if (window.parent === window) {
-    fatal(COPY.needsHost);
+    fatal(t("needsHost"));
   } else {
     request("ui/initialize", { appCapabilities: {}, appInfo: { name: "12ui-slate", version: "3.0.0" }, protocolVersion: PROTOCOL })
       .then(function (init) {
         applyHost((init && init.hostContext) || {});
         notify("ui/notifications/initialized", {});
       })
-      .catch(function (err) { fatal(COPY.noConnection + errText(err)); });
+      .catch(function (err) { fatal(t("noConnection", { detail: errText(err) })); });
   }
 `;
 /**
@@ -35,20 +48,21 @@ export const buildSlateUiScript = (target) => [
     '(function () {',
     SLATE_UI_BRIDGE
         .replace('__TOOLS__', () => JSON.stringify(SLATE_UI_TOOLS))
-        .replace('__COPY__', () => JSON.stringify(SLATE_UI_COPY))
         .replace('__TARGET__', () => JSON.stringify(target))
         .replace('__CONVERT__', () => JSON.stringify({
         choices: target === 'remote' ? SLATE_REMOTE_CONVERT_CHOICES : SLATE_CONVERT_CHOICES,
-        descriptions: target === 'remote' ? SLATE_REMOTE_CONVERT_DESCRIPTIONS : SLATE_CONVERT_DESCRIPTIONS,
+        descriptionKeys: target === 'remote' ? SLATE_REMOTE_CONVERT_DESCRIPTION_KEYS : SLATE_CONVERT_DESCRIPTION_KEYS,
         maxWidth: SLATE_CONVERT_MAX_WIDTH,
     })),
     SLATE_UI_STATE,
+    buildSlateUiL10n(screenMessages()),
     SLATE_UI_PROGRESS,
     SLATE_UI_INLINE,
     SLATE_UI_SELECT,
     SLATE_UI_INSPIRATION,
+    target === 'remote' ? SLATE_UI_PAUSE : SLATE_UI_NO_PAUSE,
     SLATE_UI_STAGE,
-    SLATE_UI_DIALOG,
+    SLATE_UI_DIALOG.replace('__EDIT_PROMPT_MAX_BYTES__', () => JSON.stringify(SLATE_EDIT_PROMPT_MAX_BYTES)),
     SLATE_UI_MORE.replace('__MORE__', () => JSON.stringify(SLATE_MORE_COUNTS)),
     SLATE_UI_SCRIBBLE,
     SLATE_UI_REMOTE,