@axplusb/kepler 0.0.1 → 1.0.1

package/pulse/components/layout/sidebar.tsx

@@ -0,0 +1,182 @@
+'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,
+} 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: '/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)]"
+            >
+              Orca 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">
+            Orca 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

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

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

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

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