shine-code-submit 0.2.0

package/ui/app.tsx

@@ -0,0 +1,31 @@
+// Shine Code Submit 查看页（React 入口）。token 从 URL ?t= 取、存 sessionStorage 后清掉 URL；
+// 随后 createRoot 挂载 <App/>（AppProvider 在 App 内部包裹全局状态）。
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./components/App";
+
+const TOKEN_KEY = "shine_code_submit_token";
+
+function getToken(): string | null {
+  const fromUrl = new URLSearchParams(location.search).get("t");
+  if (fromUrl) {
+    sessionStorage.setItem(TOKEN_KEY, fromUrl);
+    history.replaceState(null, "", location.pathname);
+    return fromUrl;
+  }
+  return sessionStorage.getItem(TOKEN_KEY);
+}
+
+const token = getToken();
+const root = document.getElementById("root")!;
+if (!token) {
+  root.innerHTML =
+    '<div style="padding:2rem;font-family:sans-serif;color:#ccc;background:#0f1115;min-height:100vh">' +
+    "缺少 token。请通过 <code>shine-code-submit ui</code> 命令打开。</div>";
+} else {
+  createRoot(root).render(
+    <StrictMode>
+      <App token={token} />
+    </StrictMode>,
+  );
+}

package/ui/components/App.tsx

@@ -0,0 +1,55 @@
+import { AppProvider, useApp } from "../state/AppContext";
+import { Header } from "./Header";
+import { SideNav } from "./SideNav";
+import { SessionsModule } from "./SessionsModule";
+import { EventsModule } from "./EventsModule";
+import { CommitsModule } from "./CommitsModule";
+import { OverviewModule } from "./OverviewModule";
+import { StatsModule } from "./StatsModule";
+import { SystemModule } from "./SystemModule";
+
+/** 模块路由：按 activeModule 渲染对应模块。 */
+function ModuleRouter() {
+  const { activeModule } = useApp();
+  switch (activeModule) {
+    case "overview":
+      return <OverviewModule />;
+    case "sessions":
+      return <SessionsModule />;
+    // case "events":
+    //   return <EventsModule />;        // 暂时屏蔽
+    // case "commits":
+    //   return <CommitsModule />;       // 暂时屏蔽
+    case "stats":
+      return <StatsModule />;
+    case "system":
+      return <SystemModule />;
+    default:
+      return <OverviewModule />;
+  }
+}
+
+function Layout() {
+  const { navCollapsed } = useApp();
+  return (
+    <>
+      <Header />
+      <div className="body-middle">
+        <aside id="nav-panel" className={`panel${navCollapsed ? " collapsed" : ""}`}>
+          <SideNav />
+        </aside>
+        <section id="events-panel" className="panel">
+          <ModuleRouter />
+        </section>
+      </div>
+    </>
+  );
+}
+
+export function App({ token }: { token: string }) {
+  return (
+    <AppProvider token={token}>
+      <Layout />
+    </AppProvider>
+  );
+}

package/ui/components/CommitsModule.tsx

@@ -0,0 +1,25 @@
+import { useApi } from "../hooks/useApi";
+import { useCommits } from "../hooks/useCommits";
+import { useApp } from "../state/AppContext";
+import { CommitsView } from "./CommitsView";
+
+/** 提交模块：最近活跃项目（sessions[0].cwd）的 git log。
+ *  Step 3：cwd 自管（不再依赖 selectedSessionId），数据经 useCommits 拉取。 */
+export function CommitsModule() {
+  const { token, sessions } = useApp();
+  const api = useApi(token);
+  const cwd = sessions[0]?.cwd ?? null;
+  const { commits, loading, error } = useCommits(api, cwd, true);
+  return (
+    <>
+      <div className="toolbar">
+        {cwd && (
+          <span className="filter-label" title={cwd}>
+            {cwd}
+          </span>
+        )}
+      </div>
+      <CommitsView commits={commits} loading={loading} error={error} cwd={cwd} />
+    </>
+  );
+}

package/ui/components/CommitsView.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Icon } from "./Icon";
+import { fmtDateTime } from "../lib/util";
+import type { CommitLog } from "../types";
+
+/** 单条提交：时间 + +新增/-删除 + 说明 + 作者；点击展开文件级明细。 */
+function CommitRow({ c }: { c: CommitLog }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li
+      className={`commit${open ? " open" : ""}`}
+      title="点击展开/收起文件明细"
+      onClick={() => setOpen((v) => !v)}
+    >
+      <div className="commit-row">
+        <span className="commit-ts">{fmtDateTime(c.time)}</span>
+        <span className="commit-add">+{c.added}</span>
+        <span className="commit-del">-{c.deleted}</span>
+        <span className="commit-subject">{c.subject || "(无说明)"}</span>
+        <span className="commit-author">{c.author}</span>
+      </div>
+      {open && c.files.length > 0 && (
+        <ul className="commit-files">
+          {c.files.map((f, i) => (
+            <li key={i} className="commit-file">
+              <span className="cf-add">+{f.added}</span>
+              <span className="cf-del">-{f.deleted}</span>
+              <span className="cf-path">{f.path}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+/** 提交列表（props 驱动，Step 3 下沉）。数据由 CommitsModule 经 useCommits 传入。 */
+export function CommitsView({
+  commits,
+  loading,
+  error,
+  cwd,
+}: {
+  commits: CommitLog[];
+  loading: boolean;
+  error: string | null;
+  cwd: string | null;
+}) {
+  let body;
+  // 仅首次加载（无缓存）才显加载态；切回已有数据静默刷新
+  if (loading && commits.length === 0) {
+    body = (
+      <div className="empty-state">
+        <span className="es-hint">加载提交…</span>
+      </div>
+    );
+  } else if (error) {
+    body = (
+      <div className="empty-state">
+        <Icon name="warning" size={28} />
+        <span className="es-hint">{error}</span>
+        {cwd && <span className="es-sub">{cwd}</span>}
+      </div>
+    );
+  } else if (!commits.length) {
+    body = (
+      <div className="empty-state">
+        <Icon name="inbox" size={30} />
+        <span className="es-hint">暂无提交</span>
+        <span className="es-sub">该仓库最近无提交记录</span>
+      </div>
+    );
+  } else {
+    body = (
+      <ul id="commits" className="commit-list">
+        {commits.map((c) => (
+          <CommitRow key={c.hash} c={c} />
+        ))}
+      </ul>
+    );
+  }
+
+  return <div id="commits-view" className="commits-view">{body}</div>;
+}

package/ui/components/Conversation.tsx

@@ -0,0 +1,101 @@
+import { useMemo, type ReactNode } from "react";
+import { fmtTokens, fmtUsage, fmtUsageFull, sumUsage } from "../lib/util";
+import type { TranscriptMessage } from "../types";
+import { Icon } from "./Icon";
+import { Message } from "./Message";
+
+function msgMatches(m: TranscriptMessage, q: string): boolean {
+  if (!q) return true;
+  if ((m.text || "").toLowerCase().includes(q)) return true;
+  if ((m.thinking || "").toLowerCase().includes(q)) return true;
+  if ((m.toolName || "").toLowerCase().includes(q)) return true;
+  return (m.tools || []).some(
+    (t) =>
+      (t.name || "").toLowerCase().includes(q) ||
+      JSON.stringify(t.input).toLowerCase().includes(q),
+  );
+}
+
+function Skeleton() {
+  return (
+    <>
+      <div className="skeleton skel-bubble" />
+      <div className="skeleton skel-block" />
+      <div className="skeleton skel-bubble" />
+      <div className="skeleton skel-block" style={{ width: "68%" }} />
+    </>
+  );
+}
+
+/** 对话视图：Step 2 起改为 props 驱动（去 Context），供 SessionDetail 复用。
+ *  数据（messages/loading/error）与搜索态由调用方传入。 */
+export function Conversation({
+  messages,
+  loading,
+  error,
+  search,
+}: {
+  messages: TranscriptMessage[];
+  loading: boolean;
+  error: string | null;
+  search: string;
+}) {
+  const q = search.trim().toLowerCase();
+  const shown = useMemo(
+    () => (q ? messages.filter((m) => msgMatches(m, q)) : messages),
+    [messages, q],
+  );
+  const tokenTotal = useMemo(() => sumUsage(messages), [messages]);
+
+  let body: ReactNode;
+  // 仅首次加载（无缓存数据）才显骨架；切回已有数据时静默刷新，避免切换闪烁
+  if (loading && messages.length === 0) {
+    body = <Skeleton />;
+  } else if (error) {
+    body = (
+      <div className="empty-state">
+        <Icon name="warning" size={28} />
+        <span className="es-hint">加载失败</span>
+        <span className="es-sub">{error}</span>
+      </div>
+    );
+  } else if (!messages.length) {
+    body = (
+      <div className="empty-state">
+        <Icon name="chat" size={30} />
+        <span className="es-hint">暂无对话</span>
+        <span className="es-sub">该会话无 transcript 或尚未产生对话</span>
+      </div>
+    );
+  } else if (!shown.length) {
+    body = (
+      <div className="empty-state">
+        <span className="es-hint">无匹配消息</span>
+        <span className="es-sub">“{search}” 未命中（0/{messages.length}）</span>
+      </div>
+    );
+  } else {
+    body = (
+      <>
+        {q && <div className="search-count">{`${shown.length}/${messages.length} 条匹配`}</div>}
+        {shown.map((m, i) => (
+          <Message key={i} m={m} />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <div id="conversation" className="conversation">
+      {!loading && !error && messages.length > 0 && (tokenTotal.input > 0 || tokenTotal.output > 0) && (
+        <div className="conv-token-bar" title={fmtUsageFull(tokenTotal)}>
+          本会话累计 <b>{fmtUsage(tokenTotal)}</b>
+          <span className="conv-token-cache">
+            {" "}· 缓存读 {fmtTokens(tokenTotal.cacheRead)} / 写 {fmtTokens(tokenTotal.cacheCreation)}
+          </span>
+        </div>
+      )}
+      {body}
+    </div>
+  );
+}

package/ui/components/DiffBlock.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import type { DiffLine } from "../lib/diff";
+
+/** 渲染行级 diff（连续 >3 行 context 折叠为蓝色分隔条）。 */
+export function DiffBlock({ diffs }: { diffs: DiffLine[] }) {
+  const rows: ReactNode[] = [];
+  let ctxBuf: DiffLine[] = [];
+  let key = 0;
+  const flushCtx = () => {
+    if (!ctxBuf.length) return;
+    if (ctxBuf.length <= 3) {
+      for (const dl of ctxBuf) {
+        rows.push(
+          <div className="diff-line ctx" key={key++}>
+            <span className="diff-text">{dl.text}</span>
+          </div>,
+        );
+      }
+    } else {
+      const first = ctxBuf[0]!;
+      const last = ctxBuf[ctxBuf.length - 1]!;
+      rows.push(
+        <div className="diff-line ctx" key={key++}>
+          <span className="diff-text">{first.text}</span>
+        </div>,
+      );
+      rows.push(
+        <div className="diff-folds" key={key++}>
+          ⋯ {ctxBuf.length - 2} 行未改
+        </div>,
+      );
+      rows.push(
+        <div className="diff-line ctx" key={key++}>
+          <span className="diff-text">{last.text}</span>
+        </div>,
+      );
+    }
+    ctxBuf = [];
+  };
+  for (const dl of diffs) {
+    if (dl.op === "ctx") {
+      ctxBuf.push(dl);
+      continue;
+    }
+    flushCtx();
+    if (dl.op === "add") {
+      rows.push(
+        <div className="diff-line add" key={key++}>
+          <span className="diff-sign">+</span>
+          <span className="diff-text">{dl.text}</span>
+        </div>,
+      );
+    } else {
+      rows.push(
+        <div className="diff-line del" key={key++}>
+          <span className="diff-sign">-</span>
+          <span className="diff-text">{dl.text}</span>
+        </div>,
+      );
+    }
+  }
+  flushCtx();
+  return <div className="diff-block">{rows}</div>;
+}

package/ui/components/EventDetail.tsx

@@ -0,0 +1,8 @@
+import { formatDetail } from "../lib/format";
+
+/** 事件详情：formatDetail 产出 HTML（内部已 escapeHtml），用 dangerouslySetInnerHTML 渲染。 */
+export function EventDetail({ payload }: { payload: unknown }) {
+  return (
+    <div className="event-detail" dangerouslySetInnerHTML={{ __html: formatDetail(payload) }} />
+  );
+}

package/ui/components/EventItem.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { eventSummary } from "../lib/format";
+import { fmtTime } from "../lib/util";
+import type { HookEvent } from "../types";
+import { EventDetail } from "./EventDetail";
+
+export function EventItem({ ev }: { ev: HookEvent }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li
+      className={`event ${ev.type}${open ? " open" : ""}`}
+      title="点击展开/收起完整内容"
+      onClick={() => setOpen((v) => !v)}
+    >
+      <div className="event-row">
+        <span className="ts">{fmtTime(ev.timestamp)}</span>
+        <span className="type">{ev.type}</span>
+        <span className="sess">{ev.sessionId.slice(0, 10)}</span>
+        <span className="summary">{eventSummary(ev)}</span>
+      </div>
+      {open && <EventDetail payload={ev.payload} />}
+    </li>
+  );
+}

package/ui/components/EventList.tsx

@@ -0,0 +1,22 @@
+import type { HookEvent } from "../types";
+import { Icon } from "./Icon";
+import { EventItem } from "./EventItem";
+
+export function EventList({ events, filtered }: { events: HookEvent[]; filtered: boolean }) {
+  if (events.length === 0) {
+    return (
+      <div className="empty-state">
+        <Icon name="inbox" size={30} />
+        <span className="es-hint">还没有事件</span>
+        <span className="es-sub">在 Claude Code 里开个会话，事件会实时出现在这里</span>
+      </div>
+    );
+  }
+  return (
+    <ul id="events" className={`event-list${filtered ? " filtered" : ""}`}>
+      {events.map((ev) => (
+        <EventItem key={ev.eventId} ev={ev} />
+      ))}
+    </ul>
+  );
+}

package/ui/components/EventsModule.tsx

@@ -0,0 +1,123 @@
+import { useMemo, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useEvents } from "../hooks/useEvents";
+import { useWebSocket } from "../hooks/useWebSocket";
+import { useApp } from "../state/AppContext";
+import { download } from "../lib/export";
+import { fmtUsage, fmtUsageFull, shortDir } from "../lib/util";
+import { Icon } from "./Icon";
+import { EventList } from "./EventList";
+import { SessionTree } from "./SessionTree";
+import { Splitter } from "./Splitter";
+import type { HookEvent } from "../types";
+
+/** 事件模块（统一事件入口）：左侧会话树（筛选）+ 右侧事件流。
+ *  选会话 → 顶部显该会话摘要（sid/cwd/token，与对话页对称）+ 只看该会话事件；
+ *  全部 → 跨会话全局实时流。树宽可拖拽（--tree-w）。 */
+export function EventsModule() {
+  const { token, sessions } = useApp();
+  const api = useApi(token);
+  const [search, setSearch] = useState("");
+  const [sessionFilter, setSessionFilter] = useState<string | null>(null);
+  const [live, setLive] = useState<HookEvent[]>([]);
+  const { events, loading, error } = useEvents(api, sessionFilter, true);
+  useWebSocket(token, (ev) => setLive((prev) => [ev, ...prev].slice(0, 200)));
+
+  const session = sessionFilter ? sessions.find((s) => s.sessionId === sessionFilter) : undefined;
+  const tokenTotal = session?.tokenTotal ?? null;
+
+  const all = useMemo(() => {
+    const seen = new Set<string>();
+    const merged: HookEvent[] = [];
+    for (const ev of [...live, ...events]) {
+      if (sessionFilter && ev.sessionId !== sessionFilter) continue;
+      if (seen.has(ev.eventId)) continue;
+      seen.add(ev.eventId);
+      merged.push(ev);
+    }
+    return merged;
+  }, [live, events, sessionFilter]);
+
+  const q = search.trim().toLowerCase();
+  const filtered = useMemo(() => {
+    if (!q) return all;
+    return all.filter((ev) =>
+      (ev.type + " " + JSON.stringify(ev.payload ?? "")).toLowerCase().includes(q),
+    );
+  }, [all, q]);
+
+  const onExport = () => {
+    const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+    const sid = sessionFilter ? sessionFilter.slice(0, 8) : "all";
+    download(`events-${sid}-${stamp}.json`, JSON.stringify(filtered, null, 2), "application/json");
+  };
+
+  let body;
+  if (loading && all.length === 0) {
+    body = (
+      <div className="empty-state">
+        <span className="es-hint">加载事件…</span>
+      </div>
+    );
+  } else if (error) {
+    body = (
+      <div className="empty-state">
+        <Icon name="warning" size={28} />
+        <span className="es-hint">{error}</span>
+      </div>
+    );
+  } else {
+    body = <EventList events={filtered} filtered={false} />;
+  }
+
+  return (
+    <div className="events-with-tree">
+      <aside className="events-tree-panel panel">
+        <div className="panel-header">
+          <h2>会话</h2>
+        </div>
+        <SessionTree selectedId={sessionFilter} onSelect={setSessionFilter} allLabel="全部会话" />
+      </aside>
+      <Splitter orient="v" varName="--tree-w" />
+      <div className="events-main">
+        {session && (
+          <div className="detail-head">
+            <span className="detail-sid" title={session.sessionId}>
+              {session.sessionId.slice(0, 8)}
+            </span>
+            {session.cwd && (
+              <span className="detail-cwd" title={session.cwd}>
+                {shortDir(session.cwd)}
+              </span>
+            )}
+            {tokenTotal && (tokenTotal.input > 0 || tokenTotal.output > 0) && (
+              <span className="detail-token" title={fmtUsageFull(tokenTotal)}>
+                {fmtUsage(tokenTotal)}
+              </span>
+            )}
+          </div>
+        )}
+        <div className="toolbar">
+          <input
+            className="search-input"
+            type="search"
+            placeholder="搜索事件…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            autoComplete="off"
+          />
+          <button
+            className="icon-btn"
+            type="button"
+            title="导出事件为 JSON"
+            aria-label="导出"
+            onClick={onExport}
+          >
+            <Icon name="download" />
+          </button>
+        </div>
+        {body}
+      </div>
+    </div>
+  );
+}

package/ui/components/Header.tsx

@@ -0,0 +1,15 @@
+import { Icon } from "./Icon";
+import { Status } from "./Status";
+
+/** 顶栏：标题 + 右侧运行状态（Step 5 移除 log toggle，日志已收进「系统」模块）。 */
+export function Header() {
+  return (
+    <header>
+      <div className="title">
+        <Icon name="diamond" size={14} />
+        <span>Shine Code Submit</span>
+      </div>
+      <Status />
+    </header>
+  );
+}

package/ui/components/Icon.tsx

@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+
+/** 统一图标：24×24 viewBox、stroke=currentColor、1.6 描边、圆角端点。
+ *  跨平台渲染一致（替代 emoji/几何符号），尺寸随 --icon 或 size 覆盖。 */
+export type IconName =
+  | "sessions"
+  | "log"
+  | "download"
+  | "close"
+  | "chevron"
+  | "info"
+  | "inbox"
+  | "chat"
+  | "diamond"
+  | "activity"
+  | "warning"
+  | "home"
+  | "git"
+  | "chart"
+  | "server";
+
+const PATHS: Record<IconName, ReactNode> = {
+  sessions: (
+    <>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M9 3v18" />
+    </>
+  ),
+  log: (
+    <>
+      <rect x="6" y="3" width="12" height="18" rx="2" />
+      <path d="M9 8h6 M9 12h6 M9 16h3" />
+    </>
+  ),
+  download: (
+    <>
+      <path d="M12 3v12" />
+      <path d="M7 10l5 5 5-5" />
+      <path d="M5 21h14" />
+    </>
+  ),
+  close: <path d="M6 6l12 12 M18 6L6 18" />,
+  chevron: <path d="M9 6l6 6-6 6" />,
+  info: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5 M12 8h.01" />
+    </>
+  ),
+  inbox: (
+    <>
+      <path d="M3 12h5l2 3h4l2-3h5" />
+      <rect x="4" y="4" width="16" height="16" rx="1" />
+    </>
+  ),
+  chat: <path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z" />,
+  diamond: <path d="M12 3l9 9-9 9-9-9z" />,
+  activity: <path d="M3 12h4l3-8 4 16 3-8h4" />,
+  warning: (
+    <>
+      <path d="M12 3l9 17H3z" />
+      <path d="M12 10v4 M12 17h.01" />
+    </>
+  ),
+  home: (
+    <>
+      <path d="M3 11l9-8 9 8" />
+      <path d="M5 10v10h4v-6h6v6h4V10" />
+    </>
+  ),
+  git: (
+    <>
+      <circle cx="6" cy="6" r="2" />
+      <circle cx="6" cy="18" r="2" />
+      <circle cx="18" cy="9" r="2" />
+      <path d="M6 8v8M15 9h1" />
+    </>
+  ),
+  chart: <path d="M4 20V12M10 20V5M16 20v-8M3 20h17" />,
+  server: (
+    <>
+      <rect x="4" y="4" width="16" height="6" rx="1" />
+      <rect x="4" y="14" width="16" height="6" rx="1" />
+      <path d="M8 7h.01M8 17h.01" />
+    </>
+  ),
+};
+
+export function Icon({
+  name,
+  size,
+  className,
+}: {
+  name: IconName;
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size ?? 16}
+      height={size ?? 16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={`icon icon-${name}${className ? " " + className : ""}`}
+      aria-hidden="true"
+    >
+      {PATHS[name]}
+    </svg>
+  );
+}