openclacky 1.2.12 → 1.2.14

data/lib/clacky/web/settings.js

@@ -1528,7 +1528,7 @@ const Settings = (() => {
   // The state object per kind:
   //   { source, configured, model, base_url, api_key_masked, provider, available }
 
-  const MEDIA_KINDS = ["image", "video", "audio"];
+  const MEDIA_KINDS = ["image", "video", "audio", "ocr"];
   let _mediaState = null;
   let _mediaDefaults = null;
   const _mediaCustomDraft = {};
@@ -1538,10 +1538,16 @@ const Settings = (() => {
     if (!container) return;
     container.innerHTML = `<div class="settings-loading">${I18n.t("settings.media.loading")}</div>`;
     try {
-      const res = await fetch("/api/config/media");
-      const data = await res.json();
-      _mediaState = data.media || {};
-      _mediaDefaults = data.default_provider || {};
+      const [mediaRes, ocrRes] = await Promise.all([
+        fetch("/api/config/media"),
+        fetch("/api/config/ocr")
+      ]);
+      const mediaData = await mediaRes.json();
+      const ocrData   = await ocrRes.json();
+      _mediaState = mediaData.media || {};
+      _mediaDefaults = mediaData.default_provider || {};
+      _mediaState["ocr"] = ocrData.ocr || { source: "off", available: [] };
+      _mediaDefaults["ocr"] = ocrData.default_provider || { available: [] };
       _renderMediaRows();
     } catch (e) {
       container.innerHTML = `<div class="settings-error">${I18n.t("settings.media.error", { msg: e.message })}</div>`;
@@ -1557,6 +1563,14 @@ const Settings = (() => {
     });
   }
 
+  function _refreshKindRows(_kind) {
+    _renderMediaRows();
+  }
+
+  async function _reloadKind(_kind) {
+    await _loadMedia();
+  }
+
   function _renderMediaRow(kind) {
     const state = (_mediaState && _mediaState[kind]) || { source: "off", available: [] };
     const def   = (_mediaDefaults && _mediaDefaults[kind]) || { available: [] };
@@ -1616,9 +1630,6 @@ const Settings = (() => {
       if (state.configured && state.model) return state.model;
       return "";
     }
-    if (state.source === "custom" && state.configured && !_mediaCustomDraft[kind]) {
-      return state.model || "";
-    }
     return "";
   }
 
@@ -1629,15 +1640,74 @@ const Settings = (() => {
       if (state.configured && state.model) {
         const wrap = document.createElement("div");
         wrap.className = "media-row-detail";
-        wrap.innerHTML = `
-          <div class="media-kv">
-            <span class="media-kv-key">${I18n.t("settings.media.field.provider")}</span>
-            <span class="media-kv-val">${_esc(state.provider || "—")}</span>
-            <span class="media-kv-key">${I18n.t("settings.media.field.model")}</span>
-            <span class="media-kv-val">${_esc(state.model)}</span>
-          </div>
-          <div class="media-row-hint">${I18n.t("settings.media.auto.followsDefault")}</div>
-        `;
+
+        const providerLine = document.createElement("div");
+        providerLine.className = "media-provider-line";
+        const pLabel = document.createElement("span");
+        pLabel.className = "media-provider-label";
+        pLabel.textContent = I18n.t("settings.media.field.provider");
+        const pVal = document.createElement("span");
+        pVal.className = "media-provider-value";
+        pVal.textContent = state.provider || "—";
+        providerLine.appendChild(pLabel);
+        providerLine.appendChild(pVal);
+        wrap.appendChild(providerLine);
+
+        const modelField = _buildField(I18n.t("settings.media.field.model"));
+        const opts = Array.isArray(state.available) ? state.available : [];
+        const aliases = (state.aliases && typeof state.aliases === "object") ? state.aliases : {};
+        const labelOf = (m) => aliases[m] ? `${m} (${aliases[m]})` : m;
+        if (opts.length > 1) {
+          const sel = document.createElement("select");
+          sel.className = "field-select";
+          opts.forEach(m => {
+            const o = document.createElement("option");
+            o.value = m;
+            o.textContent = labelOf(m);
+            if (m === state.model) o.selected = true;
+            sel.appendChild(o);
+          });
+          sel.addEventListener("change", async () => {
+            const picked = sel.value;
+            const payload = picked === (def && def.model)
+              ? { source: "auto" }
+              : { source: "auto", model: picked };
+            sel.disabled = true;
+            _setMediaResult(kind, "testing", I18n.t("settings.media.action.saving"));
+            try {
+              await _saveMediaConfig(kind, payload);
+              await _reloadKind(kind);
+            } catch (e) {
+              sel.disabled = false;
+              _setMediaResult(kind, "fail", e.message);
+            }
+          });
+          modelField.appendChild(sel);
+        } else {
+          const ro = document.createElement("div");
+          ro.className = "media-auto-readonly";
+          ro.textContent = labelOf(state.model);
+          modelField.appendChild(ro);
+        }
+        wrap.appendChild(modelField);
+
+        if (state.stale && state.requested_model) {
+          const warn = document.createElement("div");
+          warn.className = "media-row-hint is-warning";
+          warn.textContent = I18n.t("settings.media.auto.stale", {
+            requested: labelOf(state.requested_model),
+            current:   labelOf(state.model)
+          });
+          wrap.appendChild(warn);
+        } else {
+          const hint = document.createElement("div");
+          hint.className = "media-row-hint";
+          hint.textContent = I18n.t("settings.media.auto.followsDefault");
+          wrap.appendChild(hint);
+        }
+
+        wrap.appendChild(_buildMediaResult(kind));
+
         return wrap;
       }
       const wrap = document.createElement("div");
@@ -1651,21 +1721,34 @@ const Settings = (() => {
     if (state.configured && !_mediaCustomDraft[kind]) {
       const wrap = document.createElement("div");
       wrap.className = "media-row-detail";
-      wrap.innerHTML = `
-        <div class="media-kv">
-          <span class="media-kv-key">${I18n.t("settings.media.field.model")}</span>
-          <span class="media-kv-val">${_esc(state.model || "—")}</span>
-          <span class="media-kv-key">${I18n.t("settings.media.field.baseUrl")}</span>
-          <span class="media-kv-val">${_esc(state.base_url || "—")}</span>
-          <span class="media-kv-key">${I18n.t("settings.media.field.apiKey")}</span>
-          <span class="media-kv-val">${_esc(state.api_key_masked || "—")}</span>
-        </div>
-      `;
+
+      const list = document.createElement("div");
+      list.className = "media-custom-readonly-list";
+      [
+        ["settings.media.field.model",   state.model],
+        ["settings.media.field.baseUrl", state.base_url],
+        ["settings.media.field.apiKey",  state.api_key_masked]
+      ].forEach(([lk, v]) => {
+        const row = document.createElement("div");
+        row.className = "media-custom-readonly-row";
+        const lbl = document.createElement("span");
+        lbl.className = "media-custom-readonly-label";
+        lbl.textContent = I18n.t(lk);
+        const val = document.createElement("span");
+        val.className = "media-custom-readonly-value";
+        val.textContent = v || "—";
+        row.appendChild(lbl);
+        row.appendChild(val);
+        list.appendChild(row);
+      });
+      wrap.appendChild(list);
+
       const actions = document.createElement("div");
       actions.className = "media-row-actions";
+
       const editBtn = document.createElement("button");
       editBtn.type = "button";
-      editBtn.className = "media-row-btn";
+      editBtn.className = "btn-secondary media-row-btn-sm";
       editBtn.textContent = I18n.t("settings.media.action.edit");
       editBtn.addEventListener("click", () => {
         _mediaCustomDraft[kind] = {
@@ -1673,10 +1756,35 @@ const Settings = (() => {
           base_url: state.base_url || "",
           api_key:  ""
         };
-        _renderMediaRows();
+        _refreshKindRows(kind);
       });
+
+      const testBtn = document.createElement("button");
+      testBtn.type = "button";
+      testBtn.className = "btn-secondary media-row-btn-sm";
+      testBtn.textContent = I18n.t("settings.media.action.test");
+      testBtn.addEventListener("click", async () => {
+        testBtn.disabled = true;
+        editBtn.disabled = true;
+        _setMediaResult(kind, "testing", I18n.t("settings.media.testing"));
+        try {
+          const r = await _testMediaConfig(kind, {
+            model:    state.model,
+            base_url: state.base_url,
+            api_key:  state.api_key_masked
+          });
+          _setMediaResult(kind, r.ok ? "ok" : "fail", r.message || "");
+        } finally {
+          testBtn.disabled = false;
+          editBtn.disabled = false;
+        }
+      });
+
+      actions.appendChild(testBtn);
       actions.appendChild(editBtn);
       wrap.appendChild(actions);
+
+      wrap.appendChild(_buildMediaResult(kind));
       return wrap;
     }
 
@@ -1684,37 +1792,58 @@ const Settings = (() => {
     const draft = _mediaCustomDraft[kind] || { model: "", base_url: "", api_key: "" };
     const wrap = document.createElement("div");
     wrap.className = "media-row-detail";
-    const form = document.createElement("div");
-    form.className = "media-custom-form";
-    form.innerHTML = `
-      <label>${I18n.t("settings.media.field.model")}</label>
-      <input type="text" data-field="model" value="${_esc(draft.model)}" placeholder="gpt-image-1">
-      <label>${I18n.t("settings.media.field.baseUrl")}</label>
-      <input type="text" data-field="base_url" value="${_esc(draft.base_url)}" placeholder="https://api.openai.com/v1">
-      <label>${I18n.t("settings.media.field.apiKey")}</label>
-      <input type="password" data-field="api_key" value="${_esc(draft.api_key)}" placeholder="${I18n.t("settings.media.apiKey.placeholder")}">
-      <div class="media-form-actions">
-        <button type="button" class="media-row-btn" data-act="cancel">${I18n.t("settings.media.action.cancel")}</button>
-        <button type="button" class="media-row-btn is-primary" data-act="save">${I18n.t("settings.media.action.save")}</button>
-      </div>
-    `;
-    form.querySelectorAll("input").forEach(inp => {
+
+    const fields = document.createElement("div");
+    fields.className = "media-custom-fields";
+
+    const mkInput = (labelKey, fieldName, type, placeholder, initial) => {
+      const f = _buildField(I18n.t(labelKey));
+      const inp = document.createElement("input");
+      inp.type = type;
+      inp.className = "field-input";
+      inp.value = initial || "";
+      inp.placeholder = placeholder;
+      inp.dataset.field = fieldName;
       inp.addEventListener("input", () => {
         _mediaCustomDraft[kind] = _mediaCustomDraft[kind] || {};
-        _mediaCustomDraft[kind][inp.dataset.field] = inp.value;
+        _mediaCustomDraft[kind][fieldName] = inp.value;
       });
-    });
-    form.querySelector('[data-act="cancel"]').addEventListener("click", () => {
+      f.appendChild(inp);
+      return f;
+    };
+    fields.appendChild(mkInput("settings.media.field.model",   "model",    "text",     "gpt-image-1",                draft.model));
+    fields.appendChild(mkInput("settings.media.field.baseUrl", "base_url", "text",     "https://api.openai.com/v1",  draft.base_url));
+    fields.appendChild(mkInput("settings.media.field.apiKey",  "api_key",  "password", I18n.t("settings.media.apiKey.placeholder"), draft.api_key));
+    wrap.appendChild(fields);
+
+    const result = _buildMediaResult(kind);
+    wrap.appendChild(result);
+
+    const actions = document.createElement("div");
+    actions.className = "media-row-actions";
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "btn-secondary media-row-btn-sm";
+    cancelBtn.textContent = I18n.t("settings.media.action.cancel");
+    cancelBtn.addEventListener("click", () => {
       delete _mediaCustomDraft[kind];
-      // If there's no saved custom, fall back to whatever the saved source is (or off)
       if (!state.configured) {
         const fallback = (_mediaDefaults && _mediaDefaults[kind] && _mediaDefaults[kind].model) ? "auto" : "off";
         _mediaState[kind] = { ..._mediaState[kind], source: fallback };
       }
-      _renderMediaRows();
+      _refreshKindRows(kind);
     });
-    form.querySelector('[data-act="save"]').addEventListener("click", async () => {
+
+    const saveBtn = document.createElement("button");
+    saveBtn.type = "button";
+    saveBtn.className = "btn-primary media-row-btn-sm";
+    saveBtn.textContent = I18n.t("settings.media.action.save");
+    saveBtn.addEventListener("click", async () => {
       const d = _mediaCustomDraft[kind] || {};
+      saveBtn.disabled = true;
+      cancelBtn.disabled = true;
+      _setMediaResult(kind, "testing", I18n.t("settings.media.action.saving"));
       try {
         await _saveMediaConfig(kind, {
           source:   "custom",
@@ -1723,26 +1852,57 @@ const Settings = (() => {
           api_key:  d.api_key || ""
         });
         delete _mediaCustomDraft[kind];
-        await _loadMedia();
+        await _reloadKind(kind);
       } catch (e) {
-        alert(e.message);
+        saveBtn.disabled = false;
+        cancelBtn.disabled = false;
+        _setMediaResult(kind, "fail", e.message);
       }
     });
-    wrap.appendChild(form);
+
+    actions.appendChild(cancelBtn);
+    actions.appendChild(saveBtn);
+    wrap.appendChild(actions);
+
     return wrap;
   }
 
+  function _buildField(labelText) {
+    const f = document.createElement("div");
+    f.className = "model-field";
+    const label = document.createElement("span");
+    label.className = "field-label";
+    label.textContent = labelText;
+    f.appendChild(label);
+    return f;
+  }
+
+  function _buildMediaResult(kind) {
+    const el = document.createElement("div");
+    el.className = "model-test-result";
+    el.dataset.mediaKind = kind;
+    return el;
+  }
+
+  function _setMediaResult(kind, status, message) {
+    const el = document.querySelector(`.model-test-result[data-media-kind="${kind}"]`);
+    if (!el) return;
+    el.className = `model-test-result result-${status}`;
+    if (!message) {
+      el.textContent = "";
+      return;
+    }
+    const prefix = status === "ok" ? "✓ " : status === "fail" ? "✗ " : "";
+    el.textContent = prefix + message;
+  }
+
   async function _onMediaSourceClick(kind, source) {
     const cur = (_mediaState && _mediaState[kind]) || {};
     if (cur.source === source && source !== "custom") return;
 
     if (source === "custom") {
       if (cur.source !== "custom" && !_mediaCustomDraft[kind]) {
-        _mediaCustomDraft[kind] = {
-          model:    cur.model || "",
-          base_url: cur.base_url || "",
-          api_key:  ""
-        };
+        _mediaCustomDraft[kind] = { model: "", base_url: "", api_key: "" };
       }
       _mediaState[kind] = { ...cur, source: "custom" };
       _renderMediaRows();
@@ -1754,12 +1914,14 @@ const Settings = (() => {
       delete _mediaCustomDraft[kind];
       await _loadMedia();
     } catch (e) {
-      alert(e.message);
+      _renderMediaRows();
+      _setMediaResult(kind, "fail", e.message);
     }
   }
 
   async function _saveMediaConfig(kind, body) {
-    const res = await fetch(`/api/config/media/${kind}`, {
+    const url = kind === "ocr" ? `/api/config/ocr` : `/api/config/media/${kind}`;
+    const res = await fetch(url, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body)
@@ -1771,6 +1933,25 @@ const Settings = (() => {
     return data;
   }
 
+  async function _testMediaConfig(kind, { model, base_url, api_key }) {
+    try {
+      const url = kind === "ocr" ? `/api/config/ocr/test` : `/api/config/media/test`;
+      const payload = kind === "ocr"
+        ? { model, base_url, api_key }
+        : { kind, model, base_url, api_key };
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) return { ok: false, message: data.error || `HTTP ${res.status}` };
+      return data;
+    } catch (e) {
+      return { ok: false, message: e.message };
+    }
+  }
+
 
   function init() {
     _initTabs();

data/lib/clacky/web/skills.js

@@ -813,13 +813,7 @@ const SkillAC = (() => {
   // Load from localStorage, default to false (hide system skills)
   let _showSystemSkills = localStorage.getItem("skill-ac-show-system") === "true";
 
-  // Cross-browser IME composition fix:
-  // Safari fires compositionend BEFORE keydown (violating W3C spec), and the
-  // gap between compositionend and keydown is ~5ms on Safari. We record the
-  // timestamp of compositionend and treat any Enter keydown within 20ms as
-  // still-composing. Chrome is unaffected because e.isComposing is still true.
-  // Reference: https://bugs.webkit.org/show_bug.cgi?id=165004
-  let _lastCompositionEndTime = -Infinity;
+  let _ime = null;  // IME tracker for #user-input, set up in _initDOMBindings
 
   /** Called whenever the active session changes — just store the id, no prefetch. */
   function _loadForSession(sessionId) {
@@ -1110,18 +1104,15 @@ const SkillAC = (() => {
       input.focus();
     });
 
-    // IME composition guard: record timestamp of compositionend so the
-    // Enter keydown handler can detect Safari's out-of-order firing.
-    $("user-input").addEventListener("compositionend", () => {
-      _lastCompositionEndTime = Date.now();
-    });
+    // IME composition tracker: shared by main keydown + AC _handleKey.
+    _ime = IME.track($("user-input"));
 
     // Main composer keydown: SkillAC consumes nav keys first, then Enter → send.
     $("user-input").addEventListener("keydown", e => {
       // Let skill autocomplete consume arrow/enter/escape first
       if (_handleKey(e)) return;
 
-      if (e.key === "Enter" && !e.shiftKey && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
+      if (e.key === "Enter" && !e.shiftKey && !_ime.isComposing(e)) {
         e.preventDefault();
         Sessions.sendMessage();
       }
@@ -1173,7 +1164,7 @@ const SkillAC = (() => {
       _select(targetIdx);
       return true;
     }
-    if (e.key === "Enter" && !e.isComposing && (Date.now() - _lastCompositionEndTime) > 20) {
+    if (e.key === "Enter" && !_ime.isComposing(e)) {
       if (_activeIndex >= 0) {
         e.preventDefault();
         _select(_activeIndex);

data/lib/clacky/web/utils.js

@@ -0,0 +1,57 @@
+// Cross-browser IME composition guard for Enter-to-submit inputs.
+//
+// Problem: pressing Enter to confirm an IME composition (e.g. selecting a
+// Chinese candidate) must NOT trigger submit. Different browsers signal this
+// differently:
+//   - Chrome / Firefox / Edge: e.isComposing === true on the confirming Enter
+//   - Older browsers: e.keyCode === 229
+//   - Safari: fires compositionend ~5ms BEFORE keydown, so isComposing is
+//     already false. We need a recent compositionend timestamp to suppress.
+//
+// Reference: https://bugs.webkit.org/show_bug.cgi?id=165004
+//
+// Usage:
+//   IME.bindEnter(inputEl, () => submit());
+//
+// Or low-level for handlers that already own a keydown listener:
+//   const ime = IME.track(inputEl);
+//   inputEl.addEventListener("keydown", e => {
+//     if (e.key === "Enter" && !ime.isComposing(e)) submit();
+//   });
+const IME = (() => {
+  const SAFARI_GUARD_MS = 20;
+
+  function track(inputEl) {
+    let lastCompositionEnd = -Infinity;
+    const onEnd = () => { lastCompositionEnd = Date.now(); };
+    inputEl.addEventListener("compositionend", onEnd);
+
+    return {
+      isComposing(e) {
+        if (e.isComposing || e.keyCode === 229) return true;
+        return Date.now() - lastCompositionEnd <= SAFARI_GUARD_MS;
+      },
+      dispose() {
+        inputEl.removeEventListener("compositionend", onEnd);
+      }
+    };
+  }
+
+  function bindEnter(inputEl, handler, options = {}) {
+    const ime = track(inputEl);
+    const onKey = (e) => {
+      if (e.key !== "Enter") return;
+      if (options.allowShift !== true && e.shiftKey) return;
+      if (ime.isComposing(e)) return;
+      e.preventDefault();
+      handler(e);
+    };
+    inputEl.addEventListener("keydown", onKey);
+    return () => {
+      inputEl.removeEventListener("keydown", onKey);
+      ime.dispose();
+    };
+  }
+
+  return { track, bindEnter };
+})();

data/lib/clacky/web/ws-dispatcher.js

@@ -16,10 +16,143 @@
   // Guard: restore hash routing only once after initial session_list arrives.
   let _initialRestoreDone = false;
 
+  // ── Phase grouping (folds subagent runs like skill evolution) ───────────
+  //
+  // Strategy: when a phase_start arrives, we append a foldable card to the
+  // outer message stream and push its body onto RenderTarget. Sessions.append*
+  // resolves its destination via RenderTarget.current(), so subagent events
+  // land inside the card. Infrastructure paths (history fetch, empty-hint,
+  // scroll, container clear) read RenderTarget.outer() and stay anchored to
+  // the real #messages node — phase activity never pollutes them.
+  //
+  // The DOM id "messages" is never swapped: external code, CSS, devtools and
+  // closures all see a stable identity.
+  const RenderTarget = (() => {
+    const stack = [];
+    return {
+      push(el) { stack.push(el); },
+      pop()    { return stack.pop(); },
+      current(){ return stack[stack.length - 1] || document.getElementById("messages"); },
+      outer()  { return document.getElementById("messages"); },
+      depth()  { return stack.length; },
+    };
+  })();
+  window.RenderTarget = RenderTarget;
+
+  const _phaseStack = []; // [{ id, kind, card, body, summary }]
+
+  function _activePhase() {
+    return _phaseStack[_phaseStack.length - 1] || null;
+  }
+
+  function _phaseLabel(kind) {
+    const map = {
+      skill_evolution: I18n.t ? (I18n.t("phase.skill_evolution") || "Skill evolution") : "Skill evolution",
+    };
+    return map[kind] || kind;
+  }
+
+  function _beginPhase(ev) {
+    if (_phaseStack.length > 0) return; // single-level for now
+
+    const outer = RenderTarget.outer();
+    if (!outer) return;
+
+    const card = document.createElement("details");
+    card.className = "msg-phase";
+    card.dataset.phaseId = ev.phase_id;
+    card.dataset.phaseKind = ev.kind || "phase";
+
+    const summary = document.createElement("summary");
+    summary.className = "msg-phase-summary";
+    const labelText = ev.label || _phaseLabel(ev.kind);
+    summary.innerHTML = `<span class="msg-phase-icon">🧬</span><span class="msg-phase-label">${escapeHtml(labelText)}</span><span class="msg-phase-status">…</span>`;
+    card.appendChild(summary);
+
+    const body = document.createElement("div");
+    body.className = "msg-phase-body";
+    card.appendChild(body);
+
+    outer.appendChild(card);
+    RenderTarget.push(body);
+
+    _phaseStack.push({
+      id: ev.phase_id,
+      kind: ev.kind,
+      card,
+      body,
+      summary,
+    });
+
+    outer.scrollTop = outer.scrollHeight;
+  }
+
+  function _endPhase(phaseId, summary) {
+    const idx = _phaseStack.findIndex(p => p.id === phaseId);
+    if (idx === -1) return;
+    while (_phaseStack.length > idx) {
+      const phase = _phaseStack.pop();
+      RenderTarget.pop();
+      _finalizePhase(phase, { summary: phase.id === phaseId ? summary : null });
+    }
+  }
+
+  function _finalizePhase(phase, { summary, incomplete } = {}) {
+    const body = phase.body;
+    const isEmpty = !incomplete && body && body.children.length === 0;
+    if (isEmpty) phase.card.classList.add("msg-phase-empty");
+
+    const statusEl = phase.summary && phase.summary.querySelector(".msg-phase-status");
+    if (statusEl) {
+      if (incomplete) {
+        statusEl.textContent = " (interrupted)";
+        statusEl.classList.add("msg-phase-status-incomplete");
+      } else if (isEmpty) {
+        const noChange = I18n.t ? (I18n.t("phase.no_changes") || "no changes needed") : "no changes needed";
+        statusEl.textContent = ` ✓ ${noChange}`;
+      } else if (summary) {
+        statusEl.textContent = ` ✓ ${summary}`;
+      } else {
+        statusEl.textContent = " ✓";
+      }
+    }
+  }
+
+  function _closeAllPhases(reason) {
+    while (_phaseStack.length > 0) {
+      const phase = _phaseStack.pop();
+      RenderTarget.pop();
+      _finalizePhase(phase, { incomplete: reason === "incomplete" });
+    }
+  }
+
+  window._closeAllPhases = _closeAllPhases;
+
 
 WS.onEvent(ev => {
+  // Safety nets:
+  // - User just sent a message → any open phase is stale, close it.
+  // - Session changed → phase belongs to the previous session, close it.
+  if (ev.type === "history_user_message" || ev.type === "subscribed") {
+    _closeAllPhases("incomplete");
+  }
+
   switch (ev.type) {
 
+    // ── Phase grouping ─────────────────────────────────────────────────
+    case "phase_start": {
+      if (ev.session_id !== Sessions.activeId) break;
+      _beginPhase(ev);
+      break;
+    }
+
+    case "phase_end": {
+      if (ev.session_id !== Sessions.activeId) break;
+      _endPhase(ev.phase_id, ev.summary);
+      break;
+    }
+
+
     // ── Internal WS lifecycle ──────────────────────────────────────────
     case "_ws_connected": {
       const banner = document.getElementById("offline-banner");
@@ -41,6 +174,7 @@ WS.onEvent(ev => {
       // caused stuck UI after reconnect when the snapshot logic wasn't
       // re-asserting status on every reconnect.
       Sessions.clearAllProgress();
+      _closeAllPhases("incomplete");
       break;
     }
 
@@ -207,6 +341,7 @@ WS.onEvent(ev => {
       if (ev.session_id !== Sessions.activeId) break;
       Sessions.clearProgress();
       Sessions.collapseToolGroup();
+      _closeAllPhases("incomplete"); // safety net: missed phase_end
       {
         const costSource = ev.cost_source;
         const symbol = typeof Billing !== "undefined" ? Billing.getCurrencySymbol() : "$";
@@ -251,6 +386,7 @@ WS.onEvent(ev => {
       if (ev.session_id !== Sessions.activeId) break;
       Sessions.clearProgress();
       Sessions.collapseToolGroup();
+      _closeAllPhases("incomplete");
       Sessions.appendInfo(I18n.t("chat.interrupted"));
       break;