@notenkidev/claude-token-dashboard 0.1.10 → 0.1.12

package/app/page.tsx

@@ -1,5 +1,6 @@
 import { collect } from "@/lib/collect"
 import SummaryCards from "@/components/SummaryCards"
+import InsightPanel from "@/components/InsightPanel"
 import ProjectTable from "@/components/ProjectTable"
 import DailyChart from "@/components/DailyChart"
 import RefreshButton from "@/components/RefreshButton"
@@ -8,7 +9,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 export const dynamic = "force-dynamic"
 
 export default function Page() {
-  const { byProject, byDay, totalFiles, totalEntries, skippedDup } = collect()
+  const { byProject, byDay, byProjectClaudeMd, totalFiles, totalEntries, skippedDup } = collect()
 
   const dayData = Object.entries(byDay)
     .filter(([date]) => date !== "unknown")
@@ -46,6 +47,9 @@ export default function Page() {
         skippedDup={skippedDup}
       />
 
+      {/* Insights */}
+      <InsightPanel byProject={byProject} byProjectClaudeMd={byProjectClaudeMd} />
+
       {/* Daily chart */}
       <Card>
         <CardHeader>
@@ -66,7 +70,7 @@ export default function Page() {
           </CardTitle>
         </CardHeader>
         <CardContent className="p-0">
-          <ProjectTable byProject={byProject} />
+          <ProjectTable byProject={byProject} byProjectClaudeMd={byProjectClaudeMd} />
         </CardContent>
       </Card>
     </main>

package/components/InsightPanel.tsx

@@ -0,0 +1,64 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import type { TokenStats } from "@/lib/collect"
+import { generateInsights, type InsightLevel } from "@/lib/insights"
+
+interface Props {
+  byProject: Record<string, TokenStats>
+  byProjectClaudeMd: Record<string, number | null>
+}
+
+const LEVEL_STYLES: Record<InsightLevel, { bar: string; icon: string; badge: string }> = {
+  alert:   { bar: "bg-red-500",    icon: "🔴", badge: "text-red-400" },
+  warning: { bar: "bg-amber-500",  icon: "⚠️",  badge: "text-amber-400" },
+  tip:     { bar: "bg-emerald-500",icon: "💡",  badge: "text-emerald-400" },
+}
+
+const LEVEL_LABEL: Record<InsightLevel, string> = {
+  alert:   "重要",
+  warning: "注意",
+  tip:     "提案",
+}
+
+export default function InsightPanel({ byProject, byProjectClaudeMd }: Props) {
+  const insights = generateInsights(byProject, byProjectClaudeMd)
+
+  if (insights.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base font-semibold text-foreground">
+          削減提案
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {insights.map((insight, i) => {
+          const s = LEVEL_STYLES[insight.level]
+          return (
+            <div
+              key={i}
+              className="flex gap-3 rounded-lg border border-border bg-muted/20 overflow-hidden"
+            >
+              {/* 左カラーバー */}
+              <div className={`w-1 shrink-0 ${s.bar}`} />
+              <div className="flex items-start gap-2 py-3 pr-4">
+                <span className="text-base leading-none mt-0.5">{s.icon}</span>
+                <div>
+                  <span className={`text-xs font-semibold ${s.badge} mr-2`}>
+                    {LEVEL_LABEL[insight.level]}
+                  </span>
+                  <span className="text-xs font-medium text-foreground mr-2">
+                    {insight.title}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {insight.message}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </CardContent>
+    </Card>
+  )
+}

package/components/ProjectTable.tsx

@@ -1,8 +1,11 @@
 import type { TokenStats } from "@/lib/collect"
 import { calcCost, fmtCost } from "@/lib/pricing"
 
+const CLAUDE_MD_WARN_BYTES = 5 * 1024 // 5 KB
+
 interface Props {
   byProject: Record<string, TokenStats>
+  byProjectClaudeMd: Record<string, number | null>
 }
 
 function fmt(n: number): string {
@@ -11,13 +14,14 @@ function fmt(n: number): string {
   return n.toLocaleString()
 }
 
-export default function ProjectTable({ byProject }: Props) {
+export default function ProjectTable({ byProject, byProjectClaudeMd }: Props) {
   const rows = Object.entries(byProject)
     .map(([project, stats]) => ({
       project,
       ...stats,
       total: stats.input + stats.output,
       cost: calcCost(stats),
+      claudeMdBytes: byProjectClaudeMd[project] ?? null,
     }))
     .sort((a, b) => b.cost - a.cost)
 
@@ -36,6 +40,7 @@ export default function ProjectTable({ byProject }: Props) {
             <th className="px-4 py-3 text-right font-medium text-muted-foreground">Input</th>
             <th className="px-4 py-3 text-right font-medium text-muted-foreground hidden md:table-cell">Cache Read</th>
             <th className="px-4 py-3 text-right font-medium text-muted-foreground hidden lg:table-cell">Cache Create</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground hidden xl:table-cell">CLAUDE.md</th>
             <th className="px-4 py-3 text-right font-medium text-muted-foreground">Tokens</th>
             <th className="px-4 py-3 w-28 hidden sm:table-cell"></th>
           </tr>
@@ -45,6 +50,11 @@ export default function ProjectTable({ byProject }: Props) {
             const pct = (row.total / maxTotal) * 100
             const costShare = totalCost > 0 ? row.cost / totalCost : 0
             const isHighCost = costShare >= WARNING_THRESHOLD
+            const isHeavyClaudeMd = row.claudeMdBytes !== null && row.claudeMdBytes >= CLAUDE_MD_WARN_BYTES
+            const claudeMdLabel =
+              row.claudeMdBytes === null
+                ? "-"
+                : `${(row.claudeMdBytes / 1024).toFixed(1)} KB`
 
             return (
               <tr
@@ -81,6 +91,20 @@ export default function ProjectTable({ byProject }: Props) {
                 <td className="px-4 py-3 text-right font-mono text-xs text-muted-foreground hidden lg:table-cell">
                   {fmt(row.cacheCreate)}
                 </td>
+                <td className="px-4 py-3 text-right font-mono text-xs hidden xl:table-cell">
+                  {isHeavyClaudeMd ? (
+                    <span
+                      className="text-orange-400 font-semibold"
+                      title="CLAUDE.mdが重い可能性があります（5KB以上）"
+                    >
+                      ⚠ {claudeMdLabel}
+                    </span>
+                  ) : (
+                    <span className={row.claudeMdBytes !== null ? "text-muted-foreground" : "text-muted-foreground/40"}>
+                      {claudeMdLabel}
+                    </span>
+                  )}
+                </td>
                 <td className="px-4 py-3 text-right font-mono text-xs text-muted-foreground">{fmt(row.total)}</td>
                 <td className="px-4 py-3 hidden sm:table-cell">
                   <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">

package/lib/collect.ts

@@ -12,6 +12,7 @@ export interface TokenStats {
 export interface DashboardData {
   byProject: Record<string, TokenStats>
   byDay: Record<string, TokenStats>
+  byProjectClaudeMd: Record<string, number | null> // bytes, null = not found
   totalFiles: number
   totalEntries: number
   skippedDup: number
@@ -50,15 +51,34 @@ function addStats(target: TokenStats, input: number, output: number, cacheCreate
   target.cacheRead += cacheRead
 }
 
+function claudeMdBytes(cwd: string): number | null {
+  // Walk up from cwd to find CLAUDE.md, stopping at home directory
+  const home = os.homedir()
+  let dir = cwd
+  while (dir.startsWith(home) && dir !== home) {
+    try {
+      const stat = fs.statSync(path.join(dir, "CLAUDE.md"))
+      if (stat.isFile()) return stat.size
+    } catch { /* not found at this level */ }
+    const parent = path.dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+  return null
+}
+
 export function collect(): DashboardData {
   const byProject: Record<string, TokenStats> = {}
   const byDay: Record<string, TokenStats> = {}
+  const cwdByLabel: Record<string, string> = {}  // label → first seen cwd
   const seenMessageIds = new Set<string>()
   let totalFiles = 0
   let totalEntries = 0
   let skippedDup = 0
 
-  if (!fs.existsSync(BASE)) return { byProject, byDay, totalFiles, totalEntries, skippedDup }
+  if (!fs.existsSync(BASE)) {
+    return { byProject, byDay, byProjectClaudeMd: {}, totalFiles, totalEntries, skippedDup }
+  }
 
   const projectDirs = fs.readdirSync(BASE).sort()
 
@@ -101,6 +121,7 @@ export function collect(): DashboardData {
 
         const cwd = (d.cwd as string) || ""
         const label = cwd ? projectLabelFromCwd(cwd) : fallbackLabel
+        if (cwd && !cwdByLabel[label]) cwdByLabel[label] = cwd
 
         const ts = (d.timestamp as string) || ""
         let date = "unknown"
@@ -121,5 +142,12 @@ export function collect(): DashboardData {
     }
   }
 
-  return { byProject, byDay, totalFiles, totalEntries, skippedDup }
+  // Resolve CLAUDE.md sizes after all entries are processed
+  const byProjectClaudeMd: Record<string, number | null> = {}
+  for (const label of Object.keys(byProject)) {
+    const cwd = cwdByLabel[label]
+    byProjectClaudeMd[label] = cwd ? claudeMdBytes(cwd) : null
+  }
+
+  return { byProject, byDay, byProjectClaudeMd, totalFiles, totalEntries, skippedDup }
 }

package/lib/insights.ts

@@ -0,0 +1,86 @@
+import type { TokenStats } from "./collect"
+import { calcCost, PRICING } from "./pricing"
+
+export type InsightLevel = "warning" | "alert" | "tip"
+
+export interface Insight {
+  level: InsightLevel
+  title: string
+  message: string
+}
+
+const CLAUDE_MD_WARN_BYTES = 5 * 1024
+const HIGH_COST_SHARE_THRESHOLD = 0.20   // 20% → alert
+const HIGH_CACHE_CREATE_RATIO = 0.50     // cache_create > 50% of own cost → warning
+
+function cacheCreateCost(stats: TokenStats): number {
+  return stats.cacheCreate * PRICING.cacheCreate
+}
+
+export function generateInsights(
+  byProject: Record<string, TokenStats>,
+  byProjectClaudeMd: Record<string, number | null>,
+): Insight[] {
+  const insights: Insight[] = []
+
+  const entries = Object.entries(byProject)
+  if (entries.length === 0) return insights
+
+  const totalCost = entries.reduce((s, [, v]) => s + calcCost(v), 0)
+  if (totalCost === 0) return insights
+
+  // ── Insight 1: 最もコストが高いプロジェクト ────────────────────────────
+  const [topProject, topStats] = entries.reduce(
+    (best, cur) => (calcCost(cur[1]) > calcCost(best[1]) ? cur : best),
+  )
+  const topShare = calcCost(topStats) / totalCost
+  insights.push({
+    level: topShare >= HIGH_COST_SHARE_THRESHOLD ? "alert" : "tip",
+    title: "最大コストプロジェクト",
+    message: `${topProject} が全体の ${(topShare * 100).toFixed(1)}% を占めています。CLAUDE.mdのサイズを確認してください。`,
+  })
+
+  // ── Insight 2: cache_creation が高いプロジェクト ──────────────────────
+  const highCacheProjects = entries
+    .filter(([, stats]) => {
+      const own = calcCost(stats)
+      return own > 0 && cacheCreateCost(stats) / own >= HIGH_CACHE_CREATE_RATIO
+    })
+    .sort(([, a], [, b]) => cacheCreateCost(b) - cacheCreateCost(a))
+    .slice(0, 3)
+
+  for (const [project] of highCacheProjects) {
+    insights.push({
+      level: "warning",
+      title: "cache_creation 過多",
+      message: `${project} の cache_creation が高いです。CLAUDE.mdが肥大化している可能性があります。`,
+    })
+  }
+
+  // ── Insight 3: 全体最適化ポテンシャル ─────────────────────────────────
+  // 大きな CLAUDE.md（≥5KB）を持つプロジェクトの cache_create コストを
+  // 50% 削減できると仮定した場合の節約額
+  const heavyProjects = entries.filter(
+    ([label]) => (byProjectClaudeMd[label] ?? 0) >= CLAUDE_MD_WARN_BYTES,
+  )
+
+  const targetProjects = heavyProjects.length > 0
+    ? heavyProjects
+    : entries.sort(([, a], [, b]) => cacheCreateCost(b) - cacheCreateCost(a)).slice(0, 3)
+
+  const optimizableCost = targetProjects.reduce(
+    (s, [, stats]) => s + cacheCreateCost(stats),
+    0,
+  )
+  const savingPct = (optimizableCost * 0.5) / totalCost * 100
+
+  if (savingPct >= 1) {
+    insights.push({
+      level: "tip",
+      title: "最適化ポテンシャル",
+      message: `最適化すれば推定 ${savingPct.toFixed(1)}% のコスト削減が可能です。`,
+    })
+  }
+
+  return insights
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notenkidev/claude-token-dashboard",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Visualize your Claude Code token usage by project and date",
   "bin": {
     "claude-token-dashboard": "bin/cli.js"