@notenkidev/claude-token-dashboard 0.1.11 → 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"
@@ -46,6 +47,9 @@ export default function Page() {
         skippedDup={skippedDup}
       />
 
+      {/* Insights */}
+      <InsightPanel byProject={byProject} byProjectClaudeMd={byProjectClaudeMd} />
+
       {/* Daily chart */}
       <Card>
         <CardHeader>

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/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.11",
+  "version": "0.1.12",
   "description": "Visualize your Claude Code token usage by project and date",
   "bin": {
     "claude-token-dashboard": "bin/cli.js"