Concept: What is the Web IDE?

The Web IDE is a browser-based editor that runs on your laptop, not on the robot. It gives you a visual flowchart editor, a Python code editor, and real-time tools for running and inspecting missions. Understanding one key fact up front saves a lot of confusion:

There are two backends — the local IDE backend (laptop) and the Pi server (robot). They own completely different things and you cannot swap them.

When something gives a 404, the first question is always: “Did the request go to the right backend?”

The Three-Tier Model

graph TD
    Browser["Browser
(Angular App)"]
    IDE["Local IDE Backend
localhost:4200
(raccoon_cli/ide/)"]
    Pi["Pi Server
robot:8421
(raccoon_cli/server/)"]
    FS["Project files
on laptop disk"]
    HW["Robot hardware
(motors, servos, sensors)"]

    Browser -- "localApi() — project CRUD,
missions, steps, IK/FK" --> IDE
    Browser -- "deviceApi() — live execution,
hardware commands" --> Pi
    IDE -- "reads/writes" --> FS
    Pi -- "controls" --> HW

The split is intentional: the IDE backend runs locally so it works offline (you can browse steps, edit flowcharts, and run simulations without a robot connected). The Pi server is only needed for real robot execution.

Starting the Web IDE

raccoon web          # serves on localhost:4200, auto-opens browser
raccoon web -p 8080  # custom port

raccoon web starts the FastAPI IDE backend (raccoon_cli/ide/app.py), which also serves the pre-built Angular frontend as static files under /WebIDE/. When run inside a project directory, the browser opens directly to that project.

During Angular development (npm start), the Angular dev server runs on port 4300 and proxies API calls to the backend on 4200. Production (raccoon web) serves everything from 4200.

How a Flowchart Edit Becomes Python

This is the core content-creation loop:

flowchart LR
    FC["Flowchart canvas
(add/connect nodes)"]
    Save["Ctrl+S / auto-save"]
    MBuild["Mission builder
(mission-builder.ts)
Angular → ParsedMission"]
    Backend["IDE backend
/api/v1/missions/
MissionCodeGenerator"]
    Py["mission_xyz.py
on disk"]
    Run["raccoon run
or Debug button"]

    FC --> Save --> MBuild --> Backend --> Py --> Run

1. You drag steps onto the flowchart canvas and connect them.
2. Ctrl+S (or auto-save) serializes the current canvas to a ParsedMission JSON payload and PUTs it to the IDE backend.
3. The IDE backend’s MissionCodeGenerator renders the ParsedMission into valid Python — importing the correct raccoon DSL functions, building the seq() / parallel() call tree, and writing the class.
4. The generated .py file lands on disk in your project’s src/missions/ directory.
5. When you press Run or raccoon run, this Python file is what executes (after codegen and sync).

The flowchart is the source of truth for missions you build visually. If you also edit the Python directly in the Code view, be aware that the next flowchart save will overwrite your manual changes.

Running and Debugging a Mission

sequenceDiagram
    participant User
    participant Browser as Browser (Angular)
    participant IDE as IDE Backend (laptop :4200)
    participant Pi as Pi Server (robot :8421)

    User->>Browser: Press Run (simulated config)
    Browser->>IDE: POST /api/v1/device/run (simulate=real)
    IDE->>IDE: raccoon run --simulate=real
    IDE-->>Browser: WebSocket: log lines + sim_pose events
    Browser->>Browser: Table Visualization updates live

    User->>Browser: Press Run (remote config)
    Browser->>IDE: POST /api/v1/device/run (target=remote)
    IDE->>Pi: SSH raccoon run on robot
    Pi-->>IDE: stdout/stderr stream
    IDE-->>Browser: WebSocket: log lines
    Browser->>Browser: Logs panel shows live output

    User->>Browser: Press Debug button
    Browser->>IDE: POST /api/v1/device/run (simulate=fast, mission=selected)
    IDE->>IDE: heuristic local simulator, single mission
    IDE-->>Browser: WebSocket: breakpoint events
    Browser->>Browser: Flowchart highlights paused node

The simulation mode is chosen automatically:

Step Indexing

The Step Library panel lists all available steps. These come from the local IDE backend, not the robot:

graph LR
    RaccoonLib["Installed raccoon-lib
(Python package on laptop)"]
    ProjectSteps["Project src/
(your @dsl steps)"]
    SDS["StepDiscoveryService
(IDE backend)"]
    Index["In-memory step index"]
    Browser["Browser
Step Library panel"]

    RaccoonLib --> SDS
    ProjectSteps --> SDS
    SDS --> Index
    Index --> Browser

The StepDiscoveryService scans the locally installed raccoon package for @dsl-decorated functions and also scans your project’s src/ directory for custom steps. The result is an in-memory index served to the browser over /api/v1/steps. No robot connection is needed to browse or search steps.

Custom steps decorated with @dsl appear automatically in the Step Library. Unannotated helper functions remain private (not shown in the UI).

What Runs Locally vs. On the Robot

Key Source Locations

Cross-references

• Starting the Web IDE — raccoon web options
• Interface Overview — panel layout and controls
• Running a Mission — run/debug flow in detail
• Run Configurations — how to configure targets and flags
• Advanced Internals — backend routing, map format, replay