@bahulam/code 0.1.6 → 0.1.7

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

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

@@ -1,158 +0,0 @@
-'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 Kepler / 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

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