agentfit 0.1.3 → 0.1.6

package/.github/workflows/release.yml

@@ -37,6 +37,10 @@ jobs:
           rm certificate.p12
 
       - name: Build macOS DMGs
+        env:
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         run: npm run electron:build:mac
 
       - name: Upload DMGs

package/README.md

@@ -31,7 +31,6 @@ npx agentfit
 git clone https://github.com/harrywang/agentfit.git
 cd agentfit
 npm install
-echo 'DATABASE_URL="file:./agentfit.db"' > .env
 npx prisma migrate deploy
 npm run build
 npm start
@@ -101,7 +100,6 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide. Quick version:
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `PORT` or `AGENTFIT_PORT` | `3000` | Server port |
-| `DATABASE_URL` | `file:./agentfit.db` | SQLite database path |
 
 ## Credits
 

package/app/(dashboard)/ai-insights/page.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis, Cell } from 'recharts'
+import { Sparkles, Loader2 } from 'lucide-react'
+import { formatCost } from '@/lib/format'
+import Link from 'next/link'
+
+const CHART_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+  'var(--chart-6)',
+  'var(--chart-7)',
+  'var(--chart-8)',
+  'var(--chart-9)',
+  'var(--chart-10)',
+]
+
+interface AggregateData {
+  totalMessages: number
+  messageTypes: Record<string, number>
+  roles: Record<string, number>
+  skillLevels: Record<string, number>
+  sentiments: Record<string, number>
+  roleByType: Record<string, Record<string, number>>
+  roleBySentiment: Record<string, Record<string, number>>
+}
+
+function DistributionChart({
+  title,
+  description,
+  data,
+}: {
+  title: string
+  description: string
+  data: Record<string, number>
+}) {
+  const chartData = Object.entries(data)
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, count]) => ({ name, count }))
+
+  const config: ChartConfig = {
+    count: { label: 'Count', color: 'var(--chart-1)' },
+  }
+
+  const total = chartData.reduce((sum, d) => sum + d.count, 0)
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={config}
+          className="w-full"
+          style={{ minHeight: Math.max(150, chartData.length * 32) }}
+        >
+          <BarChart data={chartData} layout="vertical" margin={{ left: 8 }} accessibilityLayer>
+            <XAxis type="number" tickLine={false} axisLine={false} />
+            <YAxis
+              type="category"
+              dataKey="name"
+              tickLine={false}
+              axisLine={false}
+              width={120}
+              tick={{ fontSize: 12 }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  formatter={(value) => {
+                    const n = Number(value)
+                    return `${n} (${((n / total) * 100).toFixed(1)}%)`
+                  }}
+                />
+              }
+            />
+            <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+              {chartData.map((_, i) => (
+                <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
+function CrossTab({
+  title,
+  description,
+  data,
+}: {
+  title: string
+  description: string
+  data: Record<string, Record<string, number>>
+}) {
+  const rows = Object.keys(data).sort()
+  const colSet = new Set<string>()
+  for (const row of rows) {
+    for (const col of Object.keys(data[row])) colSet.add(col)
+  }
+  const cols = [...colSet].sort()
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left py-1.5 pr-3 font-medium text-muted-foreground" />
+                {cols.map((col) => (
+                  <th
+                    key={col}
+                    className="text-center py-1.5 px-2 font-medium text-muted-foreground"
+                  >
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={row} className="border-b last:border-0">
+                  <td className="py-1.5 pr-3 font-medium">{row}</td>
+                  {cols.map((col) => (
+                    <td key={col} className="text-center py-1.5 px-2 text-muted-foreground">
+                      {data[row][col] || ''}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function AIInsightsPage() {
+  const [aggregate, setAggregate] = useState<AggregateData | null>(null)
+  const [analyzedCount, setAnalyzedCount] = useState(0)
+  const [totalCost, setTotalCost] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch('/api/analyze/aggregate')
+        const data = await res.json()
+        setAggregate(data.aggregate)
+        setAnalyzedCount(data.analyzedCount || 0)
+        setTotalCost(data.totalCostUSD || 0)
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20 text-muted-foreground">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading...
+      </div>
+    )
+  }
+
+  if (!aggregate) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-16 space-y-4">
+          <Sparkles className="h-12 w-12 text-muted-foreground" />
+          <div className="text-center space-y-1">
+            <p className="text-lg font-medium">No AI analysis data yet</p>
+            <p className="text-sm text-muted-foreground">
+              Go to{' '}
+              <Link href="/sessions" className="text-primary hover:underline">
+                Sessions
+              </Link>{' '}
+              and analyze individual sessions, or use the &quot;Analyze All&quot; button.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Make sure to add your OpenAI API key in{' '}
+              <Link href="/settings" className="text-primary hover:underline">
+                Settings
+              </Link>{' '}
+              first.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">
+            {analyzedCount} sessions analyzed
+          </Badge>
+          <Badge variant="outline">
+            {aggregate.totalMessages} messages classified
+          </Badge>
+          <Badge variant="outline">
+            Total cost: {formatCost(totalCost)}
+          </Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <DistributionChart
+          title="Message Type Distribution"
+          description="How you communicate with AI agents"
+          data={aggregate.messageTypes}
+        />
+        <DistributionChart
+          title="Role Distribution"
+          description="Professional roles you play during sessions"
+          data={aggregate.roles}
+        />
+        <DistributionChart
+          title="Skill Level Distribution"
+          description="Technical depth of your messages"
+          data={aggregate.skillLevels}
+        />
+        <DistributionChart
+          title="Sentiment Distribution"
+          description="Emotional tone across all messages"
+          data={aggregate.sentiments}
+        />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <CrossTab
+          title="Role x Message Type"
+          description="What types of messages each role produces"
+          data={aggregate.roleByType}
+        />
+        <CrossTab
+          title="Role x Sentiment"
+          description="Sentiment patterns by role"
+          data={aggregate.roleBySentiment}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+'use client'
+
+import { useData } from '@/components/data-provider'
+import { ModelDistributionChart, ModelUsageOverTimeChart } from '@/components/model-usage-chart'
+import { VersionLagChart } from '@/components/version-lag-chart'
+
+export default function ModelsPage() {
+  const { data } = useData()
+  if (!data) return null
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Model Usage</h1>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <ModelDistributionChart sessions={data.sessions} />
+        <VersionLagChart sessions={data.sessions} />
+      </div>
+      <ModelUsageOverTimeChart sessions={data.sessions} />
+    </>
+  )
+}

package/app/(dashboard)/page.tsx

@@ -4,6 +4,7 @@ import { useData } from '@/components/data-provider'
 import { FitnessScore } from '@/components/fitness-score'
 import { OverviewCards } from '@/components/overview-cards'
 import { DailyCostChart, TopCommandsChart, TokenUsageHeatmap, UserVsAssistantChart, InterruptionRateChart, ToolMixChart } from '@/components/daily-chart'
+import { VersionLagChart } from '@/components/version-lag-chart'
 import { RefreshCw } from 'lucide-react'
 
 export default function DashboardPage() {
@@ -36,6 +37,7 @@ export default function DashboardPage() {
         <UserVsAssistantChart daily={data.daily} />
         <InterruptionRateChart daily={data.daily} />
         <ToolMixChart daily={data.daily} />
+        <VersionLagChart sessions={data.sessions} />
       </div>
     </>
   )

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

@@ -4,9 +4,10 @@ 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 { ArrowLeft, Clock, Coins, MessageSquare, Wrench, CheckCircle, XCircle, Sparkles } from 'lucide-react'
 import { SessionWorkflow } from '@/components/session-workflow'
 import { SessionChatLog } from '@/components/session-chatlog'
+import { SessionAIAnalysis } from '@/components/session-ai-analysis'
 import type { SessionDetail } from '@/lib/session-detail'
 
 export default function SessionDetailPage() {
@@ -15,7 +16,7 @@ export default function SessionDetailPage() {
   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')
+  const [activeTab, setActiveTab] = useState<'dialog' | 'workflow' | 'ai'>('dialog')
 
   useEffect(() => {
     async function load() {
@@ -135,6 +136,17 @@ export default function SessionDetailPage() {
         >
           Workflow
         </button>
+        <button
+          onClick={() => setActiveTab('ai')}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors flex items-center gap-1 ${
+            activeTab === 'ai'
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          <Sparkles className="h-3 w-3" />
+          AI Analysis
+        </button>
       </div>
 
       {activeTab === 'dialog' && (
@@ -162,6 +174,8 @@ export default function SessionDetailPage() {
           </CardContent>
         </Card>
       )}
+
+      {activeTab === 'ai' && <SessionAIAnalysis sessionId={sessionId} />}
     </div>
   )
 }

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

@@ -0,0 +1,168 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Key, Eye, EyeOff, CheckCircle, XCircle, Loader2 } from 'lucide-react'
+
+export default function SettingsPage() {
+  const [apiKey, setApiKey] = useState('')
+  const [maskedKey, setMaskedKey] = useState<string | null>(null)
+  const [saved, setSaved] = useState(false)
+  const [showKey, setShowKey] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState<'valid' | 'invalid' | null>(null)
+
+  useEffect(() => {
+    fetch('/api/config')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.hasOpenAIKey) {
+          setMaskedKey(data.maskedKey)
+          setSaved(true)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  async function handleSave() {
+    if (!apiKey.trim()) return
+    try {
+      const res = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: apiKey.trim() }),
+      })
+      if (res.ok) {
+        setSaved(true)
+        setMaskedKey(`${apiKey.trim().slice(0, 7)}...${apiKey.trim().slice(-4)}`)
+        setTestResult(null)
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  async function handleClear() {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'clear' }),
+      })
+      setApiKey('')
+      setMaskedKey(null)
+      setSaved(false)
+      setTestResult(null)
+    } catch {
+      // ignore
+    }
+  }
+
+  async function handleTest() {
+    // Save first if not saved
+    if (!saved && apiKey.trim()) await handleSave()
+
+    setTesting(true)
+    setTestResult(null)
+    try {
+      const res = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ test: true }),
+      })
+      // 401 = no key or invalid key, 400 = key works (missing sessionId is expected)
+      setTestResult(res.status === 401 ? 'invalid' : 'valid')
+    } catch {
+      setTestResult('invalid')
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Key className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>AI Analysis</CardTitle>
+              <CardDescription>
+                Configure OpenAI API access for AI-powered message classification
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">OpenAI API Key</label>
+            {saved && !apiKey && maskedKey && (
+              <p className="text-sm text-muted-foreground">
+                Current key: <code className="text-xs">{maskedKey}</code>
+              </p>
+            )}
+            <div className="flex gap-2">
+              <div className="relative flex-1">
+                <Input
+                  type={showKey ? 'text' : 'password'}
+                  value={apiKey}
+                  onChange={(e) => {
+                    setApiKey(e.target.value)
+                    setSaved(false)
+                    setTestResult(null)
+                  }}
+                  placeholder={saved ? 'Enter new key to replace...' : 'sk-...'}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowKey(!showKey)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+              <Button onClick={handleSave} disabled={!apiKey.trim() || saved} size="sm">
+                Save
+              </Button>
+              {(apiKey || maskedKey) && (
+                <Button onClick={handleClear} variant="outline" size="sm">
+                  Clear
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Button
+              onClick={handleTest}
+              variant="outline"
+              size="sm"
+              disabled={(!apiKey.trim() && !maskedKey) || testing}
+            >
+              {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+              Test Connection
+            </Button>
+            {testResult === 'valid' && (
+              <Badge variant="outline" className="text-green-600 border-green-600">
+                <CheckCircle className="mr-1 h-3 w-3" /> Valid
+              </Badge>
+            )}
+            {testResult === 'invalid' && (
+              <Badge variant="outline" className="text-destructive border-destructive">
+                <XCircle className="mr-1 h-3 w-3" /> Invalid
+              </Badge>
+            )}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Your API key is stored in <code>~/.agentfit/config.json</code> on your machine and never
+            leaves your local server. Used with gpt-4.1-mini (~$0.001 per 100 messages).
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/app/api/analyze/aggregate/route.ts

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db'
+import type { MessageClassification } from '@/lib/openai'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(request: NextRequest) {
+  const project = request.nextUrl.searchParams.get('project')
+
+  try {
+    // Get all analyses, optionally filtered by project
+    let sessionIds: string[] | undefined
+
+    if (project) {
+      const sessions = await prisma.session.findMany({
+        where: { project },
+        select: { sessionId: true },
+      })
+      sessionIds = sessions.map((s) => s.sessionId)
+    }
+
+    const analyses = await prisma.sessionAnalysis.findMany({
+      where: sessionIds ? { sessionId: { in: sessionIds } } : undefined,
+    })
+
+    if (analyses.length === 0) {
+      return NextResponse.json({ aggregate: null, analyzedCount: 0 })
+    }
+
+    // Aggregate all classifications
+    const allClassifications: MessageClassification[] = []
+    let totalCostUSD = 0
+    let totalInputTokens = 0
+    let totalOutputTokens = 0
+
+    for (const a of analyses) {
+      const cls = JSON.parse(a.classifications) as MessageClassification[]
+      allClassifications.push(...cls)
+      totalCostUSD += a.costUSD
+      totalInputTokens += a.inputTokens
+      totalOutputTokens += a.outputTokens
+    }
+
+    // Build distributions
+    const messageTypes: Record<string, number> = {}
+    const roles: Record<string, number> = {}
+    const skillLevels: Record<string, number> = {}
+    const sentiments: Record<string, number> = {}
+
+    for (const cls of allClassifications) {
+      messageTypes[cls.messageType] = (messageTypes[cls.messageType] || 0) + 1
+      roles[cls.role] = (roles[cls.role] || 0) + 1
+      skillLevels[cls.skillLevel] = (skillLevels[cls.skillLevel] || 0) + 1
+      sentiments[cls.sentiment] = (sentiments[cls.sentiment] || 0) + 1
+    }
+
+    // Cross-tabulations
+    const roleByType: Record<string, Record<string, number>> = {}
+    const roleBySentiment: Record<string, Record<string, number>> = {}
+
+    for (const cls of allClassifications) {
+      if (!roleByType[cls.role]) roleByType[cls.role] = {}
+      roleByType[cls.role][cls.messageType] = (roleByType[cls.role][cls.messageType] || 0) + 1
+
+      if (!roleBySentiment[cls.role]) roleBySentiment[cls.role] = {}
+      roleBySentiment[cls.role][cls.sentiment] =
+        (roleBySentiment[cls.role][cls.sentiment] || 0) + 1
+    }
+
+    return NextResponse.json({
+      aggregate: {
+        totalMessages: allClassifications.length,
+        messageTypes,
+        roles,
+        skillLevels,
+        sentiments,
+        roleByType,
+        roleBySentiment,
+      },
+      analyzedCount: analyses.length,
+      totalCostUSD,
+      totalInputTokens,
+      totalOutputTokens,
+    })
+  } catch (error) {
+    return NextResponse.json({ error: (error as Error).message }, { status: 500 })
+  }
+}