Files
temetro/.agents/skills/coss/references/primitives/command.md
T
Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-14 19:27:17 +03:00

2.9 KiB

coss Command

When to use

  • Command palette and keyboard-navigable action menus.
  • Fast action discovery for power-user and app shortcut workflows.

When NOT to use

  • If the list is a simple set of actions without search -> use Menu instead.
  • If the user is selecting from a predefined list -> use Select or Combobox instead.
  • If the flow is a data form -> use Form instead.

Install

npx shadcn@latest add @coss/command

Manual deps from docs:

npm install @base-ui/react

Canonical imports

import {
  Command,
  CommandCollection,
  CommandDialog,
  CommandDialogPopup,
  CommandDialogTrigger,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandGroupLabel,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPanel,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Button } from "@/components/ui/button"

Minimal pattern

const items = [
  { value: "linear", label: "Linear" },
  { value: "figma", label: "Figma" },
  { value: "slack", label: "Slack" },
]

<CommandDialog>
  <CommandDialogTrigger render={<Button variant="outline" />}>
    Open Command Palette
  </CommandDialogTrigger>

  <CommandDialogPopup>
    <Command items={items}>
      <CommandInput placeholder="Search..." />
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandList>
        {(item) => (
          <CommandItem key={item.value} value={item.value}>
            {item.label}
          </CommandItem>
        )}
      </CommandList>
    </Command>
  </CommandDialogPopup>
</CommandDialog>

Patterns from coss particles

  • Portal forwarding: optional portalProps on CommandDialogPopup → Base UI Dialog.Portal (keepMounted, container, …). See portal-props.md.

Key patterns

Command with grouped sections:

<Command items={items}>
  <CommandInput placeholder="Type a command..." />
  <CommandEmpty>No results found.</CommandEmpty>
  <CommandList>
    <CommandGroup>
      <CommandGroupLabel>Suggestions</CommandGroupLabel>
      <CommandCollection>
        {(item) => (
          <CommandItem key={item.value} value={item.value}>
            {item.label}
          </CommandItem>
        )}
      </CommandCollection>
    </CommandGroup>
  </CommandList>
</Command>

Use CommandDialog + CommandDialogTrigger + CommandDialogPopup to wrap Command in a dialog overlay. Use controlled open/onOpenChange state for keyboard-shortcut activation.

More examples

See p-command-1 and p-command-2 for dialog palette and grouped action patterns.

Common pitfalls

  • Using command list without clear grouping and action labels.
  • Binding critical destructive actions without confirmation pathway.
  • Missing keyboard accessibility checks for arrow/select/escape interactions.

Useful particle references

  • core patterns: p-command-1, p-command-2
  • related search/selection references: p-autocomplete-1, p-select-1, p-input-group-1