@arraystar/tokenscope 0.1.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/data.ts

@@ -0,0 +1,90 @@
+import type { DashboardData, SessionData } from "./types";
+import data from "../public/data.json" with { type: "json" };
+
+export function useData(): DashboardData {
+  return data as DashboardData;
+}
+
+export function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+export function fmtCost(cost: number, symbol = "$"): string {
+  if (cost >= 1) return `${symbol}${cost.toFixed(2)}`;
+  if (cost >= 0.01) return `${symbol}${cost.toFixed(3)}`;
+  return `${symbol}${cost.toFixed(4)}`;
+}
+
+export function fmtPercent(value: number, total: number): string {
+  if (total === 0) return "0%";
+  return `${((value / total) * 100).toFixed(1)}%`;
+}
+
+const COLORS = [
+  "hsl(220, 70%, 50%)",
+  "hsl(160, 60%, 45%)",
+  "hsl(30, 80%, 55%)",
+  "hsl(280, 60%, 55%)",
+  "hsl(0, 70%, 55%)",
+  "hsl(190, 70%, 45%)",
+  "hsl(45, 80%, 50%)",
+  "hsl(330, 60%, 50%)",
+];
+
+export function projectColor(index: number): string {
+  return COLORS[index % COLORS.length];
+}
+
+export interface SkillStat {
+  name: string;
+  total: number;
+  cost: number;
+  turns: number;
+  color: string;
+}
+
+export function getSkillStats(data: DashboardData): SkillStat[] {
+  const map = new Map<string, { total: number; cost: number; turns: number }>();
+  for (const modelData of Object.values(data.models)) {
+    for (const sessionData of Object.values(modelData.sessions)) {
+      for (const turn of sessionData.turns) {
+        const m = turn.user.match(/skills\/([^/\s]+)/);
+        if (!m) continue;
+        const name = m[1];
+        const cur = map.get(name) ?? { total: 0, cost: 0, turns: 0 };
+        cur.total += turn.total;
+        cur.cost += turn.cost;
+        cur.turns += 1;
+        map.set(name, cur);
+      }
+    }
+  }
+  return Array.from(map.entries())
+    .map(([name, v], i) => ({ name, ...v, color: COLORS[i % COLORS.length] }))
+    .sort((a, b) => b.total - a.total);
+}
+
+export function getAllSessions(data: DashboardData): (SessionData & { model: string; sessionKey: string })[] {
+  const sessions: (SessionData & { model: string; sessionKey: string })[] = [];
+  for (const [modelName, modelData] of Object.entries(data.models)) {
+    for (const [sessionKey, sessionData] of Object.entries(modelData.sessions)) {
+      sessions.push({ ...sessionData, model: modelName, sessionKey });
+    }
+  }
+  return sessions.sort((a, b) => b.stats.total - a.stats.total);
+}
+
+export function getSources(data: DashboardData): ("claude" | "codex")[] {
+  if (data.sources?.length) return data.sources;
+  // Auto-detect: if any session has source field, collect unique values
+  const found = new Set<"claude" | "codex">();
+  for (const modelData of Object.values(data.models)) {
+    for (const sessionData of Object.values(modelData.sessions)) {
+      if (sessionData.source) found.add(sessionData.source);
+    }
+  }
+  return found.size > 0 ? Array.from(found) : ["claude"]; // default to claude for legacy data
+}
+

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/i18n.tsx

@@ -0,0 +1,148 @@
+import { createContext, useContext } from "react";
+
+export type Lang = "zh" | "en";
+
+const t = {
+  zh: {
+    title: "TokenScope",
+    subtitle: "Your token, visualized.",
+    overview: "概览",
+    sessions: "会话",
+    generated: "生成于",
+    totalTokens: "总 Tokens",
+    messages: "条消息",
+    cacheRead: "缓存读取",
+    ofTotal: "% 占总量",
+    sessionsCount: "会话数",
+    projects: "个项目",
+    estCost: "预估费用",
+    basedOnPricing: "基于 API 定价",
+    tokenByProject: "按项目分布",
+    tokenBreakdown: "Token 构成",
+    tokenBySkill: "按技能分布",
+    turns: "轮",
+    dailyUsage: "每日 Token 用量",
+    topSessions: "热门会话",
+    input: "输入",
+    output: "输出",
+    cacheReadLabel: "缓存读",
+    cacheWriteLabel: "缓存写",
+    msgs: "条消息",
+    sessionNotFound: "未找到该会话",
+    backToOverview: "返回总览",
+    session: "会话",
+    tokens: "tokens",
+    tokenUsagePerTurn: "每轮对话 Token 用量",
+    conversationTurns: "对话记录",
+    turn: "轮",
+    time: "时间",
+    message: "消息",
+    inputCol: "输入",
+    outputCol: "输出",
+    cacheRCol: "缓存读",
+    cacheWriteCol: "缓存写",
+    totalCol: "总计",
+    costCol: "费用",
+    totalLabel: "总计",
+    sortAsc: "升序",
+    sortDesc: "降序",
+    turnLabel: "轮次",
+    timeLabel: "时间",
+    messageLabel: "消息",
+    settings: "设置",
+    modelPricing: "模型定价",
+    detectedModels: "检测到的模型",
+    selectPricing: "选择定价方案",
+    customPricing: "自定义",
+    inputPrice: "输入价格",
+    outputPrice: "输出价格",
+    cacheReadPrice: "缓存读价格",
+    perMillionTokens: "每百万 tokens",
+    resetToDefaults: "恢复默认",
+    noPricing: "未设置定价",
+    currency: "货币",
+    sourceFilter: "数据来源",
+    allSources: "全部",
+    claudeCode: "Claude Code",
+    codexCli: "Codex CLI",
+  },
+  en: {
+    title: "TokenScope",
+    subtitle: "Your token, visualized.",
+    overview: "Overview",
+    sessions: "Sessions",
+    generated: "Generated",
+    totalTokens: "Total Tokens",
+    messages: "messages",
+    cacheRead: "Cache Read",
+    ofTotal: "% of total",
+    sessionsCount: "Sessions",
+    projects: "projects",
+    estCost: "Est. Cost",
+    basedOnPricing: "Based on API pricing",
+    tokenByProject: "Token Usage by Project",
+    tokenBreakdown: "Token Breakdown",
+    tokenBySkill: "Token Usage by Skill",
+    turns: "turns",
+    dailyUsage: "Daily Token Usage",
+    topSessions: "Top Sessions",
+    input: "Input",
+    output: "Output",
+    cacheReadLabel: "Cache Read",
+    cacheWriteLabel: "Cache Write",
+    msgs: "messages",
+    sessionNotFound: "Session not found",
+    backToOverview: "Back to Overview",
+    session: "Session",
+    tokens: "tokens",
+    tokenUsagePerTurn: "Token Usage per Turn",
+    conversationTurns: "Conversation Turns",
+    turn: "#",
+    time: "Time",
+    message: "Message",
+    inputCol: "Input",
+    outputCol: "Output",
+    cacheRCol: "CacheR",
+    cacheWriteCol: "CacheW",
+    totalCol: "Total",
+    costCol: "Cost",
+    totalLabel: "Total",
+    sortAsc: "asc",
+    sortDesc: "desc",
+    turnLabel: "#",
+    timeLabel: "Time",
+    messageLabel: "Message",
+    settings: "Settings",
+    modelPricing: "Model Pricing",
+    detectedModels: "Detected Models",
+    selectPricing: "Select pricing profile",
+    customPricing: "Custom",
+    inputPrice: "Input Price",
+    outputPrice: "Output Price",
+    cacheReadPrice: "Cache Read Price",
+    perMillionTokens: "per 1M tokens",
+    resetToDefaults: "Reset to Defaults",
+    noPricing: "No pricing set",
+    currency: "Currency",
+    sourceFilter: "Data Source",
+    allSources: "All",
+    claudeCode: "Claude Code",
+    codexCli: "Codex CLI",
+  },
+} as const;
+
+export type Translations = (typeof t)["zh"];
+export type TranslationKey = keyof Translations;
+
+export function useTranslations(lang: Lang): Translations {
+  return t[lang] as Translations;
+}
+
+export const LangContext = createContext<{
+  lang: Lang;
+  setLang: (l: Lang) => void;
+}>({ lang: "zh", setLang: () => {} });
+
+export function useLang() {
+  return useContext(LangContext);
+}

package/src/index.css

@@ -0,0 +1,138 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}
+
+@keyframes slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.animate-slide-in {
+  animation: slide-in 0.2s ease-out;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)