feat: real backend mutations + Studio + Settings + live API console
build-and-publish / test (push) Has been cancelled
build-and-publish / image (push) Has been cancelled

Massive overhaul that turns the demo from presenter-mode into a
fully-functional FlowMaster operator surface.

NEW: real backend mutations
- api.executeAction(txId, actionId, actor, values) → POST /api/runtime/transactions/{tx}/actions/{actionId}
- api.startTransaction(defKey, business_subject) → POST /api/runtime/transactions
- api.createProcess(payload) → POST /api/ea2/flow
- store.executeAction / startInstance with toast feedback + auto-refresh
- Inspector Overview action buttons fire real backend calls (Submit/Save Draft/etc)
- LeftRail Confirm/Reject buttons fire real backend calls
- LeftRail 'Start new instance' button starts a real tx for live procurement
- CommandBar 'Real actions' group with 'Start new instance' + 'Execute action on headline tx'

NEW: Process Studio (src/scenes/Studio.tsx)
- in-UI process designer: name + display + hub + description + node list + edge list
- live JSON preview of the EA2 payload
- Publish button calls api.createProcess against demo.flow-master.ai
- Validates locally before publishing
- Auto-refreshes scenarios after publish so the new process shows up

NEW: Settings (src/scenes/Settings.tsx)
- Identity: sign in as any email (loginAs), see actor + display name
- Quick-user buttons for common demo identities
- Backend URL + clear-token diagnostic
- Polling cadence (2-120s)
- Dark/light theme toggle (CSS data-theme attribute)
- Show-console default toggle
- All persisted to localStorage (LS_KEY = fm.mc.prefs.v1)

NEW: Live API console (src/components/Console.tsx)
- Right-side drawer triggered from topbar
- Every fetch (GET/POST/etc) streams in real time with status + duration
- Click any entry to expand request + response JSON
- Filter: all / writes / errors
- Replaces the old guided-tour overlay entirely

NEW: live polling
- store.startPolling()/stopPolling() with setInterval guarded for SSR
- Auto-refresh while in LIVE mode at configurable cadence

REMOVED: Tour.tsx, all startTour() store actions and tour references
- Landing CTA now reads 'Enter Mission Control' / 'Design a process' / 'Open live console'

ALSO:
- api.ts: instrumentedFetch with observer pattern → store.apiLog
- Topbar: user identity chip linking to Settings, Console toggle with badge
- Light theme: minimal CSS data-theme override (text + surfaces only)
- localStorage persistence for mode, scenarioId, email, theme, pollEverySec, consoleOpen, recents
- 24/24 vitest, smoke quick run shows 0 console errors + 7 API calls captured

Confidence: high
Scope-risk: broad (~14 files)
Not-tested: actual end-to-end backend mutation roundtrip (requires LIVE + sign-in; structure proven via probe scripts)
This commit is contained in:
2026-06-14 01:19:36 +04:00
parent 49639a0857
commit cb9291b225
13 changed files with 1334 additions and 305 deletions
+9 -6
View File
@@ -7,8 +7,8 @@ import { Sparkles, Arrow, Cmd, Bot, Pulse } from "../components/icons";
export default function Landing() {
const setScene = useApp((s) => s.setScene);
const setScenarioId = useApp((s) => s.setScenarioId);
const startTour = useApp((s) => s.startTour);
const setCmdOpen = useApp((s) => s.setCmdOpen);
const setConsoleOpen = useApp((s) => s.setConsoleOpen);
const scenarios = useApp((s) => s.scenarios);
const mode = useApp((s) => s.mode);
const setMode = useApp((s) => s.setMode);
@@ -54,11 +54,8 @@ export default function Landing() {
same shell extends to any process family.
</p>
<div className="hero-actions">
<button className="btn btn-primary btn-lg" onClick={startTour}>
<Sparkles size={14} /> Start guided tour
</button>
<button className="btn btn-ghost btn-lg" onClick={() => setScene("mission")}>
Skip to Mission Control <Arrow size={13} />
<button className="btn btn-primary btn-lg" onClick={() => setScene("mission")}>
<Arrow size={14} /> Enter Mission Control
</button>
<button
className={`btn btn-ghost btn-lg${mode === "live" ? " is-on" : ""}`}
@@ -69,6 +66,12 @@ export default function Landing() {
{liveLoading ? <span className="spin" /> : <Pulse size={13} />}
{mode === "live" ? "Live · refresh" : "Go live"}
</button>
<button className="btn btn-ghost btn-lg" onClick={() => { setScene("studio"); }}>
<Sparkles size={13} /> Design a process
</button>
<button className="btn btn-ghost btn-lg" onClick={() => setConsoleOpen(true)}>
<Bot size={13} /> Open live console
</button>
</div>
<div className="hero-stats">