agentfit 0.1.0 → 0.1.2

package/components/dashboard-shell.tsx

@@ -3,10 +3,6 @@
 import { usePathname } from 'next/navigation'
 import { RefreshCw } from 'lucide-react'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
-import { Separator } from '@/components/ui/separator'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   Select,
   SelectContent,
@@ -15,12 +11,12 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { AppSidebar } from './app-sidebar'
-import { useData, type TimeRange } from './data-provider'
+import { useData, type TimeRange, type AgentType } from './data-provider'
 import { getPlugin } from '@/lib/plugins'
 import '@/plugins' // ensure plugins are registered
 import type { ReactNode } from 'react'
 
-const VIEW_TITLES: Record<string, string> = {
+const VIEW_TITLES: Record<string, ReactNode> = {
   '/': 'Dashboard',
   '/daily': 'Daily Usage',
   '/tokens': 'Token Breakdown',
@@ -29,19 +25,23 @@ const VIEW_TITLES: Record<string, string> = {
   '/sessions': 'Sessions',
   '/personality': 'Personality Fit',
   '/commands': 'Command Usage',
-  '/images': 'Images',
-  '/coach': 'Agent Coach',
+  '/images': 'Image Analysis',
+  '/coach': 'CRAFT Coach',
+  '/flow': 'Session Flow',
+  '/community': 'Community',
+  '/reports': 'Reports',
+  '/data-management': 'Data Management',
 }
 
-function resolveTitle(pathname: string): string {
+function resolveTitle(pathname: string): ReactNode {
   if (VIEW_TITLES[pathname]) return VIEW_TITLES[pathname]
-  if (pathname === '/community') return 'Community'
-  // Community plugin routes: /community/<slug>
   const match = pathname.match(/^\/community\/([a-z0-9-]+)$/)
   if (match) {
     const plugin = getPlugin(match[1])
     if (plugin) return plugin.manifest.name
   }
+  if (pathname.startsWith('/reports/')) return 'Report Detail'
+  if (pathname.startsWith('/sessions/')) return 'Session Detail'
   return 'Dashboard'
 }
 
@@ -65,13 +65,13 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const pathname = usePathname()
   const {
     agent, setAgent, timeRange, setTimeRange,
-    syncing, lastSyncResult, lastSyncTime, handleSync, loading,
-    newSessionsAvailable,
+    selectedProject, setSelectedProject, allProjects,
+    loading,
   } = useData()
 
   const title = resolveTitle(pathname)
-  const communityMatch = pathname.match(/^\/community\/([a-z0-9-]+)$/)
-  const communityPlugin = communityMatch ? getPlugin(communityMatch[1]) : undefined
+  const communitySlug = pathname.match(/^\/community\/([a-z0-9-]+)$/)?.[1]
+  const communityPlugin = communitySlug ? getPlugin(communitySlug) : undefined
   const showTimeFilter =
     !NO_TIME_FILTER.has(pathname) && !communityPlugin?.manifest.customDataSource
 
@@ -113,7 +113,20 @@ export function DashboardShell({ children }: { children: ReactNode }) {
                 ))}
               </div>
             )}
-            <Select value={agent} onValueChange={(v) => v && setAgent(v as 'claude' | 'codex' | 'combined')}>
+            {allProjects.length > 1 && (
+              <Select value={selectedProject} onValueChange={(v) => v && setSelectedProject(v)}>
+                <SelectTrigger className="h-8 w-[160px] text-xs">
+                  <SelectValue>{selectedProject === 'all' ? 'All Projects' : selectedProject}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Projects</SelectItem>
+                  {allProjects.map((p) => (
+                    <SelectItem key={p} value={p}>{p}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <Select value={agent} onValueChange={(v) => v && setAgent(v as AgentType)}>
               <SelectTrigger className="h-8 w-[130px] text-xs">
                 <SelectValue>{AGENT_LABELS[agent]}</SelectValue>
               </SelectTrigger>
@@ -123,21 +136,6 @@ export function DashboardShell({ children }: { children: ReactNode }) {
                 <SelectItem value="combined">Combined</SelectItem>
               </SelectContent>
             </Select>
-            {lastSyncTime && lastSyncResult && lastSyncResult.sessionsAdded > 0 && (
-              <Badge variant="secondary" className="hidden text-xs sm:inline-flex">
-                +{lastSyncResult.sessionsAdded} new
-              </Badge>
-            )}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleSync}
-              disabled={syncing}
-              className="gap-2"
-            >
-              <RefreshCw className={`h-3.5 w-3.5 ${syncing ? 'animate-spin' : ''}`} />
-              {syncing ? 'Syncing...' : 'Sync'}
-            </Button>
           </div>
         </header>
         <main className="flex-1 space-y-6 p-6">

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'
@@ -22,10 +23,15 @@ interface DataContextValue {
   setAgent: (agent: AgentType) => void
   timeRange: TimeRange
   setTimeRange: (range: TimeRange) => void
+  selectedProject: string
+  setSelectedProject: (project: string) => void
+  allProjects: string[]
   syncing: boolean
+  resetting: boolean
   lastSyncResult: SyncResult | null
   lastSyncTime: Date | null
   handleSync: () => Promise<void>
+  handleReset: () => Promise<void>
   newSessionsAvailable: number
 }
 
@@ -44,16 +50,21 @@ const RANGE_DAYS: Record<TimeRange, number> = {
   'all': Infinity,
 }
 
-function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData | null {
-  if (!raw || range === 'all') return raw
+function filterData(raw: UsageData | null, range: TimeRange, project: string): UsageData | null {
+  if (!raw) return raw
+  if (range === 'all' && project === 'all') return raw
 
   const days = RANGE_DAYS[range]
   const cutoff = new Date()
   cutoff.setDate(cutoff.getDate() - days)
-  const cutoffISO = cutoff.toISOString()
+  const cutoffISO = range === 'all' ? '' : cutoff.toISOString()
 
-  // Filter sessions
-  const sessions = raw.sessions.filter(s => s.startTime >= cutoffISO)
+  // Filter sessions by time range and project
+  const sessions = raw.sessions.filter(s => {
+    if (range !== 'all' && s.startTime < cutoffISO) return false
+    if (project !== 'all' && s.project !== project) return false
+    return true
+  })
 
   // Re-aggregate from filtered sessions
   const projectMap = new Map<string, ProjectSummary>()
@@ -90,14 +101,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 +120,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)) {
@@ -130,9 +150,37 @@ function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData |
     totalCacheReadTokens: sessions.reduce((a, s) => a + s.cacheReadTokens, 0),
     totalTokens: sessions.reduce((a, s) => a + s.totalTokens, 0),
     totalCostUSD: sessions.reduce((a, s) => a + s.costUSD, 0),
+    totalSystemPromptEdits: sessions.reduce((a, s) => a + (s.systemPromptEdits ?? 0), 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 }
@@ -144,12 +192,19 @@ export function DataProvider({ children }: { children: ReactNode }) {
   const [error, setError] = useState<string | null>(null)
   const [agent, setAgentState] = useState<AgentType>('claude')
   const [timeRange, setTimeRange] = useState<TimeRange>('all')
+  const [selectedProject, setSelectedProject] = useState<string>('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)
 
-  const data = useMemo(() => filterByTimeRange(rawData, timeRange), [rawData, timeRange])
+  const data = useMemo(() => filterData(rawData, timeRange, selectedProject), [rawData, timeRange, selectedProject])
+
+  const allProjects = useMemo(() => {
+    if (!rawData) return []
+    return rawData.projects.map(p => p.name).sort((a, b) => a.localeCompare(b))
+  }, [rawData])
 
   const fetchData = useCallback(async (selectedAgent: AgentType) => {
     try {
@@ -183,7 +238,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 +283,8 @@ export function DataProvider({ children }: { children: ReactNode }) {
     <DataContext.Provider value={{
       data, loading, error, agent, setAgent,
       timeRange, setTimeRange,
-      syncing, lastSyncResult, lastSyncTime, handleSync,
+      selectedProject, setSelectedProject, allProjects,
+      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>
   )
 }