@roj-ai/debug 0.0.2

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

@@ -0,0 +1,232 @@
+import type { GlobalMailboxMessage } from '@roj-ai/shared'
+import { useState } from 'react'
+import { useEventStore, useGlobalMailbox } from '../../../stores/event-store'
+import { DebugLink } from '../DebugNavigation'
+
+export function MailboxPage() {
+	// Get mailbox from event store (already loaded by DebugLayout)
+	const messages = useGlobalMailbox()
+	const isLoading = useEventStore((s) => s.isLoading)
+	const error = useEventStore((s) => s.error)
+
+	const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+	const toggleExpanded = (id: string) => {
+		setExpandedIds((prev) => {
+			const next = new Set(prev)
+			if (next.has(id)) {
+				next.delete(id)
+			} else {
+				next.add(id)
+			}
+			return next
+		})
+	}
+
+	// Calculate stats
+	const total = messages.length
+	const pendingCount = messages.filter((m) => !m.consumed).length
+	const consumedCount = messages.filter((m) => m.consumed).length
+
+	return (
+		<div className="space-y-4">
+			{/* Summary */}
+			<div className="flex items-center gap-6 text-sm">
+				<span className="text-slate-600">
+					<span className="font-medium text-slate-900">{total}</span> messages
+				</span>
+				<span className="text-slate-600">
+					<span className="font-medium text-green-600">{consumedCount}</span> read
+				</span>
+				{pendingCount > 0 && (
+					<span className="text-slate-600">
+						<span className="font-medium text-blue-600">{pendingCount}</span> pending
+					</span>
+				)}
+			</div>
+
+			{/* Error */}
+			{error && <div className="text-red-500 text-sm">{error}</div>}
+
+			{/* Loading */}
+			{isLoading && messages.length === 0 && <div className="text-slate-500 text-sm">Loading mailbox...</div>}
+
+			{/* Table */}
+			{messages.length > 0 && (
+				<div className="bg-white rounded-md border border-slate-200 overflow-hidden">
+					<div className="overflow-x-auto">
+						<table className="w-full text-sm">
+							<thead className="bg-slate-50 border-b border-slate-200">
+								<tr>
+									<th className="px-3 py-2 text-left font-medium text-slate-600">From</th>
+									<th className="px-3 py-2 text-center font-medium text-slate-600 w-8"></th>
+									<th className="px-3 py-2 text-left font-medium text-slate-600">To</th>
+									<th className="px-3 py-2 text-left font-medium text-slate-600">Message</th>
+									<th className="px-3 py-2 text-left font-medium text-slate-600">Time</th>
+									<th className="px-3 py-2 text-center font-medium text-slate-600">Status</th>
+								</tr>
+							</thead>
+							<tbody className="divide-y divide-slate-200">
+								{messages.map((msg) => (
+									<MessageRow
+										key={msg.id}
+										message={msg}
+										isExpanded={expandedIds.has(msg.id)}
+										onToggleExpand={() => toggleExpanded(msg.id)}
+									/>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			)}
+
+			{/* Empty state */}
+			{!isLoading && messages.length === 0 && <div className="text-slate-500 text-sm">No messages found</div>}
+		</div>
+	)
+}
+
+function MessageRow({
+	message,
+	isExpanded,
+	onToggleExpand,
+}: {
+	message: GlobalMailboxMessage
+	isExpanded: boolean
+	onToggleExpand: () => void
+}) {
+	const isLongMessage = message.content.length > 100
+	const displayContent = isExpanded
+		? message.content
+		: message.content.slice(0, 100) + (isLongMessage ? '...' : '')
+
+	return (
+		<tr className="hover:bg-slate-50">
+			{/* From */}
+			<td className="px-3 py-2">
+				<AgentBadge
+					agentId={message.fromAgentId}
+					agentName={message.fromAgentName}
+	
+				/>
+			</td>
+
+			{/* Arrow */}
+			<td className="px-3 py-2 text-center text-slate-400">
+				<ArrowIcon />
+			</td>
+
+			{/* To */}
+			<td className="px-3 py-2">
+				<AgentBadge
+					agentId={message.toAgentId}
+					agentName={message.toAgentName}
+	
+				/>
+			</td>
+
+			{/* Message */}
+			<td className="px-3 py-2">
+				<div
+					className={`text-slate-700 ${isLongMessage ? 'cursor-pointer' : ''}`}
+					onClick={isLongMessage ? onToggleExpand : undefined}
+				>
+					<span className="whitespace-pre-wrap break-words">{displayContent}</span>
+					{isLongMessage && (
+						<button
+							onClick={(e) => {
+								e.stopPropagation()
+								onToggleExpand()
+							}}
+							className="ml-2 text-violet-600 hover:text-violet-800 text-xs"
+						>
+							{isExpanded ? 'less' : 'more'}
+						</button>
+					)}
+				</div>
+			</td>
+
+			{/* Time */}
+			<td className="px-3 py-2 font-mono text-xs text-slate-500 whitespace-nowrap">
+				{new Date(message.timestamp).toLocaleTimeString()}
+			</td>
+
+			{/* Status */}
+			<td className="px-3 py-2 text-center">
+				<StatusBadge consumed={message.consumed} />
+			</td>
+		</tr>
+	)
+}
+
+function AgentBadge({
+	agentId,
+	agentName,
+}: {
+	agentId: string
+	agentName: string
+}) {
+	const isSpecial = agentId === 'user' || agentId === 'orchestrator' || agentId === 'communicator'
+
+	if (isSpecial) {
+		return (
+			<span
+				className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${
+					agentId === 'user'
+						? 'bg-blue-100 text-blue-700'
+						: 'bg-purple-100 text-purple-700'
+				}`}
+			>
+				<span className="truncate max-w-24" title={agentName}>
+					{agentName}
+				</span>
+			</span>
+		)
+	}
+
+	return (
+		<DebugLink
+			to={`agents/${agentId}`}
+			className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-700 hover:bg-slate-200"
+		>
+			<span className="truncate max-w-24" title={agentName}>
+				{agentName}
+			</span>
+		</DebugLink>
+	)
+}
+
+function StatusBadge({ consumed }: { consumed: boolean }) {
+	if (consumed) {
+		return (
+			<span className="inline-flex items-center gap-1 text-xs text-slate-500">
+				<CheckIcon />
+				<span>Read</span>
+			</span>
+		)
+	}
+
+	return (
+		<span className="inline-flex items-center gap-1 text-xs text-blue-600">
+			<span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+			<span>Pending</span>
+		</span>
+	)
+}
+
+function ArrowIcon() {
+	return (
+		<svg className="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+		</svg>
+	)
+}
+
+function CheckIcon() {
+	return (
+		<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+		</svg>
+	)
+}

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

@@ -0,0 +1,193 @@
+import { useCallback, useState } from 'react'
+import type { ServiceEntry, ServiceStatus } from '@roj-ai/shared'
+import { api } from '@roj-ai/client'
+import { useDebugSessionId } from '../DebugNavigation'
+import { useEventStore } from '../../../stores/event-store'
+
+const statusColors: Record<ServiceStatus, string> = {
+	stopped: 'bg-slate-100 text-slate-700',
+	starting: 'bg-yellow-100 text-yellow-700',
+	ready: 'bg-green-100 text-green-700',
+	stopping: 'bg-orange-100 text-orange-700',
+	failed: 'bg-red-100 text-red-700',
+	paused: 'bg-blue-100 text-blue-700',
+}
+
+function formatTimestamp(ts: number | undefined): string {
+	if (ts === undefined) return '-'
+	return new Date(ts).toLocaleTimeString()
+}
+
+export function ServicesPage() {
+	const sessionId = useDebugSessionId()
+	const services = useEventStore((s) => s.servicesProjectionState.services)
+
+	if (!sessionId) return null
+
+	if (services.size === 0) {
+		return (
+			<div className="bg-white rounded-md border border-slate-200 p-8 text-center text-slate-500 text-sm">
+				No services configured
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="bg-white rounded-md border border-slate-200 overflow-hidden">
+				<table className="w-full text-sm">
+					<thead>
+						<tr className="border-b border-slate-200 bg-slate-50 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
+							<th className="px-4 py-3">Service</th>
+							<th className="px-4 py-3">Status</th>
+							<th className="px-4 py-3">Port</th>
+							<th className="px-4 py-3">Started</th>
+							<th className="px-4 py-3">Ready</th>
+							<th className="px-4 py-3">Stopped</th>
+							<th className="px-4 py-3">Error</th>
+							<th className="px-4 py-3">Actions</th>
+						</tr>
+					</thead>
+					<tbody className="divide-y divide-slate-100">
+						{[...services.entries()].map(([key, entry]) => (
+							<ServiceRow key={key} entry={entry} sessionId={sessionId} />
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	)
+}
+
+function ServiceRow({ entry, sessionId }: { entry: ServiceEntry; sessionId: string }) {
+	const [loading, setLoading] = useState<string | null>(null)
+	const [error, setError] = useState<string | null>(null)
+	const [logs, setLogs] = useState<string[] | null>(null)
+
+	const callAction = useCallback(async (action: 'start' | 'stop' | 'restart') => {
+		setLoading(action)
+		setError(null)
+		try {
+			const result = action === 'start'
+				? await api.call('services.start', { sessionId, serviceType: entry.serviceType })
+				: action === 'stop'
+					? await api.call('services.stop', { sessionId, serviceType: entry.serviceType })
+					: await api.call('services.restart', { sessionId, serviceType: entry.serviceType })
+
+			if (!result.ok) {
+				setError(result.error.message)
+			}
+		} catch (e) {
+			setError(e instanceof Error ? e.message : 'Unknown error')
+		} finally {
+			setLoading(null)
+		}
+	}, [sessionId, entry.serviceType])
+
+	const fetchLogs = useCallback(async () => {
+		if (logs !== null) {
+			setLogs(null)
+			return
+		}
+		setLoading('logs')
+		setError(null)
+		try {
+			const result = await api.call('services.logs', { sessionId, serviceType: entry.serviceType, lines: 100 })
+			if (result.ok) {
+				setLogs(result.value.lines)
+			} else {
+				setError(result.error.message)
+			}
+		} catch (e) {
+			setError(e instanceof Error ? e.message : 'Unknown error')
+		} finally {
+			setLoading(null)
+		}
+	}, [sessionId, entry.serviceType, logs])
+
+	const isRunning = entry.status === 'ready' || entry.status === 'starting'
+	const isStopped = entry.status === 'stopped' || entry.status === 'failed'
+
+	return (
+		<>
+			<tr className="hover:bg-slate-50 transition-colors">
+				<td className="px-4 py-3 font-mono font-medium text-slate-900">{entry.serviceType}</td>
+				<td className="px-4 py-3">
+					<span className={`inline-block text-xs px-2 py-0.5 rounded-full font-medium ${statusColors[entry.status]}`}>
+						{entry.status}
+					</span>
+				</td>
+				<td className="px-4 py-3 font-mono text-slate-600">{entry.port ?? '-'}</td>
+				<td className="px-4 py-3 text-slate-500">{formatTimestamp(entry.startedAt)}</td>
+				<td className="px-4 py-3 text-slate-500">{formatTimestamp(entry.readyAt)}</td>
+				<td className="px-4 py-3 text-slate-500">{formatTimestamp(entry.stoppedAt)}</td>
+				<td className="px-4 py-3 text-red-600 text-xs">{entry.error ?? '-'}</td>
+				<td className="px-4 py-3">
+					<div className="flex items-center gap-1.5">
+						{isStopped && (
+							<ActionButton onClick={() => callAction('start')} loading={loading === 'start'} color="green">
+								Start
+							</ActionButton>
+						)}
+						{isRunning && (
+							<ActionButton onClick={() => callAction('stop')} loading={loading === 'stop'} color="red">
+								Stop
+							</ActionButton>
+						)}
+						{isRunning && (
+							<ActionButton onClick={() => callAction('restart')} loading={loading === 'restart'} color="yellow">
+								Restart
+							</ActionButton>
+						)}
+						<ActionButton onClick={fetchLogs} loading={loading === 'logs'} color="slate" active={logs !== null}>
+							Logs
+						</ActionButton>
+					</div>
+					{error && <div className="mt-1 text-xs text-red-600">{error}</div>}
+				</td>
+			</tr>
+			{logs !== null && (
+				<tr>
+					<td colSpan={8} className="px-4 py-2 bg-slate-900">
+						<div className="max-h-80 overflow-auto font-mono text-xs text-slate-300 whitespace-pre-wrap">
+							{logs.length === 0
+								? <span className="text-slate-500">No logs available</span>
+								: logs.join('\n')}
+						</div>
+					</td>
+				</tr>
+			)}
+		</>
+	)
+}
+
+const buttonColors = {
+	green: 'bg-green-50 text-green-700 hover:bg-green-100 border-green-200',
+	red: 'bg-red-50 text-red-700 hover:bg-red-100 border-red-200',
+	yellow: 'bg-yellow-50 text-yellow-700 hover:bg-yellow-100 border-yellow-200',
+	slate: 'bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200',
+}
+
+function ActionButton({
+	onClick,
+	loading,
+	color,
+	active,
+	children,
+}: {
+	onClick: () => void
+	loading: boolean
+	color: keyof typeof buttonColors
+	active?: boolean
+	children: React.ReactNode
+}) {
+	return (
+		<button
+			onClick={onClick}
+			disabled={loading}
+			className={`px-2 py-1 text-xs font-medium rounded border transition-colors disabled:opacity-50 ${active ? 'ring-1 ring-offset-1 ring-slate-400' : ''} ${buttonColors[color]}`}
+		>
+			{loading ? '...' : children}
+		</button>
+	)
+}