@morlay/ui-conversation-message-actions 0.1.4 → 0.1.5

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

@@ -1,44 +0,0 @@
-import type { Translate } from "@deepseek-ai/dsh-client-ui-slots";
-
-export type ClockTranslate = Translate<"clock.md" | "clock.ymd">;
-
-function pad2(n: number): string {
-  return String(n).padStart(2, "0");
-}
-
-export function startOfLocalDay(ms: number): number {
-  const d = new Date(ms);
-  d.setHours(0, 0, 0, 0);
-  return d.getTime();
-}
-
-export function msUntilNextLocalMidnight(ms: number): number {
-  const next = new Date(ms);
-  next.setHours(24, 0, 0, 0);
-  return Math.max(next.getTime() - ms, 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);
-}
-
-export function formatMessageClock(
-  time: number,
-  t: ClockTranslate,
-  now: number = Date.now(),
-): string {
-  const d = new Date(time);
-  const n = new Date(now);
-  const clock = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-  if (
-    d.getFullYear() === n.getFullYear() &&
-    d.getMonth() === n.getMonth() &&
-    d.getDate() === n.getDate()
-  ) {
-    return clock;
-  }
-  const params = { y: d.getFullYear(), m: d.getMonth() + 1, d: d.getDate() };
-  const md = d.getFullYear() === n.getFullYear() ? t("clock.md", params) : t("clock.ymd", params);
-  return `${md} ${clock}`;
-}

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

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-import { msUntilNextLocalMidnight, startOfLocalDay } from "./message-chrome.ts";
-
-export function useCalendarDay(): number {
-  const [day, setDay] = useState(() => startOfLocalDay(Date.now()));
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>;
-    const arm = (): void => {
-      const now = Date.now();
-      setDay(startOfLocalDay(now));
-      timer = setTimeout(arm, msUntilNextLocalMidnight(now));
-    };
-    timer = setTimeout(arm, msUntilNextLocalMidnight(Date.now()));
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-  return day;
-}

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

@@ -1,57 +0,0 @@
-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

@@ -1,362 +0,0 @@
-// 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; this row shadows
-// upstream ui-chat's `composer.dock` id `stats`（priority −1），`data-composer-stats` is its stable anchor
-// (style / test hooks)。
-
-import { memo, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import {
-  IconDatabaseOutlineRegular,
-  IconGaugeOutlineRegular,
-} 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 otherwise rides that durable whole-log
-// projection (token accounting rides `tokenUsage`), because the window is paged and compaction rewrites it;
-// field names deliberately mirror the projection's so the two swap wholesale.
-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.
-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: integer text while 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.
-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)}>
-          <IconGaugeOutlineRegular />
-          {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);
-        }}
-      >
-        <IconGaugeOutlineRegular />
-        {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)}>
-                <IconGaugeOutlineRegular />
-                {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);
-        }}
-      >
-        <IconDatabaseOutlineRegular />
-        <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)}>
-                <IconDatabaseOutlineRegular />
-                {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).
-  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: 这一行的稳定锚点（样式 / 测试定位用）。
-  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

@@ -1,17 +0,0 @@
-import type { Context } from "@deepseek-ai/cordis";
-import type {} from "@deepseek-ai/dsh-client-ui-chat/client";
-import type {} from "@deepseek-ai/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,
-  );
-}

package/src/client/composer-stats/stat-dialog.styles.ts

@@ -1,70 +0,0 @@
-import type { CSSProps } from "@morlay/dsh-client-ui-primitives/client";
-
-export const styles = {
-  panel: {
-    position: "fixed",
-    zIndex: "1100",
-    boxSizing: "border-box",
-    width: "max-content",
-    minWidth: "min(300px, calc(100vw - 24px))",
-    maxWidth: "min(440px, calc(100vw - 24px))",
-    padding: "16px",
-    border: "0",
-    borderRadius: "12px",
-    background: "var(--dsw-specific-menu)",
-    "--dsw-elevation-stroke-color": "var(--dsw-alias-border-l1)",
-    boxShadow: "var(--dsw-elevation-prominent)",
-    fontSize: "12px",
-    lineHeight: "18px",
-    color: "var(--dsw-alias-label-secondary)",
-    cursor: "default",
-  },
-  title: {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: "16px",
-    marginBottom: "8px",
-    color: "var(--dsw-alias-label-primary)",
-    fontWeight: "500",
-  },
-  titleRule: {
-    marginBottom: "10px",
-    borderTop: "0.5px solid var(--dsw-alias-border-l2)",
-  },
-  titleValue: {
-    fontVariantNumeric: "tabular-nums",
-  },
-  titleLabel: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-    minWidth: "0",
-    "& svg": {
-      width: "14px",
-      height: "14px",
-      flex: "none",
-    },
-  },
-  details: {
-    display: "grid",
-    gridTemplateColumns: "minmax(76px, auto) minmax(0, 1fr)",
-    gap: "6px 16px",
-    margin: "0",
-    color: "var(--dsw-alias-label-tertiary)",
-    "& dt": {
-      minWidth: "0",
-      margin: "0",
-    },
-    "& dd": {
-      minWidth: "0",
-      margin: "0",
-      color: "var(--dsw-alias-label-secondary)",
-      fontVariantNumeric: "tabular-nums",
-      textAlign: "right",
-    },
-  },
-  reasoning: {
-    color: "var(--dsw-alias-label-tertiary)",
-    whiteSpace: "nowrap",
-  },
-} satisfies Record<string, CSSProps>;

package/src/client/composer-stats/stat-dialog.ts

@@ -1,52 +0,0 @@
-import { useEffect, useRef, useState, type CSSProperties, type MutableRefObject } from "react";
-import {
-  useAnchoredPosition,
-  useDismissOnOutsidePointer,
-} from "@deepseek-ai/dsh-client-ui-primitives";
-
-const PANEL_MARGIN = 12;
-
-const PANEL_GAP = 8;
-
-export const MEASURE_STYLE: CSSProperties = { visibility: "hidden", left: 0, top: 0 };
-
-export interface StatDialogSeat {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  rootRef: MutableRefObject<HTMLSpanElement | null>;
-  panelRef: MutableRefObject<HTMLDivElement | null>;
-  pos: CSSProperties | null;
-}
-
-export function useStatDialog(
-  controlled?: Pick<StatDialogSeat, "open" | "setOpen">,
-): StatDialogSeat {
-  const [ownOpen, setOwnOpen] = useState(false);
-  const open = controlled?.open ?? ownOpen;
-  const setOpen = controlled?.setOpen ?? setOwnOpen;
-  const rootRef = useRef<HTMLSpanElement | null>(null);
-  const panelRef = useRef<HTMLDivElement | null>(null);
-
-  const pos = useAnchoredPosition({
-    open,
-    anchorRef: rootRef,
-    panelRef,
-    side: "top",
-    gap: PANEL_GAP,
-    margin: PANEL_MARGIN,
-  });
-
-  useDismissOnOutsidePointer(rootRef, open, setOpen, panelRef);
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e: KeyboardEvent): void => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, setOpen]);
-
-  return { open, setOpen, rootRef, panelRef, pos };
-}