---
id: 10-web-next-wiring
epic: walking-skeleton
title: web-next wiring — connect UX, staged progress, editor route
type: user-story
status: todo
feature: web-next
depends-on:
  [
    03-workspaces-feature-core,
    07-runner-lifecycle-events-and-realtime,
    08-discovery-feature,
    09-editor-package,
  ]
blocks: [11-flagship-e2e]
created: 2026-07-12T10:24:14Z
---

## Goal

Wire the skeleton into `apps/web-next`: workspace list + connect form + staged progress (cloning → installing → scanning → starting preview, with named error states), realtime push of runner status, feature routers composed into the appRouter, `bindAll()` for both features, and the editor route `/w/[workspace]` hosting the board (PRD Q2 — a real route, the editor's permanent home).

## Why

This story is where the user stories become visible: honest staged progress instead of a hung spinner (user story 2, ui-gap §5), a clear named error state instead of a blank board (user story 5), and the real component rendered by the repo's own toolchain on a real route (user story 3). Dev-seed mode + the process provisioner keep `pnpm dev` + fixtures free of cloud resources (user story 8).

## Done when

- `bindAll()` in `apps/web-next` binds `workspaces` + `discovery` in production and dev-seed modes; boot assertion green in both (PRD Success criteria); dev-seed + process provisioner boots with `pnpm dev` and no cloud resources.
- Both feature routers are composed into the appRouter; schemas imported from the use-case files, never redefined inline.
- Workspace list + connect form (name + git URL + PAT) built from feature `ui/` hooks + connected components per `docs/guides/building-feature-ui.md`.
- Staged progress UI driven by the realtime channel: cloning → installing → scanning → starting preview, plus adapter-ready; named error states for bad URL, bad token, install failure — never a blank board.
- Editor route `/w/[workspace]` hosts the board: registry via `getRegistry`, frame node requests `render-frame` of the discovered component with default props; clicking the component in the iframe selects it and the selection state names it.
- Stories + component tests per conformance rules.
- `pnpm typecheck && pnpm lint && pnpm test && pnpm conformance && pnpm fallow:audit && pnpm coverage:diff` all pass after each task.

## In scope

- `bindAll()` + appRouter composition + provisioner selection (process provisioner as the dev/CI default).
- Workspaces UI: list, connect form, staged progress, error states, realtime subscription.
- Editor route `/w/[workspace]` composing `@repo/editor` with registry + frame data.

## Out of scope

- Full connect UX states — org walls, trust prompt, env manager (`workspaces-and-connections`).
- The Playwright flagship spec (story 11).
- web-tanstack wiring (not in PRD scope).

## Tasks

- [ ] Wire `workspaces` + `discovery` into `apps/web-next`: `bindAll()` in production + dev-seed modes (dev-seed + process provisioner boots via `pnpm dev` with no cloud resources), feature routers composed into the appRouter, realtime channel plumbed to the browser; boot assertion green in both modes; tests.
- [ ] Add the workspace list + connect form + staged progress UI (feature `ui/` hooks + connected components per `building-feature-ui.md`): staged progress cloning → installing → scanning → starting preview driven by realtime push, named error states (bad URL, bad token, install failure — never a blank board); stories + component tests.
- [ ] Add the editor route `/w/[workspace]` hosting the board: registry via `getRegistry`, frame node requesting `render-frame` of the discovered component with default props, click-in-iframe → selection overlay + selection state naming the component; tests.