From f3dca163b3826337d71973164b43aca55785f326 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Tue, 8 Sep 2026 18:15:57 +0800
Subject: [PATCH 1/3] feat(web-ui): add workspace session tabs and rolling text

---
 .../design-lab/src/i18n/componentMetadata.ts  |   1 +
 .../apps/design-lab/src/i18n/messages.ts      |  12 +
 .../src/pages/ComponentDetailPage.tsx         |   9 +
 .../design-lab/src/pages/ComponentsPage.tsx   |   3 +
 .../src/preview/RollingTextPreview.tsx        |  34 ++
 design-system/apps/design-lab/src/styles.css  |   5 +
 .../vite/component-detail-contract.test.mjs   |   4 +
 .../vite/component-preview-render.test.mjs    |   8 +
 .../packages/design-tokens/README.md          |   5 +
 .../packages/design-tokens/scripts/build.mjs  |   2 +
 .../design-tokens/src/system.tokens.json      |   4 +
 .../design-tokens/tests/contract.test.mjs     |   1 +
 design-system/packages/ui/README.md           |  41 ++
 .../RollingText/RollingText.meta.ts           |  20 +
 .../RollingText/RollingText.module.css        |  30 ++
 .../components/RollingText/RollingText.tsx    | 102 +++++
 .../ui/src/components/RollingText/index.ts    |   1 +
 .../RollingText/useRollingTextMotion.ts       |  99 +++++
 .../src/components/TabGroup/TabGroup.meta.ts  |   1 +
 .../ui/src/components/TabGroup/TabGroup.tsx   |  20 +-
 design-system/packages/ui/src/index.ts        |   1 +
 .../ui/src/internal/useReducedMotion.ts       |  20 +
 design-system/packages/ui/src/registry.ts     |   2 +
 .../packages/ui/tests/registry.test.mjs       |   1 +
 .../packages/ui/tests/rolling-text.test.mjs   |  36 ++
 docs/architecture/session-projection.md       |  45 ++-
 .../ui/generated/design-system.css            |   3 +
 .../sections/sessions/SessionsSection.tsx     |  40 +-
 .../sections/sessions/sessionNavSelection.ts  |   6 +-
 .../NavPanel/workspaceSessionView.test.ts     |  21 +-
 .../NavPanel/workspaceSessionView.ts          |  12 +-
 .../app/components/SceneBar/SceneBar.test.tsx |  41 +-
 .../src/app/components/SceneBar/SceneBar.tsx  |  18 +-
 .../src/app/components/SceneBar/types.ts      |  24 +-
 src/web-ui/src/app/creation/creationUiApi.ts  |  10 +-
 .../globalSearchArchitecture.test.ts          |   4 +-
 .../global-search/productActionActivator.ts   |   3 +-
 src/web-ui/src/app/hooks/index.ts             |   2 +-
 .../src/app/hooks/useCurrentSessionTitle.ts   |  25 --
 src/web-ui/src/app/hooks/useSceneManager.ts   |  11 +-
 .../app/hooks/useSessionTabLabels.test.tsx    |  48 +++
 .../src/app/hooks/useSessionTabLabels.ts      |  36 ++
 src/web-ui/src/app/layout/WorkspaceBody.tsx   |   4 +-
 .../src/app/scenes/SceneViewport.test.tsx     |  15 +
 src/web-ui/src/app/scenes/SceneViewport.tsx   |  15 +-
 .../app/scenes/file-viewer/FileViewerNav.scss |  78 +++-
 src/web-ui/src/app/scenes/registry.ts         |   3 +-
 .../app/scenes/session/AuxPane.appearance.ts  |   5 +-
 .../src/app/scenes/session/AuxPane.scss       |  17 +
 src/web-ui/src/app/scenes/session/AuxPane.tsx |  13 +-
 .../src/app/scenes/welcome/WelcomeScene.scss  | 117 ++++--
 .../src/app/scenes/welcome/WelcomeScene.tsx   |  91 +++--
 .../src/app/scenes/welcome/appearance.ts      |   1 +
 .../WorkspaceResourcePanel.tsx                |  19 +-
 .../workspaceResources.test.ts                |  10 +-
 .../services/sessionSceneLifecycle.test.ts    | 116 +++++-
 .../src/app/services/sessionSceneLifecycle.ts |  97 ++++-
 .../app/services/sessionSceneTarget.test.ts   |  49 +++
 .../src/app/services/sessionSceneTarget.ts    |  39 ++
 src/web-ui/src/app/stores/sceneStore.test.ts  | 101 ++++-
 src/web-ui/src/app/stores/sceneStore.ts       | 359 +++++++++++-------
 .../components/voice/voiceClientContext.ts    |   7 +-
 .../src/flow_chat/services/FlowChatManager.ts |   7 +-
 .../flow-chat-manager/SessionModule.test.ts   |  13 +
 .../flow-chat-manager/SessionModule.ts        |   8 +-
 .../services/sessionActivation.test.ts        |  54 +++
 .../flow_chat/services/sessionActivation.ts   |  60 ++-
 .../services/sessionNavStatusService.test.ts  |  84 ++++
 .../services/sessionNavStatusService.ts       |  63 ++-
 .../utils/sessionNavOrdering.test.ts          | 112 ++++++
 .../src/flow_chat/utils/sessionNavOrdering.ts |  62 +++
 .../flow_chat/utils/workspaceScope.test.ts    |   5 +
 .../src/flow_chat/utils/workspaceScope.ts     |  16 +-
 .../RollingTextIntegration.test.tsx           | 231 +++++++++++
 src/web-ui/src/locales/en-US/common.json      |  10 +-
 src/web-ui/src/locales/zh-CN/common.json      |  10 +-
 src/web-ui/src/locales/zh-TW/common.json      |  10 +-
 .../shared/services/openShellSessionTarget.ts |   3 +-
 .../services/sceneOpenTargetResolver.test.ts  |  12 +-
 .../services/sceneOpenTargetResolver.ts       |   5 +-
 80 files changed, 2302 insertions(+), 430 deletions(-)
 create mode 100644 design-system/apps/design-lab/src/preview/RollingTextPreview.tsx
 create mode 100644 design-system/packages/ui/src/components/RollingText/RollingText.meta.ts
 create mode 100644 design-system/packages/ui/src/components/RollingText/RollingText.module.css
 create mode 100644 design-system/packages/ui/src/components/RollingText/RollingText.tsx
 create mode 100644 design-system/packages/ui/src/components/RollingText/index.ts
 create mode 100644 design-system/packages/ui/src/components/RollingText/useRollingTextMotion.ts
 create mode 100644 design-system/packages/ui/src/internal/useReducedMotion.ts
 create mode 100644 design-system/packages/ui/tests/rolling-text.test.mjs
 delete mode 100644 src/web-ui/src/app/hooks/useCurrentSessionTitle.ts
 create mode 100644 src/web-ui/src/app/hooks/useSessionTabLabels.test.tsx
 create mode 100644 src/web-ui/src/app/hooks/useSessionTabLabels.ts
 create mode 100644 src/web-ui/src/app/services/sessionSceneTarget.test.ts
 create mode 100644 src/web-ui/src/app/services/sessionSceneTarget.ts
 create mode 100644 src/web-ui/src/flow_chat/utils/sessionNavOrdering.test.ts
 create mode 100644 src/web-ui/src/flow_chat/utils/sessionNavOrdering.ts
 create mode 100644 src/web-ui/src/infrastructure/design-system/RollingTextIntegration.test.tsx

diff --git a/design-system/apps/design-lab/src/i18n/componentMetadata.ts b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
index f5145ec5fd..7e771f2c1b 100644
--- a/design-system/apps/design-lab/src/i18n/componentMetadata.ts
+++ b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
@@ -75,6 +75,7 @@ const descriptionKeys: Readonly<Record<string, MessageKey>> = {
   ProminentToolCard: "component.ProminentToolCard.description",
   ReadFileToolCard: "component.ReadFileToolCard.description",
   ReviewSummaryToolCard: "component.ReviewSummaryToolCard.description",
+  RollingText: "component.RollingText.description",
   RunCodeToolCard: "component.RunCodeToolCard.description",
   SearchField: "component.SearchField.description",
   SegmentedControl: "component.SegmentedControl.description",
diff --git a/design-system/apps/design-lab/src/i18n/messages.ts b/design-system/apps/design-lab/src/i18n/messages.ts
index 53aae20b83..e8a7318e65 100644
--- a/design-system/apps/design-lab/src/i18n/messages.ts
+++ b/design-system/apps/design-lab/src/i18n/messages.ts
@@ -129,6 +129,10 @@ export const enUSMessages = {
   "component.Spinner.description": "A compact activity indicator with matrix and bar presentations.",
   "component.Switch.description": "Toggles a single setting between on and off with native checkbox semantics.",
   "component.TabGroup.description": "A compact single-selection tab list with optional leading icons, end actions, and automatic keyboard activation.",
+  "component.RollingText.description": "Vertical text replacement with coordinated width, interruption handling, and reduced-motion support. Try repeated clicks in the replacement specimen.",
+  "components.preview.replaceText": "Replace title",
+  "components.preview.rollingTextLong": "Review workspace navigation and session switching",
+  "detail.option.replacing": "Replacement",
   "component.TerminalControlToolCard.description": "An ambient trace for interrupting or terminating a terminal session.",
   "component.TodoToolCard.description": "An ambient task-progress card with compact and expandable list presentations.",
   "component.Toolbar.description": "A responsive bar with independent leading, centered, trailing, and horizontally scrollable composition regions.",
@@ -865,6 +869,10 @@ export const zhCNMessages = {
   "component.Spinner.description": "提供点阵与条形样式的紧凑活动指示器。",
   "component.Switch.description": "通过原生复选框语义在开启与关闭之间切换单项设置。",
   "component.TabGroup.description": "紧凑的单选标签组，支持前置图标、尾部操作与方向键自动切换。",
+  "component.RollingText.description": "垂直滚动替换文本，宽度同步过渡，支持连续切换与减少动态效果。可在替换示例中连续点击体验。",
+  "components.preview.replaceText": "替换标题",
+  "components.preview.rollingTextLong": "检查工作区导航与会话切换时的交互行为",
+  "detail.option.replacing": "替换",
   "component.TerminalControlToolCard.description": "低关注终端控制轨迹，用于呈现中断或终止终端会话的结果。",
   "component.TodoToolCard.description": "低关注任务进度卡片，支持紧凑摘要与可展开列表两种呈现。",
   "component.Toolbar.description": "具备独立前置、居中、尾部与横向滚动区域的响应式工具栏。",
@@ -1635,6 +1643,10 @@ export const zhTWMessages = {
   "component.Spinner.description": "提供點陣與條形樣式的緊湊活動指示器。",
   "component.Switch.description": "以原生核取方塊語意在開啟與關閉之間切換單一設定。",
   "component.TabGroup.description": "緊湊的單選標籤群組，支援前置圖示、尾端操作與方向鍵自動切換。",
+  "component.RollingText.description": "垂直捲動替換文字，寬度同步過渡，支援連續切換與減少動態效果。可在替換範例中連續點擊體驗。",
+  "components.preview.replaceText": "替換標題",
+  "components.preview.rollingTextLong": "檢查工作區導覽與工作階段切換時的互動行為",
+  "detail.option.replacing": "替換",
   "component.TerminalControlToolCard.description": "低關注終端控制軌跡，用於呈現中斷或終止終端工作階段的結果。",
   "component.TodoToolCard.description": "低關注任務進度卡片，支援緊湊摘要與可展開列表兩種呈現。",
   "component.Toolbar.description": "具備獨立前置、置中、尾端與橫向捲動區域的響應式工具列。",
diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index a691451490..d26957c5d5 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -121,6 +121,7 @@ import {
 import type { ComponentMeta } from "@openbitfun/ui/registry";
 import previewImage from "../assets/design-system-hero.webp";
 import { IconCompositionPreview } from "../preview/IconCompositionPreview";
+import { RollingTextPreview } from "../preview/RollingTextPreview";
 import { NestedMenuPattern } from "./ReferencePatterns";
 import { useI18n, type MessageKey } from "../i18n";
 import {
@@ -174,6 +175,7 @@ const optionLabelKeys: Readonly<Record<string, MessageKey>> = {
   chevron: "detail.option.chevron",
   center: "detail.option.center",
   default: "detail.option.default",
+  replacing: "detail.option.replacing",
   disabled: "detail.option.disabled",
   display: "detail.option.display",
   error: "detail.option.error",
@@ -437,6 +439,9 @@ export function ComponentDetailPage({
     : states;
 
   const codeSample = useMemo(() => {
+    if (component.name === "RollingText") {
+      return 'import { RollingText, TabGroup } from "@openbitfun/ui";\n\n// Keep the identity stable for title edits; change it when replacing the resource.\n<RollingText transitionKey={record.id}>{record.title}</RollingText>\n\n// TabGroup owns the text slot and composes RollingText without nested clipping.\n<TabGroup\n  aria-label="Views"\n  items={[{ value: slotId, label: record.title, labelTransitionKey: record.id }]}\n/>\n';
+    }
     if (component.name === "MobileActionSheet") return `import { MobileActionSheet } from "@openbitfun/ui/mobile";\n\n<MobileActionSheet\n  actions={[\n    { id: "rename", label: "${t("components.preview.modalSave")}" },\n    { id: "delete", label: "${t("components.preview.confirmDelete")}", tone: "danger" },\n  ]}\n  cancelLabel="${t("components.preview.modalCancel")}"\n  onAction={handleAction}\n  onOpenChange={() => setOpen(false)}\n  open={open}\n  title="${t("components.preview.session")}"\n/>`;
     if (component.name === "MobileComposer") return `import { MobileComposer } from "@openbitfun/ui/mobile";\n\n<MobileComposer\n  expanded={expanded}\n  leading={<AttachButton />}\n  startActions={<ModelControls />}\n  endActions={<SendButton />}\n>\n  <textarea />\n</MobileComposer>`;
     if (component.name === "MobileChoiceSheet") return `import { MobileChoiceSheet } from "@openbitfun/ui/mobile";\n\n<MobileChoiceSheet\n  cancelLabel="${t("components.preview.modalCancel")}"\n  onOpenChange={() => setOpen(false)}\n  onSelect={setMode}\n  open={open}\n  options={[\n    { label: "${t("components.preview.modeMinimal")}", value: "minimal" },\n    { label: "${t("components.preview.modeStandard")}", value: "standard" },\n    { label: "${t("components.preview.modeUltimate")}", value: "ultimate" },\n  ]}\n  selectedValue={mode}\n  title="${t("components.preview.selectExecutionMode")}"\n/>`;
@@ -1886,6 +1891,10 @@ export function ComponentDetailPage({
       );
     }
 
+    if (component.name === "RollingText") {
+      return <RollingTextPreview interactive={state === "replacing"} />;
+    }
+
     if (component.name === "TabGroup") {
       const defaultTab = state === "unselected" ? "settings" : "welcome";
       return (
diff --git a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
index dc448b0eaf..b539b0083f 100644
--- a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
@@ -96,6 +96,7 @@ import {
   getFlowChatPreviewDefinition,
 } from "../preview/FlowChatPreviewRegistry";
 import { FlowChatToolGallery } from "../preview/FlowChatToolGallery";
+import { RollingTextPreview } from "../preview/RollingTextPreview";
 
 interface ComponentsPageProps {
   category?: ComponentMeta["category"];
@@ -646,6 +647,8 @@ function ComponentCardPreview({ component }: { component: ComponentMeta }) {
           />
         </Stack>
       );
+    case "RollingText":
+      return <RollingTextPreview />;
     case "TabGroup":
       return (
         <TabGroup
diff --git a/design-system/apps/design-lab/src/preview/RollingTextPreview.tsx b/design-system/apps/design-lab/src/preview/RollingTextPreview.tsx
new file mode 100644
index 0000000000..1455505ec7
--- /dev/null
+++ b/design-system/apps/design-lab/src/preview/RollingTextPreview.tsx
@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { Button, RollingText, Stack, TabGroup } from "@openbitfun/ui";
+import { useI18n } from "../i18n";
+
+/** Manual, event-driven specimens of the public text and tab contracts. */
+export function RollingTextPreview({ interactive = false }: { interactive?: boolean }) {
+  const { t } = useI18n();
+  const [index, setIndex] = useState(0);
+  const labels = [
+    t("components.preview.welcome"),
+    t("components.preview.rollingTextLong"),
+    t("components.preview.session"),
+  ] as const;
+  const label = labels[index % labels.length] ?? labels[0];
+
+  return (
+    <Stack gap="3" style={{ inlineSize: 240, maxInlineSize: "100%" }}>
+      <RollingText transitionKey={index}>{label}</RollingText>
+      {interactive && (
+        <>
+          <TabGroup
+            aria-label={t("components.preview.tabGroupLabel")}
+            items={[{ value: "slot", label, labelTransitionKey: index }]}
+            size="sm"
+            style={{ maxInlineSize: "100%" }}
+          />
+          <Button onClick={() => setIndex(value => value + 1)} size="sm">
+            {t("components.preview.replaceText")}
+          </Button>
+        </>
+      )}
+    </Stack>
+  );
+}
diff --git a/design-system/apps/design-lab/src/styles.css b/design-system/apps/design-lab/src/styles.css
index 2e1e93c8f2..b1cbe937e9 100644
--- a/design-system/apps/design-lab/src/styles.css
+++ b/design-system/apps/design-lab/src/styles.css
@@ -3946,6 +3946,11 @@ input.lab-force-focus {
   min-width: 420px;
 }
 
+.component-preview-matrix[data-state-count="2"] {
+  grid-template-columns: 96px repeat(2, minmax(280px, max-content));
+  grid-template-rows: 50px minmax(190px, 1fr);
+}
+
 .component-preview-matrix[data-state-count="3"] {
   grid-template-columns: 96px repeat(3, minmax(280px, max-content));
   grid-template-rows: 50px minmax(190px, 1fr);
diff --git a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
index c7940938b1..8a227cc049 100644
--- a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
+++ b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
@@ -42,6 +42,10 @@ test("preview matrices define horizontal columns for every registered state coun
     source,
     /\.component-preview-matrix\[data-state-count="1"\]\s*\{[^}]*grid-template-columns:\s*96px\s+minmax\(240px, 1fr\)/s,
   );
+  assert.match(
+    source,
+    /\.component-preview-matrix\[data-state-count="2"\]\s*\{[^}]*grid-template-columns:\s*96px\s+repeat\(2, minmax\(280px, max-content\)\)/s,
+  );
   assert.match(
     source,
     /\.component-preview-matrix\[data-state-count="3"\]\s*\{[^}]*grid-template-columns:\s*96px\s+repeat\(3, minmax\(280px, max-content\)\)/s,
diff --git a/design-system/apps/design-lab/vite/component-preview-render.test.mjs b/design-system/apps/design-lab/vite/component-preview-render.test.mjs
index 97aa701214..1656da04c6 100644
--- a/design-system/apps/design-lab/vite/component-preview-render.test.mjs
+++ b/design-system/apps/design-lab/vite/component-preview-render.test.mjs
@@ -98,6 +98,14 @@ test("Switch is explicit and unknown components never silently become switches",
   assert.doesNotMatch(preview, /data-openbitfun-component="switch"/);
 });
 
+test("RollingText exposes real standalone and TabGroup replacement specimens", () => {
+  const { preview, html } = render("RollingText");
+  assert.match(preview, /data-openbitfun-component="rolling-text"/);
+  assert.match(preview, /data-openbitfun-component="tab-group"/);
+  assert.match(preview, /替换标题/);
+  assert.match(html, /labelTransitionKey/);
+});
+
 test("Icon details include real mixed-icon compositions at every button size", () => {
   const { preview } = render("Icon");
   assert.match(preview, /component-icon-composition/);
diff --git a/design-system/packages/design-tokens/README.md b/design-system/packages/design-tokens/README.md
index 783c92cd78..0de4e90791 100644
--- a/design-system/packages/design-tokens/README.md
+++ b/design-system/packages/design-tokens/README.md
@@ -18,6 +18,11 @@ Only semantic and system token names are public API. Density modes reuse the sam
 
 `tokenCatalog` is the authoring contract for visual tools. Each entry exposes its type, CSS variable, category, description, and resolved value in every density mode. Applications normally consume `tokens`; editors consume the catalog instead of maintaining a second token list.
 
+`motion.duration.contentSwap` (320ms) gives `RollingText` one cadence for vertical
+line travel and intrinsic-width changes. It has its own token so tuning content
+replacement does not change the existing hover-feedback and larger-view
+transition durations. It is zeroed in the reduced-motion projection.
+
 ## Semantic typography roles
 
 Text-bearing components consume a complete semantic role rather than assembling
diff --git a/design-system/packages/design-tokens/scripts/build.mjs b/design-system/packages/design-tokens/scripts/build.mjs
index f020eaced4..e42574b22f 100644
--- a/design-system/packages/design-tokens/scripts/build.mjs
+++ b/design-system/packages/design-tokens/scripts/build.mjs
@@ -100,6 +100,7 @@ assertRequiredTokens(systemTokens, [
   "radius.3xl",
   "radius.4xl",
   "motion.duration.fast",
+  "motion.duration.contentSwap",
   "focus.width",
 ]);
 
@@ -155,6 +156,7 @@ const css = [
   "  :where([data-openbitfun-design-system-root]) {\n",
   "    --openbitfun-motion-duration-fast: 0ms;\n",
   "    --openbitfun-motion-duration-normal: 0ms;\n",
+  "    --openbitfun-motion-duration-content-swap: 0ms;\n",
   "    --openbitfun-motion-duration-slow: 0ms;\n",
   "    --openbitfun-motion-duration-loop: 0ms;\n",
   "  }\n",
diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index 8a67d617a8..90477899f1 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/design-system/packages/design-tokens/src/system.tokens.json
@@ -886,6 +886,10 @@
       "fast": { "$value": "140ms" },
       "base": { "$value": "220ms" },
       "normal": { "$value": "{motion.duration.base}" },
+      "contentSwap": {
+        "$value": "320ms",
+        "$description": "Coordinated single-line content replacement and intrinsic-width changes."
+      },
       "slow": { "$value": "420ms" },
       "lazy": { "$value": "1s" },
       "loop": { "$value": "720ms" }
diff --git a/design-system/packages/design-tokens/tests/contract.test.mjs b/design-system/packages/design-tokens/tests/contract.test.mjs
index 67cf0a97cd..5d811fcb00 100644
--- a/design-system/packages/design-tokens/tests/contract.test.mjs
+++ b/design-system/packages/design-tokens/tests/contract.test.mjs
@@ -430,6 +430,7 @@ test("shared system scales preserve the migrated Web UI foundation contract", ()
   assert.equal(tokens["radius.3xl"], "24px");
   assert.equal(tokens["motion.duration.instant"], "80ms");
   assert.equal(tokens["motion.duration.slow"], "420ms");
+  assert.equal(tokens["motion.duration.contentSwap"], "320ms");
   assert.equal(tokens["motion.easing.standard"], "cubic-bezier(0.23, 1, 0.32, 1)");
   assert.equal(tokens["layer.modal"], 200);
   assert.equal(tokens["layer.contextMenu"], 500);
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 6b838180ef..246ac019bf 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -73,6 +73,47 @@ ellipsis rules are intentional source-code excerpts, contenteditable reference
 chips/placeholders, and multiline message previews. Diagnostic/payload size caps
 and persisted Appearance `textOverflow` values are data contracts, not layout rules.
 
+## Text replacement motion
+
+`RollingText` provides **vertical slide replacement** (also called rolling text):
+the old line moves up and out while the new line enters from below. The line
+positions and measured width share `motion.duration.contentSwap` (320ms) and
+`motion.easing.smooth`. Initial render is static; the current accessible text
+updates immediately, without a live region. The outgoing visual copy is hidden
+from assistive technology.
+
+```tsx
+import { RollingText, TabGroup } from "@openbitfun/ui";
+
+<RollingText transitionKey={record.id}>{record.title}</RollingText>
+
+// TabGroup already owns its text slot; pass an identity instead of wrapping it.
+<TabGroup
+  aria-label="Views"
+  items={[{ value: slotId, label: record.title, labelTransitionKey: record.id }]}
+/>
+```
+
+Keep `transitionKey` stable for edits to the same resource. Without an explicit
+key, changing the text triggers replacement. Plain strings and numbers are
+supported; interactive elements, icons, and actions stay outside the rolling
+line. The new title's natural width is measured within the existing layout
+constraints before paint, then animated from the displayed width. No text clone
+or frame-by-frame React measurement drives that animation. `OverflowText` still
+owns truncation and the full-text fallback; its marquee resumes after replacement
+instead of moving on two axes at once.
+
+A running transition retains one outgoing snapshot and adopts the latest
+incoming value, retargeting from the actual displayed positions and width.
+There is no animation queue. Returning to the outgoing value reverses the roll.
+`prefers-reduced-motion` disables replacement and cancels an in-flight roll when
+the preference changes. Native animation completion owns cleanup, including
+interruption and unmount; there is no timer duplicating the token duration.
+Hosts without Web Animations render the current text immediately.
+
+The **RollingText** Design Lab entry includes manual standalone and TabGroup
+examples for repeated replacement and long labels.
+
 ## Mobile controls
 
 Touch-first controls use the isolated mobile entry so compact and foldable
diff --git a/design-system/packages/ui/src/components/RollingText/RollingText.meta.ts b/design-system/packages/ui/src/components/RollingText/RollingText.meta.ts
new file mode 100644
index 0000000000..a7094c5d74
--- /dev/null
+++ b/design-system/packages/ui/src/components/RollingText/RollingText.meta.ts
@@ -0,0 +1,20 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const rollingTextMeta = {
+  category: "primitive",
+  description: "A single-line vertical text replacement with explicit identity, interruption handling, accessible text, and reduced-motion support.",
+  maturity: "stable",
+  name: "RollingText",
+  props: [
+    { name: "children", type: "string | number" },
+    { defaultValue: "children", name: "transitionKey", type: "string | number" },
+    { defaultValue: "marquee", name: "behavior", type: "fade | marquee" },
+    { name: "marqueeActive", type: "boolean" },
+  ],
+  states: ["default", "replacing"],
+  tokens: [
+    "motion.duration.contentSwap",
+    "motion.easing.smooth",
+    "layout.overflowText.fadeExtent",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/RollingText/RollingText.module.css b/design-system/packages/ui/src/components/RollingText/RollingText.module.css
new file mode 100644
index 0000000000..f4f4a43fea
--- /dev/null
+++ b/design-system/packages/ui/src/components/RollingText/RollingText.module.css
@@ -0,0 +1,30 @@
+@layer openbitfun.components {
+  .root {
+    --_rolling-text-duration: var(--openbitfun-motion-duration-content-swap);
+    --_rolling-text-easing: var(--openbitfun-motion-easing-smooth);
+
+    position: relative;
+    display: block;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .current {
+    display: block;
+  }
+
+  .outgoing {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .outgoing {
+      display: none;
+    }
+  }
+}
diff --git a/design-system/packages/ui/src/components/RollingText/RollingText.tsx b/design-system/packages/ui/src/components/RollingText/RollingText.tsx
new file mode 100644
index 0000000000..6024be271e
--- /dev/null
+++ b/design-system/packages/ui/src/components/RollingText/RollingText.tsx
@@ -0,0 +1,102 @@
+import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
+import { classNames } from "../../internal/classNames";
+import { useReducedMotion } from "../../internal/useReducedMotion";
+import { OverflowText, type OverflowTextProps } from "../../primitives/OverflowText";
+import styles from "./RollingText.module.css";
+import { useRollingTextMotion } from "./useRollingTextMotion";
+
+export interface RollingTextProps extends Omit<OverflowTextProps, "children"> {
+  children: string | number;
+  /** Change this identity to roll; text edits under the same identity stay still. */
+  transitionKey?: string | number;
+}
+
+interface TextFrame {
+  identity: string | number;
+  text: string | number;
+  outgoing: string | number | null;
+  revision: number;
+}
+
+/** A single-line vertical replacement: old text exits up, new text enters below. */
+export const RollingText = forwardRef<HTMLSpanElement, RollingTextProps>(
+  function RollingText({
+    behavior = "marquee",
+    children,
+    className,
+    marqueeActive,
+    transitionKey = children,
+    ...props
+  }, ref) {
+    const reducedMotion = useReducedMotion();
+    const [frame, setFrame] = useState<TextFrame>(() => ({
+      identity: transitionKey,
+      text: children,
+      outgoing: null,
+      revision: 0,
+    }));
+
+    if (frame.identity !== transitionKey || frame.text !== children
+      || (reducedMotion && frame.outgoing !== null)) {
+      const startsTransition = !reducedMotion
+        && frame.identity !== transitionKey
+        && frame.text !== children
+        && frame.outgoing === null;
+
+      // Capture before commit, so the new identity never paints with stale text.
+      // During a roll, retain one outgoing snapshot and adopt the latest target.
+      setFrame({
+        identity: transitionKey,
+        text: children,
+        outgoing: reducedMotion
+          ? null
+          : startsTransition ? frame.text : frame.outgoing,
+        revision: frame.revision + (startsTransition ? 1 : 0),
+      });
+    }
+
+    const transitioning = frame.outgoing !== null;
+    const completeTransition = useCallback(() => {
+      setFrame(current => current.revision === frame.revision && current.outgoing !== null
+        ? { ...current, outgoing: null }
+        : current);
+    }, [frame.revision]);
+    const { rootRef, currentRef, outgoingRef } = useRollingTextMotion({
+      active: transitioning,
+      returning: frame.text === frame.outgoing,
+      revision: frame.revision,
+      text: frame.text,
+      onComplete: completeTransition,
+    });
+    useImperativeHandle(ref, () => rootRef.current!, [rootRef]);
+
+    return (
+      <span
+        {...props}
+        className={classNames(styles.root, className)}
+        data-openbitfun-component="rolling-text"
+        data-transitioning={transitioning ? "true" : "false"}
+        ref={rootRef}
+      >
+        {transitioning && (
+          <span aria-hidden="true" className={styles.outgoing} data-rolling-text-part="outgoing" ref={outgoingRef}>
+            <OverflowText behavior="fade">{frame.outgoing}</OverflowText>
+          </span>
+        )}
+        <span
+          className={styles.current}
+          data-rolling-text-part="current"
+          key={frame.revision}
+          ref={currentRef}
+        >
+          <OverflowText
+            behavior={transitioning ? "fade" : behavior}
+            marqueeActive={marqueeActive}
+          >
+            {frame.text}
+          </OverflowText>
+        </span>
+      </span>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/components/RollingText/index.ts b/design-system/packages/ui/src/components/RollingText/index.ts
new file mode 100644
index 0000000000..cb45bccc10
--- /dev/null
+++ b/design-system/packages/ui/src/components/RollingText/index.ts
@@ -0,0 +1 @@
+export { RollingText, type RollingTextProps } from "./RollingText";
diff --git a/design-system/packages/ui/src/components/RollingText/useRollingTextMotion.ts b/design-system/packages/ui/src/components/RollingText/useRollingTextMotion.ts
new file mode 100644
index 0000000000..19c6c18082
--- /dev/null
+++ b/design-system/packages/ui/src/components/RollingText/useRollingTextMotion.ts
@@ -0,0 +1,99 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+interface RollingTextMotionOptions {
+  active: boolean;
+  returning: boolean;
+  revision: number;
+  text: string | number;
+  onComplete: () => void;
+}
+
+function durationInMilliseconds(value: string): number {
+  const duration = Number.parseFloat(value);
+  return Number.isFinite(duration) ? duration * (value.trim().endsWith("ms") ? 1 : 1000) : 0;
+}
+
+/** One interruptible motion owns both the line positions and its intrinsic width. */
+export function useRollingTextMotion({ active, returning, revision, text, onComplete }: RollingTextMotionOptions) {
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const currentRef = useRef<HTMLSpanElement>(null);
+  const outgoingRef = useRef<HTMLSpanElement>(null);
+  const lastWidth = useRef<number | null>(null);
+  const running = useRef<Animation[]>([]);
+  const runningRevision = useRef<number | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current;
+    const current = currentRef.current;
+    const outgoing = outgoingRef.current;
+    const view = root?.ownerDocument.defaultView;
+    if (!root || !current || !view) return;
+
+    // Read the actual in-flight positions before cancelling. A rapid replacement
+    // adopts the latest text without jumping back to either starting position.
+    const hasRunningMotion = running.current.length > 0;
+    const interrupted = hasRunningMotion && runningRevision.current === revision;
+    const fromWidth = hasRunningMotion ? root.getBoundingClientRect().width : lastWidth.current;
+    const fromCurrent = interrupted ? view.getComputedStyle(current).transform : "translateY(100%)";
+    const fromOutgoing = interrupted && outgoing ? view.getComputedStyle(outgoing).transform : "translateY(0)";
+    const previous = running.current;
+    running.current = [];
+    previous.forEach(animation => animation.cancel());
+
+    // Removing the width effect exposes the new natural, layout-constrained size.
+    // Both reads happen before paint; no hidden clone or per-frame React state.
+    const toWidth = root.getBoundingClientRect().width;
+    lastWidth.current = toWidth;
+    if (!active || !outgoing) return;
+
+    const style = view.getComputedStyle(root);
+    const duration = durationInMilliseconds(style.getPropertyValue("--_rolling-text-duration"));
+    const easing = style.getPropertyValue("--_rolling-text-easing").trim();
+    if (!root.animate || duration <= 0 || toWidth <= 0) {
+      onComplete();
+      return;
+    }
+
+    const options: KeyframeAnimationOptions = { duration, easing, fill: "both" };
+    const animations = [
+      current.animate([
+        { transform: fromCurrent },
+        { transform: returning ? "translateY(100%)" : "translateY(0)" },
+      ], options),
+      outgoing.animate([
+        { transform: fromOutgoing },
+        { transform: returning ? "translateY(0)" : "translateY(-100%)" },
+      ], options),
+      root.animate([
+        { inlineSize: `${fromWidth ?? toWidth}px` },
+        { inlineSize: `${toWidth}px` },
+      ], options),
+    ];
+    running.current = animations;
+    runningRevision.current = revision;
+    void Promise.all(animations.map(animation => animation.finished)).then(() => {
+      if (running.current === animations) onComplete();
+    }, () => {
+      // Replacement, reduced motion, and unmount cancel obsolete completions.
+    });
+  }, [active, returning, revision, text, onComplete]);
+
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current;
+    const observer = root && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (running.current.length === 0) lastWidth.current = root.getBoundingClientRect().width;
+    }) : null;
+    if (root) observer?.observe(root);
+
+    return () => {
+      observer?.disconnect();
+      const animations = running.current;
+      running.current = [];
+      animations.forEach(animation => animation.cancel());
+    };
+  }, []);
+
+  return { rootRef, currentRef, outgoingRef };
+}
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
index acb4b92200..7c83102407 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
@@ -7,6 +7,7 @@ export const tabGroupMeta = {
   name: "TabGroup",
   props: [
     { name: "items", type: "readonly TabGroupItem[]" },
+    { name: "items[].labelTransitionKey", type: "string | number" },
     { name: "value", type: "string" },
     { name: "defaultValue", type: "string" },
     { name: "onValueChange", type: "(value: string) => void" },
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
index eb54d6d306..ee7fcfdcc7 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
@@ -9,6 +9,7 @@ import {
 } from "react";
 import { classNames } from "../../internal/classNames";
 import { OverflowText } from "../../primitives/OverflowText";
+import { RollingText } from "../RollingText";
 import styles from "./TabGroup.module.css";
 
 export interface TabGroupItem {
@@ -17,6 +18,8 @@ export interface TabGroupItem {
   icon?: ReactNode;
   id?: string;
   label: ReactNode;
+  /** Opt plain text into vertical replacement without remounting the tab. */
+  labelTransitionKey?: string | number;
   panelId?: string;
   value: string;
 }
@@ -157,9 +160,20 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(function TabGr
                   {item.icon}
                 </span>
               )}
-              <OverflowText behavior="marquee" className={styles.label} data-openbitfun-part="label">
-                {item.label}
-              </OverflowText>
+              {item.labelTransitionKey !== undefined
+                && (typeof item.label === "string" || typeof item.label === "number") ? (
+                <RollingText
+                  className={styles.label}
+                  data-openbitfun-part="label"
+                  transitionKey={item.labelTransitionKey}
+                >
+                  {item.label}
+                </RollingText>
+              ) : (
+                <OverflowText behavior="marquee" className={styles.label} data-openbitfun-part="label">
+                  {item.label}
+                </OverflowText>
+              )}
             </button>
             {hasEndAction && (
               <span className={styles.endAction} data-openbitfun-part="endAction">
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index 6983021cbb..63bf962270 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -197,6 +197,7 @@ export {
 } from "./components/NavigationPanel";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Radio, type RadioProps, type RadioSize } from "./components/Radio";
+export { RollingText, type RollingTextProps } from "./components/RollingText";
 export {
   ScrollArea,
   type ScrollAreaOrientation,
diff --git a/design-system/packages/ui/src/internal/useReducedMotion.ts b/design-system/packages/ui/src/internal/useReducedMotion.ts
new file mode 100644
index 0000000000..aac1ef240f
--- /dev/null
+++ b/design-system/packages/ui/src/internal/useReducedMotion.ts
@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from "react";
+
+const query = "(prefers-reduced-motion: reduce)";
+
+function subscribe(notify: () => void) {
+  const media = window.matchMedia?.(query);
+  media?.addEventListener("change", notify);
+  return () => media?.removeEventListener("change", notify);
+}
+
+function getSnapshot() {
+  return typeof window === "undefined" || !window.matchMedia
+    ? true
+    : window.matchMedia(query).matches;
+}
+
+/** Start static during SSR; also react to preference changes during motion. */
+export function useReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, () => true);
+}
diff --git a/design-system/packages/ui/src/registry.ts b/design-system/packages/ui/src/registry.ts
index 17227bd3aa..fd569eb42f 100644
--- a/design-system/packages/ui/src/registry.ts
+++ b/design-system/packages/ui/src/registry.ts
@@ -27,6 +27,7 @@ import { numberInputMeta } from "./components/NumberInput/NumberInput.meta";
 import { numberBadgeMeta } from "./components/NumberBadge/NumberBadge.meta";
 import { pageHeaderMeta } from "./components/PageHeader/PageHeader.meta";
 import { radioMeta } from "./components/Radio/Radio.meta";
+import { rollingTextMeta } from "./components/RollingText/RollingText.meta";
 import { scrollAreaMeta } from "./components/ScrollArea/ScrollArea.meta";
 import { searchFieldMeta } from "./components/SearchField/SearchField.meta";
 import { segmentedControlMeta } from "./components/SegmentedControl/SegmentedControl.meta";
@@ -176,6 +177,7 @@ export const componentRegistry = [
   prominentToolCardMeta,
   readFileToolCardMeta,
   reviewSummaryToolCardMeta,
+  rollingTextMeta,
   runCodeToolCardMeta,
   scrollAreaMeta,
   searchFieldMeta,
diff --git a/design-system/packages/ui/tests/registry.test.mjs b/design-system/packages/ui/tests/registry.test.mjs
index 1bb4bf2525..262cf70f9d 100644
--- a/design-system/packages/ui/tests/registry.test.mjs
+++ b/design-system/packages/ui/tests/registry.test.mjs
@@ -84,6 +84,7 @@ test("registry exposes only the formal stable components", () => {
       "ProminentToolCard",
       "ReadFileToolCard",
       "ReviewSummaryToolCard",
+      "RollingText",
       "RunCodeToolCard",
       "ScrollArea",
       "SearchField",
diff --git a/design-system/packages/ui/tests/rolling-text.test.mjs b/design-system/packages/ui/tests/rolling-text.test.mjs
new file mode 100644
index 0000000000..c9e388bfbb
--- /dev/null
+++ b/design-system/packages/ui/tests/rolling-text.test.mjs
@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { RollingText, TabGroup } from "../dist/index.js";
+
+test("RollingText renders static, complete text on the server without an outgoing copy", () => {
+  const markup = renderToStaticMarkup(createElement(RollingText, { transitionKey: "a" }, "Full session title"));
+  assert.match(markup, /data-openbitfun-component="rolling-text"/);
+  assert.match(markup, /data-transitioning="false"/);
+  assert.match(markup, />Full session title</);
+  assert.doesNotMatch(markup, /data-rolling-text-part="outgoing"|aria-live/);
+  assert.equal((markup.match(/data-overflow-behavior="marquee"/g) ?? []).length, 1);
+});
+
+test("TabGroup opts plain labels into replacement without nesting overflow containers", () => {
+  const markup = renderToStaticMarkup(createElement(TabGroup, {
+    items: [
+      { value: "slot", label: "Session", labelTransitionKey: "session-a" },
+      { value: "settings", label: "Settings" },
+      { value: "rich", label: createElement("strong", null, "Rich label"), labelTransitionKey: "rich" },
+    ],
+  }));
+  assert.equal((markup.match(/data-openbitfun-component="rolling-text"/g) ?? []).length, 1);
+  assert.equal((markup.match(/data-overflow-behavior="marquee"/g) ?? []).length, 3);
+  assert.equal((markup.match(/role="tab"/g) ?? []).length, 3);
+  assert.match(markup, /<strong>Rich label<\/strong>/);
+});
+
+test("replacement uses shared spatial-motion tokens and reduced-motion styling", async () => {
+  const styles = await readFile(new URL("../src/components/RollingText/RollingText.module.css", import.meta.url), "utf8");
+  assert.match(styles, /--openbitfun-motion-duration-content-swap/);
+  assert.match(styles, /--openbitfun-motion-easing-smooth/);
+  assert.match(styles, /prefers-reduced-motion: reduce/);
+});
diff --git a/docs/architecture/session-projection.md b/docs/architecture/session-projection.md
index 0d271a287e..79a2b94dbe 100644
--- a/docs/architecture/session-projection.md
+++ b/docs/architecture/session-projection.md
@@ -104,15 +104,44 @@ record, both on subscription and after every source change. Explicit sync from
 an async opener cannot select a different session. Shell and standalone chat
 hosts share one source subscription.
 
+`sceneStore` owns resource tabs and their navigation history. A Session tab is
+keyed by `(device surface, owning workspace)` and holds only a session reference.
+Opening another session in that workspace replaces the reference in place;
+other workspace tabs retain their references and order. The owning workspace
+is the project root even when execution runs in a worktree. Workspace ids are
+preferred; older metadata falls back to scoped local/SSH roots without changing
+persisted records. Labels show only the referenced session title; workspace
+ownership stays in the resource identity. Background title updates are scoped
+to their own tabs and never follow the currently selected session.
+
+The design system's `TabGroup` receives `labelTransitionKey = sessionId` for
+session slots. Its public `RollingText` component owns vertical replacement,
+width interpolation, interruption, reduced-motion preference, and accessibility.
+Session title edits and focusing a different workspace do not replay replacement.
+The shell does not own animation snapshots or timers.
+
 `app/services/sessionSceneLifecycle.ts`, installed for the `AppLayout` lifetime,
-binds the Session scene to that selected record. When it no longer exists, the
-shell closes the Session tab through `sceneStore`, which also removes its
-navigation history. Other tabs remain available; closing the final tab exposes
-the existing tabless empty surface. Delete, archive, workspace removal, and
-device-surface changes use this same rule instead of mutation-specific UI
-callbacks. Creating or opening a session establishes the record before opening
-its scene. Loading, offline, and failed history records still exist and remain
-recoverable; absence of rendered turns is never evidence of removal.
+provides the resource activation adapter. Tab clicks, shortcuts, history, and
+close fallback all activate the workspace and session through that adapter
+before committing navigation. Workspace activation is ordered, and superseded
+navigation cannot select a session after its history finishes loading. The
+scene store handles the tab transaction and settings-draft exit; the adapter
+uses the existing session/workspace owners for resource activation.
+
+`SceneViewport` mounts one Session presentation host for all workspace tabs.
+Tab identity and scene-host identity are separate: chrome, file/terminal
+routing, voice context, and the customization facade still address the
+`session` scene. No additional global composers or runtime subscriptions are
+mounted for background tabs.
+
+When a referenced session no longer exists, reconciliation removes its tab and
+history, including background tabs. A temporary empty selection does not remove
+other records' tabs. Closing a tab does not delete or stop a session; closing the
+final tab exposes the tabless empty surface. Device-surface changes reset the
+shell tabs without deleting either device's session container. Creating or
+opening a session establishes its record first. Loading, offline, and failed
+history records remain recoverable; absence of rendered turns is never evidence
+of removal.
 
 This is frontend view reconciliation. It does not delete persisted sessions,
 create replacement sessions, or change the runtime state machine and remote
diff --git a/src/apps/data-migrator/ui/generated/design-system.css b/src/apps/data-migrator/ui/generated/design-system.css
index 70e3125ba3..b5b2867852 100644
--- a/src/apps/data-migrator/ui/generated/design-system.css
+++ b/src/apps/data-migrator/ui/generated/design-system.css
@@ -305,6 +305,7 @@
     --openbitfun-line-height-ui: 1.4;
     --openbitfun-motion-distance-sm: var(--openbitfun-space-1);
     --openbitfun-motion-duration-base: 220ms;
+    --openbitfun-motion-duration-content-swap: 320ms;
     --openbitfun-motion-duration-fast: 140ms;
     --openbitfun-motion-duration-instant: 80ms;
     --openbitfun-motion-duration-lazy: 1s;
@@ -651,6 +652,8 @@
 
     --openbitfun-motion-duration-normal: 0ms;
 
+    --openbitfun-motion-duration-content-swap: 0ms;
+
     --openbitfun-motion-duration-slow: 0ms;
 
     --openbitfun-motion-duration-loop: 0ms;
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index 0318e07bdd..217644908d 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -5,7 +5,7 @@
  * Owns all data fetching / mutation for chat sessions.
  */
 
-import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { Button, Icon, IconButton, Input, Menu, MenuItem, OverflowText, Tooltip } from '@openbitfun/ui';
 import { createPortal } from 'react-dom';
 import { Bot, Loader2, Archive, ListChecks } from 'lucide-react';
@@ -41,7 +41,7 @@ import {
   useWorkspaceSessionViewStore,
 } from '../../workspaceSessionView';
 import { stateMachineManager } from '@/flow_chat/state-machine';
-import { SessionExecutionState } from '@/flow_chat/state-machine/types';
+import { sessionNavStatusService } from '@/flow_chat/services/sessionNavStatusService';
 import { i18nService } from '@/infrastructure/i18n';
 import { resolveSessionTitle } from '@/flow_chat/utils/sessionTitle';
 import { isSessionNavRowActive } from './sessionNavSelection';
@@ -288,7 +288,14 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
   /** Second level of the session menu: pick what a Markdown export includes. */
   const [isExportScopeMenu, setIsExportScopeMenu] = useState(false);
   const [exportingSessionId, setExportingSessionId] = useState<string | null>(null);
-  const [runningSessionIds, setRunningSessionIds] = useState<Set<string>>(new Set());
+  const orderingRevision = useSyncExternalStore(
+    sessionNavStatusService.subscribeOrdering,
+    sessionNavStatusService.getOrderingSnapshot,
+    sessionNavStatusService.getOrderingSnapshot,
+  );
+  const runningSessionIds = useMemo(() => new Set(
+    [...flowChatState.sessions.keys()].filter(sessionNavStatusService.isRunning),
+  ), [flowChatState.sessions, orderingRevision]);
   const [scheduledJobsSessionId, setScheduledJobsSessionId] = useState<string | null>(null);
   const [batchWorkspace, setBatchWorkspace] = useState<WorkspaceSessionScope | null>(null);
   const editInputRef = useRef<HTMLInputElement>(null);
@@ -319,30 +326,6 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
   /** Last (scope, cursor, size) triple a buffer prefetch ran for. */
   const bufferPrefetchSignatureRef = useRef<string | null>(null);
 
-  // Subscribe to state machine changes for running status
-  useEffect(() => {
-    const updateRunningSessions = () => {
-      const running = new Set<string>();
-      for (const session of flowChatState.sessions.values()) {
-        const machine = stateMachineManager.get(session.sessionId);
-        if (
-          machine &&
-          (machine.getCurrentState() === SessionExecutionState.PROCESSING ||
-            machine.getCurrentState() === SessionExecutionState.FINISHING)
-        ) {
-          running.add(session.sessionId);
-        }
-      }
-      setRunningSessionIds(running);
-    };
-
-    updateRunningSessions();
-    const unsubscribe = stateMachineManager.subscribeGlobal(() => {
-      updateRunningSessions();
-    });
-    return () => unsubscribe();
-  }, [flowChatState.sessions]);
-
   useEffect(() => {
     const selector = (s: FlowChatState): string => {
       const parts: string[] = [s.activeSessionId ?? ''];
@@ -838,6 +821,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
         sessionOrdering,
         getTitle,
         session => runningSessionIds.has(session.sessionId),
+        sessionNavStatusService.getSortTimestamp,
       );
 
     for (const [pid, list] of childMap) {
@@ -848,7 +832,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
       topLevelSessions: [...parents].sort(compareForCurrentView),
       childrenByParent: childMap,
     };
-  }, [runningSessionIds, sessionOrdering, sessions]);
+  }, [orderingRevision, runningSessionIds, sessionOrdering, sessions]);
 
   const topLevelSessions = useMemo(
     () => allTopLevelSessions.filter(session => matchesWorkspaceSessionView(
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/sessionNavSelection.ts b/src/web-ui/src/app/components/NavPanel/sections/sessions/sessionNavSelection.ts
index c6da853437..251155b069 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/sessionNavSelection.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/sessionNavSelection.ts
@@ -1,3 +1,5 @@
+import { isSessionSceneId } from '@/app/components/SceneBar/types';
+
 interface SessionNavRowActiveInput {
   rowSessionId: string;
   activeTabId?: string | null;
@@ -7,8 +9,6 @@ interface SessionNavRowActiveInput {
   activeChildHasVisibleRow: boolean;
 }
 
-const SESSION_TAB_ID = 'session';
-
 export function isSessionNavRowActive({
   rowSessionId,
   activeTabId,
@@ -17,7 +17,7 @@ export function isSessionNavRowActive({
   activeChildParentSessionId,
   activeChildHasVisibleRow,
 }: SessionNavRowActiveInput): boolean {
-  if (activeTabId !== SESSION_TAB_ID || !activeSessionId) {
+  if (!isSessionSceneId(activeTabId) || !activeSessionId) {
     return false;
   }
 
diff --git a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.test.ts b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.test.ts
index f2d1107efe..a9c74a06e3 100644
--- a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.test.ts
@@ -40,18 +40,35 @@ describe('workspace session view model', () => {
     expect(normalizeWorkspaceSessionGrouping(undefined)).toBe('grouped');
   });
 
-  it('sorts by update time, status, creation time, and title', () => {
+  it('sorts by execution recency, status, creation time, and title', () => {
     const running = session({ sessionId: 'running', title: 'Zulu', createdAt: 10, updatedAt: 40 });
     const newer = session({ sessionId: 'newer', title: 'Alpha', createdAt: 20, updatedAt: 30 });
     const getTitle = (value: Session) => value.title || '';
     const isRunning = (value: Session) => value.sessionId === 'running';
+    const getActivityTimestamp = (value: Session) => value.sessionId === 'running' ? 40 : 30;
 
-    expect(compareWorkspaceNavSessions(running, newer, 'updated', getTitle, isRunning)).toBeLessThan(0);
+    expect(compareWorkspaceNavSessions(running, newer, 'updated', getTitle, isRunning, getActivityTimestamp)).toBeLessThan(0);
     expect(compareWorkspaceNavSessions(running, newer, 'status', getTitle, isRunning)).toBeLessThan(0);
     expect(compareWorkspaceNavSessions(running, newer, 'created', getTitle, isRunning)).toBeGreaterThan(0);
     expect(compareWorkspaceNavSessions(running, newer, 'name', getTitle, isRunning)).toBeGreaterThan(0);
   });
 
+  it('does not use mutable timestamps as a fallback or break ties in explicit name and creation order', () => {
+    const left = session({ sessionId: 'a', createdAt: 10, lastActiveAt: 100, updatedAt: 100, lastFinishedAt: 100 });
+    const right = session({ sessionId: 'b', createdAt: 10 });
+    const getTitle = (value: Session) => value.title || '';
+    for (const ordering of ['updated', 'created', 'name'] as const) {
+      expect(compareWorkspaceNavSessions(left, right, ordering, getTitle)).toBeLessThan(0);
+      expect(compareWorkspaceNavSessions(right, left, ordering, getTitle)).toBeGreaterThan(0);
+    }
+    for (const ordering of ['created', 'name'] as const) {
+      expect(compareWorkspaceNavSessions(left, right, ordering, getTitle, () => false,
+        value => value.sessionId === 'b' ? 500 : 10)).toBeLessThan(0);
+    }
+    expect(compareWorkspaceNavSessions(left, session({ sessionId: 'newer', createdAt: 20 }),
+      'updated', getTitle)).toBeGreaterThan(0);
+  });
+
   it('derives filter facets from canonical session data', () => {
     const value = session({
       status: 'error',
diff --git a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
index 7b1b1d72b0..236dd132ab 100644
--- a/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
+++ b/src/web-ui/src/app/components/NavPanel/workspaceSessionView.ts
@@ -108,9 +108,6 @@ export const useWorkspaceSessionViewStore = create<WorkspaceSessionViewState>()(
   ),
 );
 
-const getUpdatedTimestamp = (session: Session): number =>
-  session.updatedAt ?? session.lastFinishedAt ?? session.lastActiveAt ?? session.createdAt;
-
 export function deriveWorkspaceSessionStatus(
   session: Session,
   isRunning: boolean,
@@ -151,6 +148,7 @@ export function compareWorkspaceNavSessions(
   ordering: WorkspaceSessionOrdering,
   getTitle: (session: Session) => string,
   isRunning: (session: Session) => boolean = () => false,
+  getActivityTimestamp: (session: Session) => number = session => session.createdAt,
 ): number {
   if (ordering === 'name') {
     const titleDiff = getTitle(left).localeCompare(getTitle(right), undefined, {
@@ -163,14 +161,14 @@ export function compareWorkspaceNavSessions(
       - STATUS_ORDER[deriveWorkspaceSessionStatus(right, isRunning(right))];
     if (statusDiff !== 0) return statusDiff;
   } else {
-    const leftTimestamp = ordering === 'updated' ? getUpdatedTimestamp(left) : left.createdAt;
-    const rightTimestamp = ordering === 'updated' ? getUpdatedTimestamp(right) : right.createdAt;
+    const leftTimestamp = ordering === 'updated' ? getActivityTimestamp(left) : left.createdAt;
+    const rightTimestamp = ordering === 'updated' ? getActivityTimestamp(right) : right.createdAt;
     const timestampDiff = rightTimestamp - leftTimestamp;
     if (timestampDiff !== 0) return timestampDiff;
   }
 
-  const updatedDiff = getUpdatedTimestamp(right) - getUpdatedTimestamp(left);
-  return updatedDiff || right.createdAt - left.createdAt || left.sessionId.localeCompare(right.sessionId);
+  const activityDiff = ordering === 'status' ? getActivityTimestamp(right) - getActivityTimestamp(left) : 0;
+  return activityDiff || right.createdAt - left.createdAt || left.sessionId.localeCompare(right.sessionId);
 }
 
 export function matchesWorkspaceSessionView(
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.test.tsx b/src/web-ui/src/app/components/SceneBar/SceneBar.test.tsx
index 0752ce771d..2897da0747 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.test.tsx
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.test.tsx
@@ -4,7 +4,7 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { InteractionMotion } from '@/shared/utils/motionPreference';
-import type { SceneTabId } from './types';
+import type { SceneTab, SceneTabId } from './types';
 import SceneBar from './SceneBar';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -16,8 +16,9 @@ const sceneHarness = vi.hoisted(() => ({
       { id: 'settings' as const, lastUsed: 2 },
       { id: 'terminal' as const, lastUsed: 3 },
       { id: 'git' as const, lastUsed: 4 },
-    ],
+    ] as SceneTab[],
     activeTabId: 'session' as SceneTabId,
+    pendingTabId: null as SceneTabId | null,
     navigationMotion: 'instant' as InteractionMotion,
     sessionTitle: undefined as string | undefined,
     tabDefs: [
@@ -39,8 +40,8 @@ vi.mock('../../hooks/useSceneManager', () => ({
   }),
 }));
 
-vi.mock('../../hooks/useCurrentSessionTitle', () => ({
-  useCurrentSessionTitle: () => sceneHarness.state.sessionTitle ?? '',
+vi.mock('../../hooks/useSessionTabLabels', () => ({
+  useSessionTabLabels: () => ({ session: sceneHarness.state.sessionTitle ?? '' }),
 }));
 
 vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({
@@ -73,8 +74,10 @@ describe('SceneBar overflow navigation', () => {
     document.body.appendChild(container);
     root = createRoot(container);
     sceneHarness.state.activeTabId = 'session';
+    sceneHarness.state.pendingTabId = null;
     sceneHarness.state.navigationMotion = 'instant';
     sceneHarness.state.sessionTitle = undefined;
+    for (const tab of sceneHarness.state.openTabs) delete tab.session;
     sceneHarness.activateScene.mockReset();
     sceneHarness.closeScene.mockReset();
   });
@@ -148,6 +151,36 @@ describe('SceneBar overflow navigation', () => {
     expect(sceneHarness.activateScene).toHaveBeenLastCalledWith('git');
   });
 
+  it('keeps the tab and rolling label mounted when its workspace selects another session', () => {
+    const sessionSlot = sceneHarness.state.openTabs[0];
+    sessionSlot.session = { surfaceId: 'local', workspaceKey: 'workspace-a', sessionId: 'a' };
+    sceneHarness.state.sessionTitle = 'First title';
+    renderSceneBar();
+    const tab = container.querySelector<HTMLButtonElement>('[role="tab"][data-openbitfun-value="session"]')!;
+    const label = tab.querySelector('[data-openbitfun-component="rolling-text"]');
+    expect(label).not.toBeNull();
+    tab.focus();
+
+    sessionSlot.session = { ...sessionSlot.session, sessionId: 'b' };
+    sceneHarness.state.sessionTitle = 'Second title';
+    renderSceneBar();
+    expect(container.querySelector('[role="tab"][data-openbitfun-value="session"]')).toBe(tab);
+    expect(tab.querySelector('[data-openbitfun-component="rolling-text"]')).toBe(label);
+    expect(document.activeElement).toBe(tab);
+    expect(tab.textContent).toBe('Second title');
+    expect(tab.textContent).not.toContain('workspace-a');
+  });
+
+  it('marks pending navigation and lets the user return to the displayed tab', () => {
+    sceneHarness.state.activeTabId = 'settings';
+    sceneHarness.state.pendingTabId = 'session';
+    renderSceneBar();
+    expect(container.querySelector('[data-scene-bar-part="tabs"]')?.getAttribute('aria-busy')).toBe('true');
+    const settings = container.querySelector<HTMLButtonElement>('[role="tab"][data-openbitfun-value="settings"]')!;
+    act(() => settings.click());
+    expect(sceneHarness.activateScene).toHaveBeenCalledWith('settings');
+  });
+
   it('exposes overflow controls and translates a vertical wheel into horizontal movement', () => {
     renderSceneBar();
     const region = container.querySelector<HTMLElement>('[data-openbitfun-component="scene-bar"][data-openbitfun-part="tabs"]')!;
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.tsx b/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
index 059b17a3e6..8e345b7e13 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
@@ -2,7 +2,7 @@
  * SceneBar — horizontally scrollable scene-level tab bar.
  *
  * Delegates state to useSceneManager.
- * The Session tab uses the current session title as its single visible label.
+ * Session tabs show only the referenced session title.
  */
 
 import React, { useCallback } from 'react';
@@ -10,7 +10,7 @@ import React, { useCallback } from 'react';
 import { Icon, TabGroup, type TabGroupItem } from '@openbitfun/ui';
 import { useSceneTabNavigation } from './useSceneTabNavigation';
 import { useSceneManager } from '../../hooks/useSceneManager';
-import { useCurrentSessionTitle } from '../../hooks/useCurrentSessionTitle';
+import { useSessionTabLabels } from '../../hooks/useSessionTabLabels';
 import { isSceneTabClosable } from '../../scenes/registry';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import type { SceneTabId } from './types';
@@ -33,12 +33,14 @@ const SceneBar: React.FC<SceneBarProps> = ({
   const {
     openTabs,
     activeTabId,
+    pendingTabId,
     navigationMotion,
     tabDefs,
     activateScene,
     closeScene,
   } = useSceneManager();
-  const sessionTitle = useCurrentSessionTitle();
+  const sessionLabels = useSessionTabLabels(openTabs);
+  const selectedTabId = pendingTabId ?? activeTabId;
   const { t } = useI18n('common');
   const sceneBarClassName = `openbitfun-scene-bar ${className}`.trim();
   const {
@@ -49,7 +51,7 @@ const SceneBar: React.FC<SceneBarProps> = ({
     handleWheel: handleTabsWheel,
     scrollByPage: scrollTabsByPage,
   } = useSceneTabNavigation({
-    activeTabId,
+    activeTabId: selectedTabId,
     navigationMotion,
     openTabIds: openTabs.map(tab => tab.id),
   });
@@ -90,15 +92,14 @@ const SceneBar: React.FC<SceneBarProps> = ({
     if (!def) return items;
 
     const translatedLabel = def.labelKey ? t(def.labelKey) : def.label;
-    const displayLabel = tab.id === 'session' && sessionTitle
-      ? sessionTitle
-      : translatedLabel;
+    const displayLabel = sessionLabels[tab.id] || translatedLabel;
     const closeLabel = t('sceneBar.closeTab', { label: displayLabel });
     const closable = isSceneTabClosable(def);
 
     items.push({
       value: tab.id,
       label: displayLabel,
+      labelTransitionKey: tab.session?.sessionId,
       // Keep the close hit target stationary between pointer down and up;
       // shrinking it can retarget the click at the button edge (issue #2210).
       endAction: closable ? (
@@ -154,7 +155,8 @@ const SceneBar: React.FC<SceneBarProps> = ({
           aria-label={t('sceneBar.tabsLabel')}
           items={tabItems}
           size="sm"
-          value={activeTabId ?? undefined}
+          value={selectedTabId ?? undefined}
+          aria-busy={Boolean(pendingTabId)}
           onValueChange={handleTabValueChange}
           onScroll={handleTabsScroll}
           onWheel={handleTabsWheel}
diff --git a/src/web-ui/src/app/components/SceneBar/types.ts b/src/web-ui/src/app/components/SceneBar/types.ts
index 52461ef4ea..0960e2cdd0 100644
--- a/src/web-ui/src/app/components/SceneBar/types.ts
+++ b/src/web-ui/src/app/components/SceneBar/types.ts
@@ -30,8 +30,29 @@ export type SceneTabId =
   | 'insights'
   | 'shell'
   | 'panel-view'
+  | `session:${string}`
   | `miniapp:${string}`;
 
+/** A tab owns a resource reference, never a copy of the runtime session. */
+export interface SessionSceneTarget {
+  surfaceId: string;
+  workspaceKey: string;
+  sessionId: string;
+}
+
+export function isSessionSceneId(id: string | null | undefined): boolean {
+  return id === 'session' || Boolean(id?.startsWith('session:'));
+}
+
+/** Several workspace tabs share the one active-session presentation host. */
+export function getSceneViewId(id: SceneTabId): SceneTabId {
+  return isSessionSceneId(id) ? 'session' : id;
+}
+
+export function getSessionSceneTabId(target: SessionSceneTarget): SceneTabId {
+  return `session:${encodeURIComponent(JSON.stringify([target.surfaceId, target.workspaceKey]))}`;
+}
+
 /** Static definition (from registry) for a scene tab type */
 export interface SceneTabDef {
   id: SceneTabId;
@@ -43,7 +64,7 @@ export interface SceneTabDef {
   pinned: boolean;
   /** If false, the user cannot close the tab. Defaults to true. */
   closable?: boolean;
-  /** Only one instance allowed */
+  /** One presentation host; resource tabs may share that host. */
   singleton: boolean;
   /** Open on app start */
   defaultOpen: boolean;
@@ -52,6 +73,7 @@ export interface SceneTabDef {
 /** Runtime instance of an open scene. */
 export interface SceneTab {
   id: SceneTabId;
+  session?: SessionSceneTarget;
   /** Last-used timestamp for activate/close fallback (e.g. which tab to activate after close). */
   lastUsed: number;
 }
diff --git a/src/web-ui/src/app/creation/creationUiApi.ts b/src/web-ui/src/app/creation/creationUiApi.ts
index 0e62e9ec89..bf872390da 100644
--- a/src/web-ui/src/app/creation/creationUiApi.ts
+++ b/src/web-ui/src/app/creation/creationUiApi.ts
@@ -3,7 +3,7 @@ import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
 import { isPeerDeviceModeActive } from '@/infrastructure/peer-device/peerModeFlag';
 import { createCreationCapabilities } from '@/infrastructure/creation/creationCapabilities';
 import type { ProductControlCapabilityId, ProductControlOperationId, ProductControlOptionId } from '@/infrastructure/api/generated/productControl';
-import { useSceneStore } from '../stores/sceneStore';
+import { selectActiveSceneId, useSceneStore } from '../stores/sceneStore';
 
 export const CREATION_PARTS = Object.freeze({
   shell: '[data-openbitfun-component="app-layout"][data-openbitfun-part="root"]',
@@ -29,7 +29,7 @@ export function createCreationUiApi(signal: AbortSignal) {
     assertActive();
     return {
       ...capabilities.inspect(),
-      scene: useSceneStore.getState().activeTabId,
+      scene: selectActiveSceneId(useSceneStore.getState()),
       parts: Object.fromEntries(Object.entries(CREATION_PARTS).map(([name, selector]) =>
         [name, { selector, present: document.querySelector(selector) !== null }])),
       slots: CREATION_SLOTS.map(id => {
@@ -40,7 +40,7 @@ export function createCreationUiApi(signal: AbortSignal) {
   };
   cleanups.add(useSceneStore.subscribe((state, previous) => {
     if (!signal.aborted && !disposed && !isPeerDeviceModeActive() && state.activeTabId !== previous.activeTabId) {
-      void capabilities.events.emit('scene.changed', { scene: state.activeTabId });
+      void capabilities.events.emit('scene.changed', { scene: selectActiveSceneId(state) });
     }
   }));
   const api = Object.freeze({
@@ -61,11 +61,11 @@ export function createCreationUiApi(signal: AbortSignal) {
       cleanups.add(() => root.remove());
       return root;
     },
-    getScene() { assertActive(); return useSceneStore.getState().activeTabId; },
+    getScene() { assertActive(); return selectActiveSceneId(useSceneStore.getState()); },
     onSceneChange(listener: (id: string | null) => void) {
       assertActive();
       const unsubscribe = useSceneStore.subscribe((state, previous) => {
-        if (!signal.aborted && !isPeerDeviceModeActive() && state.activeTabId !== previous.activeTabId) listener(state.activeTabId);
+        if (!signal.aborted && !isPeerDeviceModeActive() && state.activeTabId !== previous.activeTabId) listener(selectActiveSceneId(state));
       });
       cleanups.add(unsubscribe);
       return unsubscribe;
diff --git a/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts b/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
index 7456d0ff06..dd95bad5e8 100644
--- a/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
+++ b/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
@@ -11,7 +11,7 @@ describe('global search ownership', () => {
     expect(source('src/app/components/NavPanel/MainNav.tsx')).not.toContain('NavSearchDialog');
   });
 
-  it('reuses one design-system search presentation in the session right-panel empty state', () => {
+  it('keeps the shared search presentation outside the session right-panel empty state', () => {
     const globalSearch = source('src/app/global-search/GlobalSearchRoot.tsx');
     const globalSearchStyles = source('src/app/global-search/GlobalSearchRoot.scss');
     const auxPane = source('src/app/scenes/session/AuxPane.tsx');
@@ -22,7 +22,7 @@ describe('global search ownership', () => {
 
     expect(globalSearch).toContain('export const GlobalSearchContent');
     expect(globalSearch).toContain('variant="modal"');
-    expect(auxPane).toContain('emptyState={<GlobalSearchContent active={isSceneActive} variant="embedded" />}');
+    expect(auxPane).not.toContain('GlobalSearchContent');
     expect(auxPane).toContain('missionControlEnabled={false}');
     expect(contentCanvas).toContain('<EmptyState onClose={disablePopOut ? undefined : collapsePanel}>');
     expect(contentCanvas).toContain(
diff --git a/src/web-ui/src/app/global-search/productActionActivator.ts b/src/web-ui/src/app/global-search/productActionActivator.ts
index 4375cc82b8..7362465ff3 100644
--- a/src/web-ui/src/app/global-search/productActionActivator.ts
+++ b/src/web-ui/src/app/global-search/productActionActivator.ts
@@ -1,3 +1,4 @@
+import { isSessionSceneId } from '@/app/components/SceneBar/types';
 import { useSceneStore } from '@/app/stores/sceneStore';
 import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
 import { openEcosystemCompatibility } from '@/app/scenes/ecosystem-compatibility/ecosystemCompatibilityStore';
@@ -33,7 +34,7 @@ export async function activateProductAction(
       window.dispatchEvent(new Event('nav:new-project'));
       return;
     case 'surface.browser.open':
-      if (sceneStore.activeTabId === 'session') {
+      if (isSessionSceneId(sceneStore.activeTabId)) {
         window.dispatchEvent(new CustomEvent('agent-create-tab', {
           detail: {
             type: 'browser',
diff --git a/src/web-ui/src/app/hooks/index.ts b/src/web-ui/src/app/hooks/index.ts
index 289f15d2ee..ab14e65fad 100644
--- a/src/web-ui/src/app/hooks/index.ts
+++ b/src/web-ui/src/app/hooks/index.ts
@@ -6,5 +6,5 @@ export * from './useApp';
 export * from './useWindowControls';
 export * from './useSceneManager';
 export * from './useNavHistory';
-export * from './useCurrentSessionTitle';
+export * from './useSessionTabLabels';
 export * from './useGlobalSceneShortcuts';
diff --git a/src/web-ui/src/app/hooks/useCurrentSessionTitle.ts b/src/web-ui/src/app/hooks/useCurrentSessionTitle.ts
deleted file mode 100644
index 9a423c1be6..0000000000
--- a/src/web-ui/src/app/hooks/useCurrentSessionTitle.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * useCurrentSessionTitle — returns the active FlowChat session title.
- * Subscribes to flowChatStore so the value updates reactively.
- */
-
-import { useState, useEffect } from 'react';
-import { flowChatStore } from '../../flow_chat/store/FlowChatStore';
-
-export function useCurrentSessionTitle(): string {
-  const [title, setTitle] = useState<string>(() => {
-    const s = flowChatStore.getState();
-    const session = s.activeSessionId ? s.sessions.get(s.activeSessionId) : undefined;
-    return session?.title ?? '';
-  });
-
-  useEffect(() => {
-    const unsubscribe = flowChatStore.subscribe(state => {
-      const session = state.activeSessionId ? state.sessions.get(state.activeSessionId) : undefined;
-      setTitle(session?.title ?? '');
-    });
-    return unsubscribe;
-  }, []);
-
-  return title;
-}
diff --git a/src/web-ui/src/app/hooks/useSceneManager.ts b/src/web-ui/src/app/hooks/useSceneManager.ts
index e0e50d03de..ada6d3a0a4 100644
--- a/src/web-ui/src/app/hooks/useSceneManager.ts
+++ b/src/web-ui/src/app/hooks/useSceneManager.ts
@@ -5,7 +5,7 @@
  * write to the same Zustand store, so state is always in sync.
  */
 
-import { SCENE_TAB_REGISTRY, getMiniAppSceneDef } from '../scenes/registry';
+import { SCENE_TAB_REGISTRY, getMiniAppSceneDef, getSceneDef } from '../scenes/registry';
 import type { SceneTabDef, SceneTabId } from '../components/SceneBar/types';
 import { useSceneStore } from '../stores/sceneStore';
 import { useMiniAppStore } from '../scenes/miniapps/miniAppStore';
@@ -15,6 +15,7 @@ import { useI18n } from '@/infrastructure/i18n';
 export interface UseSceneManagerReturn {
   openTabs: ReturnType<typeof useSceneStore.getState>['openTabs'];
   activeTabId: ReturnType<typeof useSceneStore.getState>['activeTabId'];
+  pendingTabId: ReturnType<typeof useSceneStore.getState>['pendingTabId'];
   navigationMotion: ReturnType<typeof useSceneStore.getState>['navigationMotion'];
   navigationSequence: ReturnType<typeof useSceneStore.getState>['navigationSequence'];
   tabDefs: SceneTabDef[];
@@ -27,6 +28,7 @@ export function useSceneManager(): UseSceneManagerReturn {
   const {
     openTabs,
     activeTabId,
+    pendingTabId,
     navigationMotion,
     navigationSequence,
     activateScene,
@@ -45,12 +47,17 @@ export function useSceneManager(): UseSceneManagerReturn {
       return getMiniAppSceneDef(appId, localizedName ?? app?.name);
     });
 
+  const sessionDefs: SceneTabDef[] = openTabs
+    .filter(tab => tab.session)
+    .map(tab => ({ ...getSceneDef('session')!, id: tab.id }));
+
   return {
     openTabs,
     activeTabId,
+    pendingTabId,
     navigationMotion,
     navigationSequence,
-    tabDefs: [...SCENE_TAB_REGISTRY, ...miniAppDefs],
+    tabDefs: [...SCENE_TAB_REGISTRY, ...sessionDefs, ...miniAppDefs],
     activateScene,
     openScene,
     closeScene,
diff --git a/src/web-ui/src/app/hooks/useSessionTabLabels.test.tsx b/src/web-ui/src/app/hooks/useSessionTabLabels.test.tsx
new file mode 100644
index 0000000000..2016ebbf2e
--- /dev/null
+++ b/src/web-ui/src/app/hooks/useSessionTabLabels.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, expect, it } from 'vitest';
+import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
+import type { Session } from '@/flow_chat/types/flow-chat';
+import type { SceneTab } from '../components/SceneBar/types';
+import { useSessionTabLabels } from './useSessionTabLabels';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  flowChatStore.setState(state => ({ ...state, sessions: new Map(), activeSessionId: null }));
+});
+
+it('projects each referenced title independently of focus and updates replaced resources synchronously', () => {
+  const a: Session = {
+    sessionId: 'a', title: 'First task', workspacePath: '/alpha', config: {},
+    dialogTurns: [], status: 'idle', createdAt: 1, lastActiveAt: 1, error: null,
+  };
+  const b: Session = { ...a, sessionId: 'b', title: 'Second task', workspacePath: '/beta' };
+  flowChatStore.setState(state => ({ ...state, sessions: new Map([['a', a], ['b', b]]), activeSessionId: 'b' }));
+  let tabs: SceneTab[] = [
+    { id: 'session:alpha', lastUsed: 1, session: { surfaceId: 'local', workspaceKey: 'alpha', sessionId: 'a' } },
+    { id: 'session:beta', lastUsed: 2, session: { surfaceId: 'local', workspaceKey: 'beta', sessionId: 'b' } },
+  ];
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  let labels: Record<string, string> = {};
+  function LabelObserver() { labels = useSessionTabLabels(tabs); return null; }
+  try {
+    act(() => root.render(<LabelObserver />));
+    expect(labels).toEqual({ 'session:alpha': 'First task', 'session:beta': 'Second task' });
+    act(() => {
+      flowChatStore.setState(state => ({
+        ...state, sessions: new Map(state.sessions).set('a', { ...a, title: 'Renamed in background' }),
+      }));
+    });
+    expect(labels['session:alpha']).toBe('Renamed in background');
+    expect(labels['session:beta']).toBe('Second task');
+    tabs = [{ ...tabs[0], session: { ...tabs[0].session!, sessionId: 'b' } }];
+    act(() => root.render(<LabelObserver />));
+    expect(labels).toEqual({ 'session:alpha': 'Second task' });
+  } finally {
+    act(() => root.unmount());
+  }
+});
diff --git a/src/web-ui/src/app/hooks/useSessionTabLabels.ts b/src/web-ui/src/app/hooks/useSessionTabLabels.ts
new file mode 100644
index 0000000000..7f6cdf8f72
--- /dev/null
+++ b/src/web-ui/src/app/hooks/useSessionTabLabels.ts
@@ -0,0 +1,36 @@
+import { useMemo, useSyncExternalStore } from 'react';
+import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
+import type { SceneTab } from '../components/SceneBar/types';
+import { getActiveSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
+
+function readSessionTabLabels(tabs: readonly SceneTab[]): Record<string, string> {
+  const source = flowChatStore.getState();
+  const labels: Record<string, string> = {};
+  for (const tab of tabs) {
+    if (!tab.session || tab.session.surfaceId !== getActiveSurfaceId()) continue;
+    const session = source.sessions.get(tab.session.sessionId);
+    if (!session) continue;
+    labels[tab.id] = session.title ?? '';
+  }
+  return labels;
+}
+
+function subscribeToLabels(notify: () => void): () => void {
+  return flowChatStore.subscribe(notify);
+}
+
+/** A synchronous resource projection with stable snapshots during streaming. */
+export function useSessionTabLabels(tabs: readonly SceneTab[]): Record<string, string> {
+  const getSnapshot = useMemo(() => {
+    let snapshot: Record<string, string> = {};
+    return () => {
+      const next = readSessionTabLabels(tabs);
+      if (Object.keys(snapshot).length !== Object.keys(next).length
+        || Object.entries(next).some(([id, label]) => snapshot[id] !== label)) {
+        snapshot = next;
+      }
+      return snapshot;
+    };
+  }, [tabs]);
+  return useSyncExternalStore(subscribeToLabels, getSnapshot, getSnapshot);
+}
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.tsx b/src/web-ui/src/app/layout/WorkspaceBody.tsx
index b0950d9b3c..01e1b44466 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.tsx
+++ b/src/web-ui/src/app/layout/WorkspaceBody.tsx
@@ -18,7 +18,7 @@ import { SceneChromeProvider, SceneTopBar } from '../components/SceneTopBar';
 import { SceneViewport } from '../scenes';
 import TerminalActionBridge from '../scenes/terminal/TerminalActionBridge';
 import { useApp } from '../hooks/useApp';
-import { useSceneStore } from '../stores/sceneStore';
+import { selectActiveSceneId, useSceneStore } from '../stores/sceneStore';
 import './WorkspaceBody.scss';
 
 const NAV_DEFAULT_WIDTH = 300;
@@ -49,7 +49,7 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
 }) => {
   const { workspace: currentWorkspace } = useCurrentWorkspace();
   const { state, toggleLeftPanel } = useApp();
-  const activeSceneId = useSceneStore(sceneState => sceneState.activeTabId);
+  const activeSceneId = useSceneStore(selectActiveSceneId);
   const isNavCollapsed = state.layout.leftPanelCollapsed;
   const [navWidth, setNavWidth] = useState(NAV_DEFAULT_WIDTH);
   const navAreaRef = useRef<HTMLDivElement>(null);
diff --git a/src/web-ui/src/app/scenes/SceneViewport.test.tsx b/src/web-ui/src/app/scenes/SceneViewport.test.tsx
index b1f5447cc8..f0a4ff6e28 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.test.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.test.tsx
@@ -129,6 +129,21 @@ describe('SceneViewport transitions', () => {
     expect(container.querySelector('[role="tab"]')).toBeNull();
   });
 
+  it('shares one mounted Session host across workspace tab identities', () => {
+    sceneHarness.state.openTabs = [
+      { id: 'session:workspace-a', lastUsed: 1 },
+      { id: 'session:workspace-b', lastUsed: 2 },
+    ];
+    sceneHarness.state.activeTabId = 'session:workspace-a';
+    act(() => root.render(<SceneViewport />));
+    const host = container.querySelector('[data-testid="session-scene-content"]');
+    expect(container.querySelectorAll('[data-testid="session-scene-content"]')).toHaveLength(1);
+    sceneHarness.state.activeTabId = 'session:workspace-b';
+    sceneHarness.state.navigationSequence++;
+    act(() => root.render(<SceneViewport />));
+    expect(container.querySelector('[data-testid="session-scene-content"]')).toBe(host);
+  });
+
   it('keeps one scene visible while a lazy pointer target becomes ready', async () => {
     act(() => root.render(<SceneViewport />));
     expect(visibleScenes().map(scene => scene.getAttribute('data-scene-id'))).toEqual(['session']);
diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
index ed4d370a3d..071ba66c17 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -1,8 +1,9 @@
 /**
  * SceneViewport — renders the active scene component.
  *
- * All open scenes stay mounted, but only the active tab is visible, preserving
- * state across tab switches until the user explicitly closes a scene.
+ * Open scene hosts stay mounted, but only the active host is visible. Workspace
+ * session tabs share one Session host backed by the authoritative selection;
+ * their resource identity is independent of the host's mounting lifetime.
  *
  * When no tabs are open, the viewport renders WelcomeScene as a shell-owned
  * landing surface rather than manufacturing a tab for it.
@@ -18,6 +19,7 @@ import React, {
   useState,
 } from 'react';
 import type { SceneTabId } from '../components/SceneBar/types';
+import { getSceneViewId } from '../components/SceneBar/types';
 import { useSceneManager } from '../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useDialogCompletionNotify } from '../hooks/useDialogCompletionNotify';
@@ -94,7 +96,7 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
     navigationSequence,
   } = useSceneManager();
   const { t } = useI18n('common');
-  const activeRenderedSceneId: RenderedSceneId = activeTabId ?? EMPTY_SCENE_ID;
+  const activeRenderedSceneId: RenderedSceneId = activeTabId ? getSceneViewId(activeTabId) : EMPTY_SCENE_ID;
   const [transition, setTransition] = useState<SceneTransition | null>(null);
   const [readyVersion, setReadyVersion] = useState(0);
   const readySceneIdsRef = useRef<Set<RenderedSceneId>>(new Set([EMPTY_SCENE_ID]));
@@ -122,9 +124,10 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
       ? null
       : transition;
   const outgoingTabId = pendingTransition?.outgoingTabId ?? null;
-  const renderedTabIds: RenderedSceneId[] = openTabs.length === 0
-    ? [EMPTY_SCENE_ID]
-    : openTabs.map(tab => tab.id);
+  // Session tabs are resource bookmarks into a shared projection. Mounting one
+  // SessionScene per tab would duplicate global composers, listeners and panes.
+  const renderedTabIds: RenderedSceneId[] = [...new Set(openTabs.map(tab => getSceneViewId(tab.id)))];
+  if (activeTabId === null) renderedTabIds.push(EMPTY_SCENE_ID);
   if (outgoingTabId && !renderedTabIds.includes(outgoingTabId)) {
     renderedTabIds.push(outgoingTabId);
   }
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
index a872af1995..328ace6b96 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
@@ -29,7 +29,8 @@
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
-    height: 32px;
+    gap: var(--openbitfun-space-1);
+    height: var(--openbitfun-control-height-sm);
     padding: 0 var(--openbitfun-space-2);
   }
 
@@ -37,12 +38,15 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    gap: 2px;
+    gap: calc(var(--openbitfun-space-1) / 2);
   }
 
   &__workspace {
-    padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
-    border-bottom: 1px solid var(--openbitfun-color-border-subtle);
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-1);
+    padding: var(--openbitfun-space-1) var(--openbitfun-space-2);
+    border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
     min-inline-size: 0;
   }
 
@@ -50,31 +54,42 @@
     display: flex;
     align-items: center;
     gap: var(--openbitfun-space-2);
-    inline-size: 100%;
+    flex: 1;
     min-inline-size: 0;
-    padding: 4px 0;
+    min-block-size: var(--openbitfun-layout-navigation-panel-item-height);
+    padding: var(--openbitfun-space-1) var(--openbitfun-space-2);
     border: 0;
+    border-radius: var(--openbitfun-layout-navigation-panel-item-radius);
     background: transparent;
     color: var(--openbitfun-color-content-primary);
     font: inherit;
     font-size: var(--openbitfun-type-label-md-font-size);
     font-weight: var(--openbitfun-type-label-selected-font-weight);
+    line-height: var(--openbitfun-type-label-md-line-height);
     text-align: start;
     cursor: pointer;
 
+    &:hover:not(:disabled) { background: var(--openbitfun-color-action-quiet-hover); }
     &:disabled { cursor: default; }
-    > .openbitfun-overflow-text { flex: 1; }
+    > [data-openbitfun-component='icon'] { color: var(--openbitfun-color-content-muted); }
+  }
+
+  &__workspace-name {
+    flex: 1;
+    min-inline-size: 0;
   }
 
   &__location {
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-space-2);
+    flex: 0 1 auto;
     min-inline-size: 0;
-    padding-block: 2px;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-label-xs-font-size);
-    > span:first-child { flex-shrink: 0; }
+    max-inline-size: 40%;
+
+    > [data-openbitfun-component='status-pill'] {
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
   }
 
   &__sections {
@@ -88,12 +103,12 @@
   &__section {
     display: flex;
     flex-direction: column;
-    min-block-size: 32px;
+    min-block-size: var(--openbitfun-control-height-sm);
     overflow: hidden;
   }
 
   &__section--terminals {
-    border-top: 1px solid var(--openbitfun-color-border-subtle);
+    border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
   }
 
   &__section-toggle {
@@ -103,15 +118,29 @@
     min-inline-size: 0;
     flex: 1;
     align-self: stretch;
+    margin-block: calc(var(--openbitfun-space-1) / 2);
     border: 0;
-    padding: 0;
+    border-radius: var(--openbitfun-radius-xs);
+    padding: 0 var(--openbitfun-space-1);
     background: transparent;
     color: var(--openbitfun-color-content-secondary);
     font: inherit;
     font-size: var(--openbitfun-type-label-sm-font-size);
     font-weight: var(--openbitfun-type-label-selected-font-weight);
+    line-height: var(--openbitfun-type-label-sm-line-height);
     text-align: start;
     cursor: pointer;
+
+    &:hover {
+      background: var(--openbitfun-color-action-quiet-hover);
+      color: var(--openbitfun-color-content-primary);
+    }
+
+    > [data-openbitfun-component='icon'] { color: var(--openbitfun-color-content-muted); }
+  }
+
+  &__section-label {
+    min-inline-size: 0;
   }
 
   &__section-body {
@@ -124,6 +153,7 @@
   }
 
   &__count {
+    flex-shrink: 0;
     margin-inline-start: var(--openbitfun-space-1);
     font-size: var(--openbitfun-type-label-xs-font-size);
     font-weight: var(--openbitfun-type-label-md-font-weight);
@@ -140,18 +170,22 @@
   }
 
   &__terminal-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--openbitfun-space-1) / 2);
     overflow: auto;
     overscroll-behavior: contain;
     min-block-size: 0;
-    padding: 2px var(--openbitfun-space-2) var(--openbitfun-space-2);
+    padding: calc(var(--openbitfun-space-1) / 2) var(--openbitfun-space-2) var(--openbitfun-space-2);
     scrollbar-gutter: stable;
   }
 
   &__terminal-row {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     min-inline-size: 0;
-    border-radius: var(--openbitfun-radius-sm);
+    border-radius: var(--openbitfun-layout-navigation-panel-item-radius);
     &:hover, &:focus-within { background: var(--openbitfun-color-action-quiet-hover); }
     &.is-selected { background: var(--openbitfun-color-selection-surface); }
   }
@@ -162,7 +196,8 @@
     gap: var(--openbitfun-space-2);
     flex: 1;
     min-inline-size: 0;
-    padding: 7px var(--openbitfun-space-1);
+    min-block-size: var(--openbitfun-control-height-md);
+    padding: var(--openbitfun-space-1) var(--openbitfun-space-2);
     border: 0;
     border-radius: inherit;
     background: transparent;
@@ -170,12 +205,13 @@
     text-align: start;
     font: inherit;
     font-size: var(--openbitfun-type-label-sm-font-size);
+    line-height: var(--openbitfun-type-label-sm-line-height);
     cursor: pointer;
     &:disabled { cursor: default; }
-    > svg { flex-shrink: 0; }
+    > [data-openbitfun-component='icon'] { color: var(--openbitfun-color-content-muted); }
   }
 
-  &__terminal-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; gap: 2px; }
+  &__terminal-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; gap: calc(var(--openbitfun-space-1) / 2); }
   &__terminal-meta {
     display: flex;
     align-items: center;
@@ -192,7 +228,7 @@
     &[data-status='running'] { color: var(--openbitfun-color-status-success-content); }
     &[data-status='unknown'] { color: var(--openbitfun-color-status-warning-content); }
   }
-  &__terminal-actions { display: flex; flex-shrink: 0; align-items: center; padding-inline-end: 2px; }
+  &__terminal-actions { display: flex; flex-shrink: 0; align-items: center; padding-inline-end: var(--openbitfun-space-1); }
   &__empty {
     margin: 0;
     padding: var(--openbitfun-space-2);
diff --git a/src/web-ui/src/app/scenes/registry.ts b/src/web-ui/src/app/scenes/registry.ts
index c26d1b1c45..ae7cdfc733 100644
--- a/src/web-ui/src/app/scenes/registry.ts
+++ b/src/web-ui/src/app/scenes/registry.ts
@@ -21,6 +21,7 @@ import {
   Network,
 } from 'lucide-react';
 import type { SceneTabDef, SceneTabIcon, SceneTabId } from '../components/SceneBar/types';
+import { getSceneViewId } from '../components/SceneBar/types';
 
 function catalogSceneIcon(name: IconName): SceneTabIcon {
   return function CatalogSceneIcon() {
@@ -182,7 +183,7 @@ export const SCENE_TAB_REGISTRY: SceneTabDef[] = [
 ];
 
 export function getSceneDef(id: SceneTabId): SceneTabDef | undefined {
-  return SCENE_TAB_REGISTRY.find(d => d.id === id);
+  return SCENE_TAB_REGISTRY.find(d => d.id === getSceneViewId(id));
 }
 
 /** Shared closeability policy for the scene store and every tab interaction. */
diff --git a/src/web-ui/src/app/scenes/session/AuxPane.appearance.ts b/src/web-ui/src/app/scenes/session/AuxPane.appearance.ts
index 9094c91731..76a541fe1b 100644
--- a/src/web-ui/src/app/scenes/session/AuxPane.appearance.ts
+++ b/src/web-ui/src/app/scenes/session/AuxPane.appearance.ts
@@ -1,2 +1,5 @@
 import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-export const auxPaneAppearanceDescriptor: AppearanceSurfaceDescriptor = { id: 'aux-pane', parts: [{ id: 'root' }] };
+export const auxPaneAppearanceDescriptor: AppearanceSurfaceDescriptor = {
+  id: 'aux-pane',
+  parts: [{ id: 'root' }, { id: 'emptyState' }],
+};
diff --git a/src/web-ui/src/app/scenes/session/AuxPane.scss b/src/web-ui/src/app/scenes/session/AuxPane.scss
index 78e4808ed9..b3c77546d6 100644
--- a/src/web-ui/src/app/scenes/session/AuxPane.scss
+++ b/src/web-ui/src/app/scenes/session/AuxPane.scss
@@ -11,6 +11,23 @@
   flex: 1 1 auto;
   overflow: hidden;
 
+  &__empty-state {
+    display: grid;
+    place-items: center;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--openbitfun-space-6);
+    color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-body-sm-font-family);
+    font-size: var(--openbitfun-type-body-sm-font-size);
+    font-weight: var(--openbitfun-type-body-sm-font-weight);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+    letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
+    text-align: center;
+  }
+
   &__tabbed-panel {
     height: 100%;
     width: 100%;
diff --git a/src/web-ui/src/app/scenes/session/AuxPane.tsx b/src/web-ui/src/app/scenes/session/AuxPane.tsx
index 137b48dae2..c076caee11 100644
--- a/src/web-ui/src/app/scenes/session/AuxPane.tsx
+++ b/src/web-ui/src/app/scenes/session/AuxPane.tsx
@@ -7,13 +7,13 @@
 
 import { forwardRef, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
 import { ContentCanvas, useCanvasStore } from '../../components/panels/content-canvas';
-import { GlobalSearchContent } from '../../global-search/GlobalSearchRoot';
 import {
   switchAgentCanvasWorkspace,
   removeAgentCanvasSnapshot,
 } from '../../components/panels/content-canvas/stores';
 import { workspaceManager } from '@/infrastructure/services/business/workspaceManager';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { useI18n } from '@/infrastructure/i18n';
 import type { PanelContent as OldPanelContent } from '../../components/panels/base/types';
 import type { PanelContent } from '../../components/panels/content-canvas/types';
 import { createLogger } from '@/shared/utils/logger';
@@ -38,6 +38,7 @@ interface AuxPaneProps {
 
 const AuxPane = forwardRef<AuxPaneRef, AuxPaneProps>(
   ({ workspacePath, isSceneActive = true, terminalResizeSuspended = false }, ref) => {
+    const { t } = useI18n('components');
     const { workspace } = useCurrentWorkspace();
     const workspaceId = workspace?.id;
 
@@ -140,7 +141,15 @@ const AuxPane = forwardRef<AuxPaneRef, AuxPaneProps>(
           onBeforeClose={handleBeforeClose}
           terminalResizeSuspended={terminalResizeSuspended}
           missionControlEnabled={false}
-          emptyState={<GlobalSearchContent active={isSceneActive} variant="embedded" />}
+          emptyState={
+            <div
+              className="openbitfun-aux-pane__empty-state"
+              data-openbitfun-component="aux-pane"
+              data-openbitfun-part="emptyState"
+            >
+              {t('canvas.noContentOpen')}
+            </div>
+          }
         />
       </div>
     );
diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
index 904dc336aa..dac1ee83dc 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
@@ -1,6 +1,5 @@
 /**
- * Welcome is the quiet landing scene inside the shared scene surface. Composer
- * integration is intentionally outside this phase.
+ * The brand and rotating welcome share one calm, unbroken line.
  */
 .welcome-scene {
   position: relative;
@@ -12,8 +11,9 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
+  container-type: inline-size;
   background: var(--openbitfun-color-surface-scene);
-  animation: welcome-scene-reveal 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation: welcome-scene-reveal var(--openbitfun-motion-duration-normal) var(--openbitfun-motion-easing-enter) both;
 
   &__content {
     display: flex;
@@ -22,43 +22,82 @@
     justify-content: center;
     min-width: 0;
     min-height: 0;
-    padding: clamp(var(--openbitfun-space-6), 7vh, var(--openbitfun-space-12)) var(--openbitfun-space-6);
+    padding: var(--openbitfun-space-6);
+    padding-block-end: max(var(--openbitfun-space-6), 12vh);
   }
 
   &__greeting {
     display: flex;
-    flex-direction: column;
+    flex-flow: row nowrap;
     align-items: center;
-    gap: var(--openbitfun-space-3);
-    max-width: 760px;
+    gap: 0;
+    max-width: 100%;
     text-align: center;
   }
 
-  &__title {
+  &__logo {
+    display: block;
+    width: 56px;
+    height: 56px;
+    flex-shrink: 0;
+    background-color: var(--openbitfun-color-content-primary);
+    -webkit-mask: url('/brand/openbitfun-mark.svg') center / contain no-repeat;
+    mask: url('/brand/openbitfun-mark.svg') center / contain no-repeat;
+  }
+
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-2);
     margin: 0;
-    color: color-mix(
-      in srgb,
-      var(--openbitfun-color-content-primary) 66%,
-      var(--openbitfun-color-content-secondary)
-    );
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-display-sm-font-family);
     font-size: var(--openbitfun-type-display-sm-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    line-height: var(--openbitfun-type-label-md-line-height);
-    letter-spacing: var(--openbitfun-type-heading-dialog-letter-spacing);
-    text-wrap: balance;
+    font-weight: var(--openbitfun-type-display-sm-font-weight);
+    line-height: var(--openbitfun-type-display-sm-line-height);
+    letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
+    white-space: nowrap;
+  }
+
+  &__brand-name {
+    // English includes a space after the comma; Chinese uses a full-width comma.
+    white-space: pre;
   }
 
-  &__greeting-label {
+  &__tagline {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    max-width: 100%;
     margin: 0;
-    color: color-mix(
-      in srgb,
-      var(--openbitfun-color-content-primary) 66%,
-      var(--openbitfun-color-content-secondary)
-    );
-    font-size: var(--openbitfun-type-flow-title-font-size);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
-    line-height: var(--openbitfun-type-flow-support-line-height);
-    text-wrap: balance;
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-display-sm-font-family);
+    font-size: var(--openbitfun-type-display-sm-font-size);
+    font-weight: var(--openbitfun-type-body-lg-font-weight);
+    line-height: var(--openbitfun-type-display-sm-line-height);
+    letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
+  }
+
+  &__word-slot {
+    display: grid;
+    flex: 0 0 auto;
+    text-align: end;
+  }
+
+  &__word-sizer,
+  &__word {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+  }
+
+  &__word-sizer {
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &__suffix {
+    white-space: pre;
   }
 }
 
@@ -72,18 +111,34 @@
   }
 }
 
-@media (max-width: 700px) {
+@container (max-width: 560px) {
   .welcome-scene {
     &__content {
       padding-inline: var(--openbitfun-space-4);
     }
 
-    &__title {
+    &__brand,
+    &__tagline {
       font-size: var(--openbitfun-type-heading-display-font-size);
     }
 
-    &__greeting-label {
-      font-size: var(--openbitfun-type-body-md-font-size);
+    &__logo {
+      width: 48px;
+      height: 48px;
+    }
+  }
+}
+
+@container (max-width: 400px) {
+  .welcome-scene {
+    &__brand,
+    &__tagline {
+      font-size: var(--openbitfun-type-flow-title-font-size);
+    }
+
+    &__logo {
+      width: 36px;
+      height: 36px;
     }
   }
 }
diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
index 3727d7d7dd..db1396b380 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
@@ -3,28 +3,49 @@
  * SceneViewport until the user opens a scene.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { RollingText } from '@openbitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
+import { isReducedMotionPreferred } from '@/shared/utils/motionPreference';
 import './WelcomeScene.scss';
 
-type GreetingPeriod = 'morning' | 'afternoon' | 'evening';
-
-function getGreetingPeriod(hour: number): GreetingPeriod {
-  if (hour < 12) return 'morning';
-  if (hour < 18) return 'afternoon';
-  return 'evening';
-}
+const WORD_HOLD_MS = [2400, 2400, 4200] as const;
+const YOUR_WORD_INDEX = 2;
 
 const WelcomeScene: React.FC = () => {
   const { t } = useI18n('common');
-  const [greetingPeriod] = useState<GreetingPeriod>(
-    () => getGreetingPeriod(new Date().getHours()),
-  );
-  const greeting = greetingPeriod === 'morning'
-    ? t('welcomeScene.greeting.morning')
-    : greetingPeriod === 'afternoon'
-      ? t('welcomeScene.greeting.afternoon')
-      : t('welcomeScene.greeting.evening');
+  const [wordIndex, setWordIndex] = useState(0);
+  const [reducedMotion, setReducedMotion] = useState(isReducedMotionPreferred);
+  const [isVisible, setIsVisible] = useState(() => !document.hidden);
+  const [isHovered, setIsHovered] = useState(false);
+  const words = [
+    t('welcomeScene.space.work'),
+    t('welcomeScene.space.play'),
+    t('welcomeScene.space.your'),
+  ];
+  const suffix = t('welcomeScene.space.suffix');
+
+  useEffect(() => {
+    const media = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+    const handleMotionChange = () => setReducedMotion(isReducedMotionPreferred());
+    const handleVisibilityChange = () => setIsVisible(!document.hidden);
+    media?.addEventListener('change', handleMotionChange);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      media?.removeEventListener('change', handleMotionChange);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (reducedMotion || !isVisible || isHovered) return;
+    const timer = window.setTimeout(() => {
+      setWordIndex(index => (index + 1) % WORD_HOLD_MS.length);
+    }, WORD_HOLD_MS[wordIndex]);
+    return () => window.clearTimeout(timer);
+  }, [wordIndex, reducedMotion, isVisible, isHovered]);
+
+  const displayedWord = words[reducedMotion ? YOUR_WORD_INDEX : wordIndex];
 
   return (
     <section
@@ -35,22 +56,46 @@ const WelcomeScene: React.FC = () => {
       aria-labelledby="welcome-scene-title"
     >
       <div className="welcome-scene__content" data-openbitfun-scene="welcome" data-openbitfun-part="content">
-        <div className="welcome-scene__greeting" data-openbitfun-scene="welcome" data-openbitfun-part="greeting">
+        <div
+          className="welcome-scene__greeting"
+          data-openbitfun-scene="welcome"
+          data-openbitfun-part="greeting"
+        >
           <h1
             id="welcome-scene-title"
-            className="welcome-scene__title"
+            className="welcome-scene__brand"
             data-openbitfun-scene="welcome"
             data-openbitfun-part="title"
           >
-            {greeting}
+            <span
+              className="welcome-scene__logo"
+              data-openbitfun-scene="welcome"
+              data-openbitfun-part="logo"
+              aria-hidden="true"
+            />
+            <span className="welcome-scene__brand-name">
+              OpenBitFun{t('welcomeScene.space.separator')}
+            </span>
           </h1>
-          <p
-            className="welcome-scene__greeting-label"
+          <h2
+            className="welcome-scene__tagline"
             data-openbitfun-scene="welcome"
             data-openbitfun-part="subtitle"
+            aria-label={`${words[YOUR_WORD_INDEX]}${suffix}`}
+            onPointerEnter={() => setIsHovered(true)}
+            onPointerLeave={() => setIsHovered(false)}
           >
-            {t('welcomeScene.greeting.subtitle')}
-          </p>
+            <span className="welcome-scene__word-slot" aria-hidden="true">
+              {/* Reserve the longest word so the suffix stays in one place. */}
+              {words.map((word, index) => (
+                <span className="welcome-scene__word-sizer" key={index}>{word}</span>
+              ))}
+              <RollingText className="welcome-scene__word" behavior="fade">
+                {displayedWord}
+              </RollingText>
+            </span>
+            <span className="welcome-scene__suffix" aria-hidden="true">{suffix}</span>
+          </h2>
         </div>
       </div>
     </section>
diff --git a/src/web-ui/src/app/scenes/welcome/appearance.ts b/src/web-ui/src/app/scenes/welcome/appearance.ts
index ad450f94e0..32b7e98d10 100644
--- a/src/web-ui/src/app/scenes/welcome/appearance.ts
+++ b/src/web-ui/src/app/scenes/welcome/appearance.ts
@@ -4,6 +4,7 @@ export const welcomeAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'root', propertyProfile: 'layout', visualRole: 'workspace' },
     { id: 'content', visualRole: 'card' },
     { id: 'greeting', visualRole: 'content' },
+    { id: 'logo', propertyProfile: 'paint', visualRole: 'content' },
     { id: 'title', propertyProfile: 'paint', visualRole: 'content' },
     { id: 'subtitle', propertyProfile: 'paint', visualRole: 'content' },
   ],
diff --git a/src/web-ui/src/app/scenes/workspace-resources/WorkspaceResourcePanel.tsx b/src/web-ui/src/app/scenes/workspace-resources/WorkspaceResourcePanel.tsx
index 9b3464e499..8e5f6b7156 100644
--- a/src/web-ui/src/app/scenes/workspace-resources/WorkspaceResourcePanel.tsx
+++ b/src/web-ui/src/app/scenes/workspace-resources/WorkspaceResourcePanel.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore }
 import { FilePlus, FolderPlus, List, RotateCw } from 'lucide-react';
 import {
   Icon, IconButton, NavigationPanel, NavigationPanelBody, NavigationPanelContent,
-  NavigationPanelHeader, OverflowText, Tooltip,
+  NavigationPanelHeader, OverflowText, StatusPill, Tooltip,
 } from '@openbitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import { getWorkspaceDisplayName, useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
@@ -115,13 +115,13 @@ function WorkspaceResourceContent({ resourceKey }: { resourceKey: string }) {
               onClick: () => run(async () => { await setActiveWorkspace(item.id); }),
             })))}>
             <Icon name="folder" size="sm" />
-            <OverflowText>{workspaceName || t('nav.resources.title')}</OverflowText>
+            <OverflowText className="openbitfun-file-viewer-nav__workspace-name">{workspaceName || t('nav.resources.title')}</OverflowText>
             {openedWorkspacesList.length > 1 && <Icon name="chevron-down" size="xs" />}
           </button>
-          {workspace && <div className="openbitfun-file-viewer-nav__location" data-overflow-trigger
+          {workspace && <span className="openbitfun-file-viewer-nav__location" data-overflow-trigger title={location}
             data-openbitfun-component="file-viewer-nav" data-openbitfun-part="location">
-            <span>{location}</span><OverflowText title={workspace.rootPath}>{workspace.rootPath}</OverflowText>
-          </div>}
+            <StatusPill tone="neutral">{location}</StatusPill>
+          </span>}
         </div>
       </NavigationPanelHeader>
       <NavigationPanelBody className="openbitfun-file-viewer-nav__body">
@@ -132,9 +132,10 @@ function WorkspaceResourceContent({ resourceKey }: { resourceKey: string }) {
               <section className="openbitfun-file-viewer-nav__section" aria-label={t('nav.resources.files')}
                 style={{ flex: layout.filesCollapsed ? '0 0 auto' : showSplit ? `${1 - split.fraction} 1 0` : '1 1 0' }}>
                 <div className="openbitfun-file-viewer-nav__header" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="header">
-                  <button type="button" className="openbitfun-file-viewer-nav__section-toggle" aria-expanded={!layout.filesCollapsed}
+                  <button type="button" data-overflow-trigger className="openbitfun-file-viewer-nav__section-toggle" aria-expanded={!layout.filesCollapsed}
                     aria-controls={filesId} onClick={() => updateLayout(resourceKey, { filesCollapsed: !layout.filesCollapsed })}>
-                    <Icon name={layout.filesCollapsed ? 'chevron-right' : 'chevron-down'} size="xs" />{t('nav.resources.files')}
+                    <Icon name={layout.filesCollapsed ? 'chevron-right' : 'chevron-down'} size="xs" />
+                    <OverflowText className="openbitfun-file-viewer-nav__section-label">{t('nav.resources.files')}</OverflowText>
                   </button>
                   <div className="openbitfun-file-viewer-nav__actions" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="actions">
                     {layout.fileView === 'tree' && toolbar && <>
@@ -162,10 +163,10 @@ function WorkspaceResourceContent({ resourceKey }: { resourceKey: string }) {
               <section className="openbitfun-file-viewer-nav__section openbitfun-file-viewer-nav__section--terminals" aria-label={t('nav.resources.terminals')}
                 style={{ flex: layout.terminalsCollapsed || !hasTerminalContent ? '0 0 auto' : showSplit ? `${split.fraction} 1 0` : '1 1 0' }}>
                 <div className="openbitfun-file-viewer-nav__header" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="header">
-                  <button type="button" className="openbitfun-file-viewer-nav__section-toggle" aria-expanded={!layout.terminalsCollapsed}
+                  <button type="button" data-overflow-trigger className="openbitfun-file-viewer-nav__section-toggle" aria-expanded={!layout.terminalsCollapsed}
                     aria-controls={terminalsId} onClick={() => updateLayout(resourceKey, { terminalsCollapsed: !layout.terminalsCollapsed })}>
                     <Icon name={layout.terminalsCollapsed ? 'chevron-right' : 'chevron-down'} size="xs" />
-                    {t('nav.resources.terminals')}
+                    <OverflowText className="openbitfun-file-viewer-nav__section-label">{t('nav.resources.terminals')}</OverflowText>
                     {terminals.entries.length > 0 && <span className="openbitfun-file-viewer-nav__count">{formatNumber(terminals.entries.length)}</span>}
                   </button>
                   <div className="openbitfun-file-viewer-nav__actions" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="actions">
diff --git a/src/web-ui/src/app/scenes/workspace-resources/workspaceResources.test.ts b/src/web-ui/src/app/scenes/workspace-resources/workspaceResources.test.ts
index 89756122ae..b80cda3787 100644
--- a/src/web-ui/src/app/scenes/workspace-resources/workspaceResources.test.ts
+++ b/src/web-ui/src/app/scenes/workspace-resources/workspaceResources.test.ts
@@ -3,6 +3,9 @@ import { beforeEach, describe, expect, it } from 'vitest';
 import { useSceneStore } from '../../stores/sceneStore';
 import { useNavSceneStore } from '../../stores/navSceneStore';
 import { normalizeResourceLayout, useWorkspaceResourceState } from './workspaceResourceState';
+import { getSessionSceneTabId } from '../../components/SceneBar/types';
+
+const sessionTarget = { surfaceId: 'local', workspaceKey: 'project', sessionId: 'task' };
 
 describe('workspace resource navigation', () => {
   beforeEach(() => {
@@ -10,14 +13,15 @@ describe('workspace resource navigation', () => {
     useNavSceneStore.getState().closeNavScene();
   });
   it('opens resources without replacing the active conversation', () => {
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
     useNavSceneStore.getState().openNavScene('file-viewer');
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(useSceneStore.getState().activeTabId).toBe(getSessionSceneTabId(sessionTarget));
   });
   it('keeps resources during file, terminal and conversation navigation', () => {
     useNavSceneStore.getState().openNavScene('file-viewer');
     for (const scene of ['file-viewer', 'terminal', 'session'] as const) {
-      useSceneStore.getState().openScene(scene);
+      if (scene === 'session') useSceneStore.getState().openSessionScene(sessionTarget);
+      else useSceneStore.getState().openScene(scene);
       expect(useNavSceneStore.getState().showSceneNav).toBe(true);
       expect(useNavSceneStore.getState().navSceneId).toBe('file-viewer');
     }
diff --git a/src/web-ui/src/app/services/sessionSceneLifecycle.test.ts b/src/web-ui/src/app/services/sessionSceneLifecycle.test.ts
index 1a3da6ea43..4364202338 100644
--- a/src/web-ui/src/app/services/sessionSceneLifecycle.test.ts
+++ b/src/web-ui/src/app/services/sessionSceneLifecycle.test.ts
@@ -5,7 +5,8 @@ import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
 import { useModernFlowChatStore } from '@/flow_chat/store/modernFlowChatStore';
 import type { Session } from '@/flow_chat/types/flow-chat';
 import { activateSurface, LOCAL_SURFACE_ID } from '@/infrastructure/peer-device/deviceSurface';
-import { useSceneStore } from '../stores/sceneStore';
+import { selectActiveSceneId, useSceneStore } from '../stores/sceneStore';
+import { resolveSessionSceneTarget } from './sessionSceneTarget';
 import { startSessionSceneLifecycle } from './sessionSceneLifecycle';
 
 function session(sessionId: string, overrides: Partial<Session> = {}): Session {
@@ -39,6 +40,7 @@ describe('Session scene resource lifetime with real stores', () => {
     select([], null);
     useModernFlowChatStore.getState().clear();
     useSceneStore.getState().resetForPeerSwitch();
+    stop = startSessionSceneLifecycle();
   });
 
   afterEach(() => {
@@ -53,7 +55,6 @@ describe('Session scene resource lifetime with real stores', () => {
   it('removes the last session tab, projection and navigation history together', () => {
     select([session('last')], 'last');
     useSceneStore.getState().openScene('session');
-    stop = startSessionSceneLifecycle();
 
     flowChatStore.removeSession('last', { nextActiveSessionId: null });
 
@@ -66,11 +67,92 @@ describe('Session scene resource lifetime with real stores', () => {
     });
   });
 
+  it('retains different workspaces and replaces only the selected workspace session', () => {
+    const first = session('a1', { workspacePath: '/projects/a' });
+    const second = session('a2', { workspacePath: '/projects/a' });
+    const other = session('b1', { workspacePath: '/projects/b' });
+    select([first, second, other], first.sessionId);
+    useSceneStore.getState().openScene('session');
+    const firstTabId = useSceneStore.getState().activeTabId;
+
+    flowChatStore.switchSession(other.sessionId);
+    useSceneStore.getState().openScene('session');
+    const otherTabId = useSceneStore.getState().activeTabId;
+    flowChatStore.switchSession(second.sessionId);
+    useSceneStore.getState().openScene('session');
+
+    expect(useSceneStore.getState().openTabs.map(tab => [tab.id, tab.session?.sessionId])).toEqual([
+      [firstTabId, second.sessionId], [otherTabId, other.sessionId],
+    ]);
+    expect(useSceneStore.getState().activeTabId).toBe(firstTabId);
+    expect(flowChatStore.getState().sessions.size).toBe(3);
+  });
+
+  it('preserves workspace tabs during a temporary empty selection', () => {
+    const first = session('a', { workspacePath: '/a' });
+    const second = session('b', { workspacePath: '/b' });
+    select([first, second], 'a');
+    useSceneStore.getState().openScene('session');
+    select([first, second], null);
+    expect(useSceneStore.getState().openTabs.map(tab => tab.session?.sessionId)).toEqual(['a']);
+    select([first, second], 'b');
+    expect(useSceneStore.getState().openTabs.map(tab => tab.session?.sessionId)).toEqual(['a', 'b']);
+  });
+
+  it('defers legacy identity changes until pending navigation commits', () => {
+    const original = session('legacy');
+    select([original], original.sessionId);
+    useSceneStore.getState().openScene('session');
+    const tabId = useSceneStore.getState().activeTabId!;
+    useSceneStore.setState({ pendingTabId: tabId });
+    select([{ ...original, workspaceId: 'known-workspace' }], original.sessionId);
+    expect(useSceneStore.getState().activeTabId).toBe(tabId);
+    useSceneStore.setState({ pendingTabId: null });
+    expect(useSceneStore.getState().activeTabId).not.toBe(tabId);
+    expect(useSceneStore.getState().openTabs).toHaveLength(1);
+    expect(useSceneStore.getState().openTabs[0].session?.sessionId).toBe(original.sessionId);
+    expect(useSceneStore.getState().navHistory).not.toContain(tabId);
+  });
+
+  it('removes a deleted background workspace tab without stealing focus', () => {
+    const first = session('a', { workspacePath: '/a' });
+    const second = session('b', { workspacePath: '/b' });
+    select([first, second], 'a');
+    useSceneStore.getState().openScene('session');
+    flowChatStore.switchSession('b');
+    const activeTabId = useSceneStore.getState().activeTabId;
+    flowChatStore.removeSession('a');
+    expect(useSceneStore.getState().activeTabId).toBe(activeTabId);
+    expect(useSceneStore.getState().openTabs.map(tab => tab.session?.sessionId)).toEqual(['b']);
+    expect(flowChatStore.getActiveSession()?.sessionId).toBe('b');
+  });
+
+  it('closing a background tab keeps its active session available', () => {
+    const first = session('a', { workspacePath: '/a', status: 'active' });
+    const second = session('b', { workspacePath: '/b' });
+    select([first, second], 'a');
+    useSceneStore.getState().openScene('session');
+    const firstTabId = useSceneStore.getState().activeTabId!;
+    flowChatStore.switchSession('b');
+    useSceneStore.getState().closeScene(firstTabId);
+    expect(flowChatStore.getState().sessions.get('a')).toBe(first);
+    expect(flowChatStore.getActiveSession()?.sessionId).toBe('b');
+    expect(useSceneStore.getState().navHistory).not.toContain(firstTabId);
+  });
+
+  it('does not reopen a closed tab when its session is updated in the background', () => {
+    const first = session('a');
+    select([first], 'a');
+    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().closeScene(useSceneStore.getState().activeTabId!);
+    select([{ ...first, title: 'Background title' }], 'a');
+    expect(useSceneStore.getState().openTabs).toEqual([]);
+  });
+
   it('returns to another open tab when the selected session disappears', () => {
     select([session('active')], 'active');
     useSceneStore.getState().openScene('settings');
     useSceneStore.getState().openScene('session');
-    stop = startSessionSceneLifecycle();
 
     flowChatStore.removeSession('active');
 
@@ -86,7 +168,6 @@ describe('Session scene resource lifetime with real stores', () => {
     select([session('active')], 'active');
     useSceneStore.getState().openScene('session');
     useSceneStore.getState().openScene('settings');
-    stop = startSessionSceneLifecycle();
 
     flowChatStore.removeSessionsForWorkspace({ rootPath: '/workspace/project' });
 
@@ -97,11 +178,10 @@ describe('Session scene resource lifetime with real stores', () => {
   it('keeps a valid replacement selection when another session is removed', () => {
     select([session('removed'), session('retained')], 'retained');
     useSceneStore.getState().openScene('session');
-    stop = startSessionSceneLifecycle();
 
     flowChatStore.removeSession('removed');
 
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(selectActiveSceneId(useSceneStore.getState())).toBe('session');
     expect(useModernFlowChatStore.getState().activeSession?.sessionId).toBe('retained');
   });
 
@@ -112,18 +192,18 @@ describe('Session scene resource lifetime with real stores', () => {
       });
       select([retained], retained.sessionId);
       useSceneStore.getState().openScene('session');
-      stop = startSessionSceneLifecycle();
 
-      expect(useSceneStore.getState().activeTabId).toBe('session');
+
+      expect(selectActiveSceneId(useSceneStore.getState())).toBe('session');
       expect(useModernFlowChatStore.getState().activeSession).toBe(retained);
     },
   );
 
   it('reconciles orphan tabs and stale presentation when the shell remounts', () => {
+    stop?.();
     const stale = session('stale');
     useModernFlowChatStore.getState().setActiveSession(stale);
-    useSceneStore.getState().openScene('session');
-
+    useSceneStore.getState().openSessionScene(resolveSessionSceneTarget(stale, [], 'local'));
     stop = startSessionSceneLifecycle();
 
     expect(useSceneStore.getState().activeTabId).toBeNull();
@@ -137,7 +217,6 @@ describe('Session scene resource lifetime with real stores', () => {
     const retained = session('retained');
     select([retained], 'missing');
     useSceneStore.getState().openScene('session');
-    stop = startSessionSceneLifecycle();
 
     expect(useSceneStore.getState().activeTabId).toBeNull();
     expect(flowChatStore.getState().sessions.get('retained')).toBe(retained);
@@ -147,7 +226,6 @@ describe('Session scene resource lifetime with real stores', () => {
     const local = session('local-session');
     select([local], local.sessionId);
     useSceneStore.getState().openScene('session');
-    stop = startSessionSceneLifecycle();
 
     activateSurface('empty-peer-lifecycle-test');
     expect(useSceneStore.getState().activeTabId).toBeNull();
@@ -158,22 +236,22 @@ describe('Session scene resource lifetime with real stores', () => {
     expect(useModernFlowChatStore.getState().activeSession).toBe(local);
     expect(useSceneStore.getState().openTabs).toEqual([]);
     useSceneStore.getState().openScene('session');
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(selectActiveSceneId(useSceneStore.getState())).toBe('session');
   });
 
   it('allows a newly established session to open after the empty state', () => {
-    stop = startSessionSceneLifecycle();
+
     select([session('created')], 'created');
     expect(useSceneStore.getState().openTabs).toEqual([]);
 
     useSceneStore.getState().openScene('session');
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(selectActiveSceneId(useSceneStore.getState())).toBe('session');
     expect(useModernFlowChatStore.getState().activeSession?.sessionId).toBe('created');
   });
 
   it('clears previous visible-turn metadata when selecting another session', () => {
     select([session('first')], 'first');
-    stop = startSessionSceneLifecycle();
+
     useModernFlowChatStore.getState().setVisibleTurnInfo({
       turnIndex: 2, totalTurns: 3, userMessage: 'old', turnId: 'old-turn', visibleTurnIds: ['old-turn'],
     });
@@ -184,14 +262,14 @@ describe('Session scene resource lifetime with real stores', () => {
   });
 
   it('stops observing both stores when the shell unmounts', () => {
-    stop = startSessionSceneLifecycle();
-    stop();
+
+    stop?.();
     stop = undefined;
 
     useSceneStore.getState().openScene('session');
     select([session('later')], 'later');
 
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(useSceneStore.getState().openTabs).toEqual([]);
     expect(useModernFlowChatStore.getState().activeSession).toBeNull();
   });
 });
diff --git a/src/web-ui/src/app/services/sessionSceneLifecycle.ts b/src/web-ui/src/app/services/sessionSceneLifecycle.ts
index 2bdf21b55a..822a4ef4b2 100644
--- a/src/web-ui/src/app/services/sessionSceneLifecycle.ts
+++ b/src/web-ui/src/app/services/sessionSceneLifecycle.ts
@@ -1,31 +1,108 @@
 import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
 import { startAutoSync } from '@/flow_chat/services/storeSync';
-import { useSceneStore } from '../stores/sceneStore';
+import { workspaceManager } from '@/infrastructure/services/business/workspaceManager';
+import { getActiveSurfaceId, isSurfaceChangedError } from '@/infrastructure/peer-device/deviceSurface';
+import { createLogger } from '@/shared/utils/logger';
+import { registerSessionSceneNavigation, useSceneStore } from '../stores/sceneStore';
+import { isSessionSceneId, type SessionSceneTarget } from '../components/SceneBar/types';
+import { resolveSessionSceneTarget, resolveSessionSceneWorkspace } from './sessionSceneTarget';
+
+const log = createLogger('SessionSceneLifecycle');
 
 /**
- * The Session scene is a view of the selected session, not a session itself.
- * Reconcile at the shell lifetime so removal from any source also retires the
- * tab and its navigation history, even while another scene is visible.
- * A metadata-only or failed session still exists and must remain recoverable.
+ * Tabs own one resource reference per workspace; FlowChat owns all sessions.
+ * The shell coordinates navigation with the one active-session presentation.
  */
 export function startSessionSceneLifecycle(): () => void {
   const stopProjectionSync = startAutoSync();
-  const reconcile = () => {
-    if (flowChatStore.getActiveSession()) return;
+  const current = () => {
+    const session = flowChatStore.getActiveSession();
+    return session ? resolveSessionSceneTarget(
+      session, workspaceManager.getState().openedWorkspaces.values(), getActiveSurfaceId(),
+    ) : null;
+  };
+  const stopNavigation = registerSessionSceneNavigation({
+    current,
+    isActive: target => {
+      if (target.surfaceId !== getActiveSurfaceId() || current()?.sessionId !== target.sessionId) return false;
+      const session = flowChatStore.getActiveSession()!;
+      const state = workspaceManager.getState();
+      const workspace = resolveSessionSceneWorkspace(session, state.openedWorkspaces.values());
+      return workspace ? workspace.id === state.activeWorkspaceId : !state.currentWorkspace;
+    },
+    activate: async (target, isCurrent) => {
+      if (target.surfaceId !== getActiveSurfaceId() || !isCurrent()) return false;
+      try {
+        const { activateMainSession } = await import('@/flow_chat/services/sessionActivation');
+        if (!isCurrent()) return false;
+        return await activateMainSession(target.sessionId, { isCurrent });
+      } catch (error) {
+        if (isCurrent() && !isSurfaceChangedError(error)) {
+          log.error('Failed to activate session tab', { sessionId: target.sessionId, error });
+          const { notificationService } = await import('@/shared/notification-system');
+          if (isCurrent()) notificationService.error(error instanceof Error ? error.message : String(error));
+        }
+        return false;
+      }
+    },
+  });
 
-    const sceneState = useSceneStore.getState();
-    if (sceneState.openTabs.some(tab => tab.id === 'session')) {
-      sceneState.closeScene('session');
+  let previousSelection = current();
+  let previousSurface = getActiveSurfaceId();
+  let reconciling = false;
+  const reconcile = () => {
+    if (reconciling) return;
+    reconciling = true;
+    try {
+      const surfaceId = getActiveSurfaceId();
+      if (surfaceId !== previousSurface) {
+        previousSurface = surfaceId;
+        previousSelection = current();
+        useSceneStore.getState().resetForPeerSwitch();
+      }
+      const selected = current();
+      const selectionChanged = selected?.sessionId !== previousSelection?.sessionId
+        || selected?.workspaceKey !== previousSelection?.workspaceKey;
+      previousSelection = selected;
+      const scenes = useSceneStore.getState();
+      // The pending navigation owns the upcoming selection. Bootstrap/hydrate
+      // notifications cannot replace its destination or steal its focus.
+      if (selectionChanged && selected && !scenes.pendingTabId) {
+        if (isSessionSceneId(scenes.activeTabId)) {
+          scenes.openSessionScene(selected);
+        } else {
+          scenes.updateSessionScene(selected);
+        }
+      }
+      const source = flowChatStore.getState();
+      const targets = new Map<string, SessionSceneTarget>();
+      for (const tab of useSceneStore.getState().openTabs) {
+        const session = tab.session?.surfaceId === surfaceId
+          ? source.sessions.get(tab.session.sessionId) : undefined;
+        if (session) targets.set(session.sessionId, scenes.pendingTabId && tab.session
+          // Keep the transaction's identity until it commits. Metadata may
+          // acquire a workspace id while activation is awaiting the host.
+          ? tab.session
+          : resolveSessionSceneTarget(
+            session, workspaceManager.getState().openedWorkspaces.values(), surfaceId,
+          ));
+      }
+      useSceneStore.getState().reconcileSessionScenes(targets);
+    } finally {
+      reconciling = false;
     }
   };
 
   const unsubscribeSessions = flowChatStore.subscribe(reconcile);
   const unsubscribeScenes = useSceneStore.subscribe(reconcile);
+  const unsubscribeWorkspaces = workspaceManager.addEventListener(reconcile);
   reconcile();
 
   return () => {
     unsubscribeSessions();
     unsubscribeScenes();
+    unsubscribeWorkspaces();
+    stopNavigation();
     stopProjectionSync();
   };
 }
diff --git a/src/web-ui/src/app/services/sessionSceneTarget.test.ts b/src/web-ui/src/app/services/sessionSceneTarget.test.ts
new file mode 100644
index 0000000000..ce1556bd66
--- /dev/null
+++ b/src/web-ui/src/app/services/sessionSceneTarget.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import type { Session } from '@/flow_chat/types/flow-chat';
+import type { WorkspaceInfo } from '@/shared/types';
+import { getSessionSceneTabId } from '../components/SceneBar/types';
+import { resolveSessionSceneTarget } from './sessionSceneTarget';
+
+const session = (overrides: Partial<Session>): Session => ({
+  sessionId: 'session', title: 'Session', config: {}, dialogTurns: [],
+  status: 'idle', createdAt: 1, lastActiveAt: 1, error: null, ...overrides,
+});
+const tabId = (value: Session, surfaceId = 'local', workspaces: WorkspaceInfo[] = []) =>
+  getSessionSceneTabId(resolveSessionSceneTarget(value, workspaces, surfaceId));
+
+describe('workspace session tab identity', () => {
+  it('keeps an execution worktree under its owning project tab', () => {
+    expect(tabId(session({ workspacePath: '/project/.worktrees/task', projectWorkspacePath: '/project' })))
+      .toBe(tabId(session({ workspacePath: '/project' })));
+  });
+
+  it('reads legacy config-only metadata without requiring a workspace id', () => {
+    expect(tabId(session({ config: { workspacePath: 'D:\\project\\' } })))
+      .toBe(tabId(session({ workspacePath: 'D:/project' })));
+  });
+
+  it('scopes identical ids and roots to their device surface', () => {
+    const value = session({ workspaceId: 'same', workspacePath: '/project' });
+    expect(tabId(value, 'peer-a')).not.toBe(tabId(value, 'peer-b'));
+  });
+
+  it('distinguishes SSH hosts, remote root case, and local roots', () => {
+    const remote = session({ workspacePath: '/Project', remoteSshHost: 'server-a' });
+    expect(tabId(remote)).not.toBe(tabId(session({ ...remote, remoteSshHost: 'server-b' })));
+    expect(tabId(remote)).not.toBe(tabId(session({ ...remote, workspacePath: '/project' })));
+    expect(tabId(remote)).not.toBe(tabId(session({ workspacePath: '/Project' })));
+  });
+
+  it('resolves old session metadata to the live workspace id', () => {
+    const workspace = { id: 'workspace', rootPath: '/project' } as WorkspaceInfo;
+    expect(tabId(session({ workspacePath: '/project' }), 'local', [workspace]))
+      .toBe(tabId(session({ workspaceId: 'workspace', workspacePath: '/project' })));
+  });
+
+  it('never resolves a remote session to a local directory with the same path', () => {
+    const local = { id: 'local-project', rootPath: '/project' } as WorkspaceInfo;
+    const remote = session({ workspacePath: '/project', remoteSshHost: 'server' });
+    expect(tabId(remote, 'local', [local])).toBe(tabId(remote));
+    expect(tabId(remote, 'local', [local])).not.toBe(tabId(session({ workspaceId: local.id })));
+  });
+});
diff --git a/src/web-ui/src/app/services/sessionSceneTarget.ts b/src/web-ui/src/app/services/sessionSceneTarget.ts
new file mode 100644
index 0000000000..3f0bf4e740
--- /dev/null
+++ b/src/web-ui/src/app/services/sessionSceneTarget.ts
@@ -0,0 +1,39 @@
+import type { Session } from '@/flow_chat/types/flow-chat';
+import { sessionProjectWorkspacePath } from '@/flow_chat/utils/sessionWorkspace';
+import { findWorkspaceForSession } from '@/flow_chat/utils/workspaceScope';
+import type { WorkspaceInfo } from '@/shared/types';
+import { normalizePath, normalizeRemoteWorkspacePath } from '@/shared/utils/pathUtils';
+import { normalizeRemoteSessionScope } from '@/shared/utils/remoteSessionScope';
+import type { SessionSceneTarget } from '../components/SceneBar/types';
+
+/** Resolve the owning project, including worktree sessions and legacy metadata. */
+export function resolveSessionSceneWorkspace(session: Session, workspaces: Iterable<WorkspaceInfo>) {
+  return findWorkspaceForSession({
+    ...session,
+    workspacePath: sessionProjectWorkspacePath(session),
+    remoteConnectionId: session.remoteConnectionId || session.config?.remoteConnectionId,
+    remoteSshHost: session.remoteSshHost || session.config?.remoteSshHost,
+  }, workspaces);
+}
+
+export function resolveSessionSceneTarget(
+  session: Session,
+  workspaces: Iterable<WorkspaceInfo>,
+  surfaceId: string,
+): SessionSceneTarget {
+  const workspace = resolveSessionSceneWorkspace(session, workspaces);
+  const workspaceId = workspace?.id || session.workspaceId;
+  const path = sessionProjectWorkspacePath(session) ?? '';
+  const remote = normalizeRemoteSessionScope(
+    session.remoteConnectionId || session.config?.remoteConnectionId,
+    session.remoteSshHost || session.config?.remoteSshHost,
+  );
+  // Older hosts need no migration: retain a scope derived from their existing
+  // metadata until a workspace id is available. Remote roots stay case-sensitive.
+  const workspaceKey = workspaceId
+    ? JSON.stringify(['workspace', workspaceId])
+    : remote.remoteConnectionId || remote.remoteSshHost
+      ? JSON.stringify(['remote', remote.remoteSshHost?.toLowerCase(), remote.remoteConnectionId, normalizeRemoteWorkspacePath(path)])
+      : JSON.stringify(['local', normalizePath(path).replace(/\/$/, '')]);
+  return { surfaceId, workspaceKey, sessionId: session.sessionId };
+}
diff --git a/src/web-ui/src/app/stores/sceneStore.test.ts b/src/web-ui/src/app/stores/sceneStore.test.ts
index bee917ee9f..894db58630 100644
--- a/src/web-ui/src/app/stores/sceneStore.test.ts
+++ b/src/web-ui/src/app/stores/sceneStore.test.ts
@@ -1,6 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { recordInteractionModality } from '@/shared/utils/motionPreference';
-import { useSceneStore } from './sceneStore';
+import { registerSessionSceneNavigation, useSceneStore } from './sceneStore';
+import { getSessionSceneTabId } from '../components/SceneBar/types';
+const sessionTarget = { surfaceId: 'local', workspaceKey: 'project', sessionId: 'current' };
+const sessionTabId = getSessionSceneTabId(sessionTarget);
 import {
   discardAndContinueSettingsNavigation,
   getSettingsDraftSnapshot,
@@ -29,6 +32,78 @@ describe('sceneStore transition snapshots', () => {
     expect(state.navCursor).toBe(-1);
   });
 
+  it('uses the same resource activator for history and closing the active tab', async () => {
+    const a = { ...sessionTarget, workspaceKey: 'a', sessionId: 'a' };
+    const b = { ...sessionTarget, workspaceKey: 'b', sessionId: 'b' };
+    useSceneStore.getState().openSessionScene(a);
+    useSceneStore.getState().openSessionScene(b);
+    let active = b;
+    const activations: string[] = [];
+    const stop = registerSessionSceneNavigation({
+      current: () => active,
+      isActive: target => target.sessionId === active.sessionId,
+      activate: async target => { active = target; activations.push(target.sessionId); return true; },
+    });
+    try {
+      useSceneStore.getState().goBack();
+      await vi.waitFor(() => expect(useSceneStore.getState().activeTabId).toBe(getSessionSceneTabId(a)));
+      useSceneStore.getState().goForward();
+      await vi.waitFor(() => expect(useSceneStore.getState().activeTabId).toBe(getSessionSceneTabId(b)));
+      useSceneStore.getState().closeScene(getSessionSceneTabId(b));
+      await vi.waitFor(() => expect(useSceneStore.getState().activeTabId).toBe(getSessionSceneTabId(a)));
+      expect(activations).toEqual(['a', 'b', 'a']);
+      expect(useSceneStore.getState().navHistory).not.toContain(getSessionSceneTabId(b));
+    } finally { stop(); }
+  });
+
+  it('does not focus a session after a newer navigation supersedes its activation', async () => {
+    useSceneStore.getState().openSessionScene(sessionTarget);
+    useSceneStore.getState().openScene('terminal');
+    let complete!: (activated: boolean) => void;
+    const activation = new Promise<boolean>(resolve => { complete = resolve; });
+    const stop = registerSessionSceneNavigation({
+      current: () => null,
+      isActive: () => false,
+      activate: () => activation,
+    });
+    try {
+      useSceneStore.getState().activateScene(sessionTabId);
+      expect(useSceneStore.getState().pendingTabId).toBe(sessionTabId);
+      useSceneStore.getState().openScene('settings');
+      complete(true);
+      await activation;
+      expect(useSceneStore.getState().activeTabId).toBe('settings');
+      expect(useSceneStore.getState().pendingTabId).toBeNull();
+    } finally { stop(); }
+  });
+
+  it('keeps recoverable tabs when resource activation is unsuccessful', async () => {
+    useSceneStore.getState().openSessionScene(sessionTarget);
+    useSceneStore.getState().openScene('terminal');
+    const stop = registerSessionSceneNavigation({
+      current: () => null,
+      isActive: () => false,
+      activate: async () => false,
+    });
+    try {
+      useSceneStore.getState().activateScene(sessionTabId);
+      await vi.waitFor(() => expect(useSceneStore.getState().pendingTabId).toBeNull());
+      expect(useSceneStore.getState().activeTabId).toBe('terminal');
+      expect(useSceneStore.getState().openTabs.some(tab => tab.id === sessionTabId)).toBe(true);
+    } finally { stop(); }
+  });
+
+  it('rekeys legacy workspace references without duplicating their slot or breaking history', () => {
+    const legacy = { ...sessionTarget, workspaceKey: 'legacy-path' };
+    useSceneStore.getState().openSessionScene(legacy);
+    useSceneStore.getState().openScene('terminal');
+    useSceneStore.getState().reconcileSessionScenes(new Map([[sessionTarget.sessionId, sessionTarget]]));
+    expect(useSceneStore.getState().openTabs.map(tab => tab.id)).toEqual([sessionTabId, 'terminal']);
+    useSceneStore.getState().goBack();
+    expect(useSceneStore.getState().activeTabId).toBe(sessionTabId);
+    expect(useSceneStore.getState().navHistory).not.toContain(getSessionSceneTabId(legacy));
+  });
+
   it('publishes the first scene switch atomically from the tabless welcome surface', () => {
     const snapshots: Array<{ activeTabId: string | null; openTabIds: string[] }> = [];
     const unsubscribe = useSceneStore.subscribe(state => {
@@ -52,7 +127,7 @@ describe('sceneStore transition snapshots', () => {
     expect(useSceneStore.getState().navigationMotion).toBe('pointer');
 
     recordInteractionModality('keyboard');
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
     expect(useSceneStore.getState().navigationMotion).toBe('instant');
   });
 
@@ -90,8 +165,8 @@ describe('sceneStore transition snapshots', () => {
   });
 
   it('closes the last session tab into the tabless welcome state', () => {
-    useSceneStore.getState().openScene('session');
-    useSceneStore.getState().closeScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
+    useSceneStore.getState().closeScene(sessionTabId);
 
     const state = useSceneStore.getState();
     expect(state.openTabs).toEqual([]);
@@ -102,19 +177,19 @@ describe('sceneStore transition snapshots', () => {
 
   it('keeps the session tab first while allowing it to close back to another scene', () => {
     useSceneStore.getState().openScene('settings');
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
 
     expect(useSceneStore.getState().openTabs.map(tab => tab.id)).toEqual([
-      'session',
+      sessionTabId,
       'settings',
     ]);
 
-    useSceneStore.getState().closeScene('session');
+    useSceneStore.getState().closeScene(sessionTabId);
 
     const state = useSceneStore.getState();
     expect(state.openTabs.map(tab => tab.id)).toEqual(['settings']);
     expect(state.activeTabId).toBe('settings');
-    expect(state.navHistory).not.toContain('session');
+    expect(state.navHistory).not.toContain(sessionTabId);
   });
 
   it('preserves close fallback and history navigation across many open tabs', () => {
@@ -152,7 +227,7 @@ describe('sceneStore transition snapshots', () => {
   });
 
   it('keeps Settings active until its draft is resolved before changing scenes', async () => {
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
     useSceneStore.getState().openScene('settings');
     registerSettingsDraft({
       id: 'settings-form',
@@ -163,12 +238,12 @@ describe('sceneStore transition snapshots', () => {
       discard: vi.fn(),
     });
 
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
     expect(useSceneStore.getState().activeTabId).toBe('settings');
     expect(getSettingsDraftSnapshot().pendingNavigation).not.toBeNull();
 
     await discardAndContinueSettingsNavigation();
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(useSceneStore.getState().activeTabId).toBe(sessionTabId);
   });
 
   it('abandons device-owned drafts during the non-interactive peer reset', () => {
@@ -192,7 +267,7 @@ describe('sceneStore transition snapshots', () => {
 
   it('reveals a background Settings tab before asking whether to close its draft', async () => {
     useSceneStore.getState().openScene('settings');
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(sessionTarget);
     registerSettingsDraft({
       id: 'background-form',
       pageId: 'application.voice',
@@ -208,6 +283,6 @@ describe('sceneStore transition snapshots', () => {
 
     await discardAndContinueSettingsNavigation();
     expect(useSceneStore.getState().openTabs.some(tab => tab.id === 'settings')).toBe(false);
-    expect(useSceneStore.getState().activeTabId).toBe('session');
+    expect(useSceneStore.getState().activeTabId).toBe(sessionTabId);
   });
 });
diff --git a/src/web-ui/src/app/stores/sceneStore.ts b/src/web-ui/src/app/stores/sceneStore.ts
index 396b5f2328..87793b901c 100644
--- a/src/web-ui/src/app/stores/sceneStore.ts
+++ b/src/web-ui/src/app/stores/sceneStore.ts
@@ -3,7 +3,7 @@
  *
  * Tab rules:
  *   - Every explicitly opened scene stays in openTabs until the user closes it.
- *     Session scenes additionally require a selected session; the shell-owned
+ *     Session tabs reference one session per workspace; the shell-owned
  *     sessionSceneLifecycle retires their tabs when that resource disappears.
  *   - Pinned tabs stay ahead of regular tabs; closeability is an independent
  *     scene-definition capability.
@@ -31,7 +31,14 @@ import {
   getInteractionMotion,
   type InteractionMotion,
 } from '@/shared/utils/motionPreference';
-import type { SceneTab, SceneTabId } from '../components/SceneBar/types';
+import {
+  getSceneViewId,
+  getSessionSceneTabId,
+  isSessionSceneId,
+  type SceneTab,
+  type SceneTabId,
+  type SessionSceneTarget,
+} from '../components/SceneBar/types';
 import {
   abandonSettingsDraftsForContextSwitch,
   requestAllSettingsDraftsExit,
@@ -55,6 +62,48 @@ function buildSceneTab(id: SceneTabId, now: number): SceneTab {
   return { id, lastUsed: now };
 }
 
+/** Shell adapter: the tab owner never loads history or changes runtime state. */
+export interface SessionSceneNavigation {
+  current: () => SessionSceneTarget | null;
+  isActive: (target: SessionSceneTarget) => boolean;
+  activate: (target: SessionSceneTarget, isCurrent: () => boolean) => Promise<boolean>;
+}
+
+let sessionNavigation: SessionSceneNavigation | undefined;
+let navigationRequest = 0;
+
+export function registerSessionSceneNavigation(adapter: SessionSceneNavigation): () => void {
+  sessionNavigation = adapter;
+  return () => {
+    if (sessionNavigation === adapter) {
+      sessionNavigation = undefined;
+      navigationRequest++;
+      if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
+    }
+  };
+}
+
+/** Every navigation path, including history and close fallback, uses this gate. */
+function navigateToScene(id: SceneTabId | null, commit: () => void, session?: SessionSceneTarget): void {
+  const hadPendingNavigation = useSceneStore.getState().pendingTabId !== null;
+  const request = ++navigationRequest;
+  const adapter = sessionNavigation;
+  const target = session ?? useSceneStore.getState().openTabs.find(tab => tab.id === id)?.session;
+  const isCurrent = () => request === navigationRequest && adapter === sessionNavigation;
+  if (!target || !adapter || (!hadPendingNavigation && adapter.isActive(target))) {
+    if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
+    commit();
+    return;
+  }
+
+  useSceneStore.setState({ pendingTabId: id });
+  void adapter.activate(target, isCurrent).then(activated => {
+    if (activated && isCurrent()) commit();
+  }).finally(() => {
+    if (isCurrent()) useSceneStore.setState({ pendingTabId: null });
+  });
+}
+
 function resolveNavSceneId(sceneId: SceneTabId | null): SceneTabId | null {
   if (sceneId === null) return null;
   return getSceneNav(sceneId) ? sceneId : null;
@@ -63,6 +112,7 @@ function resolveNavSceneId(sceneId: SceneTabId | null): SceneTabId | null {
 interface SceneState {
   openTabs: SceneTab[];
   activeTabId: SceneTabId | null;
+  pendingTabId: SceneTabId | null;
   /** Ordered history of activeTabId values. */
   navHistory: SceneTabId[];
   /** Index of the current position in navHistory. */
@@ -72,6 +122,11 @@ interface SceneState {
   navigationSequence: number;
 
   openScene:    (id: SceneTabId) => void;
+  /** Called after authoritative session selection, replaces only its workspace slot. */
+  openSessionScene: (target: SessionSceneTarget) => void;
+  updateSessionScene: (target: SessionSceneTarget) => void;
+  /** Resource reconciliation never deletes or stops the referenced sessions. */
+  reconcileSessionScenes: (targets: ReadonlyMap<string, SessionSceneTarget>) => void;
   activateScene:(id: SceneTabId) => void;
   closeScene:   (id: SceneTabId) => void;
   goBack:       () => void;
@@ -117,6 +172,9 @@ function removeFromHistory(
 ) {
   const newHistory = history.filter(h => h !== removedId);
   if (newHistory.length === 0) return { navHistory: [] as SceneTabId[], navCursor: -1 };
+  if (history[cursor] !== removedId) {
+    return { navHistory: newHistory, navCursor: history.slice(0, cursor + 1).filter(id => id !== removedId).length - 1 };
+  }
   const idx = newHistory.lastIndexOf(newActiveId);
   const newCursor = idx !== -1 ? idx : Math.min(cursor, newHistory.length - 1);
   return { navHistory: newHistory, navCursor: newCursor };
@@ -128,66 +186,65 @@ const initialActiveId = initialTabs[0]?.id ?? null;
 export const useSceneStore = create<SceneState>((set, get) => ({
   openTabs:    initialTabs,
   activeTabId: initialActiveId,
+  pendingTabId: null,
   navHistory:  initialActiveId ? [initialActiveId] : [],
   navCursor:   initialActiveId ? 0 : -1,
   navigationMotion: 'instant',
   navigationSequence: 0,
 
-  openScene: (id) => {
-    const performOpen = () => {
-      const state = get();
-      const { activeTabId } = state;
-      const navigationMotion = getInteractionMotion();
-
-      // Already active — re-sync left nav in case user navigated back to MainNav
-      if (id === activeTabId) {
-        const navSceneId = resolveNavSceneId(id);
-        const navStore = useNavSceneStore.getState();
-        if (navSceneId && (!navStore.showSceneNav || navStore.navSceneId !== navSceneId)) {
-          navStore.openNavScene(navSceneId);
-        }
-        return;
-      }
-
-      const isAlreadyOpen = state.openTabs.some(tab => tab.id === id);
-      const def = getSceneDef(id);
-      const isMiniappTab = typeof id === 'string' && id.startsWith('miniapp:');
-      if (!isAlreadyOpen && !def && !isMiniappTab) return;
+  openScene: (requestedId) => {
+    const target = requestedId === 'session' ? sessionNavigation?.current() : undefined;
+    if (requestedId === 'session' && !target) return;
+    openSceneTarget(target ? getSessionSceneTabId(target) : requestedId, target ?? undefined);
+  },
 
-      const { openTabs, navHistory, navCursor } = state;
+  openSessionScene: (target) => openSceneTarget(getSessionSceneTabId(target), target),
 
-      const histUpdate = pushHistory(navHistory, navCursor, id);
+  updateSessionScene: (target) => {
+    const id = getSessionSceneTabId(target);
+    const state = get();
+    if (!state.openTabs.some(tab => tab.id === id && tab.session?.sessionId !== target.sessionId)) return;
+    set({ openTabs: state.openTabs.map(tab => tab.id === id ? { ...tab, session: target } : tab) });
+  },
 
-      // Already open → just activate
-      if (openTabs.some(tab => tab.id === id)) {
-        const activatedAt = Date.now();
-        set({
-          activeTabId: id,
-          openTabs: orderPinnedTabsFirst(openTabs.map(tab =>
-            tab.id === id ? { ...tab, lastUsed: activatedAt } : tab
-          )),
-          navigationMotion,
-          navigationSequence: state.navigationSequence + 1,
-          ...histUpdate,
-        });
-        return;
+  reconcileSessionScenes: (targets) => {
+    const state = get();
+    const remapped = new Map<SceneTabId, SceneTabId>();
+    const tabs = new Map<SceneTabId, SceneTab>();
+    const activeSessionId = state.openTabs.find(tab => tab.id === state.activeTabId)?.session?.sessionId;
+    for (const tab of state.openTabs) {
+      if (!isSessionSceneId(tab.id)) {
+        tabs.set(tab.id, tab);
+        continue;
+      }
+      const target = tab.session && targets.get(tab.session.sessionId);
+      if (!target) continue;
+      const id = getSessionSceneTabId(target);
+      remapped.set(tab.id, id);
+      const existing = tabs.get(id);
+      if (!existing || tab.id === state.activeTabId
+        || (existing.session?.sessionId !== activeSessionId && tab.lastUsed > existing.lastUsed)) {
+        tabs.set(id, id === tab.id && target.workspaceKey === tab.session?.workspaceKey
+          ? tab : { ...tab, id, session: target });
       }
-
-      const next = [...openTabs, buildSceneTab(id, Date.now())];
-      set({
-        openTabs: orderPinnedTabsFirst(next),
-        activeTabId: id,
-        navigationMotion,
-        navigationSequence: state.navigationSequence + 1,
-        ...histUpdate,
-      });
-    };
-
-    if (get().activeTabId === 'settings' && id !== 'settings') {
-      requestAllSettingsDraftsExit(performOpen);
-      return;
     }
-    performOpen();
+    const nextTabs = [...tabs.values()];
+    if (nextTabs.length === state.openTabs.length && nextTabs.every((tab, i) => tab === state.openTabs[i])) return;
+    const activeId = state.activeTabId && (remapped.get(state.activeTabId) ?? state.activeTabId);
+    const retainedActiveId = activeId && tabs.has(activeId) ? activeId : null;
+    const mappedHistory = state.navHistory.map(id => remapped.get(id) ?? id);
+    const navHistory = mappedHistory.filter(id => tabs.has(id));
+    set({
+      openTabs: nextTabs,
+      activeTabId: retainedActiveId,
+      navHistory,
+      navCursor: retainedActiveId
+        ? mappedHistory.slice(0, state.navCursor + 1).filter(id => tabs.has(id)).length - 1 : -1,
+    });
+    if (!retainedActiveId && state.activeTabId) {
+      const fallback = [...nextTabs].sort((a, b) => b.lastUsed - a.lastUsed)[0];
+      if (fallback) get().activateScene(fallback.id);
+    }
   },
 
   activateScene: (id) => {
@@ -197,16 +254,15 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   closeScene: (id) => {
     const performClose = () => {
       const state = get();
-      const { openTabs, activeTabId, navHistory, navCursor } = state;
+      const { openTabs, activeTabId } = state;
       if (!openTabs.some(tab => tab.id === id) || !isClosableScene(id)) return;
 
       const nextTabs = openTabs.filter(t => t.id !== id);
       if (nextTabs.length === 0) {
+        navigationRequest++;
         set({
-          openTabs: [],
-          activeTabId: null,
-          navHistory: [],
-          navCursor: -1,
+          openTabs: [], activeTabId: null, pendingTabId: null,
+          navHistory: [], navCursor: -1,
           navigationMotion: getInteractionMotion(),
           navigationSequence: state.navigationSequence + 1,
         });
@@ -214,97 +270,33 @@ export const useSceneStore = create<SceneState>((set, get) => ({
       }
 
       const fallbackTabId = [...nextTabs].sort((a, b) => b.lastUsed - a.lastUsed)[0].id;
-      const newActiveId = id === activeTabId
-        ? fallbackTabId
-        : activeTabId && nextTabs.some(tab => tab.id === activeTabId)
-          ? activeTabId
-          : fallbackTabId;
-
-      const histUpdate = removeFromHistory(navHistory, navCursor, id, newActiveId);
-      set({
-        openTabs: orderPinnedTabsFirst(nextTabs),
-        activeTabId: newActiveId,
-        navigationMotion: getInteractionMotion(),
-        navigationSequence: state.navigationSequence + 1,
-        ...histUpdate,
+      const newActiveId = id === activeTabId ? fallbackTabId : activeTabId ?? fallbackTabId;
+      navigateToScene(newActiveId, () => {
+        const current = get();
+        set({
+          openTabs: orderPinnedTabsFirst(current.openTabs.filter(tab => tab.id !== id)),
+          activeTabId: newActiveId,
+          navigationMotion: getInteractionMotion(),
+          navigationSequence: current.navigationSequence + 1,
+          ...removeFromHistory(current.navHistory, current.navCursor, id, newActiveId),
+        });
       });
     };
 
     if (id === 'settings') {
       const settingsWasActive = get().activeTabId === 'settings';
       const closedImmediately = requestAllSettingsDraftsExit(performClose);
-      if (!closedImmediately && !settingsWasActive) {
-        get().openScene('settings');
-      }
+      if (!closedImmediately && !settingsWasActive) get().openScene('settings');
       return;
     }
     performClose();
   },
 
-  goBack: () => {
-    const performBack = () => {
-      const state = get();
-      const { navHistory, navCursor, openTabs } = state;
-      for (let i = navCursor - 1; i >= 0; i--) {
-        const targetId = navHistory[i];
-        if (openTabs.some(t => t.id === targetId)) {
-          set(current => ({
-            navCursor: i,
-            activeTabId: targetId,
-            navigationMotion: getInteractionMotion(),
-            navigationSequence: current.navigationSequence + 1,
-            openTabs: current.openTabs.map(t =>
-              t.id === targetId ? { ...t, lastUsed: Date.now() } : t
-            ),
-          }));
-          return;
-        }
-      }
-    };
-    const state = get();
-    const targetId = state.navHistory
-      .slice(0, state.navCursor)
-      .reverse()
-      .find(id => state.openTabs.some(tab => tab.id === id));
-    if (state.activeTabId === 'settings' && targetId && targetId !== 'settings') {
-      requestAllSettingsDraftsExit(performBack);
-      return;
-    }
-    performBack();
-  },
-
-  goForward: () => {
-    const performForward = () => {
-      const state = get();
-      const { navHistory, navCursor, openTabs } = state;
-      for (let i = navCursor + 1; i < navHistory.length; i++) {
-        const targetId = navHistory[i];
-        if (openTabs.some(t => t.id === targetId)) {
-          set(current => ({
-            navCursor: i,
-            activeTabId: targetId,
-            navigationMotion: getInteractionMotion(),
-            navigationSequence: current.navigationSequence + 1,
-            openTabs: current.openTabs.map(t =>
-              t.id === targetId ? { ...t, lastUsed: Date.now() } : t
-            ),
-          }));
-          return;
-        }
-      }
-    };
-    const state = get();
-    const targetId = state.navHistory
-      .slice(state.navCursor + 1)
-      .find(id => state.openTabs.some(tab => tab.id === id));
-    if (state.activeTabId === 'settings' && targetId && targetId !== 'settings') {
-      requestAllSettingsDraftsExit(performForward);
-      return;
-    }
-    performForward();
-  },
+  goBack: () => navigateHistory(-1),
+  goForward: () => navigateHistory(1),
 
   resetForPeerSwitch: () => {
+    navigationRequest++;
     abandonSettingsDraftsForContextSwitch();
     useNavSceneStore.getState().closeNavScene();
     const state = get();
@@ -313,6 +305,7 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     set({
       openTabs: tabs,
       activeTabId,
+      pendingTabId: null,
       navHistory: activeTabId ? [activeTabId] : [],
       navCursor: activeTabId ? 0 : -1,
       navigationMotion: 'instant',
@@ -321,6 +314,100 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   },
 }));
 
+function openSceneTarget(id: SceneTabId, session?: SessionSceneTarget): void {
+  const get = useSceneStore.getState;
+  const set = useSceneStore.setState;
+  const performOpen = () => {
+    const state = get();
+    const { activeTabId } = state;
+    const navigationMotion = getInteractionMotion();
+
+    // Already active — re-sync left nav in case user navigated back to MainNav
+    if (id === activeTabId) {
+      if (session && state.openTabs.find(tab => tab.id === id)?.session?.sessionId !== session.sessionId) {
+        set({ openTabs: state.openTabs.map(tab => tab.id === id ? { ...tab, session, lastUsed: Date.now() } : tab) });
+      }
+      const navSceneId = resolveNavSceneId(id);
+      const navStore = useNavSceneStore.getState();
+      if (navSceneId && (!navStore.showSceneNav || navStore.navSceneId !== navSceneId)) {
+        navStore.openNavScene(navSceneId);
+      }
+      return;
+    }
+
+    const isAlreadyOpen = state.openTabs.some(tab => tab.id === id);
+    if (isSessionSceneId(id) && !isAlreadyOpen && !session) return;
+    const def = getSceneDef(id);
+    const isMiniappTab = typeof id === 'string' && id.startsWith('miniapp:');
+    if (!isAlreadyOpen && !def && !isMiniappTab) return;
+
+    const { openTabs, navHistory, navCursor } = state;
+
+    const histUpdate = pushHistory(navHistory, navCursor, id);
+
+    // Already open → just activate
+    if (openTabs.some(tab => tab.id === id)) {
+      const activatedAt = Date.now();
+      set({
+        activeTabId: id,
+        openTabs: orderPinnedTabsFirst(openTabs.map(tab =>
+          tab.id === id ? { ...tab, ...(session ? { session } : {}), lastUsed: activatedAt } : tab
+        )),
+        navigationMotion,
+        navigationSequence: state.navigationSequence + 1,
+        ...histUpdate,
+      });
+      return;
+    }
+
+    const next = [...openTabs, { ...buildSceneTab(id, Date.now()), ...(session ? { session } : {}) }];
+    set({
+      openTabs: orderPinnedTabsFirst(next),
+      activeTabId: id,
+      navigationMotion,
+      navigationSequence: state.navigationSequence + 1,
+      ...histUpdate,
+    });
+  };
+
+  if (get().activeTabId === 'settings' && id !== 'settings') {
+    requestAllSettingsDraftsExit(() => navigateToScene(id, performOpen, session));
+    return;
+  }
+  navigateToScene(id, performOpen, session);
+}
+
+function navigateHistory(direction: -1 | 1): void {
+  const perform = () => {
+    const state = useSceneStore.getState();
+    for (let i = state.navCursor + direction; i >= 0 && i < state.navHistory.length; i += direction) {
+      const id = state.navHistory[i];
+      if (!state.openTabs.some(tab => tab.id === id)) continue;
+      navigateToScene(id, () => {
+        const current = useSceneStore.getState();
+        if (!current.openTabs.some(tab => tab.id === id)) return;
+        useSceneStore.setState({
+          activeTabId: id,
+          navCursor: i,
+          navigationMotion: getInteractionMotion(),
+          navigationSequence: current.navigationSequence + 1,
+          openTabs: current.openTabs.map(tab => tab.id === id ? { ...tab, lastUsed: Date.now() } : tab),
+        });
+      });
+      return;
+    }
+  };
+  if (useSceneStore.getState().activeTabId === 'settings') {
+    requestAllSettingsDraftsExit(perform);
+  } else {
+    perform();
+  }
+}
+
+/** The renderer/chrome use the scene kind; tabs/history use resource identity. */
+export function selectActiveSceneId(state: SceneState): SceneTabId | null {
+  return state.activeTabId ? getSceneViewId(state.activeTabId) : null;
+}
 /** Whether there's a valid back destination in history. */
 export function selectCanGoBack(state: SceneState): boolean {
   const { navHistory, navCursor, openTabs } = state;
@@ -360,7 +447,7 @@ if (typeof window !== 'undefined') {
       if (navSceneId) {
         navStore.openNavScene(navSceneId);
       } else if (!(navStore.navSceneId === 'file-viewer'
-        && (state.activeTabId === 'session' || state.activeTabId === 'terminal'
+        && (isSessionSceneId(state.activeTabId) || state.activeTabId === 'terminal'
           || state.activeTabId === 'shell' || state.activeTabId === 'git'
           || state.activeTabId === null))) {
         navStore.closeNavScene();
diff --git a/src/web-ui/src/flow_chat/components/voice/voiceClientContext.ts b/src/web-ui/src/flow_chat/components/voice/voiceClientContext.ts
index 2f1274adbc..ebf99d287d 100644
--- a/src/web-ui/src/flow_chat/components/voice/voiceClientContext.ts
+++ b/src/web-ui/src/flow_chat/components/voice/voiceClientContext.ts
@@ -1,4 +1,5 @@
-import { useSceneStore } from '@/app/stores/sceneStore';
+import { selectActiveSceneId, useSceneStore } from '@/app/stores/sceneStore';
+import { getSceneViewId } from '@/app/components/SceneBar/types';
 import { FlowChatManager } from '@/flow_chat/services/FlowChatManager';
 import { stateMachineManager } from '@/flow_chat/state-machine';
 import type { Session } from '@/flow_chat/types/flow-chat';
@@ -101,8 +102,8 @@ export function buildVoiceClientContext(
       workspace_path: callTarget.workspacePath ?? null,
       task_routing: 'miniapp_conversation',
     } : null,
-    active_scene: sceneState.activeTabId || null,
-    open_scenes: sceneState.openTabs.map(tab => tab.id),
+    active_scene: selectActiveSceneId(sceneState),
+    open_scenes: [...new Set(sceneState.openTabs.map(tab => getSceneViewId(tab.id)))],
     active_workspace_id: activeWorkspace?.id ?? null,
     active_workspace: activeWorkspace ? {
       id: activeWorkspace.id,
diff --git a/src/web-ui/src/flow_chat/services/FlowChatManager.ts b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
index 99dfd34bf8..b573f3f04e 100644
--- a/src/web-ui/src/flow_chat/services/FlowChatManager.ts
+++ b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
@@ -14,7 +14,7 @@ import { ACPClientAPI } from '@/infrastructure/api/service-api/ACPClientAPI';
 import { stateMachineManager } from '../state-machine';
 import { EventBatcher } from './EventBatcher';
 import { createLogger } from '@/shared/utils/logger';
-import { installSessionNavStatusService } from './sessionNavStatusService';
+import { installSessionNavStatusService, sessionNavStatusService } from './sessionNavStatusService';
 import {
   getActiveSurfaceId,
   getActiveSurfaceScope,
@@ -599,6 +599,7 @@ export class FlowChatManager {
   /** Permanently forget a peer that was explicitly detached or became lost. */
   public discardDeviceSurface(surfaceId: DeviceSurfaceId): void {
     this.context.flowChatStore.discardSurfaceState(surfaceId);
+    sessionNavStatusService.clearSurface(surfaceId);
     stateMachineManager.clearSurface(surfaceId);
     this.context.processingManager.clearSurface(surfaceId);
     pendingQueueManager.clearSurface(surfaceId);
@@ -692,8 +693,8 @@ export class FlowChatManager {
     }
   }
 
-  async switchChatSession(sessionId: string): Promise<void> {
-    return switchChatSessionModule(this.context, sessionId);
+  async switchChatSession(sessionId: string, isStillRelevant?: () => boolean): Promise<void> {
+    return switchChatSessionModule(this.context, sessionId, isStillRelevant);
   }
 
   preloadHistoricalSessionForOpen(sessionId: string): void {
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
index dde4782e77..5c529f8325 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.test.ts
@@ -651,6 +651,19 @@ describe('SessionModule historical session coordination', () => {
     expect(flowChatStore.switchSession).toHaveBeenCalledWith('history-1');
   });
 
+  it('does not select a hydrated session after its scene navigation was cancelled', async () => {
+    const load = createDeferred<void>();
+    const { context, flowChatStore } = createContext(createSession());
+    flowChatStore.loadSessionHistory.mockReturnValueOnce(load.promise);
+    let relevant = true;
+    const switching = switchChatSession(context, 'history-1', () => relevant);
+    await Promise.resolve();
+    relevant = false;
+    load.resolve();
+    await switching;
+    expect(flowChatStore.switchSession).not.toHaveBeenCalled();
+  });
+
   it('activates a metadata-only historical session immediately when a recent user open intent exists', async () => {
     const load = createDeferred<void>();
     const { context, flowChatStore } = createContext(createSession());
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
index f3c18bb402..13e4a326b0 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/SessionModule.ts
@@ -714,10 +714,12 @@ export async function createChatSession(
  */
 export async function switchChatSession(
   context: FlowChatContext,
-  sessionId: string
+  sessionId: string,
+  isStillRelevant: () => boolean = () => true,
 ): Promise<void> {
   const surfaceScope = getActiveSurfaceScope();
   try {
+    if (!isStillRelevant()) return;
     const switchRequestId = ++latestSwitchRequestId;
     const session = context.flowChatStore.getState().sessions.get(sessionId);
     const isRemoteSession = isRemoteTraceContext(session?.remoteConnectionId, session?.remoteSshHost);
@@ -776,7 +778,7 @@ export async function switchChatSession(
       try {
         await hydrateHistoricalSession(context, sessionId, true, {
           isRetryStillRelevant: () => (
-            surfaceScope.isCurrent() && switchRequestId === latestSwitchRequestId
+            surfaceScope.isCurrent() && switchRequestId === latestSwitchRequestId && isStillRelevant()
           ),
           retryActiveStaleReuse: shouldActivateBeforeHydrate,
         });
@@ -789,7 +791,7 @@ export async function switchChatSession(
         // Continue with activation so the failed state is visible.
       }
 
-      if (switchRequestId !== latestSwitchRequestId) {
+      if (switchRequestId !== latestSwitchRequestId || !isStillRelevant()) {
         recordHistorySessionDiagnosticEvent(sessionId, 'switch_superseded', {
           switchRequestId,
           latestSwitchRequestId,
diff --git a/src/web-ui/src/flow_chat/services/sessionActivation.test.ts b/src/web-ui/src/flow_chat/services/sessionActivation.test.ts
index aea697b3f5..70062871bd 100644
--- a/src/web-ui/src/flow_chat/services/sessionActivation.test.ts
+++ b/src/web-ui/src/flow_chat/services/sessionActivation.test.ts
@@ -9,6 +9,16 @@ const mocks = vi.hoisted(() => ({
     openScene: vi.fn(),
   },
   switchChatSession: vi.fn(),
+  workspaceState: {
+    activeWorkspaceId: null as string | null,
+    currentWorkspace: null as { id: string; rootPath: string } | null,
+    openedWorkspaces: new Map(),
+  },
+  setActiveWorkspace: vi.fn(),
+}));
+
+vi.mock('@/infrastructure/services/business/workspaceManager', () => ({
+  workspaceManager: { getState: () => mocks.workspaceState, setActiveWorkspace: mocks.setActiveWorkspace },
 }));
 
 vi.mock('@/app/services/AppManager', () => ({
@@ -44,6 +54,10 @@ describe('openMainSession resource activation', () => {
     mocks.flowChatState.sessions = new Map();
     vi.clearAllMocks();
     mocks.switchChatSession.mockReset();
+    mocks.workspaceState.activeWorkspaceId = null;
+    mocks.workspaceState.currentWorkspace = null;
+    mocks.workspaceState.openedWorkspaces = new Map();
+    mocks.setActiveWorkspace.mockReset();
   });
 
   it('does not open a scene for a missing or removed session', async () => {
@@ -94,4 +108,44 @@ describe('openMainSession resource activation', () => {
     await expect(openMainSession('target')).rejects.toThrow('Host unavailable');
     expect(mocks.sceneState.openScene).not.toHaveBeenCalled();
   });
+
+  it('rejects an unavailable remote workspace instead of using the current local directory', async () => {
+    const local = { id: 'local', rootPath: '/project' };
+    mocks.workspaceState.currentWorkspace = local;
+    mocks.workspaceState.openedWorkspaces = new Map([['local', local]]);
+    mocks.flowChatState.sessions.set('remote', {
+      sessionId: 'remote', workspacePath: '/project', remoteSshHost: 'server',
+    });
+    await expect(openMainSession('remote')).rejects.toThrow();
+    expect(mocks.switchChatSession).not.toHaveBeenCalled();
+    expect(mocks.sceneState.openScene).not.toHaveBeenCalled();
+  });
+
+  it('orders workspace activation and only opens the latest requested session', async () => {
+    const a = { id: 'a', rootPath: '/a' };
+    const b = { id: 'b', rootPath: '/b' };
+    mocks.workspaceState.openedWorkspaces = new Map([['a', a], ['b', b]]);
+    mocks.workspaceState.activeWorkspaceId = 'b';
+    mocks.flowChatState.sessions.set('a', { sessionId: 'a', workspaceId: 'a', workspacePath: '/a' });
+    mocks.flowChatState.sessions.set('b', { sessionId: 'b', workspaceId: 'b', workspacePath: '/b' });
+    let releaseA!: () => void;
+    const pendingA = new Promise<void>(resolve => { releaseA = resolve; });
+    mocks.setActiveWorkspace.mockImplementation(async (id: string) => {
+      if (id === 'a') await pendingA;
+      mocks.workspaceState.activeWorkspaceId = id;
+    });
+    mocks.switchChatSession.mockImplementation(async (id: string) => {
+      mocks.flowChatState.activeSessionId = id;
+    });
+    const first = openMainSession('a');
+    await Promise.resolve();
+    const second = openMainSession('b');
+    releaseA();
+    await Promise.all([first, second]);
+
+    expect(mocks.setActiveWorkspace.mock.calls.map(([id]) => id)).toEqual(['a', 'b']);
+    expect(mocks.switchChatSession.mock.calls.map(([id]) => id)).toEqual(['b']);
+    expect(mocks.workspaceState.activeWorkspaceId).toBe('b');
+    expect(mocks.sceneState.openScene).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/web-ui/src/flow_chat/services/sessionActivation.ts b/src/web-ui/src/flow_chat/services/sessionActivation.ts
index 30fd6c5035..86415112c6 100644
--- a/src/web-ui/src/flow_chat/services/sessionActivation.ts
+++ b/src/web-ui/src/flow_chat/services/sessionActivation.ts
@@ -3,35 +3,61 @@ import { useSceneStore } from '@/app/stores/sceneStore';
 import { flowChatStore } from '../store/FlowChatStore';
 import { flowChatManager } from './FlowChatManager';
 import { syncSessionToModernStore } from './storeSync';
+import { workspaceManager } from '@/infrastructure/services/business/workspaceManager';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { resolveSessionSceneWorkspace } from '@/app/services/sessionSceneTarget';
+import { sessionProjectWorkspacePath } from '../utils/sessionWorkspace';
+import { i18nService } from '@/infrastructure/i18n';
+
+interface SessionActivationOptions {
+  workspaceId?: string;
+  activateWorkspace?: (workspaceId: string) => void | Promise<unknown>;
+  isCurrent?: () => boolean;
+}
+
+let activationRequest = 0;
+let workspaceActivation: Promise<unknown> = Promise.resolve();
 
 export async function openMainSession(
   sessionId: string,
-  options?: {
-    workspaceId?: string;
-    activateWorkspace?: (workspaceId: string) => void | Promise<unknown>;
-  }
+  options?: SessionActivationOptions,
 ): Promise<void> {
-  if (options?.workspaceId && options.activateWorkspace) {
-    await options.activateWorkspace(options.workspaceId);
-  }
-
+  const activated = await activateMainSession(sessionId, options);
+  if (!activated) return;
   appManager.updateLayout({
     leftPanelActiveTab: 'sessions',
     leftPanelCollapsed: false,
   });
 
-  const activated = await activateMainSession(sessionId);
-  if (!activated) {
-    return;
-  }
-
   useSceneStore.getState().openScene('session');
 }
 
-export async function activateMainSession(sessionId: string): Promise<boolean> {
+export async function activateMainSession(sessionId: string, options?: SessionActivationOptions): Promise<boolean> {
+  const scope = getActiveSurfaceScope();
+  const request = ++activationRequest;
+  const isCurrent = () => scope.isCurrent() && request === activationRequest && (options?.isCurrent?.() ?? true);
+  if (!isCurrent()) return false;
+  const session = flowChatStore.getState().sessions.get(sessionId);
+  const workspace = session && resolveSessionSceneWorkspace(session, workspaceManager.getState().openedWorkspaces.values());
+  const workspaceId = options?.workspaceId ?? workspace?.id;
+  if (session && sessionProjectWorkspacePath(session) && !workspaceId
+    && workspaceManager.getState().currentWorkspace) {
+    throw new Error(i18nService.t('common:sceneBar.workspaceUnavailable'));
+  }
+  if (workspaceId) {
+    // Workspace activation mutates the host as well as the frontend. Serialize
+    // it so a slow A request cannot finish after a newer B request on the host.
+    const activation = workspaceActivation.then(async () => {
+      if (!isCurrent() || workspaceManager.getState().activeWorkspaceId === workspaceId) return;
+      await (options?.activateWorkspace ?? (id => workspaceManager.setActiveWorkspace(id)))(workspaceId);
+    });
+    workspaceActivation = activation.catch(() => undefined);
+    await activation;
+    if (!isCurrent()) return false;
+  }
   const isTargetActive = () => {
     const state = flowChatStore.getState();
-    return state.activeSessionId === sessionId && state.sessions.has(sessionId);
+    return isCurrent() && state.activeSessionId === sessionId && state.sessions.has(sessionId);
   };
   const targetSession = flowChatStore.getState().sessions.get(sessionId) ?? null;
   if (!targetSession) {
@@ -44,14 +70,14 @@ export async function activateMainSession(sessionId: string): Promise<boolean> {
       activeSession?.isHistorical &&
       (activeSession.historyState === 'metadata-only' || activeSession.historyState === 'failed')
     ) {
-      await flowChatManager.switchChatSession(sessionId);
+      await flowChatManager.switchChatSession(sessionId, isCurrent);
       if (!isTargetActive()) {
         return false;
       }
     }
     syncSessionToModernStore(sessionId);
   } else {
-    await flowChatManager.switchChatSession(sessionId);
+    await flowChatManager.switchChatSession(sessionId, isCurrent);
     if (!isTargetActive()) {
       return false;
     }
diff --git a/src/web-ui/src/flow_chat/services/sessionNavStatusService.test.ts b/src/web-ui/src/flow_chat/services/sessionNavStatusService.test.ts
index 15006ddca4..6b616006d1 100644
--- a/src/web-ui/src/flow_chat/services/sessionNavStatusService.test.ts
+++ b/src/web-ui/src/flow_chat/services/sessionNavStatusService.test.ts
@@ -104,6 +104,90 @@ const install = (...ids: string[]) => {
 };
 
 describe('navigation status synchronization', () => {
+  it('keeps selection stable and promotes background starts even without mounted rows', () => {
+    const older = { ...row('older'), createdAt: 10 };
+    const newer = { ...row('newer'), createdAt: 20 };
+    sources.sessions.set(older.sessionId, older);
+    sources.sessions.set(newer.sessionId, newer);
+    install();
+    const notify = vi.fn();
+    disposers.push(sessionNavStatusService.subscribeOrdering(notify));
+    sources.sessions.set(older.sessionId, { ...older, status: 'active', lastActiveAt: Date.now() });
+    sources.storeListeners.forEach(listener => listener({ sessions: sources.sessions }));
+    expect(sessionNavStatusService.getSortTimestamp(older)).toBe(10);
+    expect(notify).not.toHaveBeenCalled();
+    sources.events.get('onDialogTurnStarted')!({ sessionId: older.sessionId, turnId: 'turn' });
+    const startedAt = sessionNavStatusService.getSortTimestamp(older);
+    expect(startedAt).toBeGreaterThan(sessionNavStatusService.getSortTimestamp(newer));
+    expect(sessionNavStatusService.isRunning(older.sessionId)).toBe(true);
+    notify.mockClear();
+    sources.events.get('onDialogTurnStarted')!({ sessionId: older.sessionId, turnId: 'turn' });
+    sources.events.get('onSessionStateChanged')!({ sessionId: older.sessionId, newState: 'processing' });
+    expect(sessionNavStatusService.getSortTimestamp(older)).toBe(startedAt);
+    expect(notify).not.toHaveBeenCalled();
+    sources.events.get('onDialogTurnCompleted')!({ sessionId: older.sessionId, turnId: 'turn' });
+    expect(sessionNavStatusService.getSortTimestamp(older)).toBe(startedAt);
+    expect(sessionNavStatusService.isRunning(older.sessionId)).toBe(false);
+    expect(sources.read).not.toHaveBeenCalled();
+  });
+
+  it('promotes detached jobs through the same queued to running projection', () => {
+    const value = row('dispatch-order', { dispatchJobId: 'job', dispatchJobState: 'queued' });
+    sources.sessions.set(value.sessionId, value);
+    install();
+    let startedAt: number | undefined;
+    for (const dispatchJobState of ['running', 'completed'] as const) {
+      sources.sessions.set(value.sessionId, { ...value, config: { ...value.config, dispatchJobState } });
+      sources.storeListeners.forEach(listener => listener({ sessions: sources.sessions }));
+      expect(sessionNavStatusService.getSortTimestamp(value)).toBeGreaterThan(value.createdAt);
+      startedAt ??= sessionNavStatusService.getSortTimestamp(value);
+      expect(sessionNavStatusService.getSortTimestamp(value)).toBe(startedAt);
+      expect(sessionNavStatusService.isRunning(value.sessionId)).toBe(dispatchJobState === 'running');
+    }
+    expect(sources.read).not.toHaveBeenCalled();
+  });
+
+  it('retains ordering when rows remount and only promotes again after a blocking interaction resumes', () => {
+    const value = row('remount-order', { dispatchJobId: 'job', dispatchJobState: 'running' });
+    sources.sessions.set(value.sessionId, value);
+    install();
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(value.createdAt);
+    const unsubscribe = sessionNavStatusService.subscribe(value.sessionId, () => {});
+    unsubscribe();
+    disposers.push(sessionNavStatusService.subscribe(value.sessionId, () => {}));
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(value.createdAt);
+    sources.permissions = [{ requestId: 'approval', sessionId: value.sessionId, roundId: 'round' } as PermissionRequest];
+    sources.permissionListeners.forEach(listener => listener());
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(value.createdAt);
+    sources.permissions = [];
+    sources.permissionListeners.forEach(listener => listener());
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBeGreaterThan(value.createdAt);
+  });
+
+  it('retains starts and completions from a background device without reordering the current device', () => {
+    const value = row('same-id-on-devices');
+    sources.sessions.set(value.sessionId, value);
+    activateSurface('ordering-local');
+    install();
+    activateSurface('ordering-peer');
+    activateSurface('ordering-local');
+    sessionActivityStore.observe('ordering-peer', 'agentic://dialog-turn-started', {
+      sessionId: value.sessionId, turnId: 'remote-turn',
+    });
+    sessionActivityStore.observe('ordering-peer', 'agentic://dialog-turn-completed', {
+      sessionId: value.sessionId, turnId: 'remote-turn',
+    });
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(value.createdAt);
+    activateSurface('ordering-peer');
+    const startedAt = sessionNavStatusService.getSortTimestamp(value);
+    expect(startedAt).toBeGreaterThan(value.createdAt);
+    activateSurface('ordering-local');
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(value.createdAt);
+    activateSurface('ordering-peer');
+    expect(sessionNavStatusService.getSortTimestamp(value)).toBe(startedAt);
+    expect(sources.read).not.toHaveBeenCalled();
+  });
+
   it('bootstraps all unopened rows in one request and never populates their transcripts', async () => {
     const ids = Array.from({ length: 40 }, (_, i) => `initial-${i}`);
     ids.forEach(id => sources.sessions.set(id, row(id)));
diff --git a/src/web-ui/src/flow_chat/services/sessionNavStatusService.ts b/src/web-ui/src/flow_chat/services/sessionNavStatusService.ts
index b0a035e680..fb76b74e57 100644
--- a/src/web-ui/src/flow_chat/services/sessionNavStatusService.ts
+++ b/src/web-ui/src/flow_chat/services/sessionNavStatusService.ts
@@ -1,6 +1,6 @@
 import { agentAPI, type AgenticEvent, type PermissionRequest } from '@/infrastructure/api/service-api/AgentAPI';
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
-import { getActiveSurfaceId, getActiveSurfaceScope, onSurfaceActivated, surfaceIdForDevice } from '@/infrastructure/peer-device/deviceSurface';
+import { getActiveSurfaceId, getActiveSurfaceScope, onSurfaceActivated, surfaceIdForDevice, type DeviceSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
 import { observeSurfaceEvents } from '@/infrastructure/peer-device/deviceSurfaceRouting';
 import { createLogger } from '@/shared/utils/logger';
 import { flowChatStore } from '../store/FlowChatStore';
@@ -9,6 +9,7 @@ import { stateMachineManager } from '../state-machine';
 import { SessionExecutionState } from '../state-machine/types';
 import { driverForSession, sessionDriverNavigationStatusSources } from '../session-drivers/registry';
 import { deriveSessionNavStatus, type SessionNavStatus } from '../utils/sessionNavStatus';
+import { SessionNavOrdering } from '../utils/sessionNavOrdering';
 import type { Session } from '../types/flow-chat';
 import { ensureActivePermissionMailbox, liveSessionInteractionStore } from './liveSessionInteractionStore';
 import { SessionActivitySync, type ActivityTarget } from './sessionActivitySync';
@@ -17,7 +18,10 @@ const log = createLogger('SessionNavStatus');
 const RECONCILE_INTERVAL_MS = 15_000;
 const SETTLED_RECONCILE_INTERVAL_MS = 60_000;
 const IDLE: SessionNavStatus = { kind: 'idle', pendingCount: 0 };
-const rows = new Map<string, { listeners: Set<() => void>; status: SessionNavStatus; session?: Session }>();
+const rows = new Map<string, { listeners: Set<() => void>; status: SessionNavStatus }>();
+const ordering = new SessionNavOrdering();
+const orderingListeners = new Set<() => void>();
+let orderingRevision = 0;
 const failed = new Set<string>();
 const unsupported = new Set<string>();
 let permissionSource: readonly PermissionRequest[] | undefined;
@@ -25,6 +29,11 @@ let permissionsBySession = new Map<string, PermissionRequest[]>();
 let cleanup: (() => void) | undefined;
 let requestRefresh: ((sessionId: string, force?: boolean) => void) | undefined;
 
+function publishOrdering(): void {
+  orderingRevision++;
+  for (const notify of orderingListeners) notify();
+}
+
 function indexPermissions(): void {
   const mailbox = liveSessionInteractionStore.getActiveSnapshot().requests;
   if (permissionSource !== mailbox) {
@@ -43,9 +52,10 @@ function indexPermissions(): void {
 
 function publish(sessionId: string): void {
   const row = rows.get(sessionId);
-  if (!row) return;
+  const surfaceId = getActiveSurfaceId();
   const session = flowChatStore.getState().sessions.get(sessionId);
-  row.session = session;
+  if (!session && ordering.delete(surfaceId, sessionId)) publishOrdering();
+  if (!session && !row) return;
   const driver = driverForSession(sessionId, session);
   const source = driver.permissionRequestSource(sessionId);
   const navigationStatus = driver.navigationStatusSource?.getSnapshot(sessionId);
@@ -60,6 +70,8 @@ function publish(sessionId: string): void {
       : source.getSnapshot() as readonly PermissionRequest[],
     reachability: navigationStatus?.reachability,
   });
+  if (session && ordering.observe(surfaceId, session, next)) publishOrdering();
+  if (!row) return;
   if (row.status.kind === next.kind && row.status.pendingCount === next.pendingCount) return;
   row.status = next;
   for (const notify of row.listeners) notify();
@@ -167,21 +179,30 @@ export function installSessionNavStatusService(): () => void {
     sessionActivityStore.observe(surfaceIdForDevice(deviceId), name, payload);
   }));
   disposers.push(sessionActivityStore.subscribe((surfaceId, sessionId) => {
-    if (surfaceId !== getActiveSurfaceId()) return;
-    const summary = sessionActivityStore.get(sessionId)?.summary;
+    const summary = sessionActivityStore.get(sessionId, surfaceId)?.summary;
+    if (surfaceId !== getActiveSurfaceId()) {
+      const session = ordering.get(surfaceId, sessionId)?.session;
+      if (session && summary && !session.config.dispatchJobId) {
+        ordering.observe(surfaceId, session, deriveSessionNavStatus({ session, activity: summary }));
+      }
+      return;
+    }
     if (summary) flowChatStore.applySessionActivityReceipt(summary);
     publish(sessionId);
     refresh(sessionId);
   }));
   disposers.push(flowChatStore.subscribe(state => {
-    for (const [sessionId, row] of rows) {
-      const session = state.sessions.get(sessionId);
-      if (row.session === session) continue;
-      const prior = row.session;
+    const surfaceId = getActiveSurfaceId();
+    for (const sessionId of ordering.sessionIds(surfaceId)) {
+      if (!state.sessions.has(sessionId)) publish(sessionId);
+    }
+    for (const [sessionId, session] of state.sessions) {
+      const prior = ordering.get(surfaceId, sessionId)?.session;
+      if (prior === session) continue;
+      publish(sessionId);
       if (prior?.needsUserAttention !== session?.needsUserAttention) {
         sessionActivityStore.invalidate(sessionId);
       }
-      publish(sessionId);
       if (!prior && session) refresh(sessionId);
     }
   }));
@@ -213,8 +234,7 @@ export function installSessionNavStatusService(): () => void {
   }));
   for (const source of sessionDriverNavigationStatusSources()) {
     disposers.push(source.subscribe(() => {
-      for (const sessionId of rows.keys()) {
-        const session = flowChatStore.getState().sessions.get(sessionId);
+      for (const [sessionId, session] of flowChatStore.getState().sessions) {
         if (driverForSession(sessionId, session).navigationStatusSource === source) publish(sessionId);
       }
     }));
@@ -231,7 +251,8 @@ export function installSessionNavStatusService(): () => void {
     failed.clear();
     retry.clear();
     machineTurns.clear();
-    for (const sessionId of rows.keys()) publish(sessionId);
+    for (const sessionId of new Set([...rows.keys(), ...flowChatStore.getState().sessions.keys()])) publish(sessionId);
+    publishOrdering();
     refreshAll();
   }));
   const interval = setInterval(() => refreshAll(false), RECONCILE_INTERVAL_MS);
@@ -247,6 +268,7 @@ export function installSessionNavStatusService(): () => void {
     document.addEventListener('visibilitychange', wake);
   }
   void ensureActivePermissionMailbox();
+  for (const sessionId of flowChatStore.getState().sessions.keys()) publish(sessionId);
   for (const sessionId of rows.keys()) { publish(sessionId); refresh(sessionId); }
   cleanup = () => {
     disposed = true;
@@ -264,12 +286,25 @@ export function installSessionNavStatusService(): () => void {
     unsupported.clear();
     permissionSource = undefined;
     permissionsBySession.clear();
+    ordering.clear();
     cleanup = undefined;
   };
   return cleanup;
 }
 
 export const sessionNavStatusService = {
+  clearSurface(surfaceId: DeviceSurfaceId): void {
+    ordering.clearSurface(surfaceId);
+    if (surfaceId === getActiveSurfaceId()) publishOrdering();
+  },
+  getOrderingSnapshot: (): number => orderingRevision,
+  subscribeOrdering(notify: () => void): () => void {
+    orderingListeners.add(notify);
+    return () => { orderingListeners.delete(notify); };
+  },
+  getSortTimestamp: (session: Session): number => ordering.get(getActiveSurfaceId(), session.sessionId)?.sortTimestamp
+    ?? session.lastFinishedAt ?? session.createdAt,
+  isRunning: (sessionId: string): boolean => ordering.get(getActiveSurfaceId(), sessionId)?.status.kind === 'running',
   getSnapshot: (sessionId: string): SessionNavStatus => rows.get(sessionId)?.status ?? IDLE,
   subscribe(sessionId: string, notify: () => void): () => void {
     let row = rows.get(sessionId);
diff --git a/src/web-ui/src/flow_chat/utils/sessionNavOrdering.test.ts b/src/web-ui/src/flow_chat/utils/sessionNavOrdering.test.ts
new file mode 100644
index 0000000000..7b904bafd8
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionNavOrdering.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import type { Session } from '../types/flow-chat';
+import type { SessionNavStatusKind } from './sessionNavStatus';
+import { SessionNavOrdering } from './sessionNavOrdering';
+import { compareWorkspaceNavSessions } from '@/app/components/NavPanel/workspaceSessionView';
+
+const session = (sessionId: string, createdAt: number, overrides: Partial<Session> = {}): Session => ({
+  sessionId, title: sessionId, createdAt, lastActiveAt: createdAt, status: 'idle',
+  config: {}, dialogTurns: [], error: null, ...overrides,
+} as Session);
+const status = (kind: SessionNavStatusKind) => ({ kind, pendingCount: 0 });
+const sortedIds = (store: SessionNavOrdering, sessions: Session[], surface = 'local') => [...sessions]
+  .sort((left, right) => compareWorkspaceNavSessions(left, right, 'updated', value => value.title ?? '',
+    value => store.get(surface, value.sessionId)?.status.kind === 'running',
+    value => store.get(surface, value.sessionId)?.sortTimestamp ?? value.createdAt))
+  .map(value => value.sessionId);
+
+describe('navigation execution recency', () => {
+  it('captures historical order once and ignores opening, hydration, rename and completion timestamps', () => {
+    const store = new SessionNavOrdering();
+    let older = session('older', 10, { lastFinishedAt: 30, historyState: 'metadata-only' });
+    const newer = session('newer', 20, { lastFinishedAt: 40 });
+    store.observe('local', older, status('idle'), 100);
+    store.observe('local', newer, status('idle'), 100);
+    expect(sortedIds(store, [older, newer])).toEqual(['newer', 'older']);
+    for (const change of [
+      { status: 'active' as const, lastActiveAt: 200 },
+      { historyState: 'ready' as const, updatedAt: 300 },
+      { title: 'Renamed', updatedAt: 400 },
+      { lastFinishedAt: 500 },
+    ]) {
+      older = { ...older, ...change };
+      expect(store.observe('local', older, status('idle'), 600)).toBe(false);
+      expect(sortedIds(store, [older, newer])).toEqual(['newer', 'older']);
+    }
+  });
+
+  it('promotes each new run once and keeps the order during output, completion and failure', () => {
+    const store = new SessionNavOrdering();
+    const older = session('older', 10);
+    const newer = session('newer', 20);
+    const sessions = [older, newer];
+    sessions.forEach(value => store.observe('local', value, status('idle'), 30));
+    store.observe('local', older, status('running'), 100);
+    expect(sortedIds(store, sessions)).toEqual(['older', 'newer']);
+    store.observe('local', newer, status('running'), 200);
+    expect(sortedIds(store, sessions)).toEqual(['newer', 'older']);
+    for (const kind of ['running', 'unread', 'idle', 'error'] as const) {
+      store.observe('local', { ...older, lastActiveAt: 300, lastFinishedAt: 300 }, status(kind), 300);
+      expect(sortedIds(store, sessions)).toEqual(['newer', 'older']);
+    }
+    store.observe('local', older, status('running'), 400);
+    expect(sortedIds(store, sessions)).toEqual(['older', 'newer']);
+  });
+
+  it.each(['idle', 'approval', 'input', 'error', 'unread', 'paused', 'stopped', 'queued'] as const)(
+    'promotes on %s to running, including resuming an existing turn', kind => {
+      const store = new SessionNavOrdering();
+      const value = session('session', 10);
+      store.observe('local', value, status(kind), 20);
+      store.observe('local', value, status('running'), 100);
+      expect(store.get('local', value.sessionId)?.sortTimestamp).toBe(100);
+      expect(store.observe('local', value, status('running'), 200)).toBe(false);
+    },
+  );
+
+  it('does not treat initial running snapshots or a reconnect as another start', () => {
+    const store = new SessionNavOrdering();
+    const value = session('session', 10, { lastFinishedAt: 20 });
+    store.observe('local', value, status('syncing'), 100);
+    store.observe('local', value, status('running'), 200);
+    expect(store.get('local', value.sessionId)?.sortTimestamp).toBe(20);
+    store.observe('local', value, status('syncing'), 300);
+    store.observe('local', value, status('running'), 400);
+    expect(store.get('local', value.sessionId)?.sortTimestamp).toBe(20);
+    store.observe('local', value, status('idle'), 500);
+    store.observe('local', value, status('syncing'), 600);
+    store.observe('local', value, status('running'), 700);
+    expect(store.get('local', value.sessionId)?.sortTimestamp).toBe(700);
+  });
+
+  it('orders rapid starts deterministically even if the clock moves backwards', () => {
+    const store = new SessionNavOrdering();
+    const first = session('first', 10);
+    const second = session('second', 20);
+    const third = session('third', 30);
+    const sessions = [first, second, third];
+    sessions.forEach(value => store.observe('local', value, status('idle'), 40));
+    store.observe('local', first, status('running'), 100);
+    store.observe('local', second, status('running'), 100);
+    store.observe('local', third, status('running'), 90);
+    expect(sortedIds(store, sessions)).toEqual(['third', 'second', 'first']);
+  });
+
+  it('isolates identical session ids across devices and retains background ordering', () => {
+    const store = new SessionNavOrdering();
+    const sessions = [session('older', 10), session('newer', 20)];
+    for (const surface of ['local', 'peer']) {
+      sessions.forEach(value => store.observe(surface, value, status('idle'), 30));
+    }
+    store.observe('peer', sessions[0], status('running'), 100);
+    store.observe('peer', sessions[0], status('unread'), 200);
+    expect(sortedIds(store, sessions, 'local')).toEqual(['newer', 'older']);
+    expect(sortedIds(store, sessions, 'peer')).toEqual(['older', 'newer']);
+    store.delete('peer', 'older');
+    expect(store.get('peer', 'older')).toBeUndefined();
+    expect(store.get('local', 'older')).toBeDefined();
+    store.clearSurface('peer');
+    expect([...store.sessionIds('peer')]).toEqual([]);
+    expect([...store.sessionIds('local')]).toEqual(['older', 'newer']);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/sessionNavOrdering.ts b/src/web-ui/src/flow_chat/utils/sessionNavOrdering.ts
new file mode 100644
index 0000000000..dadedf34e0
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/sessionNavOrdering.ts
@@ -0,0 +1,62 @@
+import type { DeviceSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
+import type { Session } from '../types/flow-chat';
+import type { SessionNavStatus, SessionNavStatusKind } from './sessionNavStatus';
+
+interface Entry {
+  session: Session;
+  status: SessionNavStatus;
+  lastKnownKind?: SessionNavStatusKind;
+  sortTimestamp: number;
+}
+
+/** Navigation recency is a view projection, independent of selection and transcript writes. */
+export class SessionNavOrdering {
+  private surfaces = new Map<DeviceSurfaceId, Map<string, Entry>>();
+  private latestTimestamps = new Map<DeviceSurfaceId, number>();
+
+  get(surfaceId: DeviceSurfaceId, sessionId: string): Readonly<Entry> | undefined {
+    return this.surfaces.get(surfaceId)?.get(sessionId);
+  }
+
+  sessionIds(surfaceId: DeviceSurfaceId): Iterable<string> {
+    return this.surfaces.get(surfaceId)?.keys() ?? [];
+  }
+
+  observe(surfaceId: DeviceSurfaceId, session: Session, status: SessionNavStatus, now = Date.now()): boolean {
+    let entries = this.surfaces.get(surfaceId);
+    if (!entries) this.surfaces.set(surfaceId, entries = new Map());
+    const previous = entries.get(session.sessionId);
+    // Capture historical recency once. Hydration, read receipts, title changes,
+    // streaming and completion must never become new navigation activity.
+    let sortTimestamp = previous?.sortTimestamp ?? session.lastFinishedAt ?? session.createdAt;
+    if (status.kind === 'running' && previous?.lastKnownKind && previous.lastKnownKind !== 'running') {
+      // Keep consecutive starts ordered even within one clock tick or after a clock adjustment.
+      sortTimestamp = Math.max(now, (this.latestTimestamps.get(surfaceId) ?? sortTimestamp) + 1);
+    }
+    this.latestTimestamps.set(surfaceId, Math.max(this.latestTimestamps.get(surfaceId) ?? 0, sortTimestamp));
+    entries.set(session.sessionId, {
+      session,
+      status,
+      sortTimestamp,
+      // Losing connectivity is not an execution transition. A running session
+      // must not jump again when the same host snapshot becomes available.
+      lastKnownKind: status.kind === 'syncing' ? previous?.lastKnownKind : status.kind,
+    });
+    return !previous || previous.sortTimestamp !== sortTimestamp
+      || (previous.status.kind === 'running') !== (status.kind === 'running');
+  }
+
+  delete(surfaceId: DeviceSurfaceId, sessionId: string): boolean {
+    return this.surfaces.get(surfaceId)?.delete(sessionId) ?? false;
+  }
+
+  clearSurface(surfaceId: DeviceSurfaceId): void {
+    this.surfaces.delete(surfaceId);
+    this.latestTimestamps.delete(surfaceId);
+  }
+
+  clear(): void {
+    this.surfaces.clear();
+    this.latestTimestamps.clear();
+  }
+}
diff --git a/src/web-ui/src/flow_chat/utils/workspaceScope.test.ts b/src/web-ui/src/flow_chat/utils/workspaceScope.test.ts
index b8dd5d5c74..b424974c0f 100644
--- a/src/web-ui/src/flow_chat/utils/workspaceScope.test.ts
+++ b/src/web-ui/src/flow_chat/utils/workspaceScope.test.ts
@@ -12,6 +12,11 @@ function remoteWorkspace(id: string, connectionId: string): WorkspaceInfo {
 }
 
 describe('findWorkspaceForSession', () => {
+  it('resolves a stale workspace id by path when given an opened-workspace iterator', () => {
+    const workspace = { id: 'new-id', rootPath: '/project' } as WorkspaceInfo;
+    expect(findWorkspaceForSession({ workspaceId: 'old-id', workspacePath: '/project' },
+      new Map([[workspace.id, workspace]]).values())).toBe(workspace);
+  });
   it('uses remote identity instead of an ambiguous POSIX path', () => {
     const first = remoteWorkspace('workspace-a', 'connection-a');
     const second = remoteWorkspace('workspace-b', 'connection-b');
diff --git a/src/web-ui/src/flow_chat/utils/workspaceScope.ts b/src/web-ui/src/flow_chat/utils/workspaceScope.ts
index 5528c05493..9132912e02 100644
--- a/src/web-ui/src/flow_chat/utils/workspaceScope.ts
+++ b/src/web-ui/src/flow_chat/utils/workspaceScope.ts
@@ -8,10 +8,12 @@
 import type { WorkspaceInfo } from '@/shared/types';
 import type { Session } from '../types/flow-chat';
 import { sessionBelongsToWorkspaceNavRow } from './sessionOrdering';
+import { isRemoteSessionScope } from '@/shared/utils/remoteSessionScope';
+import { normalizeRemoteWorkspacePath } from '@/shared/utils/pathUtils';
 
 type SessionScope = Pick<
   Session,
-  'workspaceId' | 'workspacePath' | 'remoteConnectionId' | 'remoteSshHost'
+  'workspaceId' | 'workspacePath' | 'projectWorkspacePath' | 'remoteConnectionId' | 'remoteSshHost'
 >;
 
 type WorkspaceScope = Pick<WorkspaceInfo, 'id' | 'rootPath' | 'connectionId' | 'sshHost'>;
@@ -22,6 +24,12 @@ export function sessionMatchesWorkspace(session: SessionScope, workspace: Worksp
   if (sid && wid && sid === wid) {
     return true;
   }
+  const remote = isRemoteSessionScope(session.remoteConnectionId, session.remoteSshHost);
+  if (remote !== isRemoteSessionScope(workspace.connectionId, workspace.sshHost)) return false;
+  if (remote && ![session.workspacePath, session.projectWorkspacePath].some(path => path
+    && normalizeRemoteWorkspacePath(path) === normalizeRemoteWorkspacePath(workspace.rootPath))) {
+    return false;
+  }
   // Stale or missing id on the session: still match by path + remote scope.
   return sessionBelongsToWorkspaceNavRow(
     session,
@@ -35,13 +43,15 @@ export function findWorkspaceForSession(
   session: SessionScope,
   workspaces: Iterable<WorkspaceInfo>
 ): WorkspaceInfo | undefined {
+  // Callers also pass Map iterators; preserve candidates for the legacy-id fallback.
+  const candidates = [...workspaces];
   const sid = session.workspaceId?.trim();
   if (sid) {
-    for (const w of workspaces) {
+    for (const w of candidates) {
       if (w.id === sid) return w;
     }
   }
-  for (const w of workspaces) {
+  for (const w of candidates) {
     if (sessionMatchesWorkspace(session, w)) return w;
   }
   return undefined;
diff --git a/src/web-ui/src/infrastructure/design-system/RollingTextIntegration.test.tsx b/src/web-ui/src/infrastructure/design-system/RollingTextIntegration.test.tsx
new file mode 100644
index 0000000000..700d290121
--- /dev/null
+++ b/src/web-ui/src/infrastructure/design-system/RollingTextIntegration.test.tsx
@@ -0,0 +1,231 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { RollingText, TabGroup } from '@openbitfun/ui';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+interface ControlledAnimation {
+  target: HTMLElement;
+  frames: Keyframe[];
+  options: KeyframeAnimationOptions;
+  finished: Promise<Animation>;
+  cancel: ReturnType<typeof vi.fn>;
+  finish: () => void;
+  transform?: string;
+  width?: number;
+}
+
+// Exercise the package against the host's animation/layout boundary. These
+// deterministic measurements verify lifecycle contracts, not visual fidelity.
+describe('RollingText in the Web UI host', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let reduced: boolean;
+  let mediaEvents: EventTarget;
+  let animations: ControlledAnimation[];
+  let active: Map<HTMLElement, ControlledAnimation>;
+  let animateDescriptor: PropertyDescriptor | undefined;
+  const widths: Record<string, number> = { Short: 64, 'Long session title': 184, Latest: 100, Renamed: 88 };
+
+  beforeEach(() => {
+    reduced = false;
+    mediaEvents = new EventTarget();
+    animations = [];
+    active = new Map();
+    vi.stubGlobal('matchMedia', () => ({
+      get matches() { return reduced; },
+      addEventListener: mediaEvents.addEventListener.bind(mediaEvents),
+      removeEventListener: mediaEvents.removeEventListener.bind(mediaEvents),
+    }));
+
+    const computedStyle = window.getComputedStyle.bind(window);
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(element => {
+      const style = computedStyle(element);
+      return new Proxy(style, {
+        get(target, property) {
+          if (property === 'transform' && active.has(element as HTMLElement)) {
+            return active.get(element as HTMLElement)?.transform ?? 'none';
+          }
+          if (property === 'getPropertyValue') return (name: string) => {
+            if (name === '--_rolling-text-duration') return '320ms';
+            if (name === '--_rolling-text-easing') return 'cubic-bezier(0.77, 0, 0.175, 1)';
+            return target.getPropertyValue(name);
+          };
+          return Reflect.get(target, property);
+        },
+      });
+    });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      const title = this.querySelector('[data-rolling-text-part="current"]')?.textContent ?? '';
+      const width = active.get(this)?.width ?? widths[title] ?? 0;
+      return { width, height: 20, x: 0, y: 0, top: 0, left: 0, right: width, bottom: 20, toJSON() {} };
+    });
+    animateDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'animate');
+    Object.defineProperty(HTMLElement.prototype, 'animate', {
+      configurable: true,
+      value(this: HTMLElement, frames: Keyframe[], options: KeyframeAnimationOptions) {
+        let resolve!: (value: Animation) => void;
+        let reject!: (reason: Error) => void;
+        const animation: ControlledAnimation = {
+          target: this,
+          frames,
+          options,
+          transform: frames[0].transform as string | undefined,
+          width: frames[0].inlineSize ? Number.parseFloat(String(frames[0].inlineSize)) : undefined,
+          finished: new Promise<Animation>((yes, no) => { resolve = yes; reject = no; }),
+          cancel: vi.fn(() => {
+            if (active.get(this) === animation) active.delete(this);
+            reject(new Error('Animation cancelled'));
+          }),
+          finish() {
+            const last = frames[frames.length - 1];
+            animation.transform = last.transform as string | undefined;
+            animation.width = last.inlineSize ? Number.parseFloat(String(last.inlineSize)) : undefined;
+            resolve(animation as unknown as Animation);
+          },
+        };
+        active.set(this, animation);
+        animations.push(animation);
+        return animation;
+      },
+    });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    if (animateDescriptor) Object.defineProperty(HTMLElement.prototype, 'animate', animateDescriptor);
+    else Reflect.deleteProperty(HTMLElement.prototype, 'animate');
+  });
+
+  function render(text: string, transitionKey?: string) {
+    act(() => root.render(<RollingText transitionKey={transitionKey}>{text}</RollingText>));
+  }
+
+  function rolling() {
+    return container.querySelector<HTMLElement>('[data-openbitfun-component="rolling-text"]')!;
+  }
+
+  async function finishCurrentMotion() {
+    await act(async () => { [...active.values()].forEach(animation => animation.finish()); });
+  }
+
+  it('starts static and treats edits under the same identity as text updates', () => {
+    render('Short', 'a');
+    render('Renamed', 'a');
+    expect(animations).toHaveLength(0);
+    expect(rolling().textContent).toBe('Renamed');
+    render('Latest', 'b');
+    expect(container.querySelector('[data-rolling-text-part="outgoing"]')?.textContent).toBe('Renamed');
+    expect(animations[2].frames).toEqual([{ inlineSize: '88px' }, { inlineSize: '100px' }]);
+  });
+
+  it('coordinates growing and shrinking widths with both lines, then releases layout', async () => {
+    render('Short');
+    render('Long session title');
+    expect(animations).toHaveLength(3);
+    expect(animations.map(animation => animation.options)).toEqual(Array(3).fill({
+      duration: 320, easing: 'cubic-bezier(0.77, 0, 0.175, 1)', fill: 'both',
+    }));
+    expect(animations[2].frames).toEqual([{ inlineSize: '64px' }, { inlineSize: '184px' }]);
+    const outgoing = container.querySelector('[data-rolling-text-part="outgoing"]')!;
+    expect(outgoing.getAttribute('aria-hidden')).toBe('true');
+    expect(container.querySelector('[data-rolling-text-part="current"]')?.textContent).toBe('Long session title');
+    expect(container.querySelector('[data-rolling-text-part="current"] [data-overflow-behavior]')?.getAttribute('data-overflow-behavior')).toBe('fade');
+
+    await finishCurrentMotion();
+    expect(active.size).toBe(0);
+    expect(rolling().dataset.transitioning).toBe('false');
+    expect(rolling().style.inlineSize).toBe('');
+    expect(container.querySelector('[data-overflow-behavior="marquee"]')).not.toBeNull();
+    render('Short');
+    expect(animations[5].frames).toEqual([{ inlineSize: '184px' }, { inlineSize: '64px' }]);
+  });
+
+  it('retargets from displayed positions and width while keeping only two text layers', async () => {
+    render('Short', 'a');
+    render('Long session title', 'b');
+    const obsolete = [...animations];
+    obsolete[0].transform = 'matrix(1, 0, 0, 1, 9)';
+    obsolete[1].transform = 'matrix(1, 0, 0, 1, -11)';
+    obsolete[2].width = 128;
+    render('Latest', 'c');
+    expect(animations[3].frames[0].transform).toBe('matrix(1, 0, 0, 1, 9)');
+    expect(animations[4].frames[0].transform).toBe('matrix(1, 0, 0, 1, -11)');
+    expect(animations[5].frames).toEqual([{ inlineSize: '128px' }, { inlineSize: '100px' }]);
+    expect(obsolete.every(animation => animation.cancel.mock.calls.length === 1)).toBe(true);
+    expect(container.querySelectorAll('[data-rolling-text-part]')).toHaveLength(2);
+    expect(container.querySelector('[data-rolling-text-part="current"]')?.textContent).toBe('Latest');
+    await act(async () => { obsolete.forEach(animation => animation.finish()); });
+    expect(rolling().dataset.transitioning).toBe('true');
+    await finishCurrentMotion();
+    expect(rolling().textContent).toBe('Latest');
+  });
+
+  it('reverses smoothly when returning to the outgoing resource', async () => {
+    render('Short', 'a');
+    render('Long session title', 'b');
+    animations[2].width = 124;
+    render('Short', 'a');
+    expect(animations[3].frames[1].transform).toBe('translateY(100%)');
+    expect(animations[4].frames[1].transform).toBe('translateY(0)');
+    expect(animations[5].frames).toEqual([{ inlineSize: '124px' }, { inlineSize: '64px' }]);
+    await finishCurrentMotion();
+    expect(rolling().textContent).toBe('Short');
+    expect(rolling().dataset.transitioning).toBe('false');
+  });
+
+  it('cancels on reduced-motion changes and never replays a completed replacement', () => {
+    render('Short', 'a');
+    render('Long session title', 'b');
+    act(() => { reduced = true; mediaEvents.dispatchEvent(new Event('change')); });
+    expect(rolling().textContent).toBe('Long session title');
+    expect(rolling().dataset.transitioning).toBe('false');
+    expect(active.size).toBe(0);
+    render('Latest', 'c');
+    expect(animations).toHaveLength(3);
+    act(() => { reduced = false; mediaEvents.dispatchEvent(new Event('change')); });
+    expect(animations).toHaveLength(3);
+  });
+
+  it('renders immediately on hosts without Web Animations and cancels on unmount', () => {
+    render('Short');
+    render('Latest');
+    act(() => root.render(null));
+    expect(active.size).toBe(0);
+    expect(animations.every(animation => animation.cancel.mock.calls.length === 1)).toBe(true);
+    Object.defineProperty(HTMLElement.prototype, 'animate', { configurable: true, value: undefined });
+    render('Short');
+    render('Latest');
+    expect(rolling().dataset.transitioning).toBe('false');
+    expect(rolling().textContent).toBe('Latest');
+  });
+
+  it('preserves the focused tab and close action while its resource title rolls', () => {
+    function renderTabs(title: string, id: string) {
+      act(() => root.render(<TabGroup items={[
+        { value: 'workspace', label: title, labelTransitionKey: id, endAction: <button>Close</button> },
+        { value: 'settings', label: 'Settings' },
+      ]} />));
+    }
+    renderTabs('Short', 'a');
+    const tab = container.querySelector<HTMLButtonElement>('[role="tab"]')!;
+    const close = container.querySelector('[data-openbitfun-part="endAction"] button');
+    tab.focus();
+    renderTabs('Long session title', 'b');
+    expect(container.querySelector('[role="tab"]')).toBe(tab);
+    expect(document.activeElement).toBe(tab);
+    expect(container.querySelector('[data-openbitfun-part="endAction"] button')).toBe(close);
+    expect(tab.contains(close)).toBe(false);
+    expect(tab.getAttribute('aria-selected')).toBe('true');
+    expect(container.querySelectorAll('[data-openbitfun-component="rolling-text"]')).toHaveLength(1);
+  });
+});
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index a262b29e35..3e394e4458 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -1511,7 +1511,8 @@
     "tabsLabel": "Scene tabs",
     "scrollPrevious": "Scroll tabs left",
     "scrollNext": "Scroll tabs right",
-    "closeTab": "Close {{label}}"
+    "closeTab": "Close {{label}}",
+    "workspaceUnavailable": "This session's workspace is not open. Reopen its workspace to switch to this session."
   },
   "loading": {
     "app": "Starting OpenBitFun...",
@@ -1519,6 +1520,13 @@
     "workspace": "Loading workspace..."
   },
   "welcomeScene": {
+    "space": {
+      "separator": ", ",
+      "work": "Work",
+      "play": "Play",
+      "your": "Your",
+      "suffix": " space."
+    },
     "tabLabel": "Welcome",
     "welcomeBack": "Welcome back to",
     "welcomeTabTitle": "Welcome",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index c07afd93fb..7c5630866f 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -1511,7 +1511,8 @@
     "tabsLabel": "场景标签页",
     "scrollPrevious": "向左滚动标签页",
     "scrollNext": "向右滚动标签页",
-    "closeTab": "关闭{{label}}"
+    "closeTab": "关闭{{label}}",
+    "workspaceUnavailable": "此会话所属的工作区尚未打开，请先重新打开该工作区，再切换到此会话。"
   },
   "loading": {
     "app": "正在启动 OpenBitFun...",
@@ -1519,6 +1520,13 @@
     "workspace": "正在加载工作区..."
   },
   "welcomeScene": {
+    "space": {
+      "separator": "，",
+      "work": "做点正事",
+      "play": "玩点花样",
+      "your": "随你发挥",
+      "suffix": "。"
+    },
     "tabLabel": "欢迎使用",
     "welcomeBack": "欢迎回到",
     "welcomeTabTitle": "欢迎使用",
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index a010a5b7d2..512237cff4 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -1511,7 +1511,8 @@
     "tabsLabel": "場景標籤頁",
     "scrollPrevious": "向左捲動標籤頁",
     "scrollNext": "向右捲動標籤頁",
-    "closeTab": "關閉{{label}}"
+    "closeTab": "關閉{{label}}",
+    "workspaceUnavailable": "此工作階段所屬的工作區尚未開啟，請先重新開啟該工作區，再切換至此工作階段。"
   },
   "loading": {
     "app": "正在啟動 OpenBitFun...",
@@ -1519,6 +1520,13 @@
     "workspace": "正在載入工作區..."
   },
   "welcomeScene": {
+    "space": {
+      "separator": "，",
+      "work": "做點正事",
+      "play": "玩點花樣",
+      "your": "隨你發揮",
+      "suffix": "。"
+    },
     "tabLabel": "歡迎使用",
     "welcomeBack": "歡迎回到",
     "welcomeTabTitle": "歡迎使用",
diff --git a/src/web-ui/src/shared/services/openShellSessionTarget.ts b/src/web-ui/src/shared/services/openShellSessionTarget.ts
index fd2727237b..05a3b8ef4b 100644
--- a/src/web-ui/src/shared/services/openShellSessionTarget.ts
+++ b/src/web-ui/src/shared/services/openShellSessionTarget.ts
@@ -1,3 +1,4 @@
+import { isSessionSceneId } from '@/app/components/SceneBar/types';
 import type { SceneTabId } from '@/app/components/SceneBar/types';
 import { useSceneStore } from '@/app/stores/sceneStore';
 import { useTerminalSceneStore } from '@/app/stores/terminalSceneStore';
@@ -27,7 +28,7 @@ export function openShellSessionTarget(options: OpenShellSessionTargetOptions):
   const { sessionId, sessionName } = options;
   const { activeTabId } = useSceneStore.getState();
 
-  if (activeTabId === 'session') {
+  if (isSessionSceneId(activeTabId)) {
     const targetMode = getCachedTerminalPanelPosition() === 'bottom' ? 'bottom-terminal' : 'agent';
     createTerminalTab(sessionId, sessionName, targetMode);
     return;
diff --git a/src/web-ui/src/shared/services/sceneOpenTargetResolver.test.ts b/src/web-ui/src/shared/services/sceneOpenTargetResolver.test.ts
index cde2850f6e..7aebb4f83f 100644
--- a/src/web-ui/src/shared/services/sceneOpenTargetResolver.test.ts
+++ b/src/web-ui/src/shared/services/sceneOpenTargetResolver.test.ts
@@ -1,26 +1,30 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { useSceneStore } from '@/app/stores/sceneStore';
+import { getSessionSceneTabId } from '@/app/components/SceneBar/types';
+
 import {
   resolveAndFocusOpenTarget,
   resolveOpenTarget,
 } from './sceneOpenTargetResolver';
 
+const target = { surfaceId: 'local', workspaceKey: 'project', sessionId: 'task' };
+
 describe('sceneOpenTargetResolver', () => {
   beforeEach(() => {
     useSceneStore.getState().resetForPeerSwitch();
   });
 
   it('keeps ordinary file opens in the active session auxiliary pane', () => {
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(target);
 
     expect(resolveOpenTarget('file')).toMatchObject({
       mode: 'agent',
-      targetSceneId: 'session',
+      targetSceneId: getSessionSceneTabId(target),
     });
   });
 
   it('routes an explicit project tree selection to the file viewer even from a session', () => {
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(target);
 
     expect(resolveOpenTarget('file', { source: 'project-nav' })).toMatchObject({
       mode: 'project',
@@ -29,7 +33,7 @@ describe('sceneOpenTargetResolver', () => {
   });
 
   it('focuses a newly opened file viewer and marks it for queued tab delivery', () => {
-    useSceneStore.getState().openScene('session');
+    useSceneStore.getState().openSessionScene(target);
 
     const resolution = resolveAndFocusOpenTarget('file', { source: 'project-nav' });
 
diff --git a/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts b/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
index dbeeb1af7a..1e3b8dbe3c 100644
--- a/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
+++ b/src/web-ui/src/shared/services/sceneOpenTargetResolver.ts
@@ -1,4 +1,5 @@
 import type { SceneTabId } from '@/app/components/SceneBar/types';
+import { isSessionSceneId } from '@/app/components/SceneBar/types';
 import { useSceneStore } from '@/app/stores/sceneStore';
 
 export type OpenIntent = 'file' | 'terminal';
@@ -38,8 +39,8 @@ export function resolveOpenTarget(intent: OpenIntent, context: OpenTargetContext
   }
 
   // Contextual file opens from the active Session stay in its AuxPane.
-  if (activeTabId === 'session') {
-    return { mode: 'agent', targetSceneId: 'session', sceneJustOpened: false };
+  if (activeTabId && isSessionSceneId(activeTabId)) {
+    return { mode: 'agent', targetSceneId: activeTabId, sceneJustOpened: false };
   }
 
   // Non-agent scenes route to their dedicated host scenes.

From 34d32363d0b1efedc6ae10ca593c68d5ceea88c8 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Tue, 8 Sep 2026 18:27:09 +0800
Subject: [PATCH 2/3] fix(web-ui): satisfy session navigation lint contracts

---
 .../sections/sessions/SessionsSection.tsx     | 10 ++-
 src/web-ui/src/app/stores/sceneStore.ts       | 64 +++++++++----------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index 217644908d..9cd9252847 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -293,9 +293,11 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
     sessionNavStatusService.getOrderingSnapshot,
     sessionNavStatusService.getOrderingSnapshot,
   );
-  const runningSessionIds = useMemo(() => new Set(
-    [...flowChatState.sessions.keys()].filter(sessionNavStatusService.isRunning),
-  ), [flowChatState.sessions, orderingRevision]);
+  const runningSessionIds = useMemo(() => {
+    // The revision invalidates these reads from the live navigation service.
+    void orderingRevision;
+    return new Set([...flowChatState.sessions.keys()].filter(sessionNavStatusService.isRunning));
+  }, [flowChatState.sessions, orderingRevision]);
   const [scheduledJobsSessionId, setScheduledJobsSessionId] = useState<string | null>(null);
   const [batchWorkspace, setBatchWorkspace] = useState<WorkspaceSessionScope | null>(null);
   const editInputRef = useRef<HTMLInputElement>(null);
@@ -798,6 +800,8 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
   );
 
   const { topLevelSessions: allTopLevelSessions, childrenByParent } = useMemo(() => {
+    // Activity timestamps can change independently of the session records.
+    void orderingRevision;
     const childMap = new Map<string, Session[]>();
     const parents: Session[] = [];
 
diff --git a/src/web-ui/src/app/stores/sceneStore.ts b/src/web-ui/src/app/stores/sceneStore.ts
index 87793b901c..13477b5fe4 100644
--- a/src/web-ui/src/app/stores/sceneStore.ts
+++ b/src/web-ui/src/app/stores/sceneStore.ts
@@ -72,38 +72,6 @@ export interface SessionSceneNavigation {
 let sessionNavigation: SessionSceneNavigation | undefined;
 let navigationRequest = 0;
 
-export function registerSessionSceneNavigation(adapter: SessionSceneNavigation): () => void {
-  sessionNavigation = adapter;
-  return () => {
-    if (sessionNavigation === adapter) {
-      sessionNavigation = undefined;
-      navigationRequest++;
-      if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
-    }
-  };
-}
-
-/** Every navigation path, including history and close fallback, uses this gate. */
-function navigateToScene(id: SceneTabId | null, commit: () => void, session?: SessionSceneTarget): void {
-  const hadPendingNavigation = useSceneStore.getState().pendingTabId !== null;
-  const request = ++navigationRequest;
-  const adapter = sessionNavigation;
-  const target = session ?? useSceneStore.getState().openTabs.find(tab => tab.id === id)?.session;
-  const isCurrent = () => request === navigationRequest && adapter === sessionNavigation;
-  if (!target || !adapter || (!hadPendingNavigation && adapter.isActive(target))) {
-    if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
-    commit();
-    return;
-  }
-
-  useSceneStore.setState({ pendingTabId: id });
-  void adapter.activate(target, isCurrent).then(activated => {
-    if (activated && isCurrent()) commit();
-  }).finally(() => {
-    if (isCurrent()) useSceneStore.setState({ pendingTabId: null });
-  });
-}
-
 function resolveNavSceneId(sceneId: SceneTabId | null): SceneTabId | null {
   if (sceneId === null) return null;
   return getSceneNav(sceneId) ? sceneId : null;
@@ -314,6 +282,38 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   },
 }));
 
+export function registerSessionSceneNavigation(adapter: SessionSceneNavigation): () => void {
+  sessionNavigation = adapter;
+  return () => {
+    if (sessionNavigation === adapter) {
+      sessionNavigation = undefined;
+      navigationRequest++;
+      if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
+    }
+  };
+}
+
+/** Every navigation path, including history and close fallback, uses this gate. */
+function navigateToScene(id: SceneTabId | null, commit: () => void, session?: SessionSceneTarget): void {
+  const hadPendingNavigation = useSceneStore.getState().pendingTabId !== null;
+  const request = ++navigationRequest;
+  const adapter = sessionNavigation;
+  const target = session ?? useSceneStore.getState().openTabs.find(tab => tab.id === id)?.session;
+  const isCurrent = () => request === navigationRequest && adapter === sessionNavigation;
+  if (!target || !adapter || (!hadPendingNavigation && adapter.isActive(target))) {
+    if (useSceneStore.getState().pendingTabId !== null) useSceneStore.setState({ pendingTabId: null });
+    commit();
+    return;
+  }
+
+  useSceneStore.setState({ pendingTabId: id });
+  void adapter.activate(target, isCurrent).then(activated => {
+    if (activated && isCurrent()) commit();
+  }).finally(() => {
+    if (isCurrent()) useSceneStore.setState({ pendingTabId: null });
+  });
+}
+
 function openSceneTarget(id: SceneTabId, session?: SessionSceneTarget): void {
   const get = useSceneStore.getState;
   const set = useSceneStore.setState;

From ae5e93cf4a9f4e36caa6ecfe70e4c6ba38d34c56 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Tue, 8 Sep 2026 18:38:14 +0800
Subject: [PATCH 3/3] test(web-ui): align session navigation integration
 contracts

---
 .../src/flow_chat/services/openBtwSession.test.ts      |  4 ++--
 .../src/infrastructure/creation/creationBridge.test.ts | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/web-ui/src/flow_chat/services/openBtwSession.test.ts b/src/web-ui/src/flow_chat/services/openBtwSession.test.ts
index 7ad129edf6..d6b89afcd8 100644
--- a/src/web-ui/src/flow_chat/services/openBtwSession.test.ts
+++ b/src/web-ui/src/flow_chat/services/openBtwSession.test.ts
@@ -530,7 +530,7 @@ describe('openMainSession', () => {
 
     await openMainSession('session-b');
 
-    expect(mocks.switchChatSession).toHaveBeenCalledWith('session-b');
+    expect(mocks.switchChatSession).toHaveBeenCalledWith('session-b', expect.any(Function));
     expect(mocks.syncSessionToModernStore).not.toHaveBeenCalledWith('session-b');
     expect(mocks.openScene).not.toHaveBeenCalledWith('session');
   });
@@ -546,7 +546,7 @@ describe('openMainSession', () => {
 
     await openMainSession('session-b');
 
-    expect(mocks.switchChatSession).toHaveBeenCalledWith('session-b');
+    expect(mocks.switchChatSession).toHaveBeenCalledWith('session-b', expect.any(Function));
     expect(mocks.syncSessionToModernStore).toHaveBeenCalledWith('session-b');
     expect(mocks.openScene).toHaveBeenCalledWith('session');
   });
diff --git a/src/web-ui/src/infrastructure/creation/creationBridge.test.ts b/src/web-ui/src/infrastructure/creation/creationBridge.test.ts
index 317b8df69b..9058697233 100644
--- a/src/web-ui/src/infrastructure/creation/creationBridge.test.ts
+++ b/src/web-ui/src/infrastructure/creation/creationBridge.test.ts
@@ -7,7 +7,13 @@ import { setPeerDeviceModeActiveFlag } from '../peer-device/peerModeFlag';
 import { api } from '../api/service-api/ApiClient';
 
 vi.mock('../api/service-api/ApiClient', () => ({ api: { listen: vi.fn(() => vi.fn()), invoke: vi.fn(async () => {}) } }));
-vi.mock('@/app/stores/sceneStore', () => ({ useSceneStore: { getState: () => ({ activeTabId: 'session' }), subscribe: () => vi.fn() } }));
+vi.mock('@/app/stores/sceneStore', async importOriginal => ({
+  ...await importOriginal<typeof import('@/app/stores/sceneStore')>(),
+  useSceneStore: {
+    getState: () => ({ activeTabId: 'session:workspace-test' }),
+    subscribe: () => vi.fn(),
+  },
+}));
 beforeEach(() => vi.stubGlobal('localStorage', new JSDOM('', { url: 'https://creation.test' }).window.localStorage));
 afterEach(() => { setPeerDeviceModeActiveFlag(false); document.body.innerHTML = ''; vi.unstubAllGlobals(); vi.clearAllMocks(); });
 
@@ -20,6 +26,8 @@ it('delivers a correlated Agent request to a registered command and updates the
   const detach = attachCreationRuntime(creation);
   const unlisten = listenForCreationRequests();
   const snapshot = await executeCreationRequest({ requestId: 'inspect-1', action: 'inspect' }) as ReturnType<typeof creation.inspect>;
+  expect(snapshot.scene).toBe('session');
+  expect(creation.api.getScene()).toBe('session');
   expect(snapshot.slots[0]).toEqual({ id: 'sidebar-footer', present: true, mounts: 1 });
   expect(snapshot.commands[0].id).toBe('counter.set');
   const [event, handler] = vi.mocked(api.listen).mock.calls[0];