agentfit 0.1.0 → 0.1.2

package/.github/workflows/release.yml

@@ -0,0 +1,111 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  build-mac:
+    runs-on: macos-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Import signing certificate
+        env:
+          CERTIFICATE_P12: ${{ secrets.CERTIFICATE_P12 }}
+          CERTIFICATE_PASSWORD: ${{ secrets.CERTIFICATE_PASSWORD }}
+        run: |
+          echo "$CERTIFICATE_P12" | base64 --decode > certificate.p12
+          security create-keychain -p actions build.keychain
+          security default-keychain -s build.keychain
+          security unlock-keychain -p actions build.keychain
+          security import certificate.p12 -k build.keychain -P "$CERTIFICATE_PASSWORD" -T /usr/bin/codesign
+          security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k actions build.keychain
+          rm certificate.p12
+
+      - name: Build macOS DMGs
+        run: npm run electron:build:mac
+
+      - name: Upload DMGs
+        uses: actions/upload-artifact@v7
+        with:
+          name: mac-dmgs
+          path: |
+            dist-electron/*.dmg
+
+  build-win:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Windows installer
+        run: npm run electron:build:win
+
+      - name: Upload exe
+        uses: actions/upload-artifact@v7
+        with:
+          name: win-exe
+          path: |
+            dist-electron/*.exe
+
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  release:
+    needs: [build-mac, build-win]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/download-artifact@v8
+        with:
+          name: mac-dmgs
+          path: artifacts
+
+      - uses: actions/download-artifact@v8
+        with:
+          name: win-exe
+          path: artifacts
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: artifacts/*
+          generate_release_notes: true

package/README.md

@@ -4,64 +4,79 @@ Fitness tracker dashboard for AI coding agents. Reads your local Claude Code and
 
 ## Install
 
-### Option 1: One-liner (recommended)
+### Option 1: Desktop App (recommended)
 
-```bash
-curl -fsSL https://raw.githubusercontent.com/harrywang/agentfit/main/setup.sh | bash
-```
+Download a pre-built installer from the [Releases](https://github.com/harrywang/agentfit/releases) page:
 
-Then start the dashboard:
+- **macOS**: `AgentFit-x.x.x.dmg` (Intel) or `AgentFit-x.x.x-arm64.dmg` (Apple Silicon)
+- **Windows**: `AgentFit-x.x.x.exe`
+
+> **macOS note:** If you see "AgentFit Not Opened" on first launch, go to **System Settings > Privacy & Security**, scroll down, and click **Open Anyway**. Or run `xattr -cr /Applications/AgentFit.app` in Terminal.
+
+### Option 2: One-liner
 
 ```bash
-cd agentfit && npm start
+curl -fsSL https://raw.githubusercontent.com/harrywang/agentfit/main/setup.sh | bash
 ```
 
-### Option 2: npx
+### Option 3: npx
 
 ```bash
 npx agentfit
 ```
 
-This handles first-run setup (database creation, build) automatically.
-
-### Option 3: Manual
+### Option 4: 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+ (Options 2–4)
+
+## 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 |
 
-**Requirements:** Node.js 20+
+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
+## Development
 
-- 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
+Build the desktop app locally:
 
-## Development
+```bash
+npm run electron:build:mac   # Mac (.dmg)
+npm run electron:build:win   # Windows (.exe)
+```
 
 ```bash
 npm run dev          # Start dev server (Turbopack)
@@ -70,23 +85,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 +101,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)/data-management/page.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useData } from '@/components/data-provider'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
+import {
+  RefreshCw,
+  RotateCcw,
+  AlertTriangle,
+  Database,
+  HardDrive,
+  FolderSync,
+} from 'lucide-react'
+import { BackupCard } from '@/components/backup-section'
+
+export default function SettingsPage() {
+  const { syncing, resetting, lastSyncResult, lastSyncTime, handleSync, handleReset } = useData()
+  const [resetOpen, setResetOpen] = useState(false)
+  const [paths, setPaths] = useState<{ database: string; images: string; claudeLogs: string; codexLogs: string } | null>(null)
+
+  useEffect(() => {
+    fetch('/api/check')
+      .then((r) => r.json())
+      .then((d) => { if (d.paths) setPaths(d.paths) })
+      .catch(() => {})
+  }, [])
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {/* Local Data */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>Local Data</CardTitle>
+              <CardDescription>Manage your synced session data</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Sync */}
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <FolderSync className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">Sync Logs</span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Import new sessions from ~/.claude and ~/.codex into the local database.
+              </p>
+              {lastSyncTime && (
+                <p className="text-xs text-muted-foreground">
+                  Last synced: {lastSyncTime.toLocaleString()}
+                  {lastSyncResult && (
+                    <span> — {lastSyncResult.sessionsAdded} added, {lastSyncResult.sessionsSkipped} skipped</span>
+                  )}
+                </p>
+              )}
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleSync}
+              disabled={syncing || resetting}
+              className="gap-2 shrink-0"
+            >
+              <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
+              {syncing ? 'Syncing...' : 'Sync'}
+            </Button>
+          </div>
+
+          {/* Reset */}
+          <div className="flex items-center justify-between rounded-lg border border-destructive/20 p-4">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <RotateCcw className="h-4 w-4 text-destructive" />
+                <span className="text-sm font-medium text-destructive">Reset Database</span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Delete all synced data and re-import from log files on disk. Use if data seems corrupted.
+              </p>
+            </div>
+            <Button
+              variant="destructive"
+              onClick={() => setResetOpen(true)}
+              disabled={syncing || resetting}
+              className="gap-2 shrink-0"
+            >
+              <RotateCcw className={`h-4 w-4 ${resetting ? 'animate-spin' : ''}`} />
+              {resetting ? 'Resetting...' : 'Reset'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Database Info */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <HardDrive className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>Storage</CardTitle>
+              <CardDescription>Where your data lives</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3 text-sm">
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Database</span>
+              <code className="rounded bg-muted px-2 py-0.5 text-xs">{paths?.database ?? 'agentfit.db'}</code>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Claude Code logs</span>
+              <code className="rounded bg-muted px-2 py-0.5 text-xs">{paths?.claudeLogs ?? '~/.claude/projects/'}</code>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Codex logs</span>
+              <code className="rounded bg-muted px-2 py-0.5 text-xs">{paths?.codexLogs ?? '~/.codex/sessions/'}</code>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Extracted images</span>
+              <code className="rounded bg-muted px-2 py-0.5 text-xs">{paths?.images ?? 'data/images/'}</code>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* GitHub Backup */}
+      <BackupCard />
+
+      {/* Reset confirmation dialog */}
+      <Dialog open={resetOpen} onOpenChange={setResetOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="h-5 w-5" />
+              Destructive Action
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3 text-sm text-muted-foreground">
+            <div>
+              This will <strong className="text-foreground">permanently delete all synced data</strong> from the database and re-import from log files currently on disk.
+            </div>
+            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+              <strong>Warning:</strong> If your coding agent (Claude Code, Codex, etc.) has purged old log files, that data will be permanently lost. The database may contain sessions that no longer exist on disk.
+            </div>
+            <div>
+              This cannot be undone. Consider backing up <code className="rounded bg-muted px-1 py-0.5 text-xs">agentfit.db</code> first.
+            </div>
+          </div>
+          <DialogFooter className="gap-3">
+            <Button variant="outline" onClick={() => setResetOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={resetting}
+              onClick={async () => {
+                await handleReset()
+                setResetOpen(false)
+              }}
+            >
+              I understand, reset everything
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

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>
+  )
+}