@roj-ai/debug 0.0.2

package/dist/components/debug/DebugContext.d.ts

@@ -0,0 +1,10 @@
+import type { SessionId } from '@roj-ai/shared';
+export interface DebugContextValue {
+    sessionId: SessionId;
+    params: Record<string, string | undefined>;
+    navigate: (subpath: string) => void;
+    createHref: (subpath: string) => string;
+    isActive: (subpath: string) => boolean;
+}
+export declare const DebugContext: import("react").Context<DebugContextValue | null>;
+export declare function useDebugContext(): DebugContextValue;

package/dist/components/debug/DebugNavigation.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Unified navigation utilities for debug UI.
+ *
+ * All navigation goes through DebugContext, which is provided by the host app
+ * (admin via buzola, worker SPA via react-router, etc.).
+ */
+import type { SessionId } from '@roj-ai/shared';
+import type { ReactNode } from 'react';
+/**
+ * Get the session ID from the debug context.
+ */
+export declare function useDebugSessionId(): SessionId;
+/**
+ * Get route params from the debug context.
+ */
+export declare function useDebugParams<T extends Record<string, string | undefined>>(): T;
+/**
+ * Navigate to a debug subpath (e.g., "agents/abc123", "llm-calls/xyz").
+ */
+export declare function useDebugNavigate(): (subpath: string) => void;
+/**
+ * Link component for debug navigation.
+ * Renders an <a> tag with proper href for right-click/open-in-new-tab support.
+ */
+export declare function DebugLink({ to, className, children }: {
+    to: string;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/DebugShell.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export interface NavItem {
+    to: string;
+    label: string;
+    icon: React.FC;
+}
+export declare const navItems: NavItem[];
+interface DebugShellProps {
+    sessionId: string;
+    children: ReactNode;
+    className?: string;
+    renderNavItem: (item: NavItem) => ReactNode;
+    sidebarFooter?: ReactNode;
+}
+export declare function DebugShell({ sessionId, children, className, renderNavItem, sidebarFooter }: DebugShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function getNavItemClassName(isActive: boolean): string;
+export declare function BackIcon(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/LLMCallDetail.d.ts

@@ -0,0 +1,7 @@
+interface LLMCallDetailProps {
+    sessionId: string;
+    callId: string;
+    onClose?: () => void;
+}
+export declare function LLMCallDetail({ sessionId, callId, onClose }: LLMCallDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/TimelineDetailInspector.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineItem } from '@roj-ai/shared';
+export declare function TimelineDetailInspector({ sessionId, item, onNavigate, }: {
+    sessionId: string;
+    item: TimelineItem;
+    onNavigate?: (path: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/communication/CommunicationDiagram.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramData } from './types';
+interface CommunicationDiagramProps {
+    data: DiagramData & {
+        timestampToY: (timestamp: number) => number;
+        formatIdleDuration: (ms: number) => string;
+    };
+}
+export declare function CommunicationDiagram({ data }: CommunicationDiagramProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/DiagramHeader.d.ts

@@ -0,0 +1,7 @@
+import type { DiagramParticipant } from './types';
+interface DiagramHeaderProps {
+    participants: DiagramParticipant[];
+    zoom: number;
+}
+export declare function DiagramHeader({ participants, zoom }: DiagramHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/ParticipantLane.d.ts

@@ -0,0 +1,7 @@
+import type { DiagramParticipant } from './types';
+interface ParticipantLaneProps {
+    participant: DiagramParticipant;
+    totalHeight: number;
+}
+export declare function ParticipantLane({ participant, totalHeight }: ParticipantLaneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/TimeAxis.d.ts

@@ -0,0 +1,9 @@
+import type { TimeSegment } from './types';
+interface TimeAxisProps {
+    segments: TimeSegment[];
+    sessionStartTime: number;
+    timestampToY: (timestamp: number) => number;
+    totalHeight: number;
+}
+export declare function TimeAxis({ segments, sessionStartTime, timestampToY, totalHeight }: TimeAxisProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/elements/IdleGap.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramParticipant, TimeSegment } from '../types';
+interface IdleGapProps {
+    segment: TimeSegment;
+    participants: DiagramParticipant[];
+    yPosition: number;
+    formatDuration: (ms: number) => string;
+}
+export declare function IdleGap({ segment, participants, yPosition, formatDuration }: IdleGapProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/elements/LLMBlock.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramLLMBlock, DiagramParticipant } from '../types';
+interface LLMBlockProps {
+    block: DiagramLLMBlock;
+    participants: DiagramParticipant[];
+    onHover?: (block: DiagramLLMBlock | null, x: number, y: number) => void;
+    onClick?: (block: DiagramLLMBlock) => void;
+}
+export declare function LLMBlock({ block, participants, onHover, onClick }: LLMBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/debug/communication/elements/MessageArrow.d.ts

@@ -0,0 +1,10 @@
+import type { DiagramMessage, DiagramParticipant } from '../types';
+interface MessageArrowProps {
+    message: DiagramMessage;
+    participants: DiagramParticipant[];
+    showLabel?: boolean;
+    onHover?: (message: DiagramMessage | null, x: number, y: number) => void;
+    onClick?: (message: DiagramMessage) => void;
+}
+export declare function MessageArrow({ message, participants, showLabel, onHover, onClick }: MessageArrowProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/debug/communication/elements/ToolBlock.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramParticipant, DiagramToolBlock } from '../types';
+interface ToolBlockProps {
+    block: DiagramToolBlock;
+    participants: DiagramParticipant[];
+    onHover?: (block: DiagramToolBlock | null, x: number, y: number) => void;
+    onClick?: (block: DiagramToolBlock) => void;
+}
+export declare function ToolBlock({ block, participants, onHover, onClick }: ToolBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/debug/communication/hooks/useDiagramData.d.ts

@@ -0,0 +1,12 @@
+import type { AgentTreeNode } from '@roj-ai/shared';
+import type { DomainEvent } from '@roj-ai/sdk';
+import type { DiagramData } from '../types';
+interface UseDiagramDataProps {
+    events: DomainEvent[];
+    agents: AgentTreeNode[];
+}
+export declare function useDiagramData({ events, agents }: UseDiagramDataProps): DiagramData & {
+    timestampToY: (timestamp: number) => number;
+    formatIdleDuration: (ms: number) => string;
+};
+export {};

package/dist/components/debug/communication/hooks/useTimeCompression.d.ts

@@ -0,0 +1,7 @@
+import type { TimeCompressionConfig, TimeSegment } from '../types';
+export declare function useTimeCompression(timestamps: number[], config?: Partial<TimeCompressionConfig>): {
+    segments: TimeSegment[];
+    totalHeight: number;
+    timestampToY: (timestamp: number) => number;
+    formatIdleDuration: (ms: number) => string;
+};

package/dist/components/debug/communication/hooks/useZoomPan.d.ts

@@ -0,0 +1,11 @@
+import type { ZoomPanState } from '../types';
+export declare function useZoomPan(totalHeight: number): {
+    state: ZoomPanState;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    toggleAutoScroll: () => void;
+    handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+    handleWheel: (e: React.WheelEvent<HTMLDivElement>) => void;
+};

package/dist/components/debug/communication/popovers/ElementPopover.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverElement } from '../types';
+interface ElementPopoverProps {
+    element: PopoverElement;
+    x: number;
+    y: number;
+}
+export declare function ElementPopover({ element, x, y }: ElementPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/debug/communication/types.d.ts

@@ -0,0 +1,136 @@
+import type { AgentId, LLMCallId, ToolCallId } from '@roj-ai/sdk';
+export type ParticipantRole = 'user' | 'communicator' | 'orchestrator' | 'worker';
+export type ParticipantStatus = 'idle' | 'thinking' | 'responding' | 'waiting_for_user' | 'error' | 'paused';
+export interface DiagramParticipant {
+    id: AgentId | 'user';
+    name: string;
+    role: ParticipantRole;
+    spawnedAt: number;
+    status: ParticipantStatus;
+    columnIndex: number;
+}
+export interface DiagramMessage {
+    id: string;
+    fromId: AgentId | 'user';
+    toId: AgentId | 'user';
+    timestamp: number;
+    content: string;
+    yPosition: number;
+}
+export type BlockStatus = 'running' | 'success' | 'error';
+export interface DiagramLLMBlock {
+    id: string;
+    llmCallId?: LLMCallId;
+    participantId: AgentId;
+    startTime: number;
+    endTime?: number;
+    status: BlockStatus;
+    model?: string;
+    tokens?: number;
+    yStart: number;
+    yEnd: number;
+}
+export interface DiagramToolBlock {
+    id: string;
+    toolCallId: ToolCallId;
+    participantId: AgentId;
+    toolName: string;
+    startTime: number;
+    endTime?: number;
+    status: BlockStatus;
+    yStart: number;
+    yEnd: number;
+}
+export type TimeSegmentType = 'active' | 'idle';
+export interface TimeSegment {
+    startTime: number;
+    endTime: number;
+    type: TimeSegmentType;
+    displayHeight: number;
+    actualDuration: number;
+}
+export interface TimeCompressionConfig {
+    pixelsPerSecond: number;
+    maxIdleHeight: number;
+    idleThresholdMs: number;
+}
+export interface DiagramData {
+    participants: DiagramParticipant[];
+    messages: DiagramMessage[];
+    llmBlocks: DiagramLLMBlock[];
+    toolBlocks: DiagramToolBlock[];
+    timeSegments: TimeSegment[];
+    totalHeight: number;
+    sessionStartTime: number;
+}
+export interface ZoomPanState {
+    zoom: number;
+    scrollY: number;
+    autoScroll: boolean;
+}
+export type PopoverElement = {
+    type: 'message';
+    data: DiagramMessage;
+} | {
+    type: 'llm';
+    data: DiagramLLMBlock;
+} | {
+    type: 'tool';
+    data: DiagramToolBlock;
+} | {
+    type: 'idle';
+    data: TimeSegment;
+};
+export interface PopoverState {
+    element: PopoverElement | null;
+    x: number;
+    y: number;
+}
+export declare const LAYOUT: {
+    readonly timeAxisWidth: 60;
+    readonly participantWidth: 100;
+    readonly participantGap: 40;
+    readonly headerHeight: 56;
+    readonly laneLineWidth: 1;
+    readonly blockWidth: 70;
+    readonly blockMinHeight: 24;
+    readonly idleGapHeight: 32;
+    readonly padding: 20;
+    readonly messageArrowOffset: 6;
+};
+export declare const COLORS: {
+    readonly message: {
+        readonly stroke: "stroke-blue-400";
+        readonly fill: "fill-blue-50";
+        readonly text: "text-blue-600";
+    };
+    readonly llm: {
+        readonly stroke: "stroke-violet-300";
+        readonly fill: "fill-violet-50";
+        readonly fillRunning: "fill-violet-100";
+        readonly text: "text-violet-600";
+    };
+    readonly tool: {
+        readonly stroke: "stroke-teal-300";
+        readonly fill: "fill-teal-50";
+        readonly fillRunning: "fill-teal-100";
+        readonly text: "text-teal-600";
+    };
+    readonly error: {
+        readonly stroke: "stroke-red-300";
+        readonly fill: "fill-red-50";
+        readonly text: "text-red-600";
+    };
+    readonly idle: {
+        readonly stroke: "stroke-slate-200";
+        readonly fill: "fill-slate-50";
+        readonly text: "text-slate-400";
+    };
+    readonly participant: {
+        readonly user: "text-blue-600";
+        readonly communicator: "text-emerald-600";
+        readonly orchestrator: "text-violet-600";
+        readonly worker: "text-slate-600";
+    };
+    readonly lane: "stroke-slate-100";
+};

package/dist/components/debug/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Debug Components Index
+ *
+ * Re-exports all debug-related components for external use.
+ */
+export { DebugContext, useDebugContext, type DebugContextValue } from './DebugContext';
+export { DebugLink, useDebugNavigate, useDebugParams, useDebugSessionId } from './DebugNavigation';
+export { BackIcon, DebugShell, getNavItemClassName, navItems, type NavItem } from './DebugShell';
+export { LLMCallDetail } from './LLMCallDetail';
+export { AgentDetailPage, AgentsPage, CommunicationPage, DashboardPage, EventsPage, FilesPage, LLMCallPage, LLMCallsPage, LogsPage, MailboxPage, ServicesPage, TimelinePage, UserChatPage, } from './pages';
+export { CommunicationDiagram } from './communication/CommunicationDiagram';

package/dist/components/debug/pages/AgentDetailPage.d.ts

@@ -0,0 +1,3 @@
+export declare function AgentDetailPage({ agentId: agentIdProp, }?: {
+    agentId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/AgentsPage.d.ts

@@ -0,0 +1 @@
+export declare function AgentsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/CommunicationPage.d.ts

@@ -0,0 +1 @@
+export declare function CommunicationPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/DashboardPage.d.ts

@@ -0,0 +1 @@
+export declare function DashboardPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/EventsPage.d.ts

@@ -0,0 +1 @@
+export declare function EventsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/FilesPage.d.ts

@@ -0,0 +1 @@
+export declare function FilesPage(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/debug/pages/LLMCallPage.d.ts

@@ -0,0 +1 @@
+export declare function LLMCallPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/LLMCallsPage.d.ts

@@ -0,0 +1 @@
+export declare function LLMCallsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/LogsPage.d.ts

@@ -0,0 +1 @@
+export declare function LogsPage(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/debug/pages/MailboxPage.d.ts

@@ -0,0 +1 @@
+export declare function MailboxPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/ServicesPage.d.ts

@@ -0,0 +1 @@
+export declare function ServicesPage(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/debug/pages/TimelinePage.d.ts

@@ -0,0 +1 @@
+export declare function TimelinePage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/UserChatPage.d.ts

@@ -0,0 +1 @@
+export declare function UserChatPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/debug/pages/index.d.ts

@@ -0,0 +1,13 @@
+export { AgentDetailPage } from './AgentDetailPage';
+export { DashboardPage } from './DashboardPage';
+export { AgentsPage } from './AgentsPage';
+export { CommunicationPage } from './CommunicationPage';
+export { EventsPage } from './EventsPage';
+export { LLMCallPage } from './LLMCallPage';
+export { LLMCallsPage } from './LLMCallsPage';
+export { MailboxPage } from './MailboxPage';
+export { TimelinePage } from './TimelinePage';
+export { UserChatPage } from './UserChatPage';
+export { FilesPage } from './FilesPage';
+export { LogsPage } from './LogsPage';
+export { ServicesPage } from './ServicesPage';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @roj-ai/debug
+ *
+ * React debug UI for session event inspection — extracted from @roj-ai/client.
+ */
+export { selectAgentTree, selectGlobalMailbox, selectMetrics, selectTimeline, useAgentDetail, useAgentTree, useChatDebug, useEvents, useEventStore, useGlobalMailbox, useMetrics, useSessionInfo, useTimeline, } from './stores/event-store';
+export { EventPollingProvider, useEventPolling } from './providers/EventPollingProvider';
+export { AgentDetailPage, AgentsPage, BackIcon, CommunicationDiagram, CommunicationPage, DashboardPage, DebugContext, DebugLink, DebugShell, EventsPage, FilesPage, getNavItemClassName, LLMCallDetail, LLMCallPage, LLMCallsPage, LogsPage, MailboxPage, navItems, ServicesPage, TimelinePage, useDebugContext, useDebugNavigate, useDebugParams, useDebugSessionId, UserChatPage, } from './components/debug';
+export type { DebugContextValue, NavItem } from './components/debug';

package/dist/lib/domain-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Client-specific domain utilities.
+ */
+/**
+ * Estimate token count for a text string.
+ */
+export declare function estimateTokens(text: string): number;

package/dist/providers/EventPollingProvider.d.ts

@@ -0,0 +1,27 @@
+interface EventPollingProviderProps {
+    sessionId: string;
+    children: React.ReactNode;
+}
+/**
+ * Provider component that manages event polling for a session.
+ *
+ * When mounted, it loads the session's events and starts polling for new events.
+ * When unmounted (e.g., navigating away), it stops polling and resets the store.
+ *
+ * Usage:
+ * ```tsx
+ * <EventPollingProvider sessionId={sessionId}>
+ *   <DebugViews />
+ * </EventPollingProvider>
+ * ```
+ */
+export declare function EventPollingProvider({ sessionId, children }: EventPollingProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to initialize event polling for a session.
+ * Use this instead of EventPollingProvider if you want more control.
+ */
+export declare function useEventPolling(sessionId: string | undefined): {
+    isLoading: boolean;
+    error: string | null;
+};
+export {};

package/dist/stores/event-store.d.ts

@@ -0,0 +1,93 @@
+import type { AgentId } from '@roj-ai/shared';
+import type { DomainEvent } from '@roj-ai/sdk';
+import { type AgentDetailProjectionState, type AgentRegistryState, type AgentTreeNode, type AgentTreeProjectionState, type ChatDebugState, type DebugChatMessage, type GetAgentDetailResponse, type GetMetricsResponse, type GlobalMailboxMessage, type MailboxState, type MetricsState, type ServicesProjectionState, type SessionInfoState, type TimelineItem, type TimelineState } from '@roj-ai/shared';
+/**
+ * Event store for managing session events and derived state.
+ *
+ * This store:
+ * - Loads and polls for events from the server
+ * - Applies events incrementally to projection states (no SessionState needed)
+ * - Provides selectors for derived data (agent tree, timeline, mailbox, metrics)
+ *
+ * All projections are computed incrementally - adding a new event only updates
+ * the affected projection state, not rebuilds from scratch.
+ */
+interface EventStoreState {
+    sessionId: string | null;
+    events: DomainEvent[];
+    lastIndex: number;
+    isLoading: boolean;
+    error: string | null;
+    sessionInfoState: SessionInfoState;
+    agentRegistryState: AgentRegistryState;
+    agentTreeProjectionState: AgentTreeProjectionState;
+    agentDetailProjectionState: AgentDetailProjectionState;
+    servicesProjectionState: ServicesProjectionState;
+    metricsState: MetricsState;
+    timelineState: TimelineState;
+    mailboxState: MailboxState;
+    chatDebugState: ChatDebugState;
+    metrics: GetMetricsResponse;
+    timeline: TimelineItem[];
+    agentTree: AgentTreeNode[];
+    globalMailbox: GlobalMailboxMessage[];
+    chatDebugMessages: DebugChatMessage[];
+    isPolling: boolean;
+    pollIntervalMs: number;
+    loadSession: (sessionId: string) => Promise<void>;
+    fetchNewEvents: () => Promise<void>;
+    reset: () => void;
+    startPolling: () => void;
+    stopPolling: () => void;
+}
+export declare const useEventStore: import("zustand").UseBoundStore<import("zustand").StoreApi<EventStoreState>>;
+/**
+ * Get agent tree (cached in store).
+ */
+export declare function selectAgentTree(state: EventStoreState): AgentTreeNode[];
+/**
+ * Get timeline items (cached in store).
+ */
+export declare function selectTimeline(state: EventStoreState): TimelineItem[];
+/**
+ * Get global mailbox messages (cached in store).
+ */
+export declare function selectGlobalMailbox(state: EventStoreState): GlobalMailboxMessage[];
+/**
+ * Get metrics (cached in store).
+ */
+export declare function selectMetrics(state: EventStoreState): GetMetricsResponse;
+/**
+ * Hook to get agent tree (cached in store).
+ */
+export declare function useAgentTree(): AgentTreeNode[];
+/**
+ * Hook to get timeline items (cached in store).
+ */
+export declare function useTimeline(): TimelineItem[];
+/**
+ * Hook to get global mailbox messages (cached in store).
+ */
+export declare function useGlobalMailbox(): GlobalMailboxMessage[];
+/**
+ * Hook to get metrics (cached in store).
+ */
+export declare function useMetrics(): GetMetricsResponse;
+/**
+ * Hook to get raw events.
+ */
+export declare function useEvents(): DomainEvent[];
+/**
+ * Hook to get chat debug messages (cached in store).
+ */
+export declare function useChatDebug(): DebugChatMessage[];
+/**
+ * Hook to get session info (metadata from session lifecycle events).
+ */
+export declare function useSessionInfo(): SessionInfoState;
+/**
+ * Hook to get agent detail by ID.
+ * Uses useMemo to avoid creating new objects on every render.
+ */
+export declare function useAgentDetail(agentId: AgentId): GetAgentDetailResponse | null;
+export {};

package/dist/utils/format.d.ts

@@ -0,0 +1 @@
+export declare function formatDuration(ms: number): string;

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@roj-ai/debug",
+	"version": "0.0.2",
+	"type": "module",
+	"main": "./src/index.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./src/index.ts",
+			"default": "./src/index.ts"
+		}
+	},
+	"files": [
+		"src",
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"type-check": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@roj-ai/client": "^0.0.2",
+		"@roj-ai/shared": "^0.0.2",
+		"tokenx": "1.3.0",
+		"zustand": "5.0.11"
+	},
+	"devDependencies": {
+		"@roj-ai/sdk": "^0.0.2",
+		"@types/react": "19.2.14",
+		"@types/react-dom": "19.2.3",
+		"react": "19.2.4",
+		"react-dom": "19.2.4",
+		"typescript": "5.9.3"
+	},
+	"peerDependencies": {
+		"lucide-react": "*",
+		"react": "19.2.4",
+		"react-dom": "19.2.4"
+	},
+	"types": "./dist/index.d.ts"
+}

package/src/components/debug/DebugContext.tsx

@@ -0,0 +1,18 @@
+import type { SessionId } from '@roj-ai/shared'
+import { createContext, useContext } from 'react'
+
+export interface DebugContextValue {
+	sessionId: SessionId
+	params: Record<string, string | undefined>
+	navigate: (subpath: string) => void
+	createHref: (subpath: string) => string
+	isActive: (subpath: string) => boolean
+}
+
+export const DebugContext = createContext<DebugContextValue | null>(null)
+
+export function useDebugContext(): DebugContextValue {
+	const ctx = useContext(DebugContext)
+	if (!ctx) throw new Error('useDebugContext must be used within a DebugContext.Provider')
+	return ctx
+}