agentfit 0.1.0 → 0.1.2

package/components/daily-chart.tsx

@@ -1,6 +1,20 @@
 'use client'
 
-import { Line, LineChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { useMemo, useState, useEffect } from 'react'
+import {
+  Line,
+  LineChart,
+  Bar,
+  BarChart,
+  Area,
+  AreaChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Legend,
+  Cell,
+  Tooltip as RechartsTooltip,
+} from 'recharts'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import {
   ChartContainer,
@@ -8,111 +22,461 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from '@/components/ui/chart'
-import type { DailyUsage } from '@/lib/parse-logs'
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
+import type { DailyUsage, SessionSummary } from '@/lib/parse-logs'
 import { formatCost } from '@/lib/format'
 
+// ─── 1. Daily Cost ──────────────────────────────────────────────────
+
 const costConfig = {
   cost: { label: 'Cost', color: 'var(--chart-5)' },
 } satisfies ChartConfig
 
-const sessionsConfig = {
-  sessions: { label: 'Sessions', color: 'var(--chart-2)' },
+export function DailyCostChart({ daily }: { daily: DailyUsage[] }) {
+  const data = daily.map((d) => ({
+    date: d.date.slice(5),
+    cost: Number(d.costUSD.toFixed(2)),
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Daily Cost</CardTitle>
+        <CardDescription>USD spent per day</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={costConfig} className="min-h-[250px] w-full">
+          <LineChart data={data} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
+            <ChartTooltip
+              content={<ChartTooltipContent formatter={(value) => formatCost(Number(value))} />}
+            />
+            <Line dataKey="cost" type="monotone" stroke="var(--color-cost)" strokeWidth={2} dot={{ r: 3, fill: 'var(--color-cost)' }} activeDot={{ r: 5 }} />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── 2. Tool Mix Over Time ──────────────────────────────────────────
+
+const TOP_TOOLS = ['Read', 'Edit', 'Write', 'Bash', 'Grep', 'Agent'] as const
+const toolMixConfig = {
+  Read: { label: 'Read', color: 'var(--chart-1)' },
+  Edit: { label: 'Edit', color: 'var(--chart-2)' },
+  Write: { label: 'Write', color: 'var(--chart-3)' },
+  Bash: { label: 'Bash', color: 'var(--chart-4)' },
+  Grep: { label: 'Grep', color: 'var(--chart-6)' },
+  Agent: { label: 'Agent', color: 'var(--chart-7)' },
 } satisfies ChartConfig
 
-const messagesConfig = {
-  messages: { label: 'Messages', color: 'var(--chart-1)' },
+export function ToolMixChart({ daily }: { daily: DailyUsage[] }) {
+  const data = daily.map((d) => {
+    const row: Record<string, string | number> = { date: d.date.slice(5) }
+    for (const tool of TOP_TOOLS) {
+      row[tool] = d.toolCallsDetail[tool] || 0
+    }
+    return row
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tool Mix Over Time</CardTitle>
+        <CardDescription>Daily tool calls — explore (Read/Grep) vs build (Edit/Write)</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={toolMixConfig} className="min-h-[250px] w-full">
+          <AreaChart data={data} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            {TOP_TOOLS.map((tool) => (
+              <Area
+                key={tool}
+                dataKey={tool}
+                type="monotone"
+                stackId="1"
+                stroke={`var(--color-${tool})`}
+                fill={`var(--color-${tool})`}
+                fillOpacity={0.4}
+              />
+            ))}
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── 3. Interruption Rate Trend ─────────────────────────────────────
+
+const interruptionConfig = {
+  rate: { label: 'Interruption Rate', color: 'var(--chart-5)' },
 } satisfies ChartConfig
 
-export function DailyChart({ daily }: { daily: DailyUsage[] }) {
+export function InterruptionRateChart({ daily }: { daily: DailyUsage[] }) {
   const data = daily.map((d) => ({
     date: d.date.slice(5),
-    cost: Number(d.costUSD.toFixed(2)),
-    sessions: d.sessions,
-    messages: d.messages,
+    rate: d.messages > 0 ? Number(((d.interruptions / d.messages) * 100).toFixed(1)) : 0,
+    interruptions: d.interruptions,
   }))
 
   return (
-    <>
-      <Card>
-        <CardHeader>
-          <CardTitle>Daily Cost</CardTitle>
-          <CardDescription>USD spent per day</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ChartContainer config={costConfig} className="min-h-[250px] w-full">
-            <LineChart data={data} accessibilityLayer>
-              <CartesianGrid vertical={false} />
-              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
-              <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
-              <ChartTooltip
-                content={
-                  <ChartTooltipContent
-                    formatter={(value) => formatCost(Number(value))}
-                  />
-                }
-              />
-              <Line
-                dataKey="cost"
-                type="monotone"
-                stroke="var(--color-cost)"
-                strokeWidth={2}
-                dot={{ r: 3, fill: 'var(--color-cost)' }}
-                activeDot={{ r: 5 }}
-              />
-            </LineChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
+    <Card>
+      <CardHeader>
+        <CardTitle>Interruption Rate</CardTitle>
+        <CardDescription>Daily interruptions as % of messages — lower is better</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={interruptionConfig} className="min-h-[250px] w-full">
+          <LineChart data={data} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `${v}%`} />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value, name) =>
+                    name === 'rate' ? `${value}%` : String(value)
+                  }
+                />
+              }
+            />
+            <Line dataKey="rate" type="monotone" stroke="var(--color-rate)" strokeWidth={2} dot={{ r: 3, fill: 'var(--color-rate)' }} activeDot={{ r: 5 }} />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Daily Sessions</CardTitle>
-          <CardDescription>Number of sessions per day</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ChartContainer config={sessionsConfig} className="min-h-[250px] w-full">
-            <LineChart data={data} accessibilityLayer>
-              <CartesianGrid vertical={false} />
-              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
-              <YAxis tickLine={false} axisLine={false} />
-              <ChartTooltip content={<ChartTooltipContent />} />
-              <Line
-                dataKey="sessions"
-                type="monotone"
-                stroke="var(--color-sessions)"
-                strokeWidth={2}
-                dot={{ r: 3, fill: 'var(--color-sessions)' }}
-                activeDot={{ r: 5 }}
-              />
-            </LineChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
+// ─── 4. Top Skills Used ─────────────────────────────────────────────
+
+const commandConfig = {
+  count: { label: 'Uses', color: 'var(--chart-1)' },
+} satisfies ChartConfig
 
+interface CommandBarEntry {
+  name: string
+  count: number
+  fill: string
+  historyCount: number
+  sessionCount: number
+}
+
+export function TopCommandsChart() {
+  const [data, setData] = useState<CommandBarEntry[]>([])
+
+  useEffect(() => {
+    fetch('/api/commands')
+      .then(r => r.json())
+      .then(analysis => {
+        const dbSkills: Record<string, number> = analysis.dbSkillCounts || {}
+        const bi = analysis.commands
+          .filter((c: { used: boolean; count: number }) => c.used && c.count > 0)
+          .map((c: { command: string; count: number }) => {
+            const sk = dbSkills[c.command] || 0
+            return { name: c.command, count: c.count, fill: 'var(--chart-1)', historyCount: c.count - sk, sessionCount: sk }
+          })
+          .sort((a: { count: number }, b: { count: number }) => b.count - a.count)
+          .slice(0, 5)
+        const cu = analysis.customCommands
+          .sort((a: { count: number }, b: { count: number }) => b.count - a.count)
+          .slice(0, 5)
+          .map((c: { command: string; count: number; historyCount?: number; sessionCount?: number }) => ({
+            name: c.command,
+            count: c.count,
+            fill: 'var(--chart-4)',
+            historyCount: c.historyCount || 0,
+            sessionCount: c.sessionCount || 0,
+          }))
+        const combined = [...bi, ...cu].sort((a, b) => b.count - a.count)
+        setData(combined)
+      })
+      .catch(() => {})
+  }, [])
+
+  if (data.length === 0) {
+    return (
       <Card>
         <CardHeader>
-          <CardTitle>Daily Messages</CardTitle>
-          <CardDescription>Messages exchanged per day</CardDescription>
+          <CardTitle>Top Commands & Skills</CardTitle>
+          <CardDescription>Most used built-in commands and custom skills</CardDescription>
         </CardHeader>
         <CardContent>
-          <ChartContainer config={messagesConfig} className="min-h-[250px] w-full">
-            <LineChart data={data} accessibilityLayer>
-              <CartesianGrid vertical={false} />
-              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
-              <YAxis tickLine={false} axisLine={false} />
-              <ChartTooltip content={<ChartTooltipContent />} />
-              <Line
-                dataKey="messages"
-                type="monotone"
-                stroke="var(--color-messages)"
-                strokeWidth={2}
-                dot={{ r: 3, fill: 'var(--color-messages)' }}
-                activeDot={{ r: 5 }}
-              />
-            </LineChart>
-          </ChartContainer>
+          <div className="flex min-h-[250px] items-center justify-center text-sm text-muted-foreground">
+            No commands used yet
+          </div>
         </CardContent>
       </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Top Commands & Skills</CardTitle>
+        <CardDescription>
+          <span className="inline-flex items-center gap-1.5"><span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: 'var(--chart-1)' }} /> Built-in</span>
+          <span className="inline-flex items-center gap-1.5 ml-3"><span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: 'var(--chart-4)' }} /> Custom skill</span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={commandConfig} className="w-full" style={{ minHeight: Math.max(200, data.length * 36) }}>
+          <BarChart data={data} layout="vertical" margin={{ left: 8 }} accessibilityLayer>
+            <XAxis type="number" tickLine={false} axisLine={false} />
+            <YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={140} />
+            <RechartsTooltip
+              cursor={{ fill: 'var(--muted)', opacity: 0.3 }}
+              content={({ active, payload }) => {
+                if (!active || !payload?.length) return null
+                const d = payload[0].payload as CommandBarEntry
+                return (
+                  <div className="rounded-lg border bg-background px-3 py-2 text-sm shadow-md">
+                    <div className="font-semibold">{d.name}</div>
+                    <div className="text-muted-foreground mt-1 space-y-0.5">
+                      <div className="flex justify-between gap-4">
+                        <span>Slash command</span>
+                        <span className="font-mono">{d.historyCount ?? 0}</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>Skill invocation</span>
+                        <span className="font-mono">{d.sessionCount ?? 0}</span>
+                      </div>
+                      <div className="flex justify-between gap-4 border-t pt-0.5 text-foreground font-medium">
+                        <span>Total</span>
+                        <span className="font-mono">{d.count ?? 0}</span>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            />
+            <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+              {data.map((entry, i) => (
+                <Cell key={i} fill={entry.fill} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── 5. User vs Assistant Messages ──────────────────────────────────
+
+const msgRatioConfig = {
+  userMessages: { label: 'User', color: 'var(--chart-1)' },
+  assistantMessages: { label: 'Assistant', color: 'var(--chart-3)' },
+} satisfies ChartConfig
+
+export function UserVsAssistantChart({ daily }: { daily: DailyUsage[] }) {
+  const data = daily.map((d) => ({
+    date: d.date.slice(5),
+    userMessages: d.userMessages,
+    assistantMessages: d.assistantMessages,
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User vs Assistant Messages</CardTitle>
+        <CardDescription>Low user ratio = Claude doing more autonomous turns</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={msgRatioConfig} className="min-h-[250px] w-full">
+          <BarChart data={data} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="userMessages" stackId="1" fill="var(--color-userMessages)" radius={[0, 0, 0, 0]} />
+            <Bar dataKey="assistantMessages" stackId="1" fill="var(--color-assistantMessages)" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── 6. Token Usage Heatmap ─────────────────────────────────────────
+
+const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+function formatTokensShort(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(0)}K`
+  return String(n)
+}
+
+function formatDateLabel(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  const month = MONTH_NAMES[d.getMonth()]
+  const day = d.getDate()
+  const suffix = day === 1 || day === 21 || day === 31 ? 'st' : day === 2 || day === 22 ? 'nd' : day === 3 || day === 23 ? 'rd' : 'th'
+  return `${month} ${day}${suffix}`
+}
+
+export function TokenUsageHeatmap({ daily }: { daily: DailyUsage[] }) {
+  const { tokensByDate, rateLimitByDate, maxTokens, totalTokens } = useMemo(() => {
+    const tMap = new Map<string, number>()
+    const rMap = new Map<string, number>()
+    let max = 0
+    let total = 0
+    for (const d of daily) {
+      tMap.set(d.date, d.totalTokens)
+      total += d.totalTokens
+      if (d.totalTokens > max) max = d.totalTokens
+      if (d.rateLimitErrors > 0) rMap.set(d.date, d.rateLimitErrors)
+    }
+    return { tokensByDate: tMap, rateLimitByDate: rMap, maxTokens: max, totalTokens: total }
+  }, [daily])
+
+  const { weeks, monthLabels } = useMemo(() => {
+    if (daily.length === 0) return { weeks: [], monthLabels: [] }
+    const lastDate = new Date(daily[daily.length - 1].date)
+    const result: { date: string; tokens: number; rateLimits: number; dayOfWeek: number }[][] = []
+    const startDate = new Date(lastDate)
+    startDate.setDate(startDate.getDate() - 83)
+    // Align to Sunday
+    startDate.setDate(startDate.getDate() - startDate.getDay())
+
+    let currentWeek: { date: string; tokens: number; rateLimits: number; dayOfWeek: number }[] = []
+    const d = new Date(startDate)
+    while (d <= lastDate) {
+      const dateStr = d.toLocaleDateString('en-CA')
+      currentWeek.push({
+        date: dateStr,
+        tokens: tokensByDate.get(dateStr) || 0,
+        rateLimits: rateLimitByDate.get(dateStr) || 0,
+        dayOfWeek: d.getDay(),
+      })
+      if (d.getDay() === 6) {
+        result.push(currentWeek)
+        currentWeek = []
+      }
+      d.setDate(d.getDate() + 1)
+    }
+    if (currentWeek.length > 0) result.push(currentWeek)
+
+    // Compute month labels with column positions
+    const labels: { label: string; col: number }[] = []
+    let lastMonth = -1
+    for (let wi = 0; wi < result.length; wi++) {
+      const firstDay = result[wi][0]
+      if (!firstDay) continue
+      const month = new Date(firstDay.date).getMonth()
+      if (month !== lastMonth) {
+        labels.push({ label: MONTH_NAMES[month], col: wi })
+        lastMonth = month
+      }
+    }
+
+    return { weeks: result, monthLabels: labels }
+  }, [daily, tokensByDate, rateLimitByDate])
+
+  const totalRateLimitDays = rateLimitByDate.size
+
+  function getIntensity(tokens: number): string {
+    if (tokens === 0) return 'bg-muted'
+    const ratio = tokens / maxTokens
+    if (ratio <= 0.25) return 'bg-blue-200 dark:bg-blue-900/50'
+    if (ratio <= 0.5) return 'bg-blue-300 dark:bg-blue-700/60'
+    if (ratio <= 0.75) return 'bg-blue-400 dark:bg-blue-600/70'
+    return 'bg-blue-500 dark:bg-blue-500'
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          {formatTokensShort(totalTokens)} tokens in the last {daily.length} days
+        </CardTitle>
+        <CardDescription>
+          Daily token volume
+          {totalRateLimitDays > 0 && (
+            <span className="ml-1">
+              · <span className="inline-block h-2.5 w-2.5 rounded-sm ring-2 ring-rose-400 ring-inset bg-blue-300 align-middle" /> = rate limited ({totalRateLimitDays}d)
+            </span>
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <TooltipProvider>
+        <div className="overflow-x-auto">
+          <div className="flex w-full gap-[3px]">
+            {/* Day labels column — rendered as a matching grid so heights stay in sync */}
+            <div className="grid shrink-0 grid-rows-[16px_repeat(7,1fr)] gap-[3px] pr-1 text-[10px] text-muted-foreground">
+              <div />
+              <div className="flex items-center">Sun</div>
+              <div className="flex items-center">Mon</div>
+              <div className="flex items-center">Tue</div>
+              <div className="flex items-center">Wed</div>
+              <div className="flex items-center">Thu</div>
+              <div className="flex items-center">Fri</div>
+              <div className="flex items-center">Sat</div>
+            </div>
+            {/* Week columns */}
+            {weeks.map((week, wi) => {
+              const monthLabel = monthLabels.find((m) => m.col === wi)
+              return (
+                <div key={wi} className="grid flex-1 grid-rows-[16px_repeat(7,1fr)] gap-[3px]">
+                  <div className="text-[10px] text-muted-foreground leading-4 truncate">
+                    {monthLabel?.label ?? ''}
+                  </div>
+                  {Array.from({ length: 7 }, (_, dayIdx) => {
+                    const cell = week.find((c) => c.dayOfWeek === dayIdx)
+                    if (!cell) return <div key={dayIdx} className="aspect-square w-full" />
+                    const hasRateLimit = cell.rateLimits > 0
+                    const label = cell.tokens > 0
+                      ? `${formatTokensShort(cell.tokens)} tokens on ${formatDateLabel(cell.date)}.${hasRateLimit ? ` Rate limited ${cell.rateLimits}×.` : ''}`
+                      : `No tokens on ${formatDateLabel(cell.date)}.`
+                    return (
+                      <Tooltip key={dayIdx}>
+                        <TooltipTrigger
+                          render={<div />}
+                          className={`aspect-square w-full rounded-sm ${getIntensity(cell.tokens)} ${hasRateLimit ? 'ring-2 ring-rose-400 ring-inset' : ''}`}
+                        />
+                        <TooltipContent>{label}</TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                </div>
+              )
+            })}
+          </div>
+          {/* Legend */}
+          <div className="mt-2 flex items-center justify-end gap-1 text-[10px] text-muted-foreground">
+            <span>Less</span>
+            <div className="h-[10px] w-[10px] rounded-sm bg-muted" />
+            <div className="h-[10px] w-[10px] rounded-sm bg-blue-200 dark:bg-blue-900/50" />
+            <div className="h-[10px] w-[10px] rounded-sm bg-blue-300 dark:bg-blue-700/60" />
+            <div className="h-[10px] w-[10px] rounded-sm bg-blue-400 dark:bg-blue-600/70" />
+            <div className="h-[10px] w-[10px] rounded-sm bg-blue-500 dark:bg-blue-500" />
+            <span>More</span>
+          </div>
+        </div>
+        </TooltipProvider>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Export ──────────────────────────────────────────────────────────
+
+export function DailyChart({ daily, sessions }: { daily: DailyUsage[]; sessions: SessionSummary[] }) {
+  return (
+    <>
+      <DailyCostChart daily={daily} />
+      <TopCommandsChart />
+      <InterruptionRateChart daily={daily} />
+      <UserVsAssistantChart daily={daily} />
     </>
   )
 }