@bahulam/code 0.1.6 → 0.1.8

package/pulse/components/costs/cost-over-time-chart.tsx

@@ -1,95 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer, Legend } from 'recharts'
-import { formatCost } from '@/lib/decode'
-import type { DailyCost } from '@/types/claude'
-
-const MODEL_COLORS: Record<string, string> = {
-  'claude-opus-4-6':        '#d97706',
-  'claude-opus-4-5-20251101': '#a78bfa',
-  'claude-sonnet-4-6':      'var(--viz-sky)',
-  'claude-haiku-4-5':       '#34d399',
-}
-
-function colorForModel(m: string): string {
-  for (const [key, col] of Object.entries(MODEL_COLORS)) {
-    if (m.includes(key.split('-').slice(2).join('-'))) return col
-  }
-  return '#7a8494'
-}
-
-function shortModel(m: string): string {
-  if (m.includes('opus-4-6'))   return 'Opus 4.6'
-  if (m.includes('opus-4-5'))   return 'Opus 4.5'
-  if (m.includes('sonnet-4-6')) return 'Sonnet 4.6'
-  if (m.includes('haiku-4-5'))  return 'Haiku 4.5'
-  return m
-}
-
-interface Props {
-  daily: DailyCost[]
-}
-
-type Window = 30 | 90 | 365
-
-export function CostOverTimeChart({ daily }: Props) {
-  const [window, setWindow] = useState<Window>(90)
-
-  const { data, models } = useMemo(() => {
-    const sorted = [...daily].sort((a, b) => a.date.localeCompare(b.date))
-    const sliced = sorted.slice(-window)
-    const modelSet = new Set<string>()
-    for (const d of sliced) Object.keys(d.costs ?? {}).forEach(m => modelSet.add(m))
-    const models = [...modelSet]
-    return {
-      data: sliced.map(d => ({
-        date: d.date.slice(5), // MM-DD
-        ...Object.fromEntries(models.map(m => [m, d.costs[m] ?? 0])),
-        total: d.total,
-      })),
-      models,
-    }
-  }, [daily, window])
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-[13px] font-bold text-muted-foreground uppercase tracking-widest">Cost Over Time</h3>
-        <div className="flex gap-1">
-          {([30, 90, 365] as Window[]).map(w => (
-            <button
-              key={w}
-              onClick={() => setWindow(w)}
-              className={`px-2 py-0.5 rounded text-[12px] transition-colors ${window === w ? 'bg-primary text-black font-bold' : 'text-muted-foreground hover:text-foreground border border-border'}`}
-            >
-              {w === 365 ? 'All' : `${w}d`}
-            </button>
-          ))}
-        </div>
-      </div>
-      <ResponsiveContainer width="100%" height={200}>
-        <AreaChart data={data} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
-          <XAxis dataKey="date" tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} tickLine={false} axisLine={false} interval="preserveStartEnd" />
-          <YAxis tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} tickLine={false} axisLine={false} tickFormatter={v => `$${v.toFixed(2)}`} width={48} />
-          <Tooltip
-            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
-            formatter={(val: number | undefined, name?: string) => [formatCost(val ?? 0), shortModel(name ?? '')]}
-          />
-          {models.map(m => (
-            <Area
-              key={m}
-              type="monotone"
-              dataKey={m}
-              stackId="1"
-              stroke={colorForModel(m)}
-              fill={colorForModel(m) + '30'}
-              strokeWidth={1.5}
-            />
-          ))}
-        </AreaChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}

package/pulse/components/costs/model-token-table.tsx

@@ -1,60 +0,0 @@
-import { formatTokens, formatCost } from '@/lib/decode'
-import type { ModelCostBreakdown } from '@/types/claude'
-
-function shortModel(m: string): string {
-  if (m.includes('opus-4-6'))   return 'claude-opus-4.6'
-  if (m.includes('opus-4-5'))   return 'claude-opus-4.5'
-  if (m.includes('sonnet-4-6')) return 'claude-sonnet-4.6'
-  if (m.includes('haiku-4-5'))  return 'claude-haiku-4.5'
-  return m
-}
-
-interface Props {
-  models: ModelCostBreakdown[]
-}
-
-export function ModelTokenTable({ models }: Props) {
-  const totals = models.reduce((acc, m) => ({
-    input: acc.input + m.input_tokens,
-    output: acc.output + m.output_tokens,
-    cacheWrite: acc.cacheWrite + m.cache_write_tokens,
-    cacheRead: acc.cacheRead + m.cache_read_tokens,
-    cost: acc.cost + m.estimated_cost,
-  }), { input: 0, output: 0, cacheWrite: 0, cacheRead: 0, cost: 0 })
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-[13px] font-mono">
-        <thead>
-          <tr className="border-b border-border">
-            {['Model', 'Input', 'Output', 'Cache W', 'Cache R', 'Cost'].map(h => (
-              <th key={h} className={`py-2 text-[12px] font-bold text-muted-foreground uppercase tracking-wider ${h === 'Model' ? 'text-left' : 'text-right'}`}>
-                {h}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {models.map(m => (
-            <tr key={m.model} className="border-b border-border/30 hover:bg-muted/50 transition-colors">
-              <td className="py-2 text-foreground/80">{shortModel(m.model)}</td>
-              <td className="py-2 text-right text-blue-700 dark:text-[#60a5fa]">{formatTokens(m.input_tokens)}</td>
-              <td className="py-2 text-right text-[#d97706]">{formatTokens(m.output_tokens)}</td>
-              <td className="py-2 text-right text-[#a78bfa]">{formatTokens(m.cache_write_tokens)}</td>
-              <td className="py-2 text-right text-[#34d399]">{formatTokens(m.cache_read_tokens)}</td>
-              <td className="py-2 text-right text-[#d97706] font-bold">{formatCost(m.estimated_cost)}</td>
-            </tr>
-          ))}
-          <tr className="border-t border-border font-bold">
-            <td className="py-2 text-muted-foreground">TOTAL</td>
-            <td className="py-2 text-right text-blue-700 dark:text-[#60a5fa]">{formatTokens(totals.input)}</td>
-            <td className="py-2 text-right text-[#d97706]">{formatTokens(totals.output)}</td>
-            <td className="py-2 text-right text-[#a78bfa]">{formatTokens(totals.cacheWrite)}</td>
-            <td className="py-2 text-right text-[#34d399]">{formatTokens(totals.cacheRead)}</td>
-            <td className="py-2 text-right text-[#d97706]">{formatCost(totals.cost)}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  )
-}

package/pulse/components/global-search.tsx

@@ -1,193 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-import { LayoutDashboard, FileText, FolderOpen, Layers, Brain } from 'lucide-react'
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@/components/ui/command'
-import { projectDisplayName } from '@/lib/decode'
-
-const PAGES = [
-  { label: 'Overview',  href: '/'         },
-  { label: 'Projects',  href: '/projects'  },
-  { label: 'Sessions',  href: '/sessions'  },
-  { label: 'Costs',     href: '/costs'     },
-  { label: 'Tools',     href: '/tools'     },
-  { label: 'Activity',  href: '/activity'  },
-  { label: 'History',   href: '/history'   },
-  { label: 'Todos',     href: '/todos'     },
-  { label: 'Plans',     href: '/plans'     },
-  { label: 'Memory',    href: '/memory'    },
-  { label: 'Settings',  href: '/settings'  },
-  { label: 'Export',    href: '/export'    },
-]
-
-export function GlobalSearch() {
-  const [open, setOpen] = useState(false)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [sessions, setSessions] = useState<any[]>([])
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [projects, setProjects] = useState<any[]>([])
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [plans, setPlans] = useState<any[]>([])
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [memories, setMemories] = useState<any[]>([])
-  const [loaded, setLoaded] = useState(false)
-  const router = useRouter()
-
-  // Lazy-load data on first open
-  useEffect(() => {
-    if (!open || loaded) return
-    Promise.all([
-      fetch('/api/sessions').then(r => r.json()),
-      fetch('/api/projects').then(r => r.json()),
-      fetch('/api/plans').then(r => r.json()),
-      fetch('/api/memory').then(r => r.json()),
-    ]).then(([s, p, pl, m]) => {
-      setSessions(s.sessions ?? [])
-      setProjects(p.projects ?? [])
-      setPlans(pl.plans ?? [])
-      setMemories(m.memories ?? [])
-      setLoaded(true)
-    }).catch(() => setLoaded(true))
-  }, [open, loaded])
-
-  // Listen for open-search custom event (fired by TopBar button)
-  useEffect(() => {
-    const handler = () => setOpen(true)
-    window.addEventListener('open-search', handler)
-    return () => window.removeEventListener('open-search', handler)
-  }, [])
-
-  // Cmd+K / Ctrl+K shortcut
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        setOpen(o => !o)
-      }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  function navigate(href: string) {
-    router.push(href)
-    setOpen(false)
-  }
-
-  return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder="Search pages, sessions, projects..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-
-        <CommandGroup heading="Pages">
-          {PAGES.map(p => (
-            <CommandItem key={p.href} value={p.label} onSelect={() => navigate(p.href)}>
-              <LayoutDashboard className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
-              {p.label}
-              <CommandShortcut>page</CommandShortcut>
-            </CommandItem>
-          ))}
-        </CommandGroup>
-
-        {sessions.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Sessions">
-              {sessions.slice(0, 80).map(s => (
-                <CommandItem
-                  key={s.session_id}
-                  value={`${s.slug ?? ''} ${s.first_prompt ?? ''} ${projectDisplayName(s.project_path ?? '')}`}
-                  onSelect={() => navigate(`/sessions/${s.session_id}`)}
-                >
-                  <FileText className="w-3.5 h-3.5 text-blue-700 dark:text-blue-400 shrink-0" />
-                  <div className="flex-1 min-w-0">
-                    <span className="text-sm">{s.slug ?? s.session_id.slice(0, 12)}</span>
-                    {s.first_prompt && (
-                      <p className="text-xs text-muted-foreground truncate">{s.first_prompt.slice(0, 60)}</p>
-                    )}
-                  </div>
-                  <CommandShortcut>session</CommandShortcut>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-
-        {projects.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Projects">
-              {projects.map(p => (
-                <CommandItem
-                  key={p.slug}
-                  value={`${p.display_name} ${p.slug}`}
-                  onSelect={() => navigate(`/projects/${p.slug}`)}
-                >
-                  <FolderOpen className="w-3.5 h-3.5 text-green-400 shrink-0" />
-                  <span className="flex-1 truncate">{p.display_name}</span>
-                  <CommandShortcut>{p.session_count} sessions</CommandShortcut>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-
-        {plans.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Plans">
-              {plans.map((p, i) => (
-                <CommandItem
-                  key={`plan-${i}`}
-                  value={`${p.name} ${(p.content ?? '').slice(0, 200)}`}
-                  onSelect={() => navigate('/plans')}
-                >
-                  <Layers className="w-3.5 h-3.5 text-purple-400 shrink-0" />
-                  <span className="flex-1 truncate">{p.name}</span>
-                  <CommandShortcut>plan</CommandShortcut>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-
-        {memories.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Memory">
-              {memories.slice(0, 40).map((m, i) => (
-                <CommandItem
-                  key={`mem-${i}`}
-                  value={`${m.name ?? ''} ${m.description ?? ''} ${(m.body ?? '').slice(0, 100)}`}
-                  onSelect={() => navigate('/memory')}
-                >
-                  <Brain className="w-3.5 h-3.5 text-amber-400 shrink-0" />
-                  <span className="flex-1 truncate">{m.name}</span>
-                  <CommandShortcut>{m.type}</CommandShortcut>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-      </CommandList>
-
-      <div className="border-t border-border px-3 py-2 flex items-center gap-4 text-[10px] text-muted-foreground/40 font-mono">
-        <span>↑↓ navigate</span>
-        <span>↵ open</span>
-        <span>esc close</span>
-        <span className="ml-auto">⌘K toggle</span>
-      </div>
-    </CommandDialog>
-  )
-}

package/pulse/components/keyboard-nav-provider.tsx

@@ -1,23 +0,0 @@
-'use client'
-
-import { GlobalSearch } from './global-search'
-import { useGlobalKeyboardNav } from './use-global-keyboard-nav'
-
-function GModeIndicator() {
-  const gMode = useGlobalKeyboardNav()
-  if (!gMode) return null
-  return (
-    <div className="fixed bottom-20 right-4 md:bottom-4 z-50 px-3 py-1.5 bg-background border border-primary/60 rounded text-sm font-mono text-primary shadow-lg animate-in fade-in-0 duration-100 pointer-events-none">
-      g —
-    </div>
-  )
-}
-
-export function KeyboardNavProvider() {
-  return (
-    <>
-      <GlobalSearch />
-      <GModeIndicator />
-    </>
-  )
-}

package/pulse/components/layout/bottom-nav.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import {
-  LayoutDashboard, MessageSquare, DollarSign,
-  FolderOpen, Activity, Moon, Sun, Zap,
-} from 'lucide-react'
-import { useTheme } from '@/components/theme-provider'
-import { cn } from '@/lib/utils'
-
-const NAV = [
-  { href: '/',         label: 'Overview',  icon: LayoutDashboard },
-  { href: '/sessions', label: 'Sessions',  icon: MessageSquare   },
-  { href: '/costs',    label: 'Costs',     icon: DollarSign      },
-  { href: '/projects', label: 'Projects',  icon: FolderOpen      },
-  { href: '/activity', label: 'Activity',  icon: Activity        },
-  { href: '/benchmarks', label: 'Benchmarks', icon: Zap          },
-]
-
-export function BottomNav() {
-  const pathname = usePathname()
-  const { theme, toggle } = useTheme()
-
-  return (
-    <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-sidebar border-t border-sidebar-border flex">
-      {NAV.map(({ href, label, icon: Icon }) => {
-        const active = pathname === href
-        return (
-          <Link
-            key={href}
-            href={href}
-            className={cn(
-              'flex-1 flex flex-col items-center justify-center py-2.5 gap-1 transition-colors',
-              active ? 'text-sidebar-primary' : 'text-sidebar-foreground/40 hover:text-sidebar-foreground',
-            )}
-          >
-            <Icon className="w-4 h-4" />
-            <span className="text-[10px] font-medium leading-none">{label}</span>
-          </Link>
-        )
-      })}
-      <button
-        onClick={toggle}
-        aria-label="Toggle theme"
-        className="flex-1 flex flex-col items-center justify-center py-2.5 gap-1 transition-colors text-sidebar-foreground/40 hover:text-sidebar-foreground cursor-pointer"
-      >
-        {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-        <span className="text-[10px] font-medium leading-none">Theme</span>
-      </button>
-    </nav>
-  )
-}

package/pulse/components/layout/client-layout.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import { useSidebar } from '@/components/layout/sidebar-context'
-
-export function ClientLayout({ children }: { children: React.ReactNode }) {
-  const { collapsed } = useSidebar()
-  return (
-    <main
-      className={[
-        'flex-1 min-h-screen overflow-x-hidden bg-background pb-16 md:pb-0',
-        'transition-[margin] duration-300',
-        collapsed ? 'md:ml-14' : 'md:ml-56',
-      ].join(' ')}
-    >
-      {children}
-      <footer className="border-t border-border/50 py-3 px-6 flex items-center justify-center mb-16 md:mb-0">
-        <p className="text-xs text-muted-foreground">
-          Made by{' '}
-          <a
-            href="https://github.com/Arindam200"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
-          >
-            Arindam
-          </a>
-        </p>
-      </footer>
-    </main>
-  )
-}

package/pulse/components/layout/sidebar-context.tsx

@@ -1,50 +0,0 @@
-'use client'
-
-import { createContext, useContext, useEffect, useState } from 'react'
-
-interface SidebarContextType {
-  collapsed: boolean
-  toggle: () => void
-  mobileOpen: boolean
-  setMobileOpen: (v: boolean) => void
-}
-
-const SidebarContext = createContext<SidebarContextType>({
-  collapsed: false,
-  toggle: () => {},
-  mobileOpen: false,
-  setMobileOpen: () => {},
-})
-
-export function SidebarProvider({ children }: { children: React.ReactNode }) {
-  const [collapsed, setCollapsed] = useState(false)
-  const [mobileOpen, setMobileOpen] = useState(false)
-
-  useEffect(() => {
-    const id = window.setTimeout(() => {
-      try {
-        setCollapsed(localStorage.getItem('cc-sidebar-collapsed') === 'true')
-      } catch {}
-    }, 0)
-
-    return () => window.clearTimeout(id)
-  }, [])
-
-  function toggle() {
-    setCollapsed(prev => {
-      const next = !prev
-      try { localStorage.setItem('cc-sidebar-collapsed', String(next)) } catch {}
-      return next
-    })
-  }
-
-  return (
-    <SidebarContext.Provider value={{ collapsed, toggle, mobileOpen, setMobileOpen }}>
-      {children}
-    </SidebarContext.Provider>
-  )
-}
-
-export function useSidebar() {
-  return useContext(SidebarContext)
-}