dsh-codinput 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codinput",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "DSH WebUI 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar）。",
   "license": "MIT",
   "author": "Witherwithwinter",

package/src/client/attachments.ts

@@ -37,6 +37,40 @@ export function addFilesToDraft(
   }
 }
 
+
+/**
+ * 把接管面绑定为会话的文件拾取器（官方 bindFilePicker 契约：官方 InputBar
+ * 挂载时绑自己、卸载解绑；slash「添加 · 文件」行的 available =
+ * shell.canPickFiles——不绑则接管期间该行消失）。available 恒 true（接管
+ * 面挂载期间才绑着），open 打开原生文件对话框、选定即入草稿。
+ * @returns 解绑函数；shell 不可达或宿主无 bindFilePicker 时 undefined。
+ */
+export function bindSessionFilePicker(sessionId: string): (() => void) | undefined {
+  let picker: HTMLInputElement | null = null;
+  const shell = stash.conversation?.input.shell(sessionId) as
+    | (Record<string, unknown> & { bindFilePicker?: (p: { available(): boolean; open(): void }) => () => void })
+    | undefined;
+  if (typeof shell?.bindFilePicker !== 'function') return undefined;
+  return shell.bindFilePicker({
+    available: () => true,
+    open: () => {
+      picker?.remove();
+      const input = document.createElement('input');
+      picker = input;
+      input.type = 'file';
+      input.multiple = true;
+      input.style.display = 'none';
+      input.addEventListener('change', () => {
+        input.remove();
+        if (picker === input) picker = null;
+        addFilesToDraft(sessionId, stash.conversation?.input.shell(sessionId) ?? undefined, input.files);
+      });
+      document.body.appendChild(input);
+      input.click();
+    },
+  });
+}
+
 /** 拖拽中是否带着文件（dragover 阶段 dataTransfer.files 还是空的，只有 types 可读）。 */
 export function dragHasFiles(dataTransfer: DataTransfer | null): boolean {
   return dataTransfer !== null && Array.from(dataTransfer.types).includes('Files');

package/src/client/command.ts

@@ -1,13 +1,18 @@
 /**
- * /codinput 命令：经官方命令通道注册的 action 型客户端贡献。
- * 输入 /codinput 回车即切换接管（进入/退出），菜单描述随当前状态变化。
- * 接管关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。
- * 菜单拾取路径会把 "/codinput" 插进草稿而不提交，切换后需清空当前草稿。
+ * /codinput 命令与「添加 · 文件」补位：经官方命令通道注册的 action 型客户端
+ * 贡献。
+ *
+ * /codinput：输入回车即切换接管（进入/退出），菜单描述随当前状态变化；接管
+ * 关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。菜单拾取路径
+ * 会把 "/codinput" 插进草稿而不提交，切换后需清空当前草稿。侧栏里发起的退
+ * 出会经总线请求 body 关掉自己的标签（见 sideinput）。
+ *
  */
 
 import type { ClientContext } from './host-types';
 import { stash } from './services';
-import { loadPrefs, savePrefs } from './prefs';
+import { loadPrefs, savePrefs, subscribePrefs } from './prefs';
+import { carriedSessionIds, requestSidebarTabClose } from './sideinput';
 import { t } from './i18n';
 import { IconCodinputCommand16 } from './icons';
 import { diagWindow, runGuarded } from './diag';
@@ -22,6 +27,22 @@ function clearDraftOf(sessionId: string | undefined): void {
   }
 }
 
+/**
+ * 单行搬移：把 name 的行移动到 locate 给出的目标下标（其余行原序不动）。
+ * 官方空查询走 sectionRows（「添加/指令」按使用序固定节构），贡献默认追加
+ * 在「指令」节尾——整列排序会把小节排散、节头重复渲染，只能单行搬。
+ */
+function moveRow<T extends { name: string }>(list: readonly T[], name: string, locate: (rows: readonly T[]) => number): T[] {
+  const at = list.findIndex((row) => row.name === name);
+  if (at === -1) return [...list];
+  const target = locate(list);
+  if (target === at || target === at + 1) return [...list];
+  const moved = [...list];
+  moved.splice(at, 1);
+  moved.splice(target > at ? target - 1 : target, 0, list[at]);
+  return moved;
+}
+
 export function registerCodinputCommand(ctx: ClientContext): void {
   runGuarded('command.register', () => {
     ctx.inject(['commandUi'], (scope: Record<string, unknown>) => {
@@ -33,24 +54,37 @@ export function registerCodinputCommand(ctx: ClientContext): void {
         diagWindow().__dshCodinputShell['command'] = 'commandUi-unavailable';
         return;
       }
-      // 指令栏字典序：官方 rankByName 在空查询时保持「宿主列表 + 贡献注册序」，
-      // 贡献的 /codinput 会被排在末尾。这里包装 candidates，仅在空查询（完整
-      // 指令栏）时按名称字典序排序；非空查询保留官方的相关性排序。
+      // 指令栏位置：codinput 按字典序插到「指令」节内第一个 name 大于它的行
+      // 之前（codinput < compact → 节首）；file 补位插到「添加」节首（官方
+      // 使用序里 file 排该节第一——节名是本地化的，用同节已知行反查）。
       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,
-            );
+            let list = rows as { name: string; section?: string }[];
+            const addSection = list.find((row) => row.name === 'goal' || row.name === 'plan' || row.name === 'feedback')?.section;
+            if (addSection !== undefined) {
+              list = moveRow(list, 'file', (all) => {
+                const first = all.findIndex((row) => row.section === addSection && row.name !== 'file');
+                return first === -1 ? all.length : first;
+              });
+            }
+            list = moveRow(list, 'codinput', (all) => {
+              const own = all.find((row) => row.name === 'codinput');
+              const first = all.findIndex(
+                (row) => row.section === own?.section && row.name !== 'codinput' && row.name.toLowerCase() > 'codinput',
+              );
+              return first === -1 ? all.length : first;
+            });
+            return list;
           });
         restoreOrder = () => {
           commandUi.candidates = original;
         };
       }
-      ctx.effect(() => restoreOrder, 'dsh-codinput: dictionary order patch');
+      ctx.effect(() => restoreOrder, 'dsh-codinput: slash order patch');
       ctx.effect(
         () =>
           commandUi.register({
@@ -66,6 +100,12 @@ export function registerCodinputCommand(ctx: ClientContext): void {
                 // 卸载会清掉诊断 sessionId，先捕获再延迟清草稿。
                 const sessionId = diagWindow().__dshCodinputSessionId ?? undefined;
                 savePrefs({ enabled: !loadPrefs().enabled });
+                // 侧栏里发起的退出：关掉承载会话的 Codinput 标签（body 经
+                // tab 域 actions.close 关闭、卸载撤销承载），主输入回到官方
+                // 输入框。承载会话从总线查——诊断 sessionId 可能为 null。
+                if (!loadPrefs().enabled) {
+                  for (const carried of carriedSessionIds()) requestSidebarTabClose(carried);
+                }
                 setTimeout(() => clearDraftOf(sessionId), 80);
               },
             },

package/src/client/components/AttachmentRail.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react';
+import { ImageLightbox } from './ImageLightbox';
 import type { ConversationFace, DraftAttachmentId, InputState } from '../host-types';
 import { stash } from '../services';
 import { useSnapshot } from './useSnapshot';
@@ -72,6 +73,8 @@ export function AttachmentRail(props: AttachmentRailProps): JSX.Element | null {
   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 });
+  // 原图预览（官方 ComposerAttachments 同款：缩略图点击 → lightbox）。
+  const [preview, setPreview] = useState<{ url: string; name: string } | null>(null);
 
   const attachments =
     state === undefined || typeof conversation?.resolveDraftAttachments !== 'function'
@@ -123,7 +126,15 @@ export function AttachmentRail(props: AttachmentRailProps): JSX.Element | 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}>
+                <button
+                  type="button"
+                  className="dci-attach-thumb"
+                  title={t('image.openOriginal')}
+                  aria-label={t('image.openOriginalLabel', { name: att.file.name })}
+                  onClick={() => {
+                    if (att.previewUrl) setPreview({ url: att.previewUrl, name: att.file.name });
+                  }}
+                >
                   {att.previewUrl ? <img src={att.previewUrl} alt={att.file.name} /> : <FileGlyph size={28} />}
                 </button>
                 <button
@@ -203,6 +214,14 @@ export function AttachmentRail(props: AttachmentRailProps): JSX.Element | null {
           <ArrowGlyph dir="right" />
         </button>
       ) : null}
+      {preview ? (
+        <ImageLightbox
+          src={preview.url}
+          alt={preview.name}
+          labels={{ dialog: t('image.preview'), close: t('image.closePreview') }}
+          onClose={() => setPreview(null)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/client/components/CodinputBar.tsx

@@ -1,7 +1,8 @@
 /**
  * 接管条目：conversation.composer.bar（single，priority -1 遮蔽官方条目）。
  * 卸载本条目即官方输入框原样恢复（槽位体系一等机制），草稿不丢。
- * 另从 useChat 抽取轮次计时（模型用时 / TTFT），供数据行详情面板使用。
+ * 另从 useChat 订阅官方 legacy 节点数组（sessionStats 投影缺席时按官方
+ * deriveStats 派生轮次/decode 计时，见 stats.ts），供数据行使用。
  *
  * 三态单实例（任一时刻恰好一个入口，且不与官方输入框共存）：
  * - `normal`：接管卡片在原输入位；
@@ -15,7 +16,7 @@
  * 高于持久化的 normal/float，因此不可能出现 side+float 并存或双实例。
  */
 
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { SessionMaybeStandard, SlotRegisterOptions } from '../host-types';
 import { loadPrefs, savePrefs, subscribePrefs, type CodinputPrefs } from '../prefs';
@@ -34,39 +35,14 @@ interface BarOwner {
 /** 槽位作用域里的 chat 会话钩子（ui-session chat 源贡献）。 */
 type BarProps = BarOwner & SessionMaybeStandard & { useChat?: <S>(sel: (s: unknown) => S) => S };
 
-export interface ChatTimings {
-  /** 模型用时：全部步骤时长之和（毫秒）。 */
-  modelMs?: number;
-  /** 首 token 平均（TTFT）：以首步骤时长近似（毫秒）。 */
-  ttftMs?: number;
-}
-
-/** 从 chat 树的节点缓存解析步骤计时（location.step.start/end）。 */
-function computeTimings(valuesCache: unknown): ChatTimings {
-  if (!Array.isArray(valuesCache)) return {};
-  let modelMs = 0;
-  let ttftSum = 0;
-  let ttftCount = 0;
-  for (const node of valuesCache) {
-    const n = node as { kind?: string; location?: { step?: { start?: { time?: number }; end?: { time?: number } } } };
-    if (n?.kind !== 'assistant-step') continue;
-    const start = n.location?.step?.start?.time;
-    const end = n.location?.step?.end?.time;
-    if (start !== undefined && end !== undefined && end > start) {
-      modelMs += end - start;
-      ttftSum += end - start;
-      ttftCount += 1;
-    }
-  }
-  return { modelMs: modelMs > 0 ? modelMs : undefined, ttftMs: ttftCount > 0 ? ttftSum / ttftCount : undefined };
-}
-
 export function CodinputBar(props: BarProps): JSX.Element | null {
-  const { variant, blocked, disabled, placeholder, sessionId, useInput, inputActions, useProjection, useChat } = props;
+  const { variant, blocked, disabled, placeholder, sessionId, useInput, inputActions, useProjection, useChat, useSession } = props;
   const state = useInput((s) => s);
-  // 选择器只取数组引用（稳定），计时换算放在 useMemo 里做。
-  const valuesCache = useChat ? useChat((s: unknown) => (s as { nodes?: { valuesCache?: unknown } })?.nodes?.valuesCache) : undefined;
-  const chatTimings = useMemo<ChatTimings>(() => computeTimings(valuesCache), [valuesCache]);
+  // 官方 StatsPills 同款数据源：chat store 的 legacy 节点数组（选择器只取
+  // 数组引用，派生换算在 stats.ts 的 useSessionStats 里做）。
+  const chatNodes = useChat ? useChat((s: unknown) => (s as { legacy?: { nodes?: unknown } })?.legacy?.nodes) : undefined;
+  // 会话运行中（官方 useSession s.running）：空草稿时主按钮变停止。
+  const running = useSession ? useSession((s: unknown) => (s as { running?: boolean } | undefined)?.running) === true : false;
   const sideCarried = useSidebarInputCarried(sessionId);
   const [mode, setMode] = useState<CodinputPrefs['mode']>(() => loadPrefs().mode);
   useEffect(() => subscribePrefs(() => setMode(loadPrefs().mode)), []);
@@ -81,9 +57,11 @@ export function CodinputBar(props: BarProps): JSX.Element | null {
       actions={inputActions}
       useProjection={useProjection}
       placeholder={placeholder}
-      disabled={disabled === true || blocked !== undefined}
+      disabled={disabled === true}
+      blocked={blocked !== undefined}
+      running={running}
       hero={variant === 'hero'}
-      chatTimings={chatTimings}
+      chatNodes={chatNodes}
       float={floating}
       onDragZonePointerDown={beginFloatDrag}
     />

package/src/client/components/CodinputSurface.tsx

@@ -17,7 +17,7 @@ import type {
 } from '../host-types';
 import { stash } from '../services';
 import { loadPrefs, savePrefs } from '../prefs';
-import { addFilesToDraft, dragHasFiles } from '../attachments';
+import { addFilesToDraft, bindSessionFilePicker, dragHasFiles } from '../attachments';
 import { diagError, diagSession, diagWindow } from '../diag';
 import { IconEdit, IconEye } from '../icons';
 import { t, useT } from '../i18n';
@@ -37,10 +37,15 @@ export interface CodinputSurfaceProps {
   /** 宿主 bar owner props 透传：占位文案与禁用。 */
   placeholder?: string;
   disabled?: boolean;
+  /** 会话级阻塞（宿主 blocked）：编辑器与发送锁死，但停止钮仍可点（官方同款）。 */
+  blocked?: boolean;
+  /** 会话运行中（useSession s.running）：空草稿时主按钮变停止（官方同款）。 */
+  running?: boolean;
   /** 官方 bar variant：hero（新会话，无对话记录）不渲染数据行。 */
   hero?: boolean;
   /** chat 树解析的轮次计时（模型用时 / TTFT），数据行详情面板用。 */
-  chatTimings?: { modelMs?: number; ttftMs?: number };
+  /** chat legacy 节点数组（sessionStats 投影缺席时派生轮次/decode 计时）。 */
+  chatNodes?: unknown;
   /** 侧栏形态（视觉略紧凑）。 */
   side?: boolean;
   /** 悬浮形态（卡片在 FloatingShell 内 portal 渲染；拖动由 CodinputBar 的会话管理）。 */
@@ -56,7 +61,7 @@ const DOMPurify = ((DOMPurifyModule as unknown as { default?: unknown }).default
   DOMPurifyModule) as unknown as { sanitize(html: string): string };
 
 export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
-  const { sessionId, state, actions, useProjection, placeholder, disabled, side, hero, chatTimings, float, onDragZonePointerDown } = props;
+  const { sessionId, state, actions, useProjection, placeholder, disabled, blocked, running, side, hero, chatNodes, float, onDragZonePointerDown } = props;
   // 语言切换时整棵表面重渲染（文案都走 i18n 的 t()）。
   useT();
 
@@ -157,6 +162,14 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId, svcEpoch]);
 
+  // 文件拾取绑定：官方 InputBar 挂载时把 shell 的 filePicker 绑给自己，卸载
+  // 解绑——slash「添加 · 文件」行 available = shell.canPickFiles，接管期间不
+  // 绑该行就消失。接管面挂载即绑、卸载即解，open 走本模块的附件入草稿链路。
+  useEffect(() => {
+    if (!sessionId) return;
+    return bindSessionFilePicker(sessionId);
+  }, [sessionId]);
+
   // popup 拾取后的 composer 焦点归还（官方 overlay wiring 的等价绑定）。
   // alpha 的 commandUi 未提供 bindComposerFocus——按需可用。
   useEffect(() => {
@@ -187,6 +200,21 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     caretRef.current = caret;
   };
 
+  // 官方 stop 同链路：sessions.scope(sid).get('conversation').cancel()。
+  const stopSession = (): void => {
+    if (!sessionId) return;
+    try {
+      const scope = stash.sessions?.scope(sessionId) as
+        | { get?: (name: string) => { cancel?: () => Promise<unknown> } }
+        | undefined;
+      const conversation = scope?.get?.('conversation');
+      void conversation?.cancel?.()?.catch?.(() => {});
+    } catch {
+      /* 会话作用域缺席：静默（下一拍 running 投影自会收敛） */
+    }
+  };
+  const onStop = stopSession;
+
   const sendGesture = (): void => {
     if (!actions) return;
     const st = state;
@@ -200,10 +228,14 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   };
 
   // 官方同语义：草稿与附件皆空时发送禁用（空草稿手势仍可经键盘 Steer）。
+  const inert = disabled === true || blocked === true;
   const draftEmpty = (state?.draft ?? '').trim() === '';
   const noAttachments = (state?.attachmentIds.length ?? 0) === 0;
+  // 官方 primaryStops：运行中且草稿与附件皆空 → 主按钮变停止；停止形态不随
+  // 禁用锁死（官方 primaryDisabled 在 stops 分支只看 stop 是否可用）。
+  const primaryStops = running === true && draftEmpty && noAttachments;
   const sendDisabled =
-    disabled ||
+    inert ||
     actions === undefined ||
     (state !== undefined && state.phase === 'submitting') ||
     (draftEmpty && noAttachments);
@@ -313,7 +345,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
               placeholder={placeholderText}
               viewRef={viewRef}
               onCaretMoved={caretMoved}
-              disabled={disabled === true}
+              disabled={inert}
               autoFocus={true}
               solo={!previewOn}
               stateKey={sessionId ?? 'hero'}
@@ -333,7 +365,9 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
           triggers={triggers}
           caretRef={caretRef}
           useProjection={useProjection}
-          disabled={disabled}
+          disabled={inert}
+          primaryStops={primaryStops}
+          onStop={onStop}
           onNotify={notifyFor(sessionId)}
           onSend={sendGesture}
           sendDisabled={sendDisabled}
@@ -341,7 +375,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
 
         {/* 数据行：悬浮形态收进卡片（工具行下方，随卡片圆角一体）。 */}
         {float && hero !== true ? (
-          <StatsRow useProjection={useProjection} sessionId={sessionId} chatTimings={chatTimings} />
+          <StatsRow useProjection={useProjection} sessionId={sessionId} chatNodes={chatNodes} />
         ) : null}
 
         {/* 官方 MenuView 锚定：主模式以卡片顶上方弹出；侧栏/悬浮形态由
@@ -351,7 +385,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
 
       {/* 数据行：主输入/侧栏渲染在卡片下方（官方 hero 新会话态无 stats）。 */}
       {!float && hero !== true ? (
-        <StatsRow useProjection={useProjection} sessionId={sessionId} chatTimings={chatTimings} />
+        <StatsRow useProjection={useProjection} sessionId={sessionId} chatNodes={chatNodes} />
       ) : null}
 
       {popup ? <PopupSelectView popup={popup} /> : null}

package/src/client/components/ImageLightbox.tsx

@@ -0,0 +1,61 @@
+/**
+ * 原图预览（官方 primitives ImageLightbox 逐值复刻）：点击附件图片缩略图
+ * 打开；Esc、背板按下或右上角关闭钮关闭；挂载聚焦关闭钮、Tab 圈住焦点、
+ * 卸载还原 opener 焦点。经 body portal 渲染——opener 处于 transform/filter
+ * 祖先内时固定背板会被困在该祖先盒里，盖不满视口（官方同理由）。
+ */
+
+import { useEffect, useRef, type JSX } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface ImageLightboxLabels {
+  /** 预览对话框的可访问名。 */
+  dialog: string;
+  /** 关闭控件的可访问名。 */
+  close: string;
+}
+
+/** 官方 IconCloseOutlineRegular（1px 描边 ×，16 视框，MIT，见 LICENSE 归属段）。 */
+function CloseOutlineGlyph({ size = 16 }: { size?: number }): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" strokeWidth={1}>
+      <path d="M2.5 2.5L13.5 13.5" stroke="currentColor" />
+      <path d="M13.5 2.5L2.5 13.5" stroke="currentColor" />
+    </svg>
+  );
+}
+
+export function ImageLightbox(props: { src: string; alt: string; labels: ImageLightboxLabels; onClose(): void }): JSX.Element {
+  const { src, alt, labels, onClose } = props;
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const restoreRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    closeRef.current?.focus();
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        onClose();
+      }
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        closeRef.current?.focus();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, true);
+      restoreRef.current?.focus();
+    };
+  }, [onClose]);
+  return createPortal(
+    <div className="dci-lightbox" role="dialog" aria-modal="true" aria-label={labels.dialog}>
+      <div className="dci-lightbox-mask" aria-hidden="true" onMouseDown={onClose} />
+      <img className="dci-lightbox-image" src={src} alt={alt} />
+      <button ref={closeRef} type="button" className="dci-lightbox-close" aria-label={labels.close} onClick={onClose}>
+        <CloseOutlineGlyph />
+      </button>
+    </div>,
+    document.body,
+  );
+}