+ {/* Demo mode indicator */}
+
+
+ Demo Mode
+
+
+ {/* Play/Pause */}
+
+
+ {/* Stop */}
+
+
+ {/* Speed control */}
+
+
+ {/* Progress */}
+
+
+
0 ? `${((position + 1) / totalEvents) * 100}%` : "0%",
+ }}
+ />
+
+
+
+ {/* Position display */}
+
+ {hasEvents ? (
+ <>
+ {position + 1}
+ /
+ {totalEvents}
+
+ ) : (
+ "—"
+ )}
+
+
+ {/* Status indicator */}
+
+ {status === "loading" && "Loading..."}
+ {status === "playing" && "Playing"}
+ {status === "paused" && "Paused"}
+ {status === "complete" && "Complete"}
+ {status === "idle" && "Ready"}
+
+
+ )
+}
diff --git a/ui/src/ui/Inspector.tsx b/ui/src/ui/Inspector.tsx
new file mode 100644
index 0000000..a82cc8f
--- /dev/null
+++ b/ui/src/ui/Inspector.tsx
@@ -0,0 +1,293 @@
+/**
+ * Inspector Panel Component
+ *
+ * Shows detailed information about a selected block:
+ * - Block type, ID, and status
+ * - Full content (not truncated)
+ * - Tool details (for tool blocks)
+ * - Copy as JSON functionality
+ */
+
+import { useState, useCallback, useEffect } from "react"
+import { motion, AnimatePresence } from "motion/react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+ X,
+ Copy,
+ Check,
+ FileText,
+ Brain,
+ Wrench,
+ HelpCircle,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { Block } from "@/bond/types"
+import {
+ isTextBlock,
+ isThinkingBlock,
+ isToolBlock,
+ isUnknownBlock,
+} from "@/bond/types"
+
+interface InspectorProps {
+ /** Selected block to inspect */
+ block: Block | undefined
+ /** Close the inspector */
+ onClose: () => void
+}
+
+function BlockIcon({ kind }: { kind: string }) {
+ switch (kind) {
+ case "text":
+ return
+ case "thinking":
+ return
+ case "tool_call":
+ return
+ default:
+ return
+ }
+}
+
+function KindBadge({ kind }: { kind: string }) {
+ const variants: Record
= {
+ text: "default",
+ thinking: "secondary",
+ tool_call: "warning",
+ }
+
+ return (
+
+
+ {kind}
+
+ )
+}
+
+export function Inspector({ block, onClose }: InspectorProps) {
+ const [copied, setCopied] = useState(false)
+
+ // Reset copied state when block changes
+ useEffect(() => {
+ setCopied(false)
+ }, [block?.id])
+
+ const handleCopy = useCallback(async () => {
+ if (!block) return
+
+ try {
+ const json = JSON.stringify(block, null, 2)
+ await navigator.clipboard.writeText(json)
+ setCopied(true)
+
+ // Reset after 2 seconds
+ setTimeout(() => setCopied(false), 2000)
+ } catch (err) {
+ console.error("Failed to copy:", err)
+ }
+ }, [block])
+
+ return (
+
+ {block && (
+
+
+ {/* Header */}
+
+
+ Inspector
+
+
+
+
+ {/* ID and Index */}
+
+
+
+
+ {block.isActive && (
+
+ Active
+
+ )}
+ {block.isClosed && (
+
+ Closed
+
+ )}
+ {!block.isActive && !block.isClosed && (
+
+ Open
+
+ )}
+
+ {block.content || "(empty)"}
+
+
+ {block.content.length} characters
+
+
+ )}
+
+ {/* Tool Details (for tool blocks) */}
+ {isToolBlock(block) && (
+ <>
+
+
+
+
+ {block.status}
+
+ }
+ />
+
+
+
+
+ {block.toolArgs
+ ? JSON.stringify(block.toolArgs, null, 2)
+ : block.toolArgsDraft || "(forming)"}
+
+
+
+ {block.result && (
+
+
+ {block.result}
+
+
+ {block.result.length} characters
+
+
+ )}
+
+ )}
+
+ {/* Unknown block content */}
+ {isUnknownBlock(block) && (
+
+
+
+ {block.content || "(empty)"}
+
+
+ )}
+
+ {/* Copy as JSON */}
+
+
+
+
+ {/* Play/Pause */}
+
+
+ {/* Mode indicator */}
+
+ {mode === "live" ? (
+ <>
+
+ Live
+
+ ) : (
+ <>
+
+ Replay
+
+ )}
+
+
+ {/* Scrubber slider */}
+
+
onPositionChange(parseInt(e.target.value, 10))}
+ disabled={!hasEvents}
+ className={cn(
+ "flex-1 h-1 bg-zinc-700 rounded-full appearance-none cursor-pointer",
+ "disabled:opacity-50 disabled:cursor-not-allowed",
+ "[&::-webkit-slider-thumb]:appearance-none",
+ "[&::-webkit-slider-thumb]:w-3",
+ "[&::-webkit-slider-thumb]:h-3",
+ "[&::-webkit-slider-thumb]:rounded-full",
+ "[&::-webkit-slider-thumb]:bg-zinc-300",
+ "[&::-webkit-slider-thumb]:hover:bg-zinc-100",
+ "[&::-webkit-slider-thumb]:transition-colors",
+ "[&::-moz-range-thumb]:w-3",
+ "[&::-moz-range-thumb]:h-3",
+ "[&::-moz-range-thumb]:rounded-full",
+ "[&::-moz-range-thumb]:bg-zinc-300",
+ "[&::-moz-range-thumb]:border-0",
+ "[&::-moz-range-thumb]:hover:bg-zinc-100"
+ )}
+ />
+
+ {/* Position display */}
+
+ {hasEvents ? (
+ <>
+ {position + 1}
+ /
+ {totalEvents}
+
+ ) : (
+ "—"
+ )}
+
+
+
+ {/* Jump to Live button */}
+
+