@zq-silk/yui 1.0.0 → 1.1.0

package/dist/web/assets/client/app.js

@@ -30,6 +30,12 @@ const elements = {
   topbar: document.querySelector(".topbar"),
   detailBack: document.querySelector("#detail-back"),
   detailTabs: document.querySelector("#detail-tabs"),
+  conversationToggle: document.querySelector("#conversation-toggle"),
+  conversationPanel: document.querySelector("#conversation-panel"),
+  conversationContent: document.querySelector("#conversation-content"),
+  conversationClose: document.querySelector("#conversation-close"),
+  conversationSwap: document.querySelector("#conversation-swap"),
+  paneDivider: document.querySelector("#pane-divider"),
   pageTitle: document.querySelector("#page-title"),
   toast: document.querySelector("#toast"),
   lastSync: document.querySelector("#last-sync"),
@@ -68,6 +74,10 @@ const VALID_ATTENTION = ["openInputs", "pendingOperations", "unknownOperations",
 let terminalSession = null;
 let terminalStateKey = "terminal.closed";
 const submittedRequests = new Set();
+let conversationVisible = true;
+let paneWidth = Number(localStorage.getItem("yui.conversation.width")) || 400;
+const paneSide = localStorage.getItem("yui.conversation.side") === "left" ? "left" : "right";
+document.body.classList.toggle("pane-left", paneSide === "left");
 
 const i18n = createI18n(elements.locale);
 createThemeController(elements.theme);
@@ -146,6 +156,7 @@ function syncUrlFromState(options) {
 
 function detailActions() {
   return {
+    conversationHost: elements.conversationContent,
     answerInput: answerInput,
     openTerminal: openTerminal,
     inspect: inspectRecord,
@@ -190,6 +201,33 @@ function setDetailActive(active) {
       elements.pageTitle.dataset.i18n = "page.title";
     }
   }
+  updateConversationLayout();
+}
+
+function maxPaneWidth() {
+  return Math.max(280, Math.min(640,
+    window.innerWidth - elements.tasks.closest(".sidebar").offsetWidth - 460 - 8));
+}
+
+function setPaneWidth(width, persist, keepPreference) {
+  const effectiveWidth = Math.max(280, Math.min(maxPaneWidth(), width));
+  if (!keepPreference) paneWidth = effectiveWidth;
+  document.documentElement.style.setProperty("--pane-w", effectiveWidth + "px");
+  elements.paneDivider.setAttribute("aria-valuemax", String(maxPaneWidth()));
+  elements.paneDivider.setAttribute("aria-valuenow", String(effectiveWidth));
+  if (persist) localStorage.setItem("yui.conversation.width", String(effectiveWidth));
+}
+
+function updateConversationLayout() {
+  const visible = !!state.selected && conversationVisible && !terminalPanelOpen();
+  document.body.classList.toggle("conversation-active", visible);
+  elements.conversationPanel.hidden = !visible;
+  elements.paneDivider.hidden = !visible;
+  elements.conversationToggle.hidden = !state.selected || terminalPanelOpen();
+  elements.conversationToggle.setAttribute("aria-expanded", String(visible));
+  elements.conversationToggle.textContent = i18n.t(visible ? "conversation.hide" : "conversation.show");
+  elements.conversationToggle.setAttribute("aria-label", elements.conversationToggle.textContent);
+  setPaneWidth(paneWidth, false, true);
 }
 
 function showOverview() {
@@ -237,12 +275,17 @@ function renderCurrentDetail(force) {
     if (elements.detail.dataset.taskId === state.detail.task.id
       && (elements.detail.querySelector('[data-unsent="true"]')
         || elements.detail.querySelector('[data-reading="true"]')
-        || elements.detail.contains(document.activeElement))) return;
+        || elements.detail.contains(document.activeElement)
+        || elements.conversationContent.querySelector('[data-unsent="true"]')
+        || elements.conversationContent.contains(document.activeElement))) return;
     const key = i18n.getLocale() + "|" + state.detailKey
       + "|" + runtimeSignatureOf(state.detail);
     if (!force && key === renderedDetailKey) return;
     const openSections = Array.from(elements.detail.querySelectorAll("details[data-view-key][open]"))
       .map(element => element.dataset.viewKey);
+    const oldFeed = elements.conversationContent.querySelector(".conversation-feed");
+    const feedScroll = oldFeed ? oldFeed.scrollTop : 0;
+    const atFeedEnd = oldFeed && oldFeed.scrollHeight - oldFeed.clientHeight - feedScroll < 32;
     renderTaskDetail(
       elements.detail,
       state.detail,
@@ -253,6 +296,8 @@ function renderCurrentDetail(force) {
     elements.detail.querySelectorAll("details[data-view-key]").forEach(element => {
       element.open = openSections.includes(element.dataset.viewKey);
     });
+    const newFeed = elements.conversationContent.querySelector(".conversation-feed");
+    if (newFeed) newFeed.scrollTop = atFeedEnd ? newFeed.scrollHeight : feedScroll;
     renderedDetailKey = key;
   } else if (!state.selected) {
     renderedDetailKey = null;
@@ -342,6 +387,7 @@ function clearSelection() {
   state.selected = null;
   state.detail = null;
   setDetailActive(false);
+  elements.conversationContent.replaceChildren();
   syncUrlFromState({ replace: !urlTaskId() });
   showOverview();
   const savedTaskScroll = elements.tasks.scrollTop;
@@ -386,12 +432,16 @@ async function submitMutation(key, path, body) {
   }
 }
 
-async function loadTaskDetail(taskId, showLoading) {
-  if (showLoading) {
+async function loadTaskDetail(taskId, navigate) {
+  // navigate marks an explicit user navigation (task selection, deep link,
+  // back/forward). Only a navigation may move the viewport; the 5s background
+  // refresh (navigate=false) preserves the current scroll, so a quiet tick
+  // never yanks the page back to the URL section.
+  if (navigate) {
     renderLoading(elements.detail, i18n.t, "loading.detail");
     elements.mainCol.scrollTop = 0;
   }
-  const savedScrollTop = showLoading ? 0 : elements.mainCol.scrollTop;
+  const savedScrollTop = elements.mainCol.scrollTop;
   const base = "/api/tasks/" + encodeURIComponent(taskId);
   // Rendering consumes the current snapshot, not event pages. Reconnect uses
   // this same read; the independent delta API retains its fixed-bound contract.
@@ -428,11 +478,17 @@ async function loadTaskDetail(taskId, showLoading) {
   // Reveal the tab bar before measuring/scroll so anchors land correctly.
   setDetailActive(true);
   updateStickyOffsets();
-  // A section in the URL wins over the preserved scroll offset.
-  const section = readQuery().get("section");
-  const anchor = section ? elements.detail.querySelector("#detail-" + section) : null;
-  if (anchor) {
-    anchor.scrollIntoView({ block: "start" });
+  // Only an explicit navigation may reposition the viewport. On navigation a
+  // section in the URL wins over the top; a background refresh keeps the reader
+  // where they are so the page does not jump on every poll.
+  if (navigate) {
+    const section = readQuery().get("section");
+    const anchor = section ? elements.detail.querySelector("#detail-" + section) : null;
+    if (anchor) {
+      anchor.scrollIntoView({ block: "start" });
+    } else {
+      elements.mainCol.scrollTop = savedScrollTop;
+    }
   } else {
     elements.mainCol.scrollTop = savedScrollTop;
   }
@@ -477,6 +533,8 @@ async function selectTask(taskId) {
   }
   state.selected = taskId;
   state.detail = null;
+  conversationVisible = true;
+  elements.conversationContent.replaceChildren();
   renderedDetailKey = null;
   // When the selection is driven by the URL (initial load or popstate), the
   // URL already reflects the task id, so replace instead of pushing a
@@ -496,12 +554,14 @@ async function selectTask(taskId) {
 }
 
 function canLeaveDetail() {
-  return !elements.detail.querySelector('[data-unsent="true"]') || window.confirm(
+  return !(elements.detail.querySelector('[data-unsent="true"]')
+    || elements.conversationContent.querySelector('[data-unsent="true"]')) || window.confirm(
     i18n.getLocale().startsWith("zh") ? "此任务有未提交或结果尚不确定的输入。仍要离开？"
       : "This Task has unsent input or an unresolved submission. Leave anyway?");
 }
 window.addEventListener("beforeunload", event => {
-  if (!elements.detail.querySelector('[data-unsent="true"]')) return;
+  if (!elements.detail.querySelector('[data-unsent="true"]')
+    && !elements.conversationContent.querySelector('[data-unsent="true"]')) return;
   event.preventDefault();
   event.returnValue = "";
 });
@@ -621,6 +681,7 @@ function openTerminalPanel() {
   elements.terminalPanel.hidden = false;
   elements.terminalPanel.setAttribute("aria-hidden", "false");
   document.body.classList.add("terminal-active");
+  updateConversationLayout();
 }
 
 function closeTerminalPanel() {
@@ -628,6 +689,7 @@ function closeTerminalPanel() {
   document.body.classList.remove("terminal-active");
   elements.terminalPanel.setAttribute("aria-hidden", "true");
   elements.terminalPanel.hidden = true;
+  updateConversationLayout();
 }
 
 function disposeTerminal() {
@@ -856,6 +918,52 @@ globalForm.addEventListener("submit", async event => {
 });
 elements.detailBack.addEventListener("click", clearSelection);
 elements.terminalClose.addEventListener("click", closeTerminalPanel);
+elements.conversationToggle.addEventListener("click", function () {
+  conversationVisible = !conversationVisible;
+  updateConversationLayout();
+});
+elements.conversationClose.addEventListener("click", function () {
+  conversationVisible = false;
+  updateConversationLayout();
+  elements.conversationToggle.focus();
+});
+elements.conversationSwap.addEventListener("click", function () {
+  const left = !document.body.classList.contains("pane-left");
+  document.body.classList.toggle("pane-left", left);
+  localStorage.setItem("yui.conversation.side", left ? "left" : "right");
+});
+let resizingPane = false;
+elements.paneDivider.addEventListener("pointerdown", function (event) {
+  if (event.button !== 0 || elements.paneDivider.hidden || window.innerWidth <= 900) return;
+  resizingPane = true;
+  elements.paneDivider.setPointerCapture(event.pointerId);
+  document.body.classList.add("pane-resizing");
+  event.preventDefault();
+});
+elements.paneDivider.addEventListener("pointermove", function (event) {
+  if (!resizingPane) return;
+  const left = document.body.classList.contains("pane-left");
+  const width = left ? event.clientX - elements.tasks.closest(".sidebar").offsetWidth
+    : window.innerWidth - event.clientX;
+  setPaneWidth(width - 4, false);
+});
+function finishPaneResize() {
+  if (!resizingPane) return;
+  resizingPane = false;
+  document.body.classList.remove("pane-resizing");
+  localStorage.setItem("yui.conversation.width", String(paneWidth));
+}
+elements.paneDivider.addEventListener("pointerup", finishPaneResize);
+elements.paneDivider.addEventListener("pointercancel", finishPaneResize);
+elements.paneDivider.addEventListener("keydown", function (event) {
+  const left = document.body.classList.contains("pane-left");
+  const delta = left ? (event.key === "ArrowRight" ? 20 : event.key === "ArrowLeft" ? -20 : 0)
+    : (event.key === "ArrowLeft" ? 20 : event.key === "ArrowRight" ? -20 : 0);
+  if (!delta && !["Home", "End"].includes(event.key)) return;
+  event.preventDefault();
+  setPaneWidth(event.key === "Home" ? 280 : event.key === "End" ? maxPaneWidth() : paneWidth + delta, true);
+});
+window.addEventListener("resize", function () { setPaneWidth(paneWidth, false, true); });
 document.addEventListener("keydown", function (event) {
   if (globalDialog.open) return;
   const active = document.activeElement;
@@ -864,6 +972,12 @@ document.addEventListener("keydown", function (event) {
     closeTerminalPanel();
     return;
   }
+  if (event.key === "Escape" && document.body.classList.contains("conversation-active")) {
+    conversationVisible = false;
+    updateConversationLayout();
+    elements.conversationToggle.focus();
+    return;
+  }
   if (event.key === "Escape" && state.selected) {
     clearSelection();
     return;
@@ -901,9 +1015,14 @@ function applyStateFromUrl() {
   if (taskId) {
     selectTask(taskId);
   } else {
+    if (state.selected && !canLeaveDetail()) {
+      syncUrlFromState({ replace: true });
+      return;
+    }
     state.selected = null;
     state.detail = null;
     setDetailActive(false);
+    elements.conversationContent.replaceChildren();
     showOverview();
   }
 }
@@ -916,6 +1035,7 @@ window.addEventListener("popstate", function () {
 i18n.subscribe(function () {
   renderDynamicContent();
   if (terminalSession) setTerminalState(terminalStateKey);
+  updateConversationLayout();
   if (!state.selected && elements.pageTitle) elements.pageTitle.textContent = i18n.t("page.title");
 });
 showOverview();

package/dist/web/assets/client/i18n.js

@@ -34,6 +34,15 @@ const messages = {
     "sync.label": "LAST SYNC",
     "actions.openSession": "Open Session",
     "actions.operator": "Operator session",
+    "conversation.title": "Task discussion",
+    "conversation.source": "Recorded Task messages · not a Session transcript",
+    "conversation.show": "Discussion",
+    "conversation.hide": "Hide discussion",
+    "conversation.swap": "Move discussion to the other side",
+    "conversation.resize": "Resize task discussion",
+    "tabs.workResults": "Work & results",
+    "tabs.executionReviews": "Execution & reviews",
+    "tabs.historyMessages": "History & messages",
     "actions.refresh": "Refresh",
     "actions.showLess": "Show less",
     "actions.showMore": "Show more",
@@ -458,6 +467,15 @@ const messages = {
     "sync.label": "最近同步",
     "actions.openSession": "打开会话",
     "actions.operator": "Operator 会话",
+    "conversation.title": "任务讨论",
+    "conversation.source": "已记录的 Task 消息 · 非 Session 完整记录",
+    "conversation.show": "讨论",
+    "conversation.hide": "收起讨论",
+    "conversation.swap": "将讨论移至另一侧",
+    "conversation.resize": "调整讨论栏宽度",
+    "tabs.workResults": "工作与结果",
+    "tabs.executionReviews": "执行与审阅",
+    "tabs.historyMessages": "历史与消息",
     "actions.refresh": "刷新",
     "actions.showLess": "收起",
     "actions.showMore": "展开更多",

package/dist/web/assets/client/taskSummary.js

@@ -99,10 +99,15 @@ export function renderTaskSummary(container, data, t, locale, actions, recordCar
   const progress = block(say("Task progress", "任务进展"), "progress");
   const briefEntry = entries("task-brief")[0];
   const brief = available("task-brief")[0];
+  const working = data.task.status === "draft" || data.task.status === "active";
   if (data.task.completionSummary) progress.append(richText(say("Recorded completion", "已记录完成"), data.task.completionSummary, t));
   if (brief) {
-    progress.append(richText(say("Current focus", "当前工作"), brief.currentFocus, t));
-    progress.append(richText(say("Leader's progress report", "Leader 进展摘要"), brief.leaderSummary, t));
+    progress.append(richText(working
+      ? say("Current focus", "当前工作")
+      : say("Last working focus", "结束前的工作重点"), brief.currentFocus, t));
+    progress.append(richText(working
+      ? say("Leader's progress report", "Leader 进展摘要")
+      : say("Last working report", "结束前的进展摘要"), brief.leaderSummary, t));
     progress.append(node("small", "muted", say("Brief updated: ", "Brief 更新：") + formatDateTime(brief.updatedAt, locale)));
   } else if (briefEntry) progress.append(recordCard(briefEntry));
   else progress.append(node("p", "muted", say("No progress summary in this read; no percentage or ETA is inferred.",

package/dist/web/assets/client/taskSurface.js

@@ -18,9 +18,10 @@ export function renderTaskSurface(container, data, t, locale, actions) {
   const summary = node("div", "section-body");
   summary.append(node("span", "detail-kicker", task.id), node("h2", "detail-title", task.title), pill(t, "status", task.status));
   renderTaskSummary(summary, data, t, locale, actions, recordCard);
-  const discuss = node("details", "record-card");
+  const discuss = node(actions.conversationHost ? "section" : "details",
+    actions.conversationHost ? "conversation-compose record-card" : "record-card");
   discuss.dataset.viewKey = "discussion";
-  discuss.append(node("summary", "", say("Discuss this Task", "讨论此任务")));
+  discuss.append(node(actions.conversationHost ? "h3" : "summary", "", say("Discuss this Task", "讨论此任务")));
   const conversation = node("button", "record-open", say("View Leader Session (read-only)", "查看 Leader Session（只读）"));
   conversation.type = "button";
   // A Draft's planning Session is a real Leader Session, so it is viewable once it
@@ -96,7 +97,43 @@ export function renderTaskSurface(container, data, t, locale, actions) {
     }
   });
   discuss.append(chat);
-  summary.append(discuss);
+  if (actions.conversationHost) {
+    const feed = node("div", "conversation-feed");
+    feed.setAttribute("aria-label", say("Recorded Task messages", "已记录的 Task 消息"));
+    const messages = records("task-message");
+    messages.forEach((entry) => {
+      if (entry.omitted) {
+        feed.append(recordCard(entry));
+        return;
+      }
+      const value = entry.value;
+      const item = node("article", "conversation-item");
+      if (value.author?.type === "user") item.classList.add("is-user");
+      const head = node("div", "conversation-item-head");
+      const author = value.author?.roleName || t("author." + (value.author?.type || "system"));
+      head.append(node("strong", "", author));
+      if (value.createdAt) {
+        const when = node("time", "", new Intl.DateTimeFormat(locale, {
+          month: "short", day: "numeric", hour: "2-digit", minute: "2-digit"
+        }).format(new Date(value.createdAt)));
+        when.dateTime = value.createdAt;
+        head.append(when);
+      }
+      item.append(head, richText(null, value.body || "", t));
+      feed.append(item);
+    });
+    if (!messages.length) feed.append(node("p", "muted", core.omitted.records
+      ? say("Compact read omits some messages. Open History & messages for source references.",
+        "紧凑读取省略了部分消息；可在「历史与消息」查看来源引用。")
+      : say("No recorded Task messages yet.", "尚无已记录的 Task 消息。")));
+    if (core.omitted.records && messages.length) feed.append(node("p", "muted",
+      say("Compact read may omit older messages; see History & messages for source references.",
+        "紧凑读取可能省略较早消息；可在「历史与消息」查看来源引用。")));
+    actions.conversationHost.replaceChildren(feed, discuss);
+    actions.conversationHost.dataset.taskId = task.id;
+  } else {
+    summary.append(discuss);
+  }
   // decision-3 three-action input control (queue / steer / interrupt). This is
   // the same application-layer path the CLI drives; the Web surface adds no
   // fourth action and no auto-fallback. Steer/interrupt name an exact current
@@ -378,10 +415,14 @@ export function renderTaskSurface(container, data, t, locale, actions) {
     scaffold.append(anchorSection(id, null, folded));
     return body;
   }
-  const focus = section("detail-focus", say("Goal and current focus", "目标与当前关注"), records("task-brief"));
+  const working = task.status === "active" || task.status === "draft";
+  const focus = section("detail-focus", working
+    ? say("Goal and current focus", "目标与当前关注")
+    : say("Goal and last working focus", "目标与结束前的工作重点"), records("task-brief"));
   const brief = values("task-brief")[0];
   if (brief) {
-    focus.prepend(richText(t("detail.focus"), brief.currentFocus, t));
+    focus.prepend(richText(working
+      ? t("detail.focus") : say("Last working focus", "结束前的工作重点"), brief.currentFocus, t));
     if (brief.boundaries.length) focus.append(richText(say("Boundaries", "边界"), brief.boundaries.join("\\n"), t));
   }
   section("detail-work", say("Responsibilities and acceptance", "工作责任与验收"), records("work-item"));
@@ -430,6 +471,14 @@ export function renderTaskSurface(container, data, t, locale, actions) {
   execution.append(raw);
   scaffold.append(anchorSection("detail-exec", sectionHead(t("detail.execution")), execution));
   section("detail-operations", say("Original operation facts (no automatic retry)", "原始操作事实（不自动重试）"), records("job"));
+  // Four reading groups; the source sections keep their stable deep-link IDs.
+  const readingOrder = ["detail-top", "detail-focus", "detail-work", "detail-results",
+    "detail-exec", "detail-reviews", "detail-roles", "detail-history",
+    "detail-messages", "detail-operations"];
+  readingOrder.forEach((id) => {
+    const target = scaffold.querySelector("#" + id);
+    if (target) scaffold.append(target);
+  });
   const refs = node("details", "record-card");
   refs.append(node("summary", "", say("Context cursor and omitted references", "Context 游标与省略引用")));
   refs.append(node("pre", "surface-json", JSON.stringify({

package/dist/web/assets/client/view.js

@@ -478,11 +478,16 @@ export function renderTaskDetail(detail, data, t, locale, actions) {
   const focusBody = node("div", "section-body");
   if (data.brief) {
     const focusCard = node("article", "record-card");
-    focusCard.append(richText(t("detail.focus"), data.brief.currentFocus || data.brief.objective, t));
+    const working = task.status === "active" || task.status === "draft";
+    focusCard.append(richText(working
+      ? t("detail.focus") : (locale.startsWith("zh") ? "结束前的工作重点" : "Last working focus"),
+      data.brief.currentFocus || data.brief.objective, t));
     if (data.brief.technicalApproach) {
       focusCard.append(richText(t("detail.technicalApproach"), data.brief.technicalApproach, t, { muted: true }));
     }
-    if (data.brief.leaderSummary) focusCard.append(richText(t("detail.leaderSummary"), data.brief.leaderSummary, t, { muted: true }));
+    if (data.brief.leaderSummary) focusCard.append(richText(working
+      ? t("detail.leaderSummary") : (locale.startsWith("zh") ? "结束前的进展摘要" : "Last working report"),
+    data.brief.leaderSummary, t, { muted: true }));
     focusBody.append(focusCard);
   } else {
     focusBody.append(emptyRow(t, "empty.brief"));

package/dist/web/assets/shell.js

@@ -75,30 +75,40 @@ export const DASHBOARD_HTML = `<!doctype html>
           </div>
         </div>
         <div class="topbar-actions">
+          <button id="conversation-toggle" class="operator-open" type="button" aria-controls="conversation-panel" aria-expanded="false" data-i18n="conversation.show" hidden>Task discussion</button>
           <div class="clock">
             <span data-i18n="sync.label">Last sync</span>
             <time id="last-sync">—</time>
           </div>
-          <button id="operator-terminal" class="operator-open" type="button">
+          <button id="operator-terminal" class="operator-open" type="button" aria-label="Operator session" data-i18n-aria-label="actions.operator">
             <span class="operator-title" data-i18n="actions.operator">Operator session</span>
             <span class="operator-shortcuts" aria-hidden="true"><kbd>O</kbd></span>
           </button>
-          <button id="refresh" class="refresh" type="button" title="Refresh tasks"><span data-i18n="actions.refresh">Refresh</span> <kbd>R</kbd></button>
+          <button id="refresh" class="refresh" type="button" title="Refresh tasks" aria-label="Refresh" data-i18n-aria-label="actions.refresh"><span data-i18n="actions.refresh">Refresh</span> <kbd>R</kbd></button>
         </div>
       </header>
       <nav id="detail-tabs" class="detail-tabs" aria-label="Task sections" data-i18n-aria-label="tabs.label" hidden>
-        <button class="tab" type="button" data-target="detail-top" data-i18n="tabs.summary">Summary</button>
-        <button class="tab" type="button" data-target="detail-focus" data-i18n="tabs.focus">Focus</button>
-        <button class="tab" type="button" data-target="detail-results" data-i18n="tabs.results">Results</button>
-        <button class="tab" type="button" data-target="detail-work" data-i18n="tabs.work">Work items</button>
-        <button class="tab" type="button" data-target="detail-exec" data-i18n="tabs.exec">AgentRuns</button>
-        <button class="tab" type="button" data-target="detail-reviews" data-i18n="tabs.reviews">Reviews</button>
-        <button class="tab" type="button" data-target="detail-roles" data-i18n="tabs.roles">Roles</button>
-        <button class="tab" type="button" data-target="detail-history" data-i18n="tabs.history">History</button>
-        <button class="tab" type="button" data-target="detail-messages" data-i18n="tabs.messages">Messages</button>
+        <button class="tab" type="button" data-target="detail-top" data-i18n="tabs.summary">Overview</button>
+        <button class="tab" type="button" data-target="detail-work" data-i18n="tabs.workResults">Work &amp; results</button>
+        <button class="tab" type="button" data-target="detail-exec" data-i18n="tabs.executionReviews">Execution &amp; reviews</button>
+        <button class="tab" type="button" data-target="detail-history" data-i18n="tabs.historyMessages">History &amp; messages</button>
       </nav>
       <main id="detail" class="detail" aria-labelledby="page-title" tabindex="-1"></main>
     </div>
+    <div id="pane-divider" class="pane-divider" role="separator" tabindex="0" aria-label="Resize task discussion" aria-orientation="vertical" aria-valuemin="280" aria-valuemax="640" aria-valuenow="400" data-i18n-aria-label="conversation.resize" hidden><span aria-hidden="true"></span></div>
+    <aside id="conversation-panel" class="conversation-panel" aria-labelledby="conversation-title" hidden>
+      <header class="conversation-head">
+        <div>
+          <span class="conversation-eyebrow" data-i18n="conversation.source">Recorded Task messages · not a Session transcript</span>
+          <h2 id="conversation-title" data-i18n="conversation.title">Task discussion</h2>
+        </div>
+        <div class="conversation-head-actions">
+          <button id="conversation-swap" class="pane-action" type="button" title="Move discussion to the other side" data-i18n-aria-label="conversation.swap" aria-label="Move discussion to the other side">⇄</button>
+          <button id="conversation-close" class="pane-action" type="button" title="Hide discussion" data-i18n-aria-label="conversation.hide" aria-label="Hide discussion">×</button>
+        </div>
+      </header>
+      <div id="conversation-content" class="conversation-content task-surface"></div>
+    </aside>
     <dialog id="global-input-dialog" class="global-input-dialog" aria-labelledby="global-input-title">
       <h2 id="global-input-title">Global Role input · 全局 Role 消息</h2>
       <p class="muted">Queue is the default. A cancel request does not prove the Turn stopped.<br>默认排队；取消请求不代表执行已停止。</p>

package/dist/web/assets/styles/layout.js

@@ -6,10 +6,13 @@ export const LAYOUT_STYLES = `
 *{box-sizing:border-box}
 html{min-width:320px;font-family:var(--font-body)}
 body{margin:0;min-width:320px;height:100vh;overflow:hidden;font-size:14px}
-.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0;grid-template-rows:100vh;height:100vh;transition:grid-template-columns var(--motion-slow) var(--ease)}
-body.terminal-active .app-shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--terminal-w)}
+.app-shell{display:grid;grid-template-areas:"sidebar main divider pane";grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 0;grid-template-rows:100vh;height:100vh;transition:grid-template-columns var(--motion-slow) var(--ease)}
+body.conversation-active .app-shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr) 8px var(--pane-w)}
+body.conversation-active.pane-left .app-shell{grid-template-areas:"sidebar pane divider main";grid-template-columns:var(--sidebar-w) var(--pane-w) 8px minmax(0,1fr)}
+body.terminal-active .app-shell,body.terminal-active.pane-left .app-shell{grid-template-areas:"sidebar main divider pane";grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0 var(--terminal-w)}
+body.pane-resizing .app-shell{transition:none}
 /* Sidebar = persistent work index */
-.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;padding:16px 14px 14px}
+.sidebar{grid-area:sidebar;display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;padding:16px 14px 14px}
 .sidebar-brand{display:flex;gap:10px;align-items:center;flex:none;margin-bottom:14px}
 .brand-text{display:grid;gap:3px;min-width:0;flex:1}
 .sidebar .search{flex:none;margin-bottom:10px}
@@ -27,7 +30,7 @@ body.terminal-active .app-shell{grid-template-columns:var(--sidebar-w) minmax(0,
 .catalog-pager button:disabled{opacity:.45;cursor:default}
 #catalog-attention-reset{grid-column:1/-1}
 /* Main column = top bar + optional section nav + reading surface */
-.main-col{display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;overflow-y:auto;scrollbar-gutter:stable}
+.main-col{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;height:100vh;overflow-y:auto;scrollbar-gutter:stable}
 .topbar{position:sticky;top:0;z-index:30;flex:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px max(var(--page-space),calc((100% - 1100px) / 2));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
 .topbar-leading{display:flex;align-items:center;gap:14px;min-width:0}
 .breadcrumb{display:flex;align-items:baseline;gap:8px;min-width:0}
@@ -43,8 +46,32 @@ body.detail-active .detail-tabs{display:flex}
 .detail{flex:1;min-height:0;padding:16px max(var(--page-space),calc((100% - 1100px) / 2)) 72px;min-width:0}
 .detail:focus-visible{outline:none}
 .anchor{scroll-margin-top:calc(var(--topbar-h,44px) + var(--tabs-h,38px))}
-/* Terminal panel */
-.terminal-panel{grid-column:3;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
+/* Adjustable discussion panel; the separator belongs to the task view, not Task state. */
+.pane-divider{grid-area:divider;align-self:stretch;width:8px;min-width:0;cursor:col-resize;position:relative;touch-action:none;z-index:31}
+.pane-divider[hidden]{display:none}
+.pane-divider span{position:absolute;inset:0 3px;background:var(--border-strong);transition:background var(--motion-fast)}
+.pane-divider:hover span,.pane-divider:focus-visible span,body.pane-resizing .pane-divider span{background:var(--accent)}
+.pane-divider:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.conversation-panel{grid-area:pane;min-width:0;height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.conversation-panel[hidden]{display:none}
+.conversation-head{flex:none;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px}
+.conversation-head>div:first-child{min-width:0}
+.conversation-eyebrow{display:block;font-size:10px;line-height:1.4}
+.conversation-head h2{margin:4px 0 0;font-size:16px;font-family:var(--font-display);line-height:1.25}
+.conversation-head-actions{display:flex;gap:4px;align-items:center}
+.conversation-content{display:flex;flex:1;flex-direction:column;min-height:0;padding:14px;gap:14px}
+.conversation-feed{display:flex;flex:1;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:2px 2px 12px}
+.conversation-item{flex:none;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-2);min-width:0;overflow-wrap:anywhere}
+.conversation-item.is-user{border-color:var(--accent-line);background:var(--accent-soft)}
+.conversation-item-head{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:8px}
+.conversation-item-head time{white-space:nowrap}
+.conversation-item .rich-text{font-size:13px}
+.conversation-compose{flex:none;max-height:55%;overflow-y:auto}
+.conversation-compose h3{margin:2px 0;font-size:13px}
+.conversation-compose form{display:grid;gap:9px}
+.conversation-compose textarea{min-height:76px}
+/* Native Session occupies the pane temporarily; it is not the Task message feed. */
+.terminal-panel{grid-area:pane;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
 .terminal-panel[hidden]{display:none}
 .terminal-head{flex:none;height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px}
 .terminal-head>div{display:flex;align-items:center;gap:12px;min-width:0}

package/dist/web/assets/styles/responsive.js

@@ -11,8 +11,7 @@ export const RESPONSIVE_STYLES = `
 @media(max-width:900px){
   /* Master-detail: sidebar list by default; selecting a task swaps to detail */
   body{overflow:auto}
-  .app-shell{grid-template-columns:1fr;height:auto;min-height:100vh}
-  body.terminal-active .app-shell{grid-template-columns:1fr}
+  .app-shell,body.conversation-active .app-shell,body.conversation-active.pane-left .app-shell,body.terminal-active .app-shell,body.terminal-active.pane-left .app-shell{grid-template-areas:"sidebar" "main";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:100vh}
   .sidebar{height:auto;min-height:100vh;border-right:0;border-bottom:1px solid var(--border)}
   .task-list{overflow:visible}
   .main-col{display:none;height:auto;min-height:100vh}
@@ -20,10 +19,16 @@ export const RESPONSIVE_STYLES = `
   body.detail-active .main-col{display:flex}
   body.detail-active .detail-back{display:grid}
   .detail{overflow:visible}
+  .pane-divider{display:none}
+  .conversation-panel{position:fixed;inset:0;z-index:70;height:100dvh;border-left:0}
+  .conversation-feed{min-height:0}
+  .conversation-head-actions #conversation-swap{display:none}
+  body.conversation-active .main-col{display:none}
+  body.conversation-active .conversation-panel{display:flex}
   .overview-duo{grid-template-columns:1fr}
   .observability-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
   /* Terminal panel overlays full-screen instead of occupying a grid column */
-  .terminal-panel{position:fixed;inset:0;z-index:70;grid-column:auto;height:100vh;border-left:0}
+  .terminal-panel{position:fixed;inset:0;z-index:80;height:100dvh;border-left:0}
 }
 @media(max-width:620px){
   .command-rail{grid-template-columns:repeat(2,1fr)}
@@ -31,8 +36,16 @@ export const RESPONSIVE_STYLES = `
   .metric-value{font-size:26px}
   /* Keep the topbar on one line: clock and key hints are expendable */
   .clock{display:none}
-  .refresh kbd{display:none}
-  .topbar{flex-wrap:nowrap;gap:10px}
+  .topbar{flex-wrap:nowrap;gap:8px;padding:10px 14px}
+  .topbar-leading{flex:1;gap:8px}
+  .breadcrumb .crumb,.breadcrumb .crumb-sep{display:none}
+  .topbar-actions{gap:6px}
+  #conversation-toggle,#operator-terminal,#refresh{width:38px;height:38px;min-width:38px;justify-content:center;padding:0}
+  #conversation-toggle{font-size:0}
+  #conversation-toggle::before{content:"▤";font-size:19px}
+  #operator-terminal .operator-title,#operator-terminal .operator-shortcuts,#refresh span,#refresh kbd{display:none}
+  #operator-terminal::before{content:">_";font-family:var(--font-mono);font-size:15px}
+  #refresh::before{content:"↻";font-size:20px}
   .detail-tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
   .record-cols{grid-template-columns:1fr}
   .observability-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

package/dist/web/assets/styles/tokens.js

@@ -35,7 +35,7 @@ export const TOKEN_STYLES = `
   --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
   --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
   --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
-  --page-space:clamp(18px,2.6vw,40px);--sidebar-w:clamp(232px,18vw,288px);--terminal-w:clamp(420px,34vw,640px);
+  --page-space:clamp(18px,2.6vw,40px);--sidebar-w:clamp(232px,18vw,288px);--terminal-w:clamp(420px,34vw,640px);--pane-w:clamp(300px,29vw,500px);
   --motion-fast:150ms;--motion-slow:320ms;--ease:cubic-bezier(.16,.84,.44,1);
 }
 :root,[data-theme="control-room"]{

package/dist/web/assets/styles/widgets.js

@@ -142,6 +142,11 @@ kbd{background:var(--bg-3);border:1px solid var(--border);border-bottom-width:2p
 .metric.is-warning .metric-value{color:var(--warning)}
 /* Terminal panel */
 .terminal-panel{color:#e8eef6;background:#080b11;border-left:1px solid #263244;box-shadow:var(--shadow-pop)}
+.conversation-panel{color:var(--text);background:var(--bg-1);border-left:1px solid var(--border);box-shadow:var(--shadow-card)}
+.conversation-head{border-bottom:1px solid var(--border);background:var(--bg-2)}
+.conversation-eyebrow{color:var(--muted)}
+.pane-action{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-1);color:var(--text);font:inherit;font-size:20px;cursor:pointer}
+.pane-action:hover,.pane-action:focus-visible{border-color:var(--accent);color:var(--accent)}
 .terminal-head{background:#0c111a;border-bottom:1px solid #263244}
 .terminal-head h2{font-family:var(--font-display);font-size:15px;color:#e8eef6}
 .terminal-close{display:grid!important;color:#8b99ad;background:#111826;border-color:#263244}

package/docs/managed-turn-and-session-runtime.md

@@ -11,6 +11,13 @@ notifications cannot restart an explicitly stopped Session; normal Host detach
 preserves an active Session and remains reconnectable. A switch after a partial
 failure still settles the retained input before selecting a new conversation.
 
+A newly created global Operator conversation requests the native title
+`Yui · Operator · MMdd`, using Yui's configured time zone. The request is made
+only after the provider returns the exact new conversation identity; restore
+and reconnect paths never replay it. Providers without a post-create rename
+capability keep the usable Session and expose a diagnostic instead of treating
+metadata failure as Session-creation failure.
+
 ## Authority
 
 Task, WorkItem, Message, Decision, Artifact and Project Knowledge preserve