agentfit 0.1.0 → 0.1.1

package/README.md

@@ -10,56 +10,64 @@ Fitness tracker dashboard for AI coding agents. Reads your local Claude Code and
 curl -fsSL https://raw.githubusercontent.com/harrywang/agentfit/main/setup.sh | bash
 ```
 
-Then start the dashboard:
-
-```bash
-cd agentfit && npm start
-```
-
 ### Option 2: npx
 
 ```bash
 npx agentfit
 ```
 
-This handles first-run setup (database creation, build) automatically.
-
 ### Option 3: Manual
 
 ```bash
 git clone https://github.com/harrywang/agentfit.git
 cd agentfit
 npm install
-echo 'DATABASE_URL="file:./dev.db"' > .env
+echo 'DATABASE_URL="file:./agentfit.db"' > .env
 npx prisma migrate deploy
 npm run build
 npm start
 ```
 
-Open [http://localhost:3000](http://localhost:3000). The app auto-syncs your `~/.claude/projects/` logs on first load.
+Open [http://localhost:3000](http://localhost:3000). The app auto-syncs your Claude Code (`~/.claude/projects/`) and Codex (`~/.codex/sessions/`) logs on first load.
 
 **Requirements:** Node.js 20+
 
+## The CRAFT Framework
+
+AgentFit scores your AI coding proficiency using **CRAFT** — a Human-AI coding proficiency framework by [Harry Wang](https://harrywang.me). All metrics are computed from your local conversation logs.
+
+| | Dimension | What it measures | Key metrics |
+|---|---|---|---|
+| **C** | **Context** | How effectively you engineer context for the AI | CLAUDE.md usage, memory writes, cache hit rate |
+| **R** | **Reach** | How broadly you leverage available capabilities | Tool diversity, subagent usage, skill adoption |
+| **A** | **Autonomy** | How independently the agent works for you | Message ratio, interruption rate, delegation |
+| **F** | **Flow** | How consistently you maintain a coding rhythm | Streak length, daily consistency, active days |
+| **T** | **Throughput** | How much output you get for your investment | Cost efficiency, output volume, error rate |
+
+Inspired by [DORA Metrics](https://dora.dev) and Microsoft's [SPACE framework](https://queue.acm.org/detail.cfm?id=3454124). Behavioral signals from your logs — no surveys, no guesswork. Each dimension is scored 0–100.
+
 ## Features
 
 - **Dashboard** — overview stats (cost, tokens, sessions, projects, messages, tool calls, duration)
-- **Agent Coach** — fitness score, achievements, improvement areas, and tips
+- **CRAFT Coach** — fitness score, achievements, and actionable improvement tips
 - **Daily Usage** — daily cost and activity charts
 - **Token Breakdown** — pie chart + stacked area chart of token types
-- **Tool Usage** — top 20 tools by invocation count
+- **Tool Usage** — top tools by invocation count
 - **Projects** — per-project breakdown with top tools and sessions
-- **Personality Fit** — MBTI-style behavioral analysis with task fit scores
+- **Sessions** — individual session details with chat logs and tool flow graphs
+- **Personality Fit** — MBTI-style behavioral analysis
 - **Command Usage** — slash command pattern tracking
 - **Images** — screenshot analysis across sessions
-- **Community Plugins** — extensible analysis views contributed by the community
+- **Community Plugins** — extensible analysis views
 
-## Data
+## Desktop App
 
-- Session metrics stored in local SQLite (`dev.db`) via Prisma
-- Images extracted from conversation logs to `data/images/`
-- Pricing fetched from [LiteLLM](https://github.com/BerriAI/litellm) model pricing database
-- Incremental sync — only new sessions are imported on each sync
-- Supports Claude Code, Codex, or combined views
+Download a pre-built installer from the [Releases](https://github.com/harrywang/agentfit/releases) page, or build yourself:
+
+```bash
+npm run electron:build:mac   # Mac (.dmg)
+npm run electron:build:win   # Windows (.exe)
+```
 
 ## Development
 
@@ -70,23 +78,11 @@ npm run lint         # ESLint
 npm run format       # Prettier
 npm run typecheck    # TypeScript check
 npm test             # Run tests
-npm run test:watch   # Tests in watch mode
-```
-
-### Database
-
-```bash
-npx prisma migrate dev --name <name>   # Create/apply migration
-npx prisma generate                    # Regenerate Prisma client
 ```
 
 ## Community Plugins
 
-AgentFit has a plugin system for community-contributed analysis views. Plugins appear in the **Community** section of the sidebar.
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide on creating your own plugin.
-
-**Quick version:**
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide. Quick version:
 
 1. Create `plugins/<your-slug>/manifest.ts` and `component.tsx`
 2. Register in `plugins/index.ts`
@@ -98,7 +94,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide on creating your own p
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `PORT` or `AGENTFIT_PORT` | `3000` | Server port |
-| `DATABASE_URL` | `file:./dev.db` | SQLite database path |
+| `DATABASE_URL` | `file:./agentfit.db` | SQLite database path |
 
 ## Credits
 

package/app/(dashboard)/daily/page.tsx

@@ -11,7 +11,7 @@ export default function DailyPage() {
   return (
     <>
       <div className="grid gap-4 lg:grid-cols-3">
-        <DailyChart daily={data.daily} />
+        <DailyChart daily={data.daily} sessions={data.sessions} />
       </div>
       <DailyTable daily={data.daily} sessions={data.sessions} />
     </>

package/app/(dashboard)/flow/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useData } from '@/components/data-provider'
+import { ToolFlowGraph } from '@/components/tool-flow-graph'
+import { SessionTimeline } from '@/components/session-timeline'
+
+export default function FlowPage() {
+  const { data } = useData()
+  if (!data) return null
+
+  return (
+    <>
+      <SessionTimeline sessions={data.sessions} />
+      <ToolFlowGraph data={data} />
+    </>
+  )
+}

package/app/(dashboard)/layout.tsx

@@ -2,11 +2,13 @@
 
 import { DataProvider } from '@/components/data-provider'
 import { DashboardShell } from '@/components/dashboard-shell'
+import { Toaster } from '@/components/ui/sonner'
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
     <DataProvider>
       <DashboardShell>{children}</DashboardShell>
+      <Toaster />
     </DataProvider>
   )
 }

package/app/(dashboard)/page.tsx

@@ -3,21 +3,40 @@
 import { useData } from '@/components/data-provider'
 import { FitnessScore } from '@/components/fitness-score'
 import { OverviewCards } from '@/components/overview-cards'
-import { DailyChart } from '@/components/daily-chart'
-import { ToolUsageChart } from '@/components/tool-usage-chart'
+import { DailyCostChart, TopCommandsChart, TokenUsageHeatmap, UserVsAssistantChart, InterruptionRateChart, ToolMixChart } from '@/components/daily-chart'
+import { RefreshCw } from 'lucide-react'
 
 export default function DashboardPage() {
-  const { data } = useData()
+  const { data, newSessionsAvailable, handleSync, syncing } = useData()
   if (!data) return null
 
   return (
     <>
+      {newSessionsAvailable > 0 && (
+        <div className="flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm dark:border-blue-800 dark:bg-blue-950">
+          <span>
+            <strong>{newSessionsAvailable}</strong> new session{newSessionsAvailable !== 1 ? 's' : ''} detected on disk. Sync to update your dashboard.
+          </span>
+          <button
+            onClick={handleSync}
+            disabled={syncing}
+            className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            <RefreshCw className={`h-3 w-3 ${syncing ? 'animate-spin' : ''}`} />
+            {syncing ? 'Syncing…' : 'Sync now'}
+          </button>
+        </div>
+      )}
       <FitnessScore data={data} />
       <OverviewCards overview={data.overview} sessions={data.sessions} />
       <div className="grid gap-4 lg:grid-cols-3">
-        <DailyChart daily={data.daily} />
+        <DailyCostChart daily={data.daily} />
+        <TopCommandsChart />
+        <TokenUsageHeatmap daily={data.daily} />
+        <UserVsAssistantChart daily={data.daily} />
+        <InterruptionRateChart daily={data.daily} />
+        <ToolMixChart daily={data.daily} />
       </div>
-      <ToolUsageChart toolUsage={data.toolUsage} />
     </>
   )
 }

package/app/(dashboard)/reports/[id]/page.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, Loader2 } from 'lucide-react'
+import { ReportView } from '@/components/report-view'
+import type { ReportContent } from '@/lib/report'
+
+interface ReportData {
+  id: string
+  title: string
+  generatedAt: string
+  contentJson: ReportContent
+  sessionCount: number
+}
+
+export default function ReportDetailPage() {
+  const params = useParams()
+  const id = params.id as string
+  const [report, setReport] = useState<ReportData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch(`/api/reports/${id}`)
+        if (!res.ok) throw new Error('Report not found')
+        setReport(await res.json())
+      } catch (e) {
+        setError((e as Error).message)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 py-8 text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" /> Loading report...
+      </div>
+    )
+  }
+
+  if (error || !report) {
+    return (
+      <div className="space-y-4">
+        <Link href="/reports" className="flex items-center gap-1 text-sm text-primary hover:underline">
+          <ArrowLeft className="h-4 w-4" /> Back to reports
+        </Link>
+        <div className="text-destructive">{error || 'Report not found'}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Link href="/reports" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="h-4 w-4" /> Back to reports
+        </Link>
+        <span className="text-xs text-muted-foreground">
+          Generated {new Date(report.generatedAt).toLocaleString()} · {report.sessionCount} sessions
+        </span>
+      </div>
+      <ReportView content={report.contentJson} />
+    </div>
+  )
+}

package/app/(dashboard)/reports/page.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { FileText, Plus, Loader2, ChevronRight } from 'lucide-react'
+import { toast } from 'sonner'
+import { useData } from '@/components/data-provider'
+
+interface ReportSummary {
+  id: string
+  title: string
+  generatedAt: string
+  sessionCount: number
+}
+
+export default function ReportsPage() {
+  const { data } = useData()
+  const [reports, setReports] = useState<ReportSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [generating, setGenerating] = useState(false)
+
+  async function fetchReports() {
+    try {
+      const res = await fetch('/api/reports')
+      setReports(await res.json())
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchReports() }, [])
+
+  const currentSessionCount = data?.overview.totalSessions || 0
+  const lastReportSessionCount = reports[0]?.sessionCount || 0
+  const hasNewData = reports.length === 0 || currentSessionCount !== lastReportSessionCount
+
+  async function handleGenerate() {
+    setGenerating(true)
+    try {
+      const res = await fetch('/api/reports', { method: 'POST' })
+      const report = await res.json()
+      if (res.status === 409) {
+        toast.info('No new data', { description: report.error })
+        return
+      }
+      if (!res.ok) throw new Error(report.error || 'Failed to generate report')
+      toast.success('Report generated', { description: report.title })
+      await fetchReports()
+    } catch (e) {
+      toast.error('Failed to generate report', { description: (e as Error).message })
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  const buttonDisabled = generating || !hasNewData
+
+  return (
+    <div className="space-y-6 max-w-3xl">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">Insights Reports</h2>
+          <p className="text-sm text-muted-foreground">
+            Generate point-in-time snapshots of your coding agent fitness
+          </p>
+        </div>
+        <Tooltip>
+          <TooltipTrigger
+            render={<span />}
+          >
+            <Button onClick={handleGenerate} disabled={buttonDisabled} className="gap-2">
+              {generating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+              {generating ? 'Generating...' : 'Generate Report'}
+            </Button>
+          </TooltipTrigger>
+          {!hasNewData && (
+            <TooltipContent>
+              No new sessions since last report. Sync new data first.
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center gap-2 py-8 text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading reports...
+        </div>
+      ) : reports.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <FileText className="h-10 w-10 text-muted-foreground/30 mx-auto mb-3" />
+            <p className="text-sm text-muted-foreground">
+              No reports yet. Click "Generate Report" to create your first fitness snapshot.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-2">
+          {reports.map(report => (
+            <Link key={report.id} href={`/reports/${report.id}`}>
+              <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                <CardContent className="flex items-center justify-between py-4">
+                  <div className="flex items-center gap-3">
+                    <FileText className="h-5 w-5 text-muted-foreground" />
+                    <div>
+                      <div className="text-sm font-medium">{report.title}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {new Date(report.generatedAt).toLocaleString()}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Badge variant="secondary" className="text-xs">
+                      {report.sessionCount} sessions
+                    </Badge>
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/app/(dashboard)/sessions/[id]/page.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { ArrowLeft, Clock, Coins, MessageSquare, Wrench, CheckCircle, XCircle } from 'lucide-react'
+import { SessionWorkflow } from '@/components/session-workflow'
+import { SessionChatLog } from '@/components/session-chatlog'
+import type { SessionDetail } from '@/lib/session-detail'
+
+export default function SessionDetailPage() {
+  const params = useParams()
+  const sessionId = params.id as string
+  const [detail, setDetail] = useState<SessionDetail | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<'workflow' | 'dialog'>('dialog')
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch(`/api/session?id=${sessionId}`)
+        if (!res.ok) throw new Error('Session not found')
+        const data = await res.json()
+        setDetail(data)
+      } catch (e) {
+        setError((e as Error).message)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [sessionId])
+
+  if (loading) {
+    return <div className="text-muted-foreground">Loading session...</div>
+  }
+
+  if (error || !detail) {
+    return (
+      <div className="space-y-4">
+        <Link href="/sessions" className="flex items-center gap-1 text-sm text-primary hover:underline">
+          <ArrowLeft className="h-4 w-4" /> Back to sessions
+        </Link>
+        <div className="text-destructive">{error || 'Session not found'}</div>
+      </div>
+    )
+  }
+
+  const s = detail.stats
+
+  return (
+    <div className="space-y-4">
+      <Link href="/sessions" className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
+        <ArrowLeft className="h-4 w-4" /> Back to sessions
+      </Link>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-6">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Duration</CardTitle>
+            <Clock className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tracking-tight">{s.duration}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Tokens</CardTitle>
+            <Coins className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tracking-tight">{s.tokens.toLocaleString()}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Messages</CardTitle>
+            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tracking-tight">{s.totalMessages}</div>
+            <p className="text-xs text-muted-foreground">{s.userTurns} user / {s.assistantTurns} assistant</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Tool Calls</CardTitle>
+            <Wrench className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tracking-tight">{s.toolCalls}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Success</CardTitle>
+            <CheckCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tracking-tight">{s.successCount}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Failures</CardTitle>
+            <XCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className={`text-2xl font-bold tracking-tight ${s.failureCount > 0 ? 'text-destructive' : ''}`}>{s.failureCount}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex gap-1.5 border-b pb-1">
+        <button
+          onClick={() => setActiveTab('dialog')}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            activeTab === 'dialog'
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          Dialog
+        </button>
+        <button
+          onClick={() => setActiveTab('workflow')}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            activeTab === 'workflow'
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          Workflow
+        </button>
+      </div>
+
+      {activeTab === 'dialog' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Chat Log</CardTitle>
+            <CardDescription>{detail.chatLog.length} records</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SessionChatLog messages={detail.chatLog} />
+          </CardContent>
+        </Card>
+      )}
+
+      {activeTab === 'workflow' && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Workflow</CardTitle>
+            <CardDescription>
+              Tool calls, reasoning, and execution flow — {detail.workflowNodes.length} nodes
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SessionWorkflow nodes={detail.workflowNodes} edges={detail.workflowEdges} />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}