agentfit 0.1.0

package/components/agent-coach.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { UsageData } from '@/lib/parse-logs'
+import { generateCoachInsights, type CoachInsight, type InsightCategory, type InsightSeverity } from '@/lib/coach'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { formatCost, formatDuration, formatNumber } from '@/lib/format'
+import {
+  Trophy,
+  AlertTriangle,
+  Lightbulb,
+  DollarSign,
+  Zap,
+  Wrench,
+  Monitor,
+  Cpu,
+  Flame,
+  Calendar,
+  Search,
+  Clock,
+  TrendingUp,
+  MessageSquare,
+} from 'lucide-react'
+
+const CATEGORY_ICONS: Record<InsightCategory, typeof Trophy> = {
+  cost: DollarSign,
+  efficiency: Zap,
+  tools: Wrench,
+  context: Monitor,
+  model: Cpu,
+  habits: Calendar,
+  discovery: Search,
+  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' },
+}
+
+function FitnessRing({ score, label }: { score: number; label: string }) {
+  const radius = 70
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+
+  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(--chart-2)"
+            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">
+          <span className="text-4xl font-bold">{score}</span>
+          <span className="text-xs text-muted-foreground">{label}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function InsightCard({ insight }: { insight: CoachInsight }) {
+  const style = SEVERITY_STYLES[insight.severity]
+  const CategoryIcon = CATEGORY_ICONS[insight.category]
+  const SeverityIcon = style.icon
+
+  return (
+    <div className={`rounded-lg border border-l-4 ${style.border} p-4`}>
+      <div className="flex items-start gap-3">
+        <SeverityIcon className={`h-5 w-5 shrink-0 mt-0.5 ${style.iconClass}`} />
+        <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]}
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground">{insight.description}</p>
+          {insight.recommendation && (
+            <div className="rounded-md bg-muted/50 p-2.5 text-sm">
+              <span className="font-medium">Recommendation: </span>
+              {insight.recommendation}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function AgentCoach({ data }: { data: UsageData }) {
+  const coach = useMemo(() => generateCoachInsights(data), [data])
+
+  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')
+
+  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>
+
+        <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>
+
+        <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>
+
+        <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>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatNumber(Math.round(coach.stats.avgMessagesPerSession))}</div>
+          </CardContent>
+        </Card>
+
+        <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>
+          <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>
+            </div>
+          </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>
+              </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>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {warnings.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Tips */}
+      {tips.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>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {tips.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

package/components/app-sidebar.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  BarChart3,
+  Brain,
+  Camera,
+  ChevronRight,
+  Coins,
+  FolderOpen,
+  HeartPulse,
+  LayoutDashboard,
+  ListTree,
+  Puzzle,
+  Terminal,
+  Wrench,
+} from 'lucide-react'
+import type { ComponentType } from 'react'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from '@/components/ui/sidebar'
+import { getPlugins } from '@/lib/plugins'
+import '@/plugins'
+
+interface NavItem {
+  title: string
+  icon: ComponentType<{ className?: string }>
+  href: string
+}
+
+interface NavGroup {
+  title: string
+  icon: ComponentType<{ className?: string }>
+  items: NavItem[]
+}
+
+const topItems: NavItem[] = [
+  { title: 'Dashboard', icon: LayoutDashboard, href: '/' },
+  { title: 'Agent Coach', icon: HeartPulse, href: '/coach' },
+  { title: 'Projects', icon: FolderOpen, href: '/projects' },
+]
+
+const navGroups: NavGroup[] = [
+  {
+    title: 'Usage',
+    icon: BarChart3,
+    items: [
+      { title: 'Daily Usage', icon: BarChart3, href: '/daily' },
+      { title: 'Token Breakdown', icon: Coins, href: '/tokens' },
+      { title: 'Tool Usage', icon: Wrench, href: '/tools' },
+    ],
+  },
+  {
+    title: 'Insights',
+    icon: Brain,
+    items: [
+      { title: 'Personality Fit', icon: Brain, href: '/personality' },
+      { title: 'Command Usage', icon: Terminal, href: '/commands' },
+      { title: 'Images', icon: Camera, href: '/images' },
+    ],
+  },
+]
+
+function CollapsibleGroup({ group, pathname }: { group: NavGroup; pathname: string }) {
+  const isActive = group.items.some((item) => pathname === item.href)
+  const [open, setOpen] = useState(isActive)
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton onClick={() => setOpen(!open)}>
+        <group.icon className="h-4 w-4" />
+        <span>{group.title}</span>
+        <ChevronRight
+          className={`ml-auto h-4 w-4 transition-transform ${open ? 'rotate-90' : ''}`}
+        />
+      </SidebarMenuButton>
+      {open && (
+        <SidebarMenuSub>
+          {group.items.map((item) => (
+            <SidebarMenuSubItem key={item.href}>
+              <SidebarMenuSubButton
+                render={<Link href={item.href} />}
+                isActive={pathname === item.href}
+              >
+                <span>{item.title}</span>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      )}
+    </SidebarMenuItem>
+  )
+}
+
+export function AppSidebar() {
+  const pathname = usePathname()
+  const plugins = getPlugins()
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-2 py-2">
+          <img src="/logo.svg" alt="AgentFit" className="h-8 w-8" />
+          <div>
+            <div className="text-sm font-semibold">AgentFit</div>
+            <div className="text-xs text-muted-foreground">Coding Agent Fitness Tracker</div>
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel className="sr-only">Navigation</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {topItems.map((item) => (
+                <SidebarMenuItem key={item.href}>
+                  <SidebarMenuButton
+                    render={<Link href={item.href} />}
+                    isActive={pathname === item.href}
+                  >
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.title}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+              {navGroups.map((group) => (
+                <CollapsibleGroup key={group.title} group={group} pathname={pathname} />
+              ))}
+              {plugins.length > 0 && (
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    render={<Link href="/community" />}
+                    isActive={pathname.startsWith('/community')}
+                  >
+                    <Puzzle className="h-4 w-4" />
+                    <span>Community</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}