fix(webui): stop the shell from carrying one session's state into another

Three leaks, all from state that lived outside the component that
should have owned it.

page.tsx read localStorage during render, so the pre-rendered HTML and
the first client frame could not agree — a skeleton screen was hiding it,
which is exactly the kind of cover that disappears the moment someone
edits the shell. The first frame now uses defaults and one mount effect
restores; the three write-back mirrors are gated so a default never
overwrites a stored value. Scroll position is read by the same sessionKey
effect Chat already had, which reads the same key.

The draft store was a module-level bucket, so a draft, a failure banner
and a model chip all followed you across sessions — type into one
conversation, switch, and your words are in the other. The store is
keyed by session now. Isolation is not discarding: switching back finds
the draft still there. Clearing was the alternative and it destroys an
unread banner every time you return to a conversation.

#126 left the accepted-but-unconfirmed banner without anything to
consume it when a turn ended. unconfirmedPatchOnTurnEnd clears it on the
falling edge of running, and only there — the three-value decision about
when to show it is untouched.

Author: fengzhi09

docs/webui.md

@@ -2040,6 +2040,17 @@ failure mode we care about is the `app/global-error.tsx` crash, not a quota
 error here. Per-session scroll keys are deliberate: a refresh restores
 the user's place in each conversation independently.
 
+One timing invariant guards all of it (webui-parity 106): the page root
+never reads these keys during render. The prerendered server HTML and the
+client's first (hydration) render must be identical, and a render-phase
+storage read breaks that equality the moment the `state === null` skeleton
+changes shape. `app/page.tsx` renders its first frame from the shared
+DEFAULT constants and applies the stored payload in one post-mount effect;
+the three write-back mirrors are gated on that restore having run, so the
+defaults-seeded first render cannot overwrite the stored payload. What the
+user sees is unchanged: the skeleton is still up while the restore lands,
+and by the time the first snapshot arrives the saved layout is in place.
+
 ## Slash commands: which endpoint answers them (webui-parity ticket 65)
 
 A `/`-prefixed line in the composer is not automatically a command. Two
@@ -2252,6 +2263,23 @@ losing what the user typed is the worse defect, and the banner carries the
 "check the history first" instruction that makes the restore safe. The
 banner is also styled as secondary text rather than as an error.
 
+The banner's *display* semantics are the three answers above; its *dismissal*
+is separate (webui-parity 106). While `running.active` is up, the warning is
+doing its job. When the flag falls — the turn it warned about is over — the
+grey banner goes with it (`unconfirmedPatchOnTurnEnd` in
+`webapp/lib/composer-draft.ts`, applied by a composer effect that watches the
+running-flag fall): after `sleep 35` finished, the banner used to sit under
+the input until the next send or a reload. A real `rejected` refusal keeps
+its dismiss paths; no display rule changed.
+
+The banner is also addressed, not broadcast. The draft store is keyed by
+session, and the catch branch writes the banner into the key of the session
+the send was dispatched FROM — so a failure recorded in session A while the
+user has already switched to session B never paints B red; the user finds
+the banner when they return to A. The previous behaviour (a module-scope
+shared box, then #141's clear-on-switch) either bled the banner across
+sessions or destroyed the returning session's own unread one.
+
 A client-generated idempotency key on `POST /api/send` would make the
 duplicate structurally impossible rather than merely unlikely. It is not
 implemented: it is a request-contract change, and it needs a
@@ -2263,6 +2291,38 @@ an engine turn, and leave the tab open: the output is still there ten
 seconds later, and it is still there after a reload. Force an
 acknowledgement timeout against a server that is running the turn: the
 banner says the engine is running the message, and the composer is empty.
+Wait for the turn to finish: the grey banner disappears on its own.
+
+## The composer's state is per-session (webui-parity 106)
+
+Everything the user has parked in the composer — typed text, attachment
+chips, the send-error banner — is stored under the active session's key
+(`webapp/lib/composer-draft.ts`, a `Map` keyed by `state.sessionId`; `""` is
+the no-session home-screen bucket). Switching sessions swaps the whole box:
+session B never shows session A's draft or banner, and both survive the
+round trip. The smoke run's s28 capture was the shared-bucket version of
+this store: session 2's view showing session 1's draft, 409 banner and
+model chip at the same time.
+
+Per-session storage, not clear-on-switch, is the deliberate choice: a
+clear-on-switch effect (the #141 interim fix) also fires when the user
+comes BACK, destroying the very draft and unread banner they returned for.
+Keyed storage keeps the good half of the old global behaviour (nothing is
+lost when hopping between sessions) while removing the bleed. Drafts are
+not persisted to `localStorage` — they are working state for the current
+page visit; the persisted surface stays `lib/persist.ts`'s contract.
+
+The model picker's chip VALUE always read the server snapshot and needs no
+isolation; its local UI state (open cascade, previewed row, per-model draft
+mirror) resets when the session key changes, so no menu state from session A
+visually persists into session B's view. Whether a model pick made in one
+session's view can land in another session's engine config is a
+server-side `applyConfigOptionUpdate` question and out of this ticket's
+frontend scope.
+
+**How you would tell it works.** Type a draft in session A, switch to
+session B: B's composer is empty and the chip follows B's server model.
+Switch back: A's draft and any unread failure banner are exactly as left.
 
 ## Endpoint catalog (against current source)
 

docs/webui.zh-CN.md

@@ -1481,6 +1481,14 @@ loading-states 相同：让 SSR 渲染测试可以脱离 `chat.tsx` 的 `@/` 别
 错误。会话内每个 sessionId 单独存储滚动位置 —— 按会话恢复滚动位置
 是有意为之的契约。
 
+一条时序不变式守着这一切（webui-parity 106）：页面根组件**绝不在渲染期读
+这些键**。预渲染的服务端 HTML 与客户端首次（hydration）渲染必须逐字节
+一致，渲染期读存储会在 `state === null` 骨架屏第一次改形时炸出不一致。
+`app/page.tsx` 首帧用共享的 DEFAULT 常量渲染，挂载后的一个 effect 统一
+套用存储值；三处写回镜像都加闸在该恢复之后，默认值首帧不可能覆盖存储
+payload。用户看到的东西不变：恢复落地时骨架屏仍亮着，第一份快照到达时
+保存过的布局已经就位。
+
 ## 斜杠命令走哪个端点（webui-parity ticket 65）
 
 输入框里以 `/` 开头的一行**不等于**命令。两个端点都能消费斜杠输入，
@@ -1659,13 +1667,53 @@ composer 实际调用的那个函数。
 回填草稿——让用户输入的内容消失是更严重的缺陷，而文案里带着「先查历史」
 这句指引，回填才是安全的。该错误条同时改用次要文字色，不再是错误红。
 
+上面三种答案定的是错误条**何时显示**；**何时消失**是另一件事
+（webui-parity 106）。`running.active` 亮着时，灰条在履行职责；这个标志
+落下——它警告的那个回合结束了——灰条随之消失
+（`webapp/lib/composer-draft.ts#unconfirmedPatchOnTurnEnd`，composer 里
+一个盯 running 下降沿的 effect 负责套用）：此前 `sleep 35` 跑完后，灰条
+会一直挂在输入框下直到下次发送或刷新。真正的 `rejected` 拒绝保持原有的
+消失路径；显示判定一字未动。
+
+错误条还是**有归属**的，不是广播。草稿存储按会话分键，catch 分支把红条
+写进**发起发送的那个会话**的键下——用户在会话 A 发送失败后已经切到
+会话 B，B 的输入框永远不会因此变红；回到 A 时才看到这条失败。旧行为
+（模块级共享桶，再到 #141 的切换即清）要么把红条串到别的会话，要么把
+用户正要回去看的那个会话自己的红条销毁掉。
+
 给 `POST /api/send` 加一个客户端生成的幂等键，可以让重复执行从「不太可能」
 变成「结构上不可能」。本次没做：那是请求契约变更，还需要服务端带明确时间窗
 的去重存储。留作独立一单，不塞进这次修复。
 
 **怎么验证它真的好了。** 在一个已经有引擎回合的会话里发 `/help`，把标签页
 放着：十秒后输出还在，刷新之后还在。对着一个「回合正在跑」的服务器制造一次
-确认超时：错误条会说引擎正在执行这条消息，且输入框是空的。
+确认超时：错误条会说引擎正在执行这条消息，且输入框是空的。等这个回合跑完：
+灰色错误条自己消失。
+
+## 输入区的状态按会话隔离（webui-parity 106）
+
+用户停在输入区的一切——正在打的文字、附件 chips、发送失败红条——都存在
+当前会话的键下（`webapp/lib/composer-draft.ts`，以 `state.sessionId` 为键
+的 `Map`；`""` 是首页无会话的桶）。切换会话就是换一个盒子：会话 B 永远
+不会显示会话 A 的草稿或红条，来回切换两边的状态都不丢。质检 s28 截图
+拍到的正是这个存储的共享桶版本：会话 2 的视图同时挂着会话 1 的草稿、
+409 红条和模型 chip。
+
+按会话存储、而不是「切换时清空」，是权衡后的决定：清空 effect（#141 的
+过渡修法）在用户**切回来**时同样触发，恰恰毁掉他们回来要看的那份草稿和
+没读完的红条。按会话分键保住了旧全局行为里好的那一半（来回跳会话什么都不
+丢），又去掉了串扰。草稿不落 `localStorage`——它们是本次页面访问的工作
+状态；持久化面仍归 `lib/persist.ts` 的契约管。
+
+模型选择器 chip 的**值**一直读服务端快照，本就不需要隔离；它的本地 UI
+状态（打开的级联、预览中的行、按模型记的草稿镜像）在会话键变化时重置，
+会话 A 的菜单状态不会在会话 B 的视图里残留。至于在一个会话视图里做的
+模型选择会不会落进另一个会话的引擎配置，那是服务端
+`applyConfigOptionUpdate` 的事，不在本单前端范围内。
+
+**怎么验证它真的好了。** 在会话 A 打一段草稿，切到会话 B：B 的输入框是
+空的，chip 跟着 B 的服务端模型走。切回 A：草稿和没读完的红条原样都在。
+
 
 ## 端点清单（依据当前源码）
 

packages/webui/webapp/app/page.tsx

@@ -23,7 +23,6 @@ import { useLocale } from "@/lib/use-locale";
 import {
   DEFAULT_UI_STATE,
   DEFAULT_WORKSPACE_TABS_STATE,
-  readScrollPosition,
   readUiState,
   readWorkspaceTabs,
   writeScrollPosition,
@@ -78,24 +77,38 @@ export default function Page() {
 function App() {
   const { locale, setLocale, t } = useLocale();
   const { state, connected, error } = useSessionContext();
-  // Webui-parity 07 — restore UI state synchronously from localStorage
-  // BEFORE the first paint, so a refresh on /?session=A lands on the
-  // same right-panel / sidebar collapsed choice the user previously
-  // had open rather than flashing the default first.
-  const [persisted] = useState<UiState>(() => readUiState());
-  // Slice 17 — restore the workspace-tabs payload (open tabs +
-  // per-column active ids + column widths + collapsed flags) the
-  // same way. The first paint already knows whether the preview /
-  // tree columns should be open and which tabs are inside them, so
-  // a refresh on the new shell does not flash the empty launcher
-  // before restoring the saved tabs.
-  const [workspaceTabs] = useState<WorkspaceTabsState>(() => readWorkspaceTabs());
+  // Webui-parity 07 — restore UI state from localStorage so a refresh on
+  // /?session=A lands on the same right-panel / sidebar collapsed choice
+  // the user previously had open rather than flashing the default first.
+  //
+  // webui-parity 106 (smoke-report P7-b): the reads moved OUT of the render
+  // phase. This page is prerendered by the Next.js static export, so the
+  // server HTML and the client's first (hydration) render must be identical;
+  // a storage-read state initializer returns defaults on the server but
+  // stored values on the client, which is a hydration mismatch waiting for
+  // the first change to the `!state` skeleton to go off. The
+  // first frame therefore renders from DEFAULT_UI_STATE — the same constants
+  // the server used — and the effect below applies the stored values right
+  // after mount, while the skeleton is still up (the SSE snapshot has not
+  // arrived either). By the time real content replaces the skeleton, the
+  // restored layout is already in place, so the pre-106 no-flash restore
+  // behaviour is preserved.
+  const [persisted, setPersisted] = useState<UiState>(DEFAULT_UI_STATE);
+  // Slice 17 — restore the workspace-tabs payload (open tabs + per-column
+  // active ids + column widths + collapsed flags) the same way: defaults on
+  // the first frame, storage values applied by the mount effect below, so
+  // a refresh does not flash the empty launcher before the saved tabs land
+  // — and does not read storage during hydration either.
+  const [workspaceTabs, setWorkspaceTabs] = useState<WorkspaceTabsState>(
+    DEFAULT_WORKSPACE_TABS_STATE,
+  );
   // The legacy `panel` mirror is still kept around so the
   // toolbar's existing "active panel" highlight survives the
   // refactor without a fresh state mirror — slice 17 keeps the
   // toolbar / panel highlight working through the new tab strip
   // system (the active tab's kind is the toolbar highlight).
-  const [panel, setPanel] = useState<typeof persisted.panel>(persisted.panel);
+  // Seeded null (the default) and restored by the mount effect.
+  const [panel, setPanel] = useState<typeof persisted.panel>(null);
   // Settings is a dialog rather than a drawer panel, so it has its own state.
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsSection, setSettingsSection] = useState<"general" | "connection" | "providers">("general");
@@ -104,23 +117,44 @@ function App() {
   const [sessionHint, setSessionHint] = useState<{ kind: "not-found"; sessionId: string } | null>(null);
   const alertCount = useAlertCount();
 
-  // Workspace tabs live-state (slice 17). The `useState` initializer
-  // seeds from the persisted payload; subsequent edits mutate via
-  // the pure reducers and the effect below mirrors them back into
-  // `lib/persist.ts` storage.
-  const [tabState, setTabState] = useState<TabStripState>(workspaceTabs.tabStrip);
-  const [columnState, setColumnState] = useState<typeof DEFAULT_COLUMN_LAYOUT>(workspaceTabs.columnLayout);
-  // Slice 17 — WorkspaceColumns self-measures via
-  // ResizeObserver, so the page does not need to feed
-  // containerWidth anymore. viewportWidth is still threaded
-  // through for the future auto-collapse ladder; today it is
-  // accepted but unused inside computeColumnLayout.
-  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
+  // Workspace tabs live-state (slice 17). Seeded from the DEFAULT tab strip
+  // (see the hydration note above); the mount effect below applies the
+  // persisted payload, and subsequent edits mutate via the pure reducers,
+  // mirrored back into `lib/persist.ts` storage by the gated effect.
+  const [tabState, setTabState] = useState<TabStripState>(
+    DEFAULT_WORKSPACE_TABS_STATE.tabStrip,
+  );
+  const [columnState, setColumnState] = useState<typeof DEFAULT_COLUMN_LAYOUT>(
+    DEFAULT_WORKSPACE_TABS_STATE.columnLayout,
+  );
+  // webui-parity 106 — false until the mount effect has applied the stored
+  // UI state. The three write-back mirrors below are gated on it: without
+  // the gate, the first (defaults-seeded) render would overwrite the user's
+  // stored payload with DEFAULT_UI_STATE before the restore ever ran.
+  const [uiRestored, setUiRestored] = useState(false);
+
+  // The one client-side storage read. Runs after mount — never during
+  // render, never during hydration — and applies everything in one batch,
+  // so the skeleton frame the user is still looking at is the last frame
+  // painted from defaults.
+  useEffect(() => {
+    const restoredUi = readUiState();
+    const restoredTabs = readWorkspaceTabs();
+    setPersisted(restoredUi);
+    setWorkspaceTabs(restoredTabs);
+    setTabState(restoredTabs.tabStrip);
+    setColumnState(restoredTabs.columnLayout);
+    setPanel(restoredUi.panel);
+    setUiRestored(true);
+  }, []);
 
   // Mirror panel changes into localStorage. The write helper is
   // debounced; mounting/de-mounting the panel quickly during a
-  // refresh never floods storage.
+  // refresh never floods storage. Gated on `uiRestored` so the
+  // defaults-seeded first render cannot clobber the stored payload
+  // (webui-parity 106).
   useEffect(() => {
+    if (!uiRestored) return;
     writeUiState({
       ...DEFAULT_UI_STATE,
       ...persisted,
@@ -129,15 +163,23 @@ function App() {
     // intentionally not adding `persisted` to deps — the persist
     // module already guards the debounced write.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [panel]);
+  }, [panel, uiRestored]);
 
   // Slice 17 — mirror workspace-tabs state into localStorage. The
   // debounced writer coalesces open + activate + scroll edits into
-  // one write.
+  // one write. Gated on `uiRestored` for the same reason as above.
   useEffect(() => {
+    if (!uiRestored) return;
     writeWorkspaceTabs({ tabStrip: tabState, columnLayout: columnState });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tabState, columnState]);
+  }, [tabState, columnState, uiRestored]);
+
+  // Slice 17 — WorkspaceColumns self-measures via
+  // ResizeObserver, so the page does not need to feed
+  // containerWidth anymore. viewportWidth is still threaded
+  // through for the future auto-collapse ladder; today it is
+  // accepted but unused inside computeColumnLayout.
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
 
   // ============================================================
   // Workspace tabs reducers (the page wires every action through
@@ -477,6 +519,12 @@ function App() {
 
   useEffect(() => {
     if (!urlRestored) return;
+    // webui-parity 106 — same gate as the other write mirrors: this effect
+    // can fire before the mount restore has applied the stored payload
+    // (SSE sometimes names a session before the restore batch lands), and
+    // writing from the defaults-seeded `persisted` would drop the stored
+    // appearance / sidebar choice.
+    if (!uiRestored) return;
     const active = state?.mcodeSessionId ?? null;
     writeUiState({
       ...DEFAULT_UI_STATE,
@@ -485,7 +533,7 @@ function App() {
       lastSessionId: active,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state?.mcodeSessionId, urlRestored]);
+  }, [state?.mcodeSessionId, urlRestored, uiRestored]);
 
   useEffect(() => {
     const onPop = () => {
@@ -739,7 +787,16 @@ function App() {
 }
 
 /**
- * Scroll-restored chat wrapper — unchanged from slice 07.
+ * Scroll-restored chat wrapper.
+ *
+ * webui-parity 106: the page no longer reads the scroll position out of
+ * localStorage during render (the pre-106 render-phase read was the third
+ * instance of the hydration bomb). `Chat` already re-reads the SAME
+ * per-session key (`webui:scroll:v1:<cid>:<sessionId>`) inside its own
+ * post-mount restore effect whenever `sessionKey` changes, and it falls back
+ * to that read whenever no explicit scroll target arrives — so passing
+ * nothing restores the identical number, from an effect that only runs
+ * client-side. The page keeps only the write half of the contract.
  */
 function ScrollRestoredChat({
   t,
@@ -752,13 +809,11 @@ function ScrollRestoredChat({
   sessionId: string | null;
   onOpenFile?: (path: string) => void;
 }) {
-  const initial = sessionId ? readScrollPosition(sessionId) : 0;
   return (
     <Chat
       t={t}
       locale={locale}
       sessionKey={sessionId}
-      initialScrollTop={initial}
       onScrollPersist={(top) => {
         if (!sessionId) return;
         writeScrollPosition(sessionId, top);
@@ -769,10 +824,9 @@ function ScrollRestoredChat({
 }
 
 // keep the unused-export lint happy: slice 17 deliberately does
-// not pull `panel` / `openPanel` / `openSettings` / `DEFAULT_UI_STATE`
-// from the legacy path. They stay in scope so a future ticket can
-// revive them without re-importing the modules.
+// not pull `panel` / `openPanel` / `openSettings` from the legacy
+// path. They stay in scope so a future ticket can revive them
+// without re-importing the modules.
 void PreviewColumn;
-void DEFAULT_WORKSPACE_TABS_STATE;
 void isHtmlPath;
 void useRef;