@zq-silk/yui 2.6.0 → 2.8.0

package/dist/web/assets/client/views/dock/conversation.js

@@ -1,21 +1,22 @@
 export const CONVERSATION_SCRIPT = String.raw `
-import { h, clear } from "/assets/js/lib/dom.js";
+import { h, clear, icon } from "/assets/js/lib/dom.js";
 import { api, releaseMutation, requestJson, submitMutation } from "/assets/js/lib/api.js";
 import { richText } from "/assets/js/ui/text.js";
 import { readSessionAccessMode, writeSessionAccessMode } from "/assets/js/lib/prefs.js";
 import { inputCard } from "/assets/js/domain/work.js";
 
 export function createConversationController(host, t, locale = function () { return "en"; }) {
-  let owner = null, selected = null, facts = null, cursor = null, next = null;
+  let owner = null, selected = null, facts = null, next = null, latestItems = [], olderItems = [];
   let generation = 0, busy = false, timer = null, pending = null, historyOk = false;
   let recoveryUnavailable = false;
   let rendered = new Map();
   let materials = [], incomingMaterials = null;
   let requestSignature = "";
   let modelPending = null, modelCatalog = null, lastModelObservation = null;
-  const requests = h("div");
-  const questions = h("div");
+  const requests = h("div.cv-requests");
+  const questions = h("div.cv-requests");
   let questionSignature = "";
+  let confirmedModel = null, modelRowMap = new Map();
   const defaultMode = h("select", { "aria-label": t("conversation.defaultMode") },
     h("option", { value: "structured" }, t("conversation.title")),
     h("option", { value: "native" }, t("dock.session")));
@@ -25,44 +26,79 @@ export function createConversationController(host, t, locale = function () { ret
     receipt.textContent = t(saved ? "conversation.defaultSaved" : "settings.storageFailed");
     defaultMode.value = readSessionAccessMode();
   });
-  const select = h("select", { "aria-label": t("conversation.sessions") });
-  const status = h("p.feed-note", { role: "status" });
-  const identity = h("p.feed-note");
+  const select = h("select.cv-session", { "aria-label": t("conversation.sessions") });
+  const status = h("p.cv-status", { role: "status" });
+  const identity = h("p.cv-identity");
   const feed = h("div.feed", { tabIndex: 0, "aria-label": t("conversation.history") });
-  const text = h("textarea.composer-input", { rows: 3, "aria-label": t("conversation.input"), maxLength: 12000 });
-  const receipt = h("p.feed-note", { role: "status" });
-  const draftStatus = h("p.feed-note", { role: "status" });
-  const receiptDetail = h("pre");
-  const modelStatus = h("p.feed-note", { role: "status" });
-  const modelResult = h("p.feed-note", { role: "status" });
-  const modelSelect = h("select", { "aria-label": t("conversation.model") });
-  const modelLoad = h("button.btn", { type: "button" }, t("conversation.modelsLoad"));
-  const modelApply = h("button.btn", { type: "button" }, t("conversation.modelApply"));
-  const modelPanel = h("details", null, h("summary", null, t("conversation.model")),
-    modelStatus, h("div.composer-bar", null, modelLoad, modelSelect, modelApply), modelResult,
-    h("p.feed-note", null, t("conversation.modelBoundary")));
+  const text = h("textarea.cv-input", { rows: 2, placeholder: t("conversation.placeholder"), "aria-label": t("conversation.input"), maxLength: 12000 });
+  const receipt = h("p.cv-note", { role: "status" });
+  const draftStatus = h("p.cv-note", { role: "status" });
+  const receiptDetail = h("pre.cv-code");
+  const modelStatus = h("p.cv-note", { role: "status" });
+  const modelResult = h("p.cv-note", { role: "status" });
+  const modelSelect = h("select", { "aria-label": t("conversation.model"), hidden: true });
+  const modelRows = h("div.cv-options", { role: "listbox", "aria-label": t("conversation.selectModel") });
+  const modelLabel = h("span.cv-model-label", null, t("conversation.model"));
+  const modelLoad = h("button.cv-link", { type: "button" }, t("conversation.modelsLoad"));
+  const modelApply = h("button.btn.btn-primary", { type: "button" }, t("conversation.modelApply"));
+  const modelMenu = h("details.cv-pop.cv-model", null,
+    h("summary.cv-pill", null, modelLabel, icon("down")),
+    h("div.cv-popbody", null, h("p.cv-pop-title", null, t("conversation.selectModel")),
+      modelRows, modelSelect, modelStatus, modelResult,
+      h("div.cv-pop-actions", null, modelLoad, modelApply),
+      h("p.cv-note", null, t("conversation.modelBoundary"))));
   const slash = h("div.conversation-slash", { "aria-label": t("conversation.commands") });
-  const literal = h("button.btn", { type: "button", hidden: true }, t("conversation.literal"));
-  const send = h("button.btn.btn-primary", { type: "button" }, t("conversation.send"));
-  const stop = h("button.btn", { type: "button" }, t("conversation.stop"));
-  const check = h("button.btn", { type: "button" }, t("conversation.receipt"));
-  const older = h("button.btn", { type: "button" }, t("conversation.older"));
-  const latest = h("button.btn", { type: "button" }, t("conversation.latest"));
-  const current = h("button.btn", { type: "button" }, t("conversation.current"));
-  const moreSessions = h("button.btn", { type: "button", hidden: true }, t("conversation.moreSessions"));
+  const literal = h("button.cv-link", { type: "button", hidden: true }, t("conversation.literal"));
+  const send = h("button.cv-send", { type: "button", "aria-label": t("conversation.send"), title: t("conversation.send") }, icon("up"));
+  const stop = h("button.cv-stop", { type: "button", hidden: true, "aria-label": t("conversation.stop"), title: t("conversation.stop") }, icon("stop"));
+  const check = h("button.cv-link", { type: "button", hidden: true }, t("conversation.receipt"));
+  const older = h("button.cv-link", { type: "button", hidden: true }, t("conversation.older"));
+  const latest = h("button.cv-jump", { type: "button", hidden: true, "aria-label": t("conversation.jump"), title: t("conversation.latest") }, icon("down"));
+  const current = h("button.cv-link", { type: "button", hidden: true }, t("conversation.current"));
+  const moreSessions = h("button.cv-link", { type: "button", hidden: true }, t("conversation.moreSessions"));
+  const writerChip = h("span.cv-chip.tone-warn", { hidden: true }, icon("alert"), h("span", null, t("conversation.terminalWriter")));
   const file = h("input", { type: "file", "aria-label": t("materials.attach") });
   const materialList = h("div.row-stack");
-  const materialAlert = h("p.feed-note", { role: "alert" });
-  const materialBar = h("details", null, h("summary", null, t("materials.attach")), file,
-    h("p.feed-note", null, t("materials.boundary")));
-  host.append(h("div.dock-sub", null, select, current, moreSessions,
-    h("label", null, t("conversation.defaultMode"), defaultMode)), identity, status, feed,
-    h("div.conversation-requests", null, questions, requests),
-    h("div.composer-bar", null, older, latest),
-    h("div.composer-wrap", null, modelPanel, materialBar, materialList, materialAlert, text, slash, draftStatus,
-      h("div.composer-bar", null, send, stop, check, literal), receipt,
-      h("details", null, h("summary", null, t("conversation.receiptDetails")), receiptDetail),
-      h("p.feed-note", null, t("conversation.boundary"))));
+  const materialAlert = h("p.cv-note", { role: "alert" });
+  const attachMenu = h("details.cv-pop.cv-attach", null,
+    h("summary.cv-iconbtn", { "aria-label": t("materials.attach"), title: t("materials.attach") }, icon("plus")),
+    h("div.cv-popbody", null, h("p.cv-pop-title", null, t("materials.attach")), file,
+      h("p.cv-note", null, t("materials.boundary"))));
+  const menu = h("details.cv-pop.cv-menu", null,
+    h("summary.cv-iconbtn", { "aria-label": t("conversation.more"), title: t("conversation.more") }, icon("dots")),
+    h("div.cv-popbody", null,
+      h("label.cv-field", null, h("span", null, t("conversation.defaultMode")), defaultMode),
+      moreSessions, identity,
+      h("details.cv-sub", null, h("summary", null, t("conversation.receiptDetails")), receiptDetail),
+      h("p.cv-note", null, t("conversation.boundary"))));
+  const pops = [menu, attachMenu, modelMenu];
+  pops.forEach(function (pop) {
+    pop.addEventListener("toggle", function () {
+      if (!pop.open) return;
+      pops.forEach(function (other) { if (other !== pop) other.open = false; });
+      if (pop === modelMenu && !modelCatalog && !modelLoad.disabled) loadModels();
+    });
+  });
+  host.addEventListener("click", function (event) {
+    pops.forEach(function (pop) { if (pop.open && !pop.contains(event.target)) pop.open = false; });
+  });
+  host.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") pops.forEach(function (pop) { pop.open = false; });
+  });
+  feed.addEventListener("scroll", function () {
+    syncJump();
+    // Reaching the top loads the next older page in place; the view keeps its position.
+    if (feed.scrollTop < 120 && next && historyOk && !busy) refresh(true);
+  });
+  host.append(
+    h("div.cv-head", null, h("div.cv-picker", null, select, current), menu), status,
+    h("div.cv-older", null, older),
+    h("div.cv-stage", null, feed, latest),
+    questions, requests,
+    h("div.cv-composer", null, slash,
+      h("div.cv-box", null, materialList, materialAlert, text,
+        h("div.cv-tools", null, attachMenu, writerChip, h("span.spacer"), modelMenu, stop, send)),
+      h("div.cv-hint", null, draftStatus, literal, check, receipt)));
 
   function key() { return "yui.conversation." + JSON.stringify(owner) + "." + selected; }
   function saved(suffix, value, expectedRequestId) {
@@ -98,6 +134,9 @@ export function createConversationController(host, t, locale = function () { ret
     Object.entries(extra || {}).forEach(function (entry) { if (entry[1] != null) q.set(entry[0], String(entry[1])); });
     return "/api/conversation?" + q;
   }
+  function syncJump() {
+    latest.hidden = !((selected && !historyOk) || feed.scrollHeight - feed.clientHeight - feed.scrollTop > 80);
+  }
   function controls() {
     if (owner && selected) {
       try { pending = JSON.parse(saved(".pending") || "null"); }
@@ -112,12 +151,18 @@ export function createConversationController(host, t, locale = function () { ret
     stop.disabled = busy || recoveryUnavailable || !!pending || !writable || !turn || turn.status !== "accepted" || !turn.nativeTurnId;
     check.disabled = busy || !pending;
     older.disabled = busy || !next;
+    older.hidden = !next;
+    check.hidden = !pending;
+    stop.hidden = !turn || turn.status !== "accepted";
+    current.hidden = !facts || !selected || selected === facts.currentSessionId;
+    writerChip.hidden = !(facts && facts.terminalWriter);
     literal.disabled = send.disabled;
+    syncJump();
     modelLoad.disabled = busy || !active || active.adapterId !== "codex";
     modelApply.disabled = busy || !!pending || !!modelPending || !writable || !modelSelect.value
       || !modelCatalog || modelCatalog.source === "fallback" || !!modelCatalog.failure
       || turn && ["submitting", "accepted", "delivery-unknown"].includes(turn.status);
-    materialBar.hidden = !owner || owner.scope !== "task";
+    attachMenu.hidden = !owner || owner.scope !== "task";
     file.disabled = busy || !!pending || !writable || materials.length >= 8;
     materialList.querySelectorAll("button").forEach(function (control) { control.disabled = busy || !!pending; });
   }
@@ -135,6 +180,8 @@ export function createConversationController(host, t, locale = function () { ret
       && observation.axes.find(function (a) { return a.key === "model"; });
     const value = axis && axis.current.status === "observed" ? axis.current.value : null;
     const session = facts && facts.sessions.find(function (s) { return s.nativeSessionId === selected; });
+    confirmedModel = value;
+    modelLabel.textContent = value || (session && session.launchModel) || t("conversation.model");
     modelStatus.textContent = t("conversation.launchModel") + ": " + (session && session.launchModel || "—")
       + " · " + t("conversation.confirmedModel") + ": " + (value || t("conversation.unknown"))
       + (value ? " · " + observation.observedAt : "");
@@ -146,6 +193,14 @@ export function createConversationController(host, t, locale = function () { ret
     }
     lastModelObservation = value ? observation.observedAt : null;
   }
+  function pickModel(value) {
+    modelSelect.value = value;
+    modelRowMap.forEach(function (row, key) {
+      row.className = "cv-option" + (key === value ? " is-selected" : "");
+      row.ariaSelected = key === value ? "true" : "false";
+    });
+    controls();
+  }
   async function loadModels() {
     if (modelLoad.disabled) return;
     const own = generation;
@@ -153,10 +208,15 @@ export function createConversationController(host, t, locale = function () { ret
     try {
       const result = await requestJson(url({ session: selected }).replace("/api/conversation?", "/api/conversation/model?"));
       if (own !== generation) return;
-      modelCatalog = result; clear(modelSelect);
+      modelCatalog = result; clear(modelSelect); clear(modelRows); modelRowMap = new Map();
       (result.catalog.models || []).forEach(function (m) {
         modelSelect.append(h("option", { value: m.value }, m.label + " · " + m.value));
+        const row = h("button.cv-option", { type: "button", role: "option" },
+          h("span.cv-option-name", null, m.label), h("span.cv-option-id", null, m.value), icon("check"));
+        row.addEventListener("click", function () { pickModel(m.value); });
+        modelRowMap.set(m.value, row); modelRows.append(row);
       });
+      pickModel(modelRowMap.has(confirmedModel) ? confirmedModel : "");
       modelResult.textContent = result.source + " · " + (result.fetchedAt || result.attemptedAt)
         + (result.failure ? " · " + result.failure.message : "");
     } catch (error) { if (own === generation) modelResult.textContent = error.message; }
@@ -189,7 +249,7 @@ export function createConversationController(host, t, locale = function () { ret
     literal.hidden = !value.startsWith("/");
     if (!value.startsWith("/") || /\s/.test(value)) return;
     commands.filter(function (name) { return ("/" + name).startsWith(value); }).forEach(function (name) {
-      const button = h("button.btn", { type: "button" }, "/" + name + " · " + t("conversation.command." + name));
+      const button = h("button.cv-cmd", { type: "button" }, "/" + name + " · " + t("conversation.command." + name));
       button.addEventListener("click", function () {
         text.value = "/" + name; saved(".draft", text.value); drawCommands(); text.focus?.();
       });
@@ -204,9 +264,9 @@ export function createConversationController(host, t, locale = function () { ret
       else submit(true);
       return;
     }
-    if (name === "model") { modelPanel.open = true; loadModels(); }
+    if (name === "model") { modelMenu.open = true; loadModels(); }
     else if (name === "status") refresh();
-    else if (name === "latest") { cursor = null; refresh(); }
+    else if (name === "latest") refresh();
     receipt.textContent = name === "help" ? t("conversation.commandHelp") : t("conversation.command." + name);
     text.value = ""; saved(".draft", null); drawCommands();
   }
@@ -214,10 +274,10 @@ export function createConversationController(host, t, locale = function () { ret
   function drawMaterials() {
     clear(materialList);
     materials.forEach(function (ref, index) {
-      const remove = h("button.btn", { type: "button" }, t("materials.remove"));
+      const remove = h("button.cv-x", { type: "button", "aria-label": t("materials.remove"), title: t("materials.remove") }, icon("close"));
       remove.disabled = busy || !!pending;
       remove.addEventListener("click", function () { materials.splice(index, 1); saveMaterials(); drawMaterials(); controls(); });
-      materialList.append(h("div", null, h("span.small", null,
+      materialList.append(h("div.cv-file", null, h("span.small", null,
         ref.relativePath + " · " + ref.commit + " · sha256:" + ref.digest), remove));
     });
   }
@@ -226,8 +286,8 @@ export function createConversationController(host, t, locale = function () { ret
     if (signature === requestSignature) return;
     requestSignature = signature; clear(requests);
     rows.forEach(function (request) {
-      const card = h("section.composer-wrap", null, h("h3", null, t("conversation.nativeRequest")),
-        h("p.feed-note", null, request.method + " · " + request.turnId));
+      const card = h("section.cv-card", null, h("h3.cv-card-title", null, t("conversation.nativeRequest")),
+        h("p.cv-note", null, request.method + " · " + request.turnId));
       const params = request.params, answers = {};
       const pendingKey = ".nativePending." + request.turnId + "." + request.id;
       if (request.method === "item/tool/requestUserInput") {
@@ -239,13 +299,13 @@ export function createConversationController(host, t, locale = function () { ret
             field.addEventListener("input", function () { saved(draftKey, field.value); });
           }
           card.append(h("label", null, question.question, field));
-          if (question.options) card.append(h("p.feed-note", null, question.options.map(function (o) { return o.label + ": " + o.description; }).join(" · ")));
+          if (question.options) card.append(h("p.cv-note", null, question.options.map(function (o) { return o.label + ": " + o.description; }).join(" · ")));
           answers[question.id] = field;
         });
       } else {
         card.append(h("p", null, params.reason || params.command || t("conversation.nativeApproval")));
       }
-      const outcome = h("p.feed-note", { role: "status" });
+      const outcome = h("p.cv-note", { role: "status" });
       const buttons = [];
       function button(label, result) {
         const node = h("button.btn", { type: "button", disabled: !!facts.terminalWriter || !!saved(pendingKey) }, label);
@@ -278,8 +338,8 @@ export function createConversationController(host, t, locale = function () { ret
       });
       else if (request.method === "item/permissions/requestApproval") button(t("conversation.decline"), function () { return { permissions: {}, scope: "turn" }; });
       else if (request.method === "mcpServer/elicitation/request") {
-        card.append(h("p.feed-note", null, request.params.message || ""));
-        card.append(h("p.feed-note", null, t("conversation.nativeForm")));
+        card.append(h("p.cv-note", null, request.params.message || ""));
+        card.append(h("p.cv-note", null, t("conversation.nativeForm")));
         button(t("conversation.decline"), function () { return { action: "decline", content: null }; });
       }
       else {
@@ -295,7 +355,7 @@ export function createConversationController(host, t, locale = function () { ret
     if (signature === questionSignature) return;
     questionSignature = signature; clear(questions);
     const taskId = owner.taskId;
-    if (rows.length) questions.append(h("h3", null, t("conversation.leaderQuestions")));
+    if (rows.length) questions.append(h("h3.cv-card-title", null, t("conversation.leaderQuestions")));
     rows.forEach(function (input) {
       questions.append(inputCard(input, t, locale(), async function (original, answer, control) {
         const own = generation;
@@ -313,16 +373,17 @@ export function createConversationController(host, t, locale = function () { ret
         }
       }));
     });
-    if (facts.questionsOmitted) questions.append(h("p.feed-note", null, t("overview.moreInputs")));
+    if (facts.questionsOmitted) questions.append(h("p.cv-note", null, t("overview.moreInputs")));
   }
   function choose(id) {
     if (selected) saved(".draft", text.value);
-    generation++; selected = id; cursor = null; next = null; historyOk = false;
+    generation++; selected = id; next = null; latestItems = []; olderItems = []; historyOk = false;
     text.value = saved(".draft") || "";
     try { pending = JSON.parse(saved(".pending") || "null"); } catch { pending = null; }
     try { materials = JSON.parse(saved(".materials") || "[]"); } catch { materials = []; }
     try { modelPending = JSON.parse(saved(".modelPending") || "null"); } catch { modelPending = null; }
-    modelCatalog = null; lastModelObservation = null; clear(modelSelect); modelStatus.textContent = ""; modelResult.textContent = ""; receiptDetail.textContent = "";
+    modelCatalog = null; lastModelObservation = null; clear(modelSelect); clear(modelRows); modelRowMap = new Map(); confirmedModel = null;
+    modelLabel.textContent = t("conversation.model"); modelStatus.textContent = ""; modelResult.textContent = ""; receiptDetail.textContent = "";
     drawCommands();
     materialAlert.textContent = "";
     if (incomingMaterials) {
@@ -346,22 +407,71 @@ export function createConversationController(host, t, locale = function () { ret
     // Only refresh view state; never repeat a mutation or receipt submission.
     if (own !== generation && timer !== null) refresh();
   }
+  const GLYPHS = { commandExecution: "terminal", fileChange: "file", webSearch: "search", collabAgentToolCall: "user" };
+  function itemKey(item) { return JSON.stringify([item.turnId, item.id]); }
+  function itemMeta(item) {
+    return (item.source === "yui-input" ? t("conversation.linkedInput") + " " + item.messageId : item.kind)
+      + " · " + item.turnId + (item.status ? " · " + item.status : "");
+  }
+  function activityRow(item) {
+    const parts = item.text.split(" · ");
+    return h("details.cv-activity", { title: itemMeta(item) },
+      h("summary", null, icon(GLYPHS[parts[0]] || "sparkle"), h("span.cv-act-label", null, t("conversation.activity." + parts[0], parts[0])),
+        h("span.cv-act-detail", null, parts.slice(1).join(" · "))),
+      h("pre.cv-code", null, item.text));
+  }
+  // Everything a turn did before its final reply (commentary and tool calls)
+  // folds into one collapsed line, like the Codex app's "Worked" row.
+  function processGroup(group) {
+    const counts = new Map();
+    group.forEach(function (item) {
+      const kind = item.kind === "activity" ? item.text.split(" · ")[0] : "message";
+      counts.set(kind, (counts.get(kind) || 0) + 1);
+    });
+    const parts = [...counts].filter(function (entry) { return entry[0] !== "message"; }).map(function (entry) {
+      return t("conversation.activity." + entry[0], entry[0]) + (entry[1] > 1 ? " ×" + entry[1] : "");
+    });
+    const label = t("conversation.worked") + (parts.length ? " · " + parts.join(" · ") : "");
+    return h("details.cv-activity.cv-group", { title: group.length + " · " + itemMeta(group[0]) },
+      h("summary", null, h("span.cv-act-label", null, label), icon("down", "cv-chevron")),
+      h("div.cv-group-body", null, ...group.map(function (item) {
+        return item.kind === "activity" ? activityRow(item) : h("div.cv-step", null, richText(null, item.text, t, { threshold: 1800 }));
+      })));
+  }
+  function messageNode(item) {
+    const meta = itemMeta(item);
+    if (item.kind === "user") {
+      return h("article.cv-msg.cv-user", { title: meta },
+        item.source === "yui-input" ? h("span.cv-tag", null, t("conversation.linkedInput") + " " + item.messageId) : null,
+        h("div.cv-bubble", null, richText(null, item.text, t, { threshold: 1800 })),
+        item.truncated ? h("p.cv-note", null, t("conversation.truncated")) : null);
+    }
+    const copy = h("button.cv-iconbtn", { type: "button", "aria-label": t("conversation.copy"), title: t("conversation.copy") }, icon("copy"));
+    copy.addEventListener("click", function () {
+      navigator.clipboard.writeText(item.text).then(function () { copy.title = t("conversation.copied"); });
+    });
+    return h("article.cv-msg.cv-assistant", { title: meta },
+      richText(null, item.text, t, { threshold: 1800 }),
+      item.truncated ? h("p.cv-note", null, t("conversation.truncated")) : null,
+      h("div.cv-actions", null, copy));
+  }
+  function allItems() {
+    const seen = new Set();
+    return latestItems.concat(olderItems).filter(function (item) {
+      const k = itemKey(item);
+      if (seen.has(k)) return false;
+      seen.add(k); return true;
+    });
+  }
   function renderItems(items) {
     const nodes = [], updated = new Map();
-    items.slice().reverse().forEach(function (item) {
-      const key = JSON.stringify([item.turnId, item.id]), signature = JSON.stringify(item);
+    function place(key, signature, make, keepOpen) {
       const previous = rendered.get(key);
       let node = previous && previous.signature === signature ? previous.node : null;
       if (!node) {
-        const content = richText(null, item.text, t, { threshold: 1800 });
-        const meta = (item.source === "yui-input" ? t("conversation.linkedInput") + " " + item.messageId : item.kind)
-          + " · " + item.turnId + (item.status ? " · " + item.status : "");
-        node = item.kind === "activity" ? h("details", null, h("summary", null, meta), content)
-          : h("article.msg.from-" + (item.kind === "user" ? "user" : "role"), null,
-            h("div.msg-main", null, h("header.msg-head", null, meta), h("div.msg-bubble", null, content),
-              item.truncated ? h("p.feed-note", null, t("conversation.truncated")) : null));
+        node = make();
         if (previous) {
-          if (item.kind === "activity") node.open = previous.node.open;
+          if (keepOpen) node.open = previous.node.open;
           const oldProse = previous.node.querySelectorAll(".prose-block");
           node.querySelectorAll(".prose-block").forEach(function (prose, index) {
             if (oldProse[index] && !oldProse[index].classList.contains("is-collapsed")
@@ -370,9 +480,33 @@ export function createConversationController(host, t, locale = function () { ret
         }
       }
       updated.set(key, { signature: signature, node: node }); nodes.push(node);
-    });
+    }
+    const chronological = items.slice().reverse();
+    let index = 0;
+    while (index < chronological.length) {
+      let end = index;
+      while (end < chronological.length && chronological[end].turnId === chronological[index].turnId) end++;
+      const segment = chronological.slice(index, end);
+      index = end;
+      const last = segment[segment.length - 1];
+      const final = last.kind === "assistant" ? last : null;
+      const process = segment.filter(function (item) { return item.kind !== "user" && item !== final; });
+      let emitted = false;
+      segment.forEach(function (item) {
+        if (item.kind === "user" || item === final) {
+          place(itemKey(item), JSON.stringify(item), function () { return messageNode(item); }, false);
+        } else if (!emitted) {
+          emitted = true;
+          if (process.length === 1 && process[0].kind === "activity") {
+            place(itemKey(process[0]), JSON.stringify(process[0]), function () { return activityRow(process[0]); }, true);
+          } else {
+            place("turn:" + segment[0].turnId, JSON.stringify(process), function () { return processGroup(process); }, true);
+          }
+        }
+      });
+    }
     rendered = updated;
-    if (!nodes.length) nodes.push(h("p.feed-note", null, t("conversation.empty")));
+    if (!nodes.length) nodes.push(h("p.cv-note", null, t("conversation.empty")));
     if (feed.children.length !== nodes.length || nodes.some(function (n, i) { return feed.children[i] !== n; })) {
       feed.replaceChildren(...nodes);
     }
@@ -387,11 +521,22 @@ export function createConversationController(host, t, locale = function () { ret
     select.value = selected || "";
     moreSessions.hidden = !facts.nextOffset;
   }
-  async function refresh() {
+  async function refresh(older) {
     if (!owner || busy || host.hidden || host.closest("[hidden]") || document.hidden) return;
+    if (older && (!next || !selected || !facts || !historyOk)) return;
     busy = true; controls();
     let own = generation;
     try {
+      if (older) {
+        const earlier = await requestJson(url({ session: selected, cursor: next }));
+        if (own !== generation) return;
+        olderItems = olderItems.concat(earlier.items); next = earlier.nextCursor;
+        const before = feed.scrollHeight, top = feed.scrollTop;
+        renderItems(allItems());
+        feed.scrollTop = top + (feed.scrollHeight - before);
+        syncJump();
+        return;
+      }
       const result = await requestJson(url());
       if (own !== generation) return;
       const previous = facts;
@@ -412,27 +557,30 @@ export function createConversationController(host, t, locale = function () { ret
       // Preserve a historical choice even if it is outside the newest page.
       drawSessions(facts.sessions, false);
       renderQuestions();
-      const page = await requestJson(url({ session: selected, cursor: cursor }));
+      const page = await requestJson(url({ session: selected }));
       if (own !== generation) return;
-      historyOk = true; next = page.nextCursor;
+      historyOk = true; latestItems = page.items;
+      if (!olderItems.length) next = page.nextCursor;
       const turn = selected === facts.currentSessionId ? facts.turn : null;
       let state = page.status === "waiting-user" ? "waiting" : page.status === "active" ? "active"
         : page.status === "systemError" ? "failed" : page.status === "idle" ? "waiting" : "unknown";
       const session = facts.sessions.find(function (s) { return s.nativeSessionId === selected; });
       if (session && session.status === "ended") state = session.endReason === "failed" ? "failed" : "ended";
       if (turn && turn.status === "delivery-unknown") state = "unknown";
-      status.textContent = t("conversation." + state) + " · " + page.observedAt;
-      if (page.live === "unavailable" && !cursor) status.textContent += " · " + t("conversation.liveUnavailable");
+      status.textContent = t("conversation." + state);
+      status.title = page.observedAt + " · " + t(facts.terminalWriter ? "conversation.terminalWriter" : "conversation.structuredWriter");
+      status.className = "cv-status is-" + state;
+      if (page.live === "unavailable") status.textContent += " · " + t("conversation.liveUnavailable");
       if (page.linkedInputsOmitted) status.textContent += " · " + t("conversation.linkedOmitted");
       if (page.nativeRequestsOmitted) status.textContent += " · " + t("conversation.nativeOmitted");
-      status.textContent += " · " + t(facts.terminalWriter ? "conversation.terminalWriter" : "conversation.structuredWriter");
       renderRequests(page.nativeRequests || []);
       showModel(page.runConfiguration);
       identity.textContent = (owner.taskId || "Global") + " / " + owner.roleName + " / " + selected
         + (turn ? " / " + (turn.nativeTurnId || turn.attemptId) + (turn.runId ? " / " + turn.runId : "") : "");
       const scroll = feed.scrollTop, atEnd = feed.scrollHeight - feed.clientHeight - scroll < 40;
-      renderItems(page.items);
+      renderItems(allItems());
       feed.scrollTop = atEnd ? feed.scrollHeight : scroll;
+      syncJump();
     } catch (error) {
       if (own === generation) { historyOk = false; status.textContent = t("conversation.disconnected") + " · " + error.message; }
     } finally { finish(own); }
@@ -542,8 +690,10 @@ export function createConversationController(host, t, locale = function () { ret
   });
   select.addEventListener("change", function () { choose(select.value); refresh(); });
   current.addEventListener("click", function () { if (facts) { choose(facts.currentSessionId); refresh(); } });
-  older.addEventListener("click", function () { cursor = next; refresh(); });
-  latest.addEventListener("click", function () { cursor = null; refresh(); });
+  older.addEventListener("click", function () { refresh(true); });
+  latest.addEventListener("click", function () {
+    refresh().then(function () { feed.scrollTop = feed.scrollHeight; syncJump(); });
+  });
   send.addEventListener("click", function () { submit(false); });
   stop.addEventListener("click", function () { submit(true); });
   check.addEventListener("click", inspectReceipt);
@@ -584,7 +734,7 @@ export function createConversationController(host, t, locale = function () { ret
       return { ...owner, ...(selected ? { nativeSessionId: selected } : {}) };
     },
     reconnect: function () {
-      if (!timer) timer = window.setInterval(function () { if (!cursor) refresh(); }, 2000);
+      if (!timer) timer = window.setInterval(function () { refresh(); }, 2000);
       refresh();
     },
     open: function (target, options) {
@@ -593,9 +743,10 @@ export function createConversationController(host, t, locale = function () { ret
       if (JSON.stringify(target) !== JSON.stringify(owner) || options && options.current) {
         if (selected) saved(".draft", text.value);
         generation++; owner = target; selected = null; facts = null; pending = null; clear(select); clear(feed);
-        cursor = null; next = null; historyOk = false; rendered.clear();
+        next = null; latestItems = []; olderItems = []; historyOk = false; rendered.clear();
         text.value = ""; receipt.textContent = ""; identity.textContent = ""; controls();
-        modelPending = null; modelCatalog = null; clear(modelSelect); modelStatus.textContent = "";
+        modelPending = null; modelCatalog = null; clear(modelSelect); clear(modelRows); modelRowMap = new Map(); confirmedModel = null;
+        modelLabel.textContent = t("conversation.model"); modelStatus.textContent = "";
         modelResult.textContent = "";
         receiptDetail.textContent = ""; draftStatus.textContent = ""; drawCommands();
         materials = []; incomingMaterials = null; clear(materialList); materialAlert.textContent = "";
@@ -603,7 +754,7 @@ export function createConversationController(host, t, locale = function () { ret
         clear(questions); questionSignature = "";
       }
       if (options && options.materials) incomingMaterials = options.materials;
-      if (!timer) timer = window.setInterval(function () { if (!cursor) refresh(); }, 2000);
+      if (!timer) timer = window.setInterval(function () { refresh(); }, 2000);
       refresh();
     },
     close: function () { if (timer) window.clearInterval(timer); timer = null; generation++; }