Frontend Deep Dive

Console architecture

The React/Vite console uses TanStack Query hooks over a typed createSandboxClient. Panels correspond directly to API capabilities: connection, session, execution, files, artifacts, and snapshots. The store holds selected session/workspace context; query invalidation refreshes server state after mutations.

API client behavior

The client centralizes base URL and optional bearer token headers, converts non-2xx responses into SandboxApiError, and exposes typed methods for lifecycle, exec logs, files, artifacts, GC, and snapshots. Binary file operations use direct fetch responses while JSON operations use the common request helper.

UX states

The console should make backend state visible: runtime availability, readiness, session status, execution status, file lists, artifact hashes, and snapshot metadata. Error status and detail are surfaced by the client so an operator can distinguish unauthorized, not found, invalid state, and unavailable backend cases.

Risks

The console is an operational UI, not an authorization boundary. It must not imply that hiding a panel prevents API access. Long-running command polling, archive size feedback, and stale session handling are the main UX areas to harden.