agentfit 0.1.0 → 0.1.1

package/components/app-sidebar.tsx

@@ -1,20 +1,31 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback, type ReactNode } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import {
+  AlertTriangle,
   BarChart3,
   Brain,
   Camera,
+  Check,
   ChevronRight,
+  Cloud,
+  CloudOff,
   Coins,
+  FileText,
   FolderOpen,
+  GitBranch,
   HeartPulse,
   LayoutDashboard,
   ListTree,
+  Loader2,
   Puzzle,
+  RefreshCw,
+  RotateCcw,
+  Settings,
   Terminal,
+  Upload,
   Wrench,
 } from 'lucide-react'
 import type { ComponentType } from 'react'
@@ -24,6 +35,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -33,11 +45,23 @@ import {
   SidebarMenuSubItem,
   SidebarRail,
 } from '@/components/ui/sidebar'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { useData } from './data-provider'
 import { getPlugins } from '@/lib/plugins'
+import { toast } from 'sonner'
 import '@/plugins'
 
 interface NavItem {
-  title: string
+  title: ReactNode
   icon: ComponentType<{ className?: string }>
   href: string
 }
@@ -50,11 +74,19 @@ 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' },
+  { title: 'Reports', icon: FileText, href: '/reports' },
 ]
 
 const navGroups: NavGroup[] = [
+  {
+    title: 'Projects',
+    icon: FolderOpen,
+    items: [
+      { title: 'Overview', icon: FolderOpen, href: '/projects' },
+      { title: 'Sessions', icon: ListTree, href: '/sessions' },
+    ],
+  },
   {
     title: 'Usage',
     icon: BarChart3,
@@ -70,6 +102,7 @@ const navGroups: NavGroup[] = [
     items: [
       { title: 'Personality Fit', icon: Brain, href: '/personality' },
       { title: 'Command Usage', icon: Terminal, href: '/commands' },
+      { title: 'Session Flow', icon: GitBranch, href: '/flow' },
       { title: 'Images', icon: Camera, href: '/images' },
     ],
   },
@@ -106,6 +139,194 @@ function CollapsibleGroup({ group, pathname }: { group: NavGroup; pathname: stri
   )
 }
 
+interface BackupFolderStatus {
+  exists: boolean
+  hasGit: boolean
+  hasRemote: boolean
+  remoteUrl: string | null
+  isDirty: boolean
+  lastCommit: string | null
+}
+
+interface BackupStatus {
+  ghInstalled: boolean
+  ghAuthenticated: boolean
+  ghUser: string | null
+  claude: BackupFolderStatus
+  codex: BackupFolderStatus
+}
+
+function BackupSection() {
+  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 || !status) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        Checking GitHub...
+      </div>
+    )
+  }
+
+  if (!status.ghInstalled) {
+    return (
+      <div className="space-y-2 px-3 py-1.5">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <CloudOff className="h-3.5 w-3.5" />
+          GitHub CLI not found
+        </div>
+        <a
+          href="https://cli.github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block text-xs text-primary underline"
+        >
+          Install GitHub CLI
+        </a>
+      </div>
+    )
+  }
+
+  if (!status.ghAuthenticated) {
+    return (
+      <div className="space-y-2 px-3 py-1.5">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <CloudOff className="h-3.5 w-3.5" />
+          Not logged in to GitHub
+        </div>
+        <div className="rounded-md bg-muted px-2 py-1.5 text-xs font-mono">
+          gh auth login
+        </div>
+      </div>
+    )
+  }
+
+  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 (
+    <div className="space-y-1.5 px-1">
+      <div className="flex items-center gap-1.5 px-2 text-xs text-muted-foreground">
+        <Cloud className="h-3 w-3" />
+        {status.ghUser}
+      </div>
+      {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 px-2">
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs font-medium">~/{label}</span>
+              {isSetUp && !fs.isDirty && (
+                <Check className="h-3 w-3 text-green-500" />
+              )}
+              {isSetUp && fs.isDirty && (
+                <Badge variant="secondary" className="h-4 px-1 text-[10px]">
+                  new
+                </Badge>
+              )}
+            </div>
+            {!isSetUp ? (
+              <Button
+                variant="outline"
+                size="xs"
+                onClick={() => handleInit(key)}
+                disabled={isSyncing}
+                className="gap-1"
+              >
+                {isSyncing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Upload className="h-3 w-3" />}
+                Backup
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => handleSync(key)}
+                disabled={isSyncing}
+                className="gap-1"
+              >
+                {isSyncing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Cloud className="h-3 w-3" />}
+                Sync
+              </Button>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 export function AppSidebar() {
   const pathname = usePathname()
   const plugins = getPlugins()
@@ -115,10 +336,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>
@@ -154,7 +372,39 @@ export function AppSidebar() {
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
+
+        {/* Data Management Section */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="sr-only">Settings</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  render={<Link href="/settings" />}
+                  isActive={pathname === '/settings'}
+                >
+                  <Settings className="h-4 w-4" />
+                  <span>Settings</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
       </SidebarContent>
+
+      <SidebarFooter>
+        <div className="flex items-center justify-between px-3 py-2 text-xs text-muted-foreground">
+          <span>v0.1.0</span>
+          <a
+            href="https://github.com/harrywang/agentfit"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-foreground transition-colors"
+          >
+            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>
+  )
+}