@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/components/sessions/replay/turn-cards.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import { useState } from 'react'
+import { ToolCallBadge } from './tool-call-badge'
+import { CompactionCard } from './compaction-card'
+import { AssistantMarkdown } from './assistant-markdown'
+import { UserToolResult } from './user-tool-result'
+import { formatCost, formatTokens, formatDurationMs } from '@/lib/decode'
+import type { ReplayTurn, CompactionEvent } from '@/types/claude'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ChevronDown, ChevronUp, Brain, Clock, Coins } from 'lucide-react'
+
+/** Show “Show more” when assistant text exceeds this length (markdown; avoid slicing mid-block). */
+const ASSISTANT_COLLAPSE_THRESHOLD = 900
+
+interface TurnCardProps {
+  turn: ReplayTurn
+  turnNumber: number
+  compactionBefore?: CompactionEvent
+  toolResults: Map<string, { content: string; is_error: boolean }>
+}
+
+function TokenBreakdown({ turn }: { turn: ReplayTurn }) {
+  if (!turn.usage) return null
+  const u = turn.usage
+  const items = [
+    u.input_tokens       ? { label: 'In',     value: u.input_tokens,       color: 'var(--viz-sky)' } : null,
+    u.output_tokens      ? { label: 'Out',    value: u.output_tokens,      color: '#d97706' } : null,
+    u.cache_creation_input_tokens ? { label: 'cW', value: u.cache_creation_input_tokens, color: '#a78bfa' } : null,
+    u.cache_read_input_tokens     ? { label: 'cR', value: u.cache_read_input_tokens,     color: '#34d399' } : null,
+  ].filter(Boolean) as { label: string; value: number; color: string }[]
+
+  if (items.length === 0) return null
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      <Coins className="w-3 h-3 text-muted-foreground/50 shrink-0" />
+      {items.map(({ label, value, color }) => (
+        <span
+          key={label}
+          className="text-[11px] font-mono px-1.5 py-0.5 rounded border border-border/50 bg-muted/50"
+          style={{ color }}
+        >
+          {label}:{formatTokens(value)}
+        </span>
+      ))}
+      {turn.estimated_cost ? (
+        <span className="text-[11px] font-mono text-[#d97706] px-1 py-0.5">
+          {formatCost(turn.estimated_cost)}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export function UserTurnCard({ turn, compactionBefore, toolResults }: TurnCardProps) {
+  return (
+    <div>
+      {compactionBefore && <CompactionCard event={compactionBefore} />}
+
+      <div className="mb-5 flex flex-col items-end gap-1.5">
+        {/* Timestamp label */}
+        <span className="text-[11px] text-muted-foreground/40 pr-1">
+          {new Date(turn.timestamp).toLocaleTimeString()}
+        </span>
+
+        {/* User bubble (right-aligned) */}
+        {turn.text && (
+          <div className="max-w-[85%] bg-primary/10 border border-primary/20 rounded-2xl rounded-tr-sm px-4 py-3">
+            <p className="text-sm text-foreground/90 whitespace-pre-wrap leading-relaxed">
+              {turn.text}
+            </p>
+          </div>
+        )}
+
+        {/* Tool results (user feedback) */}
+        {turn.tool_results && turn.tool_results.length > 0 && (
+          <div className="flex w-full max-w-[90%] flex-col gap-2">
+            {turn.tool_results.map(r => (
+              <UserToolResult key={r.tool_use_id} content={r.content} isError={r.is_error} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function AssistantTurnCard({ turn, turnNumber, toolResults }: TurnCardProps) {
+  const [thinkingOpen, setThinkingOpen] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  const modelShort = turn.model?.includes('opus-4-6') ? 'Opus 4.6'
+    : turn.model?.includes('opus-4-5') ? 'Opus 4.5'
+    : turn.model?.includes('opus-4')   ? 'Opus 4'
+    : turn.model?.includes('sonnet-4-6') ? 'Sonnet 4.6'
+    : turn.model?.includes('sonnet-4-5') ? 'Sonnet 4.5'
+    : turn.model?.includes('sonnet')   ? 'Sonnet'
+    : turn.model?.includes('haiku')    ? 'Haiku'
+    : turn.model ?? 'Claude'
+
+  const textToShow = turn.text ?? ''
+  const needsExpandToggle = textToShow.length > ASSISTANT_COLLAPSE_THRESHOLD
+
+  return (
+    <div className="mb-6 flex flex-col gap-1.5">
+      {/* Header row */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex items-center gap-1.5">
+          <div className="w-6 h-6 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center shrink-0">
+            <span className="text-[10px] font-bold text-primary">C</span>
+          </div>
+          <span className="text-xs font-semibold text-primary/80">Claude</span>
+        </div>
+        <Badge variant="outline" className="text-[11px] px-1.5 py-0 h-5 font-mono">
+          {modelShort}
+        </Badge>
+        <span className="text-[11px] text-muted-foreground/30">#{turnNumber}</span>
+        {turn.turn_duration_ms && (
+          <span className="text-[11px] text-muted-foreground/40 flex items-center gap-1">
+            <Clock className="w-3 h-3" />
+            {formatDurationMs(turn.turn_duration_ms)}
+          </span>
+        )}
+      </div>
+
+      {/* Thinking block */}
+      {turn.has_thinking && (
+        <div className="ml-8">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-auto gap-1.5 px-2 py-1.5 text-xs font-medium text-indigo-700 hover:bg-indigo-500/10 hover:text-indigo-900 dark:text-indigo-400/90 dark:hover:text-indigo-300"
+            onClick={() => setThinkingOpen(o => !o)}
+          >
+            <Brain className="h-3.5 w-3.5 shrink-0" />
+            Extended thinking
+            <ChevronDown
+              className={cn('h-3.5 w-3.5 shrink-0 transition-transform duration-200', thinkingOpen && 'rotate-180')}
+            />
+          </Button>
+          {thinkingOpen && turn.thinking_text && (
+            <div className="mt-1 bg-indigo-50 border border-indigo-200/80 rounded-xl px-4 py-3 dark:bg-indigo-950/20 dark:border-indigo-800/25">
+              <pre className="text-xs text-indigo-950/90 whitespace-pre-wrap max-h-56 overflow-auto leading-relaxed dark:text-indigo-200/50">
+                {turn.thinking_text.slice(0, 3000)}
+                {turn.thinking_text.length > 3000 && (
+                  <span className="text-indigo-400/40"> …[{(turn.thinking_text.length - 3000).toLocaleString()} more chars]</span>
+                )}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Tool calls */}
+      {turn.tool_calls && turn.tool_calls.length > 0 && (
+        <div className="ml-8 space-y-1">
+          {turn.tool_calls.map(tc => (
+            <ToolCallBadge
+              key={tc.id}
+              tool={tc}
+              result={toolResults.get(tc.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Response text bubble */}
+      {textToShow && (
+        <div className="ml-8">
+          <div className="rounded-2xl rounded-tl-sm border border-border/60 bg-card px-4 py-3">
+            <div
+              className={cn(
+                'relative',
+                needsExpandToggle && !expanded && 'max-h-112 overflow-hidden'
+              )}
+            >
+              <AssistantMarkdown content={textToShow} />
+              {needsExpandToggle && !expanded && (
+                <div
+                  className="pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-linear-to-t from-card to-transparent"
+                  aria-hidden
+                />
+              )}
+            </div>
+            {needsExpandToggle && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="mt-2 h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+                onClick={() => setExpanded(e => !e)}
+              >
+                {expanded ? (
+                  <>
+                    <ChevronUp className="h-3 w-3" /> Show less
+                  </>
+                ) : (
+                  <>
+                    <ChevronDown className="h-3 w-3" /> Show full response
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Token breakdown */}
+      {turn.usage && (
+        <div className="ml-8 mt-0.5">
+          <TokenBreakdown turn={turn} />
+        </div>
+      )}
+    </div>
+  )
+}

package/pulse/components/sessions/replay/user-tool-result.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { AlertCircle, CheckCircle2, FileEdit, FileText, Info } from 'lucide-react'
+
+export type ParsedToolResult =
+  | { kind: 'file_updated'; path: string; note?: string }
+  | { kind: 'file_written'; path: string; note?: string }
+  | { kind: 'file_read'; path: string; note?: string }
+  | { kind: 'plain'; text: string }
+
+function restAfterAction(s: string, idx: number, needleLen: number): string | undefined {
+  let rest = s.slice(idx + needleLen).trim()
+  rest = rest.replace(/^\.\s*/, '').trim()
+  if (rest.startsWith('(') && rest.endsWith(')')) {
+    rest = rest.slice(1, -1).trim()
+  }
+  return rest || undefined
+}
+
+/**
+ * Best-effort parse of common Orca / tool sandbox result strings.
+ */
+export function parseToolResultMessage(raw: string): ParsedToolResult {
+  const s = raw.trim()
+  if (!s) return { kind: 'plain', text: raw }
+
+  const prefix = 'The file '
+
+  const needles: Array<{ needle: string; kind: 'file_updated' | 'file_written' | 'file_read' }> = [
+    { needle: ' has been updated successfully', kind: 'file_updated' },
+    { needle: ' has been written successfully', kind: 'file_written' },
+    { needle: ' has been written.', kind: 'file_written' },
+    { needle: ' was read successfully', kind: 'file_read' },
+    { needle: ' has been read.', kind: 'file_read' },
+  ]
+
+  if (s.startsWith(prefix)) {
+    for (const { needle, kind } of needles) {
+      const i = s.indexOf(needle)
+      if (i <= prefix.length) continue
+      const path = s.slice(prefix.length, i).trim()
+      if (!path) continue
+      const note = restAfterAction(s, i, needle.length)
+      if (kind === 'file_updated') return { kind: 'file_updated', path, note }
+      if (kind === 'file_written') return { kind: 'file_written', path, note }
+      return { kind: 'file_read', path, note }
+    }
+  }
+
+  return { kind: 'plain', text: s }
+}
+
+function formatPathForUi(path: string, max = 100): string {
+  if (path.length <= max) return path
+  const parts = path.split('/')
+  if (parts.length <= 2) return path.slice(0, max - 1) + '…'
+  const file = parts[parts.length - 1] ?? path
+  const start = parts.slice(0, 2).join('/')
+  return `${start}/…/${file}`
+}
+
+interface Props {
+  content: string
+  isError: boolean
+}
+
+export function UserToolResult({ content, isError }: Props) {
+  const parsed = parseToolResultMessage(content)
+
+  if (isError) {
+    return (
+      <div className="flex gap-2.5 rounded-xl border border-red-500/25 bg-red-950/25 px-3 py-2.5 text-left">
+        <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
+        <div className="min-w-0 flex-1">
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-red-400/90">Tool error</p>
+          <pre className="mt-1 whitespace-pre-wrap wrap-break-word font-mono text-[12px] leading-relaxed text-red-200/90">
+            {content}
+          </pre>
+        </div>
+      </div>
+    )
+  }
+
+  if (parsed.kind === 'file_updated') {
+    return (
+      <div className="flex gap-2.5 rounded-xl border border-emerald-500/20 bg-emerald-500/6 px-3 py-2.5 text-left">
+        <FileEdit className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" />
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-[13px] font-medium text-foreground">File updated</span>
+            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500/90" aria-hidden />
+          </div>
+          <p
+            className="break-all font-mono text-[12px] leading-snug text-foreground/85"
+            title={parsed.path}
+          >
+            {formatPathForUi(parsed.path)}
+          </p>
+          {parsed.note ? (
+            <p className="flex gap-1.5 text-[11px] leading-relaxed text-muted-foreground">
+              <Info className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground/50" />
+              <span>{parsed.note}</span>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
+  if (parsed.kind === 'file_written') {
+    return (
+      <div className="flex gap-2.5 rounded-xl border border-blue-700/20 bg-blue-700/[0.07] dark:border-sky-500/20 dark:bg-sky-500/6 px-3 py-2.5 text-left">
+        <FileText className="mt-0.5 h-4 w-4 shrink-0 text-blue-700 dark:text-sky-500" />
+        <div className="min-w-0 flex-1 space-y-1">
+          <span className="text-[13px] font-medium text-foreground">File written</span>
+          <p className="break-all font-mono text-[12px] leading-snug text-foreground/85" title={parsed.path}>
+            {formatPathForUi(parsed.path)}
+          </p>
+          {parsed.note ? <p className="text-[11px] text-muted-foreground">{parsed.note}</p> : null}
+        </div>
+      </div>
+    )
+  }
+
+  if (parsed.kind === 'file_read') {
+    return (
+      <div className="flex gap-2.5 rounded-xl border border-border/60 bg-muted/30 px-3 py-2.5 text-left">
+        <FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0 flex-1 space-y-1">
+          <span className="text-[13px] font-medium text-foreground/90">File read</span>
+          <p className="break-all font-mono text-[12px] leading-snug text-muted-foreground" title={parsed.path}>
+            {formatPathForUi(parsed.path)}
+          </p>
+          {parsed.note ? <p className="text-[11px] text-muted-foreground/80">{parsed.note}</p> : null}
+        </div>
+      </div>
+    )
+  }
+
+  const text = parsed.text
+  const long = text.length > 320
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-border/50 bg-muted/35 px-3 py-2.5 text-left',
+        'text-[13px] leading-relaxed text-foreground/85'
+      )}
+    >
+      <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">Result</p>
+      <p className={cn('mt-1.5 whitespace-pre-wrap wrap-break-word', long && 'line-clamp-6')}>{text}</p>
+      {long && (
+        <p className="mt-2 text-[11px] text-muted-foreground/50">… {text.length.toLocaleString()} characters total</p>
+      )}
+    </div>
+  )
+}

package/pulse/components/sessions/session-badges.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+interface BadgeProps {
+  has_compaction?: boolean
+  uses_task_agent?: boolean
+  uses_mcp?: boolean
+  uses_web_search?: boolean
+  uses_web_fetch?: boolean
+  has_thinking?: boolean
+}
+
+export function SessionBadges({
+  has_compaction,
+  uses_task_agent,
+  uses_mcp,
+  uses_web_search,
+  uses_web_fetch,
+  has_thinking,
+}: BadgeProps) {
+  return (
+    <div className="flex flex-wrap gap-1">
+      {has_compaction && (
+        <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[12px] font-medium bg-amber-500/20 text-amber-400 border border-amber-500/30">
+          ⚡ compacted
+        </span>
+      )}
+      {uses_task_agent && (
+        <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[12px] font-medium bg-purple-500/20 text-purple-400 border border-purple-500/30">
+          🤖 agent
+        </span>
+      )}
+      {uses_mcp && (
+        <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[12px] font-medium bg-blue-500/20 text-blue-700 dark:text-blue-400 border border-blue-500/30">
+          🔌 mcp
+        </span>
+      )}
+      {(uses_web_search || uses_web_fetch) && (
+        <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[12px] font-medium bg-green-500/20 text-green-400 border border-green-500/30">
+          🔍 web
+        </span>
+      )}
+      {has_thinking && (
+        <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[12px] font-medium bg-indigo-500/20 text-indigo-400 border border-indigo-500/30">
+          🧠 thinking
+        </span>
+      )}
+    </div>
+  )
+}