@roj-ai/debug 0.0.2

package/src/components/debug/pages/EventsPage.tsx

@@ -0,0 +1,276 @@
+import type { BuiltinEvent, DomainEvent, InferenceCompletedEvent, InferenceFailedEvent } from '@roj-ai/sdk'
+import { useCallback, useMemo, useState } from 'react'
+import { DebugLink, useDebugSessionId } from '../DebugNavigation'
+import { api, unwrap } from '@roj-ai/client'
+import { useEvents, useEventStore } from '../../../stores/event-store'
+
+const EVENT_TYPES = [
+	'all',
+	'session_created',
+	'session_closed',
+	'agent_spawned',
+	'agent_state_changed',
+	'mailbox_message',
+	'mailbox_consumed',
+	'inference_started',
+	'inference_completed',
+	'inference_failed',
+	'tool_started',
+	'tool_completed',
+	'tool_failed',
+	'context_compacted',
+	'user_question_asked',
+	'user_message_sent',
+	'communicator_linked',
+	'session_restarted',
+] as const
+
+const PAGE_SIZE = 50
+
+export function EventsPage() {
+	const sessionId = useDebugSessionId()
+
+	// Get events from event store (already loaded by DebugLayout)
+	const allEvents = useEvents()
+	const isLoading = useEventStore((s) => s.isLoading)
+	const error = useEventStore((s) => s.error)
+
+	const [typeFilter, setTypeFilter] = useState<string>('all')
+	const [offset, setOffset] = useState(0)
+
+	// Wrap events with original index for fork API
+	const indexedEvents = useMemo(() => allEvents.map((event, originalIndex) => ({ event, originalIndex })), [allEvents])
+
+	// Filter events locally
+	const filteredEvents = useMemo(() => {
+		if (typeFilter === 'all') return indexedEvents
+		return indexedEvents.filter((e) => e.event.type === typeFilter)
+	}, [indexedEvents, typeFilter])
+
+	// Apply pagination
+	const paginatedEvents = useMemo(() => {
+		return filteredEvents.slice(offset, offset + PAGE_SIZE)
+	}, [filteredEvents, offset])
+
+	const handleFork = useCallback(async (eventIndex: number) => {
+		if (!sessionId) return
+		const result = unwrap(await api.call('sessions.fork', { sessionId, eventIndex }))
+		const newUrl = window.location.pathname.replace(sessionId, result.sessionId)
+		window.open(newUrl, '_blank')
+	}, [sessionId])
+
+	const total = filteredEvents.length
+	const totalPages = Math.ceil(total / PAGE_SIZE)
+	const currentPage = Math.floor(offset / PAGE_SIZE) + 1
+
+	return (
+		<div className="space-y-4">
+			{/* Filter */}
+			<div className="flex items-center gap-4">
+				<label className="text-sm text-slate-600">
+					Filter by type:
+					<select
+						value={typeFilter}
+						onChange={(e) => {
+							setTypeFilter(e.target.value)
+							setOffset(0) // Reset pagination when filter changes
+						}}
+						className="ml-2 border border-slate-300 rounded px-2 py-1 text-sm"
+					>
+						{EVENT_TYPES.map((type) => (
+							<option key={type} value={type}>
+								{type === 'all' ? 'All Events' : type}
+							</option>
+						))}
+					</select>
+				</label>
+				<span className="text-sm text-slate-500">{total} events total</span>
+			</div>
+
+			{/* Error */}
+			{error && <div className="text-red-500 text-sm">{error}</div>}
+
+			{/* Events List */}
+			<div className="bg-white rounded-md border border-slate-200 overflow-hidden">
+				{isLoading && allEvents.length === 0
+					? <div className="p-4 text-slate-500 text-sm">Loading...</div>
+					: paginatedEvents.length === 0
+					? <div className="p-4 text-slate-500 text-sm">No events found</div>
+					: (
+						<div className="divide-y divide-slate-200">
+							{paginatedEvents.map(({ event, originalIndex }) => (
+								<EventRow
+									key={`${event.timestamp}-${originalIndex}`}
+									event={event}
+									eventIndex={originalIndex}
+									onFork={handleFork}
+								/>
+							))}
+						</div>
+					)}
+			</div>
+
+			{/* Pagination */}
+			{totalPages > 1 && (
+				<div className="flex items-center justify-between">
+					<button
+						onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+						disabled={offset === 0}
+						className="px-3 py-1 text-sm border border-slate-300 rounded hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						Previous
+					</button>
+					<span className="text-sm text-slate-600">
+						Page {currentPage} of {totalPages}
+					</span>
+					<button
+						onClick={() => setOffset(offset + PAGE_SIZE)}
+						disabled={currentPage >= totalPages}
+						className="px-3 py-1 text-sm border border-slate-300 rounded hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						Next
+					</button>
+				</div>
+			)}
+		</div>
+	)
+}
+
+function EventRow({
+	event,
+	eventIndex,
+	onFork,
+}: {
+	event: DomainEvent
+	eventIndex: number
+	onFork: (eventIndex: number) => Promise<void>
+}) {
+	const [expanded, setExpanded] = useState(false)
+	const [forking, setForking] = useState(false)
+
+	const typeColors: Record<string, string> = {
+		session_created: 'bg-green-100 text-green-700',
+		session_closed: 'bg-slate-100 text-slate-700',
+		agent_spawned: 'bg-blue-100 text-blue-700',
+		agent_state_changed: 'bg-yellow-100 text-yellow-700',
+		mailbox_message: 'bg-purple-100 text-purple-700',
+		mailbox_consumed: 'bg-purple-50 text-purple-600',
+		inference_started: 'bg-orange-100 text-orange-700',
+		inference_completed: 'bg-green-100 text-green-700',
+		inference_failed: 'bg-red-100 text-red-700',
+		tool_started: 'bg-cyan-100 text-cyan-700',
+		tool_completed: 'bg-green-100 text-green-700',
+		tool_failed: 'bg-red-100 text-red-700',
+		context_compacted: 'bg-slate-100 text-slate-700',
+		user_question_asked: 'bg-yellow-100 text-yellow-700',
+		user_message_sent: 'bg-blue-100 text-blue-700',
+	}
+
+	const llmCallId = (event.type === 'inference_completed' || event.type === 'inference_failed')
+		&& (event as InferenceCompletedEvent | InferenceFailedEvent).llmCallId
+
+	const agentId = 'agentId' in event ? (event as { agentId: string }).agentId : null
+
+	return (
+		<div className="text-sm">
+			<button
+				onClick={() => setExpanded(!expanded)}
+				className="w-full p-3 hover:bg-slate-50 flex items-center gap-3 text-left"
+			>
+				<span className="text-xs text-slate-400 font-mono w-20 shrink-0">
+					{new Date(event.timestamp).toLocaleTimeString()}
+				</span>
+				<span
+					className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${typeColors[event.type] || 'bg-slate-100'}`}
+				>
+					{event.type}
+				</span>
+				<span className="text-slate-600 truncate flex-1">
+					{getEventSummary(event)}
+				</span>
+
+				{/* Links */}
+				<div className="flex items-center gap-2 shrink-0">
+					{agentId && (
+						<DebugLink
+							to={`agents/${agentId}`}
+							className="text-xs text-violet-600 hover:underline"
+						>
+							Agent
+						</DebugLink>
+					)}
+					{llmCallId && (
+						<DebugLink
+							to={`llm-calls/${llmCallId}`}
+							className="text-xs text-violet-600 hover:underline"
+						>
+							LLM Call
+						</DebugLink>
+					)}
+					<button
+						onClick={async (e) => {
+							e.stopPropagation()
+							setForking(true)
+							try {
+								await onFork(eventIndex)
+							} finally {
+								setForking(false)
+							}
+						}}
+						disabled={forking}
+						className="text-xs text-violet-600 hover:underline disabled:opacity-50"
+					>
+						{forking ? 'Forking...' : 'Fork'}
+					</button>
+				</div>
+
+				<span className="text-slate-400 shrink-0">{expanded ? '▼' : '▶'}</span>
+			</button>
+			{expanded && (
+				<div className="px-3 pb-3 bg-slate-50">
+					<pre className="text-xs overflow-x-auto p-3 bg-white border border-slate-200 rounded-md">
+            {JSON.stringify(event, null, 2)}
+					</pre>
+				</div>
+			)}
+		</div>
+	)
+}
+
+function getEventSummary(event: DomainEvent): string {
+	const e = event as BuiltinEvent
+	switch (e.type) {
+		case 'session_created':
+			return `Preset: ${e.presetId}`
+		case 'session_closed':
+			return 'Session closed'
+		case 'agent_spawned':
+			return `${e.definitionName} (${e.agentId.slice(0, 8)})`
+		case 'agent_state_changed':
+			return `${e.fromState} → ${e.toState}`
+		case 'mailbox_message':
+			return `To: ${e.toAgentId.slice(0, 8)}`
+		case 'mailbox_consumed':
+			return `${e.messageIds.length} messages`
+		case 'inference_started':
+			return `Agent: ${e.agentId.slice(0, 8)}`
+		case 'inference_completed':
+			return `${e.metrics.totalTokens} tokens, ${e.metrics.model}`
+		case 'inference_failed':
+			return e.error
+		case 'tool_started':
+			return `${e.toolName}`
+		case 'tool_completed':
+			return `${e.toolCallId.slice(0, 8)} completed`
+		case 'tool_failed':
+			return `${e.toolCallId.slice(0, 8)}: ${e.error}`
+		case 'context_compacted':
+			return `${e.originalTokens} → ${e.compactedTokens} tokens`
+		case 'user_question_asked':
+			return e.question.slice(0, 50) + (e.question.length > 50 ? '...' : '')
+		case 'user_message_sent':
+			return e.message.slice(0, 50) + (e.message.length > 50 ? '...' : '')
+		default:
+			return ''
+	}
+}

package/src/components/debug/pages/FilesPage.tsx

@@ -0,0 +1,366 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api, getApiBaseUrl } from '@roj-ai/client'
+import { useDebugSessionId } from '../DebugNavigation'
+
+type Root = 'session' | 'workspace'
+
+interface DirectoryEntry {
+	name: string
+	type: 'file' | 'directory'
+	size: number
+	mimeType?: string
+}
+
+interface DirectoryListing {
+	entries: DirectoryEntry[]
+	path: string
+	root: string
+}
+
+function formatFileSize(bytes: number): string {
+	if (bytes === 0) return '0 B'
+	const units = ['B', 'KB', 'MB', 'GB']
+	const i = Math.floor(Math.log(bytes) / Math.log(1024))
+	const size = bytes / Math.pow(1024, i)
+	return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`
+}
+
+function isImageMime(mimeType: string | undefined): boolean {
+	return mimeType?.startsWith('image/') ?? false
+}
+
+function isTextMime(mimeType: string | undefined): boolean {
+	if (!mimeType) return false
+	return mimeType.startsWith('text/')
+		|| mimeType === 'application/json'
+		|| mimeType === 'application/javascript'
+}
+
+export function FilesPage() {
+	const sessionId = useDebugSessionId()
+	const [root, setRoot] = useState<Root>('session')
+	const [currentPath, setCurrentPath] = useState('')
+	const [listing, setListing] = useState<DirectoryListing | null>(null)
+	const [listingError, setListingError] = useState<string | null>(null)
+	const [listingLoading, setListingLoading] = useState(false)
+	const [selectedFile, setSelectedFile] = useState<{ path: string; entry: DirectoryEntry } | null>(null)
+	const [fileContent, setFileContent] = useState<string | null>(null)
+	const [fileUrl, setFileUrl] = useState<string | null>(null)
+	const [fileLoading, setFileLoading] = useState(false)
+	const [fileError, setFileError] = useState<string | null>(null)
+
+	const fetchListing = useCallback(async (r: Root, path: string) => {
+		if (!sessionId) return
+		setListingLoading(true)
+		setListingError(null)
+
+		try {
+			const method = r === 'session' ? 'filesystem.listSession' : 'filesystem.listWorkspace'
+			const result = await api.call(method, { sessionId, path: path || undefined })
+			if (!result.ok) {
+				setListingError(result.error.message)
+				setListing(null)
+				return
+			}
+			setListing(result.value)
+		} catch (e) {
+			setListingError(e instanceof Error ? e.message : 'Failed to fetch listing')
+			setListing(null)
+		} finally {
+			setListingLoading(false)
+		}
+	}, [sessionId])
+
+	// Fetch listing when root or path changes
+	useEffect(() => {
+		fetchListing(root, currentPath)
+	}, [root, currentPath, fetchListing])
+
+	// Fetch file content when a file is selected
+	useEffect(() => {
+		if (!selectedFile || !sessionId) {
+			setFileContent(null)
+			setFileUrl(null)
+			setFileError(null)
+			return
+		}
+
+		const baseUrl = getApiBaseUrl()
+		const routePrefix = root === 'session' ? 'files' : 'workspace'
+		const url = `${baseUrl}/sessions/${sessionId}/${routePrefix}/${selectedFile.path}`
+
+		if (isImageMime(selectedFile.entry.mimeType)) {
+			setFileUrl(url)
+			setFileContent(null)
+			setFileLoading(false)
+			setFileError(null)
+			return
+		}
+
+		if (isTextMime(selectedFile.entry.mimeType)) {
+			setFileLoading(true)
+			setFileError(null)
+			setFileUrl(null)
+			fetch(url)
+				.then(async (res) => {
+					if (!res.ok) throw new Error(`HTTP ${res.status}`)
+					return res.text()
+				})
+				.then((text) => {
+					setFileContent(text)
+					setFileLoading(false)
+				})
+				.catch((e) => {
+					setFileError(e instanceof Error ? e.message : 'Failed to fetch file')
+					setFileLoading(false)
+				})
+			return
+		}
+
+		// Non-text, non-image: just show info + download link
+		setFileUrl(url)
+		setFileContent(null)
+		setFileLoading(false)
+		setFileError(null)
+	}, [selectedFile, sessionId, root])
+
+	const handleNavigate = (entry: DirectoryEntry) => {
+		if (entry.type === 'directory') {
+			const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
+			setCurrentPath(newPath)
+			setSelectedFile(null)
+		} else {
+			const filePath = currentPath ? `${currentPath}/${entry.name}` : entry.name
+			setSelectedFile({ path: filePath, entry })
+		}
+	}
+
+	const handleRootChange = (newRoot: Root) => {
+		setRoot(newRoot)
+		setCurrentPath('')
+		setSelectedFile(null)
+	}
+
+	const handleBreadcrumbClick = (index: number) => {
+		if (index === -1) {
+			setCurrentPath('')
+		} else {
+			const parts = currentPath.split('/')
+			setCurrentPath(parts.slice(0, index + 1).join('/'))
+		}
+		setSelectedFile(null)
+	}
+
+	if (!sessionId) return null
+
+	const pathParts = currentPath ? currentPath.split('/') : []
+
+	return (
+		<div className="h-full flex gap-4">
+			{/* Left panel - Directory browser */}
+			<div className="w-80 shrink-0 bg-white rounded-md border border-slate-200 flex flex-col">
+				{/* Root tabs */}
+				<div className="flex border-b border-slate-200">
+					<button
+						onClick={() => handleRootChange('session')}
+						className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+							root === 'session'
+								? 'text-violet-700 border-b-2 border-violet-600 bg-violet-50'
+								: 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'
+						}`}
+					>
+						Session
+					</button>
+					<button
+						onClick={() => handleRootChange('workspace')}
+						className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+							root === 'workspace'
+								? 'text-violet-700 border-b-2 border-violet-600 bg-violet-50'
+								: 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'
+						}`}
+					>
+						Workspace
+					</button>
+				</div>
+
+				{/* Breadcrumbs */}
+				<div className="px-3 py-2 border-b border-slate-100 flex items-center gap-1 text-sm overflow-x-auto">
+					<button
+						onClick={() => handleBreadcrumbClick(-1)}
+						className="text-violet-600 hover:underline shrink-0"
+					>
+						/
+					</button>
+					{pathParts.map((part, i) => (
+						<span key={i} className="flex items-center gap-1 shrink-0">
+							<span className="text-slate-400">/</span>
+							{i < pathParts.length - 1
+								? (
+									<button
+										onClick={() => handleBreadcrumbClick(i)}
+										className="text-violet-600 hover:underline"
+									>
+										{part}
+									</button>
+								)
+								: <span className="text-slate-700 font-medium">{part}</span>}
+						</span>
+					))}
+				</div>
+
+				{/* Directory listing */}
+				<div className="flex-1 overflow-auto">
+					{listingLoading
+						? <div className="p-3 text-slate-500 text-sm">Loading...</div>
+						: listingError
+						? <div className="p-3 text-red-500 text-sm">{listingError}</div>
+						: !listing || listing.entries.length === 0
+						? <div className="p-3 text-slate-500 text-sm">Empty directory</div>
+						: (
+							<div className="divide-y divide-slate-100">
+								{currentPath && (
+									<button
+										onClick={() => {
+											const parts = currentPath.split('/')
+											parts.pop()
+											setCurrentPath(parts.join('/'))
+											setSelectedFile(null)
+										}}
+										className="w-full flex items-center gap-2 px-3 py-2 text-sm text-slate-500 hover:bg-slate-50 text-left"
+									>
+										<FolderUpIcon />
+										<span>..</span>
+									</button>
+								)}
+								{listing.entries.map((entry) => {
+									const isSelected = selectedFile
+										&& entry.type === 'file'
+										&& selectedFile.entry.name === entry.name
+										&& selectedFile.path === (currentPath ? `${currentPath}/${entry.name}` : entry.name)
+
+									return (
+										<button
+											key={entry.name}
+											onClick={() => handleNavigate(entry)}
+											className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
+												isSelected
+													? 'bg-violet-50 text-violet-700'
+													: 'text-slate-700 hover:bg-slate-50'
+											}`}
+										>
+											{entry.type === 'directory' ? <FolderIcon /> : <FileIcon />}
+											<span className="truncate flex-1">{entry.name}</span>
+											{entry.type === 'file' && (
+												<span className="text-xs text-slate-400 shrink-0">
+													{formatFileSize(entry.size)}
+												</span>
+											)}
+										</button>
+									)
+								})}
+							</div>
+						)}
+				</div>
+			</div>
+
+			{/* Right panel - File viewer */}
+			<div className="flex-1 bg-white rounded-md border border-slate-200 flex flex-col min-w-0">
+				<div className="p-3 border-b border-slate-200">
+					<h2 className="font-medium text-slate-900">
+						{selectedFile ? selectedFile.path : 'File Viewer'}
+					</h2>
+					{selectedFile && (
+						<div className="flex items-center gap-3 mt-1 text-xs text-slate-500">
+							<span>{selectedFile.entry.mimeType ?? 'unknown type'}</span>
+							<span>{formatFileSize(selectedFile.entry.size)}</span>
+						</div>
+					)}
+				</div>
+				<div className="flex-1 overflow-auto p-4">
+					{!selectedFile
+						? (
+							<div className="text-slate-500 text-sm">
+								Select a file from the directory browser to view its contents
+							</div>
+						)
+						: fileLoading
+						? <div className="text-slate-500 text-sm">Loading file...</div>
+						: fileError
+						? <div className="text-red-500 text-sm">{fileError}</div>
+						: fileContent !== null
+						? (
+							<pre className="text-xs font-mono whitespace-pre-wrap break-words bg-slate-50 p-4 rounded-md border border-slate-200 overflow-auto max-h-full">
+								{fileContent}
+							</pre>
+						)
+						: fileUrl && isImageMime(selectedFile.entry.mimeType)
+						? (
+							<div className="flex items-center justify-center">
+								<img
+									src={fileUrl}
+									alt={selectedFile.entry.name}
+									className="max-w-full max-h-[70vh] object-contain rounded border border-slate-200"
+								/>
+							</div>
+						)
+						: fileUrl
+						? (
+							<div className="space-y-3">
+								<p className="text-sm text-slate-600">
+									This file type cannot be previewed.
+								</p>
+								<a
+									href={fileUrl}
+									download={selectedFile.entry.name}
+									className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-violet-700 bg-violet-50 rounded-md hover:bg-violet-100 transition-colors"
+								>
+									<DownloadIcon />
+									Download {selectedFile.entry.name}
+								</a>
+							</div>
+						)
+						: null}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// Icons
+
+function FolderIcon() {
+	return (
+		<svg className="w-4 h-4 text-yellow-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+			<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
+		</svg>
+	)
+}
+
+function FolderUpIcon() {
+	return (
+		<svg className="w-4 h-4 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 10l6-6m-6 6l6 6" />
+		</svg>
+	)
+}
+
+function FileIcon() {
+	return (
+		<svg className="w-4 h-4 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth={2}
+				d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+			/>
+		</svg>
+	)
+}
+
+function DownloadIcon() {
+	return (
+		<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+		</svg>
+	)
+}

package/src/components/debug/pages/LLMCallPage.tsx

@@ -0,0 +1,32 @@
+import { DebugLink, useDebugParams, useDebugSessionId } from '../DebugNavigation'
+import { LLMCallDetail } from '../LLMCallDetail'
+
+export function LLMCallPage() {
+	const sessionId = useDebugSessionId()
+	const { callId } = useDebugParams<{ callId: string }>()
+
+	if (!callId) {
+		return <div className="text-slate-500">Invalid URL</div>
+	}
+
+	return (
+		<div className="space-y-4">
+			{/* Breadcrumb */}
+			<div className="flex items-center gap-2 text-sm">
+				<DebugLink
+					to="llm-calls"
+					className="text-violet-600 hover:underline"
+				>
+					LLM Calls
+				</DebugLink>
+				<span className="text-slate-400">/</span>
+				<span className="text-slate-600 font-mono">{callId.slice(0, 12)}...</span>
+			</div>
+
+			{/* Detail */}
+			<div className="bg-white rounded-md border border-slate-200 p-6">
+				<LLMCallDetail sessionId={sessionId} callId={callId} />
+			</div>
+		</div>
+	)
+}