dsh-edit-turn 0.3.2 → 0.5.0

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.2'
+    const PLUGIN_VERSION = '0.5.0'
 
     // --- copy -----------------------------------------------------------------
 
@@ -65,6 +68,37 @@ 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': '只改这一块；工具调用、其余内容和后续对话保持不变。',
@@ -120,6 +154,37 @@ 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.',
@@ -222,6 +287,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:8px;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 +328,20 @@ 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: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[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:12px;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 12px 12px;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,.dshet-editor[data-dshet-inplace="1"] .dshet-error{position:absolute;left:8px;bottom:6px;max-width:60%;margin:0;background:var(--dshet-panel);border-radius:8px;padding:2px 6px}',
+
+      '.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 +357,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,15 +368,44 @@ 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 16px 16px}',
+      '.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-btn.dshet-btn-save{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#81858c;filter:none}',
+      '.dshet-btn.dshet-btn-save:hover:not(:disabled){background:var(--dshet-hover);filter:none}',
+      '.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:#81858c;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:8px;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}',
@@ -364,6 +471,9 @@ window.__ModuleLoader__.load({
         this.editorElement = null
         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.
@@ -505,6 +615,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,
@@ -514,6 +630,9 @@ 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,
               loaded: true,
               loadError: false,
@@ -552,7 +671,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,
@@ -563,9 +686,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)
@@ -592,6 +722,8 @@ window.__ModuleLoader__.load({
           blocks: replyBlocks,
           blockIndex: this.editorBlockIndex,
           blockKind: this.editorBlockKind,
+          targetSeq: this.editorTargetSeq,
+          allBlocks: false,
           confirming: false,
           failure: null,
         })
@@ -625,17 +757,31 @@ 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)
+        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
+        }
+        this.editorAll = false
+        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))
         if (block === undefined || block.kind === undefined) 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, failure: null })
       }
 
       close() {
@@ -644,6 +790,8 @@ window.__ModuleLoader__.load({
         this.editorElement = null
         this.editorBox = null
         this.editorRow = null
+        this.editorAnchor = null
+        this.editorMode = 'reply'
         this.editorFocus = false
         this.editor = null
         this.editorDraft = ''
@@ -653,6 +801,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 })
       }
 
@@ -660,6 +811,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.
        *
@@ -725,6 +883,56 @@ 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 })
+        try {
+          const res = await fetch(`${ROUTE_PREFIX}/apply`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ sessionId: this.sessionId, targets }),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || !data.ok) {
+            this.publish({ pending: false, failure: data && data.code ? String(data.code) : 'generic' })
+            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()
@@ -760,6 +968,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' })
@@ -786,7 +997,11 @@ 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 }),
+                  }
                 : {}),
             }),
           })
@@ -1197,9 +1412,9 @@ window.__ModuleLoader__.load({
      * at all and reads exactly like a dead pencil.
      */
     function wireAction(button) {
-      pressable(button, () => {
+      pressable(button, (event) => {
         const activate = button[ACTIVATE]
-        if (typeof activate === 'function') activate()
+        if (typeof activate === 'function') activate(event)
       })
     }
 
@@ -1261,7 +1476,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'
@@ -1274,7 +1490,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
@@ -1307,6 +1538,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
@@ -1815,7 +2080,14 @@ window.__ModuleLoader__.load({
       } else if (button.dataset !== undefined && button.dataset.dshetFallback !== undefined) {
         delete button.dataset.dshetFallback
       }
-      button[ACTIVATE] = () => controller.open(entry.target)
+      button[ACTIVATE] = (event) => controller.open({
+        ...entry.target,
+        // The editor belongs beside the pencil the user just pressed, not at the
+        // top of a row that may be taller than the screen.
+        anchor: event !== undefined && event !== null && event.currentTarget !== undefined
+          ? event.currentTarget
+          : button,
+      })
       liveHosts.add(host)
       if (button.getAttribute('aria-label') !== label) {
         button.setAttribute('aria-label', label)
@@ -1945,6 +2217,30 @@ 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
+    }
+
+    function pageBackground() {
+      try {
+        if (typeof getComputedStyle === 'function' && typeof document !== 'undefined') {
+          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
@@ -1961,35 +2257,429 @@ 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) {
+    /**
+     * 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()
+      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
+      }
+      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 rect = row.getBoundingClientRect()
+      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 = rect.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 = rect.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
+        const available = Math.max(40, height - offsetTop - 8)
+        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.
@@ -1997,7 +2687,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`
@@ -2019,7 +2712,7 @@ window.__ModuleLoader__.load({
         pressed = true
         event.preventDefault()
         event.stopPropagation()
-        action()
+        action(event)
       }
       button.onclick = (event) => {
         event.preventDefault()
@@ -2028,7 +2721,7 @@ window.__ModuleLoader__.load({
           pressed = false
           return
         }
-        action()
+        action(event)
       }
     }
 
@@ -2149,6 +2842,7 @@ window.__ModuleLoader__.load({
         view.parts.map((part) => part.key).join('.'),
         // 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('|')
     }
 
@@ -2224,6 +2918,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.
      *
@@ -2252,7 +2956,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()
@@ -2270,7 +2977,7 @@ window.__ModuleLoader__.load({
         ? controller.editorBox
         : null
       if (existing && existing.dataset.dshetFor === marker) {
-        placeEditor(row, existing)
+        placeEditor(row, existing, controller.editorMode, controller.editorStyle, controller.editorBlockKind, controller.editorBlocks)
         return
       }
 
@@ -2292,30 +2999,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)
@@ -2337,13 +3078,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)
+        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)
+        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
@@ -2370,6 +3111,100 @@ window.__ModuleLoader__.load({
       })
       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
@@ -2409,12 +3244,20 @@ window.__ModuleLoader__.load({
 
       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()
@@ -2423,20 +3266,29 @@ 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)`
+      // 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
       pressable(submit, () => {
         if (view.confirming) controller.confirm()
         else controller.review()
       })
 
-      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
@@ -2445,20 +3297,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)
       if (!view.confirming && !view.pending && (fresh || wasFocused)) {
         try {
           area.focus()
@@ -2802,6 +3683,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')
@@ -2854,7 +3737,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) {
@@ -2932,6 +3828,7 @@ window.__ModuleLoader__.load({
         event.preventDefault()
         event.stopPropagation()
         controller.open({
+          anchor: event.currentTarget,
           seq: entry.seq,
           mode: 'reply',
           turn: entry.turn,
@@ -2982,23 +3879,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)
+          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 = () => {
@@ -3010,7 +3935,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)
@@ -3117,6 +4068,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) {
@@ -3171,6 +4308,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(
           {