dsh-paste-code-block 0.1.1 → 0.1.3

package/src/client.js

@@ -15,8 +15,168 @@ window.__ModuleLoader__.load({
     const MARK = 'data-dsh-pcb'
     const MARK_SESSION = 'data-dsh-pcb-session'
     const DETAIL_NS = 'dsh-pcb-detail'
+    const CHIP_X_CLASS = 'dsh-pcb-chip-x'
+
+    // ----- shared chip-DOM helpers ------------------------------------------
+    // Module level on purpose: the chip sync scan and the controller's removal
+    // path both need to map a chip host element back to its label (and its
+    // session), and the ✕ is appended INSIDE the chip's inner span.
+    function chipInner(host) { return host.querySelector(':scope > span') }
+    function chipLabelText(host) {
+      const inner = chipInner(host)
+      if (!inner) return ''
+      const title = inner.getAttribute('title')
+      if (title) return title
+      const spans = [...inner.querySelectorAll(':scope > span')].filter((s) => !s.classList.contains(CHIP_X_CLASS))
+      const labelEl = spans[spans.length - 1]
+      return (labelEl && labelEl.textContent) || inner.textContent || ''
+    }
+    // Resolve the active session for an element inside a composer seat.
+    function sessionFor(target) {
+      const seat = target.closest(`[${MARK}]`)
+      let sid = seat && seat.getAttribute(MARK_SESSION)
+      if (!sid && target.parentElement) {
+        let el = target.parentElement
+        while (el) {
+          const rail = el.querySelector && el.querySelector('[data-dsh-pcb-rail]')
+          if (rail) { sid = rail.getAttribute('data-dsh-pcb-session') || sid; break }
+          el = el.parentElement
+        }
+      }
+      return sid
+    }
 
-    // ===== Block parsing =====================================================
+    // ----- chip node-map helpers (embedded copy of src/chip-nodes.js) --------
+    // DSH renders each pasted block as a Lexical decorator chip and the input
+    // shell exposes no per-reference delete verb, so removal walks the editor's
+    // node map. Its VALUES ARE THE NODES THEMSELVES (Lexical >= 0.21): reading
+    // `value.node` matches nothing and silently deletes nothing (v0.1.2 bug).
+    function chipNodeOf(value) {
+      if (!value) return null
+      if (typeof value.getSource === 'function') return value
+      const wrapped = value.node
+      return wrapped && typeof wrapped.getSource === 'function' ? wrapped : null
+    }
+    function collectChipNodes(values, source, ref) {
+      const hits = []
+      if (!values) return hits
+      for (const value of values) {
+        const node = chipNodeOf(value)
+        if (!node || typeof node.getReference !== 'function') continue
+        if (node.getSource() === source && node.getReference() === ref) hits.push(node)
+      }
+      return hits
+    }
+
+    // ----- projection geometry (embedded copy of src/projection.js) ----------
+    // The shell publishes clipboard coordinates (`draft`, chips expanded to their
+    // clipboardText) while the scoped edit verbs address detect coordinates
+    // (each chip collapses to ONE placeholder char). Convert before editing.
+    function detectOffsetOf(occurrences, occ) {
+      let shift = 0
+      for (const other of occurrences || []) {
+        if (other === occ || other.offset >= occ.offset) continue
+        shift += Math.max(0, (other.length || 1) - 1)
+      }
+      return occ.offset - shift
+    }
+    // Detect span of the separator space the shell appends after a fresh chip.
+    function separatorSpaceSpan(projection, occ) {
+      if (!projection || !occ) return null
+      const draft = projection.draft || ''
+      const afterChip = occ.offset + (occ.length || 0)
+      if (draft.charAt(afterChip) !== ' ') return null
+      const start = detectOffsetOf(projection.occurrences, occ) + 1
+      return { start, end: start + 1 }
+    }
+
+    // ===== Locale (embedded copy of src/i18n.js — keep the two in sync) =====
+    const NS = 'paste-code-block'
+    const L10N = {
+      zh: {
+        'block.code': '代码块 {n}',
+        'block.text': '文本块 {n}',
+        'detail.aria': '代码块详情',
+        'slot.label': '粘贴代码块详情',
+        'lines.one': '{count} 行',
+        'lines.other': '{count} 行',
+        'expand': '展开',
+        'collapse': '折叠',
+        'copy': '复制',
+        'copied': '已复制',
+        'hide': '收起',
+        'remove': '移除',
+        'edit.aria': '编辑代码块内容',
+        'error.stale': '代码块已失效，请重新粘贴',
+        'error.remove': '无法删除该块，请重试',
+      },
+      en: {
+        'block.code': 'Code #{n}',
+        'block.text': 'Text #{n}',
+        'detail.aria': 'Block details',
+        'slot.label': 'Pasted block details',
+        'lines.one': '{count} line',
+        'lines.other': '{count} lines',
+        'expand': 'Expand',
+        'collapse': 'Collapse',
+        'copy': 'Copy',
+        'copied': 'Copied',
+        'hide': 'Hide',
+        'remove': 'Remove',
+        'edit.aria': 'Edit block content',
+        'error.stale': 'This block is no longer valid — paste it again',
+        'error.remove': 'Could not remove the block — please retry',
+      },
+    }
+
+    function createT(locale) {
+      const dict = L10N[locale] || L10N.en
+      return (key, params) => {
+        let text = dict[key] != null ? dict[key] : (L10N.en[key] != null ? L10N.en[key] : key)
+        if (params) text = text.replace(/\{(\w+)\}/g, (m, name) => (name in params ? String(params[name]) : m))
+        return text
+      }
+    }
+
+    function detectBrowserLocale() {
+      try {
+        const langs = [...(navigator.languages || []), navigator.language].filter(Boolean).map((l) => String(l).toLowerCase())
+        return langs.some((l) => l.startsWith('zh')) ? 'zh' : 'en'
+      } catch (e) {
+        return 'en'
+      }
+    }
+
+    // Pre-0.1.3 chip labels: no longer rendered, still recognized (see below).
+    const LEGACY_L10N = {
+      zh: { 'block.code': '复制代码块{n}', 'block.text': '复制文本块{n}' },
+      en: { 'block.code': 'Code block #{n}', 'block.text': 'Text block #{n}' },
+    }
+
+    /**
+     * Recognize a rendered block label in ANY shipped locale (or a pre-0.1.3
+     * legacy locale) and recover its `{ type, n }` identity — this keeps chip
+     * clicks, ✕ deletes, and the locale-switch retitling correct even for
+     * chips inserted under a different language than the one currently
+     * active. Null otherwise.
+     */
+    function parseBlockLabel(text) {
+      if (!text) return null
+      for (const dict of [L10N.zh, L10N.en, LEGACY_L10N.zh, LEGACY_L10N.en]) {
+        for (const key of ['block.code', 'block.text']) {
+          const pattern = new RegExp(
+            '^' +
+              dict[key].replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\\\{n\\\}/g, '(\\d+)') +
+              '$',
+          )
+          const m = pattern.exec(text)
+          if (m) return { type: key === 'block.code' ? 'code' : 'text', n: Number(m[1]) }
+        }
+      }
+      return null
+    }
+
+    // ===== Block parsing (embedded copy of src/parse.js — keep in sync) =====
     const SHEBANG_LANG = {
       python: 'python', python3: 'python', node: 'javascript', nodejs: 'javascript',
       ruby: 'ruby', bash: 'bash', sh: 'bash', zsh: 'bash', dash: 'bash',
@@ -47,8 +207,9 @@ window.__ModuleLoader__.load({
 
     /**
      * Parse pasted text into a block, or null when it is ordinary short prose
-     * that should paste plainly. `isCode` drives both the chip wording
-     * ("复制代码块N" vs "复制文本块N") and the fenced language on send.
+     * that should paste plainly. `isCode` drives both the chip label
+     * (i18n key `block.code` vs `block.text`, e.g. "代码块 N" / "Code #N")
+     * and the fenced language on send.
      */
     function parseBlock(raw) {
       const text = String(raw || '').replace(/^\uFEFF/, '')
@@ -110,13 +271,20 @@ window.__ModuleLoader__.load({
 
     // ===== Draft controller ==================================================
     class BlockController {
-      constructor(ctx) {
+      /**
+       * @param ctx - cordis client context (sessions/conversation services).
+       * @param t - locale-bound translator, `(key, params) => string`, that
+       *   reflects the ACTIVE DSH language at call time (from
+       *   `ctx.locale.bind(NS)`), or the browser-guessed fallback.
+       */
+      constructor(ctx, t) {
         this.ctx = ctx
+        this.t = t
         this.list = new Map()      // sessionId -> Block[]
         this.selected = new Map()  // sessionId -> ref
         this.used = new Map()      // sessionId -> {code:Set, text:Set}
         this.refIndex = new Map()  // ref -> {sessionId, block}
-        this.labelIndex = new Map()// label -> ref
+        this.labelIndex = new Map()// label (insert-time language) -> ref
         this.inFlight = new Map()
         this.expiry = new Map()
         this.serializing = new Set()
@@ -148,8 +316,9 @@ window.__ModuleLoader__.load({
         if (used) used[type]?.delete(n)
       }
 
+      /** Current-language label for a block number, e.g. 复制代码块2 / Code block #2. */
       labelFor(block, n) {
-        return block.isCode ? `复制代码块${n}` : `复制文本块${n}`
+        return this.t(block.isCode ? 'block.code' : 'block.text', { n })
       }
 
       listFor(sessionId) { return this.list.get(String(sessionId)) || [] }
@@ -169,6 +338,31 @@ window.__ModuleLoader__.load({
         for (const fn of s) fn()
       }
 
+      /**
+       * Recompute every tracked block's label under the CURRENT language
+       * (called when the locale snapshot changes). Keeps `labelIndex`
+       * consistent and re-publishes the affected sessions so the detail card
+       * re-renders; the chip DOM is synced by the client's `scanChips` pass.
+       * @returns the array of `{ sessionId, block }` whose label changed.
+       */
+      retitleAll() {
+        const changed = []
+        const affected = new Set()
+        for (const [k, entries] of this.list) {
+          for (const block of entries) {
+            const want = this.labelFor(block, block.labelNumber)
+            if (want === block.label) continue
+            this.labelIndex.delete(block.label)
+            block.label = want
+            this.labelIndex.set(want, block.id)
+            changed.push({ sessionId: k, block })
+            affected.add(k)
+          }
+        }
+        for (const k of affected) this.publish(k)
+        return changed
+      }
+
       scope(sessionId) {
         const actx = this.ctx.sessions.scope(sessionId)
         if (!actx) throw new Error('paste-code-block: session not ready')
@@ -187,7 +381,7 @@ window.__ModuleLoader__.load({
         // only a block is pasted with no typed text). Hence draft.length already
         // equals the detect length; anchoring there keeps blocks strictly ordered.
         const end = input.draft ? input.draft.length : 0
-        return actx.bail(actx, 'slash/input-insert-reference', {
+        const inserted = actx.bail(actx, 'slash/input-insert-reference', {
           reference: {
             source: SOURCE,
             ref: block.id,
@@ -196,6 +390,40 @@ window.__ModuleLoader__.load({
           },
           span: { start: end, end, draftRev: input.draftRev },
         }) === true
+        if (!inserted) return false
+        // The shell appends a separating space after the chip; creating a block
+        // must not prefix the following text (or pile spaces into the draft).
+        this.dropSeparatorSpace(actx, shell, block)
+        return true
+      }
+
+      /**
+       * Remove the separating space the shell appended after OUR freshly inserted
+       * chip, and nothing else.
+       *
+       * `SessionInputShell.insertReference` inserts `[chip, ' ']` whenever the
+       * character at the pick-time span is not itself a space. Blocks are always
+       * appended at the end of the draft, so the character now sitting directly
+       * after our chip can only have come from that insertion: deleting it can
+       * never disturb a space the draft already had (a pre-existing trailing
+       * space still sits where the user left it, before the chip).
+       *
+       * @param actx - session scope (scoped edit events).
+       * @param shell - the session's input shell.
+       * @param block - the block whose chip was just inserted.
+       * @returns whether the space was removed.
+       */
+      dropSeparatorSpace(actx, shell, block) {
+        const after = shell.snapshot
+        const occ = after && (after.occurrences || []).find((o) => o.source === SOURCE && o.ref === block.id)
+        const span = separatorSpaceSpan(after, occ)
+        if (!span) return false
+        const removed = actx.bail(actx, 'slash/input-insert-text', {
+          text: '',
+          span: { start: span.start, end: span.end, draftRev: after.draftRev },
+        }) === true
+        if (!removed) console.warn('[paste-code-block] could not drop the separator space')
+        return removed
       }
 
       attach(sessionId, block) {
@@ -220,9 +448,21 @@ window.__ModuleLoader__.load({
         return true
       }
 
-      blockForLabel(label) {
+      /**
+       * Resolve a chip's rendered text (label in ANY locale — see
+       * `parseBlockLabel`) back to its block. Prefers the insert-time label
+       * index, then falls back to the (type, number) identity within the
+       * chip's own session, so clicks keep working after a language switch.
+       */
+      blockForLabel(sessionId, label) {
         const ref = this.labelIndex.get(label)
-        return ref ? this.refIndex.get(ref)?.block : undefined
+        if (ref) {
+          const record = this.refIndex.get(ref)
+          if (record) return record.block
+        }
+        const parsed = parseBlockLabel(label)
+        if (!parsed) return undefined
+        return this.listFor(sessionId).find((b) => b.type === parsed.type && b.labelNumber === parsed.n)
       }
 
       select(sessionId, ref) {
@@ -233,19 +473,97 @@ window.__ModuleLoader__.load({
         this.publish(sessionId)
       }
 
+      /** Whether the editor's own node map still holds a chip for this ref. */
+      hasChipNode(shell, ref) {
+        const editor = shell && shell.editor
+        if (!editor || typeof editor.getEditorState !== 'function') return false
+        const state = editor.getEditorState()
+        if (!state || typeof state.read !== 'function') return false
+        let found = false
+        state.read(() => {
+          const map = state._nodeMap
+          if (map && typeof map.values === 'function') found = collectChipNodes(map.values(), SOURCE, ref).length > 0
+        })
+        return found
+      }
+
+      /** Whether the editor still projects an occurrence (chip) for this ref. */
+      hasChip(shell, ref) {
+        const input = shell && shell.snapshot
+        if (!input) return false
+        return (input.occurrences || []).some((o) => o.source === SOURCE && o.ref === ref)
+      }
+
+      /** Whether a chip for this ref is still present (editor first, then projection). */
+      chipPresent(shell, ref) {
+        return this.hasChipNode(shell, ref) || this.hasChip(shell, ref)
+      }
+
+      /**
+       * Remove the chip node(s) of one ref from the editor's own document.
+       *
+       * NEVER splice the draft via `setDraft()` to delete a chip: setDraft clears
+       * the root and re-creates plain-text paragraphs, and chips are Lexical
+       * decorator nodes that cannot round-trip through text — so one "spliced
+       * out" chip meant EVERY block vanished (0.1.1 bug).
+       *
+       * The editor exposes no per-reference delete verb, so we walk its node map
+       * and drop the ReferenceChipNode(s) carrying this source + ref — the same
+       * `node.remove()` the editor itself performs when a chip is deleted by hand.
+       *
+       * @param shell - the session's input shell (exposes `.editor`).
+       * @param ref - the block id to remove.
+       * @returns number of nodes removed, or -1 when the editor was unreachable.
+       */
+      removeChipNodes(shell, ref) {
+        const editor = shell && shell.editor
+        if (!editor || typeof editor.update !== 'function') return -1
+        let removed = 0
+        try {
+          editor.update(() => {
+            const state = editor.getEditorState()
+            const map = state ? state._nodeMap : null
+            if (!map || typeof map.values !== 'function') return
+            const hits = collectChipNodes(map.values(), SOURCE, ref)
+            for (const node of hits) node.remove()
+            removed = hits.length
+          }, { discrete: true })
+        } catch (err) {
+          console.warn('[paste-code-block] chip node removal failed:', err)
+          return -1
+        }
+        return removed
+      }
+
+      /**
+       * Delete one block: drop its chip from the composer, then its state.
+       *
+       * The chip removal is VERIFIED against the editor's own node map (and, as a
+       * cross-check, the published occurrence projection): if the chip is still
+       * there we keep the block and surface an error rather than silently doing
+       * nothing (or, worse, pruning state behind a chip that is still there).
+       *
+       * @param sessionId - owning session.
+       * @param ref - block id.
+       */
       remove(sessionId, ref) {
         const k = String(sessionId)
         const entries = this.listFor(k)
         const entry = entries.find((b) => b.id === ref)
         if (!entry) return
-        if (this.selected.get(k) === ref) this.selected.delete(k)
         const { shell } = this.scope(sessionId)
-        const input = shell.snapshot
-        const occurrence = (input.occurrences || []).find((o) => o.source === SOURCE && o.ref === ref)
-        if (occurrence) {
-          shell.setDraft(input.draft.slice(0, occurrence.offset) + input.draft.slice(occurrence.offset + 1))
+        if (this.chipPresent(shell, ref)) {
+          const removed = this.removeChipNodes(shell, ref)
+          if (this.chipPresent(shell, ref)) {
+            console.warn('[paste-code-block] could not remove chip', { ref, removed })
+            shell.notify('error', this.t('error.remove'))
+            return
+          }
         }
-        const next = entries.filter((b) => b.id !== ref)
+        if (this.selected.get(k) === ref) this.selected.delete(k)
+        const stillListed = this.listFor(k)
+        if (!stillListed.includes(entry)) return
+        const next = stillListed.filter((b) => b.id !== ref)
         if (next.length > 0) this.list.set(k, next)
         else this.list.delete(k)
         this.refIndex.delete(ref)
@@ -281,15 +599,16 @@ window.__ModuleLoader__.load({
 
       async serialize(ref) {
         const record = this.refIndex.get(ref)
-        if (!record) throw new Error('代码块已失效，请重新粘贴')
+        if (!record) throw new Error(this.t('error.stale'))
         this.markSerializing(ref)
         return serializeBlock(record.block)
       }
 
       /**
        * Keep only blocks whose inline chip is still present in the draft (the
-       * user may delete a chip with Backspace). During a submit the chips may
-       * transiently vanish, so prune is deferred there.
+       * user may delete a chip with Backspace, or with the chip's ✕ button).
+       * During a submit the chips may transiently vanish, so prune is deferred
+       * there.
        */
       reconcile(sessionId, occurrences, phase) {
         const k = String(sessionId)
@@ -400,6 +719,10 @@ window.__ModuleLoader__.load({
       const blocks = useBlocks(props.controller, props.sessionId)
       const selected = useSelectedBlock(props.controller, props.sessionId)
       const railRef = React.useRef(null)
+      // `props.t` is the slot's locale seat (a fresh reference on every locale
+      // revision, and the outlet re-renders with it); the controller's
+      // translator is the defensive fallback for non-locale compositions.
+      const t = props.t || props.controller.t
 
       useComposerMark(railRef, props.sessionId, input.draftRev, blocks.length > 0)
 
@@ -413,6 +736,10 @@ window.__ModuleLoader__.load({
         }
       }, [props.controller, props.sessionId, promptError])
 
+      // Re-sync the chip DOM (localized titles, ✕ buttons) after every dock
+      // render — covers attach, removal, selection, and locale switches.
+      React.useEffect(() => { props.syncChips() })
+
       const empty = !selected
       return React.createElement(
         'div',
@@ -421,20 +748,21 @@ window.__ModuleLoader__.load({
           className: `dsh-pcb-dock${empty ? ' dsh-pcb-dock--empty' : ''}`,
           'data-dsh-pcb-rail': '',
           'data-dsh-pcb-session': String(props.sessionId),
-          'aria-label': '代码块详情',
+          'aria-label': t('detail.aria'),
         },
         selected
           ? React.createElement(BlockDetail, {
               block: selected,
               controller: props.controller,
               sessionId: props.sessionId,
+              t,
             })
           : null,
       )
     }
 
     function BlockDetail(props) {
-      const { block, controller, sessionId } = props
+      const { block, controller, sessionId, t } = props
       const [collapsed, setCollapsed] = React.useState(false)
       const [copied, setCopied] = React.useState(false)
       // Editable draft: lets the user edit the block's content in the detail
@@ -463,6 +791,7 @@ window.__ModuleLoader__.load({
         controller.select(sessionId, block.id) // toggles off (same id)
       }
 
+      const lineCount = block.lines.length
       return React.createElement(
         'div',
         { className: `dsh-pcb-detail${collapsed ? ' dsh-pcb-detail--collapsed' : ''}` },
@@ -470,25 +799,25 @@ window.__ModuleLoader__.load({
           'div',
           { className: 'dsh-pcb-head' },
           React.createElement('span', { className: 'dsh-pcb-lang' }, block.lang || 'text'),
-          React.createElement('span', { className: 'dsh-pcb-lines' }, `${block.lines.length} 行`),
+          React.createElement('span', { className: 'dsh-pcb-lines' }, t(lineCount === 1 ? 'lines.one' : 'lines.other', { count: lineCount })),
           React.createElement('span', { className: 'dsh-pcb-spacer' }),
           collapsed ? React.createElement('button', {
-            type: 'button', className: 'dsh-pcb-btn', title: '展开', 'aria-label': '展开',
+            type: 'button', className: 'dsh-pcb-btn', title: t('expand'), 'aria-label': t('expand'),
             onClick: () => setCollapsed(false),
           }, '▾') : React.createElement('button', {
-            type: 'button', className: 'dsh-pcb-btn', title: '折叠', 'aria-label': '折叠',
+            type: 'button', className: 'dsh-pcb-btn', title: t('collapse'), 'aria-label': t('collapse'),
             onClick: () => setCollapsed(true),
           }, '▸'),
           React.createElement('button', {
-            type: 'button', className: 'dsh-pcb-btn', title: '复制', 'aria-label': '复制',
+            type: 'button', className: 'dsh-pcb-btn', title: copied ? t('copied') : t('copy'), 'aria-label': t('copy'),
             onClick: copy,
           }, copied ? '✓' : '⎘'),
           React.createElement('button', {
-            type: 'button', className: 'dsh-pcb-btn', title: '收起', 'aria-label': '收起',
+            type: 'button', className: 'dsh-pcb-btn', title: t('hide'), 'aria-label': t('hide'),
             onClick: hide,
           }, '⟨'),
           React.createElement('button', {
-            type: 'button', className: 'dsh-pcb-btn dsh-pcb-btn--danger', title: '移除', 'aria-label': '移除',
+            type: 'button', className: 'dsh-pcb-btn dsh-pcb-btn--danger', title: t('remove'), 'aria-label': t('remove'),
             onClick: () => controller.remove(sessionId, block.id),
           }, '×'),
         ),
@@ -500,7 +829,7 @@ window.__ModuleLoader__.load({
               onChange: onEdit,
               spellCheck: false,
               rows: Math.min(Math.max(block.lines.length, 2), 12),
-              'aria-label': '编辑代码块内容',
+              'aria-label': t('edit.aria'),
             }),
       )
     }
@@ -524,8 +853,38 @@ window.__ModuleLoader__.load({
       }
       /* hide the "@" marker that DSH renders when the chip has no appearance glyph */
       [data-composer-chip="${SOURCE}"] > span > [aria-hidden="true"]{display:none!important}
-      /* the label text */
-      [data-composer-chip="${SOURCE}"] > span > span:last-child{font-weight:500!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+      /* the label text (the trailing ✕ element is ours — never ellipsis it) */
+      [data-composer-chip="${SOURCE}"] > span > span:not(.${CHIP_X_CLASS}){font-weight:500!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+      /* --- type identity: leading glyph + tint (data-pcb-type set by scanChips) --- */
+      [data-composer-chip="${SOURCE}"][data-pcb-type="code"] > span{
+        border-color:var(--dsh-pcb-code-border,rgba(76,110,245,.38))!important;
+        background:var(--dsh-pcb-code-bg,rgba(76,110,245,.09))!important;
+        color:var(--dsw-alias-state-business-primary,#4c6ef5)!important
+      }
+      [data-composer-chip="${SOURCE}"][data-pcb-type="code"]:hover > span{
+        border-color:var(--dsw-alias-state-business-primary,#4c6ef5)!important;
+        background:var(--dsh-pcb-code-bg-hover,rgba(76,110,245,.16))!important
+      }
+      [data-composer-chip="${SOURCE}"][data-pcb-type="code"] > span::before{
+        content:'</>';flex:none;font-family:var(--dsw-font-mono,ui-monospace,Menlo,Consolas,monospace);
+        font-size:10px;font-weight:700;line-height:16px;opacity:.9
+      }
+      [data-composer-chip="${SOURCE}"][data-pcb-type="text"] > span::before{
+        content:'Aa';flex:none;font-size:10px;font-weight:700;line-height:16px;
+        letter-spacing:.2px;color:var(--dsw-alias-label-tertiary)
+      }
+
+      /* --- per-chip ✕ delete button (element we own, appended inside the chip) --- */
+      .${CHIP_X_CLASS}{
+        box-sizing:border-box;flex:none;width:16px;height:16px;display:inline-grid;place-items:center;
+        margin-left:2px;border-radius:5px;font-size:13px;line-height:1;font-weight:600;
+        color:var(--dsw-alias-label-tertiary);cursor:pointer;user-select:none
+      }
+      .${CHIP_X_CLASS}:hover{
+        background:var(--dsw-alias-interactive-bg-hover-danger,rgba(224,49,49,.12));
+        color:var(--dsw-alias-state-error-primary,#e03131)
+      }
 
       /* --- dock / detail card above the input --- */
       .dsh-pcb-dock{box-sizing:border-box;width:100%;max-width:var(--dsh-composer-card-max-width);margin:0 auto 6px;padding:0 var(--dsh-composer-side-clearance,16px);display:flex;flex-direction:column;gap:8px}
@@ -550,16 +909,103 @@ window.__ModuleLoader__.load({
         .dsh-pcb-head{height:34px}
         .dsh-pcb-lang{max-width:55%}
       }
+      @media (pointer:coarse){
+        .${CHIP_X_CLASS}{width:22px;height:22px;font-size:15px}
+      }
     `
 
     // ===== Client plugin body ===============================================
-    const inject = ['slots', 'sessions', 'conversation', 'inputTriggers']
+    const inject = ['slots', 'sessions', 'conversation', 'inputTriggers', 'locale']
 
     function apply(ctx) {
       try { console.log('[dsh-paste-code-block] client loaded') } catch (e) { /* noop */ }
-      const controller = new BlockController(ctx)
+
+      // Publish our dictionaries under the plugin namespace, then bind a
+      // translator that always reflects the ACTIVE DSH language (Settings →
+      // Language, or its browser fallback). Outside a composition that carries
+      // the locale plugin we degrade to a browser-language guess.
+      if (ctx.locale && typeof ctx.locale.register === 'function') {
+        ctx.effect(() => ctx.locale.register(NS, L10N), 'paste-code-block: dictionaries')
+      }
+      const t = (ctx.locale && typeof ctx.locale.bind === 'function')
+        ? ctx.locale.bind(NS)
+        : createT(detectBrowserLocale())
+
+      const controller = new BlockController(ctx, t)
       ctx.effect(() => () => controller.dispose(), 'paste-code-block: state')
 
+      // ----- chip DOM sync: localized labels + per-chip ✕ delete button -----
+      function scanChips() {
+        if (typeof document === 'undefined') return
+        if (controller.list.size === 0) return
+        const hosts = document.querySelectorAll(`[data-composer-chip="${SOURCE}"]`)
+        for (const host of hosts) {
+          const inner = chipInner(host)
+          if (!inner) continue
+          const parsed = parseBlockLabel(inner.getAttribute('title') || '') || parseBlockLabel(chipLabelText(host))
+          if (!parsed) continue
+          const seat = host.closest(`[${MARK_SESSION}]`)
+          const sid = seat && seat.getAttribute(MARK_SESSION)
+          if (!sid) continue
+          const block = controller.listFor(sid).find((b) => b.type === parsed.type && b.labelNumber === parsed.n)
+          if (!block) continue
+          // Tag the chip host with its type so CSS can render the leading
+          // glyph and tint (code = blue `</>`, text = neutral `Aa`).
+          if (host.getAttribute('data-pcb-type') !== parsed.type) {
+            host.setAttribute('data-pcb-type', parsed.type)
+          }
+          // Retitle the chip to the current language. Lexical caches the
+          // insert-time label inside the node, so on a Settings → Language
+          // switch (or a chip that remounted with the old label) the DOM is
+          // the sync surface; React's own diff never touches these nodes
+          // again while the node state is unchanged.
+          if (inner.getAttribute('title') !== block.label) {
+            inner.setAttribute('title', block.label)
+            const spans = [...inner.querySelectorAll(':scope > span')].filter((s) => !s.classList.contains(CHIP_X_CLASS))
+            const labelEl = spans[spans.length - 1]
+            if (labelEl && labelEl.textContent !== block.label) labelEl.textContent = block.label
+          }
+          // Ensure the ✕ delete affordance exists on this chip.
+          let x = inner.querySelector(`:scope > .${CHIP_X_CLASS}`)
+          if (!x) {
+            x = document.createElement('span')
+            x.className = CHIP_X_CLASS
+            x.textContent = '×'
+            x.setAttribute('role', 'button')
+            x.setAttribute('tabindex', '-1')
+            inner.appendChild(x)
+          }
+          const tip = t('remove')
+          if (x.getAttribute('aria-label') !== tip) {
+            x.setAttribute('aria-label', tip)
+            x.setAttribute('title', tip)
+          }
+        }
+      }
+
+      let scanScheduled = 0
+      function scheduleScan() {
+        if (scanScheduled) return
+        const run = () => { scanScheduled = 0; scanChips() }
+        scanScheduled = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(run) : setTimeout(run, 16)
+      }
+
+      ctx.effect(() => {
+        if (typeof MutationObserver === 'undefined' || !document.body) return undefined
+        const mo = new MutationObserver(scheduleScan)
+        mo.observe(document.body, { childList: true, subtree: true })
+        return () => mo.disconnect()
+      }, 'paste-code-block: chip sync observer')
+
+      // A locale switch (or a late dictionary registration bumps the revision
+      // too) re-derives labels: controller state first, chip DOM second.
+      ctx.effect(() => {
+        const face = ctx.locale
+        if (!face || typeof face.subscribe !== 'function') return undefined
+        return face.subscribe(() => { controller.retitleAll(); scheduleScan() })
+      }, 'paste-code-block: locale sync')
+      scheduleScan() // late-mount safety for chips rendered before plugin boot
+
       ctx.effect(() => ctx.inputTriggers.registerSource({
         trigger: '@',
         name: SOURCE,
@@ -580,21 +1026,6 @@ window.__ModuleLoader__.load({
         return () => style.remove()
       }, 'paste-code-block: styles')
 
-      // Resolve the active session for an event inside the composer seat.
-      function sessionFor(target) {
-        const seat = target.closest(`[${MARK}]`)
-        let sid = seat && seat.getAttribute(MARK_SESSION)
-        if (!sid && target.parentElement) {
-          let el = target.parentElement
-          while (el) {
-            const rail = el.querySelector && el.querySelector('[data-dsh-pcb-rail]')
-            if (rail) { sid = rail.getAttribute('data-dsh-pcb-session') || sid; break }
-            el = el.parentElement
-          }
-        }
-        return sid
-      }
-
       // Turn qualifying pastes into boxed inline chips.
       const onPaste = (ev) => {
         const clip = ev.clipboardData
@@ -635,18 +1066,32 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('paste', onPaste, true)
       }, 'paste-code-block: paste capture')
 
-      // Clicking an inline chip toggles its detail card.
+      // Chip interactions: ✕ deletes the block, a body click toggles its card;
+      // any other click dismisses the open card.
       const onChipPointer = (ev) => {
         const target = ev.target
         if (!(target instanceof Element)) return
-        // Clicking a chip toggles its detail card.
+        // ✕ on a chip: remove that block outright.
+        const chipX = target.closest(`.${CHIP_X_CLASS}`)
+        if (chipX) {
+          const xHost = chipX.closest(`[data-composer-chip="${SOURCE}"]`)
+          const xSid = xHost && sessionFor(xHost)
+          const label = xHost ? chipLabelText(xHost) : ''
+          const block = xSid && label ? controller.blockForLabel(xSid, label) : null
+          if (block) {
+            ev.preventDefault()
+            ev.stopPropagation()
+            controller.remove(xSid, block.id)
+          }
+          return
+        }
+        // Clicking a chip body toggles its detail card.
         const host = target.closest(`[data-composer-chip="${SOURCE}"]`)
         if (host) {
-          const labelEl = host.querySelector(':scope > span[title]') || host.querySelector('span[title]')
-          const label = labelEl && labelEl.getAttribute('title')
+          const label = chipLabelText(host)
           const sid = sessionFor(target)
           if (!sid || !label) return
-          const block = controller.blockForLabel(label)
+          const block = controller.blockForLabel(sid, label)
           if (!block) return
           ev.preventDefault()
           ev.stopPropagation()
@@ -670,8 +1115,11 @@ window.__ModuleLoader__.load({
         name: 'conversation.input.dock',
         id: DETAIL_NS,
         order: 90,
-        label: '粘贴代码块详情',
-      }, (props) => React.createElement(BlockDock, { ...props, controller })))
+        label: t('slot.label'),
+        // Declaring the locale namespace gives the dock a fresh `t` seat prop
+        // and re-renders it automatically on every Settings → Language switch.
+        locale: NS,
+      }, (props) => React.createElement(BlockDock, { ...props, controller, syncChips: scheduleScan })))
     }
 
     exports.apply = apply