From be20b189a380a4fd932d100ed08a2e38f5d67ce6 Mon Sep 17 00:00:00 2001
From: shad <shad@flow-master.ai>
Date: Sun, 14 Jun 2026 18:24:49 +0400
Subject: [PATCH] feat(cmdk): polished command palette - real go-to list +
 clean hints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 src/components/CommandBar.tsx | 91 ++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx
index cc85c91..580b8bd 100644
--- a/src/components/CommandBar.tsx
+++ b/src/components/CommandBar.tsx
@@ -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>