dsh-codinput 0.1.0

package/lib/index.js

@@ -0,0 +1,5 @@
+// 宿主半边：纯挂载载体。插件实体在客户端半边（lib/client.js）。
+// 宿主只要求 name 与包名一致、空 inject、空 apply（见 docs/idea.md 附录）。
+exports.name = 'dsh-codinput';
+exports.inject = [];
+exports.apply = () => {};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "dsh-codinput",
+  "version": "0.1.0",
+  "description": "DSH WebUI 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar）。",
+  "license": "MIT",
+  "author": "Witherwithwinter",
+  "keywords": [
+    "dsh",
+    "deepseek",
+    "deepseek-harness",
+    "codemirror",
+    "composer",
+    "input",
+    "plugin",
+    "webui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Witherwithwinter/DSH-Codinput.git"
+  },
+  "homepage": "https://github.com/Witherwithwinter/DSH-Codinput#readme",
+  "bugs": {
+    "url": "https://github.com/Witherwithwinter/DSH-Codinput/issues"
+  },
+  "main": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/",
+    "src/",
+    "assets/",
+    "NOTICE",
+    "cordis.patch.yml",
+    "CHANGELOG.md",
+    "TESTING.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "build:dev": "node scripts/build.mjs --dev",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run typecheck"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "slots",
+        "conversation"
+      ],
+      "external": [
+        "react",
+        "react-dom"
+      ]
+    }
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.0",
+    "dompurify": "^3.2.4",
+    "marked": "^15.0.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.7",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.7.3"
+  },
+  "allowScripts": {
+    "esbuild@0.25.12": true
+  }
+}

package/src/client/attachments.ts

@@ -0,0 +1,43 @@
+/**
+ * 附件入草稿的共用链路：工具行的文件选择、卡片内粘贴、拖文件进卡片三条路径
+ * 都走这里，语义与失败处理完全一致（官方公开面：createDrafts + addAttachments，
+ * 失败时释放草稿附件，不留悬挂）。
+ */
+
+import type { ConversationFace, InputActions } from './host-types';
+import { stash } from './services';
+import { t } from './i18n';
+
+/**
+ * 把文件加入草稿附件。
+ * @returns 是否成功入草稿（false = 没有会话/通道、空文件、或宿主拒绝）。
+ */
+export function addFilesToDraft(
+  sessionId: string | undefined,
+  actions: InputActions | undefined,
+  files: FileList | readonly File[] | null | undefined,
+  onNotify?: (level: 'info' | 'error', text: string) => void,
+): boolean {
+  const list = files ? Array.from(files) : [];
+  if (!sessionId || !actions || list.length === 0) return false;
+  const conversation = stash.conversation as ConversationFace | undefined;
+  if (!conversation) {
+    onNotify?.('error', t('attach.channelUnavailable'));
+    return false;
+  }
+  try {
+    const drafts = conversation.createDrafts(sessionId, list);
+    if (drafts.length === 0) return false;
+    const added = actions.addAttachments(drafts.map((d) => d.id));
+    if (!added) conversation.releaseDraftAttachments(drafts);
+    return added;
+  } catch (error) {
+    onNotify?.('error', error instanceof Error ? error.message : String(error));
+    return false;
+  }
+}
+
+/** 拖拽中是否带着文件（dragover 阶段 dataTransfer.files 还是空的，只有 types 可读）。 */
+export function dragHasFiles(dataTransfer: DataTransfer | null): boolean {
+  return dataTransfer !== null && Array.from(dataTransfer.types).includes('Files');
+}

package/src/client/cm.ts

@@ -0,0 +1,207 @@
+/** CodeMirror 6 集成：行号（可关）、当前行与行号高亮（常开）、软换行、撤销历史、Tab 缩进。 */
+
+import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
+import {
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  lineNumbers,
+  drawSelection,
+  dropCursor,
+  placeholder as cmPlaceholder,
+  EditorView,
+  keymap,
+} from '@codemirror/view';
+import { Annotation, Compartment, EditorState, type Extension } from '@codemirror/state';
+import { loadPrefs, subscribePrefs } from './prefs';
+
+const lineNumbersCompartment = new Compartment();
+const themeCompartment = new Compartment();
+const placeholderCompartment = new Compartment();
+const editableCompartment = new Compartment();
+
+export interface EditorOptions {
+  lineNumbers: boolean;
+  fontFamily: string;
+  placeholder: string;
+  editable: boolean;
+}
+
+/** 外部灌入（官方草稿回写）标注：本来源的变化不再回写 setDraft。 */
+export const externalAnnotation = Annotation.define<boolean>();
+
+export interface EditorHooks {
+  /** DOM 级 keydown（先于默认键位表）：返回 true 表示已消费。 */
+  onKeydown(view: EditorView, event: KeyboardEvent): boolean;
+  /** 本地文档变化（用户输入所致）：唯一写入口在此回调里交给官方 setDraft。 */
+  onLocalChange(text: string): void;
+  /** 光标/文档变化后的上报（触发管线 track + 行列指示）。 */
+  onCaret(text: string, caret: number): void;
+  onCompositionChange(composing: boolean): void;
+  onFocusChange(focused: boolean): void;
+}
+
+/**
+ * 当前挂载编辑器的逻辑回调。扩展里**不闭包捕获** hooks，而是每次调用现取
+ * 这个槽——因为跨形态切换会复用（见 takeEditorSnapshot）上一次的 EditorState，
+ * 而它的扩展是那时创建的：若闭包捕获旧实例，恢复后就还在调用早已卸载的
+ * 组件的 props（读旧 actions/旧 keyboard snapshot）。同一时刻只有一个编辑面
+ * （三态单实例），模块级单槽足够且不会串台。
+ */
+let activeHooks: EditorHooks | null = null;
+
+/** 挂载时绑定（EditorPane 的 effect 负责）。 */
+export function setActiveEditorHooks(hooks: EditorHooks | null): void {
+  activeHooks = hooks;
+}
+
+/**
+ * 卸载时清空——但只清自己装的那一份。侧栏承载的切换不是原子的：侧栏 body
+ * 常常先挂载（新实例装上 hooks），主输入面在下一拍才卸载（旧实例清空），无
+ * 条件清空会把新实例的 hooks 摘掉，于是侧栏里打字不落草稿、行列指示不动、
+ * 发送手势失效。按实例身份判断即可。
+ */
+export function clearActiveEditorHooks(hooks: EditorHooks): void {
+  if (activeHooks === hooks) activeHooks = null;
+}
+
+export function createEditorExtensions(options: EditorOptions): Extension[] {
+  return [
+    EditorView.domEventHandlers({
+      keydown: (event, view) => activeHooks?.onKeydown(view, event) ?? false,
+      compositionstart: () => {
+        activeHooks?.onCompositionChange(true);
+        return false;
+      },
+      compositionend: () => {
+        // compositionend 落在 DOM 变更之后；延一帧避免选词回车误入 send 分支。
+        setTimeout(() => activeHooks?.onCompositionChange(false), 0);
+        return false;
+      },
+      focus: () => {
+        activeHooks?.onFocusChange(true);
+        return false;
+      },
+      blur: () => {
+        activeHooks?.onFocusChange(false);
+        return false;
+      },
+    }),
+    history(),
+    drawSelection(),
+    dropCursor(),
+    EditorView.lineWrapping,
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    lineNumbersCompartment.of(options.lineNumbers ? lineNumbers() : []),
+    themeCompartment.of(baseTheme(options.fontFamily)),
+    placeholderCompartment.of(cmPlaceholder(options.placeholder)),
+    editableCompartment.of(EditorView.editable.of(options.editable)),
+    keymap.of([...historyKeymap, ...defaultKeymap, indentWithTab]),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged && !update.transactions.some((tr) => tr.annotation(externalAnnotation) === true)) {
+        activeHooks?.onLocalChange(update.state.doc.toString());
+      }
+      if (update.docChanged || update.selectionSet) {
+        activeHooks?.onCaret(update.state.doc.toString(), update.state.selection.main.head);
+      }
+    }),
+  ];
+}
+
+export function applyEditorOptions(view: EditorView, options: EditorOptions): void {
+  view.dispatch({
+    effects: [
+      lineNumbersCompartment.reconfigure(options.lineNumbers ? lineNumbers() : []),
+      themeCompartment.reconfigure(baseTheme(options.fontFamily)),
+      placeholderCompartment.reconfigure(cmPlaceholder(options.placeholder)),
+      editableCompartment.reconfigure(EditorView.editable.of(options.editable)),
+    ],
+  });
+}
+
+/** busy 阶段软锁 / owner disabled：切换编辑开关。 */
+export function setEditorEditable(view: EditorView, editable: boolean): void {
+  view.dispatch({
+    effects: editableCompartment.reconfigure(EditorView.editable.of(editable)),
+  });
+}
+
+/** 偏好（行号/字体）热更新订阅：settings 与编辑器共用 localStorage 单源。 */
+export function subscribeEditorPrefs(view: EditorView, placeholder: string, editable: boolean): () => void {
+  return subscribePrefs(() => {
+    const prefs = loadPrefs();
+    applyEditorOptions(view, {
+      lineNumbers: prefs.lineNumbers,
+      fontFamily: prefs.fontFamily,
+      placeholder,
+      editable,
+    });
+  });
+}
+
+function baseTheme(fontFamily: string): Extension {
+  return EditorView.theme({
+    '&': { fontSize: '13px', height: '100%' },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': {
+      fontFamily,
+      lineHeight: '1.6',
+      overflow: 'auto',
+    },
+    '.cm-content': { caretColor: 'var(--dsw-alias-state-business-primary, currentColor)', paddingBottom: '8px' },
+    '.cm-line': { padding: '0 8px' },
+    // CodeMirror 自绘光标（drawSelection）默认黑色，深色主题下不可见——
+    // 显式对齐官方输入框的 caret 颜色（品牌强调色）。
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: 'var(--dsw-alias-state-business-primary, currentColor)',
+    },
+    '.cm-gutters': {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'color-mix(in srgb, currentColor 32%, transparent)',
+    },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'currentColor', fontWeight: 600 },
+    '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, currentColor 6%, transparent)' },
+    '.cm-lineNumbers .cm-gutterElement': { minWidth: '2.2em', padding: '0 6px 0 10px' },
+    '.cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, currentColor 15%, transparent) !important' },
+    '.cm-placeholder': { color: 'color-mix(in srgb, currentColor 38%, transparent)' },
+  });
+}
+
+export function createEditorState(extensions: Extension[], doc: string): EditorState {
+  return EditorState.create({ doc, extensions });
+}
+
+// ---------- 编辑器状态暂存（跨形态 / 跨会话保留撤销历史） ----------
+//
+// 三态切换时协调表面会重挂载（inline ↔ portal ↔ 侧栏），EditorView 随之销毁。
+// 若每次都新建 EditorState，用户敲了半天的内容一拖成悬浮就撤销不回去了。
+// 故按会话暂存 state（撤销栈、选区、文档都在 state 里），下次挂载原样装回；
+// 滚动位置单独记住（state 不含滚动）。同一时刻只有一个持有者：挂载即 take
+// （移出），卸载再 put——避免两个 EditorView 共享同一 state（CM 不支持）。
+
+export interface EditorSnapshot {
+  readonly state: EditorState;
+  readonly scrollTop: number;
+}
+
+const CACHE_MAX = 4;
+const snapshots = new Map<string, EditorSnapshot>();
+
+/** 取回并移出该键的快照（含撤销历史）；没有则 undefined（新建）。 */
+export function takeEditorSnapshot(key: string): EditorSnapshot | undefined {
+  const snapshot = snapshots.get(key);
+  if (snapshot) snapshots.delete(key);
+  return snapshot;
+}
+
+/** 卸载时暂存：不清空内容，只把「离开时的编辑器」留给下次挂载。 */
+export function putEditorSnapshot(key: string, snapshot: EditorSnapshot): void {
+  snapshots.delete(key);
+  snapshots.set(key, snapshot);
+  while (snapshots.size > CACHE_MAX) {
+    const oldest = snapshots.keys().next().value;
+    if (oldest === undefined) break;
+    snapshots.delete(oldest);
+  }
+}

package/src/client/command.ts

@@ -0,0 +1,78 @@
+/**
+ * /codinput 命令：经官方命令通道注册的 action 型客户端贡献。
+ * 输入 /codinput 回车即切换接管（进入/退出），菜单描述随当前状态变化。
+ * 接管关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。
+ * 菜单拾取路径会把 "/codinput" 插进草稿而不提交，切换后需清空当前草稿。
+ */
+
+import type { ClientContext } from './host-types';
+import { stash } from './services';
+import { loadPrefs, savePrefs } from './prefs';
+import { t } from './i18n';
+import { IconCodinputCommand16 } from './icons';
+import { diagWindow, runGuarded } from './diag';
+
+function clearDraftOf(sessionId: string | undefined): void {
+  if (!sessionId) return;
+  try {
+    const actx = stash.sessions?.scope(sessionId);
+    if (actx && stash.conversation) stash.conversation.input.for(actx).setDraft('');
+  } catch {
+    /* 会话作用域不可达时忽略（提交路径本就会清空草稿） */
+  }
+}
+
+export function registerCodinputCommand(ctx: ClientContext): void {
+  runGuarded('command.register', () => {
+    ctx.inject(['commandUi'], (scope: Record<string, unknown>) => {
+      const commandUi = scope['commandUi'] as {
+        register(contribution: Record<string, unknown>): () => void;
+        candidates?(session: unknown, req: { query: string }): Promise<unknown[]>;
+      } | undefined;
+      if (typeof commandUi?.register !== 'function') {
+        diagWindow().__dshCodinputShell['command'] = 'commandUi-unavailable';
+        return;
+      }
+      // 指令栏字典序：官方 rankByName 在空查询时保持「宿主列表 + 贡献注册序」，
+      // 贡献的 /codinput 会被排在末尾。这里包装 candidates，仅在空查询（完整
+      // 指令栏）时按名称字典序排序；非空查询保留官方的相关性排序。
+      let restoreOrder: (() => void) | undefined;
+      if (typeof commandUi.candidates === 'function') {
+        const original = commandUi.candidates.bind(commandUi);
+        commandUi.candidates = (session: unknown, req: { query: string }) =>
+          Promise.resolve(original(session, req)).then((rows) => {
+            if (req.query !== '' || !Array.isArray(rows)) return rows;
+            return [...(rows as { name: string }[])].sort((a, b) =>
+              a.name < b.name ? -1 : a.name > b.name ? 1 : 0,
+            );
+          });
+        restoreOrder = () => {
+          commandUi.candidates = original;
+        };
+      }
+      ctx.effect(() => restoreOrder, 'dsh-codinput: dictionary order patch');
+      ctx.effect(
+        () =>
+          commandUi.register({
+            name: 'codinput',
+            description: () =>
+              loadPrefs().enabled ? t('cmd.exit') : t('cmd.enter'),
+            // 官方命令菜单 glyph：icon 为 React 组件，菜单按 <icon size={16}/> 渲染。
+            icon: IconCodinputCommand16,
+            available: () => true,
+            ui: {
+              kind: 'action',
+              run: () => {
+                // 卸载会清掉诊断 sessionId，先捕获再延迟清草稿。
+                const sessionId = diagWindow().__dshCodinputSessionId ?? undefined;
+                savePrefs({ enabled: !loadPrefs().enabled });
+                setTimeout(() => clearDraftOf(sessionId), 80);
+              },
+            },
+          }),
+        'dsh-codinput: /codinput contribution',
+      );
+      diagWindow().__dshCodinputShell['command'] = 'registered';
+    });
+  });
+}

package/src/client/components/AttachmentRail.tsx

@@ -0,0 +1,241 @@
+/**
+ * 草稿附件轨：复刻官方 `dsh-client-ui-attachment` 的展示（ComposerAttachments +
+ * AttachmentRail + FileCard）。
+ *
+ * - 图片附件 → 64×64 圆角缩略图（`object-fit:cover`，`previewUrl` 由宿主给出），
+ *   悬停（或触摸设备常显）出右上角圆形移除钮；
+ * - 其它文件 → 240×64 文件卡：类型 glyph（28px，官方 28×28 viewBox 的文件图形）
+ *   + 文件名（14/500）+ 元信息（扩展名 + 体积；上传中显示「上传中…」、失败显示
+ *   「上传失败」并整卡可点重试、红色描边）；
+ * - 上传中出 2px 进度条（有 loaded/total 时按比例，否则走官方同款往返动画）；
+ * - 轨道横向溢出时两端出圆形翻页箭头（滚动条隐藏，滚轮横向平移）。
+ *
+ * 取值逐条对齐官方 CSS（FileCard.module.css / ComposerAttachments.module.css），
+ * 类名换成 dci- 前缀；官方 glyph 路径逐字取自 primitives（MIT，见 LICENSE 归属段）。
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { ConversationFace, DraftAttachmentId, InputState } from '../host-types';
+import { stash } from '../services';
+import { useSnapshot } from './useSnapshot';
+import { t } from '../i18n';
+
+const FILE_BODY =
+  'M8.48924 28H19.5108C21.6479 28 22.7165 28 23.5594 27.6509C24.6833 27.1853 25.5762 26.2924 26.0417 25.1685C26.3909 24.3256 26.3909 23.257 26.3909 21.1199V8.79443C26.3909 8.32877 26.3909 8.09593 26.3471 7.87507C26.2887 7.58058 26.173 7.30042 26.0067 7.05048C25.882 6.86303 25.7177 6.69799 25.3893 6.36792L20.0611 1.01354C19.7304 0.681235 19.5651 0.515081 19.3769 0.38885C19.126 0.220541 18.8443 0.103463 18.5481 0.0443412C18.3259 0 18.0915 0 17.6226 0H8.48924C6.35209 0 5.28351 0 4.4406 0.349145C3.31672 0.814671 2.4238 1.70759 1.95828 2.83147C1.60913 3.67438 1.60913 4.74296 1.60913 6.88011V21.1199C1.60913 23.257 1.60913 24.3256 1.95828 25.1685C2.4238 26.2924 3.31672 27.1853 4.4406 27.6509C5.28351 28 6.35209 28 8.48924 28Z';
+const FILE_FOLD =
+  'M26.3909 7.37445L19.0525 0V3.77445C19.0525 4.89271 19.0525 5.45184 19.2352 5.89289C19.4788 6.48096 19.946 6.94818 20.5341 7.19176C20.9751 7.37445 21.5342 7.37445 22.6525 7.37445H26.3909Z';
+
+/** 官方 FileTypeIcon 的通用文件 glyph（28×28 视图框，fill 自带轮廓）。 */
+function FileGlyph({ size = 28 }: { size?: number }): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" aria-hidden="true">
+      <path d={FILE_BODY} fill="currentColor" />
+      <path d={FILE_FOLD} fill="var(--dsw-static-neutral-00, #fff)" fillOpacity="0.7" />
+    </svg>
+  );
+}
+
+/** 官方 fileExtension：取 basename 最后一个点之后的部分。 */
+function fileExtension(name: string): string {
+  const base = name.split(/[\\/]/).pop() ?? name;
+  const dot = base.lastIndexOf('.');
+  return dot < 0 ? '' : base.slice(dot + 1);
+}
+
+/** 官方 fileSizeText 逐值复刻。 */
+function fileSizeText(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)}KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)}MB`;
+  const gb = mb / 1024;
+  return `${gb < 10 ? gb.toFixed(1) : Math.round(gb)}GB`;
+}
+
+/** 上传状态（宿主 fileUploads 投影；缺席按 ready 处理）。 */
+interface UploadLike {
+  status?: string;
+  loaded?: number;
+  total?: number;
+}
+
+export interface AttachmentRailProps {
+  state: InputState | undefined;
+  sessionId: string | undefined;
+  onRemove(id: DraftAttachmentId): void;
+}
+
+export function AttachmentRail(props: AttachmentRailProps): JSX.Element | null {
+  const { state, sessionId, onRemove } = props;
+  const conversation = stash.conversation as ConversationFace | undefined;
+  const uploads = useSnapshot(conversation?.fileUploads) as Record<string, UploadLike> | undefined;
+  const railRef = useRef<HTMLDivElement | null>(null);
+  const [overflow, setOverflow] = useState<{ left: boolean; right: boolean }>({ left: false, right: false });
+
+  const attachments =
+    state === undefined || typeof conversation?.resolveDraftAttachments !== 'function'
+      ? []
+      : conversation.resolveDraftAttachments(state.attachmentIds) ?? [];
+
+  // 溢出翻页箭头：滚动几何 + 尺寸变化（ResizeObserver，面板变宽也算）重算。
+  useEffect(() => {
+    const rail = railRef.current;
+    if (!rail) return;
+    const sync = (): void => {
+      const maxScroll = rail.scrollWidth - rail.clientWidth;
+      const next = { left: rail.scrollLeft > 1, right: maxScroll > 1 && rail.scrollLeft < maxScroll - 1 };
+      setOverflow((prev) => (prev.left === next.left && prev.right === next.right ? prev : next));
+    };
+    sync();
+    rail.addEventListener('scroll', sync, { passive: true });
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(sync) : null;
+    observer?.observe(rail);
+    // 纵向滚轮横向平移（官方同名行为：独占消费，非 passive）。
+    const onWheel = (event: WheelEvent): void => {
+      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+      event.preventDefault();
+      rail.scrollLeft += event.deltaY;
+    };
+    rail.addEventListener('wheel', onWheel, { passive: false });
+    return () => {
+      rail.removeEventListener('scroll', sync);
+      rail.removeEventListener('wheel', onWheel);
+      observer?.disconnect();
+    };
+  }, [attachments.length]);
+
+  if (attachments.length === 0) return null;
+
+  const page = (dir: -1 | 1): void => {
+    railRef.current?.scrollBy({ left: dir * Math.max(120, (railRef.current?.clientWidth ?? 240) * 0.8), behavior: 'smooth' });
+  };
+
+  return (
+    <div className="dci-attach-root">
+      <div className="dci-attach-rail" ref={railRef} role="group" aria-label={t('attach.group')}>
+        {attachments.map((att) => {
+          const upload = uploads?.[att.id];
+          const status = upload?.status ?? 'ready';
+          const isImage = att.kind === 'image' || att.file.type.startsWith('image/');
+          const percent =
+            status === 'uploading' && upload?.total ? Math.min(100, Math.round(((upload.loaded ?? 0) / upload.total) * 100)) : null;
+          if (isImage) {
+            return (
+              <div className="dci-attach-item" key={att.id}>
+                <button type="button" className="dci-attach-thumb" title={att.file.name} aria-label={att.file.name}>
+                  {att.previewUrl ? <img src={att.previewUrl} alt={att.file.name} /> : <FileGlyph size={28} />}
+                </button>
+                <button
+                  type="button"
+                  className="dci-attach-remove"
+                  aria-label={t('attach.remove', { name: att.file.name })}
+                  onClick={() => onRemove(att.id)}
+                >
+                  <RemoveGlyph />
+                </button>
+                {percent !== null ? (
+                  <span className="dci-attach-progress">
+                    <span className="dci-attach-progressBar" style={{ width: `${percent}%` }} />
+                  </span>
+                ) : null}
+              </div>
+            );
+          }
+          const failed = status === 'error';
+          const meta =
+            status === 'uploading'
+              ? t('attach.uploading')
+              : failed
+                ? t('attach.failed')
+                : [fileExtension(att.file.name).toUpperCase().slice(0, 8), fileSizeText(att.file.size)]
+                    .filter((part) => part !== '')
+                    .join(' ');
+          const body = (
+            <>
+              <span className="dci-attach-name">{att.file.name}</span>
+              <span className={failed ? 'dci-attach-meta dci-attach-metaFailed' : 'dci-attach-meta'}>{meta}</span>
+            </>
+          );
+          return (
+            <div className={failed ? 'dci-attach-card dci-attach-cardFailed' : 'dci-attach-card'} key={att.id} title={att.file.name}>
+              <span className="dci-attach-icon" aria-hidden="true">
+                {status === 'uploading' ? <span className="dci-attach-spinner" /> : <FileGlyph size={28} />}
+              </span>
+              {failed ? (
+                <button
+                  type="button"
+                  className="dci-attach-body dci-attach-retry"
+                  aria-label={t('attach.retry')}
+                  onClick={() => retryUpload(sessionId, att.id)}
+                >
+                  {body}
+                </button>
+              ) : (
+                <span className="dci-attach-body" aria-label={t('attach.pending', { name: att.file.name })}>
+                  {body}
+                </span>
+              )}
+              <button
+                type="button"
+                className={failed ? 'dci-attach-removeInline dci-attach-cardFailedRemove' : 'dci-attach-removeInline'}
+                aria-label={t('attach.remove', { name: att.file.name })}
+                onClick={() => onRemove(att.id)}
+              >
+                <RemoveGlyph />
+              </button>
+              {percent !== null ? (
+                <span className="dci-attach-progress">
+                  <span className="dci-attach-progressBar" style={{ width: `${percent}%` }} />
+                </span>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+      {overflow.left ? (
+        <button type="button" className="dci-attach-arrow dci-attach-arrowLeft" aria-label={t('attach.scrollLeft')} onClick={() => page(-1)}>
+          <ArrowGlyph dir="left" />
+        </button>
+      ) : null}
+      {overflow.right ? (
+        <button type="button" className="dci-attach-arrow dci-attach-arrowRight" aria-label={t('attach.scrollRight')} onClick={() => page(1)}>
+          <ArrowGlyph dir="right" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function retryUpload(sessionId: string | undefined, id: DraftAttachmentId): void {
+  const conversation = stash.conversation as ConversationFace | undefined;
+  if (!sessionId || typeof conversation?.retryFileUpload !== 'function') return;
+  try {
+    conversation.retryFileUpload(sessionId, id);
+  } catch {
+    /* 通道缺席：静默（附件仍在草稿里） */
+  }
+}
+
+/** 移除钮的 ×（官方为 fill 路径，16 视框内 18px 圆钮）。 */
+function RemoveGlyph(): JSX.Element {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path
+        d="M1.6 1.6L8.4 8.4M8.4 1.6L1.6 8.4"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/** 翻页箭头（细 chevron，随方向旋转）。 */
+function ArrowGlyph({ dir }: { dir: 'left' | 'right' }): JSX.Element {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" style={dir === 'left' ? { transform: 'scaleX(-1)' } : undefined}>
+      <path d="M5.5 3.5L9 7L5.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}