token-studio 4.8.0

package/src/client/dashboard/components-top.jsx

@@ -0,0 +1,307 @@
+/* =============================================================
+   Filter bar, KPI cards, sparklines — top of dashboard
+   ============================================================= */
+
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { U } from '../shared/utils.js';
+
+// ───────────────────────────────────────────────────────────────
+// Topbar
+// ───────────────────────────────────────────────────────────────
+function Topbar({ lastSync, onRefresh, refreshing, onCollect, collecting, collectStatus, demoMode = false, onOpenImportBudget }) {
+  return (
+    <div className="topbar">
+      <div className="topbar-left">
+        <div className="brand">
+          <div className="brand-mark">TS</div>
+          <div>
+            <h1>Token Studio</h1>
+            <p className="brand-sub">个人 AI 工作流复盘 · 项目任务归因</p>
+          </div>
+        </div>
+        <div className="page-switch">
+          <span className="page-chip active">看板</span>
+          <a href="/review" className="page-chip">复盘</a>
+          <a href="/live" className="page-chip">实时</a>
+        </div>
+        {demoMode && <span className="demo-mode-badge">Demo Mode</span>}
+      </div>
+      <div className="topbar-right">
+        {collectStatus && (
+          <div className={`collect-pill collect-${collectStatus.type}`} title={collectStatus.message}>
+            <span className="collect-dot"></span>
+            <span>{collectStatus.type === 'running' ? '采集中' : collectStatus.type === 'ok' ? '采集完成' : '采集失败'}</span>
+          </div>
+        )}
+        <div className="sync-pill">
+          <span className="sync-dot"></span>
+          <span>最后同步 <strong style={{color:'var(--text)', fontWeight:600}}>{lastSync}</strong></span>
+        </div>
+        <button className="btn" onClick={onOpenImportBudget} title="导入与预算">
+          <svg className="icon" viewBox="0 0 16 16" fill="none">
+            <path d="M3 4.5h10M3 8h10M3 11.5h6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
+            <path d="M11.5 10v3M10 11.5h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
+          </svg>
+          导入/预算
+        </button>
+        <button className={`btn btn-primary ${collecting ? 'loading' : ''}`} onClick={onCollect} disabled={collecting || refreshing}>
+          <svg className={`icon ${collecting ? 'spin' : ''}`} viewBox="0 0 16 16" fill="none" style={{opacity:1}}>
+            <path d="M4 6.5h8M4 9.5h8" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round"/>
+            <path d="M3.5 4.5c0-.83 2.01-1.5 4.5-1.5s4.5.67 4.5 1.5v7c0 .83-2.01 1.5-4.5 1.5s-4.5-.67-4.5-1.5v-7Z" stroke="currentColor" strokeWidth="1.35"/>
+            <circle cx="8" cy="8" r="1.25" fill="currentColor"/>
+          </svg>
+          {collecting ? '采集中' : '采集'}
+        </button>
+        <button className={`btn btn-primary ${refreshing ? 'loading' : ''}`} onClick={onRefresh}>
+          <svg className={`icon ${refreshing ? 'spin' : ''}`} viewBox="0 0 16 16" fill="none" style={{opacity:1}}>
+            <path d="M3 3v3h3M13 13v-3h-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M13 7A5 5 0 0 0 4 5M3 9a5 5 0 0 0 9 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+          </svg>
+          {refreshing ? '同步中' : '刷新'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────
+// Filter bar
+// ───────────────────────────────────────────────────────────────
+function FilterBar({ f, setF, allSources, allDevices, allModels, availableRange, onExport }) {
+  const RANGES = [
+    { id: '7d',  label: '7 天',  days: 7  },
+    { id: '14d', label: '14 天', days: 14 },
+    { id: '30d', label: '30 天', days: 30 },
+    { id: '90d', label: '90 天', days: 90 },
+    { id: 'all', label: '全部' }
+  ];
+
+  const setRange = (r) => {
+    if (r.id === 'all') {
+      setF({ ...f, rangeId: r.id, startDate: availableRange.startDate, endDate: availableRange.endDate });
+      return;
+    }
+    setF({ ...f, rangeId: r.id, startDate: U.daysAgo(r.days - 1), endDate: U.daysAgo(0) });
+  };
+
+  const toggleSet = (key, value) => {
+    const next = new Set(f[key]);
+    if (next.has(value)) next.delete(value); else next.add(value);
+    setF({ ...f, [key]: next });
+  };
+
+  const clearAll = () => {
+    setF({ ...f, sources: new Set(), devices: new Set(), models: new Set() });
+  };
+
+  const filtersActive = f.sources.size + f.devices.size + f.models.size;
+
+  return (
+    <div className="filterbar">
+      <div className="filter-row filter-row-primary">
+        <div className="filter-group">
+          <span className="filter-label">时间</span>
+          <div className="chip-row">
+            {RANGES.map(r => (
+              <button key={r.id}
+                className={`chip ${f.rangeId === r.id ? 'active' : ''}`}
+                onClick={() => setRange(r)}>{r.label}</button>
+            ))}
+          </div>
+        </div>
+
+        <div className="divider"/>
+
+        <div className="filter-group filter-group-sources">
+          <span className="filter-label">来源</span>
+          {allSources.map(s => (
+            <button key={s}
+              className={`pill ${f.sources.has(s) ? 'active' : ''}`}
+              style={f.sources.has(s) ? {color: U.PALETTE[s] || ''} : {}}
+              onClick={() => toggleSet('sources', s)}>
+              <span className="pill-dot" style={{background: U.PALETTE[s] || ''}}/>
+              {s}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="filter-row filter-row-secondary">
+        <div className="filter-group">
+          <span className="filter-label">设备</span>
+          <MultiSelect
+            options={allDevices}
+            selected={f.devices}
+            onChange={v => setF({...f, devices: v})}
+            placeholder="全部设备"/>
+          <span className="filter-label" style={{marginLeft: 4}}>模型</span>
+          <MultiSelect
+            options={allModels}
+            selected={f.models}
+            onChange={v => setF({...f, models: v})}
+            placeholder="全部模型"/>
+        </div>
+
+        <div className="filter-spacer"/>
+
+        {filtersActive > 0 && (
+          <button className="btn" onClick={clearAll}>
+            <svg className="icon" viewBox="0 0 16 16" fill="none">
+              <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
+            </svg>
+            清除筛选 · {filtersActive}
+          </button>
+        )}
+        <button className={`toggle ${f.compare ? 'on' : ''}`} onClick={() => setF({...f, compare: !f.compare})}>
+          <span className="toggle-slot"/>
+          对比上一周期
+        </button>
+        <button className="btn" onClick={onExport}>
+          <svg className="icon" viewBox="0 0 16 16" fill="none">
+            <path d="M8 2v8M5 7l3 3 3-3M3 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+          导出
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────
+// MultiSelect — dropdown with checkboxes
+// ───────────────────────────────────────────────────────────────
+function MultiSelect({ options, selected, onChange, placeholder }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const onDocClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  const label = selected.size === 0
+    ? placeholder
+    : selected.size === 1
+      ? Array.from(selected)[0]
+      : `${selected.size} 项已选`;
+
+  const toggle = (v) => {
+    const next = new Set(selected);
+    if (next.has(v)) next.delete(v); else next.add(v);
+    onChange(next);
+  };
+
+  return (
+    <div ref={ref} style={{position:'relative', display:'inline-block'}}>
+      <button className={`pill ${selected.size ? 'active' : ''}`} onClick={() => setOpen(o => !o)}
+        style={{paddingLeft: 10, fontWeight: selected.size ? 600 : 400}}>
+        {label}
+        <svg width="9" height="9" viewBox="0 0 9 9" fill="none" style={{marginLeft:2, opacity:0.5}}>
+          <path d="M1 3l3.5 3L8 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+      {open && (
+        <div style={{
+          position:'absolute', top:'calc(100% + 6px)', left:0, zIndex:30,
+          minWidth: 220, background: 'var(--surface)',
+          border: '1px solid var(--border)', borderRadius: 8,
+          boxShadow: '0 10px 30px -10px rgb(0 0 0 / 0.15)',
+          padding: 4, maxHeight: 280, overflowY: 'auto'
+        }}>
+          {selected.size > 0 && (
+            <button className="chip" style={{width:'100%', justifyContent:'flex-start', color: 'var(--c-indigo)', fontSize: 11.5}}
+              onClick={() => onChange(new Set())}>清除选择</button>
+          )}
+          {options.map(o => (
+            <button key={o} className="chip"
+              onClick={() => toggle(o)}
+              style={{width:'100%', justifyContent:'flex-start', gap:8, fontWeight:400}}>
+              <span style={{
+                width: 14, height: 14, borderRadius: 3,
+                border: '1.5px solid ' + (selected.has(o) ? 'var(--c-indigo)' : 'var(--border)'),
+                background: selected.has(o) ? 'var(--c-indigo)' : 'transparent',
+                display: 'grid', placeItems: 'center', flexShrink: 0
+              }}>
+                {selected.has(o) && (
+                  <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+                    <path d="M1.5 4.5L4 7l3.5-5" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                )}
+              </span>
+              <span style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', fontSize: 12}}>{o}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────
+// Sparkline SVG
+// ───────────────────────────────────────────────────────────────
+function Spark({ values, color, height = 30, fill = true }) {
+  if (!values || values.length === 0) return null;
+  const w = 100, h = height;
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const range = max - min || 1;
+  const pts = values.map((v, i) => {
+    const x = (i / (values.length - 1 || 1)) * w;
+    const y = h - ((v - min) / range) * (h - 2) - 1;
+    return [x, y];
+  });
+  const d = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
+  const dArea = d + ` L${w},${h} L0,${h} Z`;
+
+  return (
+    <svg className="kpi-spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
+      {fill && <path d={dArea} fill={color} opacity="0.12"/>}
+      <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke"/>
+    </svg>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────
+// Delta pill
+// ───────────────────────────────────────────────────────────────
+function Delta({ value, suffix = '%', invert = false }) {
+  if (value == null || !isFinite(value)) {
+    return <span className="delta flat">—</span>;
+  }
+  const positive = value > 0.05;
+  const negative = value < -0.05;
+  const flat = !positive && !negative;
+  const cls = flat ? 'flat' : (positive ? (invert ? 'down' : 'up') : (invert ? 'up' : 'down'));
+  const arrow = flat ? '·' : (positive ? '↑' : '↓');
+  return (
+    <span className={`delta ${cls}`}>
+      {arrow} {Math.abs(value).toFixed(1)}{suffix}
+    </span>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────
+// KPI card
+// ───────────────────────────────────────────────────────────────
+function KPI({ label, value, sub, delta, dotColor, sparkValues, sparkColor }) {
+  return (
+    <div className="kpi">
+      <div className="kpi-label">
+        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
+          {dotColor && <span className="dot" style={{color: dotColor}}/>}
+          {label}
+        </span>
+      </div>
+      <div className="kpi-value">{value}</div>
+      <div className="kpi-sub">
+        {delta != null && <Delta value={delta}/>}
+        <span>{sub}</span>
+      </div>
+      {sparkValues && <Spark values={sparkValues} color={sparkColor || 'var(--c-indigo)'}/>}
+    </div>
+  );
+}
+
+export { Topbar, FilterBar, KPI, Delta };

package/src/client/dashboard/import-budget.js

@@ -0,0 +1,41 @@
+export const CCUSAGE_BRIDGE_REPORTS = ['daily', 'weekly', 'monthly', 'session', 'blocks'];
+
+export const BUDGET_TEMPLATES = [
+  { id: 'claude-5h', label: 'Claude 5h', source: 'Claude Code', windowType: 'fixed', windowMinutes: 300, warningThreshold: 0.75 },
+  { id: 'claude-weekly', label: 'Claude weekly', source: 'Claude Code', windowType: 'fixed', windowMinutes: 10080, warningThreshold: 0.75 },
+  { id: 'codex-5h', label: 'Codex 5h', source: 'Codex CLI', windowType: 'fixed', windowMinutes: 300, warningThreshold: 0.75 },
+  { id: 'copilot-weekly', label: 'Copilot weekly', source: 'GitHub Copilot CLI', windowType: 'fixed', windowMinutes: 10080, warningThreshold: 0.75 }
+];
+
+export function buildCcusageBridgeCommand({ report = 'session', apply = false } = {}) {
+  const normalized = CCUSAGE_BRIDGE_REPORTS.includes(String(report).toLowerCase())
+    ? String(report).toLowerCase()
+    : 'session';
+  return [
+    'npx token-studio import-usage',
+    '--format=ccusage-cli',
+    `--report=${normalized}`,
+    apply ? '--apply' : '--dry-run',
+    '--yes'
+  ].join(' ');
+}
+
+export function defaultResetAnchor(now = new Date()) {
+  const date = new Date(now);
+  date.setSeconds(0, 0);
+  return date.toISOString().slice(0, 16);
+}
+
+export function applyBudgetTemplate(current = {}, template = {}, now = new Date()) {
+  return {
+    ...current,
+    source: template.source || current.source || '',
+    label: template.label || current.label || '',
+    windowType: template.windowType || current.windowType || 'rolling',
+    windowMinutes: template.windowMinutes || current.windowMinutes || 60,
+    warningThreshold: template.warningThreshold ?? current.warningThreshold ?? 0.75,
+    resetAnchor: template.windowType === 'fixed'
+      ? current.resetAnchor || defaultResetAnchor(now)
+      : current.resetAnchor || ''
+  };
+}

package/src/client/dashboard/model-usage.js

@@ -0,0 +1,108 @@
+export function sessionModel(session = {}) {
+  return session.model || session.pricingModel || '';
+}
+
+export function filterSessionsByDashboardFilters(sessions = [], filters = {}) {
+  const sources = filters.sources || new Set();
+  const devices = filters.devices || new Set();
+  const models = filters.models || new Set();
+  const startDate = filters.startDate || '';
+  const endDate = filters.endDate || '';
+
+  return sessions.filter(session => {
+    const lastActivity = session.lastActivity || '';
+    const model = sessionModel(session);
+    return (!lastActivity || (!startDate || lastActivity >= startDate) && (!endDate || lastActivity <= endDate))
+      && (sources.size === 0 || sources.has(session.source))
+      && (devices.size === 0 || devices.has(session.device))
+      && (models.size === 0 || models.has(model));
+  });
+}
+
+export function buildModelUsageRows(dailyRows = [], sessions = []) {
+  const rows = new Map();
+
+  const ensure = (model) => {
+    const key = model || 'unknown';
+    if (!rows.has(key)) {
+      rows.set(key, {
+        model: key,
+        sources: new Set(),
+        days: new Set(),
+        sessionKeys: new Set(),
+        inputTokens: 0,
+        outputTokens: 0,
+        cacheReadTokens: 0,
+        cacheCreationTokens: 0,
+        cachedInputTokens: 0,
+        reasoningOutputTokens: 0,
+        totalTokens: 0,
+        costUSD: 0,
+        pricingStatuses: new Set(),
+        hasDaily: false
+      });
+    }
+    return rows.get(key);
+  };
+
+  for (const row of dailyRows) {
+    const model = row.model || 'unknown';
+    const target = ensure(model);
+    target.hasDaily = true;
+    target.sources.add(row.source);
+    if (row.usageDate) target.days.add(row.usageDate);
+    target.inputTokens += row.inputTokens || 0;
+    target.outputTokens += row.outputTokens || 0;
+    target.cacheReadTokens += row.cacheReadTokens || 0;
+    target.cacheCreationTokens += row.cacheCreationTokens || 0;
+    target.cachedInputTokens += row.cachedInputTokens || 0;
+    target.reasoningOutputTokens += row.reasoningOutputTokens || 0;
+    target.totalTokens += row.totalTokens || 0;
+    target.costUSD += row.costUSD || 0;
+    if (row.pricingStatus) target.pricingStatuses.add(row.pricingStatus);
+  }
+
+  for (const session of sessions) {
+    const model = sessionModel(session);
+    if (!model) continue;
+    const target = ensure(model);
+    target.sources.add(session.source);
+    if (session.lastActivity) target.days.add(session.lastActivity);
+    target.sessionKeys.add(`${session.device || ''}::${session.source || ''}::${session.sessionId || ''}`);
+    if (!target.hasDaily) {
+      target.inputTokens += session.inputTokens || 0;
+      target.outputTokens += session.outputTokens || 0;
+      target.cacheReadTokens += session.cacheReadTokens || 0;
+      target.cacheCreationTokens += session.cacheCreationTokens || 0;
+      target.cachedInputTokens += session.cachedInputTokens || 0;
+      target.reasoningOutputTokens += session.reasoningOutputTokens || 0;
+      target.totalTokens += session.totalTokens || 0;
+      target.costUSD += session.costUSD || 0;
+      if (session.pricingStatus) target.pricingStatuses.add(session.pricingStatus);
+    }
+  }
+
+  return Array.from(rows.values())
+    .map(row => {
+      const pricingStatus = row.pricingStatuses.has('priced')
+        ? (row.pricingStatuses.size > 1 ? '部分定价' : '已定价')
+        : (row.pricingStatuses.size > 0 ? '未定价' : '无价格');
+      return {
+        model: row.model,
+        sourceCount: row.sources.size,
+        sources: Array.from(row.sources).sort(),
+        dayCount: row.days.size,
+        sessionCount: row.sessionKeys.size,
+        inputTokens: row.inputTokens,
+        outputTokens: row.outputTokens,
+        cacheReadTokens: row.cacheReadTokens,
+        cacheCreationTokens: row.cacheCreationTokens,
+        cachedInputTokens: row.cachedInputTokens,
+        reasoningOutputTokens: row.reasoningOutputTokens,
+        totalTokens: row.totalTokens,
+        costUSD: row.costUSD,
+        pricingStatus
+      };
+    })
+    .sort((a, b) => b.totalTokens - a.totalTokens);
+}

package/src/client/dashboard/onboarding.js

@@ -0,0 +1,80 @@
+export function buildFirstRunState(data = {}) {
+  const dailyCount = data.daily?.length || 0;
+  const sessionCount = data.sessions?.length || 0;
+  const budgetCount = data.budgetProfiles?.length || 0;
+  const actionCount = data.advisorActions?.length || 0;
+  const tokenEventCount = data.tokenEvents?.length || 0;
+  const hasUsage = dailyCount > 0 || sessionCount > 0;
+  const hasBudget = budgetCount > 0;
+  const hasActions = actionCount > 0;
+  const hasLiveEvents = tokenEventCount > 0;
+
+  const steps = [
+    {
+      id: 'data',
+      status: hasUsage ? 'done' : 'todo',
+      title: '准备用量数据',
+      detail: hasUsage
+        ? `${dailyCount} 条 daily、${sessionCount} 个 session 已可复盘`
+        : '先用 demo，或通过 ccusage JSON dry-run 后再写入 SQLite',
+      action: hasUsage ? '已完成' : '打开导入/预算'
+    },
+    {
+      id: 'budget',
+      status: hasBudget ? 'done' : 'todo',
+      title: '创建预算窗口',
+      detail: hasBudget
+        ? `${budgetCount} 个自定义预算窗口已配置`
+        : '只设置你自己的 token/USD 窗口，不内置供应商套餐额度',
+      action: hasBudget ? '已完成' : '创建预算'
+    },
+    {
+      id: 'review',
+      status: hasActions ? 'done' : 'todo',
+      title: '进入复盘行动',
+      detail: hasActions
+        ? `${actionCount} 条 Advisor action 可在周报里追踪`
+        : '去 /review 把节省模拟或 ROI 建议加入行动清单',
+      action: hasActions ? '已完成' : '打开 /review'
+    }
+  ];
+
+  const notices = [];
+  if (!hasUsage) {
+    notices.push({
+      id: 'no-data',
+      tone: 'primary',
+      title: '还没有可复盘的用量数据',
+      detail: '运行 npm run demo 看完整流程，或打开导入/预算粘贴 ccusage JSON。真实采集仍需你显式确认。',
+      action: '打开导入/预算'
+    });
+  }
+  if (hasUsage && !hasActions) {
+    notices.push({
+      id: 'no-actions',
+      tone: 'review',
+      title: '下一步是把建议变成行动清单',
+      detail: '数据已经存在，但还没有 open/done/dismissed actions。去 /review 处理 Savings Simulator 和 ROI Advisor。',
+      action: '打开 /review'
+    });
+  }
+  if (hasBudget && !hasLiveEvents) {
+    notices.push({
+      id: 'budget-no-live-events',
+      tone: 'live',
+      title: '预算窗口已配置，但 /live 需要事件级 token 数据',
+      detail: '/live 只看最近窗口内的 token_events；只有 session 聚合数据时预算仍会保存，但实时 burn rate 可能为空。',
+      action: '打开 /live'
+    });
+  }
+
+  return {
+    hasUsage,
+    hasBudget,
+    hasActions,
+    hasLiveEvents,
+    shouldShow: notices.length > 0 || steps.some(step => step.status !== 'done'),
+    steps,
+    notices
+  };
+}