feat(cmd): visible 'Try saying' panel under the input when empty (#10)

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>