shad/canvas-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
shad
2026-06-14 18:24:49 +04:00
parent 70ed7e9aa4
commit be20b189a3
1 changed files with 52 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CommandBar.tsx
+52 -39
View File
@@ -69,79 +69,102 @@ export default function CommandBar() {
</Command.Group>
)}
<Command.Group heading="Scenes">
<Command.Group heading="Go to">
<Command.Item onSelect={() => { setScene("landing"); close(); }}>
<Home size={13} /> Landing
<Home size={13} /> Home
</Command.Item>
<Command.Item onSelect={() => { setScene("mission"); close(); }}>
<Layers size={13} /> Mission Control
<span className="cmd-hint">live work-items + process graph</span>
</Command.Item>
<Command.Item onSelect={() => { setScene("history"); close(); }}>
<HistoryIcon size={13} /> Run History
<Command.Item onSelect={() => { setScene("approvals"); close(); }}>
<Layers size={13} /> Approvals queue
<span className="cmd-hint">work waiting on you</span>
</Command.Item>
<Command.Item onSelect={() => { setScene("studio"); close(); }}>
<Branch size={13} /> Process Wizard
<span className="cmd-hint">design & publish a new process</span>
<Branch size={13} /> Process Creation Wizard
<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 onSelect={() => { setScene("settings"); close(); }}>
<Cog size={13} /> Settings
</Command.Item>
</Command.Group>
<Command.Group heading="Data mode">
<Command.Group heading="Preferences">
{mode === "live" ? (
<Command.Item onSelect={() => { refreshLive(); close(); }}>
<Refresh size={13} /> Refresh live scenarios
<span className="cmd-hint">re-fetch demo.flow-master.ai</span>
<Refresh size={13} /> Refresh live data
</Command.Item>
) : (
<Command.Item onSelect={() => { setMode("live"); close(); }}>
<Refresh size={13} /> Switch to LIVE mode (fetch demo.flow-master.ai)
<span className="cmd-hint">in-browser</span>
<Refresh size={13} /> Switch to live mode
</Command.Item>
)}
<Command.Item onSelect={() => { setMode("snapshot"); close(); }}>
<Layers size={13} /> Switch to SNAPSHOT mode
<span className="cmd-hint">bundled JSON</span>
<Command.Item onSelect={() => { setTheme(theme === "dark" ? "light" : "dark"); close(); }}>
<Cog size={13} /> Switch to {theme === "dark" ? "light" : "dark"} theme
</Command.Item>
<Command.Item onSelect={() => { setConsoleOpen(true); close(); }}>
<Layers size={13} /> Open live API console
<span className="cmd-hint">stream every fetch</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>
<Layers size={13} /> Open API console
<span className="cmd-hint">for developers</span>
</Command.Item>
</Command.Group>
<Command.Group heading="Real actions">
<Command.Group heading="Actions">
{sc?.live ? (
<Command.Item
onSelect={async () => {
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()}`);
}}
>
<Play size={13} /> Start new instance of "{sc.defName}"
<span className="cmd-hint">POST /api/runtime/transactions</span>
<Play size={13} /> Start an instance of "{sc.defName}"
<span className="cmd-hint">writes to EA2</span>
</Command.Item>
) : (
<Command.Item disabled>
<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>
)}
{canActLive && firstActionId && (
<Command.Item
onSelect={async () => { close(); await executeAction(sc!.headlineTx!, firstActionId); }}
>
<Check size={13} /> Execute "{firstActionId}" on headline tx
<span className="cmd-hint">{sc?.headlineTx?.slice(0, 8)} · real</span>
<Check size={13} /> Submit "{firstActionId}" on the headline case
<span className="cmd-hint">live · writes to EA2</span>
</Command.Item>
)}
<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>
</Command.Item>
</Command.Group>
@@ -175,17 +198,7 @@ export default function CommandBar() {
</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>
</div>