@bahulam/code 0.1.6 → 0.1.7

package/pulse/components/layout/sidebar.tsx

@@ -1,183 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import {
-  LayoutDashboard, FolderOpen, MessageSquare, DollarSign,
-  Wrench, Activity, History, CheckSquare, FileText,
-  Brain, Settings, Download, HelpCircle, Moon, Sun, PanelLeftClose, PanelLeft, Zap,
-} from 'lucide-react'
-import { useTheme } from '@/components/theme-provider'
-import { useSidebar } from '@/components/layout/sidebar-context'
-import { Sheet, SheetContent } from '@/components/ui/sheet'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { cn } from '@/lib/utils'
-
-const NAV = [
-  { href: '/',         label: 'Overview',  icon: LayoutDashboard },
-  { href: '/projects', label: 'Projects',  icon: FolderOpen      },
-  { href: '/sessions', label: 'Sessions',  icon: MessageSquare   },
-  { href: '/costs',    label: 'Costs',     icon: DollarSign      },
-  { href: '/tools',    label: 'Tools',     icon: Wrench          },
-  { href: '/activity', label: 'Activity',  icon: Activity        },
-  { href: '/history',  label: 'History',   icon: History         },
-  { href: '/todos',    label: 'Todos',     icon: CheckSquare     },
-  { href: '/plans',    label: 'Plans',     icon: FileText        },
-  { href: '/memory',   label: 'Memory',    icon: Brain           },
-  { href: '/benchmarks', label: 'Benchmarks', icon: Zap          },
-  { href: '/settings', label: 'Settings',  icon: Settings        },
-  { href: '/help',     label: 'Help',      icon: HelpCircle      },
-  { href: '/export',   label: 'Export',    icon: Download        },
-]
-
-function NavItem({
-  href, label, icon: Icon, active, collapsed,
-}: {
-  href: string; label: string; icon: React.ElementType; active: boolean; collapsed: boolean
-}) {
-  const link = (
-    <Link
-      href={href}
-      className={cn(
-        'flex items-center gap-2.5 rounded-md text-sm font-medium transition-colors relative',
-        collapsed ? 'justify-center p-2.5' : 'px-3 py-2.5',
-        active
-          ? 'text-sidebar-primary bg-sidebar-accent border-l-2 border-l-sidebar-primary'
-          : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/80',
-        active && collapsed && 'border-l-0',
-      )}
-    >
-      <Icon className={cn('w-4 h-4 shrink-0', active ? 'text-sidebar-primary' : 'text-sidebar-foreground/60')} />
-      {!collapsed && label}
-    </Link>
-  )
-
-  if (collapsed) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{link}</TooltipTrigger>
-        <TooltipContent side="right" className="text-xs">{label}</TooltipContent>
-      </Tooltip>
-    )
-  }
-  return link
-}
-
-function SidebarContents({
-  collapsed = false,
-  onNavigate,
-}: {
-  collapsed?: boolean
-  onNavigate?: () => void
-}) {
-  const pathname = usePathname()
-  const { theme, toggle: toggleTheme } = useTheme()
-  const { toggle: toggleCollapsed } = useSidebar()
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className={cn(
-        'border-b border-sidebar-border flex items-center',
-        collapsed ? 'justify-center px-2 py-4' : 'justify-between px-4 pt-5 pb-4',
-      )}>
-        {!collapsed && (
-          <span
-            className={cn(
-              'inline-block rounded-md px-2.5 py-1.5 text-[12px] leading-snug tracking-[0.06em]',
-              'whitespace-nowrap select-none',
-              /* Light: cyan on soft tint */
-              'text-[#0e7490]',
-              'bg-linear-to-b from-[#06b6d4]/14 to-[#06b6d4]/6',
-              'ring-1 ring-inset ring-[#06b6d4]/28',
-              'shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_1px_3px_rgba(24,24,27,0.08)]',
-              /* Dark: cyan glow */
-              'dark:text-[#22d3ee]',
-              'dark:from-[#22d3ee]/18 dark:to-[#22d3ee]/8 dark:ring-[#22d3ee]/40',
-              'dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_0_22px_-8px_rgba(34,211,238,0.45)]',
-              '[-webkit-text-stroke:0.35px_rgba(14,116,144,0.35)] dark:[-webkit-text-stroke:0.45px_#06b6d4]',
-            )}
-            style={{ fontFamily: 'var(--font-press-start)' }}
-          >
-            <span
-              className="dark:[text-shadow:0_1px_0_#0e4f5c,0_2px_0_#083344,0_3px_6px_rgba(0,0,0,0.35)] [text-shadow:0_1px_0_rgba(255,255,255,0.4)]"
-            >
-              Bahulam Pulse
-            </span>
-          </span>
-        )}
-        <button
-          onClick={toggleCollapsed}
-          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          className="hidden md:flex p-1.5 rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer"
-        >
-          {collapsed
-            ? <PanelLeft className="w-4 h-4" />
-            : <PanelLeftClose className="w-4 h-4" />}
-        </button>
-      </div>
-
-      {/* Nav */}
-      <nav className={cn('flex-1 py-4 space-y-0.5 overflow-y-auto', collapsed ? 'px-1' : 'px-3')}>
-        <TooltipProvider delayDuration={100}>
-          {NAV.map(({ href, label, icon }) => (
-            <div key={href} onClick={onNavigate}>
-              <NavItem
-                href={href}
-                label={label}
-                icon={icon}
-                active={pathname === href}
-                collapsed={collapsed}
-              />
-            </div>
-          ))}
-        </TooltipProvider>
-      </nav>
-
-      {/* Footer */}
-      <div className={cn(
-        'border-t border-sidebar-border flex items-center',
-        collapsed ? 'justify-center px-2 py-3' : 'justify-between px-4 py-3',
-      )}>
-        {!collapsed && (
-          <span className="text-xs text-sidebar-foreground/50">
-            Bahulam Pulse
-          </span>
-        )}
-        <button
-          onClick={toggleTheme}
-          aria-label="Toggle theme"
-          className="p-1.5 rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer"
-        >
-          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export function Sidebar() {
-  const { collapsed, mobileOpen, setMobileOpen } = useSidebar()
-
-  return (
-    <>
-      {/* Desktop sidebar */}
-      <aside
-        className={cn(
-          'hidden md:flex fixed left-0 top-0 h-screen flex-col border-r border-sidebar-border bg-sidebar z-40',
-          'transition-[width] duration-300 overflow-hidden',
-          collapsed ? 'w-14' : 'w-56',
-        )}
-      >
-        <SidebarContents collapsed={collapsed} />
-      </aside>
-
-      {/* Mobile Sheet */}
-      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-        <SheetContent side="left" className="w-56 p-0 bg-sidebar border-sidebar-border">
-          <SidebarContents onNavigate={() => setMobileOpen(false)} />
-        </SheetContent>
-      </Sheet>
-    </>
-  )
-}

package/pulse/components/layout/top-bar.tsx

@@ -1,121 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useState, useEffect } from 'react'
-import { mutate } from 'swr'
-import { Search, RefreshCw, Menu } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { useSidebar } from '@/components/layout/sidebar-context'
-import { cn } from '@/lib/utils'
-
-interface TopBarProps {
-  title: string
-  subtitle?: string
-  className?: string
-}
-
-function formatTimestamp(d: Date) {
-  return d.toLocaleString('en-US', {
-    month: 'numeric',
-    day: 'numeric',
-    year: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-}
-
-export function TopBar({ title, subtitle, className }: TopBarProps) {
-  const router = useRouter()
-  const { setMobileOpen } = useSidebar()
-  const [refreshing, setRefreshing] = useState(false)
-  const [now, setNow] = useState<string>('')
-
-  useEffect(() => {
-    const update = () => setNow(formatTimestamp(new Date()))
-    const initial = window.setTimeout(update, 0)
-    const interval = window.setInterval(update, 1000)
-    return () => {
-      window.clearTimeout(initial)
-      window.clearInterval(interval)
-    }
-  }, [])
-
-  async function handleRefresh() {
-    setRefreshing(true)
-    await mutate(() => true, undefined, { revalidate: true })
-    router.refresh()
-    setTimeout(() => setRefreshing(false), 800)
-  }
-
-  return (
-    <header
-      className={cn(
-        'sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-border bg-background/95 py-3 backdrop-blur px-4 md:px-6',
-        className
-      )}
-    >
-      {/* Left: title + subtitle */}
-      <div className="min-w-0">
-        <h1 className="text-base font-semibold text-foreground truncate">{title}</h1>
-        {subtitle && (
-          <p className="text-xs text-muted-foreground truncate" suppressHydrationWarning>
-            {subtitle}{now ? ` · ${now}` : ''}
-          </p>
-        )}
-        {!subtitle && now && (
-          <p className="text-xs text-muted-foreground" suppressHydrationWarning>{now}</p>
-        )}
-      </div>
-
-      {/* Right: actions */}
-      <div className="flex items-center gap-2 shrink-0">
-        {/* Mobile hamburger */}
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setMobileOpen(true)}
-          className="md:hidden"
-          aria-label="Open menu"
-        >
-          <Menu className="w-4 h-4" />
-        </Button>
-        {/* Search — desktop */}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => window.dispatchEvent(new CustomEvent('open-search'))}
-          className="hidden md:flex items-center gap-2 text-muted-foreground"
-        >
-          <Search className="w-3.5 h-3.5" />
-          Search
-          <kbd className="ml-1 text-[10px] text-muted-foreground/50 border border-border rounded px-1 font-sans">⌘K</kbd>
-        </Button>
-
-        {/* Search — mobile icon only */}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => window.dispatchEvent(new CustomEvent('open-search'))}
-          className="md:hidden"
-          aria-label="Search"
-        >
-          <Search className="w-4 h-4" />
-        </Button>
-
-        {/* Refresh */}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleRefresh}
-          disabled={refreshing}
-          className="gap-2"
-          aria-label="Refresh data"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${refreshing ? 'animate-spin' : ''}`} />
-          <span className="hidden sm:inline">{refreshing ? 'Refreshing...' : 'Refresh'}</span>
-        </Button>
-      </div>
-    </header>
-  )
-}

package/pulse/components/overview/activity-heatmap.tsx

@@ -1,107 +0,0 @@
-'use client'
-
-import { Fragment, useMemo } from 'react'
-import { format, startOfWeek, addDays, eachWeekOfInterval } from 'date-fns'
-import type { DailyActivity } from '@/types/claude'
-import { useTheme } from '@/components/theme-provider'
-
-interface Props {
-  data: DailyActivity[]
-}
-
-// dark:  empty → dark gray → dim green → mid green → bright green
-const DARK_SHADES  = ['#1e2128', '#1e3a2f', '#16a34a', '#22c55e', '#86efac']
-// light: empty cell reads against zinc canvas; greens stay saturated for contrast
-const LIGHT_SHADES = ['#d4d4d8', '#86efac', '#4ade80', '#16a34a', '#14532d']
-
-const DAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', '']
-
-export function ActivityHeatmap({ data }: Props) {
-  const { theme } = useTheme()
-  const shades = theme === 'dark' ? DARK_SHADES : LIGHT_SHADES
-
-  function getShade(count: number, max: number): string {
-    if (count === 0) return shades[0]
-    const ratio = count / max
-    if (ratio < 0.2) return shades[1]
-    if (ratio < 0.4) return shades[2]
-    if (ratio < 0.7) return shades[3]
-    return shades[4]
-  }
-
-  const { weeks, maxCount } = useMemo(() => {
-    const countMap = new Map<string, number>()
-    let maxCount = 0
-    for (const d of data) {
-      countMap.set(d.date, d.messageCount)
-      if (d.messageCount > maxCount) maxCount = d.messageCount
-    }
-
-    const today = new Date()
-    const startDate = startOfWeek(addDays(today, -52 * 7), { weekStartsOn: 0 })
-    const weekStarts = eachWeekOfInterval({ start: startDate, end: today }, { weekStartsOn: 0 })
-    const weeks = weekStarts.map(weekStart =>
-      Array.from({ length: 7 }, (_, i) => {
-        const d = addDays(weekStart, i)
-        const dateStr = format(d, 'yyyy-MM-dd')
-        return { date: d, dateStr, count: countMap.get(dateStr) ?? 0 }
-      })
-    )
-
-    return { weeks, maxCount }
-  }, [data])
-
-  const nWeeks = weeks.length
-  const gridStyle = {
-    gridTemplateColumns: `minmax(1.75rem, 2rem) repeat(${nWeeks}, minmax(0, 1fr))`,
-  } as const
-
-  return (
-    <div className="w-full min-w-0">
-      <div
-        className="grid w-full gap-x-1 gap-y-1"
-        style={gridStyle}
-      >
-        {/* Month row */}
-        <div aria-hidden className="min-h-4" />
-        {weeks.map((week, wi) => (
-          <div
-            key={`m-${wi}`}
-            className="flex min-h-4 min-w-0 items-end justify-center text-[9px] leading-none text-muted-foreground/80"
-          >
-            {week[0].date.getDate() <= 7 ? format(week[0].date, 'MMM') : ''}
-          </div>
-        ))}
-
-        {/* Day rows + cells */}
-        {[0, 1, 2, 3, 4, 5, 6].map(di => (
-          <Fragment key={di}>
-            <div className="flex min-w-0 items-center text-[9px] leading-none text-muted-foreground/80">
-              {DAY_LABELS[di]}
-            </div>
-            {weeks.map((week, wi) => {
-              const day = week[di]
-              return (
-                <div
-                  key={`c-${wi}-${di}`}
-                  className="aspect-square min-h-[6px] w-full min-w-0 rounded-[3px] cursor-default transition-colors"
-                  style={{ backgroundColor: getShade(day.count, maxCount || 1) }}
-                  title={`${day.dateStr}: ${day.count} messages`}
-                />
-              )
-            })}
-          </Fragment>
-        ))}
-      </div>
-
-      {/* Legend */}
-      <div className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-border/40 pt-2">
-        <span className="text-xs text-muted-foreground">Less</span>
-        {shades.map((s, i) => (
-          <div key={i} className="h-3 w-3 shrink-0 rounded-[3px]" style={{ backgroundColor: s }} />
-        ))}
-        <span className="text-xs text-muted-foreground">More</span>
-      </div>
-    </div>
-  )
-}

package/pulse/components/overview/conversation-table.tsx

@@ -1,148 +0,0 @@
-'use client'
-
-import { useEffect, useState, useMemo } from 'react'
-import Link from 'next/link'
-import { formatTokens, formatRelativeDate, projectDisplayName } from '@/lib/decode'
-import type { SessionWithFacet } from '@/types/claude'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import { Badge } from '@/components/ui/badge'
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-
-type FilterType = 'active' | 'recent' | 'all'
-
-const ONE_DAY_MS = 24 * 60 * 60 * 1000
-const ONE_WEEK_MS = 7 * ONE_DAY_MS
-
-interface Props {
-  sessions: SessionWithFacet[]
-}
-
-function shortId(id: string): string {
-  return id.slice(0, 8) + '…'
-}
-
-export function OverviewConversationTable({ sessions }: Props) {
-  const [filter, setFilter] = useState<FilterType>('recent')
-  const [now, setNow] = useState<number | null>(null)
-
-  useEffect(() => {
-    const update = () => setNow(Date.now())
-    const initial = window.setTimeout(update, 0)
-    const interval = window.setInterval(update, 60_000)
-    return () => {
-      window.clearTimeout(initial)
-      window.clearInterval(interval)
-    }
-  }, [])
-
-  const filtered = useMemo(() => {
-    let result: SessionWithFacet[]
-    switch (filter) {
-      case 'active':
-        result = now === null
-          ? sessions
-          : sessions.filter(s => now - new Date(s.start_time).getTime() < ONE_DAY_MS)
-        break
-      case 'recent':
-        result = now === null
-          ? sessions
-          : sessions.filter(s => now - new Date(s.start_time).getTime() < ONE_WEEK_MS)
-        break
-      default:
-        result = sessions
-    }
-    return result.sort(
-      (a, b) => new Date(b.start_time).getTime() - new Date(a.start_time).getTime(),
-    )
-  }, [sessions, filter, now])
-
-  const displaySessions = filtered.slice(0, 10)
-
-  return (
-    <div className="space-y-4">
-      <Tabs value={filter} onValueChange={v => setFilter(v as FilterType)}>
-        <TabsList>
-          <TabsTrigger value="active">Active (24h)</TabsTrigger>
-          <TabsTrigger value="recent">Recent (7d)</TabsTrigger>
-          <TabsTrigger value="all">All</TabsTrigger>
-        </TabsList>
-      </Tabs>
-
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground">Session</TableHead>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground">Project</TableHead>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground text-right">Messages</TableHead>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground text-right">Tokens</TableHead>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground">Last Active</TableHead>
-            <TableHead className="text-xs uppercase tracking-wider text-muted-foreground">Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {displaySessions.map(s => {
-            const totalMsgs = (s.user_message_count ?? 0) + (s.assistant_message_count ?? 0)
-            const totalTokens = (s.input_tokens ?? 0) + (s.output_tokens ?? 0)
-            const projectName = projectDisplayName(s.project_path ?? '')
-            const isActive = now !== null && now - new Date(s.start_time).getTime() < ONE_DAY_MS
-
-            return (
-              <TableRow key={s.session_id}>
-                <TableCell className="font-mono text-muted-foreground">
-                  <Link
-                    href={`/sessions/${s.session_id}`}
-                    className="hover:text-primary transition-colors"
-                    title={s.session_id}
-                  >
-                    {shortId(s.session_id)}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link
-                    href={`/sessions/${s.session_id}`}
-                    className="font-medium hover:text-primary transition-colors"
-                  >
-                    {projectName}
-                  </Link>
-                </TableCell>
-                <TableCell className="text-right tabular-nums text-muted-foreground">
-                  {totalMsgs.toLocaleString()}
-                </TableCell>
-                <TableCell className="text-right font-mono tabular-nums text-primary">
-                  {formatTokens(totalTokens)}
-                </TableCell>
-                <TableCell className="text-muted-foreground text-sm">
-                  {formatRelativeDate(s.start_time)}
-                </TableCell>
-                <TableCell>
-                  {isActive ? (
-                    <Badge variant="outline" className="text-[#34d399] border-[#34d399]/30 bg-[#34d399]/10 gap-1.5">
-                      <span className="w-1.5 h-1.5 rounded-full bg-[#34d399] inline-block" />
-                      Active
-                    </Badge>
-                  ) : (
-                    <Badge variant="secondary">Completed</Badge>
-                  )}
-                </TableCell>
-              </TableRow>
-            )
-          })}
-          {displaySessions.length === 0 && (
-            <TableRow>
-              <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
-                No sessions match this filter
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}

package/pulse/components/overview/model-breakdown-donut.tsx

@@ -1,95 +0,0 @@
-'use client'
-
-import {
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from 'recharts'
-import type { ModelUsage } from '@/types/claude'
-import { formatTokens } from '@/lib/decode'
-
-interface Props {
-  modelUsage: Record<string, ModelUsage>
-}
-
-const MODEL_COLORS = [
-  '#d97706',
-  '#34d399',
-  '#2563eb',
-  '#a78bfa',
-  '#fbbf24',
-]
-
-function shortModelName(model: string): string {
-  if (model.includes('opus-4-6'))      return 'Opus 4.6'
-  if (model.includes('opus-4-5'))      return 'Opus 4.5'
-  if (model.includes('sonnet-4-6'))    return 'Sonnet 4.6'
-  if (model.includes('sonnet-4-5'))    return 'Sonnet 4.5'
-  if (model.includes('haiku-4-5'))     return 'Haiku 4.5'
-  // Generic fallback
-  const parts = model.split('-')
-  return parts.slice(0, 3).join('-')
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function CustomTooltip({ active, payload }: any) {
-  if (!active || !payload?.length) return null
-  const { name, value } = payload[0]
-  return (
-    <div className="bg-card border border-border rounded px-3 py-2 text-[13px]">
-      <p className="text-muted-foreground">{name}</p>
-      <p className="text-foreground font-bold">{formatTokens(value)} tokens</p>
-    </div>
-  )
-}
-
-export function ModelBreakdownDonut({ modelUsage }: Props) {
-  const data = Object.entries(modelUsage)
-    .map(([model, usage]) => ({
-      name: shortModelName(model),
-      value: (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0) + (usage.cacheReadInputTokens ?? 0) + (usage.cacheCreationInputTokens ?? 0),
-    }))
-    .filter(d => d.value > 0)
-    .sort((a, b) => b.value - a.value)
-
-  if (data.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-48 text-muted-foreground text-sm">
-        no model data
-      </div>
-    )
-  }
-
-  return (
-    <ResponsiveContainer width="100%" height={220}>
-      <PieChart>
-        <Pie
-          data={data}
-          cx="50%"
-          cy="45%"
-          innerRadius={55}
-          outerRadius={85}
-          paddingAngle={2}
-          dataKey="value"
-          strokeWidth={0}
-        >
-          {data.map((_, i) => (
-            <Cell key={i} fill={MODEL_COLORS[i % MODEL_COLORS.length]} />
-          ))}
-        </Pie>
-        <Tooltip content={<CustomTooltip />} />
-        <Legend
-          iconType="circle"
-          iconSize={8}
-          wrapperStyle={{ fontSize: 12 }}
-          formatter={(value) => (
-            <span style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>{value}</span>
-          )}
-        />
-      </PieChart>
-    </ResponsiveContainer>
-  )
-}