wicked-studio README

The project's README from github.com/mikeparcewski/wicked-studio. As one markdown file: README.md.

wicked-studio

npm · CI · License: MIT

The cockpit for AI coding agents you can actually trust. wicked-studio is a browser UI for running coding-agent CLIs (Claude Code, Codex, Antigravity, and more) as governed workers: you give an intent, the agents do the work behind verification gates, and you approve the decisions that matter — with the evidence behind every "done" one click away.

It's the human surface of the wicked platform. The agents run headless in the background; studio is where you point them at your repos, watch them work in real time, unblock them when they need a human, and see what actually happened.


Why you'd want it

Coding agents are fast but unsupervised — they assert "done," grade their own work, and bury the reasoning in a scrollback you'll never read. wicked-studio flips that:

What you can do


Get started

Studio ships inside wicked-crew — one command gives you the API, the engine, and this UI on a single port:

npx wicked-crew serve
# then open the URL it prints (default http://127.0.0.1:7701)

That's the whole install for most people — no separate studio setup. Prefer a guided setup, or want the rest of the wicked family too? Use the installer:

npx wicked-installer

It installs and wires wicked-crew (which serves this UI) alongside the other wicked-* tools, across whichever coding-agent CLIs you already use.

Keeping it up to date

Studio rides along with crew, so you update it by updating crew:

npm i -g wicked-crew@latest    # or: npx wicked-installer  (updates the whole family)

Each wicked-crew release bundles the matching studio build, so a fresh crew is a fresh UI. To see what changed, check the releases.

Requirements


For developers

Studio is a Vite/React SPA and a pure HTTP/WS client of the wicked-crew daemon — it talks only to crew's published /api/v1 REST surface and /ws event stream, and imports zero crew source. The one thing the two share is the wire-contract package wicked-crew-api-types.

┌─────────────────┐     HTTP /api/v1 + WS /ws    ┌────────────────────┐
│  wicked-studio  │ ───────────────────────────▶ │ wicked-crew daemon │
│   (React SPA)   │ ◀─────────────────────────── │  API · engine ·    │
│                 │   contract: wicked-crew-api-types │  gates · evidence │
└─────────────────┘                              └────────────────────┘

Develop

npx wicked-crew serve          # a control plane on :7701 for the SPA to talk to
npm install
npm run dev                    # vite on http://127.0.0.1:4200, pointed at :7701

npm test (vitest + testing-library), npm run typecheck, npm run lint, npm run build (tsc + vite → dist/). CI runs all four on ubuntu / macos / windows for every PR.

Standalone build

You can build studio and host it yourself, pointed at any reachable daemon:

VITE_API_HOST=127.0.0.1:7701 npm run build
npx serve dist                 # any static server with SPA fallback works

The SPA finds its daemon two ways: bundled/same-origin (production) calls back to window.location.origin, so --port / CREW_PORT just work with no host baked in; standalone uses VITE_API_HOST (host:port, no scheme) fixed at build time. The daemon's loopback CORS admits any localhost / 127.0.0.1 origin, so a standalone studio drives a local daemon out of the box. e2e/studio_standalone_test.py is the scripted proof of this mode.

How crew ships this UI

The npm package publishes dist/ only. wicked-crew declares wicked-studio as a devDependency and its build:with-studio step copies node_modules/wicked-studio/dist into the daemon's serving tree, so npx wicked-crew serve is same-origin UI + API on one port (with a headless fallback when the dist is absent). A studio release therefore also bumps crew's devDep pin.

The repo also carries a data-testid selector contract (testid-inventory.json, regenerated with npm run manifest:testids and drift-checked in CI) that the test generators build against — see CLAUDE.md for the full contributor doctrine.

Contributing

  1. Fork and branch.
  2. npm install && npm run dev — SPA on :4200, daemon on :7701.
  3. npm test && npm run typecheck && npm run lint before committing.
  4. Open a PR; CI runs all four gates on ubuntu / macos / windows.

Keep the wire-contract boundary intact: all crew interaction goes through /api/v1 and /ws, never a crew-source import — if a type is missing, it lands in wicked-crew-api-types first.

Provenance

Studio was extracted from the wicked-crew monorepo (packages/studio) as its own product, preserving the full in-monorepo history via git subtree split. An earlier, pre-consolidation incarnation is archived read-only at wicked-studio-archived.

License

MIT

wicked-studio (mikeparcewski/wicked-studio)

Searching Database…

What is this?wicked-studio is a browser-based control panel for running coding-agent CLIs like Claude Code, Codex, and Antigravity as governed background workers — you give an intent, the agents work headless, and you only approve the decisions that matter, with evidence behind every 'done' one click away.
Is this a standalone app or does it need something else running?It's a Vite/React single-page app and a pure HTTP/WS client of the wicked-crew daemon — it only talks to crew's published /api/v1 REST surface and /ws event stream and imports zero crew source itself.
How do I get it running?Run `npx wicked-crew serve` — one command starts the wicked-crew API, engine, and this studio UI together on a single port, so most people never set up studio separately.
What do I need installed first?Node.js 22+ and npm 10+, a running wicked-crew daemon (v0.7.0+, bundled automatically by the serve command), and a modern browser.
Does studio work without the wicked-crew daemon?No — studio has no agent logic of its own; it needs a running wicked-crew daemon to do anything, whether that's the bundled one or a standalone daemon you point it at.
What browsers and operating systems does it run on?Any modern browser — Chrome, Edge, Firefox, or Safari — on macOS, Linux, or Windows; CI also builds and tests studio on all three OSes.
How does studio make sure 'done' is actually true?Every run leaves transcripts, diffs, and a downloadable evidence bundle, and the evaluator is never the creator — studio shows you the gate outcomes rather than grading the work itself.
What can I do with the code graph feature?After you register a repo, studio builds a code graph you can explore for blast-radius analysis on any symbol, hotspots, a domain/requirements view, and a searchable map of what calls what.
What happens when an agent run needs a human?It surfaces as a gate in the run timeline where you can approve, approve with a steering note, or reject, with keyboard batch triage when several gates pile up and desktop notifications so you don't have to watch a terminal.
Can I compare answers from multiple agent CLIs at once?Yes — you can fan one question out to every 'warm' CLI you have configured and compare their answers side by side.
Size
29.5 MB
Stars
162
Age
2mo
Commits · 90 Days