shine-code-submit 0.2.0

package/ui/lib/export.ts

@@ -0,0 +1,45 @@
+// 导出工具（从原 app.js 搬运）。
+import type { TranscriptMessage } from "../types";
+
+export function download(name: string, content: string, type = "text/plain"): void {
+  const blob = new Blob([content], { type: type + ";charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+
+/** 对话消息导出为 Markdown。 */
+export function messagesToMd(messages: TranscriptMessage[], sid: string): string {
+  const lines: string[] = [
+    "# 对话导出", "",
+    "session: " + sid,
+    "导出时间: " + new Date().toLocaleString(),
+    "消息数: " + messages.length,
+    "", "---", "",
+  ];
+  for (const m of messages) {
+    const when = m.ts ? new Date(m.ts).toLocaleString() : "";
+    if (m.role === "tool") {
+      lines.push("### 🔧 " + (m.toolName || "工具") + " · 结果" + (when ? "  · " + when : ""), "", "```", m.text || "", "```", "");
+    } else if (m.role === "user") {
+      lines.push("## 用户" + (when ? "  · " + when : ""), "", m.text || "", "");
+    } else {
+      lines.push("## Claude" + (when ? "  · " + when : ""), "");
+      if (m.thinking) lines.push("<details><summary>思考过程</summary>", "", m.thinking, "", "</details>", "");
+      lines.push(m.text || "", "");
+      if (m.tools && m.tools.length) {
+        lines.push("<details><summary>工具调用 (" + m.tools.length + ")</summary>", "");
+        for (const t of m.tools) {
+          lines.push("- **" + t.name + "**:", "  ```json", JSON.stringify(t.input, null, 2).replace(/\n/g, "\n  "), "  ```", "");
+        }
+        lines.push("</details>", "");
+      }
+    }
+  }
+  return lines.join("\n");
+}

package/ui/lib/format.ts

@@ -0,0 +1,100 @@
+// 事件摘要 / 详情 / 工具摘要等格式化（从原 app.js 搬运）。
+// 返回 HTML 字符串的函数（formatDetail/jsonBlock/textBlock/section/renderContentBlock）
+// 在组件里用 dangerouslySetInnerHTML 渲染：内部只产生 span/class 标记，来源数据已 escapeHtml。
+import type { HookEvent, Payload } from "../types";
+import { brief, escapeHtml, safeJson } from "./util";
+
+/** 事件流一行摘要（工具名 + prompt/回复/工具输入片段）。 */
+export function eventSummary(ev: HookEvent): string {
+  const p = (ev.payload ?? {}) as Payload;
+  const tool = typeof p.tool_name === "string" && p.tool_name ? ` ${p.tool_name}` : "";
+  let extra = "";
+  if (typeof p.prompt === "string") extra = " " + brief(p.prompt);
+  else if (typeof p.last_assistant_message === "string") extra = " " + brief(p.last_assistant_message);
+  else if (p.tool_input != null) extra = " " + brief(safeJson(p.tool_input));
+  return `${tool}${extra}`;
+}
+
+/** 工具调用参数的简短摘要（用于卡片副标题）。 */
+export function toolParamSummary(name: string, input: unknown): string {
+  const g = (k: string): string => {
+    if (input && typeof input === "object") {
+      const v = (input as Record<string, unknown>)[k];
+      return v != null ? String(v) : "";
+    }
+    return "";
+  };
+  switch (name) {
+    case "Bash": return g("command");
+    case "Read":
+    case "Edit":
+    case "Write": return g("file_path");
+    case "Grep":
+    case "Glob": return g("pattern");
+    case "WebSearch": return g("query");
+    case "WebFetch": return g("url");
+    case "TaskCreate": return g("subject") || g("description");
+    case "TaskUpdate": return "#" + g("taskId") + " → " + g("status");
+    case "TaskGet": return "#" + g("taskId");
+    case "TaskList": return "";
+    case "Agent": return g("description");
+    default: return safeJson(input).slice(0, 80);
+  }
+}
+
+const TOOL_ICONS: Record<string, string> = {
+  Bash: "▶", Read: "📄", Edit: "✎", Write: "✎", Grep: "🔎", Glob: "🗂",
+  WebSearch: "🌐", WebFetch: "🌐", TaskCreate: "📌", TaskUpdate: "📌",
+  TaskGet: "📌", TaskList: "📌", Agent: "🤖",
+};
+
+export function toolIcon(name: string): string {
+  return TOOL_ICONS[name] ?? "🛠";
+}
+
+// ---- 以下返回 HTML 片段，组件用 dangerouslySetInnerHTML 渲染 ----
+
+export function section(label: string, content: string): string {
+  return `<div class="detail-section"><div class="detail-label">${label}</div><div class="detail-content">${content}</div></div>`;
+}
+
+export function textBlock(s: string): string {
+  return `<div class="detail-text">${escapeHtml(s)}</div>`;
+}
+
+export function jsonBlock(v: unknown): string {
+  let s = escapeHtml(safeJson(v));
+  s = s.replace(/(&quot;.*?&quot;)(\s*:)/g, '<span class="j-key">$1</span>$2');
+  s = s.replace(/(:\s*)(&quot;.*?&quot;)(?=[,\n]|$)/g, '$1<span class="j-str">$2</span>');
+  s = s.replace(/(:\s*)(-?\d+(?:\.\d+)?)/g, '$1<span class="j-num">$2</span>');
+  s = s.replace(/(:\s*)(true|false|null)/g, '$1<span class="j-bool">$2</span>');
+  return `<div class="detail-json">${s}</div>`;
+}
+
+/** 事件详情面板完整 HTML。 */
+export function formatDetail(payload: unknown): string {
+  const p = (payload ?? {}) as Payload;
+  const parts: string[] = [];
+  if (typeof p.prompt === "string") parts.push(section("用户提问", textBlock(p.prompt)));
+  if (typeof p.last_assistant_message === "string") parts.push(section("Claude 回复", textBlock(p.last_assistant_message)));
+  if (typeof p.tool_name === "string") {
+    parts.push(`<div class="detail-section"><div class="detail-label">工具</div><div class="detail-content"><code class="tool-name">${escapeHtml(p.tool_name)}</code></div></div>`);
+  }
+  if (p.tool_input != null) parts.push(section("工具输入", jsonBlock(p.tool_input)));
+  if (p.tool_response != null) parts.push(section("工具结果", jsonBlock(p.tool_response)));
+  if (typeof p.reason === "string") parts.push(section("原因", textBlock(p.reason)));
+  if (typeof p.source === "string") parts.push(section("来源", textBlock(p.source)));
+  if (!parts.length) parts.push(section("原始数据", jsonBlock(payload)));
+  return parts.join("");
+}
+
+/** Write 工具内容预览（前 50 行）。 */
+export function renderContentBlock(content: unknown): string {
+  const all = String(content || "").split("\n");
+  const shown = all.slice(0, 50);
+  const rows = shown.map((l) => `<div class="diff-line ctx"><span class="diff-text">${escapeHtml(l)}</span></div>`);
+  if (all.length > shown.length) {
+    rows.push(`<div class="diff-folds">⋯ 共 ${all.length} 行，前 ${shown.length} 行</div>`);
+  }
+  return `<div class="diff-block">${rows.join("")}</div>`;
+}

package/ui/lib/util.ts

@@ -0,0 +1,106 @@
+// 字符串 / 格式工具（从原 app.js 搬运，改 TS 签名）。
+import type { TokenUsage, TranscriptMessage } from "../types";
+
+const HTML_ESCAPES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+};
+
+export function escapeHtml(s: unknown): string {
+  return String(s).replace(/[&<>"']/g, (c) => HTML_ESCAPES[c] ?? c);
+}
+
+export function fmtTime(ts: number): string {
+  const d = new Date(ts);
+  return d.toLocaleTimeString() + "." + String(d.getMilliseconds()).padStart(3, "0");
+}
+
+/** 带日期的时间（提交跨天，需日期）：MM-DD HH:MM。 */
+export function fmtDateTime(ts: number): string {
+  const d = new Date(ts);
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mi = String(d.getMinutes()).padStart(2, "0");
+  return `${mm}-${dd} ${hh}:${mi}`;
+}
+
+export function brief(s: unknown, n = 80): string {
+  const t = String(s).replace(/\s+/g, " ").trim();
+  return t.length > n ? t.slice(0, n) + "…" : t;
+}
+
+export function safeJson(v: unknown): string {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+
+/** 紧凑数字：1234 → "1.2k"，1234567 → "1.2M"，<1000 原样。 */
+export function fmtTokens(n: number): string {
+  if (!Number.isFinite(n) || n < 1000) return String(n);
+  if (n < 1_000_000) return trimZero((n / 1000).toFixed(1)) + "k";
+  return trimZero((n / 1_000_000).toFixed(1)) + "M";
+}
+
+/** token 用量简写：↑输入 ↓输出（cache 明细放 title）。无值返回空串。 */
+export function fmtUsage(u?: Pick<TokenUsage, "input" | "output"> | null): string {
+  if (!u) return "";
+  return `↑${fmtTokens(u.input)} ↓${fmtTokens(u.output)}`;
+}
+
+/** 完整 token 用量（input/output/cacheCreation/cacheRead），用于 title 提示。 */
+export function fmtUsageFull(u?: TokenUsage | null): string {
+  if (!u) return "";
+  return `输入 ${u.input} · 输出 ${u.output} · 缓存写 ${u.cacheCreation} · 缓存读 ${u.cacheRead}`;
+}
+
+function trimZero(s: string): string {
+  return s.replace(/\.0$/, "");
+}
+
+/** 累加 assistant 消息的 usage（对话视图会话级汇总）。 */
+export function sumUsage(messages: TranscriptMessage[]): TokenUsage {
+  const total: TokenUsage = { input: 0, output: 0, cacheCreation: 0, cacheRead: 0 };
+  for (const m of messages) {
+    if (m.usage) {
+      total.input += m.usage.input;
+      total.output += m.usage.output;
+      total.cacheCreation += m.usage.cacheCreation;
+      total.cacheRead += m.usage.cacheRead;
+    }
+  }
+  return total;
+}
+
+/** 累加若干 TokenUsage（可为 null/undefined，如未被 enrich 的旧会话），返回总量与有效条数。
+ *  顶栏全局 token 用：sessions 里仅最近 N 个有 tokenTotal，count 反映实际覆盖的会话数。 */
+export function sumTokenUsage(
+  usages: (TokenUsage | null | undefined)[],
+): { total: TokenUsage; count: number } {
+  const total: TokenUsage = { input: 0, output: 0, cacheCreation: 0, cacheRead: 0 };
+  let count = 0;
+  for (const u of usages) {
+    if (u) {
+      total.input += u.input;
+      total.output += u.output;
+      total.cacheCreation += u.cacheCreation;
+      total.cacheRead += u.cacheRead;
+      count++;
+    }
+  }
+  return { total, count };
+}
+
+/** 路径取末段作项目名（汇总页显示用）："/a/b/shine-code-submit" → "shine-code-submit"。 */
+export function shortDir(p: string): string {
+  if (!p) return "";
+  const t = p.replace(/[\\/]+$/, "");
+  const i = Math.max(t.lastIndexOf("/"), t.lastIndexOf("\\"));
+  return i >= 0 ? t.slice(i + 1) : t;
+}

package/ui/state/AppContext.tsx

@@ -0,0 +1,65 @@
+// 全局状态聚合：只保留跨模块共享的导航态 + 全局轮询数据。
+// 各视图数据（events/messages/commits）下沉到模块组件自管 hook，互不覆盖。
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+import { useApi } from "../hooks/useApi";
+import { useStatsPolling } from "../hooks/useStatsPolling";
+import type { ModuleId, SessionSummary, StatsResponse } from "../types";
+
+export interface AppContextValue {
+  token: string;
+  // 全局轮询
+  stats: StatsResponse | null;
+  sessions: SessionSummary[];
+  // 导航
+  selectedSessionId: string | null;       // 仅「会话」模块详情用
+  activeModule: ModuleId;
+  navCollapsed: boolean;
+  // setters
+  setSelectedSessionId: Dispatch<SetStateAction<string | null>>;
+  selectModule: (m: ModuleId) => void;
+  setNavCollapsed: Dispatch<SetStateAction<boolean>>;
+}
+
+const AppContext = createContext<AppContextValue | null>(null);
+
+export function AppProvider({ token, children }: { token: string; children: ReactNode }) {
+  const [stats, setStats] = useState<StatsResponse | null>(null);
+  const [sessions, setSessions] = useState<SessionSummary[]>([]);
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
+  const [activeModule, setActiveModule] = useState<ModuleId>("overview");
+  const [navCollapsed, setNavCollapsed] = useState(false);
+
+  const api = useApi(token);
+  useStatsPolling(api, setStats, setSessions);
+
+  const selectModule = useCallback((m: ModuleId) => {
+    setActiveModule(m);
+  }, []);
+
+  const value: AppContextValue = {
+    token,
+    stats,
+    sessions,
+    selectedSessionId,
+    activeModule,
+    navCollapsed,
+    setSelectedSessionId,
+    selectModule,
+    setNavCollapsed,
+  };
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+}
+
+export function useApp(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error("useApp must be used within <AppProvider>");
+  return ctx;
+}