agentfit 0.1.0 → 0.1.1

package/components/data-provider.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { createContext, useContext, useEffect, useState, useCallback, useMemo, type ReactNode } from 'react'
+import { toast } from 'sonner'
 import type { UsageData, SessionSummary, DailyUsage, ProjectSummary, OverviewStats } from '@/lib/parse-logs'
 
 export type AgentType = 'claude' | 'codex' | 'combined'
@@ -23,9 +24,11 @@ interface DataContextValue {
   timeRange: TimeRange
   setTimeRange: (range: TimeRange) => void
   syncing: boolean
+  resetting: boolean
   lastSyncResult: SyncResult | null
   lastSyncTime: Date | null
   handleSync: () => Promise<void>
+  handleReset: () => Promise<void>
   newSessionsAvailable: number
 }
 
@@ -90,14 +93,18 @@ function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData |
     if (!dailyMap.has(date)) {
       dailyMap.set(date, {
         date, sessions: 0, messages: 0,
+        userMessages: 0, assistantMessages: 0,
         inputTokens: 0, outputTokens: 0,
         cacheCreationTokens: 0, cacheReadTokens: 0,
         totalTokens: 0, costUSD: 0, toolCalls: 0,
+        toolCallsDetail: {}, interruptions: 0, rateLimitErrors: 0,
       })
     }
     const day = dailyMap.get(date)!
     day.sessions++
     day.messages += s.totalMessages
+    day.userMessages += s.userMessages
+    day.assistantMessages += s.assistantMessages
     day.inputTokens += s.inputTokens
     day.outputTokens += s.outputTokens
     day.cacheCreationTokens += s.cacheCreationTokens
@@ -105,6 +112,11 @@ function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData |
     day.totalTokens += s.totalTokens
     day.costUSD += s.costUSD
     day.toolCalls += s.toolCallsTotal
+    day.interruptions += s.userInterruptions
+    day.rateLimitErrors += s.rateLimitErrors
+    for (const [tool, count] of Object.entries(s.toolCalls)) {
+      day.toolCallsDetail[tool] = (day.toolCallsDetail[tool] || 0) + count
+    }
 
     // Tools
     for (const [tool, count] of Object.entries(s.toolCalls)) {
@@ -132,7 +144,34 @@ function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData |
     totalCostUSD: sessions.reduce((a, s) => a + s.costUSD, 0),
     totalDurationMinutes: sessions.reduce((a, s) => a + s.durationMinutes, 0),
     totalToolCalls: sessions.reduce((a, s) => a + s.toolCallsTotal, 0),
+    totalApiErrors: sessions.reduce((a, s) => a + s.apiErrors, 0),
+    totalRateLimitDays: (() => {
+      const days = new Set<string>()
+      for (const s of sessions) {
+        if (s.rateLimitErrors > 0) days.add(s.startTime.slice(0, 10))
+      }
+      return days.size
+    })(),
+    totalUserInterruptions: sessions.reduce((a, s) => a + s.userInterruptions, 0),
     models,
+    skillUsage: (() => {
+      const skills: Record<string, number> = {}
+      for (const s of sessions) {
+        for (const [skill, count] of Object.entries(s.skillCalls)) {
+          skills[skill] = (skills[skill] || 0) + count
+        }
+      }
+      return skills
+    })(),
+    permissionModes: (() => {
+      const modes: Record<string, number> = {}
+      for (const s of sessions) {
+        for (const [mode, count] of Object.entries(s.permissionModes || {})) {
+          modes[mode] = (modes[mode] || 0) + count
+        }
+      }
+      return modes
+    })(),
   }
 
   return { overview, sessions, projects, daily, toolUsage }
@@ -145,6 +184,7 @@ export function DataProvider({ children }: { children: ReactNode }) {
   const [agent, setAgentState] = useState<AgentType>('claude')
   const [timeRange, setTimeRange] = useState<TimeRange>('all')
   const [syncing, setSyncing] = useState(false)
+  const [resetting, setResetting] = useState(false)
   const [lastSyncResult, setLastSyncResult] = useState<SyncResult | null>(null)
   const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null)
   const [newSessionsAvailable, setNewSessionsAvailable] = useState(0)
@@ -183,7 +223,31 @@ export function DataProvider({ children }: { children: ReactNode }) {
     }
   }, [fetchData, agent])
 
-
+  const handleReset = useCallback(async () => {
+    setResetting(true)
+    try {
+      const res = await fetch('/api/reset', { method: 'POST' })
+      const body = await res.json()
+      if (!res.ok) {
+        throw new Error(body.error || 'Reset failed')
+      }
+      setLastSyncResult(body)
+      setLastSyncTime(new Date())
+      setNewSessionsAvailable(0)
+      toast.success('Database reset complete', {
+        description: `Re-imported ${body.sessionsAdded || 0} sessions from disk.`,
+      })
+      // Full reload to dashboard so all state is fresh
+      setTimeout(() => { window.location.href = '/' }, 1500)
+      return
+    } catch (e) {
+      const msg = (e as Error).message
+      setError(msg)
+      toast.error('Reset failed', { description: msg })
+    } finally {
+      setResetting(false)
+    }
+  }, [fetchData, agent])
 
   const setAgent = useCallback((newAgent: AgentType) => {
     setAgentState(newAgent)
@@ -204,7 +268,7 @@ export function DataProvider({ children }: { children: ReactNode }) {
     <DataContext.Provider value={{
       data, loading, error, agent, setAgent,
       timeRange, setTimeRange,
-      syncing, lastSyncResult, lastSyncTime, handleSync,
+      syncing, resetting, lastSyncResult, lastSyncTime, handleSync, handleReset,
       newSessionsAvailable,
     }}>
       {children}

package/components/fitness-score.tsx

@@ -2,14 +2,15 @@
 
 import { useMemo } from 'react'
 import Link from 'next/link'
-import { Card, CardContent } from '@/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import type { UsageData } from '@/lib/parse-logs'
-import { generateCoachInsights } from '@/lib/coach'
-import { ArrowRight, Trophy, AlertTriangle, Lightbulb } from 'lucide-react'
+import { generateCoachInsights, type CraftScores } from '@/lib/coach'
+import { ArrowRight, AlertTriangle, Lightbulb, Flame } from 'lucide-react'
 
-function ScoreRing({ score, size = 120 }: { score: number; size?: number }) {
-  const radius = (size - 16) / 2
+function ScoreRing({ score, size = 100 }: { score: number; size?: number }) {
+  const radius = (size - 14) / 2
   const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
 
   const getColor = (s: number) => {
     if (s >= 85) return 'var(--chart-2)'
@@ -22,74 +23,114 @@ function ScoreRing({ score, size = 120 }: { score: number; size?: number }) {
     <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
       <circle
         cx={size / 2} cy={size / 2} r={radius}
-        fill="none"
-        stroke="var(--muted)"
-        strokeWidth="8"
+        fill="none" stroke="var(--muted)" strokeWidth="7"
       />
       <circle
         cx={size / 2} cy={size / 2} r={radius}
-        fill="none"
-        stroke={getColor(score)}
-        strokeWidth="8"
-        strokeLinecap="round"
-        strokeDasharray={circumference}
-        strokeDashoffset={circumference - (score / 100) * circumference}
+        fill="none" stroke={getColor(score)} strokeWidth="7"
+        strokeLinecap="round" strokeDasharray={circumference}
+        strokeDashoffset={offset}
         transform={`rotate(-90 ${size / 2} ${size / 2})`}
-        className="transition-all duration-1000"
       />
-      <text x={size / 2} y={size / 2 - 4} textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-2xl font-bold" style={{ fontSize: size * 0.22 }}>
+      <text x={size / 2} y={size / 2 - 2} textAnchor="middle" dominantBaseline="middle" className="fill-foreground font-bold" style={{ fontSize: size * 0.24 }}>
         {score}
       </text>
-      <text x={size / 2} y={size / 2 + 16} textAnchor="middle" className="fill-muted-foreground" style={{ fontSize: size * 0.09 }}>
+      <text x={size / 2} y={size / 2 + 14} textAnchor="middle" className="fill-muted-foreground" style={{ fontSize: size * 0.1 }}>
         / 100
       </text>
     </svg>
   )
 }
 
+const CRAFT_LABELS: { key: keyof CraftScores; letter: string; label: string; color: string }[] = [
+  { key: 'context', letter: 'C', label: 'Context', color: 'var(--chart-1)' },
+  { key: 'reach', letter: 'R', label: 'Reach', color: 'var(--chart-2)' },
+  { key: 'autonomy', letter: 'A', label: 'Autonomy', color: 'var(--chart-3)' },
+  { key: 'flow', letter: 'F', label: 'Flow', color: 'var(--chart-4)' },
+  { key: 'throughput', letter: 'T', label: 'Throughput', color: 'var(--chart-6)' },
+]
+
+function CraftBars({ craft }: { craft: CraftScores }) {
+  return (
+    <div className="space-y-1.5">
+      {CRAFT_LABELS.map(({ key, letter, label, color }) => (
+        <div key={key} className="flex items-center gap-2">
+          <span className="w-4 text-[10px] font-bold" style={{ color }}>{letter}</span>
+          <span className="w-16 text-[10px] text-muted-foreground truncate">{label}</span>
+          <div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-500"
+              style={{ width: `${craft[key]}%`, backgroundColor: color }}
+            />
+          </div>
+          <span className="w-6 text-[10px] font-medium text-right">{craft[key]}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export function FitnessScore({ data }: { data: UsageData }) {
   const coach = useMemo(() => generateCoachInsights(data), [data])
 
-  const achievements = coach.insights.filter(i => i.severity === 'achievement').length
-  const warnings = coach.insights.filter(i => i.severity === 'warning').length
-  const tips = coach.insights.filter(i => i.severity === 'tip').length
+  // Pick top 2 insights: warnings first, then tips
+  const topInsights = [
+    ...coach.insights.filter(i => i.severity === 'warning'),
+    ...coach.insights.filter(i => i.severity === 'tip'),
+  ].slice(0, 2)
 
   return (
-    <Card>
-      <CardContent className="flex items-center gap-6 pt-6">
-        <ScoreRing score={coach.score} />
-        <div className="flex-1 space-y-3">
-          <div>
-            <div className="text-lg font-semibold">Fitness Score: {coach.scoreLabel}</div>
-            <p className="text-sm text-muted-foreground">
-              Based on cost efficiency, tool habits, streaks, and context management
-            </p>
+    <div className="grid gap-4 lg:grid-cols-3">
+      {/* CRAFT Status — score ring + dimension bars in one card */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">CRAFT Status</CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center gap-6">
+          <div className="flex flex-col items-center gap-1">
+            <ScoreRing score={coach.score} />
+            <div className="text-xs font-semibold">{coach.scoreLabel}</div>
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+              <Flame className="h-3 w-3" />
+              {coach.stats.currentStreak > 0
+                ? `${coach.stats.currentStreak}d streak (best: ${coach.stats.longestStreak}d)`
+                : 'Start a streak'}
+            </div>
+            <Link
+              href="/coach"
+              className="inline-flex items-center gap-1 text-[10px] font-medium text-primary hover:underline mt-1"
+            >
+              All insights <ArrowRight className="h-3 w-3" />
+            </Link>
           </div>
-          <div className="flex items-center gap-4 text-sm">
-            {achievements > 0 && (
-              <span className="flex items-center gap-1 text-chart-2">
-                <Trophy className="h-3.5 w-3.5" /> {achievements} achievement{achievements !== 1 && 's'}
-              </span>
-            )}
-            {warnings > 0 && (
-              <span className="flex items-center gap-1 text-chart-5">
-                <AlertTriangle className="h-3.5 w-3.5" /> {warnings} warning{warnings !== 1 && 's'}
-              </span>
-            )}
-            {tips > 0 && (
-              <span className="flex items-center gap-1 text-chart-1">
-                <Lightbulb className="h-3.5 w-3.5" /> {tips} tip{tips !== 1 && 's'}
-              </span>
-            )}
+          <div className="flex-1">
+            <CraftBars craft={coach.craft} />
           </div>
-          <Link
-            href="/coach"
-            className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
-          >
-            View coaching insights <ArrowRight className="h-3.5 w-3.5" />
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+
+      {/* Top 2 Insights */}
+      {topInsights.map((insight, i) => (
+        <Card
+          key={insight.id}
+          className={`border-l-4 ${insight.severity === 'warning' ? 'border-l-chart-5' : 'border-l-chart-1'}`}
+        >
+          <CardHeader className="pb-1.5">
+            <CardTitle className="text-[11px] font-medium flex items-center gap-1.5 text-muted-foreground">
+              {insight.severity === 'warning'
+                ? <><AlertTriangle className="h-3 w-3 text-chart-5" /> {i === 0 ? 'Top Priority' : 'Improve'}</>
+                : <><Lightbulb className="h-3 w-3 text-chart-1" /> Tip</>}
+              {insight.craft && (
+                <span className="ml-auto text-[9px] uppercase tracking-wider opacity-60">{insight.craft}</span>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-sm font-semibold mb-1 line-clamp-1">{insight.title}</div>
+            <p className="text-xs text-muted-foreground line-clamp-2">{insight.recommendation || insight.description}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
   )
 }

package/components/overview-cards.tsx

@@ -23,53 +23,131 @@ import {
   Cpu,
   Sun,
   CalendarClock,
+  AlertTriangle,
+  Ban,
+  Flame,
+  Zap,
+  Calendar,
   HelpCircle,
 } from 'lucide-react'
 
-function computePeakHour(sessions: SessionSummary[]): string {
+function computeTopHours(sessions: SessionSummary[]): string {
   if (sessions.length === 0) return 'N/A'
   const hourCounts = new Array(24).fill(0)
   for (const s of sessions) {
-    if (s.startTime) hourCounts[new Date(s.startTime).getHours()]++
+    const timestamps = s.messageTimestamps
+    if (timestamps && timestamps.length > 0) {
+      for (const ts of timestamps) {
+        hourCounts[new Date(ts).getHours()]++
+      }
+    } else if (s.startTime) {
+      hourCounts[new Date(s.startTime).getHours()]++
+    }
   }
-  const peak = hourCounts.indexOf(Math.max(...hourCounts))
-  const end = (peak + 1) % 24
   const fmt = (h: number) => `${h % 12 || 12}${h < 12 ? 'am' : 'pm'}`
-  return `${fmt(peak)}–${fmt(end)}`
+  const top2 = hourCounts
+    .map((count, hour) => ({ hour, count }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 2)
+  return top2.map((t) => fmt(t.hour)).join(', ')
 }
 
+const IDLE_THRESHOLD_MS = 30 * 60 * 1000 // 30 min — gaps longer than this are idle time
+
 function computeAvgDailyTime(sessions: SessionSummary[]): number {
   if (sessions.length === 0) return 0
-  // Merge overlapping sessions per day to avoid double-counting
-  const dayIntervals = new Map<string, [number, number][]>()
+  // Collect all message timestamps grouped by local date.
+  // Sum only gaps between consecutive messages that are under the idle threshold.
+  const dayTimestamps = new Map<string, number[]>()
+
   for (const s of sessions) {
-    if (!s.startTime || !s.endTime) continue
-    const date = s.startTime.slice(0, 10)
-    const start = new Date(s.startTime).getTime()
-    const end = new Date(s.endTime).getTime()
-    if (end <= start) continue
-    if (!dayIntervals.has(date)) dayIntervals.set(date, [])
-    dayIntervals.get(date)!.push([start, end])
+    const timestamps = s.messageTimestamps
+    if (!timestamps || timestamps.length === 0) continue
+    for (const ts of timestamps) {
+      const d = new Date(ts)
+      const ms = d.getTime()
+      const date = d.toLocaleDateString('en-CA')
+      if (!dayTimestamps.has(date)) dayTimestamps.set(date, [])
+      dayTimestamps.get(date)!.push(ms)
+    }
   }
 
   let totalMinutes = 0
-  for (const intervals of dayIntervals.values()) {
-    intervals.sort((a, b) => a[0] - b[0])
-    const merged: [number, number][] = [intervals[0]]
-    for (let i = 1; i < intervals.length; i++) {
-      const last = merged[merged.length - 1]
-      if (intervals[i][0] <= last[1]) {
-        last[1] = Math.max(last[1], intervals[i][1])
-      } else {
-        merged.push(intervals[i])
+  for (const timestamps of dayTimestamps.values()) {
+    timestamps.sort((a, b) => a - b)
+    for (let i = 1; i < timestamps.length; i++) {
+      const gap = timestamps[i] - timestamps[i - 1]
+      if (gap <= IDLE_THRESHOLD_MS) {
+        totalMinutes += gap / 60000
       }
     }
-    for (const [start, end] of merged) {
-      totalMinutes += (end - start) / 60000
+  }
+
+  return dayTimestamps.size > 0 ? totalMinutes / dayTimestamps.size : 0
+}
+
+function computeAvgParallelSessions(sessions: SessionSummary[]): string {
+  if (sessions.length === 0) return '0'
+  // Group sessions by local date, count how many are active per day
+  const daySessions = new Map<string, number>()
+  for (const s of sessions) {
+    if (!s.startTime) continue
+    const date = new Date(s.startTime).toLocaleDateString('en-CA')
+    daySessions.set(date, (daySessions.get(date) || 0) + 1)
+  }
+  if (daySessions.size === 0) return '0'
+  const total = Array.from(daySessions.values()).reduce((a, b) => a + b, 0)
+  const avg = total / daySessions.size
+  return avg.toFixed(1)
+}
+
+function computeStreaks(sessions: SessionSummary[]): { longest: number; current: number; activeDays: number } {
+  if (sessions.length === 0) return { longest: 0, current: 0, activeDays: 0 }
+
+  const activeDates = new Set<string>()
+  for (const s of sessions) {
+    if (s.startTime) {
+      activeDates.add(new Date(s.startTime).toLocaleDateString('en-CA'))
+    }
+  }
+
+  if (activeDates.size === 0) return { longest: 0, current: 0, activeDays: 0 }
+
+  const sorted = Array.from(activeDates).sort()
+  let longest = 1
+  let streak = 1
+
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = new Date(sorted[i - 1])
+    const curr = new Date(sorted[i])
+    const diffDays = (curr.getTime() - prev.getTime()) / (1000 * 60 * 60 * 24)
+    if (diffDays === 1) {
+      streak++
+      if (streak > longest) longest = streak
+    } else {
+      streak = 1
+    }
+  }
+
+  // Current streak: count backwards from today
+  const today = new Date().toLocaleDateString('en-CA')
+  const yesterday = new Date(Date.now() - 86400000).toLocaleDateString('en-CA')
+  let current = 0
+  if (activeDates.has(today) || activeDates.has(yesterday)) {
+    const start = activeDates.has(today) ? today : yesterday
+    current = 1
+    let d = new Date(start)
+    while (true) {
+      d = new Date(d.getTime() - 86400000)
+      if (activeDates.has(d.toLocaleDateString('en-CA'))) {
+        current++
+      } else {
+        break
+      }
     }
   }
 
-  return dayIntervals.size > 0 ? totalMinutes / dayIntervals.size : 0
+  return { longest, current, activeDays: activeDates.size }
 }
 
 interface MetricDef {
@@ -80,8 +158,9 @@ interface MetricDef {
 }
 
 export function OverviewCards({ overview, sessions }: { overview: OverviewStats; sessions: SessionSummary[] }) {
-  const peakHour = useMemo(() => computePeakHour(sessions), [sessions])
+  const topHours = useMemo(() => computeTopHours(sessions), [sessions])
   const avgDailyTime = useMemo(() => computeAvgDailyTime(sessions), [sessions])
+  const streaks = useMemo(() => computeStreaks(sessions), [sessions])
 
   const cards: MetricDef[] = [
     {
@@ -121,22 +200,22 @@ export function OverviewCards({ overview, sessions }: { overview: OverviewStats;
       explanation: 'Total number of tool invocations by the assistant (Read, Edit, Bash, Grep, Write, Agent, etc.). Each tool_use content block in an assistant message counts as one call.',
     },
     {
-      title: 'Avg Daily Time',
+      title: 'Est. Daily Time',
       value: formatDuration(avgDailyTime),
       icon: CalendarClock,
-      explanation: 'Average active time per day. Calculated by summing session durations for each day (merging overlapping sessions to avoid double-counting), then dividing by the number of active days. Session duration = time from first message to last message.',
+      explanation: 'Average active coding time per day. Computed from individual message timestamps: sums gaps between consecutive messages that are under 30 minutes (idle gaps are excluded). Then divides by the number of active days.',
     },
     {
-      title: 'Peak Hour',
-      value: peakHour,
+      title: 'Top Hours',
+      value: topHours,
       icon: Sun,
-      explanation: 'The hour of day when you start the most sessions. Based on the start timestamp of each session, grouped by hour in your local timezone.',
+      explanation: 'The two hours of day with the most message activity. Based on individual message timestamps across all sessions, grouped by hour in your local timezone. Note: logs only store UTC timestamps, so this conversion uses your browser\'s current timezone — it is only accurate if you mostly code from one timezone.',
     },
     {
-      title: 'Total Time',
-      value: formatDuration(overview.totalDurationMinutes),
+      title: 'Avg Parallel',
+      value: computeAvgParallelSessions(sessions),
       icon: Clock,
-      explanation: 'Sum of all session durations (wall-clock time from first to last message in each session). Note: overlapping sessions are counted separately, so this may exceed calendar time.',
+      explanation: 'Average number of sessions active in parallel per day. For each active day, counts how many sessions have overlapping time ranges, then averages across all days.',
     },
     {
       title: 'Top Model',
@@ -144,6 +223,36 @@ export function OverviewCards({ overview, sessions }: { overview: OverviewStats;
       icon: Cpu,
       explanation: 'The Claude model used in the most sessions. Determined by the model field in assistant responses. If a session uses multiple models, the last one seen is recorded.',
     },
+    {
+      title: 'Longest Streak',
+      value: `${streaks.longest}d`,
+      icon: Flame,
+      explanation: 'The longest consecutive-day coding streak. A day counts as active if at least one session was started that day. Helps you see your most sustained periods of AI-assisted coding.',
+    },
+    {
+      title: 'Current Streak',
+      value: `${streaks.current}d`,
+      icon: Zap,
+      explanation: 'Your current consecutive-day coding streak, counting back from today (or yesterday if you haven\'t coded today yet). Keep it going!',
+    },
+    {
+      title: 'Active Days',
+      value: formatNumber(streaks.activeDays),
+      icon: Calendar,
+      explanation: 'Total number of unique days with at least one coding session. Shows how consistently you\'ve been using AI coding tools over time.',
+    },
+    {
+      title: 'Rate Limit Days',
+      value: formatNumber(overview.totalRateLimitDays),
+      icon: AlertTriangle,
+      explanation: 'Number of unique days where you hit API rate limits. Rate limits (HTTP 429/529, "Rate limit reached/exceeded") indicate heavy token usage that day. This is a better signal of usage intensity than raw API error counts, which include unrelated server errors.',
+    },
+    {
+      title: 'Interruptions',
+      value: formatNumber(overview.totalUserInterruptions),
+      icon: Ban,
+      explanation: 'Number of times you interrupted or rejected a tool execution. Detected from tool_result messages containing "The user doesn\'t want to proceed". High counts may indicate the agent is taking unwanted actions.',
+    },
   ]
 
   return (
@@ -161,14 +270,12 @@ function MetricCard({ metric }: { metric: MetricDef }) {
   return (
     <Card className="group relative">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-sm font-medium text-muted-foreground">
+        <CardTitle className="flex items-center gap-1 text-sm font-medium text-muted-foreground">
           {metric.title}
-        </CardTitle>
-        <div className="flex items-center gap-1">
           <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger
               render={<button />}
-              className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground/50 hover:text-foreground transition-colors"
             >
               <HelpCircle className="h-3.5 w-3.5" />
             </DialogTrigger>
@@ -187,8 +294,8 @@ function MetricCard({ metric }: { metric: MetricDef }) {
               </div>
             </DialogContent>
           </Dialog>
-          <metric.icon className="h-4 w-4 text-muted-foreground" />
-        </div>
+        </CardTitle>
+        <metric.icon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold tracking-tight">{metric.value}</div>