agentfit 0.1.0 → 0.1.1

package/components/agent-coach.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useEffect, useState } from 'react'
 import type { UsageData } from '@/lib/parse-logs'
-import { generateCoachInsights, type CoachInsight, type InsightCategory, type InsightSeverity } from '@/lib/coach'
+import { generateCoachInsights, type CoachInsight, type InsightCategory, type InsightSeverity, type CraftDimension, type CraftScores } from '@/lib/coach'
+import type { CommandInsight } from '@/lib/command-insights'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { formatCost, formatDuration, formatNumber } from '@/lib/format'
 import {
@@ -18,8 +19,11 @@ import {
   Calendar,
   Search,
   Clock,
-  TrendingUp,
-  MessageSquare,
+  Brain,
+  Radar,
+  Bot,
+  Activity,
+  Gauge,
 } from 'lucide-react'
 
 const CATEGORY_ICONS: Record<InsightCategory, typeof Trophy> = {
@@ -33,48 +37,90 @@ const CATEGORY_ICONS: Record<InsightCategory, typeof Trophy> = {
   streak: Flame,
 }
 
-const CATEGORY_LABELS: Record<InsightCategory, string> = {
-  cost: 'Cost',
-  efficiency: 'Efficiency',
-  tools: 'Tools',
-  context: 'Context',
-  model: 'Model',
-  habits: 'Habits',
-  discovery: 'Discovery',
-  streak: 'Streak',
-}
-
 const SEVERITY_STYLES: Record<InsightSeverity, { border: string; icon: typeof Trophy; iconClass: string }> = {
   achievement: { border: 'border-l-chart-2', icon: Trophy, iconClass: 'text-chart-2' },
   warning: { border: 'border-l-chart-5', icon: AlertTriangle, iconClass: 'text-chart-5' },
   tip: { border: 'border-l-chart-1', icon: Lightbulb, iconClass: 'text-chart-1' },
 }
 
+const CRAFT_DIMENSIONS: {
+  key: CraftDimension
+  letter: string
+  label: string
+  color: string
+  icon: typeof Brain
+  description: string
+  metrics: string[]
+}[] = [
+  {
+    key: 'context',
+    letter: 'C',
+    label: 'Context',
+    color: 'var(--chart-1)',
+    icon: Brain,
+    description: 'How well you engineer the context available to the AI — not just window size, but the holistic curation of tokens: system prompts (CLAUDE.md), just-in-time retrieval, structured notes, sub-agent isolation, and cache efficiency.',
+    metrics: ['Cache reuse (20%)', 'Overflow avoidance (20%)', 'Just-in-time retrieval (20%)', 'Session length (10%)', 'Note-taking (10%)', 'Output density (10%)', 'Sub-agent isolation (10%)'],
+  },
+  {
+    key: 'reach',
+    letter: 'R',
+    label: 'Reach',
+    color: 'var(--chart-2)',
+    icon: Radar,
+    description: 'How broadly you leverage available capabilities. Using diverse tools, subagents, and custom skills means you\'re getting more out of the AI assistant.',
+    metrics: ['Tool diversity (35%)', 'Subagent parallelization (35%)', 'Skill/command adoption (30%)'],
+  },
+  {
+    key: 'autonomy',
+    letter: 'A',
+    label: 'Autonomy',
+    color: 'var(--chart-3)',
+    icon: Bot,
+    description: 'How independently the agent works for you. High autonomy means clear prompts, fewer interruptions, the agent reading before editing, and trusting it with permissions.',
+    metrics: ['Assistant/user message ratio (25%)', 'Low interruption rate (25%)', 'Read-before-edit ratio (25%)', 'Permission trust level (25%)'],
+  },
+  {
+    key: 'flow',
+    letter: 'F',
+    label: 'Flow',
+    color: 'var(--chart-4)',
+    icon: Activity,
+    description: 'How consistently you maintain a coding rhythm. Regular usage builds mastery faster than sporadic intense sessions.',
+    metrics: ['Current streak length (35%)', 'Daily consistency (35%)', 'Active days coverage (30%)'],
+  },
+  {
+    key: 'throughput',
+    letter: 'T',
+    label: 'Throughput',
+    color: 'var(--chart-6)',
+    icon: Gauge,
+    description: 'How much output you get for your investment. Efficient sessions produce more output per dollar with fewer errors, and parallel sessions multiply your throughput.',
+    metrics: ['Cost efficiency (25%)', 'Output volume (25%)', 'Parallel sessions (25%)', 'Low error rate (25%)'],
+  },
+]
+
 function FitnessRing({ score, label }: { score: number; label: string }) {
   const radius = 70
   const circumference = 2 * Math.PI * radius
   const offset = circumference - (score / 100) * circumference
 
+  const getColor = (s: number) => {
+    if (s >= 85) return 'var(--chart-2)'
+    if (s >= 70) return 'var(--chart-1)'
+    if (s >= 55) return 'var(--chart-3)'
+    return 'var(--chart-5)'
+  }
+
   return (
     <div className="flex flex-col items-center gap-2">
       <div className="relative">
         <svg width="180" height="180" viewBox="0 0 180 180">
+          <circle cx="90" cy="90" r={radius} fill="none" stroke="var(--muted)" strokeWidth="10" />
           <circle
             cx="90" cy="90" r={radius}
-            fill="none"
-            stroke="var(--muted)"
-            strokeWidth="10"
-          />
-          <circle
-            cx="90" cy="90" r={radius}
-            fill="none"
-            stroke="var(--chart-2)"
-            strokeWidth="10"
-            strokeLinecap="round"
-            strokeDasharray={circumference}
-            strokeDashoffset={offset}
+            fill="none" stroke={getColor(score)} strokeWidth="10"
+            strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={offset}
             transform="rotate(-90 90 90)"
-            className="transition-all duration-1000"
           />
         </svg>
         <div className="absolute inset-0 flex flex-col items-center justify-center">
@@ -86,9 +132,19 @@ function FitnessRing({ score, label }: { score: number; label: string }) {
   )
 }
 
+function DimensionBar({ value, color }: { value: number; color: string }) {
+  return (
+    <div className="flex-1 h-3 rounded-full bg-muted overflow-hidden">
+      <div
+        className="h-full rounded-full transition-all duration-500"
+        style={{ width: `${value}%`, backgroundColor: color }}
+      />
+    </div>
+  )
+}
+
 function InsightCard({ insight }: { insight: CoachInsight }) {
   const style = SEVERITY_STYLES[insight.severity]
-  const CategoryIcon = CATEGORY_ICONS[insight.category]
   const SeverityIcon = style.icon
 
   return (
@@ -98,17 +154,11 @@ function InsightCard({ insight }: { insight: CoachInsight }) {
         <div className="flex-1 space-y-1.5">
           <div className="flex items-center justify-between gap-2">
             <h4 className="text-sm font-semibold">{insight.title}</h4>
-            <div className="flex items-center gap-1.5 shrink-0">
-              {insight.metric && (
-                <span className="rounded-md bg-muted px-2 py-0.5 text-xs font-mono font-medium">
-                  {insight.metric}
-                </span>
-              )}
-              <span className="flex items-center gap-1 text-xs text-muted-foreground">
-                <CategoryIcon className="h-3 w-3" />
-                {CATEGORY_LABELS[insight.category]}
+            {insight.metric && (
+              <span className="rounded-md bg-muted px-2 py-0.5 text-xs font-mono font-medium shrink-0">
+                {insight.metric}
               </span>
-            </div>
+            )}
           </div>
           <p className="text-sm text-muted-foreground">{insight.description}</p>
           {insight.recommendation && (
@@ -125,124 +175,201 @@ function InsightCard({ insight }: { insight: CoachInsight }) {
 
 export function AgentCoach({ data }: { data: UsageData }) {
   const coach = useMemo(() => generateCoachInsights(data), [data])
+  const [cmdInsights, setCmdInsights] = useState<CommandInsight[]>([])
 
-  const achievements = coach.insights.filter(i => i.severity === 'achievement')
-  const warnings = coach.insights.filter(i => i.severity === 'warning')
-  const tips = coach.insights.filter(i => i.severity === 'tip')
+  useEffect(() => {
+    fetch('/api/command-insights')
+      .then(r => r.json())
+      .then(setCmdInsights)
+      .catch(() => {})
+  }, [])
 
-  return (
-    <div className="space-y-6">
-      {/* Fitness Score + Quick Stats */}
-      <div className="grid gap-4 lg:grid-cols-3">
-        <Card className="lg:row-span-2">
-          <CardHeader>
-            <CardTitle>Agent Fitness Score</CardTitle>
-            <CardDescription>Overall health of your human-AI collaboration</CardDescription>
-          </CardHeader>
-          <CardContent className="flex justify-center pb-6">
-            <FitnessRing score={coach.score} label={coach.scoreLabel} />
-          </CardContent>
-        </Card>
+  const allInsights: CoachInsight[] = [
+    ...coach.insights,
+    ...cmdInsights.map(i => ({ ...i, category: 'discovery' as InsightCategory, craft: 'reach' as CraftDimension })),
+  ]
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Avg Cost / Session</CardTitle>
-            <DollarSign className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{formatCost(coach.stats.avgCostPerSession)}</div>
-          </CardContent>
-        </Card>
+  // Group insights by CRAFT dimension
+  const insightsByDimension = (dim: CraftDimension) =>
+    allInsights.filter(i => i.craft === dim)
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Avg Duration</CardTitle>
-            <Clock className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{formatDuration(coach.stats.avgDurationMinutes)}</div>
-          </CardContent>
-        </Card>
+  // Ungrouped insights (no craft tag)
+  const ungroupedWarnings = allInsights.filter(i => !i.craft && i.severity === 'warning')
+  const ungroupedTips = allInsights.filter(i => !i.craft && i.severity === 'tip')
+  const ungroupedAchievements = allInsights.filter(i => !i.craft && i.severity === 'achievement')
 
+  return (
+    <div className="space-y-6">
+      {/* Hero: CRAFT Score + Framework Overview */}
+      <div className="grid gap-4 lg:grid-cols-2">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Avg Messages</CardTitle>
-            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          <CardHeader className="pb-2">
+            <CardTitle>CRAFT Score</CardTitle>
+            <CardDescription>
+              Your overall AI coding proficiency, measured across 5 dimensions
+            </CardDescription>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{formatNumber(Math.round(coach.stats.avgMessagesPerSession))}</div>
+          <CardContent className="flex items-center gap-6">
+            <FitnessRing score={coach.score} label={coach.scoreLabel} />
+            <div className="flex-1 space-y-3">
+              <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Flame className="h-3.5 w-3.5" />
+                  {coach.stats.currentStreak > 0 ? `${coach.stats.currentStreak}d streak` : 'No streak'}
+                  {coach.stats.longestStreak > 0 && (
+                    <span className="text-xs"> (best: {coach.stats.longestStreak}d)</span>
+                  )}
+                </span>
+              </div>
+              <div className="space-y-2">
+                {CRAFT_DIMENSIONS.map(({ key, letter, label, color }) => (
+                  <div key={key} className="flex items-center gap-2">
+                    <span className="w-5 text-xs font-bold" style={{ color }}>{letter}</span>
+                    <span className="w-20 text-xs text-muted-foreground">{label}</span>
+                    <DimensionBar value={coach.craft[key]} color={color} />
+                    <span className="w-7 text-xs font-semibold text-right">{coach.craft[key]}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="text-[10px] text-muted-foreground">
+                Weights: A 25% · C/R/T 20% each · F 15%
+              </div>
+            </div>
           </CardContent>
         </Card>
 
+        {/* What is CRAFT */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Coding Streak</CardTitle>
-            <Flame className="h-4 w-4 text-muted-foreground" />
+          <CardHeader className="pb-2">
+            <CardTitle>What is CRAFT?</CardTitle>
+            <CardDescription>
+              A framework for measuring Human-AI coding proficiency
+            </CardDescription>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {coach.stats.currentStreak > 0 ? `${coach.stats.currentStreak}d` : '—'}
-              <span className="text-sm font-normal text-muted-foreground ml-2">
-                best: {coach.stats.longestStreak}d
-              </span>
+          <CardContent className="text-sm space-y-3">
+            <p className="text-muted-foreground">
+              Every CRAFT metric is derived directly from your local conversation logs.
+              No external integrations or surveys needed.
+            </p>
+            <div className="grid grid-cols-5 gap-2 text-center">
+              {CRAFT_DIMENSIONS.map(({ letter, label, color, icon: Icon }) => (
+                <div key={letter} className="space-y-1">
+                  <div className="flex justify-center">
+                    <Icon className="h-5 w-5" style={{ color }} />
+                  </div>
+                  <div className="text-xs font-bold" style={{ color }}>{letter}</div>
+                  <div className="text-[10px] text-muted-foreground">{label}</div>
+                </div>
+              ))}
             </div>
+            <p className="text-xs text-muted-foreground">
+              Each dimension is scored 0-100 based on your actual usage patterns. The overall score is a
+              weighted average prioritizing behavioral quality (Autonomy) over volume (Throughput).
+            </p>
           </CardContent>
         </Card>
       </div>
 
-      {/* Achievements */}
-      {achievements.length > 0 && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-2">
-              <Trophy className="h-5 w-5 text-chart-2" />
-              <div>
-                <CardTitle>Achievements</CardTitle>
-                <CardDescription>Things you're doing well</CardDescription>
+      {/* Per-dimension breakdown with insights */}
+      {CRAFT_DIMENSIONS.map(({ key, letter, label, color, icon: Icon, description, metrics }) => {
+        const dimInsights = insightsByDimension(key)
+        const dimScore = coach.craft[key]
+        return (
+          <Card key={key}>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg" style={{ backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)` }}>
+                    <Icon className="h-5 w-5" style={{ color }} />
+                  </div>
+                  <div>
+                    <CardTitle className="flex items-center gap-2">
+                      <span className="text-lg font-bold" style={{ color }}>{letter}</span>
+                      {label}
+                    </CardTitle>
+                    <CardDescription>{description}</CardDescription>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="text-2xl font-bold" style={{ color }}>{dimScore}</div>
+                  <div className="text-xs text-muted-foreground">/ 100</div>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {/* How this score is calculated */}
+              <div className="rounded-md bg-muted/50 p-3">
+                <div className="text-xs font-medium mb-2">How this score is calculated:</div>
+                <div className="grid gap-1">
+                  {metrics.map((m) => (
+                    <div key={m} className="text-xs text-muted-foreground flex items-center gap-2">
+                      <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: color }} />
+                      {m}
+                    </div>
+                  ))}
+                </div>
               </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {achievements.map(i => <InsightCard key={i.id} insight={i} />)}
-          </CardContent>
-        </Card>
-      )}
 
-      {/* Warnings */}
-      {warnings.length > 0 && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="h-5 w-5 text-chart-5" />
-              <div>
-                <CardTitle>Areas to Improve</CardTitle>
-                <CardDescription>Issues that may be costing you time or money</CardDescription>
+              {/* Score bar */}
+              <div className="flex items-center gap-3">
+                <DimensionBar value={dimScore} color={color} />
+                <span className="text-sm font-semibold w-10 text-right">{dimScore}/100</span>
               </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {warnings.map(i => <InsightCard key={i.id} insight={i} />)}
-          </CardContent>
-        </Card>
-      )}
 
-      {/* Tips */}
-      {tips.length > 0 && (
+              {/* Insights for this dimension */}
+              {dimInsights.length > 0 ? (
+                <div className="space-y-3">
+                  {dimInsights.map(i => <InsightCard key={i.id} insight={i} />)}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground italic">No specific insights for this dimension yet.</p>
+              )}
+            </CardContent>
+          </Card>
+        )
+      })}
+
+      {/* Ungrouped insights (if any) */}
+      {(ungroupedWarnings.length > 0 || ungroupedTips.length > 0 || ungroupedAchievements.length > 0) && (
         <Card>
           <CardHeader>
-            <div className="flex items-center gap-2">
-              <Lightbulb className="h-5 w-5 text-chart-1" />
-              <div>
-                <CardTitle>Tips & Suggestions</CardTitle>
-                <CardDescription>Ways to get more out of your coding agent</CardDescription>
-              </div>
-            </div>
+            <CardTitle>Other Insights</CardTitle>
+            <CardDescription>General recommendations not tied to a specific CRAFT dimension</CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
-            {tips.map(i => <InsightCard key={i.id} insight={i} />)}
+            {[...ungroupedWarnings, ...ungroupedTips, ...ungroupedAchievements].map(i => (
+              <InsightCard key={i.id} insight={i} />
+            ))}
           </CardContent>
         </Card>
       )}
+
+      {/* Session Averages */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Session Averages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 text-sm">
+            <div>
+              <div className="text-muted-foreground">Cost / Session</div>
+              <div className="font-semibold">{formatCost(coach.stats.avgCostPerSession)}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Duration</div>
+              <div className="font-semibold">{formatDuration(coach.stats.avgDurationMinutes)}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Messages</div>
+              <div className="font-semibold">{formatNumber(Math.round(coach.stats.avgMessagesPerSession))}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Peak Hour</div>
+              <div className="font-semibold">{coach.stats.peakHour}:00</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   )
 }