dsh-edit-turn 0.3.3 → 0.5.2

package/lib/client.js

@@ -22,6 +22,9 @@ window.__ModuleLoader__.load({
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
 
     const react = require('react')
+    // DOM injection has to land before the browser paints, or the host's own
+    // buttons are visible for a frame and ours pop in after them.
+    const useBrowserLayoutEffect = typeof react.useLayoutEffect === 'function' ? react.useLayoutEffect : react.useEffect
     const jsxRuntime = require('react/jsx-runtime')
     const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
     const { jsx, jsxs, Fragment } = jsxRuntime
@@ -42,7 +45,7 @@ window.__ModuleLoader__.load({
     const RERUN_PREFIX = '/dsh-rerun-turn'
 
     /** Keep in sync with package.json and lib/index.js. */
-    const PLUGIN_VERSION = '0.3.3'
+    const PLUGIN_VERSION = '0.5.2'
 
     // --- copy -----------------------------------------------------------------
 
@@ -65,11 +68,41 @@ window.__ModuleLoader__.load({
       'editor.rerun': '重跑',
       'editor.save-reply': '保存',
       'editor.block': '编辑哪一块',
+      'editor.block.all': '全部',
+      'config.style': '编辑器样式',
+      'config.placement': '编辑器位置',
+      'config.height': '编辑器高度',
+      'height.max': '一轮最大',
+      'height.content': '随内容',
+      'height.fill': '全部铺满',
+      'config.summary.height.max': '一轮最大',
+      'config.summary.height.content': '随内容',
+      'config.summary.height.fill': '全部铺满',
+      'config.hint.height.max': '取这一轮所有思维链/正文里的最大高度，切换块时框不变。',
+      'config.hint.height.content': '框高跟着当前块的内容走，切换块时框会变。',
+      'config.hint.height.fill': '普通块按一轮最大；选「全部」时自动铺满对话区到输入框之间的整段高度（刚好触碰上下边界），只有一个滚动条。',
+      'placement.overlay': '浮层',
+      'placement.inline': '页面内联',
+      'placement.legacy': '整行旧版',
+      'config.summary.legacy': '整行旧版',
+      'config.hint.legacy': '整条 assistant 行套框、正文保持旧的内部滚动；同样向下盖住 action bar，功能键在左下。',
+      'config.summary.overlay': '浮层',
+      'config.summary.inline': '页面内联',
+      'config.hint.overlay': '悬浮在视口内，长内容在编辑框内滚动。',
+      'config.hint.inline': '按页面坐标铺在消息上，跟随页面滚动，高度按内容展开，不再截到视口。',
+      'config.summary.frame': '整行描边',
+      'config.summary.bubble': '贴合气泡',
+      'config.summary.center': '居中面板',
+      'config.hint.frame': '一圈描边套住整条消息行，正文输入框落在消息文字上，按钮在右上角。',
+      'config.hint.bubble': '编辑框精确等于消息气泡的大小。',
+      'config.hint.center': '大号居中面板，输入框随内容增长。',
+      'style.frame': '整行',
+      'style.bubble': '气泡',
+      'style.center': '居中',
       'editor.block.text': '正文',
       'editor.block.reasoning': '思维链',
       'editor.placeholder-block': '只改这一块；工具调用、其余内容和后续对话保持不变。',
       'confirm.body-block': '确认后只替换这一块，工具调用、其他内容和后续对话保持不变。原始会话日志不会改写。',
-      'editor.patch-note': '思维链已改写（模型可见）',
       'editor.review': '确认执行',
       'editor.cancel': '取消',
       'editor.pending': '正在保存…',
@@ -98,6 +131,7 @@ window.__ModuleLoader__.load({
       'error.already-retired': '这一轮的内容已经不在当前上下文里了。',
       'error.rerunning': '已经有一次重跑在进行中，请等它结束。',
       'error.internal': '服务器内部错误，请稍后重试。',
+      'error.projection-missing': '编辑投影未注册，请重启 DSH 后重试。',
       'error.attachment-refused': '附件没能存下来，本次修改没有执行。',
       'error.attachments-dropped': '已保存，但这条消息的图片或文件没能保留：当前部署没有可用的附件存储。',
       'error.attachment-unreadable': '这个附件读不出来，请换一个文件。',
@@ -120,11 +154,41 @@ window.__ModuleLoader__.load({
       'editor.rerun': 'Re-run',
       'editor.save-reply': 'Save',
       'editor.block': 'Block',
+      'editor.block.all': 'All blocks',
+      'config.style': 'Editor style',
+      'config.placement': 'Editor placement',
+      'config.height': 'Editor height',
+      'height.max': 'Turn max',
+      'height.content': 'Content',
+      'height.fill': 'Fill when all',
+      'config.summary.height.max': 'Turn max',
+      'config.summary.height.content': 'Content',
+      'config.summary.height.fill': 'Fill when all',
+      'config.hint.height.max': 'Uses the tallest reasoning/text block of the turn, so the box does not resize when switching.',
+      'config.hint.height.content': 'The box follows the current block, so it resizes when switching.',
+      'config.hint.height.fill': 'Single blocks use the turn max; the all-blocks page fills the whole band between the conversation top and the composer, with one scrollbar.',
+      'placement.overlay': 'Overlay',
+      'placement.inline': 'In-page',
+      'placement.legacy': 'Legacy row',
+      'config.summary.legacy': 'Legacy row',
+      'config.hint.legacy': 'Frames the whole assistant row and keeps the old inner scroll; still covers the action bar, with the controls at the bottom left.',
+      'config.summary.overlay': 'Overlay',
+      'config.summary.inline': 'In-page',
+      'config.hint.overlay': 'Floats inside the viewport; long content scrolls inside the editor.',
+      'config.hint.inline': 'Lays over the message in page coordinates and scrolls with the page; it grows with the content instead of being clipped to the viewport.',
+      'config.summary.frame': 'Row frame',
+      'config.summary.bubble': 'Exact bubble',
+      'config.summary.center': 'Centered panel',
+      'config.hint.frame': 'Outline the whole message row; the textarea sits on the message text and the actions move to the top-right.',
+      'config.hint.bubble': 'The editor is exactly the message bubble.',
+      'config.hint.center': 'A large centred panel whose textarea grows with the content.',
+      'style.frame': 'Frame',
+      'style.bubble': 'Bubble',
+      'style.center': 'Center',
       'editor.block.text': 'Answer',
       'editor.block.reasoning': 'Reasoning',
       'editor.placeholder-block': 'Only this block changes; tool calls, the rest of the reply and later turns stay.',
       'confirm.body-block': 'Confirming replaces only this block; tool calls, the rest of the reply and later turns stay. The original session log is never rewritten.',
-      'editor.patch-note': 'Reasoning patched (model-visible)',
       'editor.review': 'Confirm',
       'editor.cancel': 'Cancel',
       'editor.pending': 'Working...',
@@ -153,6 +217,7 @@ window.__ModuleLoader__.load({
       'error.already-retired': 'This turn is no longer part of the current context.',
       'error.rerunning': 'A re-run is already in flight; wait for it to finish.',
       'error.internal': 'The host hit an internal error; try again shortly.',
+      'error.projection-missing': 'The edit projection is not registered; restart DSH and retry.',
       'error.attachment-refused': 'The attachment could not be stored, so nothing was changed.',
       'error.attachments-dropped': 'Saved, but the images or files on this message could not be kept: this deployment mounts no attachment store.',
       'error.attachment-unreadable': 'That attachment could not be read; try another file.',
@@ -172,6 +237,92 @@ window.__ModuleLoader__.load({
     }
 
     // --- style ----------------------------------------------------------------
+    /**
+     * Take the active skin's own surfaces when they are actually opaque.
+     *
+     * A skin may paint its surfaces translucent so artwork shows through, and it
+     * compensates with its own text halo - which a plugin element does not have.
+     * So the theme's surfaces are adopted only after resolving them to a real
+     * colour and finding them opaque; a translucent skin leaves this editor on
+     * its own opaque palette. Colours, radii and shadows need no such guard:
+     * those are hue and geometry, and they survive any skin.
+     *
+     * The result is written as inline variables on `body`, which beats both the
+     * `:root` defaults and the dark-theme rule below them.
+     *
+     * @returns nothing; the stylesheet defaults stand when no probe is possible.
+     */
+    function resolveSkinPalette() {
+      if (typeof document === 'undefined' || !document.body || typeof document.createElement !== 'function') return
+      if (typeof getComputedStyle !== 'function') return
+      const probe = document.createElement('span')
+      probe.setAttribute('aria-hidden', 'true')
+      probe.style.cssText = 'position:absolute;left:-9999px;top:0;width:0;height:0;pointer-events:none'
+      document.body.appendChild(probe)
+      const read = (name) => {
+        try {
+          probe.style.color = `var(${name})`
+          const match = /rgba?\(([^)]+)\)/.exec(getComputedStyle(probe).color)
+          if (match === null) return null
+          const parts = match[1].split(',').map((value) => Number.parseFloat(value))
+          if (parts.length < 3 || parts.some((value) => !Number.isFinite(value))) return null
+          return { r: parts[0], g: parts[1], b: parts[2], a: parts.length > 3 ? parts[3] : 1 }
+        } catch {
+          return null
+        }
+      }
+      const css = (color) => `rgba(${Math.round(color.r)},${Math.round(color.g)},${Math.round(color.b)},${color.a})`
+      const style = document.body.style
+      const setVar = (name, value) => {
+        if (style === undefined || style === null) return
+        if (typeof style.setProperty === 'function') style.setProperty(name, value)
+        else style[name] = value
+      }
+      const clearVar = (name) => {
+        if (style === undefined || style === null) return
+        if (typeof style.removeProperty === 'function') style.removeProperty(name)
+        else delete style[name]
+      }
+      try {
+        const panel = read('--dsw-alias-bg-layer-1')
+        const layer2 = read('--dsw-alias-bg-layer-2')
+        const accent = read('--dsw-alias-button-primary-fill')
+        // The skin's surface HUE is taken; its transparency is not. A skin paints
+        // its own elements translucent over artwork and gives them a text halo -
+        // a plugin element has none, so the same colour is adopted at full
+        // opacity. That keeps a dark artwork skin dark (instead of falling back
+        // to this plugin's light palette, which is what a skin that never sets
+        // `data-ds-dark-theme` used to get) without ever painting text on art.
+        const solid = (color) => (color === null ? null : { r: color.r, g: color.g, b: color.b, a: 1 })
+        const panelSolid = solid(panel)
+        if (panelSolid === null) {
+          clearVar('--dshet-panel')
+          clearVar('--dshet-chip')
+          clearVar('--dshet-field')
+        } else {
+          const fieldSolid = solid(layer2) ?? panelSolid
+          setVar('--dshet-panel', css(panelSolid))
+          setVar('--dshet-chip', css(panelSolid))
+          setVar('--dshet-field', css(fieldSolid))
+        }
+        if (accent === null) {
+          clearVar('--dshet-on-accent')
+        } else {
+          // The label that sits ON the accent fill: the platform exposes no
+          // inverse token here, so it is picked from the fill's own luminance.
+          const channel = (value) => {
+            const v = value / 255
+            return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+          }
+          const luminance = 0.2126 * channel(accent.r) + 0.7152 * channel(accent.g) + 0.0722 * channel(accent.b)
+          setVar('--dshet-on-accent', luminance > 0.35 ? '#0f1115' : '#fff')
+        }
+      } finally {
+        if (typeof probe.remove === 'function') probe.remove()
+      }
+    }
+
+
 
     // A skin is free to make the theme's surface colours translucent - that is
     // the point of one: the artwork shows through, and the skin compensates by
@@ -186,8 +337,21 @@ window.__ModuleLoader__.load({
     // UI packages use. Theme variables are still used for *colours* (hue,
     // semantic tones) - those survive a skin; it is alpha that does not.
     const CSS = [
-      ':root{--dshet-panel:rgba(255,255,255,.96);--dshet-field:rgba(244,247,252,.98);--dshet-chip:rgba(255,255,255,.82);--dshet-line:rgba(16,24,40,.16);--dshet-ink:#0f1524;--dshet-ink-dim:#4b5872;--dshet-hover:rgba(16,24,40,.07);--dshet-shadow:0 12px 32px rgba(9,18,40,.22);--dshet-accent:#4d6bfe;--dshet-on-accent:#fff}',
-      'body[data-ds-dark-theme]{--dshet-panel:rgba(22,28,44,.96);--dshet-field:rgba(14,19,33,.98);--dshet-chip:rgba(22,28,44,.82);--dshet-line:rgba(255,255,255,.18);--dshet-ink:#eef2f8;--dshet-ink-dim:#a6b1c6;--dshet-hover:rgba(255,255,255,.11);--dshet-shadow:0 12px 32px rgba(0,0,0,.5)}',
+      // Colours, radii and shadows come from the active theme's own tokens, so a
+      // skin restyles this editor the way it restyles the rest of the app; every
+      // one of them falls back to the value this plugin shipped with. The palette
+      // hangs off `body`, not `:root`: a custom property substitutes against the
+      // values in scope where it is DEFINED, and the theme declares its tokens on
+      // body - on `:root` every reference would silently fall back. Only the
+      // SURFACES stay namespaced: a skin is free to make its own surfaces
+      // translucent (that is the point of one), and a plugin's element has no
+      // artwork-aware halo to stay readable behind. The surfaces are taken from
+      // the theme too, but only when a runtime probe finds them opaque (see
+      // resolveSkinPalette).
+      'body{--dshet-panel:rgba(255,255,255,.96);--dshet-field:rgba(244,247,252,.98);--dshet-chip:rgba(255,255,255,.82);--dshet-line:var(--dsw-alias-border-l2,rgba(16,24,40,.16));--dshet-ink:var(--dsw-alias-label-primary,#0f1524);--dshet-ink-dim:var(--dsw-alias-label-secondary,#4b5872);--dshet-ink-soft:var(--dsw-alias-label-tertiary,#81858c);--dshet-hover:rgba(16,24,40,.07);--dshet-shadow:var(--dsw-shadow-lv3,0 12px 32px rgba(9,18,40,.22));--dshet-accent:var(--dsw-alias-button-primary-fill,#4d6bfe);--dshet-on-accent:#fff;--dshet-bubble:var(--dsw-specific-bubble,var(--dshet-field));--dshet-radius-panel:var(--dsw-radius-panel,16px);--dshet-radius-xl:var(--dsw-radius-xl,16px);--dshet-radius-lg:var(--dsw-radius-lg,16px);--dshet-radius-md:var(--dsw-radius-md,12px);--dshet-radius-sm:var(--dsw-radius-sm,8px)}',
+      'body[data-ds-dark-theme]{--dshet-panel:rgba(22,28,44,.96);--dshet-field:rgba(14,19,33,.98);--dshet-chip:rgba(22,28,44,.82);--dshet-hover:rgba(255,255,255,.11);--dshet-shadow:var(--dsw-shadow-lv3,0 12px 32px rgba(0,0,0,.5))}',
+      // A hover wash that follows the skin's ink instead of a fixed grey.
+      '@supports (color:color-mix(in srgb,red,blue)){body{--dshet-hover:color-mix(in srgb,var(--dsw-alias-label-primary) 8%,transparent)}body[data-ds-dark-theme]{--dshet-hover:color-mix(in srgb,var(--dsw-alias-label-primary) 14%,transparent)}}',
       // The pencil sits among the platform's own action icons, so it takes the
       // platform's icon colour: our own `--dshet-ink-dim` is a blue-grey and
       // read as a different, "active" icon next to the neutral grey ones. The
@@ -213,7 +377,7 @@ window.__ModuleLoader__.load({
       // inherit picks up the row's 16px, fixed ignores the reader's content
       // font setting, and either way the rewritten text changed size against
       // the bubble it replaces.
-      '.dshet-revision{box-sizing:border-box;align-self:flex-end;width:fit-content;max-width:min(72ch,86%);margin:6px 0 6px auto;padding:9px 14px;border-radius:16px;background:var(--dshet-field);color:var(--dshet-ink);font:inherit;font-size:var(--dsh-content-font-size,14px);line-height:calc(22px + var(--dsh-content-font-delta,0px));white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}',
+      '.dshet-revision{box-sizing:border-box;align-self:flex-end;width:fit-content;max-width:min(72ch,86%);margin:6px 0 6px auto;padding:9px 14px;border-radius:var(--dshet-radius-xl);background:var(--dshet-bubble);color:var(--dshet-ink);font:inherit;font-size:var(--dsh-content-font-size,14px);line-height:calc(22px + var(--dsh-content-font-delta,0px));white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}',
       '.dshet-revision:empty{display:none}',
       '.dshet-revision{position:relative}',
       // Fallback only: a row with no action bar to keep is displayed away
@@ -222,6 +386,9 @@ window.__ModuleLoader__.load({
       // positioned button inside the bubble used to land on the last line, which
       // is how the rewritten prompt got covered up.
       '.dshet-revision.dshet-revision-action{padding-inline-end:40px}',
+      '.dshet-revision-text{display:block}',
+      '.dshet-revision-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}',
+      '.dshet-revision-file{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 6px 2px 2px;border:1px solid var(--dshet-line);border-radius:var(--dshet-radius-sm);background:var(--dshet-chip);font-size:12px;line-height:18px}',
       '.dshet-revision .dshet-action-host{position:absolute;inset-inline-end:6px;top:6px;opacity:0;transition:opacity .12s ease}',
       '.dshet-revision:hover .dshet-action-host,.dshet-revision:focus-within .dshet-action-host{opacity:1}',
       // A sibling plugin can append its own button (dsh-delete-turn's bin) into
@@ -260,11 +427,21 @@ window.__ModuleLoader__.load({
       // composition and its clicks a piece at a time. The layer covers the
       // viewport but only the box itself takes pointer events, and the box is
       // positioned under its row by `placeEditor`.
+      '.dshet-layer[data-dshet-inline="1"]{position:absolute;left:0;top:0;right:auto;bottom:auto;width:100%;height:0}',
       '.dshet-layer{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:40}',
       '.dshet-layer .dshet-editor{position:absolute;pointer-events:auto}',
-      '.dshet-editor{display:flex;flex-direction:column;max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain;margin:0;border:1px solid var(--dshet-line);border-radius:16px;background:var(--dshet-panel);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--dshet-shadow);color:var(--dshet-ink);transition:border-color .12s}',
+      '.dshet-editor{display:flex;flex-direction:column;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;margin:0;border:1px solid var(--dshet-line);border-radius:var(--dshet-radius-panel);background:var(--dshet-panel);backdrop-filter:blur(var(--dsh-input-card-blur,18px)) saturate(1.2);box-shadow:var(--dshet-shadow);color:var(--dshet-ink);transition:border-color .12s}',
+      '.dshet-editor[data-dshet-drop="1"]{outline:2px dashed #4a7dff;outline-offset:-4px}',
       '.dshet-editor:focus-within{border-color:var(--dsw-alias-button-primary-fill,var(--dshet-accent))}',
-      '.dshet-editor textarea{display:block;width:100%;min-height:47px;max-height:46vh;overflow-y:auto;resize:none;box-sizing:border-box;padding:11px 14px 0;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--dsh-content-font-size,14px);line-height:calc(22px + var(--dsh-content-font-delta,0px));outline:none}',
+      '.dshet-editor[data-dshet-inplace="1"]{overflow:hidden;border:1.5px solid var(--dsw-alias-button-primary-fill,#4a7dff);border-radius:var(--dshet-radius-md);background:var(--dshet-panel);backdrop-filter:none;box-shadow:none}',
+      '.dshet-editor[data-dshet-inplace="1"] textarea{position:absolute;min-height:0;max-height:none;padding:6px 10px;border:0;border-radius:8px;background:transparent;overflow-y:auto}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-footer{position:absolute;top:auto;left:0;right:0;bottom:0;height:46px;align-items:center;padding:6px 10px;box-sizing:border-box;background:var(--dshet-panel);border-radius:0 0 var(--dshet-radius-md) var(--dshet-radius-md);gap:6px}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-btn{padding:2px 8px;font-size:12px;line-height:18px;border-radius:8px}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-pick{position:static;top:auto;left:auto;padding:0;background:transparent;border-radius:0}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-note,.dshet-editor[data-dshet-inplace="1"] .dshet-warn{position:absolute;left:8px;bottom:6px;max-width:60%;margin:0;background:var(--dshet-panel);border-radius:8px;padding:2px 6px}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-error{position:absolute;left:8px;right:8px;bottom:52px;max-width:none;margin:0;padding:6px 10px;border:1px solid var(--dshet-line);border-radius:8px;background:var(--dshet-panel);box-shadow:var(--dshet-shadow);font-weight:500}',
+
+      '.dshet-editor textarea{display:block;width:100%;min-height:47px;max-height:min(46vh,420px);overflow-y:auto;resize:none;box-sizing:border-box;padding:11px 14px 0;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--dsh-content-font-size,14px);line-height:calc(22px + var(--dsh-content-font-delta,0px));outline:none}',
       '.dshet-editor textarea::placeholder{color:var(--dshet-ink-dim)}',
       '.dshet-editor textarea:disabled{opacity:.65}',
       // The blocks this message carries: one chip each, drawn from the same
@@ -280,8 +457,9 @@ window.__ModuleLoader__.load({
       '.dshet-chip-remove:hover:not(:disabled){background:var(--dshet-hover);color:var(--dsw-alias-state-error-primary,#c93a31)}',
       '.dshet-chip-remove:focus-visible{outline:2px solid var(--dsw-alias-button-primary-fill,var(--dshet-accent));outline-offset:1px}',
       '.dshet-chip-remove:disabled{cursor:default;opacity:.5}',
-      '.dshet-attach-row{display:flex;align-items:center;gap:8px;margin:8px 14px 0}',
-      '.dshet-attach{padding:3px 10px;border:1px dashed var(--dshet-line);border-radius:999px;background:transparent;color:var(--dshet-ink-dim);font:inherit;font-size:12px;line-height:18px;cursor:pointer;transition:background-color .12s,color .12s}',
+      '.dshet-attach-row{position:absolute;left:12px;bottom:10px;z-index:2;display:flex;align-items:center;margin:0}',
+      '.dshet-attach{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:1px 6px;box-sizing:border-box;border:0;border-radius:999px;background:#f5f6f7;color:#0f1115;font:inherit;line-height:1;cursor:pointer;outline:none;box-shadow:none;-webkit-appearance:none;transition:background-color .12s,color .12s}',
+      '.dshet-attach svg{width:14px;height:14px;display:block;stroke:currentColor;fill:none;stroke-width:1.3;}',
       '.dshet-attach:hover:not(:disabled){background:var(--dshet-hover);color:var(--dshet-ink)}',
       '.dshet-attach:focus-visible{outline:2px solid var(--dsw-alias-button-primary-fill,var(--dshet-accent));outline-offset:2px}',
       '.dshet-attach:disabled{cursor:default;opacity:.5}',
@@ -290,19 +468,46 @@ window.__ModuleLoader__.load({
       '.dshet-note{color:var(--dshet-ink-dim)}',
       '.dshet-warn{color:var(--dsw-alias-state-warning-primary,#a2650a)}',
       '.dshet-error{color:var(--dsw-alias-state-error-primary,#c93a31)}',
-      '.dshet-footer{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:4px 10px 10px;background:var(--dshet-panel);backdrop-filter:blur(18px) saturate(1.2)}',
+      '.dshet-footer{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:6px;height:46px;padding:6px 10px;box-sizing:border-box;background:var(--dshet-panel);border-radius:0 0 var(--dshet-radius-panel) var(--dshet-radius-panel)}',
+      '.dshet-footer-actions{display:flex;align-items:center;gap:6px}',
+      '.dshet-all-nav{position:sticky;top:0;z-index:2;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:28px;padding:4px 0 6px;background:var(--dshet-panel);overflow-x:auto;scrollbar-width:none}',
+      '.dshet-all-nav button{flex:none;border:0;border-radius:999px;background:var(--dshet-hover);color:var(--dshet-ink-dim);font:inherit;font-size:12px;line-height:18px;padding:3px 10px;cursor:pointer;white-space:nowrap}',
+      '.dshet-all-nav button:hover{color:var(--dshet-ink)}',
+      '.dshet-all{position:absolute;left:8px;right:8px;top:6px;bottom:52px;overflow-y:auto;display:flex;flex-direction:column;padding:2px 4px 4px}',
+      '.dshet-all-block{display:flex;flex-direction:column;padding:6px 0 8px}',
+      '.dshet-all-block:first-child{padding-top:2px}',
+      '.dshet-all-head{display:flex;width:100%;box-sizing:border-box;align-items:center;gap:8px;font-size:11px;color:var(--dshet-ink-dim);padding:0 2px 4px}',
+      '.dshet-all-head>span:first-child{background:var(--dshet-hover);border-radius:6px;padding:1px 6px;white-space:nowrap}',
+      '.dshet-all-line{flex:1;height:1px;background:var(--dshet-line);opacity:.55}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-all .dshet-all-area{position:static;left:auto;top:auto;width:100%;height:auto;min-height:32px;max-height:none;padding:0 2px;border-radius:0;overflow:hidden}',
+      '.dshet-all-area{display:block;width:100%;min-height:32px;max-height:none;box-sizing:border-box;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--dsh-content-font-size,14px);line-height:calc(22px + var(--dsh-content-font-delta,0px));resize:none;outline:none;overflow:hidden;scrollbar-width:none;padding:0 2px}',
+      '.dshet-editor .dshet-footer .dshet-btn{height:34px;box-sizing:border-box;padding:0 14px}',
       '.dshet-btn{padding:6px 16px;border:1px solid var(--dshet-line);border-radius:999px;background:var(--dshet-field);color:var(--dshet-ink);font:inherit;font-size:13px;line-height:20px;cursor:pointer;transition:background-color .12s,border-color .12s}',
       '.dshet-btn:hover:not(:disabled){background:var(--dshet-hover)}',
       '.dshet-btn:focus-visible{outline:2px solid var(--dsw-alias-button-primary-fill,var(--dshet-accent));outline-offset:2px}',
       '.dshet-btn:disabled{cursor:default;opacity:.5}',
+      '.dshet-btn-save{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#81858c}',
+      '.dshet-btn-save:hover:not(:disabled){background:var(--dshet-hover)}',
+      '.dshet-btn-save svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}',
+      '.dshet-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}',
       '.dshet-btn-primary{border-color:var(--dsw-alias-button-primary-fill,var(--dshet-accent));background:var(--dsw-alias-button-primary-fill,var(--dshet-accent));color:var(--dsw-alias-label-primary-foreground,var(--dshet-on-accent))}',
       '.dshet-btn-primary:hover:not(:disabled){background:var(--dsw-alias-button-primary-fill,var(--dshet-accent));filter:brightness(1.08)}',
-      '.dshet-pick{display:flex;align-items:center;gap:8px;padding:8px 12px 0;font-size:12px;color:var(--dshet-ink-dim)}',
-      '.dshet-select{padding:3px 8px;border:1px solid var(--dshet-line);border-radius:8px;background:var(--dshet-field);color:var(--dshet-ink);font:inherit;font-size:12px;line-height:18px}',
+'.dshet-btn.dshet-btn-save{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dshet-ink-soft);filter:none}',
+      '.dshet-btn.dshet-btn-save:hover:not(:disabled){background:var(--dshet-hover);filter:none}',
+      '.dshet-btn.dshet-btn-save.dshet-btn-confirm{background:var(--dshet-hover);box-shadow:inset 0 0 0 1.5px var(--dshet-accent)}',
+      '.dshet-editor .dshet-footer .dshet-btn.dshet-btn-icon{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#81858c;filter:none}',
+      '.dshet-editor .dshet-footer .dshet-btn.dshet-btn-icon:hover:not(:disabled){background:var(--dshet-hover);color:var(--dshet-ink-soft);filter:none}',
+      '.dshet-btn-icon svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-btn.dshet-btn-save{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#81858c;filter:none}',
+      '.dshet-editor[data-dshet-inplace="1"] .dshet-btn.dshet-btn-save:hover:not(:disabled){background:var(--dshet-hover);filter:none}',
+      '.dshet-pick{display:flex;align-items:center;gap:4px;padding:0;font-size:12px;color:var(--dshet-ink-dim)}',
+      '.dshet-config{display:flex;flex-direction:column;gap:10px}',
+      '.dshet-config-row{display:flex;align-items:center;justify-content:space-between;gap:12px}',
+      '.dshet-config-hint{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:13px;line-height:20px}',
+      '.dshet-select{padding:3px 8px;border:1px solid var(--dshet-line);border-radius:var(--dshet-radius-sm);background:var(--dshet-field);color:var(--dshet-ink);font:inherit;font-size:12px;line-height:18px}',
+      '.dshet-pick .dshet-select{height:28px;padding:0 6px;border:0;border-radius:8px;background:transparent;line-height:1;cursor:pointer;outline:none}',
+      '.dshet-pick .dshet-select:hover{background:var(--dshet-hover)}',
       '[data-dshet-patch]{white-space:pre-wrap}',
-      '.dshet-patch-note{margin:6px 0;padding:6px 10px;border:1px dashed var(--dshet-line);border-radius:10px;background:var(--dshet-panel);color:var(--dshet-ink-dim);font-size:12px;line-height:18px}',
-      '.dshet-patch-note summary{cursor:pointer}',
-      '.dshet-patch-note-body{margin:6px 0 0;white-space:pre-wrap;color:var(--dshet-ink);font-size:12px;line-height:18px}',
       '.dshet-notice{margin:4px 0;padding:6px 10px;border:1px solid var(--dshet-line);border-radius:8px;background:var(--dshet-panel);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--dshet-shadow);color:var(--dsw-alias-state-error-primary,#c93a31);font-size:12px;line-height:19px}',
       '@media (prefers-reduced-motion:reduce){.dshet-collapsing{transition:none}.dshet-floating{transition:none}}',
     ].join('')
@@ -365,6 +570,8 @@ window.__ModuleLoader__.load({
         this.editorBox = null
         this.editorRow = null
         this.editorAnchor = null
+        this.editorMode = 'reply'
+        this.editorStyle = 'frame'
         this.editorFocus = false
         this.editorDraft = ''
         // The block list being edited: what the carrier will be rebuilt from.
@@ -506,6 +713,12 @@ window.__ModuleLoader__.load({
               // replies are indexed by it too.
               if (typeof reply.messageId === 'string' && reply.messageId !== '') repliesByMessage.set(reply.messageId, reply)
             }
+            let preferredStyle = data.config && (data.config.editorStyle === 'bubble' || data.config.editorStyle === 'center')
+              ? data.config.editorStyle
+              : 'frame'
+            const savedStyle = readStoredEditorStyle()
+            if (savedStyle !== null) preferredStyle = savedStyle
+            this.editorStyle = preferredStyle
             this.publish({
               hidden,
               revisions,
@@ -515,7 +728,11 @@ window.__ModuleLoader__.load({
               patches,
               patchBySeq,
               replyMode: data.mode === 'patch' ? 'patch' : 'replay',
+              editorStyle: data.config && (data.config.editorStyle === 'bubble' || data.config.editorStyle === 'center')
+                ? data.config.editorStyle
+                : 'frame',
               surfaceReady: true,
+              busy: data.busy === true,
               loaded: true,
               loadError: false,
               confirmStep: !(data.config && data.config.confirm === false),
@@ -530,6 +747,14 @@ window.__ModuleLoader__.load({
           })
           .finally(() => {
             this.inflight = null
+            // While the session is replying, the editor stays open but cannot
+            // save; re-check so the banner clears itself when the turn ends.
+            if (this.view.busy === true && this.editor !== null) {
+              const token = (this.busyToken = (this.busyToken ?? 0) + 1)
+              window.setTimeout(() => {
+                if (this.busyToken === token && this.editor !== null) this.load()
+              }, 3000)
+            }
           })
         this.inflight = pending
         return pending
@@ -553,7 +778,11 @@ window.__ModuleLoader__.load({
         const current = same && typeof this.editorBlockIndex === 'number'
           ? replyBlocks.find((block) => block.index === this.editorBlockIndex)
           : undefined
-        const chosen = current ?? requested ?? replyBlocks.find((block) => block.kind === 'text') ?? replyBlocks[0]
+        // A fresh open always lands on the answer text: a turn's block list is
+        // mostly reasoning now, and opening on a chain-of-thought is not what
+        // the pencil means. The picker is how the user goes to a thought.
+        const answerBlock = [...replyBlocks].reverse().find((block) => block.kind === 'text')
+        const chosen = (same ? current : undefined) ?? answerBlock ?? requested ?? replyBlocks[0]
         const normalized = replyBlocks.length > 0
           ? {
               ...target,
@@ -564,12 +793,16 @@ window.__ModuleLoader__.load({
             }
           : target
         this.editor = normalized
+        this.editorMode = normalized.mode === 'prompt' ? 'prompt' : 'reply'
         this.editorAnchor = target.anchor !== undefined && target.anchor !== null && target.anchor.isConnected === true
           ? target.anchor
           : null
         this.editorBlocks = replyBlocks
         this.editorBlockIndex = chosen === undefined ? null : chosen.index
         this.editorBlockKind = chosen === undefined ? null : chosen.kind
+        this.editorTargetSeq = chosen !== undefined && typeof chosen.seq === 'number' ? chosen.seq : null
+        this.editorAll = false
+        this.editorAllDrafts = new Map()
         if (!same) {
           this.editorDraft = chosen === undefined ? target.text : chosen.text
           this.editorParts = blocksToParts(normalized, this.sessionId)
@@ -596,6 +829,8 @@ window.__ModuleLoader__.load({
           blocks: replyBlocks,
           blockIndex: this.editorBlockIndex,
           blockKind: this.editorBlockKind,
+          targetSeq: this.editorTargetSeq,
+          allBlocks: false,
           confirming: false,
           failure: null,
         })
@@ -629,17 +864,39 @@ window.__ModuleLoader__.load({
       // Pick another block of the same reply. The editor is rebuilt by the
       // block index in its marker; the draft becomes that block's current
       // (already projected) text.
-      selectBlock(index) {
+      selectBlock(value) {
         if (this.view.pending) return
         const target = this.editor
         if (target === null || !Array.isArray(target.blocks)) return
-        const block = target.blocks.find((entry) => entry.index === index)
-        if (block === undefined || block.kind === undefined) return
+        const raw = String(value)
+        if (raw === 'all') {
+          this.editorAll = true
+          this.editorAllDrafts = new Map(target.blocks.map((block) => [`${typeof block.seq === 'number' ? block.seq : ''}:${block.index}`, block.text]))
+          this.editorElement = null
+          this.publish({ allBlocks: true, blockIndex: null, blockKind: null, targetSeq: null, failure: null })
+          return
+        }
+        const split = raw.includes(':') ? raw.split(':') : ['', raw]
+        const seq = split[0] === '' ? null : Number(split[0])
+        const index = Number(split[1])
+        const block = target.blocks.find((entry) =>
+          entry.index === index && (seq === null || entry.seq === undefined || entry.seq === seq))
+        // Leaving the all-blocks view has to say so: the picker change alone left
+        // `allBlocks` true, so the box was redrawn as the all view again with a
+        // picker that said "正文" - two fields over a single-block selection.
+        this.editorAll = false
+        if (block === undefined || block.kind === undefined) {
+          // Nothing matched: still leave the all view, keeping the block that was
+          // selected before it, so the picker describes the box again.
+          this.publish({ allBlocks: false, failure: null })
+          return
+        }
         this.editorBlockIndex = block.index
         this.editorBlockKind = block.kind
+        this.editorTargetSeq = typeof block.seq === 'number' ? block.seq : this.editorTargetSeq
         this.editorDraft = block.text
         this.editorElement = null
-        this.publish({ draft: block.text, blockIndex: block.index, blockKind: block.kind, failure: null })
+        this.publish({ draft: block.text, blockIndex: block.index, blockKind: block.kind, targetSeq: this.editorTargetSeq, allBlocks: false, failure: null })
       }
 
       close() {
@@ -649,6 +906,7 @@ window.__ModuleLoader__.load({
         this.editorBox = null
         this.editorRow = null
         this.editorAnchor = null
+        this.editorMode = 'reply'
         this.editorFocus = false
         this.editor = null
         this.editorDraft = ''
@@ -658,6 +916,9 @@ window.__ModuleLoader__.load({
         this.editorBlocks = []
         this.editorBlockIndex = null
         this.editorBlockKind = null
+        this.editorTargetSeq = null
+        this.editorAll = false
+        this.editorAllDrafts = new Map()
         this.publish({ editing: null, draft: '', parts: [], blocks: [], blockIndex: null, blockKind: null, confirming: false, failure: null })
       }
 
@@ -665,6 +926,13 @@ window.__ModuleLoader__.load({
         this.editorDraft = value
       }
 
+      setEditorStyle(style) {
+        if (!EDITOR_STYLES.includes(style)) return
+        setEditorStylePreference(style)
+        this.editorStyle = style
+        this.publish({ editorStyle: style })
+      }
+
       /**
        * One chip the user removed leaves the block list, and nothing else.
        *
@@ -730,6 +998,61 @@ window.__ModuleLoader__.load({
         }
       }
 
+      /** The all-blocks save: one request carrying every edited block. */
+      async confirmAll(target) {
+        const blocks = Array.isArray(target.blocks) ? target.blocks : []
+        const drafts = this.editorAllDrafts instanceof Map ? this.editorAllDrafts : new Map()
+        const targets = []
+        for (const block of blocks) {
+          const key = `${typeof block.seq === 'number' ? block.seq : ''}:${block.index}`
+          const text = drafts.get(key)
+          if (typeof text !== 'string' || text.trim() === '') {
+            this.publish({ failure: 'empty' })
+            return
+          }
+          if (text !== block.text) {
+            targets.push({ seq: typeof block.seq === 'number' ? block.seq : target.seq, blockIndex: block.index, kind: block.kind, text })
+          }
+        }
+        if (targets.length === 0) {
+          this.publish({ failure: null })
+          this.editor = null
+          this.publish({ editing: null })
+          return
+        }
+        this.publish({ pending: true, failure: null, failureDetail: null })
+        try {
+          const res = await fetch(`${ROUTE_PREFIX}/apply`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            ...(typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function'
+              ? { signal: AbortSignal.timeout(20000) }
+              : {}),
+            body: JSON.stringify({ sessionId: this.sessionId, targets }),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || !data.ok) {
+            const code = data && data.code ? String(data.code) : 'generic'
+            const detail = data && typeof data.error === 'string' && data.error !== '' ? data.error : null
+            this.publish({ pending: false, failure: code, failureDetail: detail })
+            return
+          }
+          this.editor = null
+          this.editorDraft = ''
+          this.editorAll = false
+          this.editorAllDrafts = new Map()
+          this.editorElement = null
+          this.editorBox = null
+          this.editorRow = null
+          this.editorFocus = false
+          this.confirming = false
+          this.publish({ pending: false, editing: null, confirming: false, failure: null })
+          this.load()
+        } catch {
+          this.publish({ pending: false, failure: 'generic' })
+        }
+      }
+
       review() {
         this.pendingRerun = false
         this.runReview()
@@ -765,6 +1088,9 @@ window.__ModuleLoader__.load({
         if (target === null || this.view.pending) return
         const rerunIntent = this.pendingRerun
         this.pendingRerun = false
+        if (this.editorAll === true) {
+          return this.confirmAll(target)
+        }
         const text = this.editorDraft
         if (text.trim() === '') {
           this.publish({ failure: 'empty' })
@@ -777,11 +1103,16 @@ window.__ModuleLoader__.load({
         const parts = target.mode === 'prompt' && this.view.attachmentsOk === true
           ? this.editorParts.map((part) => (part.keep !== undefined ? { keep: part.keep } : { add: part.add }))
           : undefined
-        this.publish({ pending: true, failure: null })
+        this.publish({ pending: true, failure: null, failureDetail: null })
         try {
           const res = await fetch(`${ROUTE_PREFIX}/apply`, {
             method: 'POST',
             headers: { 'content-type': 'application/json' },
+            // A hung host must not leave the editor pending forever with a
+            // button that looks dead.
+            ...(typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function'
+              ? { signal: AbortSignal.timeout(20000) }
+              : {}),
             body: JSON.stringify({
               sessionId: this.sessionId,
               seq: target.seq,
@@ -791,13 +1122,19 @@ window.__ModuleLoader__.load({
               // The in-place reply path names one block; the host validates that
               // it is still that kind at that index before writing the record.
               ...(target.patch === true && typeof this.editorBlockIndex === 'number'
-                ? { blockIndex: this.editorBlockIndex, kind: this.editorBlockKind }
+                ? {
+                    blockIndex: this.editorBlockIndex,
+                    kind: this.editorBlockKind,
+                    ...(this.editorTargetSeq === null ? {} : { targetSeq: this.editorTargetSeq }),
+                  }
                 : {}),
             }),
           })
           const data = await res.json().catch(() => ({}))
           if (!res.ok || !data.ok) {
-            this.publish({ pending: false, failure: data && data.code ? String(data.code) : 'generic' })
+            const code = data && data.code ? String(data.code) : 'generic'
+            const detail = data && typeof data.error === 'string' && data.error !== '' ? data.error : null
+            this.publish({ pending: false, failure: code, failureDetail: detail })
             return
           }
           const shadowed = Array.isArray(data.shadowed) ? data.shadowed : []
@@ -1266,7 +1603,8 @@ window.__ModuleLoader__.load({
       }
       const entry = view.editable.get(headRevision(view.revisions.get(revisionSeq), view.revisions))
       const text = entry && typeof entry.text === 'string' ? entry.text : ''
-      if (text === '') {
+      const extraBlocks = entry && Array.isArray(entry.blocks) ? entry.blocks.filter((block) => block.type !== 'text') : []
+      if (text === '' && extraBlocks.length === 0) {
         if (existing !== null) existing.remove()
         releaseRowCopy(row)
         return node.kind !== 'user'
@@ -1279,7 +1617,22 @@ window.__ModuleLoader__.load({
         }
       }
       placeRevisionBubble(row, bubble)
-      if (bubble.textContent !== text) bubble.textContent = text
+      // A rewritten prompt may still carry images/files. The carrier keeps
+      // those blocks, the model reads them, and the editor lists them - the
+      // standing-in bubble must show them too, or an edited image message looks
+      // like the images were deleted.
+      const signature = text + '|' + extraBlocks.map((block) =>
+        `${String(block.index)}:${String(block.type)}:${String(block.name ?? '')}:${String(block.bytes ?? '')}`).join(',')
+      if (bubble.dataset.dshetRevisionContent !== signature) {
+        bubble.textContent = ''
+        const textNode = document.createElement('span')
+        textNode.className = 'dshet-revision-text'
+        textNode.textContent = text
+        bubble.appendChild(textNode)
+        const files = revisionAttachments(entry, controller)
+        if (files !== null) bubble.appendChild(files)
+        bubble.dataset.dshetRevisionContent = signature
+      }
       // The edit entry goes where every other action of this row lives: the
       // platform's own bar, which the collapse keeps standing, at its right end
       // behind the clock and the copy button - the row the user reads as "this
@@ -1312,6 +1665,40 @@ window.__ModuleLoader__.load({
       return true
     }
 
+    /**
+     * The non-text blocks of a rewritten prompt, drawn under its text.
+     *
+     * These are the same blocks the editor lists as chips; the bytes come from
+     * this plugin's attachment route, so a thumbnail works without a host API.
+     */
+    function revisionAttachments(entry, controller) {
+      if (!entry || !Array.isArray(entry.blocks)) return null
+      const blocks = entry.blocks.filter((block) => block.type !== 'text')
+      if (blocks.length === 0) return null
+      const strip = document.createElement('div')
+      strip.className = 'dshet-revision-files'
+      for (const block of blocks) {
+        const item = document.createElement('div')
+        item.className = 'dshet-revision-file'
+        if (block.preview === true && typeof block.index === 'number') {
+          const image = document.createElement('img')
+          image.className = 'dshet-thumb'
+          image.alt = ''
+          image.src = previewUrl(controller.sessionId, entry.seq, block.index)
+          image.addEventListener('error', () => {
+            if (typeof image.remove === 'function') image.remove()
+          })
+          item.appendChild(image)
+        }
+        const label = document.createElement('span')
+        label.className = 'dshet-chip-label'
+        label.textContent = typeof block.name === 'string' && block.name !== '' ? block.name : block.type
+        item.appendChild(label)
+        strip.appendChild(item)
+      }
+      return strip
+    }
+
     // A copy of a live user bubble element, classes and all.
     // The key of the row a bubble stands in for. It is what makes a stray
     // bubble recognisable after the host's DOM has shifted around it: an
@@ -1957,6 +2344,49 @@ window.__ModuleLoader__.load({
     // Put the box under the row it belongs to: same width, just below its lower
     // edge. Called on render and whenever the page scrolls or resizes, since
     // the layer is fixed to the viewport.
+    // Some host skins mark their editor chrome `!important`; only an inline
+    // `!important` outranks that. The stub DOM has no `setProperty`, so it falls
+    // back to a plain assignment there.
+    function forceStyle(element, property, value) {
+      if (element === null || element === undefined || element.style === undefined) return
+      if (typeof element.style.setProperty === 'function') {
+        element.style.setProperty(property, value, 'important')
+        return
+      }
+      element.style[property] = value
+    }
+
+    /**
+     * The surface an in-place editor paints itself with, so the recorded text
+     * underneath cannot show through the draft.
+     *
+     * The skin's own panel colour comes first. A skin that paints the app on
+     * artwork usually leaves `body` transparent (the artwork is a layer behind
+     * it), and the white fallback then put a white box on a night sky. The
+     * palette keeps the skin's hue and drops its transparency, so what comes back
+     * here is opaque by construction.
+     *
+     * @returns a CSS colour for the editor's own background.
+     */
+    function pageBackground() {
+      try {
+        if (typeof getComputedStyle === 'function' && typeof document !== 'undefined' && document.body) {
+          const panel = String(getComputedStyle(document.body).getPropertyValue('--dshet-panel') || '').trim()
+          const match = /rgba?\(([^)]+)\)/.exec(panel)
+          if (match !== null) {
+            const parts = match[1].split(',').map((value) => Number.parseFloat(value))
+            const opaque = parts.length >= 3 && parts.every((value) => Number.isFinite(value)) && (parts.length < 4 || parts[3] >= 0.9)
+            if (opaque) return panel
+          }
+          const value = getComputedStyle(document.body).backgroundColor
+          if (value && value !== 'transparent' && !/rgba?\(0, 0, 0, 0\)/.test(value)) return value
+        }
+      } catch {
+        /* fall through */
+      }
+      return '#ffffff'
+    }
+
     function viewportSize() {
       const win = typeof window === 'undefined' ? undefined : window
       const doc = typeof document === 'undefined' ? undefined : document
@@ -1973,41 +2403,437 @@ window.__ModuleLoader__.load({
     // past the bottom edge where nothing could reach it. Flip above the row when
     // there is room, otherwise pin the box to the bottom of the viewport and let
     // its own scrollbar carry the content; the footer stays sticky either way.
-    function placeEditor(row, box, anchor = null) {
-      const layer = ensureEditorLayer()
-      if (box.parentElement !== layer) layer.appendChild(box)
+    /**
+     * The bubble the editor stands in for.
+     *
+     * A prompt is a right-aligned input bubble; a reply is the output content
+     * block. The editor takes that element's width and left edge and overlays its
+     * position, so it reads as the message being edited instead of a floating
+     * panel. Class hashes change between builds, so the suffixes are matched.
+     */
+    function bubbleFor(row, mode, blockKind = null) {
+      let selectors
+      if (mode === 'reply' && blockKind === 'reasoning') {
+        selectors = ['details', '[class*="_reasoning"]', '[class*="_thinking"]', '[class*="reasoning"]']
+      } else if (mode === 'reply') {
+        selectors = ['[class*="_markdown"]', '[class*="_bubble"]', '[class*="messageBody"]']
+      } else {
+        selectors = ['[class*="_bubble"]', '[class*="userStack"]', '[class*="_markdown"]']
+      }
+      for (const selector of selectors) {
+        let nodes = []
+        try {
+          nodes = [...row.querySelectorAll(selector)]
+        } catch {
+          nodes = []
+        }
+        let best = null
+        for (const element of nodes) {
+          if (typeof element.closest === 'function' && element.closest('.dshet-editor') !== null) continue
+          const rect = element.getBoundingClientRect()
+          if (rect.width < 80 || rect.height <= 0) continue
+          if (best === null || rect.width * rect.height > best.rect.width * best.rect.height) best = { element, rect }
+        }
+        if (best !== null) return best
+      }
       const rect = row.getBoundingClientRect()
-      let anchorRect = null
-      if (anchor !== null && anchor !== undefined && anchor.isConnected === true && typeof anchor.getBoundingClientRect === 'function') {
-        const candidate = anchor.getBoundingClientRect()
-        if (candidate.width > 0 && candidate.height > 0) anchorRect = candidate
+      return { element: row, rect }
+    }
+
+    /**
+     * Which row an editor should attach to when several cover the edited seq.
+     *
+     * A reply's seq appears in both the assistant-step row and the turn-tail
+     * row that carries its action strip; the tail also covers the reply, so a
+     * last-write-wins loop handed the editor the tail's little action bar and
+     * the box came out message-sized instead of bubble-sized. The message row
+     * always wins.
+     */
+    function editorRowRank(row, mode) {
+      const kind = row.getAttribute('data-chat-flow-kind')
+      if (mode === 'prompt') {
+        if (kind === 'user') return 4
+        if (kind === 'revision' || kind === 'user-revision') return 3
+        if (kind === 'turn-tail' || kind === 'turn-process') return 1
+        return 2
       }
-      const vertical = anchorRect === null ? rect : anchorRect
+      if (kind === 'assistant-step') return 4
+      if (kind === 'turn-tail' || kind === 'turn-process') return 1
+      return 2
+    }
+
+    /**
+     * The vertical band the conversation owns: below its top, above the composer.
+     *
+     * This runs on every scroll frame, so the lookups are cached briefly: the
+     * composer element and the conversation top do not move between frames, and
+     * a global `[class*=...]` scan per frame is what made scrolling feel heavy.
+     */
+    let conversationBoundsCache = null
+    let conversationBoundsAt = 0
+    let composerElementCache = null
+    function conversationBounds(row = null) {
+      const now = Date.now()
+      if (conversationBoundsCache !== null && now - conversationBoundsAt < 250) return conversationBoundsCache
+      const viewportHeight = typeof window !== 'undefined' && typeof window.innerHeight === 'number' ? window.innerHeight : 0
+      const bounds = { top: 0, bottom: viewportHeight, composerLeft: 0, composerWidth: 0 }
+      try {
+        const conversation = document.querySelector('[data-slot="main.conversation"]')
+        if (conversation !== null && typeof conversation.getBoundingClientRect === 'function') {
+          bounds.top = conversation.getBoundingClientRect().top
+        }
+      } catch {}
+      // The real scroll area is the nearest scrollable ancestor of the edited
+      // row; the slot wrapper can start above the header, which let the box
+      // cover the tab bar.
+      try {
+        let node = row !== null && row !== undefined ? row.parentElement : null
+        while (node !== null && node !== undefined && node !== document.body) {
+          const style = getComputedStyle(node)
+          if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.getBoundingClientRect().height > 120) {
+            bounds.top = Math.max(bounds.top, node.getBoundingClientRect().top)
+            break
+          }
+          node = node.parentElement
+        }
+      } catch {}
+      // The composer stack has several wrappers with "composer" in the class;
+      // the boundary is the LOWEST one that still sits above the viewport edge,
+      // otherwise the box runs under the input box.
+      try {
+        // The composer CARD is the rounded surface that owns the input, not the
+        // outer seat (which is wider and made the editor overhang). Walk up from
+        // the input element to the first rounded, painted ancestor.
+        let card = document.querySelector('textarea[placeholder], [contenteditable="true"]')
+        while (card !== null && card !== undefined && card !== document.body) {
+          const style = getComputedStyle(card)
+          const radius = Number.parseFloat(style.borderTopLeftRadius)
+          if (radius > 6 && style.backgroundColor !== 'rgba(0, 0, 0, 0)') break
+          card = card.parentElement
+        }
+        let lowest = 0
+        let lowestRect = null
+        if (card !== null && card !== undefined && card !== document.body && typeof card.getBoundingClientRect === 'function') {
+          const rect = card.getBoundingClientRect()
+          if (rect.top > 0 && (viewportHeight === 0 || rect.top < viewportHeight)) {
+            lowest = rect.top
+            lowestRect = rect
+          }
+        }
+        if (lowestRect === null) {
+          const candidates = document.querySelectorAll('[data-slot="conversation.input"], [class*="composerSeat"], [class*="composer"]')
+          for (const candidate of candidates) {
+            if (typeof candidate.getBoundingClientRect !== 'function') continue
+            const rect = candidate.getBoundingClientRect()
+            if (rect.top > lowest && (viewportHeight === 0 || rect.top < viewportHeight - 40)) {
+              lowest = rect.top
+              lowestRect = rect
+            }
+          }
+        }
+        bounds.bottom = lowest > 0 ? lowest : Math.min(viewportHeight, viewportHeight - 120)
+        if (lowestRect !== null) {
+          bounds.composerLeft = lowestRect.left
+          bounds.composerWidth = lowestRect.width
+        }
+      } catch {
+        bounds.bottom = viewportHeight > 0 ? viewportHeight - 120 : viewportHeight
+      }
+      conversationBoundsCache = bounds
+      conversationBoundsAt = now
+      return bounds
+    }
+
+    function placeEditor(row, box, mode = 'reply', style = 'frame', blockKind = null, blocks = null) {
+      const layer = ensureEditorLayer()
+      if (box.parentElement !== layer) layer.appendChild(box)
+      const placement = readStoredEditorPlacement() ?? 'overlay'
+      const legacy = placement === 'legacy'
+      const inline = placement === 'inline'
+      // Every fixed mode is clamped to the conversation band by default; the
+      // in-page mode keeps its page coordinates and page scroll.
+      const clamped = !inline
+      if (legacy) style = 'frame'
+      if (inline) layer.dataset.dshetInline = '1'
+      else delete layer.dataset.dshetInline
+      const rowRect = row.getBoundingClientRect()
+      const bubble = bubbleFor(row, mode, blockKind)
+      const storedStyle = readStoredEditorStyle()
+      if (storedStyle !== null) style = storedStyle
+      const chipsInBox = typeof box.querySelector === 'function' ? box.querySelector('.dshet-chips') : null
+      const minimumHeight = chipsInBox !== null && chipsInBox !== undefined ? 190 : 150
       const viewport = viewportSize()
       const margin = 8
-      const width = viewport.width > 0
-        ? Math.max(1, Math.min(Math.max(200, rect.width || 0), viewport.width - margin * 2))
-        : Math.max(200, rect.width || 0)
+      const area = typeof box.querySelector === 'function' ? box.querySelector('textarea') : null
+      const frame = typeof box.querySelector === 'function' ? box.querySelector('.dshet-frame') : null
+      const allBox = typeof box.querySelector === 'function' ? box.querySelector('.dshet-all') : null
+      const heightMode = readStoredEditorHeight() ?? 'fill'
+      if (frame !== null && frame !== undefined) frame.style.display = style === 'frame' ? '' : 'none'
+      box.style.boxShadow = 'none'
+      const footerEl = typeof box.querySelector === 'function' ? box.querySelector('.dshet-footer') : null
+      if (footerEl !== null && footerEl !== undefined && !(style === 'center' && !inline)) {
+        footerEl.style.position = ''
+        footerEl.style.height = ''
+        footerEl.style.marginTop = ''
+        footerEl.style.borderRadius = ''
+      }
+      if (style === 'center' && !inline) {
+        // A large centred panel, the first shape that shipped. The textarea
+        // grows with its content; the original message stays where it is.
+        delete box.dataset.dshetInplace
+        if (area !== null && area !== undefined) {
+          area.style.position = ''
+          area.style.left = ''
+          area.style.top = ''
+          area.style.width = ''
+          area.style.height = ''
+          area.style.maxHeight = ''
+          area.style.background = ''
+          area.style.paddingBottom = '16px'
+          fitEditorHeight(area)
+          const centerFooter = typeof box.querySelector === 'function' ? box.querySelector('.dshet-footer') : null
+          if (centerFooter !== null && centerFooter !== undefined) {
+            centerFooter.style.position = 'static'
+            centerFooter.style.height = '46px'
+            centerFooter.style.marginTop = '0'
+            centerFooter.style.borderRadius = '0 0 16px 16px'
+          }
+        }
+        const width = viewport.width > 0 ? Math.max(320, Math.min(1400, viewport.width - margin * 2)) : Math.max(320, rowRect.width)
+        box.style.boxSizing = 'border-box'
+      box.style.width = `${Math.round(width)}px`
+        box.style.left = `${Math.round(viewport.width > 0 ? (viewport.width - width) / 2 : rowRect.left)}px`
+        const bounds = conversationBounds(row)
+        const topLimit = bounds.top + margin
+        const bottomLimit = (bounds.bottom > 0 ? bounds.bottom : viewport.height) - margin
+        const usable = bottomLimit > topLimit ? bottomLimit - topLimit : 0
+        box.style.height = ''
+        box.style.maxHeight = usable > 0
+          ? `${Math.max(180, usable)}px`
+          : viewport.height > 0
+            ? `${Math.max(180, viewport.height - margin * 2)}px`
+            : ''
+        const measured = box.getBoundingClientRect()
+        const height = (measured && measured.height) || box.offsetHeight || 0
+        const top = usable > 0 && height > 0
+          ? Math.round(Math.max(topLimit, Math.min(topLimit + (usable - height) / 2, bottomLimit - height)))
+          : viewport.height > 0 && height > 0
+            ? Math.round(Math.max(margin, Math.min((viewport.height - height) / 2, viewport.height - height - margin)))
+            : Math.round((rowRect.bottom || 0) + 6)
+        box.style.top = `${top}px`
+        return
+      }
+      // `bubble` and `frame` both paint over the message, so the textarea gets
+      // an opaque surface: the recorded text underneath must not show through
+      // the draft. `frame` outlines the whole row; `bubble` outlines just the
+      // message block.
+      box.dataset.dshetInplace = '1'
+      // A full opaque backdrop: the frame covers the whole row, so the host's
+      // status line and action bar underneath must not show through either.
+      const opaque = pageBackground()
+      box.style.background = opaque
+      if (area !== null && area !== undefined) {
+        area.style.background = opaque
+      }
+      // A reply edit is scoped to the selected block (answer text or reasoning),
+      // not to the whole assistant row: the other blocks stay out of the frame.
+      const base = legacy ? rowRect : mode === 'reply' ? bubble.rect : style === 'frame' ? rowRect : bubble.rect
+      let width = base.width
+      let alignedLeft = null
+      const fillAllView = allBox !== null && allBox !== undefined && heightMode !== 'content'
+      if (fillAllView) {
+        // The all-blocks page lines up with the composer card: same left edge,
+        // same width, so the two boxes read as one column.
+        const aligned = conversationBounds(row)
+        if (aligned.composerWidth > 0) {
+          width = aligned.composerWidth
+          alignedLeft = aligned.composerLeft
+        }
+      }
+      if (!fillAllView && mode === 'reply' && typeof rowRect.width === 'number' && rowRect.width > width) {
+        // A reply block is narrower than the conversation row; the editor gets
+        // the full row width so the text is not squeezed into the bubble.
+        width = rowRect.width
+      }
+      let left = alignedLeft === null ? base.left : alignedLeft
+      if (inline) {
+        const pageX = typeof window !== 'undefined' && typeof window.scrollX === 'number' ? window.scrollX : 0
+        left += pageX
+        if (viewport.width > 0) width = Math.min(width, viewport.width - margin * 2)
+      } else if (viewport.width > 0) {
+        width = Math.min(width, viewport.width - margin * 2)
+        left = Math.max(margin, Math.min(left, viewport.width - width - margin))
+      }
+      box.style.boxSizing = 'border-box'
       box.style.width = `${Math.round(width)}px`
-      const measured = box.getBoundingClientRect()
-      const height = (measured && measured.height) || box.offsetHeight || 0
-      let top = vertical.bottom + 6
-      if (viewport.height > 0 && height > 0) {
-        const maxTop = Math.max(margin, viewport.height - height - margin)
-        if (top + height > viewport.height - margin) {
-          const above = vertical.top - height - 6
-          top = above >= margin ? above : maxTop
-        }
-        // A row taller than the screen has its bottom above the viewport after
-        // the user scrolls to its action bar; without this clamp the box follows
-        // it off-screen and the buttons become unreachable again.
-        top = Math.max(margin, Math.min(top, maxTop))
-      }
-      let left = rect.left
-      if (viewport.width > 0 && left + width > viewport.width - margin) left = viewport.width - width - margin
-      if (left < margin) left = margin
       box.style.left = `${Math.round(left)}px`
+      // The host's action strip sits under the reported bubble. Extend the
+      // editor down to the row's bottom so that strip is covered, and the
+      // footer controls end up where those host buttons used to be.
+      const baseBottom = typeof base.bottom === 'number' ? base.bottom : base.top + base.height
+      const rowBottom = typeof rowRect.bottom === 'number' ? rowRect.bottom : rowRect.top + rowRect.height
+      // The action strip can be a sibling of the row (the turn-tail row), not
+      // its child. Find the nearest one from our own injected action buttons
+      // and include its bottom in the cover.
+      let actionBottom = 0
+      if (legacy) try {
+        const actions = document.querySelectorAll('.dshet-action')
+        for (const action of actions) {
+          const bar = action.parentElement
+          if (bar === null || bar === undefined || typeof bar.getBoundingClientRect !== 'function') continue
+          const rect = bar.getBoundingClientRect()
+          if (rect.top >= rowRect.top - 8 && rect.top <= rowRect.bottom + 160) {
+            actionBottom = Math.max(actionBottom, rect.bottom)
+          }
+        }
+      } catch {}
+      // The action strip is rendered as its own turn-tail row under the
+      // message row. Use that row's bottom; if the host renders it in a shape
+      // we cannot identify, reserve one action-band height so the buttons can
+      // never peek out underneath the opaque editor.
+      let tailBottom = 0
+      if (legacy) try {
+        const tails = document.querySelectorAll('[data-chat-flow-kind="turn-tail"]')
+        for (const tail of tails) {
+          if (typeof tail.getBoundingClientRect !== 'function') continue
+          const rect = tail.getBoundingClientRect()
+          if (rect.top >= rowRect.top - 8 && rect.top <= rowRect.bottom + 200) {
+            tailBottom = Math.max(tailBottom, rect.bottom)
+          }
+        }
+      } catch {}
+      const coverBottom = Math.max(rowBottom, actionBottom, tailBottom)
+      const coveredHeight = Math.max(base.height, coverBottom - base.top + 48)
+      // Non-legacy modes hug the content: the box ends right after the last
+      // line plus the control band, instead of stretching to the row bottom.
+      const FOOTER_BAND = 46
+      const boxRect0 = typeof box.getBoundingClientRect === 'function' ? box.getBoundingClientRect() : { top: base.top }
+      const chipStrip0 = typeof box.querySelector === 'function' ? box.querySelector('.dshet-chips') : null
+      const chipBottom0 = chipStrip0 === null || chipStrip0 === undefined || typeof chipStrip0.getBoundingClientRect !== 'function'
+        ? 0
+        : Math.max(0, chipStrip0.getBoundingClientRect().bottom - boxRect0.top + 8)
+      const headerOffset = Math.max(38, chipBottom0, bubble.rect.top - base.top)
+      let contentHeight = Math.round(base.height)
+      if (area !== null && area !== undefined && (allBox === null || allBox === undefined)) {
+        try {
+          const previousValue = area.value
+          const previousHeight = area.style.height
+          const measure = (text) => {
+            area.value = text
+            area.style.height = 'auto'
+            const measured = area.scrollHeight
+            return typeof measured === 'number' && measured > 0 ? Math.round(measured) : 0
+          }
+          const own = measure(previousValue)
+          if (own > 0) contentHeight = own
+          // "Turn max" pins the box to the tallest block of the turn, so
+          // switching between a short answer and a long thought does not resize
+          // the frame under the user's hands. The measurement is cached: doing
+          // it for every block on every scroll frame is what made the editor
+          // drag while the conversation moved.
+          if (heightMode !== 'content' && Array.isArray(blocks)) {
+            const key = `${Math.round(area.clientWidth || 0)}|${blocks.map((block) => `${block.seq ?? ''}:${block.index}:${typeof block.text === 'string' ? block.text.length : 0}`).join(',')}`
+            if (maxHeightCache.key === key) {
+              contentHeight = Math.max(contentHeight, maxHeightCache.value)
+            } else {
+              let tallest = 0
+              for (const block of blocks) {
+                if (block === null || block === undefined || typeof block.text !== 'string') continue
+                const measured = measure(block.text)
+                if (measured > tallest) tallest = measured
+              }
+              maxHeightCache = { key, value: tallest }
+              if (tallest > contentHeight) contentHeight = tallest
+            }
+          }
+          area.value = previousValue
+          area.style.height = previousHeight
+        } catch {}
+      }
+      // Every mode hugs the measured content; `coveredHeight` is only a
+      // fallback for a host whose textarea cannot be measured.
+      let height = Math.max(minimumHeight, contentHeight + headerOffset + FOOTER_BAND)
+      let clampedTop = null
+      if (clamped) {
+        const bounds = conversationBounds(row)
+        const bottomLimit = (bounds.bottom > 0 ? bounds.bottom : viewport.height) - margin
+        const topLimit = bounds.top + margin
+        if (bottomLimit > topLimit) {
+          // All-blocks mode shows one page of blocks behind ONE scrollbar: it
+          // fills the WHOLE band (not just the message's own position), so the
+          // top touches the conversation edge and the bottom the composer.
+          const fillAll = allBox !== null && allBox !== undefined && heightMode !== 'content'
+          clampedTop = fillAll ? topLimit : Math.max(base.top, topLimit)
+          height = fillAll
+            ? Math.max(minimumHeight, bottomLimit - clampedTop)
+            : Math.min(height, Math.max(minimumHeight, bottomLimit - clampedTop))
+        }
+      }
+      if (!inline && !clamped && viewport.height > 0) height = Math.min(height, Math.max(minimumHeight, viewport.height - margin * 2))
+      height = Math.max(minimumHeight, height)
+      box.style.height = `${height}px`
+      box.style.maxHeight = ''
+      let top = clampedTop === null ? base.top : clampedTop
+      if (inline) {
+        const pageY = typeof window !== 'undefined' && typeof window.scrollY === 'number' ? window.scrollY : 0
+        top += pageY
+      } else if (viewport.height > 0) {
+        top = Math.max(margin, Math.min(top, viewport.height - height - margin))
+      }
       box.style.top = `${Math.round(top)}px`
+      if (allBox !== null && allBox !== undefined) {
+        allBox.style.position = 'absolute'
+        allBox.style.left = '8px'
+        allBox.style.right = '8px'
+        // The all-blocks page has its own sticky outline, so it does not need
+        // the 38px control header the single-block editor reserves.
+        allBox.style.top = '6px'
+        allBox.style.bottom = `${FOOTER_BAND + 8}px`
+        allBox.style.overflowY = 'auto'
+        // The container is now laid out; re-measure each block so the document
+        // is exactly as tall as its text and the ONE scrollbar appears when it
+        // overflows the band.
+        if (typeof allBox.querySelectorAll === 'function') {
+          for (const blockArea of allBox.querySelectorAll('.dshet-all-area')) {
+            blockArea.style.height = 'auto'
+            const measured = blockArea.scrollHeight
+            if (typeof measured === 'number' && measured > 0) blockArea.style.height = `${measured}px`
+          }
+        }
+      } else if (area !== null && area !== undefined) {
+        const offsetLeft = Math.max(0, bubble.rect.left - base.left)
+        // Reserve a header band for the controls; when the prompt carries image
+        // chips they sit above the text, so the text starts below them too.
+        const offsetTop = headerOffset
+        // The control band is painted over the box's bottom edge, so the field
+        // has to stop above it: the old `height - offsetTop - 8` let the field
+        // run 40px under the footer, and the last lines of a long block were
+        // covered for good (the field scrolled, the footer never moved).
+        const footerHeight =
+          footerEl !== null && footerEl !== undefined && typeof footerEl.offsetHeight === 'number' && footerEl.offsetHeight > 0
+            ? footerEl.offsetHeight
+            : FOOTER_BAND
+        const available = Math.max(40, height - offsetTop - footerHeight)
+        area.style.position = 'absolute'
+        area.style.boxSizing = 'border-box'
+        area.style.left = `${Math.round(offsetLeft)}px`
+        area.style.top = `${Math.round(offsetTop)}px`
+        area.style.width = `${Math.round(mode === 'reply' ? Math.max(80, width - offsetLeft - 8) : Math.max(80, Math.min(bubble.rect.width, width - offsetLeft)))}px`
+        // Never let the textarea paint outside the box: when the measured
+        // content is taller than the box (viewport-capped overlay), it scrolls
+        // inside instead of spilling past the border.
+        area.style.height = `${Math.round(Math.max(32, Math.min(contentHeight, available)))}px`
+        area.style.maxHeight = 'none'
+        area.style.padding = ''
+        area.style.paddingBottom = '8px'
+      }
+      box.style.borderRadius = ''
+      try {
+        const skin = getComputedStyle(bubble.element)
+        if (skin.borderRadius && skin.borderRadius !== '0px') box.style.borderRadius = skin.borderRadius
+      } catch {
+        /* a detached node keeps the stylesheet skin */
+      }
     }
 
     // Grow the textarea to its content, the way a normal input box behaves.
@@ -2015,7 +2841,10 @@ window.__ModuleLoader__.load({
     // in half an empty box. The stylesheet owns the limits (`min-height`,
     // `max-height`); the element only ever gets the measured height, and the
     // `+2` is the top and bottom border `scrollHeight` does not count.
+    let maxHeightCache = { key: '', value: 0 }
+
     function fitEditorHeight(area) {
+      if (typeof area.closest === 'function' && area.closest('[data-dshet-inplace="1"]') !== null) return
       area.style.height = 'auto'
       const height = area.scrollHeight
       if (typeof height === 'number' && height > 0) area.style.height = `${height + 2}px`
@@ -2165,8 +2994,12 @@ window.__ModuleLoader__.load({
         // saving would write, so both have to redraw the strip - and the chip
         // keys are enough to tell one list from another.
         view.parts.map((part) => part.key).join('.'),
+        // The mode itself: leaving the all-blocks view must rebuild even when the
+        // single block that comes back is the one that was selected before it.
+        view.allBlocks === true ? 'all' : 'one',
         // The selected reply block: switching blocks has to rebuild the box.
         view.blockIndex === null || view.blockIndex === undefined ? '' : String(view.blockIndex),
+        view.targetSeq === null || view.targetSeq === undefined ? '' : String(view.targetSeq),
       ].join('|')
     }
 
@@ -2242,6 +3075,16 @@ window.__ModuleLoader__.load({
       return strip
     }
 
+    /** The FileList of a paste/drop payload, without assuming the event shape. */
+    function filesFromData(data) {
+      if (data === null || data === undefined) return []
+      try {
+        return data.files === null || data.files === undefined ? [] : Array.prototype.slice.call(data.files)
+      } catch {
+        return []
+      }
+    }
+
     /**
      * The add/replace entry: a picker that puts a block on the list.
      *
@@ -2270,7 +3113,10 @@ window.__ModuleLoader__.load({
       const add = document.createElement('button')
       add.type = 'button'
       add.className = 'dshet-attach'
-      add.textContent = t('editor.attach.add')
+      add.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" stroke-width="1.3"><path d="M8 2V14" stroke="currentColor"></path><path d="M2 8H14" stroke="currentColor"></path></svg>'
+      add.setAttribute('aria-haspopup', 'listbox')
+      add.title = t('editor.attach.add')
+      add.setAttribute('aria-label', t('editor.attach.add'))
       add.disabled = view.pending
       pressable(add, () => {
         if (typeof picker.click === 'function') picker.click()
@@ -2288,7 +3134,7 @@ window.__ModuleLoader__.load({
         ? controller.editorBox
         : null
       if (existing && existing.dataset.dshetFor === marker) {
-        placeEditor(row, existing, controller.editorAnchor)
+        placeEditor(row, existing, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
         return
       }
 
@@ -2310,30 +3156,64 @@ window.__ModuleLoader__.load({
       box.className = 'dshet-editor'
       box.dataset[EDITOR_ATTR] = '1'
       box.dataset.dshetFor = marker
+      // The frame is a child, not the box's own border: host skins mark the
+      // editor chrome `!important` and win the cascade against the box itself,
+      // but they cannot name this child. It draws the blue outline of the
+      // reference UI on top of whatever border the skin puts on the box.
+      const frame = document.createElement('span')
+      frame.className = 'dshet-frame'
+      frame.style.position = 'absolute'
+      frame.style.inset = '-1px'
+      frame.style.border = '2px solid #4a7dff'
+      frame.style.borderRadius = 'inherit'
+      frame.style.boxSizing = 'border-box'
+      frame.style.pointerEvents = 'none'
+      frame.style.zIndex = '3'
+      box.appendChild(frame)
 
       // A reply on the patch path may carry several editable blocks (answer
       // text and reasoning). The picker chooses which one this save targets;
       // every option carries the block's CURRENT projected text, so switching
       // never shows the recorded original over a landed patch.
-      if (target.mode === 'reply' && target.patch === true && Array.isArray(target.blocks) && target.blocks.length > 1) {
+      if (target.mode === 'reply' && target.patch === true && Array.isArray(target.blocks) && target.blocks.length >= 1) {
         const picker = document.createElement('label')
         picker.className = 'dshet-pick'
         const caption = document.createElement('span')
+        caption.className = 'dshet-sr-only'
         caption.textContent = t('editor.block')
         const select = document.createElement('select')
         select.className = 'dshet-select'
         select.disabled = view.pending || view.confirming
         select.setAttribute('aria-label', t('editor.block'))
+        // A single reply can carry several answer texts and several reasoning
+        // blocks; number the labels so each one is addressable in the picker.
+        const totals = {}
+        for (const block of target.blocks) totals[block.kind] = (totals[block.kind] ?? 0) + 1
+        const seen = {}
         for (const block of target.blocks) {
           const option = document.createElement('option')
-          option.value = String(block.index)
+          option.value = typeof block.seq === 'number' ? `${block.seq}:${block.index}` : String(block.index)
           const kind = block.kind === 'reasoning' ? 'editor.block.reasoning' : 'editor.block.text'
-          option.textContent = t(kind)
+          seen[block.kind] = (seen[block.kind] ?? 0) + 1
+          option.textContent = totals[block.kind] > 1 ? `${t(kind)} ${seen[block.kind]}` : t(kind)
           option.selected = block.index === view.blockIndex
           select.appendChild(option)
         }
-        if (view.blockIndex !== null && view.blockIndex !== undefined) select.value = String(view.blockIndex)
-        select.addEventListener('change', () => controller.selectBlock(Number(select.value)))
+        // "All blocks" is always offered for a multi-block turn, not only once
+        // it is already active - otherwise there is no way to select it.
+        if (target.blocks.length > 1) {
+          const allOption = document.createElement('option')
+          allOption.value = 'all'
+          allOption.textContent = t('editor.block.all')
+          select.appendChild(allOption)
+        }
+        if (view.allBlocks === true) {
+          select.value = 'all'
+        } else if (view.blockIndex !== null && view.blockIndex !== undefined) {
+          const current = target.blocks.find((block) => block.index === view.blockIndex && (view.targetSeq === null || view.targetSeq === undefined || block.seq === undefined || block.seq === view.targetSeq))
+          select.value = current !== undefined && typeof current.seq === 'number' ? `${current.seq}:${current.index}` : String(view.blockIndex)
+        }
+        select.addEventListener('change', () => controller.selectBlock(select.value))
         picker.appendChild(caption)
         picker.appendChild(select)
         box.appendChild(picker)
@@ -2355,13 +3235,13 @@ window.__ModuleLoader__.load({
         fitEditorHeight(area)
         const row = controller.editorRow
         const box = controller.editorBox
-        if (row !== null && box !== null && box.isConnected === true) placeEditor(row, box, controller.editorAnchor)
+        if (row !== null && box !== null && box.isConnected === true) placeEditor(row, box, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
       })
       area.addEventListener('compositionend', () => {
         fitEditorHeight(area)
         const row = controller.editorRow
         const box = controller.editorBox
-        if (row !== null && box !== null && box.isConnected === true) placeEditor(row, box, controller.editorAnchor)
+        if (row !== null && box !== null && box.isConnected === true) placeEditor(row, box, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
       })
       area.addEventListener('focus', () => {
         controller.editorFocus = true
@@ -2376,18 +3256,114 @@ window.__ModuleLoader__.load({
         if (event.isComposing === true || event.keyCode === 229) return
         if (event.key === 'Enter' && event.shiftKey !== true) {
           event.preventDefault()
-          if (view.confirming) controller.confirm()
+          const live = liveView()
+          if (live !== null && live !== undefined && live.confirming === true) controller.confirm()
           else controller.review()
           return
         }
         if (event.key === 'Escape') {
           event.preventDefault()
-          if (view.confirming) controller.back()
+          const live = liveView()
+          if (live !== null && live !== undefined && live.confirming === true) controller.back()
           else controller.close()
         }
       })
       box.appendChild(area)
 
+      // "All blocks": every reasoning and text block of the turn on one page,
+      // each in its own textarea under a light separator.
+      if (view.allBlocks === true && Array.isArray(target.blocks)) {
+        const allBox = document.createElement('div')
+        allBox.className = 'dshet-all'
+        // A sticky outline over the page: one chip per block that scrolls the
+        // container to it, so the document keeps its single scrollbar and still
+        // has navigation.
+        const nav = document.createElement('div')
+        nav.className = 'dshet-all-nav'
+        const totals = {}
+        for (const block of target.blocks) totals[block.kind] = (totals[block.kind] ?? 0) + 1
+        const seen = {}
+        for (const block of target.blocks) {
+          const key = `${typeof block.seq === 'number' ? block.seq : ''}:${block.index}`
+          const section = document.createElement('div')
+          section.className = 'dshet-all-block'
+          const head = document.createElement('div')
+          head.className = 'dshet-all-head'
+          const label = document.createElement('span')
+          seen[block.kind] = (seen[block.kind] ?? 0) + 1
+          const kindKey = block.kind === 'reasoning' ? 'editor.block.reasoning' : 'editor.block.text'
+          const labelText = totals[block.kind] > 1 ? `${t(kindKey)} ${seen[block.kind]}` : t(kindKey)
+          label.textContent = labelText
+          const navButton = document.createElement('button')
+          navButton.type = 'button'
+          navButton.textContent = labelText
+          navButton.addEventListener('click', () => {
+            if (typeof section.scrollIntoView === 'function') section.scrollIntoView({ block: 'start' })
+            else allBox.scrollTop = section.offsetTop ?? 0
+          })
+          nav.appendChild(navButton)
+          const line = document.createElement('span')
+          line.className = 'dshet-all-line'
+          head.appendChild(label)
+          head.appendChild(line)
+          const blockArea = document.createElement('textarea')
+          blockArea.className = 'dshet-all-area'
+          blockArea.rows = 1
+          blockArea.spellcheck = false
+          blockArea.style.overflow = 'hidden'
+          blockArea.style.position = 'static'
+          blockArea.style.left = 'auto'
+          blockArea.style.top = 'auto'
+          blockArea.value = controller.editorAllDrafts instanceof Map ? (controller.editorAllDrafts.get(key) ?? block.text) : block.text
+          blockArea.disabled = view.pending || view.confirming
+          const grow = () => {
+            blockArea.style.height = 'auto'
+            const measured = blockArea.scrollHeight
+            if (typeof measured === 'number' && measured > 0) blockArea.style.height = `${measured}px`
+          }
+          blockArea.addEventListener('input', () => {
+            if (controller.editorAllDrafts instanceof Map) controller.editorAllDrafts.set(key, blockArea.value)
+            grow()
+          })
+          section.appendChild(head)
+          section.appendChild(blockArea)
+          allBox.appendChild(section)
+          // Only now is the textarea in the document, so `scrollHeight` is the
+          // real content height; measuring before the append returned 0 and the
+          // block stayed 32px tall with its text clipped.
+          grow()
+        }
+        allBox.insertBefore(nav, allBox.firstChild)
+        box.appendChild(allBox)
+        area.style.display = 'none'
+      }
+
+      // Input parity with the composer: a screenshot pasted from the clipboard
+      // and files dropped onto the box join the same chip list as the picker.
+      // Reply edits cannot carry blocks, so the handlers exist only for prompts
+      // whose host proved it can keep them.
+      if (target.mode === 'prompt' && view.attachmentsOk === true) {
+        area.addEventListener('paste', (event) => {
+          const files = filesFromData(event.clipboardData)
+          if (files.length === 0) return
+          event.preventDefault()
+          controller.attachFiles(files)
+        })
+        box.addEventListener('dragover', (event) => {
+          event.preventDefault()
+          box.dataset.dshetDrop = '1'
+        })
+        box.addEventListener('dragleave', () => {
+          delete box.dataset.dshetDrop
+        })
+        box.addEventListener('drop', (event) => {
+          event.preventDefault()
+          delete box.dataset.dshetDrop
+          const files = filesFromData(event.dataTransfer)
+          if (files.length > 0) controller.attachFiles(files)
+        })
+      }
+
       // The blocks this message carries, each one a chip the user can remove,
       // and the entry that adds another. Drawn only when the host answered that
       // it can admit what a chip promises - otherwise the warning below states
@@ -2417,22 +3393,50 @@ window.__ModuleLoader__.load({
         warn.textContent = texts.warn
         box.appendChild(warn)
       }
-      if (typeof view.failure === 'string' && view.failure !== '') {
+      // A running turn only blocks the paths that move the surface (a prompt
+      // rewrite, or a reply edit on a host without the in-place record). The
+      // in-place record appends one event and changes nothing that is already
+      // on the surface, so waiting for the agent to finish is not required -
+      // the model picks the edit up on its next fold.
+      const inPlaceEdit = target.mode === 'reply' && target.patch === true
+      const busyBlocked = view.busy === true && !inPlaceEdit
+      const failureCode = typeof view.failure === 'string' && view.failure !== ''
+        ? view.failure
+        : busyBlocked
+          ? 'busy'
+          : null
+      if (failureCode !== null) {
         const error = document.createElement('p')
         error.className = 'dshet-error'
         error.setAttribute('role', 'status')
-        error.textContent = errorText(t, view.failure)
+        const detail = typeof view.failureDetail === 'string' && view.failureDetail !== '' ? view.failureDetail : null
+        error.textContent = (failureCode === 'internal' || failureCode === 'generic') && detail !== null
+          ? `${errorText(t, failureCode)}（${detail.slice(0, 300)}）`
+          : errorText(t, failureCode)
         box.appendChild(error)
       }
 
+      // Handlers must read the CURRENT controller state: the host may not have
+      // rebuilt the button after the first press, and a stale `view.confirming`
+      // made the confirmation step a dead end (press again -> review again).
+      const liveView = () => (typeof controller.getSnapshot === 'function' ? controller.getSnapshot() : view)
+
       const footer = document.createElement('div')
       footer.className = 'dshet-footer'
+      const footerActions = document.createElement('div')
+      footerActions.className = 'dshet-footer-actions'
 
       const cancel = document.createElement('button')
       cancel.type = 'button'
-      cancel.className = 'dshet-btn'
-      cancel.textContent = t('editor.cancel')
-      cancel.title = `${t('editor.cancel')} (Esc)`
+      cancel.className = 'dshet-btn dshet-btn-icon dshet-btn-cancel'
+      const cancelLabel = t('editor.cancel')
+      cancel.innerHTML = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 3.5l9 9" stroke="currentColor"/><path d="M12.5 3.5l-9 9" stroke="currentColor"/></svg>'
+      const cancelText = document.createElement('span')
+      cancelText.className = 'dshet-sr-only'
+      cancelText.textContent = cancelLabel
+      cancel.appendChild(cancelText)
+      cancel.title = `${cancelLabel} (Esc)`
+      cancel.setAttribute('aria-label', cancelLabel)
       cancel.disabled = view.pending
       pressable(cancel, () => {
         if (view.confirming) controller.back()
@@ -2441,20 +3445,35 @@ window.__ModuleLoader__.load({
 
       const submit = document.createElement('button')
       submit.type = 'button'
-      submit.className = 'dshet-btn dshet-btn-primary'
-      submit.textContent = view.pending
+      submit.className = 'dshet-btn dshet-btn-primary dshet-btn-save'
+      const submitLabel = view.pending
         ? t('editor.pending')
         : view.confirming
           ? t('editor.review')
           : texts.save
-      submit.title = `${submit.textContent} (Enter)`
-      submit.disabled = view.pending
+      // The official composer uses a bare double-check for confirm, not a black
+      // pill. The label stays in the accessible name (and in the test-visible
+      // textContent) through a visually hidden span.
+      submit.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12.5l4.5 4.5L18 6.5"/><path d="M10 12.5l4.5 4.5L24 6.5"/></svg>'
+      const submitText = document.createElement('span')
+      submitText.className = 'dshet-sr-only'
+      submitText.textContent = submitLabel
+      submit.appendChild(submitText)
+      submit.title = `${submitLabel} (Enter)`
+      submit.setAttribute('aria-label', submitLabel)
+      submit.disabled = view.pending || busyBlocked
       pressable(submit, () => {
-        if (view.confirming) controller.confirm()
+        const live = liveView()
+        if (live !== null && live !== undefined && live.confirming === true) controller.confirm()
         else controller.review()
       })
+      if (view.confirming === true) {
+        // The save label is visually hidden, so the confirmation step needs a
+        // visible state of its own or the first press looks like nothing.
+        submit.classList.add('dshet-btn-confirm')
+      }
 
-      footer.appendChild(cancel)
+      footerActions.appendChild(cancel)
       // The re-run button belongs to the sibling (dsh-rerun-turn): it appears
       // only when that plugin is mounted, only for a prompt edit, and only
       // outside the confirmation step - the intent is carried through it. Save
@@ -2463,20 +3482,49 @@ window.__ModuleLoader__.load({
       if (target.mode === 'prompt' && view.siblingRerun === 'present' && view.confirming !== true) {
         const rerun = document.createElement('button')
         rerun.type = 'button'
-        rerun.className = 'dshet-btn dshet-rerun'
-        rerun.textContent = t('editor.rerun')
+        rerun.className = 'dshet-btn dshet-btn-icon dshet-rerun'
+        const rerunLabel = t('editor.rerun')
+        rerun.innerHTML = '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true" stroke-width="1.2"><path d="M13.65 2.6v2.9h-2.9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.3 8a5.3 5.3 0 1 1-1.55-3.75l1.9 1.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+        const rerunText = document.createElement('span')
+        rerunText.className = 'dshet-sr-only'
+        rerunText.textContent = rerunLabel
+        rerun.appendChild(rerunText)
+        rerun.title = rerunLabel
+        rerun.setAttribute('aria-label', rerunLabel)
         rerun.disabled = view.pending
         pressable(rerun, () => controller.reviewRerun())
-        footer.appendChild(rerun)
+        footerActions.appendChild(rerun)
+      }
+      footerActions.appendChild(submit)
+      footer.appendChild(footerActions)
+      const attachRow = typeof box.querySelector === 'function' ? box.querySelector('.dshet-attach-row') : null
+      if (attachRow !== null && attachRow !== undefined) {
+        attachRow.style.position = 'static'
+        attachRow.style.left = ''
+        attachRow.style.bottom = ''
+        attachRow.style.margin = '0'
+        footer.insertBefore(attachRow, footer.firstChild)
+      }
+      // The block picker shares the control band and sits at its far right.
+      const pickerEl = typeof box.querySelector === 'function' ? box.querySelector('.dshet-pick') : null
+      if (pickerEl !== null && pickerEl !== undefined) {
+        pickerEl.style.position = 'static'
+        pickerEl.style.left = ''
+        pickerEl.style.top = ''
+        pickerEl.style.marginLeft = 'auto'
+        pickerEl.style.marginRight = '0'
+        pickerEl.style.display = 'flex'
+        pickerEl.style.flex = '0 0 auto'
+        pickerEl.style.visibility = ''
+        footer.appendChild(pickerEl)
       }
-      footer.appendChild(submit)
       box.appendChild(footer)
 
       controller.editorBox = box
       controller.editorRow = row
       controller.editorElement = area
+      placeEditor(row, box, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
       fitEditorHeight(area)
-      placeEditor(row, box, controller.editorAnchor)
       if (!view.confirming && !view.pending && (fresh || wasFocused)) {
         try {
           area.focus()
@@ -2514,8 +3562,11 @@ window.__ModuleLoader__.load({
     // collapsed panel that may not be in the DOM at all.
 
     const PATCH_ATTR = 'data-dshet-patch'
-    const NOTE_ATTR = 'data-dshet-patch-note'
     const patchOriginals = new WeakMap()
+    // The text this plugin last painted for a key, so a second edit of the same
+    // block can still find the element after the first text replaced the
+    // recorded original in the DOM.
+    const patchedTexts = new Map()
     // React may re-render the assistant container and reset its attributes and
     // style while leaving the text node we replaced. Remember the element by
     // seq:block so the next pass can restore the marker and, on a later edit,
@@ -2593,10 +3644,11 @@ window.__ModuleLoader__.load({
     // element in the owning row whose whole text is exactly the recorded text;
     // never a button, a timestamp, our own chrome, or an ancestor that merely
     // contains the text.
-    function findPatchTextFallback(owner, wanted) {
+    function findPatchTextFallback(owner, wanted, previousText = '') {
       if (owner === null || owner === undefined || typeof owner.querySelectorAll !== 'function') return null
       const original = matchText(wanted.original)
-      if (original === '') return null
+      const previous = matchText(previousText)
+      if (original === '' && previous === '') return null
       let scope = owner
       try {
         const node = owner.querySelector('[data-slot="conversation.chat.node"]')
@@ -2608,12 +3660,12 @@ window.__ModuleLoader__.load({
         if (el === scope) continue
         if (el.getAttribute(PATCH_ATTR) !== null) continue
         try {
-          if (el.closest('.dshet-editor, .dshet-action, .dshet-pick, .dshet-patch-note, button, time') !== null) continue
+          if (el.closest('.dshet-editor, .dshet-action, .dshet-pick, button, time') !== null) continue
         } catch {
           continue
         }
         const text = matchText(el.textContent)
-        if (text !== original) continue
+        if (text !== original && !(previous !== '' && text === previous)) continue
         let deeper = false
         for (const child of el.children ?? []) {
           if (matchText(child.textContent) === text) {
@@ -2626,6 +3678,97 @@ window.__ModuleLoader__.load({
       return null
     }
 
+    /**
+     * The collapsed reasoning header draws its own truncation of the RECORDED
+     * text ("思考 · ..."), and when the panel is closed the body is not in the
+     * DOM at all - so a patch of the reasoning body alone leaves the edit
+     * invisible. Rewrite that snippet too, keeping whatever the host appended
+     * (its ellipsis) and its own truncation length.
+     */
+    function patchReasoningSummary(owner, wanted) {
+      if (owner === null || owner === undefined || typeof owner.querySelectorAll !== 'function') return false
+      const original = String(wanted.original ?? '')
+      const patched = String(wanted.text ?? '')
+      if (original === '' || patched === '') return false
+      const head = original.slice(0, 12)
+      let changed = false
+      const apply = (get, set) => {
+        const data = String(get() ?? '')
+        if (data === '' || !data.includes(head)) return
+        // A node holding the whole text gets the whole replacement; a truncated
+        // snippet keeps the host's length and gains an ellipsis when the new
+        // text is longer.
+        const next = data.length >= original.length ? patched : `${patched.slice(0, data.length)}${patched.length > data.length ? '…' : ''}`
+        if (next === data) return
+        set(next)
+        changed = true
+      }
+      const walk = (node) => {
+        for (const child of node.childNodes ?? []) {
+          const type = child.nodeType
+          if (type === 3) {
+            apply(() => child.data, (value) => { child.data = value })
+            continue
+          }
+          if (type !== 1) continue
+          try {
+            if (typeof child.closest === 'function' && child.closest('.dshet-editor, .dshet-action, .dshet-pick, button, time') !== null) continue
+          } catch {
+            /* a node without closest is walked anyway */
+          }
+          const kids = child.childNodes ?? []
+          if (kids.length === 0) {
+            apply(() => child.textContent, (value) => { child.textContent = value })
+            continue
+          }
+          walk(child)
+        }
+      }
+      walk(owner)
+      return changed
+    }
+
+    /**
+     * The reasoning body on this host is its own row (the flow key carries a
+     * `,reasoning` group part), so neither the answer row nor the first chat node
+     * the shared fallback picks contains it. Search the whole conversation for
+     * the deepest element whose text is the recorded original (or what we last
+     * painted there).
+     */
+    function findReasoningElement(root, wanted, previousText) {
+      if (root === null || root === undefined || typeof root.querySelectorAll !== 'function') return null
+      const original = matchText(wanted.original)
+      const previous = matchText(previousText)
+      if (original === '' && previous === '') return null
+      let best = null
+      let bestScore = Infinity
+      for (const el of root.querySelectorAll('*')) {
+        if (el.getAttribute(PATCH_ATTR) !== null) continue
+        try {
+          if (el.closest('.dshet-editor, .dshet-action, .dshet-pick, button, time') !== null) continue
+        } catch {
+          /* a detached node is still a candidate */
+        }
+        const text = matchText(el.textContent)
+        if (text === '') continue
+        if (text !== original && !(previous !== '' && text === previous)) continue
+        let deeper = false
+        for (const child of el.children ?? []) {
+          if (matchText(child.textContent) === text) {
+            deeper = true
+            break
+          }
+        }
+        if (deeper) continue
+        const score = Math.abs(text.length - original.length)
+        if (score < bestScore) {
+          best = el
+          bestScore = score
+        }
+      }
+      return best
+    }
+
     function applyPatchDisplay(snapshot, view, t) {
       // Map a reply seq to the host row that draws it, so a short answer like
       // "好的" cannot be matched in a different row. Fall back to a global
@@ -2659,7 +3802,7 @@ window.__ModuleLoader__.load({
       if (root === null) return
       const replies = view.replies instanceof Map ? view.replies : new Map()
       const wantedText = new Map()
-      const wantedNotes = new Map()
+      const wantedReasoning = new Map()
       for (const patch of Array.isArray(view.patches) ? view.patches : []) {
         const reply = replies.get(patch.seq)
         if (reply === undefined || !Array.isArray(reply.blocks)) continue
@@ -2673,8 +3816,10 @@ window.__ModuleLoader__.load({
             text: String(patch.text ?? ''),
           })
         } else if (patch.kind === 'reasoning') {
-          wantedNotes.set(`${patch.seq}:${patch.blockIndex}`, {
+          wantedReasoning.set(`${patch.seq}:${patch.blockIndex}`, {
             key: `${patch.seq}:${patch.blockIndex}`,
+            seq: patch.seq,
+            original: String(block.original ?? ''),
             text: String(patch.text ?? ''),
             reply,
             block,
@@ -2685,7 +3830,7 @@ window.__ModuleLoader__.load({
       // A patch that no longer exists must give the host's recorded text back,
       // even when a re-render already stripped our marker from the element.
       for (const [key, el] of [...patchedElements]) {
-        if (wantedText.has(key)) continue
+        if (wantedText.has(key) || wantedReasoning.has(key)) continue
         patchedElements.delete(key)
         if (el.isConnected === true) restorePatchedBlock(el)
       }
@@ -2703,18 +3848,14 @@ window.__ModuleLoader__.load({
           el.textContent = shown
         }
       }
-      for (const note of [...root.querySelectorAll(`[${NOTE_ATTR}]`)]) {
-        const key = note.getAttribute(NOTE_ATTR)
-        if (!wantedNotes.has(key)) note.remove()
-      }
-      if (wantedText.size === 0 && wantedNotes.size === 0) return
+      if (wantedText.size === 0 && wantedReasoning.size === 0) return
 
       const nodes = [...root.querySelectorAll('[data-slot="conversation.chat.node"]')]
       const containers = []
       for (const node of nodes) {
         for (const el of node.querySelectorAll('*')) {
           try {
-            if (isMarkdownContainer(el) && el.closest('.dshet-editor, .dshet-pick, .dshet-patch-note') === null) containers.push(el)
+            if (isMarkdownContainer(el) && el.closest('.dshet-editor, .dshet-pick') === null) containers.push(el)
           } catch {
             /* a detached node is skipped */
           }
@@ -2745,7 +3886,8 @@ window.__ModuleLoader__.load({
           continue
         }
         const original = matchText(wanted.original)
-        if (original === '') continue
+        const previous = matchText(patchedTexts.get(key) ?? '')
+        if (original === '' && previous === '') continue
         let best = null
         let bestScore = Infinity
         for (const el of containers) {
@@ -2759,7 +3901,7 @@ window.__ModuleLoader__.load({
           }
           const text = matchText(el.textContent)
           if (text === '') continue
-          const exact = text === original
+          const exact = text === original || (previous !== '' && text === previous)
           const prefix = text.startsWith(original.slice(0, 60)) || original.startsWith(text.slice(0, 60))
           if (!exact && !prefix) continue
           // Prefer the exact match, then the container closest in length: a
@@ -2771,47 +3913,90 @@ window.__ModuleLoader__.load({
             bestScore = score
           }
         }
-        if (best === null) best = findPatchTextFallback(owner, wanted)
+        if (best === null) best = findPatchTextFallback(owner, wanted, patchedTexts.get(key) ?? '')
         if (best === null) continue
         patchOriginals.set(best, { html: best.innerHTML, text: best.textContent })
         best.textContent = displayText(wanted.text)
         best.setAttribute(PATCH_ATTR, key)
         best.style.whiteSpace = 'pre-wrap'
         patchedElements.set(key, best)
+        patchedTexts.set(key, wanted.text)
       }
 
-      // Reasoning notes: put one under the reply row, found by the reply's own
-      // answer text (the panel itself may be collapsed and absent).
-      for (const [key, wanted] of wantedNotes) {
-        let note = [...root.querySelectorAll(`[${NOTE_ATTR}]`)].find((el) => el.getAttribute(NOTE_ATTR) === key)
-        let row = rowBySeq.get(wanted.reply.seq) ?? null
-        const replyText = matchText(wanted.reply.text)
-        for (const node of row === null ? nodes : []) {
-          const text = matchText(node.textContent)
-          if (text === '') continue
-          if (replyText !== '' && text.includes(replyText)) {
-            row = node
-            break
+      // A reasoning patch is drawn in place when the host renders that
+      // reasoning body; the note is only the fallback for a panel that is not
+      // in the DOM (or is drawn as a short summary without the full text).
+      for (const [key, wanted] of wantedReasoning) {
+        const owner = rowBySeq.get(wanted.seq)
+        const remembered = patchedElements.get(key)
+        if (remembered !== undefined) {
+          // The reasoning part is its own row (the flow key carries a
+          // `,reasoning` group part), so it is NOT the row `rowBySeq` picked for
+          // the seq - that one draws the answer. Only connectivity matters here.
+          const stillThere = remembered.isConnected === true
+          if (stillThere) {
+            const shown = displayText(wanted.text)
+            if (normalizedText(remembered.textContent) !== normalizedText(shown)) remembered.textContent = shown
+            if (remembered.getAttribute(PATCH_ATTR) !== key) remembered.setAttribute(PATCH_ATTR, key)
+            remembered.style.whiteSpace = 'pre-wrap'
+            patchedTexts.set(key, wanted.text)
+            continue
           }
-          if (matchText(wanted.block.original) !== '' && text.includes(matchText(wanted.block.original))) {
-            row = node
-            break
+          patchedElements.delete(key)
+        }
+        const done = [...root.querySelectorAll(`[${PATCH_ATTR}]`)].find((el) => el.getAttribute(PATCH_ATTR) === key)
+        if (done !== undefined) {
+          patchedElements.set(key, done)
+          continue
+        }
+        const original = matchText(wanted.original)
+        const previous = matchText(patchedTexts.get(key) ?? '')
+        const previousText = patchedTexts.get(key) ?? ''
+        let best = null
+        if (original !== '' || previous !== '') {
+          // The owning row first (a host that draws the reasoning inside the
+          // answer row), then the whole conversation: on this host the reasoning
+          // is its own row, so the answer row holds no reasoning text at all.
+          for (const scope of owner === undefined ? [null] : [owner, null]) {
+            let bestScore = Infinity
+            for (const el of containers) {
+              if (el.getAttribute(PATCH_ATTR) !== null) continue
+              if (scope !== null) {
+                try {
+                  if (el.closest('[data-chat-flow-key]') !== scope) continue
+                } catch {
+                  /* keep the global match */
+                }
+              }
+              const text = matchText(el.textContent)
+              if (text === '') continue
+              if (text !== original && !(previous !== '' && text === previous)) continue
+              const score = Math.abs(text.length - original.length)
+              if (score < bestScore) {
+                best = el
+                bestScore = score
+              }
+            }
+            if (best !== null) break
           }
+          if (best === null) best = findPatchTextFallback(owner ?? null, wanted, previousText)
+          if (best === null) best = findReasoningElement(root, wanted, previousText)
         }
-        if (note === undefined || note === null) {
-          note = document.createElement('details')
-          note.className = 'dshet-patch-note'
-          note.setAttribute(NOTE_ATTR, key)
-          const summary = document.createElement('summary')
-          summary.textContent = t('editor.patch-note')
-          const body = document.createElement('pre')
-          body.className = 'dshet-patch-note-body'
-          note.appendChild(summary)
-          note.appendChild(body)
+        if (best === null) {
+          // No body in the DOM (the panel is closed): the header snippet is the
+          // only place the edit can show.
+          if (owner !== undefined) patchReasoningSummary(owner, wanted)
+          patchReasoningSummary(root, wanted)
+          continue
         }
-        const body = note.querySelector('.dshet-patch-note-body')
-        if (body !== null && body.textContent !== wanted.text) body.textContent = wanted.text
-        if (note.isConnected !== true && row !== null) row.after(note)
+        patchOriginals.set(best, { html: best.innerHTML, text: best.textContent })
+        best.textContent = displayText(wanted.text)
+        best.setAttribute(PATCH_ATTR, key)
+        best.style.whiteSpace = 'pre-wrap'
+        patchedElements.set(key, best)
+        patchedTexts.set(key, wanted.text)
+        if (owner !== undefined) patchReasoningSummary(owner, wanted)
+        patchReasoningSummary(root, wanted)
       }
     }
 
@@ -2820,6 +4005,8 @@ window.__ModuleLoader__.load({
       const animate = controller.consumeAnimate()
       const rows = document.querySelectorAll('[data-chat-flow-key]')
       syncEditableSet(controller, rows.length)
+      let editorCandidate = null
+      let editorRank = -1
       for (const row of rows) {
         if (!(row instanceof HTMLElement)) continue
         const key = row.getAttribute('data-chat-flow-key')
@@ -2872,7 +4059,20 @@ window.__ModuleLoader__.load({
           (seqsFor(node).includes(editing.seq) ||
             seqsFor(node).some((seq) => headRevision(seq, view.revisions) === editing.seq))
         if (coversEditing && (!hidden || row.style.display !== 'none')) {
-          renderEditor(row, controller, view, t)
+          const rank = editorRowRank(row, editing.mode)
+          if (rank > editorRank) {
+            editorRank = rank
+            editorCandidate = row
+          }
+        }
+      }
+      if (view.editing !== null) {
+        if (editorCandidate !== null) {
+          renderEditor(editorCandidate, controller, view, t)
+        } else {
+          clearEditor()
+          controller.editorBox = null
+          controller.editorRow = null
         }
       }
       if (view.editing === null) {
@@ -3001,23 +4201,51 @@ window.__ModuleLoader__.load({
             && target.closest('.dshet-editor') !== null
           if (!inside) controller.editorFocus = false
         }
+        let placementScheduled = false
+        let lastPlacementKey = ''
         const keepPlaced = () => {
-          const row = controller.editorRow
-          const box = controller.editorBox
-          if (row !== null && box !== null && box.isConnected === true) placeEditor(row, box, controller.editorAnchor)
+          if (placementScheduled) return
+          placementScheduled = true
+          const run = () => {
+            placementScheduled = false
+            const row = controller.editorRow
+            const box = controller.editorBox
+            if (row === null || box === null || box.isConnected !== true) return
+            const rect = row.getBoundingClientRect()
+            const viewportWidth = typeof window !== 'undefined' && typeof window.innerWidth === 'number' ? window.innerWidth : 0
+            const viewportHeight = typeof window !== 'undefined' && typeof window.innerHeight === 'number' ? window.innerHeight : 0
+            const key = `${Math.round(rect.top)}:${Math.round(rect.height)}:${Math.round(typeof window !== 'undefined' && typeof window.scrollY === 'number' ? window.scrollY : 0)}:${viewportWidth}x${viewportHeight}:${controller.editorBlockKind}:${controller.editorAll === true ? 'all' : ''}`
+            if (key === lastPlacementKey) return
+            lastPlacementKey = key
+            placeEditor(row, box, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
+          }
+          if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run)
+          else window.setTimeout(run, 16)
+        }
+        const onResize = () => {
+          // A window resize (or a fullscreen toggle / zoom) moves the composer
+          // and the conversation edges; the cached band must not survive it.
+          conversationBoundsCache = null
+          keepPlaced()
         }
         document.addEventListener('pointerdown', onPointerDown, true)
         // Scroll events do not bubble; capture reaches the inner scroller too.
         document.addEventListener('scroll', keepPlaced, { capture: true, passive: true })
-        window.addEventListener('resize', keepPlaced)
+        window.addEventListener('resize', onResize)
+        let resizeObserver = null
+        if (typeof ResizeObserver === 'function') {
+          resizeObserver = new ResizeObserver(onResize)
+          try { resizeObserver.observe(document.body) } catch {}
+        }
         return () => {
           document.removeEventListener('pointerdown', onPointerDown, true)
           document.removeEventListener('scroll', keepPlaced, true)
-          window.removeEventListener('resize', keepPlaced)
+          window.removeEventListener('resize', onResize)
+          if (resizeObserver !== null) resizeObserver.disconnect()
         }
       }, [controller])
 
-      react.useEffect(() => {
+      useBrowserLayoutEffect(() => {
         if (snapshot === undefined) return undefined
         let scheduled = false
         const run = () => {
@@ -3029,7 +4257,33 @@ window.__ModuleLoader__.load({
           applyDom(snapshot, live, controller, t)
         }
         run()
-        const observer = new MutationObserver(() => {
+        const observer = new MutationObserver((records) => {
+          // Our own editor writes attributes and text while the user types;
+          // feeding those back into a full document pass is what made typing
+          // and streaming compete for the same frames.
+          let relevant = false
+          let lostOurAction = false
+          for (const record of records) {
+            const target = record.target
+            if (target !== null && target !== undefined && typeof target.closest === 'function' && target.closest('.dshet-layer') !== null) continue
+            relevant = true
+            if (record.removedNodes && record.removedNodes.length > 0) {
+              for (const node of record.removedNodes) {
+                if (node === null || node === undefined) continue
+                if (typeof node.closest === 'function' && node.closest('.dshet-action') !== null) lostOurAction = true
+                else if (typeof node.querySelector === 'function' && node.querySelector('.dshet-action') !== null) lostOurAction = true
+              }
+            }
+            break
+          }
+          if (!relevant) return
+          // The host rebuilt a row and our button went with it: put it back in
+          // the same task instead of waiting a frame for the rAF pass.
+          if (lostOurAction) {
+            scheduled = false
+            run()
+            return
+          }
           if (scheduled) return
           scheduled = true
           if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run)
@@ -3136,6 +4390,192 @@ window.__ModuleLoader__.load({
       editorLayer = null
     }
 
+    // --- editor-style preference ----------------------------------------------
+    //
+    // The style is a browser preference so the manager page and the editor read
+    // one value with no host round-trip. The host config's editorStyle is the
+    // default when nothing has been chosen here.
+    const EDITOR_STYLE_KEY = 'dsh-edit-turn/editorStyle'
+    const EDITOR_STYLES = ['frame', 'bubble', 'center']
+
+    function readStoredEditorStyle() {
+      try {
+        if (typeof localStorage === 'undefined') return null
+        const value = localStorage.getItem(EDITOR_STYLE_KEY)
+        return EDITOR_STYLES.includes(value) ? value : null
+      } catch {
+        return null
+      }
+    }
+
+    let editorStylePreference = readStoredEditorStyle() ?? 'frame'
+    const EDITOR_PLACEMENT_KEY = 'dsh-edit-turn/editorPlacement'
+    const EDITOR_PLACEMENTS = ['overlay', 'inline', 'legacy']
+
+    function readStoredEditorPlacement() {
+      try {
+        if (typeof localStorage === 'undefined') return null
+        const value = localStorage.getItem(EDITOR_PLACEMENT_KEY)
+        return EDITOR_PLACEMENTS.includes(value) ? value : null
+      } catch {
+        return null
+      }
+    }
+
+    let editorPlacementPreference = readStoredEditorPlacement() ?? 'overlay'
+    const EDITOR_HEIGHT_KEY = 'dsh-edit-turn/editorHeight'
+    const EDITOR_HEIGHTS = ['max', 'content', 'fill']
+
+    function readStoredEditorHeight() {
+      try {
+        if (typeof localStorage === 'undefined') return null
+        const value = localStorage.getItem(EDITOR_HEIGHT_KEY)
+        return EDITOR_HEIGHTS.includes(value) ? value : null
+      } catch {
+        return null
+      }
+    }
+
+    let editorHeightPreference = readStoredEditorHeight() ?? 'fill'
+    const editorHeightListeners = new Set()
+
+    function subscribeEditorHeight(listener) {
+      editorHeightListeners.add(listener)
+      return () => editorHeightListeners.delete(listener)
+    }
+
+    function setEditorHeightPreference(mode) {
+      if (!EDITOR_HEIGHTS.includes(mode)) return
+      editorHeightPreference = mode
+      try {
+        if (typeof localStorage !== 'undefined') localStorage.setItem(EDITOR_HEIGHT_KEY, mode)
+      } catch {}
+      for (const listener of [...editorHeightListeners]) {
+        try { listener() } catch {}
+      }
+    }
+
+    const editorPlacementListeners = new Set()
+
+    function subscribeEditorPlacement(listener) {
+      editorPlacementListeners.add(listener)
+      return () => editorPlacementListeners.delete(listener)
+    }
+
+    function setEditorPlacementPreference(placement) {
+      if (!EDITOR_PLACEMENTS.includes(placement)) return
+      editorPlacementPreference = placement
+      try {
+        if (typeof localStorage !== 'undefined') localStorage.setItem(EDITOR_PLACEMENT_KEY, placement)
+      } catch {
+        /* private mode keeps the in-memory choice */
+      }
+      for (const listener of [...editorPlacementListeners]) {
+        try {
+          listener()
+        } catch {}
+      }
+    }
+
+    const editorStyleListeners = new Set()
+
+    function subscribeEditorStyle(listener) {
+      editorStyleListeners.add(listener)
+      return () => editorStyleListeners.delete(listener)
+    }
+
+    function setEditorStylePreference(style) {
+      if (!EDITOR_STYLES.includes(style)) return
+      editorStylePreference = style
+      try {
+        if (typeof localStorage !== 'undefined') localStorage.setItem(EDITOR_STYLE_KEY, style)
+      } catch {
+        /* private mode keeps the in-memory choice */
+      }
+      for (const listener of [...editorStyleListeners]) {
+        try {
+          listener()
+        } catch {}
+      }
+    }
+
+    /**
+     * The component row's configure page (`plugins.row.config`), the same slot
+     * dsh-delete-turn uses. The manager's summary asks for a one-liner; the page
+     * itself renders the three-way picker.
+     */
+    function EditorStyleOption({ view, t }) {
+      const tr = typeof t === 'function' ? t : (key) => key
+      const [style, setStyle] = react.useState(editorStylePreference)
+      const [placement, setPlacement] = react.useState(editorPlacementPreference)
+      const [heightMode, setHeightMode] = react.useState(editorHeightPreference)
+      react.useEffect(() => subscribeEditorStyle(() => setStyle(editorStylePreference)), [])
+      react.useEffect(() => subscribeEditorPlacement(() => setPlacement(editorPlacementPreference)), [])
+      react.useEffect(() => subscribeEditorHeight(() => setHeightMode(editorHeightPreference)), [])
+      const summaryKey = style === 'bubble' ? 'config.summary.bubble' : style === 'center' ? 'config.summary.center' : 'config.summary.frame'
+      if (view === 'summary') return `${tr(summaryKey)} · ${tr(placement === 'inline' ? 'config.summary.inline' : placement === 'legacy' ? 'config.summary.legacy' : 'config.summary.overlay')} · ${tr(heightMode === 'content' ? 'config.summary.height.content' : heightMode === 'fill' ? 'config.summary.height.fill' : 'config.summary.height.max')}`
+      const hintKey = style === 'bubble' ? 'config.hint.bubble' : style === 'center' ? 'config.hint.center' : 'config.hint.frame'
+      const placementHint = placement === 'inline' ? 'config.hint.inline' : placement === 'legacy' ? 'config.hint.legacy' : 'config.hint.overlay'
+      const heightHint = heightMode === 'content' ? 'config.hint.height.content' : heightMode === 'fill' ? 'config.hint.height.fill' : 'config.hint.height.max'
+      const choices = [
+        ['frame', 'style.frame'],
+        ['bubble', 'style.bubble'],
+        ['center', 'style.center'],
+      ]
+      return jsxs('div', {
+        className: 'dshet-config',
+        children: [
+          jsxs('label', {
+            className: 'dshet-config-row',
+            children: [
+              jsx('span', { children: tr('config.style') }),
+              jsx('select', {
+                className: 'dshet-select',
+                value: style,
+                onChange: (event) => setEditorStylePreference(event.target.value),
+                children: choices.map(([value, key]) => jsx('option', { value, children: tr(key) }, value)),
+              }),
+            ],
+          }),
+          jsx('p', { className: 'dshet-config-hint', children: tr(hintKey) }),
+          jsxs('label', {
+            className: 'dshet-config-row',
+            children: [
+              jsx('span', { children: tr('config.placement') }),
+              jsx('select', {
+                className: 'dshet-select',
+                value: placement,
+                onChange: (event) => setEditorPlacementPreference(event.target.value),
+                children: [
+                  jsx('option', { value: 'overlay', children: tr('placement.overlay') }),
+                  jsx('option', { value: 'inline', children: tr('placement.inline') }),
+                  jsx('option', { value: 'legacy', children: tr('placement.legacy') }),
+                ],
+              }),
+            ],
+          }),
+          jsx('p', { className: 'dshet-config-hint', children: tr(placementHint) }),
+          jsxs('label', {
+            className: 'dshet-config-row',
+            children: [
+              jsx('span', { children: tr('config.height') }),
+              jsx('select', {
+                className: 'dshet-select',
+                value: heightMode,
+                onChange: (event) => setEditorHeightPreference(event.target.value),
+                children: [
+                  jsx('option', { value: 'max', children: tr('height.max') }),
+                  jsx('option', { value: 'content', children: tr('height.content') }),
+                  jsx('option', { value: 'fill', children: tr('height.fill') }),
+                ],
+              }),
+            ],
+          }),
+          jsx('p', { className: 'dshet-config-hint', children: tr(heightHint) }),
+        ],
+      })
+    }
+
     // --- plugin ---------------------------------------------------------------
 
     function apply(ctx) {
@@ -3174,6 +4614,31 @@ window.__ModuleLoader__.load({
       // A reply's edit entry lives in the official assistant-actions strip, one
       // entry per assistant message. order 5 puts it ahead of the feedback
       // entries (order 10), so the pencil sits with the leading icons.
+      // The active skin repaints its surfaces at any time (switching one
+      // rewrites body's attributes and inline variables), so the palette is
+      // resolved once and then again on every theme or skin change.
+      ctx.effect(() => {
+        const run = () => {
+          try {
+            resolveSkinPalette()
+          } catch {
+            /* the stylesheet defaults stand */
+          }
+        }
+        run()
+        const observer =
+          typeof MutationObserver === 'function' && document && document.body
+            ? new MutationObserver(run)
+            : null
+        if (observer !== null) {
+          observer.observe(document.body, { attributes: true, attributeFilter: ['class', 'style', 'data-ds-dark-theme'] })
+          if (document.documentElement) observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style'] })
+        }
+        return () => {
+          if (observer !== null) observer.disconnect()
+        }
+      }, 'dsh-edit-turn:skin-palette')
+
       ctx.slots.inject('conversation.chat.assistant-actions', () =>
         ctx.slots.register(
           {
@@ -3190,6 +4655,20 @@ window.__ModuleLoader__.load({
         ),
       )
 
+      // The row's configure arrow in the plugin manager. Without this the
+      // component page is a read-only overview (the card cannot be opened); the
+      // key is the manager's `<bundle package>#<row id>` contract.
+      ctx.slots.inject('plugins.row.config', () =>
+        ctx.slots.register(
+          {
+            name: 'plugins.row.config',
+            key: 'dsh-edit-turn#dsh-edit-turn',
+            locale: NS,
+          },
+          EditorStyleOption,
+        ),
+      )
+
       ctx.slots.inject('conversation.input.overlay', () =>
         ctx.slots.register(
           {