@kevin5251984/guild 0.2.20 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevin5251984/guild",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "type": "module",
   "license": "MIT",
   "description": "A local guild of adventurers. npx @kevin5251984/guild web",

package/src/handlers.ts

@@ -522,6 +522,7 @@ export function workspace(store: GuildStore) {
         startedAt: turn.startedAt || "",
         thinking: turn.thinking,
         steps: turn.steps,
+        ...(turn.paused ? { paused: true } : {}),
       },
     ];
   });
@@ -996,6 +997,7 @@ function publicLiveTurn(live: LiveTurn): LiveTurn {
     thinking: live.thinking,
     steps: live.steps,
     startedAt: live.startedAt,
+    ...(live.paused ? { paused: true } : {}),
   };
 }
 
@@ -1085,6 +1087,84 @@ export function abortLiveTurn(
   return { ok: true };
 }
 
+export function pauseLiveTurn(
+  store: GuildStore,
+  roomId: string,
+  botId?: string,
+) {
+  if (!store.getRoom(roomId)) throw new StoreError(404, "room not found");
+  const live = botId
+    ? store.getLiveBotTurn(roomId, botId)
+    : store.getLiveTurn(roomId);
+  if (live?.paused) return { ok: true, paused: true as const };
+  const had = store.pauseTurn(roomId, botId);
+  if (!live && !had) throw new StoreError(409, "no live turn");
+  return { ok: true, paused: true as const };
+}
+
+function resumeSteer(live: LiveTurn): string {
+  const lines = [
+    "Paused mid-turn so the user could switch models. Continue from here. Do not redo finished tools unless you need a different result.",
+  ];
+  const thinking = (live.thinking || "").trim();
+  if (thinking) lines.push(`Thinking so far:\n${thinking.slice(0, 6000)}`);
+  const tools = (live.traces || []).filter((tr) => tr.name && tr.name !== "think");
+  if (tools.length) {
+    lines.push(
+      "Tools already run:\n" +
+        tools
+          .slice(-20)
+          .map((tr) => {
+            const bit = String(tr.text || "")
+              .replace(/\s+/g, " ")
+              .trim()
+              .slice(0, 400);
+            return `- ${tr.name}${bit ? `: ${bit}` : ""}`;
+          })
+          .join("\n"),
+    );
+  }
+  return lines.join("\n\n");
+}
+
+export async function continueLiveTurn(
+  store: GuildStore,
+  roomId: string,
+  botId: string,
+  env: NodeJS.ProcessEnv = process.env,
+  extras: HandlerExtras = {},
+) {
+  if (!store.getRoom(roomId)) throw new StoreError(404, "room not found");
+  const id = botId.trim();
+  if (!id) throw new StoreError(400, "botId is required");
+  const live = store.getLiveBotTurn(roomId, id);
+  if (!live?.paused) throw new StoreError(409, "no paused turn");
+  const messages = store.listMessages(roomId);
+  let userIndex = messages.length - 1;
+  while (userIndex >= 0 && messages[userIndex].author !== "you") userIndex -= 1;
+  if (userIndex < 0) throw new StoreError(400, "no user message to continue");
+  const userMessage = messages[userIndex];
+  const asked = live.asked?.trim() || userMessage.body.trim();
+  if (!asked) throw new StoreError(409, "nothing to continue");
+  const history = messages.slice(0, userIndex).map(toHistoryItem);
+  const parent = parentMessage(messages.slice(0, userIndex), userMessage.replyTo);
+  const room = store.getRoom(roomId);
+  store.setLiveTurn(roomId, { ...live, paused: false });
+  store.pushSteer(roomId, resumeSteer(live), id);
+  const replies = await generateReplies(
+    store,
+    roomId,
+    room?.memberIds ?? [id],
+    { ...userMessage, body: asked },
+    history,
+    id,
+    env,
+    parent,
+    extras,
+  );
+  return { replies };
+}
+
 function isAbortError(err: unknown): boolean {
   return Boolean(
     err &&
@@ -1169,14 +1249,19 @@ async function generateReplies(
     if (!memberIds.includes(botId)) return;
     if (signal.aborted) return;
     const prev = store.getLiveBotTurn(roomId, botId);
+    if (!prev || prev.paused) return;
     const startedAt = prev?.startedAt || new Date().toISOString();
     store.dropLastFailedReply(roomId, botId);
     store.setLiveTurn(roomId, {
       botId,
       thinking: prev?.thinking || "",
       steps: prev?.steps || [],
+      traces: prev?.traces,
+      asked: turnAsked,
       startedAt,
+      paused: false,
     });
+    const botSignal = store.armBotTurn(roomId, botId, signal);
     let generated;
     try {
       generated = await (extras.turn ?? chatReply)({
@@ -1189,10 +1274,11 @@ async function generateReplies(
           userMessage.body,
         ),
         env,
-        signal,
+        signal: botSignal,
         mcpTools,
         onProgress: (update) => {
           const prev = store.getLiveBotTurn(roomId, botId);
+          if (prev?.paused) return;
           const next = toLiveTurn(botId, update);
           const handoff = (prev?.steps || []).find((step) => step.name === "handoff");
           const pendingSteers = store.peekSteers(roomId, botId).map((text) => ({
@@ -1209,14 +1295,16 @@ async function generateReplies(
           );
           store.setLiveTurn(roomId, {
             ...next,
+            asked: prev?.asked || turnAsked,
             startedAt: prev?.startedAt || startedAt,
+            paused: false,
             steps: [...(handoff ? [handoff] : []), ...keptSteer, ...rest].slice(0, 5),
           });
         },
         pullSteers: () => store.drainSteers(roomId, botId),
       });
     } catch (err) {
-      if (isAbortError(err) || signal.aborted) return;
+      if (isAbortError(err) || botSignal.aborted || signal.aborted) return;
       throw err;
     }
     const usage = { ...(generated.usage || {}), startedAt };
@@ -1406,11 +1494,15 @@ function plantLiveTurns(
     if (!botId) continue;
     if (!memberIds.includes(botId)) continue;
     store.dropLastFailedReply(roomId, botId);
+    const prev = store.getLiveBotTurn(roomId, botId);
     store.setLiveTurn(roomId, {
       botId,
-      thinking: "",
-      steps: [],
-      startedAt,
+      thinking: prev?.thinking || "",
+      steps: prev?.steps || [],
+      traces: prev?.traces,
+      asked: prev?.asked,
+      startedAt: prev?.startedAt || startedAt,
+      paused: false,
     });
   }
   return startedAt;

package/src/llm.ts

@@ -496,7 +496,7 @@ export async function llmComplete(input: {
   };
   const file = readModelsFile(input.dataDir);
   const effort = clampEffort(
-    file.fast ? "low" : file.reasoning,
+    file.fast ? "low" : input.prefer ? input.prefer.reasoning : file.reasoning,
     reasoningFor(target.providerId, target.model),
     Boolean(file.fast),
   );

package/src/public/chat.css

@@ -1894,6 +1894,10 @@ a.invite-btn:hover { text-decoration: none; }
 .turn-actions .turn-stop {
   color: var(--danger);
 }
+.turn-actions .turn-pause,
+.turn-actions .turn-continue {
+  color: var(--steel);
+}
 .turn-actions .turn-steer {
   color: #b4c8e8;
 }
@@ -1907,6 +1911,8 @@ body.grok .turn-actions button:hover {
   color: #f2eadf;
 }
 body.grok .turn-actions .turn-stop { color: #d4a090; }
+body.grok .turn-actions .turn-pause,
+body.grok .turn-actions .turn-continue { color: #c4b090; }
 body.grok .turn-actions .turn-steer { color: #c4b090; }
 .turn-status .clock {
   margin-left: 8px;

package/src/public/chat.html

@@ -1292,8 +1292,8 @@
       }
       function botModelMeta(bot) {
         const model = botModelLabel(bot) || "—";
+        const ref = botModelRef(bot);
         const spec = (() => {
-          const ref = botModelRef(bot);
           if (!ref) return null;
           const hit = allModels().find(
             (row) => row.provider === ref.provider && row.model === ref.model,
@@ -1301,7 +1301,7 @@
           return (hit && hit.reasoning) || null;
         })();
         const reasonVal = clampEffort(
-          modelCfg && modelCfg.reasoning,
+          ref && ref.reasoning,
           spec,
           Boolean(modelCfg && modelCfg.fast),
         );
@@ -1713,6 +1713,7 @@
             thinking: row.thinking || "",
             steps: Array.isArray(row.steps) ? row.steps.slice(-5) : [],
             startedAt: row.startedAt || "",
+            paused: Boolean(row.paused),
           }));
       }
       function rebuildBusyBots() {
@@ -1741,6 +1742,7 @@
             thinking: row.thinking || "",
             steps: Array.isArray(row.steps) ? row.steps.slice(-5) : [],
             startedAt: row.startedAt || "",
+            paused: Boolean(row.paused),
             room: { kind: r.kind, id: r.id },
           }));
         state.lives = others.concat(tagged);
@@ -1791,24 +1793,38 @@
             ? '<span class="clock">' + Math.floor(elapsed / 1000) + "s</span>"
             : "";
         const botId = live && live.botId ? live.botId : "";
+        const paused = Boolean(live && live.paused);
         const actions = botId
           ? '<div class="turn-actions">' +
+            (paused
+              ? '<button type="button" class="turn-continue" data-live-continue="' +
+                escapeHtml(botId) +
+                '">' +
+                t("live.continue") +
+                "</button>"
+              : '<button type="button" class="turn-pause" data-live-pause="' +
+                escapeHtml(botId) +
+                '">' +
+                t("live.pause") +
+                "</button>") +
             '<button type="button" class="turn-stop" data-live-stop="' +
             escapeHtml(botId) +
             '">' +
             t("live.stop") +
             "</button>" +
-            '<button type="button" class="turn-steer" data-live-steer="' +
-            escapeHtml(botId) +
-            '">' +
-            t("live.steer") +
-            "</button>" +
+            (paused
+              ? ""
+              : '<button type="button" class="turn-steer" data-live-steer="' +
+                escapeHtml(botId) +
+                '">' +
+                t("live.steer") +
+                "</button>") +
             "</div>"
           : "";
         return (
           '<div class="turn-live">' +
           '<div class="turn-status">' +
-          t("deepDiving") +
+          (paused ? t("live.paused") : t("deepDiving")) +
           clock +
           "</div>" +
           liveStepsHtml(live && live.steps) +
@@ -1829,7 +1845,9 @@
             return (
               '<article class="msg bot live" data-bot-id="' +
               escapeHtml(bot.id) +
-              '" role="status">' +
+              '"' +
+              (live.paused ? ' data-paused="1"' : "") +
+              ' role="status">' +
               actor.av +
               '<div class="msg-main">' +
               actor.head +
@@ -1866,6 +1884,11 @@
           const block = article.querySelector(".turn-live");
           if (!block) return;
           const status = block.querySelector(".turn-status");
+          const paused = Boolean(live.paused);
+          if ((article.getAttribute("data-paused") === "1") !== paused) {
+            renderThread();
+            return;
+          }
           if (status) {
             const started = live.startedAt ? Date.parse(live.startedAt) : NaN;
             const elapsed = Number.isFinite(started)
@@ -1875,7 +1898,7 @@
               elapsed >= 15000
                 ? '<span class="clock">' + Math.floor(elapsed / 1000) + "s</span>"
                 : "";
-            status.innerHTML = t("deepDiving") + clock;
+            status.innerHTML = (paused ? t("live.paused") : t("deepDiving")) + clock;
           }
           const html = liveStepsHtml(live.steps);
           const existing = block.querySelector(".live-steps");
@@ -2328,6 +2351,18 @@
           ? "/dms/" + encodeURIComponent(r.id) + "/abort"
           : "/channels/" + encodeURIComponent(r.id) + "/abort";
       }
+      function pauseUrl(room) {
+        const r = room || state.busyRoom || { kind: state.kind, id: state.id };
+        return r.kind === "dm"
+          ? "/dms/" + encodeURIComponent(r.id) + "/pause"
+          : "/channels/" + encodeURIComponent(r.id) + "/pause";
+      }
+      function continueUrl(room) {
+        const r = room || state.busyRoom || { kind: state.kind, id: state.id };
+        return r.kind === "dm"
+          ? "/dms/" + encodeURIComponent(r.id) + "/continue"
+          : "/channels/" + encodeURIComponent(r.id) + "/continue";
+      }
       function stopTurn(botId) {
         const room = currentRoomRef();
         (state.aborts || []).forEach((item) => {
@@ -2353,6 +2388,30 @@
         }).catch(() => {});
         setBusy(false, botId ? [botId] : [], { room: room });
       }
+      function pauseTurn(botId) {
+        const room = currentRoomRef();
+        fetch(pauseUrl(room), {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(botId ? { botId: botId } : {}),
+        }).catch(() => {});
+        (state.lives || []).forEach((row) => {
+          if (!botId || row.botId === botId) row.paused = true;
+        });
+        if (state.live && (!botId || state.live.botId === botId)) {
+          state.live.paused = true;
+        }
+        renderThread();
+      }
+      async function continueTurn(botId) {
+        const room = currentRoomRef();
+        (state.lives || []).forEach((row) => {
+          if (row.botId === botId) row.paused = false;
+        });
+        if (state.live && state.live.botId === botId) state.live.paused = false;
+        renderThread();
+        await postChat(continueUrl(room), { botId: botId }, room, [botId]);
+      }
       async function insertIntoBotTurn(botId) {
         if (!composerHasPayload()) {
           const draft = document.getElementById("draft");
@@ -2817,6 +2876,22 @@
             stopTurn(liveStop.getAttribute("data-live-stop"));
             return;
           }
+          const livePause = event.target.closest("[data-live-pause]");
+          if (livePause) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            pauseTurn(livePause.getAttribute("data-live-pause"));
+            return;
+          }
+          const liveContinue = event.target.closest("[data-live-continue]");
+          if (liveContinue) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            continueTurn(liveContinue.getAttribute("data-live-continue")).catch(
+              (err) => alert(err.message),
+            );
+            return;
+          }
           const liveSteer = event.target.closest("[data-live-steer]");
           if (liveSteer) {
             event.preventDefault();
@@ -3084,7 +3159,12 @@
         if (bot) showBotCard(bot, event.currentTarget);
       });
       document.getElementById("thread").addEventListener("click", (event) => {
-        if (event.target.closest("[data-live-stop], [data-live-steer]")) return;
+        if (
+          event.target.closest(
+            "[data-live-stop], [data-live-pause], [data-live-continue], [data-live-steer]",
+          )
+        )
+          return;
         const av = event.target.closest(
           ".avatar[data-bot-id], button.name[data-bot-id]",
         );
@@ -4452,6 +4532,9 @@
           }
           setBusy(false, botIds, { room: sent });
         }
+        if (state.kind === sent.kind && state.id === sent.id) {
+          await resumeCurrentLive().catch(() => {});
+        }
         if (ok) await flushQueued(sent);
       }
       async function flushQueued(sent) {
@@ -5550,8 +5633,9 @@
         document.getElementById("model-fast").checked = Boolean(modelCfg.fast);
         const spec = activeReasoningSpec();
         const choices = effortChoices(spec);
+        const currentRef = activeModelRef();
         const reasonVal = clampEffort(
-          modelCfg.reasoning,
+          currentRef && currentRef.reasoning,
           spec,
           Boolean(modelCfg.fast),
         );
@@ -5621,11 +5705,24 @@
       async function applyChatModel(ref) {
         if (state.kind !== "dm") return;
         const bot = botById(state.id);
-        if (!bot) return;
+        if (!bot || !ref || !ref.provider || !ref.model) return;
+        const spec = (() => {
+          const hit = allModels().find(
+            (row) => row.provider === ref.provider && row.model === ref.model,
+          );
+          return (hit && hit.reasoning) || null;
+        })();
+        const reason = clampEffort(
+          document.getElementById("model-reasoning").value || ref.reasoning,
+          spec,
+          Boolean(document.getElementById("model-fast").checked),
+        );
+        const next = { provider: ref.provider, model: ref.model };
+        if (reason) next.reasoning = reason;
         const res = await fetch("/bots/" + encodeURIComponent(bot.id), {
           method: "PATCH",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ model: ref }),
+          body: JSON.stringify({ model: next }),
         });
         if (!res.ok) {
           const body = await res.json().catch(() => ({}));
@@ -5635,16 +5732,16 @@
         const updated = await res.json();
         const i = state.bots.findIndex((item) => item.id === bot.id);
         if (i >= 0) state.bots[i] = { ...state.bots[i], model: updated.model };
-        await fetch("/settings/models", {
-          method: "PUT",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({
-            reasoning: document.getElementById("model-reasoning").value,
-            fast: document.getElementById("model-fast").checked,
-          }),
-        }).then(async (r) => {
-          if (r.ok) modelCfg = await r.json();
-        });
+        const fast = document.getElementById("model-fast").checked;
+        if (Boolean(modelCfg.fast) !== Boolean(fast)) {
+          await fetch("/settings/models", {
+            method: "PUT",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ fast: fast }),
+          }).then(async (r) => {
+            if (r.ok) modelCfg = await r.json();
+          });
+        }
         renderModelList();
         renderNav();
       }

package/src/public/i18n.js

@@ -90,6 +90,9 @@ var I18N_ROWS = [
   ["stop", "停止", "Stop"],
   ["steer.hint", "Enter 排隊 · {mod}↩ 插入這輪", "Enter to queue · {mod}↩ to steer this turn"],
   ["live.stop", "停止", "Stop"],
+  ["live.pause", "暫停", "Pause"],
+  ["live.continue", "繼續", "Continue"],
+  ["live.paused", "已暫停", "Paused"],
   ["live.steer", "插入這輪", "Insert into turn"],
   ["steer.queue", "排隊", "Queue"],
   ["steer.insert", "插入引導", "Steer"],

package/src/public/md.js

@@ -327,6 +327,23 @@ function renderMarkdown(raw) {
   return html.join("");
 }
 
+function hydrateHtmlPreviews(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return;
+  root.querySelectorAll(".md-html-preview").forEach((box) => {
+    const src = box.querySelector(".md-html-src");
+    const frame = box.querySelector(".md-html-frame");
+    if (!src || !frame || frame.dataset.ready) return;
+    frame.dataset.ready = "1";
+    const raw = src.value;
+    const lang = (box.querySelector(".md-fence-lang") || {}).textContent || "";
+    frame.srcdoc = /svg/i.test(lang)
+      ? '<!doctype html><html><body style="margin:0;background:#fff">' +
+        raw +
+        "</body></html>"
+      : raw;
+  });
+}
+
 if (typeof module !== "undefined" && module.exports) {
-  module.exports = { renderMarkdown, inlineMd };
+  module.exports = { renderMarkdown, inlineMd, hydrateHtmlPreviews };
 }

package/src/public/mobile.css

@@ -57,6 +57,8 @@ textarea:focus-visible {
 .navlist a,
 .back,
 .turn-stop,
+.turn-pause,
+.turn-continue,
 .turn-steer,
 .steer,
 .send,
@@ -72,6 +74,8 @@ textarea:focus-visible {
 .navlist a:active,
 .back:active,
 .turn-stop:active:not(:disabled),
+.turn-pause:active:not(:disabled),
+.turn-continue:active:not(:disabled),
 .turn-steer:active:not(:disabled),
 .steer:active:not(:disabled),
 .send:active:not(:disabled),
@@ -83,6 +87,8 @@ textarea:focus-visible {
   .navlist a,
   .back,
   .turn-stop,
+  .turn-pause,
+  .turn-continue,
   .turn-steer,
   .steer,
   .send,
@@ -97,6 +103,8 @@ textarea:focus-visible {
   .navlist a:active,
   .back:active,
   .turn-stop:active,
+  .turn-pause:active,
+  .turn-continue:active,
   .turn-steer:active,
   .steer:active,
   .send:active,
@@ -326,6 +334,7 @@ textarea:focus-visible {
   background: var(--fill);
   overflow: auto;
 }
+.assistant-text .md-html-preview { overflow: hidden; }
 .assistant-text .md-fence-bar {
   display: flex;
   align-items: center;
@@ -336,11 +345,101 @@ textarea:focus-visible {
   color: var(--muted);
   font-size: 0.75rem;
 }
+.assistant-text .md-fence-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  margin-right: 4px;
+}
+.assistant-text .md-fence-tab {
+  margin: 0;
+  min-height: var(--tap);
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.assistant-text .md-fence-tab.on,
+.assistant-text .md-fence-tab:hover { background: var(--lift); color: var(--text); }
+.assistant-text .md-fence-acts {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.assistant-text .md-fence-btn {
+  margin: 0;
+  width: var(--tap);
+  height: var(--tap);
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.assistant-text .md-html-frame {
+  display: block;
+  width: 100%;
+  min-height: 220px;
+  height: 52vh;
+  border: 0;
+  background: #fff;
+  border-radius: 0 0 12px 12px;
+}
+.assistant-text .md-html-preview[data-view="code"] .md-html-frame { display: none; }
+.assistant-text .md-html-preview[data-view="preview"] .md-pre { display: none; }
 .assistant-text .md-pre {
   margin: 0;
   padding: 0.6rem 0.8rem 0.8rem;
   overflow: auto;
   font-size: 0.82rem;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.html-zoom {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
+  background: rgba(0, 0, 0, 0.72);
+}
+.html-zoom[hidden] { display: none !important; }
+.html-zoom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 12px;
+  color: var(--text);
+}
+.html-zoom-close {
+  margin: 0;
+  width: var(--tap);
+  height: var(--tap);
+  border: 0;
+  border-radius: 50%;
+  background: var(--fill);
+  color: var(--text);
+  font-size: 1.35rem;
+  cursor: pointer;
+}
+.html-zoom-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 16px;
+  background: #fff;
 }
 .assistant-text img.md-img {
   max-width: 100%;
@@ -416,6 +515,8 @@ textarea:focus-visible {
   margin-top: 4px;
 }
 .turn-stop,
+.turn-pause,
+.turn-continue,
 .turn-steer,
 .steer,
 .send,
@@ -447,13 +548,16 @@ textarea:focus-visible {
   background: var(--lift);
   border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
 }
-/* Steer rides the steel rail, never a filled danger slab. */
+.turn-pause,
+.turn-continue,
 .turn-steer,
 .steer {
   color: var(--steel);
   background: var(--fill);
   border-color: color-mix(in srgb, var(--steel) 38%, var(--line));
 }
+.turn-pause:hover,
+.turn-continue:hover,
 .turn-steer:hover,
 .steer:hover {
   background: var(--lift);

package/src/public/mobile.html

@@ -9,7 +9,7 @@
     <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
     <link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16" />
     <title>Guild — 外出</title>
-    <link rel="stylesheet" href="/mobile.css?v=enamel" />
+    <link rel="stylesheet" href="/mobile.css?v=html-preview" />
     <script src="/i18n.js"></script>
     <script src="/md.js"></script>
   </head>
@@ -49,6 +49,13 @@
       </form>
     </section>
     <div class="flash" id="flash" role="status" aria-live="polite" hidden></div>
+    <div class="html-zoom" id="html-zoom" hidden>
+      <div class="html-zoom-bar">
+        <strong data-i18n="html.zoom">HTML 預覽</strong>
+        <button type="button" class="html-zoom-close" id="html-zoom-close" title="關閉" aria-label="關閉" data-i18n-title="close" data-i18n-aria="close">×</button>
+      </div>
+      <iframe class="html-zoom-frame" id="html-zoom-frame" sandbox="allow-scripts" title="HTML preview large"></iframe>
+    </div>
     <script>
       (function () {
         const COLORS = ["#7c6af7", "#5b8def", "#2ea887", "#e07a3d", "#d4537e"];
@@ -141,6 +148,20 @@
             ? "/dms/" + encodeURIComponent(r.id) + "/abort"
             : "/channels/" + encodeURIComponent(r.id) + "/abort";
         }
+        function pauseUrl() {
+          const r = currentRoomRef();
+          if (!r) return "";
+          return r.kind === "dm"
+            ? "/dms/" + encodeURIComponent(r.id) + "/pause"
+            : "/channels/" + encodeURIComponent(r.id) + "/pause";
+        }
+        function continueUrl() {
+          const r = currentRoomRef();
+          if (!r) return "";
+          return r.kind === "dm"
+            ? "/dms/" + encodeURIComponent(r.id) + "/continue"
+            : "/channels/" + encodeURIComponent(r.id) + "/continue";
+        }
         function steerUrl() {
           const r = currentRoomRef();
           if (!r) return "";
@@ -225,6 +246,7 @@
               thinking: row.thinking || "",
               steps: Array.isArray(row.steps) ? row.steps.slice(-5) : [],
               startedAt: row.startedAt || "",
+              paused: Boolean(row.paused),
             }));
         }
         function isBusy() {
@@ -342,10 +364,11 @@
         }
         function formatBody(text) {
           const cleaned = visibleAssistantText(text);
-          if (cleaned.length > 8000) return escapeHtml(cleaned.slice(-8000));
+          const clipped =
+            cleaned.length > 48000 ? cleaned.slice(0, 48000) + "\n…" : cleaned;
           return typeof renderMarkdown === "function"
-            ? renderMarkdown(cleaned)
-            : escapeHtml(cleaned);
+            ? renderMarkdown(clipped)
+            : escapeHtml(clipped);
         }
         function liveStepLabel(name) {
           if (name === "think") return t("think");
@@ -409,19 +432,35 @@
                 '</span><span class="handle">@' +
                 escapeHtml(bot.handle) +
                 '</span></div><div class="turn-live"><div class="turn-status">' +
-                t("deepDiving") +
+                (live.paused ? t("live.paused") : t("deepDiving")) +
                 clock +
                 "</div>" +
                 liveStepsHtml(live.steps) +
-                '<div class="turn-actions"><button type="button" class="turn-stop" data-live-stop="' +
+                '<div class="turn-actions">' +
+                (live.paused
+                  ? '<button type="button" class="turn-continue" data-live-continue="' +
+                    escapeHtml(bot.id) +
+                    '">' +
+                    t("live.continue") +
+                    "</button>"
+                  : '<button type="button" class="turn-pause" data-live-pause="' +
+                    escapeHtml(bot.id) +
+                    '">' +
+                    t("live.pause") +
+                    "</button>") +
+                '<button type="button" class="turn-stop" data-live-stop="' +
                 escapeHtml(bot.id) +
                 '">' +
                 t("live.stop") +
-                '</button><button type="button" class="turn-steer" data-live-steer="' +
-                escapeHtml(bot.id) +
-                '">' +
-                t("live.steer") +
-                "</button></div></div></div></article>"
+                "</button>" +
+                (live.paused
+                  ? ""
+                  : '<button type="button" class="turn-steer" data-live-steer="' +
+                    escapeHtml(bot.id) +
+                    '">' +
+                    t("live.steer") +
+                    "</button>") +
+                "</div></div></div></article>"
               );
             })
             .join("");
@@ -482,8 +521,24 @@
               "</div>"
             : "";
           root.innerHTML = notice + rows.map(msgHtml).join("") + turnStatusHtml();
+          if (typeof hydrateHtmlPreviews === "function") {
+            hydrateHtmlPreviews(root);
+          }
           if (pin) root.scrollTop = root.scrollHeight;
         }
+        function openHtmlZoom(raw) {
+          const wrap = document.getElementById("html-zoom");
+          const frame = document.getElementById("html-zoom-frame");
+          if (!wrap || !frame) return;
+          frame.srcdoc = raw || "";
+          wrap.hidden = false;
+        }
+        function closeHtmlZoom() {
+          const wrap = document.getElementById("html-zoom");
+          const frame = document.getElementById("html-zoom-frame");
+          if (frame) frame.srcdoc = "";
+          if (wrap) wrap.hidden = true;
+        }
         function steerModLabel() {
           return /Mac|iPhone|iPad/.test(navigator.platform || "") ? "\u2318" : "Ctrl+";
         }
@@ -771,6 +826,48 @@
           renderThread();
           await loadMessages().catch(() => {});
         }
+        async function pauseTurn(botId) {
+          try {
+            await fetch(pauseUrl(), {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify(botId ? { botId: botId } : {}),
+            });
+          } catch {
+            /* ignore */
+          }
+          (state.lives || []).forEach((row) => {
+            if (!botId || row.botId === botId) row.paused = true;
+          });
+          renderThread();
+          await pollLive().catch(() => {});
+        }
+        async function continueTurn(botId) {
+          (state.lives || []).forEach((row) => {
+            if (row.botId === botId) row.paused = false;
+          });
+          state.posting = true;
+          syncComposer();
+          renderThread();
+          try {
+            const res = await fetch(continueUrl(), {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ botId: botId }),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(body.error || "continue failed");
+            await loadMessages();
+            await pollLive();
+          } catch (err) {
+            toast(err.message || String(err));
+            await pollLive().catch(() => {});
+          } finally {
+            state.posting = false;
+            syncComposer();
+            schedule();
+          }
+        }
         async function sendSteer(raw, botId) {
           const text = String(raw || "").trim();
           if (!text || !state.kind) return;
@@ -886,13 +983,68 @@
         document.getElementById("steer").addEventListener("click", () => {
           steerDraft().catch((err) => toast(err.message || String(err)));
         });
+        document.getElementById("html-zoom-close").addEventListener("click", () => {
+          closeHtmlZoom();
+        });
+        document.getElementById("html-zoom").addEventListener("click", (event) => {
+          if (event.target.id === "html-zoom") closeHtmlZoom();
+        });
         document.getElementById("thread").addEventListener("click", (event) => {
+          const htmlExpand = event.target.closest("[data-html-expand]");
+          if (htmlExpand) {
+            event.preventDefault();
+            const box = htmlExpand.closest(".md-html-preview");
+            const src = box && box.querySelector(".md-html-src");
+            if (src) openHtmlZoom(src.value);
+            return;
+          }
+          const htmlView = event.target.closest("[data-html-view]");
+          if (htmlView) {
+            event.preventDefault();
+            const box = htmlView.closest(".md-html-preview");
+            if (!box) return;
+            const view = htmlView.getAttribute("data-html-view");
+            box.setAttribute("data-view", view);
+            const frame = box.querySelector(".md-html-frame");
+            const pre = box.querySelector(".md-pre");
+            if (frame) frame.hidden = view !== "preview";
+            if (pre) pre.hidden = view !== "code";
+            box.querySelectorAll("[data-html-view]").forEach((tab) => {
+              tab.classList.toggle("on", tab.getAttribute("data-html-view") === view);
+            });
+            return;
+          }
+          const fenceCopy = event.target.closest("[data-fence-copy]");
+          if (fenceCopy) {
+            event.preventDefault();
+            const box = fenceCopy.closest(".md-fence");
+            const src = box && (box.querySelector(".md-html-src") || box.querySelector("code"));
+            const text = src && "value" in src ? src.value : src ? src.textContent : "";
+            if (text && navigator.clipboard) {
+              navigator.clipboard.writeText(text).catch(() => {});
+            }
+            return;
+          }
           const stop = event.target.closest("[data-live-stop]");
           if (stop) {
             event.preventDefault();
             stopTurn(stop.getAttribute("data-live-stop"));
             return;
           }
+          const pause = event.target.closest("[data-live-pause]");
+          if (pause) {
+            event.preventDefault();
+            pauseTurn(pause.getAttribute("data-live-pause"));
+            return;
+          }
+          const cont = event.target.closest("[data-live-continue]");
+          if (cont) {
+            event.preventDefault();
+            continueTurn(cont.getAttribute("data-live-continue")).catch((err) =>
+              toast(err.message || String(err)),
+            );
+            return;
+          }
           const steer = event.target.closest("[data-live-steer]");
           if (!steer) return;
           event.preventDefault();

package/src/router.ts

@@ -24,6 +24,8 @@ import {
   getBotDetail,
   getLiveTurn,
   abortLiveTurn,
+  pauseLiveTurn,
+  continueLiveTurn,
   healthPayload,
   importSkills,
   mergeModelsFile,
@@ -271,7 +273,8 @@ function modelRefFrom(value: unknown): ModelRef | null {
   const provider = str(rec, "provider").trim();
   const model = str(rec, "model").trim();
   if (!provider || !model) return null;
-  return { provider, model };
+  const reasoning = str(rec, "reasoning").trim();
+  return reasoning ? { provider, model, reasoning } : { provider, model };
 }
 
 function strList(record: Record<string, unknown>, key: string): string[] {
@@ -709,6 +712,66 @@ export async function handleRequest(
       return;
     }
 
+    const channelPause = path.match(/^\/channels\/([^/]+)\/pause$/);
+    if (channelPause && method === "POST") {
+      const body = asRecord(await readJson(req));
+      json(
+        res,
+        200,
+        pauseLiveTurn(
+          store,
+          decodeURIComponent(channelPause[1]),
+          str(body, "botId") || undefined,
+        ),
+      );
+      return;
+    }
+    const dmPause = path.match(/^\/dms\/([^/]+)\/pause$/);
+    if (dmPause && method === "POST") {
+      const room = openDm(store, decodeURIComponent(dmPause[1]));
+      const body = asRecord(await readJson(req));
+      json(
+        res,
+        200,
+        pauseLiveTurn(store, room.id, str(body, "botId") || undefined),
+      );
+      return;
+    }
+
+    const channelContinue = path.match(/^\/channels\/([^/]+)\/continue$/);
+    if (channelContinue && method === "POST") {
+      const body = asRecord(await readJson(req));
+      json(
+        res,
+        200,
+        await continueLiveTurn(
+          store,
+          decodeURIComponent(channelContinue[1]),
+          str(body, "botId"),
+          env,
+          extras,
+        ),
+      );
+      return;
+    }
+    const dmContinue = path.match(/^\/dms\/([^/]+)\/continue$/);
+    if (dmContinue && method === "POST") {
+      const room = openDm(store, decodeURIComponent(dmContinue[1]));
+      const body = asRecord(await readJson(req));
+      json(
+        res,
+        200,
+        await continueLiveTurn(
+          store,
+          room.id,
+          str(body, "botId"),
+          env,
+          extras,
+        ),
+      );
+      return;
+    }
+
     const channelSteer = path.match(/^\/channels\/([^/]+)\/steer$/);
     if (channelSteer && method === "POST") {
       const body = asRecord(await readJson(req));

package/src/store.ts

@@ -101,6 +101,9 @@ export type LiveTurn = {
   startedAt?: string;
   /** Full-ish tool history for Trajectory. Stripped from GET /live. */
   traces?: LiveTrace[];
+  /** Seat assignment text, kept so Continue can resume after Pause. */
+  asked?: string;
+  paused?: boolean;
 };
 
 export class GuildStore {
@@ -366,7 +369,6 @@ export class GuildStore {
   beginTurn(roomId: string, botIds: string[] = [""]): AbortSignal {
     const controller = new AbortController();
     const ids = botIds.length ? botIds : [""];
-    for (const botId of ids) this.bindBotAbort(roomId, botId, controller);
     this.turnGroups.set(controller.signal, {
       roomId,
       botIds: new Set(ids),
@@ -375,43 +377,54 @@ export class GuildStore {
     return controller.signal;
   }
 
+  /**
+   * Per-seat AbortController, child of the turn group. Pause/Stop one bot
+   * without taking the rest of the wave down.
+   */
+  armBotTurn(roomId: string, botId: string, parent: AbortSignal): AbortSignal {
+    const controller = new AbortController();
+    const onParent = () => {
+      if (!controller.signal.aborted) controller.abort();
+    };
+    if (parent.aborted) onParent();
+    else parent.addEventListener("abort", onParent, { once: true });
+    this.bindBotAbort(roomId, botId, controller);
+    const group = this.turnGroups.get(parent);
+    if (group && group.roomId === roomId) group.botIds.add(botId);
+    return controller.signal;
+  }
+
   adoptTurn(roomId: string, botId: string, signal: AbortSignal): void {
     const group = this.turnGroups.get(signal);
     if (!group || group.roomId !== roomId) return;
-    this.bindBotAbort(roomId, botId, group.controller);
     group.botIds.add(botId);
   }
 
+  private dropBotLive(roomId: string, botId: string): boolean {
+    const live = this.liveTurns.get(roomId);
+    const steers = this.pendingSteers.get(roomId);
+    const room = this.botAborts.get(roomId);
+    const hadLive = Boolean(live?.delete(botId));
+    steers?.delete(botId);
+    room?.delete(botId);
+    if (live && live.size === 0) this.liveTurns.delete(roomId);
+    if (steers && steers.size === 0) this.pendingSteers.delete(roomId);
+    if (room && room.size === 0) this.botAborts.delete(roomId);
+    for (const [sig, group] of this.turnGroups) {
+      if (group.roomId !== roomId || !group.botIds.has(botId)) continue;
+      group.botIds.delete(botId);
+      if (group.botIds.size === 0) this.turnGroups.delete(sig);
+    }
+    return hadLive;
+  }
+
   abortTurn(roomId: string, botId?: string): boolean {
     if (botId) {
-      const room = this.botAborts.get(roomId);
-      const controller = room?.get(botId);
-      if (!controller) {
-        const live = this.liveTurns.get(roomId);
-        const steers = this.pendingSteers.get(roomId);
-        const hadLive = Boolean(live?.delete(botId));
-        steers?.delete(botId);
-        if (live && live.size === 0) this.liveTurns.delete(roomId);
-        if (steers && steers.size === 0) this.pendingSteers.delete(roomId);
-        this.spillTrajectoryIfIdle(roomId);
-        return hadLive;
-      }
-      const group = this.turnGroups.get(controller.signal);
-      const ids = group ? [...group.botIds] : [botId];
-      this.turnGroups.delete(controller.signal);
-      const live = this.liveTurns.get(roomId);
-      const steers = this.pendingSteers.get(roomId);
-      for (const id of ids) {
-        room?.delete(id);
-        live?.delete(id);
-        steers?.delete(id);
-      }
-      if (room && room.size === 0) this.botAborts.delete(roomId);
-      if (live && live.size === 0) this.liveTurns.delete(roomId);
-      if (steers && steers.size === 0) this.pendingSteers.delete(roomId);
-      if (!controller.signal.aborted) controller.abort();
+      const controller = this.botAborts.get(roomId)?.get(botId);
+      const hadLive = this.dropBotLive(roomId, botId);
+      if (controller && !controller.signal.aborted) controller.abort();
       this.spillTrajectoryIfIdle(roomId);
-      return true;
+      return hadLive || Boolean(controller);
     }
     const room = this.botAborts.get(roomId);
     this.botAborts.delete(roomId);
@@ -419,10 +432,18 @@ export class GuildStore {
     this.pendingSteers.delete(roomId);
     let aborted = false;
     const seen = new Set<AbortController>();
+    for (const [sig, group] of [...this.turnGroups]) {
+      if (group.roomId !== roomId) continue;
+      this.turnGroups.delete(sig);
+      if (!group.controller.signal.aborted) {
+        group.controller.abort();
+        aborted = true;
+      }
+      seen.add(group.controller);
+    }
     for (const controller of room?.values() ?? []) {
       if (seen.has(controller)) continue;
       seen.add(controller);
-      this.turnGroups.delete(controller.signal);
       if (!controller.signal.aborted) {
         controller.abort();
         aborted = true;
@@ -432,6 +453,37 @@ export class GuildStore {
     return aborted || Boolean(room);
   }
 
+  pauseTurn(roomId: string, botId?: string): boolean {
+    const ids = botId
+      ? [botId]
+      : [...(this.liveTurns.get(roomId)?.keys() ?? [])];
+    let any = false;
+    for (const id of ids) {
+      if (!id) continue;
+      const live = this.getLiveBotTurn(roomId, id);
+      if (!live) continue;
+      const traces = (live.traces || []).map((tr) =>
+        tr.running ? { ...tr, running: false, text: tr.text || "paused" } : tr,
+      );
+      const steps = (live.steps || []).map((step) =>
+        step.running ? { ...step, running: false } : step,
+      );
+      this.setLiveTurn(roomId, {
+        ...live,
+        traces,
+        steps,
+        paused: true,
+      });
+      const controller = this.botAborts.get(roomId)?.get(id);
+      this.botAborts.get(roomId)?.delete(id);
+      const room = this.botAborts.get(roomId);
+      if (room && room.size === 0) this.botAborts.delete(roomId);
+      if (controller && !controller.signal.aborted) controller.abort();
+      any = true;
+    }
+    return any;
+  }
+
   endTurn(roomId: string, signal?: AbortSignal): void {
     const group = signal ? this.turnGroups.get(signal) : undefined;
     if (group) {
@@ -440,7 +492,11 @@ export class GuildStore {
       const live = this.liveTurns.get(roomId);
       const steers = this.pendingSteers.get(roomId);
       for (const botId of group.botIds) {
-        if (room?.get(botId) === group.controller) room.delete(botId);
+        if (live?.get(botId)?.paused) {
+          room?.delete(botId);
+          continue;
+        }
+        room?.delete(botId);
         live?.delete(botId);
         steers?.delete(botId);
       }
@@ -449,8 +505,14 @@ export class GuildStore {
       if (steers && steers.size === 0) this.pendingSteers.delete(roomId);
       if (!group.controller.signal.aborted) group.controller.abort();
     } else {
+      const live = this.liveTurns.get(roomId);
+      const kept = new Map<string, LiveTurn>();
+      for (const [id, turn] of live ?? []) {
+        if (turn.paused) kept.set(id, turn);
+      }
       this.botAborts.delete(roomId);
-      this.clearLiveTurn(roomId);
+      if (kept.size) this.liveTurns.set(roomId, kept);
+      else this.clearLiveTurn(roomId);
     }
     this.spillTrajectoryIfIdle(roomId);
   }

package/vendor/protocol/src/index.ts

@@ -6,7 +6,12 @@ export type HealthResponse = {
 
 export type BotStatus = "bench" | "staffed" | "running" | "retired";
 
-export type ModelRef = { provider: string; model: string };
+export type ModelRef = {
+  provider: string;
+  model: string;
+  /** Seat-specific effort. Missing → that model's catalog default. */
+  reasoning?: string;
+};
 
 export type LibraryKind =
   | "souls"
@@ -169,7 +174,7 @@ export type AuxRole =
 
 export type ModelsFile = {
   default?: ModelRef | null;
-  /** Last chosen effort string (catalog-defined: low, high, xhigh, …). */
+  /** Guild-default effort when a seat has no `model.reasoning`. */
   reasoning?: string;
   fast?: boolean;
   aux?: Partial<Record<AuxRole, ModelRef | null>>;