@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/components/sessions/replay/assistant-markdown.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  content: string
+  className?: string
+}
+
+/**
+ * Renders Claude assistant text as GitHub-flavored markdown with app-consistent styling.
+ */
+export function AssistantMarkdown({ content, className }: Props) {
+  return (
+    <div className={cn('assistant-md text-sm text-foreground/90', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => (
+            <h1 className="mt-4 mb-2 border-b border-border pb-1 text-lg font-bold first:mt-0">{children}</h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="mt-4 mb-2 text-base font-semibold first:mt-0">{children}</h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="mt-3 mb-1.5 text-sm font-semibold first:mt-0">{children}</h3>
+          ),
+          h4: ({ children }) => (
+            <h4 className="mt-2 mb-1 text-sm font-medium first:mt-0">{children}</h4>
+          ),
+          p: ({ children }) => <p className="my-2 leading-relaxed first:mt-0 last:mb-0">{children}</p>,
+          ul: ({ children }) => (
+            <ul className="my-2 list-disc space-y-1 pl-5 marker:text-muted-foreground">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="my-2 list-decimal space-y-1 pl-5 marker:text-muted-foreground">{children}</ol>
+          ),
+          li: ({ children }) => <li className="leading-relaxed [&>p]:my-0">{children}</li>,
+          blockquote: ({ children }) => (
+            <blockquote className="my-2 border-l-2 border-primary/40 pl-3 text-muted-foreground">{children}</blockquote>
+          ),
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-primary underline decoration-primary/40 underline-offset-2 hover:decoration-primary"
+            >
+              {children}
+            </a>
+          ),
+          strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
+          em: ({ children }) => <em className="italic text-muted-foreground">{children}</em>,
+          hr: () => <hr className="my-4 border-border" />,
+          table: ({ children }) => (
+            <div className="my-3 overflow-x-auto rounded-md border border-border">
+              <table className="w-full min-w-[16rem] border-collapse text-[13px]">{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => <thead className="bg-muted/50">{children}</thead>,
+          th: ({ children }) => (
+            <th className="border-b border-border px-2 py-1.5 text-left font-semibold">{children}</th>
+          ),
+          td: ({ children }) => <td className="border-b border-border/80 px-2 py-1.5 align-top">{children}</td>,
+          tr: ({ children }) => <tr className="border-border/60">{children}</tr>,
+          code: ({ className, children }) => {
+            const isBlock = /language-/.test(className ?? '')
+            if (isBlock) {
+              return (
+                <code className={cn('font-mono text-[13px] leading-relaxed text-foreground', className)}>
+                  {children}
+                </code>
+              )
+            }
+            return (
+              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[12px] text-foreground before:content-none after:content-none">
+                {children}
+              </code>
+            )
+          },
+          pre: ({ children }) => (
+            <pre className="my-3 overflow-x-auto rounded-lg border border-border bg-muted/60 p-3 font-mono text-[13px] leading-relaxed [&>code]:bg-transparent [&>code]:p-0">
+              {children}
+            </pre>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/pulse/components/sessions/replay/compaction-card.tsx

@@ -0,0 +1,25 @@
+import type { CompactionEvent } from '@/types/claude'
+import { formatTokens } from '@/lib/decode'
+
+export function CompactionCard({ event }: { event: CompactionEvent }) {
+  return (
+    <div className="my-3 border border-amber-500/40 bg-amber-500/10 rounded-lg px-4 py-3">
+      <div className="flex items-center gap-2 text-amber-400 text-sm font-bold mb-1">
+        <span>⚡</span>
+        <span>CONTEXT COMPACTION</span>
+        <span className="ml-auto text-amber-500/70 font-normal">
+          {new Date(event.timestamp).toLocaleTimeString()}
+        </span>
+      </div>
+      <div className="flex gap-4 text-sm text-amber-300/80">
+        <span>trigger: <span className="text-amber-300 font-medium">{event.trigger}</span></span>
+        <span>context before: <span className="text-amber-300 font-medium">{formatTokens(event.pre_tokens)} tokens</span></span>
+      </div>
+      {event.summary && (
+        <p className="mt-1.5 text-sm text-amber-200/60 italic line-clamp-2">
+          &ldquo;{event.summary}&rdquo;
+        </p>
+      )}
+    </div>
+  )
+}

package/pulse/components/sessions/replay/session-sidebar.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import { formatCost, formatTokens, formatDuration, projectDisplayName } from '@/lib/decode'
+import type { ReplayData, SessionMeta } from '@/types/claude'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { GitBranch, Clock, FileCode2, Zap, Cpu } from 'lucide-react'
+
+interface Props {
+  replay: ReplayData
+  meta?: SessionMeta
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+      {children}
+    </h3>
+  )
+}
+
+export function SessionSidebar({ replay, meta }: Props) {
+  let totalInput = 0,
+    totalOutput = 0,
+    totalCacheWrite = 0,
+    totalCacheRead = 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
+  const pct = (n: number) => (totalTokens > 0 ? (n / totalTokens) * 100 : 0)
+
+  const toolCounts = new Map<string, number>()
+  for (const t of replay.turns) {
+    for (const tc of t.tool_calls ?? []) {
+      toolCounts.set(tc.name, (toolCounts.get(tc.name) ?? 0) + 1)
+    }
+  }
+  const topTools = [...toolCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+  const maxToolCount = topTools[0]?.[1] ?? 1
+
+  const assistantTurns = replay.turns.filter(t => t.type === 'assistant')
+
+  const tokenBreakdown = [
+    { label: 'Input', val: totalInput, color: 'var(--viz-sky)', bg: 'bg-blue-700 dark:bg-blue-400' },
+    { label: 'Output', val: totalOutput, color: '#d97706', bg: 'bg-amber-500' },
+    { label: 'Cache Write', val: totalCacheWrite, color: '#a78bfa', bg: 'bg-violet-400' },
+    { label: 'Cache Read', val: totalCacheRead, color: '#34d399', bg: 'bg-emerald-400' },
+  ]
+
+  const showTools = topTools.length > 0
+  const showCompactions = replay.compactions.length > 0
+
+  return (
+    <div className="text-sm">
+      {/* Token breakdown */}
+      <section>
+        <SectionTitle>
+          <span className="inline-flex items-center gap-1.5">
+            <Cpu className="h-3.5 w-3.5" /> Token breakdown
+          </span>
+        </SectionTitle>
+        <div className="space-y-3">
+          {tokenBreakdown.map(({ label, val, color, bg }) => (
+            <div key={label} className="space-y-1">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="font-mono text-xs font-semibold" style={{ color }}>
+                  {formatTokens(val)}
+                </span>
+              </div>
+              <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  className={`h-full rounded-full ${bg} opacity-70 transition-all`}
+                  style={{ width: `${Math.max(2, pct(val))}%` }}
+                />
+              </div>
+            </div>
+          ))}
+          <div className="flex items-center justify-between border-t border-border/50 pt-3">
+            <span className="text-xs font-semibold text-muted-foreground">Total</span>
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-xs font-bold text-foreground">{formatTokens(totalTokens)}</span>
+              <span className="font-mono text-xs font-bold text-[#d97706]">{formatCost(replay.total_cost)}</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {showTools && (
+        <>
+          <Separator className="my-5" />
+          <section>
+            <SectionTitle>Tools used</SectionTitle>
+            <div className="space-y-2">
+              {topTools.map(([name, count]) => {
+                const shortName = name.startsWith('mcp__') ? name.split('__').slice(1).join(' · ') : name
+                const width = Math.round((count / maxToolCount) * 100)
+                return (
+                  <div key={name} className="flex items-center gap-2">
+                    <span className="w-24 truncate text-xs text-muted-foreground" title={name}>
+                      {shortName}
+                    </span>
+                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+                      <div className="h-full rounded-full bg-[#d97706]/60" style={{ width: `${width}%` }} />
+                    </div>
+                    <span className="w-5 text-right text-xs tabular-nums text-muted-foreground/60">{count}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </section>
+        </>
+      )}
+
+      {showCompactions && (
+        <>
+          <Separator className="my-5" />
+          <section>
+            <SectionTitle>
+              <span className="inline-flex items-center gap-1.5">
+                <Zap className="h-3.5 w-3.5 text-amber-500" /> Compactions
+              </span>
+            </SectionTitle>
+            <div className="space-y-2.5">
+              {replay.compactions.map(c => (
+                <div
+                  key={c.uuid}
+                  className="flex items-start gap-2 rounded-lg border border-amber-500/15 bg-amber-500/5 px-2.5 py-2"
+                >
+                  <Zap className="mt-0.5 h-3 w-3 shrink-0 text-amber-400" />
+                  <div className="space-y-0.5">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-xs font-medium text-amber-300/80">Turn {c.turn_index}</span>
+                      <Badge
+                        variant="outline"
+                        className="h-4 border-amber-500/30 px-1 py-0 text-[11px] text-amber-400/70"
+                      >
+                        {c.trigger}
+                      </Badge>
+                    </div>
+                    <span className="text-xs text-muted-foreground/60">{formatTokens(c.pre_tokens)} tok before</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </>
+      )}
+
+      <Separator className="my-5" />
+
+      <section>
+        <SectionTitle>Session info</SectionTitle>
+        <div className="space-y-2">
+          {replay.slug && (
+            <div className="flex items-start gap-2">
+              <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Slug</span>
+              <span className="break-all text-xs text-foreground/80">{replay.slug}</span>
+            </div>
+          )}
+          {replay.version && (
+            <div className="flex items-center gap-2">
+              <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Version</span>
+              <Badge variant="outline" className="h-4 px-1.5 py-0 font-mono text-[11px]">
+                v{replay.version}
+              </Badge>
+            </div>
+          )}
+          {replay.git_branch && (
+            <div className="flex items-center gap-2">
+              <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Branch</span>
+              <div className="flex min-w-0 items-center gap-1">
+                <GitBranch className="h-3 w-3 shrink-0 text-muted-foreground/40" />
+                <span className="truncate font-mono text-xs text-foreground/70">{replay.git_branch}</span>
+              </div>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Turns</span>
+            <span className="text-xs font-semibold text-foreground/80">{assistantTurns.length}</span>
+          </div>
+          {meta && (
+            <>
+              {meta.duration_minutes > 0 && (
+                <div className="flex items-center gap-2">
+                  <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Duration</span>
+                  <span className="flex items-center gap-1 text-xs text-foreground/80">
+                    <Clock className="h-3 w-3 text-muted-foreground/40" />
+                    {formatDuration(meta.duration_minutes)}
+                  </span>
+                </div>
+              )}
+              {meta.project_path && (
+                <div className="flex items-start gap-2">
+                  <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Project</span>
+                  <span className="truncate text-xs text-foreground/70">{projectDisplayName(meta.project_path)}</span>
+                </div>
+              )}
+              {(meta.lines_added ?? 0) > 0 && (
+                <div className="flex items-center gap-2">
+                  <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Lines</span>
+                  <div className="flex items-center gap-1.5">
+                    <span className="font-mono text-xs text-emerald-400">+{meta.lines_added}</span>
+                    <span className="font-mono text-xs text-red-400">-{meta.lines_removed}</span>
+                  </div>
+                </div>
+              )}
+              {meta.files_modified > 0 && (
+                <div className="flex items-center gap-2">
+                  <span className="w-16 shrink-0 text-xs text-muted-foreground/50">Files</span>
+                  <span className="flex items-center gap-1 text-xs text-foreground/80">
+                    <FileCode2 className="h-3 w-3 text-muted-foreground/40" />
+                    {meta.files_modified} modified
+                  </span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}

package/pulse/components/sessions/replay/token-accumulation-chart.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
+} from 'recharts'
+import { formatTokens, formatCost } from '@/lib/decode'
+import type { ReplayTurn, CompactionEvent } from '@/types/claude'
+
+interface Props {
+  turns: ReplayTurn[]
+  compactions: CompactionEvent[]
+}
+
+export function TokenAccumulationChart({ turns, compactions }: Props) {
+  const data = useMemo(() => {
+    const points: Array<{ turn: number; tokens: number; cost: number; label: string }> = []
+    let cumCost = 0
+    let cumTokens = 0
+    let turnIdx = 0
+
+    for (const t of turns) {
+      turnIdx++
+      if (t.type === 'assistant' && t.usage) {
+        const u = t.usage
+        cumTokens = (u.input_tokens ?? 0) + (u.cache_read_input_tokens ?? 0)
+        cumCost += t.estimated_cost ?? 0
+        points.push({ turn: turnIdx, tokens: cumTokens, cost: cumCost, label: `Turn ${turnIdx}` })
+      }
+    }
+    return points
+  }, [turns])
+
+  const compactionTurnIndices = useMemo(
+    () => compactions.map(c => c.turn_index),
+    [compactions]
+  )
+
+  if (data.length === 0) return null
+
+  return (
+    <div className="border border-border rounded bg-card p-4">
+      <h3 className="text-sm font-bold text-muted-foreground uppercase tracking-widest mb-3">
+        📈 Token Accumulation per Turn
+      </h3>
+      <ResponsiveContainer width="100%" height={180}>
+        <LineChart data={data} margin={{ top: 4, right: 8, bottom: 4, left: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+          <XAxis
+            dataKey="turn"
+            tick={{ fontSize: 9, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            label={{ value: 'Turn', position: 'insideBottom', offset: -2, fontSize: 9, fill: 'var(--muted-foreground)' }}
+          />
+          <YAxis
+            tick={{ fontSize: 9, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={formatTokens}
+            width={48}
+          />
+          <Tooltip
+            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
+            formatter={(val: number | undefined, name?: string) => [
+              name === 'tokens' ? formatTokens(val ?? 0) : formatCost(val ?? 0),
+              name === 'tokens' ? 'Context tokens' : 'Cumulative cost',
+            ]}
+          />
+          {compactionTurnIndices.map(idx => (
+            <ReferenceLine
+              key={idx}
+              x={idx}
+              stroke="#f59e0b"
+              strokeDasharray="4 2"
+              label={{ value: '⚡', position: 'top', fontSize: 12 }}
+            />
+          ))}
+          <Line
+            type="monotone"
+            dataKey="tokens"
+            stroke="var(--viz-sky)"
+            strokeWidth={1.5}
+            dot={false}
+            activeDot={{ r: 3 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/pulse/components/sessions/replay/tool-call-badge.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { useState } from 'react'
+import { categoryColorMix, parseMcpTool, isMcpTool, toolBarColor } from '@/lib/tool-categories'
+import type { ToolCall } from '@/types/claude'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import {
+  Wrench,
+  Search,
+  Globe,
+  ClipboardList,
+  CheckCircle2,
+  ListTodo,
+  Plug,
+  Bot,
+  ChevronDown,
+  type LucideIcon,
+} from 'lucide-react'
+
+function truncate(s: string, n = 80): string {
+  return s.length > n ? s.slice(0, n) + '…' : s
+}
+
+function getToolArg(tool: ToolCall): string {
+  const inp = tool.input ?? {}
+  if (inp.command) return String(inp.command).slice(0, 60)
+  if (inp.file_path) return String(inp.file_path).split('/').slice(-2).join('/')
+  if (inp.path) return String(inp.path).split('/').slice(-2).join('/')
+  if (inp.pattern) return String(inp.pattern).slice(0, 60)
+  if (inp.query) return String(inp.query).slice(0, 60)
+  if (inp.url) return String(inp.url).slice(0, 60)
+  if (inp.description) return String(inp.description).slice(0, 60)
+  const keys = Object.keys(inp)
+  if (keys.length > 0) return truncate(String(inp[keys[0]]))
+  return ''
+}
+
+function getToolIcon(name: string): LucideIcon {
+  if (name === 'Task') return Bot
+  if (name === 'WebSearch') return Search
+  if (name === 'WebFetch') return Globe
+  if (name === 'EnterPlanMode') return ClipboardList
+  if (name === 'ExitPlanMode') return CheckCircle2
+  if (name === 'TodoWrite') return ListTodo
+  if (isMcpTool(name)) return Plug
+  return Wrench
+}
+
+export function ToolCallBadge({ tool, result }: { tool: ToolCall; result?: { content: string; is_error: boolean } }) {
+  const [expanded, setExpanded] = useState(false)
+  const color = toolBarColor(tool.name)
+  const mcp = parseMcpTool(tool.name)
+  const Icon = getToolIcon(tool.name)
+  const arg = getToolArg(tool)
+  const displayName = mcp ? `${mcp.server} · ${mcp.tool}` : tool.name
+
+  return (
+    <div
+      className="overflow-hidden rounded-lg border text-sm font-mono"
+      style={{
+        borderColor: categoryColorMix(color, 32),
+        backgroundColor: categoryColorMix(color, 9),
+      }}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => setExpanded(e => !e)}
+        className={cn(
+          'h-auto min-h-8 w-full justify-between gap-2 rounded-none border-0 bg-transparent px-2.5 py-2 text-left shadow-none hover:bg-muted/50',
+          'font-mono text-sm'
+        )}
+        style={{ color: 'var(--foreground)' }}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <Icon className="h-3.5 w-3.5 shrink-0 opacity-80" style={{ color }} />
+          <span className="font-bold" style={{ color }}>
+            {displayName}
+          </span>
+          {arg ? <span className="truncate text-muted-foreground">{arg}</span> : null}
+          {result?.is_error ? (
+            <span className="shrink-0 rounded border border-red-500/30 bg-red-500/10 px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wide text-red-400">
+              Error
+            </span>
+          ) : null}
+        </span>
+        <ChevronDown
+          className={cn('h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200', expanded && 'rotate-180')}
+        />
+      </Button>
+      {expanded && (
+        <div className="space-y-2 border-t px-2.5 py-2.5" style={{ borderColor: categoryColorMix(color, 24) }}>
+          <div>
+            <p className="mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">Input</p>
+            <pre className="max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md border border-border/50 bg-background/80 p-2 text-xs text-muted-foreground">
+              {truncate(JSON.stringify(tool.input, null, 2), 500)}
+            </pre>
+          </div>
+          {result && (
+            <div>
+              <p
+                className={cn(
+                  'mb-1 text-[11px] font-medium uppercase tracking-wide',
+                  result.is_error ? 'text-red-400' : 'text-muted-foreground/70'
+                )}
+              >
+                {result.is_error ? 'Error' : 'Result'}
+              </p>
+              <pre
+                className={cn(
+                  'max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md border p-2 text-xs',
+                  result.is_error
+                    ? 'border-red-500/25 bg-red-950/20 text-red-200/90'
+                    : 'border-border/50 bg-background/80 text-muted-foreground'
+                )}
+              >
+                {truncate(result.content, 500)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}