dsh-codinput 0.1.1 → 0.3.0

package/src/client/components/StatsRow.tsx

@@ -4,15 +4,15 @@
  * 点外关闭。 */
 
 import { useEffect, useRef, useState } from 'react';
-import { useSessionStats, formatTokens, type SessionStats } from '../stats';
+import { useSessionStats, formatTokens, formatTokensPerSecond, formatCacheHitPercent, formatDuration, type SessionStats } from '../stats';
 import type { UseProjection } from '../host-types';
 import { t } from '../i18n';
 
 export interface StatsRowProps {
   useProjection: UseProjection | undefined;
   sessionId: string | undefined;
-  /** chat 树解析的轮次计时（模型用时 / TTFT）。 */
-  chatTimings?: { modelMs?: number; ttftMs?: number };
+  /** chat legacy 节点数组（sessionStats 投影缺席时按官方 deriveStats 派生）。 */
+  chatNodes?: unknown;
 }
 
 /** 官方仪表盘 glyph（弧 + 指针 + 中点，stroke 1.25）。 */
@@ -67,17 +67,44 @@ function StatPanel(props: {
   );
 }
 
+/** 官方 exactCount：千分位分组 + " tok"。 */
+function exactCount(value: number | undefined): string {
+  const digits = String(value ?? 0);
+  const groups: string[] = [];
+  for (let end = digits.length; end > 0; end -= 3) groups.unshift(digits.slice(Math.max(0, end - 3), end));
+  return `${groups.join(',')} tok`;
+}
+
+/** 官方 TimePill：轮/步 + · tok/s（decodeMs>0 才出），面板 = 模型/工具用时、TTFT 均值、TPS。 */
 function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element {
   const { stats, open, onToggle } = props;
-  const roundsPart =
-    stats.turns !== undefined && stats.steps !== undefined
-      ? t('stats.turns', { turns: stats.turns, steps: stats.steps })
-      : stats.turns !== undefined
-        ? t('stats.turns', { turns: stats.turns, steps: 0 })
-        : t('stats.turns', { turns: 0, steps: 0 });
-  const speedPart = stats.tokensPerSecond !== undefined ? `${Math.round(stats.tokensPerSecond)} tok/s` : null;
-  const modelSec = stats.modelMs !== undefined ? stats.modelMs / 1000 : null;
-  const ttftSec = stats.ttftMs !== undefined ? stats.ttftMs / 1000 : null;
+  const roundsPart = t('stats.turns', { turns: stats.turns ?? 0, steps: stats.steps ?? 0 });
+  const tps =
+    (stats.decodeMs ?? 0) > 0 ? formatTokensPerSecond((stats.decodeTokens ?? 0) / ((stats.decodeMs ?? 1) / 1000)) : null;
+  const hasTimings =
+    (stats.llmMs ?? 0) > 0 || (stats.toolMs ?? 0) > 0 || (stats.ttftSteps ?? 0) > 0 || (stats.decodeMs ?? 0) > 0;
+  const label = (
+    <span className="dci-stat-label">
+      {roundsPart}
+      {tps !== null ? (
+        <>
+          <span className="dci-stat-sep" aria-hidden="true">·</span>
+          {t('stats.tps', { tps })}
+        </>
+      ) : null}
+    </span>
+  );
+  // 官方：无任何计时数据时胶囊不可点（无面板可看）。
+  if (!hasTimings) {
+    return (
+      <span className="dci-stat-anchor">
+        <span className="dci-stat-pill">
+          <GaugeIcon />
+          {label}
+        </span>
+      </span>
+    );
+  }
   return (
     <span className="dci-stat-anchor">
       <button
@@ -85,27 +112,26 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
         className="dci-stat-pill"
         aria-haspopup="dialog"
         aria-expanded={open}
+        aria-label={tps !== null ? `${roundsPart} · ${t('stats.tps', { tps })}` : roundsPart}
         onClick={onToggle}
       >
         <GaugeIcon />
-        <span className="dci-stat-label">
-          {roundsPart}
-          {speedPart !== null ? (
-            <>
-              <span className="dci-stat-sep" aria-hidden="true">·</span>
-              {speedPart}
-            </>
-          ) : null}
-        </span>
+        {label}
       </button>
       {open ? (
         <StatPanel
           label={t("stats.session")}
           icon={<GaugeIcon />}
           rows={[
-            [t('stats.modelTime'), modelSec !== null ? `${modelSec.toFixed(1)}s` : '—'],
-            [t('stats.ttft'), ttftSec !== null ? `${ttftSec.toFixed(1)}s` : '—'],
-            [t('stats.tpsLabel'), speedPart ?? '—'],
+            [t('stats.modelTime'), (stats.llmMs ?? 0) > 0 ? formatDuration(stats.llmMs!) : '—'],
+            [t('stats.toolTime'), (stats.toolMs ?? 0) > 0 ? formatDuration(stats.toolMs!) : '—'],
+            [t('stats.ttft'), (stats.ttftSteps ?? 0) > 0 ? formatDuration(stats.ttftMs! / stats.ttftSteps!) : '—'],
+            [
+              t('stats.tpsLabel'),
+              (stats.decodeMs ?? 0) > 0
+                ? t('stats.tps', { tps: formatTokensPerSecond((stats.decodeTokens ?? 0) / ((stats.decodeMs ?? 1) / 1000)) })
+                : '—',
+            ],
           ]}
         />
       ) : null}
@@ -113,10 +139,17 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
   );
 }
 
+/** 官方 UsagePill：总量 · 缓存命中（缓存命中用官方百分比精度规则）。 */
 function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element | null {
   const { stats, open, onToggle } = props;
   if (stats.totalTokens === undefined) return null;
-  const comma = (n: number): string => Math.round(n).toLocaleString('en-US');
+  const total = stats.totalTokens;
+  const cacheHitText =
+    stats.cacheHitText ??
+    formatCacheHitPercent(
+      stats.cacheReadTokens ?? 0,
+      (stats.cacheReadTokens ?? 0) + (stats.cacheWriteTokens ?? 0) + (stats.uncachedInputTokens ?? 0),
+    );
   return (
     <span className="dci-stat-anchor">
       <button
@@ -124,15 +157,20 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
         className="dci-stat-pill"
         aria-haspopup="dialog"
         aria-expanded={open}
+        aria-label={
+          cacheHitText !== null
+            ? `${formatTokens(total)} · ${t('stats.cacheHit', { percent: cacheHitText })}`
+            : formatTokens(total)
+        }
         onClick={onToggle}
       >
         <DatabaseIcon />
         <span className="dci-stat-label">
-          {formatTokens(stats.totalTokens)}
-          {stats.cacheHitPct !== undefined ? (
+          {formatTokens(total)}
+          {cacheHitText !== null ? (
             <>
               <span className="dci-stat-sep" aria-hidden="true">·</span>
-              缓存命中 {Math.round(stats.cacheHitPct)}%
+              {t('stats.cacheHit', { percent: cacheHitText })}
             </>
           ) : null}
         </span>
@@ -141,12 +179,15 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
         <StatPanel
           label={t("stats.usage")}
           icon={<DatabaseIcon />}
-          titleValue={`${comma(stats.totalTokens)} tok`}
+          titleValue={exactCount(total)}
           rows={[
-            [t('stats.cacheHitLabel'), stats.cacheHitPct !== undefined ? `${Math.round(stats.cacheHitPct)}%` : '—'],
-            [t('stats.uncached'), `${comma(stats.uncachedInputTokens ?? 0)} tok`],
-            [t('stats.cacheRead'), `${comma(stats.cacheReadTokens ?? 0)} tok`],
-            [t('stats.output'), `${comma(stats.outputTokens ?? 0)} tok`],
+            [t('stats.cacheHitLabel'), cacheHitText !== null ? `${cacheHitText}%` : '—'],
+            [t('stats.uncached'), exactCount(stats.uncachedInputTokens)],
+            [t('stats.cacheRead'), exactCount(stats.cacheReadTokens)],
+            ...(stats.cacheWriteTokens
+              ? [[t('stats.cacheWrite'), exactCount(stats.cacheWriteTokens)] as [string, string]]
+              : []),
+            [t('stats.output'), exactCount(stats.outputTokens)],
           ]}
         />
       ) : null}
@@ -155,18 +196,10 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
 }
 
 export function StatsRow(props: StatsRowProps): JSX.Element | null {
-  const { useProjection, sessionId, chatTimings } = props;
+  const { useProjection, sessionId, chatNodes } = props;
   const [open, setOpen] = useState<'rounds' | 'tokens' | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const sampled = useSessionStats(useProjection, sessionId);
-  // chat 树计时优先（历史会话也有值），采样值兜底。
-  const stats = sampled
-    ? {
-        ...sampled,
-        ...(chatTimings?.modelMs !== undefined ? { modelMs: chatTimings.modelMs } : {}),
-        ...(chatTimings?.ttftMs !== undefined ? { ttftMs: chatTimings.ttftMs } : {}),
-      }
-    : sampled;
+  const stats = useSessionStats(useProjection, sessionId, chatNodes);
 
   // 点外面关闭（面板内/胶囊上不关）。
   useEffect(() => {

package/src/client/components/Toolbar.tsx

@@ -1,21 +1,23 @@
 /**
  * 工具行：结构与样式逐条对齐官方 InputBar 工具行——
- * 左侧 .dci-tools：指令（plus）、添加附件（paperclip）、权限（shield 触发器）；
- * 右侧 .dci-trailing：模型与思考强度（触发器）、发送（.primary 圆钮）。
+ * 左侧 .dci-tools：指令（plus）、权限（shield 触发器）；
+ * 右侧 .dci-trailing：模型与思考强度（触发器）、语音输入（官方 activity 槽位
+ * 条目，桌面版宿主才有）、发送（.primary 圆钮）。
  * 按钮沿用官方 keepFocus 语义（mousedown 不夺走编辑器焦点）。
+ * 附件无独立按钮（官方已并入 slash「添加 · 文件」），粘贴/拖拽路径保留。
  * 0.1.7-rc.2 起官方上下文小圈不再在工具行（挪进卡片下方 dock 行，见 StatsRow）。
+ * 语音展开时隐藏 tools 与模型（官方 activity 同款：capture 行接管整行，
+ * 发送/停止保持可见）。
  */
 
-import { useRef } from 'react';
+import { useCallback, useState } from 'react';
 import type { DraftAttachmentId, InputActions, InputState, InputTriggerController, UseProjection } from '../host-types';
 import { openCommandMenu } from '../triggers';
-import { stash } from '../services';
-import { addFilesToDraft } from '../attachments';
 import { t, useT } from '../i18n';
-import { IconPaperclipOfficial, IconPlusOfficial, IconSendOfficial } from '../icons';
+import { IconPlusOfficial, IconSendOfficial, IconStopOfficial } from '../icons';
 import { ModelMenu } from './ModelMenu';
 import { PermissionMenu } from './PermissionMenu';
-import { useSnapshot } from './useSnapshot';
+import { VoiceActivity } from './VoiceActivity';
 
 export interface ToolbarProps {
   sessionId: string | undefined;
@@ -31,6 +33,10 @@ export interface ToolbarProps {
   /** 主发送手势（与编辑器发送键同一策略）。 */
   onSend(): void;
   sendDisabled?: boolean;
+  /** 会话运行中且草稿空（官方 primaryStops）：主按钮变停止。 */
+  primaryStops?: boolean;
+  /** 停止生成（官方 stop：conversation.cancel）。 */
+  onStop?(): void;
 }
 
 /** 官方 keepFocus：mousedown 阻止默认，避免编辑器失焦。 */
@@ -41,21 +47,19 @@ function keepFocus(event: React.MouseEvent): void {
 export function Toolbar(props: ToolbarProps): JSX.Element {
   const { sessionId, state, actions, triggers, caretRef, useProjection, disabled, onNotify } = props;
   useT();
-  const fileRef = useRef<HTMLInputElement | null>(null);
 
   const attachments: readonly DraftAttachmentId[] = state?.attachmentIds ?? [];
+  // 官方 activity 语义：语音展开时本行左侧工具与模型控件隐藏、capture 行伸展。
+  const [voiceActive, setVoiceActive] = useState(false);
+  const onVoiceActiveChange = useCallback((active: boolean): void => setVoiceActive(active), []);
 
   const onCommandClick = (): void => {
     if (!triggers) return;
     openCommandMenu(triggers, undefined, caretRef.current ?? 0);
   };
 
-  const onAttach = (files: FileList | null): void => {
-    addFilesToDraft(sessionId, actions, files, onNotify);
-  };
-
   return (
-    <div className="dci-row">
+    <div className="dci-row" data-voice-active={voiceActive || undefined}>
       <div className="dci-tools">
         <button
           type="button"
@@ -69,26 +73,6 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
         >
           <IconPlusOfficial size={14} />
         </button>
-        <button
-          type="button"
-          className="dci-add"
-          aria-label={t("tool.attach")}
-          title={t("tool.attach")}
-          onMouseDown={keepFocus}
-          onClick={() => fileRef.current?.click()}
-        >
-          <IconPaperclipOfficial size={14} />
-        </button>
-        <input
-          ref={fileRef}
-          type="file"
-          multiple
-          hidden
-          onChange={(e) => {
-            onAttach(e.target.files);
-            e.target.value = '';
-          }}
-        />
         <PermissionMenu
           sessionId={sessionId}
           actions={actions}
@@ -99,20 +83,30 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
         />
       </div>
       <div className="dci-trailing">
-        <ModelMenu
-          sessionId={sessionId}
-          onNotify={onNotify}
-        />
+        <div className="dci-standard-controls">
+          <ModelMenu
+            sessionId={sessionId}
+            onNotify={onNotify}
+          />
+        </div>
+        <div className="dci-voice-seat">
+          <VoiceActivity
+            sessionId={sessionId}
+            inputActions={actions}
+            locked={disabled === true}
+            onActiveChange={onVoiceActiveChange}
+          />
+        </div>
         <button
           type="button"
           className="dci-send"
-          aria-label={t("tool.send")}
-          title={t("tool.send")}
-          disabled={props.sendDisabled}
+          aria-label={props.primaryStops ? t('tool.stop') : t('tool.send')}
+          title={props.primaryStops ? t('tool.stop') : t('tool.send')}
+          disabled={props.primaryStops ? !props.onStop : props.sendDisabled}
           onMouseDown={keepFocus}
-          onClick={() => props.onSend()}
+          onClick={() => (props.primaryStops ? props.onStop?.() : props.onSend())}
         >
-          <IconSendOfficial size={16} />
+          {props.primaryStops ? <IconStopOfficial size={16} /> : <IconSendOfficial size={16} />}
         </button>
       </div>
     </div>

package/src/client/components/VoiceActivity.tsx

@@ -0,0 +1,172 @@
+/**
+ * 语音输入按钮：渲染官方 voice-input 插件注册在 conversation.input.activity
+ * 槽位的**条目组件本体**（麦克风触发钮、录音波形、转写、未就绪引导弹窗全部
+ * 是官方代码，其闭包自带 primitives 与样式注入）。
+ *
+ * 检测即兼容：官方桌面版（0.2.0-rc.2 起）挂载 experimental-client-ui-voice-input
+ * 后，原生输入框工具行右侧（模型选择器与发送钮之间）出现麦克风钮；web 宿主
+ * （0.1.x）没有该插件、槽位无条目，官方输入框也没有按钮——Codinput 同样不
+ * 渲染。条目出现/消失经 slots.subscribe 响应式跟随（用户开关语音插件即时生效）。
+ *
+ * props 组装复刻官方 renderer 的合成公式：
+ *   {...standard(sessionId/inputActions), ...entry.inject()（其 hooks 子表的
+ *   speechReadiness 按 standardHookPropName 变成 useSpeechReadiness 选择器钩子）,
+ *   ...ownerProps(locked/onActiveChange), t = locale.bind(entry.locale)}
+ * inject 结果按（条目 × 会话）缓存——官方 renderer 同款缓存轴，避免每次渲染
+ * 重建对象让钩子身份漂移。宿主未就绪（slots 无检视面 / inject 不可调 /
+ * locale 缺席）一律不渲染，绝不半组装。
+ */
+
+import { createElement, useCallback, useMemo, useSyncExternalStore, Component } from 'react';
+import type { HostObservable, SlotEntryLike } from '../host-types';
+import { stash } from '../services';
+import { bindForeign } from '../i18n';
+import { diagError } from '../diag';
+
+const ACTIVITY_SLOT = 'conversation.input.activity';
+const VOICE_NS_FALLBACK = 'voice-input';
+
+type Translator = (key: string, params?: Record<string, string | number>) => string;
+type ReadinessSelector = (value: unknown) => unknown;
+type ReadinessHook = (selector: ReadinessSelector) => unknown;
+
+const EMPTY_ENTRIES: readonly unknown[] = [];
+
+/** observableHook 同款缓存轴：钩子身份按 readiness store 稳定，不逐渲染重订。 */
+const readinessHookCache = new WeakMap<object, ReadinessHook>();
+/** 官方 renderer 的 inject 缓存轴：条目 × 会话绑定。 */
+const injectCache = new WeakMap<object, Map<string, Record<string, unknown> | null>>();
+const translatorCache = new Map<string, Translator | null>();
+
+/** 槽位条目快照：entries 引用在变更之间稳定（官方契约），直接作 uSES 源。 */
+function useSlotEntries(key: string): readonly unknown[] {
+  const slots = stash.slots;
+  const subscribe = useCallback(
+    (fn: () => void) => {
+      if (typeof slots?.subscribe !== 'function') return () => {};
+      try {
+        return slots.subscribe(key, fn) ?? (() => {});
+      } catch {
+        return () => {};
+      }
+    },
+    [slots, key],
+  );
+  const getSnapshot = useCallback(() => {
+    if (typeof slots?.entries !== 'function') return EMPTY_ENTRIES;
+    try {
+      return slots.entries(key) ?? EMPTY_ENTRIES;
+    } catch {
+      return EMPTY_ENTRIES;
+    }
+  }, [slots, key]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+/** 调条目 inject 工厂取 props 面（session 槽位以 sessionId 调用，官方同参）。 */
+function resolveInjected(entry: SlotEntryLike, sessionId: string): Record<string, unknown> | null {
+  if (typeof entry.inject !== 'function') return null;
+  let perSession = injectCache.get(entry);
+  if (!perSession) {
+    perSession = new Map();
+    injectCache.set(entry, perSession);
+  }
+  if (!perSession.has(sessionId)) {
+    let face: Record<string, unknown> | null = null;
+    try {
+      face = (entry.inject as (key: string) => Record<string, unknown>)(sessionId) ?? null;
+    } catch (error) {
+      diagError('voice.inject', error);
+      face = null;
+    }
+    perSession.set(sessionId, face);
+  }
+  return perSession.get(sessionId) ?? null;
+}
+
+/** 官方 renderer 的 locale 座位：locale.bind(entry.locale)，按 ns 缓存。 */
+function translatorFor(entry: SlotEntryLike): Translator | null {
+  const ns = entry.locale ?? VOICE_NS_FALLBACK;
+  if (!translatorCache.has(ns)) translatorCache.set(ns, bindForeign(ns));
+  return translatorCache.get(ns) ?? null;
+}
+
+/** hooks.speechReadiness（快照 store）→ use<Name> 选择器钩子（observableHook 同款）。 */
+function readinessHookFor(source: unknown): ReadinessHook | null {
+  const face = source as HostObservable<unknown> | undefined;
+  if (!face || typeof face.subscribe !== 'function' || typeof face.getSnapshot !== 'function') return null;
+  let hook = readinessHookCache.get(face);
+  if (!hook) {
+    hook = (selector: ReadinessSelector): unknown =>
+      useSyncExternalStore(
+        (fn: () => void) => face.subscribe(fn) ?? (() => {}),
+        () => selector(face.getSnapshot()),
+        () => selector(face.getSnapshot()),
+      );
+    readinessHookCache.set(face, hook);
+  }
+  return hook;
+}
+
+/** 条目崩溃只丢语音钮，不连坐 Codinput 的 bar 条目（bar 被废黜 = 全部输入消失）。 */
+class VoiceBoundary extends Component<{ children?: React.ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true };
+  }
+  componentDidCatch(error: unknown): void {
+    diagError('voice.entry', error);
+  }
+  render(): React.ReactNode {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+export interface VoiceActivityProps {
+  sessionId: string | undefined;
+  /** 官方输入机动作面（bar 槽位 standard props 里的 inputActions 原样透传）。 */
+  inputActions: unknown;
+  /** 输入锁定（官方 ownerProps.locked：submitting/inert 时触发钮禁用）。 */
+  locked: boolean;
+  /** 展开/收起上报（官方 ownerProps.onActiveChange：录音时宿主隐藏其余工具）。 */
+  onActiveChange(active: boolean): void;
+}
+
+export function VoiceActivity(props: VoiceActivityProps): JSX.Element | null {
+  const { sessionId, inputActions, locked, onActiveChange } = props;
+  const entries = useSlotEntries(ACTIVITY_SLOT);
+
+  // single 槽位赢家 = 优先级最低者 = entries 首个（register 即按优先级排序）。
+  const entry = useMemo((): SlotEntryLike | null => {
+    for (const candidate of entries) {
+      const record = candidate as SlotEntryLike | null | undefined;
+      if (record && typeof record === 'object' && typeof record.component === 'function') return record;
+    }
+    return null;
+  }, [entries]);
+
+  const injected = useMemo(
+    () => (entry && sessionId ? resolveInjected(entry, sessionId) : null),
+    [entry, sessionId],
+  );
+  const translator = useMemo(() => (entry ? translatorFor(entry) : null), [entry]);
+  const readinessSource = (injected?.['hooks'] as { speechReadiness?: unknown } | undefined)?.speechReadiness;
+  const useReadiness = useMemo(() => readinessHookFor(readinessSource), [readinessSource]);
+
+  if (!entry || !sessionId || !injected || !translator || !useReadiness) return null;
+
+  // hooks 子表已折成 use* 钩子（bindInjectSources 同款），其余 props 原样下传。
+  const { hooks: _hooks, ...actions } = injected;
+  void _hooks;
+  return createElement(VoiceBoundary, {
+    children: createElement(entry.component as React.ComponentType<Record<string, unknown>>, {
+      sessionId,
+      inputActions,
+      locked,
+      onActiveChange,
+      ...actions,
+      useSpeechReadiness: useReadiness,
+      t: translator,
+    }),
+  });
+}

package/src/client/host-types.ts

@@ -44,6 +44,24 @@ export interface SlotsService {
   register(options: SlotRegisterOptions, component: unknown): () => void;
   /** 锚定槽位：当该槽被声明时运行工厂；工厂 yield 掉的可清理返回值统一登记生命周期。 */
   inject(slotName: string, factory: () => Generator<unknown> | (() => unknown)): void;
+  /**
+   * 槽位检视面（0.2.x 起的 SlotCore 公开方法，鸭子探测）：entries 返回条目
+   * 快照（引用在变更之间稳定，可作 uSES getSnapshot 源；未声明槽返回稳定
+   * 空数组）；subscribe 订阅该槽条目变更。
+   */
+  entries?(key: string): readonly unknown[];
+  subscribe?(key: string, fn: () => void): () => void;
+}
+
+/** 槽位条目记录（SlotCore.register 产物）里我们消费的切面。 */
+export interface SlotEntryLike {
+  /** 条目 React 组件（官方 renderer 以 {...kit,...injected,...ownerProps} 渲染）。 */
+  readonly component?: unknown;
+  /** 注入工厂：session 槽位以 binding.key（sessionId）调用，返回 props 面。 */
+  readonly inject?: (...args: unknown[]) => Record<string, unknown>;
+  /** 条目词典命名空间（locale.bind(ns) 即官方传给组件的 t）。 */
+  readonly locale?: string;
+  readonly registrant?: string;
 }
 
 // ---------- input machine ----------
@@ -324,5 +342,10 @@ export interface SettingsSectionProps {
  */
 export interface SidebarTabInfo {
   readonly sidebar: { readonly expanded: boolean; readonly fullscreen: boolean };
-  readonly tab: { readonly visible: boolean };
+  readonly tab: {
+    readonly visible: boolean;
+    readonly id?: string;
+    /** tab 域动作面（occurrence held）：close() 关闭本标签。 */
+    readonly actions?: { readonly close?: () => void };
+  };
 }

package/src/client/i18n.ts

@@ -27,7 +27,6 @@ const ZH: Dict = {
   'editor.placeholder': '描述你想要构建的内容，/ 调用指令，@ 文件或对话',
   'preview.empty': '暂无可预览内容',
   'tool.command': '指令（/）',
-  'tool.attach': '添加附件',
   'tool.send': '发送',
   'tool.model': '选择模型，当前 {name}',
   'tool.modelPlain': '选择模型',
@@ -47,6 +46,7 @@ const ZH: Dict = {
   'stats.turns': '{turns} 轮 {steps} 步',
   'stats.tps': '{tps} tok/s',
   'stats.modelTime': '模型用时',
+  'stats.toolTime': '工具调用用时',
   'stats.ttft': '首 token 平均（TTFT）',
   'stats.tpsLabel': '输出速度（TPS）',
   'stats.totalTokens': '{tokens} tok',
@@ -110,6 +110,13 @@ const ZH: Dict = {
   'ball.title': '展开 Codinput',
   'side.notice': '本会话的输入面已在另一个分栏中打开（输入入口唯一）。',
   'side.guideDesc': '代码编辑器风格的输入面板；开启期间主输入框由本面板接管（共用同一台输入机）',
+  'side.disabled': 'Codinput 接管已关闭：主输入在原输入位（官方输入框）。输入 /codinput 或到 设置 → Codinput 重新开启。',
+  'tool.attach': '文件',
+  'tool.stop': '停止',
+  'image.preview': '原图预览',
+  'image.closePreview': '关闭原图预览',
+  'image.openOriginal': '查看原图',
+  'image.openOriginalLabel': '{name}，点击查看原图',
   'cmd.enter': '进入 Codinput 输入接管',
   'cmd.exit': '退出 Codinput，恢复官方输入框',
 };
@@ -124,7 +131,6 @@ const EN: Dict = {
   'editor.placeholder': 'Describe what you want to build — / for commands, @ for files or chats',
   'preview.empty': 'Nothing to preview',
   'tool.command': 'Commands (/)',
-  'tool.attach': 'Add attachment',
   'tool.send': 'Send',
   'tool.model': 'Select model, current {name}',
   'tool.modelPlain': 'Select model',
@@ -144,6 +150,7 @@ const EN: Dict = {
   'stats.turns': '{turns} turns · {steps} steps',
   'stats.tps': '{tps} tok/s',
   'stats.modelTime': 'Model time',
+  'stats.toolTime': 'Tool call time',
   'stats.ttft': 'Avg first token (TTFT)',
   'stats.tpsLabel': 'Output speed (TPS)',
   'stats.totalTokens': '{tokens} tok',
@@ -207,6 +214,13 @@ const EN: Dict = {
   'ball.title': 'Open Codinput',
   'side.notice': "This session's input panel is already open in another split pane (only one input surface exists).",
   'side.guideDesc': 'Code-editor style input panel. While enabled it takes over the composer (sharing the same input machine).',
+  'side.disabled': 'Codinput takeover is off: the composer is back at its original place (official input). Type /codinput or open Settings → Codinput to re-enable.',
+  'tool.attach': 'File',
+  'tool.stop': 'Stop',
+  'image.preview': 'Original image preview',
+  'image.closePreview': 'Close original image preview',
+  'image.openOriginal': 'View original',
+  'image.openOriginalLabel': '{name}, click to view the original',
   'cmd.enter': 'Enable the Codinput composer takeover',
   'cmd.exit': 'Disable Codinput and restore the official composer',
 };
@@ -218,9 +232,11 @@ interface LocaleFaceLike {
   getSnapshot?(): { active?: string };
 }
 
+let hostFace: LocaleFaceLike | null = null;
 let bound: ((key: string, params?: TranslateParams) => string) | null = null;
 let activeLocale = 'zh';
 const listeners = new Set<() => void>();
+const foreignBinds = new Map<string, ((key: string, params?: TranslateParams) => string) | null>();
 
 function emit(): void {
   for (const fn of listeners) fn();
@@ -243,6 +259,7 @@ function builtinDict(): Dict {
 export function installI18n(locale: unknown): void {
   const face = locale as LocaleFaceLike | undefined;
   if (!face) return;
+  hostFace = face;
   try {
     face.register?.(NS, 'zh', ZH);
     face.register?.(NS, 'en', EN);
@@ -268,6 +285,24 @@ export function installI18n(locale: unknown): void {
   }
 }
 
+/**
+ * 绑定其他命名空间的宿主词典（如语音插件注册的 voice-input——渲染官方条目
+ * 组件时，官方 renderer 传的就是 locale.bind(entry.locale)）。返回引用稳定
+ * 的翻译函数；宿主 face 未就绪或 bind 失败返回 null。结果按 ns 缓存。
+ */
+export function bindForeign(ns: string): ((key: string, params?: TranslateParams) => string) | null {
+  if (!foreignBinds.has(ns)) {
+    let bound: ((key: string, params?: TranslateParams) => string) | null = null;
+    try {
+      bound = hostFace?.bind?.(ns) ?? null;
+    } catch {
+      bound = null;
+    }
+    foreignBinds.set(ns, bound);
+  }
+  return foreignBinds.get(ns) ?? null;
+}
+
 export function subscribeI18n(fn: () => void): () => void {
   listeners.add(fn);
   return () => {