shine-code-submit 0.2.0

package/ui/components/SummaryView.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from "react";
+import { useApi } from "../hooks/useApi";
+import { useAllCommits } from "../hooks/useAllCommits";
+import { useApp } from "../state/AppContext";
+import { fmtDateTime, fmtUsage, fmtUsageFull, shortDir, sumTokenUsage } from "../lib/util";
+
+/** 汇总视图（system 模块临时占位，Step 5 替换为 SystemModule）：
+ *  Token 按会话 + 代码提交按时间。提交拉取改用 useAllCommits（与 Overview/Stats 共用）。 */
+export function SummaryView() {
+  const { sessions, token } = useApp();
+  const api = useApi(token);
+
+  const tokenRows = useMemo(
+    () =>
+      sessions
+        .filter((s) => s.tokenTotal && (s.tokenTotal.input > 0 || s.tokenTotal.output > 0))
+        .slice()
+        .sort((a, b) => b.lastActive - a.lastActive),
+    [sessions],
+  );
+  const tokenSum = useMemo(() => sumTokenUsage(sessions.map((s) => s.tokenTotal)), [sessions]);
+  const { commits, loading } = useAllCommits(api, sessions, true);
+
+  const commitCount = commits.length;
+  const added = commits.reduce((n, c) => n + (c.added || 0), 0);
+  const deleted = commits.reduce((n, c) => n + (c.deleted || 0), 0);
+  const hasTokens = tokenSum.total.input > 0 || tokenSum.total.output > 0;
+
+  return (
+    <div id="summary-view" className="summary-view">
+      <section className="sum-section">
+        <div className="sum-head">
+          <h3>Token 消耗（按会话）</h3>
+          <span className="sum-total" title={fmtUsageFull(tokenSum.total)}>
+            总计 {hasTokens ? fmtUsage(tokenSum.total) : "—"}
+          </span>
+        </div>
+        {tokenRows.length === 0 ? (
+          <div className="sum-empty">暂无 token 数据（启动 Claude Code 会话后产生）</div>
+        ) : (
+          <ul className="sum-list sum-token-list">
+            {tokenRows.map((s) => (
+              <li key={s.sessionId} title={fmtUsageFull(s.tokenTotal)}>
+                <span className="sum-ts">{fmtDateTime(s.lastActive)}</span>
+                <span className="sum-cwd" title={s.cwd}>
+                  {shortDir(s.cwd) || "?"}
+                </span>
+                <span className="sum-tok">{fmtUsage(s.tokenTotal)}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="sum-section">
+        <div className="sum-head">
+          <h3>代码提交（按时间）</h3>
+          <span className="sum-total">
+            {commitCount} 次 · <span className="sum-add">+{added}</span> /{" "}
+            <span className="sum-del">-{deleted}</span>
+          </span>
+        </div>
+        {loading ? (
+          <div className="sum-empty">拉取各项目提交…</div>
+        ) : commits.length === 0 ? (
+          <div className="sum-empty">暂无提交</div>
+        ) : (
+          <ul className="sum-list sum-commit-list">
+            {commits.map((c) => (
+              <li key={`${c.cwd}:${c.hash}`} title={c.cwd}>
+                <span className="sum-ts">{fmtDateTime(c.time)}</span>
+                <span className="sum-add">+{c.added}</span>
+                <span className="sum-del">-{c.deleted}</span>
+                <span className="sum-cwd">{shortDir(c.cwd)}</span>
+                <span className="sum-subject">{c.subject || "(无说明)"}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}

package/ui/components/SystemModule.tsx

@@ -0,0 +1,38 @@
+import { useApp } from "../state/AppContext";
+
+/** 系统模块：daemon 运行信息（来自 /api/stats）。 */
+export function SystemModule() {
+  const { stats } = useApp();
+  if (!stats) {
+    return (
+      <div className="empty-state">
+        <span className="es-hint">连接中…</span>
+      </div>
+    );
+  }
+  const up = Math.floor(stats.uptime / 1000);
+  return (
+    <div className="system-view">
+      <section className="sum-section">
+        <div className="sum-head">
+          <h3>Daemon</h3>
+        </div>
+        <div className="sys-grid">
+          <div className="sys-row"><span>服务</span><b>{stats.service}</b></div>
+          <div className="sys-row"><span>版本</span><b>v{stats.version}</b></div>
+          <div className="sys-row"><span>pid</span><b>{stats.pid}</b></div>
+          <div className="sys-row"><span>uptime</span><b>{up}s</b></div>
+          <div className="sys-row"><span>事件总数</span><b>{stats.totalEvents}</b></div>
+          <div className="sys-row"><span>事件速率</span><b>{stats.eventsPerSec.toFixed(1)} evt/s</b></div>
+          <div className="sys-row"><span>spool 积压</span><b>{stats.spoolBacklog}</b></div>
+          {stats.lastError && (
+            <div className="sys-row err">
+              <span>最近错误</span>
+              <b>{stats.lastError.message}</b>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

package/ui/components/ToolCard.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+import { computeLineDiff } from "../lib/diff";
+import { renderContentBlock, toolIcon, toolParamSummary } from "../lib/format";
+import { safeJson } from "../lib/util";
+import { Icon } from "./Icon";
+import { DiffBlock } from "./DiffBlock";
+
+interface ToolT {
+  name: string;
+  input: unknown;
+}
+
+/** 工具调用卡片：图标 + 标题 + 副标题 + stat，折叠看 diff / 内容 / json。 */
+export function ToolCard({ t }: { t: ToolT }) {
+  const name = t.name || "?";
+  const input = t.input && typeof t.input === "object" ? (t.input as Record<string, unknown>) : {};
+  const g = (k: string): string => (input[k] != null ? String(input[k]) : "");
+  const sub = toolParamSummary(name, input).slice(0, 100);
+
+  const { body, stat } = useMemo<{ body: ReactNode; stat: { add: number; del: number } | null }>(() => {
+    if (name === "Edit") {
+      const diffs = computeLineDiff(g("old_string"), g("new_string"));
+      let add = 0;
+      let del = 0;
+      for (const x of diffs) {
+        if (x.op === "add") add++;
+        else if (x.op === "del") del++;
+      }
+      return { body: <DiffBlock diffs={diffs} />, stat: { add, del } };
+    }
+    if (name === "Write") {
+      return {
+        body: <div dangerouslySetInnerHTML={{ __html: renderContentBlock(g("content")) }} />,
+        stat: null,
+      };
+    }
+    return { body: <pre className="card-output">{safeJson(input)}</pre>, stat: null };
+  }, [name, input]);
+
+  return (
+    <details className="tool-card">
+      <summary className="card-trigger">
+        <span className="card-chev"><Icon name="chevron" size={12} /></span>
+        <span className="tool-icon">{toolIcon(name)}</span>
+        <span className="tool-title">{name}</span>
+        <span className="tool-sub">{sub}</span>
+        {stat && (
+          <span className="tool-stat">
+            <span className="s-add">+{stat.add}</span> <span className="s-del">-{stat.del}</span>
+          </span>
+        )}
+      </summary>
+      <div className="tool-content">{body}</div>
+    </details>
+  );
+}

package/ui/hooks/useAllCommits.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import type { CommitLog, CommitsResponse, SessionSummary } from "../types";
+import type { ApiFn } from "./useApi";
+
+/** 跨所有 cwd 合并 git log（概览/统计模块用）。
+ *  从 sessions 提取 distinct cwd，各拉 /api/commits，按 time 倒序合并。
+ *  cwd 集合不变不重拉（sig 缓存，避 sessions 2s 轮询抖动）。 */
+export interface AllCommit extends CommitLog {
+  cwd: string;
+}
+
+export function useAllCommits(api: ApiFn, sessions: SessionSummary[], active: boolean) {
+  const [commits, setCommits] = useState<AllCommit[]>([]);
+  const [loading, setLoading] = useState(false);
+  const loadedSigRef = useRef("");
+
+  useEffect(() => {
+    if (!active) return;
+    const cwds = Array.from(new Set(sessions.map((s) => s.cwd).filter(Boolean)));
+    const sig = cwds.join("\n");
+    if (loadedSigRef.current === sig) return;
+    loadedSigRef.current = sig;
+    if (cwds.length === 0) {
+      setCommits([]);
+      return;
+    }
+    let alive = true;
+    setLoading(true);
+    void (async () => {
+      try {
+        const results = await Promise.all(
+          cwds.map(async (cwd) => {
+            try {
+              const r = await api<CommitsResponse>(
+                `/api/commits?cwd=${encodeURIComponent(cwd)}&limit=200`,
+              );
+              return { cwd, commits: r.commits ?? [] };
+            } catch {
+              return { cwd, commits: [] as CommitLog[] };
+            }
+          }),
+        );
+        if (!alive) return;
+        const all: AllCommit[] = results.flatMap((r) =>
+          r.commits.map((c) => ({ ...c, cwd: r.cwd })),
+        );
+        all.sort((a, b) => b.time - a.time);
+        setCommits(all);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [api, sessions, active]);
+
+  return { commits, loading };
+}

package/ui/hooks/useApi.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+
+/** 带鉴权 token 的 fetch 封装；返回稳定引用（仅依赖 token）。 */
+export function useApi(token: string) {
+  const base = location.origin;
+  return useCallback(async function api<T>(path: string): Promise<T> {
+    const res = await fetch(base + path, { headers: { Authorization: "Bearer " + token } });
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.json() as Promise<T>;
+  }, [token]);
+}
+
+export type ApiFn = <T>(path: string) => Promise<T>;

package/ui/hooks/useCommits.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+import type { CommitLog, CommitsResponse } from "../types";
+import type { ApiFn } from "./useApi";
+
+/** 拉某 cwd 的 git log（/api/commits）。active=true 且 cwd 存在才拉。
+ *  Step 3 下沉：返回自包含 {commits, loading, error, cwd}。loadedCwdRef 换仓库先清空防闪。 */
+export function useCommits(api: ApiFn, cwd: string | null, active: boolean) {
+  const [commits, setCommits] = useState<CommitLog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [actualCwd, setActualCwd] = useState<string | null>(null);
+  const loadedCwdRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (!active || !cwd) return;
+    if (loadedCwdRef.current !== cwd) {
+      setCommits([]);
+      loadedCwdRef.current = cwd;
+    }
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const data = await api<CommitsResponse>(
+          "/api/commits?cwd=" + encodeURIComponent(cwd) + "&limit=200",
+        );
+        if (alive) {
+          setCommits(data.commits);
+          setActualCwd(data.cwd);
+          setError(data.error ?? null);
+        }
+      } catch (e) {
+        if (alive) setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [api, cwd, active]);
+
+  return { commits, loading, error, cwd: actualCwd };
+}

package/ui/hooks/useConversation.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+import type { TranscriptMessage, TranscriptResponse } from "../types";
+import type { ApiFn } from "./useApi";
+
+/** 拉某会话 transcript（/api/transcript）。active=true 且 sessionId 存在才拉。
+ *  Step 3 下沉：返回自包含 {messages, loading, error}。loadedSidRef 换会话先清空防闪。 */
+export function useConversation(api: ApiFn, sessionId: string | null, active: boolean) {
+  const [messages, setMessages] = useState<TranscriptMessage[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const loadedSidRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (!active || !sessionId) return;
+    if (loadedSidRef.current !== sessionId) {
+      setMessages([]);
+      loadedSidRef.current = sessionId;
+    }
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const data = await api<TranscriptResponse>(
+          "/api/transcript?sessionId=" + encodeURIComponent(sessionId),
+        );
+        if (alive) {
+          setMessages(data.messages);
+          setError(null);
+        }
+      } catch (e) {
+        if (alive) setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [api, sessionId, active]);
+
+  return { messages, loading, error };
+}

package/ui/hooks/useEvents.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+import type { EventsResponse, HookEvent } from "../types";
+import type { ApiFn } from "./useApi";
+
+/** 拉事件历史（/api/events）。active=true 才拉；sessionId=null 看全部、非 null 单会话。
+ *  Step 3 下沉：返回自包含 {events, loading, error}，各模块自管实例，互不覆盖。
+ *  loadedSessionRef：换 sessionId 先清空，避免闪现旧数据。 */
+export function useEvents(api: ApiFn, sessionId: string | null, active: boolean) {
+  const [events, setEvents] = useState<HookEvent[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const loadedSessionRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (!active) return;
+    if (loadedSessionRef.current !== sessionId) {
+      setEvents([]);
+      loadedSessionRef.current = sessionId;
+    }
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const qs = sessionId
+          ? "?sessionId=" + encodeURIComponent(sessionId) + "&limit=200"
+          : "?limit=200";
+        const data = await api<EventsResponse>("/api/events" + qs);
+        if (alive) {
+          setEvents(data.events);
+          setError(null);
+        }
+      } catch (e) {
+        if (alive) setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [api, sessionId, active]);
+
+  return { events, loading, error };
+}

package/ui/hooks/useSplitter.ts

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from "react";
+import type { MouseEvent as ReactMouseEvent } from "react";
+
+/** 可拖拽分隔条：mousedown 后改 CSS 变量。
+ *  orient=v 改 varName（默认 --nav-w 导航宽）；会话/事件树传 "--tree-w"。
+ *  orient=h 改 --footer-h（底部日志高，已弃用但保留兼容）。 */
+export function useSplitter(orient: "v" | "h", varName?: string) {
+  const ref = useRef<HTMLDivElement>(null);
+  const onMouseDown = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const el = ref.current;
+      if (!el) return;
+      el.classList.add("dragging");
+      document.body.style.cursor = orient === "v" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const root = document.documentElement;
+      const wVar = orient === "v" ? varName ?? "--nav-w" : "--footer-h";
+      const startW = parseFloat(getComputedStyle(root).getPropertyValue(wVar)) || 200;
+      const startH = parseFloat(getComputedStyle(root).getPropertyValue("--footer-h")) || 170;
+      const onMove = (ev: MouseEvent) => {
+        if (orient === "v") {
+          root.style.setProperty(wVar, Math.max(140, startW + (ev.clientX - startX)) + "px");
+        } else {
+          root.style.setProperty("--footer-h", Math.max(60, startH - (ev.clientY - startY)) + "px");
+        }
+      };
+      const onUp = () => {
+        el.classList.remove("dragging");
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [orient, varName],
+  );
+  return { ref, onMouseDown };
+}

package/ui/hooks/useStatsPolling.ts

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import type { SessionSummary, StatsResponse } from "../types";
+import type { ApiFn } from "./useApi";
+
+/** 每 2s 轮询 /api/stats + /api/sessions（启动即一次）。 */
+export function useStatsPolling(
+  api: ApiFn,
+  setStats: Dispatch<SetStateAction<StatsResponse | null>>,
+  setSessions: Dispatch<SetStateAction<SessionSummary[]>>,
+): void {
+  useEffect(() => {
+    let alive = true;
+    const refresh = async () => {
+      try {
+        const [s, sess] = await Promise.all([
+          api<StatsResponse>("/api/stats"),
+          api<{ sessions: SessionSummary[] }>("/api/sessions"),
+        ]);
+        if (alive) {
+          setStats(s);
+          setSessions(sess.sessions);
+        }
+      } catch (e) {
+        console.warn("refresh", e);
+      }
+    };
+    void refresh();
+    const id = setInterval(refresh, 2000);
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, [api, setStats, setSessions]);
+}

package/ui/hooks/useWebSocket.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import type { HookEvent, WsMessage } from "../types";
+
+/**
+ * WS 连接 + 2s 自动重连。onEvent 用 ref 存最新值，effect 只依赖 token，
+ * 避免 onEvent 变化导致连接重建。onEvent 传 null 时不分发事件（仍保持连接）。
+ */
+export function useWebSocket(token: string, onEvent: ((ev: HookEvent) => void) | null): void {
+  const ref = useRef(onEvent);
+  ref.current = onEvent;
+  useEffect(() => {
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    let ws: WebSocket | null = null;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let closed = false;
+    const connect = () => {
+      ws = new WebSocket(`${proto}://${location.host}/api/ws?t=${encodeURIComponent(token)}`);
+      ws.onmessage = (m) => {
+        try {
+          const msg = JSON.parse(typeof m.data === "string" ? m.data : "") as WsMessage;
+          if (msg.kind === "event" && ref.current) ref.current(msg.event);
+        } catch (e) {
+          console.warn("ws msg", e);
+        }
+      };
+      ws.onclose = () => {
+        if (!closed) timer = setTimeout(connect, 2000);
+      };
+      ws.onerror = () => ws?.close();
+    };
+    connect();
+    return () => {
+      closed = true;
+      if (timer) clearTimeout(timer);
+      ws?.close();
+    };
+  }, [token]);
+}

package/ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Shine Code Submit</title>
+    <link rel="stylesheet" href="/ui/style.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/ui/app.js"></script>
+  </body>
+</html>

package/ui/lib/aggregate.ts

@@ -0,0 +1,81 @@
+// 纯聚合函数（统计模块用）：按项目/按天分组，无副作用。
+import type { SessionSummary, TokenUsage } from "../types";
+
+export interface ProjTokenRow {
+  cwd: string;
+  token: TokenUsage;
+  sessionCount: number;
+}
+
+/** 按项目聚合 token：group by cwd，累加 tokenTotal + 会话数，按 token 总量倒序。 */
+export function aggregateTokenByProject(sessions: SessionSummary[]): ProjTokenRow[] {
+  const m = new Map<string, ProjTokenRow>();
+  for (const s of sessions) {
+    const r =
+      m.get(s.cwd) ??
+      {
+        cwd: s.cwd,
+        token: { input: 0, output: 0, cacheCreation: 0, cacheRead: 0 },
+        sessionCount: 0,
+      };
+    r.sessionCount++;
+    if (s.tokenTotal) {
+      r.token.input += s.tokenTotal.input;
+      r.token.output += s.tokenTotal.output;
+      r.token.cacheCreation += s.tokenTotal.cacheCreation;
+      r.token.cacheRead += s.tokenTotal.cacheRead;
+    }
+    m.set(s.cwd, r);
+  }
+  return [...m.values()].sort(
+    (a, b) => b.token.input + b.token.output - (a.token.input + a.token.output),
+  );
+}
+
+export interface ProjCommitRow {
+  cwd: string;
+  count: number;
+  added: number;
+  deleted: number;
+}
+
+/** 按项目聚合提交：group by cwd，统计次数/新增/删除，按次数倒序。 */
+export function aggregateCommitsByProject(commits: Array<{ cwd: string; added: number; deleted: number }>): ProjCommitRow[] {
+  const m = new Map<string, ProjCommitRow>();
+  for (const c of commits) {
+    const r = m.get(c.cwd) ?? { cwd: c.cwd, count: 0, added: 0, deleted: 0 };
+    r.count++;
+    r.added += c.added;
+    r.deleted += c.deleted;
+    m.set(c.cwd, r);
+  }
+  return [...m.values()].sort((a, b) => b.count - a.count);
+}
+
+export interface DayBucket {
+  day: string; // MM-DD
+  count: number;
+}
+
+function fmtDay(ts: number): string {
+  const d = new Date(ts);
+  return `${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+/** 按天分桶（近 days 天，含今天），统计每桶 count。非近 days 内的时间忽略。 */
+export function bucketByDay(times: number[], days = 7): DayBucket[] {
+  const buckets: DayBucket[] = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(d.getDate() - i);
+    buckets.push({ day: fmtDay(d.getTime()), count: 0 });
+  }
+  const map = new Map(buckets.map((b) => [b.day, b]));
+  for (const t of times) {
+    const b = map.get(fmtDay(t));
+    if (b) b.count++;
+  }
+  return buckets;
+}

package/ui/lib/diff.ts

@@ -0,0 +1,45 @@
+// 行级 LCS diff（从原 app.js 搬运）。
+
+export interface DiffLine {
+  op: "ctx" | "add" | "del";
+  text: string;
+}
+
+export function computeLineDiff(oldS: unknown, newS: unknown): DiffLine[] {
+  const a = String(oldS || "").split("\n");
+  const b = String(newS || "").split("\n");
+  const n = a.length;
+  const m = b.length;
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i]![j] =
+        a[i] === b[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!);
+    }
+  }
+  const out: DiffLine[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      out.push({ op: "ctx", text: a[i]! });
+      i++;
+      j++;
+    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
+      out.push({ op: "del", text: a[i]! });
+      i++;
+    } else {
+      out.push({ op: "add", text: b[j]! });
+      j++;
+    }
+  }
+  while (i < n) {
+    out.push({ op: "del", text: a[i]! });
+    i++;
+  }
+  while (j < m) {
+    out.push({ op: "add", text: b[j]! });
+    j++;
+  }
+  return out;
+}