@handled-ai/design-system 0.18.22 → 0.18.24

package/src/components/__tests__/case-panel-detail.test.tsx

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+
+import {
+  CasePanelDetail,
+  CasePanelDetailSlots,
+  CasePanelHeader,
+  CasePanelIdentitySubline,
+  CasePanelMetadataRow,
+  CasePanelSignalBrief,
+} from "../case-panel-detail"
+
+function renderBasicPanel() {
+  return render(
+    <CasePanelDetail>
+      <CasePanelHeader title="Treasury Churn Risk: Northwind Systems" action={<button type="button">Quick action</button>}>
+        <CasePanelIdentitySubline
+          callsign="northwind"
+          links={[
+            { id: "salesforce", label: "Open in Salesforce", href: "https://example.com/sf", kind: "icon" },
+            { id: "admin", label: "Open in Admin", href: "https://example.com/admin", kind: "text" },
+          ]}
+        />
+      </CasePanelHeader>
+      <CasePanelSignalBrief>Key account signals indicate elevated churn risk.</CasePanelSignalBrief>
+      <CasePanelMetadataRow>
+        <span>Northwind Systems</span>
+        <span>Medium Priority</span>
+      </CasePanelMetadataRow>
+    </CasePanelDetail>,
+  )
+}
+
+describe("CasePanelDetail structure", () => {
+  it("keeps the header calm with only title, identity subline, and supplied action", () => {
+    renderBasicPanel()
+
+    expect(screen.getByRole("heading", { level: 1, name: "Treasury Churn Risk: Northwind Systems" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
+    expect(screen.getByText("@northwind")).toBeTruthy()
+    expect(screen.queryByText("Medium Priority")).toBeTruthy()
+
+    const header = screen.getByRole("banner")
+    expect(within(header).queryByText("Medium Priority")).toBeNull()
+    expect(within(header).queryByText("Northwind Systems", { selector: "span" })).toBeNull()
+  })
+
+  it("renders the identity subline with normalized callsign and icon links", () => {
+    render(
+      <CasePanelIdentitySubline
+        callsign="acme"
+        links={[
+          { id: "salesforce", label: "Open in Salesforce", href: "https://example.com/sf", kind: "icon" },
+          { id: "admin", label: "Open in Admin", href: "https://example.com/admin", kind: "text" },
+        ]}
+      />,
+    )
+
+    expect(screen.getByText("@acme")).toBeTruthy()
+    expect(screen.getByRole("link", { name: "Open in Salesforce" }).getAttribute("href")).toBe("https://example.com/sf")
+    expect(screen.getByRole("link", { name: "Open in Admin" }).getAttribute("href")).toBe("https://example.com/admin")
+  })
+
+  it("fires the copy callback with the normalized callsign", () => {
+    const onCopy = vi.fn()
+    render(<CasePanelIdentitySubline callsign="northwind" onCopyCallsign={onCopy} />)
+
+    fireEvent.click(screen.getByRole("button", { name: "Copy call sign" }))
+
+    expect(onCopy).toHaveBeenCalledWith("@northwind")
+    expect(screen.getByRole("button", { name: "Call sign copied" })).toBeTruthy()
+  })
+
+  it("renders missing identity links as disabled buttons instead of active links", () => {
+    render(
+      <CasePanelIdentitySubline
+        callsign="northwind"
+        links={[
+          { id: "salesforce", label: "Open in Salesforce", kind: "icon" },
+          { id: "admin", label: "Open in Admin", href: "https://example.com/admin", disabled: true, kind: "text" },
+        ]}
+      />,
+    )
+
+    expect(screen.queryByRole("link", { name: "Open in Salesforce" })).toBeNull()
+    expect(screen.queryByRole("link", { name: "Open in Admin" })).toBeNull()
+    expect(screen.getByRole("button", { name: "Open in Salesforce" })).toHaveProperty("disabled", true)
+    expect(screen.getByRole("button", { name: "Open in Admin" })).toHaveProperty("disabled", true)
+  })
+
+  it("places metadata below the signal brief", () => {
+    const { container } = renderBasicPanel()
+
+    const brief = screen.getByText("Key account signals indicate elevated churn risk.")
+    const metadata = screen.getByLabelText("Case metadata")
+    const position = brief.compareDocumentPosition(metadata)
+
+    expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(container.textContent).toContain("Signal brief")
+  })
+
+  it("renders ordered slots for WHY, actions, opportunity, timeline, and play-panel", () => {
+    const { container } = render(
+      <CasePanelDetailSlots
+        timeline={<div>Timeline</div>}
+        why={<div>WHY</div>}
+        playPanel={<div>Play panel</div>}
+        actions={<div>Actions</div>}
+        opportunity={<div>Opportunity</div>}
+      />,
+    )
+
+    const slots = Array.from(container.querySelectorAll("[data-slot]")).map((node) => node.getAttribute("data-slot"))
+    expect(slots).toEqual(["why", "actions", "opportunity", "timeline", "play-panel"])
+  })
+
+  it("supports the modest width variant", () => {
+    const { container } = render(
+      <CasePanelDetail width="modest">
+        <div>Content</div>
+      </CasePanelDetail>,
+    )
+
+    const inner = container.querySelector("section > div")
+    expect(inner?.className).toContain("max-w-[720px]")
+    expect(inner?.className).not.toContain("max-w-[880px]")
+  })
+
+  it("provides accessibility labels for the detail region and copy/link controls", () => {
+    renderBasicPanel()
+
+    expect(screen.getByRole("region", { name: "Case detail" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Copy call sign" })).toBeTruthy()
+    expect(screen.getByRole("link", { name: "Open in Salesforce" })).toBeTruthy()
+    expect(screen.getByLabelText("Case metadata")).toBeTruthy()
+  })
+})

package/src/components/__tests__/case-panel-email-composer.test.tsx

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import {
+  CasePanelEmailComposer,
+  CasePanelEmailComposerChip,
+  CasePanelEmailComposerRow,
+  CasePanelEmailComposerSignatureRow,
+} from "../case-panel-email-composer"
+import { BRAND_ICONS } from "../../lib/icons"
+
+describe("CasePanelEmailComposer", () => {
+  it("renders draft frame, standard rows, labels, and Gmail icon source", () => {
+    const { container } = render(
+      <CasePanelEmailComposer
+        from="rep@handled.ai"
+        to="alex@example.com"
+        subject="Next steps"
+        draftEditor={<p>Draft body</p>}
+      />,
+    )
+
+    expect(container.querySelector('[data-slot="case-panel-email-composer"]')).not.toBeNull()
+    expect(screen.getByText("Draft")).not.toBeNull()
+    expect(screen.getByText("From")).not.toBeNull()
+    expect(screen.getByText("To")).not.toBeNull()
+    expect(screen.getByText("Subject")).not.toBeNull()
+    expect(screen.getByText("rep@handled.ai")).not.toBeNull()
+    expect(screen.getByText("alex@example.com")).not.toBeNull()
+    expect(screen.getByText("Next steps")).not.toBeNull()
+    expect(screen.getByText("Draft body")).not.toBeNull()
+
+    const gmailIcon = screen.getByAltText("Gmail") as HTMLImageElement
+    expect(gmailIcon.tagName).toBe("IMG")
+    expect(gmailIcon.getAttribute("src")).toBe(BRAND_ICONS.gmail.icon)
+  })
+
+  it("renders custom slots and render-prop recipient rows", () => {
+    render(
+      <CasePanelEmailComposer
+        recipientRows={({ Row }) => (
+          <Row label="To" state="confirmed">
+            Rendered recipient
+          </Row>
+        )}
+        draftEditor={<div data-testid="draft-slot">Editor slot</div>}
+        toolbar={<div>Formatting toolbar</div>}
+        sendBarActions={<button type="button">Schedule send</button>}
+        signatureControl={<div>Custom signature slot</div>}
+      />,
+    )
+
+    expect(screen.getByText("Rendered recipient")).not.toBeNull()
+    expect(screen.getByTestId("draft-slot")).not.toBeNull()
+    expect(screen.getByText("Formatting toolbar")).not.toBeNull()
+    expect(screen.getByText("Schedule send")).not.toBeNull()
+    expect(screen.getByText("Custom signature slot")).not.toBeNull()
+  })
+
+  it("marks unconfirmed and confirmed To rows with visual state attributes", () => {
+    const { container, rerender } = render(
+      <CasePanelEmailComposer to="needs confirmation" toState="unconfirmed" />,
+    )
+
+    const unconfirmedRow = container.querySelector('[data-slot="case-panel-email-composer-row"][data-state="unconfirmed"]')
+    expect(unconfirmedRow).not.toBeNull()
+    expect(unconfirmedRow?.className).toContain("bg-amber-50/75")
+
+    rerender(<CasePanelEmailComposer to="confirmed@example.com" toState="confirmed" />)
+    const confirmedRow = container.querySelector('[data-slot="case-panel-email-composer-row"][data-state="confirmed"]')
+    expect(confirmedRow).not.toBeNull()
+    expect(confirmedRow?.className).toContain("bg-background")
+    expect(confirmedRow?.className).not.toContain("bg-amber-50/75")
+  })
+
+  it("renders recipient action chips and invokes their callbacks", () => {
+    const onContactsIntent = vi.fn()
+    const onAccountDetailsIntent = vi.fn()
+    const onAddCcIntent = vi.fn()
+    const onAddBccIntent = vi.fn()
+
+    render(
+      <CasePanelEmailComposer
+        onContactsIntent={onContactsIntent}
+        onAccountDetailsIntent={onAccountDetailsIntent}
+        onAddCcIntent={onAddCcIntent}
+        onAddBccIntent={onAddBccIntent}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Contacts" }))
+    fireEvent.click(screen.getByRole("button", { name: "Account details" }))
+    fireEvent.click(screen.getByRole("button", { name: "Add Cc" }))
+    fireEvent.click(screen.getByRole("button", { name: "Add Bcc" }))
+
+    expect(onContactsIntent).toHaveBeenCalledTimes(1)
+    expect(onAccountDetailsIntent).toHaveBeenCalledTimes(1)
+    expect(onAddCcIntent).toHaveBeenCalledTimes(1)
+    expect(onAddBccIntent).toHaveBeenCalledTimes(1)
+  })
+
+  it("renders signature row visuals", () => {
+    const { container } = render(<CasePanelEmailComposerSignatureRow />)
+
+    expect(screen.getByText("Include signature")).not.toBeNull()
+    expect(container.querySelector('[data-slot="case-panel-email-composer-signature-row"]')).not.toBeNull()
+    expect(container.querySelector('[data-checked="true"]')).not.toBeNull()
+  })
+
+  it("renders default toolbar and send bar labels", () => {
+    render(<CasePanelEmailComposer />)
+
+    expect(screen.getByText("Toolbar")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Send" })).not.toBeNull()
+  })
+
+  it("disables send when disabledReason is provided", () => {
+    render(<CasePanelEmailComposer disabledReason="Confirm recipient before sending" />)
+
+    const sendButton = screen.getByRole("button", { name: "Send" }) as HTMLButtonElement
+    expect(sendButton.disabled).toBe(true)
+    expect(screen.getByText("Confirm recipient before sending")).not.toBeNull()
+    expect(sendButton.getAttribute("aria-describedby")).toBeTruthy()
+  })
+
+  it("disables shell chips when disabled", () => {
+    render(<CasePanelEmailComposer disabled onContactsIntent={vi.fn()} />)
+
+    const contactsButton = screen.getByRole("button", { name: "Contacts" }) as HTMLButtonElement
+    const sendButton = screen.getByRole("button", { name: "Send" }) as HTMLButtonElement
+    expect(contactsButton.disabled).toBe(true)
+    expect(sendButton.disabled).toBe(true)
+  })
+
+  it("invokes send intent from click and keyboard shortcut only when enabled", () => {
+    const onSendIntent = vi.fn()
+    const { container, rerender } = render(<CasePanelEmailComposer onSendIntent={onSendIntent} />)
+    const shell = container.querySelector('[data-slot="case-panel-email-composer"]')!
+
+    fireEvent.click(screen.getByRole("button", { name: "Send" }))
+    fireEvent.keyDown(shell, { key: "Enter", metaKey: true })
+    fireEvent.keyDown(shell, { key: "Enter" })
+    fireEvent.keyDown(shell, { key: "Escape" })
+
+    expect(onSendIntent).toHaveBeenCalledTimes(2)
+
+    rerender(<CasePanelEmailComposer onSendIntent={onSendIntent} disabledReason="No recipient" />)
+    fireEvent.keyDown(shell, { key: "Enter", ctrlKey: true })
+    fireEvent.click(screen.getByRole("button", { name: "Send" }))
+
+    expect(onSendIntent).toHaveBeenCalledTimes(2)
+  })
+
+  it("exposes row and chip primitives for variants", () => {
+    const onClick = vi.fn()
+    render(
+      <>
+        <CasePanelEmailComposerRow label="Cc" actions={<span>row action</span>}>
+          cc@example.com
+        </CasePanelEmailComposerRow>
+        <CasePanelEmailComposerChip onClick={onClick}>Custom chip</CasePanelEmailComposerChip>
+      </>,
+    )
+
+    expect(screen.getByText("Cc")).not.toBeNull()
+    expect(screen.getByText("row action")).not.toBeNull()
+    fireEvent.click(screen.getByRole("button", { name: "Custom chip" }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/__tests__/case-panel-why.test.tsx

@@ -0,0 +1,152 @@
+import "@testing-library/jest-dom/vitest"
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+
+import { BRAND_ICONS } from "../../lib/icons"
+import { CasePanelSignalApprovalActions, CasePanelWhy } from "../case-panel-why"
+import { SignalApproval } from "../signal-feedback-inline"
+
+const whyItems = [
+  {
+    id: "treasury",
+    label: "Treasury movement",
+    count: 3,
+    summary: "Three payment signals landed inside the risk window.",
+    rows: [
+      {
+        id: "ach-volume",
+        label: "ACH volume increased",
+        value: "+40%",
+        description: "Payment activity is materially above baseline.",
+        meta: "Banking data · 2h ago",
+      },
+    ],
+  },
+]
+
+describe("CasePanelWhy", () => {
+  it("renders a collapsed fully bordered summary pill with count and no expanded card", () => {
+    const { container } = render(<CasePanelWhy items={whyItems} />)
+
+    const pill = screen.getByRole("button", { name: /treasury movement/i })
+    expect(pill).toHaveAttribute("aria-expanded", "false")
+    expect(pill.className).toContain("border")
+    expect(pill.className).toContain("border-border")
+    expect(pill.className).toContain("rounded-full")
+    expect(pill.className).not.toContain("border-b-0")
+    expect(pill.className).not.toContain("rounded-b-none")
+    expect(screen.getByText("×3")).toBeInTheDocument()
+    expect(screen.queryByRole("region", { name: /treasury movement/i })).toBeNull()
+    expect(container.textContent).not.toContain("Three payment signals landed")
+  })
+
+  it("expands to a separate bordered card with a gap while preserving the pill bottom border", () => {
+    render(<CasePanelWhy items={whyItems} />)
+
+    const pill = screen.getByRole("button", { name: /treasury movement/i })
+    fireEvent.click(pill)
+
+    expect(pill).toHaveAttribute("aria-expanded", "true")
+    expect(pill.className).toContain("border")
+    expect(pill.className).toContain("border-border")
+    expect(pill.className).not.toContain("border-b-0")
+    expect(pill.className).not.toContain("rounded-b-none")
+
+    const panel = screen.getByRole("region", { name: /treasury movement/i })
+    expect(panel).toBeInTheDocument()
+    expect(panel.className).toContain("mt-2")
+    expect(panel.className).toContain("border")
+    expect(panel.className).toContain("border-border")
+    expect(panel.className).toContain("rounded-xl")
+    expect(panel.className).not.toContain("border-t-0")
+    expect(within(panel).getByText("Three payment signals landed inside the risk window.")).toBeInTheDocument()
+    expect(within(panel).getByText("ACH volume increased")).toBeInTheDocument()
+  })
+
+  it("supports keyboard/aria expansion using the summary pill button", () => {
+    render(<CasePanelWhy items={whyItems} />)
+
+    const pill = screen.getByRole("button", { name: /treasury movement/i })
+    const controlsId = pill.getAttribute("aria-controls")
+    expect(controlsId).toBeTruthy()
+    expect(pill).toHaveAttribute("aria-expanded", "false")
+
+    fireEvent.keyDown(pill, { key: "Enter", code: "Enter" })
+
+    expect(pill).toHaveAttribute("aria-expanded", "true")
+    expect(document.getElementById(controlsId!)).toBe(screen.getByRole("region", { name: /treasury movement/i }))
+
+    fireEvent.click(pill)
+    expect(pill).toHaveAttribute("aria-expanded", "false")
+    expect(document.getElementById(controlsId!)).toBeNull()
+  })
+})
+
+describe("CasePanelSignalApprovalActions", () => {
+  function renderApprovalActions(overrides: Partial<React.ComponentProps<typeof SignalApproval.Root>> = {}) {
+    const props: React.ComponentProps<typeof SignalApproval.Root> = {
+      companyName: "Northwind Systems",
+      labels: {
+        approveButton: "Create in Salesforce",
+        dismissButton: "Not Helpful",
+      },
+      ...overrides,
+      children: <CasePanelSignalApprovalActions />,
+    }
+
+    return render(<SignalApproval.Root {...props} />)
+  }
+
+  it("renders compact buttons with Salesforce icon support and outline Not Helpful", () => {
+    renderApprovalActions({ approveButtonIconUrl: BRAND_ICONS.salesforce })
+
+    const approve = screen.getByRole("button", { name: /create in salesforce/i })
+    const dismiss = screen.getByRole("button", { name: /not helpful/i })
+    const icon = approve.querySelector("img")
+
+    expect(approve.className).toContain("h-8")
+    expect(approve.className).toContain("px-3")
+    expect(icon).toHaveAttribute("src", BRAND_ICONS.salesforce)
+    expect(dismiss.className).toContain("h-8")
+    expect(dismiss.className).toContain("border")
+    expect(dismiss.className).toContain("bg-background")
+  })
+
+  it("uses existing request approval, confirm, feedback, and dismiss paths", async () => {
+    const onRequestApproval = vi.fn().mockResolvedValue(undefined)
+    const onApprove = vi.fn()
+    const onApproveFeedback = vi.fn()
+    const onDismiss = vi.fn()
+
+    renderApprovalActions({ onRequestApproval, onApprove, onApproveFeedback, onDismiss })
+
+    fireEvent.click(screen.getByRole("button", { name: /create in salesforce/i }))
+    expect(onRequestApproval).toHaveBeenCalledTimes(1)
+
+    expect(await screen.findByText(/this will approve this action for/i)).toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+    expect(onApprove).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(screen.getByRole("button", { name: "Right timing" }))
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }))
+    expect(onApproveFeedback).toHaveBeenCalledWith(["Right timing"], "")
+
+    renderApprovalActions({ onRequestApproval: vi.fn().mockResolvedValue(undefined), onApprove: vi.fn(), onDismiss })
+    fireEvent.click(screen.getByRole("button", { name: /not helpful/i }))
+    expect(screen.getByText("What’s the issue with this action?")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole("button", { name: "Already handled" }))
+    fireEvent.click(screen.getByRole("button", { name: "Already escalated" }))
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }))
+    expect(onDismiss).toHaveBeenCalledWith(["Already handled"], "", "Already escalated")
+  })
+
+  it("falls back to the existing SignalApproval actions for confirmation state", () => {
+    renderApprovalActions({ initialApprovalState: "confirming" })
+
+    expect(screen.getByText(/this will approve this action for/i)).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /confirm/i }).className).toContain("h-7")
+  })
+})

package/src/components/__tests__/contextual-quick-action-launcher.test.tsx

@@ -14,6 +14,28 @@ const items = [
   },
 ]
 
+const casePanelItems = [
+  {
+    id: "create-opportunity",
+    label: "Create an opportunity",
+    description: "Log a new sales or expansion opportunity in Salesforce",
+    icon: <svg aria-hidden="true" data-testid="salesforce-icon" />,
+  },
+  {
+    id: "update-opportunity",
+    label: "Update an opportunity",
+    description: "Update stage, close date, or amount",
+    meta: "No opportunity",
+  },
+  {
+    id: "deal-desk",
+    label: "Request deal desk approval",
+    description: "Route a deal for approval through Slack",
+    disabled: true,
+    disabledReason: "Coming soon",
+  },
+]
+
 describe("ContextualQuickActionLauncher", () => {
   it("renders contextual actions with context label when open", () => {
     render(
@@ -33,6 +55,74 @@ describe("ContextualQuickActionLauncher", () => {
     expect(screen.getByText("Coming soon")).toBeTruthy()
   })
 
+  it("preserves default menu sizing and item layout without variant opt-in", () => {
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        contextSecondary="Account"
+        items={casePanelItems}
+        onSelect={() => {}}
+        open
+      />,
+    )
+
+    const menu = screen.getByRole("menu", { name: /quick action/i })
+    expect(menu.className).toContain("w-[308px]")
+    expect(menu.className).not.toContain("w-[432px]")
+
+    const item = screen.getByText("Create an opportunity").closest('[role="menuitem"]')
+    expect(item?.className).toContain("flex")
+    expect(item?.className).not.toContain("grid-cols-[34px_minmax(0,1fr)_auto]")
+
+    const header = screen.getByText("Acting on").closest('[data-slot="contextual-quick-action-context-label"]')
+    expect(header?.getAttribute("data-variant")).toBe("default")
+  })
+
+  it("renders Case Panel variant with wide menu, larger tiles, header, meta, and footer shortcut", () => {
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Northwind Systems"
+        contextSecondary="Case"
+        items={casePanelItems}
+        onSelect={() => {}}
+        variant="case-panel"
+        open
+      />,
+    )
+
+    const menu = screen.getByRole("menu", { name: /quick action/i })
+    expect(menu.className).toContain("w-[432px]")
+    expect(menu.className).toContain("rounded-[13px]")
+
+    const header = screen.getByText("Acting on").closest('[data-slot="contextual-quick-action-context-label"]')
+    expect(header?.getAttribute("data-variant")).toBe("case-panel")
+    expect(header?.className).toContain("whitespace-nowrap")
+    expect(screen.getByText("Northwind Systems")).toBeTruthy()
+    expect(screen.getByText(/· Case/)).toBeTruthy()
+
+    const enabledItem = screen.getByText("Update an opportunity").closest('[role="menuitem"]')
+    expect(enabledItem?.className).toContain("grid-cols-[34px_minmax(0,1fr)_auto]")
+    expect(screen.getByText("Update stage, close date, or amount")).toBeTruthy()
+
+    const iconTile = enabledItem?.querySelector('[data-slot="contextual-quick-action-item-icon"]')
+    expect(iconTile?.className).toContain("h-[34px]")
+    expect(iconTile?.className).toContain("w-[34px]")
+
+    const enabledMeta = screen.getByText("No opportunity")
+    expect(enabledMeta.getAttribute("data-slot")).toBe("contextual-quick-action-item-meta")
+    expect(enabledMeta.className).toContain("italic")
+
+    const disabledMeta = screen.getByText("Coming soon")
+    expect(disabledMeta.getAttribute("data-slot")).toBe("contextual-quick-action-item-disabled-meta")
+    expect(disabledMeta.className).toContain("italic")
+
+    const browseButton = screen.getByRole("button", { name: "Browse all actions" })
+    expect(browseButton).toBeTruthy()
+    expect(browseButton.textContent).toBe("Browse all actions")
+    expect(browseButton.querySelector("svg")).toBeNull()
+    expect(screen.getByText("⌘K").className).toContain("font-mono")
+  })
+
   it("calls onSelect for enabled items and closes the menu", () => {
     const onSelect = vi.fn()
     const onOpenChange = vi.fn()