feat(ui): expand workflow-ready components

packages/ui/src/components/command.test.tsx

@@ -4,6 +4,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
+import { Button } from "./button";
 import {
   Command,
   CommandDialog,
@@ -96,4 +97,60 @@ describe("Command", () => {
       expect(screen.queryByPlaceholderText("Search across workspace")).not.toBeInTheDocument();
     });
   });
+
+  it("supports loading and footer content on the root command surface", async () => {
+    render(
+      <Command
+        footer={<Button size="sm">Manage commands</Button>}
+        label="Workspace palette"
+        loading
+        loadingMessage="Searching workspace…"
+      >
+        <CommandInput placeholder="Search workspace" />
+        <CommandList>
+          <CommandEmpty>No matching items.</CommandEmpty>
+        </CommandList>
+      </Command>
+    );
+
+    expect(screen.getByText("Searching workspace…")).toHaveAttribute("data-slot", "loading");
+    expect(screen.getByText("Manage commands")).toBeInTheDocument();
+  });
+
+  it("supports dialog title, description, and footer actions for a practical palette shell", async () => {
+    const user = userEvent.setup();
+
+    function CommandDialogExample() {
+      const [open, setOpen] = useState(true);
+
+      return (
+        <CommandDialog
+          description="Jump to docs, recent launches, and operational shortcuts."
+          footer={<Button size="sm">Manage shortcuts</Button>}
+          onOpenChange={setOpen}
+          open={open}
+          title="Workspace command palette"
+        >
+          <CommandInput placeholder="Search across workspace" />
+          <CommandList>
+            <CommandGroup heading="Recent">
+              <CommandItem value="recent-release">Recent release brief</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      );
+    }
+
+    render(<CommandDialogExample />);
+
+    expect(screen.getByText("Workspace command palette")).toBeInTheDocument();
+    expect(screen.getByText("Jump to docs, recent launches, and operational shortcuts.")).toBeInTheDocument();
+    expect(screen.getByText("Manage shortcuts")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Close dialog" }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Workspace command palette")).not.toBeInTheDocument();
+    });
+  });
 });