@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/app/globals.css

@@ -0,0 +1,263 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
+    to { height: 0; }
+  }
+}
+
+@custom-variant data-open {
+  &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) { @slot; }
+}
+@custom-variant data-closed {
+  &:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) { @slot; }
+}
+@custom-variant data-checked {
+  &:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) { @slot; }
+}
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]), &:where([data-unchecked]:not([data-unchecked="false"])) { @slot; }
+}
+@custom-variant data-selected {
+  &:where([data-selected="true"]) { @slot; }
+}
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { @slot; }
+}
+@custom-variant data-active {
+  &:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) { @slot; }
+}
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) { @slot; }
+}
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) { @slot; }
+}
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-mono);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Orca accent colors */
+  --color-orca-cyan: #06b6d4;
+  --color-orca-cyan-light: #22d3ee;
+  --color-terminal-cyan: #06b6d4;
+  --color-terminal-green: #34d399;
+  --color-terminal-amber: #f59e0b;
+  --color-terminal-blue: var(--viz-sky, #1d4ed8);
+  --color-terminal-purple: #a78bfa;
+  --color-terminal-red: #f87171;
+  --color-terminal-dim: #9ca3af;
+  --color-terminal-surface: #0f1117;
+}
+
+/* ─── Light theme (default) — higher contrast, clearer surfaces ─────────── */
+:root {
+  --radius: 0.375rem;
+  /* Zinc-based neutrals: page vs cards vs chrome read as distinct layers */
+  --background: #f4f4f5;
+  --foreground: #18181b;
+  --card: #ffffff;
+  --card-foreground: #18181b;
+  --popover: #ffffff;
+  --popover-foreground: #18181b;
+  --primary: #0891b2;
+  --primary-foreground: #ffffff;
+  --secondary: #e4e4e7;
+  --secondary-foreground: #27272a;
+  --muted: #ececee;
+  --muted-foreground: #52525b;
+  --accent: #e4e4e7;
+  --accent-foreground: #18181b;
+  --destructive: #dc2626;
+  --border: #d4d4d8;
+  /* Input border token: visible edge on white fields */
+  --input: #d4d4d8;
+  --ring: #0891b2;
+  --viz-sky: #1d4ed8;
+  /* Tool / category colors (light) — saturated, distinct; SVG uses solid fill (no color-mix) */
+  --viz-tool-read: #1d4ed8;
+  --viz-tool-write: #4338ca;
+  --viz-tool-edit: #0891b2;
+  --viz-tool-grep: #db2777;
+  --viz-tool-glob: #0891b2;
+  --viz-tool-file-io: #2563eb;
+  --viz-tool-shell: #06b6d4;
+  --viz-tool-agent: #7c3aed;
+  --viz-tool-web: #15803d;
+  --viz-tool-planning: #ca8a04;
+  --viz-tool-todo: #e11d48;
+  --viz-tool-skill: #0e7490;
+  --viz-tool-mcp: #059669;
+  --viz-tool-other: #64748b;
+  --chart-1: #0891b2;
+  --chart-2: #059669;
+  --chart-3: var(--viz-sky);
+  --chart-4: #7c3aed;
+  --chart-5: #06b6d4;
+  --sidebar: #fafafa;
+  --sidebar-foreground: #3f3f46;
+  --sidebar-primary: #0891b2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e4e4e7;
+  --sidebar-accent-foreground: #18181b;
+  --sidebar-border: #d4d4d8;
+  --sidebar-ring: #0891b2;
+}
+
+/* ─── Dark theme ─────────────────────────────────────────────────────────── */
+.dark {
+  --background: #0f1117;
+  --foreground: #e8eaed;
+  --card: #171921;
+  --card-foreground: #e8eaed;
+  --popover: #171921;
+  --popover-foreground: #e8eaed;
+  --primary: #06b6d4;
+  --primary-foreground: #0f1117;
+  --secondary: #1e212b;
+  --secondary-foreground: #d1d5db;
+  --muted: #1e212b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e212b;
+  --accent-foreground: #e8eaed;
+  --destructive: #f87171;
+  --border: #262a36;
+  --input: #1e212b;
+  --ring: #06b6d4;
+  --viz-sky: #60a5fa;
+  --viz-tool-read: #60a5fa;
+  --viz-tool-write: #a78bfa;
+  --viz-tool-edit: #67e8f9;
+  --viz-tool-grep: #f472b6;
+  --viz-tool-glob: #22d3ee;
+  --viz-tool-file-io: #818cf8;
+  --viz-tool-shell: #22d3ee;
+  --viz-tool-agent: #c4b5fd;
+  --viz-tool-web: #6ee7b7;
+  --viz-tool-planning: #fcd34d;
+  --viz-tool-todo: #fb7185;
+  --viz-tool-skill: #5eead4;
+  --viz-tool-mcp: #86efac;
+  --viz-tool-other: #94a3b8;
+  --chart-1: #06b6d4;
+  --chart-2: #34d399;
+  --chart-3: var(--viz-sky);
+  --chart-4: #a78bfa;
+  --chart-5: #22d3ee;
+  --sidebar: #0b0d12;
+  --sidebar-foreground: #d1d5db;
+  --sidebar-primary: #06b6d4;
+  --sidebar-primary-foreground: #0f1117;
+  --sidebar-accent: #1a1d26;
+  --sidebar-accent-foreground: #e8eaed;
+  --sidebar-border: #1a1d26;
+  --sidebar-ring: #06b6d4;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-geist-mono), "JetBrains Mono", "Fira Code", "Consolas", monospace;
+    font-size: 15px;
+  }
+}
+
+/* ─── Light mode: subtle depth on cards (matches cyan primary) ──────────── */
+:root:not(.dark) [data-slot="card"] {
+  box-shadow:
+    0 1px 2px 0 rgba(24, 24, 27, 0.04),
+    0 4px 16px -2px rgba(6, 182, 212, 0.08),
+    0 0 0 1px rgba(24, 24, 27, 0.05);
+}
+
+/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+/* ─── Terminal glow utilities ────────────────────────────────────────────── */
+.glow-cyan {
+  text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
+}
+.glow-green {
+  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
+}
+
+/* ─── Recharts overrides ─────────────────────────────────────────────────── */
+.recharts-tooltip-wrapper .recharts-default-tooltip {
+  background: var(--card) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 6px !important;
+}
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+  stroke: var(--border) !important;
+}
+.recharts-text {
+  fill: var(--muted-foreground) !important;
+  font-family: var(--font-geist-mono), monospace !important;
+  font-size: 13px !important;
+}

package/pulse/app/help/page.tsx

@@ -0,0 +1,142 @@
+import { TopBar } from '@/components/layout/top-bar'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+const CLI_COMMANDS = [
+  { cmd: 'orca', desc: 'Start interactive REPL' },
+  { cmd: 'orca "instruction"', desc: 'Run a single instruction and exit' },
+  { cmd: 'orca dashboard', desc: 'Open Orca Pulse analytics dashboard' },
+  { cmd: 'orca sessions', desc: 'List recent local sessions' },
+  { cmd: 'orca stats', desc: 'Show aggregate local session stats' },
+  { cmd: 'orca history', desc: 'Show recent prompt history' },
+  { cmd: 'orca login', desc: 'Sign in via browser' },
+  { cmd: 'orca version', desc: 'Show version' },
+]
+
+const REPL_COMMANDS = [
+  { cmd: '/help', desc: 'Show available commands' },
+  { cmd: '/stats', desc: 'Session metrics — tokens, cost, tools' },
+  { cmd: '/cost', desc: 'Detailed cost breakdown by model' },
+  { cmd: '/history', desc: 'Conversation history' },
+  { cmd: '/clear', desc: 'Clear conversation history' },
+  { cmd: '/safety', desc: 'Show safety guardrail status' },
+  { cmd: '/revoke', desc: 'Revoke auto-approvals' },
+  { cmd: '/explore <query>', desc: 'Spawn read-only codebase explorer' },
+  { cmd: '/review <query>', desc: 'Spawn code review agent' },
+  { cmd: '/architect <query>', desc: 'Spawn architecture planning agent' },
+  { cmd: '/exit', desc: 'Exit the REPL' },
+]
+
+const KEYBOARD = [
+  { key: 'Esc', desc: 'Cancel current execution' },
+  { key: 'Space', desc: 'Pause / resume execution' },
+  { key: 'Ctrl+C', desc: 'Exit' },
+  { key: 'Tab', desc: 'Autocomplete slash commands' },
+  { key: 'Up/Down', desc: 'Navigate input history' },
+]
+
+const ENV_VARS = [
+  { name: 'TARANG_ENV', desc: 'Set backend environment (local, development, production)' },
+  { name: 'ANTHROPIC_API_KEY', desc: 'Direct Anthropic API key for local mode' },
+  { name: 'OPENROUTER_API_KEY', desc: 'OpenRouter API key' },
+  { name: 'ORCA_CONFIG_DIR', desc: 'Override config directory (default: ~/.orca)' },
+  { name: 'TARANG_BACKEND_URL', desc: 'Override backend URL explicitly' },
+]
+
+const FEATURES = [
+  { title: 'Multi-Agent Orchestration', desc: 'Primary agent spawns explore, plan, and review sub-agents for complex tasks.' },
+  { title: 'Smart Tool Routing', desc: 'Write operations routed to CLI for local execution. Read tools run server-side.' },
+  { title: 'Safety Guardrails', desc: 'Destructive commands (rm, delete) always require approval. Path validation on all file operations.' },
+  { title: 'Local JSONL Analytics', desc: 'Every session is recorded to ~/.orca/ for offline analytics via Orca Pulse.' },
+  { title: 'Conversation History', desc: 'Multi-turn conversations within a REPL session. Context preserved across turns.' },
+  { title: 'BM25 Code Index', desc: 'Project files indexed on startup for fast semantic code search.' },
+]
+
+function CommandTable({ commands }: { commands: { cmd: string; desc: string }[] }) {
+  return (
+    <div className="space-y-1">
+      {commands.map(({ cmd, desc }) => (
+        <div key={cmd} className="flex items-start gap-4 py-1.5">
+          <code className="text-sm font-mono text-primary whitespace-nowrap shrink-0 min-w-[200px]">{cmd}</code>
+          <span className="text-sm text-muted-foreground">{desc}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function HelpPage() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="Help" subtitle="Orca CLI commands, shortcuts, and configuration" />
+      <div className="px-6 py-6 space-y-6">
+
+        <Card>
+          <CardHeader>
+            <CardTitle>CLI Commands</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CommandTable commands={CLI_COMMANDS} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>REPL Commands</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CommandTable commands={REPL_COMMANDS} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Keyboard Shortcuts</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1">
+              {KEYBOARD.map(({ key, desc }) => (
+                <div key={key} className="flex items-start gap-4 py-1.5">
+                  <kbd className="text-sm font-mono bg-muted px-2 py-0.5 rounded border border-border whitespace-nowrap shrink-0 min-w-[100px] text-center">{key}</kbd>
+                  <span className="text-sm text-muted-foreground">{desc}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Environment Variables</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1">
+              {ENV_VARS.map(({ name, desc }) => (
+                <div key={name} className="flex items-start gap-4 py-1.5">
+                  <code className="text-sm font-mono text-primary whitespace-nowrap shrink-0 min-w-[200px]">{name}</code>
+                  <span className="text-sm text-muted-foreground">{desc}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Features</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {FEATURES.map(({ title, desc }) => (
+                <div key={title} className="space-y-1">
+                  <h4 className="text-sm font-semibold">{title}</h4>
+                  <p className="text-sm text-muted-foreground">{desc}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+      </div>
+    </div>
+  )
+}

package/pulse/app/history/page.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import type { HistoryEntry } from '@/types/claude'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Search, AlertTriangle, ChevronLeft, ChevronRight } from 'lucide-react'
+
+const fetcher = (url: string) =>
+  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
+
+function formatTime(ts: number) {
+  return new Date(ts).toLocaleString('en-US', {
+    month: 'short', day: 'numeric', year: 'numeric',
+    hour: 'numeric', minute: '2-digit',
+  })
+}
+
+function projectName(p: string) {
+  const parts = p.replace(/\\/g, '/').split('/')
+  return parts[parts.length - 1] || p
+}
+
+const PAGE_SIZE = 50
+
+export default function HistoryPage() {
+  const { data, error, isLoading } = useSWR<{ history: HistoryEntry[] }>(
+    '/api/history?limit=2000', fetcher, { refreshInterval: 30_000 }
+  )
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(1)
+
+  const entries = useMemo(() => {
+    const all = [...(data?.history ?? [])].reverse()
+    if (!search) return all
+    const q = search.toLowerCase()
+    return all.filter(e =>
+      e.display?.toLowerCase().includes(q) ||
+      e.project?.toLowerCase().includes(q)
+    )
+  }, [data, search])
+
+  const totalPages = Math.ceil(entries.length / PAGE_SIZE)
+  const pageEntries = entries.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+
+  function handleSearch(v: string) {
+    setSearch(v)
+    setPage(1)
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="History" subtitle="~/.orca/history.jsonl" />
+      <div className="p-4 md:p-6 space-y-4">
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>Error loading data: {String(error)}</AlertDescription>
+          </Alert>
+        )}
+
+        {isLoading && (
+          <div className="space-y-2">
+            {Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-14 rounded-lg" />)}
+          </div>
+        )}
+
+        {data && (
+          <>
+            {/* Search + count */}
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+              <div className="relative flex-1 w-full">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search commands…"
+                  value={search}
+                  onChange={e => handleSearch(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Badge variant="outline" className="whitespace-nowrap text-sm px-3 py-1.5">
+                {entries.length.toLocaleString()} entries
+              </Badge>
+            </div>
+
+            {pageEntries.length === 0 ? (
+              <div className="text-center py-16 text-muted-foreground text-sm">
+                {(data.history?.length ?? 0) === 0
+                  ? 'No history found in ~/.orca/history.jsonl'
+                  : 'No entries match your search.'}
+              </div>
+            ) : (
+              <>
+                <div className="space-y-1">
+                  {pageEntries.map((entry, i) => (
+                    <div
+                      key={i}
+                      className="border border-border rounded-lg bg-card px-4 py-3 hover:border-primary/30 transition-colors"
+                    >
+                      <p className="text-sm font-mono text-foreground leading-relaxed break-words">
+                        {entry.display || '—'}
+                      </p>
+                      <div className="flex flex-wrap items-center gap-2 mt-1.5">
+                        {entry.timestamp && (
+                          <span className="text-xs text-muted-foreground/60">
+                            {formatTime(entry.timestamp)}
+                          </span>
+                        )}
+                        {entry.project && (
+                          <Badge variant="secondary" className="text-xs font-mono">
+                            {projectName(entry.project)}
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {totalPages > 1 && (
+                  <div className="flex items-center justify-center gap-2 pt-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage(p => Math.max(1, p - 1))}
+                      disabled={page === 1}
+                    >
+                      <ChevronLeft className="w-4 h-4" />
+                      Prev
+                    </Button>
+                    <span className="text-sm text-muted-foreground tabular-nums">
+                      {page} / {totalPages}
+                    </span>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                      disabled={page === totalPages}
+                    >
+                      Next
+                      <ChevronRight className="w-4 h-4" />
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/pulse/app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from 'next'
+import { Geist_Mono, Press_Start_2P } from 'next/font/google'
+import './globals.css'
+import { Sidebar } from '@/components/layout/sidebar'
+import { BottomNav } from '@/components/layout/bottom-nav'
+import { ThemeProvider } from '@/components/theme-provider'
+import { KeyboardNavProvider } from '@/components/keyboard-nav-provider'
+import { SidebarProvider } from '@/components/layout/sidebar-context'
+import { ClientLayout } from '@/components/layout/client-layout'
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
+const pressStart2P = Press_Start_2P({
+  variable: '--font-press-start',
+  weight: '400',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'Orca Pulse',
+  description: 'Real-time analytics for your Orca AI agent sessions',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body suppressHydrationWarning className={`${geistMono.variable} ${pressStart2P.variable} antialiased`}>
+        <ThemeProvider>
+          <SidebarProvider>
+            <div className="flex min-h-screen">
+              <Sidebar />
+              <ClientLayout>{children}</ClientLayout>
+            </div>
+            <BottomNav />
+            <KeyboardNavProvider />
+          </SidebarProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}