shine-code-submit 0.2.0

package/ui/components/Markdown.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { marked } from "marked";
+
+marked.setOptions({ gfm: true, breaks: false });
+
+/** marked 渲染（默认转义 HTML 防注入）→ dangerouslySetInnerHTML。useMemo 按 src 缓存。 */
+export function Markdown({ src }: { src: string }) {
+  const html = useMemo(() => {
+    const out = marked.parse(src);
+    return typeof out === "string" ? out : "";
+  }, [src]);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}

package/ui/components/Message.tsx

@@ -0,0 +1,60 @@
+import { fmtTime, fmtUsage, fmtUsageFull } from "../lib/util";
+import type { TranscriptMessage } from "../types";
+import { Icon } from "./Icon";
+import { Markdown } from "./Markdown";
+import { ToolCard } from "./ToolCard";
+
+/** 单条对话消息：user（右气泡）/ tool（结果卡片）/ assistant（角色头 + 正文 + 工具卡）。 */
+export function Message({ m }: { m: TranscriptMessage }) {
+  if (m.role === "user") {
+    return (
+      <div className="msg-row user-row">
+        <div className="bubble">{m.text}</div>
+      </div>
+    );
+  }
+  if (m.role === "tool") {
+    return (
+      <div className="msg-row">
+        <details className={`result-card${m.isError ? " is-error" : ""}`}>
+          <summary className="card-trigger">
+            <span className="card-chev"><Icon name="chevron" size={12} /></span>
+            <span className="result-label">{m.toolName || "结果"}</span>
+          </summary>
+          <pre className="card-output">{m.text}</pre>
+        </details>
+      </div>
+    );
+  }
+  return (
+    <div className="msg-row assistant-row">
+      <div className="role-head">
+        <span className="role-mark"><Icon name="diamond" size={10} /></span>
+        <span className="role-name">Claude</span>
+        {m.usage && (
+          <span className="role-tokens" title={fmtUsageFull(m.usage)}>{fmtUsage(m.usage)}</span>
+        )}
+        {m.ts != null && <span className="role-ts">{fmtTime(m.ts)}</span>}
+      </div>
+      {m.thinking && (
+        <details className="think-card">
+          <summary className="card-trigger">
+            <span className="card-chev"><Icon name="chevron" size={12} /></span>
+            <span className="think-label">Thinking</span>
+          </summary>
+          <div className="think-body">
+            <Markdown src={m.thinking} />
+          </div>
+        </details>
+      )}
+      {m.text && (
+        <div className="assistant-text msg-text">
+          <Markdown src={m.text} />
+        </div>
+      )}
+      {m.tools.map((t, i) => (
+        <ToolCard key={i} t={t} />
+      ))}
+    </div>
+  );
+}

package/ui/components/OverviewModule.tsx

@@ -0,0 +1,86 @@
+import { useMemo } from "react";
+import { useApi } from "../hooks/useApi";
+import { useEvents } from "../hooks/useEvents";
+import { useAllCommits } from "../hooks/useAllCommits";
+import { useApp } from "../state/AppContext";
+import { fmtDateTime, fmtTokens, shortDir, sumTokenUsage } from "../lib/util";
+
+interface TimelineItem {
+  ts: number;
+  kind: "event" | "commit";
+  text: string;
+  cwd: string;
+}
+
+/** 概览首页：KPI 卡（token/会话/事件/提交）+ 近期活动时间线（事件与提交混合，按时间倒序）。 */
+export function OverviewModule() {
+  const { token, sessions, stats } = useApp();
+  const api = useApi(token);
+  const { events } = useEvents(api, null, true);
+  const { commits } = useAllCommits(api, sessions, true);
+
+  const tokenSum = useMemo(() => sumTokenUsage(sessions.map((s) => s.tokenTotal)), [sessions]);
+  const recent = useMemo<TimelineItem[]>(() => {
+    const es: TimelineItem[] = events.slice(0, 20).map((e) => ({
+      ts: e.timestamp,
+      kind: "event",
+      text: e.type,
+      cwd: e.cwd,
+    }));
+    const cs: TimelineItem[] = commits.slice(0, 20).map((c) => ({
+      ts: c.time,
+      kind: "commit",
+      text: c.subject || "(无说明)",
+      cwd: c.cwd,
+    }));
+    return [...es, ...cs].sort((a, b) => b.ts - a.ts).slice(0, 20);
+  }, [events, commits]);
+
+  return (
+    <div className="overview-view">
+      <div className="kpi-grid">
+        <div className="kpi-card">
+          <span className="kpi-label">Token 输入</span>
+          <b className="kpi-value">{fmtTokens(tokenSum.total.input)}</b>
+        </div>
+        <div className="kpi-card">
+          <span className="kpi-label">Token 输出</span>
+          <b className="kpi-value">{fmtTokens(tokenSum.total.output)}</b>
+        </div>
+        <div className="kpi-card">
+          <span className="kpi-label">会话数</span>
+          <b className="kpi-value">{sessions.length}</b>
+        </div>
+        <div className="kpi-card">
+          <span className="kpi-label">事件总数</span>
+          <b className="kpi-value">{stats?.totalEvents ?? 0}</b>
+        </div>
+        <div className="kpi-card">
+          <span className="kpi-label">提交数</span>
+          <b className="kpi-value">{commits.length}</b>
+        </div>
+      </div>
+      <section className="sum-section">
+        <div className="sum-head">
+          <h3>近期活动</h3>
+        </div>
+        {recent.length === 0 ? (
+          <div className="sum-empty">暂无活动</div>
+        ) : (
+          <ul className="sum-list">
+            {recent.map((it, i) => (
+              <li key={i}>
+                <span className="sum-ts">{fmtDateTime(it.ts)}</span>
+                <span className={`tl-kind ${it.kind}`}>{it.kind === "event" ? "事件" : "提交"}</span>
+                <span className="sum-cwd" title={it.cwd}>
+                  {shortDir(it.cwd) || "?"}
+                </span>
+                <span className="sum-subject">{it.text}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}

package/ui/components/SessionDetail.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useConversation } from "../hooks/useConversation";
+import { useApp } from "../state/AppContext";
+import { fmtUsage, fmtUsageFull, shortDir } from "../lib/util";
+import { Conversation } from "./Conversation";
+
+/** 会话详情（右侧）：顶部摘要（sid/cwd/token）+ 该会话对话。
+ *  两栏布局下不再需要返回按钮（左侧树常驻，选会话即切换）。 */
+export function SessionDetail({ sessionId }: { sessionId: string }) {
+  const { token, sessions } = useApp();
+  const api = useApi(token);
+  const [searchConv, setSearchConv] = useState("");
+  const { messages, loading, error } = useConversation(api, sessionId, true);
+
+  const session = sessions.find((s) => s.sessionId === sessionId);
+  const tokenTotal = session?.tokenTotal ?? null;
+
+  return (
+    <div className="session-detail">
+      <div className="detail-head">
+        <span className="detail-sid" title={sessionId}>
+          {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={searchConv}
+          onChange={(e) => setSearchConv(e.target.value)}
+          autoComplete="off"
+        />
+      </div>
+      <div className="detail-body">
+        <Conversation messages={messages} loading={loading} error={error} search={searchConv} />
+      </div>
+    </div>
+  );
+}

package/ui/components/SessionTree.tsx

@@ -0,0 +1,94 @@
+import { useMemo, useState } from "react";
+import { useApp } from "../state/AppContext";
+import { fmtDateTime, fmtUsage, fmtUsageFull } from "../lib/util";
+import type { SessionSummary } from "../types";
+
+/** 会话树（按 cwd 分组、可折叠、token 角标、时间点）。纯展示 + onSelect 回调。
+ *  会话模块用它选会话进详情；事件模块用它选会话筛选（allLabel 显「全部」项）。 */
+export function SessionTree({
+  selectedId,
+  onSelect,
+  allLabel,
+}: {
+  selectedId: string | null;
+  onSelect: (sid: string | null) => void;
+  allLabel?: string;
+}) {
+  const { sessions } = useApp();
+  const [collapsedCwds, setCollapsedCwds] = useState<Set<string>>(new Set());
+  const toggleCwd = (cwd: string) => {
+    setCollapsedCwds((prev) => {
+      const next = new Set(prev);
+      if (next.has(cwd)) next.delete(cwd);
+      else next.add(cwd);
+      return next;
+    });
+  };
+
+  const groups = useMemo(() => {
+    const g: Record<string, SessionSummary[]> = {};
+    for (const s of sessions) {
+      const arr = g[s.cwd] ?? (g[s.cwd] = []);
+      arr.push(s);
+    }
+    return g;
+  }, [sessions]);
+
+  const groupEntries = Object.entries(groups);
+
+  return (
+    <ul className="session-tree">
+      {allLabel && (
+        <li
+          className={`tree-all${selectedId === null ? " active" : ""}`}
+          onClick={() => onSelect(null)}
+        >
+          {allLabel}
+        </li>
+      )}
+      {groupEntries.length === 0 && !allLabel ? (
+        <li className="empty-state">
+          <span className="es-hint">暂无 session</span>
+          <span className="es-sub">启动 Claude Code 后会出现</span>
+        </li>
+      ) : (
+        groupEntries.map(([cwd, sess]) => {
+          const collapsed = collapsedCwds.has(cwd);
+          return (
+            <li className="group" key={cwd}>
+              <div className="group-head" title={cwd} onClick={() => toggleCwd(cwd)}>
+                <span className="group-caret">{collapsed ? "▸" : "▾"}</span>
+                <span className="group-cwd">{cwd}</span>
+              </div>
+              {!collapsed && (
+                <ul>
+                  {sess.map((s) => (
+                    <li
+                      key={s.sessionId}
+                      className={s.sessionId === selectedId ? "active" : undefined}
+                      title={s.sessionId}
+                      onClick={() => onSelect(s.sessionId)}
+                    >
+                      <div className="sess-row">
+                        <span className="sess-time">{fmtDateTime(s.lastActive)}</span>
+                        <span className="sess-sid">{s.sessionId.slice(0, 8)}</span>
+                        {s.tokenTotal && (s.tokenTotal.input > 0 || s.tokenTotal.output > 0) && (
+                          <span className="sess-tokens" title={fmtUsageFull(s.tokenTotal)}>
+                            {fmtUsage(s.tokenTotal)}
+                          </span>
+                        )}
+                      </div>
+                      <div className="sess-sub">
+                        {s.lastType ?? "?"} · {s.eventCount}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          );
+        })
+      )}
+    </ul>
+  );
+}

package/ui/components/SessionsModule.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useApp } from "../state/AppContext";
+import { SessionsPanel } from "./SessionsPanel";
+import { SessionDetail } from "./SessionDetail";
+import { Splitter } from "./Splitter";
+import { Icon } from "./Icon";
+
+/** 会话模块（两栏筛选式）：左侧会话树（选会话）+ 右侧该会话对话。
+ *  默认选中第一个会话；树宽可拖拽（--tree-w）。 */
+export function SessionsModule() {
+  const { selectedSessionId, setSelectedSessionId, sessions } = useApp();
+  // 默认选中第一个会话（首次进入或选中被清空时）
+  useEffect(() => {
+    const first = sessions[0];
+    if (!selectedSessionId && first) {
+      setSelectedSessionId(first.sessionId);
+    }
+  }, [selectedSessionId, sessions, setSelectedSessionId]);
+
+  return (
+    <div className="sessions-with-tree">
+      <aside className="sessions-tree-panel panel">
+        <SessionsPanel />
+      </aside>
+      <Splitter orient="v" varName="--tree-w" />
+      <div className="sessions-main">
+        {selectedSessionId ? (
+          <SessionDetail sessionId={selectedSessionId} />
+        ) : (
+          <div className="empty-state">
+            <Icon name="chat" size={30} />
+            <span className="es-hint">暂无会话</span>
+            <span className="es-sub">启动 Claude Code 后会出现</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/SessionsPanel.tsx

@@ -0,0 +1,15 @@
+import { useApp } from "../state/AppContext";
+import { SessionTree } from "./SessionTree";
+
+/** 会话模块列表：header + SessionTree（点击进详情）。 */
+export function SessionsPanel() {
+  const { selectedSessionId, setSelectedSessionId } = useApp();
+  return (
+    <>
+      <div className="panel-header">
+        <h2>Sessions</h2>
+      </div>
+      <SessionTree selectedId={selectedSessionId} onSelect={setSelectedSessionId} />
+    </>
+  );
+}

package/ui/components/SideNav.tsx

@@ -0,0 +1,46 @@
+import { useApp } from "../state/AppContext";
+import { Icon, type IconName } from "./Icon";
+import type { ModuleId } from "../types";
+
+/** 左侧模块导航：6 个一级模块，active 项左侧蓝条；底部折叠按钮收成图标条。 */
+const ITEMS: Array<{ id: ModuleId; label: string; icon: IconName }> = [
+  { id: "overview", label: "概览", icon: "home" },
+  { id: "sessions", label: "会话", icon: "sessions" },
+  // { id: "events", label: "事件", icon: "activity" },   // 暂时屏蔽，恢复取消注释即可
+  // { id: "commits", label: "提交", icon: "git" },        // 暂时屏蔽，恢复取消注释即可
+  { id: "stats", label: "统计", icon: "chart" },
+  { id: "system", label: "系统", icon: "server" },
+];
+
+export function SideNav() {
+  const { activeModule, selectModule, navCollapsed, setNavCollapsed } = useApp();
+  return (
+    <nav className={`side-nav${navCollapsed ? " collapsed" : ""}`}>
+      <ul className="nav-list">
+        {ITEMS.map((it) => (
+          <li key={it.id}>
+            <button
+              type="button"
+              className={`nav-item${activeModule === it.id ? " active" : ""}`}
+              title={it.label}
+              aria-label={it.label}
+              onClick={() => selectModule(it.id)}
+            >
+              <Icon name={it.icon} size={18} />
+              <span className="nav-label">{it.label}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        className="nav-collapse"
+        title={navCollapsed ? "展开导航" : "收起导航"}
+        aria-label={navCollapsed ? "展开导航" : "收起导航"}
+        onClick={() => setNavCollapsed(!navCollapsed)}
+      >
+        <Icon name="chevron" size={16} />
+      </button>
+    </nav>
+  );
+}

package/ui/components/Splitter.tsx

@@ -0,0 +1,23 @@
+import { useSplitter } from "../hooks/useSplitter";
+
+export function Splitter({
+  orient,
+  hidden,
+  varName,
+}: {
+  orient: "v" | "h";
+  hidden?: boolean;
+  varName?: string;
+}) {
+  const { ref, onMouseDown } = useSplitter(orient, varName);
+  const cls = `splitter splitter-${orient}${hidden ? " hidden" : ""}`;
+  return (
+    <div
+      ref={ref}
+      className={cls}
+      data-orient={orient}
+      onMouseDown={onMouseDown}
+      title={orient === "v" ? "拖拽调整宽度" : "拖拽调整高度"}
+    />
+  );
+}

package/ui/components/StatsModule.tsx

@@ -0,0 +1,133 @@
+import { useMemo, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useAllCommits } from "../hooks/useAllCommits";
+import { useApp } from "../state/AppContext";
+import { aggregateCommitsByProject, aggregateTokenByProject, bucketByDay } from "../lib/aggregate";
+import { fmtUsage, shortDir } from "../lib/util";
+
+type StatTab = "token" | "commits" | "day";
+
+/** 统计模块：tab 切换三个维度，每个 tab 单条形列表全宽显示（空间更大）。 */
+export function StatsModule() {
+  const { token, sessions } = useApp();
+  const api = useApi(token);
+  const { commits } = useAllCommits(api, sessions, true);
+  const [tab, setTab] = useState<StatTab>("token");
+
+  const projTokens = useMemo(() => aggregateTokenByProject(sessions), [sessions]);
+  const projCommits = useMemo(() => aggregateCommitsByProject(commits), [commits]);
+  const commitsByDay = useMemo(() => bucketByDay(commits.map((c) => c.time), 7), [commits]);
+
+  const maxToken = Math.max(1, ...projTokens.map((r) => r.token.input + r.token.output));
+  const maxCommitCount = Math.max(1, ...projCommits.map((r) => r.count));
+  const maxDayCount = Math.max(1, ...commitsByDay.map((b) => b.count));
+
+  return (
+    <div className="stats-view">
+      <div className="toolbar">
+        <div className="tabs">
+          <button
+            type="button"
+            className={`tab${tab === "token" ? " active" : ""}`}
+            onClick={() => setTab("token")}
+          >
+            Token 按项目
+          </button>
+          <button
+            type="button"
+            className={`tab${tab === "commits" ? " active" : ""}`}
+            onClick={() => setTab("commits")}
+          >
+            提交按项目
+          </button>
+          <button
+            type="button"
+            className={`tab${tab === "day" ? " active" : ""}`}
+            onClick={() => setTab("day")}
+          >
+            提交按天
+          </button>
+        </div>
+      </div>
+      <div className="stats-body">
+        {tab === "token" && (
+          <section className="sum-section">
+            <div className="sum-head">
+              <h3>Token 按项目</h3>
+            </div>
+            {projTokens.length === 0 ? (
+              <div className="sum-empty">暂无 token 数据</div>
+            ) : (
+              <div className="bar-list">
+                {projTokens.map((r) => {
+                  const v = r.token.input + r.token.output;
+                  return (
+                    <div className="bar-row" key={r.cwd}>
+                      <span className="bar-label" title={r.cwd}>
+                        {shortDir(r.cwd) || "?"}
+                      </span>
+                      <div className="bar-track">
+                        <div className="bar-fill tok" style={{ width: `${(v / maxToken) * 100}%` }} />
+                      </div>
+                      <span className="bar-val">{fmtUsage(r.token)}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </section>
+        )}
+        {tab === "commits" && (
+          <section className="sum-section">
+            <div className="sum-head">
+              <h3>提交次数按项目</h3>
+            </div>
+            {projCommits.length === 0 ? (
+              <div className="sum-empty">暂无提交</div>
+            ) : (
+              <div className="bar-list">
+                {projCommits.map((r) => (
+                  <div className="bar-row" key={r.cwd}>
+                    <span className="bar-label" title={r.cwd}>
+                      {shortDir(r.cwd) || "?"}
+                    </span>
+                    <div className="bar-track">
+                      <div
+                        className="bar-fill commit"
+                        style={{ width: `${(r.count / maxCommitCount) * 100}%` }}
+                      />
+                    </div>
+                    <span className="bar-val">
+                      {r.count} 次 · +{r.added}/-{r.deleted}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        )}
+        {tab === "day" && (
+          <section className="sum-section">
+            <div className="sum-head">
+              <h3>提交按天（近 7 天）</h3>
+            </div>
+            <div className="bar-list day">
+              {commitsByDay.map((b) => (
+                <div className="bar-row" key={b.day}>
+                  <span className="bar-label">{b.day}</span>
+                  <div className="bar-track">
+                    <div
+                      className="bar-fill commit"
+                      style={{ width: `${(b.count / maxDayCount) * 100}%` }}
+                    />
+                  </div>
+                  <span className="bar-val">{b.count}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/Status.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import { useApp } from "../state/AppContext";
+import { Icon } from "./Icon";
+import { fmtUsage, fmtUsageFull, sumTokenUsage } from "../lib/util";
+
+/** 顶栏运行状态：常驻版本号 + 全局 token + 速率/积压/错误徽章；pid/uptime/总计 收进 info popover。 */
+export function Status() {
+  const { stats, sessions } = useApp();
+  // 全局 token：累加已加载会话的 tokenTotal。仅最近 50 个被 enrich（见 SESSION_TOKEN_ENRICH_LIMIT），
+  // 故为「最近活跃会话累计」而非历史全量；count 即实际覆盖的会话数，展示在 title 里。
+  const token = useMemo(
+    () => sumTokenUsage(sessions.map((s) => s.tokenTotal)),
+    [sessions],
+  );
+  if (!stats) {
+    return (
+      <div className="status">
+        <span className="st-dot connecting">连接中…</span>
+      </div>
+    );
+  }
+  const up = Math.floor(stats.uptime / 1000);
+  const backlog = stats.spoolBacklog;
+  const lastError = stats.lastError;
+  const hasTokens = token.total.input > 0 || token.total.output > 0;
+
+  return (
+    <div className="status">
+      <span className="st-ver">v{stats.version}</span>
+      {hasTokens && (
+        <span
+          className="st-tokens"
+          title={`近 ${token.count} 会话累计（最多覆盖最近 50 个活跃会话）· ${fmtUsageFull(token.total)}`}
+        >
+          {fmtUsage(token.total)}
+        </span>
+      )}
+      {backlog > 0 && (
+        <span className="badge warn" title={`spool 积压 ${backlog} 条待消费`}>
+          积压 {backlog}
+        </span>
+      )}
+      {lastError ? (
+        <span className="badge err" title={lastError.message}>
+          <Icon name="warning" size={12} /> 错误
+        </span>
+      ) : (
+        <span className="st-rate" title="事件速率">
+          <Icon name="activity" size={12} />
+          {stats.eventsPerSec.toFixed(1)}/s
+        </span>
+      )}
+      <div className="status-detail" tabIndex={0} title="运行详情">
+        <Icon name="info" />
+        <div className="popover" role="tooltip">
+          <div className="pop-row"><span>pid</span><b>{stats.pid}</b></div>
+          <div className="pop-row"><span>uptime</span><b>{up}s</b></div>
+          <div className="pop-row"><span>积压</span><b>{backlog}</b></div>
+          <div className="pop-row"><span>速率</span><b>{stats.eventsPerSec.toFixed(1)} evt/s</b></div>
+          <div className="pop-row"><span>总计</span><b>{stats.totalEvents}</b></div>
+          {lastError && <div className="pop-err">{lastError.message}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}