feat(ui): port the dev-platform operator SPA out of core web-ui (epic byte5ai/omadia#470 P2)

[Weegy]

What

Ports the Dev Platform's four operator screens out of omadia core's web-ui into a standalone Vite/React 19 SPA in packages/ui. The bundle builds into packages/plugin/ui/, ships inside the plugin ZIP, and is served by core at /p/<pluginId>/ui/ behind the /plugin-ui/<pluginId> host page that C8 added.

web-ui is untouched. This is the epic's biggest single risk, isolated in its own repo and its own package.

Fragment	Screen
#/	Hub — repos / jobs / apps / gates, tab deep-linked via #/?tab=
#/jobs/<id>	Job detail — phase rail, live SSE log, artifacts, gates
#/repos/<id>	Repo detail — budget, webhook, bind GitHub App
#/repos/new	Add-repo wizard — device flow, credential, checks

What replaced what

Core	Here	Why
next-intl	src/lib/i18n.tsx	No Next request context inside an iframe. 300 keys per locale, plain {name} interpolation, no ICU parser.
next/link, next/navigation	src/lib/router.tsx	Hash router. Same hook names, so call sites are unchanged.
@/app/_lib/api (4,827 lines)	src/lib/apiError.ts	Exactly one name was imported from it: ApiError.
framer-motion, lucide-react	dropped	Both animate or size with classes the served vocabulary does not contain.
Button, ConfirmDialog	rewritten	Core writes every variant as an arbitrary value (bg-[color:var(--accent)]). Ingest rejects that shape; bg-accent resolves to the same variable.

DevJobChatCard is deliberately not ported — it renders inside core's chat transcript, and plan.md §4.3 excludes the chat surface (H3, still undecided). The one five-line function JobDetailScreen needed from its state module is in src/lib/gates.ts.

Tailwind, constrained to what core actually serves

The ported pages carried 334 arbitrary values. All are gone. A class core never saw does not error — it renders unstyled, on the operator's screen and nowhere else — so scripts/check-ui-vocabulary.mjs gates the build with three checks:

1. No emitted stylesheet. .css is absent from the ZIP allowlist and the static router's Content-Type table; that absence is the enforcement.
2. Core's two ingest regexes, verbatim. Copied rather than imported (this repo does not depend on core's middleware); a check that were only approximately the ingest check would build green here and be rejected there.
3. A whitelist diff against vocabulary/classes.txt — 690 classes extracted from the generated stylesheet, not transcribed from the spec table. This is the half core has no counterpart for: ingest cannot see bg-blue-500, which is not an arbitrary value, merely a class that does not exist.

Packaging and nav

ui/ joins dist and migrations in build-zip's REQUIRED_DIRS, with assertions that ui/index.html exists and no stylesheet is present. Optional would mean "a build that forgot vite build ships silently, installs, activates, adds a nav entry, and 404s when the operator clicks it".

The nav entry moves from /admin/dev-platform — a page core deletes in this epic — to /plugin-ui/<id>, percent-encoded because this plugin's id is scoped.

Verification

Claim	Evidence
Typechecks	npm run typecheck, exit 0
Builds, emits no CSS	vite build; find -name '*.css' = 0
Only served classes	check-ui-vocabulary.mjs, exit 0
Rejects bad classes	fixtures for w-[137px], [&>tr]:…, bg-blue-500
Four screens render, en + de, themed	test/screens.test.tsx
Tests fail when code breaks	two mutations run, both killed
ZIP carries the bundle, no CSS	npm run package + unzip -l
Clean npm ci reproduces all of it	verified from a wiped node_modules

50 tests. package-lock.json is regenerated — it did not contain the new workspace, which would have failed npm ci in CI.

⚠️ Three core defects found — NOT fixable from this repo

Full write-up in docs/iframe-credentials.md. All three fail silently.

1. The host page's sandbox makes every authenticated call cross-origin. PluginUiFrame.tsx sets sandbox="allow-scripts allow-forms allow-popups" — no allow-same-origin — so the document has an opaque origin. Every fetch leaves with Origin: null, credentials: 'include' cannot attach the session cookie, and EventSource(withCredentials) has the same problem. All four screens are data-driven. The bundle is correct; the boundary is not, and no screen loads data in a real browser until this trust-model decision is made. Tests do not show it because they stub fetch, which has no origin.

2. The host page rejects every scoped plugin id — including this one. Its regex is /^[a-z0-9](?:[a-z0-9._-]{0,62}[a-z0-9])?$/ and its comment claims it "mirrors the plugin-id charset gate in manifestLoader". It does not: manifestLoader.ts:182 is /^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*$/, where the scope is optional but blessed. This plugin's id is @omadia/dev-platform. One-line fix in core.

3. border renders invisible. plugin-ui.source.css lines 341/346/353 use a top-level comma where @source inline() expands only braces:

@source inline("border,border-{0,2,4}");    /* emits NOTHING */
@source inline("rounded{,-none,-sm,...}");  /* works — brace form */

Verified against the committed artifact: no .border, .divide-y or .transition rule exists. Tailwind's base reset is border: 0 solid, so class="border border-border" — 27 occurrences in the ported pages — sets a colour on a zero-width border and renders invisible. plugin-ui-vocabulary.md lists all three groups as available, so the doc and the artifact disagree.

src/lib/cx.ts exports BORDER = 'border-t border-r border-b border-l' (all four are emitted, 1px each) and test/vocabulary.test.ts pins the broken state, so regenerating the vocabulary after the core fix fails that test and prompts the workaround to collapse back to 'border' rather than rotting.

Fix in core:

@source inline("border{,-0,-2,-4}");
@source inline("divide-{y,x}");
@source inline("transition{,-none,-all,-colors,-opacity,-transform}");

Test plan

• npm run typecheck — exit 0
• npm run build — exit 0, zero .css emitted
• npm run test -w packages/ui — 50/50
• npm run lint:vocabulary — exit 0
• npm run package -w packages/plugin — ZIP contains ui/index.html, zero stylesheets
• mutation check — dropping data-theme and faking border into the vocabulary both turn the suite red
• browser verification — blocked on core defects 1 and 2

---

_{Supersedes #2, which accidentally carried two unpushed P4 commits from a concurrent agent sharing the same local checkout. This branch is a clean cherry-pick onto main — one commit, P2 only.}

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}