feat(ui): expand workflow-ready components

apps/docs/src/components/command.stories.tsx

@@ -55,13 +55,74 @@ function InlineCommandShowcase() {
   );
 }
 
+function OperationsWorkbenchShowcase() {
+  return (
+    <Command
+      className="w-[560px]"
+      footer={
+        <div className="flex items-center justify-between gap-3">
+          <p className="m-0 text-xs text-[var(--color-muted-foreground)]">
+            Tip: press <kbd className="rounded border px-1.5 py-0.5">Enter</kbd> to run the highlighted action.
+          </p>
+          <Button size="sm" variant="ghost">
+            Manage actions
+          </Button>
+        </div>
+      }
+      label="Operations workbench"
+      loop
+    >
+      <CommandInput placeholder="Search releases, docs, and recent work" />
+      <CommandList>
+        <CommandEmpty>No matching actions.</CommandEmpty>
+        <CommandGroup heading="Recent">
+          <CommandItem keywords={["launch", "release"]} value="recent-launch-review">
+            Launch review
+            <CommandShortcut>R</CommandShortcut>
+          </CommandItem>
+          <CommandItem keywords={["blocked", "queue"]} value="recent-blocked-queue">
+            Blocked queue
+            <CommandShortcut>B</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Suggestions">
+          <CommandItem keywords={["docs", "stories"]} value="docs-storybook">
+            Open Storybook docs
+            <CommandShortcut>G D</CommandShortcut>
+          </CommandItem>
+          <CommandItem disabled value="compliance-review">
+            Compliance review locked
+            <CommandShortcut>Locked</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
 function DialogCommandShowcase() {
   const [open, setOpen] = useState(false);
 
   return (
     <div className="flex justify-center">
       <Button onClick={() => setOpen(true)}>Open command palette</Button>
-      <CommandDialog onOpenChange={setOpen} open={open}>
+      <CommandDialog
+        description="Jump to docs, recent launches, and operational shortcuts without leaving the current view."
+        footer={
+          <div className="flex items-center justify-between gap-3">
+            <p className="m-0 text-xs text-[var(--color-muted-foreground)]">
+              Need a new action? Add it to the workspace command registry.
+            </p>
+            <Button size="sm" variant="ghost">
+              Manage shortcuts
+            </Button>
+          </div>
+        }
+        onOpenChange={setOpen}
+        open={open}
+        title="Workspace command palette"
+      >
         <CommandInput placeholder="Type a command or search" />
         <CommandList>
           <CommandEmpty>No commands available.</CommandEmpty>
@@ -87,6 +148,22 @@ function DialogCommandShowcase() {
   );
 }
 
+function LoadingResultsShowcase() {
+  return (
+    <Command
+      className="w-[520px]"
+      label="Remote workspace search"
+      loading
+      loadingMessage="Searching remote workspace actions…"
+    >
+      <CommandInput placeholder="Search actions from all workspaces" />
+      <CommandList>
+        <CommandEmpty>No commands available.</CommandEmpty>
+      </CommandList>
+    </Command>
+  );
+}
+
 const meta = {
   title: "Components/Command",
   component: InlineCommandShowcase,
@@ -104,6 +181,14 @@ export const Playground: Story = {
   render: () => <InlineCommandShowcase />
 };
 
+export const OperationsWorkbench: Story = {
+  render: () => <OperationsWorkbenchShowcase />
+};
+
 export const DialogPalette: Story = {
   render: () => <DialogCommandShowcase />
 };
+
+export const LoadingResults: Story = {
+  render: () => <LoadingResultsShowcase />
+};