From 931fdc8c00aee48070b0b357bf124dabc26924f6 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Thu, 29 Oct 2026 22:46:21 +0800
Subject: [PATCH 1/2] feat(flow-chat): add context usage previews and
 adjustable conversation width

---
 design-system/packages/ui/README.md           |    3 +
 .../components/Disclosure/Disclosure.meta.ts  |    2 +
 .../src/components/Disclosure/Disclosure.tsx  |    9 +-
 .../packages/ui/tests/disclosure.test.mjs     |    4 +-
 docs/architecture/theme-token-optimization.md |    9 +
 .../session-runtime-usage-report-design.md    |   93 ++
 src/apps/cli/src/dispatch/mod.rs              |    2 +
 src/apps/cli/src/management.rs                |    2 +
 src/apps/cli/src/modes/chat/selection.rs      |    2 +
 src/apps/desktop/src/api/session_api.rs       |    6 +
 .../src/runtime/session_application.rs        |    4 +
 src/crates/assembly/core/AGENTS.md            |    9 +
 .../core/src/agentic/execution/AGENTS.md      |   10 +
 .../agentic/execution/context_composition.rs  |  304 ++++
 .../src/agentic/execution/execution_engine.rs |  173 ++-
 .../core/src/agentic/execution/mod.rs         |    1 +
 .../src/agentic/execution/round_executor.rs   |   13 +
 .../core/src/agentic/execution/types.rs       |    1 +
 .../core/src/agentic/insights/collector.rs    |    2 +
 .../core/src/agentic/persistence/manager.rs   |    2 +
 .../persistence/manager/usage_context.rs      |   66 +
 .../assembly/core/src/product_runtime.rs      |    6 +
 .../core/src/service/session_usage/service.rs |  279 +++-
 .../contracts/core-types/src/session_usage.rs |   58 +
 .../session_usage_contracts.rs                |   60 +
 .../contracts/runtime-ports/src/agent_api.rs  |   34 +
 .../session_operation_ports.rs                |    2 +
 .../app-server/tests/agent_kernel.rs          |    2 +
 .../services-core/src/token_usage/types.rs    |    3 +
 .../token_usage_contracts.rs                  |   30 +
 src/web-ui/AGENTS.md                          |    9 +
 src/web-ui/src/app/App.tsx                    |    6 -
 .../components/panels/base/FlexiblePanel.tsx  |   20 +
 .../src/app/components/panels/base/utils.ts   |    8 +
 .../content-canvas/stores/canvasStore.ts      |   38 +
 .../app/scenes/session/ChatPane.appearance.ts |    2 +
 .../src/app/scenes/session/ChatPane.tsx       |   11 +-
 src/web-ui/src/app/scenes/settings/AGENTS.md  |    8 +
 .../application/AppearanceSettingsPage.tsx    |    2 +
 .../FlowChatWidthSettingsSection.test.tsx     |   33 +
 .../FlowChatWidthSettingsSection.tsx          |   23 +
 .../app/scenes/settings/settingsRegistry.ts   |    3 +
 .../src/flow_chat/components/ChatInput.tsx    |    1 +
 .../components/FlowChatWidthBoundary.scss     |   67 +
 .../components/FlowChatWidthBoundary.test.tsx |  130 ++
 .../components/FlowChatWidthBoundary.tsx      |  165 +++
 .../modern/FLOWCHAT_SCROLL_STABILITY.md       |   31 +
 .../modern/FLOWCHAT_VERIFICATION.md           |    9 +
 .../modern/ModernFlowChatContainer.tsx        |    4 +
 .../components/modern/VirtualMessageList.scss |    2 +
 ...rtualMessageList.session-boundary.test.tsx |   68 +
 .../components/modern/VirtualMessageList.tsx  |   17 +-
 .../modern/flowChatScrollbarMask.test.ts      |   60 +
 .../modern/flowChatScrollbarMask.ts           |   23 +
 .../usage/SessionUsageComponents.test.tsx     | 1119 +++++---------
 .../usage/SessionUsageEmptyState.tsx          |    8 +-
 .../usage/SessionUsageModal.appearance.ts     |    8 -
 .../components/usage/SessionUsageModal.scss   |   12 -
 .../usage/SessionUsageModal.test.tsx          |  154 --
 .../components/usage/SessionUsageModal.tsx    |  106 --
 .../components/usage/SessionUsagePanel.scss   |  822 +++--------
 .../components/usage/SessionUsagePanel.tsx    | 1290 +----------------
 .../usage/SessionUsageReportCard.tsx          |   99 +-
 .../components/usage/SessionUsageSummary.tsx  |  227 +++
 .../usage/ToolDefinitionsPreview.scss         |  103 ++
 .../usage/ToolDefinitionsPreview.test.tsx     |  125 ++
 .../usage/ToolDefinitionsPreview.tsx          |  149 ++
 .../flow_chat/components/usage/appearance.ts  |   34 +-
 .../usage/sessionUsageModalState.ts           |  107 --
 .../usage/toolDefinitionsDocument.ts          |   57 +
 .../openSessionContextPreview.test.ts         |  138 ++
 .../services/openSessionContextPreview.ts     |   64 +
 .../services/openSessionUsageReport.ts        |   66 +
 .../services/usageReportService.test.ts       |  131 +-
 .../flow_chat/services/usageReportService.ts  |   26 +-
 .../src/flow_chat/session-drivers/types.ts    |    1 +
 .../api/service-api/SessionAPI.test.ts        |   16 +
 .../api/service-api/SessionAPI.ts             |   24 +-
 .../appearance/appearanceTokenContract.ts     |    2 +
 .../builtins/buildBuiltinAppearance.ts        |    3 +
 .../builtins/composeAppearancePackage.test.ts |   31 +
 .../compiler/AppearanceCompiler.test.ts       |    9 +-
 .../preferences/flowChatWidthStore.test.ts    |   42 +
 .../preferences/flowChatWidthStore.ts         |   42 +
 .../registry/defaultAppearanceRegistry.ts     |    5 +-
 src/web-ui/src/locales/en-US/flow-chat.json   |   91 +-
 .../locales/en-US/settings/appearance.json    |    8 +
 src/web-ui/src/locales/zh-CN/flow-chat.json   |   89 +-
 .../locales/zh-CN/settings/appearance.json    |    8 +
 src/web-ui/src/locales/zh-TW/flow-chat.json   |   89 +-
 .../locales/zh-TW/settings/appearance.json    |    8 +
 src/web-ui/src/shared/types/panelContent.ts   |    1 +
 92 files changed, 4064 insertions(+), 3181 deletions(-)
 create mode 100644 src/crates/assembly/core/src/agentic/execution/context_composition.rs
 create mode 100644 src/crates/assembly/core/src/agentic/persistence/manager/usage_context.rs
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.scss
 create mode 100644 src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.test.ts
 create mode 100644 src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.ts
 delete mode 100644 src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts
 delete mode 100644 src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
 delete mode 100644 src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx
 delete mode 100644 src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/usage/SessionUsageSummary.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
 create mode 100644 src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.tsx
 delete mode 100644 src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts
 create mode 100644 src/web-ui/src/flow_chat/components/usage/toolDefinitionsDocument.ts
 create mode 100644 src/web-ui/src/flow_chat/services/openSessionContextPreview.test.ts
 create mode 100644 src/web-ui/src/flow_chat/services/openSessionContextPreview.ts
 create mode 100644 src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.test.ts
 create mode 100644 src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.ts

diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index f245d23c4b..daa54c601e 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -467,6 +467,9 @@ except for error tone. Use `showIcon={false}` for text-only notices.
 uncontrolled open state, trigger/region accessibility wiring, focus exclusion
 while collapsed, reduced-motion behavior, and independent header actions.
 Product copy and the revealed content remain consumer-owned.
+Use `headerClassName` to style the default header surface while retaining its
+trigger, actions, and focus behavior. `triggerClassName` and `contentInnerClassName`
+allow consumers to align the indicator and revealed content without replacing the trigger.
 
 Use `Disclosure presentation="native"` when the browser must own the existing
 `details`/`summary` behavior. This mode renders a real details element, a direct
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
index 130120ea78..c6d2e9a1b5 100644
--- a/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
@@ -7,6 +7,8 @@ export const disclosureMeta = {
   name: "Disclosure",
   props: [
     { name: "renderHeader", type: "(triggerProps: DisclosureTriggerProps) => ReactNode" },
+    { name: "headerClassName", type: "string" },
+    { name: "triggerClassName", type: "string" },
     { name: "contentClassName", type: "string" },
     { name: "contentInnerClassName", type: "string" },
     { name: "unmountOnClose", type: "boolean", defaultValue: "false" },
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx b/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx
index 9ebc192457..0e7738a80d 100644
--- a/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.tsx
@@ -23,6 +23,9 @@ interface CustomDisclosureProps
   actions?: ReactNode;
   /** Compose a header with independent controls using the supplied toggle attributes. */
   renderHeader?: (triggerProps: DisclosureTriggerProps) => ReactNode;
+  /** Style the default header surface without replacing its trigger or actions. */
+  headerClassName?: string;
+  triggerClassName?: string;
   contentClassName?: string;
   contentInnerClassName?: string;
   unmountOnClose?: boolean;
@@ -53,6 +56,8 @@ const CustomDisclosure = forwardRef<HTMLElement, CustomDisclosureProps>(
   function Disclosure({
     actions,
     renderHeader,
+    headerClassName,
+    triggerClassName,
     contentClassName,
     contentInnerClassName,
     unmountOnClose = false,
@@ -107,11 +112,11 @@ const CustomDisclosure = forwardRef<HTMLElement, CustomDisclosureProps>(
           id: triggerId,
           onClick: toggle,
           type: 'button',
-        }) : <div className={styles.header} data-openbitfun-part="header">
+        }) : <div className={classNames(styles.header, headerClassName)} data-openbitfun-part="header">
           <button data-overflow-trigger
             aria-controls={contentId}
             aria-expanded={resolvedOpen}
-            className={styles.trigger}
+            className={classNames(styles.trigger, triggerClassName)}
             disabled={disabled}
             id={triggerId}
             onClick={toggle}
diff --git a/design-system/packages/ui/tests/disclosure.test.mjs b/design-system/packages/ui/tests/disclosure.test.mjs
index 9ee8e17070..c9a89ea4f0 100644
--- a/design-system/packages/ui/tests/disclosure.test.mjs
+++ b/design-system/packages/ui/tests/disclosure.test.mjs
@@ -8,11 +8,13 @@ import { Disclosure } from "../dist/index.js";
 test("Disclosure connects its trigger and region with accessible state", () => {
   const markup = renderToStaticMarkup(createElement(
     Disclosure,
-    { defaultOpen: true, summary: "Advanced" },
+    { defaultOpen: true, summary: "Advanced", headerClassName: "report-heading", triggerClassName: "report-trigger" },
     createElement("button", null, "Reset"),
   ));
 
   assert.match(markup, /data-openbitfun-component="disclosure"/);
+  assert.match(markup, /class="[^"]*report-heading" data-openbitfun-part="header"/);
+  assert.match(markup, /<button[^>]*class="[^"]*report-trigger"/);
   assert.match(markup, /data-open="true"/);
   assert.match(markup, /aria-expanded="true"/);
   assert.match(markup, /aria-controls="openbitfun-disclosure-[^"]+-content"/);
diff --git a/docs/architecture/theme-token-optimization.md b/docs/architecture/theme-token-optimization.md
index b922444b52..f47d923f4b 100644
--- a/docs/architecture/theme-token-optimization.md
+++ b/docs/architecture/theme-token-optimization.md
@@ -104,6 +104,15 @@ accent，由 Web UI Appearance 提供默认值并接受皮肤覆盖。暗色全
 青蓝两种材质色；其他组件的青色 Token 也不属于更新材质。该差异因此由更新组件的最小契约承载，
 不新增基础色。旧皮肤通过现有组合逻辑补齐默认值。
 
+Session Usage 的输入、输出数据系列使用 `--openbitfun-component-session-usage-input` 和
+`--openbitfun-component-session-usage-output`，分别引用对应明暗设计系统主题的蓝色信息强调色与紫色次强调色。
+产品主题的主、次强调色可能同时为黑灰色，不能保证数据系列的彩色区分。
+这两个最小组件令牌由 Appearance 统一提供，环形图、分段图和图例共用，不新增基础色。旧皮肤自动补齐，显式覆盖继续保留。
+Token 分段图将缓存命中与未命中归入输入分组：命中复用输入蓝色，未命中以同色与场景底色混合区分，输出保留紫色。
+上下文的其他分类复用 success、warning、danger 强调色，并使用 `color-mix()` 与输入/输出系列色组合区分，
+不增加基础色或图表组件令牌；图例文字与数值始终保留，颜色不作为唯一的信息来源。
+工具定义预览的折叠标题复用这组颜色，与场景底色混合成柔和背景；展开与收起均保留底色，正文维持场景底色。
+
 普通应用组件和页面必须满足：
 
 - 颜色、阴影和 blur 只从 canonical Token 取得；允许用 `color-mix()`、gradient 等 CSS 运算组合 Token。
diff --git a/docs/features/session-runtime-usage-report-design.md b/docs/features/session-runtime-usage-report-design.md
index c432c99474..991c7d3e8b 100644
--- a/docs/features/session-runtime-usage-report-design.md
+++ b/docs/features/session-runtime-usage-report-design.md
@@ -6,6 +6,99 @@
 
 ## Background
 
+### Current side-panel scope
+
+The side panel displays session/project identity, context
+composition, and cumulative token shares. The former Usage details chapter and
+its Overview, Models, Tools, Files, Errors, and Slowest tabs are removed. Chat
+cards retain their report entry and compact summaries, but no longer offer jumps
+to those removed tabs. Report data and Markdown export remain intact. Saved
+panel tab hints are accepted and show the summary. Appearance parts now describe
+the remaining UI; overrides for removed detail parts follow the existing
+structured incompatibility diagnostics without rewriting saved packages. Detailed
+tab and navigation descriptions in the earlier implementation stages below are
+historical, not the current side-panel UI.
+
+The session title is centered independently of the copy action. The generation
+timestamp is omitted from the panel header; report and export timestamps remain intact.
+
+The system-prompt, tool-definition, rules, skills, MCP/dynamic-tools and subagent
+legend rows expose an external-link button on hover or keyboard focus. Each opens
+its own read-only preview tab. Tool definitions use a searchable, expandable
+`tool-definitions` document reader, showing tool descriptions and parameter types,
+required flags, defaults, enums, nested structures and schema constraints. It
+projects the existing captured definition array without altering persisted
+sessions; the Markdown envelope and calling instructions remain compatible with
+older captures. Other categories use the standard `markdown-editor`. The executing host replaces a single
+session-local `usage-context.json` snapshot when preparing a request, using the
+same typed sources as the category estimates. It includes prompt/reminder text,
+native tool schemas and the model-visible Skill/GetToolSpec results; it does not
+reload today's catalog or workspace files to reconstruct earlier content.
+
+An explicit `contextPreviewCategory` request returns only that category in
+`contextPreview`, including its capture time. Empty captured categories open an
+empty-content message; absent snapshots/categories return unavailable. A snapshot
+whose owning turn has been replaced or reverted is not exposed. This is the
+latest prepared request, not a historical request selected from the chart.
+The older `includeSystemPromptPreview` / `systemPromptPreview` cached-system-message
+path remains readable as a fallback for older hosts and sessions. Ordinary usage
+reports, persisted `/usage` results, and Markdown exports remain content-free.
+Dispatch projections refuse preview instead of reading the controller's cache.
+Tab identity and late responses remain scoped to the originating device, session,
+and category; no filesystem editor path is created, and the standard Markdown
+editor stays read-only in rich and source modes. Retained tool-definition Markdown
+tabs also render through the structured reader and retain their tab identity.
+
+### Context composition and token shares
+
+The side panel separates the latest recorded parent request's context composition
+from cumulative session token usage. The context donut has eight categories:
+system prompt (including runtime context), tool definitions, rules (workspace/user
+instructions), skills, MCP/dynamic tools, subagent definitions, summarized
+conversation, and conversation. Typed runtime message/reminder provenance assigns
+categories; user-authored text is never classified by matching prompt headings.
+Counts use the runtime token estimator, are labelled estimates, and are not
+provider billing counts or measured context-window occupancy.
+
+Numeric-only composition snapshots travel in the existing opaque usage-record
+`token_details.openbitfunModelRequest.contextComposition` field. The additive
+optional report `context` field projects the newest in-scope parent request;
+subagent records do not replace it. A newer request without a snapshot does not
+reuse stale composition. Old records and external hosts without this telemetry
+show an explicit empty state, while existing report totals remain usable.
+The same runtime/report path runs on the executing host for local, SSH, Peer,
+and detached jobs; no controller filesystem reads or new commands are required.
+
+The leading project, cumulative token, and turn facts use the home overview's
+rounded outline and inset vertical dividers, with centered values above labels.
+The Token Usage section precedes context composition. Its continuous horizontal bar groups
+cumulative tokens into input and output, with total tokens as the denominator.
+With recorded cache counts, the input group splits into cached and remaining
+parts in two shades of blue; output stays purple. Group labels above the bar show
+input/output totals and shares. Cache hit rate appears in parentheses immediately
+after the input share, with the cached/input calculation in its tooltip. The child legend
+shows percentages of input, with counts and the denominator in tooltips. Parent
+hover/focus highlights both input parts; a child highlights its own segment and
+parent label. For complete telemetry, remaining input is labelled uncached. Partial
+telemetry still plots recorded cache reads, but labels the remainder as remaining
+input, including unknown cache usage. The inline hit percentage uses an explicit
+lower-bound marker (≥) over all input tokens and a scope explanation in its tooltip;
+it does not extrapolate the reported-call hit rate to unreported calls. Missing
+or invalid cache counts keep a single input segment. Invalid or inconsistent
+totals never produce invented segments.
+Child widths are normalized within each parent group so they fill that group
+instead of applying the overall share a second time. Nonzero groups and segments
+have small visibility minimums; labels retain the actual percentages and zero
+segments are omitted.
+
+The token-level hit rate uses summed cache reads divided by summed total input
+over the same records, not an average of per-request percentages or a share of
+input plus output. This follows the [OpenAI caching guide](https://developers.openai.com/api/docs/guides/prompt-caching).
+The adapter already normalizes [Anthropic usage](https://platform.claude.com/docs/en/build-with-claude/prompt-caching)
+by adding ordinary input, cache reads and cache writes; only reads enter the hit
+numerator. The report's partial-coverage rate covers reported records only, so it
+is not presented as the overall input hit rate or used to infer uncached input.
+
 Long OpenBitFun sessions can include model streaming, tool execution, Git operations, file writes, Skills, MCP calls, context compression, subagents, retries, user confirmation waits, and file diffs. The chat transcript shows what happened, but it does not yet answer the user's operational questions:
 
 - What recorded runtime spans are available for the session, and where are they approximate?
diff --git a/src/apps/cli/src/dispatch/mod.rs b/src/apps/cli/src/dispatch/mod.rs
index 00e3bf4753..f3c8b04fac 100644
--- a/src/apps/cli/src/dispatch/mod.rs
+++ b/src/apps/cli/src/dispatch/mod.rs
@@ -418,6 +418,8 @@ async fn query_in_store(
                     workspace_path: Some(job.request.workspace_path.clone()),
                     remote_connection_id: None,
                     remote_ssh_host: None,
+                    include_system_prompt_preview: false,
+                    context_preview_category: None,
                     include_hidden_subagents: false,
                 },
             )
diff --git a/src/apps/cli/src/management.rs b/src/apps/cli/src/management.rs
index 169192c87b..506483bb0b 100644
--- a/src/apps/cli/src/management.rs
+++ b/src/apps/cli/src/management.rs
@@ -570,6 +570,8 @@ pub(crate) async fn print_usage_report(session_id: Option<&str>) -> Result<()> {
             workspace_path: Some(workspace_path.to_string_lossy().to_string()),
             remote_connection_id: None,
             remote_ssh_host: None,
+            include_system_prompt_preview: false,
+            context_preview_category: None,
             include_hidden_subagents: true,
         })
         .await
diff --git a/src/apps/cli/src/modes/chat/selection.rs b/src/apps/cli/src/modes/chat/selection.rs
index fd69dd727f..d9cccac4d7 100644
--- a/src/apps/cli/src/modes/chat/selection.rs
+++ b/src/apps/cli/src/modes/chat/selection.rs
@@ -314,6 +314,8 @@ impl ChatMode {
                             workspace_path: Some(workspace_path),
                             remote_connection_id: None,
                             remote_ssh_host: None,
+                            include_system_prompt_preview: false,
+                            context_preview_category: None,
                             include_hidden_subagents: true,
                         })
                         .await
diff --git a/src/apps/desktop/src/api/session_api.rs b/src/apps/desktop/src/api/session_api.rs
index 18826dfff4..61db6cb77f 100644
--- a/src/apps/desktop/src/api/session_api.rs
+++ b/src/apps/desktop/src/api/session_api.rs
@@ -233,6 +233,10 @@ pub struct GetSessionUsageReportRequest {
     pub remote_ssh_host: Option<String>,
     #[serde(default = "default_include_hidden_subagents")]
     pub include_hidden_subagents: bool,
+    #[serde(default)]
+    pub include_system_prompt_preview: bool,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context_preview_category: Option<openbitfun_core_types::UsageContextCategory>,
 }
 
 fn default_include_hidden_subagents() -> bool {
@@ -553,6 +557,8 @@ pub async fn get_session_usage_report(
             ),
             request.session_id,
             request.include_hidden_subagents,
+            request.include_system_prompt_preview,
+            request.context_preview_category,
         )
         .await
         .map_err(|error| {
diff --git a/src/apps/desktop/src/runtime/session_application.rs b/src/apps/desktop/src/runtime/session_application.rs
index f30490cd6c..7ff51e19f6 100644
--- a/src/apps/desktop/src/runtime/session_application.rs
+++ b/src/apps/desktop/src/runtime/session_application.rs
@@ -602,6 +602,8 @@ impl DesktopSessionApplication {
         request: DesktopSessionScopeRequest,
         session_id: String,
         include_hidden_subagents: bool,
+        include_system_prompt_preview: bool,
+        context_preview_category: Option<openbitfun_core_types::UsageContextCategory>,
     ) -> DesktopSessionApplicationResult<SessionUsageReport> {
         let scope = self.resolved_scope(request).await?;
         let storage_path = self.storage_path(&scope);
@@ -614,6 +616,8 @@ impl DesktopSessionApplication {
                 remote_connection_id: scope.remote_connection_id.clone(),
                 remote_ssh_host: scope.requested_remote_ssh_host.clone(),
                 include_hidden_subagents,
+                include_system_prompt_preview,
+                context_preview_category,
             })
             .await
             .map_err(|error| DesktopSessionApplicationError::Runtime(error.into_message()))?;
diff --git a/src/crates/assembly/core/AGENTS.md b/src/crates/assembly/core/AGENTS.md
index 754dfa87e1..e49b90e9d4 100644
--- a/src/crates/assembly/core/AGENTS.md
+++ b/src/crates/assembly/core/AGENTS.md
@@ -192,6 +192,15 @@ Narrower local guides already exist for some subtrees:
 
 ## Verification
 
+For opt-in category/system-prompt previews and session-storage isolation:
+
+```bash
+cargo test --locked -p openbitfun-core --no-default-features --features agent-runtime,git --lib -- system_prompt_preview usage_context_preview
+```
+
+This fixture verifies default report privacy and resolved host storage with a
+simulated SSH workspace identity; it does not exercise live remote connections.
+
 For Agent name references, enabled-catalog admission, and prompt catalog names:
 
 ```bash
diff --git a/src/crates/assembly/core/src/agentic/execution/AGENTS.md b/src/crates/assembly/core/src/agentic/execution/AGENTS.md
index dc727677a9..50a71f827a 100644
--- a/src/crates/assembly/core/src/agentic/execution/AGENTS.md
+++ b/src/crates/assembly/core/src/agentic/execution/AGENTS.md
@@ -1,3 +1,13 @@
+For numeric context composition, category provenance, latest-request report projection,
+and attempt-ledger persistence, use:
+
+```bash
+cargo test --locked -p openbitfun-core --no-default-features --features agent-runtime,git --lib -- context_composition account_attempt_ledger_keeps_failed_usage_actual_accounts_and_idempotent_events
+```
+
+These fixtures exercise typed runtime sources, persisted attempts, and simulated
+SSH report selection; they do not establish live remote transport behavior.
+
 For `stream_processor.rs` changes, run the portable stream suite and the Core
 compatibility tests, plus the relevant round-executor tests below:
 
diff --git a/src/crates/assembly/core/src/agentic/execution/context_composition.rs b/src/crates/assembly/core/src/agentic/execution/context_composition.rs
new file mode 100644
index 0000000000..4ed01c8ad9
--- /dev/null
+++ b/src/crates/assembly/core/src/agentic/execution/context_composition.rs
@@ -0,0 +1,304 @@
+//! Usage estimates and opt-in preview sources share the same typed category provenance.
+use crate::agentic::core::{
+    InternalReminderKind, Message, MessageContent, MessageRole, MessageSemanticKind,
+};
+use crate::util::{types::ToolDefinition, TokenCounter};
+use openbitfun_agent_runtime::prompt::PrependedPromptReminders;
+use openbitfun_agent_runtime::prompt_markup::render_system_reminder;
+use openbitfun_core_types::{UsageContextBreakdown, UsageContextCategory};
+use std::collections::BTreeMap;
+
+fn preview_category(message: &Message) -> Option<UsageContextCategory> {
+    use UsageContextCategory::*;
+    if message.role == MessageRole::System {
+        return Some(SystemPrompt);
+    }
+    if message.metadata.semantic_kind == Some(MessageSemanticKind::CompressionSummary) {
+        return None;
+    }
+    match message.metadata.internal_reminder_kind {
+        Some(InternalReminderKind::SkillListingDiff) => Some(Skills),
+        Some(InternalReminderKind::AgentListingDiff) => Some(SubagentDefinitions),
+        Some(
+            InternalReminderKind::ConditionalInstructions | InternalReminderKind::InitAgentsMd,
+        ) => Some(Rules),
+        _ => match &message.content {
+            MessageContent::ToolResult {
+                tool_name,
+                effective_tool_name,
+                ..
+            } => match effective_tool_name.as_deref().unwrap_or(tool_name) {
+                "GetToolSpec" => Some(McpTools),
+                "Skill" => Some(Skills),
+                _ => None,
+            },
+            _ => None,
+        },
+    }
+}
+
+fn json_markdown(value: &impl serde::Serialize) -> Result<String, serde_json::Error> {
+    let json = serde_json::to_string_pretty(value)?;
+    let fence = "`".repeat(
+        json.split(|c| c != '`')
+            .map(str::len)
+            .max()
+            .unwrap_or(0)
+            .max(2)
+            + 1,
+    );
+    Ok(format!("{fence}json\n{json}\n{fence}"))
+}
+
+pub(super) fn context_preview_contents<'a>(
+    messages: impl Iterator<Item = &'a Message>,
+    reminders: &PrependedPromptReminders,
+    tools: Option<&[ToolDefinition]>,
+) -> Result<BTreeMap<UsageContextCategory, String>, serde_json::Error> {
+    use UsageContextCategory::*;
+    let mut contents: BTreeMap<_, _> = [
+        SystemPrompt,
+        ToolDefinitions,
+        Rules,
+        Skills,
+        McpTools,
+        SubagentDefinitions,
+    ]
+    .into_iter()
+    .map(|category| (category, String::new()))
+    .collect();
+    let mut append = |category, text: &str| {
+        if text.trim().is_empty() {
+            return;
+        }
+        let content = contents.entry(category).or_default();
+        if !content.is_empty() {
+            content.push_str("\n\n---\n\n");
+        }
+        content.push_str(text);
+    };
+    for (category, text) in [
+        (SystemPrompt, reminders.runtime_context.as_deref()),
+        (Rules, reminders.user_context.as_deref()),
+        (Skills, reminders.skill_listing.as_deref()),
+        (SubagentDefinitions, reminders.agent_listing.as_deref()),
+        (McpTools, reminders.deferred_tool_listing.as_deref()),
+        (ToolDefinitions, reminders.ptc_tool_calling_guide.as_deref()),
+    ] {
+        if let Some(text) = text {
+            append(category, text);
+        }
+    }
+    if let Some(tools) = tools.filter(|tools| !tools.is_empty()) {
+        append(ToolDefinitions, &json_markdown(&tools)?);
+    }
+    for message in messages {
+        let Some(category) = preview_category(message) else {
+            continue;
+        };
+        match &message.content {
+            MessageContent::Text(text)
+            | MessageContent::Multimodal { text, .. }
+            | MessageContent::Mixed { text, .. } => append(category, text),
+            MessageContent::ToolResult {
+                result,
+                result_for_assistant,
+                ..
+            } => {
+                if let Some(text) = result_for_assistant.as_deref().or_else(|| result.as_str()) {
+                    append(category, text);
+                } else {
+                    append(category, &json_markdown(result)?);
+                }
+            }
+        }
+    }
+    Ok(contents)
+}
+
+pub(super) fn estimate_context_composition<'a>(
+    messages: impl Iterator<Item = (&'a Message, u64)>,
+    reminders: &PrependedPromptReminders,
+    tools: Option<&[ToolDefinition]>,
+    context_window: usize,
+) -> UsageContextBreakdown {
+    let mut result = UsageContextBreakdown {
+        context_window: (context_window > 0).then_some(context_window as u64),
+        ..Default::default()
+    };
+    for (message, count) in messages {
+        let bucket = match preview_category(message) {
+            Some(UsageContextCategory::SystemPrompt) => &mut result.system_prompt,
+            Some(UsageContextCategory::Rules) => &mut result.rules,
+            Some(UsageContextCategory::Skills) => &mut result.skills,
+            Some(UsageContextCategory::McpTools) => &mut result.mcp_tools,
+            Some(UsageContextCategory::SubagentDefinitions) => &mut result.subagent_definitions,
+            _ if message.metadata.semantic_kind
+                == Some(MessageSemanticKind::CompressionSummary) =>
+            {
+                &mut result.summarized_conversation
+            }
+            _ => &mut result.conversation,
+        };
+        *bucket = bucket.saturating_add(count);
+    }
+    let reminder_tokens = |text: Option<&str>| -> u64 {
+        text.filter(|text| !text.trim().is_empty())
+            .map(|text| {
+                Message::user(render_system_reminder(text.trim()))
+                    .estimate_tokens_with_reasoning(false) as u64
+            })
+            .unwrap_or(0)
+    };
+    result.system_prompt += reminder_tokens(reminders.runtime_context.as_deref());
+    result.rules += reminder_tokens(reminders.user_context.as_deref());
+    result.skills += reminder_tokens(reminders.skill_listing.as_deref());
+    result.subagent_definitions += reminder_tokens(reminders.agent_listing.as_deref());
+    result.mcp_tools += reminder_tokens(reminders.deferred_tool_listing.as_deref());
+    result.tool_definitions = tools
+        .map(TokenCounter::estimate_tool_definitions_tokens)
+        .unwrap_or(0) as u64
+        + reminder_tokens(reminders.ptc_tool_calling_guide.as_deref());
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn context_composition_previews_keep_typed_sources_and_model_visible_tool_results() {
+        use UsageContextCategory::*;
+        let system = Message::system("# System\nExact instructions".into());
+        let user = Message::user(
+            "<system-reminder>Rules and skills are user text</system-reminder>".into(),
+        );
+        let mut rules = Message::user("# Conditional rules\nLoaded rules".into());
+        rules.metadata.internal_reminder_kind = Some(InternalReminderKind::ConditionalInstructions);
+        let mut skill = Message::user(String::new());
+        skill.content = MessageContent::ToolResult {
+            tool_id: "skill-1".into(),
+            tool_name: "Skill".into(),
+            effective_tool_name: None,
+            result: serde_json::json!({"privateStorageField": "not model visible"}),
+            result_for_assistant: Some("# Loaded skill\nSkill body".into()),
+            is_error: false,
+            image_attachments: None,
+        };
+        let mut mcp = Message::user(String::new());
+        mcp.content = MessageContent::ToolResult {
+            tool_id: "spec-1".into(),
+            tool_name: "CallTool".into(),
+            effective_tool_name: Some("GetToolSpec".into()),
+            result: serde_json::json!({"name": "mcp_test", "description": "Schema includes ``` markers"}),
+            result_for_assistant: None,
+            is_error: false,
+            image_attachments: None,
+        };
+        let tools = [ToolDefinition {
+            name: "Read".into(),
+            description: "Read a file".into(),
+            parameters: serde_json::json!({"type":"object"}),
+        }];
+        let contents = context_preview_contents(
+            [&system, &user, &rules, &skill, &mcp].into_iter(),
+            &PrependedPromptReminders {
+                runtime_context: Some("Runtime environment".into()),
+                user_context: Some("Repository instructions".into()),
+                skill_listing: Some("Available skills".into()),
+                deferred_tool_listing: Some("Available MCP and dynamic tools".into()),
+                agent_listing: Some("Available subagents".into()),
+                ptc_tool_calling_guide: Some("PTC guide".into()),
+            },
+            Some(&tools),
+        )
+        .unwrap();
+        assert!(contents[&SystemPrompt].contains("Runtime environment"));
+        assert!(contents[&SystemPrompt].contains("Exact instructions"));
+        assert!(contents[&ToolDefinitions].contains("\"parameters\""));
+        assert!(contents[&ToolDefinitions].contains("PTC guide"));
+        assert!(contents[&Rules].contains("Repository instructions"));
+        assert!(contents[&Rules].contains("Conditional rules"));
+        assert!(contents[&Skills].contains("Available skills"));
+        assert!(contents[&Skills].contains("Skill body"));
+        assert!(contents[&McpTools].contains("Available MCP and dynamic tools"));
+        assert!(contents[&McpTools].contains("````json"));
+        assert!(contents[&SubagentDefinitions].contains("Available subagents"));
+        assert!(contents
+            .values()
+            .all(|text| !text.contains("privateStorageField") && !text.contains("are user text")));
+        let empty = context_preview_contents(
+            std::iter::empty(),
+            &PrependedPromptReminders::default(),
+            None,
+        )
+        .unwrap();
+        assert_eq!(empty.len(), 6);
+        assert!(empty.values().all(String::is_empty));
+    }
+
+    #[test]
+    fn context_composition_classifies_deferred_definitions_by_effective_tool() {
+        let mut message = Message::user(String::new());
+        message.content = MessageContent::ToolResult {
+            tool_id: "call-1".into(),
+            tool_name: "CallTool".into(),
+            effective_tool_name: Some("GetToolSpec".into()),
+            result: serde_json::json!({"description": "Dynamic tool schema"}),
+            result_for_assistant: None,
+            is_error: false,
+            image_attachments: None,
+        };
+        let tokens = message.estimate_tokens_with_reasoning(true) as u64;
+        let composition = estimate_context_composition(
+            std::iter::once((&message, tokens)),
+            &PrependedPromptReminders::default(),
+            None,
+            128_000,
+        );
+        assert_eq!(composition.mcp_tools, tokens);
+        assert_eq!(composition.conversation, 0);
+    }
+
+    #[test]
+    fn uses_typed_sources_without_classifying_user_text_as_instructions() {
+        let system = Message::system("System instructions".into());
+        let user = Message::user("<system-reminder>Skills and rules</system-reminder>".into());
+        let mut summary = Message::user("Earlier conversation summary".into());
+        summary.metadata.semantic_kind = Some(MessageSemanticKind::CompressionSummary);
+        let mut rules = Message::user("Activated repository instructions".into());
+        rules.metadata.internal_reminder_kind = Some(InternalReminderKind::ConditionalInstructions);
+        let result = estimate_context_composition(
+            [&system, &user, &summary, &rules]
+                .into_iter()
+                .map(|message| (message, message.estimate_tokens_with_reasoning(true) as u64)),
+            &PrependedPromptReminders {
+                skill_listing: Some("Available skills".into()),
+                agent_listing: Some("Available agents".into()),
+                deferred_tool_listing: Some("MCP tool definitions".into()),
+                ..Default::default()
+            },
+            None,
+            128_000,
+        );
+        assert_eq!(
+            result.conversation,
+            user.estimate_tokens_with_reasoning(true) as u64
+        );
+        assert_eq!(
+            result.system_prompt,
+            system.estimate_tokens_with_reasoning(true) as u64
+        );
+        assert_eq!(
+            result.rules,
+            rules.estimate_tokens_with_reasoning(true) as u64
+        );
+        assert_eq!(
+            result.summarized_conversation,
+            summary.estimate_tokens_with_reasoning(true) as u64
+        );
+        assert!(result.skills > 0 && result.subagent_definitions > 0 && result.mcp_tools > 0);
+        assert_eq!(result.tool_definitions, 0);
+        assert_eq!(result.context_window, Some(128_000));
+    }
+}
diff --git a/src/crates/assembly/core/src/agentic/execution/execution_engine.rs b/src/crates/assembly/core/src/agentic/execution/execution_engine.rs
index 8002163c2f..c2721299a4 100644
--- a/src/crates/assembly/core/src/agentic/execution/execution_engine.rs
+++ b/src/crates/assembly/core/src/agentic/execution/execution_engine.rs
@@ -576,6 +576,7 @@ struct TurnPromptScaffoldInput<'a> {
 }
 
 struct FinalizeRoundInput<'a> {
+    prompt_reminders: &'a PrependedPromptReminders,
     permission_constraints: openbitfun_runtime_ports::PermissionConstraintLayer,
     context_window: usize,
     tool_definitions: Option<Vec<ToolDefinition>>,
@@ -2129,6 +2130,107 @@ impl ExecutionEngine {
             && msg.metadata.turn_id.as_deref() != Some(current_turn_id)
     }
 
+    fn context_composition_for_send(
+        messages: &[Message],
+        reminders: &PrependedPromptReminders,
+        tools: Option<&[ToolDefinition]>,
+        context_window: usize,
+        current_turn_id: &str,
+        attach_images: bool,
+    ) -> openbitfun_core_types::UsageContextBreakdown {
+        let kept_images = if attach_images {
+            Self::image_bearing_indices_to_keep(messages)
+        } else {
+            HashSet::new()
+        };
+        let estimates = messages
+            .iter()
+            .enumerate()
+            .filter(|(_, message)| {
+                !Self::skip_message_for_model_send(message)
+                    && !Self::is_stale_interrupted_continue(message, current_turn_id)
+            })
+            .map(|(index, message)| {
+                // Use the same eligibility and image-retention policy as model sends;
+                // omitted pixels must not inflate the conversation slice.
+                let tokens = if !kept_images.contains(&index) && Self::message_bears_images(message)
+                {
+                    let mut projected = message.clone();
+                    match &mut projected.content {
+                        MessageContent::Multimodal { text, images } => {
+                            projected.content = MessageContent::Text(if attach_images {
+                                text.clone()
+                            } else {
+                                Self::render_multimodal_as_text(text, images)
+                            });
+                        }
+                        MessageContent::ToolResult {
+                            image_attachments, ..
+                        } => *image_attachments = None,
+                        _ => {}
+                    }
+                    projected.estimate_tokens_with_reasoning(true)
+                } else {
+                    message.estimate_tokens_with_reasoning(true)
+                };
+                (message, tokens as u64)
+            });
+        super::context_composition::estimate_context_composition(
+            estimates,
+            reminders,
+            tools,
+            context_window,
+        )
+    }
+
+    async fn persist_usage_context_preview(
+        &self,
+        context: &ExecutionContext,
+        messages: &[Message],
+        reminders: &PrependedPromptReminders,
+        tools: Option<&[ToolDefinition]>,
+    ) {
+        let Some(storage_path) = self
+            .session_manager
+            .effective_session_storage_path(&context.session_id)
+            .await
+        else {
+            return;
+        };
+        let result = async {
+            let contents = super::context_composition::context_preview_contents(
+                messages.iter().filter(|message| {
+                    !Self::skip_message_for_model_send(message)
+                        && !Self::is_stale_interrupted_continue(message, &context.dialog_turn_id)
+                }),
+                reminders,
+                tools,
+            )
+            .map_err(|error| OpenBitFunError::parse(error.to_string()))?;
+            self.session_manager
+                .persistence_manager()
+                .save_usage_context_snapshot(
+                    &storage_path,
+                    &crate::agentic::persistence::manager::SessionUsageContextSnapshot {
+                        schema_version: 1,
+                        session_id: context.session_id.clone(),
+                        turn_id: context.dialog_turn_id.clone(),
+                        turn_index: context.turn_index,
+                        captured_at: chrono::Utc::now().timestamp_millis().max(0) as u64,
+                        contents,
+                    },
+                )
+                .await
+        }
+        .await;
+        if let Err(error) = result {
+            warn!(
+                "Failed to persist usage context preview: session_id={}, error={}",
+                context.session_id, error
+            );
+        }
+    }
+
     /// True if this message would contribute at least one image to the model (before pruning).
     fn message_bears_images(msg: &Message) -> bool {
         if Self::skip_message_for_model_send(msg) {
@@ -2231,6 +2333,13 @@ impl ExecutionEngine {
         .await?;
         final_ai_messages.push(AIMessage::user(render_system_reminder(input.reminder_text)));
         final_ai_messages.push(AIMessage::user(Self::FINALIZE_USER_FOLLOWUP.to_string()));
+        self.persist_usage_context_preview(
+            input.context,
+            input.messages,
+            input.prompt_reminders,
+            input.tool_definitions.as_deref(),
+        )
+        .await;
 
         let model_exchange_trace_dir = self
             .session_manager
@@ -2244,6 +2353,23 @@ impl ExecutionEngine {
             )
             .await;
         let round_context = RoundContext {
+            context_composition: Some({
+                let mut composition = Self::context_composition_for_send(
+                    input.messages,
+                    input.prompt_reminders,
+                    input.tool_definitions.as_deref(),
+                    input.context_window,
+                    &input.context.dialog_turn_id,
+                    input.primary_model_facts.supports_image_inputs,
+                );
+                composition.conversation += TokenCounter::estimate_message_tokens(&AIMessage::user(
+                    render_system_reminder(input.reminder_text),
+                )) as u64
+                    + TokenCounter::estimate_message_tokens(&AIMessage::user(
+                        Self::FINALIZE_USER_FOLLOWUP.to_string(),
+                    )) as u64;
+                composition
+            }),
             session_id: input.context.session_id.clone(),
             subagent_parent_info: input.context.subagent_parent_info.clone(),
             permission_delegation: input.context.permission_delegation.clone(),
@@ -4633,6 +4759,7 @@ impl ExecutionEngine {
                 .persistent_model_exchange_trace_dir(&context.session_id)
                 .await;
             let mut round_context = RoundContext {
+                context_composition: None,
                 session_id: context.session_id.clone(),
                 subagent_parent_info: context.subagent_parent_info.clone(),
                 permission_delegation: context.permission_delegation.clone(),
@@ -4719,6 +4846,14 @@ impl ExecutionEngine {
                 &model_fingerprint,
                 selected_pool.is_some(),
             );
+            round_context.context_composition = Some(Self::context_composition_for_send(
+                &request_messages,
+                &turn_prompt_scaffold.prepended_prompt_reminders,
+                tool_definitions.as_deref(),
+                context_window,
+                &context.dialog_turn_id,
+                primary_supports_image_understanding,
+            ));
             let ai_messages = Self::build_ai_messages_for_send(
                 &request_messages,
                 &ai_client.config.format,
@@ -4730,6 +4865,14 @@ impl ExecutionEngine {
             )
             .await?;
 
+            self.persist_usage_context_preview(
+                &context,
+                &request_messages,
+                &turn_prompt_scaffold.prepended_prompt_reminders,
+                tool_definitions.as_deref(),
+            )
+            .await;
+
             let round_lifecycle =
                 active_round_lifecycle.get_or_insert_with(ModelRoundLifecycle::new);
             round_lifecycle.routing = routing_decision;
@@ -5566,6 +5709,7 @@ impl ExecutionEngine {
                 );
                 let final_round_result = self
                     .run_finalize_round(FinalizeRoundInput {
+                        prompt_reminders: &turn_prompt_scaffold.prepended_prompt_reminders,
                         permission_constraints: tool_policy.permission_constraints.clone(),
                         ai_client: ai_client.clone(),
                         account_client_source: account_client_source.clone(),
@@ -5600,6 +5744,7 @@ impl ExecutionEngine {
                     );
                     let retry_result = self
                         .run_finalize_round(FinalizeRoundInput {
+                            prompt_reminders: &turn_prompt_scaffold.prepended_prompt_reminders,
                             permission_constraints: tool_policy.permission_constraints.clone(),
                             ai_client: ai_client.clone(),
                             account_client_source: account_client_source.clone(),
@@ -5962,7 +6107,9 @@ mod tests {
     use crate::agentic::agents::{
         PrependedPromptReminders, PromptBuilderContext, ToolListingSections, UserContextPolicy,
     };
-    use crate::agentic::core::{InternalReminderKind, Message, MessageRole, ToolCall, ToolResult};
+    use crate::agentic::core::{
+        InternalReminderKind, Message, MessageRole, MessageSemanticKind, ToolCall, ToolResult,
+    };
     use crate::agentic::persistence::PersistenceManager;
     use crate::agentic::session::{
         ContextCompressor, PromptCachePolicy, SessionContextStore, SessionManager,
@@ -5972,6 +6119,7 @@ mod tests {
     use crate::agentic::tools::ToolRuntimeRestrictions;
     use crate::agentic::workspace::{local_workspace_services, WorkspaceBinding};
     use crate::infrastructure::PathManager;
+
     #[cfg(feature = "external-sources")]
     use crate::instruction_sources::test_support::{lock_environment, EnvironmentGuard};
     use crate::service::config::types::AIConfig;
@@ -6954,6 +7102,29 @@ mod tests {
         );
     }
 
+    #[test]
+    fn context_composition_excludes_ui_frames_and_stale_continuations() {
+        let current = Message::user("Current input".into());
+        let mut screenshot = Message::user("UI-only content".repeat(100));
+        screenshot.metadata.semantic_kind =
+            Some(MessageSemanticKind::ComputerUsePostActionSnapshot);
+        let mut stale = Message::user("Interrupted old turn".repeat(100));
+        stale.metadata.internal_reminder_kind = Some(InternalReminderKind::InterruptedContinue);
+        stale.metadata.turn_id = Some("old-turn".into());
+        let composition = ExecutionEngine::context_composition_for_send(
+            &[current.clone(), screenshot, stale],
+            &PrependedPromptReminders::default(),
+            None,
+            128_000,
+            "current-turn",
+            false,
+        );
+        assert_eq!(
+            composition.conversation,
+            current.estimate_tokens_with_reasoning(true) as u64
+        );
+    }
+
     #[test]
     fn interrupted_continue_reminder_is_visible_only_to_its_own_turn() {
         let reminder = Message::internal_reminder(
diff --git a/src/crates/assembly/core/src/agentic/execution/mod.rs b/src/crates/assembly/core/src/agentic/execution/mod.rs
index 9d92fba560..12556170b0 100644
--- a/src/crates/assembly/core/src/agentic/execution/mod.rs
+++ b/src/crates/assembly/core/src/agentic/execution/mod.rs
@@ -7,6 +7,7 @@ pub(super) mod compression_request;
 #[cfg(feature = "agent-runtime")]
 pub(crate) mod conditional_instructions;
 mod context_budget;
+mod context_composition;
 pub mod edit_constraint_guard;
 pub mod execution_engine;
 pub(crate) mod model_exchange_trace;
diff --git a/src/crates/assembly/core/src/agentic/execution/round_executor.rs b/src/crates/assembly/core/src/agentic/execution/round_executor.rs
index 183647ba35..ba2882fbc3 100644
--- a/src/crates/assembly/core/src/agentic/execution/round_executor.rs
+++ b/src/crates/assembly/core/src/agentic/execution/round_executor.rs
@@ -1021,6 +1021,7 @@ impl RoundExecutor {
                 .map_err(|error| OpenBitFunError::AIClient(error.to_string()).with_channel_bound_replay())?;
             let mut usage_context =
                 openbitfun_services_core::token_usage::types::ModelRequestUsageContext {
+                    context_composition: context.context_composition.clone(),
                     version: 1,
                     round_id: round_id.clone(),
                     attempt_id: attempt_id.clone(),
@@ -2751,6 +2752,7 @@ pub(super) mod tests {
 
     pub(in crate::agentic::execution) fn test_round_context() -> RoundContext {
         RoundContext {
+            context_composition: None,
             session_id: "session-1".to_string(),
             subagent_parent_info: None,
             permission_delegation: None,
@@ -6473,6 +6475,12 @@ pub(super) mod tests {
             let source = test_account_source(vec![primary.client(), backup.client()], false);
             let mut context = test_round_context();
             context.account_client_source = Some(source);
+            let composition = openbitfun_core_types::UsageContextBreakdown {
+                system_prompt: 3,
+                conversation: 7,
+                ..Default::default()
+            };
+            context.context_composition = Some(composition.clone());
             let mut executor = test_round_executor();
             executor.usage_service = Some(service.clone());
             let result = executor
@@ -6497,6 +6505,11 @@ pub(super) mod tests {
             };
             let records = service.query_records(query()).await.unwrap();
             assert_eq!(records.len(), 2);
+            assert!(records.iter().all(|record| record
+                .request_context()
+                .unwrap()
+                .context_composition
+                == Some(composition.clone())));
             let failed = records
                 .iter()
                 .find(|record| record.request_context().unwrap().attempt_index == 1)
diff --git a/src/crates/assembly/core/src/agentic/execution/types.rs b/src/crates/assembly/core/src/agentic/execution/types.rs
index 9ff4c81c29..0fabeca4be 100644
--- a/src/crates/assembly/core/src/agentic/execution/types.rs
+++ b/src/crates/assembly/core/src/agentic/execution/types.rs
@@ -56,6 +56,7 @@ pub struct ExecutionContext {
 /// Round context
 #[derive(Debug, Clone)]
 pub struct RoundContext {
+    pub context_composition: Option<openbitfun_core_types::UsageContextBreakdown>,
     pub session_id: String,
     pub subagent_parent_info: Option<SubagentParentInfo>,
     pub permission_delegation: Option<PermissionDelegationContext>,
diff --git a/src/crates/assembly/core/src/agentic/insights/collector.rs b/src/crates/assembly/core/src/agentic/insights/collector.rs
index 3c8bea1c3d..7cab5801d8 100644
--- a/src/crates/assembly/core/src/agentic/insights/collector.rs
+++ b/src/crates/assembly/core/src/agentic/insights/collector.rs
@@ -621,6 +621,8 @@ fn compute_active_duration_millis(
             workspace_path: Some(workspace_path.to_string_lossy().to_string()),
             remote_connection_id: None,
             remote_ssh_host: None,
+            include_system_prompt_preview: false,
+            context_preview_category: None,
             include_hidden_subagents: false,
         },
         turns,
diff --git a/src/crates/assembly/core/src/agentic/persistence/manager.rs b/src/crates/assembly/core/src/agentic/persistence/manager.rs
index b4d98749e3..85da213b6c 100644
--- a/src/crates/assembly/core/src/agentic/persistence/manager.rs
+++ b/src/crates/assembly/core/src/agentic/persistence/manager.rs
@@ -7,6 +7,8 @@ mod external_history;
 #[cfg(feature = "external-sources")]
 pub(crate) use external_history::external_history_catalog;
 mod session_catalog;
+mod usage_context;
+pub(crate) use usage_context::SessionUsageContextSnapshot;
 
 use crate::agentic::core::{
     sanitize_persisted_session_state, CompressionState, Message, MessageContent,
diff --git a/src/crates/assembly/core/src/agentic/persistence/manager/usage_context.rs b/src/crates/assembly/core/src/agentic/persistence/manager/usage_context.rs
new file mode 100644
index 0000000000..cdf45f430f
--- /dev/null
+++ b/src/crates/assembly/core/src/agentic/persistence/manager/usage_context.rs
@@ -0,0 +1,66 @@
+use super::PersistenceManager;
+use crate::util::errors::{OpenBitFunError, OpenBitFunResult};
+use openbitfun_core_types::UsageContextCategory;
+use serde::{Deserialize, Serialize};
+use std::collections::BTreeMap;
+use std::path::Path;
+
+/// Latest prepared request only. Kept separately from numeric usage records and exports.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct SessionUsageContextSnapshot {
+    pub schema_version: u16,
+    pub session_id: String,
+    pub turn_id: String,
+    pub turn_index: usize,
+    pub captured_at: u64,
+    #[serde(default)]
+    pub contents: BTreeMap<UsageContextCategory, String>,
+}
+
+impl PersistenceManager {
+    pub(crate) async fn save_usage_context_snapshot(
+        &self,
+        storage_path: &Path,
+        snapshot: &SessionUsageContextSnapshot,
+    ) -> OpenBitFunResult<()> {
+        Self::validate_session_id(&snapshot.session_id)?;
+        let _session_write =
+            self.lock_session_write_operation(storage_path, &snapshot.session_id)?;
+        self.ensure_runtime_for_write(storage_path).await?;
+        self.ensure_session_dir(storage_path, &snapshot.session_id)
+            .await?;
+        self.write_json_atomic(
+            &self
+                .session_layout(storage_path)
+                .session_dir(&snapshot.session_id)
+                .join("usage-context.json"),
+            snapshot,
+        )
+        .await
+    }
+
+    pub(crate) async fn load_usage_context_snapshot(
+        &self,
+        storage_path: &Path,
+        session_id: &str,
+    ) -> OpenBitFunResult<Option<SessionUsageContextSnapshot>> {
+        Self::validate_session_id(session_id)?;
+        let snapshot = self
+            .read_json_optional::<SessionUsageContextSnapshot>(
+                &self
+                    .session_layout(storage_path)
+                    .session_dir(session_id)
+                    .join("usage-context.json"),
+            )
+            .await?;
+        if snapshot.as_ref().is_some_and(|snapshot| {
+            snapshot.session_id != session_id || snapshot.schema_version != 1
+        }) {
+            return Err(OpenBitFunError::validation(
+                "Unsupported or mismatched usage context snapshot",
+            ));
+        }
+        Ok(snapshot)
+    }
+}
diff --git a/src/crates/assembly/core/src/product_runtime.rs b/src/crates/assembly/core/src/product_runtime.rs
index a160280736..b2ef656a79 100644
--- a/src/crates/assembly/core/src/product_runtime.rs
+++ b/src/crates/assembly/core/src/product_runtime.rs
@@ -5051,6 +5051,8 @@ mod tests {
                     workspace_path: Some(usage_workspace_path),
                     remote_connection_id: None,
                     remote_ssh_host: None,
+                    include_system_prompt_preview: false,
+                    context_preview_category: None,
                     include_hidden_subagents: false,
                 })
                 .await
@@ -5101,6 +5103,8 @@ mod tests {
                 workspace_path: Some(workspace.path().to_string_lossy().into_owned()),
                 remote_connection_id: None,
                 remote_ssh_host: None,
+                include_system_prompt_preview: false,
+                context_preview_category: None,
                 include_hidden_subagents: false,
             },
         )
@@ -5165,6 +5169,8 @@ mod tests {
                 workspace_path: Some(workspace.path().to_string_lossy().into_owned()),
                 remote_connection_id: None,
                 remote_ssh_host: None,
+                include_system_prompt_preview: false,
+                context_preview_category: None,
                 include_hidden_subagents: false,
             },
         )
diff --git a/src/crates/assembly/core/src/service/session_usage/service.rs b/src/crates/assembly/core/src/service/session_usage/service.rs
index 34e8182555..35d670776f 100644
--- a/src/crates/assembly/core/src/service/session_usage/service.rs
+++ b/src/crates/assembly/core/src/service/session_usage/service.rs
@@ -85,7 +85,45 @@ pub async fn generate_session_usage_report_from_storage_path(
     let snapshot_facts =
         load_snapshot_facts(&request, workspace_id.as_deref(), revert_boundary).await;
 
-    Ok(build_session_usage_report_from_sources_with_scope(
+    let system_prompt_preview = if request.include_system_prompt_preview {
+        persistence_manager
+            .load_prompt_cache(session_storage_path, &request.session_id)
+            .await?
+            .and_then(|cache| cache.system_prompt)
+            .filter(|prompt| !prompt.text.content.trim().is_empty())
+            .map(|prompt| openbitfun_core_types::UsageSystemPromptPreview {
+                content: prompt.text.content,
+                cached_at: prompt.text.created_at_ms,
+            })
+    } else {
+        None
+    };
+    let context_preview = if let Some(category) = request
+        .context_preview_category
+        .filter(|category| *category != openbitfun_core_types::UsageContextCategory::Unknown)
+    {
+        persistence_manager
+            .load_usage_context_snapshot(session_storage_path, &request.session_id)
+            .await?
+            .filter(|snapshot| {
+                usage_index_is_visible(snapshot.turn_index, revert_boundary)
+                    && turns.iter().any(|turn| {
+                        turn.turn_id == snapshot.turn_id && turn.turn_index == snapshot.turn_index
+                    })
+            })
+            .and_then(|mut snapshot| {
+                snapshot.contents.remove(&category).map(|content| {
+                    openbitfun_core_types::UsageContextPreview {
+                        category,
+                        content,
+                        captured_at: snapshot.captured_at,
+                    }
+                })
+            })
+    } else {
+        None
+    };
+    let mut report = build_session_usage_report_from_sources_with_scope(
         request,
         &turns,
         &token_records,
@@ -93,7 +131,12 @@ pub async fn generate_session_usage_report_from_storage_path(
         Utc::now().timestamp_millis(),
         &token_turn_scope,
         subagent_scope_complete && turn_scope_complete,
-    ))
+    );
+    report.privacy.prompt_content_included =
+        system_prompt_preview.is_some() || context_preview.is_some();
+    report.system_prompt_preview = system_prompt_preview;
+    report.context_preview = context_preview;
+    Ok(report)
 }
 
 fn token_usage_query(request: &SessionUsageReportRequest) -> TokenUsageQuery {
@@ -314,6 +357,14 @@ fn build_session_usage_report_from_sources_with_scope(
     );
     report.time = build_time_breakdown(turns, generated_at);
     report.tokens = build_token_breakdown(token_records);
+    // Pick the latest parent request before reading its optional snapshot. Falling
+    // back to an older snapshot would misrepresent a newer legacy/external request.
+    report.context = token_records
+        .iter()
+        .filter(|record| record.session_id == request.session_id)
+        .max_by_key(|record| record.timestamp)
+        .and_then(|record| record.request_context())
+        .and_then(|context| context.context_composition);
     report.models = build_model_breakdown(turns, token_records);
     report.tools = build_tool_breakdown(turns);
     report.files = build_file_breakdown(request.workspace_path.as_deref(), turns, snapshot_facts);
@@ -1527,6 +1578,199 @@ mod tests {
     };
     use chrono::TimeZone;
 
+    #[tokio::test]
+    async fn system_prompt_preview_reads_only_the_requested_host_session_and_requires_opt_in() {
+        use crate::agentic::core::Session;
+        use crate::agentic::session::{
+            CachedSystemPrompt, SessionPromptCache, SystemPromptCacheIdentity,
+        };
+        use crate::infrastructure::PathManager;
+        use std::sync::Arc;
+
+        let temp = tempfile::tempdir().unwrap();
+        let storage = dunce::canonicalize(temp.path()).unwrap();
+        crate::service::workspace::legacy_compat::register_local_fixture_blocking(&storage);
+        let paths = Arc::new(PathManager::with_user_root_for_tests(
+            storage.join("user-root"),
+        ));
+        let persistence = PersistenceManager::new(paths).unwrap();
+        let mut session = Session::new("Preview".into(), "Standard".into(), Default::default());
+        session.session_id = "session-1".into();
+        persistence.save_session(&storage, &session).await.unwrap();
+        let mut other_session =
+            Session::new("No cache".into(), "Standard".into(), Default::default());
+        other_session.session_id = "another-session".into();
+        persistence
+            .save_session(&storage, &other_session)
+            .await
+            .unwrap();
+        let text = "# System prompt\n\nExact host-owned instructions.\n";
+        let cache = SessionPromptCache {
+            system_prompt: Some(CachedSystemPrompt::new(
+                SystemPromptCacheIdentity::new("test"),
+                text,
+            )),
+            user_context: None,
+        };
+        persistence
+            .save_prompt_cache(&storage, "session-1", &cache)
+            .await
+            .unwrap();
+        let mut request = test_request(Some("ssh-host"));
+        request.workspace_path = Some("/remote/project".into());
+        request.include_hidden_subagents = false;
+
+        let ordinary = generate_session_usage_report_from_storage_path(
+            &persistence,
+            None,
+            &storage,
+            request.clone(),
+        )
+        .await
+        .unwrap();
+        assert!(ordinary.system_prompt_preview.is_none());
+        assert!(!ordinary.privacy.prompt_content_included);
+        request.include_system_prompt_preview = true;
+        let preview = generate_session_usage_report_from_storage_path(
+            &persistence,
+            None,
+            &storage,
+            request.clone(),
+        )
+        .await
+        .unwrap();
+        assert_eq!(
+            preview.system_prompt_preview.as_ref().unwrap().content,
+            text
+        );
+        assert_eq!(
+            preview.system_prompt_preview.unwrap().cached_at,
+            cache.system_prompt.unwrap().text.created_at_ms
+        );
+        assert!(preview.privacy.prompt_content_included);
+        request.session_id = "another-session".into();
+        let missing =
+            generate_session_usage_report_from_storage_path(&persistence, None, &storage, request)
+                .await
+                .unwrap();
+        assert!(missing.system_prompt_preview.is_none());
+        assert!(!missing.privacy.prompt_content_included);
+    }
+
+    #[tokio::test]
+    async fn usage_context_preview_is_opt_in_host_scoped_and_rejects_stale_turns() {
+        use crate::agentic::core::Session;
+        use crate::agentic::persistence::manager::SessionUsageContextSnapshot;
+        use crate::infrastructure::PathManager;
+        use openbitfun_core_types::UsageContextCategory::*;
+        use std::sync::Arc;
+
+        let temp = tempfile::tempdir().unwrap();
+        let storage = dunce::canonicalize(temp.path()).unwrap();
+        crate::service::workspace::legacy_compat::register_local_fixture_blocking(&storage);
+        let persistence = PersistenceManager::new(Arc::new(PathManager::with_user_root_for_tests(
+            storage.join("user-root"),
+        )))
+        .unwrap();
+        let mut session = Session::new("Preview".into(), "Standard".into(), Default::default());
+        session.session_id = "session-1".into();
+        persistence.save_session(&storage, &session).await.unwrap();
+        let turn = test_turn("turn-1", 0, DialogTurnKind::UserDialog);
+        persistence.save_dialog_turn(&storage, &turn).await.unwrap();
+        let mut snapshot = SessionUsageContextSnapshot {
+            schema_version: 1,
+            session_id: session.session_id.clone(),
+            turn_id: turn.turn_id.clone(),
+            turn_index: 0,
+            captured_at: 123,
+            contents: [
+                SystemPrompt,
+                ToolDefinitions,
+                Rules,
+                Skills,
+                McpTools,
+                SubagentDefinitions,
+            ]
+            .into_iter()
+            .map(|category| (category, format!("# {category:?}\nExact content")))
+            .collect(),
+        };
+        persistence
+            .save_usage_context_snapshot(&storage, &snapshot)
+            .await
+            .unwrap();
+        let mut request = test_request(Some("ssh-host"));
+        request.workspace_path = Some("/remote/project".into());
+        request.include_hidden_subagents = false;
+        let ordinary = generate_session_usage_report_from_storage_path(
+            &persistence,
+            None,
+            &storage,
+            request.clone(),
+        )
+        .await
+        .unwrap();
+        assert!(ordinary.context_preview.is_none());
+        assert!(!ordinary.privacy.prompt_content_included);
+        assert!(!serde_json::to_string(&ordinary)
+            .unwrap()
+            .contains("Exact content"));
+        for (category, expected) in &snapshot.contents {
+            request.context_preview_category = Some(*category);
+            let report = generate_session_usage_report_from_storage_path(
+                &persistence,
+                None,
+                &storage,
+                request.clone(),
+            )
+            .await
+            .unwrap();
+            let preview = report.context_preview.unwrap();
+            assert_eq!(preview.category, *category);
+            assert_eq!(preview.content, *expected);
+            assert_eq!(preview.captured_at, 123);
+            assert!(report.system_prompt_preview.is_none());
+            assert!(report.privacy.prompt_content_included);
+        }
+        snapshot.contents.insert(Skills, String::new());
+        persistence
+            .save_usage_context_snapshot(&storage, &snapshot)
+            .await
+            .unwrap();
+        request.context_preview_category = Some(Skills);
+        let empty = generate_session_usage_report_from_storage_path(
+            &persistence,
+            None,
+            &storage,
+            request.clone(),
+        )
+        .await
+        .unwrap();
+        assert_eq!(empty.context_preview.unwrap().content, "");
+        request.session_id = "another-session".into();
+        let missing = generate_session_usage_report_from_storage_path(
+            &persistence,
+            None,
+            &storage,
+            request.clone(),
+        )
+        .await
+        .unwrap();
+        assert!(missing.context_preview.is_none());
+        request.session_id = "session-1".into();
+        snapshot.turn_id = "replaced-turn".into();
+        persistence
+            .save_usage_context_snapshot(&storage, &snapshot)
+            .await
+            .unwrap();
+        let stale =
+            generate_session_usage_report_from_storage_path(&persistence, None, &storage, request)
+                .await
+                .unwrap();
+        assert!(stale.context_preview.is_none());
+        assert!(!stale.privacy.prompt_content_included);
+    }
+
     #[test]
     fn report_marks_cache_unavailable_for_zero_filled_cache_source() {
         let request = test_request(None);
@@ -2724,10 +2968,41 @@ mod tests {
             workspace_path: Some("D:/workspace/openbitfun".to_string()),
             remote_connection_id: remote_connection_id.map(ToOwned::to_owned),
             remote_ssh_host: remote_connection_id.map(|_| "host.example".to_string()),
+            include_system_prompt_preview: false,
+            context_preview_category: None,
             include_hidden_subagents: true,
         }
     }
 
+    #[test]
+    fn context_composition_uses_latest_parent_request_and_never_reuses_stale_data() {
+        let composition = openbitfun_core_types::UsageContextBreakdown {
+            system_prompt: 100,
+            conversation: 900,
+            ..Default::default()
+        };
+        let mut record = test_token_record("model-a", 1000, 20, 0);
+        record.token_details = Some(serde_json::json!({"openbitfunModelRequest": {
+            "version": 1, "roundId": "round-1", "attemptId": "attempt-1", "attemptIndex": 1,
+            "startedAt": record.timestamp, "authentication": "api_key", "requestedModel": "model-a",
+            "outcome": "completed", "usageKnown": true, "contextComposition": composition
+        }}));
+        let turns = [test_turn("turn-1", 0, DialogTurnKind::UserDialog)];
+        let report = build_session_usage_report_from_turns(
+            test_request(Some("ssh")),
+            &turns,
+            &[record.clone()],
+            42,
+        );
+        assert_eq!(report.context, Some(composition));
+        let mut newer = record.clone();
+        newer.timestamp += chrono::Duration::seconds(1);
+        newer.token_details = None;
+        let report =
+            build_session_usage_report_from_turns(test_request(None), &turns, &[record, newer], 42);
+        assert!(report.context.is_none());
+    }
+
     fn test_snapshot_facts(operations: Vec<UsageSnapshotOperationSummary>) -> UsageSnapshotFacts {
         UsageSnapshotFacts {
             source_available: true,
diff --git a/src/crates/contracts/core-types/src/session_usage.rs b/src/crates/contracts/core-types/src/session_usage.rs
index a7b1620209..4fa1b56b2b 100644
--- a/src/crates/contracts/core-types/src/session_usage.rs
+++ b/src/crates/contracts/core-types/src/session_usage.rs
@@ -27,6 +27,15 @@ pub struct SessionUsageReport {
     pub coverage: UsageCoverage,
     pub time: UsageTimeBreakdown,
     pub tokens: UsageTokenBreakdown,
+    /// Estimated composition of the latest recorded model request, not cumulative usage.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context: Option<UsageContextBreakdown>,
+    /// Latest cached system message, returned only for an explicit preview request.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub system_prompt_preview: Option<UsageSystemPromptPreview>,
+    /// One explicitly requested category from the latest host-owned request snapshot.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context_preview: Option<UsageContextPreview>,
     #[serde(default)]
     pub models: Vec<UsageModelBreakdown>,
     #[serde(default)]
@@ -39,6 +48,52 @@ pub struct SessionUsageReport {
     pub privacy: UsagePrivacy,
 }
 
+/// The current session cache, not a historical request snapshot or reconstructed template.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct UsageSystemPromptPreview {
+    pub content: String,
+    pub cached_at: u64,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq, Eq, PartialOrd, Ord)]
+#[serde(rename_all = "camelCase")]
+pub enum UsageContextCategory {
+    SystemPrompt,
+    ToolDefinitions,
+    Rules,
+    Skills,
+    McpTools,
+    SubagentDefinitions,
+    #[serde(other)]
+    Unknown,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct UsageContextPreview {
+    pub category: UsageContextCategory,
+    pub content: String,
+    pub captured_at: u64,
+}
+
+/// Numeric-only prompt estimates captured by the executing runtime.
+/// Missing snapshots (including legacy hosts) stay absent.
+#[derive(Debug, Clone, Default, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct UsageContextBreakdown {
+    pub system_prompt: u64,
+    pub tool_definitions: u64,
+    pub rules: u64,
+    pub skills: u64,
+    pub mcp_tools: u64,
+    pub subagent_definitions: u64,
+    pub summarized_conversation: u64,
+    pub conversation: u64,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context_window: Option<u64>,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub struct UsageWorkspace {
@@ -418,6 +473,9 @@ impl SessionUsageReport {
                 cache_coverage: UsageCacheCoverage::Unavailable,
                 cache_hit_rate: None,
             },
+            context: None,
+            system_prompt_preview: None,
+            context_preview: None,
             models: vec![],
             tools: vec![],
             files: UsageFileBreakdown {
diff --git a/src/crates/contracts/core-types/tests/core_type_contracts/session_usage_contracts.rs b/src/crates/contracts/core-types/tests/core_type_contracts/session_usage_contracts.rs
index 2bf95ccaae..2bace19b6c 100644
--- a/src/crates/contracts/core-types/tests/core_type_contracts/session_usage_contracts.rs
+++ b/src/crates/contracts/core-types/tests/core_type_contracts/session_usage_contracts.rs
@@ -27,3 +27,63 @@ fn usage_tool_category_keeps_the_persisted_wire_values() {
         "git"
     );
 }
+
+#[test]
+fn context_composition_keeps_legacy_reports_readable() {
+    let report = SessionUsageReport::partial_unavailable("legacy", 42);
+    let legacy = serde_json::to_value(&report).unwrap();
+    assert!(legacy.get("context").is_none());
+    assert!(legacy.get("systemPromptPreview").is_none());
+    assert!(legacy.get("contextPreview").is_none());
+    let mut restored: SessionUsageReport = serde_json::from_value(legacy.clone()).unwrap();
+    assert!(restored.context.is_none());
+    assert!(restored.system_prompt_preview.is_none());
+    assert!(restored.context_preview.is_none());
+    assert_eq!(serde_json::to_value(&restored).unwrap(), legacy);
+    restored.context = Some(openbitfun_core_types::UsageContextBreakdown {
+        system_prompt: 100,
+        conversation: 900,
+        context_window: Some(128_000),
+        ..Default::default()
+    });
+    let encoded = serde_json::to_value(&restored).unwrap();
+    assert_eq!(encoded["context"]["systemPrompt"], 100);
+    assert_eq!(
+        serde_json::from_value::<SessionUsageReport>(encoded).unwrap(),
+        restored
+    );
+}
+
+#[test]
+fn system_prompt_preview_round_trips_without_changing_default_report_privacy() {
+    let mut report = SessionUsageReport::partial_unavailable("session-1", 42);
+    assert!(!report.privacy.prompt_content_included);
+    report.system_prompt_preview = Some(openbitfun_core_types::UsageSystemPromptPreview {
+        content: "# System\nExact cached instructions\n".into(),
+        cached_at: 123,
+    });
+    report.privacy.prompt_content_included = true;
+    let json = serde_json::to_value(&report).unwrap();
+    assert_eq!(json["systemPromptPreview"]["cachedAt"], 123);
+    assert_eq!(
+        serde_json::from_value::<SessionUsageReport>(json).unwrap(),
+        report
+    );
+}
+
+#[test]
+fn context_preview_round_trips_with_explicit_category_and_capture_time() {
+    let mut report = SessionUsageReport::partial_unavailable("session-1", 42);
+    report.context_preview = Some(openbitfun_core_types::UsageContextPreview {
+        category: openbitfun_core_types::UsageContextCategory::ToolDefinitions,
+        content: "```json\n[]\n```".into(),
+        captured_at: 123,
+    });
+    let encoded = serde_json::to_value(&report).unwrap();
+    assert_eq!(encoded["contextPreview"]["category"], "toolDefinitions");
+    assert_eq!(encoded["contextPreview"]["capturedAt"], 123);
+    assert_eq!(
+        serde_json::from_value::<SessionUsageReport>(encoded).unwrap(),
+        report
+    );
+}
diff --git a/src/crates/contracts/runtime-ports/src/agent_api.rs b/src/crates/contracts/runtime-ports/src/agent_api.rs
index a9de3e9874..a3a310fa9a 100644
--- a/src/crates/contracts/runtime-ports/src/agent_api.rs
+++ b/src/crates/contracts/runtime-ports/src/agent_api.rs
@@ -484,6 +484,11 @@ pub struct AgentSessionUsageRequest {
     pub remote_ssh_host: Option<String>,
     #[serde(default)]
     pub include_hidden_subagents: bool,
+    /// Explicit viewer request only; ordinary reports never include prompt text.
+    #[serde(default)]
+    pub include_system_prompt_preview: bool,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context_preview_category: Option<openbitfun_core_types::UsageContextCategory>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
@@ -3601,6 +3606,35 @@ mod tests {
         assert_eq!(inspection_json["activeTurnId"], "turn-live");
     }
 
+    #[test]
+    fn session_usage_preview_is_opt_in_for_legacy_and_current_requests() {
+        let legacy = serde_json::json!({"sessionId": "session-1", "workspacePath": "/workspace"});
+        let mut request: AgentSessionUsageRequest = serde_json::from_value(legacy).unwrap();
+        assert!(!request.include_system_prompt_preview);
+        assert!(request.context_preview_category.is_none());
+        let encoded = serde_json::to_value(&request).unwrap();
+        assert_eq!(
+            serde_json::from_value::<AgentSessionUsageRequest>(encoded).unwrap(),
+            request
+        );
+        request.include_system_prompt_preview = true;
+        request.context_preview_category =
+            Some(openbitfun_core_types::UsageContextCategory::McpTools);
+        let encoded = serde_json::to_value(&request).unwrap();
+        assert_eq!(encoded["includeSystemPromptPreview"], true);
+        assert_eq!(encoded["contextPreviewCategory"], "mcpTools");
+        assert_eq!(
+            serde_json::from_value::<AgentSessionUsageRequest>(encoded).unwrap(),
+            request
+        );
+        request.context_preview_category =
+            Some(serde_json::from_value(serde_json::json!("futureCategory")).unwrap());
+        assert_eq!(
+            request.context_preview_category,
+            Some(openbitfun_core_types::UsageContextCategory::Unknown)
+        );
+    }
+
     #[test]
     fn session_list_accepts_legacy_payload_and_emits_id_only_requests() {
         let legacy: AgentSessionListRequest = serde_json::from_value(serde_json::json!({
diff --git a/src/crates/execution/agent-runtime/tests/agent_session_contracts/session_operation_ports.rs b/src/crates/execution/agent-runtime/tests/agent_session_contracts/session_operation_ports.rs
index 5ac1965b19..f26ddcd252 100644
--- a/src/crates/execution/agent-runtime/tests/agent_session_contracts/session_operation_ports.rs
+++ b/src/crates/execution/agent-runtime/tests/agent_session_contracts/session_operation_ports.rs
@@ -150,6 +150,8 @@ async fn runtime_delegates_narrow_session_operations_to_registered_ports() {
             workspace_path: Some("D:/workspace/project".to_string()),
             remote_connection_id: None,
             remote_ssh_host: None,
+            include_system_prompt_preview: false,
+            context_preview_category: None,
             include_hidden_subagents: true,
         })
         .await
diff --git a/src/crates/interfaces/app-server/tests/agent_kernel.rs b/src/crates/interfaces/app-server/tests/agent_kernel.rs
index bc7f365858..a0fa111c69 100644
--- a/src/crates/interfaces/app-server/tests/agent_kernel.rs
+++ b/src/crates/interfaces/app-server/tests/agent_kernel.rs
@@ -955,6 +955,8 @@ async fn phase2_read_models_cover_usage_settlement_references_lineage_and_diff()
                         workspace_path: Some("/workspace".to_string()),
                         remote_connection_id: None,
                         remote_ssh_host: None,
+                        include_system_prompt_preview: false,
+                        context_preview_category: None,
                         include_hidden_subagents: false,
                     },
                 ))
diff --git a/src/crates/services/services-core/src/token_usage/types.rs b/src/crates/services/services-core/src/token_usage/types.rs
index e10cea85d2..790510247d 100644
--- a/src/crates/services/services-core/src/token_usage/types.rs
+++ b/src/crates/services/services-core/src/token_usage/types.rs
@@ -51,6 +51,9 @@ pub struct ModelRequestUsageContext {
     /// future observations readable by older statistics and replay consumers.
     #[serde(default, skip_serializing_if = "Vec::is_empty")]
     pub routing_warnings: Vec<String>,
+    /// Optional runtime estimate; older persisted attempts have no composition data.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub context_composition: Option<openbitfun_core_types::UsageContextBreakdown>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
diff --git a/src/crates/services/services-core/tests/session_usage_contracts/token_usage_contracts.rs b/src/crates/services/services-core/tests/session_usage_contracts/token_usage_contracts.rs
index 6ea475b262..122f5a935a 100644
--- a/src/crates/services/services-core/tests/session_usage_contracts/token_usage_contracts.rs
+++ b/src/crates/services/services-core/tests/session_usage_contracts/token_usage_contracts.rs
@@ -23,6 +23,36 @@ fn token_usage_record_preserves_model_identity_and_cached_availability_default()
     assert!(!record.cached_tokens_available);
 }
 
+#[test]
+fn context_composition_is_optional_and_survives_opaque_usage_details() {
+    use openbitfun_services_core::token_usage::types::{
+        model_request_context, with_model_request_context, ModelRequestUsageContext,
+    };
+    let legacy = serde_json::json!({
+        "version": 1, "roundId": "round-1", "attemptId": "attempt-1", "attemptIndex": 1,
+        "startedAt": "2026-10-29T00:00:00Z", "authentication": "api_key", "requestedModel": "model",
+        "outcome": "completed", "usageKnown": true
+    });
+    let mut restored: ModelRequestUsageContext = serde_json::from_value(legacy.clone()).unwrap();
+    assert!(restored.context_composition.is_none());
+    assert_eq!(serde_json::to_value(&restored).unwrap(), legacy);
+    restored.context_composition = Some(openbitfun_core_types::UsageContextBreakdown {
+        rules: 100,
+        conversation: 200,
+        ..Default::default()
+    });
+    let opaque =
+        with_model_request_context(Some(serde_json::json!({"providerField": 42})), &restored)
+            .unwrap();
+    let reloaded: serde_json::Value =
+        serde_json::from_str(&serde_json::to_string(&opaque).unwrap()).unwrap();
+    assert_eq!(reloaded["providerField"], 42);
+    assert_eq!(
+        model_request_context(Some(&reloaded)).unwrap(),
+        Some(restored)
+    );
+}
+
 #[test]
 fn token_usage_query_preserves_include_subagent_default() {
     let query = TokenUsageQuery {
diff --git a/src/web-ui/AGENTS.md b/src/web-ui/AGENTS.md
index 83eb11b5ce..1d2e4b184c 100644
--- a/src/web-ui/AGENTS.md
+++ b/src/web-ui/AGENTS.md
@@ -309,3 +309,12 @@ These DOM and handshake fixtures cover local, legacy Desktop, CLI and unknown pe
 device changes, per-device remote preferences and legacy local migration, stale
 review launches, overview/tool-card gates, restored panels, and the controller-owned
 URL opener. They do not establish live macOS-to-Linux Peer Device or native browser behavior.
+
+For Session Usage side-panel loading, report summaries, navigation, and retained session ownership:
+
+```bash
+pnpm --dir src/web-ui run test:run src/flow_chat/services/usageReportService.test.ts src/flow_chat/services/openSessionContextPreview.test.ts src/flow_chat/components/usage/SessionUsageComponents.test.tsx src/flow_chat/components/usage/ToolDefinitionsPreview.test.tsx src/flow_chat/components/usage/usageReportUtils.test.ts src/app/components/panels/content-canvas/hooks/canvasPanelOwnership.test.tsx
+```
+
+These local DOM/store fixtures include simulated SSH report data, Peer surface switches,
+and the dispatch report source; they do not establish live remote behavior or visual fidelity.
diff --git a/src/web-ui/src/app/App.tsx b/src/web-ui/src/app/App.tsx
index f9e79cd823..972936c3b9 100644
--- a/src/web-ui/src/app/App.tsx
+++ b/src/web-ui/src/app/App.tsx
@@ -10,7 +10,6 @@ import { ComputerUseControlCard } from './components/ComputerUseControlCard';
 import { UpdateNotificationCard } from '@/infrastructure/update/UpdateNotificationCard';
 import { NotificationCenter } from '../shared/notification-system/components/NotificationCenter';
 import { ConfirmDialogRenderer } from '@/infrastructure/confirm-dialog';
-import { SessionUsageModal } from '../flow_chat/components/usage/SessionUsageModal';
 import { createLogger } from '@/shared/utils/logger';
 import { startupTrace } from '@/shared/utils/startupTrace';
 import { isTauriRuntime } from '@/infrastructure/runtime';
@@ -966,11 +965,6 @@ function App() {
               {/* Confirm dialog */}
               <ConfirmDialogRenderer />
 
-              {/* Session usage report. Mounted here rather than in a chat view:
-                  the request runs below any component, and the report outlives
-                  whichever session view is on screen. */}
-              <SessionUsageModal />
-
               {/* AskUserQuestion waiting-state aria-live announcer.
                   Mounted here (inside ToolbarModeProvider, outside LazyAppLayout)
                   so it persists across both normal and Toolbar Mode. */}
diff --git a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
index e72aff0b9e..d7a0fce8c2 100644
--- a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
+++ b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
@@ -148,6 +148,12 @@ const SessionUsagePanel = lazyWithRecovery(() =>
   }))
 );
 
+const ToolDefinitionsPreview = lazyWithRecovery(() =>
+  import('@/flow_chat/components/usage/ToolDefinitionsPreview').then(module => ({
+    default: module.ToolDefinitionsPreview,
+  }))
+);
+
 const BackgroundCommandOutputPanel = lazyWithRecovery(() =>
   import('@/flow_chat/components/background-command/BackgroundCommandOutputPanel').then(module => ({
     default: module.BackgroundCommandOutputPanel
@@ -332,6 +338,13 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
         const markdownJumpToLine = markdownEditorData.jumpToLine ?? markdownEditorData.jumpToRange?.start;
         const markdownJumpToColumn = markdownEditorData.jumpToColumn;
 
+        // Retained tabs from the earlier read-only Markdown preview use the same reader.
+        if (markdownEditorData.readOnly && !markdownFilePath && typeof markdownInitialContent === 'string'
+          && content.metadata?.sessionId
+          && content.metadata.duplicateCheckKey === `session-context-toolDefinitions-${content.metadata.sessionId}`) {
+          return renderLazyEditor(<ToolDefinitionsPreview content={markdownInitialContent} />);
+        }
+
         return (
           <div className="openbitfun-flexible-panel__markdown-editor" data-openbitfun-component="flexible-panel" data-openbitfun-part="markdownEditor">
             {markdownFilePath || markdownInitialContent !== undefined ? (
@@ -874,6 +887,9 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
           </React.Suspense>
         );
 
+      case 'tool-definitions':
+        return renderLazyEditor(<ToolDefinitionsPreview content={typeof content.data?.content === 'string' ? content.data.content : ''} />);
+
       case 'session-usage':
         return (
           <React.Suspense fallback={<div className="openbitfun-flexible-panel__loading" data-openbitfun-component="flexible-panel" data-openbitfun-part="loading" data-openbitfun-state="loading">{t('flexiblePanel.loading.taskDetail')}</div>}>
@@ -881,6 +897,10 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
               report={content.data?.report}
               markdown={content.data?.markdown}
               sessionId={content.data?.sessionId}
+              sessionTitle={content.data?.sessionTitle}
+              isLoading={content.data?.isLoading}
+              error={content.data?.error}
+              workspaceId={content.data?.workspaceId ?? content.data?.report?.workspace?.workspaceId}
               workspacePath={content.data?.workspacePath || workspacePath}
               initialTab={content.data?.initialTab}
             />
diff --git a/src/web-ui/src/app/components/panels/base/utils.ts b/src/web-ui/src/app/components/panels/base/utils.ts
index 220adec71c..54a13a26b7 100644
--- a/src/web-ui/src/app/components/panels/base/utils.ts
+++ b/src/web-ui/src/app/components/panels/base/utils.ts
@@ -227,6 +227,14 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
     supportsDownload: false,
     showHeader: false
   },
+  'tool-definitions': {
+    type: 'tool-definitions',
+    displayName: 'Tool Definitions',
+    icon: { glyph: Code },
+    supportsCopy: false,
+    supportsDownload: false,
+    showHeader: false
+  },
   'background-command-output': {
     type: 'background-command-output',
     displayName: 'Command Output',
diff --git a/src/web-ui/src/app/components/panels/content-canvas/stores/canvasStore.ts b/src/web-ui/src/app/components/panels/content-canvas/stores/canvasStore.ts
index 180eab74f1..9f98a0e823 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/stores/canvasStore.ts
+++ b/src/web-ui/src/app/components/panels/content-canvas/stores/canvasStore.ts
@@ -1255,6 +1255,44 @@ export function openAgentCanvasTabForSession(sessionId: string, content: PanelCo
   if (target !== useAgentCanvasStore) rememberAgentSnapshot(key, extractAgentPersistableState(target.getState()));
 }
 
+/** Update retained output without reopening a closed tab or changing the selected tab. */
+export function updateAgentCanvasTabsForSession(
+  sessionId: string,
+  update: (content: PanelContent) => PanelContent | undefined,
+): boolean {
+  const key = normalizeAgentScopeKey(sessionId);
+  const target = useAgentCanvasStore.getState().scopeKey === key
+    ? useAgentCanvasStore : createCanvasStoreHook();
+  if (target !== useAgentCanvasStore) {
+    const snapshot = agentScopeSnapshots.get(key);
+    if (!snapshot) return false;
+    target.setState(structuredClone(snapshot));
+  }
+  const state = target.getState();
+  let updated = false;
+  for (const groupId of ['primary', 'secondary', 'tertiary'] as const) {
+    for (const tab of state[`${groupId}Group`].tabs) {
+      const content = update(tab.content);
+      if (!content) continue;
+      state.updateTabContent(tab.id, groupId, content);
+      updated = true;
+    }
+  }
+  // A later explicit Reopen Closed Tab must not restore an endless loading state.
+  let updatedHistory = false;
+  const closedTabs = state.closedTabs.map(record => {
+    const content = update(record.tab.content);
+    if (!content) return record;
+    updatedHistory = true;
+    return { ...record, tab: { ...record.tab, content } };
+  });
+  if (updatedHistory) target.setState({ closedTabs });
+  if ((updated || updatedHistory) && target !== useAgentCanvasStore) {
+    rememberAgentSnapshot(key, extractAgentPersistableState(target.getState()));
+  }
+  return updated;
+}
+
 /** Session deletion also releases snapshots exempted from ordinary LRU eviction. */
 export function forgetAgentCanvasSession(sessionId: string): void {
   const key = normalizeAgentScopeKey(sessionId);
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.appearance.ts b/src/web-ui/src/app/scenes/session/ChatPane.appearance.ts
index c1087a1b1a..840aa85148 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.appearance.ts
+++ b/src/web-ui/src/app/scenes/session/ChatPane.appearance.ts
@@ -9,5 +9,7 @@ export const chatPaneAppearanceDescriptor: AppearanceSurfaceDescriptor = {
       visualRole: 'continuous-surface',
       continuityGroup: 'session-workspace',
     },
+    { id: 'widthBoundary', propertyProfile: 'layout' },
+    { id: 'widthHandle', propertyProfile: 'layout' },
   ],
 };
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.tsx b/src/web-ui/src/app/scenes/session/ChatPane.tsx
index 80491980b7..67ab230103 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.tsx
+++ b/src/web-ui/src/app/scenes/session/ChatPane.tsx
@@ -7,10 +7,13 @@
 
 import React, { useCallback, memo, useRef, useState, useMemo, useContext } from 'react';
 import { SplitViewPrimaryDock } from '@openbitfun/ui';
+import { useStore } from 'zustand';
+import { flowChatWidthStore } from '@/infrastructure/appearance/preferences/flowChatWidthStore';
 import { ChatFileDropOverlay } from './ChatFileDropOverlay';
 import type { FileDropPreview, FileDropPosition } from '@/shared/types/fileDropPreview';
 import { ModernFlowChatContainer as FlowChatContainer } from '../../../flow_chat/components/modern/ModernFlowChatContainer';
 import { ChatInput } from '../../../flow_chat/components/ChatInput';
+import { FlowChatWidthBoundary } from '@/flow_chat/components/FlowChatWidthBoundary';
 import type { ChatInputRegistration } from '../../../flow_chat/components/chatInputRegistration';
 import { createTab } from '@/shared/utils/tabUtils';
 import { type LineRange } from '@/shared/editor/LineRange';
@@ -68,6 +71,8 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
 }) => {
   const isSceneActive = useContext(ConversationTextVisibilityContext) && hostActive;
   const fileDropTargetRef = useRef<HTMLDivElement>(null);
+  const [isColumnResizing, setIsColumnResizing] = useState(false);
+  const contentWidth = useStore(flowChatWidthStore, state => state.preferredWidth);
   const [isFileDragOver, setIsFileDragOver] = useState(false);
   const [filePreview, setFilePreview] = useState<FileDropPreview | null>(null);
   const fileDragPosition = useRef<FileDropPosition | null>(null);
@@ -137,7 +142,8 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
       <FlowChatContainer
         className="openbitfun-chat-pane__chat-container"
         isViewportActive={isSceneActive}
-        resizeSuspended={resizeSuspended}
+        resizeSuspended={resizeSuspended || isColumnResizing}
+        contentWidth={contentWidth}
         isRightPanelOpen={isRightPanelOpen}
         onToggleRightPanel={onToggleRightPanel}
         emptyState={emptyState}
@@ -155,11 +161,12 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
             onFileDragPreviewChange={setFilePreview}
             onFileDragPositionChange={updateFileDragPosition}
             isSceneActive={isSceneActive}
-            layoutResizeSuspended={isDragging}
+            layoutResizeSuspended={isDragging || isColumnResizing}
             registration={chatInputRegistration}
           />
         </SplitViewPrimaryDock>
       )}
+      <FlowChatWidthBoundary paneRef={fileDropTargetRef} active={isSceneActive} onResizingChange={setIsColumnResizing} />
       {showChatInput && isSceneActive && isFileDragOver && (
         <ChatFileDropOverlay preview={filePreview} positionRef={fileDragPosition} />
       )}
diff --git a/src/web-ui/src/app/scenes/settings/AGENTS.md b/src/web-ui/src/app/scenes/settings/AGENTS.md
index 9c9e808182..c31762abaa 100644
--- a/src/web-ui/src/app/scenes/settings/AGENTS.md
+++ b/src/web-ui/src/app/scenes/settings/AGENTS.md
@@ -43,6 +43,14 @@ pnpm --dir src/web-ui run test:run src/infrastructure/config/components/common/S
 ```
 
 Follow the parent guide for `check:web`, i18n, and Appearance registration checks.
+For the independent Appearance conversation-width setting and shared drag preference:
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx src/flow_chat/components/FlowChatWidthBoundary.test.tsx src/infrastructure/appearance/preferences/flowChatWidthStore.test.ts
+```
+
+These local DOM/storage fixtures do not establish rendered visuals or live remote behavior.
+
 For model-pool strategy selection, member search/multi-selection, nested-dialog
 dismissal, preserved records and device-switch isolation, run:
 
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
index 21b9dced47..ee3f8f0910 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/infrastructure/config/components/common';
 import { FontPreferencePanel } from '@/infrastructure/font-preference';
 import SessionPanelSettingsSection from './SessionPanelSettingsSection';
+import FlowChatWidthSettingsSection from './FlowChatWidthSettingsSection';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -29,6 +30,7 @@ const AppearanceSettingsPage: React.FC = () => {
         <ConfigPageSectionStack data-testid="appearance-settings">
           <AppearancePackageConfigSection />
           <FontPreferencePanel />
+          <FlowChatWidthSettingsSection />
           <SessionPanelSettingsSection />
         </ConfigPageSectionStack>
       </ConfigPageContent>
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx
new file mode 100644
index 0000000000..cd5566510d
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx
@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, expect, it, vi } from 'vitest';
+import { flowChatWidthStore, FLOW_CHAT_WIDTH_STORAGE_KEY } from '@/infrastructure/appearance/preferences/flowChatWidthStore';
+import FlowChatWidthSettingsSection from './FlowChatWidthSettingsSection';
+
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const host = document.createElement('div');
+const root = createRoot(host);
+afterEach(() => { act(() => root.render(null)); flowChatWidthStore.setState({ preferredWidth: 900 }); });
+
+it('edits the same persisted appearance preference as dragging and offers an independent reset', () => {
+  document.body.appendChild(host);
+  flowChatWidthStore.setState({ preferredWidth: 1000 });
+  act(() => root.render(<FlowChatWidthSettingsSection />));
+  const input = host.querySelector<HTMLInputElement>('input')!;
+  expect(input.value).toBe('1000');
+  const click = (label: string) => act(() => host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)!.click());
+  click('contentWidth.increase');
+  expect(flowChatWidthStore.getState().preferredWidth).toBe(1010);
+  expect(window.localStorage.getItem(FLOW_CHAT_WIDTH_STORAGE_KEY)).toBe('1010');
+  act(() => flowChatWidthStore.getState().setPreferredWidth(750));
+  expect(input.value).toBe('750');
+  act(() => flowChatWidthStore.getState().setPreferredWidth(0));
+  expect(input.value).toBe('600');
+  expect(host.querySelector<HTMLButtonElement>('button[aria-label="contentWidth.decrease"]')!.disabled).toBe(true);
+  act(() => [...host.querySelectorAll('button')].find(button => button.textContent === 'contentWidth.reset')!.click());
+  expect(input.value).toBe('900');
+  expect(window.localStorage.getItem(FLOW_CHAT_WIDTH_STORAGE_KEY)).toBe('900');
+  host.remove();
+});
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.tsx
new file mode 100644
index 0000000000..617efc1d7d
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/FlowChatWidthSettingsSection.tsx
@@ -0,0 +1,23 @@
+import { useStore } from 'zustand';
+import { Button, NumberInput } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+import { ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
+import { DEFAULT_FLOW_CHAT_WIDTH, MIN_FLOW_CHAT_WIDTH, flowChatWidthStore } from '@/infrastructure/appearance/preferences/flowChatWidthStore';
+
+export default function FlowChatWidthSettingsSection() {
+  const { t } = useI18n('settings/appearance');
+  const width = useStore(flowChatWidthStore, state => state.preferredWidth);
+  const setWidth = useStore(flowChatWidthStore, state => state.setPreferredWidth);
+
+  return (
+    <ConfigPageSection id="flow-chat-width" title={t('contentWidth.title')}
+      extra={<Button size="sm" variant="quiet" disabled={width === DEFAULT_FLOW_CHAT_WIDTH}
+        onClick={() => setWidth(DEFAULT_FLOW_CHAT_WIDTH)}>{t('contentWidth.reset')}</Button>}>
+      <ConfigPageRow label={t('contentWidth.label')} description={t('contentWidth.description', { min: MIN_FLOW_CHAT_WIDTH })} align="center">
+        <NumberInput size="sm" variant="stepper" unit="px" step={10} min={MIN_FLOW_CHAT_WIDTH}
+          value={width} onValueChange={setWidth} aria-label={t('contentWidth.label')}
+          decrementLabel={t('contentWidth.decrease')} incrementLabel={t('contentWidth.increase')} />
+      </ConfigPageRow>
+    </ConfigPageSection>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
index 50346c49aa..b83309acf2 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
@@ -88,6 +88,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       'theme', 'font', 'size', 'motion', 'animation',
       'appearance pack', 'skin', 'import',
       'session', 'panel', 'layout', 'overlay',
+      'chat', 'content', 'width', 'resize',
     ],
     namespaces: ['settings/appearance', 'settings/application'],
     searchPhrases: [
@@ -100,6 +101,8 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/appearance', 'sessionPanel.displayMode'),
       phrase('settings/appearance', 'sessionPanel.split'),
       phrase('settings/appearance', 'sessionPanel.overlay'),
+      phrase('settings/appearance', 'contentWidth.title'),
+      phrase('settings/appearance', 'contentWidth.label'),
     ],
     load: () => import('./pages/application/AppearanceSettingsPage'),
   }),
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 3b798e60c9..ea2919c20c 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -3782,6 +3782,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         effectiveTargetSessionId,
         {
           isProcessing: !!derivedState?.isProcessing,
+          reportTitle: t('usage.title'),
           busyMessage: t('chatInput.usageBusy'),
           noWorkspaceMessage: t('chatInput.usageNoWorkspace'),
           failedTitle: t('chatInput.usageFailed'),
diff --git a/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.scss b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.scss
new file mode 100644
index 0000000000..3e4f560eec
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.scss
@@ -0,0 +1,67 @@
+.flow-chat-width-boundary {
+  position: absolute;
+  inset-block: var(--openbitfun-space-12);
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: var(--openbitfun-layer-overlay);
+
+  &[hidden] { display: none; }
+
+  &__handle {
+    position: absolute;
+    inset-block: 0;
+    width: var(--openbitfun-space-3);
+    transform: translateX(-50%);
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+    pointer-events: auto;
+    outline: none;
+
+    &--left { left: 0; }
+    &--right { left: 100%; }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--openbitfun-color-border-default);
+      opacity: 0;
+      transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+    }
+
+    &::before {
+      top: 50%;
+      height: 50%;
+      width: var(--openbitfun-border-width-default);
+      transform: translate(-50%, -50%);
+    }
+
+    &::after {
+      top: 50%;
+      height: var(--openbitfun-space-8);
+      width: var(--openbitfun-border-width-strong);
+      border-radius: var(--openbitfun-radius-pill);
+      transform: translate(-50%, -50%);
+      background: var(--openbitfun-color-content-secondary);
+    }
+
+    &:hover::before { opacity: 0.5; }
+    &:hover::after,
+    &:focus-visible::before,
+    &:focus-visible::after { opacity: 1; }
+
+    &:focus-visible::after { background: var(--openbitfun-color-focus-ring); }
+  }
+
+  &[data-resizing] &__handle::before { opacity: 0.5; }
+  &[data-resizing] &__handle::after { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flow-chat-width-boundary__handle::before,
+  .flow-chat-width-boundary__handle::after { transition: none; }
+}
diff --git a/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.test.tsx b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.test.tsx
new file mode 100644
index 0000000000..260c5f5dbc
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.test.tsx
@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+import React, { act, useRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { flowChatWidthStore, FLOW_CHAT_WIDTH_STORAGE_KEY } from '@/infrastructure/appearance/preferences/flowChatWidthStore';
+import { FlowChatWidthBoundary } from './FlowChatWidthBoundary';
+
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('FlowChat content-width boundary', () => {
+  let host: HTMLDivElement;
+  let root: Root;
+  let paneWidth: number;
+  let resized: () => void;
+  let resizing: ReturnType<typeof vi.fn>;
+  let writes: ReturnType<typeof vi.spyOn>;
+  const pane = () => host.querySelector<HTMLDivElement>('[data-testid="pane"]')!;
+  const handle = (side = 'right') => host.querySelector<HTMLDivElement>(`.flow-chat-width-boundary__handle--${side}`)!;
+  const renderedWidth = () => pane().style.getPropertyValue('--openbitfun-control-flow-chat-transcript-max-width');
+  function Harness({ active }: { active: boolean }) {
+    const paneRef = useRef<HTMLDivElement>(null);
+    return <div ref={paneRef} data-testid="pane"><textarea defaultValue="draft" />
+      <FlowChatWidthBoundary paneRef={paneRef} active={active} onResizingChange={resizing} />
+    </div>;
+  }
+  const render = (active = true) => act(() => root.render(<Harness active={active} />));
+  const pointer = (type: string, x: number, side = 'right', pointerId = 1) => act(() => {
+    const event = new MouseEvent(type, { clientX: x, button: 0, bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'pointerId', { value: pointerId });
+    handle(side).dispatchEvent(event);
+  });
+  const key = (value: string, side = 'right', shiftKey = false) => act(() => {
+    handle(side).dispatchEvent(new KeyboardEvent('keydown', { key: value, shiftKey, bubbles: true, cancelable: true }));
+  });
+  const frame = () => act(() => vi.advanceTimersByTime(16));
+
+  beforeEach(() => {
+    paneWidth = 1200;
+    resizing = vi.fn();
+    flowChatWidthStore.setState({ preferredWidth: 900 });
+    window.localStorage.clear();
+    writes = vi.spyOn(Storage.prototype, 'setItem');
+    vi.useFakeTimers();
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => setTimeout(() => callback(0), 16));
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+    vi.stubGlobal('ResizeObserver', class { constructor(callback: () => void) { resized = callback; } observe() {} disconnect() {} });
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => paneWidth);
+    const captured = new WeakMap<Element, number>();
+    HTMLElement.prototype.setPointerCapture = vi.fn(function (this: HTMLElement, id: number) { captured.set(this, id); });
+    HTMLElement.prototype.hasPointerCapture = vi.fn(function (this: HTMLElement, id: number) { return captured.get(this) === id; });
+    HTMLElement.prototype.releasePointerCapture = vi.fn(function (this: HTMLElement) { captured.delete(this); });
+    host = document.createElement('div'); document.body.appendChild(host); root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount()); host.remove();
+    vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers();
+    document.body.style.cursor = ''; document.body.style.userSelect = '';
+  });
+
+  it.each(['left', 'right'])('resizes symmetrically from the %s edge and persists only on release', side => {
+    render();
+    expect(renderedWidth()).toBe('900px');
+    const draft = host.querySelector('textarea');
+    pointer('pointerdown', 500, side);
+    pointer('pointermove', side === 'left' ? 400 : 600, side); frame();
+    expect(renderedWidth()).toBe('1100px');
+    expect(flowChatWidthStore.getState().preferredWidth).toBe(900);
+    expect(writes).not.toHaveBeenCalled();
+    pointer('pointerup', side === 'left' ? 400 : 600, side);
+    expect(flowChatWidthStore.getState().preferredWidth).toBe(1100);
+    expect(writes).toHaveBeenLastCalledWith(FLOW_CHAT_WIDTH_STORAGE_KEY, '1100');
+    expect(resizing.mock.calls).toEqual([[true], [false]]);
+    expect(host.querySelector('textarea')).toBe(draft);
+    expect(document.body.style.cursor).toBe('');
+  });
+
+  it('enforces the minimum and the token-derived pane gap, including a pending final frame', () => {
+    render();
+    expect(handle().getAttribute('aria-valuemax')).toBe('1116');
+    pointer('pointerdown', 0); pointer('pointermove', 1000); pointer('pointerup', 1000);
+    expect(renderedWidth()).toBe('1116px');
+    pointer('pointerdown', 1000); pointer('pointermove', 0); frame(); pointer('pointerup', 0);
+    expect(renderedWidth()).toBe('600px');
+  });
+
+  it('clamps each pane without overwriting a wider remembered preference', () => {
+    act(() => flowChatWidthStore.getState().setPreferredWidth(1400));
+    render();
+    expect(renderedWidth()).toBe('1116px');
+    paneWidth = 550; act(() => resized());
+    expect(renderedWidth()).toBe('466px');
+    expect(host.querySelector<HTMLElement>('.flow-chat-width-boundary')!.hidden).toBe(true);
+    expect(flowChatWidthStore.getState().preferredWidth).toBe(1400);
+    paneWidth = 1700; act(() => resized());
+    expect(renderedWidth()).toBe('1400px');
+    pointer('pointerdown', 0); pointer('pointerup', 0);
+    expect(flowChatWidthStore.getState().preferredWidth).toBe(1400);
+  });
+
+  it.each(['Escape', 'pointercancel', 'lostpointercapture', 'blur', 'inactive', 'resize', 'setting', 'unmount'])('cancels on %s and restores the saved width and host styles', reason => {
+    document.body.style.cursor = 'crosshair'; document.body.style.userSelect = 'text';
+    render(); pointer('pointerdown', 0); pointer('pointermove', 80); frame();
+    expect(renderedWidth()).toBe('1060px');
+    if (reason === 'Escape') key('Escape');
+    else if (reason === 'blur') act(() => window.dispatchEvent(new Event('blur')));
+    else if (reason === 'inactive') render(false);
+    else if (reason === 'resize') { paneWidth = 1300; act(() => resized()); }
+    else if (reason === 'setting') act(() => flowChatWidthStore.getState().setPreferredWidth(800));
+    else if (reason === 'unmount') act(() => root.render(null));
+    else pointer(reason, 80);
+    expect(document.body.style.cursor).toBe('crosshair');
+    expect(document.body.style.userSelect).toBe('text');
+    expect(flowChatWidthStore.getState().preferredWidth).toBe(reason === 'setting' ? 800 : 900);
+    if (reason !== 'unmount') expect(renderedWidth()).toBe(reason === 'setting' ? '800px' : '900px');
+    expect(resizing).toHaveBeenLastCalledWith(false);
+  });
+
+  it('ignores unrelated pointers and supports physical arrows, Shift, Home/End and reset', () => {
+    render(); pointer('pointerdown', 0); pointer('pointermove', 100, 'right', 2); pointer('pointerup', 100, 'right', 2); frame();
+    expect(renderedWidth()).toBe('900px');
+    key('Escape');
+    key('ArrowLeft', 'left'); expect(renderedWidth()).toBe('910px');
+    key('ArrowLeft', 'right', true); expect(renderedWidth()).toBe('860px');
+    key('Home'); expect(renderedWidth()).toBe('600px');
+    key('End'); expect(renderedWidth()).toBe('1116px');
+    act(() => handle().dispatchEvent(new MouseEvent('dblclick', { bubbles: true })));
+    expect(renderedWidth()).toBe('900px');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.tsx b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.tsx
new file mode 100644
index 0000000000..8a96e07d92
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/FlowChatWidthBoundary.tsx
@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+import { useStore } from 'zustand';
+import { tokens } from '@openbitfun/design-tokens';
+import { useI18n } from '@/infrastructure/i18n';
+import { DEFAULT_FLOW_CHAT_WIDTH, flowChatWidthStore, MIN_FLOW_CHAT_WIDTH } from '@/infrastructure/appearance/preferences/flowChatWidthStore';
+import './FlowChatWidthBoundary.scss';
+
+const WIDTH_TOKEN = '--openbitfun-control-flow-chat-transcript-max-width';
+const clamp = (width: number, max: number) => Math.min(max, Math.max(Math.min(MIN_FLOW_CHAT_WIDTH, max), Math.round(width)));
+
+interface Drag {
+  pointerId: number;
+  target: HTMLDivElement;
+  startX: number;
+  startWidth: number;
+  width: number;
+  direction: number;
+  restore: () => void;
+}
+
+/** Owns only column geometry. Scrolling and row measurement stay with FlowChat. */
+export function FlowChatWidthBoundary({
+  paneRef,
+  active,
+  onResizingChange,
+}: {
+  paneRef: RefObject<HTMLDivElement>;
+  active: boolean;
+  onResizingChange: (resizing: boolean) => void;
+}) {
+  const { t } = useI18n('flow-chat');
+  const preferredWidth = useStore(flowChatWidthStore, state => state.preferredWidth);
+  const [maxWidth, setMaxWidth] = useState(0);
+  const [draftWidth, setDraftWidth] = useState<number | null>(null);
+  const drag = useRef<Drag | null>(null);
+  const frame = useRef<number | null>(null);
+  const width = clamp(draftWidth ?? preferredWidth, maxWidth);
+
+  const finish = useCallback((commit = false) => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = null;
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+    current.restore();
+    if (current.target.hasPointerCapture?.(current.pointerId)) current.target.releasePointerCapture(current.pointerId);
+    setDraftWidth(null);
+    onResizingChange(false);
+    if (commit && current.width !== current.startWidth) flowChatWidthStore.getState().setPreferredWidth(current.width);
+  }, [onResizingChange]);
+
+  useEffect(() => {
+    const pane = paneRef.current;
+    if (!pane) return;
+    const previous = pane.style.getPropertyValue(WIDTH_TOKEN);
+    const priority = pane.style.getPropertyPriority(WIDTH_TOKEN);
+    return () => {
+      if (previous) pane.style.setProperty(WIDTH_TOKEN, previous, priority);
+      else pane.style.removeProperty(WIDTH_TOKEN);
+    };
+  }, [paneRef]);
+
+  useLayoutEffect(() => {
+    const pane = paneRef.current;
+    if (pane && maxWidth > 0) pane.style.setProperty(WIDTH_TOKEN, `${width}px`);
+  }, [paneRef, maxWidth, width]);
+
+  useEffect(() => {
+    const pane = paneRef.current;
+    if (!pane) return;
+    const measure = () => {
+      const style = getComputedStyle(pane);
+      const px = (name: 'control.flowChat.turnRailOffset' | 'control.flowChat.turnRailWidth' | 'space.2', variable: string) => (
+        Number.parseFloat(style.getPropertyValue(variable)) || Number.parseFloat(String(tokens[name]))
+      );
+      // Reserve a rail lane plus breathing room on BOTH sides of the centred
+      // column. This also covers the native scrollbar and the handle hit area.
+      const gap = px('control.flowChat.turnRailOffset', '--openbitfun-control-flow-chat-turn-rail-offset')
+        + px('control.flowChat.turnRailWidth', '--openbitfun-control-flow-chat-turn-rail-width')
+        + px('space.2', '--openbitfun-space-2');
+      const next = Math.max(0, Math.floor(pane.clientWidth - 2 * gap));
+      setMaxWidth(previous => previous === next ? previous : next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(pane);
+    return () => observer.disconnect();
+  }, [paneRef]);
+
+  // A disappearing/resized pane, an external setting change, or focus loss
+  // cancels the preview without replacing the user's saved preference.
+  useEffect(() => { finish(); }, [active, preferredWidth, maxWidth, finish]);
+  useEffect(() => {
+    const cancel = () => finish();
+    window.addEventListener('blur', cancel);
+    return () => { window.removeEventListener('blur', cancel); finish(); };
+  }, [finish]);
+
+  return (
+    <div className="flow-chat-width-boundary"
+      data-openbitfun-component="chat-pane" data-openbitfun-part="widthBoundary"
+      data-resizing={draftWidth !== null || undefined}
+      style={{ width }} hidden={!active || maxWidth <= MIN_FLOW_CHAT_WIDTH}>
+      {(['left', 'right'] as const).map(side => (
+        <div key={side} className={`flow-chat-width-boundary__handle flow-chat-width-boundary__handle--${side}`}
+          data-openbitfun-component="chat-pane" data-openbitfun-part="widthHandle"
+          role="separator" aria-orientation="vertical" tabIndex={0}
+          aria-label={t(side === 'left' ? 'contentWidth.resizeLeft' : 'contentWidth.resizeRight')}
+          aria-valuemin={Math.min(MIN_FLOW_CHAT_WIDTH, maxWidth)} aria-valuemax={maxWidth} aria-valuenow={width}
+          onPointerDown={event => {
+            if (event.button !== 0 || drag.current) return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.focus({ preventScroll: true });
+            event.currentTarget.setPointerCapture(event.pointerId);
+            const { cursor, userSelect } = document.body.style;
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            drag.current = {
+              pointerId: event.pointerId, target: event.currentTarget,
+              startX: event.clientX, startWidth: width, width,
+              direction: side === 'left' ? -1 : 1,
+              restore: () => { document.body.style.cursor = cursor; document.body.style.userSelect = userSelect; },
+            };
+            setDraftWidth(width);
+            onResizingChange(true);
+          }}
+          onPointerMove={event => {
+            const current = drag.current;
+            if (!current || current.pointerId !== event.pointerId) return;
+            // Both edges move equally around the existing panel axis.
+            current.width = clamp(current.startWidth + 2 * current.direction * (event.clientX - current.startX), maxWidth);
+            if (frame.current === null) frame.current = requestAnimationFrame(() => {
+              frame.current = null;
+              if (drag.current) setDraftWidth(drag.current.width);
+            });
+          }}
+          onPointerUp={event => { if (drag.current?.pointerId === event.pointerId) finish(true); }}
+          onPointerCancel={event => { if (drag.current?.pointerId === event.pointerId) finish(); }}
+          onLostPointerCapture={event => { if (drag.current?.pointerId === event.pointerId) finish(); }}
+          onDoubleClick={() => {
+            finish();
+            // The settings reset and this gesture use the same default.
+            flowChatWidthStore.getState().setPreferredWidth(DEFAULT_FLOW_CHAT_WIDTH);
+          }}
+          onKeyDown={event => {
+            if (event.key === 'Escape') {
+              if (drag.current) { event.preventDefault(); event.stopPropagation(); finish(); }
+              return;
+            }
+            const step = event.shiftKey ? 50 : 10;
+            const direction = side === 'left' ? -1 : 1;
+            const next = event.key === 'Home' ? MIN_FLOW_CHAT_WIDTH : event.key === 'End' ? maxWidth
+              : event.key === 'ArrowLeft' ? width - direction * step
+                : event.key === 'ArrowRight' ? width + direction * step : null;
+            if (next === null || drag.current) return;
+            event.preventDefault();
+            event.stopPropagation();
+            flowChatWidthStore.getState().setPreferredWidth(clamp(next, maxWidth));
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
index 9dd9bd4953..1d01cdb3c9 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_SCROLL_STABILITY.md
@@ -58,6 +58,29 @@ runtime confirmation using the read-only reveal probes.
 
 ## Transcript Width
 
+`FlowChatWidthBoundary` projects the controller-local Appearance width preference
+onto the ChatPane's transcript-width token, shared by the transcript and composer.
+The existing default is 900px and the preference minimum is two thirds (600px).
+The displayed maximum is the pane width minus two lanes, each comprising the
+design-system turn-rail offset, rail width and `space.2` gap. Panes narrower than
+the preference minimum fit their available space and hide the drag handles;
+resizing a pane never rewrites the preference. Settings → Appearance has an
+independent numeric control and reset backed by the same local preference.
+This presentation state does not travel to a workspace, peer or dispatch host.
+
+Both edges resize around the existing centre axis. The visible guide occupies
+the middle half of the boundary, with a taller hit area retained for dragging.
+Pointer capture owns a
+frame-coalesced preview, with persistence only on release; Escape, pointer
+cancellation, capture loss, window blur, pane deactivation/resize and unmount
+cancel it and restore the previous preference. Arrow keys resize in physical
+directions (Shift uses a larger step); Home/End select bounds and double-click
+restores the default. Dragging suspends width-derived measurement through the
+existing pane-resize contract. The committed content width also enters the
+virtualizer's estimate context and layout signature, since a reading column can
+reflow while its full-width scroller keeps the same box. No new viewport writer
+or follow policy is introduced.
+
 The scroller's `--_flow-chat-top-mask-start` is registered as non-inheriting:
 only its own edge mask consumes the value. An opening trace placed a 562.3ms
 forced style/layout read immediately after `data-scroll-at-start` changed this
@@ -73,6 +96,14 @@ gutter reservation alone does not reserve custom scrollbar space. Overlay
 scrollbars continue to use the platform's zero-width layout. Scrollbar paint
 and hover visibility remain owned by the design system.
 
+When the physical scroll range is zero, the existing edge-fade mask is cropped
+to the scroller's client box. This excludes disabled native track pixels that
+some WebViews paint despite transparent scrollbar styles, while preserving
+both reserved gutters and every layout/scroll metric. The existing resize and
+tail-state updates refresh the mask bounds; overflow removes the crop. No new
+observer, React state, or viewport writer is involved. Forced colors continues
+to disable the mask entirely.
+
 ## How Much To Reserve
 
 The input-stack footer and spacer together occupy at most three quarters of the
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
index 160b779e9a..f623efab9c 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -16,6 +16,7 @@ each missing what the other had.
 
 | Test | Contract it holds |
 |---|---|
+| `../FlowChatWidthBoundary.test.tsx`, `../../../infrastructure/appearance/preferences/flowChatWidthStore.test.ts`, `../../../app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx` | symmetric pointer/keyboard column resizing, token-derived bounds, cancellation/cleanup, narrow-pane restoration, persisted preference compatibility and settings/reset synchronization; supplied DOM geometry, not visual or live remote evidence |
 | `../../timeline/hostQueueProjection.test.ts`, `../../timeline/useHostQueueTimeline.test.tsx`, `../HostPendingQueuePanel.test.tsx` | host-accepted preview, canonical handoff/event ordering, stable keys, blocked recovery, old-host fallback, history-window visibility and device lease cleanup; fixtures only, no live remote transport evidence |
 | `TurnFooter.test.tsx`, `modelRoundItemMemo.test.ts` | latest-turn identity, hover/focus across virtual rows, lease cleanup, no projection churn and the existing completion reveal gate; behavior only, not visual proof |
 | `MessageExportControls.test.tsx` | flat copy/export menu, illustrated checkbox-card selection by pointer and keyboard, complete user text/reference rendering, omission or expansion of thinking, minimal branding, confirmation, pending/error feedback, cancel/Escape/outside dismissal and resident-trigger focus restoration; local DOM behavior, not image fidelity or remote-host validation |
@@ -46,6 +47,7 @@ each missing what the other had.
 | `flowChatViewportAnchor.test.ts` | anchor geometry and the DOM contract |
 | `useFlowChatViewportAnchor.test.tsx` | capture, restore, carry, the settle window |
 | `VirtualMessageList.session-boundary.test.tsx` | prepend compensation, consecutive paging with/without queued input, passive scroll suppression, navigation-target current Turn with gesture/follow/session handoff, and search placement only outside the readable viewport |
+| `flowChatScrollbarMask.test.ts`, `VirtualMessageList.session-boundary.test.tsx` | idle gutter masking with symmetric, one-sided and overlay scrollbars; overflow restoration and content/viewport resizing without scroll writes; supplied DOM geometry, not native rendering or live remote evidence |
 | `FlowChatOpeningBoundary.test.tsx` | opening-only activation/scroll isolation, bidirectional focus skipping, programmatic focus return, and reveal cleanup; DOM contracts only |
 | `ModernFlowChatContainer.history-state.test.tsx` | history presentation and the submission event |
 | `flowChatViewportOwnership.test.ts` | the priority order, preemption, expiry |
@@ -71,6 +73,13 @@ each missing what the other had.
 
 ## Manual
 
+For content-width resizing, check both edge hit areas, subtle hover/focus paint,
+composer/transcript alignment, rail and scrollbar gaps, minimum/maximum widths,
+light/dark and reduced motion, long virtualized history, and restart persistence.
+Local, remote-workspace and peer transcripts share controller-local appearance;
+live SSH/Peer, mobile Remote Control and Detached Dispatch were not exercised by
+the DOM fixtures and need separate scenario acceptance where applicable.
+
 For text selection, check the floating toolbar and right-click actions in the
 native WebView; keyboard selection, Tab, Escape, and Ctrl/Cmd+Alt+B; both main
 and ordinary side transcripts; multiline Markdown/code; dark/light and forced
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
index 64ac15687f..696cb700fc 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -130,6 +130,8 @@ interface ModernFlowChatContainerProps {
   isViewportActive?: boolean;
   /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
   resizeSuspended?: boolean;
+  /** Preferred reading-column width; invalidates cached row heights on change. */
+  contentWidth?: number;
   /** Whether the host-owned session right panel is open. */
   isRightPanelOpen?: boolean;
   /** Toggle the host-owned session right panel. */
@@ -302,6 +304,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   className = '',
   isViewportActive = true,
   resizeSuspended = false,
+  contentWidth,
   isRightPanelOpen = false,
   onToggleRightPanel,
   emptyState,
@@ -2809,6 +2812,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
                   latestTurnId={latestTurnId}
                   isViewportActive={isViewportActive}
                   measurementSuspended={resizeSuspended}
+                  contentWidth={contentWidth}
                   presentationMode={isRenderingHistoryProjection ? 'history-window' : 'tail'}
                   viewportMode={isViewportDetachedFromLiveTail ? 'history-reading' : 'live-tail'}
                   historyWindow={isShowingHistoryPresentation ? activeHistoryPresentation?.range ?? null : null}
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
index f43305c659..404329d4c0 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
@@ -88,6 +88,8 @@
     );
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
+    // The idle-scrollbar mask crops only the reserved gutters when content
+    // fits. Overflow restores these defaults without changing layout geometry.
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
   }
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
index 0265dca20e..41624020fa 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
@@ -41,6 +41,8 @@ const mocks = vi.hoisted(() => ({
   scheduleFollowToLatest: vi.fn(),
   startAtTailOnMount: true,
   virtualizerStartsAtTail: false,
+  estimateWidth: undefined as number | undefined,
+  estimateRevision: '',
   reconcileOpeningMeasurement: null as null | (() => boolean),
   placeSubmittedMessage: null as null | ((intent: SubmittedMessageScrollIntent) => number | null),
   readLayoutTarget: null as null | (() => number),
@@ -139,8 +141,12 @@ vi.mock('./useFlowChatVirtualizer', async () => {
       scrollerRef: { current: HTMLElement | null };
       startAtTailOnMount?: boolean;
       reconcileOpeningMeasurement?: () => boolean;
+      estimateContext?: { availableWidthPx?: number };
+      estimateContextRevision?: string;
     }) => {
       mocks.virtualizerStartsAtTail = options.startAtTailOnMount === true;
+      mocks.estimateWidth = options.estimateContext?.availableWidthPx;
+      mocks.estimateRevision = options.estimateContextRevision ?? '';
       mocks.reconcileOpeningMeasurement = options.reconcileOpeningMeasurement ?? null;
       const rows = options.items.map((item, index) => ({
         index,
@@ -420,6 +426,18 @@ describe('VirtualMessageList natural scroll contract', () => {
     if (!canSynchronize) expect(onBoundaryIntent).not.toHaveBeenCalled();
   });
 
+  it('invalidates width-derived row estimates when only the content column changes', () => {
+    fakeLayout({ clientWidth: 1400, clientHeight: 800, scrollHeight: 2000, turnTopFromScrollerTop: 0 });
+    act(() => root.render(<VirtualMessageList contentWidth={900} />));
+    expect(mocks.estimateWidth).toBe(900);
+    const originalRevision = mocks.estimateRevision;
+    act(() => root.render(<VirtualMessageList contentWidth={600} />));
+    expect(mocks.estimateWidth).toBe(600);
+    expect(mocks.estimateRevision).not.toBe(originalRevision);
+    act(() => root.render(<VirtualMessageList contentWidth={1600} />));
+    expect(mocks.estimateWidth).toBe(1400);
+  });
+
   it('reconciles opening measurements only while follow owns the active viewport', () => {
     act(() => root.render(<VirtualMessageList />));
     expect(mocks.reconcileOpeningMeasurement?.()).toBe(false);
@@ -435,6 +453,56 @@ describe('VirtualMessageList natural scroll contract', () => {
     expect(mocks.reconcileOpeningMeasurement?.()).toBe(false);
   });
 
+  it('crops only idle gutter paint across content and viewport resizing without moving the reader', () => {
+    const layout = { clientWidth: 986, clientHeight: 800, scrollHeight: 800, turnTopFromScrollerTop: 0 };
+    const restoreLayout = fakeLayout({ ...layout, scrollHeight: () => layout.scrollHeight });
+    try {
+      act(() => root.render(<VirtualMessageList />));
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      expect(scroller.style.maskSize).toBe('986px 100%');
+      // Supply the reserved leading gutter; jsdom does not lay out scrollbars.
+      Object.defineProperty(scroller, 'clientLeft', { value: 7 });
+      const observer = resizeObservers.find(candidate => candidate.targets.has(scroller))!;
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('986px 100%');
+      expect(scroller.style.maskPosition).toBe('7px 0px');
+
+      layout.scrollHeight = 1600;
+      scroller.scrollTop = 100;
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('');
+      expect(scroller.style.maskPosition).toBe('');
+      expect(scroller.scrollTop).toBe(100);
+      expect(mocks.scrollToOffset).not.toHaveBeenCalled();
+      expect(mocks.scrollItemIntoView).not.toHaveBeenCalled();
+
+      layout.scrollHeight = 800;
+      scroller.scrollTop = 0; // Native clamping when the content fits again.
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('986px 100%');
+
+      Object.defineProperty(scroller, 'clientWidth', { configurable: true, value: 786 });
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('786px 100%');
+      expect(scroller.style.maskPosition).toBe('7px 0px');
+      expect(scroller.scrollTop).toBe(0);
+      expect(mocks.scrollToOffset).not.toHaveBeenCalled();
+      expect(mocks.scrollItemIntoView).not.toHaveBeenCalled();
+
+      Object.defineProperty(scroller, 'clientHeight', { configurable: true, value: 600 });
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('');
+      Object.defineProperty(scroller, 'clientHeight', { configurable: true, value: 800 });
+      act(() => observer.notify());
+      expect(scroller.style.maskSize).toBe('786px 100%');
+      expect(scroller.scrollTop).toBe(0);
+      expect(mocks.scrollToOffset).not.toHaveBeenCalled();
+      expect(mocks.scrollItemIntoView).not.toHaveBeenCalled();
+    } finally {
+      restoreLayout();
+    }
+  });
+
   it('isolates the opening transcript at its boundary until reveal', async () => {
     act(() => root.render(<VirtualMessageList />));
     expect(mocks.virtualizerStartsAtTail).toBe(true);
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
index 426f038039..307ab9f62c 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -57,6 +57,7 @@ import { FlowChatScrollIntent, FlowChatTouchIntent, flowChatKeyScrollDirection,
 import { findRenderedTurnAnchorElement } from './flowChatViewportAnchor';
 import { useFlowChatViewportAnchor } from './useFlowChatViewportAnchor';
 import { useFlowChatLeadingExtent } from './useFlowChatLeadingExtent';
+import { syncFlowChatScrollbarMask } from './flowChatScrollbarMask';
 import {
   contentEndScrollTop,
   FLOWCHAT_AT_CONTENT_END_THRESHOLD_PX as AT_CONTENT_END_THRESHOLD_PX,
@@ -224,6 +225,8 @@ export interface VirtualMessageListProps {
   isViewportActive?: boolean;
   /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
   measurementSuspended?: boolean;
+  /** A column can reflow without changing the full-width scroller's box. */
+  contentWidth?: number;
   presentationMode?: 'tail' | 'history-window';
   viewportMode?: 'live-tail' | 'history-reading';
   historyWindow?: ActiveTurnRenderRange | null;
@@ -383,6 +386,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   latestTurnId,
   isViewportActive = true,
   measurementSuspended = false,
+  contentWidth,
   presentationMode = 'tail',
   viewportMode = presentationMode === 'history-window' ? 'history-reading' : 'live-tail',
   historyWindow = null,
@@ -526,14 +530,17 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     ? new Set([...interactionKeys, submissionKey]) : interactionKeys, [interactionKeys, submissionKey]);
   // A quiet stream re-renders this list on every flush; collator-sorting the
   // disclosure map is only worth paying when the map itself changed.
+  const availableWidthPx = contentWidth === undefined
+    ? viewportWidthPx
+    : Math.min(viewportWidthPx || contentWidth, contentWidth);
   const estimateContextRevision = useMemo(() => [
-    viewportWidthPx,
+    availableWidthPx,
     activeSession?.isHistorical === true ? 'historical' : 'live',
     [...(exploreGroupStates?.entries() ?? [])]
       .sort(([left], [right]) => left.localeCompare(right))
       .map(([groupId, expanded]) => `${groupId}:${expanded ? 1 : 0}`)
       .join(','),
-  ].join('|'), [viewportWidthPx, activeSession?.isHistorical, exploreGroupStates]);
+  ].join('|'), [availableWidthPx, activeSession?.isHistorical, exploreGroupStates]);
   const virtualizer = useFlowChatVirtualizer({
     pinnedKeys,
     items: virtualItems,
@@ -545,7 +552,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     estimateItemHeightPx: estimateVirtualMessageItemHeightWithContext,
     getKnownItemHeightPx: getKnownVirtualItemHeightPx,
     estimateContext: {
-      availableWidthPx: viewportWidthPx > 0 ? viewportWidthPx : scrollerElement?.clientWidth,
+      availableWidthPx: availableWidthPx > 0 ? availableWidthPx : scrollerElement?.clientWidth,
       isHistorical: activeSession?.isHistorical === true,
       exploreGroupStates,
     } satisfies VirtualItemHeightEstimateContext,
@@ -1302,6 +1309,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     const scroller = scrollerElementRef.current;
     if (!scroller) return;
     const contentEnd = readContentEndScrollTop(scroller);
+    syncFlowChatScrollbarMask(scroller, contentEnd > 0);
     /*
      * A follow still travelling counts as being at the end.
      *
@@ -2187,13 +2195,14 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         height: scroller.clientHeight,
       };
       if (isUsableFlowChatViewportRect(initialViewportBox)) {
+        syncFlowChatScrollbarMask(scroller, readContentEndScrollTop(scroller) > 0);
         setViewportHeightPx(initialViewportBox.height);
         setViewportWidthPx(initialViewportBox.width);
         // Seed the box so the observer's first callback is not read as a resize.
         observedViewportBoxRef.current = initialViewportBox;
       }
     }
-  }, [updateIsAtScrollStart]);
+  }, [readContentEndScrollTop, updateIsAtScrollStart]);
 
   const scrollToPhysicalBottom = useCallback(() => {
     historyPager.reset();
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.test.ts
new file mode 100644
index 0000000000..541addc53b
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.test.ts
@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it, vi } from 'vitest';
+import { syncFlowChatScrollbarMask } from './flowChatScrollbarMask';
+
+function scrollerBox(clientWidth: number, clientLeft: number, clientHeight = 800): HTMLElement {
+  const scroller = document.createElement('div');
+  Object.defineProperties(scroller, {
+    clientWidth: { value: clientWidth },
+    clientLeft: { value: clientLeft },
+    clientHeight: { value: clientHeight },
+  });
+  return scroller;
+}
+
+describe('FlowChat idle scrollbar mask', () => {
+  it.each([
+    { name: 'symmetric reserved gutters', width: 986, left: 7 },
+    { name: 'a right-side native scrollbar', width: 986, left: 0 },
+    { name: 'a left-side native scrollbar', width: 986, left: 14 },
+    { name: 'an overlay scrollbar', width: 1000, left: 0 },
+  ])('preserves the whole client box with $name', ({ width, left }) => {
+    const scroller = scrollerBox(width, left);
+    scroller.style.overflowY = 'scroll';
+    scroller.style.scrollbarGutter = 'stable both-edges';
+
+    syncFlowChatScrollbarMask(scroller, false);
+
+    expect(scroller.style.maskSize).toBe(`${width}px 100%`);
+    expect(scroller.style.maskPosition).toBe(`${left}px 0px`);
+    expect(scroller.style.overflowY).toBe('scroll');
+    expect(scroller.style.scrollbarGutter).toBe('stable both-edges');
+    expect(scroller.scrollTop).toBe(0);
+    const write = vi.spyOn(scroller.style, 'setProperty');
+    syncFlowChatScrollbarMask(scroller, false);
+    expect(write).not.toHaveBeenCalled();
+  });
+
+  it('restores the full-width fade and native scrollbar as soon as content overflows', () => {
+    const scroller = scrollerBox(986, 7);
+    scroller.style.maskImage = 'linear-gradient(transparent, black)';
+    syncFlowChatScrollbarMask(scroller, false);
+    scroller.scrollTop = 250;
+
+    syncFlowChatScrollbarMask(scroller, true);
+
+    for (const property of ['mask-size', '-webkit-mask-size', 'mask-position', '-webkit-mask-position']) {
+      expect(scroller.style.getPropertyValue(property)).toBe('');
+    }
+    expect(scroller.style.maskImage).toBe('linear-gradient(transparent, black)');
+    expect(scroller.scrollTop).toBe(250);
+  });
+
+  it.each([[0, 800], [986, 0]])('leaves an unmeasurable %s × %s viewport uncropped', (width, height) => {
+    const scroller = scrollerBox(width, 7, height);
+    syncFlowChatScrollbarMask(scroller, false);
+    expect(scroller.style.maskSize).toBe('');
+    expect(scroller.style.maskPosition).toBe('');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.ts b/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.ts
new file mode 100644
index 0000000000..4971f0a3fd
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatScrollbarMask.ts
@@ -0,0 +1,23 @@
+/**
+ * Crop the existing edge-fade mask to the client box when nothing can scroll.
+ * Native WebViews can paint a disabled track despite transparent scrollbar
+ * styles. Masking its pixels keeps the gutter, row widths and scroll range.
+ */
+export function syncFlowChatScrollbarMask(scroller: HTMLElement, canScroll: boolean): void {
+  const width = canScroll ? 0 : scroller.clientWidth;
+  const crop = width > 0 && scroller.clientHeight > 0;
+  const size = crop ? `${width}px 100%` : '';
+  // clientLeft includes the leading gutter, including a left-side scrollbar.
+  const position = crop ? `${scroller.clientLeft}px 0px` : '';
+
+  for (const [property, value] of [
+    ['mask-size', size],
+    ['-webkit-mask-size', size],
+    ['mask-position', position],
+    ['-webkit-mask-position', position],
+  ]) {
+    if (scroller.style.getPropertyValue(property) === value) continue;
+    if (value) scroller.style.setProperty(property, value);
+    else scroller.style.removeProperty(property);
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
index 3caa24bf4b..1e89d52070 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
@@ -3,23 +3,16 @@ import { createRoot, type Root } from 'react-dom/client';
 import { JSDOM } from 'jsdom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import fs from 'node:fs';
-import { formatDuration } from '@/shared/utils/format';
 import path from 'node:path';
 
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
 import { AppearanceCompiler } from '@/infrastructure/appearance/compiler/AppearanceCompiler';
 import { AppearanceRegistry } from '@/infrastructure/appearance/registry/AppearanceRegistry';
+import { appearancePackageValidator } from '@/infrastructure/appearance/schema/AppearancePackageValidator';
 import { APPEARANCE_SCHEMA_VERSION, type AppearancePackage } from '@/infrastructure/appearance/types';
-import { globalEventBus } from '@/infrastructure/event-bus';
 import enFlowChat from '@/locales/en-US/flow-chat.json';
 import zhCnFlowChat from '@/locales/zh-CN/flow-chat.json';
 import zhTwFlowChat from '@/locales/zh-TW/flow-chat.json';
-import {
-  FLOWCHAT_FOCUS_ITEM_EVENT,
-  type FlowChatFocusItemRequest,
-} from '../../events/flowchatNavigation';
-import { flowChatStore } from '../../store/FlowChatStore';
-import type { FlowChatState, Session } from '../../types/flow-chat';
 import { SessionRuntimeStatusEntry } from './SessionRuntimeStatusEntry';
 import { SessionUsagePanel } from './SessionUsagePanel';
 import { sessionUsagePanelAppearanceDescriptor } from './appearance';
@@ -28,22 +21,10 @@ import { USAGE_EXPORT_REDACT_PATHS_STORAGE_KEY } from './usageReportUtils';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
-const snapshotApiMocks = vi.hoisted(() => ({
-  getOperationDiff: vi.fn(),
-}));
-
-const tabUtilsMocks = vi.hoisted(() => ({
-  createDiffEditorTab: vi.fn(),
-}));
-
-vi.mock('@/infrastructure/api/service-api/SnapshotAPI', () => ({
-  snapshotAPI: {
-    getOperationDiff: snapshotApiMocks.getOperationDiff,
-  },
-}));
-
-vi.mock('@/shared/utils/tabUtils', () => ({
-  createDiffEditorTab: tabUtilsMocks.createDiffEditorTab,
+const promptPreviewMocks = vi.hoisted(() => ({ open: vi.fn(), warning: vi.fn(), error: vi.fn() }));
+vi.mock('../../services/openSessionContextPreview', () => ({ openSessionContextPreview: promptPreviewMocks.open }));
+vi.mock('@/shared/notification-system', () => ({
+  notificationService: { warning: promptPreviewMocks.warning, error: promptPreviewMocks.error },
 }));
 
 vi.mock('react-i18next', async (importOriginal) => ({
@@ -52,6 +33,19 @@ vi.mock('react-i18next', async (importOriginal) => ({
     t: (key: string, options?: Record<string, unknown>) => {
       const labels: Record<string, string> = {
         'usage.title': 'Session Usage',
+        'usage.tokens.title': 'Token usage',
+        'usage.tokens.cacheHit': 'KV Cache hits',
+        'usage.tokens.uncachedInput': 'Input (uncached)',
+        'usage.tokens.hitRate': 'Cache hit rate {{value}}',
+        'usage.tokens.hitRateDetail': 'Cache hit rate {{rate}} ({{cached}} / {{input}} input tokens)',
+        'usage.tokens.cacheHitDetail': '(cache hit {{rate}})',
+        'usage.tokens.minimumRate': '≥{{rate}}',
+        'usage.tokens.recordedCacheHits': 'Recorded cache hits',
+        'usage.tokens.remainingInput': 'Remaining input',
+        'usage.tokens.inputShareDetail': '{{tokens}} / {{input}} input tokens ({{share}} of input)',
+        'usage.tokens.partialCacheHelp': 'The chart shows recorded cache hits; remaining input includes unreported usage. The hit percentage is a lower bound over all input tokens.',
+        'usage.tokens.cacheUnavailable': '(cache unavailable)',
+        'usage.context.unavailable': 'No context breakdown recorded',
         'usage.unavailable': 'Unavailable',
         'usage.redacted': 'Redacted',
         'usage.percent': '{{value}}%',
@@ -234,23 +228,6 @@ vi.mock('react-i18next', async (importOriginal) => ({
 
 vi.mock('@openbitfun/ui', async importOriginal => ({
   ...await importOriginal<typeof import('@openbitfun/ui')>(),
-  IconButton: React.forwardRef<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement> & { icon?: React.ReactNode; variant?: string; size?: string }
-  >(function MockIconButton({
-    children,
-    icon,
-    variant: _variant,
-    size: _size,
-    ...props
-  }, ref) {
-    return (
-      <button ref={ref} type="button" {...props}>
-        {icon}
-        {children}
-      </button>
-    );
-  }),
   Tooltip: ({ children, content }: { children: React.ReactNode; content?: React.ReactNode }) => {
     const tooltipContent = typeof content === 'string' ? content : undefined;
     let trigger = children;
@@ -501,8 +478,9 @@ describe('Session usage report UI components', () => {
   let root: Root;
 
   beforeEach(() => {
-    snapshotApiMocks.getOperationDiff.mockReset();
-    tabUtilsMocks.createDiffEditorTab.mockReset();
+    promptPreviewMocks.open.mockReset();
+    promptPreviewMocks.warning.mockReset();
+    promptPreviewMocks.error.mockReset();
     dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
       pretendToBeVisual: true,
       url: 'http://localhost/',
@@ -591,7 +569,7 @@ describe('Session usage report UI components', () => {
     expect(onOpenDetails).toHaveBeenCalledWith(report);
   });
 
-  it('renders the focused compact summary used by the usage modal', () => {
+  it('renders the compact summary without removed detail links', () => {
     const onOpenDetails = vi.fn();
     const report = usageReport({
       scope: {
@@ -650,7 +628,7 @@ describe('Session usage report UI components', () => {
     expect(container.textContent).toContain('Tokens usage');
     expect(container.textContent).toContain('deepseek-v4-flash');
     expect(container.textContent).toContain('68 calls');
-    expect(container.textContent).toContain('View all 4');
+    expect(container.textContent).not.toContain('View all 4');
     expect(container.textContent).toContain('ExecCommand');
     expect(container.textContent).toContain('Grep');
     expect(container.textContent).toContain('Edit');
@@ -660,11 +638,7 @@ describe('Session usage report UI components', () => {
     expect(container.querySelector('input[aria-label="Redact paths"]')).toBeNull();
     expect(container.textContent).toContain('Usage statistics may be delayed');
 
-    const toolsButton = container.querySelector('button[aria-label="Open Tools details"]');
-    act(() => {
-      toolsButton?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(onOpenDetails).toHaveBeenCalledWith(report, 'tools');
+    expect(container.querySelector('button[aria-label="Open Tools details"]')).toBeNull();
   });
 
   it('appends a hit-rate suffix to the cached cell when cache is reported', () => {
@@ -751,7 +725,7 @@ describe('Session usage report UI components', () => {
       .toContain('tool calls whose result was unsuccessful');
   });
 
-  it('offers section detail jumps when summary lists are truncated', () => {
+  it('keeps the report entry without links to removed detail sections', () => {
     const onOpenDetails = vi.fn();
     const report = usageReport({
       tools: Array.from({ length: 4 }, (_, index) => ({
@@ -786,20 +760,15 @@ describe('Session usage report UI components', () => {
       />
     );
 
-    expect(container.textContent).toContain('View all 4');
-    expect(container.textContent).toContain('View all 5');
+    expect(container.textContent).not.toContain('View all 4');
+    expect(container.textContent).not.toContain('View all 5');
 
-    const toolsButton = container.querySelector('button[aria-label="Open Tools details"]');
-    act(() => {
-      toolsButton?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(onOpenDetails).toHaveBeenCalledWith(report, 'tools');
+    expect(container.querySelector('button[aria-label="Open Tools details"]')).toBeNull();
 
-    const filesButton = container.querySelector('button[aria-label="Open Files details"]');
-    act(() => {
-      filesButton?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(onOpenDetails).toHaveBeenCalledWith(report, 'files');
+    expect(container.querySelector('button[aria-label="Open Files details"]')).toBeNull();
+    const reportButton = container.querySelector<HTMLButtonElement>('button[aria-label="Open details"]')!;
+    act(() => reportButton.click());
+    expect(onOpenDetails).toHaveBeenCalledWith(report);
   });
 
   it('uses semantic file diff colors on the chat card summary', () => {
@@ -871,7 +840,7 @@ describe('Session usage report UI components', () => {
     expect(refWarnings).toEqual([]);
   });
 
-  it('syncs path redaction between the chat card and detail panel', async () => {
+  it('keeps the card path preference in the panel without a panel redaction control', async () => {
     const report = usageReport({
       workspace: {
         kind: 'local',
@@ -912,7 +881,9 @@ describe('Session usage report UI components', () => {
     const redactionInputs = Array.from(container.querySelectorAll<HTMLInputElement>(
       `input[aria-label="Redact paths"]`
     ));
-    expect(redactionInputs).toHaveLength(2);
+    expect(redactionInputs).toHaveLength(1);
+    expect(container.querySelector('.session-usage-panel input[aria-label="Redact paths"]')).toBeNull();
+    expect(container.querySelector('.session-usage-panel__summary-facts dd')?.textContent).toBe('openbitfun');
     expect(redactionInputs.every(input => input.checked)).toBe(true);
     expect(redactionInputs.every(input => input.labels?.length === 1)).toBe(true);
     expect(redactionInputs.every(input => input.closest('label')?.getAttribute('data-appearance') === 'native')).toBe(true);
@@ -938,11 +909,12 @@ describe('Session usage report UI components', () => {
       `input[aria-label="Redact paths"]`
     ));
     expect(updatedInputs.every(input => input.checked)).toBe(false);
+    expect(container.querySelector('.session-usage-panel__summary-facts dd')?.textContent).toBe('openbitfun');
     expect(container.textContent).toContain('D:/workspace/openbitfun');
     expect(container.querySelector('[data-tooltip="src/private/secret.ts"]')).not.toBeNull();
     await act(async () => copy?.click());
     expect(navigator.clipboard.writeText).toHaveBeenLastCalledWith('## Session Usage: D:/workspace/openbitfun/src/private/secret.ts');
-    act(() => updatedInputs[1]?.labels?.[0].click());
+    act(() => updatedInputs[0]?.labels?.[0].click());
     expect(updatedInputs.every(input => input.checked)).toBe(true);
     expect(preferenceWrite).toHaveBeenCalledTimes(2);
     expect(preferenceWrite).toHaveBeenLastCalledWith(USAGE_EXPORT_REDACT_PATHS_STORAGE_KEY, 'true');
@@ -975,39 +947,17 @@ describe('Session usage report UI components', () => {
     expect(container.textContent).not.toContain('Unavailable Token');
   });
 
-  it('keeps the detail coverage badge in the header action area', () => {
+  it('uses standard report components without global coverage notices', () => {
     render(<SessionUsagePanel report={usageReport()} markdown="## Session Usage" />);
 
-    const headerActions = container.querySelector('.session-usage-panel__header-actions');
-    expect(headerActions?.querySelector('.session-usage-panel__badge')?.textContent).toBe('Partial data');
-    expect(container.querySelector('.session-usage-panel__title-wrap .session-usage-panel__badge')).toBeNull();
-  });
-
-  it('explains error examples on the detail panel', () => {
-    const report = usageReport({
-      errors: {
-        totalErrors: 2,
-        toolErrors: 1,
-        modelErrors: 1,
-        examples: [
-          { label: 'Write', count: 1, redacted: false },
-          { label: 'Model/runtime turn errors', count: 1, redacted: false },
-        ],
-      },
-    });
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" />);
-
-    const errorsTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Errors');
-    act(() => {
-      errorsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).toContain('Tool errors');
-    expect(container.textContent).toContain('Model errors');
-    expect(container.querySelector('[data-tooltip="Safe grouped label for an error type."]')).not.toBeNull();
-    expect(container.querySelector('[data-tooltip="Number of matching errors."]')).not.toBeNull();
+    expect(container.textContent).not.toContain('Partial data');
+    expect(container.textContent).not.toContain('Some metrics were not reported');
+    expect(container.querySelectorAll('[data-openbitfun-component="page-header"]')).toHaveLength(3);
+    expect(container.querySelector('.session-usage-panel__explorer-heading')).toBeNull();
+    expect(container.querySelector('[role="tablist"]')).toBeNull();
+    expect(container.querySelector('[role="tabpanel"]')).toBeNull();
+    expect(container.querySelector('[data-openbitfun-product-part="root"]')?.getAttribute('data-openbitfun-component')).toBe('scroll-area');
+    expect(container.querySelector('button[aria-label="Copy Markdown"]')).not.toBeNull();
   });
 
   it('shows an immediate usage loading card before report data exists', () => {
@@ -1024,148 +974,292 @@ describe('Session usage report UI components', () => {
     expect(container.textContent).not.toContain('Unknown values are not counted as zero');
   });
 
-  it('switches panel sections and keeps raw sensitive details redacted', () => {
-    render(<SessionUsagePanel report={usageReport()} markdown="## Session Usage" />);
-
-    const tablist = container.querySelector('[role="tablist"]');
-    expect(tablist?.getAttribute('aria-label')).toBe('Usage report sections');
-    expect(container.querySelector('[role="tabpanel"]')?.getAttribute('aria-labelledby'))
-      .toBe('session-usage-tab-overview');
+  it('groups cached and uncached input under input and places token usage before context', () => {
+    render(<SessionUsagePanel sessionTitle="Product video" report={usageReport({
+      context: { systemPrompt: 40, toolDefinitions: 20, rules: 20, skills: 10, mcpTools: 10,
+        subagentDefinitions: 10, summarizedConversation: 10, conversation: 80, contextWindow: 1000 },
+      tokens: { source: 'token_usage_records', inputTokens: 80, outputTokens: 20, totalTokens: 100, cachedTokens: 60, cacheCoverage: 'available', cacheHitRate: 0.99 },
+    })} />);
+    expect(container.querySelector('.session-usage-panel__title')?.textContent).toBe('Product video');
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+    expect(container.querySelector('.session-usage-panel__donut-label strong')?.textContent).toBe('200');
+    expect(container.querySelectorAll('.session-usage-panel__donut-segment')).toHaveLength(8);
+    const contextShares = Array.from(container.querySelectorAll('.session-usage-panel__donut-segment'))
+      .map(segment => Number(segment.getAttribute('stroke-dasharray')?.split(' ')[0]));
+    expect(contextShares.reduce((sum, share) => sum + share, 0)).toBeCloseTo(100);
+    const tokenSection = container.querySelector('.session-usage-panel__tokens');
+    const tokenShares = Array.from(tokenSection!.querySelectorAll<HTMLElement>('.session-usage-panel__bar-segment'))
+      .map(segment => Number(segment.style.flexGrow));
+    [0.75, 0.25, 1].forEach((share, index) => expect(tokenShares[index]).toBeCloseTo(share));
+    const groups = Array.from(tokenSection!.querySelectorAll<HTMLElement>('.session-usage-panel__bar-group'));
+    expect(groups.map(group => Number(group.style.flexGrow))).toEqual([0.8, 0.2]);
+    expect(Array.from(groups[0].children).map(segment => segment.getAttribute('data-usage-category'))).toEqual(['cachedInput', 'uncachedInput']);
+    expect(Array.from(groups[1].children).map(segment => segment.getAttribute('data-usage-category'))).toEqual(['output']);
+    expect(tokenSection?.querySelector('[data-usage-category="input"] dd')?.textContent).toContain('80');
+    expect(tokenSection?.textContent).toContain('Input (uncached)');
+    const cacheSummary = tokenSection?.querySelector('[data-usage-cache-summary]');
+    expect(cacheSummary?.textContent).toBe('(cache hit 75%)');
+    expect(cacheSummary?.closest('.session-usage-panel__legend-share')?.textContent).toBe('80%(cache hit 75%)');
+    expect(tokenSection?.querySelector('.session-usage-panel__token-legend [data-usage-category="input"]')?.querySelectorAll('dd')).toHaveLength(1);
+    expect(cacheSummary?.closest('[data-usage-category]')?.getAttribute('data-usage-category')).toBe('input');
+    expect(cacheSummary?.closest('[data-tooltip]')?.getAttribute('data-tooltip')).toContain('Cache hit rate 75% (60 / 80 input tokens)');
+    expect(tokenSection?.querySelector('.session-usage-panel__cache-legend [data-usage-category="cachedInput"] strong')?.textContent).toBe('75%');
+    expect(tokenSection?.querySelector('.session-usage-panel__cache-legend [data-usage-category="uncachedInput"] strong')?.textContent).toBe('25%');
+    expect(tokenSection?.querySelector('.session-usage-panel__cache-legend [data-usage-category="cachedInput"] [data-tooltip]')?.getAttribute('data-tooltip')).toContain('60 / 80 input tokens (75% of input)');
+    expect(tokenSection?.querySelector('svg')).toBeNull();
+    expect(container.querySelector('.session-usage-panel__summary')).toBe(tokenSection);
+  });
 
-    for (const tab of ['Models', 'Tools', 'Files', 'Errors']) {
-      const tabButton = Array.from(container.querySelectorAll('[role="tab"]'))
-        .find(button => button.textContent === tab);
-      act(() => {
-        tabButton?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-      });
-      expect(tabButton?.getAttribute('aria-selected')).toBe('true');
-      expect(container.textContent).toContain(tab);
+  it('does not draw invented distribution segments for missing or inconsistent token counts', () => {
+    for (const tokens of [
+      { totalTokens: 100, outputTokens: 20 },
+      { totalTokens: 100, inputTokens: 90, outputTokens: 20 },
+      { totalTokens: 100, inputTokens: Number.NaN, outputTokens: 20 },
+    ]) {
+      render(<SessionUsagePanel report={usageReport({
+        tokens: { source: 'token_usage_records', cacheCoverage: 'unavailable', ...tokens },
+      })} />);
+      expect(container.querySelectorAll('.session-usage-panel__donut-segment')).toHaveLength(0);
+      expect(container.querySelectorAll('.session-usage-panel__bar-segment')).toHaveLength(0);
+      expect(container.querySelector('.session-usage-panel__tokens .session-usage-panel__section-help')).not.toBeNull();
     }
-
-    expect(container.textContent).toContain('Redacted');
-    expect(container.textContent).not.toContain('secret shell command output');
-    expect(container.textContent).not.toContain('secrets/raw-file-content.txt');
-    expect(container.textContent).not.toContain('raw provider error with secret payload');
   });
 
-  it('shows model duration only when model span facts exist', () => {
-    render(<SessionUsagePanel report={usageReport()} markdown="## Session Usage" />);
-
-    const modelTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
-    act(() => {
-      modelTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+  it.each(['systemPrompt', 'toolDefinitions', 'rules', 'skills', 'mcpTools', 'subagentDefinitions'])('loads %s only after its icon is clicked and keeps the chart focus linked', async category => {
+    let finish: (result: string) => void = () => {};
+    promptPreviewMocks.open.mockReturnValue(new Promise(resolve => { finish = resolve; }));
+    render(<SessionUsagePanel workspaceId="workspace-1" report={usageReport({
+      context: { systemPrompt: 40, toolDefinitions: 20, rules: 20, skills: 10, mcpTools: 10,
+        subagentDefinitions: 10, summarizedConversation: 10, conversation: 80 },
+    })} />);
+    expect(promptPreviewMocks.open).not.toHaveBeenCalled();
+    const button = container.querySelector<HTMLButtonElement>(`.session-usage-panel__legend-row[data-usage-category="${category}"] button`)!;
+    expect(button.getAttribute('data-openbitfun-component')).toBe('icon-button');
+    act(() => { button.focus(); button.click(); });
+    expect(button.disabled).toBe(true);
+    expect(promptPreviewMocks.open).toHaveBeenCalledExactlyOnceWith({
+      sessionId: 'session-1', reportSessionId: 'session-1', workspaceId: 'workspace-1', title: `usage.context.categories.${category}${category === 'toolDefinitions' ? '' : '.md'}`, category, emptyContent: 'usage.context.previewEmpty',
     });
+    expect(container.querySelector('.session-usage-panel__donut-segment[data-usage-category="conversation"]')?.hasAttribute('data-usage-muted')).toBe(true);
+    await act(async () => finish('unavailable'));
+    expect(button.disabled).toBe(false);
+    expect(promptPreviewMocks.warning).toHaveBeenCalledWith('usage.context.previewUnavailable');
+    promptPreviewMocks.open.mockRejectedValueOnce(new Error('Host offline'));
+    await act(async () => button.click());
+    expect(promptPreviewMocks.error).toHaveBeenCalledWith('usage.context.previewFailed');
+  });
 
-    expect(container.textContent).toContain('Recorded time');
-    expect(container.textContent).toContain(formatDuration(40000));
-
-    const reportWithoutModelDuration = usageReport({
-      models: [
-        {
-          modelId: 'gpt-5.4',
-          callCount: 1,
-          inputTokens: 1200,
-          outputTokens: 300,
-          totalTokens: 1500,
-          durationMs: undefined,
-        },
-      ],
-    });
+  it.each([
+    ['context', 'donut-segment', 'systemPrompt'],
+    ['context', 'legend-row', 'conversation'],
+    ['tokens', 'bar-group', 'input'],
+    ['tokens', 'legend-row', 'output'],
+  ])('links %s %s hover to its legend and restores peers on leave', (section, part, category) => {
+    render(<SessionUsagePanel report={usageReport({
+      context: { systemPrompt: 40, toolDefinitions: 20, rules: 20, skills: 10, mcpTools: 10,
+        subagentDefinitions: 10, summarizedConversation: 10, conversation: 80 },
+      tokens: { source: 'token_usage_records', inputTokens: 80, outputTokens: 20, totalTokens: 100,
+        cachedTokens: 60, cacheCoverage: 'available' },
+    })} />);
+    const chart = container.querySelector(`.session-usage-panel__${section}`)!;
+    const target = chart.querySelector(`.session-usage-panel__${part}[data-usage-category="${category}"]`)!;
+    const centerValue = container.querySelector('.session-usage-panel__donut-label strong')!;
+    const centerLabel = container.querySelector('.session-usage-panel__donut-label span')!;
+    expect(centerValue.textContent).toBe('200');
 
-    render(<SessionUsagePanel report={reportWithoutModelDuration} markdown="## Session Usage" />);
-    const modelTabWithoutDuration = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
     act(() => {
-      modelTabWithoutDuration?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).not.toContain('Recorded time');
-    expect(container.textContent).not.toContain('Timing not recorded');
-  });
-
-  it('hides unavailable tool execution timing and uses explicit tool timing headers', () => {
-    const report = usageReport({
-      tools: [
-        {
-          toolName: 'read_file',
-          category: 'file',
-          callCount: 3,
-          successCount: 3,
-          errorCount: 0,
-          durationMs: undefined,
-          p95DurationMs: undefined,
-          executionMs: undefined,
-          redacted: false,
-        },
-      ],
+      target.dispatchEvent(new dom.window.MouseEvent('mouseover', { bubbles: true }));
     });
 
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" />);
+    for (const item of chart.querySelectorAll('[data-usage-category]')) {
+      const active = item.getAttribute('data-usage-category') === category || item.getAttribute('data-usage-parent') === category;
+      expect(item.hasAttribute('data-usage-muted')).toBe(!active);
+      expect(item.hasAttribute('data-usage-active')).toBe(active);
+    }
+    const otherChart = container.querySelector(`.session-usage-panel__${section === 'context' ? 'tokens' : 'context'}`)!;
+    expect(otherChart.querySelector('[data-usage-muted]')).toBeNull();
+    expect(centerValue.textContent).toBe(section === 'context' ? category === 'systemPrompt' ? '20%' : '40%' : '200');
+    expect(centerLabel.textContent).toBe(section === 'context' ? `usage.context.categories.${category}` : 'usage.context.estimatedTokens');
 
-    const toolsTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Tools');
     act(() => {
-      toolsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+      target.dispatchEvent(new dom.window.MouseEvent('mouseout', { bubbles: true, relatedTarget: dom.window.document.body }));
     });
-
-    expect(container.textContent).toContain('Total time');
-    expect(container.textContent).toContain('P95 total');
-    expect(container.textContent).not.toContain('Execution time');
-
-    const missingValues = container.querySelectorAll('.session-usage-panel__missing-value');
-    expect(missingValues).toHaveLength(2);
-    expect(Array.from(missingValues).every(value => value.textContent === 'Timing not recorded')).toBe(true);
+    expect(container.querySelector('[data-usage-muted]')).toBeNull();
+    expect(container.querySelector('[data-usage-active]')).toBeNull();
+    expect(centerValue.textContent).toBe('200');
+    expect(centerLabel.textContent).toBe('usage.context.estimatedTokens');
   });
 
-  it('supports standard keyboard navigation across usage panel tabs', () => {
-    render(<SessionUsagePanel report={usageReport()} markdown="## Session Usage" />);
-
-    const overviewTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-overview');
-    act(() => {
-      overviewTab?.focus();
-      overviewTab?.dispatchEvent(new dom.window.KeyboardEvent('keydown', {
-        key: 'End',
-        bubbles: true,
-      }));
-    });
+  it('restores the focused legend highlight after hover and clears it on blur', () => {
+    render(<SessionUsagePanel report={usageReport({
+      context: { systemPrompt: 40, toolDefinitions: 20, rules: 20, skills: 10, mcpTools: 10,
+        subagentDefinitions: 10, summarizedConversation: 10, conversation: 80 },
+      tokens: { source: 'token_usage_records', inputTokens: 80, outputTokens: 20, totalTokens: 100,
+        cachedTokens: 60, cacheCoverage: 'available' },
+    })} />);
+    const inputLegend = container.querySelector<HTMLElement>('.session-usage-panel__legend-row[data-usage-category="input"]')!;
+    const outputSegment = container.querySelector('.session-usage-panel__bar-segment[data-usage-category="output"]')!;
+    expect(inputLegend.tabIndex).toBe(0);
+    act(() => inputLegend.focus());
+    expect(outputSegment.hasAttribute('data-usage-muted')).toBe(true);
+    expect(inputLegend.hasAttribute('data-usage-muted')).toBe(false);
+    expect(inputLegend.hasAttribute('data-usage-active')).toBe(true);
+
+    act(() => outputSegment.dispatchEvent(new dom.window.MouseEvent('mouseover', { bubbles: true })));
+    expect(outputSegment.hasAttribute('data-usage-muted')).toBe(false);
+    expect(inputLegend.hasAttribute('data-usage-muted')).toBe(true);
+    expect(inputLegend.hasAttribute('data-usage-active')).toBe(false);
+    act(() => outputSegment.dispatchEvent(new dom.window.MouseEvent('mouseout', { bubbles: true, relatedTarget: dom.window.document.body })));
+    expect(outputSegment.hasAttribute('data-usage-muted')).toBe(true);
+    expect(inputLegend.hasAttribute('data-usage-muted')).toBe(false);
+    expect(inputLegend.hasAttribute('data-usage-active')).toBe(true);
+    act(() => inputLegend.blur());
+    expect(container.querySelector('[data-usage-muted]')).toBeNull();
+    expect(container.querySelector('[data-usage-active]')).toBeNull();
+
+    const conversationLegend = container.querySelector<HTMLElement>('.session-usage-panel__legend-row[data-usage-category="conversation"]')!;
+    const systemSegment = container.querySelector('.session-usage-panel__donut-segment[data-usage-category="systemPrompt"]')!;
+    const centerValue = container.querySelector('.session-usage-panel__donut-label strong')!;
+    act(() => conversationLegend.focus());
+    expect(centerValue.textContent).toBe('40%');
+    act(() => systemSegment.dispatchEvent(new dom.window.MouseEvent('mouseover', { bubbles: true })));
+    expect(centerValue.textContent).toBe('20%');
+    act(() => systemSegment.dispatchEvent(new dom.window.MouseEvent('mouseout', { bubbles: true, relatedTarget: dom.window.document.body })));
+    expect(centerValue.textContent).toBe('40%');
+    act(() => conversationLegend.blur());
+    expect(centerValue.textContent).toBe('200');
+  });
 
-    const slowestTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-slowest');
-    expect(slowestTab?.getAttribute('aria-selected')).toBe('true');
-    expect(dom.window.document.activeElement).toBe(slowestTab);
+  it('plots recorded cache hits with a lower bound for partial telemetry and leaves unknown cache unsplit', () => {
+    for (const cacheCoverage of ['partial', 'unavailable'] as const) {
+      render(<SessionUsagePanel report={usageReport({
+        tokens: { source: 'token_usage_records', inputTokens: 80, outputTokens: 20, totalTokens: 100,
+          cachedTokens: 60, cacheCoverage, cacheHitRate: 0.8 },
+      })} />);
+      expect(container.querySelector('.session-usage-panel__context')?.textContent).toContain('No context breakdown recorded');
+      expect(container.querySelector('.session-usage-panel__donut')).toBeNull();
+      if (cacheCoverage === 'partial') {
+        const cachedSegment = container.querySelector<HTMLElement>('.session-usage-panel__bar-segment[data-usage-category="cachedInput"]');
+        expect(container.querySelectorAll('.session-usage-panel__bar-segment')).toHaveLength(3);
+        expect(Number(cachedSegment?.style.flexGrow)).toBeCloseTo(0.75);
+        const cacheLegend = container.querySelector('.session-usage-panel__cache-legend');
+        expect(cacheLegend?.textContent).toContain('Recorded cache hits75%');
+        expect(cacheLegend?.textContent).toContain('Remaining input25%');
+        expect(cacheLegend?.textContent).not.toContain('Input (uncached)');
+      } else {
+        expect(container.querySelectorAll('.session-usage-panel__bar-segment')).toHaveLength(2);
+        expect(container.querySelector<HTMLElement>('.session-usage-panel__bar-segment[data-usage-category="input"]')?.style.flexGrow).toBe('1');
+        expect(container.querySelector('.session-usage-panel__bar-segment[data-usage-parent="input"]')).toBeNull();
+      }
+      expect(container.querySelector('.session-usage-panel__tokens')?.textContent).not.toContain('Cache hit rate');
+      const cacheSummary = container.querySelector<HTMLElement>('[data-usage-cache-summary]')!;
+      expect(cacheSummary.textContent).toBe(cacheCoverage === 'partial' ? '(cache hit ≥75%)' : '(cache unavailable)');
+      if (cacheCoverage === 'partial') {
+        expect(cacheSummary.closest('[data-tooltip]')?.getAttribute('data-tooltip')).toContain('lower bound over all input tokens');
+      }
+      expect(cacheSummary.querySelector('.session-usage-panel__swatch, [tabindex]')).toBeNull();
+      act(() => cacheSummary.dispatchEvent(new dom.window.MouseEvent('mouseover', { bubbles: true })));
+      expect(container.querySelector('.session-usage-panel__token-legend [data-usage-category="input"]')?.hasAttribute('data-usage-active')).toBe(true);
+      act(() => cacheSummary.dispatchEvent(new dom.window.MouseEvent('mouseout', { bubbles: true, relatedTarget: dom.window.document.body })));
+      expect(container.querySelector('[data-usage-muted]')).toBeNull();
+    }
+  });
 
-    act(() => {
-      slowestTab?.dispatchEvent(new dom.window.KeyboardEvent('keydown', {
-        key: 'ArrowLeft',
-        bubbles: true,
-      }));
-    });
+  it.each([
+    { input: 80, cached: 0, rate: '≥0%' },
+    { input: 80, cached: 80, rate: '100%' },
+    { input: 99, cached: 60, rate: '≥60%' },
+    { input: 100, cached: 58, rate: '≥58%' },
+    { input: 1000, cached: 999, rate: '≥99%' },
+    { input: 0, cached: 0, rate: undefined },
+    { input: 80, cached: 81, rate: undefined },
+    { input: 80, cached: undefined, rate: undefined },
+  ])('keeps partial cache bounds conservative without inventing missing counts: $input/$cached', ({ input, cached, rate }) => {
+    render(<SessionUsagePanel report={usageReport({
+      tokens: { source: 'token_usage_records', inputTokens: input, outputTokens: 20, totalTokens: input + 20,
+        cachedTokens: cached, cacheCoverage: 'partial', cacheHitRate: 0.95 },
+    })} />);
+    const summary = container.querySelector('[data-usage-cache-summary]')?.textContent;
+    expect(summary).toBe(rate ? `(cache hit ${rate})` : '(cache unavailable)');
+    const cacheSegments = container.querySelectorAll<HTMLElement>('.session-usage-panel__bar-segment[data-usage-parent="input"]');
+    if (rate) {
+      expect(Array.from(cacheSegments).reduce((sum, segment) => sum + Number(segment.style.flexGrow), 0)).toBeCloseTo(1);
+    } else {
+      expect(cacheSegments).toHaveLength(0);
+      expect(container.querySelector('.session-usage-panel__cache-legend')).toBeNull();
+    }
+  });
 
-    const errorsTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-errors');
-    expect(errorsTab?.getAttribute('aria-selected')).toBe('true');
-    expect(dom.window.document.activeElement).toBe(errorsTab);
+  it('links a cache child to its parent and restores the focused input group after hover', () => {
+    render(<SessionUsagePanel report={usageReport({
+      tokens: { source: 'token_usage_records', inputTokens: 80, outputTokens: 20, totalTokens: 100,
+        cachedTokens: 60, cacheCoverage: 'available' },
+    })} />);
+    const input = container.querySelector<HTMLElement>('.session-usage-panel__token-legend [data-usage-category="input"]')!;
+    const cached = container.querySelector('.session-usage-panel__bar-segment[data-usage-category="cachedInput"]')!;
+    const uncached = container.querySelector('.session-usage-panel__bar-segment[data-usage-category="uncachedInput"]')!;
+    const cacheLegend = container.querySelector<HTMLElement>('.session-usage-panel__cache-legend [data-usage-category="cachedInput"]')!;
+    act(() => input.focus());
+    expect(cached.hasAttribute('data-usage-active')).toBe(true);
+    expect(uncached.hasAttribute('data-usage-active')).toBe(true);
+    act(() => cached.dispatchEvent(new dom.window.MouseEvent('mouseover', { bubbles: true })));
+    expect(input.hasAttribute('data-usage-active')).toBe(true);
+    expect(cacheLegend.hasAttribute('data-usage-active')).toBe(true);
+    expect(uncached.hasAttribute('data-usage-muted')).toBe(true);
+    act(() => cached.dispatchEvent(new dom.window.MouseEvent('mouseout', { bubbles: true, relatedTarget: dom.window.document.body })));
+    expect(uncached.hasAttribute('data-usage-active')).toBe(true);
+    act(() => cacheLegend.focus());
+    expect(input.hasAttribute('data-usage-active')).toBe(true);
+    expect(uncached.hasAttribute('data-usage-muted')).toBe(true);
+    act(() => cacheLegend.blur());
+    expect(container.querySelector('[data-usage-muted]')).toBeNull();
+  });
 
-    for (const [key, expected] of [
-      ['Home', 'overview'], ['ArrowLeft', 'slowest'], ['ArrowRight', 'overview'], ['End', 'slowest'],
-    ]) {
-      const event = new dom.window.KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
-      act(() => dom.window.document.activeElement?.dispatchEvent(event));
-      expect(event.defaultPrevented).toBe(true);
-      expect(dom.window.document.activeElement?.id).toBe(`session-usage-tab-${expected}`);
-      expect(container.querySelectorAll('[role="tab"][tabindex="0"]')).toHaveLength(1);
-      expect(container.querySelector('[role="tabpanel"]')?.getAttribute('aria-labelledby'))
-        .toBe(`session-usage-tab-${expected}`);
+  it.each([
+    { input: 80, output: 20, cached: 0, segments: ['uncachedInput', 'output'], rate: '0%' },
+    { input: 80, output: 20, cached: 80, segments: ['cachedInput', 'output'], rate: '100%' },
+    { input: 99, output: 1, cached: 60, segments: ['cachedInput', 'uncachedInput', 'output'], rate: '61%' },
+    { input: 1, output: 99, cached: 1, segments: ['cachedInput', 'output'], rate: '100%' },
+    { input: 100, output: 0, cached: 60, segments: ['cachedInput', 'uncachedInput'], rate: '60%' },
+    { input: 0, output: 100, cached: 0, segments: ['output'], rate: undefined },
+    { input: 80, output: 20, cached: 81, segments: ['input', 'output'], rate: undefined },
+    { input: 0, output: 0, cached: 0, segments: [], rate: undefined },
+  ])('handles zero/full/invalid cache counts without invented segments: $input/$output/$cached', ({ input, output, cached, segments, rate }) => {
+    render(<SessionUsagePanel report={usageReport({
+      tokens: { source: 'token_usage_records', inputTokens: input, outputTokens: output, totalTokens: input + output,
+        cachedTokens: cached, cacheCoverage: 'available' },
+    })} />);
+    const bars = Array.from(container.querySelectorAll<HTMLElement>('.session-usage-panel__bar-segment'));
+    expect(bars.map(bar => bar.getAttribute('data-usage-category'))).toEqual(segments);
+    expect(bars.every(bar => Number.isFinite(Number(bar.style.flexGrow)) && Number(bar.style.flexGrow) > 0)).toBe(true);
+    for (const group of container.querySelectorAll<HTMLElement>('.session-usage-panel__bar-group')) {
+      const childShare = Array.from(group.querySelectorAll<HTMLElement>('.session-usage-panel__bar-segment'))
+        .reduce((sum, segment) => sum + Number(segment.style.flexGrow), 0);
+      expect(childShare).toBeCloseTo(1);
+      const parentShare = Number(group.style.flexGrow);
+      expect(parentShare).toBeCloseTo((group.dataset.usageCategory === 'input' ? input : output) / (input + output));
     }
+    const summary = container.querySelector('[data-usage-cache-summary]')?.textContent;
+    if (rate) expect(summary).toBe(`(cache hit ${rate})`);
+    else expect(summary).not.toContain('%');
   });
 
-  it('preserves initial-tab updates and saved appearance selectors on the native tabs', () => {
+  it('shows loading and error states inside the panel', () => {
+    render(<SessionUsagePanel isLoading />);
+    expect(container.querySelector('[role="status"]')?.textContent).toContain('Generating usage report');
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+    render(<SessionUsagePanel error="Host offline" />);
+    expect(container.textContent).toContain('Host offline');
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it('preserves saved header appearance and accepts old panel destinations after removing details', () => {
     const legacyPackage: AppearancePackage = {
       schema: 'openbitfun.appearance', schemaVersion: APPEARANCE_SCHEMA_VERSION,
-      id: 'test.usage-tabs', name: 'Usage tabs', version: '1.0.0', mode: 'dark',
-      components: { 'session-usage-panel': { parts: { tab: { contexts: [{
-        when: { facets: { tab: 'models' }, states: ['active'] },
-        style: { opacity: { kind: 'number', value: 0.6 } },
-      }] } } } },
+      id: 'test.usage-header', name: 'Usage header', version: '1.0.0', mode: 'dark',
+      components: { 'session-usage-panel': { parts: {
+        header: { base: { opacity: { kind: 'number', value: 0.6 } } },
+      } } },
     };
     const serialized = JSON.stringify(legacyPackage);
     const restored = JSON.parse(serialized) as AppearancePackage;
@@ -1183,185 +1277,29 @@ describe('Session usage report UI components', () => {
     expect(rule).toBeDefined();
 
     const report = usageReport();
-    render(<SessionUsagePanel report={report} initialTab="models" />);
-    const modelsTab = container.querySelector('#session-usage-tab-models');
-    expect(container.querySelector('[role="tablist"]')?.getAttribute('data-openbitfun-component')).toBe('tab-group');
-    expect(modelsTab?.getAttribute('data-openbitfun-part')).toBe('tab');
-    expect(document.querySelector(rule!.selectorText)).toBe(modelsTab);
-    render(<SessionUsagePanel report={report} initialTab="files" />);
-    expect(document.querySelector(rule!.selectorText)).toBeNull();
-    expect(container.querySelector('[role="tabpanel"]')?.id).toBe('session-usage-panel-files');
-    act(() => modelsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })));
-    expect(document.querySelector(rule!.selectorText)).toBe(modelsTab);
-  });
-
-  it('follows the shared tab direction in RTL layouts', () => {
-    render(<SessionUsagePanel report={usageReport()} />);
-    container.querySelectorAll<HTMLElement>('[role="tab"]').forEach(tab => { tab.style.direction = 'rtl'; });
-    const overviewTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-overview')!;
-    act(() => {
-      overviewTab.focus();
-      overviewTab.dispatchEvent(new dom.window.KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    });
-    expect(dom.window.document.activeElement?.id).toBe('session-usage-tab-slowest');
-    expect(container.querySelector('#session-usage-tab-slowest')?.getAttribute('aria-selected')).toBe('true');
-  });
-
-  it('caps long usage tables and allows explicit expansion', () => {
-    const tools = Array.from({ length: 55 }, (_, index) => ({
-      toolName: `Tool ${index + 1}`,
-      category: 'other' as const,
-      callCount: 1,
-      successCount: 1,
-      errorCount: 0,
-      durationMs: 1000,
-      p95DurationMs: 1000,
-      executionMs: 1000,
-      redacted: false,
-    }));
-
-    render(<SessionUsagePanel report={usageReport({ tools })} markdown="## Session Usage" />);
-
-    const toolsTab = Array.from(container.querySelectorAll('[role="tab"]'))
-      .find(button => button.textContent === 'Tools');
-    act(() => {
-      toolsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.querySelectorAll('tbody tr')).toHaveLength(50);
-    expect(container.textContent).toContain('Showing 50 of 55 rows');
-    expect(container.textContent).not.toContain('Tool 55');
-
-    const showAll = Array.from(container.querySelectorAll('button'))
-      .find(button => button.textContent === 'Show all 55 rows');
-    act(() => {
-      showAll?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.querySelectorAll('tbody tr')).toHaveLength(55);
-    expect(container.textContent).toContain('Tool 55');
-    act(() => toolsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })));
-    expect(container.querySelectorAll('tbody tr')).toHaveLength(55);
-  });
-
-  it('links model tool and error aggregate rows to representative transcript anchors', () => {
-    const report = usageReport({
-      models: [
-        {
-          modelId: 'gpt-5.4',
-          callCount: 1,
-          totalTokens: 120,
-          durationMs: 12_000,
-          sampleTurnId: 'turn-2',
-          sampleTurnIndex: 1,
-        },
-      ],
-      tools: [
-        {
-          toolName: 'write_file',
-          category: 'file',
-          callCount: 1,
-          successCount: 1,
-          errorCount: 0,
-          durationMs: 2_000,
-          sampleTurnId: 'turn-3',
-          sampleTurnIndex: 2,
-          sampleItemId: 'tool-3',
-          redacted: false,
-        },
-      ],
-      errors: {
-        totalErrors: 1,
-        toolErrors: 1,
-        modelErrors: 0,
-        examples: [
-          {
-            label: 'write_file',
-            count: 1,
-            sampleTurnId: 'turn-4',
-            sampleTurnIndex: 3,
-            sampleItemId: 'tool-4',
-            redacted: false,
-          },
-        ],
-      },
-    });
-    const focusEvents: FlowChatFocusItemRequest[] = [];
-    const unsubscribe = globalEventBus.on<FlowChatFocusItemRequest>(
-      FLOWCHAT_FOCUS_ITEM_EVENT,
-      event => focusEvents.push(event),
-    );
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" sessionId="session-1" />);
-
-    const modelsTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
-    act(() => {
-      modelsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    const modelAnchor = container.querySelector<HTMLButtonElement>('.session-usage-panel__row-anchor-link');
-    expect(modelAnchor?.textContent).toContain('gpt-5.4');
-    act(() => {
-      modelAnchor?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    const toolsTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Tools');
-    act(() => {
-      toolsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    const toolAnchor = container.querySelector<HTMLButtonElement>('.session-usage-panel__row-anchor-link');
-    expect(toolAnchor?.textContent).toContain('write_file');
-    act(() => {
-      toolAnchor?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    const errorsTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Errors');
-    act(() => {
-      errorsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    const errorAnchor = container.querySelector<HTMLButtonElement>('.session-usage-panel__row-anchor-link');
-    expect(errorAnchor?.textContent).toContain('write_file');
-    act(() => {
-      errorAnchor?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(focusEvents).toEqual([
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-2',
-        turnIndex: 2,
-        source: 'usage-report',
-      },
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-3',
-        turnIndex: 3,
-        itemId: 'tool-3',
-        source: 'usage-report',
-      },
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-4',
-        turnIndex: 4,
-        itemId: 'tool-4',
-        source: 'usage-report',
-      },
-    ]);
-    unsubscribe();
-  });
-
-  it('opens the detail panel on a requested usage tab', () => {
-    render(<SessionUsagePanel report={usageReport()} markdown="## Session Usage" initialTab="files" />);
+    for (const initialTab of ['models', 'files'] as const) {
+      render(<SessionUsagePanel report={report} initialTab={initialTab} />);
+      expect(container.querySelector('[role="tablist"]')).toBeNull();
+      expect(container.querySelector('[role="tabpanel"]')).toBeNull();
+      expect(document.querySelector(rule!.selectorText)).toBe(container.querySelector('.session-usage-panel__header'));
+      expect(container.querySelector('.session-usage-panel__tokens')).not.toBeNull();
+    }
 
-    const filesTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Files');
-    expect(filesTab?.className).toContain('session-usage-panel__tab--active');
-    expect(container.textContent).toContain('File scope');
+    const retiredPackage: AppearancePackage = {
+      ...legacyPackage,
+      components: { 'session-usage-panel': { parts: {
+        tab: { base: { opacity: { kind: 'number', value: 0.6 } } },
+      } } },
+    };
+    const serializedRetired = JSON.stringify(retiredPackage);
+    const validation = appearancePackageValidator.validate(retiredPackage, registry);
+    expect(validation.errors).toEqual(expect.arrayContaining([
+      expect.objectContaining({ code: 'UNKNOWN_PART', path: 'components.session-usage-panel.parts.tab' }),
+    ]));
+    expect(JSON.stringify(retiredPackage)).toBe(serializedRetired);
   });
 
-  it('explains inferred legacy model labels on the card and detail panel', () => {
+  it('explains inferred legacy model labels on the card', () => {
     const report = usageReport({
       models: [
         {
@@ -1385,43 +1323,6 @@ describe('Session usage report UI components', () => {
 
     expect(container.textContent).toContain('gpt-5.4 (inferred)');
     expect(container.querySelector('[data-tooltip="Inferred from the session model setting."]')).not.toBeNull();
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" />);
-    const modelTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
-    act(() => {
-      modelTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).toContain('gpt-5.4 (inferred)');
-    expect(container.querySelector('[data-tooltip="Inferred from the session model setting."]')).not.toBeNull();
-  });
-
-  it('hides legacy model round placeholders in the detail panel', () => {
-    const report = usageReport({
-      models: [
-        {
-          modelId: 'model round 0',
-          callCount: 1,
-          inputTokens: undefined,
-          outputTokens: undefined,
-          totalTokens: undefined,
-          durationMs: 12_000,
-        },
-      ],
-    });
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" />);
-
-    const modelTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
-    act(() => {
-      modelTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).toContain('Legacy model not tracked');
-    expect(container.textContent).not.toContain('model round 0');
-    expect(container.querySelector('[data-tooltip="Older sessions did not store per-round model names."]')).not.toBeNull();
   });
 
   it('renders the runtime status entry as a lightweight usage trigger', () => {
@@ -1446,7 +1347,7 @@ describe('Session usage report UI components', () => {
     expect(container.querySelector('.session-runtime-status-entry')).toBeNull();
   });
 
-  it('shows copyable detail metadata and explains unavailable model/file metrics', async () => {
+  it('centers the session title and omits the timestamp and metadata section', () => {
     const report = usageReport({
       models: [
         {
@@ -1472,359 +1373,25 @@ describe('Session usage report UI components', () => {
         report={report}
         markdown="## Session Usage"
         sessionId="session-1"
+        sessionTitle="Usage report layout"
         workspacePath="D:/workspace/openbitfun"
       />
     );
 
-    expect(container.querySelectorAll('.session-usage-panel__meta-row')).toHaveLength(3);
-    const cacheCoverageHelp = Array.from(container.querySelectorAll('[data-tooltip]'))
+    const title = container.querySelector('.session-usage-panel__header h2');
+    expect(title?.textContent).toBe('Usage report layout');
+    expect(container.querySelector('.session-usage-panel__header')?.getAttribute('data-align')).toBe('center');
+    expect(container.querySelectorAll('time')).toHaveLength(0);
+    expect(container.querySelector('.session-usage-panel__metadata')).toBeNull();
+    expect(container.querySelector('.session-usage-panel__meta-row')).toBeNull();
+    expect(container.querySelector('[data-openbitfun-product-part="metaRow"]')).toBeNull();
+    expect(container.querySelector('button[aria-label="Copy session ID"]')).toBeNull();
+    expect(container.querySelector('.session-usage-panel__definition-list')).toBeNull();
+    const cacheCoverageHelp = Array.from(container.querySelectorAll('.session-usage-panel__legend-share [data-tooltip]'))
       .find(node => node.getAttribute('data-tooltip')?.includes('Total token counts are still shown'));
-    expect(cacheCoverageHelp?.textContent).toContain('Not reported');
-
-    const sessionCopy = container.querySelector('button[aria-label="Copy session ID"]');
-    await act(async () => {
-      sessionCopy?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('session-1');
-
-    const modelTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Models');
-    act(() => {
-      modelTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(container.textContent).toContain('glm-5.1');
-    expect(container.textContent).not.toContain('Timing not recorded');
-
-    const filesTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Files');
-    act(() => {
-      filesTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-    expect(container.textContent).toContain('No file changes');
-    const fileUnavailableHelp = Array.from(container.querySelectorAll('[data-tooltip]'))
-      .find(node => node.getAttribute('data-tooltip')?.includes('did not detect file changes'));
-    expect(fileUnavailableHelp).toBeTruthy();
-  });
-
-  it('keeps file diff actions visible and exposes full paths for long file rows', () => {
-    dom.window.localStorage.setItem(USAGE_EXPORT_REDACT_PATHS_STORAGE_KEY, 'false');
-    const longPath = 'src/web-ui/src/infrastructure/markdown/MarkdownRenderer.tsx';
-    const report = usageReport({
-      files: {
-        scope: 'snapshot_summary',
-        changedFiles: 1,
-        addedLines: 20,
-        deletedLines: 4,
-        files: [
-          {
-            pathLabel: longPath,
-            operationCount: 2,
-            addedLines: 20,
-            deletedLines: 4,
-            turnIndexes: [1],
-            operationIds: ['operation-1'],
-            redacted: false,
-          },
-        ],
-      },
-    });
-
-    render(
-      <SessionUsagePanel
-        report={report}
-        markdown="## Session Usage"
-        sessionId="session-1"
-        workspacePath="D:/workspace/openbitfun"
-      />
-    );
-
-    const filesTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Files');
-    act(() => {
-      filesTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.querySelector('.session-usage-panel__table--files')).not.toBeNull();
-    expect(container.querySelector(`[data-tooltip="${longPath}"]`)).not.toBeNull();
-    const pathCell = container.querySelector('.session-usage-panel__file-path-cell');
-    expect(pathCell?.textContent).toBe('.../markdown/MarkdownRenderer.tsx');
-    expect(pathCell?.textContent).not.toContain('src/web-ui/src/infrastructure');
-    expect(pathCell?.textContent).not.toBe(longPath);
-    expect(container.textContent).not.toContain('Operation IDs');
-    expect(container.textContent).not.toContain('operation-1');
-    expect(container.querySelector('.session-usage-panel__sticky-action-cell')).not.toBeNull();
-    expect(container.querySelector('.session-usage-panel__table-action')).not.toBeNull();
-  });
-
-  it('opens snapshot-backed file diffs from the detail panel', async () => {
-    // Snapshot IO is routed by the session's workspace ID; the path is only the operand.
-    flowChatStore.setState((): FlowChatState => ({
-      sessions: new Map([['session-1', {
-        sessionId: 'session-1',
-        title: 'Session 1',
-        dialogTurns: [],
-        status: 'idle',
-        config: { agentType: 'Standard' },
-        createdAt: 1,
-        lastActiveAt: 1,
-        error: null,
-        sessionKind: 'normal',
-        workspaceId: 'workspace-1',
-        workspacePath: 'D:/workspace/openbitfun',
-      } as Session]]),
-      activeSessionId: 'session-1',
-    }));
-    snapshotApiMocks.getOperationDiff.mockResolvedValue({
-      filePath: 'D:/workspace/openbitfun/src/main.rs',
-      originalContent: 'before',
-      modifiedContent: 'after',
-      anchorLine: 42,
-    });
-    const report = usageReport({
-      files: {
-        scope: 'snapshot_summary',
-        changedFiles: 1,
-        addedLines: 2,
-        deletedLines: 1,
-        files: [
-          {
-            pathLabel: 'src/main.rs',
-            operationCount: 1,
-            addedLines: 2,
-            deletedLines: 1,
-            turnIndexes: [1],
-            operationIds: ['operation-1'],
-            redacted: false,
-          },
-        ],
-      },
-    });
-
-    render(
-      <SessionUsagePanel
-        report={report}
-        markdown="## Session Usage"
-        sessionId="session-1"
-        workspacePath="D:/workspace/openbitfun"
-      />
-    );
-
-    const filesTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Files');
-    act(() => {
-      filesTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    const openDiffButton = container.querySelector('button[aria-label="Open diff"]');
-    expect(openDiffButton).not.toBeNull();
-
-    await act(async () => {
-      openDiffButton?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(snapshotApiMocks.getOperationDiff).toHaveBeenCalledWith(
-      'session-1',
-      'D:/workspace/openbitfun/src/main.rs',
-      'operation-1',
-    );
-    expect(tabUtilsMocks.createDiffEditorTab).toHaveBeenCalledWith(
-      'D:/workspace/openbitfun/src/main.rs',
-      'main.rs',
-      'before',
-      'after',
-      true,
-      'agent',
-      'D:/workspace/openbitfun',
-      42,
-      undefined,
-      {
-        titleKind: 'diff',
-        duplicateKeyPrefix: 'diff',
-        workspaceId: 'workspace-1',
-      },
-    );
-    flowChatStore.setState((): FlowChatState => ({ sessions: new Map(), activeSessionId: null }));
-  });
-
-  it('shows slowest spans in the detail panel', () => {
-    const report = usageReport({
-      slowest: [
-        {
-          label: 'turn 2',
-          kind: 'turn',
-          durationMs: 95_000,
-          redacted: false,
-          turnId: 'turn-2',
-          turnIndex: 2,
-        },
-        {
-          label: 'secret shell command',
-          kind: 'tool',
-          durationMs: 30_000,
-          redacted: true,
-        },
-      ],
-    });
-
-    const focusEvents: FlowChatFocusItemRequest[] = [];
-    const unsubscribe = globalEventBus.on<FlowChatFocusItemRequest>(
-      FLOWCHAT_FOCUS_ITEM_EVENT,
-      event => focusEvents.push(event),
-    );
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" sessionId="session-1" />);
-
-    const slowestTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Slowest');
-    act(() => {
-      slowestTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).toContain('Slow spans are derived from recorded turn, model, and tool timestamps');
-    // Built from `turnIndex: 2`, not the report's own `label: 'turn 2'`, which
-    // is hard-coded English numbered from zero.
-    expect(container.textContent).toContain('Turn 3');
-    expect(container.textContent).not.toContain('turn 2');
-    expect(container.textContent).toContain(formatDuration(95000));
-    expect(container.textContent).toContain('Redacted');
-    expect(container.textContent).not.toContain('secret shell command');
-
-    const turnLink = container.querySelector<HTMLButtonElement>('.session-usage-panel__turn-link');
-    expect(turnLink?.textContent).toBe('Turn 3');
-    act(() => {
-      turnLink?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(focusEvents).toEqual([
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-2',
-        turnIndex: 3,
-        source: 'usage-report',
-      },
-    ]);
-    unsubscribe();
+    expect(cacheCoverageHelp?.textContent).toContain('unavailable');
   });
 
-  it('shows diagnostic details for slow tool spans and jumps to the exact tool item', () => {
-    const report = usageReport({
-      slowest: [
-        {
-          label: 'ExecCommand',
-          kind: 'tool',
-          durationMs: 95_000,
-          redacted: false,
-          turnId: 'turn-2',
-          turnIndex: 2,
-          itemId: 'tool-slow',
-          inputSummary: 'curl https://api.example.test/slow',
-          status: 'failed',
-          exitCode: 28,
-          timedOut: true,
-          executionMs: 94_970,
-          errorSummary: 'operation timed out',
-        },
-      ],
-    });
-
-    const focusEvents: FlowChatFocusItemRequest[] = [];
-    const unsubscribe = globalEventBus.on<FlowChatFocusItemRequest>(
-      FLOWCHAT_FOCUS_ITEM_EVENT,
-      event => focusEvents.push(event),
-    );
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" sessionId="session-1" />);
-
-    const slowestTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Slowest');
-    act(() => {
-      slowestTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(container.textContent).toContain('ExecCommand');
-    expect(container.textContent).toContain('Input');
-    expect(container.textContent).toContain('curl https://api.example.test/slow');
-    expect(container.textContent).toContain('Status');
-    expect(container.textContent).toContain('Failed');
-    expect(container.textContent).toContain('Exit code');
-    expect(container.textContent).toContain('28');
-    expect(container.textContent).toContain('Timed out');
-    expect(container.textContent).toContain('Execution');
-    expect(container.textContent).toContain(formatDuration(95000));
-    expect(container.textContent).toContain('operation timed out');
-
-    const toolLink = container.querySelector<HTMLButtonElement>('.session-usage-panel__turn-link');
-    act(() => {
-      toolLink?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(focusEvents).toEqual([
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-2',
-        turnIndex: 3,
-        itemId: 'tool-slow',
-        source: 'usage-report',
-      },
-    ]);
-    unsubscribe();
-  });
-
-  it('labels slow model spans by turn and jumps to that turn', () => {
-    const report = usageReport({
-      slowest: [
-        {
-          label: 'gpt-5.4',
-          kind: 'model',
-          durationMs: 42_000,
-          redacted: false,
-          turnId: 'turn-4',
-          turnIndex: 4,
-        },
-      ],
-    });
-
-    const focusEvents: FlowChatFocusItemRequest[] = [];
-    const unsubscribe = globalEventBus.on<FlowChatFocusItemRequest>(
-      FLOWCHAT_FOCUS_ITEM_EVENT,
-      event => focusEvents.push(event),
-    );
-
-    render(<SessionUsagePanel report={report} markdown="## Session Usage" sessionId="session-1" />);
-
-    const slowestTab = Array.from(container.querySelectorAll('.session-usage-panel__tab'))
-      .find(button => button.textContent === 'Slowest');
-    act(() => {
-      slowestTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    /*
-     * The same number the jump below asks for. This test asserted `Turn 4`
-     * here and `turnIndex: 5` there, four lines apart, and the disagreement
-     * was the defect: the report indexes Turns from zero, every other reader
-     * adds one, and only this label did not.
-     */
-    expect(container.textContent).toContain('Turn 5 model call');
-    expect(container.textContent).toContain('Model call');
-    expect(container.textContent).not.toContain('gpt-5.4');
-    expect(container.querySelector('[data-tooltip="Model call in this turn. Model: gpt-5.4. Jump to this turn"]'))
-      .not.toBeNull();
-
-    const turnLink = container.querySelector<HTMLButtonElement>('.session-usage-panel__turn-link');
-    act(() => {
-      turnLink?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(focusEvents).toEqual([
-      {
-        sessionId: 'session-1',
-        turnId: 'turn-4',
-        turnIndex: 5,
-        source: 'usage-report',
-      },
-    ]);
-    unsubscribe();
-  });
 });
 
 describe('Session usage report i18n and theme guards', () => {
@@ -1885,8 +1452,6 @@ describe('Session usage report i18n and theme guards', () => {
     expect(styleText).toContain('margin: 0.12rem 3rem');
     expect(styleText).toContain('border: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default)');
     expect(styleText).toContain('grid-template-columns: repeat(3, minmax(116px, 1fr));');
-    expect(styleText).toContain('width: clamp(180px, 26vw, 280px);');
-    expect(styleText).toContain('max-width: 280px;');
     expect(styleText).not.toContain('text-overflow: ellipsis;');
     expect(styleText).not.toContain('grid-template-columns: repeat(4, minmax(116px, 1fr));');
     expect(styleText).not.toContain('grid-template-columns: minmax(0, 1fr) auto max-content;');
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageEmptyState.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageEmptyState.tsx
index d95930b99b..7eb492f9a8 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageEmptyState.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageEmptyState.tsx
@@ -1,12 +1,14 @@
-import { Empty } from '@openbitfun/ui';
-import { useTranslation } from 'react-i18next';
+import { Empty, Icon } from '@openbitfun/ui';
+import { ChartPie } from 'lucide-react';
+import { useI18n } from '@/infrastructure/i18n';
 
 export function SessionUsageEmptyState() {
-  const { t } = useTranslation('flow-chat');
+  const { t } = useI18n('flow-chat');
   return (
     <Empty
       data-testid="session-usage-empty"
       role="status"
+      icon={<Icon glyph={ChartPie} />}
       title={t('usage.empty.session')}
     />
   );
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts
deleted file mode 100644
index 8ea62b78c9..0000000000
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.appearance.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-
-export const sessionUsageModalAppearanceDescriptor: AppearanceSurfaceDescriptor = {
-  id: 'session-usage-modal',
-  parts: [
-    { id: 'content' },
-  ],
-};
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
deleted file mode 100644
index 4d04e48b39..0000000000
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.session-usage-dialog {
-  block-size: min(600px, calc(100dvh - 2 * var(--openbitfun-overlay-dialog-viewport-gutter)));
-  max-block-size: calc(100dvh - 2 * var(--openbitfun-overlay-dialog-viewport-gutter));
-}
-
-.session-usage-dialog__content {
-  display: flex;
-  justify-content: center;
-  flex: 1 0 auto;
-  min-inline-size: 0;
-  container: session-usage / inline-size;
-}
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx
deleted file mode 100644
index 45b05b75be..0000000000
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// @vitest-environment jsdom
-
-/**
- * The two things the overlay does that the service cannot be asked about: it
- * takes Escape away from the container, and opening the panel closes it.
- */
-
-import React, { act } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
-import { isChatPopupActive } from '../chatPopupState';
-import {
-  closeSessionUsageModal,
-  getSessionUsageModalState,
-  openSessionUsageModal,
-  showSessionUsageModalReport,
-} from './sessionUsageModalState';
-import { SessionUsageModal } from './SessionUsageModal';
-
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-
-const mocks = vi.hoisted(() => ({ openSessionUsagePanel: vi.fn() }));
-vi.mock('../../services/openSessionUsageReport', () => ({
-  openSessionUsagePanel: mocks.openSessionUsagePanel,
-}));
-
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
-});
-
-const report = (): SessionUsageReport => ({
-  schemaVersion: 1,
-  reportId: 'usage-report-1',
-  sessionId: 'session-1',
-  generatedAt: 100,
-  workspace: { kind: 'local', pathLabel: 'D:/workspace/OpenBitFun' },
-  scope: { kind: 'entire_session', turnCount: 3, includesSubagents: false },
-  coverage: { level: 'complete', available: [], missing: [], notes: [] },
-  time: { accounting: 'approximate', denominator: 'session_wall_time', wallTimeMs: 1000 },
-  tokens: {
-    source: 'token_usage_records',
-    inputTokens: 10,
-    outputTokens: 5,
-    totalTokens: 15,
-    cacheCoverage: 'unavailable',
-  },
-  models: [],
-  tools: [],
-  files: { scope: 'unavailable', files: [] },
-  compression: { compactionCount: 0, manualCompactionCount: 0, automaticCompactionCount: 0 },
-  errors: { totalErrors: 0, toolErrors: 0, modelErrors: 0, examples: [] },
-  slowest: [],
-  privacy: {
-    promptContentIncluded: false,
-    toolInputsIncluded: false,
-    commandOutputsIncluded: false,
-    fileContentsIncluded: false,
-    redactedFields: [],
-  },
-});
-
-describe('SessionUsageModal', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  function showReport() {
-    act(() => {
-      openSessionUsageModal({ sessionId: 'session-1', workspacePath: 'D:/workspace/OpenBitFun' });
-      showSessionUsageModalReport({
-        sessionId: 'session-1',
-        report: report(),
-        markdown: '# Session Usage Report',
-      });
-    });
-  }
-
-  beforeEach(() => {
-    mocks.openSessionUsagePanel.mockReset();
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-    act(() => root.render(<SessionUsageModal />));
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-    closeSessionUsageModal();
-    vi.useRealTimers();
-  });
-
-  it('renders nothing until there is a report to show', () => {
-    expect(document.querySelector('[data-testid="session-usage-modal"]')).toBeNull();
-    expect(isChatPopupActive()).toBe(false);
-  });
-
-  it('takes Escape away from the container while it is open', () => {
-    /*
-     * The container disables its own Escape shortcut while a chat popup is
-     * active. Without this latch, dismissing a report would also cancel
-     * whatever the session is running.
-     */
-    showReport();
-    expect(isChatPopupActive()).toBe(true);
-
-    act(() => closeSessionUsageModal());
-    expect(isChatPopupActive()).toBe(false);
-  });
-
-  it('gives Escape back when it goes away with the report still open', () => {
-    showReport();
-    act(() => root.unmount());
-    expect(isChatPopupActive()).toBe(false);
-    // The afterEach unmount would otherwise run against a torn-down root.
-    root = createRoot(container);
-  });
-
-  it('keeps the report visible during closing instead of unmounting immediately', () => {
-    vi.useFakeTimers();
-    showReport();
-    const surface = document.querySelector<HTMLElement>('[data-testid="session-usage-modal"]')!;
-    const contents = surface.textContent;
-    act(() => closeSessionUsageModal());
-    expect(surface.isConnected).toBe(true);
-    expect(surface.dataset.state).toBe('exiting');
-    expect(surface.textContent).toBe(contents);
-    act(() => vi.advanceTimersByTime(180));
-    expect(surface.isConnected).toBe(false);
-  });
-
-  it('hands over to the panel rather than competing with it', async () => {
-    showReport();
-    const details = document.querySelector<HTMLButtonElement>(
-      'button[aria-label="usage.actions.openDetails"]',
-    );
-    expect(details).not.toBeNull();
-
-    await act(async () => {
-      details?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      // The panel module is imported on demand.
-      await Promise.resolve();
-    });
-
-    expect(mocks.openSessionUsagePanel).toHaveBeenCalledWith(expect.objectContaining({
-      sessionId: 'session-1',
-      workspacePath: 'D:/workspace/OpenBitFun',
-      markdown: '# Session Usage Report',
-      expand: true,
-    }));
-    expect(getSessionUsageModalState().open).toBe(false);
-  });
-});
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx
deleted file mode 100644
index 40f3218296..0000000000
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * The session usage report, as a dismissable overlay.
- *
- * Mounted once at the app root, like `ConfirmDialogRenderer`, and driven from
- * `sessionUsageModalState` — the request that produces a report runs several
- * layers below any component, and the report is not owned by whichever session
- * view happens to be mounted.
- *
- * The card inside is the same `SessionUsageReportCard` the transcript renders
- * for reports written by earlier versions, including its own waiting state.
- */
-
-import React, { useCallback, useEffect, useSyncExternalStore } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogHeader,
-  DialogHeading,
-  DialogTitle,
-} from '@openbitfun/ui';
-import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
-import { setChatPopupActive } from '../chatPopupState';
-import { SessionUsageReportCard } from './SessionUsageReportCard';
-import type { SessionUsagePanelTab } from './sessionUsagePanelTypes';
-import {
-  closeSessionUsageModal,
-  getSessionUsageModalState,
-  subscribeSessionUsageModal,
-} from './sessionUsageModalState';
-import './SessionUsageModal.scss';
-
-export const SessionUsageModal: React.FC = () => {
-  const { t } = useTranslation('flow-chat');
-  const state = useSyncExternalStore(subscribeSessionUsageModal, getSessionUsageModalState);
-  const { open, isLoading, report, markdown, sessionId, workspacePath } = state;
-
-  /*
-   * The same latch the slash-command and @-mention popups use. Without it the
-   * container's global Escape shortcut fires alongside the modal's own, and
-   * dismissing a report would cancel whatever the session is running.
-   */
-  useEffect(() => {
-    if (!open) return undefined;
-    setChatPopupActive(true);
-    return () => setChatPopupActive(false);
-  }, [open]);
-
-  const handleOpenDetails = useCallback((
-    detailReport: SessionUsageReport,
-    initialTab?: SessionUsagePanelTab,
-  ) => {
-    void import('../../services/openSessionUsageReport').then(({ openSessionUsagePanel }) => {
-      openSessionUsagePanel({
-        report: detailReport,
-        markdown,
-        sessionId,
-        workspacePath,
-        initialTab,
-        title: t('usage.title'),
-        expand: true,
-      });
-      // The panel is the fuller answer to the same question, so the summary
-      // stops competing with it for the screen.
-      closeSessionUsageModal();
-    });
-  }, [markdown, sessionId, t, workspacePath]);
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(nextOpen) => { if (!nextOpen) closeSessionUsageModal(); }}
-      size="xl"
-      className="session-usage-dialog"
-      data-testid="session-usage-modal"
-    >
-      <DialogHeader>
-        <DialogHeading>
-          <DialogTitle>{t('usage.title')}</DialogTitle>
-        </DialogHeading>
-        <DialogClose data-testid="session-usage-modal-close" />
-      </DialogHeader>
-      <DialogBody>
-        <div
-          className="session-usage-dialog__content"
-          data-openbitfun-component="session-usage-modal"
-          data-openbitfun-part="content"
-        >
-          <SessionUsageReportCard
-            compact
-            report={report}
-            markdown={markdown}
-            generatedAt={report?.generatedAt}
-            isLoading={isLoading}
-            onOpenDetails={report ? handleOpenDetails : undefined}
-          />
-        </div>
-      </DialogBody>
-    </Dialog>
-  );
-};
-
-SessionUsageModal.displayName = 'SessionUsageModal';
-
-export default SessionUsageModal;
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
index 5d1d4f993c..f4b2ccd498 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
@@ -7,718 +7,302 @@
   flex-direction: column;
   height: 100%;
   min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  container: usage-report / inline-size;
+  padding: var(--openbitfun-space-6);
+  gap: var(--openbitfun-space-5);
   background: var(--openbitfun-color-surface-scene);
   color: var(--openbitfun-color-content-primary);
+  font-family: var(--openbitfun-type-body-sm-font-family);
+  font-size: var(--openbitfun-type-body-sm-font-size);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 
-  &--fallback {
-    position: relative;
-    overflow: auto;
-    padding: 44px 16px 16px;
-  }
-
-  &__fallback-toolbar {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    z-index: 1;
+  &--status {
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
   }
 
   &__header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 10px;
-    flex-shrink: 0;
-    min-height: 74px;
-    padding: 10px 12px;
-    border-bottom: 1px dashed var(--openbitfun-color-border-default);
-    background: var(--openbitfun-color-surface-panel);
-  }
-
-  &__title-wrap {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
-  }
-
-  &__header-actions {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--openbitfun-control-height-sm) minmax(0, 1fr) var(--openbitfun-control-height-sm);
     align-items: center;
-    gap: 6px;
+    gap: var(--openbitfun-space-2);
     flex: 0 0 auto;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  &__badge {
-    flex: 0 0 auto;
-    padding: 2px 7px;
-    border-radius: 999px;
-    font-size: var(--openbitfun-type-flow-micro-font-size);
-    line-height: var(--openbitfun-type-flow-meta-line-height);
-
-    &--complete {
-      color: var(--openbitfun-color-status-success-content);
-      background: var(--openbitfun-color-status-success-surface);
-    }
-
-    &--partial {
-      color: var(--openbitfun-color-status-warning-content);
-      background: var(--openbitfun-color-status-warning-surface);
-    }
-
-    &--minimal {
-      color: var(--openbitfun-color-content-secondary);
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 88%, transparent);
-    }
+    min-width: 0;
+    margin-block-end: var(--openbitfun-space-3);
 
-    &--hint {
-      cursor: help;
-    }
+    > [data-openbitfun-part='content'] { grid-column: 2; }
+    > [data-openbitfun-part='action'] { grid-column: 3; justify-self: end; }
   }
 
-  &__title-main {
-    min-width: 0;
-
-    h2 {
-      margin: 0;
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-body-md-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      line-height: var(--openbitfun-type-flow-meta-line-height);
-    }
+  &__title {
+    display: block;
+    overflow-wrap: anywhere;
   }
 
-  &__meta-list {
+  &__summary {
     display: flex;
+    flex: 0 0 auto;
     flex-direction: column;
-    gap: 2px;
-    margin-top: 3px;
-    min-width: 0;
-  }
+    gap: var(--openbitfun-space-5);
+    padding-bottom: var(--openbitfun-space-6);
+    border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-default);
 
-  &__meta-row {
-    display: grid;
-    grid-template-columns: 72px minmax(0, 1fr) 24px;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-support-font-size);
+    &:last-child { padding-bottom: 0; border-bottom: 0; }
   }
 
-  &__meta-label {
-    color: var(--openbitfun-color-content-secondary);
-    white-space: nowrap;
-  }
-
-  &__meta-value {
-    min-width: 0;
-    max-width: min(520px, 58vw);
-    overflow: hidden;
-    color: var(--openbitfun-color-content-muted);
-    white-space: nowrap;
-  }
-
-  &__meta-copy {
-    width: 22px;
-    height: 22px;
-  }
-
-  &__copy {
+  &__summary-facts {
+    display: grid;
     flex: 0 0 auto;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin: 0;
+    padding-block: var(--openbitfun-space-3);
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: var(--openbitfun-radius-3xl);
   }
 
-  &__export-option {
-    display: inline-flex;
-    font-family: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-    align-items: center;
-    gap: 4px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-flow-support-font-size);
-    line-height: var(--openbitfun-type-modifier-leading-none-line-height);
-    white-space: nowrap;
-    cursor: pointer;
-
-    input {
-      accent-color: var(--openbitfun-color-accent-default);
+  &__summary-fact {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+    min-inline-size: 0;
+    gap: var(--openbitfun-space-2);
+    padding-inline: var(--openbitfun-space-3);
+    text-align: center;
 
-      &:focus-visible {
-        outline: 2px solid color-mix(in srgb, var(--openbitfun-color-accent-default) 70%, transparent);
-        outline-offset: 2px;
-      }
+    dt {
+      color: var(--openbitfun-color-content-secondary);
+      font-size: var(--openbitfun-type-body-sm-font-size);
+      line-height: var(--openbitfun-type-body-sm-line-height);
     }
-
-    > [data-openbitfun-part='content'] {
-      max-width: 92px;
-      overflow: hidden;
-      white-space: nowrap;
+    dd {
+      margin: 0;
+      font-size: var(--openbitfun-type-heading-section-font-size);
+      font-weight: var(--openbitfun-type-heading-section-font-weight);
+      line-height: var(--openbitfun-type-heading-section-line-height);
+      font-variant-numeric: tabular-nums;
+      overflow-wrap: anywhere;
     }
   }
 
-  &__help-value {
-    text-decoration: underline;
-    text-decoration-style: dashed;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 3px;
-    cursor: help;
+  &__summary-fact + &__summary-fact {
+    border-inline-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
   }
 
-  &__tabs {
+  &__distribution {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     align-items: center;
-    gap: 2px;
-    flex-shrink: 0;
-    padding: 8px 10px 0;
-    border-bottom: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 70%, transparent);
-    background: color-mix(in srgb, var(--openbitfun-color-surface-panel) 84%, var(--openbitfun-color-surface-scene));
-    overflow-x: auto;
+    gap: var(--openbitfun-space-6);
+    padding-block: var(--openbitfun-space-3);
   }
 
-  &__tab {
-    height: 28px;
-    border-radius: 0;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    transition: none;
-    padding: 0 10px;
-    border: 0;
-    border-bottom: 2px solid transparent;
-    background: transparent;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-flow-control-font-size);
-    white-space: nowrap;
-    cursor: pointer;
+  &__donut {
+    position: relative;
+    flex: 0 1 240px;
+    max-inline-size: 100%;
+    aspect-ratio: 1;
+    svg { display: block; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
+  }
 
-    > [data-openbitfun-part='label'] {
-      line-height: inherit;
-    }
+  &__donut-track,
+  &__donut-segment { fill: none; stroke-width: 24; }
+  &__donut-track { stroke: color-mix(in srgb, var(--openbitfun-component-session-usage-input) 12%, var(--openbitfun-color-surface-scene)); }
+  &__donut-segment { stroke: currentColor; }
 
-    @layer openbitfun.components {
-      &[role='tab']:focus-visible {
-        outline: revert-layer;
-        outline-offset: revert-layer;
-      }
-    }
+  &__donut-segment,
+  &__bar-segment,
+  &__legend-row {
+    transition:
+      opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+      background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
-    &:hover {
-      color: var(--openbitfun-color-content-primary);
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 72%, transparent);
-    }
+    &[data-usage-muted] { opacity: 0.3; }
 
-    &--active {
-      color: var(--openbitfun-color-content-primary);
-      border-bottom-color: var(--openbitfun-color-accent-default);
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
 
-  &__body {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: 12px;
-  }
-
-  &__section {
+  &__donut-label {
+    position: absolute;
+    inset: 0;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    min-width: 0;
-  }
-
-  &__notice,
-  &__scope-line,
-  &__privacy {
-    display: flex;
     align-items: center;
-  }
-
-  &__notice {
-    gap: 6px;
-    min-height: 30px;
-    padding: 7px 8px;
-    border-left: 2px solid var(--openbitfun-color-status-warning-emphasis);
-    background: var(--openbitfun-color-status-warning-surface);
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-flow-control-font-size);
-
-    > :is(svg, [data-openbitfun-component='icon']) {
-      flex: 0 0 auto;
-      color: var(--openbitfun-color-status-warning-emphasis);
-    }
-  }
-
-  &__overview-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  &__overview-metric {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    min-width: 0;
-    min-height: 64px;
-    padding: 10px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 58%, transparent);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 56%, transparent);
-
-    > :is(svg, [data-openbitfun-component='icon']) {
-      flex: 0 0 auto;
-      margin-top: 1px;
-      color: var(--openbitfun-color-content-secondary);
-    }
-
-    div {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      min-width: 0;
+    justify-content: center;
+    gap: var(--openbitfun-space-2);
+    pointer-events: none;
+    strong {
+      font-size: var(--openbitfun-type-heading-page-font-size);
+      font-weight: var(--openbitfun-type-heading-page-font-weight);
+      line-height: var(--openbitfun-type-heading-page-line-height);
+      font-variant-numeric: tabular-nums;
     }
-
     span {
       color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-flow-support-font-size);
-    }
-
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-flow-title-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      white-space: nowrap;
-    }
-
-    em {
-      color: var(--openbitfun-color-content-muted);
-      font-size: var(--openbitfun-type-flow-support-font-size);
-      font-style: normal;
+      font-size: var(--openbitfun-type-body-sm-font-size);
+      max-inline-size: 60%;
+      text-align: center;
+      overflow-wrap: anywhere;
     }
   }
 
-  &__definition-list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
+  &__legend {
+    flex: 1 1 180px;
+    max-inline-size: 320px;
     margin: 0;
-
-    div {
-      display: flex;
-      justify-content: space-between;
-      gap: 8px;
-      min-width: 0;
-      padding: 8px 0;
-      border-bottom: 1px dashed color-mix(in srgb, var(--openbitfun-color-border-default) 70%, transparent);
-    }
-
-    dt,
-    dd {
-      min-width: 0;
-      margin: 0;
-      font-size: var(--openbitfun-type-flow-control-font-size);
-    }
-
-    dt {
-      color: var(--openbitfun-color-content-secondary);
-    }
-
-    dd {
-      color: var(--openbitfun-color-content-primary);
-      overflow: hidden;
-      text-align: right;
-      white-space: nowrap;
-    }
-  }
-
-  &__privacy {
-    gap: 8px;
-    padding: 10px 0 0;
-    border-top: 1px dashed color-mix(in srgb, var(--openbitfun-color-border-default) 70%, transparent);
-
-    > :is(svg, [data-openbitfun-component='icon']) {
-      flex: 0 0 auto;
-      color: var(--openbitfun-color-status-success-content);
-    }
-
-    div {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      min-width: 0;
-    }
-
-    strong {
-      font-size: var(--openbitfun-type-flow-control-font-size);
-    }
-
-    span {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-flow-support-font-size);
-      line-height: var(--openbitfun-type-flow-support-line-height);
-    }
+    display: flex;
+    flex-direction: column;
+    gap: var(--openbitfun-space-1);
   }
 
-  &__scope-line {
+  &__legend-row {
+    display: flex;
+    align-items: baseline;
     justify-content: space-between;
-    gap: 8px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-flow-control-font-size);
-
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
+    gap: var(--openbitfun-space-3);
+    padding: var(--openbitfun-space-2);
+    font-size: var(--openbitfun-type-body-sm-font-size);
+    border-radius: var(--openbitfun-radius-md);
+    &:is(:hover, :focus-within, [data-usage-active]) {
+      background-color: var(--openbitfun-color-action-neutral-surface);
+    }
+    &:is(:hover, :focus-within) .session-usage-panel__legend-action {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    &[data-usage-muted] { opacity: 0.6; }
+    &:focus-visible {
+      outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+      outline-offset: var(--openbitfun-focus-offset);
     }
+    dt { color: var(--openbitfun-color-content-secondary); }
+    dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--openbitfun-space-2); margin: 0; font-variant-numeric: tabular-nums; }
+    strong { font-weight: var(--openbitfun-type-label-selected-font-weight); }
+    dd > span { color: var(--openbitfun-color-content-muted); }
   }
 
-  &__section-help {
-    margin: -4px 0 0;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-control-font-size);
-    line-height: var(--openbitfun-type-flow-support-line-height);
-  }
-
-  &__table-wrap {
+  &__legend-row dt {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-2);
     min-width: 0;
-    overflow: auto;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 60%, transparent);
-    border-radius: 6px;
   }
 
-  &__table {
-    width: 100%;
-    min-width: 620px;
-    border-collapse: collapse;
-    font-size: var(--openbitfun-type-flow-control-font-size);
-
-    th,
-    td {
-      padding: 8px;
-      border-bottom: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 60%, transparent);
-      text-align: left;
-      vertical-align: middle;
-    }
-
-    th {
-      color: var(--openbitfun-color-content-secondary);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 66%, transparent);
-      white-space: nowrap;
-    }
-
-    td {
-      color: var(--openbitfun-color-content-primary);
-
-      span:not([data-overflow-content]) {
-        display: block;
-        max-width: 260px;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-
-    tbody tr:last-child td {
-      border-bottom: 0;
-    }
-
-    &--files {
-      min-width: 620px;
-      table-layout: fixed;
-
-      th:nth-child(1),
-      td:nth-child(1) {
-        width: clamp(180px, 26vw, 280px);
-        max-width: 280px;
-      }
-
-      th:nth-child(2),
-      td:nth-child(2),
-      th:nth-child(3),
-      td:nth-child(3),
-      th:nth-child(4),
-      td:nth-child(4),
-      th:nth-child(5),
-      td:nth-child(5) {
-        width: 72px;
-      }
-
-      th:last-child,
-      td:last-child {
-        position: sticky;
-        right: 0;
-        z-index: 1;
-        width: 48px;
-        min-width: 48px;
-        max-width: 48px;
-        padding-right: 6px;
-        padding-left: 6px;
-        text-align: center;
-        background: color-mix(in srgb, var(--openbitfun-color-surface-scene) 92%, var(--openbitfun-color-action-quiet-hover));
-        box-shadow: -10px 0 14px -14px color-mix(in srgb, var(--openbitfun-color-content-primary) 54%, transparent);
-      }
-
-      th:last-child {
-        z-index: 2;
-        background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 72%, var(--openbitfun-color-surface-scene));
-      }
-    }
-  }
-
-  &__file-path-cell {
-    max-width: 280px;
-  }
-
-  &__file-path-display {
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    color: var(--openbitfun-color-content-primary);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
-    white-space: nowrap;
-  }
-
-  &__table td &__file-path-display {
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &__sticky-action-cell {
+  &__legend-share {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--openbitfun-space-1);
     white-space: nowrap;
   }
 
-  &__missing-cell {
+  &__legend-detail {
+    min-inline-size: 0;
     color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height);
+    overflow-wrap: anywhere;
   }
 
-  &__table td &__missing-value {
+  &__legend-action {
     display: inline-flex;
-    align-items: center;
-    max-width: none;
-    min-height: 20px;
-    padding: 0 7px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 54%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 58%, transparent);
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-support-font-size);
-    line-height: var(--openbitfun-type-modifier-leading-none-line-height);
-    white-space: nowrap;
-
-    &--help {
-      cursor: help;
-    }
+    flex: 0 0 auto;
+    opacity: 0;
+    pointer-events: none;
   }
 
-  &__table-action {
-    width: 24px;
-    height: 24px;
+  &__swatch {
+    inline-size: var(--openbitfun-space-3);
+    block-size: var(--openbitfun-space-3);
+    border-radius: var(--openbitfun-radius-xs);
+    background: currentColor;
+    flex: 0 0 auto;
   }
 
-  &__table-action-placeholder {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
+  // Chart categories reuse chromatic design-system anchors, including in neutral appearances.
+  &__series--input,
+  &__series--cachedInput,
+  &__series--systemPrompt { color: var(--openbitfun-component-session-usage-input); }
+  &__series--uncachedInput { color: color-mix(in srgb, var(--openbitfun-component-session-usage-input) 42%, var(--openbitfun-color-surface-scene)); }
+  &__series--output,
+  &__series--toolDefinitions { color: var(--openbitfun-component-session-usage-output); }
+  &__series--rules { color: var(--openbitfun-color-status-success-emphasis); }
+  &__series--skills { color: var(--openbitfun-color-status-warning-emphasis); }
+  &__series--mcpTools { color: color-mix(in srgb, var(--openbitfun-component-session-usage-output) 50%, var(--openbitfun-color-status-danger-emphasis)); }
+  &__series--subagentDefinitions { color: color-mix(in srgb, var(--openbitfun-component-session-usage-input) 50%, var(--openbitfun-color-status-success-emphasis)); }
+  &__series--summarizedConversation { color: var(--openbitfun-color-status-danger-emphasis); }
+  &__series--conversation { color: color-mix(in srgb, var(--openbitfun-color-status-warning-emphasis) 60%, var(--openbitfun-color-status-danger-emphasis)); }
+
+  &__chart-meta {
     color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height);
   }
 
-  &__turn-link,
-  &__row-anchor-link {
-    display: block;
-    max-width: 260px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--openbitfun-color-accent-default);
-    font: inherit;
-    text-align: left;
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 3px;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-
-    &:hover {
-      color: var(--openbitfun-color-accent-hover);
-    }
-
-    &:focus-visible {
-      outline: 2px solid color-mix(in srgb, var(--openbitfun-color-accent-default) 70%, transparent);
-      outline-offset: 2px;
-      border-radius: 3px;
-    }
-  }
-
-  &__turn-link,
-  &__row-anchor-link,
-  &__turn-index-link,
-  &__table-expand {
-    block-size: auto;
-    border-radius: 0;
-    letter-spacing: inherit;
-    transition: none;
-
-    &::before { content: none; }
-    > [data-openbitfun-part='content'] { display: contents; }
+  &__token-chart {
+    display: flex;
+    flex-direction: column;
+    gap: var(--openbitfun-space-2);
+    min-inline-size: 0;
   }
 
-  &__turn-index-link,
-  &__table-expand {
-    display: inline-block;
-    white-space: normal;
+  &__segmented-bar {
+    display: flex;
+    block-size: var(--openbitfun-space-4);
+    border-radius: var(--openbitfun-radius-pill);
+    overflow: hidden;
+    background: var(--openbitfun-color-surface-tertiary);
   }
 
-  &__table-expand {
-    text-decoration: none;
-    outline: revert;
-    outline-offset: revert;
+  &__bar-group {
+    display: flex;
+    flex-basis: 0;
+    min-inline-size: var(--openbitfun-space-1);
+    overflow: hidden;
   }
 
-  &__slow-span {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 0;
+  &__bar-segment {
+    flex-basis: 0;
+    min-inline-size: var(--openbitfun-border-width-strong);
+    background: currentColor;
   }
 
-  &__slow-span-details {
+  &__token-legend {
     display: grid;
-    grid-template-columns: max-content minmax(0, 1fr);
-    gap: 3px 8px;
-    margin: 0;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-support-font-size);
-    line-height: var(--openbitfun-type-flow-meta-line-height);
+    grid-template-columns: minmax(0, 1fr) auto;
+    flex: 0 0 auto;
+    max-inline-size: none;
 
-    > div {
-      display: contents;
-    }
+    .session-usage-panel__legend-row {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: var(--openbitfun-space-1);
 
-    dt {
-      color: var(--openbitfun-color-content-secondary);
-      white-space: nowrap;
+      &:last-child { align-items: flex-end; text-align: end; }
     }
-
-    dd {
-      min-width: 0;
-      margin: 0;
-      overflow-wrap: anywhere;
-    }
-  }
-
-  &__turn-indexes {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    max-width: 160px;
   }
 
-  &__turn-index-link {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--openbitfun-color-accent-default);
-    font: inherit;
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 3px;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--openbitfun-color-accent-hover);
-    }
-
-    &:focus-visible {
-      outline: 2px solid color-mix(in srgb, var(--openbitfun-color-accent-default) 70%, transparent);
-      outline-offset: 2px;
-      border-radius: 3px;
-    }
-  }
+  &__cache-legend {
+    flex: 0 0 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-inline-size: none;
 
-  &__turn-index-overflow {
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-support-font-size);
-    white-space: nowrap;
+    .session-usage-panel__legend-row { flex: 1 1 180px; }
   }
 
-  &__table-footer {
+  &__fallback-toolbar {
     display: flex;
-    align-items: center;
     justify-content: flex-end;
-    gap: 10px;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-support-font-size);
-  }
-
-  &__table-expand {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--openbitfun-color-accent-default);
-    font: inherit;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--openbitfun-color-accent-hover);
-      text-decoration: underline;
-      text-underline-offset: 3px;
-    }
+    flex: 0 0 auto;
   }
 
-  &__empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    min-height: 120px;
-    padding: 12px;
+  &__section-help {
+    margin: 0;
     color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-flow-control-font-size);
-    text-align: center;
-    border: 1px dashed color-mix(in srgb, var(--openbitfun-color-border-default) 72%, transparent);
-    border-radius: 6px;
-
-    strong {
-      color: var(--openbitfun-color-content-secondary);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-
-    span {
-      max-width: 440px;
-      line-height: var(--openbitfun-type-flow-support-line-height);
-    }
-  }
-
-  @media (max-width: 640px) {
-    &__header {
-      align-items: flex-start;
-    }
-
-    &__title-wrap {
-      align-items: flex-start;
-    }
-
-    &__meta-row {
-      grid-template-columns: 72px minmax(0, 1fr) 24px;
-    }
-
-    &__meta-value {
-      max-width: 52vw;
-    }
-
-    &__overview-grid,
-    &__definition-list {
-      grid-template-columns: 1fr;
-    }
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
index e9ba7ca923..2b808a28f3 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
@@ -1,91 +1,51 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Activity, AlertTriangle, Database, FileText, GitCompare, ShieldCheck, Wrench } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useI18n } from '@/infrastructure/i18n';
 import { MarkdownRenderer } from '@/infrastructure/markdown';
-import { Checkbox, Button, OverflowText, TabGroup, Tooltip } from '@openbitfun/ui';
-import { snapshotAPI } from '@/infrastructure/api/service-api/SnapshotAPI';
-import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
-import { globalEventBus } from '@/infrastructure/event-bus';
-import { createDiffEditorTab } from '@/shared/utils/tabUtils';
-import { createLogger } from '@/shared/utils/logger';
+import { Empty, Icon, IconButton, LoadingState, PageHeader, ScrollArea, Tooltip } from '@openbitfun/ui';
+import type { SessionUsageReport, UsageContextCategory } from '@/infrastructure/api/service-api/SessionAPI';
 import {
-  FLOWCHAT_FOCUS_ITEM_EVENT,
-  type FlowChatFocusItemRequest,
-} from '../../events/flowchatNavigation';
-import {
-  calculateShare,
   buildSessionUsageExportMarkdown,
   isUnusedSession,
-  formatHitRatePercent,
-  formatUsageDuration,
-  formatUsageNumber,
-  formatTokenCount,
-  formatUsagePercent,
-  formatUsageTimestamp,
-  getAccountingLabel,
-  getCoverageLabel,
-  getCoverageTone,
-  getFileScopeHelp,
-  getFileScopeLabel,
-  getFileSummaryLabel,
-  getUsageDisplayPathLabel,
-  getModelHelp,
-  getModelLabel,
-  getRedactedLabel,
-  getSlowSpanHelp,
-  getSlowSpanLabel,
-  getToolCategoryLabel,
+  getUsageFileNameFromPath,
   getUsageExportRedactPathsPreference,
-  setUsageExportRedactPathsPreference,
   subscribeUsageExportRedactPathsPreference,
-  getDisplayTurnIndex,
 } from './usageReportUtils';
+import { SessionUsageSummary } from './SessionUsageSummary';
 import { SessionUsageEmptyState } from './SessionUsageEmptyState';
+import { openSessionContextPreview } from '../../services/openSessionContextPreview';
+import { notificationService } from '@/shared/notification-system';
+import { getActiveSurfaceScope, isSurfaceChangedError } from '@/infrastructure/peer-device/deviceSurface';
 import type { SessionUsagePanelTab } from './sessionUsagePanelTypes';
-import { sessionWorkspaceId } from '../../session-drivers/sessionFileNavigation';
 import './SessionUsagePanel.scss';
-import { IconButton, Icon } from '@openbitfun/ui';
 
-const log = createLogger('SessionUsagePanel');
-type UsageTranslator = (key: string, options?: Record<string, unknown>) => string;
 interface SessionUsagePanelProps {
   report?: SessionUsageReport;
   markdown?: string;
   sessionId?: string;
+  sessionTitle?: string;
+  isLoading?: boolean;
+  error?: string;
   workspacePath?: string;
+  workspaceId?: string;
+  /** Accepted for saved panels from versions with detail tabs. */
   initialTab?: SessionUsagePanelTab;
 }
 
-const TABS: SessionUsagePanelTab[] = ['overview', 'models', 'tools', 'files', 'errors', 'slowest'];
-const MAX_USAGE_TABLE_ROWS = 50;
-
-function tabId(tab: SessionUsagePanelTab): string {
-  return `session-usage-tab-${tab}`;
-}
-
-function tabPanelId(tab: SessionUsagePanelTab): string {
-  return `session-usage-panel-${tab}`;
-}
-
 export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
   report,
   markdown = '',
   sessionId,
+  sessionTitle,
+  isLoading = false,
+  error,
   workspacePath,
-  initialTab,
+  workspaceId,
 }) => {
-  const { t } = useTranslation('flow-chat');
-  const [activeTab, setActiveTab] = useState<SessionUsagePanelTab>(initialTab ?? 'overview');
+  const { t } = useI18n('flow-chat');
   const [copied, setCopied] = useState(false);
-  const [copiedMeta, setCopiedMeta] = useState<'session' | 'workspace' | null>(null);
+  const [previewLoading, setPreviewLoading] = useState<UsageContextCategory | null>(null);
   const [redactExportPaths, setRedactExportPaths] = useState(getUsageExportRedactPathsPreference);
 
-  useEffect(() => {
-    if (initialTab) {
-      setActiveTab(initialTab);
-    }
-  }, [initialTab]);
-
   useEffect(() => (
     subscribeUsageExportRedactPathsPreference(setRedactExportPaths)
   ), []);
@@ -103,26 +63,46 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
     }
   }, [markdown, redactExportPaths, report, t]);
 
-  const handleRedactExportPathsChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setUsageExportRedactPathsPreference(event.target.checked);
-  }, []);
-
-  const handleCopyMeta = useCallback(async (
-    value: string,
-    field: 'session' | 'workspace'
-  ) => {
+  const handlePreviewContext = async (category: UsageContextCategory) => {
+    if (!report || previewLoading) return;
+    const surface = getActiveSurfaceScope();
+    setPreviewLoading(category);
     try {
-      await navigator.clipboard.writeText(value);
-      setCopiedMeta(field);
-      window.setTimeout(() => setCopiedMeta(null), 1800);
-    } catch {
-      setCopiedMeta(null);
+      const result = await openSessionContextPreview({
+        sessionId: sessionId ?? report.sessionId,
+        reportSessionId: report.sessionId,
+        workspaceId: workspaceId ?? report.workspace.workspaceId,
+        title: `${t(`usage.context.categories.${category}`)}${category === 'toolDefinitions' ? '' : '.md'}`,
+        category,
+        emptyContent: t('usage.context.previewEmpty'),
+      });
+      if (surface.isCurrent() && result === 'unavailable') {
+        notificationService.warning(t('usage.context.previewUnavailable'));
+      }
+    } catch (error) {
+      if (surface.isCurrent() && !isSurfaceChangedError(error)) {
+        notificationService.error(t('usage.context.previewFailed'));
+      }
+    } finally {
+      setPreviewLoading(null);
     }
-  }, []);
+  };
+
+  if (isLoading || error) {
+    return (
+      <div className="session-usage-panel session-usage-panel--status" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root">
+        {isLoading ? (
+          <LoadingState role="status" aria-live="polite">{t('usage.loading.title')}</LoadingState>
+        ) : (
+          <Empty title={t('usage.panel.failed')} description={error} />
+        )}
+      </div>
+    );
+  }
 
   if (!report) {
     return (
-      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" data-openbitfun-state="fallback" className="session-usage-panel session-usage-panel--fallback">
+      <ScrollArea data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" data-openbitfun-state="fallback" className="session-usage-panel session-usage-panel--fallback">
         <div className="session-usage-panel__fallback-toolbar" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="header">
           <Tooltip content={copied ? t('usage.actions.copied') : t('usage.actions.copyMarkdown')}>
             <IconButton
@@ -134,1163 +114,47 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
           </Tooltip>
         </div>
         <MarkdownRenderer content={markdown} />
-      </div>
+      </ScrollArea>
     );
   }
 
   if (isUnusedSession(report)) {
-    return <SessionUsageEmptyState />;
+    return (
+      <div className="session-usage-panel session-usage-panel--status" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root">
+        <SessionUsageEmptyState />
+      </div>
+    );
   }
 
-  const coverageTone = getCoverageTone(report.coverage.level);
-  const effectiveSessionId = sessionId ?? report.sessionId;
   const effectiveWorkspacePath = workspacePath ?? report.workspace.pathLabel;
-  const displayedWorkspacePath = getUsageDisplayPathLabel(effectiveWorkspacePath, t, {
-    redactPaths: redactExportPaths,
-  });
-  const coverageBadgeClassName =
-    `session-usage-panel__badge session-usage-panel__badge--${coverageTone}` +
-    (report.coverage.level !== 'complete' ? ' session-usage-panel__badge--hint' : '');
-  const coverageBadge = (
-    <span className={coverageBadgeClassName}>
-      {getCoverageLabel(report.coverage.level, t)}
-    </span>
-  );
-
+  const workspaceName = effectiveWorkspacePath?.trim()
+    ? getUsageFileNameFromPath(effectiveWorkspacePath.trim())
+    : t('usage.unavailable');
   return (
-    <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" data-openbitfun-tab={activeTab} className="session-usage-panel">
-      <header className="session-usage-panel__header" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="header">
-        <div className="session-usage-panel__title-wrap">
-          <div className="session-usage-panel__title-main">
-            <h2>{t('usage.title')}</h2>
-            <div className="session-usage-panel__meta-list" aria-label={t('usage.panel.metadataLabel')}>
-              <UsageMetaRow
-                label={t('usage.meta.generatedAt')}
-                value={formatUsageTimestamp(report.generatedAt, t)}
-              />
-              <UsageMetaRow
-                label={t('usage.meta.sessionId')}
-                value={effectiveSessionId}
-                copyLabel={copiedMeta === 'session' ? t('usage.actions.copied') : t('usage.actions.copySessionId')}
-                copied={copiedMeta === 'session'}
-                onCopy={() => handleCopyMeta(effectiveSessionId, 'session')}
-              />
-              <UsageMetaRow
-                label={t('usage.meta.workspacePath')}
-                value={displayedWorkspacePath}
-                copyLabel={copiedMeta === 'workspace' ? t('usage.actions.copied') : t('usage.actions.copyWorkspacePath')}
-                copied={copiedMeta === 'workspace'}
-                onCopy={() => handleCopyMeta(displayedWorkspacePath, 'workspace')}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="session-usage-panel__header-actions">
-          {report.coverage.level !== 'complete' ? (
-            <Tooltip content={t('usage.coverage.partialNotice')} placement="top">
-              {coverageBadge}
-            </Tooltip>
-          ) : coverageBadge}
-          <UsageExportRedactionToggle
-            checked={redactExportPaths}
-            onChange={handleRedactExportPathsChange}
-            className="session-usage-panel__export-option"
-          />
+    <ScrollArea data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" className="session-usage-panel">
+      <PageHeader
+        className="session-usage-panel__header"
+        data-openbitfun-product-component="session-usage-panel"
+        data-openbitfun-product-part="header"
+        level={2}
+        align="center"
+        title={<span className="session-usage-panel__title">{sessionTitle || t('usage.title')}</span>}
+        action={
           <Tooltip content={copied ? t('usage.actions.copied') : t('usage.actions.copyMarkdown')}>
             <IconButton
-              className="session-usage-panel__copy"
               size="sm"
               onClick={handleCopy}
               aria-label={copied ? t('usage.actions.copied') : t('usage.actions.copyMarkdown')}
               icon={copied ? <Icon name="check-line" size="sm" /> : <Icon name="duplicate" size="sm" />}
             />
           </Tooltip>
-        </div>
-      </header>
-
-      <TabGroup
-        className="session-usage-panel__tabs"
-        data-openbitfun-product-component="session-usage-panel"
-        data-openbitfun-product-part="tabs"
-        aria-label={t('usage.panel.tabsLabel')}
-        value={activeTab}
-        onValueChange={value => setActiveTab(value as SessionUsagePanelTab)}
-        items={TABS.map(tab => ({
-          value: tab,
-          id: tabId(tab),
-          panelId: tabPanelId(tab),
-          label: t(`usage.tabs.${tab}`),
-          tabProps: {
-            className: `session-usage-panel__tab${activeTab === tab ? ' session-usage-panel__tab--active' : ''}`,
-            'data-openbitfun-product-component': 'session-usage-panel',
-            'data-openbitfun-product-part': 'tab',
-            'data-openbitfun-tab': tab,
-            'data-openbitfun-state': activeTab === tab ? 'active' : undefined,
-          },
-        }))}
-      />
-
-      <main
-        className="session-usage-panel__body"
-        data-openbitfun-product-component="session-usage-panel"
-        data-openbitfun-product-part="body"
-        data-openbitfun-tab={activeTab}
-        role="tabpanel"
-        id={tabPanelId(activeTab)}
-        aria-labelledby={tabId(activeTab)}
-      >
-        {activeTab === 'overview' && <UsageOverview report={report} />}
-        {activeTab === 'models' && <UsageModels report={report} sessionId={effectiveSessionId} />}
-        {activeTab === 'tools' && <UsageTools report={report} sessionId={effectiveSessionId} />}
-        {activeTab === 'files' && (
-          <UsageFiles
-            report={report}
-            sessionId={effectiveSessionId}
-            workspacePath={workspacePath ?? report.workspace.pathLabel}
-            redactPaths={redactExportPaths}
-          />
-        )}
-        {activeTab === 'errors' && <UsageErrors report={report} sessionId={effectiveSessionId} />}
-        {activeTab === 'slowest' && <UsageSlowest report={report} sessionId={effectiveSessionId} />}
-      </main>
-    </div>
-  );
-};
-
-function UsageExportRedactionToggle({
-  checked,
-  onChange,
-  className,
-}: {
-  checked: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  className: string;
-}) {
-  const { t } = useTranslation('flow-chat');
-  return (
-    <Tooltip content={t('usage.export.redactPathsHelp')}>
-      <Checkbox
-        appearance="native"
-        size="sm"
-        className={className}
-        checked={checked}
-        onChange={onChange}
-        aria-label={t('usage.export.redactPaths')}
-        label={t('usage.export.redactPaths')}
-      />
-    </Tooltip>
-  );
-}
-
-function UsageMetaRow({
-  label,
-  value,
-  copyLabel,
-  copied = false,
-  onCopy,
-}: {
-  label: string;
-  value: string;
-  copyLabel?: string;
-  copied?: boolean;
-  onCopy?: () => void;
-}) {
-  return (
-    <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="metaRow" className="session-usage-panel__meta-row">
-      <span className="session-usage-panel__meta-label">{label}</span>
-      <OverflowText className="session-usage-panel__meta-value" title={value}>{value}</OverflowText>
-      {onCopy && copyLabel && (
-        <Tooltip content={copyLabel}>
-          <IconButton
-            className="session-usage-panel__meta-copy"
-            size="sm"
-            onClick={onCopy}
-            aria-label={copyLabel}
-            icon={copied ? <Icon name="check-line" size="sm" /> : <Icon name="duplicate" size="sm" />}
-          />
-        </Tooltip>
-      )}
-    </div>
-  );
-}
-
-type UsageTableValueCell = {
-  value: string;
-  help?: string;
-  className?: string;
-};
-
-type UsageTableNodeCell = {
-  node: React.ReactNode;
-  className?: string;
-};
-
-type UsageTableCell = string | UsageTableValueCell | UsageTableNodeCell;
-
-interface UsageTableHeader {
-  id: string;
-  label: string;
-  help?: string;
-}
-
-interface UsageTableRow {
-  id: string;
-  cells: UsageTableCell[];
-}
-
-function UsageValue({
-  value,
-  help,
-  strong = false,
-}: {
-  value: string;
-  help?: string;
-  strong?: boolean;
-}) {
-  const className = help ? 'session-usage-panel__help-value' : undefined;
-  const node = strong
-    ? <strong className={className}>{value}</strong>
-    : <span className={className}>{value}</span>;
-
-  return help ? <Tooltip content={help}>{node}</Tooltip> : node;
-}
-
-function UsageMissingValue({ value, help }: { value: string; help?: string }) {
-  const node = (
-    <span className={`session-usage-panel__missing-value${help ? ' session-usage-panel__missing-value--help' : ''}`}>
-      {value}
-    </span>
-  );
-
-  return help ? <Tooltip content={help}>{node}</Tooltip> : node;
-}
-
-function missingUsageValue(value: string, help?: string): UsageTableCell {
-  return {
-    className: 'session-usage-panel__missing-cell',
-    node: <UsageMissingValue value={value} help={help} />,
-  };
-}
-
-function UsageRowAnchorLink({
-  label,
-  help,
-  sessionId,
-  turnId,
-  turnIndex,
-  itemId,
-}: {
-  label: string;
-  help?: string;
-  sessionId?: string;
-  turnId?: string;
-  turnIndex?: number;
-  itemId?: string;
-}) {
-  const { t } = useTranslation('flow-chat');
-  const displayTurnIndex = typeof turnIndex === 'number' && Number.isFinite(turnIndex)
-    ? getDisplayTurnIndex(turnIndex)
-    : undefined;
-  const canJump = Boolean(sessionId && (turnId || displayTurnIndex));
-
-  if (!canJump) {
-    return <UsageValue value={label} help={help} />;
-  }
-
-  const jumpHelp = t('usage.actions.jumpToTurn');
-  const node = (
-    <Button labelBehavior="static" variant="text" data-overflow-trigger
-      type="button"
-      className="session-usage-panel__row-anchor-link"
-      onClick={() => {
-        const request: FlowChatFocusItemRequest = {
-          sessionId: sessionId as string,
-          source: 'usage-report',
-        };
-        if (turnId) {
-          request.turnId = turnId;
         }
-        if (displayTurnIndex) {
-          request.turnIndex = displayTurnIndex;
-        }
-        if (itemId) {
-          request.itemId = itemId;
-        }
-        globalEventBus.emit(FLOWCHAT_FOCUS_ITEM_EVENT, request, 'SessionUsagePanel');
-      }}
-      aria-label={`${jumpHelp}: ${label}`}
-    ><OverflowText>
-      {label}
-    </OverflowText></Button>
-  );
-
-  return (
-    <Tooltip content={help ? `${help} ${jumpHelp}` : jumpHelp}>
-      {node}
-    </Tooltip>
-  );
-}
-
-function UsageFilePathValue({ pathLabel }: { pathLabel: string }) {
-  const node = (
-    <OverflowText className="session-usage-panel__file-path-display">
-      {getCompactFilePathLabel(pathLabel)}
-    </OverflowText>
-  );
-
-  return <Tooltip content={pathLabel}>{node}</Tooltip>;
-}
-
-function UsageFileTurnIndexesValue({
-  file,
-  sessionId,
-  onJumpToTurn,
-}: {
-  file: SessionUsageReport['files']['files'][number];
-  sessionId?: string;
-  onJumpToTurn: (file: SessionUsageReport['files']['files'][number], rawTurnIndex: number) => void;
-}) {
-  const { t } = useTranslation('flow-chat');
-  const turnIndexes = (file.turnIndexes ?? []).filter(index => Number.isFinite(index));
-
-  if (turnIndexes.length === 0) {
-    return <UsageMissingValue value={t('usage.status.notRecorded')} help={t('usage.help.fileTurnIndexes')} />;
-  }
-
-  const displayIndexes = turnIndexes.map(getDisplayTurnIndex);
-  if (!sessionId) {
-    return (
-      <UsageValue
-        value={displayIndexes.map(index => formatUsageNumber(index, t)).join(', ')}
-        help={t('usage.help.fileTurnIndexes')}
       />
-    );
-  }
 
-  const visibleTurnIndexes = turnIndexes.slice(0, 3);
-  const hiddenCount = Math.max(0, turnIndexes.length - visibleTurnIndexes.length);
-  return (
-    <span className="session-usage-panel__turn-indexes">
-      {visibleTurnIndexes.map(rawTurnIndex => {
-        const displayTurnIndex = getDisplayTurnIndex(rawTurnIndex);
-        const displayTurnText = formatUsageNumber(displayTurnIndex, t);
-        return (
-          <Tooltip key={rawTurnIndex} content={t('usage.actions.jumpToTurn')}>
-            <Button labelBehavior="static" variant="text"
-              type="button"
-              className="session-usage-panel__turn-index-link"
-              onClick={() => onJumpToTurn(file, rawTurnIndex)}
-              aria-label={`${t('usage.actions.jumpToTurn')}: ${displayTurnText}`}
-            >
-              {displayTurnText}
-            </Button>
-          </Tooltip>
-        );
-      })}
-      {hiddenCount > 0 && (
-        <Tooltip content={displayIndexes.map(index => formatUsageNumber(index, t)).join(', ')}>
-          <span className="session-usage-panel__turn-index-overflow">
-            +{formatUsageNumber(hiddenCount, t)}
-          </span>
-        </Tooltip>
-      )}
-    </span>
+      <SessionUsageSummary report={report} workspaceName={workspaceName}
+        onPreviewContext={handlePreviewContext} previewLoading={previewLoading} />
+    </ScrollArea>
   );
-}
-
-function getStableFileToolAnchorId(
-  scope: SessionUsageReport['files']['scope'],
-  file: SessionUsageReport['files']['files'][number]
-): string | undefined {
-  if (
-    scope !== 'tool_inputs_only' ||
-    (file.turnIndexes?.length ?? 0) !== 1 ||
-    (file.operationIds?.length ?? 0) !== 1
-  ) {
-    return undefined;
-  }
-  return file.operationIds?.[0];
-}
-
-function getCompactFilePathLabel(pathLabel: string): string {
-  const normalizedPath = pathLabel.replace(/\\/g, '/');
-  const segments = normalizedPath.split('/').filter(Boolean);
-
-  if (segments.length <= 2) {
-    return normalizedPath;
-  }
-
-  return `.../${segments.slice(-2).join('/')}`;
-}
-
-function UsageOverview({ report }: { report: SessionUsageReport }) {
-  const { t } = useTranslation('flow-chat');
-  const denominator = report.time.activeTurnMs ?? report.time.wallTimeMs;
-  const fileScopeHelp = getFileScopeHelp(report, t);
-  const cacheCoverageHelp = report.tokens.cacheCoverage === 'unavailable'
-    ? t('usage.help.cachedTokens')
-    : report.tokens.cacheCoverage === 'partial'
-      ? t('usage.help.cachedTokensPartial')
-      : undefined;
-  const metrics = [
-    {
-      key: 'wall',
-      icon: { name: 'clock' } as const,
-      label: t('usage.metrics.wall'),
-      value: formatUsageDuration(report.time.wallTimeMs, t),
-      help: t('usage.help.wall'),
-    },
-    {
-      key: 'active',
-      icon: { glyph: Activity },
-      label: t('usage.metrics.active'),
-      value: formatUsageDuration(report.time.activeTurnMs, t),
-      help: t('usage.help.active'),
-    },
-    {
-      key: 'model',
-      icon: { glyph: Database },
-      label: t('usage.metrics.modelTime'),
-      value: formatUsageDuration(report.time.modelMs, t),
-      detail: formatUsagePercent(calculateShare(report.time.modelMs, denominator), t),
-      help: t('usage.help.modelRoundTime'),
-    },
-    {
-      key: 'tool',
-      icon: { glyph: Wrench },
-      label: t('usage.metrics.toolTime'),
-      value: formatUsageDuration(report.time.toolMs, t),
-      detail: formatUsagePercent(calculateShare(report.time.toolMs, denominator), t),
-      help: t('usage.help.toolTime'),
-    },
-    {
-      key: 'tokens',
-      icon: { glyph: Database },
-      label: t('usage.metrics.tokens'),
-      value: formatTokenCount(report.tokens.totalTokens, t),
-    },
-    {
-      key: 'files',
-      icon: { glyph: FileText },
-      label: t('usage.metrics.files'),
-      value: getFileSummaryLabel(report, t),
-      detail: getFileScopeLabel(report.files.scope, t),
-      help: fileScopeHelp,
-    },
-  ];
-
-  return (
-    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
-      {report.coverage.level !== 'complete' && (
-        <div className="session-usage-panel__notice">
-          <Icon glyph={AlertTriangle} size="sm" aria-hidden />
-          <span>{t('usage.coverage.partialNotice')}</span>
-        </div>
-      )}
-
-      <div className="session-usage-panel__overview-grid">
-        {metrics.map(metric => {
-          return (
-            <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="metric" className="session-usage-panel__overview-metric" key={metric.key}>
-              <Icon {...metric.icon} size="md" />
-              <div>
-                <span>{metric.label}</span>
-                <UsageValue value={metric.value} help={metric.help} strong />
-                {metric.detail && <em>{metric.detail}</em>}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <dl className="session-usage-panel__definition-list">
-        <div>
-          <dt>{t('usage.panel.accounting')}</dt>
-          <dd><OverflowText>{getAccountingLabel(report.time.accounting, t)}</OverflowText></dd>
-        </div>
-        <div>
-          <dt>{t('usage.panel.turnScope')}</dt>
-          <dd><OverflowText>{t('usage.card.turns', { count: report.scope.turnCount })}</OverflowText></dd>
-        </div>
-        <div>
-          <dt>{t('usage.panel.cacheCoverage')}</dt>
-          <dd>
-            <UsageValue
-              value={t(`usage.cacheCoverage.${report.tokens.cacheCoverage}`)}
-              help={cacheCoverageHelp}
-            />
-          </dd>
-        </div>
-        <div>
-          <dt>{t('usage.panel.compressions')}</dt>
-          <dd><OverflowText>{formatUsageNumber(report.compression.compactionCount, t)}</OverflowText></dd>
-        </div>
-      </dl>
-
-      <div className="session-usage-panel__privacy">
-        <Icon glyph={ShieldCheck} size="md" aria-hidden />
-        <div>
-          <strong>{t('usage.privacy.title')}</strong>
-          <span>{t('usage.privacy.summary')}</span>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function UsageModels({ report, sessionId }: { report: SessionUsageReport; sessionId?: string }) {
-  const { t } = useTranslation('flow-chat');
-  const hasModelDuration = report.models.some(model => model.durationMs !== undefined);
-  const headers: UsageTableHeader[] = [
-    { id: 'model', label: t('usage.table.model') },
-    { id: 'calls', label: t('usage.table.calls') },
-    ...(hasModelDuration ? [{ id: 'duration', label: t('usage.table.duration') }] : []),
-    { id: 'input', label: t('usage.table.input') },
-    { id: 'output', label: t('usage.table.output') },
-    { id: 'cached', label: t('usage.table.cached') },
-    { id: 'hitRate', label: t('usage.table.hitRate') },
-  ];
-  return (
-    <UsageTable
-      empty={report.models.length === 0}
-      emptyLabel={t('usage.empty.models')}
-      emptyDescription={t('usage.empty.modelsDescription')}
-      headers={headers}
-      rows={report.models.map((model, index) => {
-        const cached = formatTokenCount(model.cachedTokens, t);
-        const source = model.modelIdSource ?? (model.modelId === 'unknown_model' ? 'legacy_missing' : undefined);
-        const modelHelp = getModelHelp(source, t, model.modelId);
-        const modelLabel = getModelLabel(model.modelId, t, source);
-        const cells: UsageTableCell[] = [
-          {
-            node: (
-              <UsageRowAnchorLink
-                label={modelLabel}
-                help={modelHelp}
-                sessionId={sessionId}
-                turnId={model.sampleTurnId}
-                turnIndex={model.sampleTurnIndex}
-              />
-            ),
-          },
-          formatUsageNumber(model.callCount, t),
-        ];
-        if (hasModelDuration) {
-          cells.push(
-            model.durationMs === undefined
-              ? missingUsageValue(t('usage.status.timingNotRecorded'), t('usage.help.modelRoundTime'))
-              : formatUsageDuration(model.durationMs, t)
-          );
-        }
-        cells.push(
-          formatTokenCount(model.inputTokens, t),
-          formatTokenCount(model.outputTokens, t),
-          report.tokens.cacheCoverage === 'unavailable'
-            ? { value: t('usage.status.cacheNotReported'), help: t('usage.help.cachedTokens') }
-            : cached,
-          formatHitRatePercent(model.cacheHitRate, t),
-        );
-        return {
-          id: `model-${index}-${model.modelId}`,
-          cells,
-        };
-      })}
-    />
-  );
-}
-
-function UsageTools({ report, sessionId }: { report: SessionUsageReport; sessionId?: string }) {
-  const { t } = useTranslation('flow-chat');
-  const hasExecutionDuration = report.tools.some(tool => tool.executionMs !== undefined);
-  const headers: UsageTableHeader[] = [
-    { id: 'tool', label: t('usage.table.tool') },
-    { id: 'category', label: t('usage.table.category') },
-    { id: 'calls', label: t('usage.table.calls') },
-    { id: 'success', label: t('usage.table.success') },
-    { id: 'errors', label: t('usage.table.errors') },
-    { id: 'duration', label: t('usage.table.toolDuration'), help: t('usage.help.toolDuration') },
-    { id: 'p95', label: t('usage.table.toolP95Duration'), help: t('usage.help.toolP95') },
-    ...(hasExecutionDuration
-      ? [{ id: 'execution', label: t('usage.table.toolExecutionDuration'), help: t('usage.help.toolExecution') }]
-      : []),
-  ];
-  return (
-    <UsageTable
-      empty={report.tools.length === 0}
-      emptyLabel={t('usage.empty.tools')}
-      emptyDescription={t('usage.empty.toolsDescription')}
-      headers={headers}
-      rows={report.tools.map((tool, index) => {
-        const duration = formatUsageDuration(tool.durationMs, t);
-        const p95 = formatUsageDuration(tool.p95DurationMs, t);
-        const execution = formatUsageDuration(tool.executionMs, t);
-        const cells: UsageTableCell[] = [
-          {
-            node: (
-              <UsageRowAnchorLink
-                label={tool.redacted ? getRedactedLabel(t) : tool.toolName}
-                sessionId={sessionId}
-                turnId={tool.sampleTurnId}
-                turnIndex={tool.sampleTurnIndex}
-                itemId={tool.sampleItemId}
-              />
-            ),
-          },
-          getToolCategoryLabel(tool.category, t),
-          formatUsageNumber(tool.callCount, t),
-          formatUsageNumber(tool.successCount, t),
-          formatUsageNumber(tool.errorCount, t),
-          tool.durationMs === undefined
-            ? missingUsageValue(t('usage.status.timingNotRecorded'), t('usage.help.toolDuration'))
-            : duration,
-          tool.p95DurationMs === undefined
-            ? missingUsageValue(
-              tool.durationMs === undefined
-                ? t('usage.status.timingNotRecorded')
-                : t('usage.status.p95SampleInsufficient'),
-              t('usage.help.toolP95')
-            )
-            : p95,
-        ];
-        if (hasExecutionDuration) {
-          cells.push(
-            tool.executionMs === undefined
-              ? missingUsageValue(t('usage.status.timingNotRecorded'), t('usage.help.toolExecution'))
-              : execution
-          );
-        }
-        return {
-          id: tool.redacted
-            ? `tool-${index}-redacted-${tool.category}`
-            : `tool-${index}-${tool.category}-${tool.toolName}`,
-          cells,
-        };
-      })}
-    />
-  );
-}
-
-function UsageFiles({
-  report,
-  sessionId,
-  workspacePath,
-  redactPaths,
-}: {
-  report: SessionUsageReport;
-  sessionId?: string;
-  workspacePath?: string;
-  redactPaths: boolean;
-}) {
-  const { t } = useTranslation('flow-chat');
-  const fileScopeHelp = getFileScopeHelp(report, t);
-  const [openingDiffKey, setOpeningDiffKey] = useState<string | null>(null);
-
-  const handleJumpToFileTurn = useCallback((
-    file: SessionUsageReport['files']['files'][number],
-    rawTurnIndex: number
-  ) => {
-    const targetSessionId = file.sessionId ?? sessionId;
-    if (!targetSessionId) {
-      return;
-    }
-
-    const turnIndex = getDisplayTurnIndex(rawTurnIndex);
-    const request: FlowChatFocusItemRequest = {
-      sessionId: targetSessionId,
-      turnIndex,
-      source: 'usage-report',
-    };
-    const itemId = getStableFileToolAnchorId(report.files.scope, file);
-    if (itemId) {
-      request.itemId = itemId;
-    }
-    globalEventBus.emit(FLOWCHAT_FOCUS_ITEM_EVENT, request, 'SessionUsagePanel');
-  }, [report.files.scope, sessionId]);
-
-  const handleOpenFileDiff = useCallback(async (file: SessionUsageReport['files']['files'][number]) => {
-    if (!sessionId || file.redacted || report.files.scope !== 'snapshot_summary') {
-      return;
-    }
-
-    const resolvedPath = resolveUsageFilePath(file.pathLabel, workspacePath);
-    const operationId = file.operationIds?.[0];
-    const diffKey = `${resolvedPath}:${operationId ?? ''}`;
-    setOpeningDiffKey(diffKey);
-
-    try {
-      const diff = await snapshotAPI.getOperationDiff(
-        sessionId,
-        resolvedPath,
-        operationId,
-      );
-      const diffPath = diff.filePath || resolvedPath;
-      createDiffEditorTab(
-        diffPath,
-        getUsageFileName(diffPath),
-        diff.originalContent || '',
-        diff.modifiedContent || '',
-        true,
-        'agent',
-        workspacePath,
-        diff.anchorLine ? Number(diff.anchorLine) : undefined,
-        undefined,
-        {
-          titleKind: 'diff',
-          duplicateKeyPrefix: 'diff',
-          workspaceId: sessionWorkspaceId(sessionId),
-        },
-      );
-    } catch (error) {
-      log.warn('Failed to open usage report file diff', {
-        sessionId,
-        filePath: resolvedPath,
-        operationId,
-        error,
-      });
-    } finally {
-      setOpeningDiffKey(null);
-    }
-  }, [report.files.scope, sessionId, workspacePath]);
-
-  const rows = useMemo(() => report.files.files.map((file, index) => {
-    const operationId = file.operationIds?.[0];
-    const resolvedPath = resolveUsageFilePath(file.pathLabel, workspacePath);
-    const displayPathLabel = getUsageDisplayPathLabel(file.pathLabel, t, {
-      redactPaths,
-      keepFileName: true,
-    });
-    const diffKey = `${resolvedPath}:${operationId ?? ''}`;
-    const canOpenDiff = canOpenUsageFileDiff(report.files.scope, file, sessionId);
-    const actionCell: UsageTableNodeCell = {
-      className: 'session-usage-panel__sticky-action-cell',
-      node: canOpenDiff ? (
-        <Tooltip content={t('usage.actions.openFileDiff')}>
-          <IconButton
-            className="session-usage-panel__table-action"
-            size="sm"
-            onClick={() => void handleOpenFileDiff(file)}
-            disabled={openingDiffKey === diffKey}
-            aria-label={t('usage.actions.openFileDiff')}
-            icon={<GitCompare size={13} />}
-          />
-        </Tooltip>
-      ) : (
-        <Tooltip content={t('usage.help.fileDiffUnavailable')}>
-          <span className="session-usage-panel__table-action-placeholder">-</span>
-        </Tooltip>
-      ),
-    };
-
-    return {
-      id: file.redacted
-        ? `file-${index}-redacted-${file.operationCount}`
-        : `file-${index}-${file.pathLabel}-${(file.operationIds ?? []).join('|')}`,
-      cells: [
-      file.redacted
-        ? getRedactedLabel(t)
-        : {
-          node: <UsageFilePathValue pathLabel={displayPathLabel} />,
-          className: 'session-usage-panel__file-path-cell',
-        },
-        formatUsageNumber(file.operationCount, t),
-        formatUsageNumber(file.addedLines, t),
-        formatUsageNumber(file.deletedLines, t),
-        {
-          node: (
-            <UsageFileTurnIndexesValue
-              file={file}
-              sessionId={file.sessionId ?? sessionId}
-              onJumpToTurn={handleJumpToFileTurn}
-            />
-          ),
-        },
-        actionCell,
-      ],
-    };
-  }), [handleJumpToFileTurn, handleOpenFileDiff, openingDiffKey, redactPaths, report.files.files, report.files.scope, sessionId, t, workspacePath]);
-
-  return (
-    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
-      <div className="session-usage-panel__scope-line">
-        <span>{t('usage.panel.fileScope')}</span>
-        <UsageValue
-          value={report.files.scope === 'unavailable' ? getFileSummaryLabel(report, t) : getFileScopeLabel(report.files.scope, t)}
-          help={fileScopeHelp}
-          strong
-        />
-      </div>
-      <UsageTable
-        empty={report.files.files.length === 0}
-        emptyLabel={getFileSummaryLabel(report, t)}
-        emptyDescription={fileScopeHelp ?? t('usage.empty.filesDescription')}
-        headers={[
-          { id: 'file', label: t('usage.table.file') },
-          { id: 'operations', label: t('usage.table.operations') },
-          { id: 'added', label: t('usage.table.added') },
-          { id: 'deleted', label: t('usage.table.deleted') },
-          { id: 'turns', label: t('usage.table.turns') },
-          { id: 'actions', label: t('usage.table.actions') },
-        ]}
-        rows={rows}
-        tableClassName="session-usage-panel__table--files"
-      />
-    </section>
-  );
-}
-
-function UsageErrors({ report, sessionId }: { report: SessionUsageReport; sessionId?: string }) {
-  const { t } = useTranslation('flow-chat');
-  return (
-    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
-      <div className="session-usage-panel__scope-line">
-        <span>{t('usage.panel.errorScope')}</span>
-        <UsageValue
-          value={formatUsageNumber(report.errors.totalErrors, t)}
-          help={t('usage.help.errors')}
-          strong
-        />
-      </div>
-      <p className="session-usage-panel__section-help">{t('usage.help.errors')}</p>
-      <dl className="session-usage-panel__definition-list">
-        <div>
-          <dt>{t('usage.metrics.errors')}</dt>
-          <dd>
-            <UsageValue
-              value={formatUsageNumber(report.errors.totalErrors, t)}
-              help={t('usage.help.errors')}
-            />
-          </dd>
-        </div>
-        <div>
-          <dt>{t('usage.panel.toolErrors')}</dt>
-          <dd>
-            <UsageValue
-              value={formatUsageNumber(report.errors.toolErrors, t)}
-              help={t('usage.help.toolErrors')}
-            />
-          </dd>
-        </div>
-        <div>
-          <dt>{t('usage.panel.modelErrors')}</dt>
-          <dd>
-            <UsageValue
-              value={formatUsageNumber(report.errors.modelErrors, t)}
-              help={t('usage.help.modelErrors')}
-            />
-          </dd>
-        </div>
-      </dl>
-      <UsageTable
-        empty={report.errors.examples.length === 0}
-        emptyLabel={t('usage.empty.errors')}
-        emptyDescription={t('usage.empty.errorsDescription')}
-        emptyHelp={t('usage.help.errorExamples')}
-        headers={[
-          { id: 'label', label: t('usage.table.label') },
-          { id: 'count', label: t('usage.table.count') },
-        ]}
-        rows={report.errors.examples.map((example, index) => ({
-          id: example.redacted
-            ? `error-${index}-redacted-${example.count}`
-            : `error-${index}-${example.label}-${example.count}`,
-          cells: [
-            {
-              node: (
-                <UsageRowAnchorLink
-                  label={example.redacted ? getRedactedLabel(t) : example.label}
-                  help={t('usage.help.errorExampleRow')}
-                  sessionId={sessionId}
-                  turnId={example.sampleTurnId}
-                  turnIndex={example.sampleTurnIndex}
-                  itemId={example.sampleItemId}
-                />
-              ),
-            },
-            {
-              value: formatUsageNumber(example.count, t),
-              help: t('usage.help.errorExampleCount'),
-            },
-          ],
-        }))}
-      />
-    </section>
-  );
-}
-
-function canOpenUsageFileDiff(
-  scope: SessionUsageReport['files']['scope'],
-  file: SessionUsageReport['files']['files'][number],
-  sessionId?: string,
-): boolean {
-  return Boolean(sessionId && scope === 'snapshot_summary' && !file.redacted && file.pathLabel);
-}
-
-function resolveUsageFilePath(pathLabel: string, workspacePath?: string): string {
-  if (!workspacePath || isAbsolutePathLike(pathLabel)) {
-    return pathLabel;
-  }
-  return `${workspacePath.replace(/[\\/]+$/, '')}/${pathLabel.replace(/^[\\/]+/, '')}`;
-}
-
-function isAbsolutePathLike(value: string): boolean {
-  return /^[A-Za-z]:[\\/]/.test(value) || value.startsWith('/') || value.startsWith('\\\\');
-}
-
-function getUsageFileName(filePath: string): string {
-  return filePath.split(/[\\/]/).pop() || filePath;
-}
-
-function UsageSlowest({ report, sessionId }: { report: SessionUsageReport; sessionId?: string }) {
-  const { t } = useTranslation('flow-chat');
-  const handleJumpToSpan = useCallback((span: SessionUsageReport['slowest'][number]) => {
-    if (!sessionId) return;
-
-    if (!span.turnId && typeof span.turnIndex !== 'number') return;
-
-    const request: FlowChatFocusItemRequest = {
-      sessionId,
-      source: 'usage-report',
-    };
-    if (span.turnId) {
-      request.turnId = span.turnId;
-    }
-    if (typeof span.turnIndex === 'number' && Number.isFinite(span.turnIndex)) {
-      request.turnIndex = getDisplayTurnIndex(span.turnIndex);
-    }
-    if (span.itemId) {
-      request.itemId = span.itemId;
-    }
-    globalEventBus.emit(FLOWCHAT_FOCUS_ITEM_EVENT, request, 'SessionUsagePanel');
-  }, [sessionId]);
-
-  return (
-    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
-      <div className="session-usage-panel__scope-line">
-        <span>{t('usage.sections.slowest')}</span>
-        <UsageValue
-          value={formatUsageNumber(report.slowest.length, t)}
-          help={t('usage.help.slowestSpans')}
-          strong
-        />
-      </div>
-      <p className="session-usage-panel__section-help">{t('usage.help.slowestSpans')}</p>
-      <UsageTable
-        empty={report.slowest.length === 0}
-        emptyLabel={t('usage.empty.slowest')}
-        emptyDescription={t('usage.empty.slowestDescription')}
-        emptyHelp={t('usage.help.slowestSpans')}
-        headers={[
-          { id: 'label', label: t('usage.table.label') },
-          { id: 'kind', label: t('usage.table.kind') },
-          { id: 'duration', label: t('usage.table.duration') },
-        ]}
-        rows={report.slowest.map((span, index) => {
-          const spanHelp = getSlowSpanHelp(span, t);
-          const spanLabel = getSlowSpanLabel(span, t);
-          const detailRows = getSlowSpanDetailRows(span, t);
-          const canJumpToSpan = Boolean(
-            sessionId &&
-            (span.turnId || (typeof span.turnIndex === 'number' && Number.isFinite(span.turnIndex)))
-          );
-          const jumpHelp = t('usage.actions.jumpToTurn');
-          const labelCell: UsageTableCell = canJumpToSpan
-            ? {
-              node: (
-                <div className="session-usage-panel__slow-span">
-                  <Tooltip content={spanHelp ? `${spanHelp} ${jumpHelp}` : jumpHelp}>
-                    <Button labelBehavior="static" variant="text" data-overflow-trigger
-                      type="button"
-                      className="session-usage-panel__turn-link"
-                      onClick={() => handleJumpToSpan(span)}
-                      aria-label={`${jumpHelp}: ${spanLabel}`}
-                    ><OverflowText>
-                      {spanLabel}
-                    </OverflowText></Button>
-                  </Tooltip>
-                  {detailRows.length > 0 && (
-                    <dl className="session-usage-panel__slow-span-details">
-                      {detailRows.map(row => (
-                        <div key={row.label}>
-                          <dt>{row.label}</dt>
-                          <dd>{row.value}</dd>
-                        </div>
-                      ))}
-                    </dl>
-                  )}
-                </div>
-              ),
-            }
-            : spanHelp
-              ? { value: spanLabel, help: spanHelp }
-              : spanLabel;
-          return {
-            id: `slowest-${index}-${span.kind}-${span.turnId ?? spanLabel}`,
-            cells: [
-              labelCell,
-              t(`usage.slowestKinds.${span.kind === 'model' ? 'modelCall' : span.kind}`),
-              formatUsageDuration(span.durationMs, t),
-            ],
-          };
-        })}
-      />
-    </section>
-  );
-}
-
-function getSlowSpanDetailRows(
-  span: SessionUsageReport['slowest'][number],
-  t: UsageTranslator
-): Array<{ label: string; value: string }> {
-  if (span.kind !== 'tool' || span.redacted) {
-    return [];
-  }
-
-  const rows: Array<{ label: string; value: string }> = [];
-  if (span.inputSummary) {
-    rows.push({
-      label: t('usage.slowest.details.input'),
-      value: span.inputSummary,
-    });
-  }
-  if (span.status) {
-    rows.push({
-      label: t('usage.slowest.details.status'),
-      value: getSlowToolStatusLabel(span.status, t),
-    });
-  }
-  if (typeof span.exitCode === 'number') {
-    rows.push({
-      label: t('usage.slowest.details.exitCode'),
-      value: String(span.exitCode),
-    });
-  }
-  if (span.timedOut === true) {
-    rows.push({
-      label: t('usage.slowest.details.timedOut'),
-      value: t('usage.status.timedOut'),
-    });
-  }
-  if (typeof span.executionMs === 'number') {
-    rows.push({
-      label: t('usage.slowest.details.execution'),
-      value: formatUsageDuration(span.executionMs, t),
-    });
-  }
-  if (span.errorSummary) {
-    rows.push({
-      label: t('usage.slowest.details.error'),
-      value: span.errorSummary,
-    });
-  }
-  return rows;
-}
-
-function getSlowToolStatusLabel(
-  status: string,
-  t: UsageTranslator
-): string {
-  if (status === 'failed') {
-    return t('shared:statuses.failed');
-  }
-  if (status === 'succeeded') {
-    return t('shared:statuses.done');
-  }
-  if (status === 'timed_out') {
-    return t('usage.status.timedOut');
-  }
-  return status;
-}
-
-interface UsageTableProps {
-  empty: boolean;
-  emptyLabel: string;
-  emptyDescription?: string;
-  emptyHelp?: string;
-  headers: UsageTableHeader[];
-  rows: UsageTableRow[];
-  tableClassName?: string;
-}
-
-function UsageTable({ empty, emptyLabel, emptyDescription, emptyHelp, headers, rows, tableClassName }: UsageTableProps) {
-  const { t } = useTranslation('flow-chat');
-  const [expanded, setExpanded] = useState(false);
-
-  if (empty) {
-    return (
-      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="empty" className="session-usage-panel__empty">
-        <UsageValue value={emptyLabel} help={emptyHelp} strong />
-        {emptyDescription && <span>{emptyDescription}</span>}
-      </div>
-    );
-  }
-
-  const shouldLimitRows = rows.length > MAX_USAGE_TABLE_ROWS;
-  const visibleRows = shouldLimitRows && !expanded
-    ? rows.slice(0, MAX_USAGE_TABLE_ROWS)
-    : rows;
-
-  return (
-    <>
-      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="table" className="session-usage-panel__table-wrap">
-        <table className={['session-usage-panel__table', tableClassName].filter(Boolean).join(' ')}>
-          <thead>
-            <tr>
-              {headers.map(header => (
-                <th key={header.id}>
-                  <UsageTableHeaderLabel header={header} />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {visibleRows.map(row => (
-              <tr key={row.id}>
-                {row.cells.map((cell, cellIndex) => (
-                  <td
-                    key={`${row.id}-${headers[cellIndex]?.id ?? cellIndex}`}
-                    className={typeof cell === 'string' ? undefined : cell.className}
-                  >
-                    {typeof cell === 'string'
-                      ? <OverflowText>{cell}</OverflowText>
-                      : 'node' in cell
-                        ? cell.node
-                        : <UsageValue value={cell.value} help={cell.help} />}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      {shouldLimitRows && (
-        <div className="session-usage-panel__table-footer">
-          <span>
-            {t('usage.table.rowLimitSummary', {
-              visible: visibleRows.length,
-              total: rows.length,
-            })}
-          </span>
-          <Button labelBehavior="static" variant="text"
-            type="button"
-            className="session-usage-panel__table-expand"
-            onClick={() => setExpanded(value => !value)}
-          >
-            {expanded
-              ? t('usage.table.showFewerRows', { count: MAX_USAGE_TABLE_ROWS })
-              : t('usage.table.showAllRows', { count: rows.length })}
-          </Button>
-        </div>
-      )}
-    </>
-  );
-}
-
-function UsageTableHeaderLabel({ header }: { header: UsageTableHeader }) {
-  if (!header.help) {
-    return <span>{header.label}</span>;
-  }
-
-  return <UsageValue value={header.label} help={header.help} />;
-}
+};
 
 SessionUsagePanel.displayName = 'SessionUsagePanel';
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.tsx
index a6c5321c3b..823260a83b 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.tsx
@@ -32,7 +32,6 @@ import {
   subscribeUsageExportRedactPathsPreference,
 } from './usageReportUtils';
 import { SessionUsageEmptyState } from './SessionUsageEmptyState';
-import type { SessionUsagePanelTab } from './sessionUsagePanelTypes';
 import './SessionUsageReportCard.scss';
 
 const SUMMARY_LIST_LIMIT = 3;
@@ -43,7 +42,7 @@ interface SessionUsageReportCardProps {
   generatedAt?: number;
   isLoading?: boolean;
   compact?: boolean;
-  onOpenDetails?: (report: SessionUsageReport, initialTab?: SessionUsagePanelTab) => void;
+  onOpenDetails?: (report: SessionUsageReport) => void;
 }
 
 const UsageMiniListFilePathLabel = React.forwardRef<HTMLSpanElement, { pathLabel: string }>(
@@ -94,13 +93,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
     }
   }, [onOpenDetails, report]);
 
-  const handleOpenSectionDetails = useCallback((initialTab: SessionUsagePanelTab) => (event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (report) {
-      onOpenDetails?.(report, initialTab);
-    }
-  }, [onOpenDetails, report]);
-
   const topModels = useMemo(() => report ? getTopModels(report, SUMMARY_LIST_LIMIT) : [], [report]);
   const topTools = useMemo(() => report ? getTopTools(report, SUMMARY_LIST_LIMIT) : [], [report]);
   const topFiles = useMemo(() => report ? getTopFiles(report, SUMMARY_LIST_LIMIT) : [], [report]);
@@ -225,13 +217,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
         help: t('usage.help.errors'),
       },
     ];
-    const showAllTools = buildShowAllAction({
-      totalCount: report.tools.length,
-      visibleCount: topTools.length,
-      sectionLabel: t('usage.sections.tools'),
-      t,
-      onClick: onOpenDetails ? handleOpenSectionDetails('tools') : undefined,
-    });
 
     return (
       <div
@@ -329,21 +314,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
         <section className="session-usage-report-card__compact-tools" data-openbitfun-component="session-usage-report-card" data-openbitfun-part="lists">
           <div className="session-usage-report-card__compact-tools-header">
             <h3>{t('usage.sections.tools')}</h3>
-            {showAllTools && (
-              <Tooltip content={showAllTools.ariaLabel}>
-                <Button
-                  type="button"
-                  variant="text"
-                  size="sm"
-                  trailingIcon={<Icon name="chevron-right" size="sm" aria-hidden />}
-                  onClick={showAllTools.onClick}
-                  data-testid="session-usage-tools-details"
-                  aria-label={showAllTools.ariaLabel}
-                >
-                  {showAllTools.label}
-                </Button>
-              </Tooltip>
-            )}
           </div>
           <div className="session-usage-report-card__compact-tool-list" data-openbitfun-component="session-usage-report-card" data-openbitfun-part="list">
             {topTools.length === 0 ? (
@@ -502,13 +472,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
       <div className="session-usage-report-card__lists" data-openbitfun-component="session-usage-report-card" data-openbitfun-part="lists">
         <UsageMiniList
           title={t('usage.sections.models')}
-          showAll={buildShowAllAction({
-            totalCount: report.models.length,
-            visibleCount: topModels.length,
-            sectionLabel: t('usage.sections.models'),
-            t,
-            onClick: onOpenDetails ? handleOpenSectionDetails('models') : undefined,
-          })}
           items={topModels.map(model => {
             const source = model.modelIdSource ?? (model.modelId === 'unknown_model' ? 'legacy_missing' : undefined);
             const help = getModelHelp(source, t, model.modelId);
@@ -527,13 +490,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
         />
         <UsageMiniList
           title={t('usage.sections.tools')}
-          showAll={buildShowAllAction({
-            totalCount: report.tools.length,
-            visibleCount: topTools.length,
-            sectionLabel: t('usage.sections.tools'),
-            t,
-            onClick: onOpenDetails ? handleOpenSectionDetails('tools') : undefined,
-          })}
           items={topTools.map(tool => ({
             label: tool.redacted ? getRedactedLabel(t) : tool.toolName,
             value: t('usage.card.calls', { count: tool.callCount }),
@@ -544,13 +500,6 @@ export const SessionUsageReportCard: React.FC<SessionUsageReportCardProps> = ({
         />
         <UsageMiniList
           title={t('usage.sections.files')}
-          showAll={buildShowAllAction({
-            totalCount: report.files.files.length,
-            visibleCount: topFiles.length,
-            sectionLabel: t('usage.sections.files'),
-            t,
-            onClick: onOpenDetails ? handleOpenSectionDetails('files') : undefined,
-          })}
           items={topFiles.map(file => {
             const pathLabel = getUsageDisplayPathLabel(file.pathLabel, t, {
               redactPaths: redactExportPaths,
@@ -646,15 +595,8 @@ type UsageMiniListLabel = string | {
   help?: string;
 };
 
-type UsageMiniListShowAll = {
-  label: string;
-  ariaLabel: string;
-  onClick: (event: React.MouseEvent) => void;
-};
-
 interface UsageMiniListProps {
   title: string;
-  showAll?: UsageMiniListShowAll;
   items: Array<{
     label: UsageMiniListLabel;
     value: string;
@@ -664,29 +606,6 @@ interface UsageMiniListProps {
   emptyDescription?: string;
 }
 
-function buildShowAllAction({
-  totalCount,
-  visibleCount,
-  sectionLabel,
-  t,
-  onClick,
-}: {
-  totalCount: number;
-  visibleCount: number;
-  sectionLabel: string;
-  t: (key: string, options?: Record<string, unknown>) => string;
-  onClick?: (event: React.MouseEvent) => void;
-}): UsageMiniListShowAll | undefined {
-  if (!onClick || totalCount <= visibleCount) {
-    return undefined;
-  }
-  return {
-    label: t('usage.actions.viewAllSection', { count: totalCount }),
-    ariaLabel: t('usage.actions.openSectionDetails', { section: sectionLabel }),
-    onClick,
-  };
-}
-
 function getMiniListLabelText(label: UsageMiniListLabel): string {
   if (typeof label !== 'string' && 'node' in label) {
     return label.text;
@@ -747,25 +666,11 @@ function formatSignedFileLineCount(
   return typeof value === 'number' && Number.isFinite(value) ? `${sign}${formatted}` : formatted;
 }
 
-function UsageMiniList({ title, showAll, items, emptyLabel, emptyDescription }: UsageMiniListProps) {
+function UsageMiniList({ title, items, emptyLabel, emptyDescription }: UsageMiniListProps) {
   return (
     <div data-openbitfun-component="session-usage-report-card" data-openbitfun-part="list" className="session-usage-report-card__mini-list">
       <div className="session-usage-report-card__mini-list-header">
         <div className="session-usage-report-card__mini-list-title">{title}</div>
-        {showAll && (
-          <Tooltip content={showAll.ariaLabel}>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              trailingIcon={<Icon name="chevron-right" size="xs" aria-hidden />}
-              onClick={showAll.onClick}
-              aria-label={showAll.ariaLabel}
-            >
-              {showAll.label}
-            </Button>
-          </Tooltip>
-        )}
       </div>
       {items.length === 0 ? (
         <div className="session-usage-report-card__mini-list-empty">
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageSummary.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageSummary.tsx
new file mode 100644
index 0000000000..840ceaef39
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageSummary.tsx
@@ -0,0 +1,227 @@
+import { useState, type FocusEvent, type ReactNode } from 'react';
+import { Empty, Icon, IconButton, OverflowText, PageHeader, Tooltip } from '@openbitfun/ui';
+import { ChartPie, ExternalLink } from 'lucide-react';
+import { useI18n } from '@/infrastructure/i18n';
+import type { SessionUsageReport, UsageContextBreakdown, UsageContextCategory } from '@/infrastructure/api/service-api/SessionAPI';
+import { formatTokenCount, formatUsageNumber, formatUsagePercent } from './usageReportUtils';
+
+const CONTEXT_CATEGORIES = [
+  'systemPrompt', 'toolDefinitions', 'rules', 'skills', 'mcpTools',
+  'subagentDefinitions', 'summarizedConversation', 'conversation',
+] as const satisfies readonly (keyof UsageContextBreakdown)[];
+
+const isCount = (value: number | undefined): value is number => (
+  typeof value === 'number' && Number.isSafeInteger(value) && value >= 0
+);
+
+interface UsageSeries {
+  key: string;
+  parentKey?: string;
+  label: string;
+  value?: number;
+  formattedValue?: ReactNode;
+  share?: number;
+  action?: ReactNode;
+  shareSuffix?: ReactNode;
+}
+
+function useSeriesHighlight(rows: UsageSeries[]) {
+  const [hoveredKey, setHoveredKey] = useState<string | null>(null);
+  const [focusedKey, setFocusedKey] = useState<string | null>(null);
+  const activeKey = [hoveredKey, focusedKey].find(key => (
+    rows.some(row => row.key === key && (row.share ?? 0) > 0)
+  ));
+  const activeRow = rows.find(row => row.key === activeKey);
+
+  const highlight = (row: UsageSeries) => {
+    const hasSegment = (row.share ?? 0) > 0;
+    const isActive = activeRow !== undefined && (activeKey === row.key
+      || row.parentKey === activeKey || activeRow.parentKey === row.key);
+    return {
+      'data-usage-active': isActive || undefined,
+      'data-usage-muted': activeRow !== undefined && !isActive || undefined,
+      onMouseEnter: hasSegment ? () => setHoveredKey(row.key) : undefined,
+      onMouseLeave: hasSegment ? () => setHoveredKey(null) : undefined,
+      onFocus: hasSegment ? () => setFocusedKey(row.key) : undefined,
+      onBlur: hasSegment ? (event: FocusEvent<Element>) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setFocusedKey(null);
+      } : undefined,
+    };
+  };
+  return { activeRow, highlight };
+}
+
+function UsageLegend({ rows, highlight, className = '', showShares = true }: {
+  rows: UsageSeries[];
+  highlight: ReturnType<typeof useSeriesHighlight>['highlight'];
+  className?: string;
+  showShares?: boolean;
+}) {
+  const { t } = useI18n('flow-chat');
+  return (
+    <dl className={`session-usage-panel__legend ${className}`}>
+      {rows.map(row => (
+        <div className="session-usage-panel__legend-row" key={row.key} data-usage-category={row.key} data-usage-parent={row.parentKey}
+          tabIndex={(row.share ?? 0) > 0 ? 0 : undefined} {...highlight(row)}>
+          <dt>
+            <span aria-hidden="true" className={`session-usage-panel__swatch session-usage-panel__series--${row.key}`} />
+            <OverflowText>{row.label}</OverflowText>
+            {row.action && <span className="session-usage-panel__legend-action">{row.action}</span>}
+          </dt>
+          <dd>
+            <strong>{row.formattedValue ?? formatTokenCount(row.value, t)}</strong>
+            {showShares && row.share !== undefined ? (
+              <span className="session-usage-panel__legend-share" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="legendShare">
+                {formatUsagePercent(row.share * 100, t)}{row.shareSuffix}
+              </span>
+            ) : row.shareSuffix}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Context composition and cumulative provider usage intentionally have independent denominators. */
+export function SessionUsageSummary({ report, workspaceName, onPreviewContext, previewLoading }: {
+  report: SessionUsageReport;
+  workspaceName: string;
+  onPreviewContext: (category: UsageContextCategory) => void;
+  previewLoading: UsageContextCategory | null;
+}) {
+  const { t } = useI18n('flow-chat');
+  const context = report.context;
+  const hasContext = !!context && CONTEXT_CATEGORIES.every(key => isCount(context[key]));
+  const contextTotal = hasContext ? CONTEXT_CATEGORIES.reduce((sum, key) => sum + context[key], 0) : 0;
+  const hasContextDistribution = hasContext && Number.isSafeInteger(contextTotal) && contextTotal > 0;
+  let offset = 0;
+  const contextRows = CONTEXT_CATEGORIES.map(key => {
+    const share = hasContextDistribution ? context![key] / contextTotal : undefined;
+    const row = { key, label: t(`usage.context.categories.${key}`), value: hasContext ? context![key] : undefined, share, offset,
+      action: key !== 'summarizedConversation' && key !== 'conversation' ? (
+        <Tooltip content={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}>
+          <IconButton size="xs" icon={<Icon glyph={ExternalLink} size="xs" />}
+            aria-label={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}
+            loading={previewLoading === key} disabled={previewLoading !== null && previewLoading !== key}
+            onClick={() => onPreviewContext(key)} />
+        </Tooltip>
+      ) : undefined };
+    offset += (share ?? 0) * 100;
+    return row;
+  });
+  const { inputTokens, outputTokens, totalTokens, cachedTokens, cacheCoverage } = report.tokens;
+  const hasTokenDistribution = isCount(inputTokens) && isCount(outputTokens) && isCount(totalTokens)
+    && inputTokens + outputTokens === totalTokens && totalTokens > 0;
+  const cacheValue = cacheCoverage !== 'unavailable' && isCount(cachedTokens) && isCount(inputTokens)
+    && cachedTokens <= inputTokens ? cachedTokens : undefined;
+  const tokenRows: UsageSeries[] = [
+    { key: 'input', label: t('usage.table.input'), value: isCount(inputTokens) ? inputTokens : undefined,
+      share: hasTokenDistribution ? inputTokens / totalTokens : undefined },
+    { key: 'output', label: t('usage.table.output'), value: isCount(outputTokens) ? outputTokens : undefined,
+      share: hasTokenDistribution ? outputTokens / totalTokens : undefined },
+  ];
+  const cacheRate = cacheValue !== undefined && isCount(inputTokens) && inputTokens > 0
+    ? cacheValue / inputTokens : undefined;
+  const cacheRateLabel = cacheRate === undefined ? undefined : cacheCoverage === 'partial' && cacheRate < 1
+    ? t('usage.tokens.minimumRate', { rate: formatUsagePercent(Math.floor(cacheValue! * 100 / inputTokens!), t) })
+    : formatUsagePercent(cacheRate * 100, t);
+  const cacheHelp = t(cacheCoverage === 'partial' ? 'usage.tokens.partialCacheHelp' : cacheValue === undefined
+    ? 'usage.help.cachedTokens' : 'usage.panel.cachedSubset');
+  tokenRows[0].shareSuffix = (
+    <Tooltip content={cacheRate !== undefined ? `${cacheHelp}\n${t('usage.tokens.hitRateDetail', {
+      rate: cacheRateLabel, cached: formatTokenCount(cacheValue, t), input: formatTokenCount(inputTokens, t),
+    })}` : cacheHelp}>
+      <span className="session-usage-panel__legend-detail" data-usage-cache-summary
+        data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="legendDetail">
+        {cacheRate !== undefined ? t('usage.tokens.cacheHitDetail', { rate: cacheRateLabel })
+          : t('usage.tokens.cacheUnavailable')}
+      </span>
+    </Tooltip>
+  );
+  const hasCacheSplit = hasTokenDistribution && cacheRate !== undefined;
+  const cacheRows: UsageSeries[] = hasCacheSplit ? [
+    { key: 'cachedInput', parentKey: 'input', label: t(cacheCoverage === 'partial' ? 'usage.tokens.recordedCacheHits' : 'usage.tokens.cacheHit'), value: cacheValue,
+      share: cacheValue! / totalTokens },
+    { key: 'uncachedInput', parentKey: 'input', label: t(cacheCoverage === 'partial' ? 'usage.tokens.remainingInput' : 'usage.tokens.uncachedInput'), value: inputTokens - cacheValue!,
+      share: (inputTokens - cacheValue!) / totalTokens },
+  ] : [];
+  for (const row of cacheRows) {
+    const share = formatUsagePercent(row.value! / inputTokens! * 100, t);
+    row.formattedValue = (
+      <Tooltip content={`${t('usage.tokens.inputShareDetail', {
+        tokens: formatTokenCount(row.value, t), input: formatTokenCount(inputTokens, t), share,
+      })}\n${cacheHelp}`}>
+        <span>{share}</span>
+      </Tooltip>
+    );
+  }
+  const { activeRow: activeContext, highlight: highlightContext } = useSeriesHighlight(contextRows);
+  const { highlight: highlightTokens } = useSeriesHighlight([...tokenRows, ...cacheRows]);
+
+  const tokenUsage = (
+    <section className="session-usage-panel__summary session-usage-panel__tokens" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" aria-label={t('usage.tokens.title')}>
+      <PageHeader level={3} size="sm" title={t('usage.tokens.title')} />
+      <div className="session-usage-panel__token-chart" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="tokenChart">
+        <UsageLegend rows={tokenRows} highlight={highlightTokens} className="session-usage-panel__token-legend" />
+        <div className="session-usage-panel__segmented-bar" aria-hidden="true">
+          {tokenRows.map(row => row.share !== undefined && row.share > 0 && (
+            <div key={row.key} className="session-usage-panel__bar-group" data-usage-category={row.key}
+              data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="tokenGroup"
+              {...highlightTokens(row)} style={{ flexGrow: row.share }}>
+              {(row.key === 'input' && hasCacheSplit ? cacheRows : [row]).map(segment => segment.share! > 0 && (
+                <span key={segment.key} className={`session-usage-panel__bar-segment session-usage-panel__series--${segment.key}`}
+                  {...highlightTokens(segment)} data-usage-category={segment.key} data-usage-parent={segment.parentKey}
+                  style={{ flexGrow: segment.share! / row.share! }} />
+              ))}
+            </div>
+          ))}
+        </div>
+        {hasCacheSplit && <UsageLegend rows={cacheRows} highlight={highlightTokens} showShares={false}
+          className="session-usage-panel__cache-legend" />}
+      </div>
+      {!hasTokenDistribution && <p className="session-usage-panel__section-help">{t('usage.panel.distributionUnavailable')}</p>}
+    </section>
+  );
+
+  return (
+    <>
+      <dl className="session-usage-panel__summary-facts" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="summaryFacts">
+        <div className="session-usage-panel__summary-fact" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="summaryFact">
+          <dt>{t('usage.panel.workspace')}</dt><dd><OverflowText>{workspaceName}</OverflowText></dd>
+        </div>
+        <div className="session-usage-panel__summary-fact" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="summaryFact">
+          <dt>{t('usage.panel.totalTokens')}</dt><dd><OverflowText>{formatTokenCount(totalTokens, t)}</OverflowText></dd>
+        </div>
+        <div className="session-usage-panel__summary-fact" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="summaryFact">
+          <dt>{t('usage.table.turns')}</dt><dd><OverflowText>{formatUsageNumber(report.scope.turnCount, t)}</OverflowText></dd>
+        </div>
+      </dl>
+      {tokenUsage}
+      <section className="session-usage-panel__summary session-usage-panel__context" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" aria-label={t('usage.context.title')}>
+        <PageHeader level={3} size="sm" title={t('usage.context.title')} action={
+          <Tooltip content={t('usage.context.estimateHelp')}><span className="session-usage-panel__chart-meta">{t('usage.context.estimated')}</span></Tooltip>
+        } />
+        {hasContextDistribution ? (
+          <div className="session-usage-panel__distribution">
+            <div className="session-usage-panel__donut">
+              <svg viewBox="0 0 200 200" aria-hidden="true" focusable="false">
+                <circle className="session-usage-panel__donut-track" cx="100" cy="100" r="82" />
+                {contextRows.map(row => row.share! > 0 && (
+                  <circle key={row.key} className={`session-usage-panel__donut-segment session-usage-panel__series--${row.key}`}
+                    {...highlightContext(row)}
+                    data-usage-category={row.key} cx="100" cy="100" r="82" pathLength="100"
+                    strokeDasharray={`${row.share! * 100} ${100 - row.share! * 100}`} strokeDashoffset={-row.offset} />
+                ))}
+              </svg>
+              <div className="session-usage-panel__donut-label">
+                <strong>{activeContext ? formatUsagePercent(activeContext.share! * 100, t) : formatTokenCount(contextTotal, t)}</strong>
+                <span>{activeContext ? activeContext.label : t('usage.context.estimatedTokens')}</span>
+              </div>
+            </div>
+            <UsageLegend rows={contextRows} highlight={highlightContext} />
+          </div>
+        ) : <Empty icon={<Icon glyph={ChartPie} />} title={t('usage.context.unavailable')} />}
+      </section>
+    </>
+  );
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
new file mode 100644
index 0000000000..58357087bb
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
@@ -0,0 +1,103 @@
+.tool-definitions-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--openbitfun-space-5);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--openbitfun-space-6);
+  box-sizing: border-box;
+  background: var(--openbitfun-color-surface-scene);
+  color: var(--openbitfun-color-content-primary);
+  font-family: var(--openbitfun-type-body-sm-font-family);
+  font-size: var(--openbitfun-type-body-sm-font-size);
+  line-height: var(--openbitfun-type-body-sm-line-height);
+
+  &__viewport {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    gap: var(--openbitfun-space-4);
+  }
+
+  &__name,
+  &__type,
+  &__value {
+    overflow-wrap: anywhere;
+    font-family: var(--openbitfun-type-code-sm-font-family);
+    font-size: var(--openbitfun-type-code-sm-font-size);
+    line-height: var(--openbitfun-type-code-sm-line-height);
+  }
+
+  &__name { font-weight: var(--openbitfun-type-label-selected-font-weight); }
+  &__type { color: var(--openbitfun-color-content-muted); }
+  &__value { font-size: var(--openbitfun-type-meta-font-size); }
+  &__value-chip { max-inline-size: 100%; }
+
+  &__optional {
+    color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height);
+  }
+
+  &__description {
+    color: var(--openbitfun-color-content-secondary);
+    font-size: var(--openbitfun-type-body-sm-font-size);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+  }
+
+  &__text { margin: 0; color: var(--openbitfun-color-content-secondary); }
+
+  // Match the header indicator's inset once; nested schemas keep the same content edge.
+  &__content { padding-inline: 0; }
+  &__content--tool { padding-inline: var(--openbitfun-layout-disclosure-trigger-padding-inline); }
+  &__nested-trigger { padding-inline: 0; }
+
+  &__header {
+    min-block-size: var(--openbitfun-control-height-lg);
+
+    // Reuse the usage report palette; color distinguishes entries, not execution status.
+    @each $tone, $color in (
+      'violet': var(--openbitfun-component-session-usage-output),
+      'green': var(--openbitfun-color-status-success-emphasis),
+      'amber': var(--openbitfun-color-status-warning-emphasis),
+      'magenta': color-mix(in srgb, var(--openbitfun-component-session-usage-output) 50%, var(--openbitfun-color-status-danger-emphasis)),
+      'blue': var(--openbitfun-component-session-usage-input),
+      'rose': var(--openbitfun-color-status-danger-emphasis)
+    ) {
+      &--#{$tone} {
+        background: color-mix(in srgb, #{$color} 10%, var(--openbitfun-color-surface-scene));
+
+        &:is(:hover, :focus-within) {
+          background: color-mix(in srgb, #{$color} 16%, var(--openbitfun-color-surface-scene));
+        }
+      }
+    }
+  }
+
+  &__nested { padding-block: var(--openbitfun-space-3); }
+
+  &__constraints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--openbitfun-space-2) var(--openbitfun-space-5);
+    margin: 0;
+    min-width: 0;
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height);
+  }
+
+  &__constraint {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--openbitfun-space-1) var(--openbitfun-space-2);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+
+    dt { color: var(--openbitfun-color-content-muted); overflow-wrap: anywhere; }
+    dd { margin: 0; min-width: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.test.tsx b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.test.tsx
new file mode 100644
index 0000000000..4c46309dd3
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.test.tsx
@@ -0,0 +1,125 @@
+// @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 { ToolDefinitionsPreview } from './ToolDefinitionsPreview';
+import { parseToolDefinitionsDocument } from './toolDefinitionsDocument';
+
+vi.mock('@/infrastructure/i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+  i18nService: { formatNumber: (value: number) => String(value) },
+}));
+vi.mock('@/infrastructure/markdown', () => ({ MarkdownRenderer: ({ content }: { content: string }) => <div>{content}</div> }));
+
+const definitions = [
+  { name: 'searchFiles', description: 'Search repository files.', parameters: {
+    type: 'object', required: ['query'], properties: {
+      query: { type: 'string', description: 'Text to search for.' },
+      limit: { type: 'integer', default: 5, enum: [5, 10], minimum: 1 },
+    }, additionalProperties: false,
+  } },
+  { name: 'writeFile', description: 'Write file content.', parameters: {
+    type: 'object', properties: { files: { type: 'array', items: {
+      type: 'object', properties: { overwrite: { type: 'boolean', default: false } },
+    } } },
+  } },
+];
+const content = `# Calling tools\n\nUse the recorded definitions.\n\n---\n\n\`\`\`json\n${JSON.stringify(definitions, null, 2)}\n\`\`\``;
+
+describe('tool definition documents', () => {
+  it('reads the saved capture and keeps tool-calling instructions separate', () => {
+    expect(parseToolDefinitionsDocument(content)).toEqual({ tools: definitions, notes: '# Calling tools\n\nUse the recorded definitions.', invalid: false });
+    expect(parseToolDefinitionsDocument(JSON.stringify(definitions)).tools).toEqual(definitions);
+  });
+
+  it('supports fences containing Markdown examples inside descriptions without truncating definitions', () => {
+    const tools = [{ ...definitions[0], description: 'Example: ```json\n{}\n```' }];
+    expect(parseToolDefinitionsDocument(`\`\`\`\`json\n${JSON.stringify(tools)}\n\`\`\`\``).tools).toEqual(tools);
+  });
+
+  it('distinguishes empty snapshots, instructions-only captures and invalid schemas', () => {
+    expect(parseToolDefinitionsDocument('[]')).toEqual({ tools: [], notes: '', invalid: false });
+    expect(parseToolDefinitionsDocument('Call tools using PTC.')).toEqual({ tools: [], notes: 'Call tools using PTC.', invalid: false });
+    expect(parseToolDefinitionsDocument('```json\n[{broken}]\n```')).toEqual({ tools: [], notes: '', invalid: true });
+    expect(parseToolDefinitionsDocument('[{broken}]')).toEqual({ tools: [], notes: '', invalid: true });
+    expect(parseToolDefinitionsDocument('```json\n[{"name":"Missing schema"}]\n```').invalid).toBe(true);
+  });
+});
+
+describe('tool definitions reader', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+  const render = (value = content) => act(() => root.render(<ToolDefinitionsPreview content={value} />));
+  const button = (label: string) => Array.from(container.querySelectorAll('button')).find(button => button.textContent?.includes(label))!;
+
+  it('renders typed parameter rows with descriptions, required markers and constraints using shared controls', () => {
+    render();
+    expect(button('searchFiles').getAttribute('aria-expanded')).toBe('true');
+    expect(button('writeFile').getAttribute('aria-expanded')).toBe('false');
+    expect(container.textContent).toContain('Text to search for.');
+    expect(container.textContent).toContain('string');
+    expect(container.textContent).toContain('usage.toolDefinitions.required');
+    expect(container.textContent).toContain('usage.toolDefinitions.optional');
+    expect(container.textContent).toContain('usage.toolDefinitions.enum');
+    expect(container.textContent).toContain('usage.toolDefinitions.default');
+    expect(container.querySelector('[data-openbitfun-component="field-group"]')).not.toBeNull();
+    expect(container.querySelector('pre, textarea, [contenteditable="true"]')).toBeNull();
+    expect(container.textContent).not.toContain('"parameters":');
+    act(() => button('writeFile').click());
+    act(() => button('usage.toolDefinitions.items').click());
+    expect(container.textContent).toContain('overwrite');
+    expect(container.textContent).toContain('boolean');
+  });
+
+  it('searches parameter names, handles no matches, and clears the filter', () => {
+    render();
+    const writeFile = button('writeFile');
+    act(() => writeFile.click());
+    const input = container.querySelector('input')!;
+    const search = (value: string) => act(() => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    search('overwrite');
+    expect(button('writeFile')).toBe(writeFile);
+    expect(writeFile.getAttribute('aria-expanded')).toBe('true');
+    expect(container.textContent).not.toContain('searchFiles');
+    expect(container.textContent).toContain('writeFile');
+    search('absent-tool');
+    expect(container.textContent).toContain('usage.toolDefinitions.noMatches');
+    act(() => container.querySelector<HTMLButtonElement>('button[aria-label="usage.toolDefinitions.clearSearch"]')!.click());
+    expect(button('searchFiles')).toBeDefined();
+    expect(button('writeFile')).toBeDefined();
+  });
+
+  it('renders empty and unreadable snapshots without displaying the JSON payload', () => {
+    render('[]');
+    expect(container.textContent).toContain('usage.toolDefinitions.empty');
+    render('```json\n[{broken}]\n```');
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain('usage.toolDefinitions.unavailable');
+    expect(container.textContent).not.toContain('[{broken}]');
+  });
+
+  it('shows union schemas and local references without recursively following cyclic references', () => {
+    render(JSON.stringify([{ name: 'recursive', description: '', parameters: {
+      type: 'object', properties: { node: { $ref: '#/$defs/node' }, mode: { oneOf: [{ const: 'fast' }, { const: 'safe' }] } },
+      $defs: { node: { type: 'object', properties: { child: { $ref: '#/$defs/node' } } } },
+    } }]));
+    expect(container.textContent).toContain('#/$defs/node');
+    act(() => button('usage.toolDefinitions.oneOf').click());
+    expect(container.textContent).toContain('fast');
+    expect(container.textContent).toContain('safe');
+    act(() => button('usage.toolDefinitions.definitions').click());
+    expect(container.textContent).toContain('child');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.tsx b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.tsx
new file mode 100644
index 0000000000..5eaa435204
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.tsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from 'react';
+import { Alert, Disclosure, Empty, FieldGroup, FieldRow, FormSection, Icon, NumberBadge, PageHeader, ScrollArea, SearchField, Stack, StatusPill } from '@openbitfun/ui';
+import { Search, Wrench } from 'lucide-react';
+import { useI18n } from '@/infrastructure/i18n';
+import { MarkdownRenderer } from '@/infrastructure/markdown';
+import { formatUsageNumber } from './usageReportUtils';
+import { isRecord, parseToolDefinitionsDocument, schemaType } from './toolDefinitionsDocument';
+import './ToolDefinitionsPreview.scss';
+
+const headerTones = ['violet', 'green', 'amber', 'magenta', 'blue', 'rose'] as const;
+const constraintLabels: Record<string, string> = {
+  enum: 'usage.toolDefinitions.enum',
+  default: 'usage.toolDefinitions.default',
+  const: 'usage.toolDefinitions.constraints.const',
+  minimum: 'usage.toolDefinitions.constraints.minimum',
+  maximum: 'usage.toolDefinitions.constraints.maximum',
+  exclusiveMinimum: 'usage.toolDefinitions.constraints.exclusiveMinimum',
+  exclusiveMaximum: 'usage.toolDefinitions.constraints.exclusiveMaximum',
+  minLength: 'usage.toolDefinitions.constraints.minLength',
+  maxLength: 'usage.toolDefinitions.constraints.maxLength',
+  minItems: 'usage.toolDefinitions.constraints.minItems',
+  maxItems: 'usage.toolDefinitions.constraints.maxItems',
+  pattern: 'usage.toolDefinitions.constraints.pattern',
+  format: 'usage.toolDefinitions.constraints.format',
+  additionalProperties: 'usage.toolDefinitions.constraints.additionalProperties',
+  $ref: 'usage.toolDefinitions.constraints.reference',
+};
+
+/** Preserve less common schema constraints as readable values, never an opaque JSON block. */
+function DefinitionValue({ value }: { value: unknown }) {
+  if (Array.isArray(value) && value.length) return <Stack direction="horizontal" gap="1" wrap>{value.map((item, index) => <DefinitionValue key={index} value={item} />)}</Stack>;
+  if (isRecord(value) && Object.keys(value).length) return <FieldGroup appearance="plain">{Object.entries(value).map(([key, item]) => (
+    <FieldRow key={key} align="start" padding="none" className="tool-definitions-preview__nested" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="nested"><Stack direction="horizontal" align="start" gap="2" wrap><code className="tool-definitions-preview__name" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="name">{key}</code><DefinitionValue value={item} /></Stack></FieldRow>
+  ))}</FieldGroup>;
+  const text = typeof value === 'string' ? JSON.stringify(value) : Array.isArray(value) ? '[]' : isRecord(value) ? '{}' : String(value);
+  return <StatusPill tone="neutral" shape="rounded" className="tool-definitions-preview__value-chip">
+    <code className="tool-definitions-preview__value" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="value">{text}</code>
+  </StatusPill>;
+}
+
+function SchemaConstraints({ entries }: { entries: [string, unknown][] }) {
+  const { t } = useI18n('flow-chat');
+  if (!entries.length) return null;
+  return <dl className="tool-definitions-preview__constraints" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="constraints">
+    {entries.map(([key, value]) => <div key={key} className="tool-definitions-preview__constraint" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="constraint">
+      <dt>{Object.prototype.hasOwnProperty.call(constraintLabels, key) ? t(constraintLabels[key]) : key}</dt>
+      <dd><DefinitionValue value={value} /></dd>
+    </div>)}
+  </dl>;
+}
+
+function Parameter({ name, schema, required }: { name: string; schema: unknown; required?: boolean }) {
+  const { t } = useI18n('flow-chat');
+  const type = schemaType(schema);
+  return <Stack gap="2">
+    <Stack direction="horizontal" align="center" justify="between" gap="2" wrap>
+      <Stack direction="horizontal" align="center" gap="2" wrap>
+        <code className="tool-definitions-preview__name" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="name">{name}</code>
+        {type && <code className="tool-definitions-preview__type" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="type">{type}</code>}
+      </Stack>
+      {required === true && <StatusPill tone="accent" shape="rounded">{t('usage.toolDefinitions.required')}</StatusPill>}
+      {required === false && <span className="tool-definitions-preview__optional" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="optional">{t('usage.toolDefinitions.optional')}</span>}
+    </Stack>
+    <SchemaDetails schema={schema} />
+  </Stack>;
+}
+
+function SchemaDetails({ schema }: { schema: unknown }) {
+  const { t } = useI18n('flow-chat');
+  if (typeof schema === 'boolean') return <p className="tool-definitions-preview__text" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="help">
+    {t(schema ? 'usage.toolDefinitions.anyValue' : 'usage.toolDefinitions.noValue')}
+  </p>;
+  if (!isRecord(schema)) return <DefinitionValue value={schema} />;
+  const properties = isRecord(schema.properties) ? Object.entries(schema.properties) : [];
+  const required = Array.isArray(schema.required) ? schema.required : [];
+  const extra = Object.entries(schema).filter(([key]) => !['type', 'description', 'properties', 'items', 'prefixItems', 'oneOf', 'anyOf', 'allOf', '$defs', 'definitions'].includes(key)
+    && (key !== 'required' || required.some(name => !properties.some(([property]) => property === name))));
+  return <Stack gap="2">
+    {typeof schema.description === 'string' && schema.description && <MarkdownRenderer className="tool-definitions-preview__description" content={schema.description} />}
+    {properties.length > 0 && <FieldGroup appearance="plain">{properties.map(([name, value]) => (
+      <FieldRow key={name} align="start" padding="none" className="tool-definitions-preview__nested" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="nested"><Parameter name={name} schema={value} required={required.includes(name)} /></FieldRow>
+    ))}</FieldGroup>}
+    {schema.items !== undefined && <Disclosure summary={t('usage.toolDefinitions.items')} triggerClassName="tool-definitions-preview__nested-trigger" contentInnerClassName="tool-definitions-preview__content" unmountOnClose>
+      <Parameter name="[]" schema={schema.items} />
+    </Disclosure>}
+    {(['prefixItems', 'oneOf', 'anyOf', 'allOf'] as const).map(key => Array.isArray(schema[key]) && (
+      <Disclosure key={key} summary={t(`usage.toolDefinitions.${key}`)} triggerClassName="tool-definitions-preview__nested-trigger" contentInnerClassName="tool-definitions-preview__content" unmountOnClose>
+        <FieldGroup appearance="plain">{schema[key].map((variant, index) => (
+          <FieldRow key={index} align="start" padding="none" className="tool-definitions-preview__nested" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="nested"><Parameter name={formatUsageNumber(index + 1, t)} schema={variant} /></FieldRow>
+        ))}</FieldGroup>
+      </Disclosure>
+    ))}
+    {(['$defs', 'definitions'] as const).map(key => isRecord(schema[key]) && (
+      <Disclosure key={key} summary={t('usage.toolDefinitions.definitions')} triggerClassName="tool-definitions-preview__nested-trigger" contentInnerClassName="tool-definitions-preview__content" unmountOnClose>
+        <FieldGroup appearance="plain">{Object.entries(schema[key]).map(([name, value]) => (
+          <FieldRow key={name} align="start" padding="none" className="tool-definitions-preview__nested" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="nested"><Parameter name={name} schema={value} /></FieldRow>
+        ))}</FieldGroup>
+      </Disclosure>
+    ))}
+    <SchemaConstraints entries={extra} />
+  </Stack>;
+}
+
+export function ToolDefinitionsPreview({ content }: { content: string }) {
+  const { t } = useI18n('flow-chat');
+  const [query, setQuery] = useState('');
+  const document = useMemo(() => parseToolDefinitionsDocument(content), [content]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const tools = document.tools.map((tool, index) => ({ tool, index })).filter(({ tool }) => !normalizedQuery
+    || `${tool.name}\n${tool.description}\n${JSON.stringify(tool.parameters)}`.toLowerCase().includes(normalizedQuery));
+  return <div className="tool-definitions-preview" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="root">
+    <PageHeader level={2} title={t('usage.context.categories.toolDefinitions')}
+      action={<StatusPill tone="neutral">{formatUsageNumber(document.tools.length, t)}</StatusPill>} />
+    {document.tools.length > 0 && <SearchField aria-label={t('usage.toolDefinitions.search')}
+      placeholder={t('usage.toolDefinitions.search')} leadingIcon={<Icon glyph={Search} size="sm" />}
+      value={query} onValueChange={setQuery} clearLabel={t('usage.toolDefinitions.clearSearch')} onClear={() => setQuery('')} />}
+    <ScrollArea className="tool-definitions-preview__viewport" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="viewport">
+    {document.invalid && <Alert tone="warning" message={t('usage.toolDefinitions.unavailable')} />}
+    {!tools.length && !document.invalid && <Empty icon={<Icon glyph={Wrench} />}
+      title={t(normalizedQuery ? 'usage.toolDefinitions.noMatches' : 'usage.toolDefinitions.empty')} />}
+    <Stack gap="3">{tools.map(({ tool, index }, visibleIndex) => (
+        <Disclosure key={`${tool.name}-${index}`} summary={tool.name} defaultOpen={visibleIndex === 0}
+          headerClassName={`tool-definitions-preview__header tool-definitions-preview__header--${headerTones[index % headerTones.length]}`}
+          contentInnerClassName="tool-definitions-preview__content tool-definitions-preview__content--tool" unmountOnClose>
+          <Stack gap="4">
+            {tool.description && <MarkdownRenderer content={tool.description} />}
+            <FormSection title={t('usage.toolDefinitions.parameters')} headingAs="h3"
+              actions={isRecord(tool.parameters) && isRecord(tool.parameters.properties)
+                ? <NumberBadge value={formatUsageNumber(Object.keys(tool.parameters.properties).length, t)} />
+                : schemaType(tool.parameters) && <code className="tool-definitions-preview__type" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="type">{schemaType(tool.parameters)}</code>}>
+              {isRecord(tool.parameters) && (!tool.parameters.type || tool.parameters.type === 'object')
+                && Object.entries(tool.parameters).every(([key, value]) => key === 'type'
+                  || (key === 'additionalProperties' && typeof value === 'boolean')
+                  || (key === 'properties' && isRecord(value) && !Object.keys(value).length)
+                  || (key === 'required' && Array.isArray(value) && !value.length))
+                ? <p className="tool-definitions-preview__text" data-openbitfun-product-component="tool-definitions-preview" data-openbitfun-product-part="help">{t(tool.parameters.additionalProperties === false ? 'usage.toolDefinitions.noParameters' : 'usage.toolDefinitions.anyParameters')}</p>
+                : <SchemaDetails schema={tool.parameters} />}
+            </FormSection>
+          </Stack>
+        </Disclosure>
+    ))}</Stack>
+    {document.notes && <Disclosure summary={t('usage.toolDefinitions.notes')}
+      headerClassName="tool-definitions-preview__header tool-definitions-preview__header--blue"
+      contentInnerClassName="tool-definitions-preview__content tool-definitions-preview__content--tool" unmountOnClose>
+      <MarkdownRenderer content={document.notes} />
+    </Disclosure>}
+    </ScrollArea>
+  </div>;
+}
diff --git a/src/web-ui/src/flow_chat/components/usage/appearance.ts b/src/web-ui/src/flow_chat/components/usage/appearance.ts
index e6af481546..4fac303445 100644
--- a/src/web-ui/src/flow_chat/components/usage/appearance.ts
+++ b/src/web-ui/src/flow_chat/components/usage/appearance.ts
@@ -1,25 +1,37 @@
 import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
+export const toolDefinitionsPreviewAppearanceDescriptor: AppearanceSurfaceDescriptor = {
+  id: 'tool-definitions-preview',
+  componentAttribute: 'data-openbitfun-product-component',
+  parts: [
+    { id: 'root' },
+    { id: 'viewport', propertyProfile: 'layout' },
+    { id: 'name', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'type', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'value', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'optional', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'help', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'nested', propertyProfile: 'layout' },
+    { id: 'constraints' },
+    { id: 'constraint' },
+  ],
+};
+
 export const sessionUsagePanelAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'session-usage-panel',
   componentAttribute: 'data-openbitfun-product-component',
   parts: [
     { id: 'root' },
     { id: 'header' },
-    { id: 'tabs' },
-    { id: 'tab' },
-    { id: 'body' },
-    { id: 'metaRow' },
     { id: 'section' },
-    { id: 'metric' },
-    { id: 'table' },
-    { id: 'empty' },
-  ],
-  facets: [
-    { id: 'tab', attribute: 'data-openbitfun-tab', values: ['overview', 'models', 'tools', 'files', 'errors', 'slowest'] },
+    { id: 'summaryFacts' },
+    { id: 'summaryFact' },
+    { id: 'tokenChart', propertyProfile: 'layout' },
+    { id: 'tokenGroup', propertyProfile: 'layout' },
+    { id: 'legendDetail', propertyProfile: 'paint', visualRole: 'content' },
+    { id: 'legendShare', propertyProfile: 'layout' },
   ],
   states: [
-    { id: 'active', selector: { kind: 'self', suffix: '[data-openbitfun-state~="active"]' } },
     { id: 'fallback', selector: { kind: 'self', suffix: '[data-openbitfun-state~="fallback"]' } },
   ],
 };
diff --git a/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts b/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts
deleted file mode 100644
index 73d90f8a14..0000000000
--- a/src/web-ui/src/flow_chat/components/usage/sessionUsageModalState.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * The usage report, held for as long as it is on screen and no longer.
- *
- * It used to be a `DialogTurn` appended to `session.dialogTurns` and persisted
- * to the backend as a `local_command` turn. A report about a session is not an
- * event in it: the turn carried no user message and no model round, and the
- * backend already answered "is this part of the conversation" with no in six
- * places — `is_model_visible` and `is_transcript_visible` are both false for
- * `LocalCommand`, and the usage report excludes its own turns from its own
- * scope.
- *
- * The front end could not keep the same story straight. The turn grew
- * `dialogTurns` and moved `at(-1)`, which is exactly what follow-output reads
- * as a Turn arriving, so a report pinned itself to the top of the viewport. And
- * the filter meant to keep it out of the Turn rail required
- * `usageReportProvisional`, a flag that `commitLocalUsageReportTurn` deleted on
- * successful persistence — so it worked until the moment persistence made it
- * matter, and a `/usage` report then took a numbered Turn slot.
- *
- * Reports written by earlier versions are still on disk and still render, in
- * `UserMessageItem`; only the writer is gone.
- *
- * Module state rather than React state because the caller is a service several
- * layers below any component — the same shape as `chatPopupState.ts`.
- */
-
-import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
-
-export interface SessionUsageModalState {
-  open: boolean;
-  sessionId: string;
-  workspacePath?: string;
-  /** The request is in flight; the card draws its own waiting state. */
-  isLoading: boolean;
-  report?: SessionUsageReport;
-  /** The rendered report, for copying and for the fallback view. */
-  markdown: string;
-}
-
-const CLOSED: SessionUsageModalState = {
-  open: false,
-  sessionId: '',
-  isLoading: false,
-  markdown: '',
-};
-
-let state: SessionUsageModalState = CLOSED;
-const listeners = new Set<() => void>();
-
-function setState(next: SessionUsageModalState) {
-  state = next;
-  listeners.forEach(listener => listener());
-}
-
-/*
- * Identity is stable while nothing changes, which `useSyncExternalStore`
- * requires of a snapshot — it re-reads on every render and treats a new object
- * as a change.
- */
-export function getSessionUsageModalState(): SessionUsageModalState {
-  return state;
-}
-
-export function subscribeSessionUsageModal(listener: () => void): () => void {
-  listeners.add(listener);
-  return () => { listeners.delete(listener); };
-}
-
-/** Open on the waiting state, before the report exists. */
-export function openSessionUsageModal(params: {
-  sessionId: string;
-  workspacePath?: string;
-}): void {
-  setState({
-    open: true,
-    sessionId: params.sessionId,
-    workspacePath: params.workspacePath,
-    isLoading: true,
-    markdown: '',
-  });
-}
-
-/**
- * Show the report that arrived.
- *
- * Ignored if the modal has been closed in the meantime: the reader dismissing
- * the wait is them saying they no longer want it, and a request already in
- * flight cannot be recalled.
- */
-export function showSessionUsageModalReport(params: {
-  sessionId: string;
-  report: SessionUsageReport;
-  markdown: string;
-}): void {
-  if (!state.open || state.sessionId !== params.sessionId) return;
-  setState({
-    ...state,
-    isLoading: false,
-    report: params.report,
-    markdown: params.markdown,
-  });
-}
-
-export function closeSessionUsageModal(): void {
-  if (!state.open) return;
-  setState(CLOSED);
-}
diff --git a/src/web-ui/src/flow_chat/components/usage/toolDefinitionsDocument.ts b/src/web-ui/src/flow_chat/components/usage/toolDefinitionsDocument.ts
new file mode 100644
index 0000000000..511616ae06
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usage/toolDefinitionsDocument.ts
@@ -0,0 +1,57 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+
+export interface ToolDefinitionDocument {
+  name: string;
+  description: string;
+  parameters: Record<string, unknown> | boolean;
+}
+
+export const isRecord = (value: unknown): value is Record<string, unknown> => (
+  value !== null && typeof value === 'object' && !Array.isArray(value)
+);
+
+function readDefinitions(source: string): ToolDefinitionDocument[] | undefined {
+  try {
+    const value: unknown = JSON.parse(source);
+    if (!Array.isArray(value) || !value.every(tool => isRecord(tool)
+      && typeof tool.name === 'string' && tool.name.trim()
+      && typeof tool.description === 'string'
+      && (isRecord(tool.parameters) || typeof tool.parameters === 'boolean'))) return undefined;
+    return value as ToolDefinitionDocument[];
+  } catch {
+    return undefined;
+  }
+}
+
+/** Read the existing host capture without rewriting stored sessions or fetching today's catalog. */
+export function parseToolDefinitionsDocument(source: string): {
+  tools: ToolDefinitionDocument[];
+  notes: string;
+  invalid: boolean;
+} {
+  if (!source.trim()) return { tools: [], notes: '', invalid: false };
+  const direct = readDefinitions(source);
+  if (direct) return { tools: direct, notes: '', invalid: false };
+
+  const nodes = unified().use(remarkParse).parse(source).children;
+  const last = nodes.at(-1);
+  if (last?.type === 'code' && last.lang?.toLowerCase() === 'json') {
+    const tools = readDefinitions(last.value);
+    const separator = nodes.at(-2);
+    const end = separator?.type === 'thematicBreak' ? separator.position?.start.offset : last.position?.start.offset;
+    return { tools: tools ?? [], notes: source.slice(0, end).trim(), invalid: tools === undefined };
+  }
+  // PTC-only requests can contain instructions without a native tool schema list.
+  const invalid = source.trimStart().startsWith('[');
+  return { tools: [], notes: invalid ? '' : source, invalid };
+}
+
+export function schemaType(schema: unknown): string | undefined {
+  if (!isRecord(schema)) return undefined;
+  if (typeof schema.type === 'string') return schema.type;
+  if (Array.isArray(schema.type) && schema.type.every(type => typeof type === 'string')) return schema.type.join(' | ');
+  if (isRecord(schema.properties)) return 'object';
+  if (schema.items !== undefined || schema.prefixItems !== undefined) return 'array';
+  return undefined;
+}
diff --git a/src/web-ui/src/flow_chat/services/openSessionContextPreview.test.ts b/src/web-ui/src/flow_chat/services/openSessionContextPreview.test.ts
new file mode 100644
index 0000000000..48108719ea
--- /dev/null
+++ b/src/web-ui/src/flow_chat/services/openSessionContextPreview.test.ts
@@ -0,0 +1,138 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+import { useAgentCanvasStore, switchAgentCanvasScope, forgetAgentCanvasSession } from '@/app/components/panels/content-canvas/stores/canvasStore';
+import { flowChatStore } from '../store/FlowChatStore';
+import type { Session } from '../types/flow-chat';
+import { openSessionContextPreview } from './openSessionContextPreview';
+
+const apiMocks = vi.hoisted(() => ({ getSessionUsageReport: vi.fn() }));
+vi.mock('@/infrastructure/api/service-api/SessionAPI', () => ({ sessionAPI: apiMocks }));
+
+const params = { sessionId: 'preview-session', reportSessionId: 'preview-session', workspaceId: 'workspace-1', title: 'System prompt.md', category: 'systemPrompt' as const, emptyContent: 'No content in the latest request.' };
+const response = () => ({ sessionId: params.sessionId, systemPromptPreview: { content: '# System\n\nExact prompt.\n', cachedAt: 123 } });
+const tabs = () => useAgentCanvasStore.getState().primaryGroup.tabs;
+
+describe('system prompt preview tabs', () => {
+  beforeEach(() => {
+    activateSurface('local');
+    useAgentCanvasStore.getState().closeAllTabs();
+    forgetAgentCanvasSession(params.sessionId);
+    forgetAgentCanvasSession('another-session');
+    switchAgentCanvasScope(params.sessionId);
+    flowChatStore.setState(state => ({ ...state, sessions: new Map(), activeSessionId: params.sessionId }));
+    apiMocks.getSessionUsageReport.mockReset().mockResolvedValue(response());
+  });
+
+  it.each(['local', 'peer-host', 'ssh-workspace'])('opens an immutable Markdown editor from the %s host response', async surface => {
+    activateSurface(surface === 'peer-host' ? surface : 'local');
+    const workspaceId = surface === 'ssh-workspace' ? 'ssh-workspace-id' : params.workspaceId;
+    await expect(openSessionContextPreview({ ...params, workspaceId })).resolves.toBe('opened');
+    expect(apiMocks.getSessionUsageReport).toHaveBeenCalledExactlyOnceWith({
+      sessionId: params.sessionId, workspaceId, includeHiddenSubagents: false, includeSystemPromptPreview: true, contextPreviewCategory: params.category,
+    });
+    expect(tabs()).toHaveLength(1);
+    expect(tabs()[0].content).toMatchObject({
+      type: 'markdown-editor', title: params.title,
+      data: { initialContent: response().systemPromptPreview.content, readOnly: true, fileName: 'system-prompt.md' },
+      metadata: { sessionId: params.sessionId, cachedAt: 123, resourceScope: { workspaceId } },
+    });
+    expect(tabs()[0].content.data.filePath).toBeUndefined();
+    await openSessionContextPreview({ ...params, workspaceId });
+    expect(tabs()).toHaveLength(1);
+  });
+
+  it('keeps a late preview with its owning session after the user switches chats', async () => {
+    let finish: (value: unknown) => void = () => {};
+    apiMocks.getSessionUsageReport.mockReturnValue(new Promise(resolve => { finish = resolve; }));
+    const pending = openSessionContextPreview(params);
+    switchAgentCanvasScope('another-session');
+    finish(response());
+    await expect(pending).resolves.toBe('opened');
+    expect(tabs()).toHaveLength(0);
+    switchAgentCanvasScope(params.sessionId);
+    expect(tabs()).toHaveLength(1);
+  });
+
+  it.each(['rules', 'skills', 'mcpTools', 'subagentDefinitions'] as const)(
+    'opens %s in its own read-only tab without fetching system prompt content', async category => {
+      apiMocks.getSessionUsageReport.mockResolvedValue({ sessionId: params.sessionId,
+        contextPreview: { category, content: `# ${category}\n\nRecorded content.`, capturedAt: 456 } });
+      await expect(openSessionContextPreview({ ...params, category })).resolves.toBe('opened');
+      expect(apiMocks.getSessionUsageReport).toHaveBeenLastCalledWith({
+        sessionId: params.sessionId, workspaceId: params.workspaceId, includeHiddenSubagents: false, contextPreviewCategory: category,
+      });
+      expect(tabs()[0].content.data).toMatchObject({ initialContent: `# ${category}\n\nRecorded content.`, readOnly: true });
+      expect(tabs()[0].content.data.filePath).toBeUndefined();
+      await openSessionContextPreview({ ...params, category });
+      expect(tabs()).toHaveLength(1);
+      apiMocks.getSessionUsageReport.mockResolvedValue(response());
+      await openSessionContextPreview(params);
+      expect(tabs()).toHaveLength(2);
+    },
+  );
+
+  it('prefers the recorded system category over the legacy cache', async () => {
+    apiMocks.getSessionUsageReport.mockResolvedValue({ ...response(),
+      contextPreview: { category: params.category, content: '# Request system content', capturedAt: 456 } });
+    await openSessionContextPreview(params);
+    expect(tabs()[0].content.data.initialContent).toBe('# Request system content');
+  });
+
+  it.each(['local', 'peer-host'])('reuses legacy tool preview tabs as structured readers on %s', async surface => {
+    activateSurface(surface);
+    useAgentCanvasStore.getState().addTab({ type: 'markdown-editor', title: 'Tool definitions.md',
+      data: { initialContent: 'old snapshot', readOnly: true },
+      metadata: { sessionId: params.sessionId, duplicateCheckKey: `session-context-toolDefinitions-${params.sessionId}` },
+    }, 'active');
+    const content = '```json\n[{"name":"Read","description":"Read files","parameters":{"type":"object"}}]\n```';
+    apiMocks.getSessionUsageReport.mockResolvedValue({ sessionId: params.sessionId,
+      contextPreview: { category: 'toolDefinitions', content, capturedAt: 456 } });
+    await expect(openSessionContextPreview({ ...params, title: 'Tool definitions', category: 'toolDefinitions' })).resolves.toBe('opened');
+    expect(tabs()).toHaveLength(1);
+    expect(tabs()[0].content).toMatchObject({ type: 'tool-definitions', title: 'Tool definitions', data: { content, readOnly: true } });
+    expect(tabs()[0].content.data.filePath).toBeUndefined();
+    expect(tabs()[0].content.data.initialContent).toBeUndefined();
+  });
+
+  it('distinguishes an empty recorded category from a missing or mismatched preview', async () => {
+    apiMocks.getSessionUsageReport.mockResolvedValue({ sessionId: params.sessionId,
+      contextPreview: { category: 'rules', content: '', capturedAt: 456 } });
+    await expect(openSessionContextPreview({ ...params, category: 'rules' })).resolves.toBe('opened');
+    expect(tabs()[0].content.data.initialContent).toBe(params.emptyContent);
+    await expect(openSessionContextPreview({ ...params, category: 'skills' })).resolves.toBe('unavailable');
+    apiMocks.getSessionUsageReport.mockResolvedValue(response());
+    await expect(openSessionContextPreview({ ...params, category: 'skills' })).resolves.toBe('unavailable');
+    expect(tabs()).toHaveLength(1);
+  });
+
+  it('discards responses from a previous device activation', async () => {
+    let finish: (value: unknown) => void = () => {};
+    apiMocks.getSessionUsageReport.mockReturnValue(new Promise(resolve => { finish = resolve; }));
+    const pending = openSessionContextPreview(params);
+    activateSurface('peer-host');
+    finish(response());
+    await expect(pending).resolves.toBe('stale');
+    expect(tabs()).toHaveLength(0);
+  });
+
+  it.each([undefined, { content: '', cachedAt: 123 }])('does not fabricate content when the host omits a preview: %s', async systemPromptPreview => {
+    apiMocks.getSessionUsageReport.mockResolvedValue({ sessionId: params.sessionId, systemPromptPreview });
+    await expect(openSessionContextPreview(params)).resolves.toBe('unavailable');
+    expect(tabs()).toHaveLength(0);
+  });
+
+  it('refuses dispatch projections and mismatched target sessions without querying local content', async () => {
+    await expect(openSessionContextPreview({ ...params, reportSessionId: 'target-session' })).resolves.toBe('unavailable');
+    flowChatStore.setState(state => ({ ...state, sessions: new Map([[params.sessionId, {
+      sessionId: params.sessionId, config: { dispatchJobId: 'job-1' },
+    } as Session]]) }));
+    await expect(openSessionContextPreview(params)).resolves.toBe('unavailable');
+    expect(apiMocks.getSessionUsageReport).not.toHaveBeenCalled();
+  });
+
+  it('propagates host errors without creating an empty editor', async () => {
+    apiMocks.getSessionUsageReport.mockRejectedValue(new Error('Host offline'));
+    await expect(openSessionContextPreview(params)).rejects.toThrow('Host offline');
+    expect(tabs()).toHaveLength(0);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/services/openSessionContextPreview.ts b/src/web-ui/src/flow_chat/services/openSessionContextPreview.ts
new file mode 100644
index 0000000000..a339826c19
--- /dev/null
+++ b/src/web-ui/src/flow_chat/services/openSessionContextPreview.ts
@@ -0,0 +1,64 @@
+import { sessionAPI, type UsageContextCategory } from '@/infrastructure/api/service-api/SessionAPI';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { openAgentCanvasTabForSession, useAgentCanvasStore } from '@/app/components/panels/content-canvas/stores/canvasStore';
+import { flowChatStore } from '../store/FlowChatStore';
+import { resolveSessionDriverId } from '../session-drivers/resolve';
+
+const PREVIEW_FILE_NAMES: Record<UsageContextCategory, string> = {
+  systemPrompt: 'system-prompt.md',
+  toolDefinitions: 'tool-definitions.md',
+  rules: 'rules.md',
+  skills: 'skills.md',
+  mcpTools: 'mcp-and-dynamic-tools.md',
+  subagentDefinitions: 'subagent-definitions.md',
+};
+
+export async function openSessionContextPreview(params: {
+  sessionId: string;
+  reportSessionId: string;
+  workspaceId?: string;
+  title: string;
+  category: UsageContextCategory;
+  emptyContent: string;
+}): Promise<'opened' | 'unavailable' | 'stale'> {
+  const surface = getActiveSurfaceScope();
+  const session = flowChatStore.getState().sessions.get(params.sessionId);
+  const workspaceId = params.workspaceId || session?.workspaceId || session?.config?.workspaceId;
+  // Dispatch reports belong to the target. Never read the controller's prompt cache.
+  if (!workspaceId || params.sessionId !== params.reportSessionId
+    || resolveSessionDriverId(params.sessionId, session) !== 'local') return 'unavailable';
+
+  const report = await sessionAPI.getSessionUsageReport({
+    sessionId: params.sessionId,
+    workspaceId,
+    includeHiddenSubagents: false,
+    contextPreviewCategory: params.category,
+    ...(params.category === 'systemPrompt' ? { includeSystemPromptPreview: true } : {}),
+  });
+  if (!surface.isCurrent()) return 'stale';
+  if (report.sessionId !== params.sessionId) return 'unavailable';
+  const snapshot = report.contextPreview;
+  const legacy = !snapshot && params.category === 'systemPrompt' ? report.systemPromptPreview : undefined;
+  const content = snapshot?.category === params.category && typeof snapshot.content === 'string'
+    ? snapshot.content : legacy?.content?.trim() ? legacy.content : undefined;
+  if (content === undefined) return 'unavailable';
+
+  openAgentCanvasTabForSession(params.sessionId, {
+    type: params.category === 'toolDefinitions' ? 'tool-definitions' : 'markdown-editor',
+    title: params.title,
+    data: params.category === 'toolDefinitions' ? { content, readOnly: true }
+      : { initialContent: content.trim() ? content : params.emptyContent, fileName: PREVIEW_FILE_NAMES[params.category], readOnly: true },
+    metadata: {
+      duplicateCheckKey: params.category === 'systemPrompt' ? `session-system-prompt-${params.sessionId}`
+        : `session-context-${params.category}-${params.sessionId}`,
+      sessionId: params.sessionId,
+      capturedAt: snapshot?.capturedAt,
+      cachedAt: legacy?.cachedAt,
+      resourceScope: { surfaceId: surface.surfaceId, workspaceId },
+    },
+  });
+  if (useAgentCanvasStore.getState().scopeKey === params.sessionId && typeof window !== 'undefined') {
+    window.dispatchEvent(new window.CustomEvent('expand-right-panel'));
+  }
+  return 'opened';
+}
diff --git a/src/web-ui/src/flow_chat/services/openSessionUsageReport.ts b/src/web-ui/src/flow_chat/services/openSessionUsageReport.ts
index 5f0ddd0aaf..4090122ef1 100644
--- a/src/web-ui/src/flow_chat/services/openSessionUsageReport.ts
+++ b/src/web-ui/src/flow_chat/services/openSessionUsageReport.ts
@@ -2,6 +2,12 @@ import { createTab } from '@/shared/utils/tabUtils';
 import type { PanelContent } from '@/app/components/panels/base/types';
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
 import type { SessionUsagePanelTab } from '../components/usage/sessionUsagePanelTypes';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import {
+  openAgentCanvasTabForSession,
+  updateAgentCanvasTabsForSession,
+} from '@/app/components/panels/content-canvas/stores/canvasStore';
+import { useContentResourceStore } from '@/app/workbench/contentResourceStore';
 
 export const SESSION_USAGE_PANEL_TYPE = 'session-usage' as const;
 
@@ -9,11 +15,71 @@ export interface SessionUsagePanelData {
   report: SessionUsageReport;
   markdown?: string;
   sessionId?: string;
+  sessionTitle?: string;
+  workspaceId?: string;
   workspacePath?: string;
   title?: string;
   initialTab?: SessionUsagePanelTab;
 }
 
+/** The request owns one session's side-panel tab, including while that session is hidden. */
+export function beginSessionUsagePanel(params: {
+  sessionId: string;
+  sessionTitle?: string;
+  workspaceId: string;
+  workspacePath: string;
+  title: string;
+}) {
+  const surface = getActiveSurfaceScope();
+  const requestId = crypto.randomUUID();
+  const duplicateCheckKey = `session-usage-live-${params.sessionId}`;
+  const content: PanelContent = {
+    type: SESSION_USAGE_PANEL_TYPE,
+    title: params.title,
+    data: { ...params, requestId, isLoading: true },
+    metadata: {
+      duplicateCheckKey,
+      sessionId: params.sessionId,
+      contentRole: SESSION_USAGE_PANEL_TYPE,
+      resourceScope: {
+        surfaceId: surface.surfaceId,
+        workspaceId: params.workspaceId,
+        workspacePath: params.workspacePath,
+      },
+    },
+  };
+  openAgentCanvasTabForSession(params.sessionId, content);
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new window.CustomEvent('expand-right-panel'));
+  }
+
+  const update = (patch: { report?: SessionUsageReport; markdown?: string; error?: string }): boolean => {
+    if (!surface.isCurrent()) return false;
+    const replace = (previous: PanelContent): PanelContent | undefined => (
+      previous.type === SESSION_USAGE_PANEL_TYPE && previous.data?.requestId === requestId
+        ? { ...previous, data: { ...previous.data, ...patch, isLoading: false } }
+        : undefined
+    );
+    let updated = updateAgentCanvasTabsForSession(params.sessionId, replace);
+    // A pending panel can be moved into a main workbench tab before it completes.
+    const resources = useContentResourceStore.getState();
+    for (const resource of Object.values(resources.resources)) {
+      if (resource.scope.surfaceId !== surface.surfaceId) continue;
+      const next = replace(resource.content);
+      if (!next) continue;
+      resources.update(resource.id, { content: next });
+      updated = true;
+    }
+    return updated;
+  };
+
+  return {
+    isCurrent: surface.isCurrent,
+    complete: (report: SessionUsageReport, markdown: string) => update({ report, markdown }),
+    fail: (error: string) => update({ error }),
+  };
+}
+
 export interface SessionUsagePanelMetadata {
   duplicateCheckKey: string;
   reportId: string;
diff --git a/src/web-ui/src/flow_chat/services/usageReportService.test.ts b/src/web-ui/src/flow_chat/services/usageReportService.test.ts
index 1eea246ba7..530d83ede9 100644
--- a/src/web-ui/src/flow_chat/services/usageReportService.test.ts
+++ b/src/web-ui/src/flow_chat/services/usageReportService.test.ts
@@ -4,10 +4,15 @@ import type {
 } from '@/infrastructure/api/service-api/SessionAPI';
 import type { FlowChatState, Session } from '../types/flow-chat';
 import { flowChatStore } from '../store/FlowChatStore';
-import {
-  closeSessionUsageModal,
-  getSessionUsageModalState,
-} from '../components/usage/sessionUsageModalState';
+import { useAgentCanvasStore, switchAgentCanvasScope, forgetAgentCanvasSession } from '@/app/components/panels/content-canvas/stores/canvasStore';
+import { useContentResourceStore } from '@/app/workbench/contentResourceStore';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+
+vi.mock('@/shared/utils/tabUtils', () => ({ createTab: vi.fn() }));
+
+const panelContent = () => useAgentCanvasStore.getState().primaryGroup.tabs.find(tab => tab.content.type === 'session-usage')?.content;
+const panelData = () => panelContent()?.data;
+const closePanel = () => useAgentCanvasStore.getState().closeAllTabs();
 
 const sessionApiMocks = vi.hoisted(() => ({
   getSessionUsageReport: vi.fn(),
@@ -105,6 +110,7 @@ const usageReport = (overrides: Partial<SessionUsageReport> = {}): SessionUsageR
 
 const uiParams = {
   isProcessing: false,
+  reportTitle: 'Session Usage',
   busyMessage: 'busy',
   noWorkspaceMessage: 'missing workspace',
   failedTitle: 'failed',
@@ -117,6 +123,11 @@ const transcriptOf = (sessionId = 'session-1') => (
 
 describe('runUsageReportCommand', () => {
   beforeEach(() => {
+    activateSurface('local');
+    forgetAgentCanvasSession('session-1');
+    forgetAgentCanvasSession('session-2');
+    switchAgentCanvasScope('session-1');
+    useContentResourceStore.setState({ resources: {} });
     flowChatStore.setState((): FlowChatState => ({
       sessions: new Map([['session-1', createSession()]]),
       activeSessionId: 'session-1',
@@ -125,7 +136,7 @@ describe('runUsageReportCommand', () => {
   });
 
   afterEach(() => {
-    closeSessionUsageModal();
+    closePanel();
     flowChatStore.setState((): FlowChatState => ({
       sessions: new Map(),
       activeSessionId: null,
@@ -143,19 +154,18 @@ describe('runUsageReportCommand', () => {
 
     // Open before the request resolves. The wait is the whole reason the report
     // used to be inserted as a turn in two stages.
-    expect(getSessionUsageModalState()).toMatchObject({
-      open: true,
+    expect(panelData()).toMatchObject({
       isLoading: true,
       sessionId: 'session-1',
     });
-    expect(getSessionUsageModalState().report).toBeUndefined();
+    expect(panelData().report).toBeUndefined();
 
     resolveReport(usageReport());
     const result = await pending;
 
     expect(result.shown).toBe(true);
-    const state = getSessionUsageModalState();
-    expect(state).toMatchObject({ open: true, isLoading: false });
+    const state = panelData();
+    expect(state).toMatchObject({ isLoading: false });
     expect(state.report?.reportId).toBe('usage-report-1');
     expect(state.markdown).toContain('# Session Usage Report');
     expect(state.markdown).toContain('Session span');
@@ -184,7 +194,7 @@ describe('runUsageReportCommand', () => {
     expect(transcriptOf()).toEqual([]);
   });
 
-  it('closes the waiting state when the report cannot be produced', async () => {
+  it('shows the failure in the panel when the report cannot be produced', async () => {
     sessionApiMocks.getSessionUsageReport.mockRejectedValueOnce(new Error('report failed'));
     const { runUsageReportCommand } = await import('./usageReportService');
 
@@ -192,7 +202,7 @@ describe('runUsageReportCommand', () => {
       .rejects.toThrow('report failed');
 
     // Left open it would wait forever: no second request is coming.
-    expect(getSessionUsageModalState().open).toBe(false);
+    expect(panelData()).toMatchObject({ isLoading: false, error: 'report failed' });
     expect(transcriptOf()).toEqual([]);
   });
 
@@ -205,7 +215,94 @@ describe('runUsageReportCommand', () => {
     });
 
     expect(result).toMatchObject({ shown: false, reason: 'missing_workspace' });
-    expect(getSessionUsageModalState().open).toBe(false);
+    expect(panelData()).toBeUndefined();
+  });
+
+  it('does not reopen a panel closed while loading', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
+    closePanel();
+    resolve(usageReport());
+    expect((await pending).shown).toBe(false);
+    expect(panelData()).toBeUndefined();
+  });
+
+  it('keeps an explicitly reopened report from getting stuck in its old loading state', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
+    const store = useAgentCanvasStore.getState();
+    store.closeTab(store.primaryGroup.tabs[0].id, 'primary');
+    resolve(usageReport());
+    expect((await pending).shown).toBe(false);
+    expect(panelData()).toBeUndefined();
+    store.reopenClosedTab();
+    expect(panelData()).toMatchObject({ isLoading: false, report: { reportId: 'usage-report-1' } });
+  });
+
+  it('updates the owning session snapshot without selecting it after a session switch', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
+    switchAgentCanvasScope('session-2');
+    resolve(usageReport());
+    expect((await pending).shown).toBe(true);
+    expect(useAgentCanvasStore.getState().scopeKey).toBe('session-2');
+    expect(panelData()).toBeUndefined();
+    switchAgentCanvasScope('session-1');
+    expect(panelData().report.reportId).toBe('usage-report-1');
+  });
+
+  it('ignores an older request when the same session is refreshed', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    sessionApiMocks.getSessionUsageReport.mockReturnValueOnce(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const old = runUsageReportCommand({ session: createSession(), ...uiParams });
+    sessionApiMocks.getSessionUsageReport.mockResolvedValueOnce(usageReport({ reportId: 'new-report' }));
+    await runUsageReportCommand({ session: createSession(), ...uiParams });
+    resolve(usageReport());
+    expect((await old).shown).toBe(false);
+    expect(panelData().report.reportId).toBe('new-report');
+    expect(useAgentCanvasStore.getState().primaryGroup.tabs).toHaveLength(1);
+  });
+
+  it('ignores results from a previous device activation', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    activateSurface('peer-a');
+    sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
+    activateSurface('peer-b');
+    resolve(usageReport());
+    expect((await pending).shown).toBe(false);
+    expect(panelData().report).toBeUndefined();
+  });
+
+  it('uses the dispatch report source without calling the local report API', async () => {
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const fetchReport = vi.fn().mockResolvedValue(usageReport({ workspace: { kind: 'remote_ssh', pathLabel: '/srv/project' } }));
+    await runUsageReportCommand({ session: createSession(), ...uiParams, fetchReport });
+    expect(fetchReport).toHaveBeenCalledOnce();
+    expect(sessionApiMocks.getSessionUsageReport).not.toHaveBeenCalled();
+    expect(panelData().report.workspace.kind).toBe('remote_ssh');
+  });
+
+  it('completes a pending panel moved to a main workbench tab', async () => {
+    let resolve!: (report: SessionUsageReport) => void;
+    sessionApiMocks.getSessionUsageReport.mockReturnValue(new Promise<SessionUsageReport>(done => { resolve = done; }));
+    const { runUsageReportCommand } = await import('./usageReportService');
+    const pending = runUsageReportCommand({ session: createSession(), ...uiParams });
+    const resourceId = useContentResourceStore.getState().open(panelContent()!, {
+      surfaceId: 'local', workspaceId: 'workspace-1', workspacePath: 'D:/workspace/OpenBitFun',
+    });
+    closePanel();
+    resolve(usageReport());
+    expect((await pending).shown).toBe(true);
+    expect(useContentResourceStore.getState().resources[resourceId].content.data.report.reportId).toBe('usage-report-1');
   });
 
   it('infers legacy model rows from the session model without showing raw missing-model copy', async () => {
@@ -239,7 +336,7 @@ describe('runUsageReportCommand', () => {
     });
     expect(result.report?.slowest[0].label).not.toBe('unknown_model');
 
-    const state = getSessionUsageModalState();
+    const state = panelData();
     expect(state.report?.models[0]).toMatchObject({
       modelId: 'gpt-5.4',
       modelIdSource: 'inferred_session_model',
@@ -283,11 +380,11 @@ describe('runUsageReportCommand', () => {
         modelIdSource: 'legacy_missing',
       });
 
-      const { markdown } = getSessionUsageModalState();
+      const { markdown } = panelData();
       expect(markdown).toContain('Legacy model not tracked');
       expect(markdown).not.toContain(opaqueModelId);
       expect(markdown).not.toContain('(inferred)');
-      closeSessionUsageModal();
+      closePanel();
     }
   });
 
@@ -321,7 +418,7 @@ describe('runUsageReportCommand', () => {
       modelIdSource: 'legacy_missing',
     });
 
-    const { markdown } = getSessionUsageModalState();
+    const { markdown } = panelData();
     expect(markdown).toContain('Legacy model not tracked');
     expect(markdown).not.toContain('model round');
   });
diff --git a/src/web-ui/src/flow_chat/services/usageReportService.ts b/src/web-ui/src/flow_chat/services/usageReportService.ts
index 931e4f3ef9..8b9643ac99 100644
--- a/src/web-ui/src/flow_chat/services/usageReportService.ts
+++ b/src/web-ui/src/flow_chat/services/usageReportService.ts
@@ -1,11 +1,7 @@
 import { sessionAPI } from '@/infrastructure/api/service-api/SessionAPI';
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
 import { notificationService } from '@/shared/notification-system';
-import {
-  closeSessionUsageModal,
-  openSessionUsageModal,
-  showSessionUsageModalReport,
-} from '../components/usage/sessionUsageModalState';
+import { beginSessionUsagePanel } from './openSessionUsageReport';
 import type { Session } from '../types/flow-chat';
 import { requireSessionOwningWorkspaceId } from '../utils/sessionOrdering';
 import { i18nService } from '@/infrastructure/i18n';
@@ -22,6 +18,7 @@ type UsageModelIdentitySource = NonNullable<SessionUsageReport['models'][number]
 export interface UsageReportCommandParams {
   session: Session;
   isProcessing: boolean;
+  reportTitle?: string;
   busyMessage: string;
   noWorkspaceMessage: string;
   failedTitle: string;
@@ -45,7 +42,7 @@ export interface UsageReportCommandResult {
  *
  * The report is not written into the transcript. It is a report *about* the
  * session rather than an event in it, and the synthetic Turn it used to be read
- * as a Turn arriving to everything downstream — see `sessionUsageModalState`.
+ * as a Turn arriving to everything downstream. The side panel owns presentation.
  */
 export async function runUsageReportCommand(
   params: UsageReportCommandParams
@@ -65,9 +62,12 @@ export async function runUsageReportCommand(
     notificationService.error(params.noWorkspaceMessage);
     return { shown: false, reason: 'missing_workspace' };
   }
-  openSessionUsageModal({
+  const panel = beginSessionUsagePanel({
     sessionId: params.session.sessionId,
+    sessionTitle: params.session.title,
+    workspaceId,
     workspacePath: params.session.workspacePath,
+    title: params.reportTitle ?? 'Session Usage',
   });
 
   try {
@@ -79,15 +79,11 @@ export async function runUsageReportCommand(
         includeHiddenSubagents: true,
       });
     const report = enrichUsageReportModelIdentity(rawReport, params.session);
-    showSessionUsageModalReport({
-      sessionId: params.session.sessionId,
-      report,
-      markdown: renderUsageReportMarkdown(report),
-    });
-
-    return { shown: true, report };
+    const shown = panel.complete(report, renderUsageReportMarkdown(report));
+    return { shown, report };
   } catch (error) {
-    closeSessionUsageModal();
+    if (!panel.isCurrent()) return { shown: false };
+    panel.fail(error instanceof Error ? error.message : params.unknownErrorMessage);
     notificationService.error(
       error instanceof Error ? error.message : params.unknownErrorMessage,
       {
diff --git a/src/web-ui/src/flow_chat/session-drivers/types.ts b/src/web-ui/src/flow_chat/session-drivers/types.ts
index 14d22ca167..1c84053eae 100644
--- a/src/web-ui/src/flow_chat/session-drivers/types.ts
+++ b/src/web-ui/src/flow_chat/session-drivers/types.ts
@@ -130,6 +130,7 @@ export type StartTurnResult = 'completed' | 'detached' | 'queued';
 /** Localized strings the usage-report flow surfaces; supplied by the caller. */
 export interface UsageReportUiParams {
   isProcessing: boolean;
+  reportTitle?: string;
   busyMessage: string;
   noWorkspaceMessage: string;
   failedTitle: string;
diff --git a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
index dadd9b18de..3896c7c1ab 100644
--- a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.test.ts
@@ -24,6 +24,22 @@ describe('SessionAPI paged metadata reads', () => {
     peerCapabilities.workspaceIdReferencesV1 = true;
   });
 
+  it('requests prompt content only for an explicit usage preview', async () => {
+    invokeMock.mockResolvedValue({});
+    await sessionAPI.getSessionUsageReport({ sessionId: 'session-1', workspaceId: 'workspace-1' });
+    expect(invokeMock).toHaveBeenLastCalledWith('get_session_usage_report', {
+      request: { session_id: 'session-1', workspace_id: 'workspace-1', include_hidden_subagents: true },
+    });
+    await sessionAPI.getSessionUsageReport({ sessionId: 'session-1', workspaceId: 'workspace-1', includeSystemPromptPreview: true, includeHiddenSubagents: false });
+    expect(invokeMock).toHaveBeenLastCalledWith('get_session_usage_report', {
+      request: { session_id: 'session-1', workspace_id: 'workspace-1', include_hidden_subagents: false, include_system_prompt_preview: true },
+    });
+    await sessionAPI.getSessionUsageReport({ sessionId: 'session-1', workspaceId: 'workspace-1', contextPreviewCategory: 'mcpTools', includeHiddenSubagents: false });
+    expect(invokeMock).toHaveBeenLastCalledWith('get_session_usage_report', {
+      request: { session_id: 'session-1', workspace_id: 'workspace-1', include_hidden_subagents: false, context_preview_category: 'mcpTools' },
+    });
+  });
+
   it('does not send a local workspace request to an equal ID on a newly selected peer', async () => {
     const pending = sessionAPI.listSessionsPage({ workspaceId: 'same-workspace-id', limit: 5 });
     activateSurface('peer-with-the-same-workspace');
diff --git a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
index cd4d810621..d807ab4e5c 100644
--- a/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/SessionAPI.ts
@@ -159,11 +159,32 @@ export interface SessionUsageReportRequest {
   sessionId: string;
   workspaceId: string;
   includeHiddenSubagents?: boolean;
+  includeSystemPromptPreview?: boolean;
+  contextPreviewCategory?: UsageContextCategory;
 }
 
+export type UsageContextCategory = 'systemPrompt' | 'toolDefinitions' | 'rules' | 'skills' | 'mcpTools' | 'subagentDefinitions';
+
 export type UsageModelIdentitySource = 'recorded' | 'inferred_session_model' | 'legacy_missing';
 
+/** Runtime estimates for the latest parent request; absent for older/external hosts. */
+export interface UsageContextBreakdown {
+  systemPrompt: number;
+  toolDefinitions: number;
+  rules: number;
+  skills: number;
+  mcpTools: number;
+  subagentDefinitions: number;
+  summarizedConversation: number;
+  conversation: number;
+  contextWindow?: number;
+}
+
 export interface SessionUsageReport {
+  context?: UsageContextBreakdown;
+  /** Opt-in view of the latest cached system message, not a historical snapshot. */
+  systemPromptPreview?: { content: string; cachedAt: number };
+  contextPreview?: { category: UsageContextCategory; content: string; capturedAt: number };
   schemaVersion: number;
   reportId: string;
   sessionId: string;
@@ -576,7 +597,8 @@ export class SessionAPI {
           session_id: request.sessionId,
           ...await sessionWorkspaceIdRequest(request.workspaceId),
           include_hidden_subagents: request.includeHiddenSubagents ?? true,
-
+          ...(request.includeSystemPromptPreview ? { include_system_prompt_preview: true } : {}),
+          ...(request.contextPreviewCategory ? { context_preview_category: request.contextPreviewCategory } : {}),
         }
       }));
     } catch (error) {
diff --git a/src/web-ui/src/infrastructure/appearance/appearanceTokenContract.ts b/src/web-ui/src/infrastructure/appearance/appearanceTokenContract.ts
index d953fd1baf..4e0902bb1e 100644
--- a/src/web-ui/src/infrastructure/appearance/appearanceTokenContract.ts
+++ b/src/web-ui/src/infrastructure/appearance/appearanceTokenContract.ts
@@ -88,6 +88,8 @@ const prismTokenSuffixes = [
 const componentTokenSuffixes = [
   'conversation-excerpt-accent',
   'update-material-cyan',
+  'session-usage-input',
+  'session-usage-output',
   'config-page-section-background',
   'config-page-section-border',
   'config-page-section-border-width',
diff --git a/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts b/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
index b90d1971a5..f432402d62 100644
--- a/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
+++ b/src/web-ui/src/infrastructure/appearance/builtins/buildBuiltinAppearance.ts
@@ -313,6 +313,9 @@ function createAppearanceOwnedTokens(
     '--openbitfun-component-conversation-excerpt-accent': String(themes.light['color.accent.default']),
     // Update glass retains its cyan companion when a dark theme's accent becomes blue.
     '--openbitfun-component-update-material-cyan': String(themes.light['color.accent.default']),
+    // Token series stay chromatic even when a product theme uses neutral accents.
+    '--openbitfun-component-session-usage-input': String(themes[palette.type]['color.status.info.emphasis']),
+    '--openbitfun-component-session-usage-output': String(themes[palette.type]['color.accent.secondary']),
     '--openbitfun-domain-context-compression': purple[500],
     '--openbitfun-domain-generative-ui': '#06b6d4',
     '--openbitfun-domain-mini-app': purple[500],
diff --git a/src/web-ui/src/infrastructure/appearance/builtins/composeAppearancePackage.test.ts b/src/web-ui/src/infrastructure/appearance/builtins/composeAppearancePackage.test.ts
index e9d4ced105..cbe21db9a1 100644
--- a/src/web-ui/src/infrastructure/appearance/builtins/composeAppearancePackage.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/builtins/composeAppearancePackage.test.ts
@@ -1,9 +1,40 @@
 import { describe, expect, it } from 'vitest';
+import { themes } from '@openbitfun/theme-openbitfun';
 import type { AppearancePackage } from '../types';
 import { APPEARANCE_THEME_TOKEN_NAMES, getBuiltinAppearanceThemeTokens } from './catalog';
 import { composeAppearancePackage } from './composeAppearancePackage';
 
 describe('composeAppearancePackage', () => {
+  it.each(['light', 'dark'] as const)('supplies colored usage series to legacy %s packages and retains overrides', mode => {
+    const original: AppearancePackage = {
+      schema: 'openbitfun.appearance', schemaVersion: 2,
+      id: 'example.legacy-usage', name: 'Legacy usage', version: '1.0.0', mode,
+    };
+    const payload = JSON.stringify(original);
+    const resolved = composeAppearancePackage(JSON.parse(payload));
+    const tokens = resolved.renderers!['theme-tokens']!.settings.tokens;
+    expect(tokens).toMatchObject({
+      '--openbitfun-component-session-usage-input': themes[mode]['color.status.info.emphasis'],
+      '--openbitfun-component-session-usage-output': themes[mode]['color.accent.secondary'],
+    });
+    expect(composeAppearancePackage(JSON.parse(JSON.stringify(resolved))).renderers?.['theme-tokens']?.settings.tokens)
+      .toEqual(tokens);
+    expect(JSON.stringify(original)).toBe(payload);
+
+    tokens['--openbitfun-component-session-usage-output'] = '#7766bb';
+    expect(composeAppearancePackage(JSON.parse(JSON.stringify(resolved))).renderers!['theme-tokens']!.settings.tokens)
+      .toHaveProperty('--openbitfun-component-session-usage-output', '#7766bb');
+  });
+
+  it('keeps usage series colorful in the monochrome appearance', () => {
+    const tokens = getBuiltinAppearanceThemeTokens('openbitfun-monochrome');
+    expect(tokens['--openbitfun-component-session-usage-input']).toBe(themes.light['color.status.info.emphasis']);
+    expect(tokens['--openbitfun-component-session-usage-output']).toBe(themes.light['color.accent.secondary']);
+    expect(tokens['--openbitfun-component-session-usage-input']).not.toBe(tokens['--openbitfun-component-session-usage-output']);
+    expect(tokens['--openbitfun-component-session-usage-input']).not.toBe(tokens['--openbitfun-color-accent-default']);
+    expect(tokens['--openbitfun-component-session-usage-output']).not.toBe(tokens['--openbitfun-color-accent-secondary']);
+  });
+
   it.each(['light', 'dark'] as const)('supplies subagent accents to legacy %s packages and preserves overrides', mode => {
     const original: AppearancePackage = {
       schema: 'openbitfun.appearance', schemaVersion: 2,
diff --git a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
index ba232a599a..30470a2ba7 100644
--- a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
@@ -790,12 +790,7 @@ describe('AppearanceCompiler', () => {
         },
         'session-usage-panel': {
           parts: {
-            tab: {
-              contexts: [{
-                when: { facets: { tab: 'models' }, states: ['active'] },
-                style: { color: accent },
-              }],
-            },
+            section: { base: { color: accent } },
           },
         },
         'acp-agents-config': {
@@ -1023,7 +1018,7 @@ describe('AppearanceCompiler', () => {
     expect(snapshot.cssText).toContain('[data-openbitfun-component="remote-connect-dialog"][data-openbitfun-part="sidebar"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="remote-connect-dialog"][data-openbitfun-part="overviewAction"][data-openbitfun-group="account"][data-openbitfun-state~="authenticated"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-scene="agents"][data-openbitfun-part="catalogGrid"]');
-    expect(snapshot.cssText).toContain('[data-openbitfun-product-component="session-usage-panel"][data-openbitfun-product-part="tab"][data-openbitfun-tab="models"][data-openbitfun-state~="active"]');
+    expect(snapshot.cssText).toContain('[data-openbitfun-product-component="session-usage-panel"][data-openbitfun-product-part="section"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="acp-agents-config"][data-openbitfun-part="root"][data-openbitfun-view="json"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="acp-agents-config"][data-openbitfun-part="remoteServer"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="tiptap-editor"][data-openbitfun-part="inlineAiPanel"]');
diff --git a/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.test.ts b/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.test.ts
new file mode 100644
index 0000000000..c65cf8b174
--- /dev/null
+++ b/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createFlowChatWidthStore, DEFAULT_FLOW_CHAT_WIDTH, FLOW_CHAT_WIDTH_STORAGE_KEY, MIN_FLOW_CHAT_WIDTH } from './flowChatWidthStore';
+
+function storage(value: string | null = null) {
+  let saved = value;
+  return { getItem: () => saved, setItem: vi.fn((_key: string, next: string) => { saved = next; }) };
+}
+
+describe('FlowChat appearance width preference', () => {
+  it('keeps the previous 900px default for existing installs and uses two thirds as the minimum', () => {
+    expect(DEFAULT_FLOW_CHAT_WIDTH).toBe(900);
+    expect(MIN_FLOW_CHAT_WIDTH).toBe(600);
+    const persisted = storage();
+    expect(createFlowChatWidthStore(persisted).getState().preferredWidth).toBe(900);
+    expect(persisted.setItem).not.toHaveBeenCalled();
+  });
+
+  it('round-trips the preference independently of the current pane size', () => {
+    const persisted = storage();
+    const store = createFlowChatWidthStore(persisted);
+    store.getState().setPreferredWidth(1632.4);
+    expect(persisted.setItem).toHaveBeenLastCalledWith(FLOW_CHAT_WIDTH_STORAGE_KEY, '1632');
+    expect(createFlowChatWidthStore(persisted).getState().preferredWidth).toBe(1632);
+    store.getState().setPreferredWidth(100);
+    expect(createFlowChatWidthStore(persisted).getState().preferredWidth).toBe(600);
+    store.getState().setPreferredWidth(Number.NaN);
+    store.getState().setPreferredWidth(Number.POSITIVE_INFINITY);
+    expect(store.getState().preferredWidth).toBe(600);
+  });
+
+  it.each(['', 'broken', 'null', 'Infinity', '-1', '599'])('retains an unreadable/legacy record %j without rewriting it', value => {
+    const persisted = storage(value);
+    expect(createFlowChatWidthStore(persisted).getState().preferredWidth).toBe(900);
+    expect(persisted.setItem).not.toHaveBeenCalled();
+  });
+
+  it('remains usable when reading or writing storage fails', () => {
+    const store = createFlowChatWidthStore({ getItem: () => { throw Error('unavailable'); }, setItem: () => { throw Error('unavailable'); } });
+    store.getState().setPreferredWidth(1200);
+    expect(store.getState().preferredWidth).toBe(1200);
+  });
+});
diff --git a/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.ts b/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.ts
new file mode 100644
index 0000000000..784457d3c5
--- /dev/null
+++ b/src/web-ui/src/infrastructure/appearance/preferences/flowChatWidthStore.ts
@@ -0,0 +1,42 @@
+import { tokens } from '@openbitfun/design-tokens';
+import { createStore } from 'zustand/vanilla';
+
+export const DEFAULT_FLOW_CHAT_WIDTH = Number.parseFloat(String(tokens['control.flowChat.transcriptMaxWidth']));
+export const MIN_FLOW_CHAT_WIDTH = Math.round(DEFAULT_FLOW_CHAT_WIDTH * 2 / 3);
+export const FLOW_CHAT_WIDTH_STORAGE_KEY = 'openbitfun:appearance:flowChatWidth';
+
+type PreferenceStorage = Pick<Storage, 'getItem' | 'setItem'>;
+
+function localStorage(): PreferenceStorage | undefined {
+  try { return typeof window === 'undefined' ? undefined : window.localStorage; }
+  catch { return undefined; }
+}
+
+/** Controller-local appearance preference, shared by all conversation panes.
+ * The saved width is never reduced by a narrow pane or a remote session.
+ */
+export function createFlowChatWidthStore(storage = localStorage()) {
+  let saved = Number.NaN;
+  try {
+    const value = storage?.getItem(FLOW_CHAT_WIDTH_STORAGE_KEY);
+    if (value?.trim()) saved = Number(value);
+  } catch { /* Appearance remains usable when storage is unavailable. */ }
+
+  return createStore<{
+    preferredWidth: number;
+    setPreferredWidth: (width: number) => void;
+  }>((set, get) => ({
+    preferredWidth: Number.isFinite(saved) && saved >= MIN_FLOW_CHAT_WIDTH
+      ? Math.round(saved) : DEFAULT_FLOW_CHAT_WIDTH,
+    setPreferredWidth: width => {
+      if (!Number.isFinite(width)) return;
+      const preferredWidth = Math.max(MIN_FLOW_CHAT_WIDTH, Math.round(width));
+      if (get().preferredWidth === preferredWidth) return;
+      try { storage?.setItem(FLOW_CHAT_WIDTH_STORAGE_KEY, String(preferredWidth)); }
+      catch { /* Keep the in-memory preference if persistence is unavailable. */ }
+      set({ preferredWidth });
+    },
+  }));
+}
+
+export const flowChatWidthStore = createFlowChatWidthStore();
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index caefde6f28..cf6352809b 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -9,7 +9,7 @@ import { markdownAppearanceDescriptor } from '@/infrastructure/markdown/appearan
 import { chatInputAppearanceDescriptor } from '@/flow_chat/components/ChatInput.appearance';
 import { harnessProfileSelectorAppearanceDescriptor } from '@/flow_chat/components/HarnessProfileSelector.appearance';
 import { composerVoiceInputAppearanceDescriptor } from '@/flow_chat/components/voice/ComposerVoiceInputButton.appearance';
-import { sessionUsagePanelAppearanceDescriptor } from '@/flow_chat/components/usage/appearance';
+import { sessionUsagePanelAppearanceDescriptor, toolDefinitionsPreviewAppearanceDescriptor } from '@/flow_chat/components/usage/appearance';
 import { richTextInputAppearanceDescriptor } from '@/flow_chat/components/RichTextInput.appearance';
 import { modelRoundItemAppearanceDescriptor } from '@/flow_chat/components/modern/ModelRoundItem.appearance';
 import { deepReviewActionBarAppearanceDescriptor } from '@/flow_chat/deep-review/action-bar/appearance';
@@ -44,7 +44,6 @@ import { exportImageAppearanceDescriptor } from '@/flow_chat/components/modern/E
 import { userMessageItemAppearanceDescriptor } from '@/flow_chat/components/modern/UserMessageItem.appearance';
 import { externalHistoryNoticeAppearanceDescriptor } from '@/flow_chat/components/ExternalHistoryNotice.appearance';
 import { sessionUsageReportCardAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageReportCard.appearance';
-import { sessionUsageModalAppearanceDescriptor } from '@/flow_chat/components/usage/SessionUsageModal.appearance';
 import { createPlanDisplayAppearanceDescriptor } from '@/flow_chat/tool-cards/CreatePlanDisplay.appearance';
 import { editorConfigAppearanceDescriptor } from '@/app/scenes/settings/pages/development/EditorSettingsPage.appearance';
 import { appearanceSettingsAppearanceDescriptor } from '@/app/scenes/settings/pages/application/AppearanceSettingsPage.appearance';
@@ -273,6 +272,7 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(harnessProfileSelectorAppearanceDescriptor)
     .registerComponent(composerVoiceInputAppearanceDescriptor)
     .registerComponent(sessionUsagePanelAppearanceDescriptor)
+    .registerComponent(toolDefinitionsPreviewAppearanceDescriptor)
     .registerComponent(richTextInputAppearanceDescriptor)
     .registerComponent(modelRoundItemAppearanceDescriptor)
     .registerComponent(deepReviewActionBarAppearanceDescriptor)
@@ -308,7 +308,6 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(userMessageItemAppearanceDescriptor)
     .registerComponent(externalHistoryNoticeAppearanceDescriptor)
     .registerComponent(sessionUsageReportCardAppearanceDescriptor)
-    .registerComponent(sessionUsageModalAppearanceDescriptor)
     .registerComponent(createPlanDisplayAppearanceDescriptor)
     .registerComponent(editorConfigAppearanceDescriptor)
     .registerComponent(appearanceSettingsAppearanceDescriptor)
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 6fbfc75826..f3a2d6ba8e 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -1,4 +1,8 @@
 {
+  "contentWidth": {
+    "resizeLeft": "Resize conversation from the left edge",
+    "resizeRight": "Resize conversation from the right edge"
+  },
   "externalHistory": {
     "removed": "The source session was removed from OpenBitFun. This branch keeps its own history.",
     "restoreSource": "Add source again",
@@ -198,6 +202,79 @@
     "retry": "Retry"
   },
   "usage": {
+    "toolDefinitions": {
+      "required": "Required",
+      "optional": "Optional",
+      "anyValue": "Any value is allowed.",
+      "noValue": "No value is allowed.",
+      "items": "Array items",
+      "prefixItems": "Tuple items",
+      "oneOf": "Exactly one option",
+      "anyOf": "One or more options",
+      "allOf": "All conditions",
+      "definitions": "Referenced definitions",
+      "enum": "Allowed values",
+      "default": "Default",
+      "constraints": {
+        "const": "Fixed value",
+        "minimum": "Minimum",
+        "maximum": "Maximum",
+        "exclusiveMinimum": "Greater than",
+        "exclusiveMaximum": "Less than",
+        "minLength": "Min. length",
+        "maxLength": "Max. length",
+        "minItems": "Min. items",
+        "maxItems": "Max. items",
+        "pattern": "Pattern",
+        "format": "Format",
+        "additionalProperties": "Additional properties",
+        "reference": "Reference"
+      },
+      "search": "Search tools or parameters",
+      "clearSearch": "Clear search",
+      "unavailable": "These tool definitions could not be read.",
+      "noMatches": "No matching tools",
+      "empty": "No tool definitions in this request",
+      "parameters": "Parameters",
+      "noParameters": "No parameters accepted.",
+      "anyParameters": "Parameters are not restricted.",
+      "notes": "Tool calling instructions"
+    },
+    "context": {
+      "title": "Context composition",
+      "estimated": "Estimated",
+      "estimatedTokens": "Estimated tokens",
+      "estimateHelp": "Estimated from the latest recorded model request. Rules include workspace and user instructions; Skills and subagents include their listings. These are not provider-reported token counts.",
+      "unavailable": "No context breakdown recorded",
+      "previewCategory": "Preview {{category}}",
+      "previewEmpty": "This category has no content in the latest request.",
+      "previewUnavailable": "This session or host has no preview available for this category.",
+      "previewFailed": "Unable to load the preview. Please try again.",
+      "categories": {
+        "systemPrompt": "System prompt",
+        "toolDefinitions": "Tool definitions",
+        "rules": "Rules",
+        "skills": "Skills",
+        "mcpTools": "MCP & dynamic tools",
+        "subagentDefinitions": "Subagent definitions",
+        "summarizedConversation": "Summarized conversation",
+        "conversation": "Conversation"
+      }
+    },
+    "tokens": {
+      "title": "Token usage",
+      "uncachedInput": "Input (uncached)",
+      "cacheHit": "KV Cache hits",
+      "hitRate": "Cache hit rate {{value}}",
+      "hitRateDetail": "Cache hit rate {{rate}} ({{cached}} / {{input}} input tokens)",
+      "cacheHitDetail": "(cache hit {{rate}})",
+      "minimumRate": "≥{{rate}}",
+      "recordedCacheHits": "Recorded cache hits",
+      "remainingInput": "Remaining input",
+      "inputShareDetail": "{{tokens}} / {{input}} input tokens ({{share}} of input)",
+      "partialCacheHelp": "Only some calls reported cache usage. The chart shows recorded cache hits; remaining input includes unreported usage. The hit percentage is a lower bound over all input tokens.",
+      "cacheUnavailable": "(cache unavailable)"
+    },
     "title": "Session Usage",
     "unavailable": "Unavailable",
     "redacted": "Redacted",
@@ -215,8 +292,6 @@
     "actions": {
       "copyMarkdown": "Copy Markdown",
       "copied": "Copied",
-      "copySessionId": "Copy session ID",
-      "copyWorkspacePath": "Copy project path",
       "openDetails": "Open details",
       "openFileDiff": "Open diff",
       "openSectionDetails": "Open {{section}} details",
@@ -355,11 +430,10 @@
     "runtime": {
       "open": "Generate session usage",
       "button": "Usage",
-      "tooltip": "Generate a usage report in this chat"
+      "tooltip": "Open the session usage report in the side panel"
     },
     "panel": {
       "tabsLabel": "Usage report sections",
-      "metadataLabel": "Usage report metadata",
       "accounting": "Accounting",
       "turnScope": "Scope",
       "cacheCoverage": "Cache reporting",
@@ -367,7 +441,14 @@
       "fileScope": "File scope",
       "toolErrors": "Tool errors",
       "modelErrors": "Model errors",
-      "errorScope": "Error scope"
+      "errorScope": "Error scope",
+      "report": "Session usage report",
+      "workspace": "Project",
+      "totalTokens": "Total tokens",
+      "explorer": "Usage explorer",
+      "cachedSubset": "Cached tokens are included in input tokens, not added to the total again.",
+      "distributionUnavailable": "A token breakdown is unavailable because complete, consistent input and output counts were not reported.",
+      "failed": "Could not generate the usage report"
     },
     "privacy": {
       "title": "Privacy-safe report",
diff --git a/src/web-ui/src/locales/en-US/settings/appearance.json b/src/web-ui/src/locales/en-US/settings/appearance.json
index 1ff108c33e..a4b0b32ece 100644
--- a/src/web-ui/src/locales/en-US/settings/appearance.json
+++ b/src/web-ui/src/locales/en-US/settings/appearance.json
@@ -1,4 +1,12 @@
 {
+  "contentWidth": {
+    "title": "Conversation content width",
+    "label": "Preferred width",
+    "description": "Minimum {{min}} px. The displayed width fits the panel with space at both edges. Drag either content edge to adjust; your preference is remembered on this device.",
+    "reset": "Reset to default",
+    "decrease": "Decrease conversation width",
+    "increase": "Increase conversation width"
+  },
   "title": "Appearance",
   "subtitle": "Adjust themes and font size",
   "sessionPanel": {
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 3e62b44c84..a190fdaf50 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -1,4 +1,8 @@
 {
+  "contentWidth": {
+    "resizeLeft": "从左侧调整对话内容宽度",
+    "resizeRight": "从右侧调整对话内容宽度"
+  },
   "externalHistory": {
     "removed": "源会话已从 OpenBitFun 移除，当前分支保留独立历史。",
     "restoreSource": "重新添加源会话",
@@ -198,6 +202,79 @@
     "retry": "重试"
   },
   "usage": {
+    "toolDefinitions": {
+      "required": "必填",
+      "optional": "可选",
+      "anyValue": "允许任意值。",
+      "noValue": "不接受任何值。",
+      "items": "数组元素",
+      "prefixItems": "元组元素",
+      "oneOf": "满足其中一项",
+      "anyOf": "满足一项或多项",
+      "allOf": "满足所有条件",
+      "definitions": "引用定义",
+      "enum": "可选值",
+      "default": "默认值",
+      "constraints": {
+        "const": "固定值",
+        "minimum": "最小值",
+        "maximum": "最大值",
+        "exclusiveMinimum": "大于",
+        "exclusiveMaximum": "小于",
+        "minLength": "最短长度",
+        "maxLength": "最长长度",
+        "minItems": "最少项数",
+        "maxItems": "最多项数",
+        "pattern": "匹配模式",
+        "format": "格式",
+        "additionalProperties": "额外参数",
+        "reference": "引用"
+      },
+      "search": "搜索工具或参数",
+      "clearSearch": "清除搜索",
+      "unavailable": "无法读取这些工具定义。",
+      "noMatches": "没有匹配的工具",
+      "empty": "此请求没有工具定义",
+      "parameters": "参数",
+      "noParameters": "不接受参数。",
+      "anyParameters": "未限制参数。",
+      "notes": "工具调用说明"
+    },
+    "context": {
+      "title": "上下文构成",
+      "estimated": "估算",
+      "estimatedTokens": "估算 Token",
+      "estimateHelp": "基于最近一次已记录的模型请求估算。规则包含项目及用户指令，技能和子代理包含其定义列表；分类数量并非模型提供方上报的精确值。",
+      "unavailable": "尚未记录上下文分类数据",
+      "previewCategory": "预览{{category}}",
+      "previewEmpty": "最近一次请求中，此分类没有内容。",
+      "previewUnavailable": "当前会话或执行主机未提供此分类的内容预览。",
+      "previewFailed": "内容加载失败，请重试。",
+      "categories": {
+        "systemPrompt": "系统提示词",
+        "toolDefinitions": "工具定义",
+        "rules": "规则",
+        "skills": "技能",
+        "mcpTools": "MCP 与动态工具",
+        "subagentDefinitions": "子代理定义",
+        "summarizedConversation": "压缩后的对话摘要",
+        "conversation": "对话内容"
+      }
+    },
+    "tokens": {
+      "title": "Token 用量",
+      "uncachedInput": "输入（未命中缓存）",
+      "cacheHit": "KV Cache 命中",
+      "hitRate": "缓存命中率 {{value}}",
+      "hitRateDetail": "缓存命中率 {{rate}}（{{cached}} / {{input}} 输入 Token）",
+      "cacheHitDetail": "（缓存命中 {{rate}}）",
+      "minimumRate": "≥{{rate}}",
+      "recordedCacheHits": "已记录缓存命中",
+      "remainingInput": "其余输入",
+      "inputShareDetail": "{{tokens}} / {{input}} 输入 Token（占输入 {{share}}）",
+      "partialCacheHelp": "仅部分调用上报了缓存用量。图中显示已记录的缓存命中，其余输入包含未上报部分；命中百分比表示相对于全部输入的下限。",
+      "cacheUnavailable": "（缓存不可用）"
+    },
     "title": "会话用量",
     "unavailable": "不可用",
     "redacted": "已脱敏",
@@ -217,8 +294,6 @@
       "copied": "已复制",
       "openDetails": "打开详情",
       "openFileDiff": "打开 diff",
-      "copySessionId": "复制会话 ID",
-      "copyWorkspacePath": "复制项目路径",
       "openSectionDetails": "打开{{section}}详情",
       "jumpToTurn": "跳转到该轮次",
       "viewDetails": "详情",
@@ -320,7 +395,7 @@
     "runtime": {
       "open": "生成会话用量",
       "button": "用量",
-      "tooltip": "在当前聊天中生成用量报告"
+      "tooltip": "在侧面板中打开会话用量报告"
     },
     "panel": {
       "tabsLabel": "用量报告分区",
@@ -332,7 +407,13 @@
       "toolErrors": "工具错误",
       "modelErrors": "模型错误",
       "errorScope": "错误范围",
-      "metadataLabel": "用量报告元信息"
+      "report": "会话用量报告",
+      "workspace": "项目",
+      "totalTokens": "累计 Token",
+      "explorer": "用量明细",
+      "cachedSubset": "缓存 Token 已包含在输入 Token 中，不会重复计入总量。",
+      "distributionUnavailable": "未记录完整且一致的输入与输出数量，暂时无法展示 Token 分布。",
+      "failed": "无法生成会话用量报告"
     },
     "privacy": {
       "title": "隐私安全报告",
diff --git a/src/web-ui/src/locales/zh-CN/settings/appearance.json b/src/web-ui/src/locales/zh-CN/settings/appearance.json
index c290a8f8f1..afcf82ebb7 100644
--- a/src/web-ui/src/locales/zh-CN/settings/appearance.json
+++ b/src/web-ui/src/locales/zh-CN/settings/appearance.json
@@ -1,4 +1,12 @@
 {
+  "contentWidth": {
+    "title": "对话内容宽度",
+    "label": "偏好宽度",
+    "description": "最小 {{min}} px。显示宽度会根据面板自动收窄，并保留两侧间距。也可拖拽内容边界调整，设置会在当前设备记忆。",
+    "reset": "恢复默认",
+    "decrease": "缩小对话内容宽度",
+    "increase": "增大对话内容宽度"
+  },
   "title": "外观",
   "subtitle": "调整主题与字体大小",
   "sessionPanel": {
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index 65d8621909..f19e6d94c4 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -1,4 +1,8 @@
 {
+  "contentWidth": {
+    "resizeLeft": "從左側調整對話內容寬度",
+    "resizeRight": "從右側調整對話內容寬度"
+  },
   "externalHistory": {
     "removed": "來源對話已從 OpenBitFun 移除，目前分支保留獨立歷史。",
     "restoreSource": "重新新增來源對話",
@@ -198,6 +202,79 @@
     "retry": "重試"
   },
   "usage": {
+    "toolDefinitions": {
+      "required": "必填",
+      "optional": "可選",
+      "anyValue": "允許任意值。",
+      "noValue": "不接受任何值。",
+      "items": "陣列元素",
+      "prefixItems": "元組元素",
+      "oneOf": "符合其中一項",
+      "anyOf": "符合一項或多項",
+      "allOf": "符合所有條件",
+      "definitions": "參照定義",
+      "enum": "可選值",
+      "default": "預設值",
+      "constraints": {
+        "const": "固定值",
+        "minimum": "最小值",
+        "maximum": "最大值",
+        "exclusiveMinimum": "大於",
+        "exclusiveMaximum": "小於",
+        "minLength": "最短長度",
+        "maxLength": "最長長度",
+        "minItems": "最少項數",
+        "maxItems": "最多項數",
+        "pattern": "比對模式",
+        "format": "格式",
+        "additionalProperties": "額外參數",
+        "reference": "參照"
+      },
+      "search": "搜尋工具或參數",
+      "clearSearch": "清除搜尋",
+      "unavailable": "無法讀取這些工具定義。",
+      "noMatches": "沒有符合的工具",
+      "empty": "此請求沒有工具定義",
+      "parameters": "參數",
+      "noParameters": "不接受參數。",
+      "anyParameters": "未限制參數。",
+      "notes": "工具呼叫說明"
+    },
+    "context": {
+      "title": "上下文組成",
+      "estimated": "估算",
+      "estimatedTokens": "估算 Token",
+      "estimateHelp": "依據最近一次已記錄的模型請求估算。規則包含專案及使用者指令，技能與子代理包含其定義清單；分類數量並非模型提供方回報的精確值。",
+      "unavailable": "尚未記錄上下文分類資料",
+      "previewCategory": "預覽{{category}}",
+      "previewEmpty": "最近一次請求中，此分類沒有內容。",
+      "previewUnavailable": "目前工作階段或執行主機未提供此分類的內容預覽。",
+      "previewFailed": "內容載入失敗，請重試。",
+      "categories": {
+        "systemPrompt": "系統提示詞",
+        "toolDefinitions": "工具定義",
+        "rules": "規則",
+        "skills": "技能",
+        "mcpTools": "MCP 與動態工具",
+        "subagentDefinitions": "子代理定義",
+        "summarizedConversation": "壓縮後的對話摘要",
+        "conversation": "對話內容"
+      }
+    },
+    "tokens": {
+      "title": "Token 用量",
+      "uncachedInput": "輸入（未命中快取）",
+      "cacheHit": "KV Cache 命中",
+      "hitRate": "快取命中率 {{value}}",
+      "hitRateDetail": "快取命中率 {{rate}}（{{cached}} / {{input}} 輸入 Token）",
+      "cacheHitDetail": "（快取命中 {{rate}}）",
+      "minimumRate": "≥{{rate}}",
+      "recordedCacheHits": "已記錄快取命中",
+      "remainingInput": "其餘輸入",
+      "inputShareDetail": "{{tokens}} / {{input}} 輸入 Token（占輸入 {{share}}）",
+      "partialCacheHelp": "僅部分呼叫回報了快取用量。圖中顯示已記錄的快取命中，其餘輸入包含未回報部分；命中百分比表示相對於全部輸入的下限。",
+      "cacheUnavailable": "（快取無法取得）"
+    },
     "title": "工作階段用量",
     "unavailable": "不可用",
     "redacted": "已遮蔽",
@@ -217,8 +294,6 @@
       "copied": "已複製",
       "openDetails": "開啟詳情",
       "openFileDiff": "開啟 diff",
-      "copySessionId": "複製工作階段 ID",
-      "copyWorkspacePath": "複製專案路徑",
       "openSectionDetails": "開啟{{section}}詳情",
       "jumpToTurn": "跳轉到該回合",
       "viewDetails": "詳情",
@@ -320,7 +395,7 @@
     "runtime": {
       "open": "產生工作階段用量",
       "button": "用量",
-      "tooltip": "在目前聊天中產生用量報告"
+      "tooltip": "在側面板中開啟工作階段用量報告"
     },
     "panel": {
       "tabsLabel": "用量報告分區",
@@ -332,7 +407,13 @@
       "toolErrors": "工具錯誤",
       "modelErrors": "模型錯誤",
       "errorScope": "錯誤範圍",
-      "metadataLabel": "用量報告中繼資訊"
+      "report": "工作階段用量報告",
+      "workspace": "專案",
+      "totalTokens": "累計 Token",
+      "explorer": "用量明細",
+      "cachedSubset": "快取 Token 已包含在輸入 Token 中，不會重複計入總量。",
+      "distributionUnavailable": "未記錄完整且一致的輸入與輸出數量，暫時無法顯示 Token 分布。",
+      "failed": "無法產生工作階段用量報告"
     },
     "privacy": {
       "title": "隱私安全報告",
diff --git a/src/web-ui/src/locales/zh-TW/settings/appearance.json b/src/web-ui/src/locales/zh-TW/settings/appearance.json
index 153ef2f92c..c42d6952de 100644
--- a/src/web-ui/src/locales/zh-TW/settings/appearance.json
+++ b/src/web-ui/src/locales/zh-TW/settings/appearance.json
@@ -1,4 +1,12 @@
 {
+  "contentWidth": {
+    "title": "對話內容寬度",
+    "label": "偏好寬度",
+    "description": "最小 {{min}} px。顯示寬度會依面板自動縮小，並保留兩側間距。也可拖曳內容邊界調整，設定會在目前裝置記憶。",
+    "reset": "恢復預設",
+    "decrease": "縮小對話內容寬度",
+    "increase": "增大對話內容寬度"
+  },
   "title": "外觀",
   "subtitle": "調整主題與字體大小",
   "sessionPanel": {
diff --git a/src/web-ui/src/shared/types/panelContent.ts b/src/web-ui/src/shared/types/panelContent.ts
index df63626dda..5d45f1ba72 100644
--- a/src/web-ui/src/shared/types/panelContent.ts
+++ b/src/web-ui/src/shared/types/panelContent.ts
@@ -23,6 +23,7 @@ export type PanelContentType =
   | 'plan-viewer'
   | 'btw-session'
   | 'session-usage'
+  | 'tool-definitions'
   | 'thinking-detail'
   | 'background-command-output'
   | 'review-platform'

From 526cb21b047b595a7e2ac51023d1baff3256182e Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Thu, 29 Oct 2026 23:01:17 +0800
Subject: [PATCH 2/2] test(flow-chat): provide resize observer in chat pane
 fixture

---
 .../src/app/scenes/session/ChatPane.composer-layout.test.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx b/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
index 02d4001ac9..e608270d6f 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
+++ b/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
@@ -26,6 +26,10 @@ vi.mock('@/flow_chat/session-drivers/sessionFileNavigation', () => ({ sessionWor
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 it('docks only the composer and forwards resize suspension without remounting the transcript or draft', () => {
+  vi.stubGlobal('ResizeObserver', class {
+    observe() {}
+    disconnect() {}
+  });
   const container = document.createElement('div');
   document.body.appendChild(container);
   const root = createRoot(container);
@@ -51,5 +55,6 @@ it('docks only the composer and forwards resize suspension without remounting th
   } finally {
     act(() => root.unmount());
     container.remove();
+    vi.unstubAllGlobals();
   }
 });