From 63561a9703ffd705219ffc23701121df875ffcfb Mon Sep 17 00:00:00 2001
From: canvas-bot <canvas-bot@flow-master.ai>
Date: Mon, 15 Jun 2026 04:21:35 +0400
Subject: [PATCH] feat(cmd): visible 'Try saying' panel under the input when
 empty

First-time users opening Cmd-K saw a blank input + a long list of
items. Add a 6-row 'Try saying' panel that shows real typeable
commands with kbd-styled chips and one-line hints. Hides as soon
as the user types anything, so power-users aren't slowed down.

Controlled-input wiring: useState<query>, onValueChange, reset on
close. cmdk handles the actual filtering as before.

31/31 vitest pass.
---
 src/components/CommandBar.tsx | 22 ++++++++++++++++++++--
 src/index.css                 | 28 ++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx
index 580b8bd..525a94a 100644
--- a/src/components/CommandBar.tsx
+++ b/src/components/CommandBar.tsx
@@ -1,5 +1,5 @@
 // Command palette — scenarios, steps, scenes, recents, real actions.
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Command } from "cmdk";
 import { useApp, scenarioById } from "../state/store";
 import { Play, Branch, Bot, Check, Home, HistoryIcon, Layers, Search, Refresh, Cog, User } from "./icons";
@@ -26,6 +26,11 @@ export default function CommandBar() {
   const actor = useApp((s) => s.actor);
 
   const sc = scenarioById(scenarioId);
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -53,9 +58,22 @@ export default function CommandBar() {
       <Command className="cmd" onClick={(e) => e.stopPropagation()} label="Command bar">
         <div className="cmd-input-row">
           <Search size={14} />
-          <Command.Input autoFocus placeholder="Switch scenario · jump to step · start instance · execute action…" />
+          <Command.Input autoFocus placeholder="Switch scenario · jump to step · start instance · execute action…" value={query} onValueChange={setQuery} />
           <kbd className="kbd-hint">esc</kbd>
         </div>
+        {!query && (
+          <div className="cmd-try-saying" aria-hidden>
+            <span className="cmd-try-label">Try saying</span>
+            <ul className="cmd-try-list">
+              <li><kbd>start laptop procurement</kbd> <span className="cmd-try-hint">opens Studio with intake filled in</span></li>
+              <li><kbd>open procurement hub</kbd> <span className="cmd-try-hint">jumps to the Procurement hub</span></li>
+              <li><kbd>find case INC-4427</kbd> <span className="cmd-try-hint">searches active runs by subject</span></li>
+              <li><kbd>my approvals</kbd> <span className="cmd-try-hint">opens the queue waiting on you</span></li>
+              <li><kbd>switch theme</kbd> <span className="cmd-try-hint">light ↔ dark</span></li>
+              <li><kbd>open settings</kbd> <span className="cmd-try-hint">identity, polling, console</span></li>
+            </ul>
+          </div>
+        )}
         <Command.List>
           <Command.Empty>No matches.</Command.Empty>
 
diff --git a/src/index.css b/src/index.css
index d3c8d50..9543eb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2349,3 +2349,31 @@ select.studio-input { background: var(--bp-paper); }
   font-weight: 700;
   pointer-events: none;
 }
+
+/* Command palette: visible 'Try saying' help when input is empty */
+.cmd-try-saying {
+  padding: 10px 14px;
+  border-top: 1px solid color-mix(in srgb, var(--bp-navy) 12%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--bp-navy) 12%, transparent);
+  background: color-mix(in srgb, var(--bp-paper) 92%, var(--bp-canvas));
+}
+.cmd-try-label {
+  display: block;
+  font-family: var(--bp-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bp-muted);
+  margin-bottom: 6px;
+}
+.cmd-try-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.cmd-try-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; }
+.cmd-try-list kbd {
+  font-family: var(--bp-mono);
+  font-size: 11px;
+  padding: 2px 6px;
+  border: 1px solid color-mix(in srgb, var(--bp-navy) 28%, transparent);
+  background: var(--bp-paper);
+  color: var(--bp-navy);
+}
+.cmd-try-hint { color: var(--bp-muted); font-size: 11px; }