Deploy the empty Analyst Console

What you’re deploying

The sirt-workshop-app is a React-based analyst console that runs as a Cloudflare Worker with static assets. It’s designed for progressive enhancement — you start with an empty shell and layer in capabilities lesson by lesson.

The app uses a STATE environment variable in wrangler.jsonc to gate features. Right now it’s set to state-1-empty, which renders just the UI shell with no data connections.

Step 1: Get the workshop code

Open Command Prompt and clone the workshop repository:

git clone https://github.com/Gryczka/secops-agent-workshop.git
cd secops-agent-workshop\lesson-05-empty

The repo contains one directory per lesson. You will start in lesson-05-empty\ — the empty analyst console shell. Later lessons have their own directories you can reference if you get stuck.

Verify the directory structure:

dir

You should see: package.json, wrangler.jsonc, src\, and index.html.

Step 2: Install dependencies

Install the project dependencies:

npm install

This installs the React frontend dependencies, the Cloudflare Workers runtime types, and the wrangler CLI as a dev dependency. You should see no errors.

Step 3: Deploy to Workers

Build and deploy the app to your Cloudflare account:

npm run deploy

Watch the output — it will print your live URL:

Uploaded sirt-workshop-app (x.xx sec)
Deployed sirt-workshop-app triggers (x.xx sec)
  https://sirt-workshop-app.<your-subdomain>.workers.dev

Copy that *.workers.dev URL — this is your deployed analyst console.

Step 4: Verify the empty queue

Open the URL in your browser. You should see:

• A light-themed UI with “SIRT” in the header bar and a “SIRT L1” role badge
• A placeholder card in the main area with a lightning bolt icon and the text “Incident Queue”
• A message: “Wire up D1 in Lesson 06 to populate the incident queue with security alerts”
• A “Lesson 06” pill at the bottom of the placeholder

This is state-1-empty — the empty shell. There is no database connected yet, so there are no incidents to show. The full UI scaffolding (queue, triage, action plan, execution, resolution, workflow tabs) is already present, but most screens show a similar “unlocks in Lesson X” placeholder until you wire in the required bindings.

Understanding STATE

If you open wrangler.jsonc, you’ll see an environment variable:

{
  "vars": {
    "STATE": "state-1-empty"
  }
}

This STATE variable controls which features are active in the app. The React frontend and the API routes both check STATE to decide what to render. As you progress through lessons, you’ll change this value to unlock new capabilities:

• state-1-empty — Empty queue shell (you are here)
• state-2-d1 — Queue fetches from D1
• state-3-do — Per-incident state with Durable Objects
• state-4-workers-ai — AI-powered investigation
• state-5-agent — Full agent harness
• state-6-sandbox — CLI enrichment
• state-7-dynamic-workers — Code generation

You don’t need to touch any application code for the first few lessons — just bindings and STATE.