@morlay/ui-conversation-message-actions 0.0.18 → 0.0.19-alpha.1

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

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

@@ -0,0 +1,52 @@
+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 };
+}

package/src/client/composer-stats/token-format.ts

@@ -0,0 +1,85 @@
+// Token 展示口径，随 composer 统计行从上游 ui-chat 搬来：`formatCacheHitPercent`
+// 的越界分支是**主动修的缺陷**（上游只在未命中侧为 0 时返回 "100"，
+// cacheRead 超出 prompt 时展开循环的缩放间隙恒为负 → 同步死循环冻结主线程）。
+import type { ChatViewSlotProps } from "@deepseek-ai/dsh-client-ui-chat/client";
+
+export function formatTokens(value: number, t: ChatViewSlotProps["t"]): string {
+  const scaled = (candidate: number): string =>
+    candidate >= 100 ? String(Math.round(candidate)) : String(Math.round(candidate * 10) / 10);
+  if (value < 1_000) return String(value);
+  if (value < 1_000_000) return t("number.thousand", { value: scaled(value / 1_000) });
+  return t("number.million", { value: scaled(value / 1_000_000) });
+}
+
+export function formatExactTokens(value: number, t: ChatViewSlotProps["t"]): string {
+  const digits = String(value);
+  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(t("number.groupSeparator"));
+}
+
+function roundedPercentUnits(
+  cacheReadTokens: number,
+  denominator: number,
+  decimalPlaces: 0 | 1,
+): number {
+  const unitsPerPercent = decimalPlaces === 0 ? 1 : 10;
+  const scale = unitsPerPercent * 100;
+  const doubledScale = scale * 2;
+  const denominatorQuotient = Math.floor(denominator / doubledScale);
+  const denominatorRemainder = denominator % doubledScale;
+  let lower = 0;
+  let upper = scale;
+  while (lower < upper) {
+    const candidate = Math.floor((lower + upper + 1) / 2);
+    const factor = candidate * 2 - 1;
+    const threshold =
+      factor * denominatorQuotient + Math.ceil((factor * denominatorRemainder) / doubledScale);
+    if (cacheReadTokens >= threshold) lower = candidate;
+    else upper = candidate - 1;
+  }
+  return lower;
+}
+
+function displayPercentUnits(units: number, decimalPlaces: 0 | 1): string {
+  if (decimalPlaces === 0) return String(units);
+  const whole = Math.floor(units / 10);
+  const tenths = units % 10;
+  return tenths === 0 ? String(whole) : `${whole}.${tenths}`;
+}
+
+export function formatCacheHitPercent(
+  cacheReadTokens: number,
+  promptTokens: number,
+  decimalPlaces: 0 | 1 = 0,
+): string | null {
+  if (promptTokens === 0) return null;
+  const missedInputTokens = promptTokens - cacheReadTokens;
+  // 未命中侧为 0，或为负（cacheRead 超出 prompt 的越界输入）时都按全命中返回。
+  if (missedInputTokens <= 0) return "100";
+
+  const roundedUnits = roundedPercentUnits(cacheReadTokens, promptTokens, decimalPlaces);
+  const fullHitUnits = decimalPlaces === 0 ? 100 : 1_000;
+  if (roundedUnits < fullHitUnits) return displayPercentUnits(roundedUnits, decimalPlaces);
+
+  let distinguishingPlaces = 1;
+  let scaledDoubleGap = missedInputTokens * 200;
+  const denominatorTens = Math.floor(promptTokens / 10);
+  while (scaledDoubleGap <= denominatorTens) {
+    scaledDoubleGap *= 10;
+    distinguishingPlaces += 1;
+  }
+  const denominatorOnes = promptTokens % 10;
+  let roundedLoss = 5;
+  for (let loss = 1; loss < 5; loss += 1) {
+    const factor = loss * 2 + 1;
+    const threshold = factor * denominatorTens + Math.floor((factor * denominatorOnes) / 10);
+    if (scaledDoubleGap <= threshold) {
+      roundedLoss = loss;
+      break;
+    }
+  }
+  return `99.${"9".repeat(distinguishingPlaces - 1)}${10 - roundedLoss}`;
+}

package/src/client/composer-stats/turn-reading.ts

@@ -0,0 +1,35 @@
+// 窗口折叠（无 `sessionStats` 投影时的兜底）读一条 assistant 步的时序 / 用量。
+// 从上游 ui-chat 的 `contract/turn-metrics.ts` 取出统计行真正用到的那一半，
+// 只服务 composer 统计行。
+import type { AssistantMessageNode } from "@deepseek-ai/dsh-client-ui-chat/client";
+
+export interface StepReading {
+  ttftMs: number | null;
+
+  decodeMs: number | null;
+
+  outputTokens: number | null;
+}
+
+interface UsageLike {
+  outputTokens?: number;
+}
+
+function usageOutputTokens(usage: unknown): number | null {
+  if (typeof usage !== "object" || usage === null) return null;
+  const value = (usage as UsageLike).outputTokens;
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+}
+
+export function assistantStepReading(node: AssistantMessageNode): StepReading {
+  const timing = node.timing;
+  const ttftMs =
+    timing !== undefined && timing.stepStartTime !== null && timing.firstTokenTime !== null
+      ? Math.max(0, timing.firstTokenTime - timing.stepStartTime)
+      : null;
+  const decodeMs =
+    timing !== undefined && timing.firstTokenTime !== null
+      ? Math.max(0, timing.completedTime - timing.firstTokenTime)
+      : null;
+  return { ttftMs, decodeMs, outputTokens: usageOutputTokens(node.usage) };
+}

package/src/client/controller.ts

@@ -5,6 +5,7 @@ import type {
   SessionSnapshot,
 } from "@deepseek-ai/dsh-api-session-controller/client";
 import type { ObservableSnapshot, SnapshotStore } from "@deepseek-ai/dsh-client-store";
+import type { UiWorkspace } from "@deepseek-ai/dsh-client-ui-workspace/client";
 import { createSnapshotStore } from "@deepseek-ai/dsh-client-store";
 import type { SessionId } from "@deepseek-ai/dsh-session";
 import {
@@ -16,7 +17,6 @@ import {
   type VersionOperation,
 } from "../shared.ts";
 
-/** desktop 壳（官方 dsh-desktop-host）注入的 transport 标记：ownsHost 时 API 走 /api 前缀。 */
 function editorApiPath(): string {
   const transport = (globalThis as { __DSH_TRANSPORT__?: { ownsHost?: boolean } })
     .__DSH_TRANSPORT__;
@@ -26,7 +26,7 @@ function editorApiPath(): string {
 export interface SessionEditorState {
   status: "idle" | "loading" | "ready" | "error";
   error: string | null;
-  pending: VersionOperation | "recall" | "import" | null;
+  pending: VersionOperation | "recall" | null;
   timeline: SessionEditorTimeline | null;
 }
 
@@ -43,8 +43,6 @@ export interface SessionEditorFace {
   reroll(): Promise<boolean>;
   rewind(toBoundary: number): Promise<boolean>;
   recall(message: EditableMessageBlock): Promise<boolean>;
-
-  importSession(file: File): Promise<boolean>;
   openVersion(sessionId: string): Promise<void>;
 }
 
@@ -53,8 +51,6 @@ function messageOf(error: unknown): string {
 }
 
 function conversationRevision(snapshot: SessionSnapshot): string {
-  // 新版 SessionSnapshot 已无 turnEnds（会话级事件窗口不再暴露轮次边界）；
-  // 用生命周期字段作为会话变化指纹即可。
   return [snapshot.openState, snapshot.removed, snapshot.hasMore].join("|");
 }
 
@@ -69,12 +65,12 @@ export class SessionEditorController {
   readonly face: SessionEditorFace;
   private readonly ctx: ClientContext;
   private readonly sessions: ISessions;
+  private readonly uiWorkspace: UiWorkspace;
   private sessionSource: SessionFace | undefined;
   private sessionSourceDispose: (() => void) | undefined;
   private sessionRevision: string | undefined;
   private disposed = false;
   private users = 0;
-  private readonly navigationWaits = new Set<() => void>();
 
   constructor(
     ctx: ClientContext,
@@ -82,6 +78,7 @@ export class SessionEditorController {
   ) {
     this.ctx = ctx;
     this.sessions = ctx.get("sessions") as unknown as ISessions;
+    this.uiWorkspace = ctx.get("uiWorkspace") as unknown as UiWorkspace;
     this.face = {
       hooks: { sessionEditor: this.store },
       acquire: () => {
@@ -109,10 +106,12 @@ export class SessionEditorController {
       recall: (message) =>
         this.mutate(
           { action: "recall", sessionId: this.sessionId, eventSeq: message.eventSeq },
-          () => this.setComposerDraft(message.text),
+          () => this.setComposerDraft(this.messageTexts(message)),
         ),
-      importSession: (file) => this.importSession(file),
-      openVersion: (sessionId) => this.openWhenListed(sessionId as SessionId),
+      openVersion: (sessionId) => {
+        this.uiWorkspace.openSession(sessionId as SessionId);
+        return Promise.resolve();
+      },
     };
     this.observe();
   }
@@ -138,7 +137,7 @@ export class SessionEditorController {
 
   private invalidate(): void {
     if (this.disposed || this.store.getSnapshot().status === "idle") return;
-    // 会话状态变化 → 刷新投影（debounce 由调用方按需）。
+
     void this.load();
   }
 
@@ -206,8 +205,6 @@ export class SessionEditorController {
     operation: SessionEditorOperation,
     onApplied?: () => void,
   ): Promise<boolean> {
-    // 只拦截并发操作；不要求 status === "ready"——编辑/重试的数据来自客户端
-    // conversation 节点，与 timeline 加载无关，status 为 idle 时也可发起请求。
     const current = this.store.getSnapshot();
     if (current.pending !== null) return false;
     this.store.update((state) => {
@@ -231,27 +228,21 @@ export class SessionEditorController {
       this.store.update((state) => {
         state.pending = null;
       });
-      // recall 的草稿回填必须在刷新（resync / 整页重载）之前：草稿经会话级
-      // 持久化 mirror 落 store，整页重载后仍能恢复。
+
       onApplied?.();
       const result = value as SessionEditorOperationResult;
-      // 仅 fork 产生新 id 时需要等列表发布并打开新版本；就地编辑不改 id。
+
       if (String(result.sessionId) !== String(this.sessionId)) {
-        await this.openWhenListed(result.sessionId as SessionId);
+        this.uiWorkspace.openSession(result.sessionId as SessionId);
         return true;
       }
-      // 就地编辑：rewind 删除事件，append-only 事件流无法表达删除——seq
-      // 回退只做增量，被剪掉的旧节点残留。优先会话级刷新（resync 重置窗口
-      // 并重新拉取历史）；不可用时回退整页重载。
+
       const face = this.sessions.binding(this.sessionId)?.session;
       const resync = (face as unknown as { resync?: () => Promise<void> }).resync;
       if (resync !== undefined) {
         try {
           await resync.call(face);
-          // resync 只重建事件窗口；投影 store 按 higher-seq-wins 保留 rewind
-          // 前的高 seq 旧值（截断后的正确值 seq 更小，永远覆盖不上），轮次
-          // 导航会残留已删除的轮次。丢弃全部投影行，等 host 推送重建；拿不到
-          // 丢弃入口时整页重载兜底。
+
           const projections = (
             face as unknown as { projections?: { truncate?(lastSeq: number): void } }
           ).projections;
@@ -262,9 +253,7 @@ export class SessionEditorController {
           projections.truncate(-1);
           void this.load();
           return true;
-        } catch {
-          // fall through to full reload
-        }
+        } catch {}
       }
       location.reload();
       return true;
@@ -278,97 +267,26 @@ export class SessionEditorController {
     }
   }
 
-  /**
-   * 把撤回的消息文本回填到该会话的 composer 草稿（`conversation.input` 的
-   * `setDraft`，即主输入框的整段替换语义）。会话 scope / binding / conversation
-   * 服务缺失时静默跳过——撤回本身已成功，草稿回填失败不应回滚会话状态。
-   */
-  private setComposerDraft(text: string): void {
-    // binding 缺失时 input.for 会抛（会话 scope 已拆除），先短路。
+  private messageTexts(message: EditableMessageBlock): readonly string[] {
+    const prefix = `${String(message.eventSeq)}:`;
+    const blocks = (this.store.getSnapshot().timeline?.messages ?? [])
+      .filter((row) => row.kind === "user" && row.key.startsWith(prefix))
+      .sort((left, right) => left.blockIndex - right.blockIndex)
+      .map((row) => row.text);
+    return blocks.length === 0 ? [message.text] : blocks;
+  }
+
+  private setComposerDraft(texts: readonly string[]): void {
     if (this.sessions.binding(this.sessionId) === undefined) return;
     const scoped = this.sessions.scope(this.sessionId);
     if (scoped === undefined) return;
     const conversation = scoped.get("conversation") as
-      | { input?: { for(ctx: ClientContext): { setDraft(text: string): void } } }
+      | {
+          input?: {
+            for(ctx: ClientContext): { restoreDraft(draft: string): void };
+          };
+        }
       | undefined;
-    conversation?.input?.for(scoped).setDraft(text);
-  }
-
-  private async importSession(file: File): Promise<boolean> {
-    const current = this.store.getSnapshot();
-    if (current.pending !== null) return false;
-    this.store.update((state) => {
-      state.pending = "import";
-      state.error = null;
-    });
-    try {
-      const zip = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const dataUrl = typeof reader.result === "string" ? reader.result : "";
-          const comma = dataUrl.indexOf(",");
-          resolve(comma < 0 ? dataUrl : dataUrl.slice(comma + 1));
-        };
-        reader.onerror = () =>
-          reject(reader.error ?? new Error("failed to read the selected file"));
-        reader.readAsDataURL(file);
-      });
-      const response = await fetch("/api/session.import", {
-        method: "POST",
-        headers: { accept: "application/json", "content-type": "application/json" },
-        body: JSON.stringify({ zip, sessionId: this.sessionId }),
-      });
-      const value = (await response.json()) as unknown;
-      if (this.disposed) return true;
-      if (!response.ok) {
-        const error = (value as { error?: unknown })["error"];
-        throw new Error(
-          typeof error === "string" ? error : `请求失败：HTTP ${String(response.status)}`,
-        );
-      }
-      this.store.update((state) => {
-        state.pending = null;
-      });
-      // 覆盖成功但**不能**走 resync：resync 重开事件流时 observeSession 仍
-      // 优先读 live session（rewind 已截断其内存 log，append 只写 DB），会
-      // 再读到空/截断数据。整页重载让会话从 live 卸载，冷读 DB 完整数据。
-      location.reload();
-      return true;
-    } catch (error) {
-      if (this.disposed) return false;
-      this.store.update((state) => {
-        state.pending = null;
-        state.error = messageOf(error);
-      });
-      return false;
-    }
-  }
-
-  private openWhenListed(sessionId: SessionId): Promise<void> {
-    if (this.sessions.list.getSnapshot().byId[sessionId] !== undefined) {
-      this.sessions.open(sessionId);
-      return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-      let settled = false;
-      let dispose = (): void => {};
-      const finish = (open: boolean): void => {
-        if (settled) return;
-        settled = true;
-        dispose();
-        this.navigationWaits.delete(cancel);
-        if (open) this.sessions.open(sessionId);
-        resolve();
-      };
-      const cancel = (): void => {
-        finish(false);
-      };
-      this.navigationWaits.add(cancel);
-      dispose = this.sessions.list.subscribe(() => {
-        if (this.sessions.list.getSnapshot().byId[sessionId] === undefined) return;
-        finish(true);
-      });
-      if (this.sessions.list.getSnapshot().byId[sessionId] !== undefined) finish(true);
-    });
+    conversation?.input?.for(scoped).restoreDraft(texts.join("\n\n"));
   }
 }

package/src/client/index.ts

@@ -1,15 +1,19 @@
 import type { Context } from "@deepseek-ai/cordis";
-import type {} from "@deepseek-ai/dsh-client-ui-conversation/client";
+import type {} from "@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 type { SessionId } from "@deepseek-ai/dsh-session";
 import { SessionEditorController } from "./controller.ts";
 import { registerChatNodeRenderers } from "./chat-node/register.ts";
-import { SessionImportAction } from "./import-action.tsx";
+import { registerComposerStats } from "./composer-stats/register.ts";
+import { styling } from "@morlay/dsh-client-ui-primitives/client";
+import { globals as messageIconGlobals } from "./chat-node/MessageIconActions.styles.ts";
 
-export const inject = ["slots", "conversation", "connection", "sessions"];
+export const inject = ["slots", "conversation", "connection", "sessions", "uiWorkspace"];
 
 export function apply(ctx: Context): void {
+  styling.injectGlobals(messageIconGlobals);
+
   const controllers = new Map<SessionId, SessionEditorController>();
   const controllerFor = (sessionId: SessionId): SessionEditorController => {
     let controller = controllers.get(sessionId);
@@ -24,27 +28,7 @@ export function apply(ctx: Context): void {
     for (const controller of controllers.values()) void controller.load();
   });
 
-  // 新版 `conversation.chat.node` 是 keyed slot（reuse key 即替换该节点的
-  // 渲染器）；register 内部经 ctx.slots.inject 等待声明。
   registerChatNodeRenderers(ctx, controllerFor);
 
-  // 会话头部「导入会话」入口：导出按钮旁（header.utilities list 槽），
-  // 用导出的 zip 覆盖当前会话内容（host 端 `/api/session.import`）。
-  ctx.slots.inject("conversation.session.header.utilities", () =>
-    ctx.slots.register(
-      {
-        name: "conversation.session.header.utilities",
-        id: "session-editor.import",
-        inject: (sessionId: SessionId) => {
-          const face = controllerFor(sessionId).face;
-          return {
-            hooks: face.hooks,
-            // face 方法是闭包（已绑定 this），直接透传。
-            importSession: (file: File) => face.importSession(file),
-          };
-        },
-      } as never,
-      SessionImportAction as never,
-    ),
-  );
+  ctx.slots.inject("conversation.composer.dock", () => registerComposerStats(ctx.slots));
 }