shine-code-submit 1.0.1 → 1.0.3

package/ui/components/OverviewModule.tsx

@@ -3,7 +3,7 @@ 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";
+import { fmtDateTime, fmtTokens, realInput, shortDir, sumTokenUsage } from "../lib/util";
 
 interface TimelineItem {
   ts: number;
@@ -41,7 +41,7 @@ export function OverviewModule() {
       <div className="kpi-grid">
         <div className="kpi-card">
           <span className="kpi-label">Token 输入</span>
-          <b className="kpi-value">{fmtTokens(tokenSum.total.input)}</b>
+          <b className="kpi-value">{fmtTokens(realInput(tokenSum.total))}</b>
         </div>
         <div className="kpi-card">
           <span className="kpi-label">Token 输出</span>

package/ui/components/ReportModule.tsx

@@ -7,7 +7,7 @@ import { useApp } from "../state/AppContext";
 import { Icon } from "./Icon";
 import { Splitter } from "./Splitter";
 import type { ReportProject, ReportResponse } from "../types";
-import { fmtDateTime, fmtTokens, fmtUsageFull, shortDir } from "../lib/util";
+import { fmtDateTime, fmtTokens, fmtUsageFull, fmtUsageLabeled, realInput, shortDir } from "../lib/util";
 
 const PAGE = 20; // 每页 session 数
 
@@ -17,6 +17,8 @@ export function ReportModule() {
   const [data, setData] = useState<ReportResponse | null>(null);
   const [err, setErr] = useState<string | null>(null);
   const [selCwd, setSelCwd] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadResult, setUploadResult] = useState<{ ok: boolean; text: string } | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -48,24 +50,44 @@ export function ReportModule() {
             <b>报表</b>
             <span title="软件版本">v{data.version}</span>
             <span title="git 用户">👤 {data.gitUser ?? "—"}</span>
-            <span>{data.totals.projects} 项目</span>
-            <span>{data.totals.sessions} 会话</span>
-            <span title={fmtUsageFull(data.totals.tokens)}>
-              token {fmtTokens(data.totals.tokens.input + data.totals.tokens.output)}
-            </span>
             <span>
-              {data.totals.commitCount} 提交 · +{fmtTokens(data.totals.added)}/-{fmtTokens(data.totals.deleted)}
+              {data.totals.projects} 项目 · {data.totals.sessions} 会话
             </span>
-            {/* 占位:后期接「上报到服务器」(POST 本报告到远端)。现在禁用。 */}
             <button
               type="button"
               className="tab"
-              disabled
-              title="后期接入:把本报告上报到服务器(占位)"
+              disabled={uploading}
+              title="手动上报报表到服务器(需先在「设置」配置上报地址)"
               style={{ marginLeft: "auto" }}
+              onClick={async () => {
+                setUploading(true);
+                setUploadResult(null);
+                try {
+                  const r = await fetch(`${location.origin}/api/report/upload`, {
+                    method: "POST",
+                    headers: { Authorization: `Bearer ${token}` },
+                  });
+                  const j = await r.json().catch(() => ({}));
+                  if (r.ok && j.status === "ok") {
+                    setUploadResult({ ok: true, text: "上报成功" });
+                  } else if (r.ok && j.status === "skipped") {
+                    setUploadResult({ ok: false, text: `已跳过：${j.reason ?? "无 git 身份"}` });
+                  } else {
+                    setUploadResult({ ok: false, text: j.error ?? `HTTP ${r.status}` });
+                  }
+                } catch (e) {
+                  setUploadResult({ ok: false, text: e instanceof Error ? e.message : String(e) });
+                } finally {
+                  setUploading(false);
+                  setTimeout(() => setUploadResult(null), 3000);
+                }
+              }}
             >
-              ☁ 上报(敬请期待)
+              ☁ {uploading ? "上报中…" : "上报"}
             </button>
+            {uploadResult && (
+              <span className={uploadResult.ok ? "field-ok" : "field-err"}>{uploadResult.text}</span>
+            )}
           </>
         ) : (
           <span>{err ? `加载失败:${err}` : "加载中…"}</span>
@@ -91,8 +113,12 @@ export function ReportModule() {
                   className={p.cwd === selCwd ? "active" : undefined}
                   title={p.cwd}
                   onClick={() => setSelCwd(p.cwd)}
+                  style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "0.5rem" }}
                 >
-                  {shortDir(p.cwd) || p.cwd}
+                  <span>{shortDir(p.cwd) || p.cwd}</span>
+                  <span className="nav-tokens" title={fmtUsageFull(p.totalTokens)}>
+                    {fmtTokens(realInput(p.totalTokens) + p.totalTokens.output)}
+                  </span>
                 </li>
               ))}
             </ul>
@@ -116,12 +142,12 @@ export function ReportModule() {
   );
 }
 
-/** 右侧详情:标题(输入/输出 token 汇总 + 提交汇总) + session 表格(分页,隐藏 0 token)。
+/** 右侧详情:标题(仓库地址 + 用户 + token 汇总) + session 表格(分页,隐藏 0 token)。
  *  key=sel.cwd:换项目时重挂载,分页回到第 1 页。 */
 function ProjectDetail({ p }: { p: ReportProject }) {
   const [page, setPage] = useState(1);
-  // 过滤掉 0 token 的 session(tokenTotal 为 null 或 input+output=0)
-  const rows = p.sessions.filter((s) => s.tokenTotal && s.tokenTotal.input + s.tokenTotal.output > 0);
+  // 过滤掉 0 token 的 session(tokenTotal 为 null 或 真实输入+输出=0)
+  const rows = p.sessions.filter((s) => s.tokenTotal && realInput(s.tokenTotal) + s.tokenTotal.output > 0);
   const pageCount = Math.max(1, Math.ceil(rows.length / PAGE));
   const cur = Math.min(page, pageCount);
   const pageRows = rows.slice((cur - 1) * PAGE, cur * PAGE);
@@ -129,15 +155,22 @@ function ProjectDetail({ p }: { p: ReportProject }) {
   return (
     <>
       <div className="report-title">
-        <span className="rt-sum" title={fmtUsageFull(p.totalTokens)}>
-          输入 token <b>{fmtTokens(p.totalTokens.input)}</b>
-        </span>
-        <span className="rt-sum" title={fmtUsageFull(p.totalTokens)}>
-          输出 token <b>{fmtTokens(p.totalTokens.output)}</b>
-        </span>
-        <span className="rt-sum" style={{ marginLeft: "auto" }}>
-          {p.commits.count} 提交 · +{fmtTokens(p.commits.added)}/-{fmtTokens(p.commits.deleted)}
-          {p.commits.lastTime ? ` · 最近 ${fmtDateTime(p.commits.lastTime)}` : ""}
+        {p.gitRemote && (
+          <span
+            className="rt-sum"
+            title={p.gitRemote}
+            style={{
+              flex: "0 0 60ch",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            🔗 {p.gitRemote}
+          </span>
+        )}
+        <span className="rt-sum" title={fmtUsageFull(p.totalTokens)} style={{ marginLeft: "auto", color: "#9dbefe" }}>
+          {fmtUsageLabeled(p.totalTokens)}
         </span>
       </div>
 
@@ -150,6 +183,7 @@ function ProjectDetail({ p }: { p: ReportProject }) {
               <th>时间</th>
               <th className="rt-num">输入 token</th>
               <th className="rt-num">输出 token</th>
+              <th className="rt-num">总数</th>
             </tr>
           </thead>
           <tbody>
@@ -160,8 +194,9 @@ function ProjectDetail({ p }: { p: ReportProject }) {
                   {s.sessionId.slice(0, 8)}
                 </td>
                 <td>{fmtDateTime(s.lastActive)}</td>
-                <td className="rt-num">{fmtTokens(s.tokenTotal!.input)}</td>
+                <td className="rt-num">{fmtTokens(realInput(s.tokenTotal!))}</td>
                 <td className="rt-num">{fmtTokens(s.tokenTotal!.output)}</td>
+                <td className="rt-num">{fmtTokens(realInput(s.tokenTotal!) + s.tokenTotal!.output)}</td>
               </tr>
             ))}
           </tbody>

package/ui/components/SessionDetail.tsx

@@ -2,7 +2,7 @@ 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 { fmtUsageFull, fmtUsageLabeled, realInput, shortDir } from "../lib/util";
 import { Conversation } from "./Conversation";
 
 /** 会话详情（右侧）：顶部摘要（sid/cwd/token）+ 该会话对话。
@@ -27,9 +27,9 @@ export function SessionDetail({ sessionId }: { sessionId: string }) {
             {shortDir(session.cwd)}
           </span>
         )}
-        {tokenTotal && (tokenTotal.input > 0 || tokenTotal.output > 0) && (
+        {tokenTotal && (realInput(tokenTotal) > 0 || tokenTotal.output > 0) && (
           <span className="detail-token" title={fmtUsageFull(tokenTotal)}>
-            {fmtUsage(tokenTotal)}
+            {fmtUsageLabeled(tokenTotal)}
           </span>
         )}
       </div>

package/ui/components/SessionTree.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useApp } from "../state/AppContext";
-import { fmtDateTime, fmtUsage, fmtUsageFull } from "../lib/util";
+import { fmtDateTime, fmtTokens, fmtUsageFull, realInput } from "../lib/util";
 import type { SessionSummary } from "../types";
 
 /** 会话树（按 cwd 分组、可折叠、token 角标、时间点）。纯展示 + onSelect 回调。
@@ -72,15 +72,12 @@ export function SessionTree({
                       <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) && (
+                        {s.tokenTotal && (realInput(s.tokenTotal) > 0 || s.tokenTotal.output > 0) && (
                           <span className="sess-tokens" title={fmtUsageFull(s.tokenTotal)}>
-                            {fmtUsage(s.tokenTotal)}
+                            {fmtTokens(realInput(s.tokenTotal) + s.tokenTotal.output)}
                           </span>
                         )}
                       </div>
-                      <div className="sess-sub">
-                        {s.lastType ?? "?"} · {s.eventCount}
-                      </div>
                     </li>
                   ))}
                 </ul>

package/ui/components/StatsModule.tsx

@@ -3,7 +3,7 @@ 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";
+import { fmtUsage, realInput, shortDir } from "../lib/util";
 
 type StatTab = "token" | "commits" | "day";
 
@@ -18,7 +18,7 @@ export function StatsModule() {
   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 maxToken = Math.max(1, ...projTokens.map((r) => realInput(r.token) + r.token.output));
   const maxCommitCount = Math.max(1, ...projCommits.map((r) => r.count));
   const maxDayCount = Math.max(1, ...commitsByDay.map((b) => b.count));
 
@@ -60,7 +60,7 @@ export function StatsModule() {
             ) : (
               <div className="bar-list">
                 {projTokens.map((r) => {
-                  const v = r.token.input + r.token.output;
+                  const v = realInput(r.token) + r.token.output;
                   return (
                     <div className="bar-row" key={r.cwd}>
                       <span className="bar-label" title={r.cwd}>

package/ui/components/SummaryView.tsx

@@ -2,7 +2,7 @@ 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";
+import { fmtDateTime, fmtUsage, fmtUsageFull, realInput, shortDir, sumTokenUsage } from "../lib/util";
 
 /** 汇总视图（system 模块临时占位，Step 5 替换为 SystemModule）：
  *  Token 按会话 + 代码提交按时间。提交拉取改用 useAllCommits（与 Overview/Stats 共用）。 */
@@ -13,7 +13,7 @@ export function SummaryView() {
   const tokenRows = useMemo(
     () =>
       sessions
-        .filter((s) => s.tokenTotal && (s.tokenTotal.input > 0 || s.tokenTotal.output > 0))
+        .filter((s) => s.tokenTotal && (realInput(s.tokenTotal) > 0 || s.tokenTotal.output > 0))
         .slice()
         .sort((a, b) => b.lastActive - a.lastActive),
     [sessions],
@@ -24,7 +24,7 @@ export function SummaryView() {
   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;
+  const hasTokens = realInput(tokenSum.total) > 0 || tokenSum.total.output > 0;
 
   return (
     <div id="summary-view" className="summary-view">

package/ui/lib/aggregate.ts

@@ -1,5 +1,6 @@
 // 纯聚合函数（统计模块用）：按项目/按天分组，无副作用。
 import type { SessionSummary, TokenUsage } from "../types";
+import { realInput } from "./util";
 
 export interface ProjTokenRow {
   cwd: string;
@@ -28,7 +29,7 @@ export function aggregateTokenByProject(sessions: SessionSummary[]): ProjTokenRo
     m.set(s.cwd, r);
   }
   return [...m.values()].sort(
-    (a, b) => b.token.input + b.token.output - (a.token.input + a.token.output),
+    (a, b) => realInput(b.token) + b.token.output - (realInput(a.token) + a.token.output),
   );
 }
 

package/ui/lib/util.ts

@@ -41,27 +41,48 @@ export function safeJson(v: unknown): string {
   }
 }
 
-/** 紧凑数字：1234 → "1.2k"，1234567 → "1.2M"，<1000 原样。 */
+/** 紧凑数字：1234 → "1.2k"，1234567 → "1.2M"，1.03e9 → "1B"，<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";
+  if (n < 1_000_000) return trimZero((n / 1_000).toFixed(1)) + "k";
+  if (n < 1_000_000_000) return trimZero((n / 1_000_000).toFixed(1)) + "M";
+  if (n < 1_000_000_000_000) return trimZero((n / 1_000_000_000).toFixed(2)) + "B";
+  return trimZero((n / 1_000_000_000_000).toFixed(2)) + "T";
 }
 
-/** token 用量简写：↑输入 ↓输出（cache 明细放 title）。无值返回空串。 */
-export function fmtUsage(u?: Pick<TokenUsage, "input" | "output"> | null): string {
+/** 真实输入 token = 未缓存输入 + 缓存写 + 缓存读（每次 API 请求的完整 prompt 上下文）。
+ *  直接累加 Anthropic API 返回的原始字段，不乘任何系数。 */
+export function realInput(u?: TokenUsage | null): number {
+  if (!u) return 0;
+  return u.input + u.cacheCreation + u.cacheRead;
+}
+
+/** token 用量简写：↑真实输入 ↓输出（真实输入 = 未缓存 + 缓存写 + 缓存读）。无值返回空串。 */
+export function fmtUsage(u?: TokenUsage | null): string {
+  if (!u) return "";
+  return `↑${fmtTokens(realInput(u))} ↓${fmtTokens(u.output)}`;
+}
+
+/** token 用量三段式：↑真实输入 ↓输出 · 总数(真实输入+输出)。报表/会话导航与详情用。 */
+export function fmtUsageTotal(u?: TokenUsage | null): string {
   if (!u) return "";
-  return `↑${fmtTokens(u.input)} ↓${fmtTokens(u.output)}`;
+  return `↑${fmtTokens(realInput(u))} ↓${fmtTokens(u.output)} · ${fmtTokens(realInput(u) + u.output)}`;
 }
 
-/** 完整 token 用量（input/output/cacheCreation/cacheRead），用于 title 提示。 */
+/** 完整 token 用量，用于 title 提示：真实输入合计 + 输出 + 四字段明细（均原始值，不加权）。 */
 export function fmtUsageFull(u?: TokenUsage | null): string {
   if (!u) return "";
-  return `输入 ${u.input} · 输出 ${u.output} · 缓存写 ${u.cacheCreation} · 缓存读 ${u.cacheRead}`;
+  return `真实输入 ${realInput(u)} · 输出 ${u.output} · (未缓存 ${u.input} · 缓存写 ${u.cacheCreation} · 缓存读 ${u.cacheRead})`;
+}
+
+/** token 用量带标签：输入 X · 输出 Y · 总数 Z(真实输入+输出)。会话详情/报表标题用。 */
+export function fmtUsageLabeled(u?: TokenUsage | null): string {
+  if (!u) return "";
+  return `输入 ${fmtTokens(realInput(u))} · 输出 ${fmtTokens(u.output)} · 总数 ${fmtTokens(realInput(u) + u.output)}`;
 }
 
 function trimZero(s: string): string {
-  return s.replace(/\.0$/, "");
+  return s.replace(/\.?0+$/, "");
 }
 
 /** 累加 assistant 消息的 usage（对话视图会话级汇总）。 */

package/ui/style.css

@@ -17,7 +17,7 @@
   --c-prompt: #569cd6;
   --c-posttool: #c586c0;
   --c-pretool: #ce9178;
-  --nav-w: 200px;
+  --nav-w: 98px;
   --tree-w: 200px;
   --footer-h: 170px;
   /* 设计 token：间距 / 字号 / 圆角 / 图标尺寸 */
@@ -170,7 +170,10 @@ h2 {
 }
 ul { list-style: none; margin: 0; padding: 0; }
 
-#nav-panel { flex: 0 0 auto; background: var(--sidebar); overflow: hidden; border-right: 1px solid var(--border); }
+/* 固定宽度而非 flex: 0 0 auto：basis auto 取 content max-content，
+   超长会话触发大规模 reflow 时 Chromium 会重算 nav-item padding 导致 content 收缩，
+   进而让整个导航栏/会话树左移错位。固定值消除对 reflow 的依赖。 */
+#nav-panel { flex: 0 0 var(--nav-w); background: var(--sidebar); overflow: hidden; border-right: 1px solid var(--border); }
 #sessions-panel ul { flex: 1; overflow: auto; }
 #events-panel { flex: 1 1 0; overflow: hidden; }