dsh-codinput 0.1.0 → 0.2.0

package/src/client/components/StatsRow.tsx

@@ -1,17 +1,18 @@
-/** 数据行（卡片下方）：官方 composer stats 复刻（bOPqQW + bRhRbq）——两枚
- * 胶囊（仪表盘「轮/步 · tok/s」、数据库「累计 tok · 缓存命中」），点击弹出
- * 官方同构详情面板（会话统计 / Token 用量），锚点上方弹出、点外关闭。 */
+/** 数据行（卡片下方）：官方 composer dock 复刻——两枚胶囊（仪表盘「轮/步 · tok/s」、
+ * 数据库「累计 tok · 缓存命中」）+ 上下文小圈（0.1.7-rc.2 起官方把它挪进本行，圈+百分比
+ * 药丸），点击弹出官方同构详情面板（会话统计 / Token 用量 / 上下文分段），锚点上方弹出、
+ * 点外关闭。 */
 
 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）。 */
@@ -66,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
@@ -84,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}
@@ -112,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
@@ -123,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>
@@ -140,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}
@@ -154,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(() => {
@@ -178,11 +212,144 @@ export function StatsRow(props: StatsRowProps): JSX.Element | null {
     return () => window.removeEventListener('pointerdown', onDown, true);
   }, [open]);
 
-  if (!stats) return null;
+  // 官方 rc.2：上下文小圈独立于 stats 胶囊渲染（无 stats 也要出圈）。
+  const pressure = useProjection
+    ? (useProjection('contextPressure') as PressureSnapshot | undefined)
+    : undefined;
+  const hasGauge = pressure !== undefined && !!pressure.contextWindow;
+  if (!stats && !hasGauge) return null;
   return (
     <div className="dci-stat-root" data-composer-stats="codinput" ref={rootRef}>
-      <Pill stats={stats} open={open === 'rounds'} onToggle={() => setOpen(open === 'rounds' ? null : 'rounds')} />
-      <TokenPill stats={stats} open={open === 'tokens'} onToggle={() => setOpen(open === 'tokens' ? null : 'tokens')} />
+      {stats ? (
+        <>
+          <Pill stats={stats} open={open === 'rounds'} onToggle={() => setOpen(open === 'rounds' ? null : 'rounds')} />
+          <TokenPill stats={stats} open={open === 'tokens'} onToggle={() => setOpen(open === 'tokens' ? null : 'tokens')} />
+        </>
+      ) : null}
+      <ContextGauge useProjection={useProjection} />
     </div>
   );
 }
+
+const GAUGE_CIRCUMFERENCE = 2 * Math.PI * 5.5;
+
+interface PressureSnapshot {
+  contextWindow?: number;
+  pressureTokens?: number;
+  projectedTokens?: number;
+}
+
+interface BreakdownSnapshot {
+  messageTokens?: number;
+  systemTokens?: number;
+  toolsTokens?: number;
+}
+
+function shortTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`;
+  return `${n}`;
+}
+
+/** 上下文占用小圈（官方 JObwrW 复刻）：双环仪表 + 百分比，点击展开分段面板。
+ * 0.1.7-rc.2 起官方渲染在 dock 行 stats 胶囊之后（原先在工具行 trailing）。 */
+export function ContextGauge(props: { useProjection: UseProjection | undefined }): JSX.Element | null {
+  const { useProjection } = props;
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLSpanElement | null>(null);
+  const pressure = useProjection
+    ? (useProjection('contextPressure') as PressureSnapshot | undefined)
+    : undefined;
+  const breakdown = useProjection
+    ? (useProjection('contextBreakdown') as BreakdownSnapshot | undefined)
+    : undefined;
+  // 点外面关闭。
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event: PointerEvent): void => {
+      if (rootRef.current && event.target instanceof Node && rootRef.current.contains(event.target)) return;
+      setOpen(false);
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    return () => window.removeEventListener('pointerdown', onDown, true);
+  }, [open]);
+
+  if (!pressure || !pressure.contextWindow) return null;
+  const windowTokens = pressure.contextWindow;
+  // 官方 contextOccupancy 语义：优先 projectedTokens（含投影增长），缺失退 pressureTokens。
+  const usedTokens = pressure.projectedTokens ?? pressure.pressureTokens ?? 0;
+  const pct = Math.min(100, Math.round((usedTokens / windowTokens) * 100));
+  const dash = (pct / 100) * GAUGE_CIRCUMFERENCE;
+  const segments: readonly [string, number][] = [
+    ['dci-gauge-colorSystem', breakdown?.systemTokens ?? 0],
+    ['dci-gauge-colorTools', breakdown?.toolsTokens ?? 0],
+    ['dci-gauge-colorMessages', breakdown?.messageTokens ?? 0],
+  ];
+  return (
+    <span className="dci-gauge-root" ref={rootRef}>
+      <button
+        type="button"
+        className="dci-gauge-trigger"
+        aria-label={t("tool.context", { percent: Math.round(pct) })}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        title={t("tool.context", { percent: Math.round(pct) })}
+        onClick={() => setOpen(!open)}
+      >
+        <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true">
+          <circle className="dci-gauge-track" cx="7" cy="7" r="5.5" />
+          <circle
+            className="dci-gauge-fill"
+            cx="7" cy="7" r="5.5"
+            strokeDasharray={`${dash} ${GAUGE_CIRCUMFERENCE}`}
+            transform="rotate(-90 7 7)"
+          />
+        </svg>
+        <span>{Math.round(pct)}%</span>
+      </button>
+      {open ? (
+        <div className="dci-gauge-panel" role="dialog" aria-label={t("tool.contextTitle")}>
+          <div className="dci-gauge-header">
+            <span className="dci-gauge-headline">{t("tool.contextTitle")}</span>
+            <span className="dci-gauge-percent">{Math.round(pct)}%</span>
+            <span className="dci-gauge-figures">
+              ~{shortTokens(usedTokens)} / {shortTokens(windowTokens)}
+            </span>
+          </div>
+          <div className="dci-gauge-bar">
+            {segments.map(([cls, tokens]) => (
+              <div
+                key={cls}
+                className={`dci-gauge-segment ${cls}`}
+                style={{ width: `${(tokens / windowTokens) * 100}%` }}
+              />
+            ))}
+          </div>
+          <dl className="dci-gauge-rows">
+            <div className="dci-gauge-row">
+              <dt>
+                <span className={`dci-gauge-swatch dci-gauge-colorSystem`} aria-hidden="true" />
+                {t("stats.prompt")}
+              </dt>
+              <dd>~{shortTokens(breakdown?.systemTokens ?? 0)}</dd>
+            </div>
+            <div className="dci-gauge-row">
+              <dt>
+                <span className={`dci-gauge-swatch dci-gauge-colorTools`} aria-hidden="true" />
+                {t("stats.tools")}
+              </dt>
+              <dd>~{shortTokens(breakdown?.toolsTokens ?? 0)}</dd>
+            </div>
+            <div className="dci-gauge-row">
+              <dt>
+                <span className={`dci-gauge-swatch dci-gauge-colorMessages`} aria-hidden="true" />
+                {t("stats.messages")}
+              </dt>
+              <dd>~{shortTokens(breakdown?.messageTokens ?? 0)}</dd>
+            </div>
+          </dl>
+        </div>
+      ) : null}
+    </span>
+  );
+}

package/src/client/components/Toolbar.tsx

@@ -1,20 +1,18 @@
 /**
  * 工具行：结构与样式逐条对齐官方 InputBar 工具行——
- * 左侧 .dci-tools：指令（plus）、添加附件（paperclip）、权限（shield 触发器）；
+ * 左侧 .dci-tools：指令（plus）、权限（shield 触发器）；
  * 右侧 .dci-trailing：模型与思考强度（触发器）、发送（.primary 圆钮）。
  * 按钮沿用官方 keepFocus 语义（mousedown 不夺走编辑器焦点）。
+ * 附件无独立按钮（官方已并入 slash「添加 · 文件」），粘贴/拖拽路径保留。
+ * 0.1.7-rc.2 起官方上下文小圈不再在工具行（挪进卡片下方 dock 行，见 StatsRow）。
  */
 
-import { useEffect, useRef, 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';
 
 export interface ToolbarProps {
   sessionId: string | undefined;
@@ -30,6 +28,10 @@ export interface ToolbarProps {
   /** 主发送手势（与编辑器发送键同一策略）。 */
   onSend(): void;
   sendDisabled?: boolean;
+  /** 会话运行中且草稿空（官方 primaryStops）：主按钮变停止。 */
+  primaryStops?: boolean;
+  /** 停止生成（官方 stop：conversation.cancel）。 */
+  onStop?(): void;
 }
 
 /** 官方 keepFocus：mousedown 阻止默认，避免编辑器失焦。 */
@@ -40,7 +42,6 @@ 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 ?? [];
 
@@ -49,10 +50,6 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
     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-tools">
@@ -68,26 +65,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}
@@ -102,138 +79,18 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
           sessionId={sessionId}
           onNotify={onNotify}
         />
-        <ContextGauge useProjection={useProjection} />
         <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>
   );
 }
-
-const GAUGE_CIRCUMFERENCE = 2 * Math.PI * 5.5;
-
-interface PressureSnapshot {
-  contextWindow?: number;
-  pressureTokens?: number;
-  projectedTokens?: number;
-}
-
-interface BreakdownSnapshot {
-  messageTokens?: number;
-  systemTokens?: number;
-  toolsTokens?: number;
-}
-
-function shortTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`;
-  return `${n}`;
-}
-
-/** 上下文占用小圈（官方 JObwrW 复刻）：双环仪表 + 点击展开分段面板。 */
-function ContextGauge(props: { useProjection: UseProjection | undefined }): JSX.Element | null {
-  const { useProjection } = props;
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLSpanElement | null>(null);
-  const pressure = useProjection
-    ? (useProjection('contextPressure') as PressureSnapshot | undefined)
-    : undefined;
-  const breakdown = useProjection
-    ? (useProjection('contextBreakdown') as BreakdownSnapshot | undefined)
-    : undefined;
-  // 点外面关闭。
-  useEffect(() => {
-    if (!open) return;
-    const onDown = (event: PointerEvent): void => {
-      if (rootRef.current && event.target instanceof Node && rootRef.current.contains(event.target)) return;
-      setOpen(false);
-    };
-    window.addEventListener('pointerdown', onDown, true);
-    return () => window.removeEventListener('pointerdown', onDown, true);
-  }, [open]);
-
-  if (!pressure || !pressure.contextWindow) return null;
-  const windowTokens = pressure.contextWindow;
-  const pct = Math.min(100, Math.max(0, ((pressure.pressureTokens ?? 0) / windowTokens) * 100));
-  const dash = (pct / 100) * GAUGE_CIRCUMFERENCE;
-  const segments: readonly [string, number][] = [
-    ['dci-gauge-colorSystem', breakdown?.systemTokens ?? 0],
-    ['dci-gauge-colorTools', breakdown?.toolsTokens ?? 0],
-    ['dci-gauge-colorMessages', breakdown?.messageTokens ?? 0],
-  ];
-  return (
-    <span className="dci-gauge-root" ref={rootRef}>
-      <button
-        type="button"
-        className="dci-gauge-trigger"
-        aria-label={t("tool.context", { percent: Math.round(pct) })}
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        title={t("tool.context", { percent: Math.round(pct) })}
-        onClick={() => setOpen(!open)}
-      >
-        <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true">
-          <circle className="dci-gauge-track" cx="7" cy="7" r="5.5" />
-          <circle
-            className="dci-gauge-fill"
-            cx="7" cy="7" r="5.5"
-            strokeDasharray={`${dash} ${GAUGE_CIRCUMFERENCE}`}
-            transform="rotate(-90 7 7)"
-          />
-        </svg>
-      </button>
-      {open ? (
-        <div className="dci-gauge-panel" role="dialog" aria-label={t("tool.contextTitle")}>
-          <div className="dci-gauge-header">
-            <span className="dci-gauge-headline">{t("tool.contextTitle")}</span>
-            <span className="dci-gauge-percent">{Math.round(pct)}%</span>
-            <span className="dci-gauge-figures">
-              ~{shortTokens(pressure.pressureTokens ?? 0)} / {shortTokens(windowTokens)}
-            </span>
-          </div>
-          <div className="dci-gauge-bar">
-            {segments.map(([cls, tokens]) => (
-              <div
-                key={cls}
-                className={`dci-gauge-segment ${cls}`}
-                style={{ width: `${(tokens / windowTokens) * 100}%` }}
-              />
-            ))}
-          </div>
-          <dl className="dci-gauge-rows">
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorSystem`} aria-hidden="true" />
-                {t("stats.prompt")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.systemTokens ?? 0)}</dd>
-            </div>
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorTools`} aria-hidden="true" />
-                {t("stats.tools")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.toolsTokens ?? 0)}</dd>
-            </div>
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorMessages`} aria-hidden="true" />
-                {t("stats.messages")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.messageTokens ?? 0)}</dd>
-            </div>
-          </dl>
-        </div>
-      ) : null}
-    </span>
-  );
-}

package/src/client/host-types.ts

@@ -324,5 +324,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',
 };