@axplusb/kepler 0.0.1 → 1.0.1

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

@@ -0,0 +1,95 @@
+'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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,193 @@
+'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

@@ -0,0 +1,23 @@
+'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

@@ -0,0 +1,52 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  LayoutDashboard, MessageSquare, DollarSign,
+  FolderOpen, Activity, Moon, Sun,
+} 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        },
+]
+
+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

@@ -0,0 +1,31 @@
+'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

@@ -0,0 +1,50 @@
+'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)
+}