@bahulam/code 0.1.6 → 0.1.8

package/pulse/app/projects/[slug]/page.tsx

@@ -1,390 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-import useSWR from 'swr'
-import Link from 'next/link'
-import { TopBar } from '@/components/layout/top-bar'
-import { formatCost, formatDuration, formatDate, formatTokens } from '@/lib/decode'
-import { categoryColorMix, toolBarColor } from '@/lib/tool-categories'
-import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'
-import type { SessionWithFacet } from '@/types/claude'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import {
-  Breadcrumb, BreadcrumbItem, BreadcrumbLink,
-  BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
-import {
-  MessageSquare, Clock, DollarSign, GitBranch,
-  Wrench, TrendingUp, AlertTriangle, Code2,
-} from 'lucide-react'
-
-const fetcher = (url: string) =>
-  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
-
-interface ProjectDetail {
-  project_path: string
-  display_name: string
-  sessions: SessionWithFacet[]
-  tool_counts: Record<string, number>
-  cost_by_session: Array<{ session_id: string; start_time: string; cost: number; messages: number }>
-  branches: Array<{ branch: string; turns: number }>
-}
-
-const LANG_CHART_COLORS = ['#d97706', 'var(--viz-sky)', '#34d399', '#a78bfa', '#fbbf24', '#f87171']
-
-export default function ProjectDetailPage() {
-  const params = useParams()
-  const slug = params?.slug as string
-
-  const { data, error, isLoading } = useSWR<ProjectDetail>(
-    slug ? `/api/projects/${slug}` : null, fetcher
-  )
-
-  if (error) {
-    return (
-      <div className="flex flex-col min-h-screen">
-        <TopBar title="Project" />
-        <div className="p-6">
-          <Alert variant="destructive">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>Error loading project: {String(error)}</AlertDescription>
-          </Alert>
-        </div>
-      </div>
-    )
-  }
-
-  if (isLoading || !data) {
-    return (
-      <div className="flex flex-col min-h-screen">
-        <TopBar title="Project" subtitle="Loading…" />
-        <div className="p-6 space-y-4">
-          <Skeleton className="h-5 w-48" />
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
-          </div>
-          <Skeleton className="h-64 rounded-xl" />
-          <div className="grid grid-cols-2 gap-4">
-            <Skeleton className="h-48 rounded-xl" />
-            <Skeleton className="h-48 rounded-xl" />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // ── Derived data ────────────────────────────────────────────────────────────
-  const sessions = data.sessions ?? []
-  const costBySessions = data.cost_by_session ?? []
-  const branches = data.branches ?? []
-
-  const totalCost     = sessions.reduce((s, x) => s + (x.estimated_cost ?? 0), 0)
-  const totalMsgs     = sessions.reduce((s, x) => s + (x.user_message_count ?? 0) + (x.assistant_message_count ?? 0), 0)
-  const totalDuration = sessions.reduce((s, x) => s + (x.duration_minutes ?? 0), 0)
-  const totalTokens   = sessions.reduce((s, x) => s + (x.input_tokens ?? 0) + (x.output_tokens ?? 0), 0)
-
-  const topTools = Object.entries(data.tool_counts ?? {})
-    .sort(([, a], [, b]) => b - a).slice(0, 12)
-  const maxToolCount = topTools[0]?.[1] ?? 1
-
-  const langMap: Record<string, number> = {}
-  for (const s of sessions) {
-    for (const [lang, count] of Object.entries(s.languages ?? {})) {
-      langMap[lang] = (langMap[lang] ?? 0) + count
-    }
-  }
-  const topLangs = Object.entries(langMap).sort(([, a], [, b]) => b - a).slice(0, 6)
-  const maxBranchTurns = branches[0]?.turns ?? 1
-
-  return (
-    <div className="flex flex-col min-h-screen">
-      <TopBar title={data.display_name} subtitle={data.project_path} />
-
-      <div className="p-6 space-y-6">
-        {/* Breadcrumb */}
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link href="/projects">Projects</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{data.display_name}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-
-        {/* Stat cards */}
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <Card>
-            <CardHeader className="pb-2">
-              <CardDescription className="flex items-center gap-2">
-                <MessageSquare className="w-4 h-4" /> Sessions
-              </CardDescription>
-              <CardTitle className="text-3xl font-bold tabular-nums">{sessions.length}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">{totalMsgs.toLocaleString()} messages</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="pb-2">
-              <CardDescription className="flex items-center gap-2">
-                <Clock className="w-4 h-4" /> Duration
-              </CardDescription>
-              <CardTitle className="text-3xl font-bold tabular-nums">{formatDuration(totalDuration)}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">Total time</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="pb-2">
-              <CardDescription className="flex items-center gap-2">
-                <TrendingUp className="w-4 h-4" /> Tokens
-              </CardDescription>
-              <CardTitle className="text-3xl font-bold tabular-nums text-blue-700 dark:text-[#60a5fa]">
-                {formatTokens(totalTokens)}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">Input + output</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="pb-2">
-              <CardDescription className="flex items-center gap-2">
-                <DollarSign className="w-4 h-4" /> Est. Cost
-              </CardDescription>
-              <CardTitle className="text-3xl font-bold tabular-nums text-[#d97706]">
-                {formatCost(totalCost)}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">All sessions</p>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Sessions table + Tool sidebar */}
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-6">
-          <Card className="gap-0 py-8">
-            <CardHeader className="space-y-1.5 px-8 pb-5 pt-2">
-              <CardTitle>Sessions</CardTitle>
-              <CardDescription>{sessions.length} conversations in this project</CardDescription>
-            </CardHeader>
-            <CardContent className="px-8 pb-2 pt-0">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Slug</TableHead>
-                    <TableHead className="text-right">Msgs</TableHead>
-                    <TableHead className="text-right">Cost</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {sessions.map(s => {
-                    const msgs = (s.user_message_count ?? 0) + (s.assistant_message_count ?? 0)
-                    return (
-                      <TableRow key={s.session_id}>
-                        <TableCell className="text-muted-foreground whitespace-nowrap text-sm">
-                          {formatDate(s.start_time)}
-                        </TableCell>
-                        <TableCell>
-                          <Link
-                            href={`/sessions/${s.session_id}`}
-                            className="text-foreground hover:text-primary transition-colors font-medium text-sm"
-                          >
-                            {s.slug ?? s.session_id.slice(0, 8) + '…'}
-                          </Link>
-                        </TableCell>
-                        <TableCell className="text-right tabular-nums text-muted-foreground">{msgs}</TableCell>
-                        <TableCell className="text-right tabular-nums text-[#d97706] font-mono font-medium">
-                          {formatCost(s.estimated_cost)}
-                        </TableCell>
-                      </TableRow>
-                    )
-                  })}
-                  {sessions.length === 0 && (
-                    <TableRow>
-                      <TableCell colSpan={4} className="text-center text-muted-foreground py-8">No sessions yet</TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex items-start justify-between">
-                <div>
-                  <CardTitle>Most-Used Tools</CardTitle>
-                  <CardDescription>Top {topTools.length} tools</CardDescription>
-                </div>
-                <Wrench className="w-4 h-4 text-muted-foreground mt-0.5" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-2">
-                {topTools.map(([tool, count]) => {
-                  const color = toolBarColor(tool)
-                  const width = Math.max(4, Math.round((count / maxToolCount) * 100))
-                  return (
-                    <div key={tool} className="flex items-center gap-2">
-                      <span className="text-xs text-muted-foreground w-20 truncate">{tool}</span>
-                      <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                        <div
-                          className="h-full rounded-full"
-                          style={{ width: `${width}%`, backgroundColor: categoryColorMix(color, 58) }}
-                        />
-                      </div>
-                      <span className="text-xs text-muted-foreground/60 w-7 text-right tabular-nums">{count}</span>
-                    </div>
-                  )
-                })}
-                {topTools.length === 0 && (
-                  <p className="text-sm text-muted-foreground">No tool data</p>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Cost per session chart */}
-        {costBySessions.length > 1 && (
-          <Card>
-            <CardHeader>
-              <div className="flex items-start justify-between">
-                <div>
-                  <CardTitle>Cost Per Session</CardTitle>
-                  <CardDescription>Estimated spend over time</CardDescription>
-                </div>
-                <DollarSign className="w-4 h-4 text-muted-foreground mt-0.5" />
-              </div>
-            </CardHeader>
-            <CardContent>
-              <ResponsiveContainer width="100%" height={220}>
-                <LineChart
-                  data={costBySessions.map(s => ({ date: s.start_time.slice(0, 10), cost: s.cost }))}
-                  margin={{ top: 8, right: 16, bottom: 24, left: 8 }}
-                >
-                  <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
-                  <XAxis
-                    dataKey="date"
-                    tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
-                    tickLine={false}
-                    axisLine={false}
-                    interval="preserveStartEnd"
-                    height={36}
-                  />
-                  <YAxis
-                    tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
-                    tickLine={false}
-                    axisLine={false}
-                    tickFormatter={v => `$${v.toFixed(2)}`}
-                    width={52}
-                  />
-                  <Tooltip
-                    contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12 }}
-                    formatter={(v: unknown) => [formatCost(v as number), 'Cost']}
-                  />
-                  <Line type="monotone" dataKey="cost" stroke="#d97706" strokeWidth={2} dot={{ r: 3, fill: '#d97706' }} activeDot={{ r: 5 }} />
-                </LineChart>
-              </ResponsiveContainer>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Languages + Branches — two columns only when both exist; otherwise full width so one card isn’t stranded half-row */}
-        <div
-          className={
-            topLangs.length > 0 && branches.length > 0
-              ? 'grid grid-cols-1 gap-6 md:grid-cols-2'
-              : 'grid grid-cols-1 gap-6'
-          }
-        >
-          {topLangs.length > 0 && (
-            <Card>
-              <CardHeader>
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle>Languages</CardTitle>
-                    <CardDescription>Files touched across sessions</CardDescription>
-                  </div>
-                  <Code2 className="w-4 h-4 text-muted-foreground mt-0.5" />
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center gap-6">
-                  <ResponsiveContainer width={100} height={100}>
-                    <PieChart>
-                      <Pie
-                        data={topLangs.map(([name, value]) => ({ name, value }))}
-                        cx="50%" cy="50%"
-                        innerRadius={28} outerRadius={46}
-                        dataKey="value" strokeWidth={0}
-                      >
-                        {topLangs.map((_, i) => (
-                          <Cell key={i} fill={LANG_CHART_COLORS[i % LANG_CHART_COLORS.length]} />
-                        ))}
-                      </Pie>
-                    </PieChart>
-                  </ResponsiveContainer>
-                  <div className="space-y-1.5">
-                    {topLangs.map(([lang], i) => (
-                      <div key={lang} className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: LANG_CHART_COLORS[i % LANG_CHART_COLORS.length] }} />
-                        <Badge variant="outline" className="text-xs py-0">{lang}</Badge>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {branches.length > 0 && (
-            <Card>
-              <CardHeader>
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle>Git Branches</CardTitle>
-                    <CardDescription>Activity by branch</CardDescription>
-                  </div>
-                  <GitBranch className="w-4 h-4 text-muted-foreground mt-0.5" />
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-2.5">
-                  {branches.map(({ branch, turns }) => {
-                    const width = Math.max(4, Math.round((turns / maxBranchTurns) * 100))
-                    return (
-                      <div key={branch} className="flex items-center gap-2">
-                        <span className="text-xs text-muted-foreground/70 w-24 truncate font-mono">{branch}</span>
-                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                          <div className="h-full rounded-full bg-emerald-500/60" style={{ width: `${width}%` }} />
-                        </div>
-                        <span className="text-xs text-muted-foreground/50 w-16 text-right tabular-nums">{turns} turns</span>
-                      </div>
-                    )
-                  })}
-                </div>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/pulse/app/projects/page.tsx

@@ -1,110 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import useSWR from 'swr'
-import { TopBar } from '@/components/layout/top-bar'
-import { ProjectCard } from '@/components/projects/project-card'
-import type { ProjectSummary } from '@/types/claude'
-import { Input } from '@/components/ui/input'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Search, AlertTriangle, ArrowUpDown } from 'lucide-react'
-
-const fetcher = (url: string) =>
-  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
-
-type SortKey = 'last_active' | 'estimated_cost' | 'session_count' | 'total_duration_minutes'
-
-const SORT_OPTIONS: { k: SortKey; label: string }[] = [
-  { k: 'last_active',            label: 'Recent'   },
-  { k: 'estimated_cost',         label: 'Cost'     },
-  { k: 'session_count',          label: 'Sessions' },
-  { k: 'total_duration_minutes', label: 'Time'     },
-]
-
-export default function ProjectsPage() {
-  const { data, error, isLoading } = useSWR<{ projects: ProjectSummary[] }>(
-    '/api/projects', fetcher, { refreshInterval: 5_000 }
-  )
-  const [sort, setSort] = useState<SortKey>('last_active')
-  const [search, setSearch] = useState('')
-
-  const sorted = useMemo(() => {
-    if (!data) return []
-    let projects = [...data.projects]
-    if (search) {
-      const q = search.toLowerCase()
-      projects = projects.filter(p =>
-        p.display_name.toLowerCase().includes(q) ||
-        p.project_path.toLowerCase().includes(q)
-      )
-    }
-    return projects.sort((a, b) => {
-      if (sort === 'last_active') return b.last_active.localeCompare(a.last_active)
-      return (b[sort] as number) - (a[sort] as number)
-    })
-  }, [data, sort, search])
-
-  return (
-    <div className="flex flex-col min-h-screen">
-      <TopBar
-        title="Projects"
-        subtitle={data ? `${data.projects.length} projects` : 'Loading…'}
-      />
-      <div className="p-6 space-y-4">
-
-        {error && (
-          <Alert variant="destructive">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>Error loading data: {String(error)}</AlertDescription>
-          </Alert>
-        )}
-
-        {/* Search + sort toolbar */}
-        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
-          <div className="relative flex-1 w-full sm:max-w-xs">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <Input
-              placeholder="Search projects…"
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-          <div className="flex items-center gap-2 ml-auto">
-            <ArrowUpDown className="w-4 h-4 text-muted-foreground" />
-            <Select value={sort} onValueChange={v => setSort(v as SortKey)}>
-              <SelectTrigger className="w-36">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {SORT_OPTIONS.map(({ k, label }) => (
-                  <SelectItem key={k} value={k}>{label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        {isLoading && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
-            {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-48 rounded-xl" />)}
-          </div>
-        )}
-
-        {sorted.length > 0 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
-            {sorted.map(p => <ProjectCard key={p.slug} project={p} />)}
-          </div>
-        )}
-
-        {!isLoading && sorted.length === 0 && (
-          <div className="text-center py-16 text-muted-foreground text-sm">
-            {search ? 'No projects match your search.' : 'No projects found in ~/.bahulam/'}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}