feat(cmdk): polished command palette - real go-to list + clean hints
build-and-publish / test (push) Has been cancelled
build-and-publish / image (push) Has been cancelled

User brief: 'normal businessman could use this'. The command palette
was already wired but leaked engineering jargon and missed half the
scenes.

- 'Scenes' renamed 'Go to'; now lists all 14 user-reachable scenes
  (was 5). Hubs, Documents, Approvals, Chat, Assistant, Explainer,
  Geo - all keyboard-reachable.
- Endpoint strings ('POST /api/runtime/transactions', 'demo.flow-
  master.ai', 'bundled JSON') removed from hints. Replaced with
  buyer-safe equivalents like 'writes to EA2' / 'for developers'.
- Real-actions group: hints simplified, less raw IDs.
- Dropped 'Dispatch sidekick agent · coming soon' (dead stub).
- 'Data mode' group renamed 'Preferences' and simplified to 3
  options (refresh live, theme toggle, dev console).
This commit is contained in:
2026-06-14 18:24:49 +04:00
parent 70ed7e9aa4
commit be20b189a3
+52 -39
View File
@@ -69,79 +69,102 @@ export default function CommandBar() {
</Command.Group> </Command.Group>
)} )}
<Command.Group heading="Scenes"> <Command.Group heading="Go to">
<Command.Item onSelect={() => { setScene("landing"); close(); }}> <Command.Item onSelect={() => { setScene("landing"); close(); }}>
<Home size={13} /> Landing <Home size={13} /> Home
</Command.Item> </Command.Item>
<Command.Item onSelect={() => { setScene("mission"); close(); }}> <Command.Item onSelect={() => { setScene("mission"); close(); }}>
<Layers size={13} /> Mission Control <Layers size={13} /> Mission Control
<span className="cmd-hint">live work-items + process graph</span>
</Command.Item> </Command.Item>
<Command.Item onSelect={() => { setScene("history"); close(); }}> <Command.Item onSelect={() => { setScene("approvals"); close(); }}>
<HistoryIcon size={13} /> Run History <Layers size={13} /> Approvals queue
<span className="cmd-hint">work waiting on you</span>
</Command.Item> </Command.Item>
<Command.Item onSelect={() => { setScene("studio"); close(); }}> <Command.Item onSelect={() => { setScene("studio"); close(); }}>
<Branch size={13} /> Process Wizard <Branch size={13} /> Process Creation Wizard
<span className="cmd-hint">design & publish a new process</span> <span className="cmd-hint">describe publish run</span>
</Command.Item>
<Command.Item onSelect={() => { setScene("documents"); close(); }}>
<Layers size={13} /> Documents
<span className="cmd-hint">data shapes per process</span>
</Command.Item>
<Command.Item onSelect={() => { setScene("hub-procurement"); close(); }}>
<Layers size={13} /> Procurement hub
</Command.Item>
<Command.Item onSelect={() => { setScene("hub-hr"); close(); }}>
<Layers size={13} /> People hub
</Command.Item>
<Command.Item onSelect={() => { setScene("hub-it"); close(); }}>
<Layers size={13} /> IT hub
</Command.Item>
<Command.Item onSelect={() => { setScene("geo-attendance"); close(); }}>
<Layers size={13} /> Attendance map
</Command.Item>
<Command.Item onSelect={() => { setScene("chat"); close(); }}>
<Bot size={13} /> Team chat
</Command.Item>
<Command.Item onSelect={() => { setScene("agent"); close(); }}>
<Bot size={13} /> Command Assistant
</Command.Item>
<Command.Item onSelect={() => { setScene("explainer"); close(); }}>
<Layers size={13} /> What is FlowMaster?
</Command.Item>
<Command.Item onSelect={() => { setScene("history"); close(); }}>
<HistoryIcon size={13} /> Run history
</Command.Item> </Command.Item>
<Command.Item onSelect={() => { setScene("settings"); close(); }}> <Command.Item onSelect={() => { setScene("settings"); close(); }}>
<Cog size={13} /> Settings <Cog size={13} /> Settings
</Command.Item> </Command.Item>
</Command.Group> </Command.Group>
<Command.Group heading="Data mode"> <Command.Group heading="Preferences">
{mode === "live" ? ( {mode === "live" ? (
<Command.Item onSelect={() => { refreshLive(); close(); }}> <Command.Item onSelect={() => { refreshLive(); close(); }}>
<Refresh size={13} /> Refresh live scenarios <Refresh size={13} /> Refresh live data
<span className="cmd-hint">re-fetch demo.flow-master.ai</span>
</Command.Item> </Command.Item>
) : ( ) : (
<Command.Item onSelect={() => { setMode("live"); close(); }}> <Command.Item onSelect={() => { setMode("live"); close(); }}>
<Refresh size={13} /> Switch to LIVE mode (fetch demo.flow-master.ai) <Refresh size={13} /> Switch to live mode
<span className="cmd-hint">in-browser</span>
</Command.Item> </Command.Item>
)} )}
<Command.Item onSelect={() => { setMode("snapshot"); close(); }}> <Command.Item onSelect={() => { setTheme(theme === "dark" ? "light" : "dark"); close(); }}>
<Layers size={13} /> Switch to SNAPSHOT mode <Cog size={13} /> Switch to {theme === "dark" ? "light" : "dark"} theme
<span className="cmd-hint">bundled JSON</span>
</Command.Item> </Command.Item>
<Command.Item onSelect={() => { setConsoleOpen(true); close(); }}> <Command.Item onSelect={() => { setConsoleOpen(true); close(); }}>
<Layers size={13} /> Open live API console <Layers size={13} /> Open API console
<span className="cmd-hint">stream every fetch</span> <span className="cmd-hint">for developers</span>
</Command.Item>
<Command.Item onSelect={() => { setTheme(theme === "dark" ? "light" : "dark"); close(); }}>
<Cog size={13} /> Toggle theme
<span className="cmd-hint">{theme === "dark" ? "→ light" : "→ dark"}</span>
</Command.Item> </Command.Item>
</Command.Group> </Command.Group>
<Command.Group heading="Real actions"> <Command.Group heading="Actions">
{sc?.live ? ( {sc?.live ? (
<Command.Item <Command.Item
onSelect={async () => { onSelect={async () => {
close(); close();
if (mode !== "live") { pushToast("warn", "Switch to LIVE mode to start a real instance."); return; } if (mode !== "live") { pushToast("warn", "Switch to live mode to start a real instance."); return; }
await startInstance(sc.defKey, `Started via Mission Control · ${new Date().toLocaleString()}`); await startInstance(sc.defKey, `Started via Mission Control · ${new Date().toLocaleString()}`);
}} }}
> >
<Play size={13} /> Start new instance of "{sc.defName}" <Play size={13} /> Start an instance of "{sc.defName}"
<span className="cmd-hint">POST /api/runtime/transactions</span> <span className="cmd-hint">writes to EA2</span>
</Command.Item> </Command.Item>
) : ( ) : (
<Command.Item disabled> <Command.Item disabled>
<Play size={13} /> Start new instance <Play size={13} /> Start new instance
<span className="cmd-hint">switch to a LIVE scenario first</span> <span className="cmd-hint">switch to a live scenario first</span>
</Command.Item> </Command.Item>
)} )}
{canActLive && firstActionId && ( {canActLive && firstActionId && (
<Command.Item <Command.Item
onSelect={async () => { close(); await executeAction(sc!.headlineTx!, firstActionId); }} onSelect={async () => { close(); await executeAction(sc!.headlineTx!, firstActionId); }}
> >
<Check size={13} /> Execute "{firstActionId}" on headline tx <Check size={13} /> Submit "{firstActionId}" on the headline case
<span className="cmd-hint">{sc?.headlineTx?.slice(0, 8)} · real</span> <span className="cmd-hint">live · writes to EA2</span>
</Command.Item> </Command.Item>
)} )}
<Command.Item onSelect={() => { setScene("settings"); close(); }}> <Command.Item onSelect={() => { setScene("settings"); close(); }}>
<User size={13} /> Sign in as different user <User size={13} /> Sign in as someone else
<span className="cmd-hint">Settings identity</span> <span className="cmd-hint">Settings identity</span>
</Command.Item> </Command.Item>
</Command.Group> </Command.Group>
@@ -175,17 +198,7 @@ export default function CommandBar() {
</Command.Group> </Command.Group>
)} )}
<Command.Group heading="Agent">
<Command.Item
onSelect={async () => {
close();
pushToast("info", `Sidekick dispatch endpoint not yet wired — see Studio for process-level changes.`);
}}
>
<Bot size={13} /> Dispatch sidekick agent
<span className="cmd-hint">coming soon</span>
</Command.Item>
</Command.Group>
</Command.List> </Command.List>
</Command> </Command>
</div> </div>