@morlay/ui-conversation-message-actions 0.0.17 → 0.0.19-alpha.0

package/src/client/chat-node/MessageItem.tsx

@@ -1,18 +1,24 @@
 // MessageItem: the user / admitted-steering chat node renderer.
-// 新版 `dsh-client-ui-chat` 已内置全部 chat-node 渲染器；本项目仅**替换**
+// 官方 `@deepseek-ai/dsh-client-ui-chat` 内置全部 chat-node 渲染器；本项目仅**替换**
 // `user`/`steering` 两个 key（keyed slot reuse 即替换），在消息动作行上提供
-// edit / retry（新版无此能力）。其余 key 由新版内置渲染器处理。
+// edit / retry（上游无此能力）。其余 key 由官方内置渲染器处理。
 
-import { memo, useState } from "react";
+import {
+  markdownLabels,
+  ReferenceMarkdown,
+  styling,
+  type ReferenceActions,
+} from "@morlay/dsh-client-ui-primitives/client";
+import { memo, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import type { InjectFace } from "@deepseek-ai/dsh-client-ui-slots";
 import { Button, Modal } from "@deepseek-ai/dsh-client-ui-primitives";
 import type { UserMessageNode } from "@deepseek-ai/dsh-client-ui-chat/client";
 import { JsonBlock } from "@deepseek-ai/dsh-client-ui-primitives";
 import type { ChatNodeViewProps, ChatViewSlotProps } from "@deepseek-ai/dsh-client-ui-chat/client";
-import type { RenderMessageImages } from "@deepseek-ai/dsh-client-ui-conversation/client";
+import type { RenderMessageImages } from "@morlay/dsh-client-ui-conversation/client";
 import { MessageIconActions } from "./MessageIconActions.tsx";
-import css from "./MessageItem.module.css";
+import { styles } from "./MessageItem.styles.ts";
 import type { EditableMessageBlock } from "../../shared.ts";
 import type { SessionEditorFace } from "../controller.ts";
 
@@ -33,56 +39,37 @@ function contentParts(content: readonly unknown[]): {
       images.push({ attachment: (b as UserImage).attachment });
     } else rest.push(block);
   }
-  return { text: texts.join(""), images, rest };
-}
-
-function projectUserText(text: string): ReactNode {
-  const re = /(^|\s)([/@][\w-]+)(?=\s|$)/g;
-  const parts: ReactNode[] = [];
-  let cursor = 0;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(text)) !== null) {
-    const tokenStart = m.index + (m[1]?.length ?? 0);
-    const label = m[2] ?? "";
-    if (tokenStart > cursor) parts.push(<span key={cursor}>{text.slice(cursor, tokenStart)}</span>);
-    parts.push(
-      <span
-        key={tokenStart}
-        className={css.refChip}
-        data-ref-chip={label.startsWith("@") ? "subagent" : "skill"}
-      >
-        {label}
-      </span>,
-    );
-    cursor = tokenStart + label.length;
-  }
-  if (parts.length === 0) return <span>{text}</span>;
-  if (cursor < text.length) parts.push(<span key={cursor}>{text.slice(cursor)}</span>);
-  return <>{parts}</>;
+  // 多块消息按空行拼回 raw markdown（新式提交就是单块原文）。
+  return { text: texts.join("\n\n"), images, rest };
 }
 
 function UserStyleBubble({
   content,
   renderMessageImages,
   actions,
+  references,
   t,
 }: {
   content: readonly unknown[];
   renderMessageImages: RenderMessageImages;
 
   actions?: (text: string) => ReactNode;
+  // 引用 chip 的点击目标（owner props；缺省时 chip 照常渲染但点击无效果）。
+  references?: ReferenceActions | undefined;
   t: ChatViewSlotProps["t"];
 }): ReactNode {
   const { text, images, rest } = contentParts(content);
   const truncated = (total: number): string => t("json.truncated", { total });
+  // labels 按 locale revision 稳定（官方 MarkdownText 在它上面 memo 渲染缓存）。
+  const labels = useMemo(() => markdownLabels(t), [t]);
   const showBubble = text !== "" || rest.length > 0;
   return (
-    <div className={css.userRow} data-time-hover-root>
-      <div className={css.userStack}>
+    <div {...styling.props(styles.userRow)} data-time-hover-root>
+      <div {...styling.props(styles.userStack)}>
         {renderMessageImages({ images, align: "end" })}
         {showBubble && (
-          <div className={css.bubble}>
-            {projectUserText(text)}
+          <div {...styling.props(styles.bubble)}>
+            <ReferenceMarkdown text={text} labels={labels} actions={references} />
             {rest.map((block, i) => (
               <JsonBlock
                 key={i}
@@ -103,9 +90,15 @@ export const UserMessageNodeView = memo(function UserMessageNodeView({
   node,
   renderMessageImages,
   t,
+  openFile,
+  openSkill,
   recall,
   retry,
-}: ChatNodeViewProps<"user" | "steering"> & InjectFace<SessionEditorFace>) {
+}: ChatNodeViewProps<"user" | "steering"> & {
+  // keyed 渲染器由 owner props 展开调用：引用 chip 的点击目标从这里来。
+  openFile: (path: string) => void;
+  openSkill: (name: string) => void;
+} & InjectFace<SessionEditorFace>) {
   const data = node.data;
   const [confirmingRecall, setConfirmingRecall] = useState<EditableMessageBlock | null>(null);
   const [confirmingRetry, setConfirmingRetry] = useState(false);
@@ -153,7 +146,7 @@ export const UserMessageNodeView = memo(function UserMessageNodeView({
           closeLabel="关闭"
           description="将撤回该消息及其之后的对话内容到输入框，请修改后重新发送。"
           footer={
-            <div className={css.confirmActions}>
+            <div {...styling.props(styles.confirmActions)}>
               <Button variant="outline" onClick={() => setConfirmingRecall(null)}>
                 取消
               </Button>
@@ -179,7 +172,7 @@ export const UserMessageNodeView = memo(function UserMessageNodeView({
           closeLabel="关闭"
           description={`将重新生成第 ${turn} 轮的回复，并抛弃该回合之后的内容。`}
           footer={
-            <div className={css.confirmActions}>
+            <div {...styling.props(styles.confirmActions)}>
               <Button variant="outline" onClick={() => setConfirmingRetry(false)}>
                 取消
               </Button>
@@ -199,13 +192,13 @@ export const UserMessageNodeView = memo(function UserMessageNodeView({
       <UserStyleBubble
         content={data.content}
         renderMessageImages={renderMessageImages}
+        references={{ openFile, openSkill }}
         t={t}
         actions={(text) => (
           <MessageIconActions
             text={text}
             time={data.time}
             clock="start"
-            className={css.actions}
             t={t}
             onEdit={onEdit}
             onRetry={onRetry}

package/src/client/chat-node/message-chrome.ts

@@ -1,5 +1,3 @@
-// Shared time-label helpers for user/assistant IconActions rows.
-
 import type { Translate } from "@deepseek-ai/dsh-client-ui-slots";
 
 export type ClockTranslate = Translate<"clock.md" | "clock.ymd">;

package/src/client/chat-node/register.ts

@@ -1,7 +1,7 @@
 import type { Context } from "@deepseek-ai/cordis";
 import type { SessionId } from "@deepseek-ai/dsh-session";
-import "@deepseek-ai/dsh-client-ui-conversation/client";
-import "@deepseek-ai/dsh-client-ui-chat/client";
+import "@morlay/dsh-client-ui-conversation/client";
+import type {} from "@deepseek-ai/dsh-client-ui-chat/client";
 import type {} from "@deepseek-ai/dsh-client-ui-renderer/client";
 import { UserMessageNodeView } from "./MessageItem.tsx";
 import type { SessionEditorController } from "../controller.ts";
@@ -21,8 +21,7 @@ export function registerChatNodeRenderers(
           name: "conversation.chat.node",
           key,
           locale: NS,
-          // keyed slot 同 key 同 priority 会抛错；priority -1 让本项目
-          // 渲染器以最低优先级渲染，shadow 上游默认（priority 0）注册。
+
           priority: -1,
           inject: injectFace,
         } as never,

package/src/client/chat-node/use-calendar-day.ts

@@ -1,7 +1,3 @@
-// Component-local calendar-day tick: memoized message rows keep stable props
-// across midnight, so the IconActions clock needs a local day seat that
-// re-fires at the next local midnight without reaching for framework hooks.
-
 import { useEffect, useState } from "react";
 import { msUntilNextLocalMidnight, startOfLocalDay } from "./message-chrome.ts";
 

package/src/client/composer-stats/StatsPills.styles.ts

@@ -0,0 +1,57 @@
+import type { CSSProps } from "@morlay/dsh-client-ui-primitives/client";
+
+export const styles = {
+  // 上游 `StatsPills.module.css` 的 `.root` 原样：统计行在 composer dock 里是 shrink-wrap 的
+  // 一个条目，与同为 dock 子项的上下文占用按钮并排——行内间距由 dock 的 `gap: 12px` 统一，
+  // 统计自己不再撑满整行（撑满会把占用按钮挤到行尾，两块之间的间距就跟行内间距对不上）。
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "12px",
+    minWidth: "0",
+    maxWidth: "100%",
+    boxSizing: "border-box",
+    fontSize: "var(--dsh-content-font-size-secondary, 13px)",
+    lineHeight: "calc(20px + var(--dsh-content-font-delta-secondary, 0px))",
+  },
+  anchor: {
+    display: "inline-flex",
+    minWidth: "0",
+  },
+  pill: {
+    cursor: "pointer",
+
+    "&:hover, &[aria-expanded='true']": {
+      background: "var(--dsw-alias-interactive-bg-hover)",
+      color: "var(--dsw-alias-label-secondary)",
+    },
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    boxSizing: "border-box",
+    maxWidth: "100%",
+    padding: "1px 8px",
+    border: "none",
+    borderRadius: "24px",
+    background: "transparent",
+    color: "var(--dsw-alias-label-tertiary)",
+    font: "inherit",
+    fontVariantNumeric: "tabular-nums",
+    lineHeight: "inherit",
+    whiteSpace: "nowrap",
+    "& svg": {
+      width: "14px",
+      height: "14px",
+      flex: "none",
+    },
+  },
+  label: {
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  sep: {
+    color: "var(--dsw-alias-separator-primary)",
+    margin: "0 6px",
+  },
+} satisfies Record<string, CSSProps>;

package/src/client/composer-stats/StatsPills.tsx

@@ -0,0 +1,384 @@
+// Session stats under the composer, split into two icon pills: a gauge pill
+// (turn/step counts + output speed) opening the time-and-speed dialog, and a
+// database pill (total tokens + cache hit) opening the token-usage dialog.
+// Settled-node identity prevents stream-delta updates from rerendering the row.
+// Carried from upstream ui-chat (composer.dock id 'stats', priority -1 shadows it)
+// so the fixed token-format (out-of-range cacheRead no longer hangs) stays wired;
+// data-composer-stats pairs with ui-conversation's InputBar `:has()` bottom clearance.
+
+import { memo, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { IconDatabaseOutline16, IconGaugeOutline16 } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { UseProjection } from "@deepseek-ai/dsh-api-session-controller/client";
+import type { SnapshotSelectorHook } from "@deepseek-ai/dsh-client-ui-slots";
+// Type-only: merges the sessionStats key into SessionProjectionMap for useProjection.
+import type {} from "@deepseek-ai/dsh-session-stats/client";
+import type { TokenUsageProjection } from "@deepseek-ai/dsh-token-meter/client";
+import type { ChatSnapshot, ChatViewSlotProps } from "@deepseek-ai/dsh-client-ui-chat/client";
+import { formatTokensPerSecond } from "../chat-node/message-chrome.ts";
+import { assistantStepReading } from "./turn-reading.ts";
+import { formatCacheHitPercent, formatExactTokens, formatTokens } from "./token-format.ts";
+import { MEASURE_STYLE, useStatDialog } from "./stat-dialog.ts";
+import { styling } from "@morlay/dsh-client-ui-primitives/client";
+import { styles } from "./StatsPills.styles.ts";
+import { styles as dialogStyles } from "./stat-dialog.styles.ts";
+
+interface WindowStats {
+  turns: number;
+  steps: number;
+  /** Summed request wall time (step/start → assistant/message); 0 when no node carries timing. */
+  llmMs: number;
+  /** Summed tool wall time (tool/call → tool/result); 0 when no pair is in-window. */
+  toolMs: number;
+  /** Summed first-token latency over `ttftSteps`; 0 when no step records it. */
+  ttftMs: number;
+  /** Steps carrying a recorded TTFT. */
+  ttftSteps: number;
+  /** Summed decode wall time over steps that also report output tokens. */
+  decodeMs: number;
+  /** Summed output tokens over the same decode-timed steps. */
+  decodeTokens: number;
+}
+
+/**
+ * Fold assistant and tool-result nodes into window-scoped display totals —
+ * the FALLBACK for assemblies without the `sessionStats` projection.
+ *
+ * Every displayed figure rides that durable whole-log projection (and token
+ * accounting rides `tokenUsage`) because the window is paged and compaction
+ * rewrites it; this fold answers "what is on screen" only when no projection
+ * value is served. Its field names deliberately mirror the projection's so
+ * the two swap wholesale.
+ * @param nodes - snapshot nodes.
+ * @returns fallback counts and summed wall times.
+ */
+export function deriveStats(nodes: ChatSnapshot["legacy"]["nodes"]): WindowStats {
+  const turns = new Set<number>();
+  let steps = 0;
+  let llmMs = 0;
+  let toolMs = 0;
+  let ttftMs = 0;
+  let ttftSteps = 0;
+  let decodeMs = 0;
+  let decodeTokens = 0;
+  for (const node of nodes) {
+    if (node.kind === "tool-result") {
+      if (node.callTime !== null) toolMs += Math.max(0, node.time - node.callTime);
+      continue;
+    }
+    if (node.kind !== "assistant") continue;
+    turns.add(node.turn);
+    steps += 1;
+    if (node.timing !== undefined && node.timing.stepStartTime !== null) {
+      llmMs += Math.max(0, node.timing.completedTime - node.timing.stepStartTime);
+    }
+    const reading = assistantStepReading(node);
+    if (reading.ttftMs !== null) {
+      ttftMs += reading.ttftMs;
+      ttftSteps += 1;
+    }
+    if (reading.decodeMs !== null && reading.outputTokens !== null) {
+      decodeMs += reading.decodeMs;
+      decodeTokens += reading.outputTokens;
+    }
+  }
+  return { turns: turns.size, steps, llmMs, toolMs, ttftMs, ttftSteps, decodeMs, decodeTokens };
+}
+
+/**
+ * Compact duration: 45.2s under a minute, 2m42s from there on.
+ * @param ms - duration in milliseconds.
+ * @returns display string.
+ */
+export function formatDuration(ms: number, t: ChatViewSlotProps["t"]): string {
+  const s = ms / 1_000;
+  if (s < 60) return t("duration.compactSeconds", { seconds: Math.round(s * 10) / 10 });
+  const whole = Math.round(s);
+  return t("duration.compactMinutes", {
+    minutes: Math.floor(whole / 60),
+    seconds: whole % 60,
+  });
+}
+
+/**
+ * Display-ready cache-hit share of prompt-side input over the whole durable log.
+ * @param usage - the session's token-usage projection value.
+ * @returns integer text when integer rounding stays below 100, otherwise the
+ * minimum decimal precision that still rounds below 100; a full hit returns
+ * 100, and no billed input returns null.
+ */
+export function cacheHitPercent(usage: TokenUsageProjection): string | null {
+  const denominator = billedInputTokens(usage);
+  return formatCacheHitPercent(usage.cacheReadTokens, denominator);
+}
+
+/**
+ * Sum the three disjoint prompt-side billing buckets.
+ * @param usage - the session's token-usage projection value.
+ * @returns billed input tokens.
+ */
+export function billedInputTokens(usage: TokenUsageProjection): number {
+  return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
+}
+
+/** Props: the conversation-snapshot selector plus the projection read seat. */
+export interface StatsPillsProps {
+  useChat: SnapshotSelectorHook<ChatSnapshot>;
+  useProjection: UseProjection;
+  /** The owning dock's locale seat. */
+  t: ChatViewSlotProps["t"];
+}
+
+function exactCount(value: number, t: ChatViewSlotProps["t"]): string {
+  return t("message.turnUsage.count", { count: formatExactTokens(value, t) });
+}
+
+/** External open state one pill's dialog reads and writes (the row's exclusive slot). */
+type PillDialog = Pick<ReturnType<typeof useStatDialog>, "open" | "setOpen">;
+
+function TimePill({
+  stats,
+  t,
+  dialog,
+}: {
+  stats: WindowStats;
+  t: ChatViewSlotProps["t"];
+  dialog: PillDialog;
+}) {
+  const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog);
+  const counts = t("stats.counts", { turns: stats.turns, steps: stats.steps });
+  const tps =
+    stats.decodeMs > 0
+      ? t("message.tokensPerSecond", {
+          tps: formatTokensPerSecond(stats.decodeTokens / (stats.decodeMs / 1_000)),
+        })
+      : null;
+  const label = (
+    <span {...styling.props(styles.label)}>
+      {counts}
+      {tps !== null && (
+        <>
+          <span {...styling.props(styles.sep)} aria-hidden>
+            ·
+          </span>
+          {tps}
+        </>
+      )}
+    </span>
+  );
+  // A window without one timed figure has no dialog rows to show, so the pill
+  // stays a plain reading instead of a button opening an empty dialog.
+  if (stats.llmMs <= 0 && stats.toolMs <= 0 && stats.ttftSteps <= 0 && stats.decodeMs <= 0) {
+    return (
+      <span {...styling.props(styles.anchor)}>
+        <span {...styling.props(styles.pill)}>
+          <IconGaugeOutline16 />
+          {label}
+        </span>
+      </span>
+    );
+  }
+  return (
+    <span ref={rootRef} {...styling.props(styles.anchor)}>
+      <button
+        type="button"
+        {...styling.props(styles.pill)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={tps === null ? counts : `${counts} · ${tps}`}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <IconGaugeOutline16 />
+        {label}
+      </button>
+      {open &&
+        createPortal(
+          <div
+            ref={panelRef}
+            {...styling.props(dialogStyles.panel)}
+            role="dialog"
+            aria-label={t("stats.dialog.title")}
+            style={pos ?? MEASURE_STYLE}
+          >
+            <div {...styling.props(dialogStyles.title)}>
+              <span {...styling.props(dialogStyles.titleLabel)}>
+                <IconGaugeOutline16 />
+                {t("stats.dialog.title")}
+              </span>
+            </div>
+            <div {...styling.props(dialogStyles.titleRule)} aria-hidden />
+            <dl {...styling.props(dialogStyles.details)} data-session-stats-details>
+              {stats.llmMs > 0 && (
+                <>
+                  <dt>{t("stats.dialog.llmTime")}</dt>
+                  <dd>{formatDuration(stats.llmMs, t)}</dd>
+                </>
+              )}
+              {stats.toolMs > 0 && (
+                <>
+                  <dt>{t("stats.dialog.toolTime")}</dt>
+                  <dd>{formatDuration(stats.toolMs, t)}</dd>
+                </>
+              )}
+              {stats.ttftSteps > 0 && (
+                <>
+                  <dt>{t("stats.dialog.ttft")}</dt>
+                  <dd>{formatDuration(stats.ttftMs / stats.ttftSteps, t)}</dd>
+                </>
+              )}
+              {stats.decodeMs > 0 && (
+                <>
+                  <dt>{t("stats.dialog.speed")}</dt>
+                  <dd>
+                    {t("message.tokensPerSecond", {
+                      tps: formatTokensPerSecond(stats.decodeTokens / (stats.decodeMs / 1_000)),
+                    })}
+                  </dd>
+                </>
+              )}
+            </dl>
+          </div>,
+          document.body,
+        )}
+    </span>
+  );
+}
+
+function UsagePill({
+  usage,
+  t,
+  dialog,
+}: {
+  usage: TokenUsageProjection;
+  t: ChatViewSlotProps["t"];
+  dialog: PillDialog;
+}) {
+  const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog);
+  // Same aggregate as the Turn pill's totalTokens: every prompt-side billing bucket plus output.
+  const total = billedInputTokens(usage) + usage.outputTokens;
+  const totalText = t("message.turnUsage.count", { count: formatTokens(total, t) });
+  const cacheHit = cacheHitPercent(usage);
+  const cacheHitText = cacheHit !== null ? t("stats.cacheHit", { percent: cacheHit }) : null;
+  return (
+    <span ref={rootRef} {...styling.props(styles.anchor)}>
+      <button
+        type="button"
+        {...styling.props(styles.pill)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={cacheHitText === null ? totalText : `${totalText} · ${cacheHitText}`}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <IconDatabaseOutline16 />
+        <span {...styling.props(styles.label)}>
+          {totalText}
+          {cacheHitText !== null && (
+            <>
+              <span {...styling.props(styles.sep)} aria-hidden>
+                ·
+              </span>
+              {cacheHitText}
+            </>
+          )}
+        </span>
+      </button>
+      {open &&
+        createPortal(
+          <div
+            ref={panelRef}
+            {...styling.props(dialogStyles.panel)}
+            role="dialog"
+            aria-label={t("stats.dialog.usageTitle")}
+            style={pos ?? MEASURE_STYLE}
+          >
+            <div {...styling.props(dialogStyles.title)}>
+              <span {...styling.props(dialogStyles.titleLabel)}>
+                <IconDatabaseOutline16 />
+                {t("stats.dialog.usageTitle")}
+              </span>
+              <span {...styling.props(dialogStyles.titleValue)}>{exactCount(total, t)}</span>
+            </div>
+            <div {...styling.props(dialogStyles.titleRule)} aria-hidden />
+            {/* jscpd:ignore-start -- the session-total bucket rows deliberately mirror
+              TurnUsagePanel's per-turn dl: same skin, different data contract (the
+              buckets are always present here; per-turn fields are optional). A
+              session that never wrote cache drops the row, as the per-turn panel
+              drops its absent fields. */}
+            <dl {...styling.props(dialogStyles.details)} data-session-stats-usage>
+              {cacheHit !== null && (
+                <>
+                  <dt>{t("message.turnUsage.cacheHit")}</dt>
+                  <dd>{`${cacheHit}%`}</dd>
+                </>
+              )}
+              <dt>{t("message.turnUsage.input")}</dt>
+              <dd>{exactCount(usage.uncachedInputTokens, t)}</dd>
+              <dt>{t("message.turnUsage.cacheRead")}</dt>
+              <dd>{exactCount(usage.cacheReadTokens, t)}</dd>
+              {usage.cacheWriteTokens !== 0 && (
+                <>
+                  <dt>{t("message.turnUsage.cacheWrite")}</dt>
+                  <dd>{exactCount(usage.cacheWriteTokens, t)}</dd>
+                </>
+              )}
+              <dt>{t("message.turnUsage.output")}</dt>
+              <dd>{exactCount(usage.outputTokens, t)}</dd>
+            </dl>
+            {/* jscpd:ignore-end */}
+          </div>,
+          document.body,
+        )}
+    </span>
+  );
+}
+
+export const StatsPills = memo(function StatsPills({ useChat, useProjection, t }: StatsPillsProps) {
+  const settledNodes = useChat((s) => s.legacy.nodes);
+  const usage = useProjection("tokenUsage");
+  // One exclusive slot for both dialogs: opening either pill closes the other.
+  const [openPill, setOpenPill] = useState<"time" | "usage" | null>(null);
+  // Every figure rides the durable sessionStats projection, so paging and
+  // compaction cannot change any of them; an assembly without the unit falls
+  // back to the window-scoped fold wholesale (same field names), paid only
+  // while no projection value is served.
+  const projected = useProjection("sessionStats");
+  const stats = useMemo(() => projected ?? deriveStats(settledNodes), [projected, settledNodes]);
+  // Gated on actual token activity: a session whose steps all settled without
+  // billing (e.g. every request failed) shows its counts without a usage pill.
+  const hasTokens = usage !== undefined && (billedInputTokens(usage) > 0 || usage.outputTokens > 0);
+  if (stats.steps === 0 && !hasTokens) return null;
+  // data-composer-stats: InputBar's `.root:has([data-composer-stats])` rule
+  // tightens the composer's bottom clearance only while this row renders.
+  return (
+    <div {...styling.props(styles.root)} data-composer-stats>
+      {stats.steps > 0 && (
+        <TimePill
+          stats={stats}
+          t={t}
+          dialog={{
+            open: openPill === "time",
+            setOpen: (open) => {
+              setOpenPill(open ? "time" : null);
+            },
+          }}
+        />
+      )}
+      {hasTokens && (
+        <UsagePill
+          usage={usage}
+          t={t}
+          dialog={{
+            open: openPill === "usage",
+            setOpen: (open) => {
+              setOpenPill(open ? "usage" : null);
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+});

package/src/client/composer-stats/register.ts

@@ -0,0 +1,17 @@
+import type { Context } from "@deepseek-ai/cordis";
+import type {} from "@deepseek-ai/dsh-client-ui-chat/client";
+import type {} from "@morlay/dsh-client-ui-conversation/client";
+import { StatsPills } from "./StatsPills.tsx";
+
+// 官方 ui-chat 的字典命名空间：文案沿用上游（`stats.*` / `message.turnUsage.*`）。
+const NS = "chat";
+
+// 覆盖注册：官方 ui-chat 在 `conversation.composer.dock` 注册 id `stats`（优先级 0），
+// 我们以 priority -1 同 id 重新注册——最低优先级渲染，shadow 官方那一格。
+// 覆盖是 shadow 不是删除：官方 stats 行仍在注册表里。
+export function registerComposerStats(slots: Context["slots"]): () => void {
+  return slots.register(
+    { name: "conversation.composer.dock", id: "stats", order: 0, priority: -1, locale: NS },
+    StatsPills,
+  );
+}