@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/app/sessions/[id]/page.tsx

@@ -0,0 +1,243 @@
+'use client'
+
+import { use } from 'react'
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import { SessionSidebar } from '@/components/sessions/replay/session-sidebar'
+import { UserTurnCard, AssistantTurnCard } from '@/components/sessions/replay/turn-cards'
+import { TokenAccumulationChart } from '@/components/sessions/replay/token-accumulation-chart'
+import { SessionBadges } from '@/components/sessions/session-badges'
+import { formatCost, formatTokens, formatDuration, projectDisplayName } from '@/lib/decode'
+import type { ReplayData, SessionWithFacet } from '@/types/claude'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { AlertTriangle, MessageSquare, Coins, DollarSign, Clock, Zap } 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 ReplayResponse = ReplayData
+
+export default function SessionDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+
+  const { data: replayData, error: replayError, isLoading: replayLoading } =
+    useSWR<ReplayResponse>(`/api/sessions/${id}/replay`, fetcher)
+
+  const { data: metaData } =
+    useSWR<{ session: SessionWithFacet }>(`/api/sessions/${id}`, fetcher)
+
+  const meta = metaData?.session
+
+  if (replayError) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <TopBar title="Session Replay" subtitle="Error" />
+        <div className="p-6">
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>Error loading session: {String(replayError)}</AlertDescription>
+          </Alert>
+        </div>
+      </div>
+    )
+  }
+
+  if (replayLoading || !replayData) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <TopBar title="Session Replay" subtitle="Loading…" />
+        <div className="p-6 space-y-4">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 rounded-xl" />)}
+          </div>
+          <div className="space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className={`h-${i % 2 === 0 ? '16' : '28'} rounded-xl`} />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const replay = replayData
+  const projectName = meta ? projectDisplayName(meta.project_path ?? '') : id.slice(0, 8)
+
+  // Total token counts from replay
+  let totalInput = 0, totalOutput = 0, totalCacheRead = 0, totalCacheWrite = 0
+  for (const t of replay.turns) {
+    if (t.usage) {
+      totalInput      += t.usage.input_tokens ?? 0
+      totalOutput     += t.usage.output_tokens ?? 0
+      totalCacheWrite += t.usage.cache_creation_input_tokens ?? 0
+      totalCacheRead  += t.usage.cache_read_input_tokens ?? 0
+    }
+  }
+  const totalTokens = totalInput + totalOutput + totalCacheWrite + totalCacheRead
+
+  // Build tool results map: tool_use_id -> result (from user turns)
+  const toolResults = new Map<string, { content: string; is_error: boolean }>()
+  for (const t of replay.turns) {
+    if (t.type === 'user' && t.tool_results) {
+      for (const r of t.tool_results) {
+        toolResults.set(r.tool_use_id, { content: r.content, is_error: r.is_error })
+      }
+    }
+  }
+
+  // Build compaction map: index of turn before which a compaction occurred
+  const compactionByTurnIndex = new Map(replay.compactions.map(c => [c.turn_index, c]))
+
+  let assistantTurnNum = 0
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Header */}
+      <TopBar
+        title={`${projectName} · ${replay.slug ?? id.slice(0, 8)}`}
+        subtitle={`${replay.git_branch ?? '?'} · v${replay.version ?? '?'} · ${formatCost(replay.total_cost ?? 0)}`}
+      />
+
+      {/* Stats cards — match project detail page */}
+      <div className="border-b border-border bg-muted/30 px-4 py-4 md:px-6">
+        <div
+          className={
+            3 + (meta ? 1 : 0) + (replay.compactions.length > 0 ? 1 : 0) >= 5
+              ? 'grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5'
+              : 'grid grid-cols-2 gap-4 sm:grid-cols-4'
+          }
+        >
+          <Card className="gap-0">
+            <CardHeader className="pb-2">
+              <CardDescription className="flex items-center gap-2">
+                <MessageSquare className="h-4 w-4" /> Turns
+              </CardDescription>
+              <CardTitle className="text-3xl font-bold tabular-nums">
+                {replay.turns.filter(t => t.type === 'assistant').length}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-xs text-muted-foreground">Assistant messages</p>
+            </CardContent>
+          </Card>
+
+          <Card className="gap-0">
+            <CardHeader className="pb-2">
+              <CardDescription className="flex items-center gap-2">
+                <Coins className="h-4 w-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 + cache</p>
+            </CardContent>
+          </Card>
+
+          <Card className="gap-0">
+            <CardHeader className="pb-2">
+              <CardDescription className="flex items-center gap-2">
+                <DollarSign className="h-4 w-4" /> Cost
+              </CardDescription>
+              <CardTitle className="text-3xl font-bold tabular-nums text-[#d97706]">
+                {formatCost(replay.total_cost ?? 0)}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-xs text-muted-foreground">Estimated spend</p>
+            </CardContent>
+          </Card>
+
+          {meta && (
+            <Card className="gap-0">
+              <CardHeader className="pb-2">
+                <CardDescription className="flex items-center gap-2">
+                  <Clock className="h-4 w-4" /> Duration
+                </CardDescription>
+                <CardTitle className="text-3xl font-bold tabular-nums">
+                  {formatDuration(meta.duration_minutes ?? 0)}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-xs text-muted-foreground">Session span</p>
+              </CardContent>
+            </Card>
+          )}
+
+          {replay.compactions.length > 0 && (
+            <Card className="gap-0 border-amber-500/25">
+              <CardHeader className="pb-2">
+                <CardDescription className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-amber-500" /> Compactions
+                </CardDescription>
+                <CardTitle className="text-3xl font-bold tabular-nums text-amber-500">
+                  {replay.compactions.length}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-xs text-muted-foreground">Context window events</p>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {meta && (
+          <div className="mt-4 flex flex-wrap gap-2">
+            <SessionBadges
+              has_compaction={replay.compactions.length > 0}
+              uses_task_agent={meta.uses_task_agent}
+              uses_mcp={meta.uses_mcp}
+              uses_web_search={meta.uses_web_search}
+              uses_web_fetch={meta.uses_web_fetch}
+              has_thinking={meta.has_thinking}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Two-column layout */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Conversation replay */}
+        <div className="flex-1 min-w-0 overflow-y-auto px-4 py-6 max-w-6xl">
+          {replay.turns.map((turn, i) => {
+            const compactionBefore = compactionByTurnIndex.get(i)
+
+            if (turn.type === 'user') {
+              return (
+                <UserTurnCard
+                  key={turn.uuid || i}
+                  turn={turn}
+                  turnNumber={i + 1}
+                  compactionBefore={compactionBefore}
+                  toolResults={toolResults}
+                />
+              )
+            }
+
+            assistantTurnNum++
+            return (
+              <AssistantTurnCard
+                key={turn.uuid || i}
+                turn={turn}
+                turnNumber={assistantTurnNum}
+                compactionBefore={compactionBefore}
+                toolResults={toolResults}
+              />
+            )
+          })}
+        </div>
+
+        {/* Sidebar */}
+        <div className="w-64 shrink-0 overflow-y-auto border-l border-border px-4 py-6">
+          <SessionSidebar replay={replay} meta={meta} />
+        </div>
+      </div>
+
+      {/* Token accumulation chart */}
+      <div className="border-t border-border px-4 py-4">
+        <TokenAccumulationChart turns={replay.turns} compactions={replay.compactions} />
+      </div>
+    </div>
+  )
+}

package/pulse/app/sessions/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import { SessionTable } from '@/components/sessions/session-table'
+import type { SessionWithFacet } from '@/types/claude'
+
+const fetcher = (url: string) =>
+  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
+
+export default function SessionsPage() {
+  const { data, error, isLoading } = useSWR<{ sessions: SessionWithFacet[]; total: number }>(
+    '/api/sessions',
+    fetcher,
+    { refreshInterval: 5_000 }
+  )
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar
+        title="Orca Pulse · Sessions"
+        subtitle={data ? `${data.total} total sessions` : 'loading...'}
+      />
+      <div className="p-6">
+        {error && (
+          <p className="text-[#f87171] text-sm font-mono">Error: {String(error)}</p>
+        )}
+        {isLoading && (
+          <div className="space-y-2">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="h-10 bg-muted rounded animate-pulse" />
+            ))}
+          </div>
+        )}
+        {data && <SessionTable sessions={data.sessions} />}
+      </div>
+    </div>
+  )
+}

package/pulse/app/settings/page.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import type { SkillInfo, PluginInfo } from '@/lib/claude-reader'
+
+const fetcher = (url: string) =>
+  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
+
+function formatBytes(b: number) {
+  if (b >= 1_073_741_824) return (b / 1_073_741_824).toFixed(2) + ' GB'
+  if (b >= 1_048_576) return (b / 1_048_576).toFixed(1) + ' MB'
+  if (b >= 1_024) return (b / 1_024).toFixed(1) + ' KB'
+  return b + ' B'
+}
+
+function JsonValue({ value, depth = 0 }: { value: unknown; depth?: number }) {
+  if (value === null) return <span className="text-muted-foreground">null</span>
+  if (typeof value === 'boolean')
+    return <span className="text-amber-700 dark:text-[#fbbf24]">{String(value)}</span>
+  if (typeof value === 'number')
+    return <span className="text-emerald-700 dark:text-[#6ee7b7]">{value}</span>
+  if (typeof value === 'string')
+    return <span className="text-orange-400 dark:text-[#f9a875]">&quot;{value}&quot;</span>
+  if (Array.isArray(value)) {
+    if (value.length === 0) return <span className="text-muted-foreground">[]</span>
+    return (
+      <span>
+        <span className="text-muted-foreground">[</span>
+        <div className="pl-4">
+          {value.map((v, i) => (
+            <div key={i}>
+              <JsonValue value={v} depth={depth + 1} />
+              {i < value.length - 1 && <span className="text-muted-foreground/60">,</span>}
+            </div>
+          ))}
+        </div>
+        <span className="text-muted-foreground">]</span>
+      </span>
+    )
+  }
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>)
+    if (entries.length === 0) return <span className="text-muted-foreground">{'{}'}</span>
+    return (
+      <span>
+        <span className="text-muted-foreground">{'{'}</span>
+        <div className="pl-4">
+          {entries.map(([k, v], i) => (
+            <div key={k}>
+              <span className="text-muted-foreground">&quot;</span>
+              <span className="text-blue-700 dark:text-[#93c5fd]">{k}</span>
+              <span className="text-muted-foreground">&quot;</span>
+              <span className="text-muted-foreground/60">: </span>
+              <JsonValue value={v} depth={depth + 1} />
+              {i < entries.length - 1 && <span className="text-muted-foreground/60">,</span>}
+            </div>
+          ))}
+        </div>
+        <span className="text-muted-foreground">{'}'}</span>
+      </span>
+    )
+  }
+  return <span className="text-foreground">{String(value)}</span>
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="border border-border rounded bg-card p-4">
+      <h2 className="text-[13px] font-bold text-muted-foreground uppercase tracking-widest mb-4">{title}</h2>
+      {children}
+    </div>
+  )
+}
+
+export default function SettingsPage() {
+  const { data, error, isLoading } = useSWR<{
+    settings: Record<string, unknown>
+    storageBytes: number
+    skills: SkillInfo[]
+    plugins: PluginInfo[]
+  }>('/api/settings', fetcher, { refreshInterval: 30_000 })
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="orca-pulse · settings" subtitle="~/.orca/settings.json" />
+      <div className="p-4 md:p-6 space-y-6">
+        {error && <p className="text-[#f87171] text-sm font-mono">Error: {String(error)}</p>}
+        {isLoading && (
+          <div className="space-y-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="h-32 bg-muted rounded animate-pulse" />
+            ))}
+          </div>
+        )}
+        {data && (
+          <>
+            <Section title="Storage">
+              <div className="flex items-center gap-3">
+                <span className="text-primary text-2xl font-mono font-bold">
+                  {formatBytes(data.storageBytes)}
+                </span>
+                <span className="text-muted-foreground text-sm font-mono">used by ~/.orca/</span>
+              </div>
+            </Section>
+
+            <Section title="Settings">
+              {Object.keys(data.settings).length === 0 ? (
+                <p className="text-muted-foreground/60 text-sm font-mono">No settings found in ~/.orca/settings.json</p>
+              ) : (
+                <div className="font-mono text-sm leading-relaxed overflow-x-auto">
+                  <JsonValue value={data.settings} />
+                </div>
+              )}
+            </Section>
+
+            {data.settings.env && (
+              <Section title="Environment Variables">
+                <div className="font-mono text-sm leading-relaxed overflow-x-auto">
+                  <JsonValue value={data.settings.env} />
+                </div>
+              </Section>
+            )}
+
+            {data.settings.mcpServers && (
+              <Section title="MCP Servers">
+                <div className="space-y-3">
+                  {Object.entries(data.settings.mcpServers as Record<string, unknown>).map(([name, cfg]) => (
+                    <div key={name} className="border border-border rounded p-3">
+                      <p className="text-primary font-mono text-sm font-bold mb-2">{name}</p>
+                      <div className="font-mono text-xs text-muted-foreground overflow-x-auto">
+                        <JsonValue value={cfg} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Section>
+            )}
+
+            <Section title={`Skills (${data.skills.length})`}>
+              {data.skills.length === 0 ? (
+                <p className="text-muted-foreground/60 text-sm font-mono">No skills found in ~/.orca/skills/</p>
+              ) : (
+                <div className="grid gap-2">
+                  {data.skills.map(skill => (
+                    <div key={skill.name} className="border border-border rounded p-3 flex items-start gap-3">
+                      <span className="shrink-0 w-2 h-2 mt-1.5 rounded-full bg-primary" />
+                      <div className="min-w-0">
+                        <p className="text-primary font-mono text-sm font-bold">{skill.name}</p>
+                        {skill.description && (
+                          <p className="text-foreground text-xs mt-0.5">{skill.description}</p>
+                        )}
+                        {skill.triggers && (
+                          <p className="text-muted-foreground text-xs mt-1 leading-relaxed line-clamp-2">{skill.triggers}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Section>
+
+            {data.plugins.length > 0 && (
+              <Section title={`Plugins (${data.plugins.length})`}>
+                <div className="grid gap-2">
+                  {data.plugins.map((plugin, i) => (
+                    <div key={i} className="border border-border rounded p-3 flex items-center justify-between gap-4">
+                      <div className="min-w-0">
+                        <p className="text-primary font-mono text-sm font-bold">{plugin.id}</p>
+                        <p className="text-muted-foreground text-xs mt-0.5">scope: {plugin.scope}</p>
+                      </div>
+                      <div className="text-right shrink-0">
+                        <span className="text-emerald-700 dark:text-[#6ee7b7] font-mono text-xs">v{plugin.version}</span>
+                        <p className="text-muted-foreground text-xs mt-0.5">
+                          {new Date(plugin.installedAt).toLocaleDateString()}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Section>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/pulse/app/todos/page.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import { useState } from 'react'
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Search, AlertTriangle, Circle, CircleDot, CircleCheck } 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 TodoItem {
+  id?: string
+  content?: string
+  status?: string
+  priority?: string
+  [key: string]: unknown
+}
+
+interface TodoFile {
+  name: string
+  data: unknown
+  mtime: string
+}
+
+type FilterType = 'all' | 'pending' | 'in_progress' | 'completed'
+
+function parseTodos(data: unknown): TodoItem[] {
+  if (Array.isArray(data)) return data as TodoItem[]
+  if (data && typeof data === 'object' && 'todos' in data)
+    return parseTodos((data as { todos: unknown }).todos)
+  return []
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function normalizeStatus(s?: string): string {
+  return s ?? 'pending'
+}
+
+const PRIORITY_STYLES: Record<string, string> = {
+  high:   'bg-red-500/10 text-red-400 border-red-500/30',
+  medium: 'bg-amber-500/10 text-amber-400 border-amber-500/30',
+  low:    'bg-muted text-muted-foreground border-border',
+}
+
+const STATUS_META: Record<string, { icon: React.ElementType; color: string; label: string }> = {
+  pending:     { icon: Circle,      color: 'text-muted-foreground',  label: 'Pending'     },
+  in_progress: { icon: CircleDot,   color: 'text-amber-400',         label: 'In Progress' },
+  completed:   { icon: CircleCheck, color: 'text-emerald-400',        label: 'Completed'  },
+}
+
+function TodoRow({ item, file }: { item: TodoItem; file: TodoFile }) {
+  const status = normalizeStatus(item.status)
+  const meta = STATUS_META[status] ?? STATUS_META.pending
+  const Icon = meta.icon
+  const isCompleted = status === 'completed'
+
+  return (
+    <Card className="py-0">
+      <CardContent className="px-4 py-3.5 flex items-start gap-3">
+        <Icon className={`w-4 h-4 mt-0.5 shrink-0 ${meta.color}`} />
+        <div className="flex-1 min-w-0">
+          <p className={`text-sm leading-relaxed ${isCompleted ? 'line-through text-muted-foreground/50' : 'text-foreground'}`}>
+            {String(item.content ?? JSON.stringify(item))}
+          </p>
+          <div className="flex flex-wrap items-center gap-2 mt-2">
+            <Badge
+              variant="outline"
+              className={`text-[10px] font-mono uppercase tracking-wider ${meta.color}`}
+            >
+              {meta.label}
+            </Badge>
+            {item.priority && (
+              <Badge
+                variant="outline"
+                className={`text-[10px] font-mono uppercase tracking-wider ${PRIORITY_STYLES[item.priority] ?? PRIORITY_STYLES.low}`}
+              >
+                {item.priority}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-[10px] font-mono">
+              {file.name}
+            </Badge>
+            <span className="text-[10px] text-muted-foreground/60">
+              {formatDate(file.mtime)}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function TodosPage() {
+  const { data, error, isLoading } = useSWR<{ todos: TodoFile[] }>(
+    '/api/todos', fetcher, { refreshInterval: 10_000 }
+  )
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<FilterType>('all')
+
+  const todos = data?.todos ?? []
+  const allItems: Array<{ file: TodoFile; item: TodoItem }> = todos.flatMap(file =>
+    parseTodos(file.data).map(item => ({ file, item }))
+  )
+
+  const counts = {
+    all:         allItems.length,
+    pending:     allItems.filter(x => normalizeStatus(x.item.status) === 'pending').length,
+    in_progress: allItems.filter(x => normalizeStatus(x.item.status) === 'in_progress').length,
+    completed:   allItems.filter(x => normalizeStatus(x.item.status) === 'completed').length,
+  }
+
+  const filtered = allItems.filter(({ item }) => {
+    if (filter !== 'all' && normalizeStatus(item.status) !== filter) return false
+    if (search && !String(item.content ?? '').toLowerCase().includes(search.toLowerCase())) return false
+    return true
+  })
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="Todos" subtitle="~/.orca/todos/" />
+      <div className="p-4 md:p-6 space-y-5">
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>Error loading data: {String(error)}</AlertDescription>
+          </Alert>
+        )}
+
+        {isLoading && (
+          <div className="space-y-3">
+            <Skeleton className="h-10 w-full rounded-lg" />
+            {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-16 rounded-xl" />)}
+          </div>
+        )}
+
+        {data && (
+          <>
+            {/* Filter tabs */}
+            <Tabs value={filter} onValueChange={v => setFilter(v as FilterType)}>
+              <TabsList className="w-full sm:w-auto">
+                <TabsTrigger value="all" className="gap-2">
+                  All
+                  <Badge variant="secondary" className="text-xs tabular-nums">{counts.all}</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="pending" className="gap-2">
+                  <Circle className="w-3.5 h-3.5" />
+                  Pending
+                  <Badge variant="secondary" className="text-xs tabular-nums">{counts.pending}</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="in_progress" className="gap-2">
+                  <CircleDot className="w-3.5 h-3.5 text-amber-400" />
+                  In Progress
+                  <Badge variant="secondary" className="text-xs tabular-nums">{counts.in_progress}</Badge>
+                </TabsTrigger>
+                <TabsTrigger value="completed" className="gap-2">
+                  <CircleCheck className="w-3.5 h-3.5 text-emerald-400" />
+                  Done
+                  <Badge variant="secondary" className="text-xs tabular-nums">{counts.completed}</Badge>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="Search todos…"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            {(search || filter !== 'all') && (
+              <p className="text-xs text-muted-foreground">
+                Showing <span className="text-amber-400 font-medium">{filtered.length}</span> of {allItems.length} todos
+              </p>
+            )}
+
+            {filtered.length === 0 ? (
+              <div className="text-center py-16">
+                <CircleCheck className="w-8 h-8 mx-auto mb-3 text-muted-foreground/40" />
+                <p className="text-muted-foreground text-sm">
+                  {allItems.length === 0
+                    ? 'No todos found in ~/.orca/todos/'
+                    : 'No todos match your filter.'}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filtered.map(({ file, item }, i) => (
+                  <TodoRow key={i} item={item} file={file} />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}