diff --git a/bin/design-tokens.mjs b/bin/design-tokens.mjs
index 090a021ff..3ffadf3c2 100644
--- a/bin/design-tokens.mjs
+++ b/bin/design-tokens.mjs
@@ -32,6 +32,7 @@ export function designTokenSources(root) {
   return [
     ...sources,
     'packages/chat-ui/src/styles.ts',
+    'packages/chat-ui/src/markdown-styles.ts',
     'index.html',
     'editor.html',
     'history.html',
@@ -51,13 +52,15 @@ export function auditDesignTokens(root, generated = []) {
   const foundation = read('public/ran-tokens.css');
   const application = read('public/app-tokens.css');
   const sharedChat = read('packages/chat-ui/src/styles.ts');
+  const markdownStyles = 'packages/chat-ui/src/markdown-styles.ts';
   const errors = [];
   const inspect = (file, source) => {
     // Only CSS in HTML participates: text, SVG artwork, meta colours and script
     // strings are not stylesheet consumers.
     const css = authoredStyles(file, source);
     const dependencies = file.endsWith('.html') ? [] : [foundation];
-    if (!file.endsWith('.html') && file !== 'packages/chat-ui/src/styles.ts') dependencies.push(application);
+    if (!file.endsWith('.html') && file !== 'packages/chat-ui/src/styles.ts' && file !== markdownStyles)
+      dependencies.push(application);
     if (file === 'styles/assistant.css') dependencies.push(sharedChat);
     if (file.endsWith('.html')) {
       for (const [, path] of source.matchAll(/<link[^>]*href="\/([^"?]+\.css)"/g)) {
@@ -67,7 +70,13 @@ export function auditDesignTokens(root, generated = []) {
     }
     // The resizer writes this geometry onto the host at runtime. It is not a
     // colour/spacing role and has a local fallback before the panel mounts.
-    const external = file === 'styles/assistant.css' ? ['--agent-panel-width'] : [];
+    const external =
+      file === 'styles/assistant.css'
+        ? ['--agent-panel-width']
+        : // Shiki token colors are written onto safe spans at render time.
+          file === markdownStyles
+          ? ['--cui-token-light', '--cui-token-dark']
+          : [];
     const missing = unresolvedTokens(css, dependencies, external);
     if (missing.length) errors.push({ file, missing });
   };
diff --git a/docs/design-system.md b/docs/design-system.md
index a61449f03..d18957122 100644
--- a/docs/design-system.md
+++ b/docs/design-system.md
@@ -213,90 +213,158 @@ Two rules are mechanical because both fail silently in review:
 
 ## Assistant application layout contract
 
-The canonical composition rules are owned by
-[ranui DESIGN section 11](https://github.com/chaxus/ran/blob/main/packages/ranui/docs/DESIGN.md#11-composition--the-page-not-the-component).
-This section supplies the application's geometry and browser acceptance; the site's marketing
-column widths do not apply inside the assistant. `styles/assistant.css` owns the shared values.
-
-| Geometry        | Product contract                                                                                                   | Acceptance subject                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| Content rail    | 16px from the panel's inside edge                                                                                  | Header title text, onboarding copy, unframed copy, section labels, field/list outer frames |
-| Header title    | Text-sized target with 8px inline padding; leading hit area extends into the gutter                                | DOM Range text left, actual button width, hover/focus area and neighboring actions         |
-| Back navigation | Center a 16px SVG viewport in the 32px fine / 44px coarse pointer target; the viewport returns to the content rail | SVG viewport and full target bounds, not painted path bounds                               |
-| Subpage heading | An explicit navigation column followed by an 8px gap; shared by every subpage and nested artifact state            | Repeated title rail: 48px fine / 54px coarse, relative to the panel's inside edge          |
-| Framed fields   | Outer frame follows the content rail; internal text retains its control inset                                      | Native frame and real ranui shadow parts are separate subjects                             |
-| Vertical groups | 8px internal, 16px group and 24px section spacing                                                                  | Actual related-region edges; empty status paragraphs reserve no anonymous margins          |
-
-The title's flexible trailing filler is layout space, not a clickable/hovering title surface.
-At panel widths up to 360px, the runtime header gives the readable title its own row above
-the five action slots. Coarse input retains 44px targets without constraining the title to
-an icon's flex basis. Back focus outlines use zero offset so their full 2px ring remains
-inside the scrolling view. Populated result lists keep a 16px boundary before Import.
-Back navigation is a declared hierarchy, not an unexplained extra body inset. Centered empty
-states remain centered within their content frame. Frame, text, icon viewport and hit area
-must not be substituted for each other during review. CSS token compliance alone cannot prove
-these relationships. Do not nudge individual pages or SVG paths to compensate for a shared
-layout error.
-
-Apply this contract to onboarding/chat, Models, Conversations, Sources and Artifacts, including
-list/import/editor, empty/populated states, statuses and disclosures. Layout owners retain
-callbacks, focus return, busy guards and drafts. New sibling views must join the same checks.
-
-`test/e2e/agent-layout-rails.spec.ts` and `test/e2e/lib/layout-geometry.ts` read actual text
-Ranges and layout frames after fonts and async view content settle. They cover 432px desktop
-panels, 360px/320px windows, English/Portuguese, both themes and coarse input, with nested
-artifact import/editor/return paths. The existing sidebar test also measures title text rather
-than its padded button rectangle. Relevant focus, navigation, workspace and source/artifact
-suites remain required alongside the geometry assertions.
-
-Acceptance must reject a text-only 8px drift even when the outer frame stays fixed, a title
-target expanded into free toolbar space, and a sibling view shifted off its content rail.
-Review screenshots with these measured relationships; a stored screenshot without assertions
-or inspection is not acceptance evidence.
-
-### Settings command groups
-
-History & data is already a named section inside the assistant pane. Restore, Import and
-Export use content-sized native secondary buttons in one column: each button has a restrained
-resting surface and functional inset stroke, with no enclosing group frame, group fill,
-raised shadow or row separators. Keep 8px between buttons and 16px before deletion commands.
-A recognizable button shape must be visible before hover in both themes and on touch screens;
-verb labels and hover feedback alone do not establish initial discoverability.
-
-The declared columns are 16px from the panel’s inner edge for both checkbox and 16px icon
-viewports, and 40px for checkbox/action text Ranges. Each command target extends 8px into the
-owned inline-start gutter, with 8px inline padding and icon/label gap; target frames need not
-match visible columns. Keep targets inside the pane, at least 44px high, and non-overlapping.
-Long translations wrap without shifting the columns or overflowing the pane. The save-history
-checkbox uses the monochrome primary role.
-
-Deletion commands share the secondary control shape with readable danger text/icons; only
-explicit confirmation has a solid danger fill. Hover, press, disabled and keyboard focus
-remain distinct. Draft, confirmation, busy and focus-return behavior remain owned by the
-existing controls. Acceptance checks actual renders as well as shared checkbox/icon/text
-geometry, resting surface difference from the canvas, text contrast and real interactions.
-
-Review boundaries in the full pane. The panel/editor edge owns the independent sidebar;
-the search/input frames identify editable values; the single History & data section divider
-separates task regions; button surfaces identify action targets; keyboard outlines identify focus.
-An inner card or more row rules
-would repeat those relationships. Models picker frames, Sources search/attachment controls
-and Artifacts form fields keep their functional control boundaries. Do not remove every
-border globally, add transparent borders to preserve obsolete card insets, or require a
-decorative group outline in acceptance.
-
-### Models, Sources and Artifacts
-
-Apply the same boundary review to each complete view and its expanded states:
-
-| Surface   | Flat composition                                                                                                                                 | Functional boundaries retained                                                                                                                                |
-| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Models    | Device/service containers, cached entries and preferences use headings and the existing group gap; no extra disclosure/row rules                 | Model/source pickers, endpoint/custom fields, focus and explicit load/connect/delete states                                                                   |
-| Sources   | Separate the attached list from search by 16px; keep removal beside the title while the excerpt expands; no result card or remove-button outline | Search input, native disclosure and bounded excerpt scrolling; Attach file is the primary entry action                                                        |
-| Artifacts | Full-width saved-result rows; quiet ordinary review/export/page/revision controls; no blanket button outlines                                    | Import/Save/Use in draft primary roles, editable fields, structured table row relationships, revision input/diff, focus and explicit destructive confirmation |
-
-Use application danger foreground roles for quiet destructive labels and their hover/active
-states. Disabled commands keep their own disabled role and do not inherit an enabled fill.
-Do not infer that every control is a secondary outlined button from its ancestor view class.
-Role-specific styling belongs to the actual action. The full state inventory, renders and
-verification are recorded in [the workspace boundary audit](explorations/2026-10-20-workspace-boundary-audit.md).
+ranui DESIGN (composition), INTERACTION and ACCEPTANCE supply the component and interaction
+rules. This section owns Document's assistant geometry and task acceptance; marketing column
+widths do not apply inside the editor. Shared application values belong in `styles/assistant.css`;
+ChatView and artifact presentation keep their existing owners.
+
+| Geometry           | Product contract                                                                                                                                                      | Acceptance subject                                                                               |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| Dock and expansion | Default dock 480px, minimum 320px; temporary expansion up to 1040px while retaining at least 360px for Office on desktop                                              | Actual panel/editor bounds, resize separator, saved dock preference and narrow viewport clamping |
+| Content rail       | 24px inside normal desktop surfaces; 16px on narrow 320px/360px layouts                                                                                               | Header title text, unframed copy, section labels and field/list outer frames within each surface |
+| Header             | One 48px fine-input / 52px coarse-input row: content-sized Chat/home, Artifacts, Conversations, New, Expand/Collapse and Close                                        | Text/icon rail, target bounds, current context, accessible names and overflow                    |
+| Split workbench    | Only the selected Artifacts route at assistant width >=840px: Chat left, artifact list/detail right; minima 320px/480px, one 1px divider, extra width distributed 2:3 | Independent scroll regions, column bounds, focused surface and preserved artifact state          |
+| Reading measure    | Single-surface Chat centers a column capped at 680px; prose caps at 68ch, with 16px body copy on ordinary desktop panes                                               | Actual text measure, heading/list rhythm, wide code/table containment and long localized content |
+| Nested return      | Artifact-owned guarded Back lives in the artifact region in split mode and the single shell return slot in compact mode                                               | One operation/control, destination, Escape, dirty/busy guards and focus restoration              |
+| Quiet commands     | Visible leading content follows the surface rail; padded hit frames may extend into its gutter                                                                        | Text/icon/disclosure starts, wrapped rows and separators measured separately from hit frames     |
+| Fields and groups  | Field frames follow the surface rail and retain internal control insets; 8px internal, 16px group, 24px section gaps                                                  | Real frames/shadow parts and painted region edges; empty statuses reserve no anonymous margins   |
+
+Expansion never overwrites the dock preference. Manual pointer/keyboard resize exits expansion
+and deliberately updates that preference; window resize clamps presentation only. At narrow
+widths use the viewport when a 360px document remainder cannot fit. Hide Expand when it cannot
+increase useful space. At 320px touch the remaining four icon commands and content-sized title
+must fit with non-overlapping 44px targets. Fine-input header commands use 32px targets; coarse
+input uses at least 44px. The title's trailing filler is layout space, not a clickable surface.
+Keep focus separate from route selection; there is no second destination strip.
+
+Artifacts remains the selected route while Chat is its visible companion. Selecting Chat
+explicitly returns to the centered single-surface reading view. Below the split threshold show
+the selected surface. Width-only transitions do not run route-leave cancellation or artifact
+refresh: retain the mounted owner, selected artifact/version, mode, drafts, text selection and
+reading position. If collapse hides the focused Chat surface, move focus to a visible destination
+without discarding its saved selection. Sources, Models and Conversations retain their routes.
+Returning to Chat restores the displayed conversation and draft rather than switching sessions.
+Open Chat without a configured model; loading/downloading/connecting remains explicit and does
+not precede unrelated views. Preserve source/consent and request/session lifetimes.
+
+An artifact list returns to displayed Chat. Artifact detail/import returns to its list using the
+existing artifact-owned button, relocated rather than cloned. In split mode this local Back does
+not replace the global Chat identity; in compact mode it occupies the shell return slot and
+suppresses the competing generic return. Its localized label, busy registry and dirty confirmation
+stay with the artifact owner. Escape invokes the same guarded operation and consumes a disabled
+or pending return. Cancel restores its initiator; discard returns to the list heading. Nested
+artifacts show their object identity without a redundant collection heading. Keep user-authored
+body headings intact. Focus outlines remain inside their targets.
+
+### Composer and commands
+
+The composer is one framed draft with attachment context, Sources, microphone and stable Send.
+Stop is independently reachable, and the reader can prepare the next draft during generation.
+Sending clears only the submitted draft. Preserve IME, selection, queue promotion, cancellation
+and focus. The model/settings trigger belongs beside composition; narrow Sources may become an
+icon with the same accessible name. Do not add redundant setup/helper rows or hide recovery.
+
+Voice options extends the privacy disclosure to include language. Its trigger has a meaningful
+accessible name, and the language picker works without dismissing its parent. Keep live recording
+status and Cancel outside the disclosure. Permission errors and privacy guidance appear at the
+point of need; keyboard focus, Escape, nested popup selection and active dictation remain usable.
+The permanent language/privacy strip is replaced by this disclosure. Narrow/coarse layouts retain
+readable feedback and at least 44px targets without moving Send/Stop unpredictably.
+
+History & data remains a named command-list context. Restore, Import, Export and deletion use
+equal-width rows with visible verbs and leading icons. Resting rows use the pane canvas; enabled
+hover/press and keyboard focus provide feedback. Each command's 16px leading glyph follows the
+surface rail, with an 8px gap to its label; padded hit areas extend into the gutter. Keep 8px
+between commands and 16px before destructive actions. Long labels wrap within their targets.
+Use the actual pane canvas for resting text-contrast checks and the painted surface for interaction
+states. Disabled commands retain their disabled role.
+
+Import and Attach open workflows with secondary affordance. Save version commits a local version;
+accepting a refinement changes the draft; Review in document opens native review. Their labels
+and feedback must communicate these different outcomes. Primary fill marks a form commit or
+reviewed acceptance. Quiet destructive labels/icons use application danger roles; only explicit
+confirmation has a solid danger fill. Deletion reveals and focuses Cancel; cancellation returns
+to Delete. Confirmation actions retain an 8px gap, including when wrapped.
+
+Model pickers, endpoint/custom-model fields, Sources search/attachment controls and artifact
+fields keep their functional boundaries. Device/service containers, cached entries and preferences
+use headings and group gaps rather than nested decorative cards. Related model/attachment helper
+copy sits 8px from its control; separate model actions/custom fields use 16px. Block-layout select
+hosts avoid anonymous baseline space. Sources keeps a 16px gap between attachment list and search;
+removal stays beside the filename while excerpts expand in a bounded region. Removing a source
+focuses the next Remove, then the previous one, then Attach if empty. Filename/Remove share their
+first-line center and label role. Populated artifact lists keep 16px before Import; empty states
+remain centered within their content frame. Do not remove boundaries globally or add transparent
+borders to reproduce obsolete card insets.
+
+### Conversation, public reasoning and artifact canvas
+
+Use compact user messages, quiet answer actions and coherent heading/list/table rhythm. Never
+replay received tokens as decoration. Render only provider-exposed public reasoning in native
+`r-reasoning`; keep it separate from answers, copy, saved history/artifacts, document review and
+subsequent requests. Do not enable extra provider thinking by default. Cap transient reasoning
+at 64KiB UTF-8 per run, preserving Unicode chunk boundaries. Reader disclosure choice takes
+precedence over streaming updates. Expanded content does not repeat its summary in the header;
+collapsed content may show the latest summary. End reasoning on answer/settlement/Stop under
+the same generation and conversation guards as answer delivery.
+
+Chat and artifacts share one bounded safe Markdown table/code presentation. Preserve safe-link
+and literal-media policy: no passive remote media or invented execution capability. Tables use
+quiet headers, restrained row separators and tabular numerals, preserving explicit column
+alignment. Wide tables/code stay in named keyboard-scroll regions without document-wide overflow.
+Code uses a compact language/Copy toolbar and readable mono viewport. Preserve tabs, blank lines,
+trailing newline, native selection and scroll across streaming. Clipboard feedback reports actual
+success/failure and belongs to its source snapshot; a delayed result cannot mark changed content
+as copied. Only completed supported blocks up to 8000 characters are lazily highlighted; unknown
+or unfinished code remains literal. Theme changes preserve font metrics and selection. Release
+copy timers/late token work on unmount and update localized controls in place.
+
+Artifacts open in Preview with a compact object/title/version/mode toolbar, readable canvas and
+coherent command/footer region. Structured content retains a readable presentation and disclosed
+source JSON. Explicit Edit reveals canonical input/textarea. Preview may reflect an unsaved draft
+without saving it. Save version creates an explicit version and returns to Preview. Preserve
+version conflicts, dirty navigation/version guards, late-save cancellation and raw source data.
+Multiline AI comparisons use labeled Original/Proposed blocks with line breaks, bounded reading
+regions and explicit expansion; short changes retain inline differences. Refinement produces an
+editable draft; applying it still requires native document review. Export discloses real formats.
+Keep deletion confirmation nearby and preserve native Review/Apply/Undo guards.
+
+Use existing ran fast/base motion roles for meaningful state changes. Native reasoning disclosure
+owns interruption/reversal; expansion and press feedback remain interruptible. Reduced motion
+preserves every state/action without interpolation. Focus/content never wait for decoration.
+Do not animate palette properties on theme change, shimmer streamed text or transform ancestors
+of portaled overlays.
+
+### Browser and task acceptance
+
+Apply the contract across Chat/onboarding, Models, Conversations, Sources and artifact list/import/
+editor, including empty/populated, busy, error, confirmation and disclosure states. Keep independent
+geometry expectations ahead of implementation-derived assertions. The geometry helpers in
+`test/e2e/agent-layout-rails.spec.ts` and `test/e2e/lib/layout-geometry.ts` measure actual text Ranges
+and frames after fonts and async content settle. Update obsolete 432px/40px expectations against
+this contract. Cover 480px dock, expanded Chat/Artifacts, resize across 840px, 320px/360px touch,
+English/Chinese/Portuguese, both themes, keyboard/focus and reduced motion. Preserve source,
+security, streaming, reasoning, queue, dictation, navigation and artifact behavioral regressions.
+
+Acceptance must reject text-only 8px drift while its frame stays fixed, a title target consuming
+free toolbar space, sibling rail drift, overflow and stale asynchronous copy feedback. Measure
+text, glyph, frame and hit region as different subjects. Token compliance or sibling equality
+alone is insufficient. Inspect full-editor and pane screenshots and continuous recordings of
+waiting/streaming/Stop/error, disclosure, preview/edit/dirty/save, refinement, export and native
+review. Bind evidence to source/dependency/build/media hashes and viewport/theme/locale/state.
+Disclosed transport fixtures prove real UI behavior and isolation, not real-model quality.
+Screenshots stored without inspection do not establish acceptance.
+
+Use task walkthroughs informed by _Don't Make Me Think_: identify the current conversation/
+artifact/version, find the next destination, resume a draft, choose voice language, distinguish
+Save version from refinement acceptance and document review, and recover from cancellation/error.
+Observe whether context, destinations and action outcomes are understandable without explanation;
+put guidance beside the decision that needs it. Report the top three observed task problems with
+the triggering task, evidence, user impact and correction; report fewer if fewer were observed.
+Do not substitute arbitrary click budgets or counts of visual elements for task evidence.
+
+Label agent/automation walkthroughs as such. They can expose navigation, wording and state
+problems but do not constitute human usability tests or user acceptance. Record human test results
+only when real participants performed the tasks; distinguish them from automated checks and agent
+visual/code review. Retain relevant test/build/lint gates and head-specific CI inspection alongside
+media review, without inferring human approval from passing automation.
diff --git a/docs/explorations/2026-10-20-assistant-layout-acceptance.md b/docs/explorations/2026-10-20-assistant-layout-acceptance.md
index 738eb39d0..288253426 100644
--- a/docs/explorations/2026-10-20-assistant-layout-acceptance.md
+++ b/docs/explorations/2026-10-20-assistant-layout-acceptance.md
@@ -2,6 +2,10 @@
 
 Date: 2026-10-20
 
+> Historical record. The owner rejected the history density and top-level Back hierarchy.
+> The [October 21 correction and actual rendered acceptance](2026-10-21-assistant-navigation-and-density-acceptance.md)
+> supersede the heading lane, history target extension and command sizing below.
+
 ## Result and scope
 
 The assistant now shares a 16px content rail across its header, onboarding, Models,
diff --git a/docs/explorations/2026-10-21-assistant-conversation-craft.md b/docs/explorations/2026-10-21-assistant-conversation-craft.md
new file mode 100644
index 000000000..f13dc22a0
--- /dev/null
+++ b/docs/explorations/2026-10-21-assistant-conversation-craft.md
@@ -0,0 +1,47 @@
+# Assistant conversation and artifact craft acceptance
+
+Historical runtime source: `d6c0411372e168a5a1c124c82408b7499e7e3cc2`.
+Build SHA-256: `23a96f4182123707557f63f43762b563cdfcd91f25f9a9aaccb20561081123b0`.
+Upstream ran source: `72c44840707ee5dc88a3e60e5a4906f73a7fc98d` ([PR436](https://github.com/chaxus/ran/pull/436)).
+This visual approval is superseded: it missed duplicate artifact return controls and an 8px visible command-text offset. The original media and executed checks remain historical evidence. See the [corrective acceptance](2026-10-22-assistant-craft-correction.md).
+
+## Result and ownership
+
+One compact header owns Chat/home, Artifacts, Conversations, New and Close. Sources belongs beside composition; selected model/settings belongs below it. Returning preserves the displayed conversation, draft, selection and reading position. The content spine is 16px. Fine-input header height is 40px; coarse-input height is 52px with 44px targets. Narrow touch composition separates tools and execution into stable rows, keeping voice language readable while Stop and Send coexist.
+
+Only explicitly returned public reasoning enters native `r-reasoning`. It stays transient and bounded at 64 KiB UTF-8 per run, respects reader disclosure, and is excluded from answer copy, history/artifacts, document review and later provider context. No provider thinking defaults, model defaults or storage formats changed. The upstream correction keeps the open header quiet; a documented pnpm patch consumes it locally.
+
+Artifacts open in Preview. Explicit Edit owns the canonical draft; Preview does not save it. Multiline AI comparisons show separately labeled Original/Proposed text, bounded keyboard-scrollable regions and Show full. Short replacements retain inline differences. Acceptance updates an unsaved draft; Save version persists it. Dirty confirmation, stale results, cancellation, export, nearby deletion confirmation and native document review keep their existing owners.
+
+Industry references informed task placement and progressive disclosure, not branding, exact timings or parity claims: [Claude artifacts](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them), [ChatGPT navigation](https://help.openai.com/en/articles/10056348-finding-your-chats-projects-and-files-in-chatgpt).
+
+## Actual visual acceptance
+
+The local report contains 108 unmodified application screenshots: 27 states in four environments. They cover desktop English light, desktop English dark/reduced motion, 320px Portuguese touch/light, and 360px Portuguese touch/dark/reduced motion. All use the production build and deterministic public-provider NDJSON, without injected product CSS.
+
+Four actual recordings cover waiting, reasoning, streaming/completion, Stop/error, reader scrolling, history, artifact preview/edit/unsaved/version save, delete/export, format-limit recovery into native document review, and AI generation/suggestion/acceptance/explicit save. Scrolled narrow captures expose proposed text and acceptance controls. Independent review inspected the complete initial inventory, critical originals and decoded frames, then rechecked corrected comparisons and all four updated recordings.
+
+Native header pointer clicks 60ms apart interrupt the normal disclosure transition. Desktop height reverses before closing (minimum 63.71875px; closed 32px), as does touch (minimum 75.71875px; closed 44px). Reduced motion reaches discrete 32/44px states without intermediate heights. These are measured component results, not competitor timings. Brief closing-body/header overlap is an outgoing transition; the steady open header has no repeated summary.
+
+[Original panes, recordings and provenance](../media/assistant-conversation-craft/) are committed as representative evidence. The complete inventory remains in the local acceptance report.
+
+- [Normal desktop walkthrough](../media/assistant-conversation-craft/desktop-light.webm)
+- [Reduced-motion desktop walkthrough](../media/assistant-conversation-craft/desktop-dark-reduced.webm)
+- [320px touch walkthrough](../media/assistant-conversation-craft/pt-320-touch-light.webm)
+- [360px reduced-motion touch walkthrough](../media/assistant-conversation-craft/pt-360-touch-dark.webm)
+
+![Readable multiline comparison](../media/assistant-conversation-craft/artifact-suggestion-review-desktop-light.png)
+![Touch composer with readable language and separate Stop/Send](../media/assistant-conversation-craft/waiting-pt-320-touch-light.png)
+
+## Verification
+
+- Final runtime: 255 unit files, 6,878 tests passed.
+- Assistant browser coverage: 125 executed cases verified across full and affected runs; three existing conditional skips. Final affected run: 37/37 passed, including unchanged XLS/PPT overflow assertions, layout rails, touch execution, revisions, sources/imports, keyboard return and workspace states.
+- Final comparison/related unit subset: 77 passed. TypeScript, archive-aware lint, Prettier and immutable evaluation-archive checks passed. Production build passed with the identity above.
+- Docker configuration passed using installed standalone `docker-compose -f docker-compose.yaml config --quiet`; the local Docker CLI lacks its compose subcommand. This does not claim a local Docker-image run.
+- Upstream reasoning: 34 unit, 76 SSR and 10 Chromium/WebKit browser cases passed. Guidance/documentation/link/design checks passed; earlier guidance acceptance remains in PR436.
+- The prior review approval was withdrawn after the visible defects above were reported.
+
+## Limits and remaining observation
+
+Fixtures prove UI behavior and isolation, not real-model quality or competitor parity. Native Word insertion still rejects Markdown tables; the recording demonstrates localized plain-text recovery and a subsequent valid native review. No document changes without acceptance. Artifact-related failures still use Chat error/recovery presentation; clearer artifact association remains a nonblocking P3 observation. Package publishing and merging are outside this acceptance.
diff --git a/docs/explorations/2026-10-21-assistant-header-and-alignment.md b/docs/explorations/2026-10-21-assistant-header-and-alignment.md
new file mode 100644
index 000000000..662024950
--- /dev/null
+++ b/docs/explorations/2026-10-21-assistant-header-and-alignment.md
@@ -0,0 +1,132 @@
+# Assistant header and visible-content alignment
+
+Date: 2026-10-21
+
+Header/alignment figures below record `681e4f9`. The expanded-workflow follow-up at the end
+records the later spacing, target and focus corrections. These are scoped acceptance records,
+not a claim that overall visual hierarchy or motion has reached a final design.
+
+The previous header gave the assistant identity and every destination substantial visual weight.
+History headings started at 16px, while the saving checkbox and command icons started at 24px.
+Equal button frames therefore did not establish a shared leading-content spine.
+
+## Result and ownership
+
+The [application design contract](../design-system.md#assistant-header-and-settings-commands)
+owns the current dimensions and control roles. Five named destinations remain directly available;
+New, Close, nested artifact navigation, drafts and history state retain their existing owners.
+
+| Measured relationship                                   | Before         | Current        |
+| ------------------------------------------------------- | -------------- | -------------- |
+| Fine-input title row / complete header and navigation   | 56 / 97px      | 40 / 77px      |
+| Coarse-input title row / complete header and navigation | 60 / 113px     | 52 / 101px     |
+| Heading, saving checkbox and command icon viewport      | 16 / 24 / 24px | 16 / 16 / 16px |
+| Command label and associated saving status              | 48px           | 40px           |
+| Command target height, fine / coarse input              | 32 / 44px      | 32 / 44px      |
+
+Values are CSS pixels from the pane's inside border edge. The click surface uses 8px of the
+existing gutter; the content spine remains 16px. History rows form a named command-list context
+without repeated resting frames. Framed workflow actions and inputs retain their affordances.
+
+The selected destination has a restrained fill distinct from the actual canvas in both themes,
+with no curved inset underline. Current labels are medium weight; inactive navigation is regular.
+Keyboard focus remains a separate blue outline. Palette properties do not animate on theme changes.
+
+## Industry references
+
+[Linear's 2026 refresh](https://linear.app/now/behind-the-latest-design-refresh) gives supporting
+navigation less emphasis and makes tabs more compact while retaining predictable headers/actions.
+[Cursor's side-chat and conversation-search update](https://cursor.com/changelog/side-chat)
+keeps creation at the top of chat and provides a dedicated conversation-search route. These inform
+hierarchy and placement; this application uses its existing ran roles and input-density contract.
+
+## Actual browser evidence
+
+The local current report contains 20 before/after pane pairs: Chat, Conversations, Artifacts,
+Sources and Models in English desktop light/dark and Portuguese 320/360px coarse-input variants.
+Four additional screenshots include browser-rendered alignment guides. The red guide marks 16px;
+the blue guide marks the 40px history label/status column only within that control group.
+
+The before pairs isolate header/alignment changes after the initial tab-underline removal. The
+[previous acceptance record](./2026-10-21-assistant-navigation-and-density-acceptance.md) retains
+screenshots of the earlier implementation, including the original selected underline.
+
+| Light header                                                                                                        | Dark header                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| <img src="../media/assistant-refinement/header-en-light-1280.png" width="432" alt="Compact light assistant header"> | <img src="../media/assistant-refinement/header-en-dark-1280.png" width="432" alt="Compact dark assistant header"> |
+
+| Light history                                                                                                                                | Dark history                                                                                                                                  |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="../media/assistant-refinement/history-en-light-1280.png" width="320" alt="Current light history pane with shared leading content"> | <img src="../media/assistant-refinement/history-en-dark-1280.png" width="320" alt="Current dark history pane with visible resting selection"> |
+
+[320px touch alignment guides](../media/assistant-refinement/history-guides-pt-light-320.png),
+[360px dark touch pane](../media/assistant-refinement/history-pt-dark-360.png),
+[Chat](../media/assistant-refinement/chat-en-light-1280.png),
+[Artifacts](../media/assistant-refinement/artifacts-en-light-1280.png),
+[Sources](../media/assistant-refinement/sources-en-light-1280.png), and
+[Models](../media/assistant-refinement/models-en-light-1280.png) show the same current chrome.
+Representative [before history](../media/assistant-refinement/before-history-en-light-1280.png)
+and [before Chat](../media/assistant-refinement/before-chat-en-light-1280.png) are retained.
+[Measured history variants](../media/assistant-refinement/measurements.json) record the actual
+coordinates and header heights, including the effective theme and selected fill.
+
+## Header verification at `681e4f9`
+
+- The independent page spine is 16px. Before the CSS correction, the cross-region assertion
+  failed with the command icon at 24px. It no longer accepts equal but separately inset groups.
+- Chromium: 14 navigation, layout-rail and history-action cases passed, retries disabled. Covers
+  wrapping, resize, hover/press/disabled, contrast, accessible names, focus/confirmation, export,
+  touch targets and rejection/restoration of deliberate geometry defects.
+- WebKit: all four navigation/craft variants passed, retries disabled, including 320/360px touch.
+- Selected fill and shadow are checked after moving the pointer away. Hover cannot supply the
+  selected affordance being verified. The fill must differ from the actual pane canvas.
+- Transparent history rows use the actual pane background for text-contrast measurement;
+  hover/pressed rows use their painted surface. Deletion and focus checks remain in place.
+- The design-token contract and changed-file formatting passed. The production preview was
+  rebuilt from the changed styles; screenshots use that build, not temporary product overrides.
+
+One intermediate run timed out while waiting for the native editor to become ready during
+concurrent screenshot capture. The subsequent complete serial run passed 14/14 with no retries,
+timeout increases or weakened tolerances. Firefox, native browser zoom and real model downloads
+are not claimed as verified by this focused UI correction.
+
+## Expanded-workflow follow-up
+
+Actual production-browser inspection found attachment helper gap 0, model helper gap 17
+(including inline-host baseline space), helper/action gap 12 and adjacent custom-field gap 0.
+The corrected relationships are 8/8/16/16. Artifact confirmation actions now retain 8px separation.
+Touch Chat starters measured 34.25px and now use the adaptive 44px target role. Source filename
+and Remove text centers differed by 6.58px; their shared label role and density-derived first-line
+padding now align without translating glyphs or changing the expanded excerpt's position.
+
+Keyboard removal moves to the next/previous visible source action or Attach when the filtered
+list is empty. Artifact confirmation focuses Cancel and cancellation returns to Delete, keeping
+the draft. A long artifact case verifies that the safe choice is inside the narrow viewport.
+These owners belong to document; no ran component-internal defect was established.
+
+| Before custom fields                                                                                                                                           | Corrected custom fields                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="../media/assistant-detail-audit/before-models-expanded-bottom-pt-320-touch-light.png" width="280" alt="Custom model fields with no inter-field gap"> | <img src="../media/assistant-detail-audit/models-expanded-bottom-pt-320-touch-light.png" width="280" alt="Custom model fields with sixteen pixel group gaps"> |
+
+[Sources after correction](../media/assistant-detail-audit/source-excerpt-pt-360-touch-dark.png),
+[Models in dark theme](../media/assistant-detail-audit/models-dark.png),
+[touch Chat targets](../media/assistant-detail-audit/chat-pt-320-touch-light.png),
+[artifact confirmation](../media/assistant-detail-audit/artifact-delete-confirmation-pt-320-touch-light.png),
+and [focus return after cancellation](../media/assistant-detail-audit/artifact-delete-cancelled-pt-320-touch-light.png)
+are representative full-pane renders. [Capture measurements](../media/assistant-detail-audit/captures.json)
+list 68 current states across English desktop light/dark and Portuguese 320/360px coarse variants.
+The local report retains 60 before/after pairs and 8 additional keyboard-focus captures.
+
+The new regressions failed before their fixes: two focus unit cases; browser helper/focus cases;
+confirmation gap 0vs8; touch targets 34.25 vs 44 and filename/Remove center drift 6.58 vs 1px tolerance.
+Existing geometry expectations, retries and timeouts were not weakened. Final verification:
+Chromium 31/31; WebKit 4/4 focused detail cases; unit 41/41; production build, TypeScript,
+archive-aware lint, changed-file format and diff checks. See `agent-detail-polish.spec.ts` for
+rendered spacing, physical targets and keyboard continuation; existing workspace/layout/source
+and affordance suites remain in the run.
+
+Overall hierarchy still needs design work: the five persistent destinations give configuration,
+content and history similar prominence, and artifact commands need a tighter relationship to their
+content. Current animation is limited; these static captures disable animation for geometry and
+are not motion acceptance. Native zoom, system text scaling, screen readers and real model
+downloads are outside this focused verification.
diff --git a/docs/explorations/2026-10-21-assistant-navigation-and-density-acceptance.md b/docs/explorations/2026-10-21-assistant-navigation-and-density-acceptance.md
new file mode 100644
index 000000000..e1fe47b47
--- /dev/null
+++ b/docs/explorations/2026-10-21-assistant-navigation-and-density-acceptance.md
@@ -0,0 +1,129 @@
+# Assistant navigation and density acceptance
+
+Date: 2026-10-21
+
+> Historical acceptance for the initial navigation revision (4743fbf). The current header,
+> selected-tab treatment and history leading-content geometry are documented in the
+> [header and alignment refinement](./2026-10-21-assistant-header-and-alignment.md).
+> Screenshots and numeric contracts below describe the earlier build.
+
+## Decision and scope
+
+Owner review rejected the previous History & data button cloud and the artificial
+Back/title hierarchy in Artifacts. This revision supersedes the 48/54px top-level
+heading lane, content-sized history commands and gutter extension described in the
+October 20 records. Passing the earlier geometry assertions did not establish
+that the complete composition was acceptable.
+
+The implementation follows [ran's design guide](https://github.com/chaxus/ran/blob/main/packages/ranui/docs/DESIGN.md).
+[Linear's UI refresh](https://linear.app/changelog/2026-03-12-ui-refresh) and
+[Notion's navigation](https://www.notion.com/help/navigate-with-the-sidebar) informed
+stable parallel destinations and compact hierarchy. Colors, typography, spacing,
+control roles and motion remain owned by ran and this application's design contract.
+
+The original PR #289 merged while this revision was being verified. The correction
+therefore ships as a follow-up PR rather than republishing the deleted branch.
+
+## Actual rendered changes
+
+| Surface           | Accepted composition                                                                                                          |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| Header/navigation | AI Assistant, New and Close; five persistent text destinations beneath it; selected and keyboard-focus states                 |
+| Top-level views   | All heading text starts at 16px; no Back to an unrelated parallel destination                                                 |
+| Nested artifacts  | A labeled Back precedes the heading; import/edit, unsaved drafts and confirmation remain owned by the artifact view           |
+| History commands  | Equal-width frames at 16px; checkbox/icon column at 24px and label/status column at 48px; neutral resting stroke              |
+| Density           | 32px fine-input command minimum; 44px coarse-input navigation, checkbox-label and command targets; translated labels can wrap |
+| Command hierarchy | Import/Attach are secondary; reviewed Save/Accept remains primary; destructive commitment retains explicit confirmation       |
+| Runtime status    | Chat or active Models loading owns it; no unrelated preparation band above Artifacts or Sources                               |
+| Details           | Blue keyboard focus, disclosure chevron, 150ms opacity entry and reduced-motion opt-out; no translated hit targets or blur    |
+
+Before and after, captured in the same actual browser at a 1280px window / 432px pane:
+
+| Before                                                                                         | After                                                                                            |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| ![Previous history composition](../media/assistant-craft/2026-10-21-before-history-light.png)  | ![Final history composition](../media/assistant-craft/2026-10-21-history-light.png)              |
+| ![Previous artifact hierarchy](../media/assistant-craft/2026-10-21-before-artifacts-light.png) | ![Final parallel Artifacts destination](../media/assistant-craft/2026-10-21-artifacts-light.png) |
+
+## Screenshot inspection
+
+The final production build was captured in 72 full-pane PNGs: 17 states in English
+light/dark desktop and Portuguese 320px-light/360px-dark coarse-input variants.
+Four additional German/Spanish coarse-input captures check the localized current-Chat label
+and selected-navigation visibility. The 17 main-matrix states include Chat, expanded History, confirmation, empty/populated Artifacts,
+import, editor, local/expanded/service Models, empty/populated/expanded/error Sources
+and resized History/Sources. The narrow states explicitly resize the window to 360px.
+Screenshots use local synthetic text and no real provider credentials or inference.
+
+Main-agent inspection and independent visual review found no remaining alignment,
+clipping, overlap, focus-boundary or control-hierarchy blockers in the reviewed
+representative states. Inspection prompted correction of import hint density,
+coarse navigation targets and the inset navigation focus outline before these final captures.
+This is visual acceptance of the inspected states, not a general usability study.
+
+Additional final renders:
+
+| State                                         | Real capture                                                                  |
+| --------------------------------------------- | ----------------------------------------------------------------------------- |
+| History, dark                                 | [PNG](../media/assistant-craft/2026-10-21-history-dark.png)                   |
+| Destructive confirmation, dark                | [PNG](../media/assistant-craft/2026-10-21-history-confirmation-dark.png)      |
+| Portuguese 320px touch History                | [PNG](../media/assistant-craft/2026-10-21-history-pt-320-touch-light.png)     |
+| Artifacts, dark                               | [PNG](../media/assistant-craft/2026-10-21-artifacts-dark.png)                 |
+| Nested import and visible keyboard focus      | [PNG](../media/assistant-craft/2026-10-21-artifact-import-light.png)          |
+| Nested editor, dark                           | [PNG](../media/assistant-craft/2026-10-21-artifact-editor-dark.png)           |
+| Local model setup                             | [PNG](../media/assistant-craft/2026-10-21-models-light.png)                   |
+| Service model setup, dark                     | [PNG](../media/assistant-craft/2026-10-21-models-service-dark.png)            |
+| Attached source                               | [PNG](../media/assistant-craft/2026-10-21-sources-populated-light.png)        |
+| German 320px touch current-Chat navigation    | [PNG](../media/assistant-craft/2026-10-21-chat-de-320-touch-light.png)        |
+| Spanish 360px touch History, dark             | [PNG](../media/assistant-craft/2026-10-21-history-es-360-touch-dark.png)      |
+| Portuguese 360px touch attachment error, dark | [PNG](../media/assistant-craft/2026-10-21-source-error-pt-360-touch-dark.png) |
+
+## Behavior fixes and verification
+
+Persistent destination selection is idempotent. It neither acts as Back nor refreshes
+an already active form. A first-mount flag still runs initial visibility/ARIA setup.
+Explicit Chat returns to the displayed conversation and draft. Header and navigation
+intent also invalidate the initial asynchronous cache-discovery fallback, preventing
+it from switching an explicitly selected Chat back to Models. New conversation and
+title/recent-session behavior retain their separate existing semantics.
+
+Artifact refresh now respects an in-flight operation, including after an awaited
+list response, so a workspace refresh cannot replace the import/editor while saving.
+Owned delete/missing-record refresh remains available. Controlled async unit
+regressions first exposed these failures and passed after the fixes.
+
+| Check                                        | Observed result                                                                                                                                                                                                               |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Full final unit suite                        | 252 files, 6,807 tests passed                                                                                                                                                                                                 |
+| Focused final unit suites                    | 8 files, 360 tests passed                                                                                                                                                                                                     |
+| Chromium navigation craft matrix             | 4 passed, retries disabled                                                                                                                                                                                                    |
+| Broad Chromium assistant regression          | 85 cases: initially 79 passed, 3 skipped, 3 failed; final targeted rerun passed all 4 selected cases including the 3 failures                                                                                                 |
+| WebKit history/layout/craft                  | 14 passed serially with retries disabled                                                                                                                                                                                      |
+| Firefox history/layout/craft                 | All 14 stopped at browser launch: `Could not find profile folder`; independent empty-browser launch reproduced it before visiting the app                                                                                     |
+| Lint/typecheck, formatting, production build | Passed; immutable archive verification retained all 1,511 evaluation artifacts                                                                                                                                                |
+| Deliberate geometry mutations                | Existing layout suite rejects shifted text, expanded title hit area and displaced sibling rails; a final live probe also rejected an 8px label-only shift with identical button bounds and passed after removing the mutation |
+| Motion probe                                 | Actual computed animation `agent-view-enter`, `0.15s`, transform `none`; reduced motion gives animation `none`, `0s`                                                                                                          |
+
+The first full unit run caught two untranslated current-Chat labels. German and Spanish
+labels were corrected without changing the translation-completeness test or its allowlist;
+the complete 252-file rerun then passed.
+
+A final production-preview Chromium run of content review, translated loading, PDF native
+contracts and the four craft variants passed all 18 cases without retries. It retained native
+readback, undo, PDF write restrictions and model-loading cancellation assertions.
+
+The broad Chromium failures comprised the real initial-navigation race fixed above
+and two tests navigating with the superseded same-destination toggle contract. Those
+tests now use explicit Chat/Sources navigation while retaining their source, dirty-draft,
+request, offline and cancellation assertions. They do not merely accept a new screenshot.
+The three skipped cases require unavailable public legacy-format corpus fixtures.
+The table reports separate runs, not one entirely green 85-case rerun.
+
+An earlier concurrent WebKit attempt emitted `WebGL: context lost`; the isolated
+14-case run passed without changing the console allowlist or application code.
+Firefox remains unverified in this environment; its launch failure is not counted
+as an application pass. The production build was completed before final capture;
+no rebuild ran while that browser acceptance was reading its assets.
+
+Native browser zoom, the full repository/Docker suite, actual model downloads and
+real external AI service calls were not verified by this focused revision. No
+vendor files, dependency versions, persistence formats or document-write contracts changed.
diff --git a/docs/explorations/2026-10-22-assistant-craft-correction.md b/docs/explorations/2026-10-22-assistant-craft-correction.md
new file mode 100644
index 000000000..857d48085
--- /dev/null
+++ b/docs/explorations/2026-10-22-assistant-craft-correction.md
@@ -0,0 +1,74 @@
+# Assistant return and Markdown correction acceptance
+
+Accepted runtime: `bd0e8c146bbde9b55a53ba04db1d95ff60affcd9`.
+Build SHA-256: `89f8d8bf62aaa8d1f594cad6fedbb3e9bc6c4d26ced2674b58dc0e21af58395d`.
+The earlier
+[visual approval](2026-10-21-assistant-conversation-craft.md) is withdrawn: it
+missed duplicate return controls and an 8px visible command-text offset. The
+original media remains historical evidence.
+
+## Corrected behavior
+
+The shell hosts the actual guarded artifact Back button. Detail and import
+return to the artifact list; the list returns to Chat. Escape follows the same
+hierarchy even from peer header controls. Dirty confirmation, safe Cancel,
+pending-save protection and restored focus/draft selection retain their owners.
+The compact visible destination remains readable on 320px touch panes and is
+included in its localized accessible name. Command text follows the 16px spine.
+
+Chat and artifact readers use the same safe table/code presentation. Tables
+honor declared column alignment, use regular body weight and tabular numbers,
+and scroll wide content locally. Ordinary four-column tables fit the desktop
+pane. Code has a compact language/Copy header, exact literal clipboard payload,
+real success/failure feedback and local horizontal scrolling. Supported completed
+blocks up to 8000 characters load fixed Shiki grammars and dual-theme token
+colors lazily; unknown/unfinished blocks remain plain. No execution action is
+implied. Completed nested code keeps selection, scroll and DOM identity when a
+stream settles. Disposal guards late clipboard/highlight work.
+
+## Actual acceptance
+
+The final build produced 92 original pane screenshots and 8 continuous recordings
+(about 18 seconds each). Root and independent review inspected all 8 state sheets,
+all 8 decoded recording sheets and critical full-size originals. No blocking
+composition or legibility defect remained. Representative [original panes,
+recordings and provenance](../media/assistant-craft-correction/) are committed;
+the complete inventory and full-browser originals remain in the local report.
+The environments are desktop English light/dark and Portuguese touch at 320px
+light / 360px dark. Dark variants request reduced motion. The deterministic
+provider fixture supplies public NDJSON only; no product CSS or DOM is injected.
+
+## Verification
+
+- 6,915 unit tests in 258 files passed with unchanged coverage thresholds: 90.54%
+  lines, 88.16% statements, 84.24% branches and 89.02% functions.
+- 38 distinct related browser cases verified:33 initial passes, 2 corrected visible-route
+  cases, and 3 reasoning/touch cases. No retries or overflow tolerance changes.
+- Archive-aware lint, root/workspace TypeScript, Prettier and 1511 immutable evaluation
+  artifact checks passed. The production build identity is recorded above.
+- Local report QA at 1280px and 320px decoded 94 displayed images and 8 recordings,
+  with zero horizontal overflow or JavaScript errors.
+- Spec, code and actual screenshot/decoded-recording review passed. Remote CI
+  follows the approved push and is recorded by the PR checks/local report.
+
+No thresholds or overflow tolerances were relaxed. The existing Stop regression still checks raw source, deferred parsing,
+focus, draft preservation and disposal; only its renderer-call signature now
+includes the explicit presentation owner.
+
+![Shared answer table and code presentation](../media/assistant-craft-correction/markdown-chat-table-desktop-light.png)
+
+## Design references and limits
+
+The adopted reading hierarchy is informed by [Geist Table](https://vercel.com/geist/table),
+[Geist Code Block](https://vercel.com/geist/code-block),
+[AI Elements Code Block](https://elements.ai-sdk.dev/components/code-block),
+and [ChatGPT's public code-block guidance](https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt).
+These references establish concrete presentation patterns, not competitor parity.
+
+The fixture proves UI behavior, not model answer quality. Native Word insertion
+still has its documented Markdown-table limit. Changing a still-growing unfinished
+fence retains the existing streaming renderer behavior; selection preservation
+covers completed/reused blocks and late highlighting. ran's existing reasoning
+and agent-guidance changes remain in [ran#436](https://github.com/chaxus/ran/pull/436);
+this correction belongs to the application's renderer and composition. No package
+publication or merge is included.
diff --git a/docs/media/assistant-conversation-craft/acceptance.json b/docs/media/assistant-conversation-craft/acceptance.json
new file mode 100644
index 000000000..078f78688
--- /dev/null
+++ b/docs/media/assistant-conversation-craft/acceptance.json
@@ -0,0 +1,19 @@
+{
+  "status": "superseded",
+  "sourceCommit": "d6c0411372e168a5a1c124c82408b7499e7e3cc2",
+  "ranCommit": "72c44840707ee5dc88a3e60e5a4906f73a7fc98d",
+  "summary": "The prior visual approval missed duplicate artifact return controls and an 8px visible command-text offset. Its approval is withdrawn; original screenshots, recordings and executed checks remain historical evidence.",
+  "tests": {
+    "unit": "6,878 passed; 255 suites; final source",
+    "e2e": "125 executed assistant cases covered across full + affected runs; 3 existing skips. Final affected run: 37/37 passed.",
+    "types": "TypeScript passed",
+    "lint": "Archive-aware lint and Prettier passed; docker-compose config validation passed",
+    "ran": "34 unit + 76 SSR + 10 Chromium/WebKit reasoning cases passed; guidance checks passed"
+  },
+  "limits": [
+    "Deterministic public NDJSON proves UI behavior and isolation, not real-model quality or exact competitor parity.",
+    "Native Word insertion still rejects Markdown tables; the recording demonstrates localized guidance and recovery into real native review with a plain-text draft.",
+    "Nonblocking P3: artifact-related failures still use Chat error/recovery presentation; their artifact association could be clearer."
+  ],
+  "correctiveAcceptance": "../../explorations/2026-10-22-assistant-craft-correction.md"
+}
diff --git a/docs/media/assistant-conversation-craft/answer-completed-desktop-light.png b/docs/media/assistant-conversation-craft/answer-completed-desktop-light.png
new file mode 100644
index 000000000..b37e1f66f
Binary files /dev/null and b/docs/media/assistant-conversation-craft/answer-completed-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-accepted-draft-desktop-light.png b/docs/media/assistant-conversation-craft/artifact-accepted-draft-desktop-light.png
new file mode 100644
index 000000000..75c192edc
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-accepted-draft-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-delete-confirmation-pt-360-touch-dark.png b/docs/media/assistant-conversation-craft/artifact-delete-confirmation-pt-360-touch-dark.png
new file mode 100644
index 000000000..4999d35f5
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-delete-confirmation-pt-360-touch-dark.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-document-review-desktop-light.png b/docs/media/assistant-conversation-craft/artifact-document-review-desktop-light.png
new file mode 100644
index 000000000..a9bb6f68d
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-document-review-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-edit-desktop-light.png b/docs/media/assistant-conversation-craft/artifact-edit-desktop-light.png
new file mode 100644
index 000000000..ff4aab81b
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-edit-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-preview-desktop-light.png b/docs/media/assistant-conversation-craft/artifact-preview-desktop-light.png
new file mode 100644
index 000000000..86b94fb3b
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-preview-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-suggestion-review-desktop-light.png b/docs/media/assistant-conversation-craft/artifact-suggestion-review-desktop-light.png
new file mode 100644
index 000000000..aa9a64b73
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-suggestion-review-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/artifact-suggestion-review-pt-320-touch-light.png b/docs/media/assistant-conversation-craft/artifact-suggestion-review-pt-320-touch-light.png
new file mode 100644
index 000000000..a7bc5342e
Binary files /dev/null and b/docs/media/assistant-conversation-craft/artifact-suggestion-review-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-conversation-craft/desktop-dark-reduced.webm b/docs/media/assistant-conversation-craft/desktop-dark-reduced.webm
new file mode 100644
index 000000000..82c2df2e6
Binary files /dev/null and b/docs/media/assistant-conversation-craft/desktop-dark-reduced.webm differ
diff --git a/docs/media/assistant-conversation-craft/desktop-light.webm b/docs/media/assistant-conversation-craft/desktop-light.webm
new file mode 100644
index 000000000..c8bf6e260
Binary files /dev/null and b/docs/media/assistant-conversation-craft/desktop-light.webm differ
diff --git a/docs/media/assistant-conversation-craft/history-desktop-light.png b/docs/media/assistant-conversation-craft/history-desktop-light.png
new file mode 100644
index 000000000..627ea46fe
Binary files /dev/null and b/docs/media/assistant-conversation-craft/history-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/motion.json b/docs/media/assistant-conversation-craft/motion.json
new file mode 100644
index 000000000..f51acb1ca
--- /dev/null
+++ b/docs/media/assistant-conversation-craft/motion.json
@@ -0,0 +1,378 @@
+[
+  {
+    "name": "desktop-light",
+    "width": 1280,
+    "locale": "en",
+    "theme": "light",
+    "coarse": false,
+    "motion": "no-preference",
+    "start": 4.685,
+    "openHeight": 66.75,
+    "frames": [
+      {
+        "time": 6.2950000166893005,
+        "height": 66.75
+      },
+      {
+        "time": 22.75500002503395,
+        "height": 66.328125
+      },
+      {
+        "time": 39.75,
+        "height": 65.40625
+      },
+      {
+        "time": 56.34499999880791,
+        "height": 63.71875
+      },
+      {
+        "time": 72.98500001430511,
+        "height": 63.71875
+      },
+      {
+        "time": 89.22500002384186,
+        "height": 66.734375
+      },
+      {
+        "time": 106.39500001072884,
+        "height": 66.75
+      },
+      {
+        "time": 123.02000001072884,
+        "height": 66.75
+      },
+      {
+        "time": 139.5450000166893,
+        "height": 66.75
+      },
+      {
+        "time": 156.11000001430511,
+        "height": 66.75
+      },
+      {
+        "time": 173.03500002622604,
+        "height": 66.75
+      },
+      {
+        "time": 188.74000000953674,
+        "height": 66.75
+      },
+      {
+        "time": 206.3250000178814,
+        "height": 66.75
+      },
+      {
+        "time": 222.0750000178814,
+        "height": 66.75
+      },
+      {
+        "time": 239.66000002622604,
+        "height": 66.75
+      },
+      {
+        "time": 255.4050000011921,
+        "height": 66.75
+      },
+      {
+        "time": 272.96000000834465,
+        "height": 66.75
+      },
+      {
+        "time": 289.6899999976158,
+        "height": 66.75
+      },
+      {
+        "time": 306.3250000178814,
+        "height": 66.75
+      },
+      {
+        "time": 322.96000000834465,
+        "height": 66.75
+      }
+    ],
+    "closedHeight": 32
+  },
+  {
+    "name": "desktop-dark-reduced",
+    "width": 1280,
+    "locale": "en",
+    "theme": "dark",
+    "coarse": false,
+    "motion": "reduce",
+    "start": 4.43,
+    "openHeight": 66.75,
+    "frames": [
+      {
+        "time": 5.805000007152557,
+        "height": 32
+      },
+      {
+        "time": 22.375,
+        "height": 32
+      },
+      {
+        "time": 39.15999999642372,
+        "height": 32
+      },
+      {
+        "time": 55.74500000476837,
+        "height": 32
+      },
+      {
+        "time": 71.49000000953674,
+        "height": 66.75
+      },
+      {
+        "time": 89.46000000834465,
+        "height": 66.75
+      },
+      {
+        "time": 105.78499999642372,
+        "height": 66.75
+      },
+      {
+        "time": 122.39500001072884,
+        "height": 66.75
+      },
+      {
+        "time": 139.05000001192093,
+        "height": 66.75
+      },
+      {
+        "time": 155.71500000357628,
+        "height": 66.75
+      },
+      {
+        "time": 172.15000000596046,
+        "height": 66.75
+      },
+      {
+        "time": 189.03499999642372,
+        "height": 66.75
+      },
+      {
+        "time": 205.69499999284744,
+        "height": 66.75
+      },
+      {
+        "time": 222.16499999165535,
+        "height": 66.75
+      },
+      {
+        "time": 239.11000001430511,
+        "height": 66.75
+      },
+      {
+        "time": 254.875,
+        "height": 66.75
+      },
+      {
+        "time": 271.58500000834465,
+        "height": 66.75
+      },
+      {
+        "time": 289.2950000166893,
+        "height": 66.75
+      },
+      {
+        "time": 306.03999999165535,
+        "height": 66.75
+      },
+      {
+        "time": 322.3799999952316,
+        "height": 66.75
+      },
+      {
+        "time": 338.49000000953674,
+        "height": 66.75
+      }
+    ],
+    "closedHeight": 32
+  },
+  {
+    "name": "pt-320-touch-light",
+    "width": 320,
+    "locale": "pt",
+    "theme": "light",
+    "coarse": true,
+    "motion": "no-preference",
+    "start": 4.049,
+    "openHeight": 78.75,
+    "frames": [
+      {
+        "time": 3.6599999964237213,
+        "height": 78.75
+      },
+      {
+        "time": 20.049999982118607,
+        "height": 78.328125
+      },
+      {
+        "time": 35.804999977350235,
+        "height": 77.40625
+      },
+      {
+        "time": 53.479999989271164,
+        "height": 75.71875
+      },
+      {
+        "time": 69.0799999833107,
+        "height": 75.71875
+      },
+      {
+        "time": 86.7999999821186,
+        "height": 78.734375
+      },
+      {
+        "time": 102.41499999165535,
+        "height": 78.75
+      },
+      {
+        "time": 119.99499997496605,
+        "height": 78.75
+      },
+      {
+        "time": 135.97499999403954,
+        "height": 78.75
+      },
+      {
+        "time": 153.4050000011921,
+        "height": 78.75
+      },
+      {
+        "time": 169.13499999046326,
+        "height": 78.75
+      },
+      {
+        "time": 186.83499997854233,
+        "height": 78.75
+      },
+      {
+        "time": 202.5799999833107,
+        "height": 78.75
+      },
+      {
+        "time": 220.13999998569489,
+        "height": 78.75
+      },
+      {
+        "time": 235.72999998927116,
+        "height": 78.75
+      },
+      {
+        "time": 253.3299999833107,
+        "height": 78.75
+      },
+      {
+        "time": 269.06999999284744,
+        "height": 78.75
+      },
+      {
+        "time": 286.625,
+        "height": 78.75
+      },
+      {
+        "time": 302.375,
+        "height": 78.75
+      },
+      {
+        "time": 319.94999998807907,
+        "height": 78.75
+      }
+    ],
+    "closedHeight": 44
+  },
+  {
+    "name": "pt-360-touch-dark",
+    "width": 360,
+    "locale": "pt",
+    "theme": "dark",
+    "coarse": true,
+    "motion": "reduce",
+    "start": 4.083,
+    "openHeight": 78.75,
+    "frames": [
+      {
+        "time": 1.7450000047683716,
+        "height": 78.75
+      },
+      {
+        "time": 18.515000015497208,
+        "height": 44
+      },
+      {
+        "time": 35.0450000166893,
+        "height": 44
+      },
+      {
+        "time": 51.71500000357628,
+        "height": 44
+      },
+      {
+        "time": 69.47000002861023,
+        "height": 78.75
+      },
+      {
+        "time": 85.73500001430511,
+        "height": 78.75
+      },
+      {
+        "time": 102.05500000715256,
+        "height": 78.75
+      },
+      {
+        "time": 118.99000000953674,
+        "height": 78.75
+      },
+      {
+        "time": 135.6400000154972,
+        "height": 78.75
+      },
+      {
+        "time": 151.6050000190735,
+        "height": 78.75
+      },
+      {
+        "time": 168.2800000011921,
+        "height": 78.75
+      },
+      {
+        "time": 185.10000002384186,
+        "height": 78.75
+      },
+      {
+        "time": 201.89500001072884,
+        "height": 78.75
+      },
+      {
+        "time": 218.4050000011921,
+        "height": 78.75
+      },
+      {
+        "time": 235.125,
+        "height": 78.75
+      },
+      {
+        "time": 251.75,
+        "height": 78.75
+      },
+      {
+        "time": 269.25,
+        "height": 78.75
+      },
+      {
+        "time": 285.2450000047684,
+        "height": 78.75
+      },
+      {
+        "time": 302.4200000166893,
+        "height": 78.75
+      },
+      {
+        "time": 318.705000013113,
+        "height": 78.75
+      }
+    ],
+    "closedHeight": 44
+  }
+]
diff --git a/docs/media/assistant-conversation-craft/provenance.json b/docs/media/assistant-conversation-craft/provenance.json
new file mode 100644
index 000000000..bb3223769
--- /dev/null
+++ b/docs/media/assistant-conversation-craft/provenance.json
@@ -0,0 +1,11 @@
+{
+  "buildIdentity": {
+    "schema": 1,
+    "revision": "d6c0411372e168a5a1c124c82408b7499e7e3cc2",
+    "contentSha256": "23a96f4182123707557f63f43762b563cdfcd91f25f9a9aaccb20561081123b0"
+  },
+  "generatedAt": "2026-10-21T11:24:06.655Z",
+  "fixture": "Public provider NDJSON; deterministic UI acceptance only",
+  "captureScript": "work/capture-conversation-craft.mjs",
+  "states": 108
+}
diff --git a/docs/media/assistant-conversation-craft/pt-320-touch-light.webm b/docs/media/assistant-conversation-craft/pt-320-touch-light.webm
new file mode 100644
index 000000000..96d0adc6c
Binary files /dev/null and b/docs/media/assistant-conversation-craft/pt-320-touch-light.webm differ
diff --git a/docs/media/assistant-conversation-craft/pt-360-touch-dark.webm b/docs/media/assistant-conversation-craft/pt-360-touch-dark.webm
new file mode 100644
index 000000000..9ed2519c7
Binary files /dev/null and b/docs/media/assistant-conversation-craft/pt-360-touch-dark.webm differ
diff --git a/docs/media/assistant-conversation-craft/reasoning-open-desktop-light.png b/docs/media/assistant-conversation-craft/reasoning-open-desktop-light.png
new file mode 100644
index 000000000..e8f7d2ac4
Binary files /dev/null and b/docs/media/assistant-conversation-craft/reasoning-open-desktop-light.png differ
diff --git a/docs/media/assistant-conversation-craft/waiting-pt-320-touch-light.png b/docs/media/assistant-conversation-craft/waiting-pt-320-touch-light.png
new file mode 100644
index 000000000..880cce822
Binary files /dev/null and b/docs/media/assistant-conversation-craft/waiting-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-conversation-craft/welcome-desktop-light.png b/docs/media/assistant-conversation-craft/welcome-desktop-light.png
new file mode 100644
index 000000000..887cea277
Binary files /dev/null and b/docs/media/assistant-conversation-craft/welcome-desktop-light.png differ
diff --git a/docs/media/assistant-craft-correction/acceptance.json b/docs/media/assistant-craft-correction/acceptance.json
new file mode 100644
index 000000000..f02502908
--- /dev/null
+++ b/docs/media/assistant-craft-correction/acceptance.json
@@ -0,0 +1,50 @@
+{
+  "status": "accepted",
+  "runtime": {
+    "schema": 1,
+    "revision": "bd0e8c146bbde9b55a53ba04db1d95ff60affcd9",
+    "contentSha256": "89f8d8bf62aaa8d1f594cad6fedbb3e9bc6c4d26ced2674b58dc0e21af58395d"
+  },
+  "summary": "Corrective visual acceptance passed original-image and decoded continuous-recording review; the previous missed approval is withdrawn.",
+  "capture": {
+    "before": 44,
+    "after": 92,
+    "recordings": 8,
+    "environments": [
+      "desktop English light",
+      "desktop English dark/reduced motion",
+      "320px Portuguese touch/light",
+      "360px Portuguese touch/dark/reduced motion"
+    ],
+    "fixture": "Deterministic public provider NDJSON; no product CSS/DOM injection."
+  },
+  "tests": {
+    "unit": "6915 tests / 258 files passed with coverage thresholds unchanged",
+    "coverage": {
+      "statements": 88.16,
+      "branches": 84.24,
+      "functions": 89.02,
+      "lines": 90.54
+    },
+    "browser": "38 distinct related cases verified: 33 initial passes +2 corrected visible-route cases +3 reasoning/touch cases; no retries or assertion/overflow tolerance relaxation.",
+    "types": "Root noEmit and workspace builds passed",
+    "lint": "Archive-aware lint and immutable1511 evaluation checks passed",
+    "format": "Full archive-aware Prettier check and changed-authored-file formatting passed",
+    "build": "Production build passed; exact identity recorded above"
+  },
+  "review": {
+    "spec": "passed",
+    "code": "passed",
+    "visual": "Root and independent reviewer inspected all8 state sheets, all8 updated decoded recording sheets and critical original panes across the four declared environments. No blocking composition or legibility defect remained."
+  },
+  "limits": [
+    "Fixtures verify UI behavior, not real-model quality or exact competitor parity.",
+    "Native Word insertion retains its documented Markdown table limit.",
+    "Selection preservation covers completed/reused blocks and late highlighting; growing unfinished fences retain existing streaming behavior.",
+    "ran reasoning/guidance changes remain in PR436; this correction belongs to application composition/shared safe rendering."
+  ],
+  "reportQA": "1280px and320px:94images decoded,8video metadata loaded,zero overflow or JavaScript errors.",
+  "remoteCI": {
+    "status": "pending after approved PR update"
+  }
+}
diff --git a/docs/media/assistant-craft-correction/before-chat-code-desktop-light.png b/docs/media/assistant-craft-correction/before-chat-code-desktop-light.png
new file mode 100644
index 000000000..f1e90e53c
Binary files /dev/null and b/docs/media/assistant-craft-correction/before-chat-code-desktop-light.png differ
diff --git a/docs/media/assistant-craft-correction/before-return-detail-desktop-dark.png b/docs/media/assistant-craft-correction/before-return-detail-desktop-dark.png
new file mode 100644
index 000000000..f8a93b7c2
Binary files /dev/null and b/docs/media/assistant-craft-correction/before-return-detail-desktop-dark.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-artifact-code-copy-failed-pt-360-dark.png b/docs/media/assistant-craft-correction/markdown-artifact-code-copy-failed-pt-360-dark.png
new file mode 100644
index 000000000..520fdf68b
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-artifact-code-copy-failed-pt-360-dark.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-artifact-code-desktop-light.png b/docs/media/assistant-craft-correction/markdown-artifact-code-desktop-light.png
new file mode 100644
index 000000000..513fcc715
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-artifact-code-desktop-light.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-artifact-wide-table-pt-360-dark.png b/docs/media/assistant-craft-correction/markdown-artifact-wide-table-pt-360-dark.png
new file mode 100644
index 000000000..d7dd54625
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-artifact-wide-table-pt-360-dark.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-chat-code-copied-pt-320-light.png b/docs/media/assistant-craft-correction/markdown-chat-code-copied-pt-320-light.png
new file mode 100644
index 000000000..85fd653bf
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-chat-code-copied-pt-320-light.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-chat-code-desktop-dark.png b/docs/media/assistant-craft-correction/markdown-chat-code-desktop-dark.png
new file mode 100644
index 000000000..92cdab0db
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-chat-code-desktop-dark.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-chat-table-desktop-light.png b/docs/media/assistant-craft-correction/markdown-chat-table-desktop-light.png
new file mode 100644
index 000000000..731e27739
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-chat-table-desktop-light.png differ
diff --git a/docs/media/assistant-craft-correction/markdown-desktop-dark.webm b/docs/media/assistant-craft-correction/markdown-desktop-dark.webm
new file mode 100644
index 000000000..f0283802e
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-desktop-dark.webm differ
diff --git a/docs/media/assistant-craft-correction/markdown-desktop-light.webm b/docs/media/assistant-craft-correction/markdown-desktop-light.webm
new file mode 100644
index 000000000..7fa36fea1
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-desktop-light.webm differ
diff --git a/docs/media/assistant-craft-correction/markdown-pt-320-light.webm b/docs/media/assistant-craft-correction/markdown-pt-320-light.webm
new file mode 100644
index 000000000..dc78602f4
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-pt-320-light.webm differ
diff --git a/docs/media/assistant-craft-correction/markdown-pt-360-dark.webm b/docs/media/assistant-craft-correction/markdown-pt-360-dark.webm
new file mode 100644
index 000000000..ca2dbca60
Binary files /dev/null and b/docs/media/assistant-craft-correction/markdown-pt-360-dark.webm differ
diff --git a/docs/media/assistant-craft-correction/provenance.json b/docs/media/assistant-craft-correction/provenance.json
new file mode 100644
index 000000000..e2c005860
--- /dev/null
+++ b/docs/media/assistant-craft-correction/provenance.json
@@ -0,0 +1,143 @@
+{
+  "runtime": {
+    "schema": 1,
+    "revision": "bd0e8c146bbde9b55a53ba04db1d95ff60affcd9",
+    "contentSha256": "89f8d8bf62aaa8d1f594cad6fedbb3e9bc6c4d26ced2674b58dc0e21af58395d"
+  },
+  "completeLocalCaptureCount": 92,
+  "committedFiles": [
+    {
+      "file": "return-detail-desktop-light.png",
+      "source": "assistant-return-correction/after/detail-desktop-light.png",
+      "sha256": "318e26e28b838eea40b11ecaddab2f0a957a0848ab96d865aca09324ba385281",
+      "bytes": 25337
+    },
+    {
+      "file": "return-detail-desktop-dark.png",
+      "source": "assistant-return-correction/after/detail-desktop-dark.png",
+      "sha256": "f252309274ef12a16293d00656dc31cdf4e9cf365e795e12d389b64f0115497d",
+      "bytes": 24940
+    },
+    {
+      "file": "return-detail-pt-320-light.png",
+      "source": "assistant-return-correction/after/detail-pt-320-light.png",
+      "sha256": "d34132c6f1799f2ab6a03ef804181d70c730ac1197964bdf535138cbad61a8e8",
+      "bytes": 26244
+    },
+    {
+      "file": "return-escape-question-pt-320-light.png",
+      "source": "assistant-return-correction/after/escape-question-pt-320-light.png",
+      "sha256": "07a46c689b082f060630530cfb213978405c3cb93fbb23215000104910284c7e",
+      "bytes": 35209
+    },
+    {
+      "file": "return-saved-version-pt-360-dark.png",
+      "source": "assistant-return-correction/after/saved-version-pt-360-dark.png",
+      "sha256": "de9bc5671483bdae63cd3bca64de7d9d81178d4752cd1d3efe28e2de9cfa87cd",
+      "bytes": 28380
+    },
+    {
+      "file": "return-structured-table-pt-320-light.png",
+      "source": "assistant-return-correction/after/structured-table-pt-320-light.png",
+      "sha256": "19fb69529b976de039e4783a933a53be58e1ed5d1de8148bcaf42037b4f34440",
+      "bytes": 25196
+    },
+    {
+      "file": "markdown-chat-table-desktop-light.png",
+      "source": "assistant-markdown-craft/after/chat-table-desktop-light.png",
+      "sha256": "1ad9cd625ab305b9e2bbe6b6409b9f938b318b3d2d3dba1a2a4d03cc9ebb34d1",
+      "bytes": 67617
+    },
+    {
+      "file": "markdown-chat-code-desktop-dark.png",
+      "source": "assistant-markdown-craft/after/chat-code-desktop-dark.png",
+      "sha256": "718dc46f3d6c6e853ed31ac3ac9879bd60e2045f4d776fec643e5b0b16e3a122",
+      "bytes": 66238
+    },
+    {
+      "file": "markdown-chat-code-copied-pt-320-light.png",
+      "source": "assistant-markdown-craft/after/chat-code-copied-pt-320-light.png",
+      "sha256": "b62be9a1990dbc6251bd8df1378f58afaeffe3cf0a9e18269b4677897310fa8f",
+      "bytes": 53789
+    },
+    {
+      "file": "markdown-artifact-code-desktop-light.png",
+      "source": "assistant-markdown-craft/after/artifact-code-desktop-light.png",
+      "sha256": "0ca77609129a3e8f0d10bf44e38260b8015dd421bb28b391a7b08fc62da790a9",
+      "bytes": 66473
+    },
+    {
+      "file": "markdown-artifact-code-copy-failed-pt-360-dark.png",
+      "source": "assistant-markdown-craft/after/artifact-code-copy-failed-pt-360-dark.png",
+      "sha256": "0df9ed712c7450370a64c756f5942417ad8af0fb0a3d2c9cf7d993868aee7be7",
+      "bytes": 59752
+    },
+    {
+      "file": "markdown-artifact-wide-table-pt-360-dark.png",
+      "source": "assistant-markdown-craft/after/artifact-wide-table-pt-360-dark.png",
+      "sha256": "20a2f0dc4df53496e0a39d7d94a427bae2fdefdaf8f3611236513a41c41a9b41",
+      "bytes": 54730
+    },
+    {
+      "file": "before-return-detail-desktop-dark.png",
+      "source": "assistant-return-correction/before/detail-desktop-dark.png",
+      "sha256": "788d3ce9b86bc8a8675f312ce304be4e3ff4f1fc180d3573b91cc9234ca659f9",
+      "bytes": 27374
+    },
+    {
+      "file": "before-chat-code-desktop-light.png",
+      "source": "assistant-markdown-craft/before/chat-code-desktop-light.png",
+      "sha256": "56ebd1d0f6432fce6ef01c962a41aff8df8ca26a8e7efcd6f9a241e3d0e61aee",
+      "bytes": 56726
+    },
+    {
+      "file": "return-desktop-light.webm",
+      "source": "assistant-return-correction/recordings/desktop-light-pane.webm",
+      "sha256": "e6a9ae8494386c3615ef172e0875b52b33ac582be6f95ed09e500ce50e5b79e5",
+      "bytes": 176602
+    },
+    {
+      "file": "return-desktop-dark.webm",
+      "source": "assistant-return-correction/recordings/desktop-dark-pane.webm",
+      "sha256": "f617d38e1a89fd695b4475d73d9e74f1c89ecb9afe8e6acb4ead53bd4d5e5e67",
+      "bytes": 141509
+    },
+    {
+      "file": "return-pt-320-light.webm",
+      "source": "assistant-return-correction/recordings/pt-320-light-pane.webm",
+      "sha256": "1bad42096cf5daad88b764a26721aa7edd8b8bdf88cfe1b12f38a753fb8bc61b",
+      "bytes": 202435
+    },
+    {
+      "file": "return-pt-360-dark.webm",
+      "source": "assistant-return-correction/recordings/pt-360-dark-pane.webm",
+      "sha256": "e6ea4f3d4643d1058f23217efde09a1a076eb44c3708a8659e933ed6d540f38e",
+      "bytes": 190746
+    },
+    {
+      "file": "markdown-desktop-light.webm",
+      "source": "assistant-markdown-craft/recordings/desktop-light-pane.webm",
+      "sha256": "93847fad12430906f51402082ed68ebbe8b59774ab64845de08b8f23877f5a73",
+      "bytes": 276583
+    },
+    {
+      "file": "markdown-desktop-dark.webm",
+      "source": "assistant-markdown-craft/recordings/desktop-dark-pane.webm",
+      "sha256": "ddb06e8f731d5e89c0bd6a7156fb114432c764cdee25b1ed86301a7c697d90bb",
+      "bytes": 241527
+    },
+    {
+      "file": "markdown-pt-320-light.webm",
+      "source": "assistant-markdown-craft/recordings/pt-320-light-pane.webm",
+      "sha256": "b5cee7e75b666e437df0767b33d466828605569433593b57567d9441b5acd339",
+      "bytes": 246074
+    },
+    {
+      "file": "markdown-pt-360-dark.webm",
+      "source": "assistant-markdown-craft/recordings/pt-360-dark-pane.webm",
+      "sha256": "a2172d77421c358520f9807f65f05d5303c3a54b22c4f8ffbe8613fa41a02d76",
+      "bytes": 245942
+    }
+  ],
+  "note": "Representative unmodified pane screenshots and spatially cropped continuous recordings; complete inventory and full-browser originals remain in the local report."
+}
diff --git a/docs/media/assistant-craft-correction/return-desktop-dark.webm b/docs/media/assistant-craft-correction/return-desktop-dark.webm
new file mode 100644
index 000000000..ddcd09dce
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-desktop-dark.webm differ
diff --git a/docs/media/assistant-craft-correction/return-desktop-light.webm b/docs/media/assistant-craft-correction/return-desktop-light.webm
new file mode 100644
index 000000000..6bbfddd16
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-desktop-light.webm differ
diff --git a/docs/media/assistant-craft-correction/return-detail-desktop-dark.png b/docs/media/assistant-craft-correction/return-detail-desktop-dark.png
new file mode 100644
index 000000000..7d4bdd73f
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-detail-desktop-dark.png differ
diff --git a/docs/media/assistant-craft-correction/return-detail-desktop-light.png b/docs/media/assistant-craft-correction/return-detail-desktop-light.png
new file mode 100644
index 000000000..bc34f90e3
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-detail-desktop-light.png differ
diff --git a/docs/media/assistant-craft-correction/return-detail-pt-320-light.png b/docs/media/assistant-craft-correction/return-detail-pt-320-light.png
new file mode 100644
index 000000000..2f1f34f6b
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-detail-pt-320-light.png differ
diff --git a/docs/media/assistant-craft-correction/return-escape-question-pt-320-light.png b/docs/media/assistant-craft-correction/return-escape-question-pt-320-light.png
new file mode 100644
index 000000000..76195e831
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-escape-question-pt-320-light.png differ
diff --git a/docs/media/assistant-craft-correction/return-pt-320-light.webm b/docs/media/assistant-craft-correction/return-pt-320-light.webm
new file mode 100644
index 000000000..3108e9f8f
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-pt-320-light.webm differ
diff --git a/docs/media/assistant-craft-correction/return-pt-360-dark.webm b/docs/media/assistant-craft-correction/return-pt-360-dark.webm
new file mode 100644
index 000000000..d8e77052a
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-pt-360-dark.webm differ
diff --git a/docs/media/assistant-craft-correction/return-saved-version-pt-360-dark.png b/docs/media/assistant-craft-correction/return-saved-version-pt-360-dark.png
new file mode 100644
index 000000000..e501f7c41
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-saved-version-pt-360-dark.png differ
diff --git a/docs/media/assistant-craft-correction/return-structured-table-pt-320-light.png b/docs/media/assistant-craft-correction/return-structured-table-pt-320-light.png
new file mode 100644
index 000000000..26ce9e900
Binary files /dev/null and b/docs/media/assistant-craft-correction/return-structured-table-pt-320-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-artifact-editor-dark.png b/docs/media/assistant-craft/2026-10-21-artifact-editor-dark.png
new file mode 100644
index 000000000..28e108942
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-artifact-editor-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-artifact-import-light.png b/docs/media/assistant-craft/2026-10-21-artifact-import-light.png
new file mode 100644
index 000000000..ade660668
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-artifact-import-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-artifacts-dark.png b/docs/media/assistant-craft/2026-10-21-artifacts-dark.png
new file mode 100644
index 000000000..9de6c0f20
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-artifacts-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-artifacts-light.png b/docs/media/assistant-craft/2026-10-21-artifacts-light.png
new file mode 100644
index 000000000..78bd7c05c
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-artifacts-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-before-artifacts-light.png b/docs/media/assistant-craft/2026-10-21-before-artifacts-light.png
new file mode 100644
index 000000000..813bbbfa8
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-before-artifacts-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-before-history-light.png b/docs/media/assistant-craft/2026-10-21-before-history-light.png
new file mode 100644
index 000000000..814adefac
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-before-history-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-chat-de-320-touch-light.png b/docs/media/assistant-craft/2026-10-21-chat-de-320-touch-light.png
new file mode 100644
index 000000000..82927b5bf
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-chat-de-320-touch-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-history-confirmation-dark.png b/docs/media/assistant-craft/2026-10-21-history-confirmation-dark.png
new file mode 100644
index 000000000..304f41bb9
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-history-confirmation-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-history-dark.png b/docs/media/assistant-craft/2026-10-21-history-dark.png
new file mode 100644
index 000000000..c2b510466
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-history-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-history-es-360-touch-dark.png b/docs/media/assistant-craft/2026-10-21-history-es-360-touch-dark.png
new file mode 100644
index 000000000..15571ecc1
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-history-es-360-touch-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-history-light.png b/docs/media/assistant-craft/2026-10-21-history-light.png
new file mode 100644
index 000000000..96483b9bb
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-history-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-history-pt-320-touch-light.png b/docs/media/assistant-craft/2026-10-21-history-pt-320-touch-light.png
new file mode 100644
index 000000000..78b8c87c6
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-history-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-models-light.png b/docs/media/assistant-craft/2026-10-21-models-light.png
new file mode 100644
index 000000000..c4efe3e79
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-models-light.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-models-service-dark.png b/docs/media/assistant-craft/2026-10-21-models-service-dark.png
new file mode 100644
index 000000000..37c8271b9
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-models-service-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-source-error-pt-360-touch-dark.png b/docs/media/assistant-craft/2026-10-21-source-error-pt-360-touch-dark.png
new file mode 100644
index 000000000..52eb15c7d
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-source-error-pt-360-touch-dark.png differ
diff --git a/docs/media/assistant-craft/2026-10-21-sources-populated-light.png b/docs/media/assistant-craft/2026-10-21-sources-populated-light.png
new file mode 100644
index 000000000..ee407d969
Binary files /dev/null and b/docs/media/assistant-craft/2026-10-21-sources-populated-light.png differ
diff --git a/docs/media/assistant-detail-audit/artifact-delete-cancelled-pt-320-touch-light.png b/docs/media/assistant-detail-audit/artifact-delete-cancelled-pt-320-touch-light.png
new file mode 100644
index 000000000..75cae184a
Binary files /dev/null and b/docs/media/assistant-detail-audit/artifact-delete-cancelled-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-detail-audit/artifact-delete-confirmation-pt-320-touch-light.png b/docs/media/assistant-detail-audit/artifact-delete-confirmation-pt-320-touch-light.png
new file mode 100644
index 000000000..c24bb061e
Binary files /dev/null and b/docs/media/assistant-detail-audit/artifact-delete-confirmation-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-detail-audit/before-models-expanded-bottom-pt-320-touch-light.png b/docs/media/assistant-detail-audit/before-models-expanded-bottom-pt-320-touch-light.png
new file mode 100644
index 000000000..4d232def2
Binary files /dev/null and b/docs/media/assistant-detail-audit/before-models-expanded-bottom-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-detail-audit/captures.json b/docs/media/assistant-detail-audit/captures.json
new file mode 100644
index 000000000..784f8fa16
--- /dev/null
+++ b/docs/media/assistant-detail-audit/captures.json
@@ -0,0 +1,886 @@
+[
+  {
+    "name": "history",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "history-light.png",
+    "width": 1280
+  },
+  {
+    "name": "history-confirmation",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "history-confirmation-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifacts",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifacts-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-import",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifact-import-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-editor",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifact-editor-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-delete-confirmation",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": "cancel"
+    },
+    "file": "artifact-delete-confirmation-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-delete-cancelled",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": "delete"
+    },
+    "file": "artifact-delete-cancelled-light.png",
+    "width": 1280
+  },
+  {
+    "name": "artifacts-populated",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifacts-populated-light.png",
+    "width": 1280
+  },
+  {
+    "name": "models",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-light.png",
+    "width": 1280
+  },
+  {
+    "name": "models-expanded",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-expanded-light.png",
+    "width": 1280
+  },
+  {
+    "name": "models-expanded-bottom",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-expanded-bottom-light.png",
+    "width": 1280
+  },
+  {
+    "name": "models-service",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-service-light.png",
+    "width": 1280
+  },
+  {
+    "name": "chat",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "chat-light.png",
+    "width": 1280
+  },
+  {
+    "name": "sources",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "sources-light.png",
+    "width": 1280
+  },
+  {
+    "name": "sources-populated",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "sources-populated-light.png",
+    "width": 1280
+  },
+  {
+    "name": "source-excerpt",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "source-excerpt-light.png",
+    "width": 1280
+  },
+  {
+    "name": "source-error",
+    "theme": "light",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "source-error-light.png",
+    "width": 1280
+  },
+  {
+    "name": "history",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "history-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "history-confirmation",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "history-confirmation-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifacts",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifacts-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-import",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifact-import-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-editor",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifact-editor-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-delete-confirmation",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": "cancel"
+    },
+    "file": "artifact-delete-confirmation-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifact-delete-cancelled",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": "delete"
+    },
+    "file": "artifact-delete-cancelled-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "artifacts-populated",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "artifacts-populated-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "models",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "models-expanded",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-expanded-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "models-expanded-bottom",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-expanded-bottom-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "models-service",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "models-service-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "chat",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "chat-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "sources",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "sources-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "sources-populated",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "sources-populated-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "source-excerpt",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "source-excerpt-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "source-error",
+    "theme": "dark",
+    "locale": "en",
+    "coarse": false,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 40,
+      "active": null
+    },
+    "file": "source-error-dark.png",
+    "width": 1280
+  },
+  {
+    "name": "history",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "history-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "history-confirmation",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "history-confirmation-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifacts",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifacts-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifact-import",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifact-import-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifact-editor",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifact-editor-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifact-delete-confirmation",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": "cancel"
+    },
+    "file": "artifact-delete-confirmation-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifact-delete-cancelled",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": "delete"
+    },
+    "file": "artifact-delete-cancelled-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "artifacts-populated",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifacts-populated-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "models",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "models-expanded",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-expanded-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "models-expanded-bottom",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-expanded-bottom-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "models-service",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-service-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "chat",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "chat-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "sources",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "sources-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "sources-populated",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "sources-populated-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "source-excerpt",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "source-excerpt-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "source-error",
+    "theme": "light",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "source-error-pt-320-touch-light.png",
+    "width": 320
+  },
+  {
+    "name": "history",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "history-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "history-confirmation",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "history-confirmation-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifacts",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifacts-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifact-import",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifact-import-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifact-editor",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifact-editor-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifact-delete-confirmation",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": "cancel"
+    },
+    "file": "artifact-delete-confirmation-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifact-delete-cancelled",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": "delete"
+    },
+    "file": "artifact-delete-cancelled-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "artifacts-populated",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "artifacts-populated-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "models",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "models-expanded",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-expanded-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "models-expanded-bottom",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-expanded-bottom-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "models-service",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "models-service-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "chat",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "chat-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "sources",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "sources-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "sources-populated",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "sources-populated-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "source-excerpt",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "source-excerpt-pt-360-touch-dark.png",
+    "width": 360
+  },
+  {
+    "name": "source-error",
+    "theme": "dark",
+    "locale": "pt",
+    "coarse": true,
+    "geometry": {
+      "overflow": 0,
+      "headerHeight": 52,
+      "active": null
+    },
+    "file": "source-error-pt-360-touch-dark.png",
+    "width": 360
+  }
+]
diff --git a/docs/media/assistant-detail-audit/chat-pt-320-touch-light.png b/docs/media/assistant-detail-audit/chat-pt-320-touch-light.png
new file mode 100644
index 000000000..28301dadb
Binary files /dev/null and b/docs/media/assistant-detail-audit/chat-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-detail-audit/models-dark.png b/docs/media/assistant-detail-audit/models-dark.png
new file mode 100644
index 000000000..7f6aef223
Binary files /dev/null and b/docs/media/assistant-detail-audit/models-dark.png differ
diff --git a/docs/media/assistant-detail-audit/models-expanded-bottom-pt-320-touch-light.png b/docs/media/assistant-detail-audit/models-expanded-bottom-pt-320-touch-light.png
new file mode 100644
index 000000000..5be40de71
Binary files /dev/null and b/docs/media/assistant-detail-audit/models-expanded-bottom-pt-320-touch-light.png differ
diff --git a/docs/media/assistant-detail-audit/source-excerpt-pt-360-touch-dark.png b/docs/media/assistant-detail-audit/source-excerpt-pt-360-touch-dark.png
new file mode 100644
index 000000000..dca8425c6
Binary files /dev/null and b/docs/media/assistant-detail-audit/source-excerpt-pt-360-touch-dark.png differ
diff --git a/docs/media/assistant-refinement/artifacts-en-light-1280.png b/docs/media/assistant-refinement/artifacts-en-light-1280.png
new file mode 100644
index 000000000..dc9865634
Binary files /dev/null and b/docs/media/assistant-refinement/artifacts-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/before-chat-en-light-1280.png b/docs/media/assistant-refinement/before-chat-en-light-1280.png
new file mode 100644
index 000000000..8b4809e3f
Binary files /dev/null and b/docs/media/assistant-refinement/before-chat-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/before-history-en-light-1280.png b/docs/media/assistant-refinement/before-history-en-light-1280.png
new file mode 100644
index 000000000..cdc416de3
Binary files /dev/null and b/docs/media/assistant-refinement/before-history-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/chat-en-light-1280.png b/docs/media/assistant-refinement/chat-en-light-1280.png
new file mode 100644
index 000000000..e534a25ca
Binary files /dev/null and b/docs/media/assistant-refinement/chat-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/header-en-dark-1280.png b/docs/media/assistant-refinement/header-en-dark-1280.png
new file mode 100644
index 000000000..1dfb8aaee
Binary files /dev/null and b/docs/media/assistant-refinement/header-en-dark-1280.png differ
diff --git a/docs/media/assistant-refinement/header-en-light-1280.png b/docs/media/assistant-refinement/header-en-light-1280.png
new file mode 100644
index 000000000..f54ddb327
Binary files /dev/null and b/docs/media/assistant-refinement/header-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/history-en-dark-1280.png b/docs/media/assistant-refinement/history-en-dark-1280.png
new file mode 100644
index 000000000..73285d8be
Binary files /dev/null and b/docs/media/assistant-refinement/history-en-dark-1280.png differ
diff --git a/docs/media/assistant-refinement/history-en-light-1280.png b/docs/media/assistant-refinement/history-en-light-1280.png
new file mode 100644
index 000000000..247bdc1f5
Binary files /dev/null and b/docs/media/assistant-refinement/history-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/history-guides-pt-light-320.png b/docs/media/assistant-refinement/history-guides-pt-light-320.png
new file mode 100644
index 000000000..90bc25f11
Binary files /dev/null and b/docs/media/assistant-refinement/history-guides-pt-light-320.png differ
diff --git a/docs/media/assistant-refinement/history-pt-dark-360.png b/docs/media/assistant-refinement/history-pt-dark-360.png
new file mode 100644
index 000000000..f074b70e9
Binary files /dev/null and b/docs/media/assistant-refinement/history-pt-dark-360.png differ
diff --git a/docs/media/assistant-refinement/history-pt-light-320.png b/docs/media/assistant-refinement/history-pt-light-320.png
new file mode 100644
index 000000000..ced6004e3
Binary files /dev/null and b/docs/media/assistant-refinement/history-pt-light-320.png differ
diff --git a/docs/media/assistant-refinement/measurements.json b/docs/media/assistant-refinement/measurements.json
new file mode 100644
index 000000000..f772eccc1
--- /dev/null
+++ b/docs/media/assistant-refinement/measurements.json
@@ -0,0 +1,94 @@
+[
+  {
+    "width": 1280,
+    "locale": "en",
+    "theme": "light",
+    "coarse": false,
+    "view": "history",
+    "headerHeight": 40,
+    "navHeight": 37,
+    "chromeHeight": 77,
+    "titleTextLeft": 16,
+    "activeShadow": "none",
+    "activeFill": "rgb(235, 235, 235)",
+    "canvas": "rgb(255, 255, 255)",
+    "overflow": 0,
+    "headingLeft": 16,
+    "summaryLeft": 16,
+    "checkboxLeft": 16,
+    "iconLefts": [16, 16, 16, 16, 16],
+    "labelLefts": [40, 40, 40, 40, 40],
+    "saveLabelLeft": 40,
+    "statusLeft": 40,
+    "file": "history-en-light-1280.png"
+  },
+  {
+    "width": 1280,
+    "locale": "en",
+    "theme": "dark",
+    "coarse": false,
+    "view": "history",
+    "headerHeight": 40,
+    "navHeight": 37,
+    "chromeHeight": 77,
+    "titleTextLeft": 16,
+    "activeShadow": "none",
+    "activeFill": "rgb(31, 31, 31)",
+    "canvas": "rgb(26, 26, 26)",
+    "overflow": 0,
+    "headingLeft": 16,
+    "summaryLeft": 16,
+    "checkboxLeft": 16,
+    "iconLefts": [16, 16, 16, 16, 16],
+    "labelLefts": [40, 40, 40, 40, 40],
+    "saveLabelLeft": 40,
+    "statusLeft": 40,
+    "file": "history-en-dark-1280.png"
+  },
+  {
+    "width": 320,
+    "locale": "pt",
+    "theme": "light",
+    "coarse": true,
+    "view": "history",
+    "headerHeight": 52,
+    "navHeight": 49,
+    "chromeHeight": 101,
+    "titleTextLeft": 16,
+    "activeShadow": "none",
+    "activeFill": "rgb(235, 235, 235)",
+    "canvas": "rgb(255, 255, 255)",
+    "overflow": 0,
+    "headingLeft": 16,
+    "summaryLeft": 16,
+    "checkboxLeft": 16,
+    "iconLefts": [16, 16, 16, 16, 16],
+    "labelLefts": [40, 40, 40, 40, 40],
+    "saveLabelLeft": 40,
+    "statusLeft": 40,
+    "file": "history-pt-light-320.png"
+  },
+  {
+    "width": 360,
+    "locale": "pt",
+    "theme": "dark",
+    "coarse": true,
+    "view": "history",
+    "headerHeight": 52,
+    "navHeight": 49,
+    "chromeHeight": 101,
+    "titleTextLeft": 16,
+    "activeShadow": "none",
+    "activeFill": "rgb(31, 31, 31)",
+    "canvas": "rgb(26, 26, 26)",
+    "overflow": 0,
+    "headingLeft": 16,
+    "summaryLeft": 16,
+    "checkboxLeft": 16,
+    "iconLefts": [16, 16, 16, 16, 16],
+    "labelLefts": [40, 40, 40, 40, 40],
+    "saveLabelLeft": 40,
+    "statusLeft": 40,
+    "file": "history-pt-dark-360.png"
+  }
+]
diff --git a/docs/media/assistant-refinement/models-en-light-1280.png b/docs/media/assistant-refinement/models-en-light-1280.png
new file mode 100644
index 000000000..b07207dad
Binary files /dev/null and b/docs/media/assistant-refinement/models-en-light-1280.png differ
diff --git a/docs/media/assistant-refinement/sources-en-light-1280.png b/docs/media/assistant-refinement/sources-en-light-1280.png
new file mode 100644
index 000000000..e18eafaf6
Binary files /dev/null and b/docs/media/assistant-refinement/sources-en-light-1280.png differ
diff --git a/docs/superpowers/plans/2026-10-21-assistant-conversation-craft.md b/docs/superpowers/plans/2026-10-21-assistant-conversation-craft.md
new file mode 100644
index 000000000..d7c502909
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-21-assistant-conversation-craft.md
@@ -0,0 +1,59 @@
+# Assistant Conversation Craft Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development to implement this plan. Steps use checkbox syntax for tracking.
+
+**Goal:** Bring the complete sidebar conversation, composer, public reasoning and artifact workflow to a coherent, task-centered completion level, accepted through actual screenshots and recordings before PR updates.
+
+**Architecture:** Keep request, storage and document-review owners intact. Separate public reasoning from answer text at the transport boundary and reuse ranui reasoning/disclosure and the existing chat package’s safe Markdown renderer. Reduce application chrome and compose existing host controls into the relevant task surfaces.
+
+**Tech Stack:** TypeScript, ranui0.5 Web Components/builder/tokens, ChatView, Vitest, Playwright, Vite.
+
+## Chunk1: Implement owned behavior and composition
+
+### Task1: Public reasoning sideband
+
+Files: packages/agent-core/src/llm/{types,openai-format,openai-stream,openai,ollama,gemini,anthropic}.ts; runtime.ts; runtime event types as owned there; lib/agent-plugin/ui/controller.ts; document-read-answer.ts; targeted tests.
+
+- [x] Write failing adapter/runtime/controller tests for explicitly returned reasoning, separation from answer/history and ignored late callbacks.
+- [x] Add optional fifth provider chatStream argument onReasoning; normalize OpenAI-compatible reasoning_content/reasoning, Gemini thought text and Anthropic exposed thinking events without exposing signatures/redacted/internal blocks.
+- [x] Forward a reasoning_delta runtime event and optional controller onReasoningDelta callback under existing lifetime guards. Expose optional reasoning callback in document-read-answer. Keep model request defaults unchanged.
+- [x] Run affected unit cases and package build. Independently review spec then correctness.
+
+### Task2: ChatView/composer/answer craft
+
+Files: packages/chat-ui/src/{chat-view,types,styles,index}.ts; package usage guide; targeted unit cases.
+
+- [x] Add failing tests for appendReasoningDelta/endReasoning, reader-owned disclosure state, bounded reasoning, abort/clear/dispose and no copy/save/apply/context contamination.
+- [x] Reuse r-reasoning. Add public methods appendReasoningDelta(text), endReasoning({interrupted?}); conclude on first answer/end/stop. Do not fabricate absent reasoning. Preserve reading position and actual activity announcements.
+- [x] Refine composer, transcript typography/action states, artifact-result identity and compact progress presentation. Maintain IME, drafts, editable next draft, explicit Stop and queue semantics; avoid per-token animations.
+- [x] Run affected package tests/build and independent spec/correctness review.
+
+### Task3: Artifact reader/editor workbench
+
+Files: lib/agent-plugin/ui/{artifacts-view,artifact-presentation,artifact-workflow}.ts; a dedicated owned artifact style file if warranted; targeted unit cases. Shared product translations remain root-owned.
+
+- [x] Write failing tests for preview/edit, version selection with dirty draft, cancellation and export/review semantics.
+- [x] Build readable text preview with the shared safe chat Markdown renderer, an explicit edit mode, compact coherent toolbar/version/actions, source disclosure for structured content and nearby deletion confirmation with safe focus.
+- [x] Preserve all storage/draft/schema/native-document-review guards; do not autosave or infer artifacts from prose.
+- [x] Provide any new label keys/defaults for root localization; verify focused units and independent reviews.
+
+### Task4: Host shell and contextual entries (root integration)
+
+Files: panel.ts, panel-workspace.ts, task-entry.ts, workspace-labels.ts, styles/assistant.css and optional owned style sheet, shared i18n types/messages, affected navigation integration tests.
+
+- [x] Reproduce current two-row chrome and automatic settings routing in acceptance; assert the new one-row task-centered contract independently.
+- [x] Place Chat/Artifacts/Conversations in the single compact header. Move actual model/settings trigger to composer context; Sources remains near composition. Keep all routes operable through real user paths.
+- [x] Start in Chat without preparing models. Wire real reasoning callbacks in controller and direct read paths to ChatView under existing request lifetime checks.
+- [x] Align surrounding settings/source/task details with the new hierarchy and update all product locales. Avoid a second token/motion vocabulary.
+- [x] Update tests to use the actual revised navigation paths, preserving behavioral coverage; do not weaken assertions/timeouts/retries to mask failures.
+
+## Chunk2: Browser craft acceptance and delivery
+
+### Task5: Actual walkthrough, motion and upstream ownership
+
+- [x] Build once and run the affected tests serially against that build. Keep heavy capture and E2E runs sequential.
+- [x] Capture baseline/current representative panes and deterministic streamed reasoning/answer/artifact workflows in light/dark, English/Portuguese, desktop/touch/narrow states.
+- [x] Record normal and reduced-motion flows, interruption/reversal, reader scroll, focus return and artifact preview/edit/continue. Inspect actual frames, not only video creation success.
+- [x] If a ran component defect is reproduced, fix its owner and add library-level failing/passing coverage; verify local consumed package rather than hiding it in host CSS. Do not publish a package without explicit release authorization.
+- [x] Independent visual/spec and code-quality review; fix findings and repeat only affected checks/captures.
+- [x] Update the local design contract/report and provide scoped evidence/remaining limits. Commit/push/update PR290 only after actual screenshot/recording acceptance; attach any created upstream PR. Do not merge or publish.
diff --git a/docs/superpowers/plans/2026-10-21-assistant-markdown-craft.md b/docs/superpowers/plans/2026-10-21-assistant-markdown-craft.md
new file mode 100644
index 000000000..167dcd7a4
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-21-assistant-markdown-craft.md
@@ -0,0 +1,38 @@
+# Assistant Markdown craft implementation plan
+
+> **For agentic workers:** Use subagent-driven-development with separate spec/code review.
+
+**Goal:** Give Chat and Artifacts one polished, safe table/code presentation.
+
+**Architecture:** Keep Marked token parsing and safe DOM construction. One small presentation
+owner supplies shared block styles, code actions and bounded lazy token highlighting. The
+existing streaming cache and host source/state ownership remain authoritative.
+
+**Tech Stack:** TypeScript, native DOM, ran tokens, Marked, declared Shiki 4.4.3, Vitest/Playwright.
+
+## Chunk 1: Shared presentation
+
+- [x] Read all renderer consumers and existing streaming/copy/security tests; add focused RED
+      cases for discarded language/alignment and code copy behavior before changing implementation.
+- [x] Add explicit fine-grained Shiki dependency/imports and safe dual-theme token rendering;
+      bound completed-code highlighting and guard stale/selected/detached targets.
+- [x] Add a renderer-owned code header/copy lifecycle with localized states and disposal.
+      Wire it through completed/restored/streamed Chat and Artifact previews.
+- [x] Consolidate table/code CSS; use quiet table hierarchy, explicit column alignment and
+      scoped horizontal scrolling. Remove conflicting artifact-only block rules.
+- [x] Run focused Markdown/streaming/security/artifact tests and types/lint; fix actual failures.
+- [x] Obtain independent spec then code review; correct findings before acceptance.
+
+## Chunk 2: Actual acceptance and delivery
+
+- [x] Build the final combined navigation/Markdown source and record its identity.
+- [x] Run the relevant whole-assistant browser sweep and all unit tests once on final source.
+- [x] Capture before/after Chat and Artifact tables/code, copy/scroll recordings, and the
+      corrected return/dirty-confirmation path across four declared environments.
+- [x] Inspect original images and decoded recording frames. Reject visible defects even if
+      assertions pass; mark the earlier missed acceptance as superseded.
+- [x] Save a concise corrective report and prepare accepted changes for the existing PR
+      without loosening thresholds or assertions.
+
+Remote CI is observed after the approved push; the PR and local acceptance report
+retain its final result without changing the tested runtime.
diff --git a/docs/superpowers/plans/2026-10-21-assistant-navigation-and-density.md b/docs/superpowers/plans/2026-10-21-assistant-navigation-and-density.md
new file mode 100644
index 000000000..6a837701a
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-21-assistant-navigation-and-density.md
@@ -0,0 +1,36 @@
+# Assistant navigation and density implementation plan
+
+> **For agentic workers:** Use subagent-driven development for implementation and independent review. Steps use checkbox syntax for tracking.
+
+**Goal:** Correct the two rejected compositions, audit analogous views and update PR #289 only after actual rendered acceptance.
+
+**Architecture:** The existing panel workspace owns parallel navigation and focus. View owners retain nested artifact flows and all data operations; shared assistant CSS owns density and alignment. No framework or dependency changes.
+
+**Tech Stack:** TypeScript, ranui builders/tokens, Vite, Vitest, Playwright.
+
+## Task 1: Baseline, navigation and hierarchy
+
+- [x] Capture the unchanged History, Artifacts, Models and Sources panes in a real browser.
+- [x] Add failing owner/browser checks for explicit Chat navigation, idempotent destination selection, top-level heading alignment and absent top-level Back.
+- [x] Update `panel-workspace.ts`, `panel.ts`, `sources-view.ts`, `artifacts-view.ts` and `view-header.ts`: visible navigation, selected state, top-level headers, genuine nested Back, runtime ownership.
+- [x] Add `agentWorkspaceChat` to i18n types and all seven locale dictionaries.
+- [x] Style the navigation and headers in `styles/assistant.css`; retain keyboard and coarse input targets.
+- [x] Run focused owner/view/artifact/history tests and review against the scope lock.
+
+## Task 2: Command composition and craft
+
+- [x] Add browser regression checks for equal command frames, 32px fine/44px coarse targets, checkbox/icon/text columns and ordinary Import/Attach roles.
+- [x] Correct History layout and secondary control treatment in shared CSS; preserve all operations.
+- [x] Add restrained entry motion using existing ran tokens and a reduced-motion guard.
+- [x] Inspect actual full-pane screenshots and iterate on proportions, density, spacing and themes.
+
+## Task 3: Regression and acceptance
+
+- [x] Adapt affected tests to the new product navigation. Retain actual interaction coverage and independent geometry checks; do not preserve rejected layout contracts.
+- [x] Run relevant assistant owner/unit suites and browser workspace/history/source/artifact/layout suites without retries.
+- [x] Exercise narrow/coarse, translated, dark, nested, loading/error and confirmation states; inspect captured PNGs.
+- [x] Reverse-check deliberate text/frame drift and restore.
+- [x] Run `pnpm lint:ts`, `pnpm format:check`, `pnpm build` and `git diff --check`.
+- [x] Replace superseded rules in `docs/design-system.md` and add an evidence-backed acceptance record with real captures and limitations.
+- [x] Obtain independent specification/code/visual review and resolve findings.
+- [ ] Commit and push to the existing PR branch, rewrite PR metadata to describe the final implementation and evidence, then inspect CI for new failures.
diff --git a/docs/superpowers/plans/2026-10-21-assistant-single-return.md b/docs/superpowers/plans/2026-10-21-assistant-single-return.md
new file mode 100644
index 000000000..07f9d53d0
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-21-assistant-single-return.md
@@ -0,0 +1,34 @@
+# Assistant single-return correction plan
+
+> **For agentic workers:** Use subagent-driven-development for implementation and separate
+> spec/code review. The current checkout is already isolated on the existing PR branch.
+
+**Goal:** Remove duplicated return navigation and visible command drift in the actual artifact flow.
+
+**Architecture:** The shell owns the single return location; the artifact view retains its
+existing guarded return operation. Reuse the native button/action rather than duplicating
+navigation state or deleting dirty/busy protection. Shared CSS owns command insets.
+
+**Tech Stack:** TypeScript, native DOM/ranui, Vitest, Playwright.
+
+## Chunk 1: Correct the application composition
+
+- [x] Add a failing browser regression for one return location and the actual return destination
+      across root list, detail/import and dirty confirmation. Measure visible command starts.
+- [x] Implement the smallest change in `lib/agent-plugin/ui/artifacts-view.ts`, `panel.ts`,
+      `panel-workspace.ts` if needed, and `styles/assistant*.css`. Keep state ownership intact.
+- [x] Replace the superseded double-return contract in `docs/design-system.md`; migrate tests
+      to the new real route without removing dirty, busy, focus or overflow assertions.
+- [x] Run affected unit/browser suites, types/lint and changed-file formatting.
+- [x] Obtain independent spec and code review, fix actual findings, and verify again.
+
+## Chunk 2: Actual acceptance and delivery
+
+- [x] Build the final production source and record its exact identity.
+- [x] Capture complete panes and actual recordings for the hierarchy and dirty cancel/discard
+      in desktop light/dark and 320/360px Portuguese coarse input; inspect originals and video frames.
+- [x] Update the user-facing report with corrected evidence and acknowledge the previous miss.
+- [x] Prepare only accepted changes and evidence for the existing PR update.
+
+Remote checks are observed after the approved push; the PR and local acceptance
+report retain their final result without changing the tested runtime.
diff --git a/docs/superpowers/plans/2026-10-22-assistant-workbench-redesign.md b/docs/superpowers/plans/2026-10-22-assistant-workbench-redesign.md
new file mode 100644
index 000000000..269fe6a66
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-22-assistant-workbench-redesign.md
@@ -0,0 +1,85 @@
+# Assistant workbench redesign implementation plan
+
+> **For agentic workers:** Use subagent-driven-development for isolated Chat/Markdown and
+> Artifact implementation; root owns shell/composer integration. Independent spec and code/
+> visual review must follow. Preserve behavioral/security checks and inspect real media.
+
+**Goal:** Redesign Document's actual assistant into a coherent document-first conversation
+and artifact workbench, retaining its functional lifecycle and producing reviewable evidence.
+
+**Architecture:** A small presentation-layout owner extends the existing panel width and
+workspace owners. ChatView remains generic; artifacts retain their store/draft/refinement
+owners. Shared Markdown remains one safe renderer. No new request/storage engine.
+
+**Tech stack:** TypeScript, existing ranui builder/components/tokens, Vite, Vitest, Playwright.
+
+## Chunk 1: Independent contract and baseline
+
+- [x] Read the ranui plugin/owners and current host contracts; inspect actual editor captures.
+- [x] Present and record the workbench direction and task/safety boundaries in the paired spec.
+- [x] Independent review of spec/integration and address concrete findings before implementation.
+- [x] Add a real-browser failing test for explicit expansion, dual chat/artifact visibility,
+      preserved draft/mode on collapse and one guarded return. Use fixture transport only, never
+      fake product UI. Wait for a real stream before advancing it; use `Hello` for an ordinary-chat
+      fixture, because document-bound prompts exercise a separate native capture lifecycle.
+
+## Chunk 2: Parallel bounded owners
+
+### Chat and Markdown owner
+
+Files: `packages/chat-ui/src/{chat-view,styles,markdown-styles,markdown-presentation}.ts` as
+needed; meaningful co-located generic tests under `test/unit/`.
+
+- [x] Read relevant existing ChatView/Markdown tests and establish independent expectations.
+- [x] Add/regress observable behavior before functional changes, run the failing test, then
+      implement. A pure visual change is verified in real browser, not a mirrored CSS-string test.
+- [x] Redesign conversation measure, rhythm, user messages, inline phase/reasoning/answer
+      hierarchy and restrained actions; preserve virtualization, reader anchoring and selection.
+- [x] Redesign shared code/table presentation without weakening safe links/literal media,
+      parser bounds, clipboard integrity, native selection, scroll or lifecycle/disposal guards.
+- [x] Test delayed copy completion across stream changes and reduced-motion state where changed.
+
+### Artifact owner
+
+Files: `lib/agent-plugin/ui/{artifacts-view,artifact-workflow,artifact-presentation}.ts` as
+needed, `styles/assistant-artifacts.css`, relevant artifact unit tests.
+
+- [x] Test meaningful draft/version/navigation behavior before functional changes.
+- [x] Build one compact object toolbar, calm reader/editor canvas and coherent command/footer
+      region. Keep object identity clear without competing title stacks; never remove user body text.
+- [x] Preserve source data, explicit version saves, dirty cancel/discard, conflicts, refinement
+      acceptance, export and native document review. Expose structure for the shell's split layout.
+- [x] Run relevant artifact state/interaction tests; leave store/schema/inference untouched.
+
+### Root shell/composer owner
+
+Files: `lib/agent-plugin/ui/{panel,panel-workspace,panel-resize,speech-input}.ts`, a small
+`panel-layout.ts` if needed, `styles/assistant.css`, seven locale messages/types, shell tests.
+
+- [x] Implement explicit expand/collapse with existing localized expansion label and a matching
+      collapse label. Separate temporary expanded width from persisted dock preference.
+- [x] At 840px+ assistant width, show Chat and Artifacts as independent columns. Use selected
+      single surface below that width. Preserve scroll/draft/focus and correct current-state labels.
+- [x] Keep the artifact-owned guarded return; wide mode places it with the artifact surface,
+      compact mode uses the existing single shell return slot. Do not clone its operation.
+- [x] Group voice language and privacy in a reachable voice-options disclosure, keeping source/
+      microphone/Send discoverable and Stop independently reachable. Test real popup keyboard/focus,
+      language selection, denied permission, active dictation, narrow reflow and draft preservation.
+- [x] Remove only redundant first-use helper rows; preserve actual task actions and recovery.
+
+## Chunk 3: Integration, craft and delivery
+
+- [ ] Build shared workspaces once after bounded edits; avoid parallel dist/result mutations.
+- [ ] Run meaningful new browser tests against the built actual editor; retain existing source,
+      streaming, Markdown safety, reasoning, queue, dictation, focus and artifact regressions.
+- [ ] Adapt obsolete presentation assertions to the independently declared new design contract;
+      demonstrate relevant visible-text drift/overflow or async-feedback mutation rejection.
+- [ ] Capture before/after full editor and panes: dock/expanded artifact, streamed reasoning/
+      answer, draft/stop/error, table/code, edit/version/refinement and narrow layouts. Include
+      light/dark, English/Chinese/Portuguese, keyboard/touch and reduced motion where relevant.
+- [ ] Record continuous actual interactions; bind source/dependency/build/media/state hashes.
+      Inspect screenshots and video frames/playback, then independent visual and code review.
+- [ ] Run `pnpm run lint:ts`, `pnpm run format:check`, meaningful unit tests and affected
+      real-browser suites. Update the canonical application design contract and evidence summary.
+- [ ] Only after local visual/interaction review passes, commit/push to PR #290 and rewrite its
+      title/body for the final redesign. Inspect head-specific CI. No merge/package publication.
diff --git a/docs/superpowers/specs/2026-10-21-assistant-conversation-craft.md b/docs/superpowers/specs/2026-10-21-assistant-conversation-craft.md
new file mode 100644
index 000000000..17ed0b7eb
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-21-assistant-conversation-craft.md
@@ -0,0 +1,28 @@
+# Assistant conversation craft
+
+The user explicitly approved continuing the task-centered layout, details and purposeful-motion direction, including composer, streamed answers, provider reasoning and artifacts. They require actual screenshots and recordings before PR updates, permit incompatible presentation changes, and want component defects fixed upstream in ran.
+
+## Observed baseline and ownership
+
+Baseline244a9a8 has five persistent text destinations, top-level workspace h2s, a compact but administrative settings flow, a shared ChatView, explicit artifact provenance, real preparation/read/planning states and robust drafts/cancellation/review guards. Public provider reasoning is currently discarded. Installed ranui0.5 already supplies r-reasoning, disclosure-row, markdown and popover; reuse their contracts. Application layout belongs to document, reusable control defects to ran.
+
+## Chosen design
+
+1. **One compact header.** Remove the second five-tab row. Retain a home/Chat identity, Artifacts and Conversations as compact named/tooltip commands, then New and Close. Source management belongs beside composition; the selected-model/settings entry belongs below the composer. Primary navigation stays reachable across views. Chat is the starting view; missing configuration is an explicit preparation action, never an automatic switch into a settings form. Keep a clear return route on secondary surfaces.
+2. **Composition as one object.** The draft, source context, attachment/voice controls and Send/Stop share one stable composer. A quiet model entry follows it; status/help must not form a stack of duplicate setup paragraphs. Preserve IME, multiline drafting, selection, queue/stop and actual destination disclosures. Long/localized labels reflow without truncating the editable lane.
+3. **Answers as a reading surface.** User messages remain compact; assistant content has restrained typography, bounded code/table overflow and stable actions. Running, interrupted, error, review and completed states have distinct real feedback. Never simulate progress, replay a completed answer as fake tokens or let streaming drag a reader who scrolled away.
+4. **Public reasoning only.** Extend the provider stream with an optional sideband callback for explicitly returned reasoning/thought-summary text. Answer text and tool arguments remain separate, including complete JSON and tool-bearing fallback responses. Gate callbacks per inference as well as per user run, so a retained callback cannot emit after its inference settles while the tool loop continues. End each phase before the first answer/tool event or settlement; Stop, supersession, conversation changes and disposal also close the presentation. ChatView renders it with ranui r-reasoning, respecting reader open/close ownership; it never participates in copy/save/apply/model context. Cap the total at 64 KiB of UTF-8 per user run, truncate only at a code point boundary, show one localized truncation notice and ignore further reasoning until the next run. Successive inference phases share that run budget. It is presentation-only, not persisted in conversation history. Unsupported providers show their real activity state and no invented reasoning block. Do not enable extra thinking requests or alter model defaults/cost policy.
+5. **Artifacts as objects.** Give saved artifacts a readable preview and explicit edit state, compact title/version/mode controls, a coherent action bar and local continuation workflow. Reuse the chat package’s safe Markdown renderer for text preview so HTML and image tokens remain literal and preview cannot introduce passive remote-media requests. Installed r-markdown intentionally supports media and has no public disabling option; do not patch shadow DOM or duplicate parsers to force it into this host’s stricter source policy. Keep raw structured data behind an explicit disclosure; preserve schema validation, draft/version conflicts, native-document review, export and explicit saves. Deletion uses a nearby clear question and short confirmation/cancel actions, with focus restoration. Avoid duplicate title stacks and scattered controls.
+6. **Purposeful motion.** Use existing ran fast/base roles for layer changes, reasoning/disclosure expansion and local feedback. No palette/theme interpolation, text blur or decorative motion on every token. Motion reverses cleanly; reduced motion preserves states and focus. Animate a layer's content, not an ancestor of anchored controls.
+
+## Scope lock
+
+Allowed: document panel/workspace/task UI and relevant styles; packages/chat-ui; narrowly scoped provider/runtime/controller reasoning sideband; product labels in all shipped locales; tests, canonical local contract and actual evidence. Upstream ran only for a reproduced reusable-component defect, on its owning implementation/tests/docs. No vendor, credentials, publishing, default model, provider trust/routing, writing approval or storage-format changes. Existing PRs stay unchanged remotely until local visual and recording acceptance passes.
+
+## Alternatives considered
+
+Keeping five tabs and polishing their CSS leaves configuration/content/history with equal emphasis, so rejected. Hiding all routes behind a bespoke menu adds a new control and increases routine navigation cost, so rejected. Reuse compact primary header commands and contextual composer entries instead. Rebuilding a second reasoning/disclosure primitive is rejected because ranui already owns it.
+
+## Acceptance
+
+Real pane states in English and long Portuguese at432px desktop pane /320/360px windows, light/dark and fine/coarse input. Exercise chat drafts, mixed Markdown streaming, reasoning absent/present, manual reasoning collapse, stop/error, reader scroll, artifact preview/edit/version/cancel/apply-review/export and model/source entry. Check actual text/control geometry, physical targets, accessible names, keyboard/focus, owned scrolling and reduced motion. Screen recordings must show the implemented full flow, with scripted deterministic service events clearly identified as fixtures, not real-model quality evidence. Source-level unit/regression tests cannot substitute for this acceptance. Independent design and correctness review must both pass before updating PR290 (and a ran PR if required).
diff --git a/docs/superpowers/specs/2026-10-21-assistant-markdown-craft-design.md b/docs/superpowers/specs/2026-10-21-assistant-markdown-craft-design.md
new file mode 100644
index 000000000..96f0c5a70
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-21-assistant-markdown-craft-design.md
@@ -0,0 +1,59 @@
+# Assistant table and code-block craft
+
+The user rejected the current table/code presentation and requested industry references.
+This work continues the authorized whole-assistant polish; the single-return correction
+remains part of the same delivery and must retain its verified behavior.
+
+## Evidence and direction
+
+| Assumption                                                                                          | Evidence                                                                                                                                                           |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| The renderer drops fence language and table column alignment                                        | `packages/chat-ui/src/markdown.ts`, code/table branches                                                                                                            |
+| Artifact text preview already uses the same safe renderer                                           | `lib/agent-plugin/ui/artifact-presentation.ts`                                                                                                                     |
+| Chat and artifact table/code styles have separate owners                                            | `packages/chat-ui/src/styles.ts`, `styles/assistant-artifacts.css`                                                                                                 |
+| ChatGPT exposes language and Copy on code blocks                                                    | [official help](https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt)                                               |
+| A quiet table can use hierarchy and alignment without a heavy header slab                           | [Geist Table](https://vercel.com/geist/table), actual public-page screenshot inspected                                                                             |
+| Mature code blocks separate language/actions from syntax-highlighted content                        | [Geist Code Block](https://vercel.com/geist/code-block), actual public-page screenshot inspected; [AI Elements](https://elements.ai-sdk.dev/components/code-block) |
+| Ran's existing Shiki helper is private; its full Markdown component also enables embedded renderers | `work/ran/packages/ranui/components/markdown/{highlight,render,index}.ts`                                                                                          |
+
+The shared safe Markdown renderer remains the owner. Tables use quiet headers, intentional
+column padding and restrained row separators; honor only explicit left/center/right Markdown
+alignment and use tabular numerals. Wide tables scroll within an accessible, named region.
+Do not invent sorting or spreadsheet controls for static answer tables.
+
+Code blocks gain one compact language/Copy header, restrained frame, readable mono type and
+preserved whitespace. Copy operates on the exact code payload and reports real success/failure.
+Use token spans for highlighting, never model HTML. Unknown/oversized/unfinished code remains
+readable plain code. Theme changes recolor without re-highlighting or replaying text.
+No execution or preview control is added without an actual supported execution path.
+
+## Scope lock
+
+- May change: `packages/chat-ui/src/{markdown,streaming-markdown,styles,chat-view,types,index}.ts`,
+  small co-located Markdown presentation/highlighting/style helpers, `packages/chat-ui/package.json`,
+  `pnpm-lock.yaml`, artifact presentation/labels and surrounding CSS, applicable shared locale
+  messages, affected tests and concise design/usage docs.
+- Leave model defaults, transport, storage schema, inference, document mutation, vendor code,
+  immutable evaluation archives and the verified navigation logic untouched.
+- Preserve safe links, literal HTML/images, streaming's 8000-character parser bound, raw source
+  used for Copy/Save/Apply, source selection, reader attachment, Stop acknowledgement and disposal.
+- Highlighting uses an explicit matching `shiki@4.4.3` dependency and fine-grained lazy core,
+  JavaScript regex engine, bounded language imports and GitHub light/dark themes. This uses the
+  same engine/version already in ran without deep-importing private build chunks. Highlight at
+  most 8000 UTF-16 characters in a completed block. The fixed language/alias import map covers
+  JavaScript, TypeScript, JSX, TSX, Python, JSON, HTML, CSS, Bash, SQL, YAML and Markdown;
+  unknown fences remain plain code, with no language-driven import path. Adding an
+  upstream public API would require a new release/large downstream binary patch for this focused
+  correction; the direct declared dependency is the smaller supported integration.
+- Own copy/highlight async work and timer cleanup in a renderer presentation lifecycle shared
+  by Chat and Artifacts. Guard removed/replaced content and pending clipboard results. Preserve
+  active text selection and horizontal scroll. Keep syntax font metrics stable.
+
+## Acceptance
+
+Verify language and exact clipboard payload, actual success/failure feedback, repeated copy,
+live localization/disposal, explicit table alignment, literal adversarial HTML/code, unknown
+languages, oversized/incomplete/streamed blocks, dark/light color and local horizontal scroll.
+Exercise both real Chat and Artifact previews with short/wide tables, multiline/long-line code,
+English/Portuguese and 320/360px touch. Inspect full panes plus recorded copy/scroll behavior
+before updating the existing PR. Existing parser/security/navigation assertions are retained.
diff --git a/docs/superpowers/specs/2026-10-21-assistant-navigation-and-density-design.md b/docs/superpowers/specs/2026-10-21-assistant-navigation-and-density-design.md
new file mode 100644
index 000000000..a8272620a
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-21-assistant-navigation-and-density-design.md
@@ -0,0 +1,77 @@
+# Assistant navigation and command density correction
+
+## Goal and authority
+
+The owner rejected the rendered History & data button cloud and the artificial
+Back/title hierarchy in Artifacts. Correct those surfaces and analogous Models,
+Conversations and Sources views; inspect real screenshots before updating PR #289.
+The follow-up requests polished visual craft and purposeful motion.
+
+Use [ran DESIGN.md](https://github.com/chaxus/ran/blob/main/packages/ranui/docs/DESIGN.md)
+sections 2, 3, 8, 11 and 12. The owner's correction supersedes the previous
+application-specific 48/54px heading lane and gutter-extended history targets.
+
+Industry references: [Linear's UI refresh](https://linear.app/changelog/2026-03-12-ui-refresh)
+uses consistent navigation, headers and control hierarchy;
+[Notion's sidebar](https://www.notion.com/help/navigate-with-the-sidebar) distinguishes
+parallel top-level destinations from nested pages. These inform composition, not
+a copied palette, framework or visual identity.
+
+## Scope lock and verified assumptions
+
+| Evidence                                                                                             | Consequence                                                                         |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| User screenshots show large irregular history command surfaces and an indented Artifacts heading     | Review the entire pane, including resting state and density                         |
+| `panel-workspace.ts` owns chat/settings/history/sources/artifacts visibility and focus               | Keep navigation state with this owner                                               |
+| `panel.ts` mounts all workspace triggers in the header; title returns to a recent/draft conversation | Keep the existing title behavior and add an explicit current-chat navigation action |
+| `artifacts-view.ts` owns list/import/editor, dirty drafts, async cancellation and confirmation       | Remove only its list-level Back; retain nested Back and all guards                  |
+| `history-controls.ts` owns storage, downloads, busy guards and confirmation                          | Change its presentation, not persistence or operations                              |
+
+May edit assistant view composition, shared assistant CSS, seven locale labels,
+related unit/browser tests and application design/acceptance documentation.
+Do not change vendor files, packages' runtime/data contracts, dependency versions,
+model defaults, document writes, persistence formats or inference consent.
+
+## Chosen composition
+
+- Keep one quiet header with AI Assistant, New conversation and Close.
+- Place visible, persistent destinations beneath it: Chat, Artifacts,
+  Conversations, Sources and Models. Reuse current trigger nodes and the
+  workspace lifecycle; navigation selection is idempotent. A current-chat entry
+  preserves the displayed draft rather than selecting another conversation.
+  Narrow/translated navigation may scroll horizontally; no destination disappears.
+- All top-level h2 text, explanatory copy, search/field/list frames and history
+  command frames use the same 16px content inset. Top-level views have no Back.
+- Show runtime preparation/status only in Chat or the existing Models owner.
+  It must not insert an unrelated status band above Artifacts/Sources.
+- Use a 16px section heading in the auxiliary pane. Give title/description a
+  smaller gap than description/actions. Nested artifact Back is labeled and
+  precedes the title, allowing the title to return to the same content inset.
+- History commands form one equal-width, medium-density secondary column: 32px
+  minimum on fine input and 44px on coarse input, neutral resting control stroke,
+  no heavy gray fill or enclosing card. Checkbox and action icons share a 24px
+  lane; labels share 48px, measured from the pane's inside edge. Status text
+  follows its associated checkbox label. Use 8px inside action groups and 16px
+  before destructive commands. Preserve danger foreground and explicit confirmation.
+- Import/Attach open a workflow, so use ordinary secondary affordance. Save or
+  accept a concrete reviewed result remains a monochrome primary commitment.
+- Optional motion is a short opacity-only entry using ran's fast duration and
+  existing easing. No layout travel, blur, skeleton, delayed focus or new library.
+  Reduced-motion disables it; hover/focus feedback stays immediate.
+
+Alternatives rejected: keeping a Back row on each parallel view repeats navigation;
+a destination dropdown hides discoverability; a new app-wide shell or design system
+is unnecessary. Reuse native controls and the existing presentation owner.
+
+## Acceptance
+
+Capture full panes before/after, not just button crops: History expanded and
+confirmation; Artifacts empty/list/import/editor/return; Sources empty/populated;
+Models local/service/expanded; Chat and narrow navigation. Inspect light/dark,
+320/360px windows and the 432px desktop pane, English/Portuguese, fine/coarse
+input, keyboard focus, resizing and reduced motion. Verify current-chat drafts,
+artifact unsaved-change recovery, source actions, deletion cancellation/downloads
+and no automatic inference on navigation. Use independent browser coordinates
+and contrast checks alongside visual review; reverse-check text/frame drift.
+Record screenshots and findings. Only push/update the PR after the visual review
+and applicable lint/type/format/build and related regression checks pass.
diff --git a/docs/superpowers/specs/2026-10-21-assistant-single-return-design.md b/docs/superpowers/specs/2026-10-21-assistant-single-return-design.md
new file mode 100644
index 000000000..5d76c4193
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-21-assistant-single-return-design.md
@@ -0,0 +1,23 @@
+# Assistant single-return correction
+
+The previous visual acceptance missed a composition defect: the shell's Chat return and
+the artifact editor/import return were visible together. The local layout contract even
+allowed both. This follow-up corrects that contract under the user's existing authorization
+to simplify navigation and verify actual screenshots/recordings before updating the PR.
+
+- The shell owns one visible return location. An artifact detail/import returns to the
+  artifact list; the list returns to the displayed Chat. Other secondary root views return
+  to Chat. No second content-area Back row remains in the composed application.
+- Retain artifact-owned dirty confirmation, cancellation, busy state, localization and
+  draft lifetime. A central return must execute the existing operation rather than bypass it.
+- Escape follows the same visible hierarchy when it is not consumed by an active control.
+- Remove redundant nested collection chrome where the shell already establishes its context.
+  Preserve actual document contents and explicit editing/version commands.
+- Measure visible glyph/text ranges and icon viewports separately from hit frames. Quiet
+  artifact command groups must start on the content spine, including wrapped rows. Do not
+  move bordered field text out of its intentional control inset.
+- Validate list/detail/import, dirty cancel/discard, version changes, back-to-chat draft and
+  selection restoration, keyboard focus, busy state, English/Portuguese, light/dark,
+  desktop and 320/360px coarse input. Capture complete panes and an actual recorded path.
+- Update the existing application PR only after direct image/video review. Do not relax
+  screenshot tolerances or behavior assertions. Update ran only if the defect is upstream.
diff --git a/docs/superpowers/specs/2026-10-22-assistant-workbench-redesign.md b/docs/superpowers/specs/2026-10-22-assistant-workbench-redesign.md
new file mode 100644
index 000000000..910136a3b
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-22-assistant-workbench-redesign.md
@@ -0,0 +1,124 @@
+# Document assistant workbench redesign
+
+## User-authorized direction
+
+The user requested a complete redesign of the actual Document assistant, continuing the
+approved ran design/plugin direction and permitting incompatible presentation changes.
+They require real screenshots and continuous interaction recordings before updating PR #290.
+Use the existing request, storage and review lifecycles. This is one product redesign,
+not a new assistant backend or a separate demonstration site.
+
+## Evidence and decisions
+
+- Code facts: `panel.ts` composes mutually exclusive workspace surfaces; `panel-workspace.ts`
+  owns navigation, `panel-resize.ts` owns width, ChatView owns answers/composition, and
+  `artifacts-view.ts` owns version/draft guards. The baseline is `27ddb4c`.
+- Runtime facts: actual editor captures show a 432px assistant, a permanently visible voice
+  language/privacy strip, and an artifact replacing the conversation. Its object title,
+  mode/version row and broad action row compete with the document body.
+- References: [Claude artifact workflow](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)
+  supports keeping the result beside the conversation; [ChatGPT content blocks](https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt)
+  separates reusable writing/code and its applicable actions. Adapt these task relationships,
+  not their brand palette or unsupported execution features.
+- Owners: ranui plugin routes to DESIGN, INTERACTION and ACCEPTANCE. The installed ranui
+  0.5.0 API/source remains authoritative for component use; the new guidance is read from
+  the matching ran checkout because it is not yet in the installed npm package.
+
+## Chosen composition
+
+Three approaches were considered: another visual refresh of the single pane; replacing the
+editor with an assistant application; and a document-first expandable workbench. Adopt the
+workbench: it materially improves the task without discarding the editor or inference owners.
+
+1. **Shell.** One 48px fine-input / 52px coarse-input header, content-sized Chat identity
+   and recognizable Artifacts/Conversations/New/Expand/Close commands. Default desktop assistant width is
+   480px, with existing pointer/keyboard resize and a 320px minimum. Explicit expansion
+   uses at most 1040px while retaining at least 360px for the Office document. Hide Expand
+   when narrow input cannot benefit; four remaining icon commands and the content-sized title
+   must fit 320px touch. Manual pointer/keyboard resizing exits expansion and deliberately
+   updates the dock preference. Window resize only clamps presentation. Do not
+   overwrite the user's dock-width preference when entering/leaving expanded mode. Shared content
+   rails are 24px on normal desktop surfaces and 16px on narrow 320px/360px layouts.
+2. **Two working surfaces.** When Artifacts is selected at an assistant width of at least
+   840px, Chat is left and the existing artifact list/detail is right, with independent scrolling. Columns have
+   320px/480px minima, a single 1px divider and no decorative gap; distribute extra space 2:3.
+   Artifacts remains the selected route while Chat is a visible companion. Selecting Chat
+   explicitly returns to the centered reading view. Width-only transitions never call route-leave
+   cancellation or artifact refresh; preserve the mounted owner, selected artifact and version.
+   At smaller widths show the selected surface and one immediate-parent return. Expanded
+   desktop Chat uses a centered column capped at 680px, with prose capped at 68ch. Resizing back
+   preserves drafts, selection, reading position, artifact mode and dirty-state guards. If collapse
+   hides focused Chat, move focus to a visible destination while retaining the saved selection.
+   Relocate the existing artifact-owned guarded Back to its local artifact region in split mode
+   and the single shell return slot in compact mode; never clone it or duplicate returns.
+   Sources, settings and history retain their existing routes.
+3. **Conversation.** An intentional reading measure, 16px body copy on ordinary desktop
+   panes, coherent heading/list/table rhythm, compact user messages, quiet answer actions,
+   and a purposeful waiting/reasoning presentation. Only provider-exposed reasoning is
+   shown. Keep it separate from copied/saved answers; reader expansion and scroll intent
+   remain authoritative. Avoid replaying text or animating every streamed token.
+4. **Composer.** One framed drafting object, stable Send and independent Stop/queue behavior.
+   Sources and microphone remain discoverable. Put voice language and privacy guidance in
+   the existing privacy disclosure, extending it into voice options, with a meaningful accessible
+   name and reachable language control without closing its parent. Live status and Cancel remain outside
+   that disclosure. Preserve its recording, permission, selection, IME and cancellation
+   lifecycle. Remove redundant onboarding helper rows, not useful labels or recovery.
+5. **Artifact canvas.** A compact object/title/version/mode toolbar, one readable editable
+   document canvas and a coherent command/footer region. Keep user-authored body headings,
+   raw content and explicit Save version. Preserve version conflicts, dirty confirmations,
+   refinement proposal acceptance, export and Review in document. Deletion remains confirmed.
+6. **Tables and code.** Use the shared safe Markdown presentation in chat and artifacts.
+   Tables get deliberate column padding, quiet headers, numeric alignment and contained
+   horizontal scrolling. Code has a compact language/copy toolbar, readable mono metrics,
+   stable syntax colors and a distinct reading surface. Preserve tabs, blank lines, trailing
+   newline, native selection and scroll across streaming. Bind delayed copy feedback to its
+   source snapshot; no invented Run/Preview capability or passive remote media.
+7. **Details and motion.** Token-derived neutral surfaces, restrained functional borders,
+   visible focus, coarse targets at least 44px. Use interruptible fast transitions for
+   expansion/disclosure/press feedback; no theme interpolation, shimmer or decorative
+   background animation. Reduced motion preserves every state and action.
+
+## Scope lock
+
+May change: assistant presentation/navigation/resize/voice options in `lib/agent-plugin/ui/`,
+`packages/chat-ui/src/`, `styles/assistant*.css`, applicable seven-locale messages/types,
+meaningful tests, canonical application design contract and concise evidence docs. Keep shared
+owners small; do not grow `panel.ts` into a second state engine. Upstream ran is allowed only
+for a reproduced reusable component defect, with its own focused proof and PR update.
+
+Leave provider defaults, inference contracts, request/session identity, queue lease/Stop
+acknowledgement, explicit consent, persistence schema, safe renderer policy, native Office
+review/Apply/Undo guards, vendor assets and archived evaluations unchanged. No automatic model
+calls, downloads, document writes, account features, package publication or merge.
+
+## Acceptance and independent proof
+
+- Actual editor and assistant, not a fake host; deterministic provider events are disclosed
+  as transport fixtures, never real-model quality evidence. Retain baseline captures.
+- Desktop dock, expanded chat/artifact split, narrow 320/360px touch; English, Chinese and
+  long Portuguese; light/dark, keyboard/focus and reduced motion. Test resize while reading
+  and editing, route round trips, dirty cancel/discard and no double return.
+- Real clipboard equality before/after stream, delayed success/rejection across updates,
+  native text selection, long code/table scrolling and no document-wide overflow.
+- Real response/reasoning/start/stop/error UI interactions driven by disclosed fixtures, next
+  draft and queue behavior; no fabricated reasoning, persistence or completion. External provider
+  access is optional. Version/refinement/export/review remain explicit and distinguish their outcomes.
+- Independent geometry expectations precede edits. Show seeded drift/overflow or stale
+  feedback is rejected, then restoration passes. Preserve existing behavioral/security
+  tests; revise obsolete presentation expectations only against this declared new contract.
+- Bind media to runtime sources/dependencies, build, state, viewport/theme/locale and hashes.
+  Agent visual/code review, automated results and human decisions remain distinct. Real
+  screenshots and recordings must be inspected before authorized PR update; no human
+  acceptance is inferred. Run relevant build/type/lint/unit/browser gates and inspect CI
+  on the new pushed head.
+- Walk through tasks informed by _Don't Make Me Think_: recognize conversation/artifact/version,
+  find a destination, resume a draft, choose voice language, save a version, accept refinement,
+  open document review and recover from cancellation/error. Check clear context, differentiated
+  action outcomes and guidance beside the relevant decision. Report the top three observed task
+  problems with evidence, impact and corrections, or fewer if fewer were observed. Agent/automation
+  walkthroughs are labeled separately from human usability tests and do not establish human
+  acceptance. Do not use arbitrary click budgets or counts of aesthetic elements.
+
+The [canonical application contract](../../design-system.md#assistant-application-layout-contract)
+owns these geometry and task-acceptance rules. Update obsolete presentation assertions against
+that declared contract; preserve the functional, security, source and consent contracts.
diff --git a/lib/agent-plugin/document-read-answer.ts b/lib/agent-plugin/document-read-answer.ts
index 3e5b95236..adf736f82 100644
--- a/lib/agent-plugin/document-read-answer.ts
+++ b/lib/agent-plugin/document-read-answer.ts
@@ -3,6 +3,12 @@ import { REFERENCE_CITATION_RULE } from '@ranuts/agent-core/llm/prompt';
 import type { LLMMessage, LLMProvider } from '@ranuts/agent-core/llm/types';
 import type { DocumentContext } from './document-context';
 
+export interface ReadAnswerOptions {
+  onReasoningDelta?: (text: string) => void;
+  onReasoningEnd?: () => void;
+  assertCurrent?: () => void;
+}
+
 /** Standard tool-result continuation, with no execution capabilities in the answer step. */
 export async function generateReadAnswer(
   provider: LLMProvider,
@@ -12,6 +18,7 @@ export async function generateReadAnswer(
   signal: AbortSignal,
   onDelta?: (text: string) => void,
   referenceData?: string,
+  options: ReadAnswerOptions = {},
 ): Promise<string> {
   signal.throwIfAborted();
   const messages: LLMMessage[] = [
@@ -33,18 +40,48 @@ export async function generateReadAnswer(
     },
     ...exchange,
   ];
-  const response =
-    onDelta && provider.chatStream
-      ? await provider.chatStream(
-          messages,
-          [],
-          (delta) => {
-            if (!signal.aborted) onDelta(delta);
-          },
-          signal,
-        )
-      : await provider.chat(messages, [], signal);
+  let active = true;
+  let reasoningObserved = false;
+  let reasoningClosed = false;
+  const live = () => {
+    if (!active || signal.aborted) return false;
+    options.assertCurrent?.();
+    return !signal.aborted;
+  };
+  const endReasoning = () => {
+    if (reasoningClosed) return;
+    reasoningClosed = true;
+    if (reasoningObserved && live()) options.onReasoningEnd?.();
+  };
+  let response;
+  try {
+    response =
+      (onDelta || options.onReasoningDelta) && provider.chatStream
+        ? await provider.chatStream(
+            messages,
+            [],
+            (delta) => {
+              if (!delta || !live()) return;
+              endReasoning();
+              if (live()) onDelta?.(delta);
+            },
+            signal,
+            (text) => {
+              if (!text || reasoningClosed || !live()) return;
+              reasoningObserved = true;
+              options.onReasoningDelta?.(text);
+            },
+          )
+        : await provider.chat(messages, [], signal);
+  } finally {
+    try {
+      endReasoning();
+    } finally {
+      active = false;
+    }
+  }
   signal.throwIfAborted();
+  options.assertCurrent?.();
   if (response.toolCalls.length || incompleteResponseReason(response) || !response.text.trim())
     throw new Error('Incomplete document answer');
   return response.text.trim();
diff --git a/lib/agent-plugin/ui/artifact-presentation.ts b/lib/agent-plugin/ui/artifact-presentation.ts
index 90582d366..072e2d51d 100644
--- a/lib/agent-plugin/ui/artifact-presentation.ts
+++ b/lib/agent-plugin/ui/artifact-presentation.ts
@@ -1,6 +1,7 @@
+import { MarkdownPresentation, renderChatMarkdown, type MarkdownLabels } from '@ranuts/chat-ui';
 import { validatePayload, payloadText, type ArtifactPayload } from '../artifacts/payload';
 import { artifactFilename, exportPayload, type ArtifactExportFormat } from '../artifacts/export';
-export interface ArtifactPresentationLabels {
+export interface ArtifactPresentationLabels extends MarkdownLabels {
   titleField?: string;
   textField?: string;
   export: string;
@@ -11,7 +12,7 @@ export interface ArtifactPresentationLabels {
   previous: string;
   structuredHint: string;
 }
-/** Bounded editable data page. A hidden JSON owner keeps draft capture and AI review lossless. */
+/** Read-only reader and explicit field editor, backed by the canonical source. */
 export function createArtifactPresentation(
   text: HTMLTextAreaElement,
   labels: ArtifactPresentationLabels,
@@ -21,12 +22,16 @@ export function createArtifactPresentation(
   const el = document.createElement('div');
   el.className = 'agent-artifact-presentation';
   const preview = document.createElement('div');
-  preview.className = 'agent-artifact-data-preview';
+  preview.className = 'agent-artifact-data-preview agent-artifact-reader cui-markdown';
+  const markdown = new MarkdownPresentation(preview, labels);
+  preview.dataset.artifactReader = 'true';
+  preview.tabIndex = -1;
   const abort = new AbortController();
   const kind = initial?.kind ?? 'text';
   let page = 0;
   let committing = false;
   let disabled = false;
+  let editing = false;
   function payload(): ArtifactPayload {
     const data =
       kind === 'text' ? { kind: 'text' as const, text: text.value } : validatePayload(JSON.parse(text.value));
@@ -34,8 +39,16 @@ export function createArtifactPresentation(
     return data;
   }
   function render() {
+    if (kind === 'text') {
+      preview.hidden = editing;
+      // Editing changes only the canonical source. Rebuild the reader once
+      // when it becomes visible, avoiding Markdown work on each keystroke.
+      if (!editing) renderChatMarkdown(preview, text.value, markdown);
+      return;
+    }
+    markdown.releaseTree(preview);
     preview.replaceChildren();
-    if (kind === 'text') return;
+    preview.hidden = false;
     const data = payload();
     if (data.kind === 'table') {
       page = Math.min(page, Math.max(0, Math.ceil(data.rows.length / 10) - 1));
@@ -43,8 +56,9 @@ export function createArtifactPresentation(
       const head = document.createElement('tr');
       for (const [columnIndex, column] of data.columns.entries()) {
         const cell = document.createElement('th');
+        cell.scope = 'col';
         cell.append(
-          field(column, `${labels.preview} · ${columnIndex + 1}`, (value) => {
+          valueField(column, `${labels.preview} · ${columnIndex + 1}`, (value) => {
             data.columns[columnIndex] = value;
             commit(data);
           }),
@@ -57,7 +71,7 @@ export function createArtifactPresentation(
         for (const [columnIndex, value] of row.entries()) {
           const td = document.createElement('td');
           td.append(
-            field(value, `${data.columns[columnIndex]} · ${page * 10 + rowIndex + 1}`, (value) => {
+            valueField(value, `${data.columns[columnIndex]} · ${page * 10 + rowIndex + 1}`, (value) => {
               data.rows[page * 10 + rowIndex][columnIndex] = value;
               commit(data);
             }),
@@ -66,16 +80,21 @@ export function createArtifactPresentation(
         }
         table.append(tr);
       }
-      preview.append(table);
+      const wrapper = document.createElement('div');
+      wrapper.className = 'cui-table';
+      wrapper.tabIndex = 0;
+      markdown.table(wrapper);
+      wrapper.append(table);
+      preview.append(wrapper);
       pages(Math.max(1, Math.ceil(data.rows.length / 10)));
     } else if (data.kind === 'slides') {
       page = Math.min(page, data.slides.length - 1);
       preview.append(
-        field(data.slides[page].title, `${labels.titleField ?? labels.preview} · ${page + 1}`, (value) => {
+        valueField(data.slides[page].title, `${labels.titleField ?? labels.preview} · ${page + 1}`, (value) => {
           data.slides[page].title = value;
           commit(data);
         }),
-        field(data.slides[page].body, `${labels.textField ?? labels.preview} · ${page + 1}`, (value) => {
+        valueField(data.slides[page].body, `${labels.textField ?? labels.preview} · ${page + 1}`, (value) => {
           data.slides[page].body = value;
           commit(data);
         }),
@@ -92,6 +111,13 @@ export function createArtifactPresentation(
       committing = false;
     }
   }
+  function valueField(value: string, label: string, change: (value: string) => void) {
+    if (editing) return field(value, label, change);
+    const content = document.createElement('div');
+    content.className = 'agent-artifact-field-value';
+    content.textContent = value;
+    return content;
+  }
   function field(value: string, label: string, change: (value: string) => void) {
     const input = document.createElement('textarea');
     input.className = 'agent-artifact-cell';
@@ -104,6 +130,8 @@ export function createArtifactPresentation(
     return input;
   }
   function pages(count: number) {
+    const navigation = document.createElement('div');
+    navigation.className = 'agent-artifact-pagination';
     for (const [label, step] of [
       [labels.previous, -1],
       [labels.next, 1],
@@ -117,12 +145,14 @@ export function createArtifactPresentation(
         page += step;
         render();
       });
-      preview.append(button);
+      navigation.append(button);
     }
-    preview.append(document.createTextNode(` ${page + 1} / ${count}`));
+    navigation.append(document.createTextNode(` ${page + 1} / ${count}`));
+    preview.append(navigation);
   }
   const disclosure = document.createElement('details'),
     summary = document.createElement('summary');
+  disclosure.className = 'agent-artifact-export';
   summary.textContent = labels.export;
   const hint = document.createElement('p');
   hint.textContent = labels.structuredHint;
@@ -179,19 +209,33 @@ export function createArtifactPresentation(
     { signal: abort.signal },
   );
   el.append(preview, disclosure);
-  render();
+  safeRender();
   return {
+    exportEl: disclosure,
+    setEditing(value: boolean) {
+      editing = value;
+      safeRender();
+    },
     setDisabled(value: boolean) {
       disabled = value;
-      for (const input of el.querySelectorAll<HTMLButtonElement | HTMLTextAreaElement>('button,textarea'))
+      for (const input of [
+        ...el.querySelectorAll<HTMLButtonElement | HTMLTextAreaElement>('button,textarea'),
+        ...disclosure.querySelectorAll<HTMLButtonElement>('button'),
+      ])
         input.disabled = value || input.dataset.unavailable === 'true';
+      markdown.setDisabled(value);
+    },
+    dispose() {
+      abort.abort();
+      markdown.dispose();
+      disclosure.remove();
     },
-    dispose: () => abort.abort(),
     setLabels(next: ArtifactPresentationLabels) {
       labels = next;
+      markdown.setLabels(next);
       summary.textContent = labels.export;
       hint.textContent = labels.structuredHint;
-      safeRender();
+      if (kind !== 'text') safeRender();
     },
     refresh: safeRender,
     el,
diff --git a/lib/agent-plugin/ui/artifact-workflow.ts b/lib/agent-plugin/ui/artifact-workflow.ts
index 0c82ff034..15bd2e0c9 100644
--- a/lib/agent-plugin/ui/artifact-workflow.ts
+++ b/lib/agent-plugin/ui/artifact-workflow.ts
@@ -21,6 +21,8 @@ export interface ArtifactWorkflowLabels {
   selected?: string;
   entire?: string;
   recovered?: string;
+  before?: string;
+  after?: string;
 }
 /** A request snapshot. The host queues this before resolving a prepared provider. */
 export interface ArtifactRevisionRequest {
@@ -171,7 +173,7 @@ export function createArtifactWorkflow(options: {
   const preview = document.createElement('div');
   preview.className = 'agent-artifact-revision';
   preview.hidden = true;
-  const diff = document.createElement('p');
+  const diff = document.createElement('div');
   diff.className = 'agent-artifact-diff';
   const accept = makeButton('accept', () => {
     void (async () => {
@@ -202,19 +204,44 @@ export function createArtifactWorkflow(options: {
   });
   showFull.hidden = true;
   preview.append(diff, partial, showFull, accept, reject);
+  function comparisonLabel(side: 'before' | 'after') {
+    return labels[side] ?? (side === 'before' ? 'Original' : 'Proposed');
+  }
   function renderDiff(before: string, after: string, full = false) {
-    const change = textDifference(before, after);
     const clipped = !full && before.length + after.length > 8000;
-    const removed = document.createElement('del');
-    removed.textContent = clipped ? change.removed.slice(0, 2400) : change.removed;
-    const added = document.createElement('ins');
-    added.textContent = clipped ? change.added.slice(0, 2400) : change.added;
-    diff.replaceChildren(
-      clipped ? change.prefix.slice(-1200) : change.prefix,
-      removed,
-      added,
-      clipped ? change.suffix.slice(0, 1200) : change.suffix,
-    );
+    if (before.includes('\n') || after.includes('\n')) {
+      diff.dataset.layout = 'blocks';
+      const blocks = (['before', 'after'] as const).map((side) => {
+        const block = document.createElement('section');
+        block.className = 'agent-artifact-diff-block';
+        block.dataset.artifactDiffSide = side;
+        const caption = document.createElement('h4');
+        caption.className = 'agent-artifact-diff-label';
+        caption.dataset.artifactDiffLabel = side;
+        caption.textContent = comparisonLabel(side);
+        const content = document.createElement('div');
+        content.className = 'agent-artifact-diff-text';
+        content.tabIndex = 0;
+        const value = side === 'before' ? before : after;
+        content.textContent = clipped ? value.slice(0, 3600) : value;
+        block.append(caption, content);
+        return block;
+      });
+      diff.replaceChildren(...blocks);
+    } else {
+      diff.dataset.layout = 'inline';
+      const change = textDifference(before, after);
+      const removed = document.createElement('del');
+      removed.textContent = clipped ? change.removed.slice(0, 2400) : change.removed;
+      const added = document.createElement('ins');
+      added.textContent = clipped ? change.added.slice(0, 2400) : change.added;
+      diff.replaceChildren(
+        clipped ? change.prefix.slice(-1200) : change.prefix,
+        removed,
+        added,
+        clipped ? change.suffix.slice(0, 1200) : change.suffix,
+      );
+    }
     partial.textContent = labels.partial ?? '';
     partial.hidden = !clipped;
     showFull.hidden = !clipped;
@@ -293,6 +320,7 @@ export function createArtifactWorkflow(options: {
       },
       delta(text) {
         if (current()) {
+          diff.dataset.layout = 'inline';
           diff.textContent = text.slice(0, 8000);
           partial.textContent = labels.partial ?? '';
           partial.hidden = text.length <= 8000;
@@ -355,7 +383,10 @@ export function createArtifactWorkflow(options: {
     note.textContent = message;
     cancel?.();
   }
-  el.append(refine, form, note, preview);
+  const command = document.createElement('div');
+  command.className = 'agent-artifact-command-group';
+  command.append(refine);
+  el.append(command, form, note, preview);
   return {
     el,
     invalidate,
@@ -375,6 +406,9 @@ export function createArtifactWorkflow(options: {
         button.textContent = labels[button.dataset.action as keyof ArtifactWorkflowLabels] ?? '';
       input.placeholder = labels.instruction;
       input.setAttribute('aria-label', labels.instruction);
+      for (const caption of diff.querySelectorAll<HTMLElement>('[data-artifact-diff-label]'))
+        caption.textContent = comparisonLabel(caption.dataset.artifactDiffLabel as 'before' | 'after');
+      partial.textContent = labels.partial ?? '';
       refreshScope();
     },
     dispose() {
diff --git a/lib/agent-plugin/ui/artifacts-view.ts b/lib/agent-plugin/ui/artifacts-view.ts
index 7a495906a..aa907376c 100644
--- a/lib/agent-plugin/ui/artifacts-view.ts
+++ b/lib/agent-plugin/ui/artifacts-view.ts
@@ -1,3 +1,4 @@
+import '../../../styles/assistant-artifacts.css';
 import { createViewHeader, labelViewBack } from './view-header';
 import { createArtifactPresentation, type ArtifactPresentationLabels } from './artifact-presentation';
 import { validatePayload, payloadText } from '../artifacts/payload';
@@ -12,6 +13,10 @@ import type { MessageSaveOutcome } from '@ranuts/chat-ui';
 import { ButtonBuilder, Div, View } from 'ranui/builder';
 import { ArtifactError, type Artifact, type ArtifactProvenance, type ArtifactStore } from '../artifacts/store';
 export interface ArtifactsLabels extends ArtifactPresentationLabels {
+  edit?: string;
+  cancelEditing?: string;
+  sourceData?: string;
+  unsaved?: string;
   title: string;
   empty: string;
   back: string;
@@ -42,6 +47,8 @@ export function createArtifactsView(options: {
   labels: ArtifactsLabels;
   onApply(text: string): Promise<unknown> | unknown;
   onClose?(): void;
+  /** Compose the existing guarded Back control into the shell's single return slot. */
+  onBackChange?(back?: HTMLButtonElement): void;
   conversation?(): string;
   refinement?: {
     labels: ArtifactWorkflowLabels;
@@ -49,12 +56,14 @@ export function createArtifactsView(options: {
     stop(): void;
   };
 }) {
-  const el = View('section').class('agent-artifacts').build();
+  const el = View('section').class('agent-artifacts').attr('aria-label', options.labels.title).build();
   const heading = View('h2').build();
   heading.tabIndex = -1;
   const header = createViewHeader(heading);
   let backDestination: 'conversation' | 'list' = 'conversation';
-  const body = Div().build();
+  let backButton: HTMLButtonElement | undefined;
+  // Layout changes retain this scroll owner and the mounted draft beneath it.
+  const body = Div().class('agent-artifacts-body').build();
   const status = View('p').class('agent-artifact-status').attr('role', 'status').build();
   el.append(header, body, status);
   let labels = options.labels;
@@ -63,6 +72,7 @@ export function createArtifactsView(options: {
   let dirty = false;
   let draftRevision = 0;
   let workflow: ReturnType<typeof createArtifactWorkflow> | undefined;
+  let setEditorMode: ((editing: boolean, focus?: boolean, invalidate?: boolean) => void) | undefined;
   let captureDraft: (() => ArtifactDraftBinding) | undefined;
   const invalidateDraft = () => {
     ++draftRevision;
@@ -74,11 +84,22 @@ export function createArtifactsView(options: {
   const pendingSaves = new Set<(outcome: MessageSaveOutcome) => void>();
   let cancelConfirmation: (() => void) | undefined;
   const buttons = new Set<HTMLButtonElement>();
+  function label(key: keyof ArtifactsLabels): string {
+    return (
+      labels[key] ??
+      (
+        {
+          edit: 'Edit',
+          cancelEditing: 'Cancel editing',
+          sourceData: 'Source data',
+          unsaved: 'Unsaved changes',
+        } as Partial<Record<keyof ArtifactsLabels, string>>
+      )[key] ??
+      ''
+    );
+  }
   function button(key: keyof ArtifactsLabels, run: () => void): HTMLButtonElement {
-    const b = ButtonBuilder()
-      .attr('type', 'button')
-      .text(labels[key] ?? '')
-      .build();
+    const b = ButtonBuilder().attr('type', 'button').text(label(key)).build();
     b.dataset.action = key;
     b.addEventListener('click', () => {
       if (key !== 'discardChanges' && key !== 'cancel' && cancelConfirmation) {
@@ -92,12 +113,21 @@ export function createArtifactsView(options: {
     return b;
   }
   function setBack(back: HTMLButtonElement, destination: 'conversation' | 'list'): void {
+    backButton = back;
     backDestination = destination;
     labelViewBack(
       back,
       (destination === 'conversation' ? labels.backToConversation : labels.backToList) ?? labels.back,
     );
-    header.prepend(back);
+    if (options.onBackChange) {
+      header.hidden = true;
+      options.onBackChange(back);
+    } else header.prepend(back);
+  }
+  function requestBack(): boolean {
+    if (!backButton) return false;
+    if (!backButton.disabled && !status.querySelector('[data-action=discardChanges]')) backButton.click();
+    return true;
   }
   function draftContent(text: string) {
     const version = current?.versions.find(
@@ -141,7 +171,7 @@ export function createArtifactsView(options: {
             });
             editor(a);
             status.textContent = labels.saved;
-            body.querySelector<HTMLTextAreaElement>('textarea[data-artifact-source]')?.focus();
+            body.querySelector<HTMLElement>('[data-artifact-reader]')?.focus();
           });
         }),
       );
@@ -179,9 +209,13 @@ export function createArtifactsView(options: {
     workflow?.dispose();
     workflow = undefined;
     captureDraft = undefined;
+    setEditorMode = undefined;
     cancelConfirmation?.();
     cancelConfirmation = undefined;
     buttons.clear();
+    backButton = undefined;
+    options.onBackChange?.();
+    header.hidden = false;
     header.replaceChildren(heading);
     body.replaceChildren();
     status.textContent = '';
@@ -194,6 +228,7 @@ export function createArtifactsView(options: {
       cancelConfirmation = undefined;
       return next();
     }
+    const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
     status.replaceChildren(
       document.createTextNode(labels.discardChanges + ' '),
       button('discardChanges', () => {
@@ -206,8 +241,11 @@ export function createArtifactsView(options: {
         cancelConfirmation?.();
         cancelConfirmation = undefined;
         status.textContent = '';
+        if (trigger?.isConnected) trigger.focus();
+        else backButton?.focus();
       }),
     );
+    status.querySelector<HTMLButtonElement>('[data-action=cancel]')?.focus();
   }
   function editor(a: Artifact): void {
     if (disposed) return;
@@ -226,6 +264,7 @@ export function createArtifactsView(options: {
       .attr('aria-label', labels.titleField)
       .build() as HTMLInputElement;
     title.value = a.title;
+    title.className = 'agent-artifact-title';
     const select = View('select').attr('aria-label', labels.version).build() as HTMLSelectElement;
     for (const v of a.versions) {
       const option = document.createElement('option');
@@ -241,18 +280,29 @@ export function createArtifactsView(options: {
       .build() as HTMLTextAreaElement;
     text.dataset.artifactSource = 'true';
     text.value = a.versions.at(-1)!.text;
-    const presentationHost = document.createElement('div');
+    const presentationHost = Div().class('agent-artifact-presentation-host').build();
     const source = document.createElement('details');
     const sourceSummary = document.createElement('summary');
-    sourceSummary.textContent = labels.textField + ' · JSON';
+    sourceSummary.textContent = label('sourceData') + ' · JSON';
     sourceSummary.dataset.artifactSourceSummary = 'true';
+    source.className = 'agent-artifact-source';
     source.append(sourceSummary, text);
     source.hidden = !(a.versions.at(-1)!.payload && a.versions.at(-1)!.payload!.kind !== 'text');
     if (source.hidden) source.removeChild(text);
     let presentation = createArtifactPresentation(text, labels, a.versions.at(-1)!.payload, () => title.value);
     activePresentation = presentation;
     presentationHost.append(presentation.el);
+    let editing = false;
+    const dirtyNote = document.createElement('span');
+    dirtyNote.className = 'agent-artifact-unsaved';
+    dirtyNote.textContent = label('unsaved');
+    dirtyNote.hidden = true;
+    const clearFeedback = () => {
+      if (!status.querySelector('[data-action=discardChanges]')) status.textContent = '';
+    };
     const changed = () => {
+      clearFeedback();
+      dirtyNote.hidden = false;
       invalidateDraft();
       dirty = true;
       const save = body.querySelector<HTMLButtonElement>('[data-action="saveVersion"]');
@@ -263,6 +313,7 @@ export function createArtifactsView(options: {
     select.addEventListener('change', () => {
       const value = select.value;
       const load = () => {
+        clearFeedback();
         invalidateDraft();
         selectedVersion = value;
         title.value = a.title;
@@ -276,10 +327,11 @@ export function createArtifactsView(options: {
         if (source.hidden) {
           source.open = false;
           if (text.parentElement === source) source.removeChild(text);
-          form.insertBefore(text, presentationHost);
+          content.insertBefore(text, presentationHost);
         } else source.append(text);
-        if (presentation.kind !== 'text') form.insertBefore(actions, presentationHost);
-        else form.insertBefore(actions, workflow?.el ?? null);
+        actions.insertBefore(presentation.exportEl, deleteButton);
+        setMode(false, false);
+        dirtyNote.hidden = value === String(a.versions.at(-1)!.version);
         const apply = body.querySelector<HTMLButtonElement>('[data-action=apply]');
         if (apply) apply.hidden = loaded.payload?.kind !== undefined && loaded.payload.kind !== 'text';
         dirty = value !== String(a.versions.at(-1)!.version);
@@ -307,7 +359,7 @@ export function createArtifactsView(options: {
           });
           editor(updated);
           status.textContent = labels.saved;
-          body.querySelector<HTMLTextAreaElement>('textarea[data-artifact-source]')?.focus();
+          body.querySelector<HTMLElement>('[data-artifact-reader]')?.focus();
         });
       }),
       button('apply', () => {
@@ -316,26 +368,85 @@ export function createArtifactsView(options: {
           await options.onApply(text.value);
         });
       }),
-      button('delete', () => {
-        status.replaceChildren(
-          button('confirmDelete', () => {
-            void perform(async () => {
-              await options.store.delete(a.id);
-              dirty = false;
-              await refresh();
-            });
-          }),
-          button('cancel', () => {
-            status.textContent = '';
-          }),
-        );
+      presentation.exportEl,
+    );
+    const deletePrompt = document.createElement('div');
+    deletePrompt.className = 'agent-artifact-delete-prompt';
+    deletePrompt.hidden = true;
+    const deleteButton = button('delete', () => {
+      const question = document.createElement('span');
+      question.dataset.artifactDeleteQuestion = 'true';
+      question.textContent = labels.confirmDelete;
+      const confirm = button('confirmDelete', () => {
+        void perform(async () => {
+          await options.store.delete(a.id);
+          dirty = false;
+          await refresh(true);
+        });
+      });
+      confirm.textContent = labels.delete;
+      const cancel = button('cancel', () => {
+        deletePrompt.hidden = true;
+        deletePrompt.replaceChildren();
+        deleteButton.focus();
+      });
+      deletePrompt.replaceChildren(question, confirm, cancel);
+      deletePrompt.hidden = false;
+      cancel.focus();
+    });
+    actions.append(deleteButton);
+    const previewButton = button('preview', () => setMode(false));
+    const editButton = button('edit', () => setMode(true));
+    const cancelEdit = button('cancelEditing', () =>
+      discard(() => {
+        title.value = a.title;
+        const loaded = a.versions.find((v) => String(v.version) === selectedVersion)!;
+        text.value = loaded.text;
+        dirty = selectedVersion !== String(a.versions.at(-1)!.version);
+        dirtyNote.hidden = !dirty;
+        actions.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.disabled = !dirty;
+        presentation.refresh();
+        setMode(false);
       }),
     );
+    const modes = Div().class('agent-artifact-modes').children(previewButton, editButton, cancelEdit).build();
+    modes.setAttribute('role', 'group');
+    modes.setAttribute('aria-label', labels.preview);
+    const identity = Div().class('agent-artifact-identity').children(title, select).build();
+    const modebar = Div().class('agent-artifact-modebar').children(modes, dirtyNote).build();
+    const toolbar = Div().class('agent-artifact-toolbar').children(identity, modebar).build();
+    const content = Div()
+      .class('agent-artifact-content')
+      .children(...(source.hidden ? [text] : []), presentationHost, source)
+      .build();
+    const footer = View('footer').class('agent-artifact-footer').children(actions, deletePrompt, origin).build();
     const form = Div()
-      .class('agent-artifact-editor')
-      .children(title, select, ...(source.hidden ? [text] : []), presentationHost, source, origin, actions)
+      .class('agent-artifact-editor agent-artifact-workbench')
+      .children(toolbar, content, footer)
       .build();
-    if (presentation.kind !== 'text') form.insertBefore(actions, presentationHost);
+    function setMode(value: boolean, focus = true, invalidate = true): void {
+      if (editing !== value && invalidate) invalidateDraft();
+      editing = value;
+      form.dataset.mode = editing ? 'edit' : 'preview';
+      title.readOnly = !editing;
+      text.hidden = !editing || presentation.kind !== 'text';
+      text.readOnly = !editing;
+      source.hidden = !editing || presentation.kind === 'text';
+      // The canonical source stays mounted; its disclosure is only writable in Edit.
+      if (presentation.kind !== 'text') text.hidden = false;
+      previewButton.setAttribute('aria-pressed', String(!editing));
+      editButton.setAttribute('aria-pressed', String(editing));
+      cancelEdit.hidden = !editing;
+      presentation.setEditing(editing);
+      workflow?.refreshScope();
+      if (focus) {
+        if (!editing) presentationHost.querySelector<HTMLElement>('[data-artifact-reader]')?.focus();
+        else if (presentation.kind === 'text') text.focus();
+        else (presentationHost.querySelector('textarea') ?? title).focus();
+      }
+    }
+    setEditorMode = setMode;
+    setMode(false, false);
     body.append(form);
     const applyButton = actions.querySelector<HTMLButtonElement>('[data-action=apply]')!;
     applyButton.hidden = !!a.versions.at(-1)!.payload && a.versions.at(-1)!.payload!.kind !== 'text';
@@ -347,8 +458,8 @@ export function createArtifactsView(options: {
         title: title.value,
         text: text.value,
         ...(presentation.kind === 'table' || presentation.kind === 'slides' ? { payloadKind: presentation.kind } : {}),
-        start: presentation.kind === 'text' ? text.selectionStart : 0,
-        end: presentation.kind === 'text' ? text.selectionEnd : 0,
+        start: editing && presentation.kind === 'text' ? text.selectionStart : 0,
+        end: editing && presentation.kind === 'text' ? text.selectionEnd : 0,
       });
     if (options.refinement) {
       const isCurrent = (bound: ArtifactDraftBinding) =>
@@ -379,8 +490,11 @@ export function createArtifactsView(options: {
             }
           }
           text.value = replaceArtifactRange(bound, replacement);
+          clearFeedback();
+          setMode(true, false, false);
           presentation.refresh();
           dirty = true;
+          dirtyNote.hidden = false;
           ++draftRevision;
           body.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.disabled = false;
           if (bound.payloadKind) presentationHost.querySelector('textarea')?.focus();
@@ -391,19 +505,19 @@ export function createArtifactsView(options: {
           return true;
         },
       });
-      form.append(workflow.el);
+      footer.insertBefore(workflow.el, origin);
       for (const event of ['select', 'click', 'keyup', 'input'])
         text.addEventListener(event, () => workflow?.refreshScope());
     }
     form.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.disabled = true;
-    title.focus();
+    presentationHost.querySelector<HTMLElement>('[data-artifact-reader]')?.focus();
   }
-  async function refresh(): Promise<void> {
-    if (disposed || dirty) return;
+  async function refresh(ownedOperation = false): Promise<void> {
+    if (disposed || dirty || (busy && !ownedOperation)) return;
     const revision = ++generation;
     try {
       const rows = await options.store.list();
-      if (disposed || revision !== generation || dirty) return;
+      if (disposed || revision !== generation || dirty || (busy && !ownedOperation)) return;
       current = undefined;
       reset();
       const list = View('ul').class('agent-artifacts-list').build();
@@ -416,7 +530,7 @@ export function createArtifactsView(options: {
           void perform(async () => {
             const a = await options.store.get(row.id);
             if (a) editor(a);
-            else await refresh();
+            else await refresh(true);
           });
         });
         open.textContent = row.title;
@@ -502,7 +616,6 @@ export function createArtifactsView(options: {
         ),
       );
 
-      if (options.onClose) setBack(button('back', options.onClose), 'conversation');
       if (el.isConnected) heading.focus();
     } catch (e) {
       if (!disposed) error(e);
@@ -510,7 +623,12 @@ export function createArtifactsView(options: {
   }
   return {
     el,
-    refresh,
+    focus(): void {
+      (backButton ?? heading).focus();
+    },
+    /** A disabled or pending nested return consumes Escape; it never falls through to Chat. */
+    requestBack,
+    refresh: () => refresh(),
     save(text: string, origin?: ArtifactProvenance): Promise<MessageSaveOutcome> {
       if (disposed || busy) return Promise.resolve('cancelled');
       return new Promise((resolve) => {
@@ -551,6 +669,7 @@ export function createArtifactsView(options: {
         const matching = text.value === bound.text;
         // Old offsets are never applied to a newer body. A changed selection
         // request must select afresh or explicitly choose the entire artifact.
+        if (matching && bound.scope === 'selection') setEditorMode?.(true, false);
         text.setSelectionRange(
           matching && bound.scope === 'selection' ? bound.start : 0,
           matching && bound.scope === 'selection' ? bound.end : 0,
@@ -592,10 +711,16 @@ export function createArtifactsView(options: {
     },
     setLabels(next: ArtifactsLabels): void {
       labels = next;
+      el.setAttribute('aria-label', labels.title);
       heading.textContent = labels.title;
       activePresentation?.setLabels(labels);
+      body.querySelector('.agent-artifact-modes')?.setAttribute('aria-label', labels.preview);
       const sourceSummary = body.querySelector('[data-artifact-source-summary]');
-      if (sourceSummary) sourceSummary.textContent = labels.textField + ' · JSON';
+      if (sourceSummary) sourceSummary.textContent = label('sourceData') + ' · JSON';
+      const unsaved = body.querySelector('.agent-artifact-unsaved');
+      if (unsaved) unsaved.textContent = label('unsaved');
+      const question = body.querySelector('[data-artifact-delete-question]');
+      if (question) question.textContent = labels.confirmDelete;
       for (const b of buttons) {
         const key = b.dataset.action as keyof ArtifactsLabels;
         if (key === 'back') {
@@ -603,7 +728,7 @@ export function createArtifactsView(options: {
             b,
             (backDestination === 'conversation' ? labels.backToConversation : labels.backToList) ?? labels.back,
           );
-        } else if (!b.dataset.artifact) b.textContent = labels[key] ?? '';
+        } else if (!b.dataset.artifact) b.textContent = label(key === 'confirmDelete' ? 'delete' : key);
       }
       for (const option of body.querySelectorAll('option')) option.textContent = `${labels.version} ${option.value}`;
       const origin = body.querySelector('.agent-artifact-provenance');
@@ -627,6 +752,8 @@ export function createArtifactsView(options: {
       for (const settle of pendingSaves) settle('cancelled');
       ++generation;
       buttons.clear();
+      backButton = undefined;
+      options.onBackChange?.();
       header.replaceChildren(heading);
       el.remove();
     },
diff --git a/lib/agent-plugin/ui/controller.ts b/lib/agent-plugin/ui/controller.ts
index 1ff332517..7cd46f4a3 100644
--- a/lib/agent-plugin/ui/controller.ts
+++ b/lib/agent-plugin/ui/controller.ts
@@ -43,6 +43,9 @@ export interface AgentChatControllerOptions {
   maxIterations?: number;
   /** Called with each streamed assistant text delta (live-render the bubble). */
   onAgentDelta?: (delta: string) => void;
+  /** Ephemeral provider-returned public reasoning; never a chat turn or history. */
+  onReasoningDelta?: (delta: string) => void;
+  onReasoningEnd?: () => void;
   /** Called when a streamed assistant turn completes (close the live bubble). */
   onAgentStreamEnd?: () => void;
   /** Persist/restore conversation history across reloads. */
@@ -229,7 +232,13 @@ export class AgentChatController {
         signal: run.abort.signal,
         onEvent: (event) => {
           if (!live()) return;
-          if (event.type === 'usage') {
+          if (event.type === 'reasoning_delta') {
+            assertCurrent?.();
+            if (live()) this.options.onReasoningDelta?.(event.text);
+          } else if (event.type === 'reasoning_end') {
+            assertCurrent?.();
+            if (live()) this.options.onReasoningEnd?.();
+          } else if (event.type === 'usage') {
             run.timing?.usage(event.usage);
             this.options.onUsage?.(event.usage);
           } else if (event.type === 'assistant_delta') {
diff --git a/lib/agent-plugin/ui/panel-context.ts b/lib/agent-plugin/ui/panel-context.ts
index 9f56c4122..66578f47d 100644
--- a/lib/agent-plugin/ui/panel-context.ts
+++ b/lib/agent-plugin/ui/panel-context.ts
@@ -152,13 +152,12 @@ export function mountPanelContext(options: {
   return { update, dispose };
 }
 
-/** Selection chips and the empty-composer hint share one bounded SDK snapshot. */
+/** Selection chips and contextual tasks share one bounded SDK snapshot. */
 export function syncPanelContext(options: {
   quoteContext: HTMLElement;
   quoteSummary: HTMLElement;
   quoteTrigger?: HTMLElement;
   quoteText: HTMLElement;
-  welcomeHint: HTMLElement;
   settings: HTMLElement;
   ready: () => boolean;
   onSnapshot?: (snapshot: ComposerContext) => void;
@@ -180,13 +179,4 @@ export function syncPanelContext(options: {
   if (options.quoteText.textContent !== snapshot.text) options.quoteText.textContent = snapshot.text;
   const release = options.settings.querySelector<HTMLElement>('.agent-release-memory');
   if (release) release.hidden = !options.ready();
-  const welcome =
-    context?.kind === 'cell'
-      ? 'agentWelcomeCell'
-      : context?.kind === 'pdf'
-        ? 'agentWelcomePdf'
-        : context?.kind === 'slide'
-          ? 'agentWelcomeSlide'
-          : 'agentWelcomeWord';
-  if (options.welcomeHint.textContent !== t(welcome)) options.welcomeHint.textContent = t(welcome);
 }
diff --git a/lib/agent-plugin/ui/panel-resize.ts b/lib/agent-plugin/ui/panel-resize.ts
index 08419eb30..98302362f 100644
--- a/lib/agent-plugin/ui/panel-resize.ts
+++ b/lib/agent-plugin/ui/panel-resize.ts
@@ -1,27 +1,38 @@
 import { t } from '@ranuts/shared/i18n';
-/** A captured pointer plus a temporary shield prevents the editor iframe stealing drags. */
-export function mountPanelResize(panel: HTMLElement): () => void {
+
+/** Own dock preference and temporary expansion without rebuilding any workspace surface. */
+export function mountPanelResize(panel: HTMLElement, options: { expandButton?: HTMLButtonElement } = {}): () => void {
   const handle = document.createElement('div');
   handle.className = 'agent-panel-resizer';
   handle.tabIndex = 0;
   handle.setAttribute('role', 'separator');
-  const label = () => handle.setAttribute('aria-label', t('agentResizePanel'));
-  label();
-  window.addEventListener('languagechange', label);
   handle.setAttribute('aria-orientation', 'vertical');
   panel.prepend(handle);
-  let preferred = 432;
+  let preferred = 480;
   try {
-    preferred = Number(localStorage.getItem('agent-panel-width')) || 432;
+    preferred = Number(localStorage.getItem('agent-panel-width')) || 480;
   } catch {
     /* Storage is optional. */
   }
+  let expanded = panel.dataset.expanded === 'true';
   let shield: HTMLElement | undefined;
   let pointer: number | undefined;
   const bounds = () => ({
     min: Math.min(320, window.innerWidth),
     max: window.innerWidth <= 480 ? window.innerWidth : Math.max(320, window.innerWidth - 360),
   });
+  const syncLabels = () => {
+    handle.setAttribute('aria-label', t('agentResizePanel'));
+    panel.dataset.expanded = String(expanded);
+    const button = options.expandButton;
+    if (!button) return;
+    button.setAttribute('aria-expanded', String(expanded));
+    button.setAttribute('aria-label', t(expanded ? 'agentCollapse' : 'agentExpand'));
+    button.title = t(expanded ? 'agentCollapse' : 'agentExpand');
+    button.hidden =
+      window.innerWidth <= 480 ||
+      (!expanded && Math.min(1040, bounds().max) <= Number(handle.getAttribute('aria-valuenow')));
+  };
   const apply = (value: number, persist = false) => {
     const { min, max } = bounds();
     const width = Math.round(Math.max(min, Math.min(max, value)));
@@ -37,6 +48,13 @@ export function mountPanelResize(panel: HTMLElement): () => void {
         /* Storage is optional. */
       }
     }
+    syncLabels();
+    panel.dispatchEvent(new Event('agentlayoutchange'));
+  };
+  const resize = () => apply(expanded ? Math.min(1040, bounds().max) : preferred);
+  const toggle = () => {
+    expanded = !expanded;
+    resize();
   };
   const finish = () => {
     if (pointer !== undefined && handle.hasPointerCapture?.(pointer)) handle.releasePointerCapture(pointer);
@@ -48,6 +66,8 @@ export function mountPanelResize(panel: HTMLElement): () => void {
   handle.addEventListener('pointerdown', (event) => {
     if (pointer !== undefined || event.button !== 0 || window.innerWidth <= 480) return;
     event.preventDefault();
+    expanded = false;
+    syncLabels();
     pointer = event.pointerId;
     shield = document.createElement('div');
     shield.className = 'agent-panel-resize-shield';
@@ -74,17 +94,20 @@ export function mountPanelResize(panel: HTMLElement): () => void {
     const next = { ArrowLeft: current + 24, ArrowRight: current - 24, Home: min, End: max }[event.key];
     if (next === undefined) return;
     event.preventDefault();
+    expanded = false;
     apply(next, true);
   });
-  const resize = () => apply(preferred);
+  options.expandButton?.addEventListener('click', toggle);
   window.addEventListener('resize', resize);
   window.addEventListener('blur', finish);
-  apply(preferred);
+  window.addEventListener('languagechange', syncLabels);
+  resize();
   return () => {
     finish();
+    options.expandButton?.removeEventListener('click', toggle);
     window.removeEventListener('resize', resize);
     window.removeEventListener('blur', finish);
-    window.removeEventListener('languagechange', label);
+    window.removeEventListener('languagechange', syncLabels);
     handle.remove();
   };
 }
diff --git a/lib/agent-plugin/ui/panel-workspace.ts b/lib/agent-plugin/ui/panel-workspace.ts
index 5ffecc4fd..18b7f4efe 100644
--- a/lib/agent-plugin/ui/panel-workspace.ts
+++ b/lib/agent-plugin/ui/panel-workspace.ts
@@ -6,12 +6,14 @@ interface WorkspaceSurface {
   el: HTMLElement;
   trigger: HTMLElement;
   focus: () => void;
+  returnToParent?: () => boolean;
 }
 
 /** Presentation navigation only. Request/session invalidation remains with the panel's lifecycle owners. */
 export function createPanelWorkspace(options: {
   panel: HTMLElement;
   chat: Pick<ChatView, 'el' | 'focus'>;
+  chatTrigger?: HTMLElement;
   navigation: Pick<ReturnType<typeof createWorkspaceNavigation>, 'capture' | 'restore'>;
   conversation: () => string;
   isOpen: () => boolean;
@@ -19,35 +21,72 @@ export function createPanelWorkspace(options: {
   views: Record<Exclude<PanelWorkspaceView, 'chat'>, WorkspaceSurface>;
   beforeChange: (view: PanelWorkspaceView) => void;
   changed: (view: PanelWorkspaceView) => void;
+  layoutChanged?: () => void;
 }) {
   const { panel, chat, views, runtime, navigation } = options;
+  let initialized = false;
+  // A width change changes presentation, never the selected route or its lifecycle.
+  const refreshLayout = (routeChange = false): void => {
+    const split = panel.dataset.view === 'artifacts' && panel.getBoundingClientRect().width >= 840;
+    const hideChat = panel.dataset.view !== 'chat' && !split;
+    const wasHidden = chat.el.hidden;
+    const losingFocus = hideChat && !chat.el.hidden && chat.el.contains(document.activeElement);
+    if (!routeChange && hideChat && !wasHidden) navigation.capture(options.conversation());
+    panel.dataset.split = String(split);
+    chat.el.hidden = hideChat;
+    if (!routeChange && !hideChat && wasHidden) navigation.restore(options.conversation());
+    options.layoutChanged?.();
+    if (!routeChange && losingFocus && options.isOpen())
+      views[panel.dataset.view as Exclude<PanelWorkspaceView, 'chat'>].focus();
+  };
+  panel.addEventListener('agentlayoutchange', () => refreshLayout());
+  const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => refreshLayout());
+  observer?.observe(panel);
+  const reveal = (trigger?: HTMLElement): void => {
+    trigger?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+  };
+  for (const trigger of [options.chatTrigger, ...Object.values(views).map((surface) => surface.trigger)])
+    trigger?.addEventListener('focus', () => reveal(trigger));
   const show = (view: PanelWorkspaceView): void => {
+    if (initialized && panel.dataset.view === view) return;
     options.beforeChange(view);
-    if (panel.dataset.view === 'chat' && view !== 'chat') navigation.capture(options.conversation());
+    initialized = true;
+    if (!chat.el.hidden && panel.dataset.view) navigation.capture(options.conversation());
     panel.dataset.view = view;
     if (view === 'settings') runtime.modelRow.insertBefore(runtime.row, runtime.modelActions);
     else panel.insertBefore(runtime.row, runtime.settings);
-    chat.el.hidden = view !== 'chat';
+    refreshLayout(true);
+    if (options.chatTrigger) {
+      if (view === 'chat') options.chatTrigger.setAttribute('aria-current', 'page');
+      else options.chatTrigger.removeAttribute('aria-current');
+    }
     for (const [name, surface] of Object.entries(views)) {
       if (name === 'settings') surface.el.classList.toggle('agent-panel-settings-hidden', view !== name);
       else surface.el.hidden = view !== name;
       surface.trigger.setAttribute('aria-expanded', String(view === name));
+      if (view === name) surface.trigger.setAttribute('aria-current', 'page');
+      else surface.trigger.removeAttribute('aria-current');
     }
+    reveal(view === 'chat' ? options.chatTrigger : views[view].trigger);
     options.changed(view);
     if (!options.isOpen()) return;
     if (view !== 'chat') views[view].focus();
     else if (!navigation.restore(options.conversation(), true)) chat.focus();
   };
+  options.chatTrigger?.addEventListener('click', () => show('chat'));
   for (const [name, surface] of Object.entries(views)) {
-    surface.trigger.addEventListener('click', () =>
-      show(panel.dataset.view === name ? 'chat' : (name as PanelWorkspaceView)),
-    );
-    surface.el.addEventListener('keydown', (event) => {
-      if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented || event.keyCode === 229) return;
-      event.stopPropagation();
-      show('chat');
-      surface.trigger.focus();
-    });
+    surface.trigger.addEventListener('click', () => show(name as PanelWorkspaceView));
   }
-  return { show };
+  panel.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || event.isComposing || event.defaultPrevented || event.keyCode === 229) return;
+    const view = panel.dataset.view as PanelWorkspaceView | undefined;
+    if (!view || view === 'chat') return;
+    const surface = views[view];
+    event.stopPropagation();
+    event.preventDefault();
+    if (surface.returnToParent?.()) return;
+    show('chat');
+    surface.trigger.focus();
+  });
+  return { show, refreshLayout };
 }
diff --git a/lib/agent-plugin/ui/panel.ts b/lib/agent-plugin/ui/panel.ts
index c4605b468..2caa43ecb 100644
--- a/lib/agent-plugin/ui/panel.ts
+++ b/lib/agent-plugin/ui/panel.ts
@@ -1,4 +1,4 @@
-import { createViewHeader, labelViewBack } from './view-header';
+import { createViewHeader } from './view-header';
 import { createTaskReceipt } from './task-receipt';
 import { createResultActions } from './result-actions';
 import { createWorkspaceNavigation } from './workspace-navigation';
@@ -170,13 +170,16 @@ export function createAgentPanel(
     .attr('role', 'complementary')
     .attr('aria-label', t('agentTitle'))
     .build();
-  let disposeResize = mountPanelResize(panel);
+  const expandBtn = ButtonBuilder().class('agent-panel-expand').attr('type', 'button').build();
+  expandBtn.innerHTML =
+    '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 3H3v5M16 21h5v-5M3 3l6 6m12 12-6-6M16 3h5v5M3 16v5h5"/></svg>';
+  let disposeResize = mountPanelResize(panel, { expandButton: expandBtn });
   let disposeViewport = mountPanelViewport(panel);
   window.addEventListener('pagehide', () => disposeViewport());
   window.addEventListener('pageshow', (event) => {
     if (!event.persisted || !panel.isConnected) return;
     disposeResize();
-    disposeResize = mountPanelResize(panel);
+    disposeResize = mountPanelResize(panel, { expandButton: expandBtn });
     disposeViewport();
     disposeViewport = mountPanelViewport(panel);
     sidebar.dispose();
@@ -315,8 +318,8 @@ export function createAgentPanel(
 
   // ── Header ──────────────────────────────────────────────────────────────
   const title = ButtonBuilder().class('agent-panel-title').attr('type', 'button').text(t('agentTitle')).build();
-  // Gear toggles the settings block (provider / key / model), hidden by default
-  // so the main panel stays a clean chat surface.
+  title.classList.add('agent-chat-toggle');
+  // Model configuration stays beside composition rather than competing with the conversation.
   const settingsBtn = ButtonBuilder()
     .class('agent-panel-settings-toggle')
     .attr('type', 'button')
@@ -333,8 +336,12 @@ export function createAgentPanel(
       else setOpen(false);
     })
     .build();
-  settingsBtn.innerHTML =
-    '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2.5" fill="var(--ran-color-bg-elevated)"/><circle cx="15" cy="17" r="2.5" fill="var(--ran-color-bg-elevated)"/></svg>';
+  settingsBtn.classList.add('agent-model-shortcut');
+  const modelShortcutLabel = Span().class('agent-model-shortcut-label').text(t('agentSettings')).build();
+  const modelShortcutIcon = Span().class('agent-model-shortcut-icon').attr('aria-hidden', 'true').build();
+  modelShortcutIcon.innerHTML =
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2.5" fill="var(--ran-color-bg-elevated)"/><circle cx="15" cy="17" r="2.5" fill="var(--ran-color-bg-elevated)"/></svg>';
+  settingsBtn.append(modelShortcutLabel, modelShortcutIcon);
   closeBtn.innerHTML =
     '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m6 6 12 12M18 6 6 18"/></svg>';
   const loadingStatus = Span().class('agent-model-status').attr('role', 'status').build();
@@ -345,9 +352,9 @@ export function createAgentPanel(
     .aria('label', t('agentPreparing'))
     .build();
   const runtimeRow = Div().class('agent-runtime-row').attr('hidden', '').children(loadingStatus).build();
-  const header = Div().class('agent-panel-header').children(title, settingsBtn, closeBtn).build();
+  const header = Div().class('agent-panel-header').children(title, closeBtn).build();
 
-  // ── Settings (collapsed by default; opened via the gear) ──────────────────
+  // ── Models workspace settings ────────────────────────────────────────────
   const initialEndpointSettings = readEndpointSettings(localStorageGetItem(ENDPOINT_SETTINGS_KEY));
   let selectedSource = configuredEndpoint(initialEndpointSettings) ? 'service' : 'local';
   let cachedLocalModel = false;
@@ -443,12 +450,16 @@ export function createAgentPanel(
     savedMessage: t('agentResultSaved'),
     saveFailed: t('agentResultSaveFailed'),
     conversation: t('agentTitle'),
+    composer: t('agentComposerLabel'),
+    actions: t('agentComposerActionsLabel'),
     send: t('agentSend'),
     queue: t('agentQueueAction'),
     stop: t('agentStop'),
     stopping: t('agentStopping'),
     placeholder: t(proposalMode && writingSelect.value !== 'tools' ? 'agentWritingHint' : 'agentComposeHint'),
     empty: t('agentWelcome'),
+    codeBlock: t('agentCodeBlock'),
+    table: t('agentMarkdownTable'),
     copy: t('agentCopy'),
     copied: t('agentCopied'),
     copyFailed: t('agentCopyFailed'),
@@ -458,6 +469,9 @@ export function createAgentPanel(
     loadEarlier: t('agentLoadEarlierMessages'),
     expandMessage: t('agentShowFullMessage'),
     waiting: t('agentWaiting'),
+    reasoning: t('agentReasoning'),
+    reasoningInterrupted: t('agentReasoningInterrupted'),
+    reasoningTruncated: t('agentReasoningTruncated'),
     routing: t('agentRoutingRequest'),
     elapsed: (seconds) => t('agentWaitElapsed', { seconds: new Intl.NumberFormat(getLanguage()).format(seconds) }),
     reading: t('agentReadingContent'),
@@ -722,9 +736,6 @@ export function createAgentPanel(
     syncRuntimeStatus();
   });
   speech = mountSpeechInput(chat, () => enabled);
-  const welcomeHint = document.createElement('p');
-  welcomeHint.className = 'agent-welcome-hint';
-  welcomeHint.textContent = t('agentWelcomeHint');
   const taskEntry = createTaskEntry({
     getInput: () => chat.getInput(),
     setInput: (text) => chat.setInput(text),
@@ -764,7 +775,7 @@ export function createAgentPanel(
   window.addEventListener('pagehide', (event) => {
     if (!event.persisted) resultActions.dispose();
   });
-  chat.emptyActionsEl.prepend(welcomeHint, taskEntry.el);
+  chat.emptyActionsEl.prepend(taskEntry.el);
   chat.el.querySelector('textarea')!.addEventListener('input', (event) => {
     if (event.isTrusted || chat.getInput()) taskEntry.inputChanged(chat.getInput());
   });
@@ -930,7 +941,6 @@ export function createAgentPanel(
       quoteSummary,
       quoteTrigger: selectionContext.trigger,
       quoteText,
-      welcomeHint,
       settings,
       ready: () => !!webllmProvider?.isReady(),
       onSnapshot: (snapshot) => taskEntry.update(snapshot),
@@ -979,6 +989,8 @@ export function createAgentPanel(
     },
     tools: agentTools,
     onAgentDelta: (delta: string): void => chat.appendDelta(delta, { metadata: resultMetadata }),
+    onReasoningDelta: (delta: string): void => chat.appendReasoningDelta(delta),
+    onReasoningEnd: (): void => chat.endReasoning(),
     onAgentStreamEnd: (): void => chat.endStream(),
     storage: historyStorage,
   };
@@ -1209,6 +1221,14 @@ export function createAgentPanel(
     readiness.hidden = !reason || modelLoading;
     const waiting = modelLoading || !!endpointConnection.pending || !!runtimeCleanup || cacheBusy;
     const endpoint = configuredEndpoint(configuration.endpointSettings);
+    modelShortcutLabel.textContent =
+      selectedSource === 'service'
+        ? endpoint?.model || t('agentSettings')
+        : currentProvider() === 'webllm'
+          ? WEBLLM_MODELS.find((model) => model.id === modelSelect.value)?.label || t('agentSettings')
+          : t('agentProviderWllama');
+    settingsBtn.title = `${t('agentSettings')} · ${modelShortcutLabel.textContent}`;
+    settingsBtn.setAttribute('aria-label', settingsBtn.title);
     const canReconnect = !!(
       endpoint &&
       (!offline || endpoint.kind === 'loopback') &&
@@ -1236,6 +1256,8 @@ export function createAgentPanel(
       waiting ||
       runtimeCleanupFailed ||
       (!!chat.getInput().trim() && !writingBlocked);
+    // The model entry already opens settings; reserve a second action for actual preparation/reconnection.
+    if (prepareAction.textContent === t('agentSettings')) prepareAction.hidden = true;
     chat.refreshSendAvailability();
     loadingStatus.textContent = modelLoading
       ? [
@@ -1249,7 +1271,9 @@ export function createAgentPanel(
         ? t('agentUseDevice')
         : '';
     syncWriteDestination();
-    runtimeRow.hidden = !loadingStatus.textContent || (panel.dataset.view === 'settings' && !modelLoading);
+    runtimeRow.hidden =
+      !loadingStatus.textContent ||
+      (panel.dataset.view !== 'chat' && (panel.dataset.view !== 'settings' || !modelLoading));
     note.hidden =
       selectedSource !== 'local' ||
       (modelLoading && panel.dataset.view === 'settings') ||
@@ -2451,6 +2475,19 @@ export function createAgentPanel(
                   display.push(delta);
               },
               sourceReference,
+              {
+                onReasoningDelta: (delta) => chat.appendReasoningDelta(delta),
+                onReasoningEnd: () => chat.endReasoning(),
+                assertCurrent: () => {
+                  abort.signal.throwIfAborted();
+                  if (
+                    generation !== controllerGeneration ||
+                    conversation !== conversationRevision ||
+                    !target.isCurrent(false)
+                  )
+                    throw new Error(t('agentPlanExpired'));
+                },
+              },
             );
             abort.signal.throwIfAborted();
             if (
@@ -2717,6 +2754,11 @@ export function createAgentPanel(
     // Dictation must settle into its original composer before navigation restores another draft.
     speech?.close();
     rememberDraft();
+    // A secondary view returns to its owning conversation, including an unsent draft.
+    if (panel.dataset.view !== 'chat') {
+      showView('chat');
+      return;
+    }
     const sessions = conversations.searchSnapshot();
     const current = sessions.find((item) => item.id === displayedConversationId);
     // An accepted user turn can be visible before its history is persisted.
@@ -2806,10 +2848,7 @@ export function createAgentPanel(
     syncSidebar();
     title.textContent = t('agentTitle');
     panel.setAttribute('aria-label', t('agentTitle'));
-    welcomeHint.textContent = t('agentWelcomeHint');
     syncRuntimeStatus();
-    settingsBtn.title = t('agentSettings');
-    settingsBtn.setAttribute('aria-label', t('agentSettings'));
     configuration.syncLabels();
     closeBtn.title = t('agentClose');
     closeBtn.setAttribute('aria-label', t('agentClose'));
@@ -2839,6 +2878,8 @@ export function createAgentPanel(
 
   const artifactsBtn = View<HTMLButtonElement>('button').class('agent-workspace-toggle').attr('type', 'button').build();
   const artifactStore = createArtifactStore();
+  let artifactBack: HTMLButtonElement | undefined;
+  const artifactReturnSlot = Div().class('agent-artifact-return-slot').attr('hidden', '').build();
   const artifactsView = createArtifactsView({
     store: artifactStore,
     refinement: {
@@ -2849,6 +2890,11 @@ export function createAgentPanel(
     labels: artifactLabels(),
     conversation: () => conversations.activeId,
     onClose: () => showView('chat'),
+    onBackChange: (back) => {
+      artifactBack?.remove();
+      artifactBack = back;
+      syncHeaderIdentity();
+    },
     onApply: async (text) => {
       showView('chat');
       try {
@@ -2906,8 +2952,13 @@ export function createAgentPanel(
     if (!event.persisted) artifactsView.dispose();
   });
   referenceSources.select(conversations.activeId);
-  const sourcesBtn = View<HTMLButtonElement>('button').class('agent-sources-toggle').attr('type', 'button').build();
-  const sourceSummary = View('p').class('agent-sources-summary agent-entry-note').build();
+  const sourcesBtn = View<HTMLButtonElement>('button')
+    .class('agent-sources-toggle')
+    .attr('type', 'button')
+    .attr('aria-controls', 'agent-sources')
+    .attr('aria-expanded', 'false')
+    .build();
+  const sourceSummary = Div().class('agent-sources-summary').build();
   let sourceState = referenceSources.capture();
   const sourceView = createSourcesView({
     sources: referenceSources,
@@ -2918,12 +2969,32 @@ export function createAgentPanel(
       if (!sourceState.isCurrent()) invalidateRequestBindings();
       sourceState = referenceSources.capture();
       sourceSummary.hidden = referenceSources.list().length === 0;
-      sourceSummary.textContent = referenceSources
-        .list()
-        .map((source) => source.title)
-        .join(' · ');
+      sourceSummary.replaceChildren(
+        ...referenceSources.list().map((source) => {
+          const chip = View<HTMLButtonElement>('button')
+            .class('agent-source-chip')
+            .attr('type', 'button')
+            .text(source.title)
+            .build();
+          chip.title = `${t('agentSourcesOpen')}: ${source.title}`;
+          chip.setAttribute('aria-label', chip.title);
+          chip.addEventListener('click', () => {
+            showView('sources');
+            sourceView.openSource(source.id);
+          });
+          return chip;
+        }),
+      );
       sourceSummary.title = t('agentSourcesExcerpt');
-      sourcesBtn.textContent = `${t('agentSourcesSources')}${referenceSources.list().length ? ` · ${referenceSources.list().length}` : ''}`;
+      const sourceLabel = `${t('agentSourcesSources')}${referenceSources.list().length ? ` · ${referenceSources.list().length}` : ''}`;
+      const label = Span().class('agent-sources-label').text(sourceLabel).build();
+      sourcesBtn.replaceChildren(label);
+      sourcesBtn.setAttribute('aria-label', sourceLabel);
+      sourcesBtn.title = sourceLabel;
+      const icon = Span().attr('aria-hidden', 'true').build();
+      icon.innerHTML =
+        '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m8 12 6-6a3 3 0 0 1 4 4l-8 8a5 5 0 0 1-7-7l8-8"/></svg>';
+      sourcesBtn.prepend(icon);
     },
   });
   chat.actionsEl.prepend(sourcesBtn);
@@ -2960,10 +3031,7 @@ export function createAgentPanel(
   });
   const { settingsHeading, modelActions, localCard, serviceCard, advanced, settingsHero, sourcePicker, offlineHint } =
     settingsView;
-  const settingsBack = document.createElement('button');
-  settingsBack.type = 'button';
-  settingsBack.addEventListener('click', () => showView('chat'));
-  settingsHero.replaceChildren(createViewHeader(settingsHeading, settingsBack));
+  settingsHero.replaceChildren(createViewHeader(settingsHeading));
   syncOfflineSettings = () => {
     settingsView.setOnline(navigator.onLine !== false);
     ggufUrl.hidden = navigator.onLine === false;
@@ -3042,19 +3110,34 @@ export function createAgentPanel(
     },
     onDelete: (id, trigger) => historyControls?.requestDelete(id, trigger),
   });
-  const historyBack = document.createElement('button');
-  historyBack.type = 'button';
-  historyBack.addEventListener('click', () => showView('chat'));
   const historyHeading = conversationList.el.querySelector('h2')!;
-  historyView.append(createViewHeader(historyHeading, historyBack), conversationList.el, historyControls.el);
-  header.insertBefore(artifactsBtn, settingsBtn);
-  header.insertBefore(historyBtn, settingsBtn);
-  header.insertBefore(clearBtn, settingsBtn);
+  historyView.append(createViewHeader(historyHeading), conversationList.el, historyControls.el);
+  header.insertBefore(clearBtn, closeBtn);
+  const chatBtn = title;
+  const sourcesNav = sourcesBtn;
+  sourcesNav.classList.add('agent-sources-nav');
+  const workspaceNav = View('nav').class('agent-workspace-nav').children(chatBtn, artifactsBtn, historyBtn).build();
+  header.prepend(workspaceNav);
+  for (const [trigger, id] of [
+    [chatBtn, 'agent-chat'],
+    [artifactsBtn, 'agent-artifacts'],
+    [historyBtn, 'agent-history'],
+    [sourcesNav, 'agent-sources'],
+  ] as const)
+    trigger.setAttribute('aria-controls', id);
+  chat.el.id = 'agent-chat';
+  artifactsView.el.id = 'agent-artifacts';
+  historyView.id = 'agent-history';
+  sourceView.el.id = 'agent-sources';
 
-  chat.el.append(writeDestination);
+  const composerMeta = Div().class('agent-composer-meta').children(settingsBtn).build();
+  chat.el.querySelector('.cui-footer')!.append(composerMeta, readiness, writeDestination);
+  artifactsView.el.prepend(artifactReturnSlot);
+  header.insertBefore(expandBtn, closeBtn);
   const workspace = createPanelWorkspace({
     panel,
     chat,
+    chatTrigger: chatBtn,
     navigation,
     conversation: () => displayedConversationId,
     isOpen: () => open,
@@ -3062,8 +3145,13 @@ export function createAgentPanel(
     views: {
       settings: { el: settings, trigger: settingsBtn, focus: () => settingsHeading.focus() },
       history: { el: historyView, trigger: historyBtn, focus: () => conversationList?.focus() },
-      sources: { el: sourceView.el, trigger: sourcesBtn, focus: () => sourceView.focus() },
-      artifacts: { el: artifactsView.el, trigger: artifactsBtn, focus: () => artifactsBtn.focus() },
+      sources: { el: sourceView.el, trigger: sourcesNav, focus: () => sourceView.focus() },
+      artifacts: {
+        el: artifactsView.el,
+        trigger: artifactsBtn,
+        focus: () => artifactsView.focus(),
+        returnToParent: () => artifactsView.requestBack(),
+      },
     },
     beforeChange: (view) => {
       speech?.close();
@@ -3073,33 +3161,73 @@ export function createAgentPanel(
       viewRevision++;
     },
     changed: (view) => {
+      syncHeaderIdentity();
+      sourcesBtn.setAttribute('aria-expanded', String(view === 'sources'));
       if (view === 'artifacts') void artifactsView.refresh();
       syncHistoryActivity();
       syncRuntimeStatus();
     },
+    layoutChanged: () => syncHeaderIdentity(),
   });
   function showView(view: PanelWorkspaceView): void {
     workspace.show(view);
   }
+  const headerIcons = {
+    artifacts:
+      '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 3h12v18H6zM9 7h6M9 11h6M9 15h4"/></svg>',
+    history:
+      '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 11a9 9 0 1 1 3 8M3 5v6h6M12 7v6l4 2"/></svg>',
+  };
+  function syncHeaderIdentity(): void {
+    const split = panel.dataset.split === 'true';
+    const inChat = panel.dataset.view === 'chat' || split;
+    const nested = panel.dataset.view === 'artifacts' && !!artifactBack;
+    title.hidden = nested && !split;
+    artifactReturnSlot.hidden = !nested || !split;
+    if (artifactBack) {
+      artifactBack.classList.add('agent-panel-return');
+      // The chevron already expresses Back; keep its parent destination readable.
+      const caption = artifactBack.querySelector('span');
+      if (caption) caption.textContent = t('agentArtifactTitle');
+      artifactBack.hidden = !nested;
+      const destination = split ? artifactReturnSlot : workspaceNav;
+      if (artifactBack.parentElement !== destination || (!split && destination.firstElementChild !== artifactBack)) {
+        const focused = document.activeElement === artifactBack;
+        if (split) destination.append(artifactBack);
+        else destination.prepend(artifactBack);
+        if (focused) artifactBack.focus({ preventScroll: true });
+      }
+    }
+    title.textContent = inChat ? t('agentTitle') : t('agentWorkspaceChat');
+    if (!inChat) {
+      const backIcon = Span().class('agent-header-home-icon').attr('aria-hidden', 'true').build();
+      backIcon.innerHTML =
+        '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m14 6-6 6 6 6"/></svg>';
+      title.prepend(backIcon);
+    }
+    title.title = inChat ? t('agentWorkspaceChat') : t('agentBackToChat');
+    title.setAttribute('aria-label', title.title);
+  }
+  const labelDestination = (button: HTMLButtonElement, label: string): void => {
+    button.title = label;
+    button.setAttribute('aria-label', label);
+    button.innerHTML = headerIcons[button === artifactsBtn ? 'artifacts' : 'history'];
+  };
   const syncProductLabels = () => {
     settingsView.syncLabels();
-    labelViewBack(settingsBack, t('agentBackToChat'));
-    labelViewBack(historyBack, t('agentBackToChat'));
     sourceView.setLabels(sourcesLabels());
     artifactsView.setLabels(artifactLabels());
     artifactsView.setRefinementLabels(artifactWorkflowLabels());
     resultActions.refresh();
-    artifactsBtn.title = t('agentArtifactTitle');
-    artifactsBtn.setAttribute('aria-label', t('agentArtifactTitle'));
-    artifactsBtn.innerHTML =
-      '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"/></svg>';
+    syncHeaderIdentity();
+    labelDestination(artifactsBtn, t('agentArtifactTitle'));
+    labelDestination(historyBtn, t('agentConversations'));
+    workspaceNav.setAttribute('aria-label', t('agentTitle'));
     refinementLabel.textContent = t('agentRefiningProposal');
     refinementCancel.textContent = t('agentPlanCancel');
     disableLabel.textContent = t('agentEnable');
     disableHint.textContent = t('agentOffNote');
     disable.setAttribute('aria-label', t('agentEnable'));
-    historyBtn.title = t('agentConversations');
-    historyBtn.setAttribute('aria-label', t('agentConversations'));
   };
   syncProductLabels();
   window.addEventListener('languagechange', syncProductLabels);
@@ -3122,9 +3250,9 @@ export function createAgentPanel(
     restoringInitialHistory = false;
   });
   showView('chat');
-  // Cache discovery may choose a default view only until chat interaction starts.
-  // Capture clicks because speech controls stop propagation before requesting permission.
+  // Capture interaction revisions for asynchronous focus and navigation guards.
   const keepChatVisible = () => viewRevision++;
+  header.addEventListener('click', keepChatVisible, { capture: true });
   chat.el.addEventListener('click', keepChatVisible, { capture: true });
   chat.el.addEventListener('input', keepChatVisible);
   // Keep the empty-composer setup link and contextual main action from duplicating.
@@ -3133,11 +3261,8 @@ export function createAgentPanel(
   });
 
   // Older default-model loads may have cached files without a saved preset.
-  // Check those without warming the engine, and never replace a view the user
-  // has deliberately opened while the storage check was pending.
-  if (options.externalEntry && !hasConfiguration && selectedSource === 'service') showView('settings');
+  // Check those without warming the engine or replacing the current view.
   if (options.externalEntry && !hasConfiguration && selectedSource === 'local') {
-    const revision = viewRevision;
     const attempt = loadAttempt;
     const route = routeKey();
     const configured =
@@ -3149,7 +3274,6 @@ export function createAgentPanel(
       .then((cached) => {
         if (hasConfiguration || !panel.isConnected || attempt !== loadAttempt || route !== routeKey()) return;
         hasConfiguration = cached;
-        if (!cached && viewRevision === revision) showView('settings');
       });
   }
 
diff --git a/lib/agent-plugin/ui/presentation.ts b/lib/agent-plugin/ui/presentation.ts
index f0181c921..95aa87242 100644
--- a/lib/agent-plugin/ui/presentation.ts
+++ b/lib/agent-plugin/ui/presentation.ts
@@ -235,6 +235,8 @@ export function displayError(error: unknown): string {
     'agentWritingCurrencyChanged',
     'agentToolNotChosen',
     'agentWordOnly',
+    'agentWordFormatUnsupported',
+    'agentWordFormattingReviewUnsupported',
     'agentContextTooLong',
     'agentSlideNoRoom',
     'agentDocumentActionTimeout',
diff --git a/lib/agent-plugin/ui/sources-view.ts b/lib/agent-plugin/ui/sources-view.ts
index a9631c70f..3edc843e2 100644
--- a/lib/agent-plugin/ui/sources-view.ts
+++ b/lib/agent-plugin/ui/sources-view.ts
@@ -1,4 +1,4 @@
-import { createViewHeader, labelViewBack } from './view-header';
+import { createViewHeader } from './view-header';
 import { sourcePreview } from './source-preview';
 import { sourceMatches } from '../references/reference-search';
 import { Div, View } from 'ranui/builder';
@@ -67,7 +67,6 @@ export function createSourcesView(options: {
     b.addEventListener('click', action);
     return b;
   };
-  const back = button(options.close);
   const label = (control: HTMLElement, key: string) => {
     const wrapper = View('label').build();
     const text = View('span').text(key).build();
@@ -79,7 +78,7 @@ export function createSourcesView(options: {
   const localField = label(local, '');
   localField.wrapper.hidden = true;
   el.append(
-    createViewHeader(heading, back),
+    createViewHeader(heading),
     excerpt,
     offlineHint,
     status,
@@ -134,11 +133,15 @@ export function createSourcesView(options: {
     attached.replaceChildren();
     for (const source of options.sources.list()) {
       const row = Div().class('agent-source-row').build();
+      row.dataset.sourceId = source.id;
       if (!sourceMatches(source, search.value)) continue;
       const text = sourcePreview(source, labels.openSource ?? labels.excerpt, search.value, labels.previewTruncated);
       const remove = button(() => {
+        const index = [...attached.querySelectorAll('.agent-source-remove')].indexOf(remove);
         options.sources.remove(source.id);
         update();
+        const remaining = attached.querySelectorAll<HTMLButtonElement>('.agent-source-remove');
+        (remaining[Math.min(index, remaining.length - 1)] ?? attachFile).focus();
       });
       remove.className = 'agent-source-remove';
       remove.textContent = labels.remove;
@@ -156,7 +159,6 @@ export function createSourcesView(options: {
     offlineHint.textContent = labels.offline;
     syncConnectivity();
     excerpt.textContent = labels.excerpt;
-    labelViewBack(back, labels.close);
     localHeading.textContent = labels.local;
     attachFile.textContent = labels.attach;
     localField.text.textContent = labels.attach;
@@ -182,6 +184,21 @@ export function createSourcesView(options: {
     el,
     cancelPending,
     focus: () => heading.focus(),
+    openSource: (id: string): boolean => {
+      if (disposed || !options.sources.list().some((source) => source.id === id)) return false;
+      search.value = '';
+      update();
+      const row = [...attached.querySelectorAll<HTMLElement>('.agent-source-row')].find(
+        (candidate) => candidate.dataset.sourceId === id,
+      );
+      const preview = row?.querySelector<HTMLDetailsElement>('details');
+      if (!preview) return false;
+      preview.open = true;
+      preview.dispatchEvent(new Event('toggle'));
+      preview.querySelector('summary')?.focus();
+      row?.scrollIntoView?.({ block: 'nearest' });
+      return true;
+    },
     setLabels,
     refresh: update,
     dispose: () => {
diff --git a/lib/agent-plugin/ui/speech-input.ts b/lib/agent-plugin/ui/speech-input.ts
index eab5ad6cc..ca9581af4 100644
--- a/lib/agent-plugin/ui/speech-input.ts
+++ b/lib/agent-plugin/ui/speech-input.ts
@@ -1,4 +1,5 @@
 import 'ranui/popover';
+import 'ranui/select';
 import { getLanguage, t } from '@ranuts/shared/i18n';
 import type { ChatView } from '@ranuts/chat-ui';
 interface Recognition {
@@ -73,14 +74,20 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
   privacy.tabIndex = -1;
   const privacyToggle = document.createElement('button');
   privacyToggle.type = 'button';
+  privacyToggle.setAttribute('aria-haspopup', 'dialog');
   const privacyContent = document.createElement('r-content');
-  privacyContent.append(hint);
+  const options = document.createElement('div');
+  options.className = 'agent-speech-options';
+  const noticeEl = document.createElement('p');
+  noticeEl.className = 'agent-speech-notice';
+  options.append(language, noticeEl, hint);
+  privacyContent.append(options);
   privacyToggle.innerHTML =
-    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7v1"/></svg>';
+    '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>';
   privacy.append(privacyToggle, privacyContent);
   feedback.append(status);
   // Every state shares one toolbar; disclosures must not resize the draft.
-  root.append(mic, language, feedback, cancel, privacy);
+  root.append(mic, privacy, feedback, cancel);
   chat.actionsEl.append(root);
   let disclosed = false;
   let notice = '';
@@ -93,15 +100,39 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
   const pauseDisclosure = () => clearTimeout(disclosureTimer);
   const scheduleDisclosure = () => {
     pauseDisclosure();
-    if (!privacy.hasAttribute('open') || triggerHovered || popupHovered || isDisclosureFocused()) return;
+    if (
+      !privacy.hasAttribute('open') ||
+      language.hasAttribute('open') ||
+      triggerHovered ||
+      popupHovered ||
+      isDisclosureFocused()
+    )
+      return;
     disclosureTimer = setTimeout(() => privacy.removeAttribute('open'), 3000);
   };
+  // The installed ranui floating owner recognizes nested portaled select panels.
+  // Escape unwinds one disclosure at a time through public `open` attributes.
+  const dismissDisclosure = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.isComposing || !privacy.hasAttribute('open')) return;
+    event.preventDefault();
+    event.stopPropagation();
+    pauseDisclosure();
+    if (language.hasAttribute('open')) {
+      language.removeAttribute('open');
+      language.focus({ preventScroll: true });
+    } else {
+      privacy.removeAttribute('open');
+      privacyToggle.focus({ preventScroll: true });
+    }
+  };
   const bindPopup = () => {
     const popup = privacy.popoverContent;
     if (!popup) return;
     if (popup === boundPopup) return;
     boundPopup = popup;
     popup.classList.add('agent-speech-popover');
+    popup.setAttribute('role', 'dialog');
+    popup.setAttribute('aria-label', t('agentVoiceOptions'));
     popup.addEventListener('pointerenter', () => {
       popupHovered = true;
       pauseDisclosure();
@@ -112,13 +143,7 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
     });
     popup.addEventListener('focusin', pauseDisclosure);
     popup.addEventListener('focusout', () => queueMicrotask(scheduleDisclosure));
-    popup.addEventListener('keydown', (event) => {
-      if (event.key !== 'Escape') return;
-      event.preventDefault();
-      event.stopPropagation();
-      privacy.removeAttribute('open');
-      privacyToggle.focus({ preventScroll: true });
-    });
+    popup.addEventListener('keydown', dismissDisclosure, { capture: true });
   };
   const showDisclosure = () => {
     privacy.setAttribute('open', '');
@@ -126,13 +151,14 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
     scheduleDisclosure();
   };
   privacy.addEventListener('show', () => {
-    language.removeAttribute('open');
     privacyToggle.setAttribute('aria-expanded', 'true');
     bindPopup();
     scheduleDisclosure();
   });
-  language.addEventListener('show', () => privacy.removeAttribute('open'));
+  language.addEventListener('show', pauseDisclosure);
+  language.addEventListener('hide', scheduleDisclosure);
   privacy.addEventListener('hide', () => {
+    language.removeAttribute('open');
     privacyToggle.setAttribute('aria-expanded', 'false');
     pauseDisclosure();
     popupHovered = false;
@@ -148,6 +174,13 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
   privacy.addEventListener('focusin', pauseDisclosure);
   privacy.addEventListener('focusout', () => queueMicrotask(scheduleDisclosure));
   privacyToggle.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab' && !event.shiftKey && privacy.hasAttribute('open') && !language.disabled) {
+      // The dialog is portaled after the composer, outside its native tab order.
+      event.preventDefault();
+      event.stopPropagation();
+      language.focus({ preventScroll: true });
+      return;
+    }
     if (event.key !== 'Enter' && event.key !== ' ') return;
     event.preventDefault();
     event.stopPropagation();
@@ -183,10 +216,17 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
     feedback.hidden = !busy && !status.textContent;
     cancel.tabIndex = busy ? 0 : -1;
     mic.disabled = stopping;
+    language.setAttribute('label', t('agentSpeechLanguage'));
     language.setAttribute('aria-label', t('agentSpeechLanguage'));
     language.disabled = busy;
-    hint.textContent = notice || t('agentSpeechPrivacy');
-    privacyToggle.setAttribute('aria-label', hint.textContent);
+    hint.textContent = t('agentSpeechPrivacy');
+    noticeEl.textContent = notice;
+    noticeEl.hidden = !notice;
+    privacyToggle.setAttribute('aria-label', t('agentVoiceOptions'));
+    privacyToggle.title = t('agentVoiceOptions');
+    if (notice) privacyToggle.setAttribute('aria-describedby', feedback.id);
+    else privacyToggle.removeAttribute('aria-describedby');
+    boundPopup?.setAttribute('aria-label', t('agentVoiceOptions'));
     privacyToggle.setAttribute('aria-expanded', String(privacy.hasAttribute('open')));
     cancel.setAttribute('aria-label', t('agentSpeechCancel'));
     cancel.title = t('agentSpeechCancel');
@@ -205,6 +245,7 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
     stopping = false;
     listening = false;
     pauseDisclosure();
+    language.removeAttribute('open');
     privacy.removeAttribute('open');
     notice = '';
     status.textContent = '';
@@ -356,19 +397,7 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
       mic.focus();
     }
   });
-  privacy.addEventListener(
-    'keydown',
-    (event) => {
-      if (event.key === 'Escape' && privacy.hasAttribute('open')) {
-        event.preventDefault();
-        event.stopPropagation();
-        pauseDisclosure();
-        privacy.removeAttribute('open');
-        privacyToggle.focus({ preventScroll: true });
-      }
-    },
-    { capture: true },
-  );
+  privacy.addEventListener('keydown', dismissDisclosure, { capture: true });
   feedback.addEventListener('keydown', (event) => {
     if (event.key === 'Escape' && !event.defaultPrevented && !event.isComposing && busy) {
       close(true);
@@ -380,6 +409,7 @@ export function mountSpeechInput(chat: SpeechComposer, allowed: () => boolean) {
     if (busy) close(false, true);
     else if (status.textContent) {
       status.textContent = '';
+      notice = '';
       render();
     }
   });
diff --git a/lib/agent-plugin/ui/task-entry.ts b/lib/agent-plugin/ui/task-entry.ts
index 13bc9ce61..e80908759 100644
--- a/lib/agent-plugin/ui/task-entry.ts
+++ b/lib/agent-plugin/ui/task-entry.ts
@@ -42,6 +42,13 @@ interface Task {
   prompt: Parameters<typeof t>[0];
   task: RequestIntent['task'];
 }
+const taskIcons: Record<string, string> = {
+  compose: '<path d="m15 4 5 5M4 20l5-1L20 8a3.5 3.5 0 0 0-5-5L4 14z"/>',
+  read: '<path d="M4 4h6a3 3 0 0 1 3 3v14a4 4 0 0 0-4-2H4zM13 7a3 3 0 0 1 3-3h4v15h-3a4 4 0 0 0-4 2"/>',
+  explain: '<circle cx="12" cy="12" r="9"/><path d="M9 9a3 3 0 0 1 6 0c0 2-3 2-3 4M12 16v1"/>',
+  summarize: '<path d="M5 5h14M5 10h14M5 15h9M5 20h6"/>',
+  polish: '<path d="m14 4 6 6-10 10H4v-6zM12 6l6 6M4 4v4M2 6h4"/>',
+};
 const polish: Task = { id: 'polish', label: 'agentEntryPolish', prompt: 'agentEntryPolishPrompt', task: 'rewrite' };
 const summarize: Task = {
   id: 'summarize',
@@ -160,6 +167,9 @@ export function createTaskEntry(options: {
             .class('agent-task-action')
             .text(t(item.label))
             .build();
+          const icon = Span().class('agent-task-icon').attr('aria-hidden', 'true').build();
+          icon.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">${taskIcons[item.id] ?? taskIcons.read}</svg>`;
+          button.prepend(icon);
           button.addEventListener('click', () => {
             if (options.getInput().trim()) {
               help.textContent = t('agentEntryDraftPresent');
@@ -227,7 +237,9 @@ export function createTaskEntry(options: {
             ? t('agentEntrySmaller')
             : readonly
               ? t('agentEntryReadOnly')
-              : t('agentEntryStaging');
+              : staged
+                ? t('agentEntryStaging')
+                : '';
   };
   return { el, update, inputChanged, check, consume };
 }
diff --git a/lib/agent-plugin/ui/view-header.ts b/lib/agent-plugin/ui/view-header.ts
index 07c0a38f2..5e5bee39b 100644
--- a/lib/agent-plugin/ui/view-header.ts
+++ b/lib/agent-plugin/ui/view-header.ts
@@ -13,4 +13,7 @@ export function labelViewBack(back: HTMLButtonElement, destination: string): voi
   back.title = destination;
   back.innerHTML =
     '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m14 6-6 6 6 6"/></svg>';
+  const label = document.createElement('span');
+  label.textContent = destination;
+  back.append(label);
 }
diff --git a/lib/agent-plugin/ui/workspace-labels.ts b/lib/agent-plugin/ui/workspace-labels.ts
index 5941a2346..58529d264 100644
--- a/lib/agent-plugin/ui/workspace-labels.ts
+++ b/lib/agent-plugin/ui/workspace-labels.ts
@@ -51,6 +51,15 @@ export function artifactLabels(): ArtifactsLabels {
     import: t('agentArtifactImport'),
     importHint: t('agentArtifactImportHint'),
     preview: t('agentArtifactPreview'),
+    codeBlock: t('agentCodeBlock'),
+    table: t('agentMarkdownTable'),
+    copy: t('agentCopy'),
+    copied: t('agentCopied'),
+    copyFailed: t('agentCopyFailed'),
+    edit: t('agentArtifactEdit'),
+    cancelEditing: t('agentArtifactCancelEditing'),
+    sourceData: t('agentArtifactSourceData'),
+    unsaved: t('agentArtifactUnsaved'),
     next: t('agentArtifactNext'),
     previous: t('agentArtifactPrevious'),
     structuredHint: t('agentArtifactStructuredHint'),
@@ -80,6 +89,8 @@ export function resultActionLabels(): ResultActionLabels {
 import type { ArtifactWorkflowLabels } from './artifact-workflow';
 export function artifactWorkflowLabels(): ArtifactWorkflowLabels {
   return {
+    before: t('agentPlanBefore'),
+    after: t('agentPlanAfter'),
     entire: t('agentArtifactRevisionEntire'),
     selected: t('agentSelectionContext'),
     recovered: t('agentArtifactRevisionRecovered'),
diff --git a/packages/agent-core/src/llm/anthropic.ts b/packages/agent-core/src/llm/anthropic.ts
index c76c088a2..573fe03fd 100644
--- a/packages/agent-core/src/llm/anthropic.ts
+++ b/packages/agent-core/src/llm/anthropic.ts
@@ -27,7 +27,12 @@ interface AnthropicToolUseBlock {
   name: string;
   input: Record<string, unknown>;
 }
-type AnthropicBlock = AnthropicTextBlock | AnthropicToolUseBlock | { type: string };
+type AnthropicBlock =
+  | AnthropicTextBlock
+  | AnthropicToolUseBlock
+  | Anthropic.ThinkingBlock
+  | Anthropic.RedactedThinkingBlock
+  | { type: string };
 
 interface AnthropicResponse {
   content: AnthropicBlock[];
@@ -36,11 +41,11 @@ interface AnthropicResponse {
 
 /** A streaming handle from `messages.stream()` (the bits this provider uses). */
 export interface AnthropicStream {
-  on(event: 'text', listener: (textDelta: string) => void): unknown;
+  on(event: 'text' | 'thinking', listener: (textDelta: string) => void): unknown;
   finalMessage(): Promise<AnthropicResponse>;
   /** Optional SDK lifecycle methods; minimal injected clients need not implement them. */
   abort?(): void;
-  off?(event: 'text', listener: (textDelta: string) => void): unknown;
+  off?(event: 'text' | 'thinking', listener: (textDelta: string) => void): unknown;
 }
 
 /** The slice of the Anthropic client this provider uses (eases test mocking). */
@@ -161,6 +166,7 @@ export class AnthropicProvider implements LLMProvider {
     tools: LLMToolDef[],
     owner?: AbortSignal,
     onDelta?: (textDelta: string) => void,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
     owner?.throwIfAborted();
     if (!Number.isFinite(this.timeoutMs) || this.timeoutMs <= 0 || this.timeoutMs > 2_147_483_647)
@@ -191,6 +197,16 @@ export class AnthropicProvider implements LLMProvider {
       () => controller.abort(new DOMException('AI request timed out', 'TimeoutError')),
       this.timeoutMs,
     );
+    let reasoningObserved = false;
+    const reasoningListener = (delta: string) => {
+      if (!active || controller.signal.aborted || !delta) return;
+      try {
+        reasoningObserved = true;
+        onReasoningDelta?.(delta);
+      } catch (error) {
+        controller.abort(error);
+      }
+    };
     const listener = (delta: string) => {
       if (!active || controller.signal.aborted) return;
       try {
@@ -211,11 +227,20 @@ export class AnthropicProvider implements LLMProvider {
         // Observe rejection before attaching callbacks: minimal host clients may
         // emit synchronously, and callbacks can stop or throw reentrantly.
         const final = stream.finalMessage();
+        if (onReasoningDelta) stream.on('thinking', reasoningListener);
         stream.on('text', listener);
         return final;
       })();
       const response = await Promise.race([pending, aborted]);
       controller.signal.throwIfAborted();
+      if (!reasoningObserved && onReasoningDelta) {
+        for (const block of response.content ?? []) {
+          if (block.type !== 'thinking') continue;
+          const thinking = (block as { type: string; thinking?: unknown }).thinking;
+          if (typeof thinking === 'string' && thinking) reasoningListener(thinking);
+        }
+      }
+      controller.signal.throwIfAborted();
       return parseAnthropicResponse(response);
     } catch (error) {
       if (!controller.signal.aborted) controller.abort(error);
@@ -227,6 +252,7 @@ export class AnthropicProvider implements LLMProvider {
       controller.signal.removeEventListener('abort', onAbort);
       try {
         stream?.off?.('text', listener);
+        if (onReasoningDelta) stream?.off?.('thinking', reasoningListener);
       } catch {}
     }
   }
@@ -240,7 +266,8 @@ export class AnthropicProvider implements LLMProvider {
     tools: LLMToolDef[],
     onDelta: (textDelta: string) => void,
     signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
-    return this.request(messages, tools, signal, onDelta);
+    return this.request(messages, tools, signal, onDelta, onReasoningDelta);
   }
 }
diff --git a/packages/agent-core/src/llm/gemini.ts b/packages/agent-core/src/llm/gemini.ts
index 0391c6de2..3872eff0e 100644
--- a/packages/agent-core/src/llm/gemini.ts
+++ b/packages/agent-core/src/llm/gemini.ts
@@ -197,8 +197,9 @@ export class GeminiProvider implements LLMProvider {
     tools: LLMToolDef[],
     onDelta: (text: string) => void,
     signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
-    return tools.length ? this.chat(messages, tools, signal) : this.request(messages, tools, signal, onDelta);
+    return this.request(messages, tools, signal, tools.length ? undefined : onDelta, onReasoningDelta);
   }
 
   private async request(
@@ -206,6 +207,7 @@ export class GeminiProvider implements LLMProvider {
     tools: LLMToolDef[],
     signal?: AbortSignal,
     onDelta?: (text: string) => void,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
     signal?.throwIfAborted();
     if (!this.apiKey) {
@@ -238,7 +240,12 @@ export class GeminiProvider implements LLMProvider {
           const candidate = (value as GeminiResponse).candidates?.[0];
           for (const part of candidate?.content?.parts ?? []) {
             if (part.functionCall) throw new Error('Unexpected Gemini tool response');
-            if (part.thought || !part.text) continue;
+            if (part.thought) {
+              if (!finish && typeof part.text === 'string' && part.text) onReasoningDelta?.(part.text);
+              signal?.throwIfAborted();
+              continue;
+            }
+            if (!part.text) continue;
             if (finish || typeof part.text !== 'string') throw new Error('Invalid Gemini stream');
             text += part.text;
             onDelta(part.text);
@@ -253,6 +260,11 @@ export class GeminiProvider implements LLMProvider {
           assertStreamRecord('Gemini', value);
           fallback = parseGeminiResponse(value as GeminiResponse);
           if (fallback.toolCalls.length) throw new Error('Unexpected Gemini tool response');
+          for (const part of (value as GeminiResponse).candidates?.[0]?.content?.parts ?? []) {
+            if (part.thought && typeof part.text === 'string' && part.text) onReasoningDelta?.(part.text);
+            signal?.throwIfAborted();
+          }
+          signal?.throwIfAborted();
           if (fallback.text) onDelta(fallback.text);
         },
       );
@@ -273,6 +285,11 @@ export class GeminiProvider implements LLMProvider {
       this.requestOptions,
     );
     signal?.throwIfAborted();
+    for (const part of data.candidates?.[0]?.content?.parts ?? []) {
+      if (part.thought && typeof part.text === 'string' && part.text) onReasoningDelta?.(part.text);
+      signal?.throwIfAborted();
+    }
+    signal?.throwIfAborted();
     return parseGeminiResponse(data);
   }
 }
diff --git a/packages/agent-core/src/llm/loopback.ts b/packages/agent-core/src/llm/loopback.ts
index e4aea65eb..2f967f0f7 100644
--- a/packages/agent-core/src/llm/loopback.ts
+++ b/packages/agent-core/src/llm/loopback.ts
@@ -80,9 +80,10 @@ export class LoopbackProvider implements LocalLLMProvider {
     tools: LLMToolDef[],
     onDelta: (text: string) => void,
     signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
     if (tools.length) return Promise.reject(new Error('Local service cannot execute editor tools'));
-    return this.generate(messages, undefined, signal, onDelta);
+    return this.generate(messages, undefined, signal, onDelta, onReasoningDelta);
   }
   generateJSON(messages: LLMMessage[], schema: Record<string, unknown>, signal?: AbortSignal): Promise<LLMResponse> {
     return this.generate(messages, schema, signal);
@@ -92,6 +93,7 @@ export class LoopbackProvider implements LocalLLMProvider {
     schema?: Record<string, unknown>,
     signal?: AbortSignal,
     onDelta?: (text: string) => void,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
     if (!this.isReady()) throw new Error('Connect the local model first');
     // Translate completed host tool exchanges to Ollama's documented chat history.
@@ -133,9 +135,13 @@ export class LoopbackProvider implements LocalLLMProvider {
         const data = value as {
           done?: boolean;
           done_reason?: string;
-          message?: { content?: string; tool_calls?: unknown[] };
+          message?: { content?: string; thinking?: string; tool_calls?: unknown[] };
         };
         if (data.message?.tool_calls?.length) throw new Error('Unexpected local service tool response');
+        const reasoning = data.message?.thinking;
+        if (typeof reasoning === 'string' && reasoning) onReasoningDelta?.(reasoning);
+        this.lifetime.signal.throwIfAborted();
+        signal?.throwIfAborted();
         const piece = data.message?.content;
         if (piece !== undefined && typeof piece !== 'string') throw new Error('Invalid local service stream');
         if (piece) {
@@ -185,7 +191,7 @@ export class LoopbackProvider implements LocalLLMProvider {
     )) as {
       done?: boolean;
       done_reason?: string;
-      message?: { content?: string; tool_calls?: unknown[] };
+      message?: { content?: string; thinking?: string; tool_calls?: unknown[] };
       error?: unknown;
     } | null;
     if (
diff --git a/packages/agent-core/src/llm/ollama.ts b/packages/agent-core/src/llm/ollama.ts
index 807a58395..fde172efd 100644
--- a/packages/agent-core/src/llm/ollama.ts
+++ b/packages/agent-core/src/llm/ollama.ts
@@ -8,7 +8,13 @@
  * configured), and defaults to a small local model. A key is still accepted for
  * remote/proxied Ollama deployments that require auth.
  */
-import { type OpenAICompletion, parseOpenAIResponse, toOpenAIMessages, toOpenAITools } from './openai-format';
+import {
+  type OpenAICompletion,
+  parseOpenAIResponse,
+  openAIReasoning,
+  toOpenAIMessages,
+  toOpenAITools,
+} from './openai-format';
 import { fetchOpenAIStream } from './openai-stream';
 import { getApiKey } from './keys';
 import { DEFAULT_SYSTEM_PROMPT } from './prompt';
@@ -57,8 +63,9 @@ export class OllamaProvider implements LLMProvider {
     tools: LLMToolDef[],
     onDelta: (text: string) => void,
     signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
-    if (tools.length) return this.chat(messages, tools, signal);
+    if (tools.length) return this.request(messages, tools, signal, onReasoningDelta);
     signal?.throwIfAborted();
     return fetchOpenAIStream(
       'Ollama',
@@ -79,10 +86,20 @@ export class OllamaProvider implements LLMProvider {
       },
       this.requestOptions,
       onDelta,
+      onReasoningDelta,
     );
   }
 
-  async chat(messages: LLMMessage[], tools: LLMToolDef[], signal?: AbortSignal): Promise<LLMResponse> {
+  chat(messages: LLMMessage[], tools: LLMToolDef[], signal?: AbortSignal): Promise<LLMResponse> {
+    return this.request(messages, tools, signal);
+  }
+
+  private async request(
+    messages: LLMMessage[],
+    tools: LLMToolDef[],
+    signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
+  ): Promise<LLMResponse> {
     const headers: Record<string, string> = { 'Content-Type': 'application/json' };
     if (this.apiKey) {
       headers.Authorization = `Bearer ${this.apiKey}`;
@@ -102,6 +119,10 @@ export class OllamaProvider implements LLMProvider {
       },
       this.requestOptions,
     );
+    signal?.throwIfAborted();
+    const reasoning = openAIReasoning(completion.choices?.[0]?.message);
+    if (reasoning) onReasoningDelta?.(reasoning);
+    signal?.throwIfAborted();
     return parseOpenAIResponse(completion);
   }
 }
diff --git a/packages/agent-core/src/llm/openai-format.ts b/packages/agent-core/src/llm/openai-format.ts
index dd9cf2eb2..95968a0d1 100644
--- a/packages/agent-core/src/llm/openai-format.ts
+++ b/packages/agent-core/src/llm/openai-format.ts
@@ -24,11 +24,22 @@ export interface OpenAITimings {
   predicted_per_second?: number;
 }
 
+export interface OpenAIReasoning {
+  reasoning_content?: string | null;
+  reasoning?: string | null;
+}
+
+/** Compatible APIs expose either alias. Prefer reasoning_content without double emission. */
+export function openAIReasoning(value?: OpenAIReasoning): string | undefined {
+  if (typeof value?.reasoning_content === 'string' && value.reasoning_content) return value.reasoning_content;
+  if (typeof value?.reasoning === 'string' && value.reasoning) return value.reasoning;
+}
+
 export interface OpenAICompletion {
   timings?: OpenAITimings | null;
   usage?: OpenAIUsage | null;
   choices: Array<{
-    message: { content?: string | null; tool_calls?: OpenAIToolCall[] };
+    message: OpenAIReasoning & { content?: string | null; tool_calls?: OpenAIToolCall[] };
     finish_reason?: string;
   }>;
 }
@@ -100,7 +111,7 @@ export interface OpenAIStreamChunk {
   timings?: OpenAITimings | null;
   usage?: OpenAIUsage | null;
   choices?: Array<{
-    delta?: {
+    delta?: OpenAIReasoning & {
       content?: string | null;
       tool_calls?: Array<{ index?: number; id?: string; function?: { name?: string; arguments?: string } }>;
     };
diff --git a/packages/agent-core/src/llm/openai-stream.ts b/packages/agent-core/src/llm/openai-stream.ts
index 4ad746fb0..7e67009b9 100644
--- a/packages/agent-core/src/llm/openai-stream.ts
+++ b/packages/agent-core/src/llm/openai-stream.ts
@@ -1,4 +1,4 @@
-import { type OpenAICompletion, type OpenAIStreamChunk, parseOpenAIResponse } from './openai-format';
+import { type OpenAICompletion, type OpenAIStreamChunk, parseOpenAIResponse, openAIReasoning } from './openai-format';
 import { assertStreamRecord, fetchProviderStream } from './provider-stream';
 import type { ProviderHttpOptions } from './provider-http';
 import type { LLMResponse } from './types';
@@ -10,6 +10,7 @@ export async function fetchOpenAIStream(
   init: RequestInit,
   options: ProviderHttpOptions,
   onDelta: (text: string) => void,
+  onReasoningDelta?: (text: string) => void,
 ): Promise<LLMResponse> {
   let text = '';
   let finish: string | undefined;
@@ -32,6 +33,9 @@ export async function fetchOpenAIStream(
       if (choice?.delta?.tool_calls?.length || choice?.finish_reason === 'tool_calls')
         throw new Error(`Unexpected ${provider} tool response`);
       if (chunk.usage) usage = chunk.usage;
+      const reasoning = openAIReasoning(choice?.delta);
+      if (reasoning && !finish) onReasoningDelta?.(reasoning);
+      init.signal?.throwIfAborted();
       if (choice?.delta?.content) {
         if (finish || typeof choice.delta.content !== 'string') throw new Error(`Invalid ${provider} stream`);
         text += choice.delta.content;
@@ -41,8 +45,12 @@ export async function fetchOpenAIStream(
     },
     (value) => {
       assertStreamRecord(provider, value);
-      fallback = parseOpenAIResponse(value as unknown as OpenAICompletion);
+      const completion = value as unknown as OpenAICompletion;
+      fallback = parseOpenAIResponse(completion);
       if (fallback.toolCalls.length) throw new Error(`Unexpected ${provider} tool response`);
+      const reasoning = openAIReasoning(completion.choices?.[0]?.message);
+      if (reasoning) onReasoningDelta?.(reasoning);
+      init.signal?.throwIfAborted();
       if (fallback.text) onDelta(fallback.text);
     },
   );
diff --git a/packages/agent-core/src/llm/openai.ts b/packages/agent-core/src/llm/openai.ts
index bfa3934f2..44edbdca4 100644
--- a/packages/agent-core/src/llm/openai.ts
+++ b/packages/agent-core/src/llm/openai.ts
@@ -6,7 +6,13 @@
  * OpenAI-format converters. Uses fetch (injectable) rather than a vendor SDK to
  * avoid another dependency; the request shape is small and stable.
  */
-import { type OpenAICompletion, parseOpenAIResponse, toOpenAIMessages, toOpenAITools } from './openai-format';
+import {
+  type OpenAICompletion,
+  parseOpenAIResponse,
+  openAIReasoning,
+  toOpenAIMessages,
+  toOpenAITools,
+} from './openai-format';
 import { fetchOpenAIStream } from './openai-stream';
 import { getApiKey } from './keys';
 import { DEFAULT_SYSTEM_PROMPT } from './prompt';
@@ -53,8 +59,9 @@ export class OpenAIProvider implements LLMProvider {
     tools: LLMToolDef[],
     onDelta: (text: string) => void,
     signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse> {
-    if (tools.length) return this.chat(messages, tools, signal);
+    if (tools.length) return this.request(messages, tools, signal, onReasoningDelta);
     signal?.throwIfAborted();
     if (!this.apiKey) throw new Error('OpenAI API key is not configured');
     return fetchOpenAIStream(
@@ -73,10 +80,20 @@ export class OpenAIProvider implements LLMProvider {
       },
       this.requestOptions,
       onDelta,
+      onReasoningDelta,
     );
   }
 
-  async chat(messages: LLMMessage[], tools: LLMToolDef[], signal?: AbortSignal): Promise<LLMResponse> {
+  chat(messages: LLMMessage[], tools: LLMToolDef[], signal?: AbortSignal): Promise<LLMResponse> {
+    return this.request(messages, tools, signal);
+  }
+
+  private async request(
+    messages: LLMMessage[],
+    tools: LLMToolDef[],
+    signal?: AbortSignal,
+    onReasoningDelta?: (text: string) => void,
+  ): Promise<LLMResponse> {
     signal?.throwIfAborted();
     if (!this.apiKey) {
       throw new Error('OpenAI API key is not configured');
@@ -97,6 +114,9 @@ export class OpenAIProvider implements LLMProvider {
       this.requestOptions,
     );
     signal?.throwIfAborted();
+    const reasoning = openAIReasoning(completion.choices?.[0]?.message);
+    if (reasoning) onReasoningDelta?.(reasoning);
+    signal?.throwIfAborted();
     return parseOpenAIResponse(completion);
   }
 }
diff --git a/packages/agent-core/src/llm/types.ts b/packages/agent-core/src/llm/types.ts
index 22238cc4a..cf77ed7b1 100644
--- a/packages/agent-core/src/llm/types.ts
+++ b/packages/agent-core/src/llm/types.ts
@@ -116,6 +116,8 @@ export interface LLMProvider {
     tools: LLMToolDef[],
     onDelta: (textDelta: string) => void,
     signal?: AbortSignal,
+    /** Provider-returned public reasoning only; ephemeral, never part of response/history. */
+    onReasoningDelta?: (text: string) => void,
   ): Promise<LLMResponse>;
 }
 
diff --git a/packages/agent-core/src/runtime.ts b/packages/agent-core/src/runtime.ts
index e6aa8bf36..12f14386d 100644
--- a/packages/agent-core/src/runtime.ts
+++ b/packages/agent-core/src/runtime.ts
@@ -30,6 +30,8 @@ export type AgentEvent =
   | { type: 'usage'; usage: NonNullable<LLMResponse['usage']> }
   | { type: 'assistant'; text: string; streamed: boolean; interrupted?: true }
   | { type: 'assistant_delta'; text: string }
+  | { type: 'reasoning_delta'; text: string }
+  | { type: 'reasoning_end' }
   | { type: 'tool_call'; name: string; input: Record<string, unknown> }
   | {
       type: 'tool_result';
@@ -158,23 +160,55 @@ export async function runAgent(
       contextNoticeSent = true;
       options.onContextTrimmed?.();
     }
-    const response = provider.chatStream
-      ? await provider.chatStream(
-          requestMessages,
-          toolDefs,
-          (delta) => {
-            if (!delta || options.signal?.aborted) return;
-            if (!firstProviderText) {
-              firstProviderText = true;
-              options.onFirstProviderText?.();
-            }
-            streamed = true;
-            if (toolDefs.length && provider.streamingTextMode !== 'answer-only') deferredDeltas.push(delta);
-            else options.onEvent?.({ type: 'assistant_delta', text: delta });
-          },
-          options.signal,
-        )
-      : await provider.chat(requestMessages, toolDefs, options.signal);
+    // Each inference owns its callbacks. A settled provider may retain listeners
+    // while a later inference is still running under the same run/signal.
+    let inferenceActive = true;
+    let reasoningObserved = false;
+    let reasoningClosed = false;
+    const inferenceLive = () => {
+      if (!inferenceActive || options.signal?.aborted) return false;
+      options.assertCurrent?.();
+      return !options.signal?.aborted;
+    };
+    const endReasoning = () => {
+      if (reasoningClosed) return;
+      reasoningClosed = true;
+      if (reasoningObserved && inferenceLive()) options.onEvent?.({ type: 'reasoning_end' });
+    };
+    let response: LLMResponse;
+    try {
+      response = provider.chatStream
+        ? await provider.chatStream(
+            requestMessages,
+            toolDefs,
+            (delta) => {
+              if (!delta || !inferenceLive()) return;
+              endReasoning();
+              if (!inferenceLive()) return;
+              if (!firstProviderText) {
+                firstProviderText = true;
+                options.onFirstProviderText?.();
+              }
+              if (!inferenceLive()) return;
+              streamed = true;
+              if (toolDefs.length && provider.streamingTextMode !== 'answer-only') deferredDeltas.push(delta);
+              else options.onEvent?.({ type: 'assistant_delta', text: delta });
+            },
+            options.signal,
+            (text) => {
+              if (!text || reasoningClosed || !inferenceLive()) return;
+              reasoningObserved = true;
+              options.onEvent?.({ type: 'reasoning_delta', text });
+            },
+          )
+        : await provider.chat(requestMessages, toolDefs, options.signal);
+    } finally {
+      try {
+        endReasoning();
+      } finally {
+        inferenceActive = false;
+      }
+    }
     if (options.signal?.aborted) return { text: '', messages, toolCallCount, stoppedOnLimit: false, aborted: true };
     options.assertCurrent?.();
     if (response.contextTrimmed && !contextNoticeSent) {
diff --git a/packages/chat-ui/CLAUDE.md b/packages/chat-ui/CLAUDE.md
index f763fe89d..88a2e7b6b 100644
--- a/packages/chat-ui/CLAUDE.md
+++ b/packages/chat-ui/CLAUDE.md
@@ -46,6 +46,8 @@ container.appendChild(chat.el); // mount the root element
 | `append({ role, text })`                                                       | Add a finished message. `role`: `'user' \| 'agent' \| 'tool' \| 'status' \| 'error'`.                |
 | `restoreHistory(messages, { pageSize?: number })`                              | Opt into a recent window (default/max 40) and load earlier messages without replacing existing rows. |
 | `appendMany(messages)`                                                         | Add finished messages in order with one final layout update, for restoring history.                  |
+| `appendReasoningDelta(text)`                                                   | Display provider-exposed reasoning outside message/source history.                                   |
+| `endReasoning({ interrupted?: boolean })`                                      | End one inference phase; preserve explicit interruption identity.                                    |
 | `appendDelta(text)`                                                            | Stream into a live agent bubble (auto-created on first delta).                                       |
 | `endStream()`                                                                  | Finalise the streaming bubble (drops the caret).                                                     |
 | `observePresentation(callback?)`                                               | Arm one request-owned visible DOM text observation; omit the callback to cancel.                     |
@@ -56,8 +58,54 @@ container.appendChild(chat.el); // mount the root element
 | `setLabels(labels)`                                                            | Re-apply labels live (e.g. language change).                                                         |
 | `dispose()`                                                                    | Release resize observers and copy-feedback timers when unmounting.                                   |
 
-`chat.actionsEl` is a host-populated slot directly above the input (an IM-style
-compose toolbar) — append your own controls; it collapses when empty.
+`chat.actionsEl` is the host-populated toolbar beside Send/Stop, below the input.
+Place source controls here and source chips in `contextEl` above the input.
+`pendingEl` stays outside the named composer group; the host owns its queue.
+The input grows to 160px, preserves IME and Shift+Enter, and keeps the next draft editable.
+Localize the accessible group names with `labels.composer` and `labels.actions`;
+`setLabels()` updates them without replacing controls.
+
+## Public reasoning
+
+`appendReasoningDelta(text)` accepts only provider-exposed reasoning during an
+active run. It lazily creates native ranui `r-reasoning`; unsupported providers
+show no reasoning row. `endReasoning({ interrupted?: boolean })` ends one
+inference phase. First answer text, a tool/review/non-answer phase and `endStream()`
+also end it; Stop, error/status and settlement of an unfinished phase mark it
+interrupted. An explicit interruption rejects further reasoning for that run.
+
+```ts
+chat.setRunning(true);
+chat.appendReasoningDelta(publicReasoningDelta); // separate provider callback
+chat.endReasoning(); // inference completed; repeat for later inference phases
+chat.appendDelta(answerDelta); // answer source only
+chat.endStream();
+chat.setRunning(false);
+```
+
+The component coalesces reasoning content with its layout frame and preserves
+reader-owned expansion and scrolling. It never assigns a model duration.
+The shared budget is 64 KiB of UTF-8 per user run, truncated at a code-point
+boundary with one notice. Surrogate pairs split between deltas are buffered;
+orphaned surrogates become U+FFFD at the phase boundary. Extra text is ignored until the next false → true
+`setRunning` transition. Repeated `setRunning(true)` does not reset the budget.
+
+Reasoning is volatile presentation, separate from `ChatMessage`, `data-source`,
+history, answer getters, Copy, Save, Apply and message presentation/provenance
+hooks. Hosts must keep it out of model context and persistence. `clear()`,
+`restoreHistory()` and `dispose()` discard it and reject stale reasoning; clear
+retains the host's run controls until settlement. Hosts still own request-identity
+guards when routing asynchronous callbacks. Localize `reasoning`,
+`reasoningInterrupted`, `reasoningTruncated` (English defaults: “Reasoning”,
+“Reasoning interrupted”, “Reasoning truncated”).
+
+`renderChatMarkdown(target, text)` exports the same completed-answer renderer
+for host previews. It replaces target children with DOM nodes, treats model HTML
+and image syntax as literal text, and permits only explicit `http:`, `https:` and
+`mailto:` links, opened with `noopener noreferrer`. It neither loads remote media
+nor inserts model HTML. The caller owns input bounds and styling; use a
+`cui-bubble` container inside the existing ChatView style scope when sharing the
+conversation typography.
 
 ## Canonical streaming flow
 
diff --git a/packages/chat-ui/README.md b/packages/chat-ui/README.md
index a46ce5d0e..dd4efcf7b 100644
--- a/packages/chat-ui/README.md
+++ b/packages/chat-ui/README.md
@@ -39,6 +39,7 @@ Override the look via the `--cui-*` custom properties on `.cui-root`.
 ## API
 
 - `append({ role, text })` — add a finished message (`user` / `agent` / `tool` / `status` / `error`).
+- `appendReasoningDelta(text)` / `endReasoning({ interrupted?: boolean })` — display and finish ephemeral provider-exposed reasoning.
 - `appendDelta(text)` — stream text into a live agent bubble (auto-created).
 - `endStream()` — finalise the streaming bubble.
 - `setRunning(bool)` — update run controls while keeping the next draft editable; queue acceptance is opt-in.
@@ -47,7 +48,67 @@ Override the look via the `--cui-*` custom properties on `.cui-root`.
 - `clear()` — remove messages and waiting feedback; it does not stop the host's run.
 - `getInput()` / `setInput(text)` / `focus()` — input helpers.
 - `setLabels(labels)` — update labels live (e.g. language change).
-- `actionsEl` — host-populated slot above the input (compose toolbar); collapses when empty.
+- `actionsEl` — host-populated toolbar beside Send/Stop, below the input.
+- `contextEl` — host-populated source context above the input, inside the composer.
+- `pendingEl` — host-populated queue footer outside the composer.
+- `dispose()` — release observers/timers and discard ephemeral reasoning.
+
+`labels.composer` and `labels.actions` name the accessible composer and its
+control row; both update live through `setLabels()`.
+
+## Public reasoning
+
+`appendReasoningDelta(text)` accepts only provider-exposed reasoning during an
+active run. It lazily creates native ranui `r-reasoning`; unsupported providers
+show no reasoning row. `endReasoning({ interrupted?: boolean })` ends one
+inference phase. First answer text, a tool/review/non-answer phase and `endStream()`
+also end it; Stop, error/status and settlement of an unfinished phase mark it
+interrupted. An explicit interruption rejects further reasoning for that run.
+
+```ts
+chat.setRunning(true);
+chat.appendReasoningDelta(publicReasoningDelta); // separate provider callback
+chat.endReasoning(); // inference completed; repeat for later inference phases
+chat.appendDelta(answerDelta); // answer source only
+chat.endStream();
+chat.setRunning(false);
+```
+
+The component coalesces reasoning content with its layout frame and preserves
+reader-owned expansion and scrolling. It never assigns a model duration.
+The shared budget is 64 KiB of UTF-8 per user run, truncated at a code-point
+boundary with one notice. Surrogate pairs split between deltas are buffered;
+orphaned surrogates become U+FFFD at the phase boundary. Extra text is ignored until the next false → true
+`setRunning` transition. Repeated `setRunning(true)` does not reset the budget.
+
+Reasoning is volatile presentation, separate from `ChatMessage`, `data-source`,
+history, answer getters, Copy, Save, Apply and message presentation/provenance
+hooks. Hosts must keep it out of model context and persistence. `clear()`,
+`restoreHistory()` and `dispose()` discard it and reject stale reasoning; clear
+retains the host's run controls until settlement. Hosts still own request-identity
+guards when routing asynchronous callbacks. Localize `reasoning`,
+`reasoningInterrupted`, `reasoningTruncated` (English defaults: “Reasoning”,
+“Reasoning interrupted”, “Reasoning truncated”).
+
+`renderChatMarkdown(target, text)` exports the same completed-answer renderer
+for host previews. It replaces target children with DOM nodes, treats model HTML
+and image syntax as literal text, and permits only explicit `http:`, `https:` and
+`mailto:` links, opened with `noopener noreferrer`. It neither loads remote media
+nor inserts model HTML. The caller owns input bounds. Shared table/code styles are
+injected even for artifact-only previews; prose typography remains host-owned.
+Tables honor declared column alignment and have a named keyboard-scroll region.
+Code blocks preserve literal text in a local scroll frame with a language and
+Copy header. Supported completed fences up to 8000 characters receive lazy
+Shiki token colors; unknown, unfinished and larger fences stay plain. Highlighting
+never replaces an active text selection and theme changes only recolor tokens.
+
+Hosts with a mount/unmount lifecycle should create
+`new MarkdownPresentation(root, labels)`, pass it as the optional third argument
+to `renderChatMarkdown(target, text, presentation)`, call `setLabels(...)` for live
+localization and `dispose()` on unmount. This releases clipboard feedback timers
+and guards late clipboard/highlight results. ChatView already owns this lifecycle.
+Copy uses the displayed code payload; message Copy/Save/Apply still use the original
+answer source. Code blocks have no implied execution or preview action.
 
 Waiting feedback appears immediately, with a locally measured clock formatted
 by `labels.elapsed(seconds)` and a classification label from `labels.routing`.
diff --git a/packages/chat-ui/package.json b/packages/chat-ui/package.json
index 9e449c5a1..31f01e571 100644
--- a/packages/chat-ui/package.json
+++ b/packages/chat-ui/package.json
@@ -24,7 +24,8 @@
   "dependencies": {
     "marked": "16.4.2",
     "ranui": "0.5.0",
-    "ranuts": "0.5.0"
+    "ranuts": "0.5.0",
+    "shiki": "4.4.3"
   },
   "devDependencies": {
     "typescript": "^6.0.3"
diff --git a/packages/chat-ui/src/chat-view.ts b/packages/chat-ui/src/chat-view.ts
index 0817ed794..a9f5b8e09 100644
--- a/packages/chat-ui/src/chat-view.ts
+++ b/packages/chat-ui/src/chat-view.ts
@@ -1,7 +1,9 @@
 import { ButtonBuilder, Div, Span, View } from 'ranui/builder';
 import { throttle } from 'ranuts/utils';
+import { Reasoning } from 'ranui/reasoning';
 import { ensureChatUiStyles } from './styles';
 import { renderMarkdown } from './markdown';
+import { MarkdownPresentation } from './markdown-presentation';
 import { StreamingMarkdown, STREAMING_MARKDOWN_LIMIT } from './streaming-markdown';
 import type {
   ChatNavigationSnapshot,
@@ -28,6 +30,31 @@ const ICON_DRAFT =
 
 /** Distance (px) from the bottom within which we keep auto-scrolling on new content. */
 const STICK_THRESHOLD = 60;
+const REASONING_BYTE_LIMIT = 64 * 1024;
+
+interface ReasoningPhase {
+  row: HTMLDivElement;
+  element: Reasoning;
+  text: string;
+  dirty: boolean;
+  interrupted: boolean;
+  notice?: HTMLDivElement;
+}
+
+/** A bounded UTF-8 prefix; never split a supplementary Unicode code point. */
+function reasoningPrefix(text: string, remaining: number): { text: string; bytes: number; truncated: boolean } {
+  let bytes = 0;
+  let end = 0;
+  for (const character of text) {
+    const point = character.codePointAt(0)!;
+    const size = point <= 0x7f ? 1 : point <= 0x7ff ? 2 : point <= 0xffff ? 3 : 4;
+    if (bytes + size > remaining)
+      return { text: text.slice(0, end).replace(/[\uD800-\uDFFF]/gu, '\uFFFD'), bytes, truncated: true };
+    bytes += size;
+    end += character.length;
+  }
+  return { text: text.replace(/[\uD800-\uDFFF]/gu, '\uFFFD'), bytes, truncated: false };
+}
 
 // Compact identity for ephemeral presentation snapshots; never persisted or used for authorization.
 function navigationFingerprint(text: string): string {
@@ -64,6 +91,8 @@ export class ChatView {
   private readonly emptyEl: HTMLDivElement;
   private readonly emptyTitle: HTMLDivElement;
   private readonly input: HTMLTextAreaElement;
+  private readonly composerEl: HTMLDivElement;
+  private readonly composerBarEl: HTMLDivElement;
   private readonly sendBtn: HTMLButtonElement;
   private readonly stopBtn: HTMLButtonElement;
   private readonly scrollBtn: HTMLButtonElement;
@@ -108,6 +137,14 @@ export class ChatView {
   private readonly actionLabels = new WeakMap<HTMLButtonElement, () => string>();
   private readonly messageMetadata = new WeakMap<HTMLElement, Readonly<Record<string, unknown>> | undefined>();
   private readonly copyTimers = new Map<HTMLButtonElement, ReturnType<typeof setTimeout>>();
+  /** Volatile reasoning is deliberately separate from message/source records. */
+  private readonly reasoningPhases = new Set<ReasoningPhase>();
+  private liveReasoning?: ReasoningPhase;
+  private lastRunReasoning?: ReasoningPhase;
+  private reasoningBytes = 0;
+  private reasoningTruncated = false;
+  private reasoningInterrupted = false;
+  private reasoningTail = '';
   /** The agent bubble currently receiving streamed deltas, if any. */
   private liveMsg: HTMLDivElement | null = null;
   private liveText = '';
@@ -116,6 +153,10 @@ export class ChatView {
   private presentationRevision = 0;
   private livePresentationRevision?: number;
   private liveMarkdown?: StreamingMarkdown;
+  private markdownPresentation?: MarkdownPresentation;
+  private get markdown(): MarkdownPresentation {
+    return (this.markdownPresentation ??= new MarkdownPresentation(this.messagesEl, this.labels));
+  }
   private liveNode: Text | null = null;
   private pendingText = '';
   private actionRunning = false;
@@ -194,13 +235,15 @@ export class ChatView {
       .build();
     this.scrollBtn.innerHTML = ICON_DOWN;
 
-    // Compose toolbar slot: host-populated controls just above the input.
+    // Compose toolbar slot: host-populated controls beside Send/Stop.
     this.actionsEl = Div().class('cui-actions').build();
 
-    // Composer: rounded container holding the textarea + a circular icon button.
+    // Composer: one accessible boundary for context, draft and stable actions.
     this.input = View<HTMLTextAreaElement>('textarea')
       .class('cui-input')
       .attr('rows', '1')
+      .attr('wrap', 'soft')
+      .attr('enterkeyhint', 'send')
       .on('compositionstart', () => {
         this.composing = true;
       })
@@ -240,18 +283,20 @@ export class ChatView {
     this.stopBtn.innerHTML = ICON_STOP;
     this.stopBtn.hidden = true;
 
-    const composer = Div()
+    this.composerBarEl = Div()
+      .class('cui-composer-bar')
+      .attr('role', 'group')
+      .children(this.actionsEl, this.stopBtn, this.sendBtn)
+      .build();
+    this.composerEl = Div()
       .class('cui-composer')
-      .children(
-        this.contextEl,
-        this.input,
-        Div().class('cui-composer-bar').children(this.actionsEl, this.stopBtn, this.sendBtn).build(),
-      )
+      .attr('role', 'group')
+      .children(this.contextEl, this.input, this.composerBarEl)
       .build();
 
     // Footer hosts the jump-to-latest button (floats just above it), the action
     // slot, and the composer.
-    const footer = Div().class('cui-footer').children(this.scrollBtn, this.pendingEl, composer).build();
+    const footer = Div().class('cui-footer').children(this.scrollBtn, this.pendingEl, this.composerEl).build();
 
     this.el = Div().class('cui-root').children(this.messagesEl, this.progressEl, footer, this.feedbackEl).build();
     if (typeof ResizeObserver !== 'undefined') {
@@ -294,6 +339,7 @@ export class ChatView {
 
   /** Append a finished message and scroll to it. Returns the bubble element. */
   append(message: ChatMessage): HTMLElement {
+    this.endReasoning({ interrupted: message.role === 'error' || message.role === 'status' });
     if ((message.role === 'status' || message.role === 'error') && this.liveMsg) {
       this.interruptStream();
     }
@@ -357,12 +403,12 @@ export class ChatView {
         try {
           if (this.options.streamingMarkdown && visibleText.length > STREAMING_MARKDOWN_LIMIT)
             bubble.classList.add('cui-stream-raw');
-          else renderMarkdown(bubble, visibleText);
+          else renderMarkdown(bubble, visibleText, this.markdown);
         } catch {
           bubble.textContent = visibleText;
           if (this.options.streamingMarkdown) bubble.classList.add('cui-stream-raw');
         }
-      } else renderMarkdown(bubble, visibleText);
+      } else renderMarkdown(bubble, visibleText, this.markdown);
     }
     if (message.role === 'agent') this.options.presentMessage?.(bubble, message.metadata);
     const row = Div().class(`cui-msg cui-msg-${message.role}`).attr('data-role', message.role).children(bubble).build();
@@ -568,7 +614,7 @@ export class ChatView {
       const ownedFocus = document.activeElement === expand;
       if (markdown) {
         try {
-          renderMarkdown(bubble, message.text);
+          renderMarkdown(bubble, message.text, this.markdown);
           this.options.presentMessage?.(bubble, message.metadata);
         } catch {
           bubble.textContent = message.text;
@@ -661,12 +707,120 @@ export class ChatView {
     }
   }
 
+  /** Render only provider-exposed reasoning, outside messages, history and source actions. */
+  appendReasoningDelta(delta: string): void {
+    if (
+      !delta ||
+      !this.running ||
+      this.stopping ||
+      this.disposed ||
+      this.presentationCleared ||
+      this.reasoningInterrupted ||
+      this.reasoningTruncated
+    )
+      return;
+    let text = this.reasoningTail + delta;
+    this.reasoningTail = '';
+    const last = text.charCodeAt(text.length - 1);
+    if (last >= 0xd800 && last <= 0xdbff) {
+      this.reasoningTail = text.slice(-1);
+      text = text.slice(0, -1);
+    }
+    this.appendReasoningText(text);
+  }
+
+  /** Accept a complete scalar sequence, including a normalized tail at phase end. */
+  private appendReasoningText(text: string): void {
+    if (!text || this.reasoningTruncated) return;
+    const prefix = reasoningPrefix(text, REASONING_BYTE_LIMIT - this.reasoningBytes);
+    this.reasoningBytes += prefix.bytes;
+    if (prefix.text && !this.liveReasoning) {
+      const element = new Reasoning();
+      const row = Div().class('cui-reasoning').children(element).build();
+      const phase: ReasoningPhase = { row, element, text: '', dirty: false, interrupted: false };
+      this.liveReasoning = phase;
+      this.lastRunReasoning = phase;
+      this.reasoningPhases.add(phase);
+      element.label = this.labels.reasoning ?? 'Reasoning';
+      // Native reasoning owns automatic disclosure and yields permanently to the reader.
+      // Never write `open` here, including during label updates or completion.
+      element.streaming = true;
+      element.addEventListener('disclosuretoggle', () => {
+        if (this.reasoningPhases.has(phase)) this.scheduleLayout();
+      });
+      this.emptyEl.remove();
+      this.messagesEl.append(row);
+      this.resizeObserver?.observe(row);
+      this.updateActivity();
+    }
+    if (this.liveReasoning && prefix.text) {
+      this.liveReasoning.text += prefix.text;
+      this.liveReasoning.dirty = true;
+    }
+    if (prefix.truncated) {
+      this.reasoningTruncated = true;
+      this.reasoningTail = '';
+      const phase = this.lastRunReasoning;
+      if (phase) {
+        phase.notice = Div()
+          .class('cui-reasoning-notice')
+          .text(this.labels.reasoningTruncated ?? 'Reasoning truncated')
+          .build();
+        phase.row.append(phase.notice);
+      }
+    }
+    this.scheduleLayout();
+  }
+
+  /** End one inference phase; later phases share this user run's UTF-8 budget. */
+  endReasoning(options: { interrupted?: boolean } = {}): void {
+    if (this.disposed) return;
+    if (this.reasoningTail) {
+      this.reasoningTail = '';
+      this.appendReasoningText('\uFFFD');
+    }
+    if (options.interrupted) this.reasoningInterrupted = true;
+    const phase = this.liveReasoning;
+    if (!phase) return;
+    this.flushReasoning();
+    phase.interrupted = !!options.interrupted;
+    phase.element.label = phase.interrupted
+      ? (this.labels.reasoningInterrupted ?? 'Reasoning interrupted')
+      : (this.labels.reasoning ?? 'Reasoning');
+    phase.element.streaming = false;
+    this.liveReasoning = undefined;
+    this.updateActivity();
+    this.scheduleLayout();
+  }
+
+  private flushReasoning(): void {
+    const phase = this.liveReasoning;
+    if (!phase?.dirty) return;
+    phase.element.content = phase.text;
+    phase.dirty = false;
+  }
+
+  private discardReasoning(): void {
+    for (const phase of this.reasoningPhases) {
+      phase.element.streaming = false;
+      phase.element.content = '';
+      phase.text = '';
+      this.resizeObserver?.unobserve(phase.row);
+      phase.row.remove();
+    }
+    this.reasoningPhases.clear();
+    this.liveReasoning = undefined;
+    this.lastRunReasoning = undefined;
+    this.reasoningTail = '';
+  }
+
   /**
    * Append streamed text to a live agent bubble, creating it on the first delta.
    * Call {@link endStream} when the turn completes.
    */
   appendDelta(delta: string, metadata: Pick<ChatMessage, 'documentArtifact' | 'metadata'> = {}): void {
     if (!delta || this.disposed || this.stopping) return;
+    this.endReasoning();
     const firstForPhase = !this.respondingHasText;
     this.respondingHasText = true;
     if (!this.liveMsg) {
@@ -679,7 +833,7 @@ export class ChatView {
       bubble.replaceChildren(this.liveNode);
       if (this.options.streamingMarkdown) {
         bubble.classList.remove('cui-stream-raw');
-        this.liveMarkdown = new StreamingMarkdown(bubble);
+        this.liveMarkdown = new StreamingMarkdown(bubble, this.markdown);
       }
     }
     if (firstForPhase) this.updateActivity();
@@ -691,6 +845,7 @@ export class ChatView {
   /** Finalise the current streaming bubble (removes the caret). */
   endStream(): void {
     if (this.stopping || this.disposed) return;
+    this.endReasoning();
     const stick = this.following;
     if (this.liveMarkdown) {
       this.liveMarkdown.update(this.liveText, true);
@@ -698,7 +853,7 @@ export class ChatView {
     } else this.flushStream();
     if (this.liveMsg) this.liveMsg.dataset.source = this.liveText;
     const bubble = this.liveMsg?.querySelector<HTMLElement>('.cui-bubble');
-    if (bubble && !this.liveMarkdown) renderMarkdown(bubble, this.liveText);
+    if (bubble && !this.liveMarkdown) renderMarkdown(bubble, this.liveText, this.markdown);
     if (bubble && this.liveMsg) this.options.presentMessage?.(bubble, this.messageMetadata.get(this.liveMsg));
     if (
       bubble &&
@@ -736,7 +891,7 @@ export class ChatView {
     if (!deferMarkdown) {
       const bubble = row.querySelector<HTMLElement>('.cui-bubble');
       if (markdown) markdown.update(text, true);
-      else if (bubble) renderMarkdown(bubble, text);
+      else if (bubble) renderMarkdown(bubble, text, this.markdown);
       if (bubble) this.options.presentMessage?.(bubble, this.messageMetadata.get(row));
       this.updateActivity();
       if (bubble && this.following) this.finishAppendLayout(true);
@@ -754,7 +909,7 @@ export class ChatView {
         if (this.disposed || !this.messagesEl.contains(row) || row.dataset.source !== text) return;
         const bubble = row.querySelector<HTMLElement>('.cui-bubble');
         if (markdown) markdown.update(text, true);
-        else if (bubble) renderMarkdown(bubble, text);
+        else if (bubble) renderMarkdown(bubble, text, this.markdown);
         if (bubble) this.options.presentMessage?.(bubble, this.messageMetadata.get(row));
         this.scheduleLayout();
       }, 0);
@@ -767,6 +922,7 @@ export class ChatView {
     if (!this.running || this.stopping || this.disposed) return;
     const restoreFocus = document.activeElement === this.sendBtn || document.activeElement === this.stopBtn;
     this.stopping = true;
+    this.endReasoning({ interrupted: true });
     this.messagesEl.setAttribute('aria-busy', 'true');
     this.updateActivity();
     this.updateSendState();
@@ -814,6 +970,7 @@ export class ChatView {
 
   /** Mount a host-owned review card in chronological conversation order. */
   appendContent(content: HTMLElement): void {
+    this.endReasoning();
     this.emptyEl.remove();
     const stick = this.following;
     this.messagesEl.append(content);
@@ -823,11 +980,17 @@ export class ChatView {
 
   /** Update run presentation; optional queue hosts retain an independent Send control. */
   setRunning(running: boolean): void {
+    if (this.disposed) return;
+    if (!running) this.endReasoning({ interrupted: true });
     const restore =
       !running && this.running && (document.activeElement === this.sendBtn || document.activeElement === this.stopBtn);
     if (running && !this.running) {
       this.respondingHasText = false;
       this.presentationCleared = false;
+      this.reasoningBytes = 0;
+      this.reasoningTruncated = false;
+      this.reasoningInterrupted = false;
+      this.lastRunReasoning = undefined;
     }
     this.running = running;
     if (!running) this.stopping = false;
@@ -841,6 +1004,7 @@ export class ChatView {
 
   /** Host-reported activity, not inferred model thoughts or estimated progress. */
   setActivity(activity: 'responding' | 'routing' | 'reading' | 'planning' | 'reviewing'): void {
+    if (activity !== 'responding') this.endReasoning();
     if (activity !== this.activity) this.respondingHasText = false;
     this.activity = activity;
     this.messagesEl.setAttribute('aria-busy', String(this.running && (this.stopping || activity !== 'reviewing')));
@@ -854,6 +1018,7 @@ export class ChatView {
       !this.running ||
       this.disposed ||
       this.presentationCleared ||
+      (!!this.liveReasoning && !this.stopping) ||
       (this.respondingHasText && this.activity === 'responding' && !this.stopping)
         ? ''
         : this.stopping
@@ -903,6 +1068,7 @@ export class ChatView {
     this.historyStart = 0;
     this.earlierButton = undefined;
     this.cancelInterruptedRenders();
+    this.discardReasoning();
     // Clear the rendered feedback without claiming that the host's run stopped.
     this.presentationCleared = true;
     this.respondingHasText = false;
@@ -914,6 +1080,7 @@ export class ChatView {
     this.liveMarkdown = undefined;
     this.clearCopyFeedback();
     this.resizeObserver?.disconnect();
+    this.markdownPresentation?.releaseTree(this.messagesEl);
     this.messagesEl.replaceChildren(this.emptyEl);
     this.messagesEl.scrollTop = 0;
     this.emptyTitle.textContent = this.labels.empty ?? '';
@@ -1037,6 +1204,15 @@ export class ChatView {
   /** Update labels (e.g. on a language change) and re-apply them live. */
   setLabels(labels: ChatViewLabels): void {
     this.labels = labels;
+    this.markdownPresentation?.setLabels(labels);
+    this.composerEl.setAttribute('aria-label', labels.composer?.trim() || 'Message composer');
+    this.composerBarEl.setAttribute('aria-label', labels.actions?.trim() || 'Message actions');
+    for (const phase of this.reasoningPhases) {
+      phase.element.label = phase.interrupted
+        ? (labels.reasoningInterrupted ?? 'Reasoning interrupted')
+        : (labels.reasoning ?? 'Reasoning');
+      if (phase.notice) phase.notice.textContent = labels.reasoningTruncated ?? 'Reasoning truncated';
+    }
     this.messagesEl.setAttribute('aria-label', labels.conversation?.trim() || 'Conversation');
     this.input.placeholder = labels.placeholder ?? '';
     this.input.setAttribute('aria-label', labels.placeholder ?? 'Message');
@@ -1181,6 +1357,7 @@ export class ChatView {
     this.restoredHistory = [];
     this.earlierButton = undefined;
     this.cancelInterruptedRenders();
+    this.discardReasoning();
     this.running = false;
     this.updateActivity();
     this.messagesEl.setAttribute('aria-busy', 'false');
@@ -1191,6 +1368,7 @@ export class ChatView {
     this.liveMarkdown = undefined;
     this.resizeObserver?.disconnect();
     this.clearCopyFeedback();
+    this.markdownPresentation?.dispose();
   }
 
   private observeLayout(): void {
@@ -1205,6 +1383,7 @@ export class ChatView {
       this.layoutFrame = undefined;
       if (this.disposed) return;
       this.flushStream();
+      this.flushReasoning();
       if (this.inputNeedsResize) {
         this.inputNeedsResize = false;
         this.autoGrow();
diff --git a/packages/chat-ui/src/index.ts b/packages/chat-ui/src/index.ts
index 2b5474af5..84a1e0ec8 100644
--- a/packages/chat-ui/src/index.ts
+++ b/packages/chat-ui/src/index.ts
@@ -1,4 +1,5 @@
 export { ChatView } from './chat-view';
+export { renderMarkdown as renderChatMarkdown } from './markdown';
 export { CHAT_UI_CSS, ensureChatUiStyles } from './styles';
 export type {
   ChatNavigationSnapshot,
@@ -10,3 +11,6 @@ export type {
   ChatViewOptions,
   RestoreHistoryOptions,
 } from './types';
+
+export { MarkdownPresentation } from './markdown-presentation';
+export type { MarkdownLabels } from './markdown-presentation';
diff --git a/packages/chat-ui/src/markdown-highlight.ts b/packages/chat-ui/src/markdown-highlight.ts
new file mode 100644
index 000000000..c48925f41
--- /dev/null
+++ b/packages/chat-ui/src/markdown-highlight.ts
@@ -0,0 +1,87 @@
+import type { HighlighterCore, ThemedToken } from 'shiki/core';
+
+/** Fixed imports: model language names can never choose a module URL. */
+const languages = {
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  python: () => import('shiki/langs/python.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  bash: () => import('shiki/langs/bash.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+};
+type Language = keyof typeof languages;
+const aliases: Record<string, Language> = {
+  js: 'javascript',
+  javascript: 'javascript',
+  ts: 'typescript',
+  typescript: 'typescript',
+  jsx: 'jsx',
+  tsx: 'tsx',
+  py: 'python',
+  python: 'python',
+  json: 'json',
+  html: 'html',
+  css: 'css',
+  sh: 'bash',
+  shell: 'bash',
+  bash: 'bash',
+  sql: 'sql',
+  yml: 'yaml',
+  yaml: 'yaml',
+  md: 'markdown',
+  markdown: 'markdown',
+};
+const names: Record<Language, string> = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  jsx: 'JSX',
+  tsx: 'TSX',
+  python: 'Python',
+  json: 'JSON',
+  html: 'HTML',
+  css: 'CSS',
+  bash: 'Shell',
+  sql: 'SQL',
+  yaml: 'YAML',
+  markdown: 'Markdown',
+};
+export function codeLanguage(info: string | undefined): { id?: Language; label: string } {
+  const name = info?.trim().split(/\s/, 1)[0].slice(0, 64).toLowerCase() ?? '';
+  const id = Object.hasOwn(aliases, name) ? aliases[name] : undefined;
+  return { id, label: id ? names[id] : name };
+}
+export const CODE_HIGHLIGHT_LIMIT = 8000;
+let core: Promise<HighlighterCore> | undefined;
+const loaded = new Map<Language, Promise<void>>();
+function getCore(): Promise<HighlighterCore> {
+  return (core ??= Promise.all([
+    import('shiki/core'),
+    import('shiki/engine/javascript'),
+    import('shiki/themes/github-light.mjs'),
+    import('shiki/themes/github-dark.mjs'),
+  ]).then(([{ createHighlighterCore }, { createJavaScriptRegexEngine }, light, dark]) =>
+    createHighlighterCore({ engine: createJavaScriptRegexEngine(), themes: [light.default, dark.default], langs: [] }),
+  ));
+}
+/** Tokens only. Consumers append textContent and colors, never highlighter HTML. */
+export async function highlightCode(source: string, language: Language): Promise<ThemedToken[][]> {
+  const highlighter = await getCore();
+  let ready = loaded.get(language);
+  if (!ready) {
+    ready = languages[language]().then((module) => highlighter.loadLanguage(module.default));
+    loaded.set(language, ready);
+  }
+  await ready;
+  return highlighter.codeToTokens(source, {
+    lang: language,
+    themes: { light: 'github-light', dark: 'github-dark' },
+    defaultColor: false,
+    includeExplanation: false,
+  }).tokens;
+}
diff --git a/packages/chat-ui/src/markdown-presentation.ts b/packages/chat-ui/src/markdown-presentation.ts
new file mode 100644
index 000000000..1334a2fb8
--- /dev/null
+++ b/packages/chat-ui/src/markdown-presentation.ts
@@ -0,0 +1,204 @@
+import { CODE_HIGHLIGHT_LIMIT, codeLanguage, highlightCode } from './markdown-highlight';
+import { ensureMarkdownStyles } from './markdown-styles';
+export interface MarkdownLabels {
+  copy?: string;
+  copied?: string;
+  copyFailed?: string;
+  codeBlock?: string;
+  table?: string;
+}
+interface CodePresentation {
+  frame: HTMLElement;
+  button: HTMLButtonElement;
+  label: HTMLElement;
+  language: HTMLElement;
+  pre: HTMLPreElement;
+  named: boolean;
+  state?: 'copied' | 'failed';
+  timer?: ReturnType<typeof setTimeout>;
+  pending: boolean;
+  abort: AbortController;
+}
+const COPY =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>';
+const COPIED =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>';
+/** Owns presentation work only: source, history, persistence and host actions stay outside. */
+export class MarkdownPresentation {
+  private readonly codes = new Set<CodePresentation>();
+  private readonly tables = new Set<HTMLElement>();
+  private disposed = false;
+  private disabled = false;
+  constructor(
+    private readonly root: HTMLElement,
+    private labels: MarkdownLabels = {},
+  ) {
+    ensureMarkdownStyles();
+  }
+  table(wrapper: HTMLElement): void {
+    wrapper.setAttribute('role', 'region');
+    wrapper.setAttribute('aria-label', this.labels.table ?? 'Table');
+    this.tables.add(wrapper);
+  }
+  code(source: string, info: string | undefined, complete: boolean): HTMLElement {
+    const frame = document.createElement('div');
+    frame.className = 'cui-code';
+    const header = document.createElement('div');
+    header.className = 'cui-code-header';
+    const language = document.createElement('span');
+    language.className = 'cui-code-language';
+    const { id, label: languageName } = codeLanguage(info);
+    language.textContent = languageName || (this.labels.codeBlock ?? 'Code');
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'cui-code-copy';
+    const icon = document.createElement('span');
+    icon.innerHTML = COPY; // Constant application icon, never model content.
+    const label = document.createElement('span');
+    label.className = 'cui-code-copy-label';
+    label.setAttribute('role', 'status');
+    label.setAttribute('aria-live', 'polite');
+    label.setAttribute('aria-atomic', 'true');
+    button.append(icon, label);
+    header.append(language, button);
+    const pre = document.createElement('pre');
+    pre.tabIndex = 0;
+    pre.setAttribute('role', 'region');
+    const code = document.createElement('code');
+    code.textContent = source;
+    pre.append(code);
+    frame.append(header, pre);
+    const record: CodePresentation = {
+      frame,
+      button,
+      label,
+      language,
+      pre,
+      named: !!languageName,
+      pending: false,
+      abort: new AbortController(),
+    };
+    this.codes.add(record);
+    button.disabled = this.disabled;
+    this.update(record);
+    button.addEventListener(
+      'click',
+      async () => {
+        if (!this.owns(record) || record.pending || this.disabled) return;
+        clearTimeout(record.timer);
+        record.pending = true;
+        button.disabled = true;
+        let state: 'copied' | 'failed';
+        try {
+          await navigator.clipboard.writeText(source);
+          state = 'copied';
+        } catch {
+          state = 'failed';
+        }
+        if (!this.owns(record)) return;
+        record.pending = false;
+        button.disabled = this.disabled;
+        record.state = state;
+        this.update(record);
+        record.timer = setTimeout(() => {
+          if (!this.owns(record)) return;
+          record.state = undefined;
+          this.update(record);
+        }, 2000);
+      },
+      { signal: record.abort.signal },
+    );
+    if (complete && id && source.length <= CODE_HIGHLIGHT_LIMIT) {
+      // The synchronous render inserts its fragment before this microtask runs.
+      queueMicrotask(() => {
+        if (!this.owns(record)) return;
+        void highlightCode(source, id)
+          .then((lines) => {
+            if (!this.owns(record) || code.textContent !== source) return;
+            const selection = window.getSelection();
+            if (
+              selection &&
+              !selection.isCollapsed &&
+              (code.contains(selection.anchorNode) ||
+                code.contains(selection.focusNode) ||
+                (selection.rangeCount && selection.getRangeAt(0).intersectsNode(code)))
+            )
+              return;
+            const fragment = document.createDocumentFragment();
+            for (const [index, line] of lines.entries()) {
+              if (index) fragment.append(document.createTextNode('\n'));
+              for (const token of line) {
+                const span = document.createElement('span');
+                span.className = 'cui-code-token';
+                span.textContent = token.content;
+                const styles = token.htmlStyle;
+                if (styles && typeof styles !== 'string') {
+                  if (styles['--shiki-light']) span.style.setProperty('--cui-token-light', styles['--shiki-light']);
+                  if (styles['--shiki-dark']) span.style.setProperty('--cui-token-dark', styles['--shiki-dark']);
+                }
+                fragment.append(span);
+              }
+            }
+            // Preserve exact newlines/tabs even if a grammar normalizes a boundary.
+            if (fragment.textContent !== source) return;
+            const left = pre.scrollLeft,
+              top = pre.scrollTop;
+            code.replaceChildren(fragment);
+            pre.scrollLeft = left;
+            pre.scrollTop = top;
+          })
+          .catch(() => {
+            /* Plain literal code remains a complete fallback. */
+          });
+      });
+    }
+    return frame;
+  }
+  private owns(record: CodePresentation): boolean {
+    return !this.disposed && this.codes.has(record) && this.root.contains(record.frame) && record.frame.isConnected;
+  }
+  private update(record: CodePresentation): void {
+    record.label.textContent =
+      record.state === 'copied'
+        ? (this.labels.copied ?? 'Copied')
+        : record.state === 'failed'
+          ? (this.labels.copyFailed ?? 'Could not copy')
+          : (this.labels.copy ?? 'Copy');
+    record.button.title = record.label.textContent;
+    record.button.dataset.state = record.state ?? 'idle';
+    record.button.firstElementChild!.innerHTML = record.state === 'copied' ? COPIED : COPY;
+    record.button.setAttribute('aria-label', record.label.textContent);
+    const codeLabel = this.labels.codeBlock ?? 'Code';
+    if (!record.named) record.language.textContent = codeLabel;
+    record.pre.setAttribute('aria-label', record.named ? `${codeLabel}: ${record.language.textContent}` : codeLabel);
+  }
+  setDisabled(disabled: boolean): void {
+    this.disabled = disabled;
+    for (const record of this.codes) record.button.disabled = disabled || record.pending;
+  }
+  setLabels(labels: MarkdownLabels): void {
+    this.labels = labels;
+    this.reconcile();
+    for (const code of this.codes) this.update(code);
+    for (const table of this.tables) table.setAttribute('aria-label', labels.table ?? 'Table');
+  }
+  /** Called after node reconciliation, including stream cache reuse. */
+  reconcile(): void {
+    for (const record of this.codes) if (!this.root.contains(record.frame)) this.release(record);
+    for (const table of this.tables) if (!this.root.contains(table)) this.tables.delete(table);
+  }
+  releaseTree(target: Node): void {
+    for (const record of this.codes) if (target.contains(record.frame)) this.release(record);
+    for (const table of this.tables) if (target.contains(table)) this.tables.delete(table);
+  }
+  private release(record: CodePresentation): void {
+    clearTimeout(record.timer);
+    record.abort.abort();
+    this.codes.delete(record);
+  }
+  dispose(): void {
+    this.disposed = true;
+    for (const record of this.codes) this.release(record);
+    this.tables.clear();
+  }
+}
diff --git a/packages/chat-ui/src/markdown-styles.ts b/packages/chat-ui/src/markdown-styles.ts
new file mode 100644
index 000000000..ca89a181b
--- /dev/null
+++ b/packages/chat-ui/src/markdown-styles.ts
@@ -0,0 +1,34 @@
+/** Block presentation shared by answer prose and artifact readers. */
+export const MARKDOWN_BLOCK_CSS = `
+.cui-markdown { --cui-code-inset:var(--ran-space-4, 16px); --cui-code-surface:var(--ran-color-bg-subtle, #fafafa); --cui-code-ink:var(--ran-color-text, #171717); --cui-code-rule:var(--ran-color-border, #e5e5e5); --cui-code-muted:var(--ran-color-text-secondary, #737373); }
+.cui-markdown .cui-table { max-width:100%; box-sizing:border-box; overflow:auto; overscroll-behavior-x:contain; scrollbar-width:thin; margin-block:var(--ran-space-4, 16px); border-block:1px solid var(--cui-code-rule); }
+.cui-markdown .cui-table table { width:100%; border-collapse:collapse; font-size:var(--ran-text-copy-2, 14px); line-height:1.65; overflow-wrap:normal; font-variant-numeric:tabular-nums; }
+.cui-markdown .cui-table :is(th,td) { min-width:var(--ran-space-16, 64px); padding:var(--ran-space-3, 12px) var(--ran-space-4, 16px); text-align:left; vertical-align:top; border-bottom:1px solid var(--cui-code-rule); }
+.cui-markdown .cui-table :is(th,td):first-child { padding-inline-start:0; }
+.cui-markdown .cui-table :is(th,td):last-child { padding-inline-end:0; }
+.cui-markdown .cui-table th { color:var(--cui-code-muted); font-weight:var(--ran-text-label-weight, 500); font-size:var(--ran-text-label-2, 13px); background:transparent; }
+.cui-markdown .cui-table tbody tr:last-child td { border-bottom:0; }
+.cui-markdown .cui-code { min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; margin-block:var(--ran-space-4, 16px); border:1px solid var(--cui-code-rule); border-radius:var(--ran-radius-sm, 6px); background:var(--cui-code-surface); color:var(--cui-code-ink); }
+.cui-markdown .cui-code-header { display:flex; align-items:center; justify-content:space-between; gap:var(--ran-space-3, 12px); min-height:var(--ran-space-10, 40px); padding-inline:var(--cui-code-inset); border-bottom:1px solid var(--cui-code-rule); font-family:var(--ran-font-family, system-ui, sans-serif); font-size:var(--ran-text-label-3, 12px); line-height:1.5; color:var(--cui-code-muted); }
+.cui-markdown .cui-code-language { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.cui-markdown .cui-code-copy { display:inline-flex; align-items:center; justify-content:center; gap:var(--ran-space-2, 8px); flex-shrink:0; min-height:var(--ran-size-7, 32px); padding:var(--ran-space-1, 4px) var(--ran-space-2, 8px); margin-inline-end:calc(-1 * var(--ran-space-2, 8px)); border:0; border-radius:var(--ran-radius-sm, 6px); background:transparent; color:inherit; font:inherit; cursor:pointer; }
+.cui-markdown .cui-code-copy svg { display:block; width:var(--ran-size-1, 16px); height:var(--ran-size-1, 16px); flex-shrink:0; }
+.cui-markdown .cui-code-copy:hover:not(:disabled) { background:var(--ran-color-bg-muted, #f4f4f4); color:var(--cui-code-ink); }
+.cui-markdown .cui-code-copy:disabled { cursor:wait; }
+.cui-markdown .cui-code pre { box-sizing:border-box; max-width:100%; overflow:auto; overscroll-behavior-x:contain; scrollbar-width:thin; margin:0; padding:var(--cui-code-inset); border:0; border-radius:0; background:transparent; color:inherit; white-space:pre; text-wrap:nowrap; font:var(--ran-text-copy-2, 14px)/1.65 var(--ran-font-mono, ui-monospace, monospace); tab-size:2; }
+.cui-markdown .cui-code pre code { display:block; min-width:max-content; padding:0; border-radius:0; background:none; color:inherit; font:inherit; white-space:inherit; }
+.cui-markdown > :is(.cui-code,.cui-table):first-child { margin-block-start:0; }
+.cui-markdown > :is(.cui-code,.cui-table):last-child { margin-block-end:0; }
+.cui-markdown .cui-code-token { color:var(--cui-token-light, inherit); }
+.cui-markdown :is(.cui-code-copy,.cui-code pre,.cui-table):focus-visible { outline:2px solid var(--ran-color-link, #0070f3); outline-offset:-2px; }
+:root:is([data-ran-theme='dark'],[theme='dark'],.dark) .cui-code-token { color:var(--cui-token-dark, inherit); }
+@media (prefers-color-scheme:dark) { :root:not([data-ran-theme='light']):not([theme='light']):not(.light) .cui-code-token { color:var(--cui-token-dark, inherit); } }
+@media (pointer:coarse) { .cui-markdown .cui-code-copy { min-height:var(--cui-control-touch, 44px); } .cui-markdown .cui-code-header { min-height:var(--cui-control-touch, 44px); } }
+`;
+export function ensureMarkdownStyles(): void {
+  if (typeof document === 'undefined' || document.getElementById('cui-markdown-styles')) return;
+  const style = document.createElement('style');
+  style.id = 'cui-markdown-styles';
+  style.textContent = MARKDOWN_BLOCK_CSS;
+  document.head.append(style);
+}
diff --git a/packages/chat-ui/src/markdown.ts b/packages/chat-ui/src/markdown.ts
index 3cd6dc727..6484d57f7 100644
--- a/packages/chat-ui/src/markdown.ts
+++ b/packages/chat-ui/src/markdown.ts
@@ -1,16 +1,59 @@
 import { Lexer, type Token, type Tokens } from 'marked';
+import { MarkdownPresentation } from './markdown-presentation';
+const presentations = new WeakMap<HTMLElement, MarkdownPresentation>();
 
+/** Only a syntactically closed fence is safe to color while a response is still streaming. */
+export function closedCodeFence(raw: string): boolean {
+  const fence = raw.match(/^ {0,3}(`{3,}|~{3,})[^\n]*\n/);
+  return !!fence && new RegExp('(?:^|\\n) {0,3}' + fence[1][0] + '{' + fence[1].length + ',} *\\n?$').test(raw);
+}
+/** Whether finalization changes any provisional rendering decision, at every nesting level. */
+export function completeMarkdownTokens(tokens: Token[]): boolean {
+  return tokens.every((token) => {
+    if (token.type === 'code') return closedCodeFence(token.raw);
+    if (
+      token.type === 'link' &&
+      !(
+        (token.raw.startsWith('[') && token.raw.endsWith(')')) ||
+        (token.raw.startsWith('<') && token.raw.endsWith('>'))
+      )
+    )
+      return false;
+    if (token.type === 'list') return (token as Tokens.List).items.every((item) => completeMarkdownTokens(item.tokens));
+    if (token.type === 'table') {
+      const table = token as Tokens.Table;
+      return [...table.header, ...table.rows.flat()].every((cell) => completeMarkdownTokens(cell.tokens));
+    }
+    return !('tokens' in token) || !Array.isArray(token.tokens) || completeMarkdownTokens(token.tokens);
+  });
+}
+function alignCell(cell: HTMLElement, alignment: unknown): void {
+  if (alignment === 'left' || alignment === 'center' || alignment === 'right') cell.style.textAlign = alignment;
+}
 /** Render Markdown tokens into DOM. No model-supplied HTML is parsed or executed. */
-export function renderMarkdown(target: HTMLElement, text: string): void {
+export function renderMarkdown(target: HTMLElement, text: string, presentation?: MarkdownPresentation): void {
+  let owner = presentation ?? presentations.get(target);
+  if (!owner) {
+    owner = new MarkdownPresentation(target);
+    presentations.set(target, owner);
+  }
+  owner.releaseTree(target);
+  target.classList.add('cui-markdown');
   target.replaceChildren();
-  renderMarkdownTokens(target, Lexer.lex(text));
+  renderMarkdownTokens(target, Lexer.lex(text), false, owner);
+  queueMicrotask(() => owner.reconcile());
 }
-export function renderMarkdownTokens(parent: Node, tokens: Token[], provisional = false): void {
+export function renderMarkdownTokens(
+  parent: Node,
+  tokens: Token[],
+  provisional = false,
+  presentation?: MarkdownPresentation,
+): void {
   for (const token of tokens) {
     if (token.type === 'space') continue;
     if (token.type === 'text' || token.type === 'escape') {
       const value = token as Tokens.Text;
-      if (value.tokens) renderMarkdownTokens(parent, value.tokens, provisional);
+      if (value.tokens) renderMarkdownTokens(parent, value.tokens, provisional, presentation);
       else parent.appendChild(document.createTextNode(value.text));
       continue;
     }
@@ -20,7 +63,7 @@ export function renderMarkdownTokens(parent: Node, tokens: Token[], provisional
       if (list.ordered && typeof list.start === 'number') el.setAttribute('start', String(list.start));
       for (const item of list.items) {
         const li = document.createElement('li');
-        renderMarkdownTokens(li, item.tokens, provisional);
+        renderMarkdownTokens(li, item.tokens, provisional, presentation);
         el.append(li);
       }
       parent.appendChild(el);
@@ -31,30 +74,43 @@ export function renderMarkdownTokens(parent: Node, tokens: Token[], provisional
       const wrapper = document.createElement('div');
       wrapper.className = 'cui-table';
       wrapper.tabIndex = 0;
+      presentation?.table(wrapper);
       const el = document.createElement('table');
       const head = el.createTHead().insertRow();
-      for (const cell of table.header) {
+      for (const [index, cell] of table.header.entries()) {
         const th = document.createElement('th');
         th.scope = 'col';
-        renderMarkdownTokens(th, cell.tokens, provisional);
+        alignCell(th, table.align[index]);
+        renderMarkdownTokens(th, cell.tokens, provisional, presentation);
         head.append(th);
       }
       const body = el.createTBody();
       for (const row of table.rows) {
         const tr = body.insertRow();
-        for (const cell of row) renderMarkdownTokens(tr.insertCell(), cell.tokens, provisional);
+        for (const [index, cell] of row.entries()) {
+          const td = tr.insertCell();
+          alignCell(td, table.align[index]);
+          renderMarkdownTokens(td, cell.tokens, provisional, presentation);
+        }
       }
       wrapper.append(el);
       parent.appendChild(wrapper);
       continue;
     }
     if (token.type === 'code') {
-      const pre = document.createElement('pre');
-      pre.tabIndex = 0;
-      const code = document.createElement('code');
-      code.textContent = (token as Tokens.Code).text;
-      pre.append(code);
-      parent.appendChild(pre);
+      const value = token as Tokens.Code;
+      // A closing fence is required during streaming; an unfinished fence remains plain.
+      const fence = value.raw.match(/^ {0,3}(`{3,}|~{3,})[^\n]*\n/);
+      const closed = closedCodeFence(value.raw);
+      if (presentation) parent.appendChild(presentation.code(value.text, value.lang, fence ? closed : !provisional));
+      else {
+        const pre = document.createElement('pre');
+        pre.tabIndex = 0;
+        const code = document.createElement('code');
+        code.textContent = value.text;
+        pre.append(code);
+        parent.appendChild(pre);
+      }
       continue;
     }
     if (token.type === 'html' || token.type === 'image') {
@@ -73,14 +129,14 @@ export function renderMarkdownTokens(parent: Node, tokens: Token[], provisional
       }
       // Explicitly allow only web/mail links. No relative, data or javascript URLs.
       if (!/^(https?:\/\/|mailto:)/i.test(link.href)) {
-        renderMarkdownTokens(parent, link.tokens, provisional);
+        renderMarkdownTokens(parent, link.tokens, provisional, presentation);
         continue;
       }
       const a = document.createElement('a');
       a.href = link.href;
       a.target = '_blank';
       a.rel = 'noopener noreferrer';
-      renderMarkdownTokens(a, link.tokens, provisional);
+      renderMarkdownTokens(a, link.tokens, provisional, presentation);
       parent.appendChild(a);
       continue;
     }
@@ -100,7 +156,8 @@ export function renderMarkdownTokens(parent: Node, tokens: Token[], provisional
       continue;
     }
     const el = document.createElement(tag);
-    if ('tokens' in token && Array.isArray(token.tokens)) renderMarkdownTokens(el, token.tokens, provisional);
+    if ('tokens' in token && Array.isArray(token.tokens))
+      renderMarkdownTokens(el, token.tokens, provisional, presentation);
     else if ('text' in token) el.textContent = String(token.text);
     parent.appendChild(el);
   }
diff --git a/packages/chat-ui/src/streaming-markdown.ts b/packages/chat-ui/src/streaming-markdown.ts
index f5096115c..4d2b11b22 100644
--- a/packages/chat-ui/src/streaming-markdown.ts
+++ b/packages/chat-ui/src/streaming-markdown.ts
@@ -1,5 +1,6 @@
 import { Lexer, type Token, type TokensList } from 'marked';
-import { renderMarkdownTokens } from './markdown';
+import { completeMarkdownTokens, renderMarkdownTokens } from './markdown';
+import { MarkdownPresentation } from './markdown-presentation';
 
 /** Input bound, not a promise that a synchronous lexer can be preempted. */
 export const STREAMING_MARKDOWN_LIMIT = 8000;
@@ -23,7 +24,12 @@ export class StreamingMarkdown {
   private label = false;
   private bracket = false;
   private escaped = false;
-  constructor(private readonly target: HTMLElement) {}
+  constructor(
+    private readonly target: HTMLElement,
+    private readonly presentation = new MarkdownPresentation(target),
+  ) {
+    target.classList.add('cui-markdown');
+  }
 
   update(source: string, complete = false): void {
     if (source === this.source && !complete) return;
@@ -160,7 +166,12 @@ export class StreamingMarkdown {
       const block = blocks[index];
       const old = previous[index];
       const key = block.tokens ? JSON.stringify(block.tokens) : undefined;
-      if (old?.nodes && old.raw === block.raw && old.key === key && old.provisional === provisional) {
+      if (
+        old?.nodes &&
+        old.raw === block.raw &&
+        old.key === key &&
+        (old.provisional === provisional || (block.tokens && completeMarkdownTokens(block.tokens)))
+      ) {
         block.nodes = old.nodes;
       } else if (!block.tokens && !old?.tokens && old?.nodes && block.raw.startsWith(old.raw)) {
         const text = old.nodes[0].firstChild as Text;
@@ -168,7 +179,7 @@ export class StreamingMarkdown {
         block.nodes = old.nodes;
       } else {
         const fragment = document.createDocumentFragment();
-        if (block.tokens) renderMarkdownTokens(fragment, block.tokens, provisional);
+        if (block.tokens) renderMarkdownTokens(fragment, block.tokens, provisional, this.presentation);
         else {
           const raw = document.createElement('span');
           raw.className = 'cui-stream-raw';
@@ -192,5 +203,6 @@ export class StreamingMarkdown {
     }
     while (this.target.childNodes.length > index) this.target.lastChild!.remove();
     this.blocks = [...prefix, ...blocks];
+    this.presentation.reconcile();
   }
 }
diff --git a/packages/chat-ui/src/styles.ts b/packages/chat-ui/src/styles.ts
index 47ea46e68..5c0116ecf 100644
--- a/packages/chat-ui/src/styles.ts
+++ b/packages/chat-ui/src/styles.ts
@@ -5,25 +5,26 @@ import { Style } from 'ranui/builder';
  * (so consumers don't need a separate CSS import). All classes are `cui-`
  * prefixed and variables are overridable via the `.cui-root` scope.
  *
- * Visual language follows modern AI chat UIs: bubble-less, full-width assistant
- * text for readability; a compact accent bubble for the user; a rounded composer
+ * Visual language follows modern AI chat UIs: bubble-less, measured assistant
+ * text for readability; a compact neutral bubble for the user; a rounded composer
  * with aligned send and stop controls; subtle tool/error chips.
  */
 export const CHAT_UI_CSS = `
-.cui-root { --cui-control-touch:44px; --cui-accent:var(--ran-color-primary, #171717); --cui-accent-contrast:var(--ran-color-primary-text, #fff); --cui-bg:var(--ran-color-bg, #fff); --cui-user-bg:var(--ran-color-bg-muted, #f4f4f4); --cui-text:var(--ran-color-text, #171717); --cui-muted:var(--ran-color-text-secondary, #737373); --cui-border:var(--ran-color-border, #e5e5e5); --cui-surface:var(--ran-color-bg-subtle, var(--cui-user-bg)); position:relative; display:flex; flex-direction:column; min-height:0; height:100%; background:var(--cui-bg); color:var(--cui-text); font-family:var(--ran-font-family, system-ui, sans-serif); font-size:var(--ran-text-copy-2, 14px); line-height:1.7; -webkit-font-smoothing:antialiased; }
-.cui-messages { flex:1 1 auto; min-height:0; overflow:auto; overflow-x:hidden; padding:var(--ran-space-6, 24px) var(--ran-space-4, 16px); display:flex; flex-direction:column; gap:var(--ran-space-6, 24px); overscroll-behavior:contain; scrollbar-width:thin; }
+.cui-root { --cui-content-max-width:680px; --cui-prose-max-width:68ch; --cui-content-gutter:var(--ran-space-6, 24px); --cui-content-inset:max(var(--cui-content-gutter), calc((100% - var(--cui-content-max-width)) / 2)); --cui-control-touch:44px; --cui-accent:var(--ran-color-primary, #171717); --cui-accent-contrast:var(--ran-color-primary-text, #fff); --cui-bg:var(--ran-color-bg, #fff); --cui-user-bg:var(--ran-color-bg-muted, #f4f4f4); --cui-text:var(--ran-color-text, #171717); --cui-muted:var(--ran-color-text-secondary, #737373); --cui-border:var(--ran-color-border, #e5e5e5); --cui-surface:var(--ran-color-bg-subtle, var(--cui-user-bg)); position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; container:cui-chat / inline-size; background:var(--cui-bg); color:var(--cui-text); font-family:var(--ran-font-family, system-ui, sans-serif); font-size:var(--ran-text-copy-1, 16px); line-height:1.75; -webkit-font-smoothing:antialiased; }
+.cui-messages { flex:1 1 auto; min-height:0; overflow:auto; overflow-x:hidden; box-sizing:border-box; padding:var(--ran-space-6, 24px) var(--cui-content-inset); display:flex; flex-direction:column; gap:var(--ran-space-4, 16px); overscroll-behavior:contain; scrollbar-width:thin; }
 .cui-load-earlier, .cui-history-expand { align-self:flex-start; max-width:100%; padding:var(--ran-space-2, 8px) var(--ran-space-3, 12px); border:1px solid var(--cui-border); border-radius:var(--ran-radius-sm, 6px); background:transparent; color:var(--cui-muted); font:inherit; font-size:var(--ran-text-label-3, 12px); cursor:pointer; }
 .cui-load-earlier:focus-visible, .cui-history-expand:focus-visible { outline:2px solid var(--ran-color-link, currentColor); outline-offset:2px; }
 .cui-history-expand { display:block; margin-top:var(--ran-space-2, 8px); }
 .cui-load-earlier[hidden] { display:none; }
-.cui-empty { margin:auto; max-width:260px; padding:var(--ran-space-8, 32px) var(--ran-space-2, 8px); text-align:left; font-size:var(--ran-text-heading-3, 20px); font-weight:500; line-height:1.45; letter-spacing:-.035em; color:var(--cui-text); }
+.cui-empty { box-sizing:border-box; width:100%; margin:auto 0; max-width:var(--cui-content-max-width); padding:var(--ran-space-8, 32px) 0; text-align:left; font-size:var(--ran-text-heading-3, 20px); font-weight:500; line-height:1.45; letter-spacing:-.035em; color:var(--cui-text); }
 .cui-empty-actions { margin-top:var(--ran-space-4, 16px); font-size:var(--ran-text-label-3, 12px); letter-spacing:0; font-weight:400; }
 .cui-empty-actions button { font:inherit; color:var(--cui-muted); border:1px solid var(--cui-border); background:transparent; padding:var(--ran-space-1, 4px) var(--ran-space-3, 12px); min-height:var(--ran-size-7, 32px); border-radius:var(--ran-radius-sm, 6px); cursor:pointer; }
-.cui-msg { display:flex; flex-direction:column; gap:var(--ran-space-2, 8px); min-width:0; }
+.cui-msg { display:flex; flex-direction:column; gap:var(--ran-space-3, 12px); min-width:0; flex:0 0 auto; }
 .cui-bubble { white-space:pre-wrap; overflow-wrap:anywhere; }
-.cui-msg-user { align-self:flex-end; max-width:88%; }
-.cui-msg-user .cui-bubble { background:var(--cui-user-bg); padding:var(--ran-space-2, 8px) var(--ran-space-3, 12px); border-radius:var(--ran-radius-lg, 16px); }
-.cui-msg-agent { align-self:stretch; }
+.cui-msg-user { align-self:flex-end; max-width:min(88%, var(--cui-prose-max-width)); margin-block-start:0; }
+.cui-msg ~ .cui-msg-user { margin-block-start:var(--ran-space-4, 16px); }
+.cui-msg-user .cui-bubble { background:var(--cui-user-bg); padding:var(--ran-space-3, 12px) var(--ran-space-4, 16px); border-radius:var(--ran-radius-md, 12px) var(--ran-radius-md, 12px) var(--ran-radius-sm, 6px) var(--ran-radius-md, 12px); line-height:1.6; }
+.cui-msg-agent { align-self:stretch; width:100%; }
 /* Host-marked drafts keep their identity header and full reading width.
    Review receipts keep their separate disclosure without nesting surfaces. */
 .cui-msg-agent[data-document-artifact] { box-sizing:border-box; padding:0; gap:var(--ran-space-3, 12px); border:0; border-radius:0; background:transparent; }
@@ -33,33 +34,28 @@ export const CHAT_UI_CSS = `
 .cui-result-label { overflow-wrap:anywhere; }
 .cui-msg-agent[data-document-artifact] .cui-message-actions { border-top:1px solid var(--cui-border); padding-top:var(--ran-space-2, 8px); }
 .cui-msg-agent[data-interrupted] .cui-result-icon { opacity:.65; }
-.cui-msg-agent .cui-bubble { white-space:normal; }
+.cui-msg-agent .cui-bubble { white-space:normal; line-height:1.75; }
 .cui-bubble.cui-stream-raw,.cui-stream-raw { white-space:pre-wrap; }
-.cui-bubble p { margin:0 0 var(--ran-space-3, 12px); }
+.cui-bubble > :is(p,h2,h3,h4,h5,h6,ul,ol,blockquote) { max-inline-size:var(--cui-prose-max-width, 68ch); }
+.cui-bubble p { margin:0 0 var(--ran-space-4, 16px); }
 .cui-bubble p:last-child { margin-bottom:0; }
-.cui-bubble h2,.cui-bubble h3,.cui-bubble h4,.cui-bubble h5,.cui-bubble h6 { font-size:inherit; line-height:1.4; margin:var(--ran-space-6, 24px) 0 var(--ran-space-2, 8px); font-weight:var(--ran-text-heading-weight, 600); text-wrap:pretty; }
+.cui-bubble h2,.cui-bubble h3,.cui-bubble h4,.cui-bubble h5,.cui-bubble h6 { font-size:inherit; line-height:1.4; margin:var(--ran-space-8, 32px) 0 var(--ran-space-2, 8px); font-weight:var(--ran-text-heading-weight, 600); text-wrap:pretty; }
 .cui-bubble h2 { font-size:var(--ran-text-heading-3, 20px); letter-spacing:var(--ran-text-heading-tracking, -.03em); }
 .cui-bubble h3 { font-size:var(--ran-text-heading-4, 16px); }
+.cui-bubble :is(h4,h5,h6) { font-size:inherit; }
 .cui-bubble :is(h2,h3,h4,h5,h6):first-child { margin-top:0; }
-.cui-bubble ul,.cui-bubble ol { padding-left:var(--ran-space-6, 24px); margin:var(--ran-space-2, 8px) 0 var(--ran-space-3, 12px); }
+.cui-bubble ul,.cui-bubble ol { box-sizing:border-box; padding-inline-start:var(--ran-space-6, 24px); margin:0 0 var(--ran-space-4, 16px); }
 .cui-bubble li { padding-left:calc(var(--ran-space-1, 4px) / 2); margin:var(--ran-space-1, 4px) 0; }
-.cui-bubble blockquote { margin:var(--ran-space-3, 12px) 0; border-left:2px solid var(--cui-border); padding-left:var(--ran-space-3, 12px); color:var(--cui-muted); }
+.cui-bubble blockquote { box-sizing:border-box; margin:var(--ran-space-4, 16px) 0; border-left:2px solid var(--cui-border); padding-left:var(--ran-space-3, 12px); color:var(--cui-muted); }
 .cui-bubble code { font-family:var(--ran-font-mono, ui-monospace, monospace); font-size:.88em; background:var(--cui-user-bg); padding:calc(var(--ran-space-1, 4px) / 2) var(--ran-space-1, 4px); border-radius:var(--ran-radius-sm, 6px); }
-.cui-bubble pre { margin:var(--ran-space-3, 12px) 0; border:1px solid var(--cui-border); background:var(--cui-user-bg); padding:var(--ran-space-3, 12px); border-radius:var(--ran-radius-sm, 6px); overflow:auto; white-space:pre; line-height:1.55; }
-.cui-bubble pre code { padding:0; background:none; }
 .cui-bubble > :first-child { margin-top:0; }
 .cui-bubble > :last-child { margin-bottom:0; }
 .cui-bubble li > p { margin:0 0 var(--ran-space-2, 8px); }
 .cui-bubble li > :last-child { margin-bottom:0; }
 .cui-bubble li > :is(ul,ol) { margin-bottom:0; }
-.cui-bubble pre,.cui-table { max-width:100%; box-sizing:border-box; overscroll-behavior-x:contain; }
+.cui-bubble hr { width:100%; margin:var(--ran-space-6, 24px) 0; border:0; border-top:1px solid var(--cui-border); }
 .cui-bubble a { color:var(--cui-text); text-underline-offset:3px; }
-.cui-table { overflow:auto; margin:var(--ran-space-3, 12px) 0; border:1px solid var(--cui-border); border-radius:var(--ran-radius-sm, 6px); }
-.cui-table table { border-collapse:collapse; font-size:inherit; min-width:100%; overflow-wrap:normal; }
-.cui-table th,.cui-table td { border-bottom:1px solid var(--cui-border); padding:var(--ran-space-2, 8px) var(--ran-space-3, 12px); text-align:left; vertical-align:top; }
-.cui-table th { background:var(--cui-user-bg); font-weight:var(--ran-text-label-weight, 500); font-size:var(--ran-text-label-2, 13px); }
-.cui-table tr:last-child td { border-bottom:0; }
-.cui-message-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ran-space-2, 8px); }
+.cui-message-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ran-space-1, 4px); min-width:0; }
 .cui-message-actions button { border:0; background:transparent; color:var(--cui-muted); cursor:pointer; font:inherit; font-size:var(--ran-text-label-3, 12px); min-height:var(--ran-size-7, 32px); padding:var(--ran-space-1, 4px) var(--ran-space-2, 8px); border-radius:var(--ran-radius-sm, 6px); }
 .cui-message-actions button:hover:not(:disabled) { color:var(--cui-text); background:var(--cui-user-bg); }
 .cui-message-actions button:disabled { opacity:.5; cursor:default; }
@@ -74,48 +70,54 @@ export const CHAT_UI_CSS = `
 .cui-streaming .cui-message-actions { display:none; }
 .cui-streaming .cui-bubble { white-space:pre-wrap; }
 .cui-streaming.cui-streaming-markdown .cui-bubble { white-space:normal; }
-.cui-activity { box-sizing:border-box; color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); line-height:1.6; padding:var(--ran-space-1, 4px) 0 var(--ran-space-1, 4px) var(--ran-space-3, 12px); border-left:1px solid var(--cui-border); white-space:pre-wrap; overflow-wrap:anywhere; }
+.cui-activity { box-sizing:border-box; flex:0 0 auto; max-width:100%; color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); line-height:1.6; padding:var(--ran-space-1, 4px) 0 var(--ran-space-1, 4px) var(--ran-space-3, 12px); border-left:1px solid var(--cui-border); white-space:pre-wrap; overflow-wrap:anywhere; }
 .cui-activity summary { cursor:pointer; padding:var(--ran-space-1, 4px) 0; border-radius:var(--ran-radius-sm, 6px); }
 .cui-activity ul { list-style:none; margin:var(--ran-space-1, 4px) 0 0; padding-left:var(--ran-space-4, 16px); }
 .cui-activity li { padding:var(--ran-space-1, 4px) 0; }
 .cui-msg-status { color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); }
-.cui-msg-error .cui-bubble { padding:var(--ran-space-3, 12px); border:1px solid var(--cui-border); border-radius:var(--ran-radius-sm, 6px); font-size:var(--ran-text-label-2, 13px); }
-.cui-progress { flex:0 0 auto; display:flex; align-items:baseline; gap:var(--ran-space-3, 12px); margin:0 var(--ran-space-4, 16px); padding:var(--ran-space-2, 8px) 0; min-width:0; }
+.cui-msg-error .cui-bubble { padding:var(--ran-space-2, 8px) var(--ran-space-3, 12px); border-left:2px solid var(--cui-border); border-radius:0 var(--ran-radius-sm, 6px) var(--ran-radius-sm, 6px) 0; background:var(--cui-surface); font-size:var(--ran-text-label-2, 13px); line-height:1.6; }
+.cui-reasoning { min-width:0; max-width:100%; flex:0 0 auto; --ran-reasoning-color:var(--cui-muted); --ran-reasoning-font-size:var(--ran-text-label-2, 13px); --ran-reasoning-border-color:var(--cui-border); --ran-disclosure-color:var(--cui-muted); --ran-disclosure-summary-color:var(--cui-muted); --ran-disclosure-font-size:var(--ran-text-label-2, 13px); --ran-disclosure-row-height:var(--ran-size-7, 32px); --ran-disclosure-transition:var(--ran-motion-duration-fast, 150ms); --ran-disclosure-toggle-duration:var(--ran-motion-duration-base, 200ms); }
+.cui-reasoning-notice { margin:var(--ran-space-1, 4px) 0 0 var(--ran-space-3, 12px); color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); }
+.cui-progress { flex:0 0 auto; display:flex; align-items:baseline; gap:var(--ran-space-3, 12px); margin:0; padding:var(--ran-space-2, 8px) var(--cui-content-inset); min-width:0; }
 .cui-status { flex:1; min-width:0; display:flex; align-items:center; gap:var(--ran-space-2, 8px); color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); line-height:1.5; }
 .cui-elapsed { flex:0 0 auto; margin-left:auto; color:var(--cui-muted); font-size:var(--ran-text-label-3, 12px); line-height:1.5; font-variant-numeric:tabular-nums; white-space:nowrap; }
 .cui-progress[hidden],.cui-elapsed[hidden] { display:none; }
 .cui-status:empty { display:none; }
-/* One activity cue at a time: the waiting row gives way to the live-text
-   cursor when responding. A human review is a resting state, not loading. */
+/* One activity cue at a time: the waiting row gives way to provider reasoning
+   or the answer when responding. A human review is a resting state, not loading. */
 .cui-root:is([data-activity="responding"],[data-activity="routing"],[data-activity="reading"],[data-activity="planning"]) .cui-status::before { content:''; flex:0 0 auto; width:12px; height:12px; box-sizing:border-box; border:1.5px solid var(--cui-border); border-top-color:currentColor; border-right-color:currentColor; border-radius:50%; animation:cui-loading-turn 1s linear infinite; }
-.cui-footer { position:relative; flex:0 0 auto; padding:var(--ran-space-3, 12px) var(--ran-space-4, 16px) var(--ran-space-4, 16px); }
+.cui-footer { position:relative; flex:0 0 auto; padding:var(--ran-space-3, 12px) var(--cui-content-inset) var(--ran-space-4, 16px); }
 .cui-scroll-bottom { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:var(--ran-size-7, 32px); height:var(--ran-size-7, 32px); box-sizing:border-box; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--cui-border); border-radius:50%; background:var(--cui-bg); color:var(--cui-muted); cursor:pointer; box-shadow:var(--ran-shadow-elevated, none); }
 .cui-scroll-bottom[hidden] { display:none; }
-.cui-composer { display:flex; flex-direction:column; padding:var(--ran-space-3, 12px); border:1px solid var(--cui-border); border-radius:var(--ran-radius-md, 12px); background:var(--cui-bg); }
+.cui-composer { display:flex; flex-direction:column; min-width:0; gap:var(--ran-space-3, 12px); padding:var(--ran-space-3, 12px); border:1px solid var(--cui-border); border-radius:var(--ran-radius-md, 12px); background:var(--cui-bg); }
 .cui-pending:empty { display:none; }
 .cui-stop[hidden] { display:none; }
 .cui-root .cui-stop { background:transparent; color:var(--cui-text); border:0; }
-.cui-composer:focus-within { border-color:var(--cui-muted); }
-.cui-composer-bar { display:flex; align-items:center; gap:var(--ran-space-2, 8px); margin-top:var(--ran-space-3, 12px); }
+.cui-composer:focus-within { border-color:var(--cui-muted); outline:1px solid var(--cui-border); outline-offset:0; }
+.cui-composer-bar { display:flex; align-items:center; min-width:0; min-height:var(--ran-size-7, 32px); gap:var(--ran-space-2, 8px); }
 .cui-actions { display:flex; flex:1; min-width:0; align-items:center; gap:var(--ran-space-1, 4px); font-size:var(--ran-text-label-3, 12px); flex-wrap:wrap; }
 .cui-context:empty { display:none; }
-.cui-input { min-width:0; width:100%; box-sizing:border-box; resize:none; overflow-y:auto; border:0; outline:none; background:transparent; padding:0; font:inherit; line-height:1.5; color:inherit; max-height:160px; min-height:1.5em; }
+.cui-input { min-width:0; width:100%; box-sizing:border-box; resize:none; overflow-y:auto; border:0; outline:none; background:transparent; padding:0; font:inherit; line-height:1.5; color:inherit; max-height:160px; min-height:3em; scrollbar-width:thin; }
 .cui-input::placeholder { color:var(--cui-muted); }
-.cui-send, .cui-stop { flex:0 0 auto; width:var(--ran-size-7, 32px); height:var(--ran-size-7, 32px); box-sizing:border-box; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--ran-radius-sm, 6px); cursor:pointer; background:var(--cui-accent); color:var(--cui-accent-contrast);; }
+.cui-send, .cui-stop { flex:0 0 auto; width:var(--ran-size-7, 32px); height:var(--ran-size-7, 32px); box-sizing:border-box; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--ran-radius-sm, 6px); cursor:pointer; background:var(--cui-accent); color:var(--cui-accent-contrast); transition:scale var(--ran-motion-duration-fast, 150ms) var(--ran-motion-ease-standard, ease); }
+.cui-send:active:not(:disabled), .cui-stop:active:not(:disabled) { scale:.94; }
 .cui-send:hover:not(:disabled) { background:color-mix(in srgb, var(--cui-accent) 85%, var(--cui-bg)); }
 .cui-root .cui-stop:hover:not(:disabled) { background:var(--cui-user-bg); border-color:var(--cui-muted); }
 .cui-send:disabled, .cui-stop:disabled { background:var(--cui-surface); color:var(--cui-muted); opacity:.5; cursor:default; }
 @media (pointer:coarse) {
+  .cui-reasoning { --ran-disclosure-row-height:var(--cui-control-touch); }
   .cui-send, .cui-stop, .cui-scroll-bottom { width:var(--cui-control-touch); height:var(--cui-control-touch); }
   .cui-message-actions button, .cui-empty-actions button, .cui-load-earlier, .cui-history-expand { min-height:var(--cui-control-touch); }
   .cui-message-actions .cui-copy { width:var(--cui-control-touch); flex-basis:var(--cui-control-touch); }
 }
-.cui-root .cui-send.cui-send-prepare { width:auto; max-width:100%; padding:0 var(--ran-space-2, 8px); font:inherit; font-size:var(--ran-text-label-3, 12px); background:transparent; color:var(--cui-text); text-decoration:underline; text-underline-offset:3px; }
+.cui-root .cui-send.cui-send-prepare { width:auto; max-width:100%; padding:0 var(--ran-space-2, 8px); font:inherit; font-size:var(--ran-text-label-3, 12px); background:transparent; color:var(--cui-text); border:1px solid var(--cui-border); }
 .cui-streaming:not(.cui-streaming-markdown) .cui-bubble::after { content:''; display:inline-block; width:6px; height:6px; margin-left:var(--ran-space-1, 4px); border-radius:50%; background:currentColor; vertical-align:middle; }
-.cui-root[data-activity="responding"] .cui-streaming:not(.cui-streaming-markdown) .cui-bubble::after { animation:cui-answer-pulse 1.4s ease-in-out infinite; }
 @keyframes cui-loading-turn { to { transform:rotate(360deg); } }
-@keyframes cui-answer-pulse { 0%,100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1.15); } }
+@container cui-chat (max-width:380px) {
+  .cui-messages, .cui-footer, .cui-progress { --cui-content-inset:var(--ran-space-4, 16px); }
+}
 @media (prefers-reduced-motion:reduce) {
+  .cui-send, .cui-stop { transition:none; scale:1; }
   .cui-root[data-activity] .cui-status::before,.cui-root[data-activity] .cui-streaming .cui-bubble::after { animation:none; transform:none; opacity:1; }
 }
 `;
diff --git a/packages/chat-ui/src/types.ts b/packages/chat-ui/src/types.ts
index 4cb722df3..5d58be711 100644
--- a/packages/chat-ui/src/types.ts
+++ b/packages/chat-ui/src/types.ts
@@ -16,6 +16,10 @@ export interface ChatMessage {
 
 /** Text shown in the UI. Everything is optional so the component works untranslated. */
 export interface ChatViewLabels {
+  /** Accessible name for the draft/context/control boundary. */
+  composer?: string;
+  /** Accessible name for the controls beside Send/Stop. */
+  actions?: string;
   /** Accessible name for the conversation history. */
   conversation?: string;
   /** Send-button label (idle state). */
@@ -34,6 +38,9 @@ export interface ChatViewLabels {
   savingMessage?: string;
   savedMessage?: string;
   saveFailed?: string;
+  /** Accessible names for rendered code and horizontally scrollable tables. */
+  codeBlock?: string;
+  table?: string;
   copy?: string;
   copied?: string;
   copyFailed?: string;
@@ -42,6 +49,12 @@ export interface ChatViewLabels {
   documentDraft?: string;
   /** Identifies retained output from a response that did not complete. */
   incomplete?: string;
+  /** Provider-exposed, ephemeral reasoning disclosure. */
+  reasoning?: string;
+  /** Reasoning that stopped before its inference phase completed. */
+  reasoningInterrupted?: string;
+  /** One notice when a run exceeds the 64 KiB UTF-8 display budget. */
+  reasoningTruncated?: string;
   waiting?: string;
   /** Actual host request classification, distinct from tool planning. */
   routing?: string;
diff --git a/packages/shared/src/i18n/messages/de.ts b/packages/shared/src/i18n/messages/de.ts
index 38c6c5aa4..9c0af70bd 100644
--- a/packages/shared/src/i18n/messages/de.ts
+++ b/packages/shared/src/i18n/messages/de.ts
@@ -92,8 +92,11 @@ export const de: Partial<I18nMessages> = {
   agentUseServiceHint:
     'Gesendeter Text geht an den gewählten Dienst. Eigene Zugangsdaten sind erforderlich; es können Kosten entstehen.',
   agentPreferences: 'Weitere Einstellungen',
+  agentWorkspaceChat: 'Unterhaltung',
   agentBackToChat: 'Zurück zum Gespräch',
   agentExpand: 'Assistent vergrößern',
+  agentCollapse: 'Assistent verkleinern',
+  agentVoiceOptions: 'Sprachoptionen',
   agentSetupFailed: 'Assistent konnte nicht geöffnet werden. Bitte erneut versuchen. Das Dokument ist unverändert.',
   agentOffNote: 'Ausschalten stoppt die aktuelle Aufgabe und behält Dokument und Entwurf.',
   agentResumeModel: 'Heruntergeladenes Modell verwenden',
@@ -397,12 +400,19 @@ export const de: Partial<I18nMessages> = {
     'Hebe die Auswahl auf, um den aktuellen Absatz auszurichten, oder fordere die Ausrichtung der Auswahl an.',
   agentNoSelection: 'Keine Auswahl erkannt – bitte zuerst Text im Dokument markieren.',
   agentQuotePrefix: 'Bitte berücksichtige den von mir markierten Inhalt:',
+  agentCodeBlock: 'Quellcode',
+  agentMarkdownTable: 'Tabelle',
   agentCopy: 'Kopieren',
   agentCopied: 'Kopiert',
   agentCopyFailed: 'Kopieren fehlgeschlagen',
   agentRestoreRequest: 'Anfrage wiederherstellen',
   agentRoutingRequest: 'Anfrage wird eingeordnet…',
   agentWaitElapsed: '{seconds} s vergangen',
+  agentComposerLabel: 'Nachricht verfassen',
+  agentComposerActionsLabel: 'Nachrichtenaktionen',
+  agentReasoning: 'Überlegungen',
+  agentReasoningInterrupted: 'Überlegungen unterbrochen',
+  agentReasoningTruncated: 'Überlegungen gekürzt',
   agentWaiting: 'Antwort wird erstellt…',
   agentReadingContent: 'Aktueller Inhalt wird gelesen…',
   agentPreparingTask: 'Anfrage wird vorbereitet…',
@@ -527,10 +537,14 @@ export const de: Partial<I18nMessages> = {
   agentSourcesSearch: 'Quellen durchsuchen',
   agentSourcesOpen: 'Quelle öffnen',
   agentSourcesExcerpt: 'Quellen werden beim Senden als begrenzte Auszüge an den gewählten KI-Dienst gesendet.',
+  agentArtifactEdit: 'Bearbeiten',
+  agentArtifactCancelEditing: 'Bearbeitung abbrechen',
+  agentArtifactSourceData: 'Quelldaten',
+  agentArtifactUnsaved: 'Ungespeicherte Änderungen',
   agentArtifactTitle: 'Artefakte',
   agentArtifactEmpty: 'Nützliche Ergebnisse hier speichern, bearbeiten und lokal versionieren.',
   agentArtifactBack: 'Zurück',
-  agentArtifactBackToList: 'Zurück zu den Ergebnissen',
+  agentArtifactBackToList: 'Zurück zu den Artefakten',
   agentArtifactTitleField: 'Titel',
   agentArtifactTextField: 'Inhalt',
   agentArtifactVersion: 'Version',
diff --git a/packages/shared/src/i18n/messages/en.ts b/packages/shared/src/i18n/messages/en.ts
index 6df0965c5..f72b2f6fd 100644
--- a/packages/shared/src/i18n/messages/en.ts
+++ b/packages/shared/src/i18n/messages/en.ts
@@ -86,8 +86,11 @@ export const en: I18nMessages = {
   agentUseServiceHint:
     'Text you send goes to the selected service. Your own service details are required; service fees may apply.',
   agentPreferences: 'More settings',
+  agentWorkspaceChat: 'Chat',
   agentBackToChat: 'Back to conversation',
   agentExpand: 'Expand assistant',
+  agentCollapse: 'Collapse assistant',
+  agentVoiceOptions: 'Voice options',
   agentSetupFailed: 'Could not open the assistant. Try again; your document is unchanged.',
   agentOffNote: 'Turning off stops the current task and keeps your document and draft.',
   agentResumeModel: 'Use downloaded model',
@@ -376,12 +379,19 @@ export const en: I18nMessages = {
   agentParagraphSelectionConflict: 'Clear the selection to align the current paragraph, or ask to align the selection.',
   agentNoSelection: 'No selection detected — please select text in the document first.',
   agentQuotePrefix: 'Please consider my selected content:',
+  agentCodeBlock: 'Code',
+  agentMarkdownTable: 'Table',
   agentCopy: 'Copy',
   agentCopied: 'Copied',
   agentCopyFailed: 'Could not copy',
   agentRestoreRequest: 'Restore request',
   agentRoutingRequest: 'Understanding your request…',
   agentWaitElapsed: '{seconds}s elapsed',
+  agentComposerLabel: 'Message composer',
+  agentComposerActionsLabel: 'Message actions',
+  agentReasoning: 'Reasoning',
+  agentReasoningInterrupted: 'Reasoning interrupted',
+  agentReasoningTruncated: 'Reasoning truncated',
   agentWaiting: 'Generating a response…',
   agentReadingContent: 'Reading current content…',
   agentPreparingTask: 'Preparing your request…',
@@ -500,6 +510,10 @@ export const en: I18nMessages = {
   agentSourcesSearch: 'Search sources',
   agentSourcesOpen: 'Open source',
   agentSourcesExcerpt: 'Sources are sent as bounded excerpts to the selected AI service when you send a request.',
+  agentArtifactEdit: 'Edit',
+  agentArtifactCancelEditing: 'Cancel editing',
+  agentArtifactSourceData: 'Source data',
+  agentArtifactUnsaved: 'Unsaved changes',
   agentArtifactTitle: 'Artifacts',
   agentArtifactEmpty: 'Save useful results here to edit and keep versions on this device.',
   agentArtifactBack: 'Back',
diff --git a/packages/shared/src/i18n/messages/es.ts b/packages/shared/src/i18n/messages/es.ts
index ded8e467d..72621f8f6 100644
--- a/packages/shared/src/i18n/messages/es.ts
+++ b/packages/shared/src/i18n/messages/es.ts
@@ -89,8 +89,11 @@ export const es: Partial<I18nMessages> = {
   agentUseServiceHint:
     'El texto enviado se procesa en el servicio elegido. Necesitas tus datos de servicio; puede haber cargos.',
   agentPreferences: 'Más preferencias',
+  agentWorkspaceChat: 'Conversación',
   agentBackToChat: 'Volver a la conversación',
   agentExpand: 'Ampliar asistente',
+  agentCollapse: 'Reducir asistente',
+  agentVoiceOptions: 'Opciones de voz',
   agentSetupFailed: 'No se pudo abrir el asistente. Inténtalo de nuevo. El documento no ha cambiado.',
   agentOffNote: 'Desactivar detiene la tarea actual y conserva el documento y el borrador.',
   agentResumeModel: 'Usar modelo descargado',
@@ -385,12 +388,19 @@ export const es: Partial<I18nMessages> = {
   agentParagraphSelectionConflict: 'Quita la selección para alinear el párrafo actual, o pide alinear la selección.',
   agentNoSelection: 'No hay nada seleccionado: selecciona primero texto en el documento.',
   agentQuotePrefix: 'Ten en cuenta el contenido que he seleccionado:',
+  agentCodeBlock: 'Código',
+  agentMarkdownTable: 'Tabla',
   agentCopy: 'Copiar',
   agentCopied: 'Copiado',
   agentCopyFailed: 'No se pudo copiar',
   agentRestoreRequest: 'Recuperar solicitud',
   agentRoutingRequest: 'Interpretando tu solicitud…',
   agentWaitElapsed: '{seconds} s transcurridos',
+  agentComposerLabel: 'Redactar mensaje',
+  agentComposerActionsLabel: 'Acciones del mensaje',
+  agentReasoning: 'Razonamiento',
+  agentReasoningInterrupted: 'Razonamiento interrumpido',
+  agentReasoningTruncated: 'Razonamiento truncado',
   agentWaiting: 'Generando respuesta…',
   agentReadingContent: 'Leyendo el contenido actual…',
   agentPreparingTask: 'Preparando tu solicitud…',
@@ -513,10 +523,14 @@ export const es: Partial<I18nMessages> = {
   agentSourcesSearch: 'Buscar fuentes',
   agentSourcesOpen: 'Abrir fuente',
   agentSourcesExcerpt: 'Las fuentes se envían como extractos limitados al servicio de IA seleccionado.',
+  agentArtifactEdit: 'Editar',
+  agentArtifactCancelEditing: 'Cancelar edición',
+  agentArtifactSourceData: 'Datos de origen',
+  agentArtifactUnsaved: 'Cambios sin guardar',
   agentArtifactTitle: 'Artefactos',
   agentArtifactEmpty: 'Guarda resultados aquí para editarlos y conservar versiones en este dispositivo.',
   agentArtifactBack: 'Volver',
-  agentArtifactBackToList: 'Volver a los resultados',
+  agentArtifactBackToList: 'Volver a los Artefactos',
   agentArtifactTitleField: 'Título',
   agentArtifactTextField: 'Contenido',
   agentArtifactVersion: 'Versión',
diff --git a/packages/shared/src/i18n/messages/ja.ts b/packages/shared/src/i18n/messages/ja.ts
index c7fa93d99..6e49b7fda 100644
--- a/packages/shared/src/i18n/messages/ja.ts
+++ b/packages/shared/src/i18n/messages/ja.ts
@@ -88,8 +88,11 @@ export const ja: Partial<I18nMessages> = {
   agentUseServiceHint:
     '送信した文章は選択したサービスで処理します。サービス情報が必要で、料金が発生する場合があります。',
   agentPreferences: 'その他の設定',
+  agentWorkspaceChat: 'チャット',
   agentBackToChat: '会話に戻る',
   agentExpand: 'アシスタントを広げる',
+  agentCollapse: 'アシスタントを縮小',
+  agentVoiceOptions: '音声オプション',
   agentSetupFailed: '開けませんでした。再試行してください。文書は変更されていません。',
   agentOffNote: 'オフにすると現在の作業を停止し、文書と下書きを保持します。',
   agentResumeModel: 'ダウンロード済みモデルを使う',
@@ -380,12 +383,19 @@ export const ja: Partial<I18nMessages> = {
   agentParagraphSelectionConflict: '現在の段落を整列するには選択を解除するか、選択範囲の整列を指定してください。',
   agentNoSelection: '選択範囲が見つかりません。先にドキュメント内のテキストを選択してください。',
   agentQuotePrefix: '選択した内容を踏まえてください：',
+  agentCodeBlock: 'コード',
+  agentMarkdownTable: '表',
   agentCopy: 'コピー',
   agentCopied: 'コピーしました',
   agentCopyFailed: 'コピーできませんでした',
   agentRestoreRequest: 'リクエストを復元',
   agentRoutingRequest: 'リクエストを確認中…',
   agentWaitElapsed: '{seconds} 秒経過',
+  agentComposerLabel: 'メッセージ入力',
+  agentComposerActionsLabel: 'メッセージ操作',
+  agentReasoning: '思考過程',
+  agentReasoningInterrupted: '思考を中断しました',
+  agentReasoningTruncated: '思考内容の表示を省略しました',
   agentWaiting: '回答を生成中…',
   agentReadingContent: '現在の内容を読み取り中…',
   agentPreparingTask: 'リクエストを準備中…',
@@ -506,6 +516,10 @@ export const ja: Partial<I18nMessages> = {
   agentSourcesSearch: 'ソースを検索',
   agentSourcesOpen: 'ソースを開く',
   agentSourcesExcerpt: '送信時に資料の抜粋が選択したAIサービスへ送られます。',
+  agentArtifactEdit: '編集',
+  agentArtifactCancelEditing: '編集を取り消す',
+  agentArtifactSourceData: 'ソースデータ',
+  agentArtifactUnsaved: '未保存の変更',
   agentArtifactTitle: '成果物',
   agentArtifactEmpty: '結果を保存して、この端末で編集・バージョン管理できます。',
   agentArtifactBack: '戻る',
diff --git a/packages/shared/src/i18n/messages/ko.ts b/packages/shared/src/i18n/messages/ko.ts
index 7bb10ff50..25d54cca3 100644
--- a/packages/shared/src/i18n/messages/ko.ts
+++ b/packages/shared/src/i18n/messages/ko.ts
@@ -87,8 +87,11 @@ export const ko: Partial<I18nMessages> = {
   agentUseServiceHint:
     '보낸 글은 선택한 서비스에서 처리됩니다. 본인의 서비스 정보가 필요하며 요금이 발생할 수 있습니다.',
   agentPreferences: '추가 설정',
+  agentWorkspaceChat: '채팅',
   agentBackToChat: '대화로 돌아가기',
   agentExpand: '도우미 확대',
+  agentCollapse: '도우미 축소',
+  agentVoiceOptions: '음성 옵션',
   agentSetupFailed: '도우미를 열 수 없습니다. 다시 시도하세요. 문서는 바뀌지 않았습니다.',
   agentOffNote: '끄면 현재 작업이 중지되고 문서와 초안은 유지됩니다.',
   agentResumeModel: '다운로드한 모델 사용',
@@ -369,12 +372,19 @@ export const ko: Partial<I18nMessages> = {
   agentParagraphSelectionConflict: '현재 단락을 정렬하려면 선택을 해제하거나 선택 영역 정렬을 요청하세요.',
   agentNoSelection: '선택한 영역이 없습니다. 문서에서 텍스트를 먼저 선택하세요.',
   agentQuotePrefix: '선택한 내용을 참고해 주세요:',
+  agentCodeBlock: '코드',
+  agentMarkdownTable: '표',
   agentCopy: '복사',
   agentCopied: '복사됨',
   agentCopyFailed: '복사 실패',
   agentRestoreRequest: '요청 복원',
   agentRoutingRequest: '요청을 파악하는 중…',
   agentWaitElapsed: '{seconds}초 경과',
+  agentComposerLabel: '메시지 입력',
+  agentComposerActionsLabel: '메시지 작업',
+  agentReasoning: '생각 과정',
+  agentReasoningInterrupted: '생각 중단됨',
+  agentReasoningTruncated: '생각 내용이 잘렸습니다',
   agentWaiting: '응답 생성 중…',
   agentReadingContent: '현재 내용을 읽는 중…',
   agentPreparingTask: '요청을 준비하는 중…',
@@ -492,10 +502,14 @@ export const ko: Partial<I18nMessages> = {
   agentSourcesSearch: '소스 검색',
   agentSourcesOpen: '소스 열기',
   agentSourcesExcerpt: '요청 전송 시 자료의 제한된 발췌문을 선택한 AI 서비스에 보냅니다.',
+  agentArtifactEdit: '편집',
+  agentArtifactCancelEditing: '편집 취소',
+  agentArtifactSourceData: '원본 데이터',
+  agentArtifactUnsaved: '저장하지 않은 변경 사항',
   agentArtifactTitle: '아티팩트',
   agentArtifactEmpty: '결과를 저장하고 이 기기에서 편집하며 버전을 보관하세요.',
   agentArtifactBack: '뒤로',
-  agentArtifactBackToList: '결과물 목록으로 돌아가기',
+  agentArtifactBackToList: '아티팩트 목록으로 돌아가기',
   agentArtifactTitleField: '제목',
   agentArtifactTextField: '내용',
   agentArtifactVersion: '버전',
diff --git a/packages/shared/src/i18n/messages/pt.ts b/packages/shared/src/i18n/messages/pt.ts
index 166e59206..69f18cc70 100644
--- a/packages/shared/src/i18n/messages/pt.ts
+++ b/packages/shared/src/i18n/messages/pt.ts
@@ -88,8 +88,11 @@ export const pt: Partial<I18nMessages> = {
   agentUseServiceHint:
     'O texto enviado vai para o serviço escolhido. Seus dados de serviço são necessários; pode haver custos.',
   agentPreferences: 'Mais preferências',
+  agentWorkspaceChat: 'Conversa',
   agentBackToChat: 'Voltar à conversa',
   agentExpand: 'Expandir assistente',
+  agentCollapse: 'Recolher assistente',
+  agentVoiceOptions: 'Opções de voz',
   agentSetupFailed: 'Não foi possível abrir o assistente. Tente novamente. O documento não mudou.',
   agentOffNote: 'Desativar interrompe a tarefa e mantém o documento e o rascunho.',
   agentResumeModel: 'Usar modelo baixado',
@@ -381,12 +384,19 @@ export const pt: Partial<I18nMessages> = {
   agentParagraphSelectionConflict: 'Remove a seleção para alinhar o parágrafo atual, ou pede para alinhar a seleção.',
   agentNoSelection: 'Não há nada selecionado — selecione primeiro texto no documento.',
   agentQuotePrefix: 'Tenha em conta o conteúdo que selecionei:',
+  agentCodeBlock: 'Código',
+  agentMarkdownTable: 'Tabela',
   agentCopy: 'Copiar',
   agentCopied: 'Copiado',
   agentCopyFailed: 'Falha ao copiar',
   agentRestoreRequest: 'Restaurar pedido',
   agentRoutingRequest: 'Interpretando sua solicitação…',
   agentWaitElapsed: '{seconds} s decorridos',
+  agentComposerLabel: 'Compor mensagem',
+  agentComposerActionsLabel: 'Ações da mensagem',
+  agentReasoning: 'Raciocínio',
+  agentReasoningInterrupted: 'Raciocínio interrompido',
+  agentReasoningTruncated: 'Raciocínio truncado',
   agentWaiting: 'Gerando resposta…',
   agentReadingContent: 'Lendo o conteúdo atual…',
   agentPreparingTask: 'Preparando sua solicitação…',
@@ -508,10 +518,14 @@ export const pt: Partial<I18nMessages> = {
   agentSourcesSearch: 'Pesquisar fontes',
   agentSourcesOpen: 'Abrir fonte',
   agentSourcesExcerpt: 'As fontes são enviadas como trechos limitados ao serviço de IA escolhido.',
+  agentArtifactEdit: 'Editar',
+  agentArtifactCancelEditing: 'Cancelar edição',
+  agentArtifactSourceData: 'Dados de origem',
+  agentArtifactUnsaved: 'Alterações não salvas',
   agentArtifactTitle: 'Artefatos',
   agentArtifactEmpty: 'Salve resultados aqui para editar e manter versões neste dispositivo.',
   agentArtifactBack: 'Voltar',
-  agentArtifactBackToList: 'Voltar aos resultados',
+  agentArtifactBackToList: 'Voltar aos Artefatos',
   agentArtifactTitleField: 'Título',
   agentArtifactTextField: 'Conteúdo',
   agentArtifactVersion: 'Versão',
diff --git a/packages/shared/src/i18n/messages/zh-CN.ts b/packages/shared/src/i18n/messages/zh-CN.ts
index 01ae562db..428e5e0f3 100644
--- a/packages/shared/src/i18n/messages/zh-CN.ts
+++ b/packages/shared/src/i18n/messages/zh-CN.ts
@@ -81,8 +81,11 @@ export const zhCN: I18nMessages = {
   agentUseService: '连接 AI 服务',
   agentUseServiceHint: '支持本机服务和云端 API。请求内容会发送给所选服务；费用以服务商说明为准。',
   agentPreferences: '高级设置',
+  agentWorkspaceChat: '对话',
   agentBackToChat: '返回对话',
   agentExpand: '展开助手',
+  agentCollapse: '收起助手',
+  agentVoiceOptions: '语音选项',
   agentSetupFailed: '暂时无法开启助手，请重试。你的文档没有改变。',
   agentOffNote: '关闭后停止当前任务，保留文档和未发送的输入。',
   agentResumeModel: '启用已下载模型',
@@ -355,12 +358,19 @@ export const zhCN: I18nMessages = {
   agentParagraphSelectionConflict: '请取消选区后对齐当前段落，或明确要求对齐选区。',
   agentNoSelection: '没有检测到选中的内容，请先在文档中选择文字。',
   agentQuotePrefix: '请参考我选中的内容：',
+  agentCodeBlock: '代码',
+  agentMarkdownTable: '表格',
   agentCopy: '复制',
   agentCopied: '已复制',
   agentCopyFailed: '复制失败',
   agentRestoreRequest: '恢复请求',
   agentRoutingRequest: '正在理解你的请求…',
   agentWaitElapsed: '已等待 {seconds} 秒',
+  agentComposerLabel: '消息输入区',
+  agentComposerActionsLabel: '消息操作',
+  agentReasoning: '思考过程',
+  agentReasoningInterrupted: '思考已中断',
+  agentReasoningTruncated: '思考内容过长，已截断',
   agentWaiting: '正在生成回复…',
   agentReadingContent: '正在读取当前内容…',
   agentPreparingTask: '正在准备任务…',
@@ -475,6 +485,10 @@ export const zhCN: I18nMessages = {
   agentSourcesSearch: '搜索来源',
   agentSourcesOpen: '打开来源',
   agentSourcesExcerpt: '发送请求时，资料会以有长度限制的摘录发送给所选 AI 服务。',
+  agentArtifactEdit: '编辑',
+  agentArtifactCancelEditing: '取消编辑',
+  agentArtifactSourceData: '源数据',
+  agentArtifactUnsaved: '尚未保存',
   agentArtifactTitle: '成果',
   agentArtifactEmpty: '将有用的结果保存在这里，在此设备编辑并保留版本。',
   agentArtifactBack: '返回',
diff --git a/packages/shared/src/i18n/types.ts b/packages/shared/src/i18n/types.ts
index 5de8d7f44..10c09ec49 100644
--- a/packages/shared/src/i18n/types.ts
+++ b/packages/shared/src/i18n/types.ts
@@ -111,8 +111,11 @@ export interface I18nMessages {
   agentUseService: string;
   agentUseServiceHint: string;
   agentPreferences: string;
+  agentWorkspaceChat: string;
   agentBackToChat: string;
   agentExpand: string;
+  agentCollapse: string;
+  agentVoiceOptions: string;
   agentSetupFailed: string;
   agentOffNote: string;
   agentResumeModel: string;
@@ -366,10 +369,17 @@ export interface I18nMessages {
   agentParagraphSelectionConflict: string;
   agentNoSelection: string;
   agentQuotePrefix: string;
+  agentCodeBlock: string;
+  agentMarkdownTable: string;
   agentCopy: string;
   agentCopied: string;
   agentCopyFailed: string;
   agentRestoreRequest: string;
+  agentComposerLabel: string;
+  agentComposerActionsLabel: string;
+  agentReasoning: string;
+  agentReasoningInterrupted: string;
+  agentReasoningTruncated: string;
   agentWaiting: string;
   agentRoutingRequest: string;
   agentWaitElapsed: string;
@@ -490,6 +500,10 @@ export interface I18nMessages {
   agentSourcesSearch: string;
   agentSourcesOpen: string;
   agentSourcesExcerpt: string;
+  agentArtifactEdit: string;
+  agentArtifactCancelEditing: string;
+  agentArtifactSourceData: string;
+  agentArtifactUnsaved: string;
   agentArtifactTitle: string;
   agentArtifactEmpty: string;
   agentArtifactBack: string;
diff --git a/patches/README.md b/patches/README.md
new file mode 100644
index 000000000..cefd82d53
--- /dev/null
+++ b/patches/README.md
@@ -0,0 +1,22 @@
+# Dependency patches
+
+`ranui@0.5.0.patch` carries upstream corrections in the ES modules consumed by
+this application. The reasoning owner is
+`chaxus/ran:packages/ranui/components/reasoning/index.ts`: an open reasoning body
+already displays its text, so the header summary appears only while collapsed.
+It preserves native disclosure ownership, streaming state and public APIs.
+
+The select owner is `chaxus/ran:packages/ranui/components/select/index.ts`.
+Keyboard reopening uses the public `open` state, so a closing animation cannot
+consume the next Arrow, Enter, Home/End or typeahead action as if the menu were
+still open. Visual exit frames do not own interaction state.
+
+The matching source change, component regression tests and browser verification
+are maintained in the ran PR. Keep this patch until a ranui release includes these
+corrections; then upgrade the dependency and remove this patch and its
+`patchedDependencies` entry together. Do not recreate the behavior with host
+shadow-DOM queries or CSS overrides. Install with the lockfile before acceptance
+so screenshots exercise the same patched module as CI.
+
+The existing WebLLM and wllama patches retain their separately documented source
+comments and purposes in their patch files.
diff --git a/patches/ranui@0.5.0.patch b/patches/ranui@0.5.0.patch
new file mode 100644
index 000000000..6f37b27b1
--- /dev/null
+++ b/patches/ranui@0.5.0.patch
@@ -0,0 +1,26 @@
+diff --git a/dist/reasoning-Bjkl7E3y.js b/dist/reasoning-Bjkl7E3y.js
+index d216365b8755f0054a7ffe5e894a5cd1ca9aa739..1913af7f979330a8f49ed71fb7b7db3dd545214c 100644
+--- a/dist/reasoning-Bjkl7E3y.js
++++ b/dist/reasoning-Bjkl7E3y.js
+@@ -94,7 +94,7 @@ var b = class extends u {
+     const t = this.streaming, e = this.duration;
+     this._row.open = this.open, this._row.busy = t;
+     const r = e === null || e < 1e3 ? "" : `${(e / 1e3).toFixed(1)}s`;
+-    this._row.heading = r === "" ? this.label : `${this.label} · ${r}`, this._row.summary = g(this._content, t);
++    this._row.heading = r === "" ? this.label : `${this.label} · ${r}`, this._row.summary = this.open ? "" : g(this._content, t);
+   }
+ };
+ d("r-reasoning", b);
+diff --git a/dist/select-BhJCgX3Q.js b/dist/select-BhJCgX3Q.js
+index 03cf7bf150d0e5443ee03341675c7063136f36e3..10ae4066dec35c78887b56116dd3991a9bea1109 100644
+--- a/dist/select-BhJCgX3Q.js
++++ b/dist/select-BhJCgX3Q.js
+@@ -349,7 +349,7 @@ var L = 0, T = class extends f {
+       label: i
+     } }))));
+   };
+-  isDropdownOpen = () => this._selectionDropdown ? this._selectionDropdown.style.display === "block" : !1;
++  isDropdownOpen = () => this.open;
+   _nextEnabledIndex = (t, e) => {
+     const i = this.getDropdownOptions(), s = i.length;
+     if (s === 0) return -1;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd935ccf8..1bb7829dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,7 @@ overrides:
 patchedDependencies:
   '@mlc-ai/web-llm@0.2.85': ab39c67b61b734014dc299766a9bffabb2e077b70bed48c7c4dec0af56af0599
   '@wllama/wllama@3.6.1': 5eaac29afca7fbc57011df1f0d69005d9e590da3dd1e5ad74155e4f0525a1702
+  ranui@0.5.0: 6dffcad6e9c7caea44805bd930abf8f6cdbcbe17ac593befdbe38e5d0e519077
 
 importers:
 
@@ -38,7 +39,7 @@ importers:
         version: 5.4.624
       ranui:
         specifier: 0.5.0
-        version: 0.5.0
+        version: 0.5.0(patch_hash=6dffcad6e9c7caea44805bd930abf8f6cdbcbe17ac593befdbe38e5d0e519077)
       ranuts:
         specifier: 0.5.0
         version: 0.5.0
@@ -109,10 +110,13 @@ importers:
         version: 16.4.2
       ranui:
         specifier: 0.5.0
-        version: 0.5.0
+        version: 0.5.0(patch_hash=6dffcad6e9c7caea44805bd930abf8f6cdbcbe17ac593befdbe38e5d0e519077)
       ranuts:
         specifier: 0.5.0
         version: 0.5.0
+      shiki:
+        specifier: 4.4.3
+        version: 4.4.3
     devDependencies:
       typescript:
         specifier: ^6.0.3
@@ -125,7 +129,7 @@ importers:
         version: link:../shared
       ranui:
         specifier: 0.5.0
-        version: 0.5.0
+        version: 0.5.0(patch_hash=6dffcad6e9c7caea44805bd930abf8f6cdbcbe17ac593befdbe38e5d0e519077)
       ranuts:
         specifier: 0.5.0
         version: 0.5.0
@@ -2237,7 +2241,7 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  ranui@0.5.0:
+  ranui@0.5.0(patch_hash=6dffcad6e9c7caea44805bd930abf8f6cdbcbe17ac593befdbe38e5d0e519077):
     dependencies:
       '@alixex/ranview': 0.2.0
       dompurify: 3.4.16
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7ed75da23..8d4d6769e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -7,6 +7,7 @@ minimumReleaseAgeExclude:
 patchedDependencies:
   '@mlc-ai/web-llm@0.2.85': patches/@mlc-ai__web-llm@0.2.85.patch
   '@wllama/wllama@3.6.1': patches/@wllama__wllama@3.6.1.patch
+  ranui@0.5.0: patches/ranui@0.5.0.patch
 # Security fixes for transitive dependencies; remove when upstream ranges
 # select patched releases (KaTeX currently remains on Mermaid's 0.16 range).
 overrides:
diff --git a/styles/assistant-artifacts.css b/styles/assistant-artifacts.css
new file mode 100644
index 000000000..7b0ca9875
--- /dev/null
+++ b/styles/assistant-artifacts.css
@@ -0,0 +1,346 @@
+/* The section is a column in the shell; only its body owns vertical scrolling.
+   Width changes move the existing section without replacing its draft or reader. */
+.agent-panel .agent-artifacts {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+.agent-panel .agent-artifacts[hidden] {
+  display: none;
+}
+.agent-artifacts > .agent-view-header {
+  flex: none;
+  margin: 0;
+  padding: var(--ran-space-4) var(--agent-content-inset);
+}
+.agent-artifacts-body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: var(--ran-space-4) var(--agent-content-inset) var(--ran-space-6);
+}
+.agent-artifacts > .agent-artifact-status {
+  flex: none;
+  margin: 0;
+  padding: var(--ran-space-3) var(--agent-content-inset);
+  border-block-start: 1px solid var(--ran-color-border);
+  line-height: 1.5;
+}
+.agent-artifacts .agent-artifact-workbench {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ran-space-6);
+  min-width: 0;
+}
+.agent-artifact-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ran-space-2);
+  min-width: 0;
+}
+.agent-artifact-identity,
+.agent-artifact-modebar,
+.agent-artifact-modes,
+.agent-artifact-delete-prompt,
+.agent-artifact-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--ran-space-2);
+  min-width: 0;
+}
+.agent-artifact-modebar,
+.agent-artifact-delete-prompt,
+.agent-artifact-pagination {
+  flex-wrap: wrap;
+}
+.agent-artifact-identity > .agent-artifact-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  border-color: transparent;
+  padding-inline: var(--ran-space-2);
+  font-size: var(--ran-text-label-2);
+  font-weight: var(--ran-text-heading-weight);
+  line-height: 1.5;
+  text-overflow: ellipsis;
+}
+.agent-artifact-identity > .agent-artifact-title[readonly] {
+  padding-inline-start: 0;
+  cursor: default;
+}
+.agent-artifact-identity > .agent-artifact-title:not([readonly]) {
+  border-color: var(--ran-color-border);
+}
+.agent-artifact-identity > select {
+  flex: none;
+  width: auto;
+  max-width: 50%;
+  min-height: var(--app-control-height, 32px);
+  border: 0;
+  padding-inline: var(--ran-space-2);
+  color: var(--ran-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.agent-artifact-modes {
+  flex-wrap: wrap;
+  gap: var(--ran-space-1);
+}
+.agent-artifacts .agent-artifact-modes > button {
+  border: 1px solid transparent;
+  padding-inline: var(--ran-space-2);
+}
+.agent-artifacts .agent-artifact-modes > button[aria-pressed='true'] {
+  border-color: var(--ran-color-border);
+  background: var(--ran-color-bg-muted);
+  font-weight: var(--ran-text-heading-weight);
+}
+.agent-artifact-unsaved {
+  margin-inline-start: auto;
+  color: var(--ran-color-text-secondary);
+  font-size: var(--ran-text-label-3);
+  line-height: 1.5;
+}
+.agent-artifact-workbench .agent-artifact-content,
+.agent-artifact-workbench .agent-artifact-presentation-host,
+.agent-artifact-workbench .agent-artifact-presentation {
+  min-width: 0;
+}
+.agent-artifact-workbench .agent-artifact-content > textarea,
+.agent-artifact-workbench .agent-artifact-source > textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 22rem;
+  line-height: 1.75;
+  resize: vertical;
+  font-family: inherit;
+  font-size: var(--ran-text-copy-1, 16px);
+}
+.agent-artifact-workbench .agent-artifact-content > textarea {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+.agent-artifact-workbench .agent-artifact-source > textarea {
+  font-family: var(--ran-font-mono, monospace);
+  font-size: var(--ran-text-copy-2, 14px);
+  margin-block-start: var(--ran-space-2);
+}
+.agent-artifact-workbench .agent-artifact-reader {
+  color: var(--ran-color-text);
+  font-weight: var(--ran-text-copy-weight);
+  font-size: var(--ran-text-copy-1, 16px);
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+  overflow-x: auto;
+}
+.agent-artifact-reader > :first-child {
+  margin-block-start: 0;
+}
+.agent-artifact-workbench .agent-artifact-reader > :last-child {
+  margin-block-end: 0;
+}
+.agent-artifact-workbench .agent-artifact-reader :is(h2, h3, h4, h5, h6) {
+  margin-block: var(--ran-space-8) var(--ran-space-2);
+  font-size: inherit;
+  line-height: 1.4;
+  font-weight: var(--ran-text-heading-weight);
+  text-wrap: pretty;
+}
+.agent-artifact-workbench .agent-artifact-reader h2 {
+  font-size: var(--ran-text-heading-3, 20px);
+  letter-spacing: var(--ran-text-heading-tracking);
+}
+.agent-artifact-workbench .agent-artifact-reader h3 {
+  font-size: var(--ran-text-heading-4, 16px);
+}
+.agent-artifact-workbench .agent-artifact-reader > :is(h2, h3, h4, h5, h6):first-child {
+  margin-block-start: 0;
+}
+.agent-artifact-reader :is(p, ul, ol) {
+  margin-block: 0 var(--ran-space-4);
+}
+.agent-artifact-workbench .agent-artifact-reader > p {
+  color: inherit;
+  white-space: normal;
+}
+/* The text measure stays independent of table and code viewports. */
+.agent-artifact-reader :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote) {
+  max-inline-size: 42.5rem;
+}
+.agent-artifact-reader :is(ul, ol) {
+  box-sizing: border-box;
+  padding-inline-start: var(--ran-space-6);
+}
+.agent-artifact-reader li {
+  padding-inline-start: calc(var(--ran-space-1) / 2);
+  margin-block: var(--ran-space-1);
+}
+.agent-artifact-reader li > p {
+  margin-block: 0 var(--ran-space-2);
+}
+.agent-artifact-reader li > :last-child,
+.agent-artifact-reader li > :is(ul, ol) {
+  margin-block-end: 0;
+}
+.agent-artifact-reader a {
+  color: var(--ran-color-link);
+  text-decoration: underline;
+}
+.agent-artifact-reader blockquote {
+  box-sizing: border-box;
+  margin-block: var(--ran-space-4);
+  margin-inline: 0;
+  padding-inline-start: var(--ran-space-3);
+  border-inline-start: 2px solid var(--ran-color-border);
+  color: var(--ran-color-text-secondary);
+}
+.agent-artifact-reader code {
+  font-family: var(--ran-font-mono, monospace);
+  font-size: 0.88em;
+  background: var(--ran-color-bg-muted);
+  padding: calc(var(--ran-space-1) / 2) var(--ran-space-1);
+  border-radius: var(--ran-radius-sm);
+}
+.agent-artifact-reader hr {
+  width: 100%;
+  margin-block: var(--ran-space-6);
+  border: 0;
+  border-block-start: 1px solid var(--ran-color-border);
+}
+.agent-artifact-field-value {
+  white-space: pre-wrap;
+}
+.agent-artifact-reader > .agent-artifact-field-value:first-child {
+  margin-block-end: var(--ran-space-3);
+  font-size: var(--ran-text-heading-4);
+  font-weight: var(--ran-text-heading-weight);
+}
+.agent-artifact-pagination {
+  margin-block-start: var(--ran-space-4);
+  color: var(--ran-color-text-secondary);
+  font-size: var(--ran-text-label-3);
+  font-variant-numeric: tabular-nums;
+}
+.agent-artifact-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ran-space-3);
+  padding-block-start: var(--ran-space-4);
+  border-block-start: 1px solid var(--ran-color-border);
+  min-width: 0;
+}
+.agent-artifact-footer > .agent-artifact-actions {
+  /* Padded commands extend their hit frame into the gutter; labels keep the reader rail. */
+  margin-inline: calc(-1 * var(--ran-space-2));
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ran-space-2);
+  min-width: 0;
+}
+.agent-artifact-footer > .agent-artifact-actions > button {
+  flex: 0 1 auto;
+  width: auto;
+}
+.agent-artifact-footer > .agent-artifact-actions > [data-action='delete'] {
+  margin-inline-start: auto;
+}
+.agent-artifact-footer .agent-artifact-workflow {
+  margin: 0;
+}
+.agent-artifact-footer [data-action='refine'] {
+  margin-inline-start: calc(-1 * var(--ran-space-2));
+}
+.agent-artifact-footer .agent-artifact-workflow form input {
+  border: 1px solid var(--ran-color-border);
+  border-radius: var(--ran-radius-sm);
+  padding-inline: var(--ran-space-2);
+}
+.agent-artifact-footer > .agent-artifact-provenance {
+  margin: 0;
+  color: var(--ran-color-text-secondary);
+  font-size: var(--ran-text-label-3);
+  line-height: 1.6;
+}
+.agent-artifact-delete-prompt > span {
+  flex: 1 1 100%;
+  font-size: var(--ran-text-label-2);
+}
+.agent-artifact-export {
+  max-width: 100%;
+}
+.agent-artifact-export > summary,
+.agent-artifact-source > summary {
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: var(--ran-text-label-3);
+  min-height: var(--app-control-height, 32px);
+  padding: var(--ran-space-1) var(--ran-space-2);
+  align-content: center;
+  border: 1px solid var(--ran-color-border);
+  border-radius: var(--ran-radius-sm);
+}
+.agent-artifact-export[open] {
+  flex-basis: 100%;
+}
+.agent-artifact-export[open] > summary {
+  width: fit-content;
+  margin-block-end: var(--ran-space-2);
+}
+.agent-artifact-workbench :is(.agent-artifact-reader, textarea, summary, select, input):focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: 2px;
+}
+.agent-artifacts [hidden] {
+  display: none;
+}
+@media (pointer: coarse) {
+  .agent-artifact-workbench :is(button, summary, select, input) {
+    min-height: var(--app-control-touch, 44px);
+  }
+}
+
+/* Multiline suggestions are two readable texts; short changes remain inline. */
+.agent-artifact-workbench .agent-artifact-diff[data-layout='blocks'] {
+  display: grid;
+  gap: var(--ran-space-4);
+  max-height: none;
+  overflow: visible;
+  white-space: normal;
+}
+.agent-artifact-diff-block {
+  min-width: 0;
+}
+.agent-artifact-diff-block > .agent-artifact-diff-label {
+  margin: 0 0 var(--ran-space-2);
+  color: var(--ran-color-text-secondary);
+  font-size: var(--ran-text-label-3);
+  font-weight: var(--ran-text-heading-weight);
+  line-height: 1.4;
+}
+.agent-artifact-diff-text {
+  max-height: 16em;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: var(--ran-text-label-2);
+  line-height: 1.65;
+}
+.agent-artifact-diff-block[data-artifact-diff-side='before'] .agent-artifact-diff-text {
+  color: var(--ran-color-text-secondary);
+}
+.agent-artifact-diff-block[data-artifact-diff-side='after'] .agent-artifact-diff-text {
+  padding-inline-start: var(--ran-space-3);
+  border-inline-start: 2px solid var(--ran-color-border);
+}
+
+.agent-artifact-diff-text:focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: 2px;
+}
diff --git a/styles/assistant.css b/styles/assistant.css
index 553a4d5a3..b35566afa 100644
--- a/styles/assistant.css
+++ b/styles/assistant.css
@@ -1,5 +1,5 @@
 /* ── Document assistant ───────────────────────────── */
-/* Dock mode: the editor gives up 360px so the panel sits beside it instead of
+/* Dock mode: the editor gives up the preferred panel width so it sits beside it instead of
    overlaying the document. DocsAPI REPLACES the #iframe placeholder div with the
    editor <iframe> (name="frameEditor", no id) inside #app, so target that iframe
    directly. Narrowing it makes OnlyOffice reflow its content. */
@@ -7,7 +7,7 @@
   transition: width var(--ran-motion-duration-base) ease;
 }
 body.agent-docked #app iframe {
-  width: calc(100% - var(--agent-panel-width, 432px)) !important;
+  width: calc(100% - var(--agent-panel-width, 480px)) !important;
 }
 .agent-panel-resizer {
   position: absolute;
@@ -66,7 +66,7 @@ body.agent-panel-resizing #app iframe {
   display: none;
 }
 .agent-panel-clear:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-panel-clear {
@@ -89,6 +89,7 @@ body.agent-panel-resizing #app iframe {
 /* Box, border, background, colour and cursor come from the shared
    `.agent-panel-header button` rule, which outranks this class; only the glyph
    sizing belongs here. */
+.agent-panel-expand,
 .agent-panel-close {
   font-size: var(--ran-text-heading-3);
   line-height: 1;
@@ -125,29 +126,40 @@ body.agent-panel-resizing #app iframe {
   display: none;
 }
 .agent-history-management > summary::after {
-  content: '+';
-  font-size: var(--ran-text-copy-1);
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-inline-end: var(--ran-space-1);
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
+  transform: rotate(45deg);
 }
 .agent-history-management[open] > summary::after {
-  content: '−';
+  transform: rotate(225deg);
 }
 .agent-history-management label {
   margin-top: var(--ran-space-3);
 }
 .agent-history-options label {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--ran-space-2);
+  padding: var(--ran-space-2);
+  margin-inline: calc(-1 * var(--ran-space-2));
+  margin-block-start: var(--ran-space-2);
+  font-size: var(--ran-text-label-2);
 }
 .agent-history-save {
   flex: 0 0 var(--ran-size-1);
   width: var(--ran-size-1);
   height: var(--ran-size-1);
-  margin: var(--ran-space-1) 0 0;
+  margin: 0;
   accent-color: var(--ran-color-primary);
 }
 .agent-history-status {
-  margin: var(--ran-space-2) 0 var(--ran-space-4);
+  margin: 0 0 var(--ran-space-4);
+  padding-inline-start: var(--ran-space-6);
+  font-size: var(--ran-text-label-3);
   color: var(--ran-color-text-secondary);
   overflow-wrap: anywhere;
 }
@@ -160,14 +172,14 @@ body.agent-panel-resizing #app iframe {
   display: flex;
   flex-direction: column;
   gap: var(--ran-space-4);
-  /* Own 8px of the panel gutter so the visible icon/label columns stay
-     aligned with the checkbox while each button keeps inline padding. */
-  margin-inline-start: calc(-1 * var(--ran-space-2));
+  /* Hit surfaces use the existing gutter. Visible leading icons stay at 16px,
+     with labels and their status at 40px, including the checkbox row above. */
+  margin-inline: calc(-1 * var(--ran-space-2));
 }
 .agent-history-transfer-actions,
 .agent-history-danger-actions {
   display: grid;
-  justify-items: start;
+  justify-items: stretch;
   gap: var(--ran-space-2);
   min-width: 0;
 }
@@ -208,27 +220,30 @@ body.agent-panel-resizing #app iframe {
   border-color: var(--ran-color-border-active);
   background: var(--ran-color-bg-active);
 }
-/* The pane establishes the region; only each native button owns a surface.
-   A resting control shape must remain visible without pointer discovery. */
+/* A named command group supplies context; resting rows need no repeated frame.
+   Hover/focus targets include 8px of the owned gutter without shifting content. */
 .agent-history-actions button {
-  width: fit-content;
-  min-height: var(--app-control-touch);
+  width: 100%;
+  min-height: var(--app-control-height);
   justify-content: flex-start;
   gap: var(--ran-space-2);
-  padding: var(--ran-space-3) var(--ran-space-2);
+  padding: var(--ran-space-1) var(--ran-space-2);
   border: 0;
   border-radius: var(--ran-radius-sm);
-  background: var(--ran-color-bg-hover);
-  box-shadow: inset 0 0 0 1px var(--ran-color-border);
+  background: transparent;
+  box-shadow: none;
   text-align: start;
-  font-size: var(--ran-text-label-1);
-  font-weight: var(--ran-text-label-weight);
+  font-size: var(--ran-text-label-2);
+  font-weight: var(--ran-text-copy-weight);
+}
+.agent-history-options .agent-history-actions button:disabled {
+  background: transparent;
 }
 .agent-history-actions button:enabled:hover {
-  background: var(--ran-color-bg-active);
+  background: var(--ran-color-bg-hover);
 }
 .agent-history-actions button:enabled:active {
-  background: color-mix(in srgb, var(--ran-color-bg-active) 96%, var(--ran-color-text));
+  background: var(--ran-color-bg-active);
 }
 .agent-history-actions button svg {
   flex: 0 0 var(--ran-size-1);
@@ -275,7 +290,7 @@ body.agent-panel-resizing #app iframe {
 }
 .agent-history-options button:focus-visible,
 .agent-history-options input:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-history-actions button:focus-visible {
@@ -294,14 +309,6 @@ body.agent-panel-resizing #app iframe {
 /* The conversation list, input box, and message bubbles now live in the
    @ranuts/chat-ui ChatView (it injects its own `cui-*` styles). It must flex to
    fill the panel's remaining height below the header/settings/toolbar. */
-.agent-panel .cui-msg-agent,
-.agent-panel .cui-msg-error,
-.agent-panel .cui-activity {
-  max-width: 72ch;
-}
-.agent-panel .cui-msg-user {
-  max-width: min(88%, 64ch);
-}
 .agent-panel .cui-composer:focus-within {
   border-color: var(--ran-color-text-secondary);
   box-shadow: none;
@@ -326,7 +333,7 @@ body.agent-panel-resizing #app iframe {
   color: var(--ran-color-success);
 }
 .agent-panel .cui-message-actions .cui-apply:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-panel .cui-msg-tool .cui-bubble,
@@ -539,8 +546,6 @@ r-dropdown[role='listbox'] {
   color: var(--ran-color-text);
 }
 .agent-panel-settings-toggle {
-  /* The title owns flex:1, so the gear already sits against the trailing
-     controls; a margin here would fight the close button beside it. */
   border: none;
   background: none;
   font-size: var(--ran-text-copy-1);
@@ -552,7 +557,7 @@ r-dropdown[role='listbox'] {
 .agent-panel-quote:focus-visible,
 .agent-writing-task:focus-visible,
 .agent-writing-language:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-panel-review {
@@ -582,9 +587,6 @@ r-dropdown[role='listbox'] {
   height: auto;
   font-family: inherit;
 }
-.agent-panel .cui-actions {
-  gap: var(--ran-space-2);
-}
 .agent-panel-quote {
   margin-left: auto;
 }
@@ -659,11 +661,6 @@ r-dropdown[role='listbox'] {
   border-left: 2px solid var(--ran-color-primary);
   line-height: 1.55;
 }
-.agent-panel .cui-messages {
-  padding: var(--ran-space-6) var(--ran-space-4);
-  gap: var(--ran-space-4);
-  line-height: 1.75;
-}
 /* One block per element: the welcome surface used to declare these twice, and
    the later copy silently won -- the earlier font-size and the flex row were
    dead code that still read as intent. */
@@ -682,15 +679,6 @@ r-dropdown[role='listbox'] {
   display: block;
   margin-top: var(--ran-space-3);
 }
-.agent-welcome-hint {
-  /* The actions row is a block, so a flex-basis here would be inert. */
-  margin: 0 0 var(--ran-space-6);
-  font-size: var(--ran-text-label-2);
-  font-weight: 400;
-  line-height: 1.65;
-  letter-spacing: 0;
-  color: var(--ran-color-text-secondary);
-}
 .agent-panel .cui-empty-actions .agent-configure {
   display: inline-flex;
   align-items: center;
@@ -711,10 +699,6 @@ r-dropdown[role='listbox'] {
 .agent-panel .cui-empty-actions .agent-configure:hover {
   color: var(--ran-color-text);
 }
-.agent-panel .cui-message-actions {
-  gap: calc(var(--ran-space-4) / 2 + var(--ran-space-1) / 2);
-  margin-top: calc(var(--ran-space-1) / 2);
-}
 .agent-panel .cui-message-actions button {
   min-height: var(--ran-size-7);
 }
@@ -725,9 +709,6 @@ r-dropdown[role='listbox'] {
   box-shadow: none;
   line-height: 1.65;
 }
-.agent-panel .cui-composer-bar {
-  margin-top: var(--ran-space-2);
-}
 @media (max-width: 480px) {
   .agent-panel-header button,
   .agent-panel-quote,
@@ -739,9 +720,6 @@ r-dropdown[role='listbox'] {
   .agent-panel-clear {
     flex-basis: var(--app-control-touch);
   }
-  .agent-panel .cui-messages {
-    padding: var(--ran-space-6) var(--ran-space-4);
-  }
   .agent-panel .cui-footer {
     padding-bottom: max(var(--ran-space-4), env(safe-area-inset-bottom));
   }
@@ -765,11 +743,10 @@ r-dropdown[role='listbox'] {
     min-height: 124px;
   }
   .agent-panel .cui-messages {
-    padding: 0 var(--ran-space-4);
+    padding-block: 0;
   }
   .agent-panel .cui-footer {
-    padding: var(--ran-space-2) var(--ran-space-4);
-    padding-bottom: max(var(--ran-space-2), env(safe-area-inset-bottom));
+    padding-block: var(--ran-space-2) max(var(--ran-space-2), env(safe-area-inset-bottom));
   }
   .agent-panel .cui-composer {
     padding: calc(var(--ran-space-4) / 2 + var(--ran-space-1) / 2);
@@ -843,7 +820,7 @@ r-dropdown[role='listbox'] {
   font-size: var(--ran-text-label-3);
 }
 .agent-model-sources summary:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-model-sources r-input {
@@ -854,16 +831,11 @@ r-dropdown[role='listbox'] {
 /* Product surfaces: each view owns the available space. */
 .agent-panel {
   /* Content, text and navigation have different boxes but named shared rails. */
-  --agent-content-inset: var(--ran-space-4);
+  --agent-content-inset: var(--ran-space-6);
   --agent-title-inset: var(--ran-space-2);
-  --agent-navigation-size: var(--app-control-height);
-  --agent-navigation-inset: calc((var(--agent-navigation-size) - var(--ran-size-1)) / 2);
-  /* Status lines beside the composer (model state, readiness, write
-     destination) line up with the composer's *text*, not its edge: footer
-     padding plus the composer's own padding. Three rules must agree, so the
-     sum is named once here instead of repeated as arithmetic (DESIGN.md §11,
-     "When a value must equal another value, name it"). */
-  --agent-composer-inset: calc(var(--ran-space-4) + var(--ran-space-1));
+  /* The quoted selection follows the input text inside the composer border. */
+  --agent-composer-padding: var(--ran-space-3);
+  --agent-composer-inset: calc(var(--agent-content-inset) + var(--agent-composer-padding) + 1px);
   position: fixed;
   top: 0;
   right: 0;
@@ -877,9 +849,49 @@ r-dropdown[role='listbox'] {
   background: var(--ran-color-bg-elevated);
   border-left: 1px solid var(--ran-color-border);
   font-size: var(--ran-text-copy-2);
-  width: min(var(--agent-panel-width, 432px), 100vw);
+  width: min(var(--agent-panel-width, 480px), 100vw);
   box-shadow: none;
 }
+.agent-panel[data-split='true'] {
+  display: grid;
+  grid-template-columns: minmax(320px, 2fr) minmax(480px, 3fr);
+  grid-template-rows: auto auto minmax(0, 1fr);
+}
+.agent-panel[data-split='true'] > .agent-panel-header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+}
+.agent-panel[data-split='true'] > .agent-runtime-row {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+.agent-panel[data-split='true'] > .cui-root {
+  grid-column: 1;
+  grid-row: 3;
+}
+.agent-panel[data-split='true'] > .agent-artifacts {
+  grid-column: 2;
+  grid-row: 3;
+  border-inline-start: 1px solid var(--ran-color-border);
+}
+.agent-artifact-return-slot {
+  flex: none;
+  padding: var(--ran-space-2) var(--agent-content-inset) 0;
+}
+.agent-artifact-return-slot > .agent-view-back {
+  margin-inline-start: calc(-1 * var(--ran-space-2));
+}
+@container agent-panel (max-width: 380px) {
+  .agent-panel > :not(.agent-panel-resizer) {
+    --agent-content-inset: var(--ran-space-4);
+  }
+}
+@media (pointer: coarse) {
+  .agent-panel .agent-panel-header {
+    min-height: 52px;
+    padding-block: var(--ran-space-1);
+  }
+}
 .agent-panel [hidden] {
   display: none !important;
 }
@@ -887,23 +899,67 @@ r-dropdown[role='listbox'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--ran-color-border);
   box-sizing: border-box;
-  min-height: 56px;
+  min-height: 48px;
   flex: 0 0 auto;
   padding: var(--ran-space-2) var(--agent-content-inset);
   gap: calc(var(--ran-space-1) / 2);
 }
-.agent-panel-header .agent-panel-title {
-  display: block;
+.agent-workspace-nav {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: calc(var(--ran-space-1) / 2);
+  min-width: 0;
+}
+.agent-workspace-nav button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--app-control-height);
+  min-width: var(--app-control-height);
+  min-height: var(--app-control-height);
+  padding: var(--ran-space-1);
+  border: 0;
+  border-radius: var(--ran-radius-sm);
+  background: transparent;
+  color: var(--ran-color-text-secondary);
+  font: inherit;
+  font-size: var(--ran-text-label-3);
+  font-weight: var(--ran-text-copy-weight);
+  line-height: var(--ran-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.agent-workspace-nav button:hover:enabled {
+  color: var(--ran-color-text);
+  background: var(--ran-color-bg-hover);
+}
+.agent-workspace-nav button[aria-current='page'] {
+  font-weight: var(--ran-text-label-weight);
+  color: var(--ran-color-text);
+  background: var(--ran-color-bg-active);
+}
+.agent-workspace-nav button:active:enabled {
+  background: var(--ran-color-bg-active);
+}
+.agent-panel .agent-workspace-nav button:focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: -2px;
+}
+.agent-panel-header :is(.agent-panel-title, .agent-panel-return.agent-view-back) {
+  display: inline-flex;
   flex: 0 1 auto;
   width: auto;
   justify-content: flex-start;
+  gap: var(--ran-space-1);
   text-align: left;
   font-family: inherit;
-  font-weight: var(--ran-text-heading-weight);
-  font-size: var(--ran-text-copy-2);
-  letter-spacing: -0.02em;
+  font-weight: var(--ran-text-label-weight);
+  font-size: var(--ran-text-label-2);
+  letter-spacing: normal;
   min-width: 0;
   /* Extend the hit area into the gutter; text stays on the content rail.
      Trailing free space belongs to layout, never to the title's hover fill. */
@@ -916,6 +972,24 @@ r-dropdown[role='listbox'] {
   color: var(--ran-color-text);
   background: transparent;
 }
+.agent-header-home-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.agent-panel-header .agent-panel-title[aria-current='page'] {
+  background: transparent;
+}
+.agent-panel-header :is(.agent-panel-title, .agent-panel-return):hover:enabled {
+  background: var(--ran-color-bg-hover);
+}
+.agent-panel-header .agent-panel-return svg {
+  flex: 0 0 auto;
+}
+.agent-panel-header .agent-panel-return span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .agent-panel-settings {
   display: flex;
   flex-direction: column;
@@ -931,13 +1005,12 @@ r-dropdown[role='listbox'] {
 .agent-panel-settings-hidden {
   display: none;
 }
-.agent-panel[data-view='settings'] > .agent-runtime-row,
-.agent-panel[data-view='history'] > .agent-runtime-row {
+.agent-panel:not([data-view='chat']) > .agent-runtime-row {
   display: none;
 }
 .agent-panel-settings h2 {
   margin: 0;
-  font-size: var(--ran-text-heading-3);
+  font-size: var(--ran-text-heading-4);
   font-weight: 600;
   letter-spacing: -0.045em;
   line-height: 1.3;
@@ -1089,7 +1162,7 @@ r-dropdown[role='listbox'] {
 .agent-enable-switch:focus-visible,
 .agent-use-card summary:focus-visible,
 .agent-preferences summary:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 4px;
 }
 .agent-entry-note {
@@ -1105,7 +1178,7 @@ r-dropdown[role='listbox'] {
   flex: 0 0 auto;
   order: 3;
   gap: var(--ran-space-2);
-  padding: 0 var(--agent-composer-inset) var(--ran-space-3);
+  padding: var(--ran-space-1) 0;
   margin: 0;
   font-size: var(--ran-text-label-3);
   line-height: 1.6;
@@ -1116,20 +1189,52 @@ r-dropdown[role='listbox'] {
 }
 .agent-panel .cui-footer {
   border-top: 0;
-  padding: var(--ran-space-3) var(--ran-space-4) var(--ran-space-4);
+}
+.agent-composer-meta {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding-block-start: var(--ran-space-1);
+}
+.agent-model-shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ran-space-2);
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--app-control-height);
+  padding: var(--ran-space-1);
+  margin-inline-start: calc(-1 * var(--ran-space-1));
+  border: 0;
+  border-radius: var(--ran-radius-sm);
+  background: transparent;
+  color: var(--ran-color-text-secondary);
+  font: inherit;
+  font-size: var(--ran-text-label-3);
+  cursor: pointer;
+}
+.agent-model-shortcut-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.agent-model-shortcut-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.agent-model-shortcut:hover {
+  color: var(--ran-color-text);
+  background: var(--ran-color-bg-hover);
+}
+.agent-model-shortcut:focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: 2px;
 }
 .agent-panel .cui-composer {
   border-color: var(--ran-color-border);
   background: var(--ran-color-bg-elevated);
   border-radius: var(--ran-radius-md);
-  padding: var(--ran-space-3);
-}
-.agent-panel .cui-msg-user .cui-bubble {
-  padding: var(--ran-space-3) var(--ran-space-4);
-  /* Radius comes from the ladder; 3px (radius-sm/2) was a fifth step that
-     existed nowhere else in the product (DESIGN.md §4). */
-  border-radius: var(--ran-radius-md) var(--ran-radius-md) var(--ran-radius-sm) var(--ran-radius-md);
-  background: var(--ran-color-bg-muted);
+  padding: var(--agent-composer-padding);
 }
 .agent-panel .cui-send,
 .agent-panel .cui-stop {
@@ -1160,9 +1265,6 @@ r-dropdown[role='listbox'] {
   }
 }
 @media (max-width: 480px) {
-  .agent-panel-header {
-    padding: var(--ran-space-2) var(--ran-space-4);
-  }
   /* No per-width button geometry: the shared 32px target stays, and the
      coarse-pointer block grows every header control to --app-control-touch
      together. A 34x40 box here made the row ragged against the 44px clear
@@ -1171,13 +1273,8 @@ r-dropdown[role='listbox'] {
   .agent-history-view {
     padding: var(--ran-space-4);
   }
-  .agent-panel-header .agent-panel-title {
-    flex: 0 1 auto;
-    width: auto;
-    font-size: var(--ran-text-copy-2);
-  }
   .agent-panel .cui-footer {
-    padding: var(--ran-space-3) var(--ran-space-4) max(var(--ran-space-3), env(safe-area-inset-bottom));
+    padding-bottom: max(var(--ran-space-3), env(safe-area-inset-bottom));
   }
 }
 @container agent-panel (max-height:600px) {
@@ -1185,9 +1282,6 @@ r-dropdown[role='listbox'] {
     max-height: none;
     padding: var(--ran-space-4);
   }
-  .agent-panel-header {
-    min-height: 48px;
-  }
   .agent-readiness {
     padding-bottom: calc(var(--ran-space-3) / 2);
   }
@@ -1198,10 +1292,16 @@ r-dropdown[role='listbox'] {
   }
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .agent-history-management > summary::after {
+    transition: transform var(--ran-motion-duration-fast) ease-out;
+  }
+}
+
 .agent-panel-write-destination {
   flex: 0 0 auto;
   order: 4;
-  padding: 0 var(--agent-composer-inset) var(--ran-space-3);
+  padding: var(--ran-space-1) 0;
   font-size: var(--ran-text-label-3);
   line-height: 1.6;
   color: var(--ran-color-text-secondary);
@@ -1302,7 +1402,7 @@ r-dropdown[role='listbox'] {
   display: none;
 }
 .agent-use-card .agent-model-memory {
-  margin: var(--ran-space-3) 0 0;
+  margin: var(--ran-space-2) 0 0;
   font-size: var(--ran-text-label-3);
   display: flex;
   align-items: center;
@@ -1326,10 +1426,6 @@ r-dropdown[role='listbox'] {
   margin: var(--ran-space-1) 0 0;
   accent-color: var(--ran-color-primary);
 }
-.agent-panel-header button[aria-expanded='true']:not(.agent-panel-title) {
-  background: var(--ran-color-bg-muted);
-  color: var(--ran-color-text);
-}
 .agent-panel-settings > .agent-panel-note {
   margin: calc(-1 * var(--ran-space-2)) 0 0;
 }
@@ -1346,6 +1442,7 @@ r-dropdown[role='listbox'] {
   display: none;
 }
 .agent-model-choice r-select {
+  display: block;
   width: 100%;
 }
 .agent-model-cache {
@@ -1398,7 +1495,7 @@ r-dropdown[role='listbox'] {
   margin-bottom: var(--ran-space-4);
 }
 .agent-panel :is(button, summary, r-select, r-input, r-button):focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-quote-context {
@@ -1483,7 +1580,7 @@ r-dropdown[role='listbox'] {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: var(--ran-space-3);
+  gap: var(--ran-space-4);
   padding: 0;
   margin: 0;
   border: 0;
@@ -1546,23 +1643,6 @@ r-dropdown[role='listbox'] {
 .agent-speech-mic[aria-pressed='true'] svg:last-child {
   display: block;
 }
-/* One lane for the language label: it yields before it can cover Stop/Send,
-   so it is declared once, with the select's public hooks. */
-.agent-speech-language {
-  flex: 1 1 96px;
-  width: auto;
-  min-width: 0;
-  max-width: 96px;
-  --ran-select-background-color: transparent;
-  --ran-select-border: 1px solid transparent;
-  --ran-select-hover-border: 1px solid transparent;
-  --ran-select-height: var(--ran-size-7);
-  --ran-select-min-height: var(--ran-size-7);
-  --ran-select-font-size: var(--ran-text-label-3);
-  --ran-select-color: var(--ran-color-text-secondary);
-  --ran-select-item-hover-color: var(--ran-color-text);
-  --ran-select-search-focus-color: var(--ran-color-text);
-}
 .agent-speech-feedback {
   display: flex;
   flex: 1;
@@ -1578,22 +1658,10 @@ r-dropdown[role='listbox'] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* While dictating, the fixed language lane displays the live state instead.
-   Its disabled selector keeps its bounds, and the trailing controls stay put. */
-/* Give live dictation priority over the secondary source picker. */
+/* Live feedback takes the optional source lane while recording. */
 .agent-panel .cui-actions:has(.agent-speech[data-feedback='true']) .agent-sources-toggle {
   display: none;
 }
-.agent-speech[data-feedback='true'] .agent-speech-language {
-  visibility: hidden;
-}
-.agent-speech[data-feedback='true'] .agent-speech-feedback > [role='status'] {
-  position: absolute;
-  inset-inline-start: calc(var(--ran-size-7) + var(--ran-space-1));
-  inset-inline-end: calc(var(--ran-size-7) * 2 + var(--ran-space-1) * 2);
-  height: var(--ran-size-7);
-  line-height: var(--ran-size-7);
-}
 .agent-speech-feedback[hidden],
 .agent-speech-cancel[hidden] {
   display: flex;
@@ -1608,20 +1676,41 @@ r-dropdown[role='listbox'] {
 .agent-speech-popover {
   z-index: 100000;
 }
-.agent-speech-hint {
+.agent-speech-options {
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
-  width: min(256px, calc(100vw - 64px));
+  width: min(272px, calc(100vw - 64px));
+  gap: var(--ran-space-3);
+}
+.agent-speech-popover .agent-speech-language {
+  display: block;
+  width: 100%;
+  --ran-select-height: var(--app-control-height, 32px);
+  --ran-select-min-height: var(--app-control-height, 32px);
+  --ran-select-font-size: var(--ran-text-label-2);
+}
+.agent-speech-hint,
+.agent-speech-notice {
   margin: 0;
   color: var(--ran-color-text-secondary);
   font-size: var(--ran-text-label-3);
   line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.agent-speech-notice[hidden] {
+  display: none;
+}
+.agent-speech-popover :focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: 2px;
 }
 .agent-speech button:disabled {
   cursor: default;
   opacity: 0.6;
 }
 .agent-speech :is(button, r-select):focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 
@@ -1744,7 +1833,7 @@ r-dropdown[role='listbox'] {
 }
 .agent-plan-preview:focus-visible,
 .agent-plan-preview :is(summary, textarea, r-button):focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 
@@ -1767,6 +1856,9 @@ r-dropdown[role='listbox'] {
   font-weight: 500;
   margin: 0 0 var(--ran-space-3);
 }
+.agent-custom-sources .agent-settings-field + .agent-settings-field {
+  margin-block-start: var(--ran-space-4);
+}
 
 .agent-model-actions {
   display: flex;
@@ -1931,11 +2023,11 @@ r-dropdown[role='listbox'] {
 .agent-conversation-open:focus-visible,
 .agent-conversation-delete:focus-visible,
 .agent-history-management > summary:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-history-empty {
-  margin: var(--ran-space-8) 0;
+  margin: var(--ran-space-6) 0;
   text-align: center;
   color: var(--ran-color-text-secondary);
   font-size: var(--ran-text-label-1);
@@ -1948,7 +2040,12 @@ r-dropdown[role='listbox'] {
   font-weight: 400;
   letter-spacing: 0;
   font-size: var(--ran-text-label-2);
-  width: 100%;
+  /* Own the padded command hit areas, so their shared gutter does not become
+     overflow inside this contextual task region. Visible text stays on its rail. */
+  box-sizing: border-box;
+  width: calc(100% + var(--ran-space-2) * 2);
+  margin-inline: calc(-1 * var(--ran-space-2));
+  padding-inline: var(--ran-space-2);
   min-width: 0;
 }
 .agent-task-scope {
@@ -1968,17 +2065,20 @@ r-dropdown[role='listbox'] {
 .agent-task-list {
   display: grid;
   gap: var(--ran-space-1);
-  margin-top: var(--ran-space-3);
+  margin-top: var(--ran-space-2);
 }
 .agent-panel .agent-task-action {
   display: flex;
   align-items: center;
+  gap: var(--ran-space-3);
   text-align: start;
-  min-height: var(--ran-size-7);
-  padding: var(--ran-space-2) var(--ran-space-3);
-  border: 1px solid var(--ran-color-border);
+  min-height: var(--app-control-height);
+  padding: var(--ran-space-2);
+  margin-inline: calc(-1 * var(--ran-space-2));
+  width: calc(100% + var(--ran-space-2) * 2);
+  border: 0;
   border-radius: var(--ran-radius-sm);
-  background: var(--ran-color-bg-elevated);
+  background: transparent;
   color: var(--ran-color-text);
   font: inherit;
   cursor: pointer;
@@ -1992,10 +2092,20 @@ r-dropdown[role='listbox'] {
 .agent-panel .agent-task-action:hover {
   background: var(--ran-color-bg-muted);
 }
+.agent-task-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--ran-size-1);
+  color: var(--ran-color-text-secondary);
+}
 .agent-panel .agent-task-action:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 3px;
 }
+.agent-task-help:empty {
+  display: none;
+}
 .agent-task-help,
 .agent-staged-guidance {
   margin: var(--ran-space-3) 0 0;
@@ -2042,7 +2152,7 @@ r-dropdown[role='listbox'] {
   background: var(--ran-color-bg-hover);
 }
 .agent-history-more:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 
@@ -2152,7 +2262,7 @@ r-dropdown[role='listbox'] {
   cursor: default;
 }
 .agent-request-queue button:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: -2px;
 }
 .agent-queue-actions {
@@ -2234,7 +2344,7 @@ r-dropdown[role='listbox'] {
 .agent-workspace-view h2,
 .agent-artifacts h2 {
   margin: 0;
-  font-size: var(--ran-text-heading-3);
+  font-size: var(--ran-text-heading-4);
 }
 .agent-workspace-view h3 {
   margin: var(--ran-space-6) 0 var(--ran-space-2);
@@ -2289,6 +2399,9 @@ r-dropdown[role='listbox'] {
   text-align: start;
 }
 .agent-panel .cui-composer .agent-sources-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ran-space-1);
   min-height: var(--ran-size-7);
   padding: var(--ran-space-1) var(--ran-space-2);
   font-size: var(--ran-text-label-3);
@@ -2307,24 +2420,22 @@ r-dropdown[role='listbox'] {
 .agent-artifacts button:focus-visible,
 .agent-sources-toggle:focus-visible,
 .agent-workspace-toggle:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 /* View owners keep navigation callbacks; the chrome shares one token rhythm. */
 .agent-panel .agent-view-header {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   gap: var(--ran-space-2);
   margin-block-end: var(--ran-space-4);
-  /* The icon viewport returns to the content rail. Its centered hit target
-     occupies a separate leading navigation column, including coarse input. */
-  margin-inline-start: calc(-1 * var(--agent-navigation-inset));
   min-width: 0;
 }
 .agent-panel .agent-view-header h2 {
   margin: 0;
   min-width: 0;
-  font-size: var(--ran-text-heading-3);
+  font-size: var(--ran-text-heading-4);
   font-weight: var(--ran-text-heading-weight);
   letter-spacing: var(--ran-text-heading-tracking);
   line-height: 1.3;
@@ -2336,22 +2447,23 @@ r-dropdown[role='listbox'] {
 .agent-panel .agent-view-back {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   box-sizing: border-box;
   flex: 0 0 auto;
-  width: var(--agent-navigation-size);
-  height: var(--agent-navigation-size);
-  min-width: var(--agent-navigation-size);
-  min-height: var(--agent-navigation-size);
-  padding: var(--ran-space-2);
+  gap: var(--ran-space-1);
+  width: auto;
+  min-height: var(--app-control-height);
+  padding: var(--ran-space-1) var(--ran-space-2);
   border: 0;
   border-radius: var(--ran-radius-sm);
   color: var(--ran-color-text-secondary);
   background: transparent;
+  font: inherit;
+  font-size: var(--ran-text-label-3);
   cursor: pointer;
 }
 .agent-panel .agent-view-back:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 0;
 }
 .agent-workspace-view button:active:enabled,
@@ -2359,45 +2471,32 @@ r-dropdown[role='listbox'] {
 .agent-view-back:active:enabled {
   background: var(--ran-color-bg-active);
 }
-.agent-panel :is(.agent-workspace-view, .agent-artifacts, .agent-view-header) button:disabled {
+.agent-panel :is(.agent-workspace-view, .agent-artifacts, .agent-view-header) button:disabled,
+.agent-panel .agent-panel-return:disabled {
   color: var(--ran-color-text-disabled);
   cursor: default;
   background: transparent;
 }
-.agent-sources-view .agent-source-attach:enabled,
-.agent-artifacts
-  button:is(
-    [data-action='import'],
-    [data-action='saveVersion'],
-    [data-action='saveNew'],
-    [data-action='accept']
-  ):enabled {
+.agent-artifacts button:is([data-action='saveVersion'], [data-action='saveNew'], [data-action='accept']):enabled {
   background: var(--ran-color-primary);
   border-color: var(--ran-color-primary);
   color: var(--ran-color-primary-text);
 }
-.agent-sources-view .agent-source-attach:hover:enabled,
-.agent-artifacts
-  button:is(
-    [data-action='import'],
-    [data-action='saveVersion'],
-    [data-action='saveNew'],
-    [data-action='accept']
-  ):hover:enabled {
+.agent-artifacts button:is([data-action='saveVersion'], [data-action='saveNew'], [data-action='accept']):hover:enabled {
   background: var(--ran-color-primary-hover);
   border-color: var(--ran-color-primary-hover);
 }
 .agent-artifacts
-  button:is(
-    [data-action='import'],
-    [data-action='saveVersion'],
-    [data-action='saveNew'],
-    [data-action='accept']
-  ):active:enabled,
-.agent-sources-view .agent-source-attach:active:enabled {
+  button:is([data-action='saveVersion'], [data-action='saveNew'], [data-action='accept']):active:enabled {
   background: var(--ran-color-primary-active);
   border-color: var(--ran-color-primary-active);
 }
+.agent-sources-view .agent-source-attach,
+.agent-artifacts button[data-action='import'] {
+  background: var(--ran-color-bg-elevated);
+  box-shadow: inset 0 0 0 1px var(--ran-color-border);
+  color: var(--ran-color-text);
+}
 .agent-source-remove:enabled,
 .agent-artifacts button[data-action='delete']:enabled {
   color: var(--app-danger-fill);
@@ -2426,11 +2525,27 @@ r-dropdown[role='listbox'] {
   color: var(--ran-color-text-secondary);
   line-height: 1.6;
 }
+.agent-artifact-import > p {
+  margin: 0;
+  color: var(--ran-color-text-secondary);
+  font-size: var(--ran-text-label-3);
+  font-weight: var(--ran-text-copy-weight);
+  line-height: var(--ran-line-height);
+  overflow-wrap: anywhere;
+}
 .agent-artifacts-list button {
   width: 100%;
   font-size: var(--ran-text-label-2);
 }
 @media (pointer: coarse) {
+  .agent-workspace-nav button {
+    min-height: var(--app-control-touch);
+    min-width: var(--app-control-touch);
+  }
+  .agent-history-options label {
+    box-sizing: border-box;
+    min-height: var(--app-control-touch);
+  }
   .agent-enable-switch {
     min-width: var(--app-control-touch);
     min-height: var(--app-control-touch);
@@ -2440,8 +2555,6 @@ r-dropdown[role='listbox'] {
     min-width: var(--app-control-touch);
   }
   .agent-workspace-view input:not([type='checkbox']):not([type='radio']):not([type='file']),
-  .agent-artifact-editor > select,
-  .agent-artifact-editor > input,
   .agent-artifact-import-field > input,
   .agent-artifact-workflow form input,
   .agent-history-search-row {
@@ -2480,7 +2593,10 @@ r-dropdown[role='listbox'] {
 .agent-sources-view .agent-source-preview > summary {
   box-sizing: border-box;
   min-height: var(--app-control-height);
-  padding-block: var(--ran-space-1);
+  font-size: var(--ran-text-label-3);
+  line-height: var(--ran-line-height);
+  /* Center the first line in the density target; wrapped names keep that rail. */
+  padding-block: max(0px, calc((var(--app-control-height) - 1lh) / 2));
 }
 .agent-sources-attached:empty {
   display: none;
@@ -2489,18 +2605,51 @@ r-dropdown[role='listbox'] {
 .agent-sources-status {
   margin: 0 0 var(--ran-space-4);
 }
+.agent-sources-view > .agent-entry-note:last-child {
+  margin-block-start: var(--ran-space-2);
+}
 .agent-sources-summary {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ran-space-1);
   margin: 0;
 }
+.agent-source-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: var(--app-control-height);
+  padding: var(--ran-space-1) var(--ran-space-2);
+  border: 1px solid var(--ran-color-border);
+  border-radius: var(--ran-radius-sm);
+  background: transparent;
+  color: var(--ran-color-text-secondary);
+  font: inherit;
+  font-size: var(--ran-text-label-3);
+  text-align: start;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.agent-source-chip:hover {
+  color: var(--ran-color-text);
+  background: var(--ran-color-bg-hover);
+}
+.agent-source-chip:focus-visible {
+  outline: 2px solid var(--ran-color-link);
+  outline-offset: 2px;
+}
 .agent-artifact-provenance,
 .agent-artifact-status {
   color: var(--ran-color-text-secondary);
   font-size: 0.875em;
   overflow-wrap: anywhere;
 }
+.agent-artifact-status:has(button) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ran-space-2);
+}
 .agent-sources-status:empty,
 .agent-artifact-status:empty {
   display: none;
@@ -2515,35 +2664,6 @@ r-dropdown[role='listbox'] {
 .agent-artifacts-list:not(:empty) {
   margin-block-end: var(--ran-space-4);
 }
-.agent-artifact-editor > input {
-  border: 0;
-  border-radius: 0;
-  font-weight: 600;
-  font-size: 1.125em;
-  padding-inline: 0;
-  margin-block: var(--ran-space-3);
-}
-.agent-artifact-editor > select {
-  border: 0;
-  width: auto;
-  max-width: 100%;
-  padding-inline: 0;
-  color: var(--ran-color-text-secondary);
-  margin-block-end: var(--ran-space-2);
-}
-.agent-artifact-editor > textarea {
-  field-sizing: content;
-  min-height: 6em;
-  max-height: 40vh;
-  border: 0;
-  border-radius: 0;
-  padding-inline: 0;
-}
-.agent-artifact-editor > input:focus-visible,
-.agent-artifact-editor > textarea:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
-  outline-offset: 3px;
-}
 .agent-artifact-import-field {
   display: grid;
   gap: var(--ran-space-2);
@@ -2555,7 +2675,7 @@ r-dropdown[role='listbox'] {
   max-height: 40vh;
 }
 .agent-artifact-import-field :is(input, textarea):focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .agent-artifact-actions button[data-action='apply'] {
@@ -2563,35 +2683,19 @@ r-dropdown[role='listbox'] {
   font-weight: 600;
 }
 
-/* A narrow toolbar keeps a real language label when Stop joins Send.
-   Use the select's public spacing hooks rather than losing its text lane. */
+/* Narrow panes keep Sources reachable by its named icon. */
 @container agent-panel (max-width: 360px) {
-  /* Keep the title readable when five touch targets no longer fit beside it.
-     A separate row preserves both a text-sized hover area and full targets. */
-  .agent-runtime-panel .agent-panel-header {
-    display: grid;
-    grid-template-columns: repeat(5, var(--app-control-touch));
-    justify-content: space-between;
-  }
-  .agent-runtime-panel .agent-panel-header .agent-panel-title {
-    grid-column: 1 / -1;
-    justify-self: start;
-    max-width: calc(100% + var(--agent-title-inset));
-    margin-inline-end: 0;
-  }
   .agent-panel .cui-composer-bar,
   .agent-panel .cui-actions {
     gap: var(--ran-space-1);
   }
   .agent-panel .cui-composer .agent-sources-toggle {
-    padding-inline: var(--ran-space-1);
+    padding-inline: 0;
+    width: var(--app-control-height);
+    min-width: var(--app-control-height);
   }
-  .agent-speech-language {
-    --ran-select-padding: 0 var(--ran-space-1);
-    --ran-select-item-left: 0;
-    --ran-select-item-right: var(--ran-size-1);
-    --ran-select-icon-inset-inline-end: 0;
-    --ran-select-font-weight: var(--ran-text-copy-weight);
+  .agent-sources-label {
+    display: none;
   }
 }
 .agent-sources-view [hidden] {
@@ -2642,7 +2746,7 @@ r-dropdown[role='listbox'] {
   font-weight: 500;
 }
 .agent-result-choice button:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 
@@ -2681,7 +2785,7 @@ r-dropdown[role='listbox'] {
   cursor: pointer;
 }
 .agent-source-citation:focus-visible {
-  outline: 2px solid var(--ran-color-primary);
+  outline: 2px solid var(--ran-color-link);
   outline-offset: 2px;
 }
 .cui-bubble .agent-source-preview pre {
@@ -2753,20 +2857,6 @@ r-dropdown[role='listbox'] {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
-.agent-artifact-data-preview table {
-  border-collapse: collapse;
-  width: 100%;
-}
-.agent-artifact-data-preview th,
-.agent-artifact-data-preview td {
-  padding: calc(var(--ran-space-3) / 2) var(--ran-space-2);
-  border-bottom: 1px solid var(--ran-color-border);
-  text-align: start;
-  min-width: 80px;
-  max-width: 220px;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
 .agent-artifact-presentation details > button,
 .agent-artifact-data-preview > button {
   margin-inline-end: var(--ran-space-2);
@@ -2789,15 +2879,6 @@ r-dropdown[role='listbox'] {
 .agent-artifact-data-preview > textarea.agent-artifact-cell {
   min-height: 3em;
 }
-.agent-artifact-editor > details > textarea {
-  font-family: monospace;
-  font-size: var(--ran-text-label-3);
-}
-.agent-artifact-editor > details > summary {
-  cursor: pointer;
-  color: var(--ran-color-text-secondary);
-  padding-block: var(--ran-space-2);
-}
 
 .agent-plan-undo-feedback {
   display: block;
@@ -2830,7 +2911,7 @@ r-dropdown[role='listbox'] {
     width: var(--app-control-touch);
     height: var(--app-control-touch);
   }
-  .agent-panel .agent-speech-language {
+  .agent-speech-popover .agent-speech-language {
     --ran-select-height: var(--app-control-touch);
     --ran-select-min-height: var(--app-control-touch);
   }
@@ -2850,20 +2931,20 @@ r-dropdown[role='listbox'] {
     min-width: var(--app-control-touch);
     min-height: var(--app-control-touch);
   }
-  .agent-panel .agent-panel-header button:not(.agent-panel-title) {
+  .agent-panel .agent-panel-header button:not(.agent-panel-title):not(.agent-panel-return) {
     flex-basis: var(--app-control-touch);
   }
   .agent-panel .cui-composer .agent-sources-toggle,
   .agent-panel .cui-empty-actions .agent-configure {
     min-height: var(--app-control-touch);
   }
+  .agent-panel .cui-composer .agent-sources-toggle {
+    min-width: var(--app-control-touch);
+  }
   .agent-speech-cancel[hidden] {
     display: none;
   }
-  .agent-speech[data-feedback='true'] .agent-speech-feedback > [role='status'] {
-    inset-inline-start: calc(var(--app-control-touch) + var(--ran-space-1));
-    inset-inline-end: calc(var(--app-control-touch) * 2 + var(--ran-space-1) * 2);
+  .agent-speech-feedback {
     height: var(--app-control-touch);
-    line-height: var(--app-control-touch);
   }
 }
diff --git a/test/e2e/agent-artifact-revision.spec.ts b/test/e2e/agent-artifact-revision.spec.ts
index 8dd0e34cf..6f88dbc47 100644
--- a/test/e2e/agent-artifact-revision.spec.ts
+++ b/test/e2e/agent-artifact-revision.spec.ts
@@ -1,4 +1,5 @@
 import { mockApi } from './lib/mock-api';
+import { editArtifact } from './lib/artifact-view';
 import { expect, test } from './lib/l0';
 
 test('artifact AI revisions stay in an explicit draft review and preserve newer edits', async ({ page }, testInfo) => {
@@ -81,7 +82,8 @@ test('artifact AI revisions stay in an explicit draft review and preserve newer
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
   await page.locator('.agent-workspace-toggle').click();
   await page.locator(`[data-artifact="${artifactId}"]`).click();
-  const text = page.locator('.agent-artifact-editor > textarea');
+  await page.locator('.agent-artifact-editor [data-action=edit]').click();
+  const text = page.locator('.agent-artifact-editor [data-artifact-source]');
   await text.evaluate((el: HTMLTextAreaElement) => {
     el.focus();
     el.setSelectionRange(3, 11);
@@ -125,6 +127,7 @@ test('artifact AI revisions stay in an explicit draft review and preserve newer
   await page.getByRole('button', { name: 'Suggest changes', exact: true }).click();
   await expect.poll(() => requests.length).toBe(2);
   expect(JSON.stringify(requests[1])).toContain('前😀新后');
+  await editArtifact(page);
   await text.fill('My newer draft');
   release();
   await expect(text).toHaveValue('My newer draft');
diff --git a/test/e2e/agent-composer-ux.spec.ts b/test/e2e/agent-composer-ux.spec.ts
index a637ac080..ba5536d8a 100644
--- a/test/e2e/agent-composer-ux.spec.ts
+++ b/test/e2e/agent-composer-ux.spec.ts
@@ -177,7 +177,7 @@ for (const ext of ['docx', 'xlsx', 'pptx', 'pdf'] as const) {
       await input.evaluate((el: HTMLTextAreaElement) => el.setSelectionRange(4, 17, 'backward'));
       await page.locator('.agent-sources-toggle').click();
       await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'sources');
-      await page.getByRole('button', { name: 'Back to conversation' }).click();
+      await page.locator('.agent-chat-toggle').click();
       await expect(input).toHaveValue(draft + draft);
       expect(
         await input.evaluate((el: HTMLTextAreaElement) => [el.selectionStart, el.selectionEnd, el.selectionDirection]),
@@ -283,9 +283,13 @@ for (const width of [320, 360, 1280]) {
     const centers = bounds.map((box) => box!.y + box!.height / 2);
     expect(Math.max(...centers) - Math.min(...centers)).toBeLessThanOrEqual(1);
     await expect(page.locator('.agent-sources-toggle')).toHaveCSS('font-size', '12px');
-    await expect(page.locator('.agent-speech-language')).toHaveCSS('--ran-select-font-size', '12px');
+    await expect(page.locator('.agent-speech-language')).toBeHidden();
+    await page.locator('.agent-speech-privacy button').click();
+    await expect(page.locator('.agent-speech-language')).toBeVisible();
+    await expect(page.locator('.agent-speech-language')).toHaveCSS('--ran-select-font-size', '13px');
+    await page.locator('.agent-speech-privacy button').press('Escape');
     await expect(composer).toHaveCSS('padding', '12px');
-    if (width === 1280) expect((await page.locator('.agent-runtime-panel').boundingBox())!.width).toBe(432);
+    if (width === 1280) expect((await page.locator('.agent-runtime-panel').boundingBox())!.width).toBe(480);
     const empty = (await composer.boundingBox())!.height;
     await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath(`composer-empty-${width}.png`) });
     expect(empty).toBeLessThan(115);
diff --git a/test/e2e/agent-content-review.spec.ts b/test/e2e/agent-content-review.spec.ts
index e14cde08a..a9218a0ff 100644
--- a/test/e2e/agent-content-review.spec.ts
+++ b/test/e2e/agent-content-review.spec.ts
@@ -57,7 +57,7 @@ async function open(
   await page.locator('.agent-panel-settings-toggle').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Configured');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
 }
 const undo = (page: Page) =>
   page.evaluate(() => {
diff --git a/test/e2e/agent-conversation-shell.spec.ts b/test/e2e/agent-conversation-shell.spec.ts
new file mode 100644
index 000000000..5bb145b52
--- /dev/null
+++ b/test/e2e/agent-conversation-shell.spec.ts
@@ -0,0 +1,111 @@
+import { expect, test } from './lib/l0';
+
+for (const width of [1280, 320]) {
+  test.describe(`${width}px conversation shell`, () => {
+    test.use({ viewport: { width, height: 900 }, hasTouch: width === 320 });
+    test('one header keeps primary routes visible and composition owns model/source context', async ({ page }) => {
+      await page.addInitScript(() => localStorage.setItem('document-assistant-enabled', 'true'));
+      await page.goto('/editor?new=docx&locale=en');
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      const panel = page.locator('.agent-runtime-panel');
+      const header = panel.locator('.agent-panel-header');
+      await expect(header.locator('.agent-workspace-nav button')).toHaveCount(3);
+      await expect(panel).toHaveAttribute('data-view', 'chat');
+      expect((await header.boundingBox())!.height).toBe(width === 320 ? 52 : 40);
+      await expect(panel.locator(':scope > .agent-workspace-nav')).toHaveCount(0);
+      await expect(panel.locator('.cui-composer .agent-sources-nav')).toBeVisible();
+      await expect(panel.locator('.cui-footer .agent-panel-settings-toggle')).toBeVisible();
+      await panel.locator('.cui-input').fill('Keep this draft');
+      for (const [trigger, view] of [
+        ['.agent-history-toggle', 'history'],
+        ['.agent-workspace-toggle', 'artifacts'],
+      ] as const) {
+        await header.locator(trigger).click();
+        await expect(panel).toHaveAttribute('data-view', view);
+        await expect(header.locator(trigger)).toHaveAttribute('aria-current', 'page');
+        await header.locator('.agent-chat-toggle').click();
+        await expect(panel.locator('.cui-input')).toHaveValue('Keep this draft');
+      }
+      await panel.locator('.agent-panel-settings-toggle').click();
+      await expect(panel).toHaveAttribute('data-view', 'settings');
+      await header.locator('.agent-chat-toggle').click();
+      await panel.locator('.agent-sources-nav').click();
+      await expect(panel).toHaveAttribute('data-view', 'sources');
+      await panel.locator('.agent-sources-view input[type=file]').setInputFiles({
+        name: 'project-notes.txt',
+        mimeType: 'text/plain',
+        buffer: Buffer.from('A local source preview.'),
+      });
+      await expect(panel.locator('.agent-source-row')).toContainText('project-notes.txt');
+      await header.locator('.agent-chat-toggle').click();
+      const chip = panel.locator('.agent-source-chip');
+      await expect(chip).toHaveText('project-notes.txt');
+      await chip.click();
+      await expect(panel.locator('.agent-source-preview')).toHaveAttribute('open', '');
+      await expect(panel.locator('.agent-source-preview summary')).toBeFocused();
+      await expect(panel.locator('.agent-source-preview pre')).toHaveText('A local source preview.');
+      await header.locator('.agent-chat-toggle').click();
+      await expect(panel.locator('.cui-input')).toHaveValue('Keep this draft');
+      expect(await panel.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
+    });
+  });
+}
+
+test('secondary pages return to an older selected conversation and its own draft', async ({ page }) => {
+  await page.goto('/');
+  await page.evaluate(async () => {
+    localStorage.setItem('document-assistant-enabled', 'true');
+    localStorage.setItem('agent_conversation_saving_v2', 'true');
+    const ids = [crypto.randomUUID(), crypto.randomUUID()];
+    const request = indexedDB.open('document-ai-conversations', 2);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore('conversations');
+      request.result.createObjectStore('sessions');
+    };
+    const db = await new Promise<IDBDatabase>((resolve, reject) => {
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    const tx = db.transaction(['conversations', 'sessions'], 'readwrite');
+    tx.objectStore('conversations').put({ version: 2, revision: 1, activeId: ids[1], sessionIds: ids }, 'state');
+    for (const [index, id] of ids.entries())
+      tx.objectStore('sessions').put(
+        {
+          id,
+          title: index ? 'Newer conversation' : 'Older conversation',
+          createdAt: Date.now() - 2000 + index * 1000,
+          updatedAt: Date.now() - 2000 + index * 1000,
+          messages: [{ role: 'user', content: index ? 'Newer request' : 'Older request' }],
+        },
+        id,
+      );
+    await new Promise<void>((resolve, reject) => {
+      tx.oncomplete = () => resolve();
+      tx.onabort = () => reject(tx.error);
+    });
+    db.close();
+  });
+  await page.goto('/editor?new=docx&locale=en');
+  await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+  await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+  const panel = page.locator('.agent-runtime-panel');
+  await panel.locator('.agent-history-toggle').click();
+  await panel
+    .locator('.agent-conversation-title')
+    .filter({ hasText: /^Older conversation$/ })
+    .click();
+  await expect(panel.locator('.cui-msg-user')).toHaveText('Older request');
+  await panel.locator('.cui-input').fill('Only the older conversation owns this draft');
+  for (const selector of [
+    '.agent-sources-nav',
+    '.agent-panel-settings-toggle',
+    '.agent-workspace-toggle',
+    '.agent-history-toggle',
+  ]) {
+    await panel.locator(selector).click();
+    await panel.locator('.agent-chat-toggle').click();
+    await expect(panel.locator('.cui-msg-user')).toHaveText('Older request');
+    await expect(panel.locator('.cui-input')).toHaveValue('Only the older conversation owns this draft');
+  }
+});
diff --git a/test/e2e/agent-detail-polish.spec.ts b/test/e2e/agent-detail-polish.spec.ts
new file mode 100644
index 000000000..4af5c8080
--- /dev/null
+++ b/test/e2e/agent-detail-polish.spec.ts
@@ -0,0 +1,132 @@
+import { expect, test } from './lib/l0';
+
+for (const variant of [
+  { width: 1280, locale: 'en', coarse: false },
+  { width: 320, locale: 'pt', coarse: true },
+]) {
+  test.describe(`${variant.width}px ${variant.locale} detail polish`, () => {
+    test.use({ viewport: { width: variant.width, height: 900 }, hasTouch: variant.coarse });
+    test('related helper copy and separate fields keep their own vertical rhythm', async ({ page }) => {
+      await page.addInitScript(() => {
+        localStorage.setItem('document-assistant-enabled', 'true');
+        localStorage.setItem('agent-local-preset', 'Qwen3-4B-q4f16_1-MLC');
+      });
+      await page.goto(`/editor?new=docx&locale=${variant.locale}`);
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      await page.locator('.agent-sources-nav').click();
+      const helperGap = await page
+        .locator('.agent-sources-view')
+        .evaluate(
+          (el) =>
+            el.lastElementChild!.getBoundingClientRect().top -
+            el.querySelector('.agent-source-attach')!.getBoundingClientRect().bottom,
+        );
+      expect(helperGap, 'Attach and its explanation form an 8px group').toBe(8);
+      await page.locator('.agent-chat-toggle').click();
+      await page.locator('.agent-panel-settings-toggle').click();
+      const gaps = await page.locator('.agent-panel-model-row').evaluate((el) => {
+        const rect = (selector: string) => el.querySelector(selector)!.getBoundingClientRect();
+        return {
+          helper: rect('.agent-model-memory').top - rect('r-select').bottom,
+          action: rect('.agent-model-actions').top - rect('.agent-model-memory').bottom,
+        };
+      });
+      expect(gaps).toEqual({ helper: 8, action: 16 });
+      await page.locator('.agent-preferences > summary').click();
+      const fieldGaps = await page.locator('.agent-custom-sources').evaluate((el) => {
+        const fields = [...el.querySelectorAll('.agent-settings-field')];
+        return fields
+          .slice(1)
+          .map((field, i) => field.getBoundingClientRect().top - fields[i].getBoundingClientRect().bottom);
+      });
+      expect(fieldGaps).toEqual([16, 16]);
+      expect(
+        await page.locator('.agent-panel-settings').evaluate((el) => el.scrollWidth - el.clientWidth),
+      ).toBeLessThanOrEqual(1);
+    });
+  });
+}
+
+test('keyboard source removal and long artifact deletion keep a visible focus destination', async ({ page }) => {
+  test.setTimeout(90000);
+  await page.addInitScript(() => localStorage.setItem('document-assistant-enabled', 'true'));
+  await page.setViewportSize({ width: 320, height: 700 });
+  await page.goto('/editor?new=docx&locale=en');
+  await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+  await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+  await page.locator('.agent-sources-nav').click();
+  for (const name of ['one.txt', 'two.txt']) {
+    await page
+      .locator('.agent-sources-view input[type=file]')
+      .setInputFiles({ name, mimeType: 'text/plain', buffer: Buffer.from(name) });
+    await expect(page.locator('.agent-source-preview summary').filter({ hasText: name })).toBeVisible();
+  }
+  await page.locator('.agent-source-remove').first().focus();
+  await page.keyboard.press('Enter');
+  await expect(page.getByRole('button', { name: 'Remove: two.txt', exact: true })).toBeFocused();
+  await page.keyboard.press('Enter');
+  await expect(page.locator('.agent-source-attach')).toBeFocused();
+  await page.locator('.agent-workspace-toggle').click();
+  await page.locator('[data-action=import]').click();
+  await page.locator('.agent-artifact-import input').fill('Long draft');
+  await page
+    .locator('.agent-artifacts textarea')
+    .fill(JSON.stringify({ schemaVersion: 1, payload: { kind: 'text', text: 'A long draft line\n'.repeat(150) } }));
+  await page.locator('[data-action=saveNew]').click();
+  const remove = page.locator('.agent-artifacts [data-action=delete]');
+  await remove.focus();
+  await page.keyboard.press('Enter');
+  const cancel = page.locator('.agent-artifacts [data-action=cancel]');
+  await expect(cancel).toBeFocused();
+  const confirmationGap = await cancel.evaluate((el) => {
+    const confirm = el.parentElement!.querySelector('[data-action=confirmDelete]')!.getBoundingClientRect();
+    const cancel = el.getBoundingClientRect();
+    return Math.abs(cancel.top - confirm.top) < 1 ? cancel.left - confirm.right : cancel.top - confirm.bottom;
+  });
+  expect(confirmationGap, 'confirmation actions keep an 8px separation').toBe(8);
+  const bounds = await cancel.boundingBox();
+  expect(bounds!.y).toBeGreaterThanOrEqual(0);
+  expect(bounds!.y + bounds!.height).toBeLessThanOrEqual(700);
+  await page.keyboard.press('Enter');
+  await expect(remove).toBeFocused();
+  await expect(page.locator('.agent-artifact-editor [data-artifact-source]')).toHaveValue(
+    'A long draft line\n'.repeat(150),
+  );
+});
+
+test.describe('touch starter actions and attached-source labels', () => {
+  test.use({ viewport: { width: 320, height: 900 }, hasTouch: true });
+  test('uses physical targets and a shared first-line text center', async ({ page }) => {
+    await page.addInitScript(() => {
+      localStorage.setItem('document-assistant-enabled', 'true');
+      localStorage.setItem('agent-local-preset', 'Qwen3-4B-q4f16_1-MLC');
+    });
+    await page.goto('/editor?new=docx&locale=pt');
+    await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+    await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+    await page.locator('.agent-chat-toggle').click();
+    await expect(page.locator('.agent-task-action')).toHaveCount(3);
+    for (const action of await page.locator('.agent-task-action').all())
+      expect.soft((await action.boundingBox())!.height, 'starter action target').toBeGreaterThanOrEqual(44);
+    await page.locator('.agent-sources-nav').click();
+    await page
+      .locator('.agent-sources-view input[type=file]')
+      .setInputFiles({ name: 'a.txt', mimeType: 'text/plain', buffer: Buffer.from('Local excerpt') });
+    const row = page.locator('.agent-source-row');
+    await expect(row).toBeVisible();
+    const centers = await row.evaluate((el) => {
+      const center = (selector: string) => {
+        const range = document.createRange();
+        range.selectNodeContents(el.querySelector(selector)!);
+        const firstLine = range.getClientRects()[0];
+        return (firstLine.top + firstLine.bottom) / 2;
+      };
+      return { filename: center('summary'), remove: center('button') };
+    });
+    expect.soft(Math.abs(centers.filename - centers.remove), 'filename and Remove text centers').toBeLessThanOrEqual(1);
+    await row.locator('summary').click();
+    await expect(row.locator('pre')).toHaveText('Local excerpt');
+    expect((await row.locator('summary').boundingBox())!.height).toBeGreaterThanOrEqual(44);
+  });
+});
diff --git a/test/e2e/agent-dictation.spec.ts b/test/e2e/agent-dictation.spec.ts
index 76315e355..aee048632 100644
--- a/test/e2e/agent-dictation.spec.ts
+++ b/test/e2e/agent-dictation.spec.ts
@@ -282,7 +282,8 @@ for (const ext of ['docx', 'xlsx', 'pptx', 'pdf'] as const) {
       await expect(disclosure).not.toHaveAttribute('open', { timeout: 4500 });
       await expect(liveStatus).toContainText('Microphone permission denied');
       await privacyToggle.click();
-      await expect(page.locator('.agent-speech-hint')).toContainText('Microphone permission denied');
+      await expect(page.locator('.agent-speech-notice')).toContainText('Microphone permission denied');
+      await expect(page.locator('.agent-speech-hint')).toContainText('browser');
       // The anchored disclosure can cover the center of a tall draft. Click
       // the visible text inset to exercise an actual outside click.
       await input.click({ position: { x: 8, y: 8 } });
@@ -291,7 +292,11 @@ for (const ext of ['docx', 'xlsx', 'pptx', 'pdf'] as const) {
       await page.locator('.agent-speech-mic').click();
       await page.locator('.agent-speech-cancel').click();
       await expect(input).toHaveValue(longDraft);
+      await expect(page.locator('.agent-speech-language')).toBeHidden();
+      await privacyToggle.click();
       await expect(page.locator('.agent-speech-language')).toBeVisible();
+      await expect(page.locator('.agent-speech-language')).not.toHaveAttribute('disabled');
+      await privacyToggle.press('Escape');
       expect(await composer.boundingBox()).toEqual(compact);
       holdNextAnswer = true;
       await input.fill('Hello');
diff --git a/test/e2e/agent-history-actions.spec.ts b/test/e2e/agent-history-actions.spec.ts
index 83537beee..e905a3a02 100644
--- a/test/e2e/agent-history-actions.spec.ts
+++ b/test/e2e/agent-history-actions.spec.ts
@@ -23,6 +23,7 @@ async function surface(button: Locator) {
       borderStyle: css.borderTopStyle,
       outline: css.outlineStyle,
       outlineWidth: parseFloat(css.outlineWidth),
+      shadow: css.boxShadow,
     };
   });
 }
@@ -82,34 +83,40 @@ for (const scheme of ['light', 'dark'] as const) {
         const transfer = options.locator('.agent-history-restore, .agent-history-import, .agent-history-export');
         const danger = options.locator('.agent-history-delete-current, .agent-history-delete-all');
         const group = options.locator('.agent-history-transfer-actions');
-        // Native button surfaces signal action before hover. Icon/checkbox and
-        // label columns align independently of the gutter-extended hit target.
+        // Compare leading content across regions, not just equal frames inside the group.
+        // The target can use the gutter while icons and the checkbox share the heading's spine.
         const groupBox = (await group.boundingBox())!;
-        const optionsBox = (await options.boundingBox())!;
-        expect(groupBox.x).toBeCloseTo(optionsBox.x - 8, 1);
-        expect(await frameLeft(options.locator('.agent-history-save'))).toBeCloseTo(16, 1);
-        expect((await textGeometry(options.locator('label > span'))).textLeft).toBeCloseTo(40, 1);
+        const panel = page.locator('.agent-runtime-panel');
+        const panelBox = (await panel.boundingBox())!;
+        const contentSpine = (await textGeometry(page.locator('.agent-history-view h2'))).textLeft;
+        expect(contentSpine).toBeCloseTo(16, 1);
+        expect(await frameLeft(group)).toBeCloseTo(contentSpine - 8, 1);
+        expect(await frameLeft(options.locator('.agent-history-save'))).toBeCloseTo(contentSpine, 1);
+        expect((await textGeometry(options.locator('label > span'))).textLeft).toBeCloseTo(contentSpine + 24, 1);
         const canvas = await page
           .locator('.agent-runtime-panel')
           .evaluate((el) => getComputedStyle(el).backgroundColor);
         let previousBottom = 0;
         for (const button of await transfer.or(danger).all()) {
           const css = await surface(button);
-          expect(css.background).not.toBe('rgba(0, 0, 0, 0)');
-          expect(css.background, 'resting button must differ from the canvas').not.toBe(canvas);
-          expect(contrast(css.color, css.background)).toBeGreaterThanOrEqual(4.5);
+          expect(css.background).toBe('rgba(0, 0, 0, 0)');
+          expect(css.shadow).toBe('none');
+          // Transparent rows paint on the actual panel canvas; transparent black is not a background.
+          expect(contrast(css.color, canvas)).toBeGreaterThanOrEqual(4.5);
           const box = (await button.boundingBox())!;
-          expect(box.height).toBeGreaterThanOrEqual(44);
+          expect(box.height).toBeGreaterThanOrEqual(32);
           expect(box.x).toBeCloseTo(groupBox.x, 1);
+          expect(box.x).toBeGreaterThanOrEqual(panelBox.x);
+          expect(box.x + box.width).toBeLessThanOrEqual(panelBox.x + panelBox.width);
           expect(box.y).toBeGreaterThanOrEqual(previousBottom);
           previousBottom = box.y + box.height;
           const icon = button.locator('svg[aria-hidden="true"]');
           await expect(icon).toBeVisible();
-          expect(await frameLeft(icon)).toBeCloseTo(16, 1);
+          expect(await frameLeft(icon)).toBeCloseTo(contentSpine, 1);
           const label = button.locator('.agent-history-action-label');
           const text = await textGeometry(label);
-          expect(text.textLeft).toBeCloseTo(40, 1);
-          expect(box.width).toBeLessThanOrEqual(text.textWidth + 41);
+          expect(text.textLeft).toBeCloseTo(contentSpine + 24, 1);
+          expect(box.width).toBeCloseTo(groupBox.width, 1);
           await expect(button).toHaveAccessibleName((await label.innerText()).trim());
           expect(await button.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
         }
@@ -120,7 +127,7 @@ for (const scheme of ['light', 'dark'] as const) {
           ...(await danger.evaluateAll((els) => els.map((el) => el.getBoundingClientRect().top))),
         );
         expect(dangerTop - transferBottom).toBeGreaterThanOrEqual(16);
-        expect(await options.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
+        expect(await panel.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
       }
       await page.setViewportSize({ width: 1280, height: 900 });
       const restore = options.locator('.agent-history-restore');
diff --git a/test/e2e/agent-history-rendering.spec.ts b/test/e2e/agent-history-rendering.spec.ts
index 3edc91b4f..e330b7abb 100644
--- a/test/e2e/agent-history-rendering.spec.ts
+++ b/test/e2e/agent-history-rendering.spec.ts
@@ -1,6 +1,6 @@
 import { mockApi } from './lib/mock-api';
 import { expect, test } from './lib/l0';
-import { assertTitleRail, contentGeometry, textGeometry } from './lib/layout-geometry';
+import { contentGeometry, frameLeft, textGeometry } from './lib/layout-geometry';
 
 test('restores a long saved conversation and switches sessions with completed answer actions', async ({ page }) => {
   test.setTimeout(90_000);
@@ -136,18 +136,19 @@ test('restores a long saved conversation and switches sessions with completed an
   const history = page.locator('.agent-history-view');
   const viewHeader = history.locator('.agent-view-header');
   await expect(viewHeader.locator('.agent-history-heading')).toHaveCount(1);
-  const back = viewHeader.getByRole('button', { name: 'Back to conversation', exact: true });
-  await expect(back).toHaveCount(1);
+  await expect(viewHeader.locator('.agent-view-back')).toHaveCount(0);
   await page.evaluate(() => document.fonts.ready);
-  await assertTitleRail(page.locator('.agent-runtime-panel .agent-panel-title'));
+  // On a secondary page the home command owns a leading chevron on the
+  // content spine, followed by its label; the page heading stays on the spine.
+  const home = page.locator('.agent-runtime-panel .agent-panel-title');
+  expect(await frameLeft(home.locator('svg'))).toBeCloseTo(16, 1);
+  expect((await textGeometry(home)).textLeft).toBeCloseTo(36, 1);
   const geometry = await contentGeometry(history);
   const row = await textGeometry(history.locator('.agent-conversation-title').first());
-  // The Back hit area extends into the gutter; its SVG and row text share the content rail.
+  // A parallel view's heading and list text return to the same content rail.
   expect(geometry.contentLeft).toBeCloseTo(16, 1);
-  expect(geometry.iconLeft).toBeCloseTo(geometry.contentLeft, 1);
+  expect(geometry.headingLeft).toBeCloseTo(geometry.contentLeft, 1);
   expect(row.textLeft).toBeCloseTo(geometry.contentLeft, 1);
-  // The owned title follows the compact Back target and the shared 8px gap.
-  expect(Math.abs(geometry.headingLeft - (geometry.backLeft + geometry.backWidth + 8))).toBeLessThanOrEqual(1);
   await page.locator('.agent-runtime-panel').screenshot({ path: test.info().outputPath('history-light.png') });
   await page.emulateMedia({ colorScheme: 'dark' });
   await page.locator('.agent-runtime-panel').screenshot({ path: test.info().outputPath('history-dark.png') });
diff --git a/test/e2e/agent-imported-formats.spec.ts b/test/e2e/agent-imported-formats.spec.ts
index 594dcdc68..869fe5526 100644
--- a/test/e2e/agent-imported-formats.spec.ts
+++ b/test/e2e/agent-imported-formats.spec.ts
@@ -151,7 +151,7 @@ for (const fixture of fixtures) {
     await page.locator('.agent-panel-settings-toggle').click();
     await page.locator('.agent-panel-endpoint-connect').click();
     await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     const input = page.locator('.cui-input');
     // Imported content enters the request only through an explicit trusted read.
     // The second request below still exercises semantic tools and continuation.
diff --git a/test/e2e/agent-interface-affordances.spec.ts b/test/e2e/agent-interface-affordances.spec.ts
index 6146c413e..125e9acf8 100644
--- a/test/e2e/agent-interface-affordances.spec.ts
+++ b/test/e2e/agent-interface-affordances.spec.ts
@@ -52,12 +52,13 @@ for (const width of [360, 1280]) {
           background = luminance(css.backgroundColor);
         return {
           background: css.backgroundColor,
+          shadow: css.boxShadow,
           canvas: getComputedStyle(el.closest('.agent-panel')!).backgroundColor,
           contrast: (Math.max(foreground, background) + 0.05) / (Math.min(foreground, background) + 0.05),
         };
       });
       expect(surface.background).not.toBe('rgba(0, 0, 0, 0)');
-      expect(surface.background).not.toBe(surface.canvas);
+      expect(surface.background !== surface.canvas || surface.shadow !== 'none').toBe(true);
       expect(surface.contrast).toBeGreaterThanOrEqual(4.5);
       await command.focus();
       await page.keyboard.press('Tab');
@@ -82,15 +83,58 @@ for (const width of [360, 1280]) {
     });
   }
 
-  test(`speech overlays stay anchored and mutually exclusive at ${width}px`, async ({ page }, info) => {
+  test(`Voice options keeps its language control reachable and preserves recovery at ${width}px`, async ({
+    page,
+  }, info) => {
+    test.setTimeout(60_000);
+    // Only speech service events are fixtures; the editor, composer, popover and select are real.
+    await page.addInitScript(() => {
+      const state = window as unknown as {
+        SpeechRecognition: unknown;
+        voiceOptionsRecognition: {
+          lang: string;
+          onerror?: (event: { error: string }) => void;
+        };
+      };
+      state.SpeechRecognition = class {
+        lang = '';
+        onstart?: () => void;
+        onend?: () => void;
+        onerror?: (event: { error: string }) => void;
+        constructor() {
+          state.voiceOptionsRecognition = this;
+        }
+        start() {
+          this.onstart?.();
+        }
+        stop() {
+          this.onend?.();
+        }
+        abort() {}
+      };
+    });
     await page.setViewportSize({ width, height: 900 });
     await openAssistant(page);
+    const input = page.locator('.cui-input');
+    const draft = 'Please revise this paragraph.\nKeep my original words.';
+    await input.fill(draft);
     const privacy = page.locator('.agent-speech-privacy');
-    const toggle = privacy.locator('button');
-    const language = page.locator('.agent-speech-language');
-    const popup = page.locator('.agent-speech-popover');
-    await toggle.click();
+    const toggle = privacy.getByRole('button', { name: 'Voice options', exact: true });
+    const language = page.getByRole('combobox', { name: 'Recognition language', exact: true });
+    const popup = page.getByRole('dialog', { name: 'Voice options', exact: true });
+    const afterShow = () =>
+      privacy.evaluate(
+        (el) => new Promise<void>((resolve) => el.addEventListener('after-show', () => resolve(), { once: true })),
+      );
+    await toggle.focus();
+    const opened = afterShow();
+    await toggle.press('Enter');
+    await opened;
     await expect(popup).toBeVisible();
+    await expect(language).toBeVisible();
+    await expect(page.locator('.agent-speech-hint')).toHaveText(
+      'Your browser may send audio to an online recognition service. Text stays editable before sending.',
+    );
     await expect
       .poll(async () => {
         const anchor = (await toggle.boundingBox())!;
@@ -101,19 +145,64 @@ for (const width of [360, 1280]) {
     const panel = (await popup.boundingBox())!;
     expect(panel.x).toBeGreaterThanOrEqual(0);
     expect(panel.x + panel.width).toBeLessThanOrEqual(width);
-    await page.locator('.agent-runtime-panel').screenshot({ path: info.outputPath(`speech-${width}.png`) });
-    await language.click();
+    await page.screenshot({ path: info.outputPath(`voice-options-${width}.png`) });
+    await toggle.press('Tab');
+    await expect(language).toBeFocused();
+    await language.press('End');
+    await expect(language).toHaveAttribute('open', '');
+    await expect(privacy).toHaveAttribute('open', '');
+    await language.press('Enter');
+    // Reopen immediately during the select's exit transition; no animation wait.
+    await language.press('ArrowDown');
+    await expect(language).toHaveJSProperty('value', 'pt-BR');
+    await expect(popup).toBeVisible();
+    await expect(input).toHaveValue(draft);
     await expect(language).toHaveAttribute('open', '');
-    await expect(privacy).not.toHaveAttribute('open', '');
-    await expect(popup).not.toBeVisible();
     await language.press('Escape');
     await expect(language).not.toHaveAttribute('open', '');
-    await toggle.focus();
-    await toggle.press('Enter');
     await expect(privacy).toHaveAttribute('open', '');
-    await toggle.press('Escape');
+    await expect(language).toBeFocused();
+    await language.press('Escape');
     await expect(privacy).not.toHaveAttribute('open', '');
     await expect(toggle).toBeFocused();
+    await input.focus();
+    await expect(input).toHaveValue(draft);
+    await expect(page.locator('.cui-msg-user')).toHaveCount(0);
+
+    await page.locator('.agent-speech-mic').click();
+    await expect(page.locator('.agent-speech')).toHaveAttribute('data-state', 'listening');
+    expect(
+      await page.evaluate(
+        () => (window as unknown as { voiceOptionsRecognition: { lang: string } }).voiceOptionsRecognition.lang,
+      ),
+    ).toBe('pt-BR');
+    await page.evaluate(() => {
+      (
+        window as unknown as { voiceOptionsRecognition: { onerror: (event: { error: string }) => void } }
+      ).voiceOptionsRecognition.onerror({ error: 'not-allowed' });
+    });
+    const feedback = page.locator('.agent-speech-feedback');
+    await expect(feedback).toContainText('Microphone permission denied. Allow access in browser settings.');
+    await expect(page.locator('.agent-speech-notice')).toHaveText(
+      'Microphone permission denied. Allow access in browser settings.',
+    );
+    await expect(page.locator('.agent-speech-hint')).toContainText('Your browser may send audio');
+    await expect(input).toHaveValue(draft);
+    await toggle.focus();
+    await toggle.press('Escape');
+    await expect(popup).not.toBeVisible();
+    await expect(feedback).toBeVisible();
+    await expect(feedback).toContainText('Microphone permission denied');
+    await expect(toggle).toHaveAccessibleName('Voice options');
+    await expect(toggle).toHaveAttribute('aria-describedby', 'agent-speech-feedback');
+    const reopened = afterShow();
+    await toggle.press('Enter');
+    await reopened;
+    await expect(popup).toBeVisible();
+    await expect(page.locator('.agent-speech-notice')).toBeVisible();
+    await expect(page.locator('.agent-speech-hint')).toBeVisible();
+    await expect(input).toHaveValue(draft);
+    await page.screenshot({ path: info.outputPath(`voice-recovery-${width}.png`) });
   });
 }
 
diff --git a/test/e2e/agent-layout-rails.spec.ts b/test/e2e/agent-layout-rails.spec.ts
index 0fc5221f7..000b5945b 100644
--- a/test/e2e/agent-layout-rails.spec.ts
+++ b/test/e2e/agent-layout-rails.spec.ts
@@ -15,9 +15,9 @@ test('assistant onboarding copy returns to the same content rail as its header',
   const onboarding = page.locator('.agent-onboarding');
   await expect(onboarding).toBeVisible();
   await page.evaluate(() => document.fonts.ready);
-  expect((await textGeometry(onboarding.locator('header strong'))).textLeft).toBeCloseTo(16, 1);
-  expect((await textGeometry(onboarding.locator('.agent-welcome h2'))).textLeft).toBeCloseTo(16, 1);
-  expect((await textGeometry(onboarding.locator('.agent-welcome > p').first())).textLeft).toBeCloseTo(16, 1);
+  expect((await textGeometry(onboarding.locator('header strong'))).textLeft).toBeCloseTo(24, 1);
+  expect((await textGeometry(onboarding.locator('.agent-welcome h2'))).textLeft).toBeCloseTo(24, 1);
+  expect((await textGeometry(onboarding.locator('.agent-welcome > p').first())).textLeft).toBeCloseTo(24, 1);
 });
 
 test('layout acceptance rejects text-only drift, expanded hover and displaced sibling rails', async ({ page }) => {
@@ -41,11 +41,11 @@ test('layout acceptance rejects text-only drift, expanded hover and displaced si
   const settings = page.locator('.agent-panel-settings');
   if (!(await settings.isVisible())) await page.locator('.agent-panel-settings-toggle').click();
   await expect(settings).toBeVisible();
-  expect((await contentGeometry(settings)).contentLeft).toBe(16);
-  await settings.evaluate((el) => (el.style.paddingInlineStart = '24px'));
-  await expect((async () => expect((await contentGeometry(settings)).contentLeft).toBe(16))()).rejects.toThrow();
+  expect((await contentGeometry(settings)).contentLeft).toBe(24);
+  await settings.evaluate((el) => (el.style.paddingInlineStart = '32px'));
+  await expect((async () => expect((await contentGeometry(settings)).contentLeft).toBe(24))()).rejects.toThrow();
   await settings.evaluate((el) => el.removeAttribute('style'));
-  expect((await contentGeometry(settings)).contentLeft).toBe(16);
+  expect((await contentGeometry(settings)).contentLeft).toBe(24);
 });
 
 test('populated conversation and source disclosures return to the content rail', async ({ page }) => {
@@ -67,8 +67,8 @@ test('populated conversation and source disclosures return to the content rail',
   const row = page.locator('.agent-conversation-title').filter({ hasText: 'Layout conversation' });
   await expect(row).toBeVisible();
   await page.evaluate(() => document.fonts.ready);
-  expect((await textGeometry(row)).textLeft).toBeCloseTo(16, 1);
-  expect(await frameLeft(page.locator('.agent-history-management > summary'))).toBeCloseTo(16, 1);
+  expect((await textGeometry(row)).textLeft).toBeCloseTo(24, 1);
+  expect(await frameLeft(page.locator('.agent-history-management > summary'))).toBeCloseTo(24, 1);
   await page.locator('.agent-panel-title').click();
   await page.locator('.agent-sources-toggle').click();
   const sources = page.locator('.agent-sources-view');
@@ -79,16 +79,17 @@ test('populated conversation and source disclosures return to the content rail',
   });
   const preview = sources.locator('.agent-source-preview');
   await expect(preview).toContainText('layout-notes.txt');
-  expect(await frameLeft(preview)).toBeCloseTo(16, 1);
+  expect(await frameLeft(preview)).toBeCloseTo(24, 1);
   await preview.locator('summary').click();
   await expect(preview.locator('pre')).toHaveText('A local reference excerpt.');
-  expect((await textGeometry(preview.locator('pre'))).textLeft).toBeCloseTo(16, 1);
+  expect((await textGeometry(preview.locator('pre'))).textLeft).toBeCloseTo(24, 1);
   const status = sources.locator('.agent-sources-status');
-  if (await status.isVisible()) expect(await frameLeft(status)).toBeCloseTo(16, 1);
+  if (await status.isVisible()) expect(await frameLeft(status)).toBeCloseTo(24, 1);
 });
 
 for (const variant of variants) {
   test.describe(`${variant.width}px ${variant.locale}`, () => {
+    const rail = variant.width <= 480 ? 16 : 24;
     test.use({ viewport: { width: variant.width, height: 900 }, hasTouch: variant.coarse });
     test('assistant text, navigation and content rails', async ({ page }, testInfo) => {
       test.setTimeout(180_000);
@@ -105,17 +106,19 @@ for (const variant of variants) {
       await page.evaluate(() => document.fonts.ready);
       for (const theme of ['light', 'dark'] as const) {
         await page.emulateMedia({ colorScheme: theme });
-        const titleBox = await assertTitleRail(title);
-        if (variant.width <= 360 || variant.coarse)
-          expect(titleBox.width).toBeGreaterThanOrEqual(Math.min(titleBox.textWidth + 16, variant.width - 24));
+        const titleBox = await assertTitleRail(title, rail);
+        // The single row reserves space for four primary commands; translated
+        // identity text can ellipsize while its actual hit target stays usable.
+        expect(titleBox.width).toBeGreaterThanOrEqual(variant.coarse ? 44 : 32);
+        await expect(title).toHaveAttribute('aria-label', /.+/);
         await title.hover();
         await expect(title).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
         await title.click();
         await expect(panel).toHaveAttribute('data-view', 'chat');
         const originalTitle = await title.textContent();
         await title.evaluate((el) => (el.textContent = 'A long translated assistant workspace title '.repeat(4)));
-        await assertTitleRail(title);
-        const actions = await panel.locator('.agent-panel-header button').evaluateAll((buttons) => {
+        await assertTitleRail(title, rail);
+        const actions = await panel.locator('.agent-panel-header button:visible').evaluateAll((buttons) => {
           const bounds = buttons[0].closest('.agent-panel')!.getBoundingClientRect();
           return buttons.map((button) => {
             const rect = button.getBoundingClientRect();
@@ -152,27 +155,24 @@ for (const variant of variants) {
         for (const [toggle, selector, frame] of [
           ['.agent-panel-settings-toggle', '.agent-panel-settings', '.agent-source-picker'],
           ['.agent-history-toggle', '.agent-history-view', '.agent-history-search-row'],
-          ['.agent-sources-toggle', '.agent-sources-view', 'input[type="search"]'],
-          ['.agent-workspace-toggle', '.agent-artifacts', ':scope > div:not(.agent-view-header)'],
+          ['.agent-sources-nav', '.agent-sources-view', 'input[type="search"]'],
+          ['.agent-workspace-toggle', '.agent-artifacts', '.agent-artifacts-body > :is(p, ul)'],
         ]) {
+          await panel.locator('.agent-chat-toggle').click();
           await panel.locator(toggle).click();
           const view = panel.locator(selector);
-          const back = view.locator('.agent-view-back');
-          await expect(back).toBeVisible();
+          await expect(view.locator('.agent-view-back')).toHaveCount(0);
           const geometry = await contentGeometry(view);
-          expect(geometry.contentLeft, selector).toBeCloseTo(16, 1);
-          expect(geometry.iconLeft, selector).toBeCloseTo(16, 1);
-          expect(geometry.headingLeft, selector).toBeCloseTo(variant.coarse ? 54 : 48, 1);
-          expect(geometry.backWidth, selector).toBe(variant.coarse ? 44 : 32);
-          expect(geometry.backLeft, selector).toBeGreaterThanOrEqual(0);
+          expect(geometry.contentLeft, selector).toBeCloseTo(rail, 1);
+          expect(geometry.headingLeft, selector).toBeCloseTo(rail, 1);
           expect(geometry.overflow, selector).toBeLessThanOrEqual(1);
-          expect(await frameLeft(view.locator(frame).first()), selector).toBeCloseTo(16, 1);
+          expect(await frameLeft(view.locator(frame).first()), selector).toBeCloseTo(rail, 1);
           const firstContent = view
             .locator(
               selector === '.agent-sources-view'
                 ? ':scope > .agent-entry-note'
                 : selector === '.agent-artifacts'
-                  ? ':scope > div:not(.agent-view-header) > :is(p, ul)'
+                  ? '.agent-artifacts-body > :is(p, ul)'
                   : frame,
             )
             .first();
@@ -201,17 +201,17 @@ for (const variant of variants) {
             expect(gap, 'source intro and search form a separate group').toBe(16);
           }
           await panel.screenshot({ path: testInfo.outputPath(`${selector.slice(1)}-${theme}.png`) });
+          const chatNavigation = panel.locator('.agent-chat-toggle');
           await page.keyboard.press('Tab');
-          await back.focus();
-          expect(await back.evaluate((el) => el.matches(':focus-visible'))).toBe(true);
-          const focus = await back.evaluate((el) => {
+          await chatNavigation.focus();
+          expect(await chatNavigation.evaluate((el) => el.matches(':focus-visible'))).toBe(true);
+          const focus = await chatNavigation.evaluate((el) => {
             const style = getComputedStyle(el);
             return { width: Number.parseFloat(style.outlineWidth), offset: Number.parseFloat(style.outlineOffset) };
           });
-          expect(geometry.backLeft, `${selector} focus ring inside scrollport`).toBeGreaterThanOrEqual(
-            focus.width + focus.offset,
-          );
-          await back.press('Enter');
+          expect(focus.width, `${selector} keyboard navigation outline`).toBeGreaterThanOrEqual(2);
+          expect(focus.offset).toBeLessThanOrEqual(0);
+          await chatNavigation.press('Enter');
           await expect(panel).toHaveAttribute('data-view', 'chat');
           await expect(page.locator('.cui-input')).toHaveValue('Preserve this draft while checking every view');
         }
@@ -221,7 +221,7 @@ for (const variant of variants) {
         const artifacts = panel.locator('.agent-artifacts');
         const importing = artifacts.locator('[data-action="import"]');
         await expect(importing).toBeVisible();
-        expect(await frameLeft(importing)).toBeCloseTo(16, 1);
+        expect(await frameLeft(importing)).toBeCloseTo(rail, 1);
         if (await artifacts.locator('.agent-artifacts-list > li').count()) {
           const gap = await importing.evaluate((el) => {
             const list = el.parentElement!.querySelector('.agent-artifacts-list')!;
@@ -229,15 +229,19 @@ for (const variant of variants) {
           });
           expect(gap, 'saved results and the import action form separate groups').toBe(16);
         }
-        const emptyCopy = artifacts.locator(':scope > div:not(.agent-view-header) > p');
-        if (await emptyCopy.count()) expect((await textGeometry(emptyCopy)).textLeft).toBeCloseTo(16, 1);
+        const emptyCopy = artifacts.locator('.agent-artifacts-body > p');
+        if (await emptyCopy.count()) expect((await textGeometry(emptyCopy)).textLeft).toBeCloseTo(rail, 1);
         await importing.click();
         const form = artifacts.locator('.agent-artifact-import');
         const input = form.locator('input');
         await expect(input).toBeVisible();
         for (const field of await form.locator('input, textarea, label > span').all())
-          expect(await frameLeft(field)).toBeCloseTo(16, 1);
-        expect((await contentGeometry(artifacts)).iconLeft).toBeCloseTo(16, 1);
+          expect(await frameLeft(field)).toBeCloseTo(rail, 1);
+        await expect(artifacts.locator('.agent-view-header')).toBeHidden();
+        const nestedBack = panel.locator('.agent-panel-header .agent-view-back');
+        await expect(nestedBack.locator('span')).toBeVisible();
+        expect(await frameLeft(nestedBack.locator('svg'))).toBeCloseTo(rail, 1);
+        await expect(panel.locator('.agent-chat-toggle')).toBeHidden();
         await input.fill('Layout fixture');
         await form
           .locator('textarea')
@@ -246,13 +250,17 @@ for (const variant of variants) {
           );
         await form.locator('[data-action="saveNew"]').click();
         const editor = artifacts.locator('.agent-artifact-editor:not(.agent-artifact-import)');
+        await expect(editor.locator('[data-artifact-reader]')).toBeVisible();
+        await expect(editor).toHaveAttribute('data-mode', 'preview');
+        await editor.locator('[data-action=edit]').click();
         await expect(editor.locator('textarea').first()).toBeVisible();
-        expect(await frameLeft(editor.locator('input').first())).toBeCloseTo(16, 1);
-        expect((await contentGeometry(artifacts)).headingLeft).toBeCloseTo(variant.coarse ? 54 : 48, 1);
+        expect(await frameLeft(editor.locator('input').first())).toBeCloseTo(rail, 1);
+        expect(await frameLeft(editor.locator('.agent-artifact-title'))).toBeCloseTo(rail, 1);
+        await expect(artifacts.locator('.agent-view-header')).toBeHidden();
         await panel.screenshot({ path: testInfo.outputPath(`artifact-editor-${theme}.png`) });
-        await artifacts.locator('.agent-view-back').click();
+        await nestedBack.click();
         await expect(artifacts.locator('[data-action="import"]')).toBeVisible();
-        await artifacts.locator('.agent-view-back').click();
+        await panel.locator('.agent-chat-toggle').click();
       }
     });
   });
diff --git a/test/e2e/agent-markdown-craft.spec.ts b/test/e2e/agent-markdown-craft.spec.ts
new file mode 100644
index 000000000..9bd30cff0
--- /dev/null
+++ b/test/e2e/agent-markdown-craft.spec.ts
@@ -0,0 +1,136 @@
+import { expect, test } from './lib/l0';
+import { installConversationFixture } from './lib/conversation-fixture';
+
+const code =
+  '\tconst release: string = "ready";\n\n  // Preserve tabs, blank lines and the final newline.\n  const endpoint = "https://example.com/releases?environment=production&include=metrics,owners,dependencies,release-notes,reviewers";\n';
+const source = [
+  '| Stage | Owner | Region | Requests | p95 | Notes |',
+  '| :--- | :---: | :--- | ---: | ---: | :--- |',
+  '| Production | Platform engineering | Europe | 24,096 | 128 ms | Review before publishing |',
+  '| Preview | Product engineering | America | 1,248 | 42 ms | Keep a plain code fallback |',
+  '',
+  '```typescript',
+  code,
+  '```',
+  '',
+  '```unknown-example',
+  '<script>window.__markdownMustNotRun = true</script>',
+  '```',
+  '',
+  '![remote](https://example.com/private-image.png) [unsafe](javascript:alert(1))',
+].join('\n');
+for (const variant of [
+  { width: 320, locale: 'pt', theme: 'light', copied: 'Copiado', copy: 'Copiar', failed: 'Falha ao copiar' },
+  { width: 360, locale: 'en', theme: 'dark', copied: 'Copied', copy: 'Copy', failed: 'Could not copy' },
+] as const) {
+  test.describe(`${variant.width}px ${variant.locale} Markdown`, () => {
+    test.use({ viewport: { width: variant.width, height: 900 }, hasTouch: true, colorScheme: variant.theme });
+    test('shares aligned tables and exact, highlighted code copy between Chat and Artifacts', async ({ page }) => {
+      await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+      await page.addInitScript(installConversationFixture);
+      await page.addInitScript(
+        ({ source, theme }) => {
+          localStorage.setItem('ran-theme', theme);
+          const fetch = window.fetch.bind(window);
+          window.fetch = async (input, init) => {
+            const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+            const body = init?.body ? JSON.parse(String(init.body)) : {};
+            if (!url.endsWith('/api/chat') || body.format?.properties?.task) return fetch(input, init);
+            const encoder = new TextEncoder();
+            return new Response(
+              new ReadableStream({
+                start(controller) {
+                  controller.enqueue(
+                    encoder.encode(JSON.stringify({ done: false, message: { content: source } }) + '\n'),
+                  );
+                  controller.enqueue(encoder.encode(JSON.stringify({ done: true, message: { content: '' } }) + '\n'));
+                  controller.close();
+                },
+              }),
+              { headers: { 'Content-Type': 'application/x-ndjson' } },
+            );
+          };
+        },
+        { source, theme: variant.theme },
+      );
+      await page.goto(`/editor?new=docx&locale=${variant.locale}`);
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      const panel = page.locator('.agent-runtime-panel');
+      await panel.locator('.agent-panel-settings-toggle').click();
+      await panel.locator('.agent-panel-endpoint-connect').click();
+      await panel.locator('.agent-chat-toggle').click();
+      await panel.locator('.cui-input').fill('Show a release table and TypeScript example.');
+      await panel.locator('.cui-send').click();
+      await expect(panel.locator('.cui-msg-agent .cui-code')).toHaveCount(2);
+      await expect(panel.locator('.cui-stop')).toBeHidden();
+      const answer = panel.locator('.cui-msg-agent');
+      for (const host of [answer.locator('.cui-bubble'), panel.locator('.agent-artifact-reader')]) {
+        if (!(await host.count())) await answer.locator('.cui-save').click();
+        await expect(host).toBeVisible();
+        const table = host.locator('.cui-table');
+        await expect(table).toHaveAttribute('role', 'region');
+        await expect(table).toHaveAttribute('aria-label', variant.locale === 'pt' ? 'Tabela' : 'Table');
+        await expect(table.locator('td').first()).toHaveCSS('font-weight', '400');
+        expect(
+          await table.locator('th').evaluateAll((cells) => cells.map((cell) => getComputedStyle(cell).textAlign)),
+        ).toEqual(['left', 'center', 'left', 'right', 'right', 'left']);
+        await table.scrollIntoViewIfNeeded();
+        await table.focus();
+        await page.keyboard.press('ArrowRight');
+        await expect.poll(() => table.evaluate((el) => el.scrollLeft)).toBeGreaterThan(0);
+        expect(await panel.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
+        const frame = host.locator('.cui-code').first();
+        await expect(frame.locator('.cui-code-language')).toHaveText('TypeScript');
+        await expect.poll(() => frame.locator('.cui-code-token').count()).toBeGreaterThan(0);
+        const pre = frame.locator('pre');
+        expect(await pre.locator('code').textContent()).toBe(code);
+        await pre.scrollIntoViewIfNeeded();
+        await pre.focus();
+        await page.keyboard.press('ArrowRight');
+        await expect.poll(() => pre.evaluate((el) => el.scrollLeft)).toBeGreaterThan(0);
+        const copy = frame.locator('.cui-code-copy');
+        await copy.click();
+        await expect(copy).toHaveText(variant.copied);
+        expect(await page.evaluate(() => navigator.clipboard.readText())).toBe(code);
+        expect(await copy.evaluate((el) => el.getBoundingClientRect().height)).toBeGreaterThanOrEqual(44);
+        const readable = await copy.evaluate((el) => {
+          const label = el.querySelector('.cui-code-copy-label')!;
+          const range = document.createRange();
+          range.selectNodeContents(label);
+          return range.getBoundingClientRect().right <= el.getBoundingClientRect().right + 1;
+        });
+        expect(readable).toBe(true);
+        const fallback = host.locator('.cui-code').nth(1);
+        await expect(fallback.locator('.cui-code-language')).toHaveText('unknown-example');
+        await expect(fallback.locator('.cui-code-token')).toHaveCount(0);
+        await expect(fallback.locator('code')).toHaveText('<script>window.__markdownMustNotRun = true</script>');
+        await expect(host.locator('script,img,a[href^="javascript:"]')).toHaveCount(0);
+      }
+      const session = await page.context().newCDPSession(page);
+      const { targetInfo } = await session.send('Target.getTargetInfo');
+      await session.send('Browser.setPermission', {
+        permission: { name: 'clipboard-write' },
+        browserContextId: targetInfo.browserContextId,
+        setting: 'denied',
+        origin: new URL(page.url()).origin,
+      });
+      const denied = panel.locator('.agent-artifact-reader .cui-code-copy').first();
+      await denied.click();
+      await expect(denied).toHaveText(variant.failed);
+      expect(
+        await denied.evaluate((el) => {
+          const label = el.querySelector('.cui-code-copy-label')!;
+          const range = document.createRange();
+          range.selectNodeContents(label);
+          return range.getBoundingClientRect().right <= el.getBoundingClientRect().right + 1;
+        }),
+      ).toBe(true);
+      await session.detach();
+      expect(await panel.locator('[data-artifact-source]').inputValue()).toBe(source);
+      expect(
+        await page.evaluate(() => (window as unknown as Record<string, unknown>).__markdownMustNotRun),
+      ).toBeUndefined();
+    });
+  });
+}
diff --git a/test/e2e/agent-navigation-craft.spec.ts b/test/e2e/agent-navigation-craft.spec.ts
new file mode 100644
index 000000000..2335eb43f
--- /dev/null
+++ b/test/e2e/agent-navigation-craft.spec.ts
@@ -0,0 +1,139 @@
+import { expect, test } from './lib/l0';
+import { frameLeft, textGeometry } from './lib/layout-geometry';
+
+const variants = [
+  { width: 1280, locale: 'en', theme: 'light', coarse: false },
+  { width: 1280, locale: 'en', theme: 'dark', coarse: false },
+  { width: 320, locale: 'pt', theme: 'light', coarse: true },
+  { width: 360, locale: 'pt', theme: 'dark', coarse: true },
+] as const;
+
+for (const variant of variants) {
+  test.describe(`${variant.width}px ${variant.locale} ${variant.theme}`, () => {
+    test.use({ viewport: { width: variant.width, height: 1000 }, hasTouch: variant.coarse });
+    test('primary navigation and contextual settings form one coherent pane', async ({ page }, info) => {
+      test.setTimeout(120_000);
+      await page.emulateMedia({ colorScheme: variant.theme, reducedMotion: 'reduce' });
+      await page.addInitScript((theme) => {
+        localStorage.setItem('document-assistant-enabled', 'true');
+        localStorage.setItem('agent-local-preset', 'Qwen3-4B-q4f16_1-MLC');
+        localStorage.setItem('agent_conversation_saving_v2', 'true');
+        localStorage.setItem('ran-theme', theme);
+      }, variant.theme);
+      await page.goto(`/editor?new=docx&locale=${variant.locale}`);
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      const panel = page.locator('.agent-runtime-panel');
+      await expect(page.locator('html')).toHaveAttribute('data-ran-theme', variant.theme);
+      const header = panel.locator('.agent-panel-header');
+      expect((await header.boundingBox())!.height, 'compact header preserves input target density').toBe(
+        variant.coarse ? 52 : 40,
+      );
+      await expect(header.locator('.agent-panel-title')).toHaveCSS('font-size', '13px');
+      await page.locator('.agent-history-toggle').click();
+      const history = page.locator('.agent-history-view');
+      await history.locator('.agent-history-management > summary').click();
+      await page.evaluate(() => document.fonts.ready);
+      const options = history.locator('.agent-history-options');
+      const buttons = options.locator('.agent-history-actions button');
+      const widths: number[] = [];
+      const contentSpine = (await textGeometry(history.locator('.agent-view-header h2'))).textLeft;
+      expect(contentSpine).toBeCloseTo(16, 1);
+      expect((await textGeometry(history.locator('.agent-history-management > summary'))).textLeft).toBeCloseTo(
+        contentSpine,
+        1,
+      );
+      for (const button of await buttons.all()) {
+        expect(await frameLeft(button.locator('svg')), 'command icon shares the heading spine').toBeCloseTo(
+          contentSpine,
+          1,
+        );
+        // The quiet command's hit area extends into the owned gutter; visible icons stay on the page spine.
+        expect(await frameLeft(button)).toBeCloseTo(contentSpine - 8, 1);
+        const box = (await button.boundingBox())!;
+        widths.push(box.width);
+        expect(box.height).toBeGreaterThanOrEqual(variant.coarse ? 44 : 32);
+        if (!variant.coarse) expect(box.height).toBe(32);
+        expect((await textGeometry(button.locator('span'))).textLeft).toBeCloseTo(contentSpine + 24, 1);
+      }
+      expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(0.5);
+      expect(await frameLeft(options.locator('.agent-history-save')), 'checkbox shares the heading spine').toBeCloseTo(
+        contentSpine,
+        1,
+      );
+      expect((await textGeometry(options.locator('label > span'))).textLeft).toBeCloseTo(contentSpine + 24, 1);
+      expect((await textGeometry(options.locator('.agent-history-status'))).textLeft).toBeCloseTo(contentSpine + 24, 1);
+      await page.mouse.move(0, 0);
+      await panel.screenshot({ path: info.outputPath('history-full-pane.png') });
+
+      const nav = panel.locator('.agent-workspace-nav');
+      await expect(nav.getByRole('button')).toHaveCount(3);
+      if (variant.coarse) {
+        for (const button of await nav.getByRole('button').all()) {
+          const box = (await button.boundingBox())!;
+          expect(box.height).toBeGreaterThanOrEqual(44);
+          expect(box.width).toBeGreaterThanOrEqual(44);
+        }
+        expect((await options.locator('label').boundingBox())!.height).toBeGreaterThanOrEqual(44);
+      }
+      const draft = 'Keep the current conversation draft';
+      await panel.locator('.agent-chat-toggle').click();
+      await panel.locator('.cui-input').fill(draft);
+      for (const [trigger, view] of [
+        ['.agent-workspace-toggle', '.agent-artifacts'],
+        ['.agent-sources-nav', '.agent-sources-view'],
+        ['.agent-panel-settings-toggle', '.agent-panel-settings'],
+        ['.agent-history-toggle', '.agent-history-view'],
+      ]) {
+        const button = panel.locator(trigger);
+        await button.click();
+        await expect(button).toHaveAttribute('aria-current', 'page');
+        const primary = trigger === '.agent-workspace-toggle' || trigger === '.agent-history-toggle';
+        if (primary) {
+          // Pointer hover must not supply the selected fill we are verifying.
+          await page.mouse.move(0, 0);
+          await expect(button).toHaveCSS('box-shadow', 'none');
+          await expect(button).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+          await expect(button).not.toHaveCSS(
+            'background-color',
+            await panel.evaluate((el) => getComputedStyle(el).backgroundColor),
+          );
+        }
+        const current = panel.locator(view);
+        await expect(current).toBeVisible();
+        await expect(current.locator('.agent-view-back')).toHaveCount(0);
+        const heading = current.locator('.agent-view-header h2');
+        expect((await textGeometry(heading)).textLeft).toBeCloseTo(16, 1);
+        await expect(heading).toHaveCSS('font-size', '16px');
+        await expect(panel.locator(':scope > .agent-runtime-row')).toBeHidden();
+        if (primary) {
+          // Reselecting a primary destination preserves its state.
+          await button.click();
+          await expect(current).toBeVisible();
+          await button.focus();
+          const visible = await button.evaluate((el) => {
+            const box = el.getBoundingClientRect(),
+              parent = el.parentElement!.getBoundingClientRect();
+            return box.left >= parent.left && box.right <= parent.right + 1;
+          });
+          expect(visible).toBe(true);
+        }
+        expect(await current.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
+        await page.mouse.move(0, 0);
+        await panel.screenshot({ path: info.outputPath(`${view.slice(1)}-full-pane.png`) });
+        if (primary) await panel.locator('.agent-chat-toggle').click();
+        else {
+          await page.keyboard.press('Escape');
+          await expect(button).toBeFocused();
+        }
+        await expect(panel.locator('.cui-input')).toHaveValue(draft);
+      }
+      await panel.locator('.agent-chat-toggle').click();
+      await expect(panel.locator('.cui-input')).toHaveValue(draft);
+      await page.setViewportSize({ width: variant.width === 1280 ? 360 : 1280, height: 1000 });
+      await panel.locator('.agent-sources-nav').click();
+      await expect(panel.locator('.agent-sources-view')).toBeVisible();
+      expect(await panel.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThanOrEqual(1);
+    });
+  });
+}
diff --git a/test/e2e/agent-product-entry.spec.ts b/test/e2e/agent-product-entry.spec.ts
index 92ad6da54..106ef5f6d 100644
--- a/test/e2e/agent-product-entry.spec.ts
+++ b/test/e2e/agent-product-entry.spec.ts
@@ -51,15 +51,13 @@ test('default off and remembered on never prepare models or connect services on
   await expect(page.locator('.agent-runtime-panel')).toHaveCount(0);
   await page.locator('.agent-onboarding .agent-enable-switch').click();
   await expect(page.locator('.agent-runtime-panel')).toBeVisible();
-  await expect(page.locator('.agent-panel-settings')).toBeVisible();
-  await page.locator('.agent-panel-settings-toggle').click();
   await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
   await page.locator('.cui-input').fill('My draft');
   await expect(page.locator('.cui-send')).toHaveClass(/cui-send-prepare/);
   await expect(page.locator('.cui-send')).toBeEnabled();
   await expect(page.locator('.cui-msg-user')).toHaveCount(0);
   await page.locator('.agent-panel-settings-toggle').click();
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
   await expect(page.locator('.cui-input')).toHaveValue('My draft');
   await page.locator('.agent-runtime-panel .agent-panel-close').click();
@@ -93,14 +91,16 @@ for (const width of [1280, 375, 320]) {
     await page.evaluate(() => window.__toggleAgentPanel?.());
     await page.locator('.agent-onboarding .agent-enable-switch').click();
     await expect(page.locator('.agent-runtime-panel')).toBeVisible();
+    await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
+    await page.locator('.agent-panel-settings-toggle').click();
     await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'settings');
     await page.screenshot({ path: testInfo.outputPath('settings.png') });
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
     await page.locator('.cui-input').fill('Keep this draft while switching views');
     await page.locator('.agent-history-toggle').click();
     await expect(page.locator('.agent-history-view')).toBeVisible();
-    await page.locator('.agent-history-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
     await expect(page.locator('.cui-input')).toHaveValue('Keep this draft while switching views');
     const fits = await page.locator('.agent-runtime-panel').evaluate((panel) => {
diff --git a/test/e2e/agent-public-reasoning.spec.ts b/test/e2e/agent-public-reasoning.spec.ts
new file mode 100644
index 000000000..dcddd0c6e
--- /dev/null
+++ b/test/e2e/agent-public-reasoning.spec.ts
@@ -0,0 +1,120 @@
+import { expect, test } from './lib/l0';
+import { installConversationFixture } from './lib/conversation-fixture';
+
+test('public reasoning is a reader-owned transient phase and never a saved answer', async ({ page }, info) => {
+  await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+  await page.addInitScript(installConversationFixture);
+  await page.goto('/editor?new=docx&locale=en');
+  await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+  await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+  const panel = page.locator('.agent-runtime-panel');
+  const input = panel.locator('.cui-input');
+  await input.fill('Hello');
+  await panel.locator('.cui-send').click();
+  await expect(panel.locator('.agent-panel-endpoint-status')).toContainText('Connected');
+  await panel.locator('.cui-send').click();
+  const reasoning = panel.locator('r-reasoning');
+  await expect(reasoning).toHaveCount(1);
+  await expect
+    .poll(() => reasoning.evaluate((el) => (el as HTMLElement & { content: string }).content))
+    .toContain('project notes');
+  await expect(panel.locator('.cui-msg-agent')).toHaveCount(0);
+  // The native disclosure uses a closed shadow root; click its visible header.
+  await reasoning.click({ position: { x: 32, y: 16 } });
+  await expect(reasoning).not.toHaveAttribute('open');
+  await page.evaluate(() => window.__conversationFixture.advance());
+  await expect
+    .poll(() => reasoning.evaluate((el) => (el as HTMLElement & { content: string }).content))
+    .toContain('next action');
+  await expect(reasoning).not.toHaveAttribute('open');
+  await page.evaluate(() => window.__conversationFixture.advance());
+  await expect(panel.locator('.cui-msg-agent .cui-bubble')).toContainText('Project update');
+  await expect(reasoning).not.toHaveAttribute('streaming');
+  expect(await page.evaluate(() => window.__conversationFixture.completed)).toBe(false);
+  for (let i = 0; i < 6; i++) await page.evaluate(() => window.__conversationFixture.advance());
+  await expect(panel.locator('.cui-stop')).toBeHidden();
+  await expect(panel.locator('.cui-msg-agent .cui-bubble table')).toHaveCount(1);
+  await expect(panel.locator('.cui-msg-agent .cui-bubble pre')).toContainText('const status');
+  expect(await panel.locator('.cui-msg-agent').getAttribute('data-source')).not.toContain('supplied project notes');
+  await panel.locator('.cui-msg-agent .cui-copy').click();
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+  expect(copied).toContain('Project update');
+  expect(copied).not.toContain('checking the supplied project notes');
+  await panel.locator('.cui-msg-agent .cui-save').click();
+  await expect(panel.locator('[data-artifact-reader]')).toBeVisible();
+  await expect(panel.locator('[data-artifact-source]')).toHaveValue(/Project update/);
+  expect(await panel.locator('[data-artifact-source]').inputValue()).not.toContain(
+    'checking the supplied project notes',
+  );
+  await panel.locator('.agent-panel-header [data-action=back]').click();
+  await panel.locator('.agent-chat-toggle').click();
+  await panel.screenshot({ path: info.outputPath('public-reasoning-completed.png') });
+  await input.fill('Hi');
+  await panel.locator('.cui-send').click();
+  await expect(reasoning).toHaveCount(2);
+  expect(JSON.stringify(await page.evaluate(() => window.__conversationFixture.requests))).not.toContain(
+    'checking the supplied project notes',
+  );
+  await panel.locator('.cui-stop').click();
+  await expect(panel.locator('.cui-stop')).toBeHidden();
+  await expect(reasoning.last()).not.toHaveAttribute('streaming');
+  const before = await reasoning.last().evaluate((el) => (el as HTMLElement & { content: string }).content);
+  await page.evaluate(() => window.__conversationFixture.advance());
+  expect(await reasoning.last().evaluate((el) => (el as HTMLElement & { content: string }).content)).toBe(before);
+  await input.fill('Hello again');
+  await page.evaluate(() => {
+    window.__conversationFixture.mode = 'answer-only';
+  });
+  await panel.locator('.cui-send').click();
+  await expect(panel.locator('.cui-msg-agent')).toHaveCount(2);
+  await expect(reasoning).toHaveCount(2);
+  await panel.locator('.cui-stop').click();
+});
+
+test.describe('touch streaming composer', () => {
+  test.use({ hasTouch: true });
+  for (const width of [320, 360]) {
+    test(`keeps disclosed voice language readable without crowding Stop and Send at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.addInitScript(installConversationFixture);
+      await page.goto('/editor?new=docx&locale=pt');
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      await page.locator('.cui-input').fill('Hello');
+      await page.locator('.cui-send').click();
+      await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Ligado');
+      await page.locator('.cui-send').click();
+      await expect(page.locator('.cui-stop')).toBeVisible();
+      await expect(page.locator('.agent-speech-language')).toBeHidden();
+      await page.locator('.agent-speech-privacy button').click();
+      await expect(page.locator('.agent-speech-language')).toBeVisible();
+      const language = await page.locator('.agent-speech-language').evaluate((el) => {
+        const root = el.shadowRoot ?? (el as HTMLElement & { _shadowDom: ShadowRoot })._shadowDom;
+        const label = root.querySelector('[part="selection-item"]')!;
+        const range = document.createRange();
+        range.selectNodeContents(label);
+        return {
+          text: label.textContent,
+          width: label.getBoundingClientRect().width,
+          textWidth: range.getBoundingClientRect().width,
+        };
+      });
+      expect(language.text).toBe('Português');
+      expect(language.width).toBeGreaterThanOrEqual(language.textWidth);
+      await page.locator('.agent-speech-privacy button').press('Escape');
+      for (const control of [
+        '.agent-sources-toggle',
+        '.agent-speech-mic',
+        '.agent-speech-privacy button',
+        '.cui-stop',
+        '.cui-send',
+      ]) {
+        const box = (await page.locator(control).boundingBox())!;
+        expect(box.width).toBeGreaterThanOrEqual(44);
+        expect(box.height).toBeGreaterThanOrEqual(44);
+      }
+      expect(await page.locator('.cui-composer').evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThan(2);
+      await page.locator('.cui-stop').click();
+    });
+  }
+});
diff --git a/test/e2e/agent-request-queue.spec.ts b/test/e2e/agent-request-queue.spec.ts
index 052477780..179be4000 100644
--- a/test/e2e/agent-request-queue.spec.ts
+++ b/test/e2e/agent-request-queue.spec.ts
@@ -91,6 +91,9 @@ for (const ext of ['docx', 'pptx'] as const) {
       expect(toolbarBounds!.y).toBe(sendSize!.y);
       expect(await page.locator('.cui-composer').evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThan(2);
       const language = page.locator('.agent-speech-language');
+      await expect(language).toBeHidden();
+      await page.locator('.agent-speech-privacy button').click();
+      await expect(language).toBeVisible();
       const languageMetrics = () =>
         language.evaluate((el) => {
           const root = el.shadowRoot ?? (el as HTMLElement & { _shadowDom: ShadowRoot })._shadowDom;
@@ -108,17 +111,18 @@ for (const ext of ['docx', 'pptx'] as const) {
       const english = await languageMetrics();
       expect(english.text).toBe('English');
       expect(english.width).toBeGreaterThanOrEqual(english.textWidth);
-      // Longer locale names may truncate; the label must retain a readable lane.
+      // The disclosed field retains a full label without consuming the narrow execution row.
       await language.evaluate((el) => {
         (el as HTMLElement & { value: string }).value = 'pt-BR';
       });
       const longer = await languageMetrics();
       expect(longer.text).toBe('Português');
       expect(longer.width).toBeGreaterThanOrEqual(32);
-      expect(longer.scroll).toBeGreaterThan(longer.client);
+      expect(longer.width).toBeGreaterThanOrEqual(longer.textWidth);
       await language.evaluate((el) => {
         (el as HTMLElement & { value: string }).value = 'en-US';
       });
+      await page.locator('.agent-speech-privacy button').press('Escape');
       await expect(page.locator('.agent-panel-title')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
       await expect(page.locator('.cui-progress')).toHaveCSS('border-top-width', '0px');
       await expect(page.locator('.cui-progress')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
diff --git a/test/e2e/agent-sidebar-layout.spec.ts b/test/e2e/agent-sidebar-layout.spec.ts
index e080200f3..3b3ffd76c 100644
--- a/test/e2e/agent-sidebar-layout.spec.ts
+++ b/test/e2e/agent-sidebar-layout.spec.ts
@@ -25,14 +25,15 @@ for (const width of [320, 1280]) {
     expect(switchGeometry.knobTop).toBe(switchGeometry.trackTop);
     await page.locator('.agent-onboarding .agent-enable-switch').click();
     const panel = page.locator('.agent-runtime-panel');
-    await expect(panel).toHaveAttribute('data-view', 'settings');
-    await page.locator('.agent-panel-settings-toggle').click();
     await expect(panel).toHaveAttribute('data-view', 'chat');
     await expect(page.locator('.cui-composer')).toBeVisible();
     await expect(page.locator('.cui-empty')).toBeVisible();
     const suggestion = page.locator('.agent-task-action').first();
-    await expect(suggestion).toHaveCSS('border-top-width', '1px');
-    await expect(suggestion).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+    await expect(suggestion.locator('.agent-task-icon')).toBeVisible();
+    await suggestion.click();
+    await expect(page.locator('.cui-input')).not.toHaveValue('');
+    await expect(page.locator('.cui-msg-user')).toHaveCount(0);
+    await page.locator('.cui-input').fill('');
     await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath(`empty-${width}.png`) });
     const alignment = await page.locator('.agent-runtime-panel').evaluate((panel) => {
       const left = (selector: string) => panel.querySelector(selector)!.getBoundingClientRect().left;
@@ -44,8 +45,12 @@ for (const width of [320, 1280]) {
     await page.locator('.agent-panel-settings-toggle').click();
     await expect(page.locator('.agent-panel-settings')).toBeVisible();
     const settingsToggle = page.locator('.agent-panel-settings-toggle');
-    await page.keyboard.press('Tab');
-    await settingsToggle.focus();
+    const size = await page.locator('.agent-panel-load').evaluate((button) => button.getBoundingClientRect().height);
+    expect(size).toBeGreaterThanOrEqual(30);
+    expect(size).toBeLessThanOrEqual(34);
+    const overflow = await page.locator('.agent-panel-settings').evaluate((el) => el.scrollWidth - el.clientWidth);
+    expect(overflow).toBeLessThanOrEqual(1);
+    await page.keyboard.press('Escape');
     await expect(settingsToggle).toBeFocused();
     expect(
       await settingsToggle.evaluate((button) => {
@@ -53,10 +58,5 @@ for (const width of [320, 1280]) {
         return style.outlineStyle !== 'none' && Number.parseFloat(style.outlineWidth) >= 2;
       }),
     ).toBe(true);
-    const size = await page.locator('.agent-panel-load').evaluate((button) => button.getBoundingClientRect().height);
-    expect(size).toBeGreaterThanOrEqual(30);
-    expect(size).toBeLessThanOrEqual(34);
-    const overflow = await page.locator('.agent-panel-settings').evaluate((el) => el.scrollWidth - el.clientWidth);
-    expect(overflow).toBeLessThanOrEqual(1);
   });
 }
diff --git a/test/e2e/agent-single-return.spec.ts b/test/e2e/agent-single-return.spec.ts
new file mode 100644
index 000000000..4525f3ebc
--- /dev/null
+++ b/test/e2e/agent-single-return.spec.ts
@@ -0,0 +1,179 @@
+import { expect, test } from './lib/l0';
+import { textGeometry } from './lib/layout-geometry';
+
+for (const variant of [
+  { width: 1280, locale: 'en', coarse: false },
+  { width: 320, locale: 'pt', coarse: true },
+]) {
+  test.describe(`${variant.width}px ${variant.locale} single return`, () => {
+    test.use({ viewport: { width: variant.width, height: 900 }, hasTouch: variant.coarse });
+    test('one shell return retains the nested dirty guard and restores the Chat draft', async ({ page }) => {
+      await page.addInitScript(() => localStorage.setItem('document-assistant-enabled', 'true'));
+      await page.goto(`/editor?new=docx&locale=${variant.locale}`);
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      const panel = page.locator('.agent-runtime-panel');
+      const composer = panel.locator('.cui-input');
+      await composer.fill('A draft to preserve');
+      await composer.evaluate((el: HTMLTextAreaElement) => el.setSelectionRange(2, 7));
+      await panel.locator('.agent-workspace-toggle').click();
+      await expect(panel.locator('.agent-panel-title')).toBeVisible();
+      await expect(panel.locator('[data-action=back]:visible')).toHaveCount(0);
+      await panel.locator('[data-action=import]').click();
+      const back = panel.locator('.agent-panel-header [data-action=back]');
+      await expect(back).toBeVisible();
+      const caption = back.locator('span');
+      await expect(caption).toHaveText(variant.locale === 'pt' ? 'Artefatos' : 'Artifacts');
+      await expect(back).toHaveAccessibleName(new RegExp(await caption.innerText(), 'i'));
+      const readable = await caption.evaluate((el) => {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        return range.getBoundingClientRect().width <= el.getBoundingClientRect().width + 1;
+      });
+      expect(readable, 'the parent destination must remain readable in the actual header').toBe(true);
+      await expect(panel.locator('.agent-panel-title')).toBeHidden();
+      await expect(panel.locator('.agent-artifacts .agent-view-back')).toHaveCount(0);
+      await expect(panel.locator('.agent-artifacts > .agent-view-header')).toBeHidden();
+      const title = panel.locator('.agent-artifact-import input');
+      await title.fill('Unsaved import');
+      const peerHeader = panel.locator('.agent-workspace-toggle');
+      await peerHeader.focus();
+      await page.keyboard.press('Escape');
+      const discard = panel.locator('.agent-artifact-status [data-action=discardChanges]');
+      await expect(discard).toBeVisible();
+      await expect(title).toHaveValue('Unsaved import');
+      await title.press('Escape');
+      await expect(discard).toBeVisible();
+      await expect(panel).toHaveAttribute('data-view', 'artifacts');
+      await panel.locator('.agent-artifact-status [data-action=cancel]').click();
+      await expect(peerHeader).toBeFocused();
+      await expect(title).toHaveValue('Unsaved import');
+      await back.click();
+      await panel.locator('.agent-artifact-status [data-action=cancel]').click();
+      await expect(back).toBeFocused();
+      await page.keyboard.press('Escape');
+      await expect(panel.locator('.agent-artifact-status [data-action=cancel]')).toBeFocused();
+      await discard.click();
+      await expect(panel.locator('[data-action=import]')).toBeVisible();
+      await expect(back).toHaveCount(0);
+      await expect(panel.locator('.agent-artifacts h2')).toBeFocused();
+      await peerHeader.focus();
+      await page.keyboard.press('Escape');
+      await expect(panel).toHaveAttribute('data-view', 'chat');
+      await expect(composer).toHaveValue('A draft to preserve');
+      // Escape's final destination retains the existing trigger-focus contract.
+      await expect(panel.locator('.agent-workspace-toggle')).toBeFocused();
+      expect(await composer.evaluate((el: HTMLTextAreaElement) => [el.selectionStart, el.selectionEnd])).toEqual([
+        2, 7,
+      ]);
+    });
+
+    test('artifact command glyphs start on the content rail across wrapped rows', async ({ page }) => {
+      await page.addInitScript(() => localStorage.setItem('document-assistant-enabled', 'true'));
+      await page.goto(`/editor?new=docx&locale=${variant.locale}`);
+      await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+      await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+      const panel = page.locator('.agent-runtime-panel');
+      await panel.locator('.agent-workspace-toggle').click();
+      await panel.locator('[data-action=import]').click();
+      await panel.locator('.agent-artifact-import input').fill('Command rails');
+      await panel
+        .locator('.agent-artifact-import textarea')
+        .fill(
+          JSON.stringify({ schemaVersion: 1, payload: { kind: 'text', text: '# Command rails\n\nA saved result.' } }),
+        );
+      await panel.locator('[data-action=saveNew]').click();
+      const workbench = panel.locator('.agent-artifact-workbench');
+      await expect(workbench).toBeVisible();
+      await page.evaluate(() => document.fonts.ready);
+      const rail = variant.width <= 380 ? 16 : 24;
+      for (const theme of ['light', 'dark'] as const) {
+        await page.emulateMedia({ colorScheme: theme });
+        expect((await textGeometry(workbench.locator('[data-action=refine]'))).textLeft).toBeCloseTo(rail, 1);
+        // Select each wrapped row's first command using actual box tops, then
+        // measure its visible text independently of the padded hit frame.
+        const firstCommands = await workbench
+          .locator('.agent-artifact-actions > :is(button, details)')
+          .evaluateAll((buttons) =>
+            buttons
+              .filter((button, index) => {
+                if (!index) return true;
+                return button.getBoundingClientRect().top >= buttons[index - 1].getBoundingClientRect().bottom - 1;
+              })
+              .map((button) => (button.tagName === 'DETAILS' ? 'export' : button.getAttribute('data-action'))),
+          );
+        for (const action of firstCommands) {
+          if (action === 'export') {
+            const summary = workbench.locator('.agent-artifact-actions > details > summary');
+            const markerStart = await summary.evaluate((el) => {
+              const panel = el.closest('.agent-panel')!;
+              return (
+                el.getBoundingClientRect().left +
+                parseFloat(getComputedStyle(el).paddingLeft) -
+                panel.getBoundingClientRect().left -
+                parseFloat(getComputedStyle(panel).borderLeftWidth)
+              );
+            });
+            expect(markerStart).toBeCloseTo(rail, 1);
+            expect((await textGeometry(summary)).textLeft).toBeGreaterThan(markerStart);
+          } else {
+            expect(
+              (await textGeometry(workbench.locator(`.agent-artifact-actions > [data-action="${action}"]`))).textLeft,
+            ).toBeCloseTo(rail, 1);
+          }
+        }
+        const separatorStart = await workbench.locator('.agent-artifact-footer').evaluate((el) => {
+          const panel = el.closest('.agent-panel')!;
+          return (
+            el.getBoundingClientRect().left -
+            panel.getBoundingClientRect().left -
+            parseFloat(getComputedStyle(panel).borderLeftWidth)
+          );
+        });
+        expect(separatorStart).toBeCloseTo(rail, 1);
+        expect(await panel.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThan(2);
+      }
+      // Keep a real IndexedDB writer ahead of Save so the artifact owner is
+      // genuinely busy; header-focused Escape must consume that guarded return.
+      await workbench.locator('[data-action=edit]').click();
+      await workbench.locator('[data-artifact-source]').fill('A pending saved version');
+      await page.evaluate(async () => {
+        const opening = indexedDB.open('document-ai-artifacts', 1);
+        const db = await new Promise<IDBDatabase>((resolve) => {
+          opening.onsuccess = () => resolve(opening.result);
+        });
+        const transaction = db.transaction(['artifacts', 'summaries'], 'readwrite');
+        let held = true;
+        const pump = () => {
+          if (!held) return;
+          const request = transaction.objectStore('artifacts').get('__navigation_lock__');
+          request.onsuccess = pump;
+        };
+        pump();
+        const fixture = window as Window & { releaseArtifactNavigationLock?: () => void };
+        fixture.releaseArtifactNavigationLock = () => {
+          held = false;
+          delete fixture.releaseArtifactNavigationLock;
+        };
+        transaction.oncomplete = () => db.close();
+      });
+      await workbench.locator('[data-action=saveVersion]').click();
+      const back = panel.locator('.agent-panel-header [data-action=back]');
+      await expect(back).toBeDisabled();
+      const peerHeader = panel.locator('.agent-workspace-toggle');
+      await peerHeader.focus();
+      await page.keyboard.press('Escape');
+      await expect(panel).toHaveAttribute('data-view', 'artifacts');
+      await expect(back).toBeDisabled();
+      await expect(workbench.locator('[data-artifact-source]')).toHaveValue('A pending saved version');
+      await page.evaluate(() =>
+        (window as Window & { releaseArtifactNavigationLock?: () => void }).releaseArtifactNavigationLock?.(),
+      );
+      await expect(back).toBeEnabled();
+      await peerHeader.focus();
+      await page.keyboard.press('Escape');
+      await expect(panel.locator('[data-action=import]')).toBeVisible();
+      await expect(panel.locator('.agent-artifacts h2')).toBeFocused();
+    });
+  });
+}
diff --git a/test/e2e/agent-sources-artifacts.spec.ts b/test/e2e/agent-sources-artifacts.spec.ts
index 140b72491..1930d4968 100644
--- a/test/e2e/agent-sources-artifacts.spec.ts
+++ b/test/e2e/agent-sources-artifacts.spec.ts
@@ -1,3 +1,4 @@
+import { editArtifact } from './lib/artifact-view';
 import { mockApi, originalApiUrl } from './lib/mock-api';
 import { readFile } from 'node:fs/promises';
 import { expect, test } from './lib/l0';
@@ -61,12 +62,13 @@ test('local sources and versioned artifacts remain explicit, compact and reviewe
   await page.locator('.agent-source-row summary').click();
   await expect(page.locator('.agent-source-preview pre')).toHaveText('Project reference');
   await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath('sources.png') });
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.agent-sources-summary')).toHaveText('notes.md');
   await page.locator('.cui-save').click();
   await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'artifacts');
   const text = page.locator('.agent-artifact-editor textarea');
   await expect(text).toHaveValue(source);
+  await editArtifact(page);
   await text.fill('Edited release note');
   await page.getByRole('button', { name: 'Save version', exact: true }).click();
   await expect(page.locator('.agent-artifact-status')).toHaveText('Saved on this device');
@@ -75,7 +77,7 @@ test('local sources and versioned artifacts remain explicit, compact and reviewe
   await expect(text).toHaveValue(source);
   await page.getByRole('button', { name: 'Save version', exact: true }).click();
   await expect(page.locator('.agent-artifact-editor select option')).toHaveCount(3);
-  await page.locator('.agent-artifact-presentation > details > summary').click();
+  await page.locator('.agent-artifact-export > summary').click();
   await page.setViewportSize({ width: 360, height: 700 });
   for (const theme of ['light', 'dark'] as const) {
     await page.emulateMedia({ colorScheme: theme });
@@ -185,7 +187,7 @@ test('attached reference excerpts reach only the explicitly selected AI service'
   await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath('source-search-preview.png') });
   await sourceSearch.fill('');
   expect(bodies).toEqual([]);
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await page.locator('.cui-input').fill('Hello');
   await page.locator('.cui-send').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
@@ -195,7 +197,7 @@ test('attached reference excerpts reach only the explicitly selected AI service'
   expect(bodies[0]).toContain('Only this reference is attached.');
   await page.locator('.agent-sources-toggle').click();
   await page.getByRole('button', { name: 'Remove: notes.txt', exact: true }).click();
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await page.getByRole('button', { name: 'Open source: notes.txt', exact: true }).click();
   await expect(page.locator('.cui-bubble .agent-source-preview pre')).toContainText('Only this reference is attached.');
   await page.locator('.cui-bubble .agent-source-preview summary').click();
@@ -242,14 +244,18 @@ test('attached reference excerpts reach only the explicitly selected AI service'
   expect(bodies).toHaveLength(1);
   await page.locator('.cui-save').click();
   await expect(page.locator('.agent-artifact-provenance')).toContainText('notes.txt');
+  await editArtifact(page);
   await page.locator('.agent-artifact-editor textarea').fill('Keep artifact draft');
-  await page.getByRole('button', { name: 'Artifacts', exact: true }).click();
+  // Switch destinations without discarding the mounted artifact draft.
+  await page.locator('.agent-history-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.cui-save')).toHaveText('Saved');
   await page.locator('.cui-save').click();
   await expect(page.locator('.agent-artifact-status')).toContainText('Discard unsaved changes');
   await page.getByRole('button', { name: 'Cancel', exact: true }).click();
   await expect(page.locator('.agent-artifact-editor textarea')).toHaveValue('Keep artifact draft');
-  await page.getByRole('button', { name: 'Artifacts', exact: true }).click();
+  await page.locator('.agent-history-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.cui-save')).toHaveText('Save as artifact');
   await page.setViewportSize({ width: 360, height: 700 });
   await page.emulateMedia({ reducedMotion: 'reduce' });
@@ -378,7 +384,7 @@ test('offline workspace keeps local sources and hides download controls without
   });
   await expect(page.locator('.agent-source-row')).toContainText('offline.txt');
   await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath('sources-offline.png') });
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.agent-sources-summary')).toHaveText('offline.txt');
   await page.locator('.agent-panel-settings-toggle').click();
   await expect(page.locator('.agent-panel-settings > .agent-offline-hint')).toBeVisible();
@@ -388,24 +394,26 @@ test('offline workspace keeps local sources and hides download controls without
   await expect(page.locator('.agent-panel-provider')).toBeVisible();
   await expect(page.locator('.agent-custom-sources')).toBeHidden();
   await expect(page.locator('.agent-model-cache')).toBeVisible();
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await page.getByRole('button', { name: 'Artifacts', exact: true }).click();
   await expect(page.locator('.agent-artifacts')).toBeVisible();
   await page.getByRole('button', { name: 'Offline draft', exact: true }).click();
+  await editArtifact(page);
   await page.locator('.agent-artifact-editor textarea').fill('Saved without a network');
   await page.getByRole('button', { name: 'Save version', exact: true }).click();
   await expect(page.locator('.agent-artifact-editor select option')).toHaveCount(2);
   await expect(page.locator('.agent-artifact-status')).toHaveText('Saved on this device');
   await context.setOffline(false);
   offline = false;
-  await page.getByRole('button', { name: 'Artifacts', exact: true }).click();
-  await page.locator('.agent-sources-toggle').click();
+  await page.locator('.agent-runtime-panel .agent-panel-header [data-action=back]').click();
+  await page.locator('.agent-chat-toggle').click();
+  await page.locator('.agent-sources-nav').click();
   await expect(
     page.locator('.agent-sources-view input[type=url], .agent-sources-view input[type=password]'),
   ).toHaveCount(0);
   await expect(page.locator('.agent-source-row')).toContainText('offline.txt');
   expect(connectorRequests).toEqual([]);
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.cui-input')).toHaveValue('Keep this draft offline');
   expect([...failedWhileOffline].filter((url) => core.has(url))).toEqual([]);
   expect(
@@ -493,12 +501,14 @@ test('discard restores artifact titles and a full version history can continue a
   const text = page.locator('.agent-artifact-editor textarea');
   const versions = page.locator('.agent-artifact-editor select');
   await versions.selectOption('1');
+  await editArtifact(page);
   await title.fill('Unsaved title');
   await versions.selectOption('20');
   await page.locator('[data-action=discardChanges]').click();
   await expect(title).toHaveValue('Saved title');
   await expect(text).toHaveValue('Version 20');
   await expect(page.locator('[data-action=saveVersion]')).toBeDisabled();
+  await editArtifact(page);
   await text.fill('Continue this draft');
   await page.locator('[data-action=saveVersion]').click();
   await expect(page.locator('.agent-artifact-status')).toContainText('20 versions');
@@ -557,7 +567,7 @@ test('switching conversations releases a pending source read without attaching i
   await expect(page.locator('.agent-source-row')).toHaveText('fresh.txtRemove');
   await page.evaluate(() => (window as Window & { releaseOldReference?: () => void }).releaseOldReference!());
   await expect(page.locator('.agent-source-row')).toHaveText('fresh.txtRemove');
-  await page.getByRole('button', { name: 'Back to conversation', exact: true }).click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.agent-sources-summary')).toHaveText('fresh.txt');
 });
 
@@ -654,7 +664,7 @@ test('structured results validate explicitly, preview compactly and export witho
   await page.getByRole('button', { name: 'Suggest changes', exact: true }).click();
   await expect(page.locator('.agent-artifact-workflow')).toContainText('The revision could not finish');
   await expect(page.getByRole('button', { name: 'Use in draft', exact: true })).toBeHidden();
-  await expect(page.locator('.agent-artifact-data-preview td textarea').first()).toHaveValue('row 0');
+  await expect(page.locator('.agent-artifact-data-preview td').first()).toHaveText('row 0');
   await page.getByRole('button', { name: 'Suggest changes', exact: true }).click();
   await expect(page.getByRole('button', { name: 'Use in draft', exact: true })).toBeVisible();
   expect(JSON.stringify(requests[1])).toContain('10000 cells');
@@ -667,15 +677,13 @@ test('structured results validate explicitly, preview compactly and export witho
   for (const theme of ['light', 'dark'] as const) {
     await page.setViewportSize({ width: 360, height: 760 });
     await page.emulateMedia({ colorScheme: theme });
-    await page.locator('.agent-artifact-editor > input').scrollIntoViewIfNeeded();
+    await page.locator('.agent-artifact-editor .agent-artifact-title').scrollIntoViewIfNeeded();
     await page
       .locator('.agent-runtime-panel')
       .screenshot({ path: testInfo.outputPath(`structured-default-${theme}.png`) });
   }
   await page.getByRole('button', { name: 'Next', exact: true }).click();
-  await expect(
-    page.locator('.agent-artifact-data-preview tbody textarea, .agent-artifact-data-preview tr textarea').nth(2),
-  ).toHaveValue('row 10');
+  await expect(page.locator('.agent-artifact-data-preview td').first()).toHaveText('row 10');
   await context.setOffline(true);
   await page.getByText('Export', { exact: true }).click();
   const download = page.waitForEvent('download');
@@ -699,7 +707,7 @@ test('structured results validate explicitly, preview compactly and export witho
       .toBeLessThan(2);
     await page.locator('.agent-runtime-panel').screenshot({ path: testInfo.outputPath(`structured-${theme}.png`) });
   }
-  await page.locator('.agent-artifacts').getByRole('button', { name: 'Back to artifacts', exact: true }).click();
+  await page.locator('.agent-panel-header').getByRole('button', { name: 'Back to artifacts', exact: true }).click();
   await page.getByRole('button', { name: 'Import structured result', exact: true }).click();
   await page.locator('.agent-artifact-editor input').fill('Release slides');
   await page.locator('.agent-artifact-editor textarea').fill(
@@ -715,6 +723,7 @@ test('structured results validate explicitly, preview compactly and export witho
     }),
   );
   await page.getByRole('button', { name: 'Save as new artifact', exact: true }).click();
+  await editArtifact(page);
   const slideBody = page.locator('.agent-artifact-data-preview > textarea').nth(1);
   await slideBody.focus();
   await slideBody.press('End');
@@ -723,7 +732,7 @@ test('structured results validate explicitly, preview compactly and export witho
   await page.getByRole('button', { name: 'Save version', exact: true }).click();
   for (const theme of ['light', 'dark'] as const) {
     await page.emulateMedia({ colorScheme: theme });
-    await page.locator('.agent-artifact-editor > input').scrollIntoViewIfNeeded();
+    await page.locator('.agent-artifact-editor .agent-artifact-title').scrollIntoViewIfNeeded();
     await expect
       .poll(() => page.locator('.agent-runtime-panel').evaluate((el) => el.scrollWidth - el.clientWidth))
       .toBeLessThan(2);
diff --git a/test/e2e/agent-task-loop.spec.ts b/test/e2e/agent-task-loop.spec.ts
index f0611dcb2..650744085 100644
--- a/test/e2e/agent-task-loop.spec.ts
+++ b/test/e2e/agent-task-loop.spec.ts
@@ -91,7 +91,7 @@ for (const native of [false, true])
       await page.locator('.agent-panel-settings-toggle').click();
       await page.locator('.agent-panel-endpoint-connect').click();
       await expect(page.locator('.agent-panel-endpoint-status')).toContainText(native ? 'Configured' : 'Connected');
-      await page.locator('.agent-panel-settings-toggle').click();
+      await page.locator('.agent-chat-toggle').click();
       const readSlides = () =>
         page.evaluate(() => {
           const win = window.__ooFrames.readyEditor() as any;
@@ -187,7 +187,7 @@ for (const cancel of [false, true]) {
     await page.locator('.agent-panel-settings-toggle').click();
     await page.locator('.agent-panel-endpoint-connect').click();
     await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     const input = page.locator('.cui-input');
     await input.fill('Create a new slide and add a text box containing Budget 120.');
     await input.press('Enter');
diff --git a/test/e2e/agent-workbench-redesign.spec.ts b/test/e2e/agent-workbench-redesign.spec.ts
new file mode 100644
index 000000000..885f4650e
--- /dev/null
+++ b/test/e2e/agent-workbench-redesign.spec.ts
@@ -0,0 +1,69 @@
+import { expect, test } from './lib/l0';
+import { installConversationFixture } from './lib/conversation-fixture';
+
+test('expanded artifact workspace keeps the actual conversation and draft beside an editable result', async ({
+  page,
+}) => {
+  test.setTimeout(120_000);
+  await page.setViewportSize({ width: 1600, height: 1000 });
+  await page.addInitScript(installConversationFixture);
+  await page.goto('/editor?new=docx&locale=en');
+  await page.waitForFunction(() => Boolean(window.__ooFrames.readyEditor()));
+  await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
+  const panel = page.locator('.agent-runtime-panel');
+  const expand = panel.locator('.agent-panel-expand');
+  await expect(expand).toBeVisible();
+  const dock = (await panel.boundingBox())!.width;
+  await panel.locator('.cui-input').fill('Keep this draft while changing the layout.');
+  await expand.click();
+  await expect(expand).toHaveAttribute('aria-expanded', 'true');
+  await expect.poll(async () => (await panel.boundingBox())!.width).toBeGreaterThan(dock);
+  await expect(panel.locator('.cui-input')).toHaveValue('Keep this draft while changing the layout.');
+  await panel.locator('.agent-panel-settings-toggle').click();
+  await panel.locator('.agent-panel-endpoint-connect').click();
+  await panel.locator('.agent-chat-toggle').click();
+  await panel.locator('.cui-input').fill('Hello');
+  await panel.locator('.cui-send').click();
+  await expect.poll(() => page.evaluate(() => window.__conversationFixture.streams)).toBe(1);
+  for (let i = 0; i < 9; i++) await page.evaluate(() => window.__conversationFixture.advance());
+  await expect(panel.locator('.cui-stop')).toBeHidden();
+  await panel.locator('.cui-input').fill('A follow-up draft stays here.');
+  await panel.locator('.cui-msg-agent .cui-save').click();
+  await expect(panel.locator('[data-artifact-reader]')).toBeVisible();
+  await expect(panel.locator('.cui-root')).toBeVisible();
+  await expect(panel).toHaveAttribute('data-split', 'true');
+  const chat = (await panel.locator('.cui-root').boundingBox())!;
+  const artifact = (await panel.locator('.agent-artifacts').boundingBox())!;
+  expect(chat.width).toBeGreaterThanOrEqual(320);
+  expect(artifact.width).toBeGreaterThanOrEqual(480);
+  expect(chat.x + chat.width).toBeLessThanOrEqual(artifact.x + 0.5);
+  // Keep a detached reader and an active composer selection across width-only changes.
+  await page.setViewportSize({ width: 1600, height: 600 });
+  const log = panel.locator('.cui-messages');
+  await expect.poll(() => log.evaluate((el) => el.scrollHeight - el.clientHeight)).toBeGreaterThan(100);
+  await log.evaluate((el) => {
+    el.scrollTop = 60;
+    el.dispatchEvent(new Event('scroll'));
+  });
+  await expect.poll(() => log.evaluate((el) => el.scrollTop)).toBe(60);
+  await panel.locator('.cui-input').evaluate((el: HTMLTextAreaElement) => el.setSelectionRange(2, 10, 'backward'));
+  await panel.locator('.agent-artifacts [data-action=edit]').click();
+  const source = panel.locator('[data-artifact-source]');
+  const original = await source.inputValue();
+  await source.fill(original + '\n\nA retained draft edit.');
+  await expand.click();
+  await expect(panel).toHaveAttribute('data-split', 'false');
+  await expect(source).toBeVisible();
+  await expect(source).toHaveValue(original + '\n\nA retained draft edit.');
+  await expand.click();
+  await expect(panel.locator('.cui-input')).toHaveValue('A follow-up draft stays here.');
+  await expect.poll(() => log.evaluate((el) => el.scrollTop)).toBe(60);
+  expect(
+    await panel
+      .locator('.cui-input')
+      .evaluate((el: HTMLTextAreaElement) => [el.selectionStart, el.selectionEnd, el.selectionDirection]),
+  ).toEqual([2, 10, 'backward']);
+  await expect(source).toHaveValue(original + '\n\nA retained draft edit.');
+  await expect(panel.locator('.agent-artifact-modes [data-action=edit]')).toHaveAttribute('aria-pressed', 'true');
+  expect(await panel.locator('[data-action=back]').filter({ visible: true }).count()).toBe(1);
+});
diff --git a/test/e2e/agent-workspace-consistency.spec.ts b/test/e2e/agent-workspace-consistency.spec.ts
index 6dd24e91a..f277dbcea 100644
--- a/test/e2e/agent-workspace-consistency.spec.ts
+++ b/test/e2e/agent-workspace-consistency.spec.ts
@@ -20,15 +20,13 @@ test('workspace pages share compact token geometry and a keyboard return path',
   expect(
     (await section.boundingBox())!.y - ((await search.boundingBox())!.y + (await search.boundingBox())!.height),
   ).toBeGreaterThanOrEqual(24);
-  expect((await source.getByRole('button', { name: 'Back to conversation', exact: true }).boundingBox())!.height).toBe(
-    32,
-  );
+  await expect(source.locator('.agent-view-back')).toHaveCount(0);
   for (const width of [1280, 360, 320]) {
     await page.setViewportSize({ width, height: 800 });
     for (const scheme of ['light', 'dark'] as const) {
       await page.emulateMedia({ colorScheme: scheme });
       for (const [open, view] of [
-        ['.agent-sources-toggle', '.agent-sources-view'],
+        ['.agent-sources-nav', '.agent-sources-view'],
         ['.agent-panel-settings-toggle', '.agent-panel-settings'],
         ['.agent-history-toggle', '.agent-history-view'],
         ['.agent-workspace-toggle', '.agent-artifacts'],
@@ -37,8 +35,8 @@ test('workspace pages share compact token geometry and a keyboard return path',
         const current = page.locator(view);
         const header = current.locator('.agent-view-header');
         await expect(header).toBeVisible();
-        expect(await header.locator('h2').evaluate((el) => getComputedStyle(el).fontSize)).toBe('20px');
-        await expect(current.locator('.agent-view-back')).toHaveCount(1);
+        expect(await header.locator('h2').evaluate((el) => getComputedStyle(el).fontSize)).toBe('16px');
+        await expect(current.locator('.agent-view-back')).toHaveCount(0);
         if (view === '.agent-history-view') {
           expect((await current.locator('.agent-history-search-row').boundingBox())!.height).toBe(32);
         }
@@ -52,8 +50,8 @@ test('workspace pages share compact token geometry and a keyboard return path',
         for (const summary of await current.locator('details > summary:visible').all()) {
           expect((await summary.boundingBox())!.height).toBe(32);
         }
-        const back = header.getByRole('button', { name: 'Back to conversation', exact: true });
-        expect((await back.boundingBox())!.height).toBe(32);
+        const back = page.locator('.agent-chat-toggle');
+        expect((await back.boundingBox())!.height).toBe(width <= 480 ? 44 : 32);
         expect(await current.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThan(2);
         await page
           .locator('.agent-runtime-panel')
@@ -79,8 +77,9 @@ test('workspace pages share compact token geometry and a keyboard return path',
   await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
   await page.locator('.agent-sources-toggle').click();
   const translated = page.locator('.agent-sources-view');
-  await expect(translated.locator('.agent-view-back')).toHaveAttribute('aria-label', /.+/);
-  expect(await translated.locator('.agent-view-back').getAttribute('aria-label')).not.toBe('Back to conversation');
+  const chatNavigation = page.locator('.agent-chat-toggle');
+  await expect(chatNavigation).toHaveAttribute('aria-label', /.+/);
+  expect(await chatNavigation.getAttribute('aria-label')).not.toBe('Chat');
   expect(await translated.evaluate((el) => el.scrollWidth - el.clientWidth)).toBeLessThan(2);
   for (const button of await translated.locator('button:visible').all()) {
     expect((await button.boundingBox())!.height).toBeGreaterThanOrEqual(32);
@@ -100,7 +99,9 @@ test('artifact commands distinguish disabled, ordinary and explicit save states'
   await page.locator('.agent-workspace-toggle').click();
   await page.locator('.agent-artifacts [data-action=import]').click();
   const artifacts = page.locator('.agent-artifacts');
-  await expect(artifacts.getByRole('button', { name: 'Back to artifacts', exact: true })).toBeVisible();
+  await expect(
+    page.locator('.agent-panel-header').getByRole('button', { name: 'Back to artifacts', exact: true }),
+  ).toBeVisible();
   await artifacts.getByRole('textbox', { name: 'Title', exact: true }).fill('Table');
   await artifacts
     .locator('textarea')
@@ -112,6 +113,9 @@ test('artifact commands distinguish disabled, ordinary and explicit save states'
   const disabled = await save.evaluate((el) => getComputedStyle(el).backgroundColor);
   await save.hover();
   expect(await save.evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(disabled);
+  await expect(artifacts.locator('.agent-artifact-workbench')).toHaveAttribute('data-mode', 'preview');
+  await expect(artifacts.getByRole('textbox', { name: 'Title', exact: true })).not.toBeEditable();
+  await artifacts.locator('[data-action=edit]').click();
   await artifacts.getByRole('textbox', { name: 'Title', exact: true }).fill('Renamed table');
   await expect(save).toBeEnabled();
   expect(await save.evaluate((el) => getComputedStyle(el).backgroundColor)).not.toBe(disabled);
@@ -120,7 +124,7 @@ test('artifact commands distinguish disabled, ordinary and explicit save states'
   await ordinary.hover();
   expect(await ordinary.evaluate((el) => getComputedStyle(el).backgroundColor)).not.toBe(idle);
   expect((await ordinary.boundingBox())!.height).toBe(32);
-  const back = artifacts.getByRole('button', { name: 'Back to artifacts', exact: true });
+  const back = page.locator('.agent-panel-header').getByRole('button', { name: 'Back to artifacts', exact: true });
   await back.click();
   await expect(artifacts.locator('[data-action=discardChanges]')).toBeVisible();
   await artifacts.locator('[data-action=cancel]').click();
@@ -140,7 +144,7 @@ test.describe('coarse pointer workspace', () => {
     await page.frameLocator('iframe[name="frameEditor"]').locator('.agent-sidebar-entry').click();
     await page.locator('.agent-sources-toggle').click();
     const source = page.locator('.agent-sources-view');
-    const back = source.locator('.agent-view-back');
+    const back = page.locator('.agent-chat-toggle');
     expect((await back.boundingBox())!.height).toBeGreaterThanOrEqual(44);
     expect((await back.boundingBox())!.width).toBeGreaterThanOrEqual(44);
     expect(
diff --git a/test/e2e/agent-workspace.spec.ts b/test/e2e/agent-workspace.spec.ts
index fc3e15e4e..38dfc2e34 100644
--- a/test/e2e/agent-workspace.spec.ts
+++ b/test/e2e/agent-workspace.spec.ts
@@ -78,7 +78,7 @@ test('selected Word task stages without calls, skips classification, reviews and
   await page.locator('.cui-send').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await expect(page.locator('.cui-send')).toHaveAccessibleName('Send');
   await expect(page.locator('.cui-input')).toHaveValue(original);
   await page.locator('.cui-input').fill('');
@@ -149,7 +149,7 @@ test('stale selected task retains draft and requests reselection before any mode
   await page.locator('.agent-panel-settings-toggle').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await selectWord(page);
   await page.locator('[data-task="polish"]').click();
   const draft = await page.locator('.cui-input').inputValue();
@@ -218,7 +218,7 @@ test('native provider still routes staged polish through writing and review', as
   await page.locator('.agent-panel-settings-toggle').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Configured');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   await selectWord(page);
   await page.locator('[data-task="polish"]').click();
   await page.locator('.cui-send').click();
diff --git a/test/e2e/agent-write-tools.spec.ts b/test/e2e/agent-write-tools.spec.ts
index b15d5129b..8868eab5b 100644
--- a/test/e2e/agent-write-tools.spec.ts
+++ b/test/e2e/agent-write-tools.spec.ts
@@ -43,14 +43,7 @@ test.describe('agent document writes (real editor)', () => {
     await page.evaluate(() => window.__toggleAgentPanel?.());
     await page.locator('.agent-enable-switch').click();
     await expect(page.locator('.agent-runtime-panel')).not.toHaveClass(/agent-panel-hidden/);
-    const configuredService = await page.evaluate(
-      () => !!JSON.parse(localStorage.getItem('agent-writing-endpoint') ?? '{}').model,
-    );
-    await expect(page.locator('.agent-runtime-panel')).toHaveAttribute(
-      'data-view',
-      configuredService ? 'chat' : 'settings',
-    );
-    if (!configuredService) await page.locator('.agent-panel-settings-toggle').click();
+    // Configuration is an explicit composer action; enabling always starts in Chat.
     await expect(page.locator('.agent-runtime-panel')).toHaveAttribute('data-view', 'chat');
   };
 
@@ -229,7 +222,7 @@ test.describe('agent document writes (real editor)', () => {
     await page.locator('.agent-panel-settings-toggle').click();
     await page.locator('.agent-panel-endpoint-connect').click();
     await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     await send(page, 'Insert exactly this plain text at the cursor: Initial draft');
     const first = page.locator('.agent-plan-preview').first();
     await expect(first.locator('.agent-plan-primary-buttons r-button')).toHaveCount(2);
@@ -514,7 +507,7 @@ test.describe('agent document writes (real editor)', () => {
     await page.locator('.agent-panel-settings-toggle').click();
     await page.locator('.agent-panel-endpoint-connect').click();
     await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     const shapeTexts = () =>
       page.evaluate(() => {
         const win = window.__ooFrames.readyEditor() as unknown as {
@@ -583,7 +576,7 @@ test.describe('agent document writes (real editor)', () => {
     await page.locator('.agent-panel-settings-toggle').click();
     await page.locator('.agent-panel-endpoint-connect').click();
     await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     const before = await countSlides(page);
     await send(page, 'Please create another page in this presentation and let me review the change');
     const review = page.locator('.agent-plan-preview').last();
@@ -670,7 +663,7 @@ test.describe('agent document writes (real editor)', () => {
       await page.locator('.agent-panel-settings-toggle').click();
       await page.locator('.agent-panel-endpoint-connect').click();
       await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-      await page.locator('.agent-panel-settings-toggle').click();
+      await page.locator('.agent-chat-toggle').click();
       await send(page, 'Insert exactly this plain text at the cursor: Owned paste');
       const review = page.locator('.agent-plan-preview').last();
       await review.locator('.agent-plan-apply').click();
diff --git a/test/e2e/assistant-loading-locale.spec.ts b/test/e2e/assistant-loading-locale.spec.ts
index 56621033a..0b0f54882 100644
--- a/test/e2e/assistant-loading-locale.spec.ts
+++ b/test/e2e/assistant-loading-locale.spec.ts
@@ -123,7 +123,7 @@ for (const width of [360, 640]) {
     await page.locator('.agent-panel-load').press('Enter');
     await expect.poll(() => heldRequests).toBeGreaterThan(beforeRetry);
     await expect(page.locator('.agent-panel-load-stop')).toBeVisible();
-    await page.locator('.agent-panel-settings-toggle').click();
+    await page.locator('.agent-chat-toggle').click();
     const chat = await geometry();
     expect(chat).toMatchObject({
       aligned: true,
diff --git a/test/e2e/lib/artifact-view.ts b/test/e2e/lib/artifact-view.ts
new file mode 100644
index 000000000..8572bc1d8
--- /dev/null
+++ b/test/e2e/lib/artifact-view.ts
@@ -0,0 +1,9 @@
+import { expect, type Page } from '@playwright/test';
+
+/** Enter the explicit source editor through its visible product control. */
+export async function editArtifact(page: Page): Promise<void> {
+  const workbench = page.locator('.agent-artifact-workbench');
+  await expect(workbench).toBeVisible();
+  if ((await workbench.getAttribute('data-mode')) !== 'edit') await workbench.locator('[data-action=edit]').click();
+  await expect(workbench).toHaveAttribute('data-mode', 'edit');
+}
diff --git a/test/e2e/lib/conversation-fixture.ts b/test/e2e/lib/conversation-fixture.ts
new file mode 100644
index 000000000..204d69bef
--- /dev/null
+++ b/test/e2e/lib/conversation-fixture.ts
@@ -0,0 +1,95 @@
+interface ConversationFixture {
+  mode: string;
+  requests: unknown[];
+  completed: boolean;
+  autoFirst: boolean;
+  streams: number;
+  advance(): void;
+}
+declare global {
+  interface Window {
+    __conversationFixture: ConversationFixture;
+  }
+}
+/** Deterministic public provider events for UI acceptance; no model-quality claims. */
+export function installConversationFixture() {
+  localStorage.setItem('document-assistant-enabled', 'true');
+  localStorage.setItem(
+    'agent-writing-endpoint',
+    JSON.stringify({
+      version: 1,
+      kind: 'loopback',
+      baseUrl: 'http://localhost:11434',
+      model: 'craft-fixture',
+      preference: 'device-first',
+      localWritingConsent: false,
+    }),
+  );
+  const state = {
+    mode: 'reasoning',
+    requests: [] as unknown[],
+    completed: false,
+    autoFirst: true,
+    streams: 0,
+    advance: () => {},
+  };
+  window.__conversationFixture = state;
+  const nativeFetch = window.fetch.bind(window);
+  const encoder = new TextEncoder();
+  window.fetch = async (input, init) => {
+    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+    if (!url.includes('localhost:11434/api/')) return nativeFetch(input, init);
+    if (url.endsWith('/tags')) return Response.json({ models: [{ name: 'craft-fixture' }] });
+    const body = JSON.parse(String(init?.body ?? '{}'));
+    state.requests.push(body);
+    if (body.format?.properties?.task)
+      return Response.json({ done: true, message: { content: JSON.stringify({ task: 'chat', language: 'en' }) } });
+    if (state.mode === 'failure') return new Response('Fixture service failure', { status: 400 });
+    state.completed = false;
+    const steps: Array<{ thinking?: string; content?: string }> =
+      state.mode === 'artifact'
+        ? [
+            { content: '## Project update\n\nThe migration is on track.\n\n' },
+            { content: '- Confirm pilot owners before Friday.\n- Publish the release notes.\n' },
+          ]
+        : [
+            ...(state.mode === 'answer-only'
+              ? []
+              : [
+                  { thinking: 'I’m checking the supplied project notes. ' },
+                  { thinking: 'I’ll separate progress, risks and the next action.' },
+                ]),
+            { content: '## Project update\n\n' },
+            { content: 'The migration is **on track**. The next milestone is the pilot release.\n\n' },
+            { content: '| Area | Status |\n| --- | --- |\n| Build | Complete |\n| Pilot | In progress |\n\n' },
+            { content: '### Next action\n\n- Confirm the pilot owners.\n- Review the release notes.\n\n' },
+            { content: '```ts\nconst status = "ready";\n```\n' },
+          ];
+    return new Response(
+      new ReadableStream({
+        start(controller) {
+          state.streams++;
+          let index = 0;
+          state.advance = () => {
+            try {
+              if (index < steps.length) {
+                controller.enqueue(encoder.encode(JSON.stringify({ done: false, message: steps[index++] }) + '\n'));
+              } else {
+                controller.enqueue(
+                  encoder.encode(JSON.stringify({ done: true, done_reason: 'stop', message: { content: '' } }) + '\n'),
+                );
+                state.completed = true;
+                controller.close();
+                state.advance = () => {};
+              }
+            } catch {
+              state.advance = () => {};
+            }
+          };
+          if (state.autoFirst) state.advance();
+        },
+      }),
+      { headers: { 'Content-Type': 'application/x-ndjson' } },
+    );
+  };
+}
diff --git a/test/e2e/lib/layout-geometry.ts b/test/e2e/lib/layout-geometry.ts
index 756c03044..c3e2d3cac 100644
--- a/test/e2e/lib/layout-geometry.ts
+++ b/test/e2e/lib/layout-geometry.ts
@@ -32,9 +32,9 @@ export async function textGeometry(locator: Locator) {
 }
 
 /** The same acceptance guard is exercised against deliberate live CSS regressions. */
-export async function assertTitleRail(title: Locator) {
+export async function assertTitleRail(title: Locator, rail = 24) {
   const geometry = await textGeometry(title);
-  expect(geometry.textLeft).toBeCloseTo(16, 1);
+  expect(geometry.textLeft).toBeCloseTo(rail, 1);
   expect(geometry.width).toBeLessThanOrEqual(geometry.textWidth + 17);
   return geometry;
 }
@@ -45,15 +45,16 @@ export async function contentGeometry(view: Locator) {
     const origin = panel.getBoundingClientRect().left + Number.parseFloat(getComputedStyle(panel).borderLeftWidth);
     const left = (node: Element) => node.getBoundingClientRect().left - origin;
     const header = element.querySelector('.agent-view-header')!;
-    const back = header.querySelector<HTMLButtonElement>('.agent-view-back')!;
+    const back = header.querySelector<HTMLButtonElement>('.agent-view-back');
     const heading = header.querySelector('h2')!;
-    const style = getComputedStyle(element);
+    const content = element.querySelector(':scope > .agent-artifacts-body') ?? element;
+    const style = getComputedStyle(content);
     return {
-      contentLeft: left(element) + Number.parseFloat(style.paddingLeft),
+      contentLeft: left(content) + Number.parseFloat(style.paddingLeft),
       headingLeft: left(heading),
-      iconLeft: left(back.querySelector('svg')!),
-      backLeft: left(back),
-      backWidth: back.getBoundingClientRect().width,
+      iconLeft: back ? left(back.querySelector('svg')!) : undefined,
+      backLeft: back ? left(back) : undefined,
+      backWidth: back?.getBoundingClientRect().width,
       overflow: element.scrollWidth - element.clientWidth,
       headerBottom: header.getBoundingClientRect().bottom,
     };
diff --git a/test/e2e/pdf-agent-contract.spec.ts b/test/e2e/pdf-agent-contract.spec.ts
index 3cee958ef..fb4212bdb 100644
--- a/test/e2e/pdf-agent-contract.spec.ts
+++ b/test/e2e/pdf-agent-contract.spec.ts
@@ -121,7 +121,7 @@ test('native PDF preflight rejects body edits, preserves ordinary chat and permi
   await page.locator('.agent-panel-settings-toggle').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Configured');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   const input = page.locator('.cui-input');
   const annotations = () =>
     page.evaluate(() =>
@@ -382,7 +382,7 @@ test('PDF assistant reads scoped content and reviews a page note before a revers
   await page.locator('.agent-panel-settings-toggle').click();
   await page.locator('.agent-panel-endpoint-connect').click();
   await expect(page.locator('.agent-panel-endpoint-status')).toContainText('Connected');
-  await page.locator('.agent-panel-settings-toggle').click();
+  await page.locator('.agent-chat-toggle').click();
   const input = page.locator('.cui-input');
   await input.fill('What does the current page say?');
   await input.press('Enter');
diff --git a/test/unit/agent-artifact-presentation.test.ts b/test/unit/agent-artifact-presentation.test.ts
index 646540658..ea72c57de 100644
--- a/test/unit/agent-artifact-presentation.test.ts
+++ b/test/unit/agent-artifact-presentation.test.ts
@@ -1,3 +1,4 @@
+import * as chatUi from '@ranuts/chat-ui';
 import { expect, it, vi } from 'vitest';
 import { createArtifactPresentation } from '../../lib/agent-plugin/ui/artifact-presentation';
 const labels = {
@@ -40,6 +41,7 @@ it('updates canonical slide fields without replacing the active editor', () => {
   text.value = JSON.stringify(initial);
   const view = createArtifactPresentation(text, labels, initial);
   document.body.append(view.el);
+  view.setEditing(true);
   const field = view.el.querySelector('textarea')!;
   field.focus();
   field.value = 'Updated';
@@ -66,7 +68,7 @@ it('localizes an invalid preserved source safely and clamps pages after shrinkin
   text.value = JSON.stringify({ ...p, rows: [['only']] });
   text.dispatchEvent(new Event('input'));
   expect(view.el.textContent).toContain('1 / 1');
-  expect(view.el.querySelector('td textarea')).not.toBeNull();
+  expect(view.el.querySelector('td')?.textContent).toBe('only');
   text.value = 'broken source';
   text.dispatchEvent(new Event('input'));
   expect(() => view.setLabels({ ...labels, importHint: 'Repair this data' })).not.toThrow();
@@ -74,3 +76,109 @@ it('localizes an invalid preserved source safely and clamps pages after shrinkin
   expect(text.value).toBe('broken source');
   view.dispose();
 });
+
+it('renders structured previews without writable fields until Edit is explicit', () => {
+  const text = document.createElement('textarea');
+  const initial = { kind: 'table' as const, columns: ['Name'], rows: [['one']] };
+  text.value = JSON.stringify(initial);
+  const view = createArtifactPresentation(text, labels, initial);
+  expect(view.el.querySelector('td')?.textContent).toBe('one');
+  expect(view.el.querySelector('textarea')).toBeNull();
+  view.setEditing(true);
+  expect(view.el.querySelector('td textarea')).not.toBeNull();
+  view.setEditing(false);
+  expect(view.el.querySelector('textarea')).toBeNull();
+  expect(text.value).toBe(JSON.stringify(initial));
+  view.dispose();
+});
+
+it('disables exported toolbar controls during a pending save after relocation', () => {
+  const text = document.createElement('textarea');
+  text.value = 'draft';
+  const view = createArtifactPresentation(text, labels);
+  const toolbar = document.createElement('div');
+  toolbar.append(view.exportEl);
+  view.setDisabled(true);
+  expect(Array.from(toolbar.querySelectorAll('button')).every((button) => button.disabled)).toBe(true);
+  view.setDisabled(false);
+  expect(Array.from(toolbar.querySelectorAll('button')).every((button) => !button.disabled)).toBe(true);
+  view.dispose();
+});
+
+it('preserves the hidden reader while typing and renders the latest source only on Preview', () => {
+  const text = document.createElement('textarea');
+  text.value = '**Saved**';
+  const view = createArtifactPresentation(text, labels);
+  const reader = view.el.querySelector<HTMLElement>('[data-artifact-reader]')!;
+  const paragraph = reader.firstElementChild;
+  const render = vi.spyOn(chatUi, 'renderChatMarkdown');
+  view.setEditing(true);
+  expect(reader.hidden).toBe(true);
+  expect(reader.firstElementChild).toBe(paragraph);
+  text.value = '**First edit**';
+  text.dispatchEvent(new Event('input'));
+  text.value = '**Latest edit**';
+  text.dispatchEvent(new Event('input'));
+  expect(render).not.toHaveBeenCalled();
+  expect(reader.firstElementChild).toBe(paragraph);
+  expect(reader.textContent).toBe('Saved');
+  view.setEditing(false);
+  expect(render).toHaveBeenCalledTimes(1);
+  expect(reader.hidden).toBe(false);
+  expect(reader.querySelector('strong')?.textContent).toBe('Latest edit');
+  view.dispose();
+  render.mockRestore();
+});
+
+it('owns localized code copy and table styles without a ChatView and preserves the reader on locale changes', async () => {
+  const source = '```unknown\n  literal <img src=x>\n\tend\n```\n\n| Cost |\n| ---: |\n| 1200 |';
+  const text = document.createElement('textarea');
+  text.value = source;
+  const view = createArtifactPresentation(text, { ...labels, copy: 'Copy', table: 'Table' });
+  document.body.append(view.el);
+  expect(document.getElementById('cui-markdown-styles')).not.toBeNull();
+  const code = view.el.querySelector('code')!;
+  const copy = view.el.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+  copy.click();
+  await Promise.resolve();
+  expect(writeText).toHaveBeenCalledWith('  literal <img src=x>\n\tend');
+  expect(copy.textContent).toContain('Copied');
+  view.setLabels({ ...labels, copy: 'Copiar', copied: 'Copiado', table: 'Tabela' });
+  expect(view.el.querySelector('code')).toBe(code);
+  expect(view.el.querySelector('.cui-code-copy')).toBe(copy);
+  expect(copy.textContent).toContain('Copiado');
+  expect(view.el.querySelector('.cui-table')?.getAttribute('aria-label')).toBe('Tabela');
+  expect(view.el.querySelector('td')?.style.textAlign).toBe('right');
+  expect(view.el.querySelector('img')).toBeNull();
+  expect(text.value).toBe(source);
+  expect(view.payload()).toEqual({ kind: 'text', text: source });
+  view.dispose();
+});
+
+it('keeps a code copy pending while unrelated artifact save controls unlock', async () => {
+  const text = document.createElement('textarea');
+  text.value = '```unknown\ncode\n```';
+  const view = createArtifactPresentation(text, labels);
+  document.body.append(view.el);
+  let resolve!: () => void;
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: {
+      writeText: () =>
+        new Promise<void>((r) => {
+          resolve = r;
+        }),
+    },
+  });
+  const copy = view.el.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+  copy.click();
+  view.setDisabled(true);
+  view.setDisabled(false);
+  expect(copy.disabled).toBe(true);
+  resolve();
+  await Promise.resolve();
+  expect(copy.disabled).toBe(false);
+  view.dispose();
+});
diff --git a/test/unit/agent-artifact-workflow.test.ts b/test/unit/agent-artifact-workflow.test.ts
index 043eae994..0826c1b63 100644
--- a/test/unit/agent-artifact-workflow.test.ts
+++ b/test/unit/agent-artifact-workflow.test.ts
@@ -303,3 +303,80 @@ it('requires a valid same-kind whole structured AI result and tells the provider
   });
   expect(await runArtifactRevision(options)).toContain('two');
 });
+
+it('separates multiline Original and Proposed text exactly before acceptance', async () => {
+  const before = 'Confirm the pilot.\nAsk owners before Friday.\n<script>literal</script>';
+  const after =
+    'Confirm pilot owners before Friday.\nShare the rollout checklist.\n<img src="https://remote.test/track">';
+  const bound = captureArtifactDraft({ ...draft, text: before, start: 0, end: 0 });
+  let request!: import('../../lib/agent-plugin/ui/artifact-workflow').ArtifactRevisionRequest;
+  const accept = vi.fn().mockResolvedValue(true);
+  const flow = createArtifactWorkflow({
+    labels,
+    capture: () => bound,
+    isCurrent: () => true,
+    accept,
+    submit: (r) => {
+      request = r;
+    },
+    stop: vi.fn(),
+  });
+  document.body.append(flow.el);
+  flow.el.querySelector<HTMLButtonElement>('[data-action=refine]')!.click();
+  flow.el.querySelector('input')!.value = 'Clarify actions';
+  flow.el.querySelector('form')!.dispatchEvent(new Event('submit', { cancelable: true }));
+  request.complete(after);
+  expect(flow.el.querySelector('[data-artifact-diff-side=before] .agent-artifact-diff-text')?.textContent).toBe(before);
+  expect(flow.el.querySelector('[data-artifact-diff-side=after] .agent-artifact-diff-text')?.textContent).toBe(after);
+  expect(flow.el.querySelector('[data-artifact-diff-label=before]')?.textContent).toBe('Original');
+  expect(flow.el.querySelector('[data-artifact-diff-label=after]')?.textContent).toBe('Proposed');
+  expect(
+    flow.el.querySelectorAll(
+      '.agent-artifact-diff del,.agent-artifact-diff ins,.agent-artifact-diff img,.agent-artifact-diff script',
+    ),
+  ).toHaveLength(0);
+  expect(accept).not.toHaveBeenCalled();
+  flow.el.querySelector<HTMLButtonElement>('[data-action=accept]')!.click();
+  await vi.waitFor(() => expect(accept).toHaveBeenCalledWith(bound, after, expect.any(Function)));
+  flow.dispose();
+});
+
+it('bounds multiline excerpts and localizes expanded captions without losing content or focus', () => {
+  const before = 'Original\n' + 'x'.repeat(10000),
+    after = 'Proposed\n' + 'y'.repeat(9000);
+  const bound = captureArtifactDraft({ ...draft, text: before, start: 0, end: 0 });
+  let request!: import('../../lib/agent-plugin/ui/artifact-workflow').ArtifactRevisionRequest;
+  const flow = createArtifactWorkflow({
+    labels: { ...labels, partial: 'Partial preview', showFull: 'Show full' },
+    capture: () => bound,
+    isCurrent: () => true,
+    accept: vi.fn(),
+    submit: (r) => {
+      request = r;
+    },
+    stop: vi.fn(),
+  });
+  document.body.append(flow.el);
+  flow.el.querySelector<HTMLButtonElement>('[data-action=refine]')!.click();
+  const input = flow.el.querySelector('input')!;
+  input.value = 'Clarify';
+  flow.el.querySelector('form')!.dispatchEvent(new Event('submit', { cancelable: true }));
+  request.complete(after);
+  expect(flow.el.querySelector('.agent-artifact-diff')!.textContent!.length).toBeLessThan(8000);
+  const showFull = flow.el.querySelector<HTMLButtonElement>('[data-action=showFull]')!;
+  expect(showFull.hidden).toBe(false);
+  showFull.click();
+  const original = flow.el.querySelector('[data-artifact-diff-side=before] .agent-artifact-diff-text')!;
+  const proposed = flow.el.querySelector('[data-artifact-diff-side=after] .agent-artifact-diff-text')!;
+  expect(original?.textContent).toBe(before);
+  expect(proposed?.textContent).toBe(after);
+  input.focus();
+  flow.setLabels({ ...labels, before: '原文', after: '建议修改', partial: '部分预览', showFull: '显示全文' });
+  expect(flow.el.querySelector('[data-artifact-diff-label=before]')?.textContent).toBe('原文');
+  expect(flow.el.querySelector('[data-artifact-diff-label=after]')?.textContent).toBe('建议修改');
+  expect(flow.el.querySelector('[data-artifact-diff-side=before] .agent-artifact-diff-text')).toBe(original);
+  expect(flow.el.querySelector('[data-artifact-diff-side=after] .agent-artifact-diff-text')).toBe(proposed);
+  expect(showFull.hidden).toBe(true);
+  expect(document.activeElement).toBe(input);
+  flow.dispose();
+});
diff --git a/test/unit/agent-artifacts-view.test.ts b/test/unit/agent-artifacts-view.test.ts
index 65bea68dd..50cc74ff2 100644
--- a/test/unit/agent-artifacts-view.test.ts
+++ b/test/unit/agent-artifacts-view.test.ts
@@ -42,6 +42,7 @@ it('saves explicitly, preserves a conflicting edit, and applies selected text',
   document.body.append(view.el);
   await view.save('original');
   const a = (await store.list())[0];
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'my draft';
   text.dispatchEvent(new Event('input'));
@@ -84,9 +85,12 @@ it('keeps an unsaved editor when a new result or back navigation is requested',
   const view = createArtifactsView({ store, labels, onApply: vi.fn() });
   document.body.append(view.el);
   await view.save('first');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'edited';
   text.dispatchEvent(new Event('input'));
+  await view.refresh();
+  expect(view.el.querySelector('textarea')).toBe(text);
   const pendingSave = view.save('second');
   expect(await store.list()).toHaveLength(1);
   expect(text.value).toBe('edited');
@@ -104,6 +108,7 @@ it('reports storage failures without discarding edited text', async () => {
   const view = createArtifactsView({ store, labels, onApply: () => Promise.reject(new Error('private')) });
   document.body.append(view.el);
   await view.save('first');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'draft';
   text.dispatchEvent(new Event('input'));
@@ -132,6 +137,7 @@ it('disables editing during an in-flight save and focuses the new editor on sett
     });
     return original(...args);
   });
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'second';
   text.dispatchEvent(new Event('input'));
@@ -139,7 +145,7 @@ it('disables editing during an in-flight save and focuses the new editor on sett
   expect(text.disabled).toBe(true);
   release();
   await vi.waitFor(() => expect(view.el.querySelector('textarea')?.value).toBe('second'));
-  await vi.waitFor(() => expect(document.activeElement).toBe(view.el.querySelector('textarea')));
+  await vi.waitFor(() => expect(document.activeElement).toBe(view.el.querySelector('[data-artifact-reader]')));
   view.dispose();
 });
 it('keeps provenance human-readable after a language change', async () => {
@@ -168,6 +174,7 @@ it('discards both the edited title and text when returning to the latest version
   const select = view.el.querySelector('select')!;
   select.value = '1';
   select.dispatchEvent(new Event('change'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const title = view.el.querySelector('input')!;
   title.value = 'Unsaved title';
   title.dispatchEvent(new Event('input'));
@@ -193,6 +200,7 @@ it('offers a working save-as-new recovery when an artifact reaches twenty versio
   await view.refresh();
   (view.el.querySelector('[data-artifact]') as HTMLButtonElement).click();
   await vi.waitFor(() => expect(view.el.querySelector('textarea')).not.toBeNull());
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'New draft';
   text.dispatchEvent(new Event('input'));
@@ -217,6 +225,7 @@ it.each([
   const view = createArtifactsView({ store, labels, onApply: vi.fn() });
   document.body.append(view.el);
   await view.save('Saved body');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'Keep this draft';
   text.dispatchEvent(new Event('input'));
@@ -241,6 +250,7 @@ it('canceling a version switch preserves the previously selected version and edi
   const select = view.el.querySelector('select')!;
   select.value = '1';
   select.dispatchEvent(new Event('change'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const title = view.el.querySelector('input')!;
   title.value = 'Keep my title';
   title.dispatchEvent(new Event('input'));
@@ -258,6 +268,7 @@ it('reports cancelled save after keeping a dirty draft and settles pending confi
   const view = createArtifactsView({ store, labels, onApply: vi.fn() });
   document.body.append(view.el);
   expect(await view.save('first')).toBe('saved');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'unsaved';
   text.dispatchEvent(new Event('input'));
@@ -288,6 +299,7 @@ it('settles replaced confirmations and cancels navigation without adopting a lat
   const view = createArtifactsView({ store, labels, onApply: vi.fn() });
   document.body.append(view.el);
   await view.save('first');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'draft';
   text.dispatchEvent(new Event('input'));
@@ -298,27 +310,51 @@ it('settles replaced confirmations and cancels navigation without adopting a lat
   expect(await second).toBe('cancelled');
   expect(view.el.querySelector('[data-action=discardChanges]')).toBeNull();
   expect(text.value).toBe('draft');
-  // Return to the list explicitly before testing a delayed successful write.
-  view.el.querySelector<HTMLButtonElement>('[data-action=back]')!.click();
-  view.el.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!.click();
-  await tick();
+  let releaseList!: () => void;
+  const listGate = new Promise<void>((resolve) => {
+    releaseList = resolve;
+  });
+  const list = store.list.bind(store);
+  vi.spyOn(store, 'list').mockImplementationOnce(async () => {
+    await listGate;
+    return list();
+  });
   let release!: () => void;
   const gate = new Promise<void>((resolve) => {
     release = resolve;
   });
-  const create = store.create.bind(store);
-  vi.spyOn(store, 'create').mockImplementation(async (input) => {
-    const a = await create(input);
-    await gate;
-    return a;
-  });
-  const pending = view.save('late result');
-  view.cancelPending();
-  expect(await pending).toBe('cancelled');
-  release();
-  await tick();
-  expect(view.el.querySelector('textarea')).toBeNull();
-  view.dispose();
+  try {
+    view.el.querySelector<HTMLButtonElement>('[data-action=back]')!.click();
+    view.el.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!.click();
+    // A slow list read still owns the old draft until navigation settles.
+    expect(view.el.querySelector('textarea')).toBe(text);
+    expect(text.value).toBe('draft');
+    releaseList();
+    await vi.waitFor(() => expect(view.el.querySelector('[data-artifact]')).not.toBeNull());
+    const row = view.el.querySelector<HTMLButtonElement>('[data-artifact]')!;
+    expect(view.el.querySelector('textarea')).toBeNull();
+    const create = store.create.bind(store);
+    vi.spyOn(store, 'create').mockImplementation(async (input) => {
+      const a = await create(input);
+      await gate;
+      return a;
+    });
+    const pending = view.save('late result');
+    expect(row.disabled).toBe(true);
+    view.cancelPending();
+    expect(await pending).toBe('cancelled');
+    expect(view.el.querySelector('textarea')).toBeNull();
+    release();
+    // Re-enabling this same row proves the cancelled write's perform() has settled.
+    await vi.waitFor(() => expect(row.disabled).toBe(false));
+    expect(view.el.querySelector('[data-artifact]')).toBe(row);
+    expect(view.el.querySelector('textarea')).toBeNull();
+    expect(view.current).toBeUndefined();
+  } finally {
+    releaseList();
+    release();
+    view.dispose();
+  }
 });
 it('accepts a range proposal into an unchanged draft only, without saving automatically', async () => {
   let request: import('../../lib/agent-plugin/ui/artifact-workflow').ArtifactRevisionRequest | undefined;
@@ -351,6 +387,7 @@ it('accepts a range proposal into an unchanged draft only, without saving automa
   });
   document.body.append(view.el);
   await view.save('前😀selected后');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.setSelectionRange(3, 11);
   (view.el.querySelector('[data-action=refine]') as HTMLButtonElement).click();
@@ -397,6 +434,7 @@ it('invalidates late proposals after manual edits and offers direct keep-as-new
   (view.el.querySelector('[data-action=refine]') as HTMLButtonElement).click();
   (view.el.querySelector('form input') as HTMLInputElement).value = 'Revise';
   view.el.querySelector('form')!.dispatchEvent(new Event('submit', { cancelable: true }));
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'My new edit';
   text.dispatchEvent(new Event('input'));
@@ -518,6 +556,7 @@ it.each(['draft', 'context'] as const)(
     held = true;
     (view.el.querySelector('[data-action=accept]') as HTMLButtonElement).click();
     await vi.waitFor(() => expect(finish).toBeDefined());
+    view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
     const text = view.el.querySelector('textarea')!;
     if (change === 'draft') {
       text.value = 'My newer draft';
@@ -571,6 +610,7 @@ it('restores selected instructions without old offsets and requires an explicit
     start: 0,
     end: 8,
   });
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'My newer draft';
   text.dispatchEvent(new Event('input'));
@@ -650,8 +690,10 @@ it('imports a validated structured result, paginates preview, preserves JSON edi
   document.body.append(view.el);
   await view.refresh();
   (view.el.querySelector('[data-action=import]') as HTMLButtonElement).click();
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const title = view.el.querySelector('input')!;
   title.value = 'Table';
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = JSON.stringify({
     schemaVersion: 1,
@@ -663,12 +705,13 @@ it('imports a validated structured result, paginates preview, preserves JSON edi
   expect(view.el.querySelectorAll('table tr')).toHaveLength(11);
   expect(
     view.el
-      .querySelector('.agent-artifact-actions')!
-      .compareDocumentPosition(view.el.querySelector('.agent-artifact-presentation')!) &
+      .querySelector('.agent-artifact-presentation')!
+      .compareDocumentPosition(view.el.querySelector('.agent-artifact-footer .agent-artifact-actions')!) &
       Node.DOCUMENT_POSITION_FOLLOWING,
   ).toBeTruthy();
   expect((view.el.querySelector('[data-action=apply]') as HTMLButtonElement).hidden).toBe(true);
   expect(apply).not.toHaveBeenCalled();
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
   const editor = view.el.querySelector<HTMLTextAreaElement>('textarea[data-artifact-source]')!;
   editor.value = 'invalid JSON';
   editor.dispatchEvent(new Event('input'));
@@ -687,6 +730,7 @@ it('keeps a structured cell focused while typing, persists edits and can restore
   await view.refresh();
   (view.el.querySelector('[data-artifact]') as HTMLButtonElement).click();
   await tick();
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
   const cell = view.el.querySelector<HTMLTextAreaElement>('td textarea')!;
   cell.focus();
   cell.value = 'two';
@@ -694,13 +738,15 @@ it('keeps a structured cell focused while typing, persists edits and can restore
   cell.dispatchEvent(new Event('input'));
   expect(document.activeElement).toBe(cell);
   expect(cell.selectionStart).toBe(2);
-  expect(view.el.querySelector<HTMLDetailsElement>('.agent-artifact-editor > details')?.open).toBe(false);
+  expect(view.el.querySelector<HTMLDetailsElement>('.agent-artifact-source')?.open).toBe(false);
   (view.el.querySelector('[data-action=saveVersion]') as HTMLButtonElement).click();
   await tick();
   expect((await store.get(a.id))?.versions[1].payload).toEqual({ ...payload, rows: [['two']] });
   const select = view.el.querySelector('select')!;
   select.value = '1';
   select.dispatchEvent(new Event('change'));
+  expect(view.el.querySelector('td')?.textContent).toBe('one');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
   expect(view.el.querySelector<HTMLTextAreaElement>('td textarea')?.value).toBe('one');
   view.dispose();
 });
@@ -713,6 +759,7 @@ it('retains imported text payload envelopes when editing a version', async () =>
   await view.refresh();
   (view.el.querySelector('[data-artifact]') as HTMLButtonElement).click();
   await tick();
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')?.click();
   const text = view.el.querySelector('textarea')!;
   text.value = 'two';
   text.dispatchEvent(new Event('input'));
@@ -740,13 +787,12 @@ it('keeps destination-aware header Back in the busy registry and guards imported
   document.body.append(view.el);
   await view.refresh();
   const back = () => view.el.querySelector<HTMLButtonElement>('.agent-view-header [data-action=back]')!;
-  expect(back().getAttribute('aria-label')).toBe('Back to conversation');
-  expect(view.el.querySelectorAll('[data-action=back]')).toHaveLength(1);
+  expect(back()).toBeNull();
+  expect(view.el.querySelectorAll('[data-action=back]')).toHaveLength(0);
   let resolve!: (value: typeof a) => void;
   vi.spyOn(store, 'get').mockImplementationOnce(() => new Promise((r) => (resolve = r)));
   view.el.querySelector<HTMLButtonElement>('[data-artifact]')!.click();
-  expect(back().disabled).toBe(true);
-  back().click();
+  expect(view.el.querySelector<HTMLButtonElement>('[data-artifact]')!.disabled).toBe(true);
   expect(close).not.toHaveBeenCalled();
   resolve(a);
   await tick();
@@ -770,6 +816,296 @@ it('keeps destination-aware header Back in the busy registry and guards imported
   view.el.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!.click();
   await tick();
   expect(view.el.querySelector('textarea')).toBeNull();
-  expect(view.el.querySelectorAll('[data-action=back]')).toHaveLength(1);
+  expect(view.el.querySelectorAll('[data-action=back]')).toHaveLength(0);
+  view.dispose();
+});
+
+it('hosts the owned return with busy protection, Escape, dirty focus restoration and cleanup', async () => {
+  const store = createArtifactStore();
+  const host = document.createElement('nav');
+  let mounted: HTMLButtonElement | undefined;
+  let finishApply!: () => void;
+  const view = createArtifactsView({
+    store,
+    labels: { ...labels, import: 'Import', backToList: 'Back to artifacts' },
+    onApply: () => new Promise<void>((resolve) => (finishApply = resolve)),
+    onBackChange: (back) => {
+      mounted?.remove();
+      mounted = back;
+      if (back) host.append(back);
+    },
+  });
+  document.body.append(host, view.el);
+  await view.save('Original');
+  const back = mounted!;
+  expect(back.parentElement).toBe(host);
+  expect(view.el.querySelector('[data-action=back]')).toBeNull();
+  expect(view.el.querySelector<HTMLElement>('.agent-view-header')!.hidden).toBe(true);
+  view.focus();
+  expect(document.activeElement).toBe(back);
+  const list = vi.spyOn(store, 'list');
+  view.el.querySelector<HTMLButtonElement>('[data-action=apply]')!.click();
+  expect(back.disabled).toBe(true);
+  expect(view.requestBack()).toBe(true);
+  expect(list).not.toHaveBeenCalled();
+  finishApply();
+  await tick();
+  expect(back.disabled).toBe(false);
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+  const text = view.el.querySelector('textarea')!;
+  text.value = 'Keep this draft';
+  text.dispatchEvent(new Event('input'));
+  back.focus();
+  expect(view.requestBack()).toBe(true);
+  const cancel = view.el.querySelector<HTMLButtonElement>('[data-action=cancel]')!;
+  expect(document.activeElement).toBe(cancel);
+  expect(view.requestBack()).toBe(true);
+  expect(view.el.querySelector('[data-action=cancel]')).toBe(cancel);
+  cancel.click();
+  expect(document.activeElement).toBe(back);
+  expect(text.value).toBe('Keep this draft');
+  back.click();
+  view.el.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!.click();
+  await tick();
+  expect(host.children).toHaveLength(0);
+  expect(view.requestBack()).toBe(false);
+  expect(document.activeElement).toBe(view.el.querySelector('h2'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=import]')!.click();
+  // Import has its own return even though current is not a reliable depth marker.
+  expect(mounted).toBeDefined();
+  view.dispose();
+  expect(host.children).toHaveLength(0);
+});
+
+it('preserves a busy import when workspace navigation requests a list refresh', async () => {
+  const store = createArtifactStore();
+  const view = createArtifactsView({ store, labels: { ...labels, import: 'Import' }, onApply: vi.fn() });
+  document.body.append(view.el);
+  await view.refresh();
+  view.el.querySelector<HTMLButtonElement>('[data-action=import]')!.click();
+  const input = view.el.querySelector('textarea')!;
+  view.el.querySelector('input')!.value = 'Imported';
+  input.value = JSON.stringify({ schemaVersion: 1, payload: { kind: 'text', text: 'imported' } });
+  let release!: () => void;
+  const create = store.create.bind(store);
+  vi.spyOn(store, 'create').mockImplementation(async (...args) => {
+    await new Promise<void>((resolve) => (release = resolve));
+    return create(...args);
+  });
+  view.el.querySelector<HTMLButtonElement>('[data-action=saveNew]')!.click();
+  expect(input.disabled).toBe(true);
+  view.cancelPending();
+  await view.refresh();
+  expect(view.el.querySelector('textarea')).toBe(input);
+  expect(input.disabled).toBe(true);
+  release();
+  await vi.waitFor(() => expect(view.el.querySelector('textarea')?.value).toBe('imported'));
+  view.dispose();
+});
+
+it('focuses the safe deletion choice and returns to Delete when cancelled', async () => {
+  const store = createArtifactStore();
+  const view = createArtifactsView({ store, labels, onApply: vi.fn() });
+  document.body.append(view.el);
+  await view.save('Keep this draft');
+  const remove = view.el.querySelector<HTMLButtonElement>('[data-action=delete]')!;
+  remove.focus();
+  remove.click();
+  const cancel = view.el.querySelector<HTMLButtonElement>('[data-action=cancel]')!;
+  expect(view.el.querySelector('.agent-artifact-delete-prompt')?.textContent).toContain('confirmDelete');
+  expect(view.el.querySelector('[data-action=confirmDelete]')?.textContent).toBe('delete');
+  expect(view.el.querySelector('[role=status]')?.textContent).toBe('saved');
+  expect(document.activeElement).toBe(cancel);
+  cancel.click();
+  expect(document.activeElement).toBe(remove);
+  expect(view.el.querySelector('textarea')?.value).toBe('Keep this draft');
+  expect(await store.list()).toHaveLength(1);
+  view.dispose();
+});
+
+it('opens saved text as safe readable preview and keeps the canonical draft across modes', async () => {
+  const store = createArtifactStore();
+  const view = createArtifactsView({ store, labels, onApply: vi.fn() });
+  document.body.append(view.el);
+  await view.save('# Heading\n\n**Readable** <img src="https://remote.test/track">');
+  const text = view.el.querySelector<HTMLTextAreaElement>('[data-artifact-source]')!;
+  const title = view.el.querySelector<HTMLInputElement>('input')!;
+  const reader = view.el.querySelector<HTMLElement>('[data-artifact-reader]')!;
+  expect(reader?.querySelector('h2')?.textContent).toBe('Heading');
+  expect(reader?.querySelector('img')).toBeNull();
+  expect(reader?.textContent).toContain('<img');
+  expect(text.hidden).toBe(true);
+  expect(title.readOnly).toBe(true);
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+  expect(text.hidden).toBe(false);
+  expect(title.readOnly).toBe(false);
+  text.value = '**Unsaved**';
+  text.dispatchEvent(new Event('input'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=preview]')!.click();
+  expect(text.hidden).toBe(true);
+  expect(reader.querySelector('strong')?.textContent).toBe('Unsaved');
+  expect((await store.get(view.current!.id))!.versions).toHaveLength(1);
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+  expect(text.value).toBe('**Unsaved**');
+  view.el.querySelector<HTMLButtonElement>('[data-action=cancelEditing]')!.click();
+  expect(text.value).toBe('**Unsaved**');
+  view.el.querySelector<HTMLButtonElement>('[data-action=cancel]')!.click();
+  expect(text.hidden).toBe(false);
+  view.el.querySelector<HTMLButtonElement>('[data-action=cancelEditing]')!.click();
+  view.el.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!.click();
+  expect(text.value).toContain('# Heading');
+  expect(text.hidden).toBe(true);
+  view.dispose();
+});
+
+it('refines the whole preview despite stale hidden selection and enters Edit on acceptance', async () => {
+  let request!: import('../../lib/agent-plugin/ui/artifact-workflow').ArtifactRevisionRequest;
+  const store = createArtifactStore();
+  const view = createArtifactsView({
+    store,
+    labels,
+    onApply: vi.fn(),
+    refinement: {
+      labels: {
+        refine: 'Refine',
+        instruction: 'Instruction',
+        submit: 'Suggest',
+        stop: 'Stop',
+        accept: 'Accept',
+        reject: 'Reject',
+        waiting: 'Waiting',
+        ready: 'Ready',
+        stale: 'Stale',
+        failed: 'Failed',
+        stopped: 'Stopped',
+        accepted: 'Accepted',
+      },
+      submit: (r) => {
+        request = r;
+      },
+      stop: vi.fn(),
+    },
+  });
+  document.body.append(view.el);
+  await view.save('whole artifact');
+  const text = view.el.querySelector<HTMLTextAreaElement>('[data-artifact-source]')!;
+  text.setSelectionRange(0, 5);
+  view.el.querySelector<HTMLButtonElement>('[data-action=refine]')!.click();
+  view.el.querySelector<HTMLInputElement>('form input')!.value = 'Revise';
+  view.el.querySelector('form')!.dispatchEvent(new Event('submit', { cancelable: true }));
+  expect(request.draft.scope).toBe('artifact');
+  expect(request.draft.selectedText).toBe('whole artifact');
+  request.complete('accepted draft');
+  view.el.querySelector<HTMLButtonElement>('[data-action=accept]')!.click();
+  await vi.waitFor(() => expect(text.value).toBe('accepted draft'));
+  expect(view.el.querySelector('.agent-artifact-status')?.textContent).toBe('');
+  expect(view.el.querySelector<HTMLElement>('.agent-artifact-unsaved')!.hidden).toBe(false);
+  expect(view.el.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.disabled).toBe(false);
+  expect(text.hidden).toBe(false);
+  expect(document.activeElement).toBe(text);
+  expect((await store.get(view.current!.id))!.versions).toHaveLength(1);
+  view.dispose();
+});
+
+it('keeps one export toolbar bound to the selected version', async () => {
+  const store = createArtifactStore();
+  const a = await store.create({ title: 'Versions', text: 'one', provenance: {} });
+  await store.update(a.id, 1, { title: 'Versions', text: 'two' });
+  const view = createArtifactsView({ store, labels, onApply: vi.fn() });
+  document.body.append(view.el);
+  await view.refresh();
+  view.el.querySelector<HTMLButtonElement>('[data-artifact]')!.click();
+  await tick();
+  const version = view.el.querySelector('select')!;
+  version.value = '1';
+  version.dispatchEvent(new Event('change'));
+  expect(view.el.querySelectorAll('.agent-artifact-export')).toHaveLength(1);
+  view.dispose();
+});
+
+it('localizes the mode group along with its Preview and Edit controls', async () => {
+  const view = createArtifactsView({ store: createArtifactStore(), labels, onApply: vi.fn() });
+  await view.save('Saved');
+  view.setLabels({ ...labels, preview: '预览', edit: '编辑' });
+  expect(view.el.querySelector('.agent-artifact-modes')?.getAttribute('aria-label')).toBe('预览');
+  expect(view.el.querySelector('[data-action=preview]')?.textContent).toBe('预览');
+  expect(view.el.querySelector('[data-action=edit]')?.textContent).toBe('编辑');
+  view.dispose();
+});
+
+it.each(['input', 'textarea'] as const)(
+  'clears obsolete save feedback when %s changes or an older version is selected',
+  async (selector) => {
+    const store = createArtifactStore();
+    const view = createArtifactsView({ store, labels, onApply: vi.fn() });
+    await view.save('Saved body');
+    const status = view.el.querySelector<HTMLElement>('[role=status]')!;
+    expect(status.textContent).toBe('saved');
+    view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+    const field = view.el.querySelector<HTMLInputElement | HTMLTextAreaElement>(selector)!;
+    field.value = 'Updated draft';
+    field.dispatchEvent(new Event('input'));
+    expect(status.textContent).toBe('');
+    view.el.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.click();
+    await vi.waitFor(() => expect(status.textContent).toBe('saved'));
+    const version = view.el.querySelector<HTMLSelectElement>('select')!;
+    version.value = '1';
+    version.dispatchEvent(new Event('change'));
+    expect(status.textContent).toBe('');
+    expect(view.el.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!.disabled).toBe(false);
+    expect((await store.get(view.current!.id))!.versions).toHaveLength(2);
+    view.dispose();
+  },
+);
+
+it('keeps discard prompts usable while typing for Cancel editing and pending result saves', async () => {
+  const store = createArtifactStore();
+  const view = createArtifactsView({ store, labels, onApply: vi.fn() });
+  await view.save('Saved body');
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+  const text = view.el.querySelector<HTMLTextAreaElement>('[data-artifact-source]')!;
+  text.value = 'Unsaved draft';
+  text.dispatchEvent(new Event('input'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=cancelEditing]')!.click();
+  const status = view.el.querySelector<HTMLElement>('[role=status]')!;
+  const discard = status.querySelector<HTMLButtonElement>('[data-action=discardChanges]')!;
+  text.value = 'Continue typing';
+  text.dispatchEvent(new Event('input'));
+  expect(status.querySelector('[data-action=discardChanges]')).toBe(discard);
+  expect(status.textContent).toContain('discardChanges');
+  status.querySelector<HTMLButtonElement>('[data-action=cancel]')!.click();
+  expect(text.value).toBe('Continue typing');
+  expect(text.hidden).toBe(false);
+  const pending = view.save('New result');
+  const pendingDiscard = status.querySelector('[data-action=discardChanges]');
+  text.value = 'Keep typing in pending confirmation';
+  text.dispatchEvent(new Event('input'));
+  expect(status.querySelector('[data-action=discardChanges]')).toBe(pendingDiscard);
+  status.querySelector<HTMLButtonElement>('[data-action=cancel]')!.click();
+  expect(await pending).toBe('cancelled');
+  expect(text.value).toBe('Keep typing in pending confirmation');
+  expect(await store.list()).toHaveLength(1);
+  view.dispose();
+});
+
+it('places explicit commit and transfer commands after the editable canvas in keyboard reading order', async () => {
+  const source = '# A user-authored title\n\nBody with\tspacing.\n';
+  const view = createArtifactsView({ store: createArtifactStore(), labels, onApply: vi.fn() });
+  document.body.append(view.el);
+  await view.save(source);
+  view.el.querySelector<HTMLButtonElement>('[data-action=edit]')!.click();
+  const text = view.el.querySelector<HTMLTextAreaElement>('[data-artifact-source]')!;
+  const save = view.el.querySelector<HTMLButtonElement>('[data-action=saveVersion]')!;
+  const review = view.el.querySelector<HTMLButtonElement>('[data-action=apply]')!;
+  const exports = view.el.querySelector('.agent-artifact-export')!;
+  expect(text.compareDocumentPosition(save) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(text.compareDocumentPosition(review) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(text.compareDocumentPosition(exports) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  text.value += '\nAn unsaved paragraph.';
+  text.dispatchEvent(new Event('input'));
+  view.el.querySelector<HTMLButtonElement>('[data-action=preview]')!.click();
+  expect(view.el.querySelector('[data-action=saveVersion]')).toBe(save);
+  expect(view.el.querySelector('.agent-artifact-export')).toBe(exports);
+  expect(text.value).toBe(source + '\nAn unsaved paragraph.');
   view.dispose();
 });
diff --git a/test/unit/agent-panel-layout.test.ts b/test/unit/agent-panel-layout.test.ts
new file mode 100644
index 000000000..5bcb4a0f0
--- /dev/null
+++ b/test/unit/agent-panel-layout.test.ts
@@ -0,0 +1,70 @@
+import { afterEach, expect, it, vi } from 'vitest';
+import { createPanelWorkspace } from '../../lib/agent-plugin/ui/panel-workspace';
+
+afterEach(() => {
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+});
+it('changes split presentation without re-entering routes or discarding mounted artifact work', () => {
+  const panel = document.createElement('section');
+  let width = 1040;
+  vi.spyOn(panel, 'getBoundingClientRect').mockImplementation(() => new DOMRect(0, 0, width, 900));
+  const chatEl = document.createElement('div');
+  const input = document.createElement('textarea');
+  chatEl.append(input);
+  const beforeChange = vi.fn();
+  const changed = vi.fn();
+  const capture = vi.fn();
+  const surface = () => {
+    const el = document.createElement('section');
+    const trigger = document.createElement('button');
+    const target = document.createElement('button');
+    el.append(target);
+    panel.append(el, trigger);
+    return { el, trigger, focus: vi.fn(() => target.focus()) };
+  };
+  const views = { settings: surface(), history: surface(), sources: surface(), artifacts: surface() };
+  const source = document.createElement('textarea');
+  source.value = 'Retained artifact draft';
+  views.artifacts.el.append(source);
+  const row = document.createElement('div');
+  const modelRow = document.createElement('div');
+  const modelActions = document.createElement('div');
+  modelRow.append(modelActions);
+  views.settings.el.append(modelRow);
+  panel.append(row, chatEl);
+  document.body.append(panel);
+  const workspace = createPanelWorkspace({
+    panel,
+    chat: { el: chatEl, focus: () => input.focus() },
+    navigation: { capture, restore: () => false },
+    conversation: () => 'c1',
+    isOpen: () => true,
+    runtime: { row, settings: views.settings.el, modelRow, modelActions },
+    views,
+    beforeChange,
+    changed,
+  });
+  workspace.show('artifacts');
+  expect(chatEl.hidden).toBe(false);
+  expect(panel.dataset.split).toBe('true');
+  source.setSelectionRange(2, 8);
+  input.focus();
+  width = 480;
+  panel.dispatchEvent(new Event('agentlayoutchange'));
+  expect(chatEl.hidden).toBe(true);
+  expect(document.activeElement).not.toBe(input);
+  width = 1040;
+  panel.dispatchEvent(new Event('agentlayoutchange'));
+  expect(chatEl.hidden).toBe(false);
+  expect(source.value).toBe('Retained artifact draft');
+  expect([source.selectionStart, source.selectionEnd]).toEqual([2, 8]);
+  expect(beforeChange).toHaveBeenCalledTimes(1);
+  expect(changed).toHaveBeenCalledTimes(1);
+  expect(views.artifacts.trigger.getAttribute('aria-current')).toBe('page');
+  const captured = capture.mock.calls.length;
+  // A header click can move focus out of Chat before route navigation starts.
+  views.history.trigger.focus();
+  workspace.show('history');
+  expect(capture).toHaveBeenCalledTimes(captured + 1);
+});
diff --git a/test/unit/agent-panel-loading.test.ts b/test/unit/agent-panel-loading.test.ts
index 91eb94251..db0d4f7fe 100644
--- a/test/unit/agent-panel-loading.test.ts
+++ b/test/unit/agent-panel-loading.test.ts
@@ -491,9 +491,11 @@ it('opening the default model leaves preparation to the user', async () => {
   panel.querySelector<HTMLElement>('.agent-panel-load')!.click();
   await vi.waitFor(() => expect(state.preload).toHaveBeenCalledOnce());
 });
-it('opens first-use assistant settings without preparing a model', async () => {
+it('starts in chat and opens first-use settings only on request without preparing a model', async () => {
   const panel = createAgentPanel({ externalEntry: true });
-  await vi.waitFor(() => expect(panel.dataset.view).toBe('settings'));
+  expect(panel.dataset.view).toBe('chat');
+  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
+  expect(panel.dataset.view).toBe('settings');
   expect(state.preload).not.toHaveBeenCalled();
 });
 it('opens chat for a remembered model even when its runtime is not loaded', () => {
@@ -529,7 +531,9 @@ it('opens chat for a configured service without connecting on its own', () => {
 it('keeps CPU-only setup free of WebGPU cache inspection until inventory is opened', async () => {
   localStorage.setItem('agent-panel-provider', 'wllama');
   const panel = createAgentPanel({ externalEntry: true });
-  await vi.waitFor(() => expect(panel.dataset.view).toBe('settings'));
+  expect(panel.dataset.view).toBe('chat');
+  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
+  expect(panel.dataset.view).toBe('settings');
   expect(state.cacheChecks).not.toHaveBeenCalled();
   const inventory = panel.querySelector<HTMLDetailsElement>('.agent-model-cache')!;
   inventory.open = true;
@@ -581,6 +585,8 @@ it('does not inspect browser runtime caches for service setup until the local so
   );
   const panel = createAgentPanel({ externalEntry: true });
   await new Promise((resolve) => setTimeout(resolve, 0));
+  expect(panel.dataset.view).toBe('chat');
+  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
   expect(panel.dataset.view).toBe('settings');
   expect(state.cacheChecks).not.toHaveBeenCalled();
   expect(state.preload).not.toHaveBeenCalled();
@@ -596,20 +602,53 @@ it('keeps setup reachable for an incomplete cloud service', async () => {
     JSON.stringify({ version: 1, kind: 'openai-compatible', baseUrl: 'https://missing-key.example', model: 'model' }),
   );
   const panel = createAgentPanel({ externalEntry: true });
-  await vi.waitFor(() => expect(panel.dataset.view).toBe('settings'));
+  expect(panel.dataset.view).toBe('chat');
+  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
+  expect(panel.dataset.view).toBe('settings');
 });
 it('keeps setup reachable when the remembered preset is no longer supported', async () => {
   localStorage.setItem('agent-local-preset', 'Qwen3-1.7B-q4f16_1-MLC');
   const panel = createAgentPanel({ externalEntry: true });
-  await vi.waitFor(() => expect(panel.dataset.view).toBe('settings'));
+  expect(panel.dataset.view).toBe('chat');
+  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
+  expect(panel.dataset.view).toBe('settings');
 });
 it('does not override an explicit view change while checking cached configuration', async () => {
   const panel = createAgentPanel({ externalEntry: true });
   panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
-  panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
+  panel.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
   await new Promise((resolve) => setTimeout(resolve, 0));
   expect(panel.dataset.view).toBe('chat');
 });
+it.each(['.agent-chat-toggle', '.agent-panel-title', '.agent-panel-clear'])(
+  'honors explicit %s navigation when a pending initial cache check finds no model',
+  async (selector) => {
+    const webllm = await import('@ranuts/agent-core/llm/webllm');
+    let finishCheck!: (cached: boolean) => void;
+    const checking = new Promise<boolean>((resolve) => (finishCheck = resolve));
+    const cache = vi.spyOn(webllm, 'isModelCached').mockReturnValue(checking);
+    try {
+      const panel = createAgentPanel({ externalEntry: true });
+      expect(cache).toHaveBeenCalled();
+      expect(panel.dataset.view).toBe('chat');
+      const input = panel.querySelector<HTMLTextAreaElement>('.cui-input')!;
+      const focus = vi.spyOn(input, 'focus');
+      const previousConversation = activeSession();
+      panel.querySelector<HTMLButtonElement>(selector)!.click();
+      if (selector === '.agent-panel-clear') expect(activeSession()).not.toBe(previousConversation);
+      else {
+        expect(activeSession()).toBe(previousConversation);
+        expect(focus).not.toHaveBeenCalled();
+      }
+      finishCheck(false);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(panel.dataset.view).toBe('chat');
+      expect(state.preload).not.toHaveBeenCalled();
+    } finally {
+      cache.mockRestore();
+    }
+  },
+);
 it.each(['starting', 'listening'])(
   'does not cancel %s dictation when the initial cache check finishes',
   async (phase) => {
@@ -814,7 +853,7 @@ it('keeps loading feedback beside the chosen model across settings and chat', as
   expect(panel.querySelector('.agent-device-section .agent-runtime-row')).not.toBeNull();
   expect(load.hidden).toBe(true);
   expect(panel.querySelector('.agent-model-cache .agent-runtime-row')).toBeNull();
-  toggle.click();
+  panel.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
   expect(stop.closest('.agent-panel-settings')).toBeNull();
   expect(stop.hidden).toBe(false);
   stop.click();
@@ -2987,8 +3026,10 @@ it.each(['', 'Hello there'])(
     expect(state.conversations!.history().load()).toEqual([]);
     expect(state.writing).not.toHaveBeenCalled();
     const setup = panel.querySelector<HTMLButtonElement>('.agent-prepare-action')!;
-    expect(setup.hidden).toBe(Boolean(draft));
-    if (!draft) setup.click();
+    expect(setup.hidden).toBe(true);
+    panel.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
+    expect(input.value).toBe(draft);
+    panel.querySelector<HTMLButtonElement>('.agent-model-shortcut')!.click();
     expect(panel.getAttribute('data-view')).toBe('settings');
   },
 );
@@ -3338,9 +3379,12 @@ it('opens the latest meaningful chat from the assistant title without loading op
   expect(title).not.toBeNull();
   expect(title!.type).toBe('button');
   expect(title!.textContent).toBe(t('agentTitle'));
+  const displayed = store.activeId;
   panel.querySelector<HTMLButtonElement>('.agent-panel-settings-toggle')!.click();
   title!.click();
   expect(panel.dataset.view).toBe('chat');
+  expect(store.activeId).toBe(displayed);
+  title!.click();
   expect(store.activeId).toBe(latest);
   expect(panel.querySelector('.cui-msg-user')?.textContent).toBe('Latest chat');
   expect(restore).not.toHaveBeenCalled();
diff --git a/test/unit/agent-panel-owners.test.ts b/test/unit/agent-panel-owners.test.ts
index 40b0e5175..69cf4e4ae 100644
--- a/test/unit/agent-panel-owners.test.ts
+++ b/test/unit/agent-panel-owners.test.ts
@@ -158,6 +158,9 @@ it('coordinates workspace visibility, capture, focus, runtime placement and Esca
   const navigation = { capture: vi.fn(), restore: vi.fn(() => false) };
   const changed = vi.fn();
   const beforeChange = vi.fn();
+  const returnToParent = vi.fn(() => true);
+  const peerHeader = document.createElement('button');
+  panel.append(peerHeader);
   const workspace = createPanelWorkspace({
     panel,
     chat,
@@ -166,7 +169,7 @@ it('coordinates workspace visibility, capture, focus, runtime placement and Esca
     isOpen: () => true,
     runtime: { row, settings, modelRow, modelActions },
     views: {
-      settings: { el: settings, trigger, focus },
+      settings: { el: settings, trigger, focus, returnToParent },
       history: { el: document.createElement('div'), trigger: document.createElement('button'), focus: vi.fn() },
       sources: { el: document.createElement('div'), trigger: document.createElement('button'), focus: vi.fn() },
       artifacts: { el: document.createElement('div'), trigger: document.createElement('button'), focus: vi.fn() },
@@ -182,6 +185,22 @@ it('coordinates workspace visibility, capture, focus, runtime placement and Esca
   expect(trigger.getAttribute('aria-expanded')).toBe('true');
   expect(row.parentElement).toBe(modelRow);
   expect(focus).toHaveBeenCalledOnce();
+  const nestedEscape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+  peerHeader.focus();
+  peerHeader.dispatchEvent(nestedEscape);
+  expect(nestedEscape.defaultPrevented).toBe(true);
+  expect(returnToParent).toHaveBeenCalledOnce();
+  expect(chat.el.hidden).toBe(true);
+  for (const event of [
+    new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true, isComposing: true }),
+    new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true, keyCode: 229 }),
+    new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+  ]) {
+    if (!event.isComposing && event.keyCode !== 229) event.preventDefault();
+    peerHeader.dispatchEvent(event);
+  }
+  expect(returnToParent).toHaveBeenCalledOnce();
+  returnToParent.mockReturnValue(false);
   settings.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
   expect(chat.el.hidden).toBe(false);
   expect(row.parentElement).toBe(panel);
@@ -189,3 +208,64 @@ it('coordinates workspace visibility, capture, focus, runtime placement and Esca
   expect(beforeChange).toHaveBeenCalledWith('chat');
   expect(changed).toHaveBeenCalledWith('chat');
 });
+
+it('keeps destination selection idempotent and exposes the selected navigation state', () => {
+  const panel = document.createElement('div');
+  panel.dataset.view = 'chat';
+  const chat = { el: document.createElement('div'), focus: vi.fn() };
+  const row = document.createElement('div');
+  const settings = document.createElement('div');
+  const modelRow = document.createElement('div');
+  const modelActions = document.createElement('div');
+  modelRow.append(modelActions);
+  settings.append(modelRow);
+  panel.append(row, settings, chat.el);
+  const chatTrigger = document.createElement('button');
+  chatTrigger.scrollIntoView = vi.fn();
+  const surface = (el = document.createElement('div')) => ({
+    el,
+    trigger: document.createElement('button'),
+    focus: vi.fn(),
+  });
+  const surfaces = {
+    settings: surface(settings),
+    history: surface(),
+    sources: surface(),
+    artifacts: surface(),
+  };
+  const navigation = { capture: vi.fn(), restore: vi.fn(() => false) };
+  const changed = vi.fn();
+  const beforeChange = vi.fn();
+  const workspace = createPanelWorkspace({
+    panel,
+    chat,
+    chatTrigger,
+    navigation,
+    conversation: () => 'current draft',
+    isOpen: () => true,
+    runtime: { row, settings, modelRow, modelActions },
+    views: surfaces,
+    beforeChange,
+    changed,
+  });
+  workspace.show('chat');
+  chatTrigger.click();
+  expect(beforeChange).toHaveBeenCalledTimes(1);
+  expect(chat.focus).toHaveBeenCalledTimes(1);
+  expect(chatTrigger.getAttribute('aria-current')).toBe('page');
+  expect(chatTrigger.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', inline: 'nearest' });
+  vi.mocked(chatTrigger.scrollIntoView).mockClear();
+  chatTrigger.dispatchEvent(new FocusEvent('focus'));
+  expect(chatTrigger.scrollIntoView).toHaveBeenCalledOnce();
+  surfaces.artifacts.trigger.click();
+  expect(surfaces.artifacts.trigger.getAttribute('aria-current')).toBe('page');
+  expect(chatTrigger.hasAttribute('aria-current')).toBe(false);
+  const effects = [beforeChange.mock.calls.length, changed.mock.calls.length];
+  surfaces.artifacts.trigger.click();
+  expect(panel.dataset.view).toBe('artifacts');
+  expect([beforeChange.mock.calls.length, changed.mock.calls.length]).toEqual(effects);
+  expect(surfaces.artifacts.focus).toHaveBeenCalledTimes(1);
+  chatTrigger.click();
+  expect(navigation.restore).toHaveBeenLastCalledWith('current draft', true);
+  expect(chatTrigger.getAttribute('aria-current')).toBe('page');
+});
diff --git a/test/unit/agent-panel.test.ts b/test/unit/agent-panel.test.ts
index 7547f4380..160a1b4a1 100644
--- a/test/unit/agent-panel.test.ts
+++ b/test/unit/agent-panel.test.ts
@@ -1,5 +1,6 @@
 import { t, getLanguage, setLanguage, LanguageCode } from '@ranuts/shared/i18n';
 import * as historyList from '../../lib/agent-plugin/ui/history-list';
+import * as sessionOwner from '../../lib/agent-plugin/ui/sessions';
 import { ChatView } from '@ranuts/chat-ui';
 import type { EditorApi } from '../../lib/agent-plugin/editor-bridge';
 import { afterEach, expect, it, vi } from 'vitest';
@@ -707,3 +708,79 @@ it('preserves an expanded selected-text disclosure and its scroller while contex
   expect(trigger.querySelector('svg')).not.toBeNull();
   expect(trigger.getAttribute('aria-label')).toContain(String(selection.length));
 });
+
+it.each(['meaningful', 'blank'])(
+  'returns to the displayed %s conversation instead of a newer conversation',
+  async (kind) => {
+    const store = sessionOwner.createConversationStore();
+    const selected = store.create().id;
+    if (kind === 'meaningful') store.history().save([{ role: 'user', content: 'Older selected conversation' }]);
+    await new Promise((resolve) => setTimeout(resolve, 5));
+    store.create();
+    store.history().save([{ role: 'user', content: 'Newer conversation' }]);
+    store.select(selected);
+    const factory = vi.spyOn(sessionOwner, 'createConversationStore').mockReturnValue(store);
+    try {
+      const panel = createAgentPanel();
+      const input = panel.querySelector<HTMLTextAreaElement>('.cui-input')!;
+      input.value = 'A draft belonging to the selected conversation';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      for (const route of [
+        '.agent-sources-nav',
+        '.agent-panel-settings-toggle',
+        '.agent-workspace-toggle',
+        '.agent-history-toggle',
+      ]) {
+        panel.querySelector<HTMLButtonElement>(route)!.click();
+        panel.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
+        expect(store.activeId).toBe(selected);
+        expect(input.value).toBe('A draft belonging to the selected conversation');
+      }
+    } finally {
+      factory.mockRestore();
+    }
+  },
+);
+
+it('keeps primary header routes and contextual composer entries while preserving the current draft', async () => {
+  const panel = createAgentPanel();
+  const nav = panel.querySelector<HTMLElement>('.agent-workspace-nav')!;
+  expect(nav).not.toBeNull();
+  expect(nav.closest('.agent-panel-header')).not.toBeNull();
+  expect(nav.querySelectorAll('button')).toHaveLength(3);
+  const destinations = [
+    '.agent-chat-toggle',
+    '.agent-workspace-toggle',
+    '.agent-history-toggle',
+    '.agent-sources-nav',
+    '.agent-panel-settings-toggle',
+  ];
+  for (const selector of destinations) expect(panel.querySelector(selector)?.getAttribute('aria-label')).toBeTruthy();
+  expect(panel.querySelector('.agent-sources-nav')?.closest('.cui-composer')).not.toBeNull();
+  expect(panel.querySelector('.agent-panel-settings-toggle')?.closest('.cui-footer')).not.toBeNull();
+  expect(panel.querySelector('.agent-panel-header .agent-panel-settings-toggle')).toBeNull();
+  const input = panel.querySelector<HTMLTextAreaElement>('.cui-input')!;
+  input.value = 'Keep this exact conversation draft';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+  for (const selector of destinations.slice(1)) {
+    nav.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
+    panel.querySelector<HTMLButtonElement>(selector)!.click();
+    expect(panel.querySelector('.agent-runtime-row')?.hasAttribute('hidden')).toBe(true);
+  }
+  expect(panel.querySelector('.agent-panel-settings .agent-view-header button')).toBeNull();
+  expect(panel.querySelector('.agent-history-view .agent-view-header button')).toBeNull();
+  expect(panel.querySelector('.agent-sources-view .agent-view-header button')).toBeNull();
+  expect(panel.querySelector('.agent-artifacts .agent-view-header button')).toBeNull();
+  nav.querySelector<HTMLButtonElement>('.agent-chat-toggle')!.click();
+  expect(input.value).toBe('Keep this exact conversation draft');
+  expect(panel.dataset.view).toBe('chat');
+  expect(nav.querySelector('[aria-current=page]')?.classList.contains('agent-chat-toggle')).toBe(true);
+  panel.querySelector<HTMLButtonElement>('.agent-sources-toggle')!.click();
+  expect(panel.dataset.view).toBe('sources');
+  expect(panel.querySelector('.agent-sources-toggle')?.getAttribute('aria-expanded')).toBe('true');
+  panel
+    .querySelector<HTMLElement>('.agent-sources-view')!
+    .dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+  expect(panel.dataset.view).toBe('chat');
+  expect(panel.querySelector('.agent-sources-toggle')?.getAttribute('aria-expanded')).toBe('false');
+});
diff --git a/test/unit/agent-presentation.test.ts b/test/unit/agent-presentation.test.ts
index e58d0e184..0b220b68f 100644
--- a/test/unit/agent-presentation.test.ts
+++ b/test/unit/agent-presentation.test.ts
@@ -232,7 +232,12 @@ it.each(SHELL_LOCALES)(
   (language) => {
     try {
       setLanguage(language);
-      for (const key of ['agentNoCompletedAnswer', 'agentParagraphSelectionConflict'] as const) {
+      for (const key of [
+        'agentNoCompletedAnswer',
+        'agentParagraphSelectionConflict',
+        'agentWordFormatUnsupported',
+        'agentWordFormattingReviewUnsupported',
+      ] as const) {
         const localized = t(key);
         expect(displayError(new Error(key))).toBe(localized);
         expect(displayError(displayError(key))).toBe(localized);
diff --git a/test/unit/agent-public-reasoning.test.ts b/test/unit/agent-public-reasoning.test.ts
new file mode 100644
index 000000000..c733d3fc1
--- /dev/null
+++ b/test/unit/agent-public-reasoning.test.ts
@@ -0,0 +1,381 @@
+import { describe, expect, it, vi } from 'vitest';
+import { OpenAIProvider } from '../../packages/agent-core/src/llm/openai';
+import { OllamaProvider } from '../../packages/agent-core/src/llm/ollama';
+import { GeminiProvider } from '../../packages/agent-core/src/llm/gemini';
+import { LoopbackProvider } from '../../packages/agent-core/src/llm/loopback';
+import { AnthropicProvider, type AnthropicStream } from '../../packages/agent-core/src/llm/anthropic';
+import { runAgent, type AgentEvent } from '../../packages/agent-core/src/runtime';
+import type { LLMProvider, LLMResponse } from '../../packages/agent-core/src/llm/types';
+import { AgentChatController } from '../../lib/agent-plugin/ui/controller';
+import { generateReadAnswer } from '../../lib/agent-plugin/document-read-answer';
+
+const answer = (text = 'answer'): LLMResponse => ({
+  text,
+  toolCalls: [],
+  stopReason: 'stop',
+  assistant: { role: 'assistant', content: text },
+});
+const sse = (value: unknown) => `data: ${JSON.stringify(value)}\n\n`;
+const thought = 'Public summary: \u516c\u5f00\u6458\u8981 🧭';
+const formats = [
+  {
+    name: 'OpenAI',
+    create: (fetchImpl: typeof fetch) => new OpenAIProvider({ apiKey: 'test', fetchImpl }),
+    type: 'text/event-stream',
+    stream:
+      sse({ choices: [{ delta: { reasoning_content: thought, reasoning: 'duplicate alias' } }] }) +
+      sse({ choices: [{ delta: { content: 'answer' }, finish_reason: 'stop' }] }),
+    json: { choices: [{ message: { content: 'answer', reasoning: thought }, finish_reason: 'stop' }] },
+  },
+  {
+    name: 'Ollama',
+    create: (fetchImpl: typeof fetch) => new OllamaProvider({ fetchImpl }),
+    type: 'text/event-stream',
+    stream:
+      sse({ choices: [{ delta: { reasoning: thought } }] }) +
+      sse({ choices: [{ delta: { content: 'answer' }, finish_reason: 'stop' }] }),
+    json: { choices: [{ message: { content: 'answer', reasoning_content: thought }, finish_reason: 'stop' }] },
+  },
+  {
+    name: 'Gemini',
+    create: (fetchImpl: typeof fetch) => new GeminiProvider({ apiKey: 'test', fetchImpl }),
+    type: 'text/event-stream',
+    stream: sse({
+      candidates: [
+        {
+          content: { parts: [{ thought: true, text: thought, thoughtSignature: 'secret' }, { text: 'answer' }] },
+          finishReason: 'STOP',
+        },
+      ],
+    }),
+    json: {
+      candidates: [
+        { content: { parts: [{ thought: true, text: thought }, { text: 'answer' }] }, finishReason: 'STOP' },
+      ],
+    },
+  },
+  {
+    name: 'Loopback',
+    create: (fetchImpl: typeof fetch) => new LoopbackProvider({ model: 'local', fetchImpl }),
+    type: 'application/x-ndjson',
+    stream: JSON.stringify({ done: true, message: { thinking: thought, content: 'answer' } }) + '\n',
+    json: { done: true, message: { thinking: thought, content: 'answer' } },
+  },
+];
+
+describe.each(formats)('$name public reasoning', (format) => {
+  it.each(['stream', 'json'] as const)(
+    'separates %s returned reasoning from answer/history with no thinking request',
+    async (mode) => {
+      const bodies: unknown[] = [];
+      const provider = format.create((async (url, init) => {
+        if (String(url).endsWith('/tags')) return Response.json({ models: [{ name: 'local' }] });
+        bodies.push(JSON.parse(init!.body as string));
+        return mode === 'json'
+          ? Response.json(format.json)
+          : new Response(format.stream, { headers: { 'Content-Type': format.type } });
+      }) as typeof fetch);
+      if (provider instanceof LoopbackProvider) await provider.preload();
+      const reasoning = vi.fn();
+      const delta = vi.fn();
+      const response = await provider.chatStream!([], [], delta, undefined, reasoning);
+      expect(reasoning.mock.calls).toEqual([[thought]]);
+      expect(delta.mock.calls).toEqual([['answer']]);
+      expect(response.text).toBe('answer');
+      expect(JSON.stringify(response)).not.toContain(thought);
+      expect(JSON.stringify(bodies)).not.toMatch(/think|includeThoughts|reasoning_effort|thinkingConfig/);
+      await provider.chatStream!([], [], () => {});
+      expect(bodies[1]).toEqual(bodies[0]);
+    },
+  );
+  it.each(['stream', 'json'] as const)(
+    'stops answer emission when reasoning consumer cancels a %s response',
+    async (mode) => {
+      const provider = format.create((async (url) => {
+        if (String(url).endsWith('/tags')) return Response.json({ models: [{ name: 'local' }] });
+        return mode === 'json'
+          ? Response.json(format.json)
+          : new Response(format.stream, { headers: { 'Content-Type': format.type } });
+      }) as typeof fetch);
+      if (provider instanceof LoopbackProvider) await provider.preload();
+      const abort = new AbortController();
+      const delta = vi.fn();
+      await expect(provider.chatStream!([], [], delta, abort.signal, () => abort.abort())).rejects.toMatchObject({
+        name: 'AbortError',
+      });
+      expect(delta).not.toHaveBeenCalled();
+    },
+  );
+  if (format.name !== 'Loopback')
+    it('extracts reasoning on the existing complete JSON tool-bearing route', async () => {
+      const provider = format.create((async () => Response.json(format.json)) as typeof fetch);
+      const reasoning = vi.fn();
+      const response = await provider.chatStream!(
+        [],
+        [{ name: 'read', description: 'read', inputSchema: {} }],
+        () => {},
+        undefined,
+        reasoning,
+      );
+      expect(reasoning.mock.calls).toEqual([[thought]]);
+      expect(JSON.stringify(response)).not.toContain(thought);
+    });
+});
+
+it('forwards SDK thinking once, skips signature/redacted blocks, and detaches listeners', async () => {
+  const listeners = new Map<string, (text: string) => void>();
+  let finish!: (value: Awaited<ReturnType<AnthropicStream['finalMessage']>>) => void;
+  const off = vi.fn();
+  const stream = {
+    on: (event: string, cb: (text: string) => void) => listeners.set(event, cb),
+    off,
+    finalMessage: () =>
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+  } as AnthropicStream;
+  const create = vi.fn();
+  const provider = new AnthropicProvider({ client: { messages: { create, stream: () => stream } } });
+  const reasoning = vi.fn();
+  const pending = provider.chatStream([], [], () => {}, undefined, reasoning);
+  listeners.get('thinking')?.(thought);
+  finish({
+    content: [
+      { type: 'thinking', thinking: thought, signature: 'secret' },
+      { type: 'redacted_thinking', data: 'secret' },
+      { type: 'text', text: 'answer' },
+    ],
+    stop_reason: 'end_turn',
+  });
+  expect((await pending).text).toBe('answer');
+  listeners.get('thinking')?.('late');
+  expect(reasoning.mock.calls).toEqual([[thought]]);
+  expect(off).toHaveBeenCalledWith('thinking', expect.any(Function));
+});
+
+it('extracts Anthropic complete response thinking when SDK streaming is unavailable', async () => {
+  const create = vi.fn(async (_body: Record<string, unknown>) => ({
+    content: [
+      { type: 'thinking', thinking: thought, signature: 'secret' },
+      { type: 'text', text: 'answer' },
+    ],
+    stop_reason: 'end_turn',
+  }));
+  const reasoning = vi.fn();
+  const provider = new AnthropicProvider({ client: { messages: { create } } });
+  const response = await provider.chatStream([], [], () => {}, undefined, reasoning);
+  expect(reasoning.mock.calls).toEqual([[thought]]);
+  expect(JSON.stringify(response)).not.toContain(thought);
+  expect(create.mock.calls[0][0]).not.toHaveProperty('thinking');
+});
+
+it('ends reasoning before answers/tools, once per inference, and ignores settled inference callbacks', async () => {
+  const events: AgentEvent[] = [];
+  let priorReasoning!: (text: string) => void;
+  let priorAnswer!: (text: string) => void;
+  let calls = 0;
+  const provider: LLMProvider = {
+    name: 'test',
+    isReady: () => true,
+    chat: async () => answer(),
+    chatStream: async (_messages, _tools, delta, _signal, reasoning) => {
+      calls++;
+      if (calls === 1) {
+        priorReasoning = reasoning!;
+        priorAnswer = delta;
+        reasoning!(thought);
+        return {
+          ...answer(''),
+          toolCalls: [{ id: '1', name: 'read', input: {} }],
+          assistant: { role: 'assistant', content: [{ type: 'tool_use', id: '1', name: 'read', input: {} }] },
+        };
+      }
+      priorReasoning('stale');
+      priorAnswer('stale');
+      reasoning!('second');
+      delta('answer');
+      reasoning!('after answer');
+      return answer();
+    },
+  };
+  const result = await runAgent(provider, 'question', {
+    tools: {
+      read: { name: 'read', description: '', inputSchema: {}, readOnlyHint: true, execute: async () => 'source' },
+    },
+    onEvent: (e) => events.push(e),
+  });
+  expect(events.filter((e) => e.type.startsWith('reasoning'))).toEqual([
+    { type: 'reasoning_delta', text: thought },
+    { type: 'reasoning_end' },
+    { type: 'reasoning_delta', text: 'second' },
+    { type: 'reasoning_end' },
+  ]);
+  expect(events.findIndex((e) => e.type === 'reasoning_end')).toBeLessThan(
+    events.findIndex((e) => e.type === 'tool_call'),
+  );
+  expect(events.findLastIndex((e) => e.type === 'reasoning_end')).toBeLessThan(
+    events.findIndex((e) => e.type === 'assistant_delta'),
+  );
+  expect(JSON.stringify(result)).not.toContain(thought);
+  expect(JSON.stringify(result)).not.toMatch(/second|stale/);
+  expect(JSON.stringify(events)).not.toMatch(/stale|after answer/);
+});
+
+it.each(['stop', 'dispose', 'supersede'] as const)(
+  'controller keeps reasoning ephemeral and rejects callbacks after %s',
+  async (action) => {
+    let emit!: (text: string) => void;
+    let resolve!: (value: LLMResponse) => void;
+    const reasoning = vi.fn();
+    const end = vi.fn();
+    const save = vi.fn();
+    const turns = vi.fn();
+    const provider: LLMProvider = {
+      name: 'test',
+      isReady: () => true,
+      chat: async () => answer(),
+      chatStream: async (_m, _t, _d, _s, cb) => {
+        emit = cb!;
+        return new Promise((r) => {
+          resolve = r;
+        });
+      },
+    };
+    let valid = true;
+    const controller = new AgentChatController(provider, turns, {
+      onReasoningDelta: reasoning,
+      onReasoningEnd: end,
+      assertCurrent: () => {
+        if (!valid) throw new Error('superseded');
+      },
+      storage: { load: () => [], save, clear: () => {} },
+    });
+    const pending = controller.send('question');
+    await vi.waitFor(() => expect(emit).toBeTypeOf('function'));
+    emit(thought);
+    if (action === 'supersede') valid = false;
+    else controller[action]();
+    try {
+      emit('late');
+    } catch {}
+    resolve(answer());
+    await pending;
+    try {
+      emit('settled');
+    } catch {}
+    expect(reasoning.mock.calls).toEqual([[thought]]);
+    expect(JSON.stringify(save.mock.calls)).not.toContain(thought);
+    expect(JSON.stringify(turns.mock.calls)).not.toContain(thought);
+  },
+);
+
+it('controller forwards a successful reasoning end before answer delivery', async () => {
+  const visible: string[] = [];
+  const provider: LLMProvider = {
+    name: 'test',
+    isReady: () => true,
+    chat: async () => answer(),
+    chatStream: async (_m, _t, delta, _s, cb) => {
+      cb!(thought);
+      delta('answer');
+      return answer();
+    },
+  };
+  await new AgentChatController(provider, () => {}, {
+    onReasoningDelta: (t) => visible.push(t),
+    onReasoningEnd: () => visible.push('end'),
+    onAgentDelta: (t) => visible.push(t),
+  }).send('question');
+  expect(visible).toEqual([thought, 'end', 'answer']);
+});
+
+it('document answer forwards reasoning separately and ignores callbacks after settlement', async () => {
+  let emit!: (text: string) => void;
+  const provider: LLMProvider = {
+    name: 'test',
+    isReady: () => true,
+    chat: async () => answer(),
+    chatStream: async (_m, _t, delta, _s, cb) => {
+      emit = cb!;
+      cb!(thought);
+      delta('answer');
+      return answer();
+    },
+  };
+  const reasoning = vi.fn();
+  const delta = vi.fn();
+  const result = await generateReadAnswer(
+    provider,
+    'question',
+    {} as never,
+    [],
+    new AbortController().signal,
+    delta,
+    undefined,
+    { onReasoningDelta: reasoning },
+  );
+  emit('late');
+  expect(result).toBe('answer');
+  expect(reasoning.mock.calls).toEqual([[thought]]);
+  expect(delta.mock.calls).toEqual([['answer']]);
+});
+
+it('ends a reasoning-only failed inference before rejecting and ignores later callbacks', async () => {
+  const events: AgentEvent[] = [];
+  let emit!: (text: string) => void;
+  const provider: LLMProvider = {
+    name: 'test',
+    isReady: () => true,
+    chat: async () => answer(),
+    chatStream: async (_m, _t, _d, _s, cb) => {
+      emit = cb!;
+      cb!(thought);
+      throw new Error('failed');
+    },
+  };
+  await expect(runAgent(provider, 'question', { onEvent: (e) => events.push(e) })).rejects.toThrow('failed');
+  emit('late');
+  expect(events).toEqual([{ type: 'reasoning_delta', text: thought }, { type: 'reasoning_end' }]);
+});
+
+it('does not invent reasoning or an end event for answer-only providers', async () => {
+  const events: AgentEvent[] = [];
+  await runAgent({ name: 'test', isReady: () => true, chat: async () => answer() }, 'question', {
+    onEvent: (e) => events.push(e),
+  });
+  expect(events.some((e) => e.type.startsWith('reasoning'))).toBe(false);
+});
+
+it.each(['fallback', 'tools'] as const)(
+  'stops Gemini reasoning callbacks between thought parts on the JSON %s route',
+  async (route) => {
+    const provider = new GeminiProvider({
+      apiKey: 'test',
+      fetchImpl: async () =>
+        Response.json({
+          candidates: [
+            {
+              content: {
+                parts: [{ thought: true, text: thought }, { thought: true, text: 'late thought' }, { text: 'answer' }],
+              },
+              finishReason: 'STOP',
+            },
+          ],
+        }),
+    });
+    const abort = new AbortController();
+    const reasoning = vi.fn(() => abort.abort());
+    const delta = vi.fn();
+    await expect(
+      provider.chatStream(
+        [],
+        route === 'tools' ? [{ name: 'read', description: 'read', inputSchema: {} }] : [],
+        delta,
+        abort.signal,
+        reasoning,
+      ),
+    ).rejects.toMatchObject({ name: 'AbortError' });
+    expect(reasoning.mock.calls).toEqual([[thought]]);
+    expect(delta).not.toHaveBeenCalled();
+  },
+);
diff --git a/test/unit/agent-sources-view.test.ts b/test/unit/agent-sources-view.test.ts
index 6618bc9bf..dca5ad169 100644
--- a/test/unit/agent-sources-view.test.ts
+++ b/test/unit/agent-sources-view.test.ts
@@ -20,6 +20,25 @@ afterEach(() => {
   document.body.replaceChildren();
   vi.unstubAllGlobals();
 });
+it('opens an explicitly chosen composer source even when the source list is filtered', () => {
+  const sources = new ReferenceSources();
+  sources.add({ id: 'one', connector: 'local', title: 'Notes', text: 'Visible only on request' });
+  const view = createSourcesView({ sources, labels, changed: vi.fn(), close: vi.fn() });
+  document.body.append(view.el);
+  const search = view.el.querySelector<HTMLInputElement>('[type=search]')!;
+  search.value = 'no match';
+  search.dispatchEvent(new Event('input'));
+  expect(view.el.querySelector('.agent-source-row')).toBeNull();
+  expect(view.openSource('missing')).toBe(false);
+  expect(search.value).toBe('no match');
+  expect(view.openSource('one')).toBe(true);
+  const detail = view.el.querySelector<HTMLDetailsElement>('details')!;
+  expect(detail.open).toBe(true);
+  expect(document.activeElement).toBe(detail.querySelector('summary'));
+  expect(detail.querySelector('pre')?.textContent).toBe('Visible only on request');
+  view.dispose();
+  expect(view.openSource('one')).toBe(false);
+});
 it('offers local references without remote account or server controls', () => {
   const fetcher = vi.fn();
   vi.stubGlobal('fetch', fetcher);
@@ -27,6 +46,7 @@ it('offers local references without remote account or server controls', () => {
   const view = createSourcesView({ sources: new ReferenceSources(), labels, changed: vi.fn(), close: vi.fn() });
   document.body.append(view.el);
   expect(view.el.querySelector('input[type=file]')).toBeTruthy();
+  expect(view.el.querySelector('.agent-view-header button')).toBeNull();
   expect(view.el.querySelectorAll('input[type=url], input[type=password]')).toHaveLength(0);
   expect(
     [...view.el.querySelectorAll('button')].some((button) =>
@@ -235,3 +255,27 @@ it('retains local attachments across offline and online transitions without a ne
   view.dispose();
   network.mockRestore();
 });
+
+it('keeps removal focus in the filtered source list and falls back to Attach when empty', () => {
+  const sources = new ReferenceSources();
+  for (const id of ['hidden', 'one', 'two', 'three'])
+    sources.add({ id, connector: 'local', title: id === 'hidden' ? 'Other' : `Notes ${id}`, text: id });
+  const view = createSourcesView({ sources, labels, changed: vi.fn(), close: vi.fn() });
+  document.body.append(view.el);
+  const search = view.el.querySelector<HTMLInputElement>('[type=search]')!;
+  search.value = 'Notes';
+  search.dispatchEvent(new Event('input'));
+  const remove = (name: string) => {
+    const control = view.el.querySelector<HTMLButtonElement>(`[aria-label="Remove: Notes ${name}"]`)!;
+    control.focus();
+    control.click();
+  };
+  remove('two');
+  expect(document.activeElement?.getAttribute('aria-label')).toBe('Remove: Notes three');
+  remove('three');
+  expect(document.activeElement?.getAttribute('aria-label')).toBe('Remove: Notes one');
+  remove('one');
+  expect(document.activeElement).toBe(view.el.querySelector('.agent-source-attach'));
+  expect(sources.list().map((source) => source.id)).toEqual(['hidden']);
+  view.dispose();
+});
diff --git a/test/unit/agent-speech-input.test.ts b/test/unit/agent-speech-input.test.ts
index b2f4bd56c..2842c9336 100644
--- a/test/unit/agent-speech-input.test.ts
+++ b/test/unit/agent-speech-input.test.ts
@@ -19,7 +19,7 @@ class FakeRecognition {
   stop = vi.fn();
   abort = vi.fn();
 }
-function setup() {
+function setup(start = true) {
   Object.defineProperty(window, 'SpeechRecognition', { configurable: true, value: FakeRecognition });
   const el = document.createElement('div');
   el.innerHTML = '<textarea class="cui-input"></textarea><div class="actions"></div>';
@@ -36,7 +36,7 @@ function setup() {
     refreshSendAvailability: vi.fn(),
   };
   const speech = mountSpeechInput(chat as unknown as ChatView, () => true);
-  (el.querySelector('.agent-speech-mic') as HTMLButtonElement).click();
+  if (start) (el.querySelector('.agent-speech-mic') as HTMLButtonElement).click();
   return { el, speech, draft: () => draft, recognition: FakeRecognition.current };
 }
 afterEach(() => {
@@ -107,13 +107,18 @@ it('starts recognition with one microphone click, without a start form', () => {
   expect(recognition.start).toHaveBeenCalledOnce();
   expect(el.querySelector('.agent-speech-details')).toBeNull();
 });
-it('offers one language selector directly in the compose toolbar', () => {
+it('groups one visibly labelled language selector and privacy guidance in Voice options', () => {
   const { el, recognition } = setup();
   recognition.onend?.();
-  const selector = el.querySelector('r-select.agent-speech-language');
+  const selector = document.querySelector('r-select.agent-speech-language');
   expect(selector).not.toBeNull();
   expect(el.querySelector('button.agent-speech-language')).toBeNull();
   expect(el.querySelector('.agent-speech-language-picker')).toBeNull();
+  expect(selector!.closest('.agent-speech-options')).not.toBeNull();
+  expect(el.querySelector('.agent-speech')!.children).not.toContain(selector);
+  expect(selector!.getAttribute('label')).toBe('agentSpeechLanguage');
+  expect(el.querySelector('.agent-speech-privacy button')!.getAttribute('aria-label')).toBe('agentVoiceOptions');
+  expect(document.querySelector('.agent-speech-hint')!.textContent).toBe('agentSpeechPrivacy');
   expect(selector!.getAttribute('placement')).toBe('top');
   expect(selector!.getAttribute('aria-label')).toBe('agentSpeechLanguage');
 });
@@ -149,8 +154,7 @@ it('reports empty recognition instead of silently leaving the draft unchanged',
 it('keeps the chosen recognition language across subsequent microphone clicks', () => {
   const { el, recognition } = setup();
   recognition.onend?.();
-  el.querySelector<HTMLButtonElement>('.agent-speech-language')!.click();
-  const language = el.querySelector('r-select') as HTMLElement & { value: string };
+  const language = document.querySelector('r-select.agent-speech-language') as HTMLElement & { value: string };
   language.value = 'en-US';
   language.dispatchEvent(new Event('change'));
   el.querySelector<HTMLButtonElement>('.agent-speech-mic')!.click();
@@ -268,6 +272,12 @@ it('keeps one toolbar and stable microphone nodes across every recognition state
   const mic = root.querySelector<HTMLButtonElement>('.agent-speech-mic')!;
   const icons = Array.from(mic.querySelectorAll('svg'));
   expect(feedback.parentElement).toBe(root);
+  expect(Array.from(root.children, (child) => child.className)).toEqual([
+    'agent-speech-mic',
+    'agent-speech-privacy',
+    'agent-speech-feedback',
+    'agent-speech-cancel',
+  ]);
   expect(icons).toHaveLength(2);
   mic.click();
   FakeRecognition.current.onstart?.();
@@ -297,23 +307,24 @@ it('dismisses speech privacy with Escape before cancelling active dictation', ()
   expect(speech.isBusy()).toBe(false);
 });
 
-it('closes the speech disclosure as soon as the language menu opens', () => {
+it('retains Voice options when its nested language menu opens', () => {
   const { el, speech } = setup();
   const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
-  const language = el.querySelector<HTMLElement>('.agent-speech-language')!;
+  const language = document.querySelector<HTMLElement>('.agent-speech-language')!;
   expect(privacy.hasAttribute('open')).toBe(true);
+  language.setAttribute('open', '');
   language.dispatchEvent(new Event('show'));
-  expect(privacy.hasAttribute('open')).toBe(false);
+  expect(privacy.hasAttribute('open')).toBe(true);
   expect(speech.isBusy()).toBe(true);
 });
 
-it('closes the language menu when the speech disclosure opens', () => {
+it('closes the nested language menu when Voice options closes', () => {
   const { el } = setup();
   const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
-  const language = el.querySelector<HTMLElement>('.agent-speech-language')!;
-  privacy.removeAttribute('open');
+  const language = document.querySelector<HTMLElement>('.agent-speech-language')!;
   language.setAttribute('open', '');
-  privacy.dispatchEvent(new Event('show'));
+  privacy.removeAttribute('open');
+  privacy.dispatchEvent(new Event('hide'));
   expect(language.hasAttribute('open')).toBe(false);
 });
 
@@ -375,9 +386,120 @@ it('expires the error popover but retains the error and a readable detail entry'
     vi.advanceTimersByTime(3000);
     expect(privacy.hasAttribute('open')).toBe(false);
     expect(el.querySelector('[role="status"]')!.textContent).toBe('agentSpeechDenied');
-    expect(privacy.querySelector('button')!.getAttribute('aria-label')).toBe('agentSpeechDenied');
+    expect(privacy.querySelector('button')!.getAttribute('aria-label')).toBe('agentVoiceOptions');
+    expect(privacy.querySelector('button')!.getAttribute('aria-describedby')).toBe('agent-speech-feedback');
+    expect(document.querySelector('.agent-speech-notice')!.textContent).toBe('agentSpeechDenied');
+    expect(document.querySelector('.agent-speech-hint')!.textContent).toBe('agentSpeechPrivacy');
     expect(draft()).toBe('Original');
   } finally {
     vi.useRealTimers();
   }
 });
+
+it('lets Escape close the language menu before Voice options, retaining the draft and recognition', () => {
+  const { el, recognition, speech, draft } = setup();
+  recognition.onstart?.();
+  recognition.onresult?.({ results: [{ isFinal: false, 0: { transcript: 'words' } }] });
+  const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
+  const language = document.querySelector<HTMLElement>('.agent-speech-language')!;
+  const toggle = privacy.querySelector<HTMLButtonElement>('button')!;
+  language.setAttribute('open', '');
+  language.focus();
+  language.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+  expect(language.hasAttribute('open')).toBe(false);
+  expect(privacy.hasAttribute('open')).toBe(true);
+  expect(document.activeElement).toBe(language);
+  language.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+  expect(privacy.hasAttribute('open')).toBe(false);
+  expect(document.activeElement).toBe(toggle);
+  expect(speech.isBusy()).toBe(true);
+  expect(recognition.abort).not.toHaveBeenCalled();
+  expect(draft()).toBe('Original words');
+});
+
+it('pauses the brief disclosure timeout while the language menu is open', () => {
+  vi.useFakeTimers();
+  try {
+    const { el, recognition } = setup();
+    recognition.onstart?.();
+    const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
+    const language = document.querySelector<HTMLElement>('.agent-speech-language')!;
+    language.setAttribute('open', '');
+    language.dispatchEvent(new Event('show'));
+    vi.advanceTimersByTime(5000);
+    expect(privacy.hasAttribute('open')).toBe(true);
+    language.removeAttribute('open');
+    language.dispatchEvent(new Event('hide'));
+    vi.advanceTimersByTime(3000);
+    expect(privacy.hasAttribute('open')).toBe(false);
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+it('keeps unsupported-browser recovery visible outside Voice options and retains privacy guidance', () => {
+  const { el, speech, draft } = setup(false);
+  speech.close();
+  el.remove();
+  Object.defineProperty(window, 'SpeechRecognition', { configurable: true, value: undefined });
+  const chat = new ComposerView({ onSend: vi.fn() });
+  document.body.append(chat.el);
+  chat.setInput(draft());
+  const unsupported = mountSpeechInput(chat, () => true);
+  chat.el.querySelector<HTMLButtonElement>('.agent-speech-mic')!.click();
+  const feedback = chat.el.querySelector<HTMLElement>('.agent-speech-feedback')!;
+  const privacy = chat.el.querySelector<HTMLElement>('.agent-speech-privacy')!;
+  expect(feedback.hidden).toBe(false);
+  expect(feedback.textContent).toBe('agentSpeechUnsupported');
+  expect(feedback.closest('r-content,.agent-speech-popover')).toBeNull();
+  expect(document.querySelector('.agent-speech-hint')!.textContent).toBe('agentSpeechPrivacy');
+  expect(privacy.querySelector('button')!.getAttribute('aria-label')).toBe('agentVoiceOptions');
+  expect(unsupported.isBusy()).toBe(false);
+  expect(chat.getInput()).toBe('Original');
+  unsupported.close();
+  chat.dispose();
+});
+
+it('keeps the real nested ranui select reachable through keyboard choice and starts with that language', async () => {
+  const scrollIntoView = HTMLElement.prototype.scrollIntoView;
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  try {
+    const { el, draft } = setup(false);
+    const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
+    const toggle = privacy.querySelector<HTMLButtonElement>('button')!;
+    toggle.focus();
+    toggle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    await Promise.resolve();
+    const language = document.querySelector<HTMLElement & { value: string }>('.agent-speech-language')!;
+    language.focus();
+    language.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    expect(privacy.hasAttribute('open')).toBe(true);
+    expect(language.hasAttribute('open')).toBe(true);
+    language.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(language.value).toBe('pt-BR');
+    expect(language.hasAttribute('open')).toBe(false);
+    expect(privacy.hasAttribute('open')).toBe(true);
+    expect(document.activeElement).toBe(language);
+    expect(draft()).toBe('Original');
+    el.querySelector<HTMLButtonElement>('.agent-speech-mic')!.click();
+    expect(FakeRecognition.current.lang).toBe('pt-BR');
+  } finally {
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+  }
+});
+
+it('routes Tab from the open Voice options trigger to its portaled language field', async () => {
+  const { el, draft } = setup(false);
+  const privacy = el.querySelector<HTMLElement>('.agent-speech-privacy')!;
+  const toggle = privacy.querySelector<HTMLButtonElement>('button')!;
+  toggle.focus();
+  toggle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  await Promise.resolve();
+  const language = document.querySelector<HTMLElement>('.agent-speech-language')!;
+  const tab = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+  toggle.dispatchEvent(tab);
+  expect(tab.defaultPrevented).toBe(true);
+  expect(document.activeElement).toBe(language);
+  expect(privacy.hasAttribute('open')).toBe(true);
+  expect(draft()).toBe('Original');
+});
diff --git a/test/unit/agent-view-header.test.ts b/test/unit/agent-view-header.test.ts
index 9196a8804..412bbd081 100644
--- a/test/unit/agent-view-header.test.ts
+++ b/test/unit/agent-view-header.test.ts
@@ -12,10 +12,12 @@ it('composes the owned heading and action without replacing their identity or ca
   expect(header.querySelector('button')).toBe(back);
   expect(back.getAttribute('aria-label')).toBe('Back to conversation');
   expect(back.title).toBe('Back to conversation');
+  expect(back.querySelector('span')?.textContent).toBe('Back to conversation');
   expect(back.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
   labelViewBack(back, '返回成果');
   expect(back.querySelectorAll('svg')).toHaveLength(1);
   expect(back.getAttribute('aria-label')).toBe('返回成果');
+  expect(back.querySelector('span')?.textContent).toBe('返回成果');
   back.click();
   expect(close).toHaveBeenCalledTimes(1);
 });
diff --git a/test/unit/chat-markdown-craft.test.ts b/test/unit/chat-markdown-craft.test.ts
new file mode 100644
index 000000000..72b5a8f54
--- /dev/null
+++ b/test/unit/chat-markdown-craft.test.ts
@@ -0,0 +1,50 @@
+import { afterEach, expect, it, vi } from 'vitest';
+import { renderMarkdown } from '../../packages/chat-ui/src/markdown';
+
+afterEach(() => {
+  document.body.replaceChildren();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+function render(source: string) {
+  const target = document.createElement('div');
+  document.body.append(target);
+  renderMarkdown(target, source);
+  return target;
+}
+it('honors declared column alignment in a named, keyboard-scrollable table', () => {
+  const target = render('| Name | Status | Cost |\n| :--- | :---: | ---: |\n| One | Ready | 1234 |');
+  const region = target.querySelector('.cui-table')!;
+  expect(region.getAttribute('role')).toBe('region');
+  expect(region.getAttribute('aria-label')).toBeTruthy();
+  expect((region as HTMLElement).tabIndex).toBe(0);
+  expect(Array.from(target.querySelectorAll('th'), (cell) => cell.style.textAlign)).toEqual([
+    'left',
+    'center',
+    'right',
+  ]);
+  expect(Array.from(target.querySelectorAll('td'), (cell) => cell.style.textAlign)).toEqual([
+    'left',
+    'center',
+    'right',
+  ]);
+});
+it('keeps exact literal code and exposes language and actual copy feedback', async () => {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+  const source = '<script>\n  const value = "安全";\n\treturn value;\n</script>';
+  const target = render('```html\n' + source + '\n```');
+  expect(target.querySelector('.cui-code-language')?.textContent).toBe('HTML');
+  expect(target.querySelector('pre code')?.textContent).toBe(source);
+  expect(target.querySelector('script')).toBeNull();
+  const copy = target.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+  expect(copy).not.toBeNull();
+  copy.click();
+  await Promise.resolve();
+  expect(writeText).toHaveBeenCalledWith(source);
+  expect(copy.textContent).toContain('Copied');
+  writeText.mockRejectedValueOnce(new Error('denied'));
+  copy.click();
+  await Promise.resolve();
+  expect(copy.textContent).toContain('Could not copy');
+});
diff --git a/test/unit/chat-markdown-highlight.test.ts b/test/unit/chat-markdown-highlight.test.ts
new file mode 100644
index 000000000..994cdf073
--- /dev/null
+++ b/test/unit/chat-markdown-highlight.test.ts
@@ -0,0 +1,31 @@
+import { expect, it } from 'vitest';
+import { codeLanguage, highlightCode } from '../../packages/chat-ui/src/markdown-highlight';
+it.each([
+  ['js', 'const value = "安全";'],
+  ['ts', 'const value: string = "安全";'],
+  ['jsx', 'const node = <div>Hello</div>;'],
+  ['tsx', 'const node: Node = <div>Hello</div>;'],
+  ['python', 'def run():\n\treturn "safe"'],
+  ['json', '{"value": 12}'],
+  ['html', '<img src="x" onerror="alert(1)">'],
+  ['css', '.class { color: red; }'],
+  ['sh', 'echo "hello"'],
+  ['sql', 'SELECT value FROM items;'],
+  ['yml', 'name: value'],
+  ['md', '# Heading\n\n**safe**'],
+])('loads only a supported language and returns exact dual-theme token text: %s', async (info, source) => {
+  const language = codeLanguage(info);
+  expect(language.id).toBeTruthy();
+  const tokens = await highlightCode(source, language.id!);
+  expect(tokens.map((line) => line.map((token) => token.content).join('')).join('\n')).toBe(source);
+  expect(tokens.flat().some((token) => token.htmlStyle?.['--shiki-light'] && token.htmlStyle?.['--shiki-dark'])).toBe(
+    true,
+  );
+});
+it.each(['constructor', '__proto__', '../../langs/x', 'https://example.com', 'rust', 'x'.repeat(100)])(
+  'never resolves an untrusted module language: %s',
+  (info) => {
+    expect(codeLanguage(info).id).toBeUndefined();
+    expect(codeLanguage(info).label.length).toBeLessThanOrEqual(64);
+  },
+);
diff --git a/test/unit/chat-markdown-lifecycle.test.ts b/test/unit/chat-markdown-lifecycle.test.ts
new file mode 100644
index 000000000..14dce588a
--- /dev/null
+++ b/test/unit/chat-markdown-lifecycle.test.ts
@@ -0,0 +1,282 @@
+import { afterEach, expect, it, vi } from 'vitest';
+import { ChatView } from '../../packages/chat-ui/src/chat-view';
+import { renderMarkdown } from '../../packages/chat-ui/src/markdown';
+import { MarkdownPresentation } from '../../packages/chat-ui/src/markdown-presentation';
+import { StreamingMarkdown } from '../../packages/chat-ui/src/streaming-markdown';
+import { highlightCode } from '../../packages/chat-ui/src/markdown-highlight';
+vi.mock('../../packages/chat-ui/src/markdown-highlight', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../packages/chat-ui/src/markdown-highlight')>();
+  return { ...actual, highlightCode: vi.fn() };
+});
+const highlight = vi.mocked(highlightCode);
+const owners: MarkdownPresentation[] = [];
+afterEach(() => {
+  for (const owner of owners.splice(0)) owner.dispose();
+  document.body.replaceChildren();
+  vi.clearAllMocks();
+  vi.useRealTimers();
+});
+function mount(source = '```ts\nconst x = 1;\n```') {
+  const target = document.createElement('div');
+  document.body.append(target);
+  const owner = new MarkdownPresentation(target);
+  owners.push(owner);
+  renderMarkdown(target, source, owner);
+  return { target, owner };
+}
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => (resolve = r));
+  return { promise, resolve };
+}
+const tokens = [
+  [{ content: 'const x = 1;', offset: 0, htmlStyle: { '--shiki-light': '#123456', '--shiki-dark': '#abcdef' } }],
+];
+it('preserves exact code and horizontal scroll when dual-theme token colors arrive', async () => {
+  const pending = deferred<Awaited<ReturnType<typeof highlightCode>>>();
+  highlight.mockReturnValue(pending.promise);
+  const { target } = mount();
+  await Promise.resolve();
+  const pre = target.querySelector('pre')!;
+  pre.scrollLeft = 80;
+  pre.scrollTop = 10;
+  pending.resolve(tokens);
+  await Promise.resolve();
+  await Promise.resolve();
+  expect(target.querySelector('code')!.textContent).toBe('const x = 1;');
+  expect(target.querySelector('.cui-code-token')?.getAttribute('style')).toContain('--cui-token-dark: #abcdef');
+  expect([pre.scrollLeft, pre.scrollTop]).toEqual([80, 10]);
+});
+it.each(['removed', 'replaced', 'disposed', 'selected'] as const)('ignores late highlight when %s', async (mode) => {
+  const pending = deferred<Awaited<ReturnType<typeof highlightCode>>>();
+  highlight.mockReturnValue(pending.promise);
+  const { target, owner } = mount();
+  await Promise.resolve();
+  const code = target.querySelector('code')!;
+  if (mode === 'removed') target.remove();
+  if (mode === 'replaced') renderMarkdown(target, 'replacement', owner);
+  if (mode === 'disposed') owner.dispose();
+  if (mode === 'selected') window.getSelection()!.setBaseAndExtent(code.firstChild!, 0, code.firstChild!, 5);
+  pending.resolve(tokens);
+  await Promise.resolve();
+  await Promise.resolve();
+  expect(code.querySelector('.cui-code-token')).toBeNull();
+  if (mode === 'selected') {
+    expect(window.getSelection()!.toString()).toBe('const');
+    window.getSelection()!.removeAllRanges();
+  }
+});
+it('skips unknown, oversized and unfinished fences, including stream completion', async () => {
+  highlight.mockResolvedValue(tokens);
+  const { target, owner } = mount('```../../unknown\nconst x = 1;\n```');
+  await Promise.resolve();
+  expect(highlight).not.toHaveBeenCalled();
+  renderMarkdown(target, '```ts\n' + 'x'.repeat(8001) + '\n```', owner);
+  await Promise.resolve();
+  expect(highlight).not.toHaveBeenCalled();
+  const stream = new StreamingMarkdown(target, owner);
+  stream.update('```ts\nconst x = 1;');
+  stream.update('```ts\nconst x = 1;', true);
+  await Promise.resolve();
+  expect(highlight).not.toHaveBeenCalled();
+  expect(target.querySelector('code')?.textContent).toBe('const x = 1;');
+});
+it.each(['replace', 'dispose'] as const)('ignores clipboard resolution and removes timers after %s', async (mode) => {
+  vi.useFakeTimers();
+  highlight.mockResolvedValue(tokens);
+  const pending = deferred<void>();
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText: vi.fn(() => pending.promise) },
+  });
+  const { target, owner } = mount();
+  const button = target.querySelector<HTMLButtonElement>('button')!;
+  button.click();
+  if (mode === 'replace') renderMarkdown(target, 'replacement', owner);
+  else owner.dispose();
+  pending.resolve();
+  await Promise.resolve();
+  expect(button.textContent).not.toContain('Copied');
+  expect(vi.getTimerCount()).toBe(0);
+});
+it('updates labels and feedback in place, keeping focus and selected source', async () => {
+  vi.useFakeTimers();
+  highlight.mockResolvedValue(tokens);
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText: vi.fn().mockResolvedValue(undefined) },
+  });
+  const { target, owner } = mount('```\nliteral <img src=x>\n```\n\n| A |\n| --- |\n| 1 |');
+  const button = target.querySelector<HTMLButtonElement>('button')!;
+  button.click();
+  await Promise.resolve();
+  button.focus();
+  const code = target.querySelector('code')!;
+  window.getSelection()!.setBaseAndExtent(code.firstChild!, 0, code.firstChild!, 7);
+  owner.setLabels({ copy: 'Copiar', copied: 'Copiado', codeBlock: 'Código', table: 'Tabela' });
+  expect(target.querySelector('code')).toBe(code);
+  expect(document.activeElement).toBe(button);
+  expect(window.getSelection()!.toString()).toBe('literal');
+  expect(button.textContent).toContain('Copiado');
+  expect(target.querySelector('.cui-code-language')!.textContent).toBe('Código');
+  expect(target.querySelector('.cui-table')!.getAttribute('aria-label')).toBe('Tabela');
+  await vi.advanceTimersByTimeAsync(2000);
+  expect(button.textContent).toContain('Copiar');
+  owner.dispose();
+  expect(vi.getTimerCount()).toBe(0);
+  window.getSelection()!.removeAllRanges();
+});
+it('wires copy and labels for a newly appended Chat answer before its async presentation settles', async () => {
+  highlight.mockResolvedValue(tokens);
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+  HTMLElement.prototype.scrollTo = vi.fn();
+  const view = new ChatView({ onSend() {}, labels: { copy: 'Copiar', copied: 'Copiado' } });
+  document.body.append(view.el);
+  view.append({ role: 'agent', text: '```ts\nconst x = 1;\n```' });
+  await Promise.resolve();
+  const copy = view.el.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+  copy.click();
+  await Promise.resolve();
+  expect(writeText).toHaveBeenCalledWith('const x = 1;');
+  expect(copy.textContent).toContain('Copiado');
+  view.setLabels({ copied: 'Done' });
+  expect(copy.textContent).toContain('Done');
+  view.dispose();
+});
+it('keeps an already highlighted closed fence, selection and code scroll across stream completion', async () => {
+  highlight.mockResolvedValue(tokens);
+  const { target, owner } = mount('');
+  const stream = new StreamingMarkdown(target, owner);
+  const source = '```ts\nconst x = 1;\n```\n\nAnother paragraph';
+  stream.update(source);
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+  const code = target.querySelector('code')!;
+  const pre = target.querySelector('pre')!;
+  pre.scrollLeft = 60;
+  expect(code.querySelector('.cui-code-token')).not.toBeNull();
+  window.getSelection()!.setBaseAndExtent(code.firstChild!.firstChild!, 0, code.firstChild!.firstChild!, 5);
+  stream.update(source + ' grows');
+  stream.update(source + ' grows', true);
+  expect(target.querySelector('code')).toBe(code);
+  expect(pre.scrollLeft).toBe(60);
+  expect(window.getSelection()!.toString()).toBe('const');
+  expect(highlight).toHaveBeenCalledOnce();
+  window.getSelection()!.removeAllRanges();
+});
+it.each([
+  '> ```ts\n> const x = 1;\n> ```\n\nAnother paragraph',
+  '- Example\n\n  ```ts\n  const x = 1;\n  ```\n\nAnother paragraph',
+])('retains a highlighted nested closed fence at finalization: %s', async (source) => {
+  highlight.mockResolvedValue(tokens);
+  const { target, owner } = mount('');
+  const stream = new StreamingMarkdown(target, owner);
+  stream.update(source);
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+  const code = target.querySelector('code')!;
+  const pre = target.querySelector('pre')!;
+  pre.scrollLeft = 60;
+  expect(code.querySelector('.cui-code-token')).not.toBeNull();
+  window.getSelection()!.setBaseAndExtent(code.firstChild!.firstChild!, 0, code.firstChild!.firstChild!, 5);
+  stream.update(source, true);
+  expect(target.querySelector('code')).toBe(code);
+  expect(pre.scrollLeft).toBe(60);
+  expect(window.getSelection()!.toString()).toBe('const');
+  expect(highlight).toHaveBeenCalledOnce();
+  window.getSelection()!.removeAllRanges();
+});
+
+it.each(['resolve', 'reject'] as const)(
+  'does not attach delayed clipboard %s feedback to a changed streaming fence',
+  async (outcome) => {
+    vi.useFakeTimers();
+    highlight.mockResolvedValue(tokens);
+    let finish!: () => void;
+    const writeText = vi.fn(
+      () =>
+        new Promise<void>((resolve, reject) => {
+          finish = () => (outcome === 'resolve' ? resolve() : reject(new Error('denied')));
+        }),
+    );
+    Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+    const { target, owner } = mount('');
+    const stream = new StreamingMarkdown(target, owner);
+    stream.update('```text\nfirst\n');
+    const first = target.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+    first.click();
+    expect(writeText).toHaveBeenCalledWith('first');
+    stream.update('```text\nfirst\n\tsecond\n\n```');
+    const current = target.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+    expect(current).not.toBe(first);
+    finish();
+    await Promise.resolve();
+    expect(current.dataset.state).toBe('idle');
+    expect(current.disabled).toBe(false);
+    expect(first.dataset.state).toBe('idle');
+    expect(vi.getTimerCount()).toBe(0);
+    current.click();
+    expect(writeText).toHaveBeenLastCalledWith('first\n\tsecond\n');
+    finish();
+    await Promise.resolve();
+    expect(current.dataset.state).toBe(outcome === 'resolve' ? 'copied' : 'failed');
+    expect(vi.getTimerCount()).toBe(1);
+  },
+);
+
+it.each(['resolve', 'reject'] as const)(
+  'keeps clipboard %s feedback with an unchanged fence while the following answer streams',
+  async (outcome) => {
+    vi.useFakeTimers();
+    highlight.mockResolvedValue(tokens);
+    let finish!: () => void;
+    const writeText = vi.fn(
+      () =>
+        new Promise<void>((resolve, reject) => {
+          finish = () => (outcome === 'resolve' ? resolve() : reject(new Error('denied')));
+        }),
+    );
+    Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+    const { target, owner } = mount('');
+    const stream = new StreamingMarkdown(target, owner);
+    const source = '```text\n\texact\n\n```\n\nFollowing answer';
+    stream.update(source);
+    const button = target.querySelector<HTMLButtonElement>('.cui-code-copy')!;
+    button.focus();
+    button.click();
+    stream.update(source + ' continues');
+    stream.update(source + ' continues', true);
+    expect(target.querySelector('.cui-code-copy')).toBe(button);
+    finish();
+    await Promise.resolve();
+    expect(writeText).toHaveBeenCalledWith('\texact\n');
+    expect(button.dataset.state).toBe(outcome === 'resolve' ? 'copied' : 'failed');
+    expect(document.activeElement).toBe(button);
+    expect(button.disabled).toBe(false);
+    await vi.advanceTimersByTimeAsync(2000);
+    expect(button.dataset.state).toBe('idle');
+    expect(vi.getTimerCount()).toBe(0);
+  },
+);
+
+it('names keyboard-scrollable code with its language and updates translated names without replacing source', () => {
+  highlight.mockResolvedValue(tokens);
+  const { target, owner } = mount('```ts\nconst x = 1;\n```\n\n```\nplain\n```');
+  const regions = target.querySelectorAll('pre');
+  expect(regions[0].getAttribute('role')).toBe('region');
+  expect(regions[0].getAttribute('aria-label')).toBe('Code: TypeScript');
+  expect(regions[1].getAttribute('aria-label')).toBe('Code');
+  regions[0].focus();
+  const code = regions[0].querySelector('code')!;
+  window.getSelection()!.setBaseAndExtent(code.firstChild!, 0, code.firstChild!, 5);
+  owner.setLabels({ codeBlock: 'Código' });
+  expect(regions[0].getAttribute('aria-label')).toBe('Código: TypeScript');
+  expect(regions[1].getAttribute('aria-label')).toBe('Código');
+  expect(document.activeElement).toBe(regions[0]);
+  expect(window.getSelection()!.toString()).toBe('const');
+  expect(regions[0].querySelector('code')).toBe(code);
+  window.getSelection()!.removeAllRanges();
+});
diff --git a/test/unit/chat-view-composer-craft.test.ts b/test/unit/chat-view-composer-craft.test.ts
new file mode 100644
index 000000000..715073488
--- /dev/null
+++ b/test/unit/chat-view-composer-craft.test.ts
@@ -0,0 +1,53 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { ChatView } from '../../packages/chat-ui/src/chat-view';
+
+let view: ChatView;
+beforeEach(() => {
+  document.body.replaceChildren();
+  HTMLElement.prototype.scrollTo = vi.fn();
+});
+afterEach(() => view.dispose());
+
+it('keeps a named composer boundary and stable action row across draft, IME, queue and Stop states', () => {
+  const send = vi.fn();
+  const queue = vi.fn();
+  const stop = vi.fn();
+  view = new ChatView({ onSend: send, onQueue: queue, onStop: stop });
+  document.body.append(view.el);
+  const composer = view.el.querySelector('[role="group"][aria-label="Message composer"]');
+  expect(composer).not.toBeNull();
+  const toolbar = composer!.querySelector('[role="group"][aria-label="Message actions"]')!;
+  const input = composer!.querySelector('textarea')!;
+  const sendButton = toolbar.querySelector<HTMLButtonElement>('.cui-send')!;
+  const stopButton = toolbar.querySelector<HTMLButtonElement>('.cui-stop')!;
+  const sources = document.createElement('button');
+  sources.textContent = 'Sources';
+  view.actionsEl.append(sources);
+  expect([...toolbar.children]).toEqual(expect.arrayContaining([view.actionsEl, stopButton, sendButton]));
+  expect(view.pendingEl.closest('[role="group"]')).toBeNull();
+  expect(input.getAttribute('wrap')).toBe('soft');
+  expect(input.getAttribute('enterkeyhint')).toBe('send');
+  view.setRunning(true);
+  view.setInput('下一条问题');
+  input.focus();
+  input.dispatchEvent(new CompositionEvent('compositionstart'));
+  input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  expect(queue).not.toHaveBeenCalled();
+  expect(view.getInput()).toBe('下一条问题');
+  input.dispatchEvent(new CompositionEvent('compositionend'));
+  input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true }));
+  expect(queue).not.toHaveBeenCalled();
+  input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  expect(queue).toHaveBeenCalledWith('下一条问题');
+  expect(document.activeElement).toBe(input);
+  expect(send).not.toHaveBeenCalled();
+  stopButton.click();
+  expect(stop).toHaveBeenCalledOnce();
+  expect(stopButton.disabled).toBe(true);
+  expect(composer!.querySelector('.cui-composer-bar')).toBe(toolbar);
+  expect(toolbar.contains(sources)).toBe(true);
+  expect(toolbar.querySelector('.cui-send')).toBe(sendButton);
+  view.setLabels({ composer: 'Compor mensagem', actions: 'Ações da mensagem' });
+  expect(composer!.getAttribute('aria-label')).toBe('Compor mensagem');
+  expect(toolbar.getAttribute('aria-label')).toBe('Ações da mensagem');
+});
diff --git a/test/unit/chat-view-reasoning.test.ts b/test/unit/chat-view-reasoning.test.ts
new file mode 100644
index 000000000..923877796
--- /dev/null
+++ b/test/unit/chat-view-reasoning.test.ts
@@ -0,0 +1,264 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import type { Reasoning } from 'ranui/reasoning';
+import type { DisclosureRow } from 'ranui/disclosure-row';
+import { ChatView } from '../../packages/chat-ui/src/chat-view';
+
+let view: ChatView;
+let frames: Map<number, FrameRequestCallback>;
+let nextFrame: number;
+const flush = () => {
+  const pending = [...frames.values()];
+  frames.clear();
+  for (const callback of pending) callback(16);
+};
+const rows = () => [...view.el.querySelectorAll<Reasoning>('r-reasoning')];
+// ranui documents _shadowDom as its closed-root testing seam (ranui/testing).
+// Production code uses only public Reasoning properties and composed events.
+const toggle = (reasoning: Reasoning) =>
+  reasoning._shadowDom
+    .querySelector<DisclosureRow>('r-disclosure-row')!
+    ._shadowDom.querySelector<HTMLElement>('[role="button"]')!;
+
+beforeEach(() => {
+  frames = new Map();
+  nextFrame = 0;
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+    frames.set(++nextFrame, callback);
+    return nextFrame;
+  });
+  vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+  HTMLElement.prototype.scrollTo = vi.fn();
+  document.body.replaceChildren();
+  view = new ChatView({ onSend: vi.fn(), streamingMarkdown: true });
+  document.body.append(view.el);
+});
+afterEach(() => {
+  view.dispose();
+  vi.unstubAllGlobals();
+});
+
+it('creates native reasoning only for real running output and batches content without model timing', () => {
+  view.appendReasoningDelta('ignored while idle');
+  view.setRunning(true);
+  view.appendReasoningDelta('');
+  expect(rows()).toHaveLength(0);
+  for (let index = 0; index < 1000; index++) view.appendReasoningDelta('word ');
+  expect(rows()).toHaveLength(1);
+  const reasoning = rows()[0];
+  expect(reasoning.streaming).toBe(true);
+  expect(reasoning.open).toBe(true);
+  expect(reasoning.content).toBe('');
+  expect(frames.size).toBe(1);
+  const write = vi.spyOn(reasoning, 'content', 'set');
+  flush();
+  expect(write).toHaveBeenCalledOnce();
+  expect(reasoning.content).toBe('word '.repeat(1000));
+  expect(reasoning.duration).toBeNull();
+  expect(view.el.querySelector<HTMLElement>('.cui-progress')!.hidden).toBe(true);
+  view.appendDelta('Actual answer');
+  expect(reasoning.streaming).toBe(false);
+  expect(reasoning.open).toBe(false);
+  view.endStream();
+  expect(view.getLastAnswer()).toBe('Actual answer');
+});
+
+it('preserves reader-owned native disclosure state across updates, completion and relabeling', () => {
+  view.setRunning(true);
+  view.appendReasoningDelta('Public reasoning');
+  const reasoning = rows()[0];
+  toggle(reasoning).click();
+  expect(reasoning.open).toBe(false);
+  view.appendReasoningDelta(' keeps coming');
+  flush();
+  expect(reasoning.open).toBe(false);
+  view.endReasoning();
+  toggle(reasoning).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  expect(reasoning.open).toBe(true);
+  view.setLabels({ reasoning: 'Reasoning translated' });
+  view.endReasoning();
+  expect(reasoning.open).toBe(true);
+  expect(reasoning.label).toBe('Reasoning translated');
+});
+
+it('shares a 64 KiB UTF-8 budget across phases, keeps emoji whole and emits one localized notice', () => {
+  view.setLabels({ reasoningTruncated: 'Output shortened' });
+  view.setRunning(true);
+  view.appendReasoningDelta('a'.repeat(65530));
+  view.endReasoning();
+  view.append({ role: 'tool', text: 'Tool receipt' });
+  view.appendReasoningDelta('😀😀after');
+  flush();
+  expect(rows().map((row) => row.content)).toEqual(['a'.repeat(65530), '😀']);
+  expect(
+    new TextEncoder().encode(
+      rows()
+        .map((row) => row.content)
+        .join(''),
+    ).byteLength,
+  ).toBe(65534);
+  expect(view.el.querySelectorAll('.cui-reasoning-notice')).toHaveLength(1);
+  expect(view.el.querySelector('.cui-reasoning-notice')!.textContent).toBe('Output shortened');
+  view.endReasoning();
+  view.appendReasoningDelta('late');
+  view.setRunning(true);
+  view.appendReasoningDelta('still the same run');
+  expect(rows()).toHaveLength(2);
+  view.setLabels({ reasoningTruncated: 'Notice translated' });
+  expect(view.el.querySelector('.cui-reasoning-notice')!.textContent).toBe('Notice translated');
+  view.setRunning(false);
+  view.setRunning(true);
+  view.appendReasoningDelta('New run');
+  flush();
+  expect(rows()).toHaveLength(3);
+  expect(rows()[2].content).toBe('New run');
+});
+
+it.each(['answer', 'tool', 'review', 'phase', 'end'] as const)('ends an active phase when %s arrives', (event) => {
+  view.setRunning(true);
+  view.appendReasoningDelta('A public phase');
+  const reasoning = rows()[0];
+  if (event === 'answer') view.appendDelta('Answer');
+  else if (event === 'tool') view.append({ role: 'tool', text: 'Reading file' });
+  else if (event === 'review') view.appendContent(document.createElement('section'));
+  else if (event === 'phase') view.setActivity('reading');
+  else view.endStream();
+  expect(reasoning.streaming).toBe(false);
+  expect(reasoning.content).toBe('A public phase');
+  expect(reasoning.label).toBe('Reasoning');
+});
+
+it.each(['stop', 'error', 'settle'] as const)('freezes interruption on %s and ignores late callbacks', (event) => {
+  view.setRunning(true);
+  view.appendReasoningDelta('Retained public output');
+  const reasoning = rows()[0];
+  if (event === 'stop') view.requestStop();
+  else if (event === 'error') view.append({ role: 'error', text: 'Service unavailable' });
+  else view.setRunning(false);
+  expect(reasoning.streaming).toBe(false);
+  expect(reasoning.content).toBe('Retained public output');
+  expect(reasoning.label).toBe('Reasoning interrupted');
+  view.appendReasoningDelta('Late output');
+  view.endReasoning();
+  expect(reasoning.label).toBe('Reasoning interrupted');
+  expect(reasoning.content).toBe('Retained public output');
+});
+
+it.each(['clear', 'restore', 'dispose'] as const)(
+  'discards ephemeral output and rejects late work after %s',
+  (event) => {
+    view.setRunning(true);
+    view.appendReasoningDelta('Never persist this');
+    const reasoning = rows()[0];
+    if (event === 'clear') view.clear();
+    else if (event === 'restore') view.restoreHistory([{ role: 'agent', text: 'Stored answer' }]);
+    else view.dispose();
+    view.appendReasoningDelta('Late output');
+    view.endReasoning();
+    flush();
+    expect(rows()).toHaveLength(0);
+    expect(reasoning.content).toBe('');
+    reasoning.dispatchEvent(new CustomEvent('disclosuretoggle'));
+    expect(frames.size).toBe(0);
+  },
+);
+
+it('keeps reasoning out of answer/source/copy/save/apply and message hooks', async () => {
+  view.dispose();
+  const copy = vi.fn().mockResolvedValue(undefined);
+  const save = vi.fn();
+  const apply = vi.fn().mockResolvedValue('verified');
+  const present = vi.fn();
+  const actions = vi.fn().mockReturnValue([]);
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText: copy } });
+  view = new ChatView({
+    onSend: vi.fn(),
+    onSaveMessage: save,
+    onApplyMessage: apply,
+    presentMessage: present,
+    getMessageActions: actions,
+  });
+  document.body.append(view.el);
+  view.setRunning(true);
+  view.appendReasoningDelta('Ephemeral public reasoning');
+  view.appendDelta('**Answer source**', { documentArtifact: true });
+  view.endStream();
+  view.setRunning(false);
+  expect(view.getLastAnswer()).toBe('**Answer source**');
+  expect(view.getLastDocumentBody()).toBe('**Answer source**');
+  expect(view.el.querySelectorAll('[data-source]')).toHaveLength(1);
+  view.el.querySelector<HTMLButtonElement>('.cui-copy')!.click();
+  view.el.querySelector<HTMLButtonElement>('.cui-save')!.click();
+  view.el.querySelector<HTMLButtonElement>('.cui-apply')!.click();
+  await Promise.resolve();
+  expect(copy).toHaveBeenCalledWith('**Answer source**');
+  expect(save).toHaveBeenCalledWith('**Answer source**', undefined);
+  expect(apply).toHaveBeenCalledWith('**Answer source**');
+  expect(present).toHaveBeenCalled();
+  for (const [bubble] of present.mock.calls) expect(bubble.closest('r-reasoning')).toBeNull();
+  expect(actions).toHaveBeenCalledOnce();
+});
+
+it.each([true, false])('reasoning expansion respects current scroll ownership: following=%s', (following) => {
+  const messages = view.el.querySelector<HTMLElement>('.cui-messages')!;
+  view.append({ role: 'agent', text: 'Earlier answer' });
+  Object.defineProperties(messages, {
+    scrollHeight: { configurable: true, value: 1000 },
+    clientHeight: { configurable: true, value: 200 },
+  });
+  messages.scrollTop = following ? 800 : 100;
+  messages.dispatchEvent(new Event('scroll'));
+  view.setRunning(true);
+  view.appendReasoningDelta('Public output');
+  flush();
+  view.endReasoning();
+  flush();
+  vi.mocked(messages.scrollTo).mockClear();
+  toggle(rows()[0]).click();
+  flush();
+  if (following) expect(messages.scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: 'auto' });
+  else {
+    expect(messages.scrollTo).not.toHaveBeenCalled();
+    expect(messages.scrollTop).toBe(100);
+  }
+});
+
+it('buffers surrogate pairs split between deltas before enforcing the UTF-8 cap', () => {
+  view.setRunning(true);
+  view.appendReasoningDelta('a'.repeat(65533) + '\uD83D');
+  flush();
+  expect(rows()[0].content).toBe('a'.repeat(65533));
+  view.appendReasoningDelta('\uDE00');
+  flush();
+  expect(rows()[0].content).toBe('a'.repeat(65533));
+  expect(view.el.querySelectorAll('.cui-reasoning-notice')).toHaveLength(1);
+  expect(new TextEncoder().encode(rows()[0].content).byteLength).toBe(65533);
+});
+
+it('buffers a first high surrogate without an empty row and completes the emoji on the next delta', () => {
+  view.setRunning(true);
+  view.appendReasoningDelta('\uD83D');
+  flush();
+  expect(rows()).toHaveLength(0);
+  view.appendReasoningDelta('\uDE00');
+  flush();
+  expect(rows()[0].content).toBe('😀');
+});
+
+it.each([false, true])('normalizes an orphaned high surrogate at phase end; interrupted=%s', (interrupted) => {
+  view.setRunning(true);
+  view.appendReasoningDelta('\uD83D');
+  if (interrupted) view.requestStop();
+  else view.endReasoning();
+  expect(rows()[0].content).toBe('\uFFFD');
+  expect(rows()[0].streaming).toBe(false);
+  expect(rows()[0].label).toBe(interrupted ? 'Reasoning interrupted' : 'Reasoning');
+});
+
+it('normalizes orphaned low surrogates and does not join a pair across inference phases', () => {
+  view.setRunning(true);
+  view.appendReasoningDelta('\uD83D');
+  view.endReasoning();
+  view.appendReasoningDelta('\uDE00');
+  view.endReasoning();
+  expect(rows().map((row) => row.content)).toEqual(['\uFFFD', '\uFFFD']);
+});
diff --git a/test/unit/chat-view-stop.test.ts b/test/unit/chat-view-stop.test.ts
index ca3b0ff97..3028671a7 100644
--- a/test/unit/chat-view-stop.test.ts
+++ b/test/unit/chat-view-stop.test.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 import { ChatView } from '../../packages/chat-ui/src/chat-view';
 import * as markdown from '../../packages/chat-ui/src/markdown';
+import { MarkdownPresentation } from '../../packages/chat-ui/src/markdown-presentation';
 
 let view: ChatView;
 let frames: FrameRequestCallback[];
@@ -66,7 +67,11 @@ it('acknowledges Stop once, freezes 100 KB of source without parsing, and retain
   frames.splice(0).forEach((frame) => frame(16));
   expect(parse).not.toHaveBeenCalled();
   await vi.runOnlyPendingTimersAsync();
-  expect(parse).toHaveBeenCalledExactlyOnceWith(row.querySelector('.cui-bubble'), source);
+  expect(parse).toHaveBeenCalledExactlyOnceWith(
+    row.querySelector('.cui-bubble'),
+    source,
+    expect.any(MarkdownPresentation),
+  );
   view.setRunning(false);
   expect(button.disabled).toBe(false);
   expect(view.getInput()).toBe('My next request');
diff --git a/test/unit/panel-resize.test.ts b/test/unit/panel-resize.test.ts
index 485921dfd..b6bc4bead 100644
--- a/test/unit/panel-resize.test.ts
+++ b/test/unit/panel-resize.test.ts
@@ -42,3 +42,45 @@ it('resizes by keyboard, clamps width, persists and restores the preference', ()
   expect(panel.querySelector('[role="separator"]')).toBeNull();
   mountPanelResize(panel)();
 });
+
+it('temporarily expands without overwriting dock preference and restores it on collapse', () => {
+  const original = window.innerWidth;
+  Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1600 });
+  localStorage.setItem('agent-panel-width', '504');
+  const panel = document.createElement('div');
+  const expand = document.createElement('button');
+  document.body.append(panel, expand);
+  const dispose = mountPanelResize(panel, { expandButton: expand });
+  try {
+    expand.click();
+    expect(expand.getAttribute('aria-expanded')).toBe('true');
+    expect(document.documentElement.style.getPropertyValue('--agent-panel-width')).toBe('1040px');
+    expect(localStorage.getItem('agent-panel-width')).toBe('504');
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 });
+    window.dispatchEvent(new Event('resize'));
+    expect(document.documentElement.style.getPropertyValue('--agent-panel-width')).toBe('840px');
+    expand.click();
+    expect(document.documentElement.style.getPropertyValue('--agent-panel-width')).toBe('504px');
+    expect(localStorage.getItem('agent-panel-width')).toBe('504');
+  } finally {
+    dispose();
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: original });
+  }
+});
+
+it.each([1040, 1200])('does not offer expansion that would shrink or retain a %ipx dock', (preferred) => {
+  const original = window.innerWidth;
+  Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1920 });
+  localStorage.setItem('agent-panel-width', String(preferred));
+  const panel = document.createElement('div');
+  const expand = document.createElement('button');
+  document.body.append(panel, expand);
+  const dispose = mountPanelResize(panel, { expandButton: expand });
+  try {
+    expect(expand.hidden).toBe(true);
+    expect(document.documentElement.style.getPropertyValue('--agent-panel-width')).toBe(`${preferred}px`);
+  } finally {
+    dispose();
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: original });
+  }
+});
diff --git a/test/unit/site-token-consistency.test.ts b/test/unit/site-token-consistency.test.ts
index a29f6ddc4..ee089fa1f 100644
--- a/test/unit/site-token-consistency.test.ts
+++ b/test/unit/site-token-consistency.test.ts
@@ -127,3 +127,7 @@ it('rejects unary signs prefixed to CSS functions in every authored and generate
   for (const { rel, html } of generate({ outDir: null }))
     expect(invalidTokenArithmetic(authoredStyles(rel, html)), rel).toEqual([]);
 });
+it('audits shared Markdown block styles as a standalone component consumer', async () => {
+  const { designTokenSources } = await import('../../bin/design-tokens.mjs');
+  expect(designTokenSources(process.cwd())).toContain('packages/chat-ui/src/markdown-styles.ts');
+});