Feat: Application layer for sandbox details/inspect view

[ben-fornefeld]

Flowchart

flowchart TD

%% --------------------------
%% Server-side Components
%% --------------------------
subgraph SERVER_FETCH["Server-side Fetch"]
    direction TB
    LAYOUT["layout.tsx (server)"]
    PAGE["page.tsx (server)"]
    DETAILS_ACTION["getSandboxDetails (action)"]
    ROOT_ACTION["getSandboxRoot (action)"]

    LAYOUT -- "calls" --> DETAILS_ACTION
    PAGE   -- "calls" --> ROOT_ACTION
    DETAILS_ACTION -- "returns sandboxInfo" --> SANDBOX_PROVIDER
    ROOT_ACTION    -- "returns root entries" --> INSPECT_PROVIDER
end

%% --------------------------
%% Client Contexts
%% --------------------------
subgraph SANDBOX_CONTEXT["Sandbox Context"]
    direction TB
    SANDBOX_PROVIDER["SandboxProvider"]
    SANDBOX_STATE["Runtime State"]

    SANDBOX_PROVIDER -- "tracks lifecycle" --> SANDBOX_STATE
end

subgraph INSPECT_CONTEXT["Inspect Context"]
    direction TB
    INSPECT_PROVIDER["SandboxInspectProvider"]
    SANDBOX_INSTANCE["Sandbox Instance (connected)"]
    SANDBOX_MANAGER["SandboxManager"]
    FILESYSTEM_STORE["FilesystemStore (zustand)"]
    OPERATIONS["Operations Object"]

    INSPECT_PROVIDER -- "connects to" --> SANDBOX_INSTANCE
    INSPECT_PROVIDER -- "creates store" --> FILESYSTEM_STORE
    INSPECT_PROVIDER -- "creates with store + sandbox" --> SANDBOX_MANAGER
    INSPECT_PROVIDER -- "exposes" --> OPERATIONS

    SANDBOX_INSTANCE -- "used by" --> SANDBOX_MANAGER
    SANDBOX_MANAGER -- "writes FS data" --> FILESYSTEM_STORE
    OPERATIONS -- "delegates to" --> SANDBOX_MANAGER
    OPERATIONS -- "mutates UI flags" --> FILESYSTEM_STORE
end

%% --------------------------
%% Hook Layer
%% --------------------------
subgraph HOOKS["React Hooks"]
    direction TB
    HOOK_NODE["use-node"]
    HOOK_DIRECTORY["use-directory"]
    HOOK_FILE["use-file"]
    HOOK_CONTENT["use-content"]

    HOOK_NODE -- "subscribe to slices" --> FILESYSTEM_STORE
    HOOK_DIRECTORY -- "subscribe to slices" --> FILESYSTEM_STORE
    HOOK_FILE -- "subscribe to slices" --> FILESYSTEM_STORE
    HOOK_CONTENT -- "subscribe to slices" --> FILESYSTEM_STORE

    HOOK_NODE -- "invoke" --> OPERATIONS
    HOOK_DIRECTORY -- "invoke" --> OPERATIONS
    HOOK_FILE -- "invoke" --> OPERATIONS
    HOOK_CONTENT -- "invoke" --> OPERATIONS
end

%% --------------------------
%% UI Components
%% --------------------------
subgraph UI_COMPONENTS["UI Components"]
    direction LR
    FILE_TREE["Filesystem Tree"]
    FILE_VIEWER["File Viewer"]
    OTHER_UI["Other Components"]

    FILE_TREE   -- "trigger" --> USER_ACTIONS["User Actions"]
    FILE_VIEWER -- "trigger" --> USER_ACTIONS
    OTHER_UI    -- "trigger" --> USER_ACTIONS
end

%% --------------------------
%% Remote (E2B)
%% --------------------------
subgraph E2B_REMOTE["E2B Remote"]
    REMOTE_SANDBOX["Remote Sandbox"]
    FS_EVENTS["Filesystem Events"]

    REMOTE_SANDBOX -- "emits real-time" --> FS_EVENTS
end

%% --------------------------
%% Data Flow: User Actions
%% --------------------------
USER_ACTIONS -- "call hooks" --> OPERATIONS
OPERATIONS    -- "async calls" --> SANDBOX_MANAGER
SANDBOX_MANAGER -- "API calls" --> REMOTE_SANDBOX

%% --------------------------
%% Data Flow: Remote Events
%% --------------------------
FS_EVENTS        -- "handled by" --> SANDBOX_MANAGER
FILESYSTEM_STORE -- "triggers re-renders via" --> HOOK_NODE
HOOK_NODE        -- "provide state to" --> FILE_TREE
HOOK_DIRECTORY   -- "provide state to" --> FILE_TREE
HOOK_FILE        -- "provide state to" --> FILE_TREE
HOOK_CONTENT     -- "provide state to" --> FILE_VIEWER

%% --------------------------
%% Styling
%% --------------------------
classDef contextClass fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
classDef storeClass   fill:#E8F5E8,stroke:#388E3C,stroke-width:2px
classDef managerClass fill:#FFF3E0,stroke:#F57C00,stroke-width:2px
classDef hooksClass   fill:#FCE4EC,stroke:#C2185B,stroke-width:2px
classDef uiClass      fill:#F1F8E9,stroke:#689F38,stroke-width:2px
classDef remoteClass  fill:#FFEBEE,stroke:#D32F2F,stroke-width:2px
classDef serverClass  fill:#ECEFF1,stroke:#455A64,stroke-width:2px

class SANDBOX_PROVIDER,INSPECT_PROVIDER contextClass
class FILESYSTEM_STORE storeClass
class SANDBOX_MANAGER,OPERATIONS managerClass
class HOOK_NODE,HOOK_DIRECTORY,HOOK_FILE,HOOK_CONTENT hooksClass
class FILE_TREE,FILE_VIEWER,OTHER_UI,USER_ACTIONS uiClass
class REMOTE_SANDBOX,FS_EVENTS remoteClass
class LAYOUT,PAGE,DETAILS_ACTION,ROOT_ACTION serverClass

Loading

1. Sandbox‐level application layer (no UI yet)

   • Adds core plumbing for the forthcoming “Sandbox Inspect” feature:
     • SandboxProvider – lightweight context that exposes sandboxInfo.
     • SandboxInspectProvider – bootstraps the sandbox connection, creates a singleton FilesystemStore (Zustand), spawns a SandboxManager, and exposes an operations API for consumer hooks.
     • SandboxManager – wraps the E2B SDK, handles recursive directory watching, debounced directory/file loads, download URLs, and propagates events to the store.
     • FilesystemStore – Zustand + Immer state container for directory tree, loading/error flags, and file-content cache.
     • React hooks (use-node, use-directory, use-file, use-content) that subscribe to store slices and proxy operations.
     • Low-level helpers in lib/utils/filesystem.ts for path normalisation, joins, etc.
     • Server action get-sandbox-root.ts that returns initial directory entries for the root path.

2. Dependency updates

   • e2b @ ^1.7.1 (E2B sandbox client).
   • Removes protobuf / ConnectRPC tool-chain: deletes all .proto files, buf.gen.yaml, generated TS stubs, and related scripts.

3. Codebase clean-ups & moves

   • Removes legacy gRPC client under lib/clients/envd.
   • Relocates use-server-context.tsx to a clearer features/dashboard/server-context.tsx path.
   • Tightens typings, enables stricter TS checks in affected tests.
   • Minor .env.example additions for new E2B settings.
   • Updates GitHub workflow caching to reflect the new lockfile.

4. Config / tooling

   • bun.lock and package.json reflect the new dependencies and drop the unused gRPC ones.
   • tsconfig.json includes path aliases for the new sandbox feature.
   • Removes any ConnectRPC-specific ts-paths.

---

🗑 Removed

• All protobuf definitions & generated code.
• ConnectRPC build configs and the buf.gen.yaml.
• Legacy envd gRPC client stubs.

---

🚧 What’s NOT included

• No React UI yet – this PR purposely stops at the data layer. Components like file tree, viewer, drawers, etc. will land in the next PR once design is settled.

---

🔎 How to review

1. Start with features/dashboard/sandbox/inspect/context.tsx to understand provider wiring.
2. Inspect sandbox-manager.ts for E2B integration and debounce logic.
3. Look at filesystem/store.ts for state shape and mutations.
4. Skim the new hooks to see how the store + operations interface is consumed.
5. Confirm that removed protobuf artefacts are gone and package.json diff only contains the desired dependency churn.

Completes E2B-2478, Completes E2B-2482

[linear]

E2B-2463 Implement application layer and state abstractions

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 2:18pm
web-juliett	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 2:18pm

[linear]

E2B-2478 Sandbox connection/state management

E2B-2482 FS state management

[Copilot]

Pull Request Overview

This PR implements the application layer for a sandbox details/inspect view, migrating from a legacy gRPC-based filesystem approach to the E2B SDK. The changes introduce a complete React context-based architecture for managing sandbox filesystem state and operations, while removing all protobuf/ConnectRPC dependencies.

Key changes include:

• New sandbox inspect context architecture with SandboxProvider and SandboxInspectProvider
• E2B SDK integration with real-time filesystem watching and state management
• Zustand-based filesystem store with React hooks for UI consumption
• Legacy protobuf/gRPC client removal and dependency cleanup

Reviewed Changes

Copilot reviewed 50 out of 53 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/server/sandboxes/get-sandbox-root.ts	New server action to fetch initial directory entries using E2B SDK
src/lib/utils/filesystem.ts	Path utilities and file content type detection helpers
src/features/dashboard/sandbox/inspect/sandbox-manager.ts	Core E2B SDK wrapper managing filesystem operations and real-time events
src/features/dashboard/sandbox/inspect/filesystem/store.ts	Zustand store for filesystem state with Immer mutations
src/features/dashboard/sandbox/inspect/context.tsx	React providers connecting E2B sandbox to state management
src/features/dashboard/sandbox/inspect/hooks/*	React hooks for consuming filesystem state in UI components
src/lib/clients/envd/*	Removed legacy gRPC client files
package.json	Updated dependencies: added e2b@^1.7.1, removed ConnectRPC packages

[jakubno]

Few nits

[ben-fornefeld]

@jakubno i addressed the comments.