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:
+154
@@ -680,3 +680,157 @@ kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-2); p
|
||||
.toast-ok { border-left: 3px solid var(--ok); }
|
||||
.toast-warn { border-left: 3px solid var(--queue); }
|
||||
.toast-err { border-left: 3px solid var(--block); }
|
||||
|
||||
/* =====================================================================
|
||||
Light theme — minimal token overrides, everything else inherits dark
|
||||
===================================================================== */
|
||||
:root[data-theme="light"] {
|
||||
--bg: #f4f6fb;
|
||||
--bg-deep: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f0f3f9;
|
||||
--surface-3: #e2e8f3;
|
||||
--border: #d8dee9;
|
||||
--border-strong: #b6c1d4;
|
||||
--border-glow: #3b82f655;
|
||||
--text: #0c1322;
|
||||
--text-2: #4b5872;
|
||||
--text-3: #7a87a5;
|
||||
--text-soft: #1c2538;
|
||||
}
|
||||
:root[data-theme="light"] body { background: var(--bg); }
|
||||
:root[data-theme="light"] .landing-bg {
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(59,130,246,0.18) 0%, transparent 40%),
|
||||
radial-gradient(circle at 86% 76%, rgba(168,85,247,0.14) 0%, transparent 45%),
|
||||
var(--bg);
|
||||
}
|
||||
:root[data-theme="light"] .landing-grid { mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%); opacity: 0.5; }
|
||||
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
|
||||
:root[data-theme="light"] .mc-main { background:
|
||||
radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 28px 28px,
|
||||
var(--bg); }
|
||||
|
||||
/* =====================================================================
|
||||
Console panel (right side drawer)
|
||||
===================================================================== */
|
||||
.console {
|
||||
position: fixed; right: 0; top: 56px; bottom: 0;
|
||||
width: min(420px, 95vw);
|
||||
background: var(--bg-deep);
|
||||
border-left: 1px solid var(--border);
|
||||
display: grid; grid-template-rows: auto 1fr;
|
||||
z-index: 180;
|
||||
box-shadow: -8px 0 40px rgba(0,0,0,0.45);
|
||||
}
|
||||
.console-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 9px 12px; border-bottom: 1px solid var(--border);
|
||||
font-size: 12px; color: var(--text-2);
|
||||
}
|
||||
.console-title { color: var(--text); font-weight: 600; }
|
||||
.console-count { background: var(--surface-2); padding: 1px 7px; border-radius: 999px; font-size: 11px; color: var(--text-2); }
|
||||
.console-filters { margin-left: auto; display: inline-flex; gap: 3px; background: var(--surface-2); padding: 2px; border-radius: 7px; border: 1px solid var(--border); }
|
||||
.console-filter { padding: 3px 8px; border-radius: 5px; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
|
||||
.console-filter:hover { color: var(--text); }
|
||||
.console-filter.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong) inset; }
|
||||
.console-x { padding: 4px 6px; border-radius: 6px; color: var(--text-3); }
|
||||
.console-x:hover { color: var(--text); background: var(--surface-2); }
|
||||
.console-body { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
|
||||
|
||||
.call { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; border-left-width: 3px; }
|
||||
.call.ok { border-left-color: var(--ok); }
|
||||
.call.warn { border-left-color: var(--queue); }
|
||||
.call.err { border-left-color: var(--block); }
|
||||
.call.info { border-left-color: var(--border-strong); }
|
||||
.call-head {
|
||||
display: grid; grid-template-columns: 50px 44px 1fr auto;
|
||||
align-items: center; gap: 8px;
|
||||
width: 100%; padding: 7px 10px; text-align: left;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.call-head:hover { background: var(--surface-2); }
|
||||
.call-method { font-weight: 700; }
|
||||
.call-status { color: var(--text-2); }
|
||||
.call-path { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.call-dur { color: var(--text-3); font-size: 11px; }
|
||||
.call-body { padding: 6px 10px 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
|
||||
.call-label { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; }
|
||||
.call-err { color: var(--block); }
|
||||
.call-json { margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); font-family: var(--mono); font-size: 11px; line-height: 1.45; overflow-x: auto; max-height: 260px; overflow-y: auto; }
|
||||
|
||||
/* =====================================================================
|
||||
Topbar badge + user button
|
||||
===================================================================== */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center;
|
||||
margin-left: 6px;
|
||||
font-size: 10px; font-weight: 700;
|
||||
padding: 1px 6px; border-radius: 999px;
|
||||
background: var(--primary-deep); color: #fff;
|
||||
}
|
||||
.user-btn .user-email { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* =====================================================================
|
||||
Studio
|
||||
===================================================================== */
|
||||
.studio { height: 100%; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); }
|
||||
.studio-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
|
||||
.studio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||||
gap: 16px; padding: 20px 24px 40px;
|
||||
}
|
||||
.studio-panel {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 14px; padding: 16px 18px;
|
||||
display: flex; flex-direction: column; gap: 12px;
|
||||
}
|
||||
.studio-panel > .panel-h { margin: -2px 0 4px; }
|
||||
.studio-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); }
|
||||
.studio-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); font-weight: 600; }
|
||||
.studio-input {
|
||||
font-family: var(--sans);
|
||||
background: var(--bg-deep); border: 1px solid var(--border);
|
||||
border-radius: 7px; padding: 7px 10px; color: var(--text); font-size: 13px;
|
||||
}
|
||||
.studio-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
|
||||
.studio-input.mono { font-family: var(--mono); }
|
||||
textarea.studio-input { resize: vertical; min-height: 64px; }
|
||||
|
||||
.studio-rows { display: flex; flex-direction: column; gap: 6px; }
|
||||
.studio-row { display: flex; align-items: center; gap: 8px; }
|
||||
.studio-row .studio-input { flex: 1; }
|
||||
.studio-row-id { color: var(--text-3); font-size: 11px; min-width: 32px; }
|
||||
|
||||
.studio-result {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 8px 12px; border-radius: 8px;
|
||||
font-size: 12.5px; font-weight: 500;
|
||||
}
|
||||
.studio-result.ok { background: rgba(52,211,153,0.12); color: var(--ok); border: 1px solid rgba(52,211,153,0.4); }
|
||||
.studio-result.err { background: rgba(240,82,82,0.12); color: var(--block); border: 1px solid rgba(240,82,82,0.4); }
|
||||
|
||||
.start-btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
margin-top: 4px; padding: 9px 12px; border-radius: 9px;
|
||||
background: linear-gradient(180deg, var(--primary), var(--primary-deep)); color: #fff;
|
||||
font-size: 12.5px; font-weight: 600;
|
||||
transition: filter .15s;
|
||||
}
|
||||
.start-btn:hover:not(:disabled) { filter: brightness(1.1); }
|
||||
.start-btn:disabled { opacity: 0.65; cursor: not-allowed; }
|
||||
|
||||
/* =====================================================================
|
||||
Settings
|
||||
===================================================================== */
|
||||
.settings { height: 100%; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); }
|
||||
.settings-id { display: flex; flex-direction: column; gap: 4px; }
|
||||
.settings-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.settings-hint { color: var(--text-3); font-size: 11.5px; margin-top: 4px; }
|
||||
.settings-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); }
|
||||
.settings-toggle input { accent-color: var(--primary); width: 14px; height: 14px; }
|
||||
.settings-text { font-size: 13px; color: var(--text-2); line-height: 1.55; }
|
||||
.settings-link { color: var(--primary); text-decoration: underline; }
|
||||
.quick-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.quick-users .link-btn { font-family: var(--mono); font-size: 11px; }
|
||||
|
||||
Reference in New Issue
Block a user