dsh-codinput 0.1.1 → 0.2.0

package/src/client/sideinput.ts

@@ -21,7 +21,7 @@ export interface SidebarCarryState {
 }
 
 export interface SidebarCarry {
-  /** 本次承载的令牌（同会话多 body 时，最早的持令牌者渲染编辑面）。 */
+  /** 本次承载的令牌（同会话多 body 时，可见者优先、同可见最早者渲染编辑面）。 */
   readonly token: number;
   /** 可见性/展开态变化时更新（同一 body 生命周期内）。 */
   set(state: SidebarCarryState): void;
@@ -53,11 +53,12 @@ function recompute(): void {
   for (const [token, claim] of claims) {
     const prev = next.get(claim.sessionId);
     // 同一会话多 body（分栏里复制出第二个 Codinput 标签）时取「最可见」的一份，
-    // 编辑面归属最早声明者（owner），其余 body 只出提示，杜绝双编辑面。
+    // 编辑面归属可见者（owner 随 visible 走——否则编辑面会留在看不见的标签里，
+    // 正在看的标签只剩提示），同可见时归最早声明者，杜绝双编辑面。
     if (!prev) {
       next.set(claim.sessionId, { visible: claim.visible, expanded: claim.expanded, owner: token });
     } else if (!prev.visible && claim.visible) {
-      next.set(claim.sessionId, { ...prev, visible: true, expanded: claim.expanded });
+      next.set(claim.sessionId, { visible: true, expanded: claim.expanded, owner: token });
     }
   }
   if (sameSnapshot(next)) return;
@@ -93,6 +94,11 @@ export function isSidebarInputCarried(sessionId: string | undefined): boolean {
   return sessionId !== undefined && snapshot.has(sessionId);
 }
 
+/** 当前被侧栏承载的会话 id 列表（/codinput 退出时广播关闭标签用）。 */
+export function carriedSessionIds(): string[] {
+  return [...snapshot.keys()];
+}
+
 /** 任一会话被侧栏承载（主遮蔽条目需保持挂载以执行隐藏）。 */
 export function isAnySidebarInputCarried(): boolean {
   return snapshot.size > 0;
@@ -105,14 +111,30 @@ export function sidebarCarryState(sessionId: string | undefined): SidebarCarrySt
 
 /**
  * 编辑面归属：同会话被多个 body 承载（分栏里复制出第二个 Codinput 标签）时，
- * 只有最早声明者渲染编辑面。`token === 0`（尚未声明）一律返回 true——避免
- * 首帧把还没拿到令牌的自己判成非归属者。
+ * 可见者优先，同可见归最早声明者。`token === 0`（尚未声明）一律返回 true——
+ * 避免首帧把还没拿到令牌的自己判成非归属者。
  */
 export function isSidebarCarryOwner(sessionId: string | undefined, token: number): boolean {
   if (token === 0 || sessionId === undefined) return true;
   return snapshot.get(sessionId)?.owner === token;
 }
 
+
+/** 标签关闭请求总线：/codinput 从侧栏退出时，命令侧请求 body 关掉自己的标签。 */
+const tabCloseListeners = new Set<(sessionId: string) => void>();
+
+/** 请求关闭某会话的侧栏 Codinput 标签（无 body 在听时无害）。 */
+export function requestSidebarTabClose(sessionId: string): void {
+  for (const fn of tabCloseListeners) fn(sessionId);
+}
+
+export function subscribeSidebarTabClose(fn: (sessionId: string) => void): () => void {
+  tabCloseListeners.add(fn);
+  return () => {
+    tabCloseListeners.delete(fn);
+  };
+}
+
 /** 归属订阅（body 用）：令牌变化、其他 body 挂载/卸载都会重渲染。 */
 export function useSidebarCarryOwner(sessionId: string | undefined, token: number): boolean {
   const [owner, setOwner] = useState(() => isSidebarCarryOwner(sessionId, token));
@@ -150,12 +172,16 @@ export function useSidebarInputCarried(sessionId: string | undefined): boolean {
 
 /**
  * 侧栏承载态订阅（小球用）：`carried` = 本会话输入在侧栏里，
- * `collapsed` = 侧栏已收起（承载但不可见 → 输入入口需要小球唤出）。
+ * `collapsed` = 输入面不可见（承载但侧栏已收起 → 输入入口需要小球唤出）。
+ * 浮动面板 visible=true——输入就在眼前，即使侧栏恰好收起也不出球。
  */
 export function useSidebarCarry(sessionId: string | undefined): { carried: boolean; collapsed: boolean } {
   const read = (): { carried: boolean; collapsed: boolean } => {
     const state = sidebarCarryState(sessionId);
-    return { carried: state !== undefined, collapsed: state !== undefined && state.expanded === false };
+    return {
+      carried: state !== undefined,
+      collapsed: state !== undefined && state.expanded === false && state.visible === false,
+    };
   };
   const [value, setValue] = useState(read);
   useEffect(() => {

package/src/client/stats.ts

@@ -1,8 +1,8 @@
 /**
- * 数据行数据源（卡片下方）：会话统计投影探测 + 归一化。
- * 官方投影键（实测确认）：tokenUsage（cacheRead/cacheWrite/output/
- * uncachedInput）、contextPressure（contextWindow/pressureTokens/
- * projectedTokens）；轮/步按别名键探测。tok/s 为输出令牌的实时采样速率。
+ * 数据行数据源（卡片下方）：逐值复刻官方 StatsPills 的取数与计算——
+ * `sessionStats` 投影优先（turns/steps/llm/tool/ttft/decode 全量），缺席时
+ * 从 chat legacy 节点按官方 deriveStats 派生；tok/s = decodeTokens ÷
+ * decodeMs（会话级持久值，非流式采样），缓存命中/用量分桶同官方公式。
  * 注意：useProjection 是真实 hook，键探测必须是固定次数的顶层调用。
  */
 
@@ -19,18 +19,24 @@ const PROJECTION_KEYS = [
 export interface SessionStats {
   turns?: number;
   steps?: number;
-  /** 实时输出速率（tok/s），运行期间采样更新，空闲时保留最后一次。 */
+  /** 输出速度（tok/s）= decodeTokens ÷ (decodeMs/1000)；decodeMs>0 才有。 */
   tokensPerSecond?: number;
   totalTokens?: number;
-  cacheHitPct?: number;
+  /** 官方 formatCacheHitPercent 文本（"88"/"99.9"/"100"）。 */
+  cacheHitText?: string;
   /** 上下文占用百分比（projectedTokens ?? pressureTokens，除以 contextWindow）。 */
   contextPct?: number;
-  /** 会话统计面板：模型用时（流式活跃累计毫秒）与首 token 延迟。 */
-  modelMs?: number;
+  /** 会话统计面板：模型用时 / 工具调用用时 / TTFT 均值（官方格式化）。 */
+  llmMs?: number;
+  toolMs?: number;
   ttftMs?: number;
-  /** Token 用量面板：原始分段。 */
+  ttftSteps?: number;
+  decodeMs?: number;
+  decodeTokens?: number;
+  /** Token 用量面板：原始分桶。 */
   uncachedInputTokens?: number;
   cacheReadTokens?: number;
+  cacheWriteTokens?: number;
   outputTokens?: number;
 }
 
@@ -47,6 +53,18 @@ interface ContextPressure {
   projectedTokens?: number;
 }
 
+/** 官方 sessionStats 投影/deriveStats 的输出形状。 */
+interface ChatStats {
+  turns?: number;
+  steps?: number;
+  llmMs?: number;
+  toolMs?: number;
+  ttftMs?: number;
+  ttftSteps?: number;
+  decodeMs?: number;
+  decodeTokens?: number;
+}
+
 function num(value: unknown): number | undefined {
   return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
 }
@@ -74,47 +92,105 @@ function readContextPressure(raw: unknown): ContextPressure | undefined {
   return cp.contextWindow !== undefined && cp.pressureTokens !== undefined ? cp : undefined;
 }
 
-function readTurnsSteps(raw: unknown): { turns?: number; steps?: number } {
-  if (!raw || typeof raw !== 'object') return {};
+function readSessionStats(raw: unknown): ChatStats | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
   const r = raw as Record<string, unknown>;
-  const turns = num(r['turns']) ?? num(r['turnCount']);
-  const steps = num(r['steps']) ?? num(r['stepCount']);
-  return { turns, steps };
+  const stats: ChatStats = {
+    turns: num(r['turns']),
+    steps: num(r['steps']),
+    llmMs: num(r['llmMs']),
+    toolMs: num(r['toolMs']),
+    ttftMs: num(r['ttftMs']),
+    ttftSteps: num(r['ttftSteps']),
+    decodeMs: num(r['decodeMs']),
+    decodeTokens: num(r['decodeTokens']),
+  };
+  return Object.values(stats).some((v) => v !== undefined) ? stats : undefined;
 }
 
-/** 实时速率与用时采样：模块级（按 sessionId 记录上次输出令牌数与时刻）。 */
-const rateSamples = new Map<string, { tokens: number; time: number; rate?: number; modelMs: number }>();
-
-export function sampleTokensPerSecond(
-  sessionId: string | undefined,
-  outputTokens: number | undefined,
-): { rate?: number; modelMs?: number; ttftMs?: number } {
-  if (!sessionId || outputTokens === undefined) return {};
-  const now = Date.now();
-  const last = rateSamples.get(sessionId);
-  let rate: number | undefined = last?.rate;
-  let modelMs = last?.modelMs ?? 0;
-  let ttftMs: number | undefined;
-  if (!last) {
-    // 首个样本：无从计算速率；当前值即初始输出。
-    rateSamples.set(sessionId, { tokens: outputTokens, time: now, modelMs: 0 });
-    return {};
+/**
+ * 官方 deriveStats 逐行复刻：assistant 节点计轮/步并带 timing（stepStartTime
+ * →firstTokenTime→completedTime）与 usage.outputTokens；tool-result 以
+ * callTime 起算工具用时。
+ */
+export function deriveChatStats(nodes: unknown): ChatStats | undefined {
+  if (!Array.isArray(nodes)) return undefined;
+  const turns = new Set<unknown>();
+  let steps = 0;
+  let llmMs = 0;
+  let toolMs = 0;
+  let ttftMs = 0;
+  let ttftSteps = 0;
+  let decodeMs = 0;
+  let decodeTokens = 0;
+  for (const raw of nodes) {
+    if (!raw || typeof raw !== 'object') continue;
+    const node = raw as Record<string, unknown>;
+    if (node['kind'] === 'tool-result') {
+      const callTime = num(node['callTime']);
+      const time = num(node['time']);
+      if (callTime !== undefined && time !== undefined) toolMs += Math.max(0, time - callTime);
+      continue;
+    }
+    if (node['kind'] !== 'assistant') continue;
+    turns.add(node['turn']);
+    steps += 1;
+    const timing = node['timing'] as Record<string, unknown> | undefined;
+    const stepStartTime = num(timing?.['stepStartTime']);
+    const firstTokenTime = num(timing?.['firstTokenTime']);
+    const completedTime = num(timing?.['completedTime']);
+    if (stepStartTime !== undefined && completedTime !== undefined) {
+      llmMs += Math.max(0, completedTime - stepStartTime);
+    }
+    if (stepStartTime !== undefined && firstTokenTime !== undefined) {
+      ttftMs += Math.max(0, firstTokenTime - stepStartTime);
+      ttftSteps += 1;
+    }
+    if (firstTokenTime !== undefined && completedTime !== undefined) {
+      decodeMs += Math.max(0, completedTime - firstTokenTime);
+    }
+    const usage = node['usage'] as Record<string, unknown> | undefined;
+    const out = num(usage?.['outputTokens']);
+    if (out !== undefined && out >= 0) decodeTokens += out;
   }
-  const dt = now - last.time;
-  if (outputTokens > last.tokens && dt > 0) {
-    rate = ((outputTokens - last.tokens) / dt) * 1000;
-    modelMs += dt;
-    // 空闲较久后恢复增长：这段等待近似 TTFT。
-    if (dt > 600) ttftMs = dt;
+  if (nodes.length === 0) return undefined;
+  return { turns: turns.size, steps, llmMs, toolMs, ttftMs, ttftSteps, decodeMs, decodeTokens };
+}
+
+/** 官方 formatTokensPerSecond：≥10 取整，<10 保留 1 位小数。 */
+export function formatTokensPerSecond(tps: number): string {
+  const clamped = Math.max(0, tps);
+  return clamped >= 10 ? String(Math.round(clamped)) : String(Math.round(clamped * 10) / 10);
+}
+
+/**
+ * 官方 formatCacheHitPercent 语义：整除 100 → "100"；整数舍入 <100 → 整数；
+ * 否则递增小数位直到舍入仍 <100（99.9 / 99.99 …）。
+ */
+export function formatCacheHitPercent(cacheReadTokens: number, promptTokens: number): string | null {
+  if (promptTokens <= 0) return null;
+  if (cacheReadTokens >= promptTokens) return '100';
+  for (let places = 0; places < 20; places++) {
+    const factor = 10 ** places;
+    const rounded = Math.round((cacheReadTokens / promptTokens) * 100 * factor) / factor;
+    if (rounded < 100) return places === 0 ? String(rounded) : rounded.toFixed(places);
   }
-  rateSamples.set(sessionId, { tokens: outputTokens, time: now, rate, modelMs });
-  return { rate, modelMs, ttftMs };
+  return '99.99';
+}
+
+/** 官方 formatDuration：<60s 一位小数秒，否则 分+秒。 */
+export function formatDuration(ms: number): string {
+  const s = ms / 1000;
+  if (s < 60) return `${Math.round(s * 10) / 10}s`;
+  const whole = Math.round(s);
+  return `${Math.floor(whole / 60)}分${whole % 60}秒`;
 }
 
 /** 每个键一个固定位置的 hook 调用——跨渲染的调用次数与顺序恒定。 */
 export function useSessionStats(
   useProjection: UseProjection | undefined,
   sessionId: string | undefined,
+  chatNodes: unknown,
 ): SessionStats | null {
   const k0 = useProjection ? useProjection(PROJECTION_KEYS[0]) : undefined;
   const k1 = useProjection ? useProjection(PROJECTION_KEYS[1]) : undefined;
@@ -124,14 +200,25 @@ export function useSessionStats(
 
   const usage = readTokenUsage(k0);
   const pressure = readContextPressure(k1);
-  const { turns, steps } = readTurnsSteps(k2) ?? {};
-  const alt = readTurnsSteps(k3) ?? {};
-  const alt2 = readTurnsSteps(k4) ?? {};
+  // 官方：sessionStats 投影优先，缺席从 chat legacy 节点派生。
+  const chat = readSessionStats(k4) ?? deriveChatStats(chatNodes) ?? readTurnsSteps(k2, k3);
 
   const stats: SessionStats = {};
-  if (turns !== undefined || steps !== undefined) Object.assign(stats, { turns, steps });
-  else if (alt.turns !== undefined || alt.steps !== undefined) Object.assign(stats, alt);
-  else if (alt2.turns !== undefined || alt2.steps !== undefined) Object.assign(stats, alt2);
+  if (chat) {
+    if (chat.turns !== undefined || chat.steps !== undefined) {
+      stats.turns = chat.turns;
+      stats.steps = chat.steps;
+    }
+    if (chat.llmMs !== undefined) stats.llmMs = chat.llmMs;
+    if (chat.toolMs !== undefined) stats.toolMs = chat.toolMs;
+    if (chat.ttftMs !== undefined) stats.ttftMs = chat.ttftMs;
+    if (chat.ttftSteps !== undefined) stats.ttftSteps = chat.ttftSteps;
+    if (chat.decodeMs !== undefined) stats.decodeMs = chat.decodeMs;
+    if (chat.decodeTokens !== undefined) stats.decodeTokens = chat.decodeTokens;
+    if ((chat.decodeMs ?? 0) > 0) {
+      stats.tokensPerSecond = (chat.decodeTokens ?? 0) / (chat.decodeMs! / 1000);
+    }
+  }
   if (usage) {
     const total =
       (usage.cacheReadTokens ?? 0) +
@@ -142,14 +229,15 @@ export function useSessionStats(
       stats.totalTokens = total;
       stats.uncachedInputTokens = usage.uncachedInputTokens;
       stats.cacheReadTokens = usage.cacheReadTokens;
+      stats.cacheWriteTokens = usage.cacheWriteTokens;
       stats.outputTokens = usage.outputTokens;
     }
+    // 官方：分母 = 三段输入桶（缓存读+写+未缓存输入）。
     const inputTotal = (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0) + (usage.uncachedInputTokens ?? 0);
-    if (inputTotal > 0) stats.cacheHitPct = ((usage.cacheReadTokens ?? 0) / inputTotal) * 100;
-    const sample = sampleTokensPerSecond(sessionId, usage.outputTokens);
-    if (sample.rate !== undefined && sample.rate > 0) stats.tokensPerSecond = sample.rate;
-    if (sample.modelMs !== undefined && sample.modelMs > 0) stats.modelMs = sample.modelMs;
-    if (sample.ttftMs !== undefined && sample.ttftMs > 0) stats.ttftMs = sample.ttftMs;
+    if (inputTotal > 0) {
+      const text = formatCacheHitPercent(usage.cacheReadTokens ?? 0, inputTotal);
+      if (text !== null) stats.cacheHitText = text;
+    }
   }
   const window_ = pressure?.contextWindow;
   // 官方 contextOccupancy：优先 projectedTokens。
@@ -157,11 +245,26 @@ export function useSessionStats(
   if (window_ !== undefined && window_ > 0 && used !== undefined) {
     stats.contextPct = (used / window_) * 100;
   }
+  void sessionId;
   return Object.keys(stats).length > 0 ? stats : null;
 }
 
+function readTurnsSteps(k2: unknown, k3: unknown): ChatStats | undefined {
+  const pick = (raw: unknown): ChatStats | undefined => {
+    if (!raw || typeof raw !== 'object') return undefined;
+    const r = raw as Record<string, unknown>;
+    const turns = num(r['turns']) ?? num(r['turnCount']);
+    const steps = num(r['steps']) ?? num(r['stepCount']);
+    return turns !== undefined || steps !== undefined ? { turns, steps } : undefined;
+  };
+  return pick(k2) ?? pick(k3);
+}
+
+/** 官方 formatTokens：<1e3 原值，否则 K/M（≥100 取整、<100 一位小数）。 */
 export function formatTokens(tokens: number): string {
-  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(tokens % 1_000_000 === 0 ? 0 : 1)}M tok`;
-  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(tokens % 1_000 === 0 ? 0 : 1)}K tok`;
-  return `${tokens} tok`;
+  const scaled = (candidate: number): string =>
+    candidate >= 100 ? String(Math.round(candidate)) : String(Math.round(candidate * 10) / 10);
+  if (tokens < 1e3) return `${tokens} tok`;
+  if (tokens < 1e6) return `${scaled(tokens / 1e3)}K tok`;
+  return `${scaled(tokens / 1e6)}M tok`;
 }

package/src/client/styles.ts

@@ -21,8 +21,13 @@ const CSS = `
    会话态（无包裹约束）不再被拉满，左右居中；拖边调节后由内联 max-width 接管。 */
 .dci-card { box-sizing: border-box; width: 100%; max-width: var(--dsh-composer-card-max-width, 760px); margin-inline: auto;
   background: var(--dsw-specific-input-major, color-mix(in srgb, currentColor 4%, transparent));
-  box-shadow: var(--dsw-elevation-soft, none); font-size: 14px; line-height: 24px;
-  border: 0; border-radius: 22px; flex-direction: column; gap: 0; padding-top: 4px; display: flex; position: relative; min-width: 0; }
+  box-shadow: var(--dsw-elevation-soft, none); font-size: var(--dsh-content-font-size, 14px);
+  line-height: calc(24px + var(--dsh-content-font-delta, 0px));
+  border: 0; border-radius: var(--dsw-radius-panel, 22px); flex-direction: column; gap: 0; padding-top: 4px; display: flex; position: relative; min-width: 0; }
+/* 主模式 surface 复刻官方 composer root：侧向 clearance 内缩 + 底部 4px，
+   卡片与数据行由数据行自身 padding-top 定距（官方 root 无 gap，dock 上边距 4px）。
+   side/float 形态自带铺满布局，不参与。 */
+.dci-surface:not([data-side]):not([data-float]) { padding: 0 var(--dsh-composer-side-clearance, 0px) 4px; align-items: center; gap: 0; }
 /* 卡片边缘调节把手：左右调宽、上下调高（对称灵敏度），悬停显形。 */
 .dci-rip { position: absolute; z-index: 60; touch-action: none; }
 .dci-rip[data-axis="y"] { left: 12px; right: 12px; height: 9px; cursor: ns-resize; }
@@ -388,10 +393,25 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
   background: var(--dsw-alias-label-primary-foreground, #fff); transition: transform 120ms ease; }
 .dci-switch[aria-checked="true"]::after { transform: translateX(16px); }
 
-/* ===== 数据行（官方 bOPqQW 复刻：居中双胶囊）===== */
-.dci-stat-root { max-width: var(--dsh-chat-content-width, 100%); box-sizing: border-box; width: 100%;
-  padding: 4px calc(var(--dsh-composer-side-clearance, 0px) + 16px) 0; font-size: 13px; line-height: 20px;
-  justify-content: center; gap: 12px; margin: 0 auto; display: flex; }
+
+/* ===== 原图预览（官方 primitives ImageLightbox 逐值复刻）===== */
+.dci-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 40px; }
+.dci-lightbox-mask { position: absolute; inset: 0; background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, 0.55));
+  backdrop-filter: var(--dsw-mask-blur, blur(4px)); }
+.dci-lightbox-image { position: relative; max-width: min(100%, 1600px); max-height: calc(100vh - 80px);
+  object-fit: contain; border-radius: var(--dsw-radius-lg, 16px); background: var(--dsw-specific-input-major);
+  border: 0; box-shadow: var(--dsw-elevation-prominent, 0 10px 34px rgba(0, 0, 0, 0.35)); }
+.dci-lightbox-close { position: fixed; top: 20px; right: 20px; z-index: 1; display: grid; place-items: center;
+  width: 36px; height: 36px; border: 0.5px solid var(--dsw-alias-border-l2-darkmode-thin, var(--dsw-alias-border-l2, transparent));
+  border-radius: 999px; corner-shape: round; background: var(--dsw-specific-input-major);
+  color: var(--dsw-alias-label-primary, currentColor); cursor: pointer; }
+.dci-lightbox-close:focus-visible { outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary, currentColor)); outline-offset: 3px; }
+
+/* ===== 数据行（官方 uV2eYG_dock 复刻：root 内居中、无横向 padding）===== */
+.dci-stat-root { max-width: 100%; box-sizing: border-box; width: 100%;
+  padding: 4px 0 0; font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
+  justify-content: center; gap: 12px; display: flex; }
 .dci-stat-anchor { min-width: 0; display: inline-flex; position: relative; }
 
 /* 数据行详情面板（官方 bRhRbq 复刻：锚点上方弹出） */
@@ -411,7 +431,7 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
   gap: 6px 16px; margin: 0; display: grid; }
 .dci-stat-details dt, .dci-stat-details dd { min-width: 0; margin: 0; }
 .dci-stat-details dd { color: var(--dsw-alias-label-secondary, inherit); font-variant-numeric: tabular-nums; text-align: right; }
-.dci-stat-pill { box-sizing: border-box; max-width: 100%; color: var(--dsw-alias-label-tertiary, currentColor);
+.dci-stat-pill { font: inherit; box-sizing: border-box; max-width: 100%; color: var(--dsw-alias-label-tertiary, currentColor);
   white-space: nowrap; background: transparent; border: none; border-radius: 24px; align-items: center; gap: 6px;
   padding: 1px 8px; display: inline-flex; cursor: pointer; font-variant-numeric: tabular-nums; }
 .dci-stat-pill svg { flex: none; width: 14px; height: 14px; }