agentfit 0.1.0 → 0.1.2

package/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import {
@@ -9,11 +9,14 @@ import {
   Camera,
   ChevronRight,
   Coins,
+  FileText,
   FolderOpen,
+  GitBranch,
   HeartPulse,
   LayoutDashboard,
   ListTree,
   Puzzle,
+  Settings,
   Terminal,
   Wrench,
 } from 'lucide-react'
@@ -24,6 +27,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -37,7 +41,7 @@ import { getPlugins } from '@/lib/plugins'
 import '@/plugins'
 
 interface NavItem {
-  title: string
+  title: ReactNode
   icon: ComponentType<{ className?: string }>
   href: string
 }
@@ -50,11 +54,18 @@ interface NavGroup {
 
 const topItems: NavItem[] = [
   { title: 'Dashboard', icon: LayoutDashboard, href: '/' },
-  { title: 'Agent Coach', icon: HeartPulse, href: '/coach' },
-  { title: 'Projects', icon: FolderOpen, href: '/projects' },
+  { title: 'CRAFT Coach', icon: HeartPulse, href: '/coach' },
 ]
 
 const navGroups: NavGroup[] = [
+  {
+    title: 'Projects',
+    icon: FolderOpen,
+    items: [
+      { title: 'Overview', icon: FolderOpen, href: '/projects' },
+      { title: 'Sessions', icon: ListTree, href: '/sessions' },
+    ],
+  },
   {
     title: 'Usage',
     icon: BarChart3,
@@ -62,6 +73,7 @@ const navGroups: NavGroup[] = [
       { title: 'Daily Usage', icon: BarChart3, href: '/daily' },
       { title: 'Token Breakdown', icon: Coins, href: '/tokens' },
       { title: 'Tool Usage', icon: Wrench, href: '/tools' },
+      { title: 'Command Usage', icon: Terminal, href: '/commands' },
     ],
   },
   {
@@ -69,8 +81,9 @@ const navGroups: NavGroup[] = [
     icon: Brain,
     items: [
       { title: 'Personality Fit', icon: Brain, href: '/personality' },
-      { title: 'Command Usage', icon: Terminal, href: '/commands' },
-      { title: 'Images', icon: Camera, href: '/images' },
+      { title: 'Session Flow', icon: GitBranch, href: '/flow' },
+      { title: 'Image Analysis', icon: Camera, href: '/images' },
+      { title: 'Reports', icon: FileText, href: '/reports' },
     ],
   },
 ]
@@ -115,10 +128,7 @@ export function AppSidebar() {
       <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 className="text-sm font-semibold">AgentFit</div>
         </div>
       </SidebarHeader>
       <SidebarContent>
@@ -151,10 +161,35 @@ export function AppSidebar() {
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               )}
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  render={<Link href="/data-management" />}
+                  isActive={pathname === '/data-management'}
+                >
+                  <Settings className="h-4 w-4" />
+                  <span>Data Management</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+
+      <SidebarFooter>
+        <div className="flex items-center justify-center px-3 py-2 text-xs text-muted-foreground">
+          <a
+            href="https://github.com/harrywang/agentfit"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 hover:text-foreground transition-colors"
+          >
+            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+            GitHub
+          </a>
+        </div>
+      </SidebarFooter>
       <SidebarRail />
     </Sidebar>
   )

package/components/backup-section.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { toast } from 'sonner'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Cloud,
+  CloudOff,
+  Check,
+  Loader2,
+  Upload,
+} from 'lucide-react'
+
+interface FolderStatus {
+  exists: boolean
+  hasGit: boolean
+  hasRemote: boolean
+  isDirty: boolean
+}
+
+interface BackupStatus {
+  ghInstalled: boolean
+  ghAuthenticated: boolean
+  ghUser: string
+  claude: FolderStatus
+  codex: FolderStatus
+}
+
+export function BackupCard() {
+  const [status, setStatus] = useState<BackupStatus | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [syncing, setSyncing] = useState<Record<string, boolean>>({})
+
+  const fetchStatus = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/api/backup')
+      setStatus(await res.json())
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchStatus()
+  }, [fetchStatus])
+
+  const handleInit = async (folder: 'claude' | 'codex') => {
+    setSyncing((s) => ({ ...s, [folder]: true }))
+    try {
+      const res = await fetch('/api/backup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'init', folder }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        toast.error('Backup failed', { description: data.error })
+        return
+      }
+      toast.success(`~/.${folder} backed up`, {
+        description: (
+          <a href={data.repoUrl} target="_blank" rel="noopener noreferrer" className="underline">
+            {data.repoUrl}
+          </a>
+        ),
+      })
+      await fetchStatus()
+    } catch (e) {
+      toast.error('Backup failed', { description: (e as Error).message })
+    } finally {
+      setSyncing((s) => ({ ...s, [folder]: false }))
+    }
+  }
+
+  const handleSync = async (folder: 'claude' | 'codex') => {
+    setSyncing((s) => ({ ...s, [folder]: true }))
+    try {
+      const res = await fetch('/api/backup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sync', folder }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        toast.error('Sync failed', { description: data.error })
+        return
+      }
+      toast.success(`~/.${folder} synced`, { description: data.message })
+      await fetchStatus()
+    } catch (e) {
+      toast.error('Sync failed', { description: (e as Error).message })
+    } finally {
+      setSyncing((s) => ({ ...s, [folder]: false }))
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Cloud className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>GitHub Backup</CardTitle>
+              <CardDescription>Checking GitHub status...</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Loading...
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!status || !status.ghInstalled) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <CloudOff className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>GitHub Backup</CardTitle>
+              <CardDescription>Back up your agent logs to a private GitHub repo</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p>GitHub CLI is not installed.</p>
+            <a href="https://cli.github.com" target="_blank" rel="noopener noreferrer" className="text-primary underline">
+              Install GitHub CLI
+            </a>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!status.ghAuthenticated) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <CloudOff className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>GitHub Backup</CardTitle>
+              <CardDescription>Back up your agent logs to a private GitHub repo</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p>Not logged in to GitHub.</p>
+            <code className="block rounded bg-muted px-2 py-1.5 text-xs font-mono">gh auth login</code>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const folders = [
+    { key: 'claude' as const, label: '~/.claude', status: status.claude },
+    { key: 'codex' as const, label: '~/.codex', status: status.codex },
+  ].filter((f) => f.status.exists)
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Cloud className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <CardTitle>GitHub Backup</CardTitle>
+            <CardDescription>
+              Back up agent logs to private GitHub repos — logged in as <strong>{status.ghUser}</strong>
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {folders.map(({ key, label, status: fs }) => {
+          const isSetUp = fs.hasGit && fs.hasRemote
+          const isSyncing = syncing[key]
+
+          return (
+            <div key={key} className="flex items-center justify-between rounded-lg border p-4">
+              <div className="flex items-center gap-3">
+                <code className="text-sm font-medium">{label}</code>
+                {isSetUp && !fs.isDirty && (
+                  <Check className="h-4 w-4 text-green-500" />
+                )}
+                {isSetUp && fs.isDirty && (
+                  <Badge variant="secondary" className="text-xs">new changes</Badge>
+                )}
+              </div>
+              {!isSetUp ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleInit(key)}
+                  disabled={isSyncing}
+                  className="gap-2"
+                >
+                  {isSyncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                  Backup
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleSync(key)}
+                  disabled={isSyncing}
+                  className="gap-2"
+                >
+                  {isSyncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
+                  Sync
+                </Button>
+              )}
+            </div>
+          )
+        })}
+        {folders.length === 0 && (
+          <p className="text-sm text-muted-foreground">No agent log directories found.</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}