dsh-as-aistudio 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-as-aistudio",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Google-AI-Studio-style turn controls for DeepSeek Harness, in one install: edit a prompt and re-run it, re-run a reply in place, delete a turn from the model context, and render sent prompts as Markdown. Self-contained: the plugin list shows this one row; the four components are dependencies mounted by it. Each still installs alone and works alone.",
   "type": "module",
   "main": "src/index.js",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "dsh-delete-turn": "^0.1.8",
-    "dsh-edit-turn": "^0.2.18",
+    "dsh-edit-turn": "^0.2.19",
     "dsh-markdown-bubble": "^0.1.4",
     "dsh-rerun-turn": "^0.1.25"
   },

package/src/client.js

@@ -26,13 +26,21 @@ window.__ModuleLoader__.load({
 
     const NS = 'dsh-edit-turn'
     const ROUTE_PREFIX = '/dsh-edit-turn'
+    // One picked file may not exceed this. It mirrors the platform's own default
+    // per-image ceiling (dsh-attachment-local's 20 MiB), because a payload above
+    // it would be refused by the store anyway - saying so in the picker is
+    // kinder than a round trip that fails.
+    const MAX_ATTACH_BYTES = 20 * 1024 * 1024
+    // Above this a chip keeps its label instead of trying to draw itself: a
+    // thumbnail is not worth decoding a 30 MB attachment for.
+    const MAX_THUMB_BYTES = 8 * 1024 * 1024
     // The sibling that owns re-running: it shadows a turn and regenerates it
     // from the prompt the surface now shows, then replays what followed. The
     // editor's re-run button is only offered when it is mounted.
     const RERUN_PREFIX = '/dsh-rerun-turn'
 
     /** Keep in sync with package.json and lib/index.js. */
-    const PLUGIN_VERSION = '0.2.18'
+    const PLUGIN_VERSION = '0.2.19'
 
     // --- copy -----------------------------------------------------------------
 
@@ -59,6 +67,8 @@ window.__ModuleLoader__.load({
       'editor.pending': '正在保存…',
       'editor.warn.attachments': '这条消息包含图片或文件附件，改写会丢弃它们，只保留文字。',
       'editor.warn-reply': '这条回答包含工具调用或思考过程，替换后它们会被一并移除。',
+      'editor.attach.add': '添加附件',
+      'editor.attach.remove': '移除这个附件',
       'confirm.body': '确认后会立即执行：这条消息之后的内容会从模型上下文中移除。原始会话日志不会改写。',
       'error.invalid': '请求无效，请刷新后重试。',
       'error.session-not-active': '这个会话当前未激活，请先打开该会话再编辑。',
@@ -80,6 +90,11 @@ window.__ModuleLoader__.load({
       'error.already-retired': '这一轮的内容已经不在当前上下文里了。',
       'error.rerunning': '已经有一次重跑在进行中，请等它结束。',
       'error.internal': '服务器内部错误，请稍后重试。',
+      'error.attachment-refused': '附件没能存下来，本次修改没有执行。',
+      'error.attachments-dropped': '已保存，但这条消息的图片或文件没能保留：当前部署没有可用的附件存储。',
+      'error.attachment-unreadable': '这个附件读不出来，请换一个文件。',
+      'error.attachment-too-large': '这个文件太大，无法作为附件。',
+      'error.too-large': '这次修改太大，服务器没有接收。',
     }
 
     const en = {
@@ -100,6 +115,8 @@ window.__ModuleLoader__.load({
       'editor.pending': 'Working...',
       'editor.warn.attachments': 'This message carries image or file attachments; rewriting keeps the text only.',
       'editor.warn-reply': 'This reply carries tool calls or reasoning; replacing it removes them.',
+      'editor.attach.add': 'Add an attachment',
+      'editor.attach.remove': 'Remove this attachment',
       'confirm.body': 'Confirming applies right away: everything after this message leaves the model context. The original session log is never rewritten.',
       'error.invalid': 'Invalid request; refresh and try again.',
       'error.session-not-active': 'This session is not open in DSH; open it first.',
@@ -121,6 +138,11 @@ window.__ModuleLoader__.load({
       'error.already-retired': 'This turn is no longer part of the current context.',
       'error.rerunning': 'A re-run is already in flight; wait for it to finish.',
       'error.internal': 'The host hit an internal error; try again shortly.',
+      'error.attachment-refused': 'The attachment could not be stored, so nothing was changed.',
+      'error.attachments-dropped': 'Saved, but the images or files on this message could not be kept: this deployment mounts no attachment store.',
+      'error.attachment-unreadable': 'That attachment could not be read; try another file.',
+      'error.attachment-too-large': 'That file is too large to attach.',
+      'error.too-large': 'That revision was too large for the host to accept.',
     }
 
     // Every error code the host can return travels through here. A code is
@@ -229,6 +251,25 @@ window.__ModuleLoader__.load({
       '.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 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
+      // tokens as the panel so a skin cannot wash them out. A chip only takes
+      // the width it needs; the label is the only part that may shrink, and the
+      // remove button never does.
+      '.dshet-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 14px 0}',
+      '.dshet-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 6px;border:1px solid var(--dshet-line);border-radius:10px;background:var(--dshet-chip);color:var(--dshet-ink);font-size:12px;line-height:18px}',
+      '.dshet-thumb{width:26px;height:26px;flex:none;border-radius:6px;object-fit:cover;background:var(--dshet-field)}',
+      '.dshet-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.dshet-chip-size{flex:none;color:var(--dshet-ink-dim)}',
+      '.dshet-chip-remove{flex:none;width:18px;height:18px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--dshet-ink-dim);font:inherit;font-size:13px;line-height:16px;cursor:pointer}',
+      '.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: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}',
+      '.dshet-attach-input{display:none}',
       '.dshet-note,.dshet-warn,.dshet-error{margin:4px 14px 0;font-size:12px;line-height:19px}',
       '.dshet-note{color:var(--dshet-ink-dim)}',
       '.dshet-warn{color:var(--dsw-alias-state-warning-primary,#a2650a)}',
@@ -303,6 +344,16 @@ window.__ModuleLoader__.load({
         this.editorRow = null
         this.editorFocus = false
         this.editorDraft = ''
+        // The block list being edited: what the carrier will be rebuilt from.
+        // Every entry is either `{ keep: <index> }` - a block of this message the
+        // user left alone - or `{ add: { data, mediaType?, name } }` for
+        // something they just picked, with the display fields the chip needs.
+        // The list is the ONLY thing that decides what the host writes, which is
+        // why a chip the user removes simply leaves it.
+        this.editorParts = []
+        // Names the added chips, so removing one is a matter of identity rather
+        // than of position (a DOM pass may run between two of them).
+        this.uploadSeq = 0
         this.clearTimer = null
         this.pendingRerun = false
         this.siblingRerun = 'unknown'
@@ -319,6 +370,7 @@ window.__ModuleLoader__.load({
           repliesByMessage: new Map(),
           editing: null,
           draft: '',
+          parts: [],
           confirming: false,
           pending: false,
           failure: null,
@@ -326,6 +378,12 @@ window.__ModuleLoader__.load({
           surfaceReady: false,
           loaded: false,
           loadError: false,
+          // What the host said it can do with a block list (see /state's
+          // `capabilities`). False is the safe reading: an older host, a failed
+          // load and a deployment without an attachment store all mean "text
+          // only", which is what the editor then offers - with the warning that
+          // says so - instead of a chip it cannot honour.
+          attachmentsOk: false,
           // Matches the host's default: one click applies. Only an explicit
           // `confirm: true` in the profile turns the second step back on.
           confirmStep: false,
@@ -410,6 +468,10 @@ window.__ModuleLoader__.load({
               loaded: true,
               loadError: false,
               confirmStep: !(data.config && data.config.confirm === false),
+              // What this host can do with blocks, taken from its own answer.
+              // An older host says nothing here, which reads as "text only" -
+              // the behaviour every release before blocks had.
+              attachmentsOk: Boolean(data.capabilities && data.capabilities.attachments === true),
             })
           })
           .catch(() => {
@@ -430,7 +492,10 @@ window.__ModuleLoader__.load({
         const previous = this.editorElement
         this.load()
         this.editor = target
-        if (!same) this.editorDraft = target.text
+        if (!same) {
+          this.editorDraft = target.text
+          this.editorParts = blocksToParts(target, this.sessionId)
+        }
         this.confirming = false
         this.editorElement = null
         // The intent to keep the user's caret in this box. It is set when the
@@ -446,7 +511,7 @@ window.__ModuleLoader__.load({
             /* focus is best-effort */
           }
         }
-        this.publish({ editing: target, draft: this.editorDraft, confirming: false, failure: null })
+        this.publish({ editing: target, draft: this.editorDraft, parts: this.editorParts.slice(), confirming: false, failure: null })
         this.probeSiblingRerun()
       }
 
@@ -483,15 +548,81 @@ window.__ModuleLoader__.load({
         this.editorFocus = false
         this.editor = null
         this.editorDraft = ''
+        this.editorParts = []
         this.confirming = false
         this.editorElement = null
-        this.publish({ editing: null, draft: '', confirming: false, failure: null })
+        this.publish({ editing: null, draft: '', parts: [], confirming: false, failure: null })
       }
 
       setDraft(value) {
         this.editorDraft = value
       }
 
+      /**
+       * One chip the user removed leaves the block list, and nothing else.
+       *
+       * The list IS the edit: a block that is no longer in it is not written
+       * when the carrier is rebuilt, so removing a chip is the whole
+       * implementation of "this attachment should not be here any more".
+       */
+      removePart(key) {
+        const next = this.editorParts.filter((part) => part.key !== key)
+        if (next.length === this.editorParts.length) return
+        this.editorParts = next
+        this.publish({ parts: next.slice() })
+      }
+
+      /** One payload the user picked joins the block list, at the end. */
+      addUpload(upload) {
+        this.editorParts = [...this.editorParts, upload]
+        this.publish({ parts: this.editorParts.slice() })
+      }
+
+      /**
+       * Read picked files and append one chip each.
+       *
+       * The bytes stay in the browser until the save: the host admits them
+       * through the platform's attachment store only when the user commits, so
+       * opening the editor and cancelling stores nothing.
+       */
+      attachFiles(files) {
+        let list = []
+        try {
+          list = files === null || files === undefined ? [] : Array.prototype.slice.call(files)
+        } catch {
+          list = []
+        }
+        for (const file of list) {
+          if (!file || typeof file !== 'object') continue
+          if (typeof file.size === 'number' && file.size > MAX_ATTACH_BYTES) {
+            this.notify('attachment-too-large')
+            continue
+          }
+          const name = typeof file.name === 'string' && file.name !== '' ? file.name : null
+          const mediaType = typeof file.type === 'string' && file.type !== '' ? file.type : null
+          readAsBase64(file, (data) => {
+            if (data === null) {
+              this.notify('attachment-unreadable')
+              return
+            }
+            this.uploadSeq += 1
+            this.addUpload({
+              key: `a${this.uploadSeq}`,
+              add: {
+                data,
+                ...(mediaType === null ? {} : { mediaType }),
+                ...(name === null ? {} : { name }),
+              },
+              // The chip's own fields. A picked image can show itself through
+              // the very bytes it is carrying - no round trip, no store.
+              label: name !== null ? name : mediaType !== null ? mediaType : 'attachment',
+              bytes: typeof file.size === 'number' ? file.size : null,
+              thumbnail: `data:${mediaType === null ? 'application/octet-stream' : mediaType};base64,${data}`,
+            })
+          })
+        }
+      }
+
       review() {
         this.pendingRerun = false
         this.runReview()
@@ -532,6 +663,13 @@ window.__ModuleLoader__.load({
           this.publish({ failure: 'empty' })
           return
         }
+        // What the host will rebuild the carrier from: the blocks still on the
+        // list, in order, plus anything picked. Sent only when the host answered
+        // that it can carry blocks - a request that names blocks this host would
+        // have to drop is a request that lies about what the save did.
+        const parts = target.mode === 'prompt' && this.view.attachmentsOk === true
+          ? this.editorParts.map((part) => (part.keep !== undefined ? { keep: part.keep } : { add: part.add }))
+          : undefined
         this.publish({ pending: true, failure: null })
         try {
           const res = await fetch(`${ROUTE_PREFIX}/apply`, {
@@ -542,6 +680,7 @@ window.__ModuleLoader__.load({
               seq: target.seq,
               messageId: typeof target.messageId === 'string' ? target.messageId : undefined,
               text,
+              ...(parts === undefined ? {} : { parts }),
             }),
           })
           const data = await res.json().catch(() => ({}))
@@ -572,6 +711,11 @@ window.__ModuleLoader__.load({
               messageId: typeof target.messageId === 'string' ? target.messageId : undefined,
               text,
               attachments: typeof target.attachments === 'number' ? target.attachments : 0,
+              // The host answers with what the carrier now carries, described
+              // the way /state describes it. Adopted for the row drawn before
+              // the refresh lands: without it a second save could not know
+              // which blocks are still there and would rewrite text-only.
+              blocks: Array.isArray(data.blocks) ? data.blocks : [],
             })
           }
           // A reply edit shadows its own reply too, so it leaves the editable
@@ -584,6 +728,7 @@ window.__ModuleLoader__.load({
           this.animateOnce = true
           this.editor = null
           this.editorDraft = ''
+          this.editorParts = []
           this.editorElement = null
           this.editorBox = null
           this.editorRow = null
@@ -597,6 +742,7 @@ window.__ModuleLoader__.load({
             revisions,
             editable,
             replies,
+            parts: [],
             failure: null,
           })
           // `unchanged` means the host wrote NOTHING: the draft is (verbatim)
@@ -618,6 +764,11 @@ window.__ModuleLoader__.load({
             // failed second half has to be reported somewhere that survives that.
             if (data.kind === 'reply' && data.applied === false) this.notify('reply')
             if (data.kind !== 'reply' && data.applied === false) this.notify('prompt')
+            // The save landed, but it left non-text blocks behind (the host says
+            // so): the editor that could have warned is gone by now, so this is
+            // the only place the user can still be told (see applyEdit's
+            // `dropped`).
+            if (data.kind !== 'reply' && data.applied === true && data.dropped === true) this.notify('attachments-dropped')
           }
           // Save first, re-run second - always: the sibling re-runs the turn
           // from the prompt the surface NOW shows, so the revised wording has
@@ -725,6 +876,10 @@ window.__ModuleLoader__.load({
           messageId: entry.messageId,
           text: typeof entry.text === 'string' ? entry.text : '',
           attachments: typeof entry.attachments === 'number' ? entry.attachments : 0,
+          // The blocks this message carries, as /state described them. They seed
+          // the editor's chips; a host that does not describe them (or an
+          // optimistic entry that predates its refresh) simply has none.
+          blocks: Array.isArray(entry.blocks) ? entry.blocks : [],
         }
       }
       return null
@@ -1686,6 +1841,94 @@ window.__ModuleLoader__.load({
     // injecting a second controlled tree into it would fight its reconciler.
     // The draft is mirrored into the controller on every input event, so a
     // host re-render that wipes the textarea cannot lose what was typed.
+    // --- block chips ----------------------------------------------------------
+    //
+    // A message's non-text blocks, as the editor shows them: one chip per block,
+    // each with what the block itself reported about itself (a name, a size, and
+    // whether its bytes are reachable) and a remove button. Nothing here reads a
+    // block TYPE: a chip is drawn from the fields a block carries, so a block
+    // kind the platform adds later shows up with its own name and needs no
+    // change in this file.
+
+    /** One chip's display fields, taken from whatever the block said about itself. */
+    function chipOf(block) {
+      const name = typeof block.name === 'string' && block.name !== '' ? block.name : null
+      const mediaType = typeof block.mediaType === 'string' && block.mediaType !== '' ? block.mediaType : null
+      const type = typeof block.type === 'string' && block.type !== '' ? block.type : 'block'
+      const bytes = typeof block.bytes === 'number' ? block.bytes : null
+      return { label: name !== null ? name : mediaType !== null ? mediaType : type, bytes }
+    }
+
+    /**
+     * The block list an editor starts from: every block of the message, kept.
+     *
+     * A reply starts from none. What a reply carries beside its text - tool
+     * calls, reasoning - cannot survive a replacement (their results no longer
+     * hold), so offering a chip for them would promise something the edit cannot
+     * keep; the editor warns about them instead.
+     */
+    function blocksToParts(target, sessionId) {
+      if (!target || target.mode !== 'prompt') return []
+      const blocks = Array.isArray(target.blocks) ? target.blocks : []
+      const parts = []
+      for (const block of blocks) {
+        if (!block || typeof block.index !== 'number') continue
+        const chip = chipOf(block)
+        parts.push({
+          keep: block.index,
+          key: `k${block.index}`,
+          label: chip.label,
+          bytes: chip.bytes,
+          thumbnail: block.preview === true ? previewUrl(sessionId, target.seq, block.index) : null,
+        })
+      }
+      return parts
+    }
+
+    /** Where one stored block's bytes are read from, for its thumbnail. */
+    function previewUrl(sessionId, seq, index) {
+      return `${ROUTE_PREFIX}/attachment?sessionId=${encodeURIComponent(sessionId)}&seq=${seq}&index=${index}`
+    }
+
+    /** A byte count a human reads at a glance. */
+    function formatBytes(bytes) {
+      if (typeof bytes !== 'number' || !Number.isFinite(bytes) || bytes < 0) return ''
+      if (bytes < 1024) return `${bytes} B`
+      const units = ['KB', 'MB', 'GB']
+      let value = bytes / 1024
+      let unit = 0
+      while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024
+        unit += 1
+      }
+      return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`
+    }
+
+    /**
+     * One picked file's bytes, base64, without the Data URL prefix.
+     *
+     * Read here rather than at save time so a save is one request: the payload
+     * travels with the revision the user committed to.
+     */
+    function readAsBase64(file, done) {
+      if (typeof FileReader !== 'function') {
+        done(null)
+        return
+      }
+      try {
+        const reader = new FileReader()
+        reader.onload = () => {
+          const result = typeof reader.result === 'string' ? reader.result : ''
+          const comma = result.indexOf(',')
+          done(comma === -1 ? null : result.slice(comma + 1))
+        }
+        reader.onerror = () => done(null)
+        reader.readAsDataURL(file)
+      } catch {
+        done(null)
+      }
+    }
+
     // The re-render marker for the in-place editor.
     //
     // Every field `renderEditor` reads belongs here. A marker that only tracks
@@ -1702,6 +1945,13 @@ window.__ModuleLoader__.load({
         // The re-run button appears when the sibling probe lands; without it in
         // the marker the editor would never be rebuilt to show the button.
         view.siblingRerun === 'present' ? 'r' : 'n',
+        // Whether chips are drawn at all: a host that cannot admit blocks asks
+        // for the warning instead, and the box has to change with that answer.
+        view.attachmentsOk === true ? 'A' : 'a',
+        // The block list itself. Removing a chip and adding one both change what
+        // saving would write, so both have to redraw the strip - and the chip
+        // keys are enough to tell one list from another.
+        view.parts.map((part) => part.key).join('.'),
       ].join('|')
     }
 
@@ -1720,6 +1970,100 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * The chips: one per block on the block list.
+     *
+     * A chip IS the block's presence in the edit. Removing it takes the block
+     * off the list, and a block that is not on the list is not written when the
+     * carrier is rebuilt - the whole mechanism, and the same one for a picture,
+     * a file and whatever the platform carries next. A chip draws itself from
+     * the bytes the block already has, and gives up on its thumbnail when the
+     * browser says they are not a picture: no type is consulted either way.
+     */
+    function editorChips(controller, view, t) {
+      const strip = document.createElement('div')
+      strip.className = 'dshet-chips'
+      for (const part of view.parts) {
+        const chip = document.createElement('div')
+        chip.className = 'dshet-chip'
+        chip.dataset.dshetChip = part.key
+        const drawable = typeof part.thumbnail === 'string' && part.thumbnail !== '' &&
+          (typeof part.bytes !== 'number' || part.bytes <= MAX_THUMB_BYTES)
+        if (drawable) {
+          const image = document.createElement('img')
+          image.className = 'dshet-thumb'
+          image.alt = ''
+          image.src = part.thumbnail
+          image.addEventListener('error', () => {
+            const parent = image.parentElement
+            if (typeof image.remove === 'function') image.remove()
+            else if (parent !== null && parent !== undefined && typeof parent.removeChild === 'function') parent.removeChild(image)
+          })
+          chip.appendChild(image)
+        }
+        const label = document.createElement('span')
+        label.className = 'dshet-chip-label'
+        label.textContent = part.label
+        chip.appendChild(label)
+        const size = formatBytes(part.bytes)
+        if (size !== '') {
+          const measured = document.createElement('span')
+          measured.className = 'dshet-chip-size'
+          measured.textContent = size
+          chip.appendChild(measured)
+        }
+        const remove = document.createElement('button')
+        remove.type = 'button'
+        remove.className = 'dshet-chip-remove'
+        remove.textContent = '×'
+        remove.title = t('editor.attach.remove')
+        remove.setAttribute('aria-label', t('editor.attach.remove'))
+        remove.disabled = view.pending
+        pressable(remove, () => controller.removePart(part.key))
+        chip.appendChild(remove)
+        strip.appendChild(chip)
+      }
+      return strip
+    }
+
+    /**
+     * The add/replace entry: a picker that puts a block on the list.
+     *
+     * Drawn only when the host answered that it can admit a block. A deployment
+     * with no attachment store gets no picker, because a picker that cannot be
+     * honoured is worse than none - the warning below says what a save will
+     * drop instead.
+     */
+    function attachEntry(controller, view, t) {
+      const row = document.createElement('div')
+      row.className = 'dshet-attach-row'
+      const picker = document.createElement('input')
+      picker.type = 'file'
+      picker.multiple = true
+      picker.className = 'dshet-attach-input'
+      picker.style.display = 'none'
+      picker.addEventListener('change', () => {
+        controller.attachFiles(picker.files)
+        // Cleared so the same file can be picked again after a removal.
+        try {
+          picker.value = ''
+        } catch {
+          /* not every input lets this be written */
+        }
+      })
+      const add = document.createElement('button')
+      add.type = 'button'
+      add.className = 'dshet-attach'
+      add.textContent = t('editor.attach.add')
+      add.disabled = view.pending
+      pressable(add, () => {
+        if (typeof picker.click === 'function') picker.click()
+      })
+      row.appendChild(picker)
+      row.appendChild(add)
+      return row
+    }
+
     function renderEditor(row, controller, view, t) {
       const target = view.editing
       const texts = editorTexts(t, target)
@@ -1792,6 +2136,18 @@ window.__ModuleLoader__.load({
       })
       box.appendChild(area)
 
+      // 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
+      // what a save would drop, which is exactly what this editor did before
+      // blocks travelled at all. A reply never gets chips: what it carries
+      // beside its text cannot survive a replacement.
+      const chips = target.mode === 'prompt' && view.attachmentsOk === true
+      if (chips) {
+        if (view.parts.length > 0) box.appendChild(editorChips(controller, view, t))
+        box.appendChild(attachEntry(controller, view, t))
+      }
+
       // Only what the user has to know right now: what the replacement will
       // discard, and what went wrong. The running explanation lives in the
       // README and in the buttons' tooltips, the way a normal input box does it.
@@ -1801,7 +2157,9 @@ window.__ModuleLoader__.load({
         note.textContent = t('confirm.body')
         box.appendChild(note)
       }
-      if (target.attachments > 0) {
+      // Shown when saving really would drop something: a reply's tool calls
+      // always, and a prompt's blocks when this host cannot carry them.
+      if (target.attachments > 0 && !chips) {
         const warn = document.createElement('p')
         warn.className = 'dshet-warn'
         warn.textContent = texts.warn
@@ -2027,6 +2385,10 @@ window.__ModuleLoader__.load({
           messageId: entry.messageId,
           text: typeof entry.text === 'string' ? entry.text : '',
           attachments: typeof entry.attachments === 'number' ? entry.attachments : 0,
+          // A reply edits text only on purpose: the tool calls and reasoning it
+          // carries stop being true the moment it is replaced, so they are not
+          // offered as chips (the editor warns about them instead).
+          blocks: [],
         })
       }
       // The config object is always an object: this runtime's `jsx` reads
@@ -5103,7 +5465,7 @@ window.__ModuleLoader__.load({
     const NS = 'dsh-as-aistudio'
 
     /** Keep in sync with package.json and src/components.js. */
-    const PLUGIN_VERSION = '0.2.7'
+    const PLUGIN_VERSION = '0.2.8'
 
     /** Presence marker the live verifier reads. */
     const DEBUG_KEY = '__DSH_AS_AISTUDIO__'

package/src/components.js

@@ -26,7 +26,7 @@
 export const STUDIO_ID = 'dsh-as-aistudio'
 
 /** Keep in sync with package.json and src/client.js. */
-export const STUDIO_VERSION = '0.2.7'
+export const STUDIO_VERSION = '0.2.8'
 
 /**
  * The AI Studio action strip this studio composes, in the order the user meets

package/src/studio.js

@@ -48,7 +48,7 @@ window.__ModuleLoader__.load({
     const NS = 'dsh-as-aistudio'
 
     /** Keep in sync with package.json and src/components.js. */
-    const PLUGIN_VERSION = '0.2.7'
+    const PLUGIN_VERSION = '0.2.8'
 
     /** Presence marker the live verifier reads. */
     const DEBUG_KEY = '__DSH_AS_AISTUDIO__'

package/src/vendor/dsh-edit-turn.js

@@ -1,6 +1,6 @@
 // dsh-edit-turn browser half, VENDORED by tools/vendor.mjs - DO NOT EDIT.
 //
-// Source: ../dsh-edit-turn/lib/client.js  (v0.2.18, sha256 424621261094f17b)
+// Source: ../dsh-edit-turn/lib/client.js  (v0.2.19, sha256 618c7394fb3880c4)
 // Regenerate with `npm run vendor`; test/vendor-sync.test.js fails when this is stale.
 //
 // The component registers its factory with the host module loader; inside this
@@ -18,13 +18,21 @@ export default (require) => {
 
     const NS = 'dsh-edit-turn'
     const ROUTE_PREFIX = '/dsh-edit-turn'
+    // One picked file may not exceed this. It mirrors the platform's own default
+    // per-image ceiling (dsh-attachment-local's 20 MiB), because a payload above
+    // it would be refused by the store anyway - saying so in the picker is
+    // kinder than a round trip that fails.
+    const MAX_ATTACH_BYTES = 20 * 1024 * 1024
+    // Above this a chip keeps its label instead of trying to draw itself: a
+    // thumbnail is not worth decoding a 30 MB attachment for.
+    const MAX_THUMB_BYTES = 8 * 1024 * 1024
     // The sibling that owns re-running: it shadows a turn and regenerates it
     // from the prompt the surface now shows, then replays what followed. The
     // editor's re-run button is only offered when it is mounted.
     const RERUN_PREFIX = '/dsh-rerun-turn'
 
     /** Keep in sync with package.json and lib/index.js. */
-    const PLUGIN_VERSION = '0.2.18'
+    const PLUGIN_VERSION = '0.2.19'
 
     // --- copy -----------------------------------------------------------------
 
@@ -51,6 +59,8 @@ export default (require) => {
       'editor.pending': '正在保存…',
       'editor.warn.attachments': '这条消息包含图片或文件附件，改写会丢弃它们，只保留文字。',
       'editor.warn-reply': '这条回答包含工具调用或思考过程，替换后它们会被一并移除。',
+      'editor.attach.add': '添加附件',
+      'editor.attach.remove': '移除这个附件',
       'confirm.body': '确认后会立即执行：这条消息之后的内容会从模型上下文中移除。原始会话日志不会改写。',
       'error.invalid': '请求无效，请刷新后重试。',
       'error.session-not-active': '这个会话当前未激活，请先打开该会话再编辑。',
@@ -72,6 +82,11 @@ export default (require) => {
       'error.already-retired': '这一轮的内容已经不在当前上下文里了。',
       'error.rerunning': '已经有一次重跑在进行中，请等它结束。',
       'error.internal': '服务器内部错误，请稍后重试。',
+      'error.attachment-refused': '附件没能存下来，本次修改没有执行。',
+      'error.attachments-dropped': '已保存，但这条消息的图片或文件没能保留：当前部署没有可用的附件存储。',
+      'error.attachment-unreadable': '这个附件读不出来，请换一个文件。',
+      'error.attachment-too-large': '这个文件太大，无法作为附件。',
+      'error.too-large': '这次修改太大，服务器没有接收。',
     }
 
     const en = {
@@ -92,6 +107,8 @@ export default (require) => {
       'editor.pending': 'Working...',
       'editor.warn.attachments': 'This message carries image or file attachments; rewriting keeps the text only.',
       'editor.warn-reply': 'This reply carries tool calls or reasoning; replacing it removes them.',
+      'editor.attach.add': 'Add an attachment',
+      'editor.attach.remove': 'Remove this attachment',
       'confirm.body': 'Confirming applies right away: everything after this message leaves the model context. The original session log is never rewritten.',
       'error.invalid': 'Invalid request; refresh and try again.',
       'error.session-not-active': 'This session is not open in DSH; open it first.',
@@ -113,6 +130,11 @@ export default (require) => {
       'error.already-retired': 'This turn is no longer part of the current context.',
       'error.rerunning': 'A re-run is already in flight; wait for it to finish.',
       'error.internal': 'The host hit an internal error; try again shortly.',
+      'error.attachment-refused': 'The attachment could not be stored, so nothing was changed.',
+      'error.attachments-dropped': 'Saved, but the images or files on this message could not be kept: this deployment mounts no attachment store.',
+      'error.attachment-unreadable': 'That attachment could not be read; try another file.',
+      'error.attachment-too-large': 'That file is too large to attach.',
+      'error.too-large': 'That revision was too large for the host to accept.',
     }
 
     // Every error code the host can return travels through here. A code is
@@ -221,6 +243,25 @@ export default (require) => {
       '.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 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
+      // tokens as the panel so a skin cannot wash them out. A chip only takes
+      // the width it needs; the label is the only part that may shrink, and the
+      // remove button never does.
+      '.dshet-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 14px 0}',
+      '.dshet-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 6px;border:1px solid var(--dshet-line);border-radius:10px;background:var(--dshet-chip);color:var(--dshet-ink);font-size:12px;line-height:18px}',
+      '.dshet-thumb{width:26px;height:26px;flex:none;border-radius:6px;object-fit:cover;background:var(--dshet-field)}',
+      '.dshet-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.dshet-chip-size{flex:none;color:var(--dshet-ink-dim)}',
+      '.dshet-chip-remove{flex:none;width:18px;height:18px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--dshet-ink-dim);font:inherit;font-size:13px;line-height:16px;cursor:pointer}',
+      '.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: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}',
+      '.dshet-attach-input{display:none}',
       '.dshet-note,.dshet-warn,.dshet-error{margin:4px 14px 0;font-size:12px;line-height:19px}',
       '.dshet-note{color:var(--dshet-ink-dim)}',
       '.dshet-warn{color:var(--dsw-alias-state-warning-primary,#a2650a)}',
@@ -295,6 +336,16 @@ export default (require) => {
         this.editorRow = null
         this.editorFocus = false
         this.editorDraft = ''
+        // The block list being edited: what the carrier will be rebuilt from.
+        // Every entry is either `{ keep: <index> }` - a block of this message the
+        // user left alone - or `{ add: { data, mediaType?, name } }` for
+        // something they just picked, with the display fields the chip needs.
+        // The list is the ONLY thing that decides what the host writes, which is
+        // why a chip the user removes simply leaves it.
+        this.editorParts = []
+        // Names the added chips, so removing one is a matter of identity rather
+        // than of position (a DOM pass may run between two of them).
+        this.uploadSeq = 0
         this.clearTimer = null
         this.pendingRerun = false
         this.siblingRerun = 'unknown'
@@ -311,6 +362,7 @@ export default (require) => {
           repliesByMessage: new Map(),
           editing: null,
           draft: '',
+          parts: [],
           confirming: false,
           pending: false,
           failure: null,
@@ -318,6 +370,12 @@ export default (require) => {
           surfaceReady: false,
           loaded: false,
           loadError: false,
+          // What the host said it can do with a block list (see /state's
+          // `capabilities`). False is the safe reading: an older host, a failed
+          // load and a deployment without an attachment store all mean "text
+          // only", which is what the editor then offers - with the warning that
+          // says so - instead of a chip it cannot honour.
+          attachmentsOk: false,
           // Matches the host's default: one click applies. Only an explicit
           // `confirm: true` in the profile turns the second step back on.
           confirmStep: false,
@@ -402,6 +460,10 @@ export default (require) => {
               loaded: true,
               loadError: false,
               confirmStep: !(data.config && data.config.confirm === false),
+              // What this host can do with blocks, taken from its own answer.
+              // An older host says nothing here, which reads as "text only" -
+              // the behaviour every release before blocks had.
+              attachmentsOk: Boolean(data.capabilities && data.capabilities.attachments === true),
             })
           })
           .catch(() => {
@@ -422,7 +484,10 @@ export default (require) => {
         const previous = this.editorElement
         this.load()
         this.editor = target
-        if (!same) this.editorDraft = target.text
+        if (!same) {
+          this.editorDraft = target.text
+          this.editorParts = blocksToParts(target, this.sessionId)
+        }
         this.confirming = false
         this.editorElement = null
         // The intent to keep the user's caret in this box. It is set when the
@@ -438,7 +503,7 @@ export default (require) => {
             /* focus is best-effort */
           }
         }
-        this.publish({ editing: target, draft: this.editorDraft, confirming: false, failure: null })
+        this.publish({ editing: target, draft: this.editorDraft, parts: this.editorParts.slice(), confirming: false, failure: null })
         this.probeSiblingRerun()
       }
 
@@ -475,15 +540,81 @@ export default (require) => {
         this.editorFocus = false
         this.editor = null
         this.editorDraft = ''
+        this.editorParts = []
         this.confirming = false
         this.editorElement = null
-        this.publish({ editing: null, draft: '', confirming: false, failure: null })
+        this.publish({ editing: null, draft: '', parts: [], confirming: false, failure: null })
       }
 
       setDraft(value) {
         this.editorDraft = value
       }
 
+      /**
+       * One chip the user removed leaves the block list, and nothing else.
+       *
+       * The list IS the edit: a block that is no longer in it is not written
+       * when the carrier is rebuilt, so removing a chip is the whole
+       * implementation of "this attachment should not be here any more".
+       */
+      removePart(key) {
+        const next = this.editorParts.filter((part) => part.key !== key)
+        if (next.length === this.editorParts.length) return
+        this.editorParts = next
+        this.publish({ parts: next.slice() })
+      }
+
+      /** One payload the user picked joins the block list, at the end. */
+      addUpload(upload) {
+        this.editorParts = [...this.editorParts, upload]
+        this.publish({ parts: this.editorParts.slice() })
+      }
+
+      /**
+       * Read picked files and append one chip each.
+       *
+       * The bytes stay in the browser until the save: the host admits them
+       * through the platform's attachment store only when the user commits, so
+       * opening the editor and cancelling stores nothing.
+       */
+      attachFiles(files) {
+        let list = []
+        try {
+          list = files === null || files === undefined ? [] : Array.prototype.slice.call(files)
+        } catch {
+          list = []
+        }
+        for (const file of list) {
+          if (!file || typeof file !== 'object') continue
+          if (typeof file.size === 'number' && file.size > MAX_ATTACH_BYTES) {
+            this.notify('attachment-too-large')
+            continue
+          }
+          const name = typeof file.name === 'string' && file.name !== '' ? file.name : null
+          const mediaType = typeof file.type === 'string' && file.type !== '' ? file.type : null
+          readAsBase64(file, (data) => {
+            if (data === null) {
+              this.notify('attachment-unreadable')
+              return
+            }
+            this.uploadSeq += 1
+            this.addUpload({
+              key: `a${this.uploadSeq}`,
+              add: {
+                data,
+                ...(mediaType === null ? {} : { mediaType }),
+                ...(name === null ? {} : { name }),
+              },
+              // The chip's own fields. A picked image can show itself through
+              // the very bytes it is carrying - no round trip, no store.
+              label: name !== null ? name : mediaType !== null ? mediaType : 'attachment',
+              bytes: typeof file.size === 'number' ? file.size : null,
+              thumbnail: `data:${mediaType === null ? 'application/octet-stream' : mediaType};base64,${data}`,
+            })
+          })
+        }
+      }
+
       review() {
         this.pendingRerun = false
         this.runReview()
@@ -524,6 +655,13 @@ export default (require) => {
           this.publish({ failure: 'empty' })
           return
         }
+        // What the host will rebuild the carrier from: the blocks still on the
+        // list, in order, plus anything picked. Sent only when the host answered
+        // that it can carry blocks - a request that names blocks this host would
+        // have to drop is a request that lies about what the save did.
+        const parts = target.mode === 'prompt' && this.view.attachmentsOk === true
+          ? this.editorParts.map((part) => (part.keep !== undefined ? { keep: part.keep } : { add: part.add }))
+          : undefined
         this.publish({ pending: true, failure: null })
         try {
           const res = await fetch(`${ROUTE_PREFIX}/apply`, {
@@ -534,6 +672,7 @@ export default (require) => {
               seq: target.seq,
               messageId: typeof target.messageId === 'string' ? target.messageId : undefined,
               text,
+              ...(parts === undefined ? {} : { parts }),
             }),
           })
           const data = await res.json().catch(() => ({}))
@@ -564,6 +703,11 @@ export default (require) => {
               messageId: typeof target.messageId === 'string' ? target.messageId : undefined,
               text,
               attachments: typeof target.attachments === 'number' ? target.attachments : 0,
+              // The host answers with what the carrier now carries, described
+              // the way /state describes it. Adopted for the row drawn before
+              // the refresh lands: without it a second save could not know
+              // which blocks are still there and would rewrite text-only.
+              blocks: Array.isArray(data.blocks) ? data.blocks : [],
             })
           }
           // A reply edit shadows its own reply too, so it leaves the editable
@@ -576,6 +720,7 @@ export default (require) => {
           this.animateOnce = true
           this.editor = null
           this.editorDraft = ''
+          this.editorParts = []
           this.editorElement = null
           this.editorBox = null
           this.editorRow = null
@@ -589,6 +734,7 @@ export default (require) => {
             revisions,
             editable,
             replies,
+            parts: [],
             failure: null,
           })
           // `unchanged` means the host wrote NOTHING: the draft is (verbatim)
@@ -610,6 +756,11 @@ export default (require) => {
             // failed second half has to be reported somewhere that survives that.
             if (data.kind === 'reply' && data.applied === false) this.notify('reply')
             if (data.kind !== 'reply' && data.applied === false) this.notify('prompt')
+            // The save landed, but it left non-text blocks behind (the host says
+            // so): the editor that could have warned is gone by now, so this is
+            // the only place the user can still be told (see applyEdit's
+            // `dropped`).
+            if (data.kind !== 'reply' && data.applied === true && data.dropped === true) this.notify('attachments-dropped')
           }
           // Save first, re-run second - always: the sibling re-runs the turn
           // from the prompt the surface NOW shows, so the revised wording has
@@ -717,6 +868,10 @@ export default (require) => {
           messageId: entry.messageId,
           text: typeof entry.text === 'string' ? entry.text : '',
           attachments: typeof entry.attachments === 'number' ? entry.attachments : 0,
+          // The blocks this message carries, as /state described them. They seed
+          // the editor's chips; a host that does not describe them (or an
+          // optimistic entry that predates its refresh) simply has none.
+          blocks: Array.isArray(entry.blocks) ? entry.blocks : [],
         }
       }
       return null
@@ -1678,6 +1833,94 @@ export default (require) => {
     // injecting a second controlled tree into it would fight its reconciler.
     // The draft is mirrored into the controller on every input event, so a
     // host re-render that wipes the textarea cannot lose what was typed.
+    // --- block chips ----------------------------------------------------------
+    //
+    // A message's non-text blocks, as the editor shows them: one chip per block,
+    // each with what the block itself reported about itself (a name, a size, and
+    // whether its bytes are reachable) and a remove button. Nothing here reads a
+    // block TYPE: a chip is drawn from the fields a block carries, so a block
+    // kind the platform adds later shows up with its own name and needs no
+    // change in this file.
+
+    /** One chip's display fields, taken from whatever the block said about itself. */
+    function chipOf(block) {
+      const name = typeof block.name === 'string' && block.name !== '' ? block.name : null
+      const mediaType = typeof block.mediaType === 'string' && block.mediaType !== '' ? block.mediaType : null
+      const type = typeof block.type === 'string' && block.type !== '' ? block.type : 'block'
+      const bytes = typeof block.bytes === 'number' ? block.bytes : null
+      return { label: name !== null ? name : mediaType !== null ? mediaType : type, bytes }
+    }
+
+    /**
+     * The block list an editor starts from: every block of the message, kept.
+     *
+     * A reply starts from none. What a reply carries beside its text - tool
+     * calls, reasoning - cannot survive a replacement (their results no longer
+     * hold), so offering a chip for them would promise something the edit cannot
+     * keep; the editor warns about them instead.
+     */
+    function blocksToParts(target, sessionId) {
+      if (!target || target.mode !== 'prompt') return []
+      const blocks = Array.isArray(target.blocks) ? target.blocks : []
+      const parts = []
+      for (const block of blocks) {
+        if (!block || typeof block.index !== 'number') continue
+        const chip = chipOf(block)
+        parts.push({
+          keep: block.index,
+          key: `k${block.index}`,
+          label: chip.label,
+          bytes: chip.bytes,
+          thumbnail: block.preview === true ? previewUrl(sessionId, target.seq, block.index) : null,
+        })
+      }
+      return parts
+    }
+
+    /** Where one stored block's bytes are read from, for its thumbnail. */
+    function previewUrl(sessionId, seq, index) {
+      return `${ROUTE_PREFIX}/attachment?sessionId=${encodeURIComponent(sessionId)}&seq=${seq}&index=${index}`
+    }
+
+    /** A byte count a human reads at a glance. */
+    function formatBytes(bytes) {
+      if (typeof bytes !== 'number' || !Number.isFinite(bytes) || bytes < 0) return ''
+      if (bytes < 1024) return `${bytes} B`
+      const units = ['KB', 'MB', 'GB']
+      let value = bytes / 1024
+      let unit = 0
+      while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024
+        unit += 1
+      }
+      return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`
+    }
+
+    /**
+     * One picked file's bytes, base64, without the Data URL prefix.
+     *
+     * Read here rather than at save time so a save is one request: the payload
+     * travels with the revision the user committed to.
+     */
+    function readAsBase64(file, done) {
+      if (typeof FileReader !== 'function') {
+        done(null)
+        return
+      }
+      try {
+        const reader = new FileReader()
+        reader.onload = () => {
+          const result = typeof reader.result === 'string' ? reader.result : ''
+          const comma = result.indexOf(',')
+          done(comma === -1 ? null : result.slice(comma + 1))
+        }
+        reader.onerror = () => done(null)
+        reader.readAsDataURL(file)
+      } catch {
+        done(null)
+      }
+    }
+
     // The re-render marker for the in-place editor.
     //
     // Every field `renderEditor` reads belongs here. A marker that only tracks
@@ -1694,6 +1937,13 @@ export default (require) => {
         // The re-run button appears when the sibling probe lands; without it in
         // the marker the editor would never be rebuilt to show the button.
         view.siblingRerun === 'present' ? 'r' : 'n',
+        // Whether chips are drawn at all: a host that cannot admit blocks asks
+        // for the warning instead, and the box has to change with that answer.
+        view.attachmentsOk === true ? 'A' : 'a',
+        // The block list itself. Removing a chip and adding one both change what
+        // saving would write, so both have to redraw the strip - and the chip
+        // keys are enough to tell one list from another.
+        view.parts.map((part) => part.key).join('.'),
       ].join('|')
     }
 
@@ -1712,6 +1962,100 @@ export default (require) => {
       }
     }
 
+    /**
+     * The chips: one per block on the block list.
+     *
+     * A chip IS the block's presence in the edit. Removing it takes the block
+     * off the list, and a block that is not on the list is not written when the
+     * carrier is rebuilt - the whole mechanism, and the same one for a picture,
+     * a file and whatever the platform carries next. A chip draws itself from
+     * the bytes the block already has, and gives up on its thumbnail when the
+     * browser says they are not a picture: no type is consulted either way.
+     */
+    function editorChips(controller, view, t) {
+      const strip = document.createElement('div')
+      strip.className = 'dshet-chips'
+      for (const part of view.parts) {
+        const chip = document.createElement('div')
+        chip.className = 'dshet-chip'
+        chip.dataset.dshetChip = part.key
+        const drawable = typeof part.thumbnail === 'string' && part.thumbnail !== '' &&
+          (typeof part.bytes !== 'number' || part.bytes <= MAX_THUMB_BYTES)
+        if (drawable) {
+          const image = document.createElement('img')
+          image.className = 'dshet-thumb'
+          image.alt = ''
+          image.src = part.thumbnail
+          image.addEventListener('error', () => {
+            const parent = image.parentElement
+            if (typeof image.remove === 'function') image.remove()
+            else if (parent !== null && parent !== undefined && typeof parent.removeChild === 'function') parent.removeChild(image)
+          })
+          chip.appendChild(image)
+        }
+        const label = document.createElement('span')
+        label.className = 'dshet-chip-label'
+        label.textContent = part.label
+        chip.appendChild(label)
+        const size = formatBytes(part.bytes)
+        if (size !== '') {
+          const measured = document.createElement('span')
+          measured.className = 'dshet-chip-size'
+          measured.textContent = size
+          chip.appendChild(measured)
+        }
+        const remove = document.createElement('button')
+        remove.type = 'button'
+        remove.className = 'dshet-chip-remove'
+        remove.textContent = '×'
+        remove.title = t('editor.attach.remove')
+        remove.setAttribute('aria-label', t('editor.attach.remove'))
+        remove.disabled = view.pending
+        pressable(remove, () => controller.removePart(part.key))
+        chip.appendChild(remove)
+        strip.appendChild(chip)
+      }
+      return strip
+    }
+
+    /**
+     * The add/replace entry: a picker that puts a block on the list.
+     *
+     * Drawn only when the host answered that it can admit a block. A deployment
+     * with no attachment store gets no picker, because a picker that cannot be
+     * honoured is worse than none - the warning below says what a save will
+     * drop instead.
+     */
+    function attachEntry(controller, view, t) {
+      const row = document.createElement('div')
+      row.className = 'dshet-attach-row'
+      const picker = document.createElement('input')
+      picker.type = 'file'
+      picker.multiple = true
+      picker.className = 'dshet-attach-input'
+      picker.style.display = 'none'
+      picker.addEventListener('change', () => {
+        controller.attachFiles(picker.files)
+        // Cleared so the same file can be picked again after a removal.
+        try {
+          picker.value = ''
+        } catch {
+          /* not every input lets this be written */
+        }
+      })
+      const add = document.createElement('button')
+      add.type = 'button'
+      add.className = 'dshet-attach'
+      add.textContent = t('editor.attach.add')
+      add.disabled = view.pending
+      pressable(add, () => {
+        if (typeof picker.click === 'function') picker.click()
+      })
+      row.appendChild(picker)
+      row.appendChild(add)
+      return row
+    }
+
     function renderEditor(row, controller, view, t) {
       const target = view.editing
       const texts = editorTexts(t, target)
@@ -1784,6 +2128,18 @@ export default (require) => {
       })
       box.appendChild(area)
 
+      // 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
+      // what a save would drop, which is exactly what this editor did before
+      // blocks travelled at all. A reply never gets chips: what it carries
+      // beside its text cannot survive a replacement.
+      const chips = target.mode === 'prompt' && view.attachmentsOk === true
+      if (chips) {
+        if (view.parts.length > 0) box.appendChild(editorChips(controller, view, t))
+        box.appendChild(attachEntry(controller, view, t))
+      }
+
       // Only what the user has to know right now: what the replacement will
       // discard, and what went wrong. The running explanation lives in the
       // README and in the buttons' tooltips, the way a normal input box does it.
@@ -1793,7 +2149,9 @@ export default (require) => {
         note.textContent = t('confirm.body')
         box.appendChild(note)
       }
-      if (target.attachments > 0) {
+      // Shown when saving really would drop something: a reply's tool calls
+      // always, and a prompt's blocks when this host cannot carry them.
+      if (target.attachments > 0 && !chips) {
         const warn = document.createElement('p')
         warn.className = 'dshet-warn'
         warn.textContent = texts.warn
@@ -2019,6 +2377,10 @@ export default (require) => {
           messageId: entry.messageId,
           text: typeof entry.text === 'string' ? entry.text : '',
           attachments: typeof entry.attachments === 'number' ? entry.attachments : 0,
+          // A reply edits text only on purpose: the tool calls and reasoning it
+          // carries stop being true the moment it is replaced, so they are not
+          // offered as chips (the editor warns about them instead).
+          blocks: [],
         })
       }
       // The config object is always an object: this runtime's `jsx` reads