feat: real backend mutations + Studio + Settings + live API console
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user