token-studio 4.8.0

package/src/client/live/LiveApp.jsx

@@ -0,0 +1,226 @@
+import { useEffect, useMemo, useState } from 'react';
+import './styles.css';
+
+const REFRESH_MS = 7000;
+
+export function LiveApp() {
+  const [snapshot, setSnapshot] = useState(null);
+  const [error, setError] = useState(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    async function load() {
+      try {
+        const response = await fetch('/api/live');
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const data = await response.json();
+        if (alive) {
+          setSnapshot(data);
+          setError(null);
+        }
+      } catch (err) {
+        if (alive) setError(err.message);
+      }
+    }
+    load();
+    const timer = setInterval(load, REFRESH_MS);
+    return () => {
+      alive = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  const totals = snapshot?.totals || {};
+  const generated = useMemo(() => snapshot?.generatedAt
+    ? new Date(snapshot.generatedAt).toLocaleTimeString()
+    : 'waiting'
+  , [snapshot]);
+  const statuslineCommand = `npx token-studio statusline --format=text --window-minutes=${snapshot?.windowMinutes || 15}`;
+
+  async function copyStatuslineCommand() {
+    try {
+      await navigator.clipboard?.writeText(statuslineCommand);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <main className="live-shell">
+      <nav className="live-nav">
+        <div>
+          <span className="live-dot"/>
+          <strong>Token Studio Live</strong>
+        </div>
+        <div className="live-links">
+          <button type="button" onClick={copyStatuslineCommand}>{copied ? '已复制' : '复制 statusline'}</button>
+          <a href="/">看板</a>
+          <a href="/review">复盘</a>
+          <span>{generated}</span>
+        </div>
+      </nav>
+
+      <section className="live-hero">
+        <div>
+          <p className="live-kicker">Local metadata only · no transcript access</p>
+          <h1>今天的 token 是否正在失控</h1>
+          <p>每 5-10 秒读取本地 SQLite 中的结构化 token 元数据，观察最近 {snapshot?.windowMinutes || 15} 分钟的活跃 session、模型和 cache 情况。</p>
+        </div>
+        <div className={`live-status ${snapshot?.status === 'active' ? 'active' : ''}`}>
+          {error ? 'error' : snapshot?.status || 'loading'}
+        </div>
+      </section>
+
+      {error && <div className="live-error">实时数据加载失败：{error}</div>}
+
+      {snapshot?.warnings?.length > 0 && (
+        <section className="live-warnings" aria-label="实时用量预警">
+          {snapshot.warnings.map(warning => (
+            <article key={warning.type} className={`live-warning ${warning.level || 'medium'}`}>
+              <div>
+                <span>{warning.level || 'medium'}</span>
+                <strong>{warning.message}</strong>
+                <p>{warning.evidence}</p>
+              </div>
+              <b>{warning.action}</b>
+            </article>
+          ))}
+        </section>
+      )}
+
+      {snapshot?.budgetWindows?.length > 0 && (
+        <section className="budget-windows" aria-label="预算窗口">
+          {snapshot.budgetWindows.map(window => (
+            <article key={window.id || window.label} className={`budget-window status-${window.status}`}>
+              <div className="budget-window-head">
+                <div>
+                  <span>{window.source || 'all sources'} · {window.windowMinutes}m {window.windowType || 'rolling'} · warn {Math.round(Number(window.warningThreshold || 0.75) * 100)}%</span>
+                  <strong>{window.label}</strong>
+                </div>
+                <b>{budgetStatusLabel(window.status)}</b>
+              </div>
+              <div className="budget-meter" aria-hidden="true">
+                <span style={{width: `${Math.min(100, Math.max(window.tokenShare || 0, window.costShare || 0) * 100)}%`}}/>
+              </div>
+              <div className="budget-window-grid">
+                <BudgetMetric label="Tokens" value={`${formatNumber(window.totalTokens)} / ${window.tokenBudget ? formatNumber(window.tokenBudget) : '—'}`} />
+                <BudgetMetric label="官方价" value={`$${formatMoney(window.costUSD)} / ${window.costBudgetUSD ? `$${formatMoney(window.costBudgetUSD)}` : '—'}`} />
+                <BudgetMetric label="预计 Tokens" value={formatNumber(window.projectedTokens)} />
+                <BudgetMetric label="Burn Rate" value={`${formatNumber(window.burnRateTokensPerHour)}/h`} />
+                <BudgetMetric label="Reset" value={window.resetInMinutes == null ? '—' : `${Math.round(window.resetInMinutes)}m`} />
+              </div>
+            </article>
+          ))}
+        </section>
+      )}
+
+      {snapshot?.budgetWindows?.length > 0 && Number(totals.totalTokens || 0) === 0 && (
+        <section className="live-first-run-note" aria-label="预算窗口说明">
+          <strong>预算窗口已配置，但最近窗口没有事件级 token 数据。</strong>
+          <span>
+            `/live` 只读取最近 {snapshot?.windowMinutes || 15} 分钟的 token_events。
+            如果当前库只有 daily/session 聚合数据，预算配置仍会保留，但实时 burn rate 和窗口消耗会显示为空。
+          </span>
+        </section>
+      )}
+
+      <section className="live-grid">
+        <MetricCard label="最近 Token" value={formatNumber(totals.totalTokens)} />
+        <MetricCard label="Burn Rate / hour" value={formatNumber(totals.burnRateTokensPerHour)} />
+        <MetricCard label="Cache Hit" value={`${formatPercent(totals.cacheHitRate)}%`} />
+        <MetricCard label="官方价换算" value={`$${formatMoney(totals.costUSD)}`} />
+      </section>
+
+      <section className="live-panels">
+        <LivePanel title="活跃 Sessions">
+          {snapshot?.activeSessions?.length ? snapshot.activeSessions.map(session => (
+            <div className="live-row" key={`${session.device}:${session.source}:${session.sessionId}`}>
+              <div>
+                <strong>{session.projectPath || session.sessionId}</strong>
+                <span>{session.source} · {session.model || 'unknown'} · {session.lastActivity}</span>
+              </div>
+              <b>{formatNumber(session.totalTokens)}</b>
+            </div>
+          )) : <EmptyState text="最近窗口内没有活跃 session。" />}
+        </LivePanel>
+
+        <LivePanel title="来源分布">
+          {snapshot?.bySource?.length ? snapshot.bySource.map(row => (
+            <div className="live-row compact" key={row.key}>
+              <div>
+                <strong>{row.key}</strong>
+                <span>{row.sessions} sessions</span>
+              </div>
+              <b>{formatNumber(row.totalTokens)}</b>
+            </div>
+          )) : <EmptyState text="暂无来源分布。" />}
+        </LivePanel>
+
+        <LivePanel title="模型分布">
+          {snapshot?.byModel?.length ? snapshot.byModel.map(row => (
+            <div className="live-row compact" key={row.key}>
+              <div>
+                <strong>{row.key}</strong>
+                <span>{row.sessions} sessions</span>
+              </div>
+              <b>{formatNumber(row.totalTokens)}</b>
+            </div>
+          )) : <EmptyState text="暂无模型分布。" />}
+        </LivePanel>
+      </section>
+    </main>
+  );
+}
+
+function MetricCard({ label, value }) {
+  return (
+    <div className="live-card">
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+function LivePanel({ title, children }) {
+  return (
+    <section className="live-panel">
+      <h2>{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+function EmptyState({ text }) {
+  return <div className="live-empty">{text}</div>;
+}
+
+function BudgetMetric({ label, value }) {
+  return (
+    <div>
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+function budgetStatusLabel(status) {
+  if (status === 'exceeded') return '已超预算';
+  if (status === 'over-pace') return '会超预算';
+  if (status === 'near-limit') return '接近预算';
+  return '正常';
+}
+
+function formatNumber(value) {
+  return Math.round(Number(value || 0)).toLocaleString('en-US');
+}
+
+function formatMoney(value) {
+  return Number(value || 0).toFixed(2);
+}
+
+function formatPercent(value) {
+  return Number(value || 0).toFixed(1);
+}

package/src/client/live/styles.css

@@ -0,0 +1,446 @@
+:root {
+  --live-bg: #f6f3ec;
+  --live-paper: #fffdf8;
+  --live-ink: #24221e;
+  --live-muted: #706a61;
+  --live-rule: #ddd5c7;
+  --live-accent: #216e65;
+  --live-warn: #9a4f16;
+}
+
+body {
+  margin: 0;
+  background: var(--live-bg);
+  color: var(--live-ink);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.live-shell {
+  min-height: 100vh;
+  padding: 22px;
+  overflow-x: hidden;
+}
+
+.live-nav {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--live-rule);
+}
+
+.live-nav > div,
+.live-links {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.live-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--live-accent);
+  box-shadow: 0 0 0 5px color-mix(in srgb, var(--live-accent), transparent 84%);
+}
+
+.live-links a,
+.live-links span,
+.live-links button {
+  color: var(--live-muted);
+  font-size: 13px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.live-links a:hover { color: var(--live-ink); }
+
+.live-links button {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--live-rule);
+  border-radius: 8px;
+  background: var(--live-paper);
+  cursor: pointer;
+}
+
+.live-links button:hover {
+  color: var(--live-ink);
+}
+
+.live-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: end;
+  padding: 34px 0 26px;
+}
+
+.live-kicker {
+  margin: 0 0 8px;
+  color: var(--live-accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.live-hero h1 {
+  margin: 0;
+  max-width: 780px;
+  font-size: 38px;
+  line-height: 1.06;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+.live-hero p {
+  max-width: 760px;
+  margin: 12px 0 0;
+  color: var(--live-muted);
+  line-height: 1.65;
+}
+
+.live-status {
+  min-width: 92px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--live-rule);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--live-muted);
+  background: var(--live-paper);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.live-status.active {
+  color: var(--live-accent);
+  border-color: color-mix(in srgb, var(--live-accent), white 62%);
+}
+
+.live-error {
+  margin: 0 0 18px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--live-warn), white 58%);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--live-warn), white 90%);
+  color: var(--live-warn);
+}
+
+.live-warnings {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0 0 12px;
+}
+
+.live-warning {
+  min-width: 0;
+  padding: 14px 16px;
+  display: grid;
+  gap: 10px;
+  border: 1px solid color-mix(in srgb, var(--live-warn), white 58%);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--live-warn), white 92%);
+}
+
+.live-warning.low {
+  border-color: color-mix(in srgb, var(--live-accent), white 64%);
+  background: color-mix(in srgb, var(--live-accent), white 93%);
+}
+
+.live-warning span {
+  color: var(--live-warn);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.live-warning.low span {
+  color: var(--live-accent);
+}
+
+.live-warning strong,
+.live-warning b {
+  display: block;
+  color: var(--live-ink);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.live-warning p {
+  margin: 5px 0 0;
+  color: var(--live-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.live-warning b {
+  font-weight: 600;
+}
+
+.budget-windows {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0 0 12px;
+}
+
+.budget-window {
+  min-width: 0;
+  padding: 15px;
+  border: 1px solid var(--live-rule);
+  border-radius: 8px;
+  background: var(--live-paper);
+}
+
+.budget-window.status-near-limit,
+.budget-window.status-over-pace,
+.budget-window.status-exceeded {
+  border-color: color-mix(in srgb, var(--live-warn), white 56%);
+}
+
+.budget-window-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: start;
+}
+
+.budget-window-head div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.budget-window-head span {
+  color: var(--live-muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.budget-window-head strong,
+.budget-window-head b {
+  color: var(--live-ink);
+  font-size: 13px;
+}
+
+.budget-window-head b {
+  white-space: nowrap;
+  color: var(--live-accent);
+}
+
+.budget-window.status-near-limit .budget-window-head b,
+.budget-window.status-over-pace .budget-window-head b,
+.budget-window.status-exceeded .budget-window-head b {
+  color: var(--live-warn);
+}
+
+.budget-meter {
+  height: 7px;
+  margin: 12px 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--live-rule), white 42%);
+  overflow: hidden;
+}
+
+.budget-meter span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--live-accent);
+}
+
+.budget-window.status-near-limit .budget-meter span,
+.budget-window.status-over-pace .budget-meter span,
+.budget-window.status-exceeded .budget-meter span {
+  background: var(--live-warn);
+}
+
+.budget-window-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.budget-window-grid div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.budget-window-grid span {
+  color: var(--live-muted);
+  font-size: 11px;
+}
+
+.budget-window-grid strong {
+  color: var(--live-ink);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.live-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.live-card,
+.live-panel {
+  border: 1px solid var(--live-rule);
+  border-radius: 8px;
+  background: var(--live-paper);
+}
+
+.live-card {
+  min-height: 92px;
+  padding: 18px;
+  display: grid;
+  align-content: space-between;
+}
+
+.live-card span {
+  color: var(--live-muted);
+  font-size: 12px;
+}
+
+.live-card strong {
+  font-size: 27px;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.live-panels {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr) minmax(260px, 0.8fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.live-panel {
+  padding: 16px;
+}
+
+.live-panel h2 {
+  margin: 0 0 12px;
+  font-size: 15px;
+}
+
+.live-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid var(--live-rule);
+}
+
+.live-row:first-of-type {
+  border-top: 0;
+}
+
+.live-row div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.live-row strong,
+.live-row span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.live-row strong {
+  font-size: 13px;
+}
+
+.live-row span {
+  color: var(--live-muted);
+  font-size: 12px;
+}
+
+.live-row b {
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+}
+
+.live-row.compact {
+  padding: 10px 0;
+}
+
+.live-empty {
+  padding: 26px 12px;
+  border-top: 1px solid var(--live-rule);
+  color: var(--live-muted);
+  text-align: center;
+  font-size: 13px;
+}
+
+.live-first-run-note {
+  display: grid;
+  gap: 6px;
+  margin: 12px 0;
+  padding: 14px 16px;
+  border: 1px solid var(--live-rule);
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--live-paper), var(--live-teal) 5%);
+}
+
+.live-first-run-note strong {
+  font-size: 13px;
+}
+
+.live-first-run-note span {
+  color: var(--live-muted);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+
+@media (max-width: 840px) {
+  .live-shell { padding: 16px; }
+  .live-nav {
+    height: auto;
+    padding-bottom: 12px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .live-links {
+    width: 100%;
+    overflow-x: auto;
+  }
+  .live-hero {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+  .live-hero h1 {
+    max-width: 100%;
+    font-size: 27px;
+    line-height: 1.14;
+  }
+  .live-grid,
+  .live-panels,
+  .live-warnings,
+  .budget-windows {
+    grid-template-columns: 1fr;
+  }
+  .budget-window-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/src/client/main.jsx

@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './dashboard/App.jsx';
+import { ReviewApp } from './review/ReviewApp.jsx';
+import { LiveApp } from './live/LiveApp.jsx';
+
+function Root() {
+  if (window.location.pathname === '/review') {
+    document.title = 'ROI Review · Token Studio ROI';
+    return <ReviewApp />;
+  }
+  if (window.location.pathname === '/live') {
+    document.title = 'Live Monitor · Token Studio ROI';
+    return <LiveApp />;
+  }
+
+  document.title = 'Token Studio ROI';
+  return <App />;
+}
+
+createRoot(document.getElementById('root')).render(<Root />);