@softize/opus 8.6.6

package/src/ui/components/primitives/chat.tsx

@@ -0,0 +1,407 @@
+import * as React from 'react'
+import type { ChatEvent } from '../../../core/index.ts'
+import { cn } from '../../lib/cn.ts'
+import { Composer } from './composer.tsx'
+import { Markdown } from './markdown.tsx'
+
+export interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+/** Artefato produzido na conversa (evento `artifact` do protocolo). */
+export interface ChatArtifact {
+  kind: string
+  ref: string
+  title?: string
+}
+
+/** Item do transcript no modo CONTROLADO (o app é o dono do estado — ex.: sala
+ *  server-autoritativa com replay, como o ChatRail do Maestro). */
+export type ChatTranscriptItem =
+  | { role: 'user' | 'assistant' | 'error'; content: string }
+  | { role: 'artifact'; artifact: ChatArtifact }
+
+/** Feedback humano do tool em uso (default pt-BR; override por prop). */
+function defaultHumanizeTool(name: string): string {
+  const n = name.toLowerCase()
+  if (/read|glob|grep|search|list|view|query/.test(n)) return 'Consultando…'
+  if (/edit|write|create|update/.test(n)) return 'Escrevendo…'
+  if (/fetch|web/.test(n)) return 'Pesquisando…'
+  return 'Trabalhando…'
+}
+
+/**
+ * A fala do usuário no topo do turno — o card que GRUDA (sticky) enquanto o turno está
+ * em vista.
+ *
+ * Ela nasce com TETO de altura, e o motivo é concreto: um brief longo (o caso normal na
+ * cabine do Maestro, onde a primeira mensagem é o enunciado inteiro da tarefa) ocupava a
+ * sala toda — e, por ser sticky, ficava lá, cobrindo a resposta que a pessoa está
+ * esperando ler. Quanto mais caprichado o enunciado, menos se via do trabalho.
+ *
+ * Truncar sozinho não serve: esta é a ÚNICA cópia do texto na tela, então o corte precisa
+ * vir com o gesto de abrir. Colapsado mostra o começo com um esmaecido no pé; aberto
+ * mostra tudo e continua sticky.
+ *
+ * O botão só aparece quando há de fato o que revelar — medido no DOM, não adivinhado por
+ * contagem de caracteres, que erra com markdown (uma tabela ocupa muito mais que o texto
+ * dela sugere). A medida só vale COLAPSADO: aberto, `scrollHeight === clientHeight` e a
+ * pergunta "transborda?" passaria a responder não, sumindo com o botão de fechar.
+ */
+function UserTurn({ content }: { content: string }): React.ReactElement {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const [overflows, setOverflows] = React.useState(false)
+  const [expanded, setExpanded] = React.useState(false)
+  const [cap, setCap] = React.useState<number>()
+
+  // Teto do EXPANDIDO, em px, medido no scroll container — não em `vh`.
+  //
+  // A primeira tentativa usou `60vh`, e a revisão mostrou por que não serve: o bloco que
+  // contém o sticky é o scroll container, cuja altura vem do CONSUMIDOR (`h-full`), não da
+  // tela. Num contêiner mais baixo que 60vh — um `<Chat>` embutido num painel de 400px numa
+  // tela de 1080, por exemplo — o card pinado fica mais alto que o próprio scroll port, e o
+  // botão de fechar sai da região visível e NÃO volta enquanto o turno estiver em vista.
+  // Era o mesmo defeito, alcançado por outra porta.
+  //
+  // CONTRATO que isto passa a cobrar: o `<Chat>` precisa de altura LIMITADA pelo pai. Já
+  // era assim de fato (sem isso o `overflow-y-auto` e o `sticky` não significam nada), mas
+  // agora tem dente: com altura auto, o container é dimensionado pelo CONTEÚDO, e aí capar
+  // encolhe o conteúdo, que baixa o teto, que encolhe de novo — espiral, e provável
+  // "ResizeObserver loop completed with undelivered notifications". Com `vh` não existia,
+  // porque a viewport não depende do conteúdo.
+  React.useLayoutEffect(() => {
+    const scroll = ref.current?.closest('[data-slot="chat-scroll"]')
+    if (!(scroll instanceof HTMLElement)) return
+    const apply = (): void => setCap(Math.round(scroll.clientHeight * 0.6))
+    apply()
+    if (typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(apply)
+    ro.observe(scroll)
+    return () => ro.disconnect()
+  }, [])
+
+  React.useLayoutEffect(() => {
+    if (expanded) return
+    const el = ref.current
+    if (el === null) return
+    const measure = (): void => setOverflows(el.scrollHeight > el.clientHeight + 1)
+    measure()
+    // A largura muda o quebra-linha, e com ela a resposta: um texto que cabe no rail
+    // aberto transborda com ele estreito. Sem observar, o botão some ou sobra na hora
+    // errada — e o rail do Maestro é redimensionável.
+    if (typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [content, expanded])
+
+  return (
+    <div data-slot="chat-user" className="break-words rounded-xl bg-card px-3 py-2 text-sm leading-snug ring-1 ring-edge shadow-card">
+      <div
+        ref={ref}
+        data-slot="chat-user-body"
+        // Teto NOS DOIS estados, e o do aberto não é zelo: soltar a altura recriava o
+        // defeito que este componente veio matar, agora atrás de um clique — o card segue
+        // `sticky` com fundo opaco e volta a pintar por cima das falas seguintes. Pior, o
+        // botão de fechar é o último filho: com card mais alto que a viewport ele fica
+        // abaixo da dobra, e o sticky só consegue subir a altura da RESPOSTA (centenas de
+        // px contra milhares de card, no caso-alvo de brief enorme + resposta curta). A
+        // pessoa abria o brief e ficava sem como fechar. Com teto, o card inteiro cabe e o
+        // botão está sempre alcançável; o brief se lê rolando DENTRO dele.
+        className={cn(expanded ? 'overflow-y-auto' : 'max-h-40 overflow-hidden')}
+        style={expanded ? { maxHeight: cap } : undefined}
+      >
+        <Markdown content={content} />
+        {/* Esmaecido DENTRO do body, colado no fim do texto: como irmão do botão ele caía
+            ~28px abaixo do corte (mt-1 + linha do botão + py-2), e a maior parte dos 40px
+            pintava a faixa do botão em vez do texto truncado. */}
+        {overflows && !expanded && (
+          <div className="pointer-events-none sticky bottom-0 -mt-10 h-10 bg-gradient-to-t from-card to-transparent" />
+        )}
+      </div>
+      {overflows && (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="mt-1 text-xs text-muted-foreground underline-offset-2 hover:underline"
+        >
+          {expanded ? 'Mostrar menos' : 'Mostrar mais'}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export interface ChatProps {
+  /** Modo AUTOGERENCIADO: envia a conversa (o histórico, já com a nova mensagem) e devolve
+   *  a resposta — `Promise<string>` (request/response) OU `AsyncIterable<ChatEvent>`
+   *  (streaming; docs/chat-event-protocol.md). No Opus, o backend liga em
+   *  `runtime.aiFor(base).run(...)` ou `.runStream(...)`. Ignorado no modo controlado. */
+  send?: (messages: ChatMessage[]) => Promise<string> | AsyncIterable<ChatEvent>
+  /** Modo CONTROLADO: o transcript vem daqui e o app é o dono do estado (transporte
+   *  próprio — SSE com replay, etc.). Presente → `onSend`/`busy`/`activity` assumem. */
+  messages?: ChatTranscriptItem[]
+  /** Modo controlado: recebe o texto enviado. Retornar `false` devolve o texto ao
+   *  composer (falha de envio — nada de perder o que o usuário digitou). */
+  onSend?: (text: string) => void | boolean | Promise<void | boolean>
+  /** Modo controlado: trava o composer enquanto o turno corre. */
+  busy?: boolean
+  /** Modo controlado: indicador vivo — `undefined` esconde, `null` mostra "Pensando…",
+   *  string mostra o rótulo (já humanizado pelo app). */
+  activity?: string | null
+  /** Avisos do app acima do composer (credencial, agente desatualizado…). */
+  notice?: React.ReactNode
+  /** Seletores discretos na barra do composer (o `actions` do `<Composer>`): agente,
+   *  app, escopo… O lugar deles é a barra — `notice` é pra aviso, não pra controle. */
+  composerActions?: React.ReactNode
+  /** Texto do estado vazio (centrado, some quando a conversa começa). Não entra no
+   *  transcript — é apresentação, não fala do assistente. */
+  greeting?: string
+  /** Histórico inicial do modo autogerenciado (reidratação). Troque a `key` do componente
+   *  ao trocar de conversa — o estado interno reinicia com estas mensagens. */
+  initialMessages?: ChatMessage[]
+  /** Modo autogerenciado: conversa que COMEÇA pelo assistente — roda uma vez no mount
+   *  quando o transcript nasce vazio (agente proativo: relatório recém-criado, sessão
+   *  nova…). Mesmo contrato de retorno do `send`, sem mensagem do usuário. */
+  kickoff?: () => Promise<string> | AsyncIterable<ChatEvent>
+  /** Render do evento `artifact` (card, iframe, preview…). Default: link com o título. */
+  renderArtifact?: (artifact: ChatArtifact) => React.ReactNode
+  /** Rótulo humano do tool em uso no indicador vivo (modo autogerenciado). */
+  humanizeTool?: (name: string, detail?: string) => string
+  placeholder?: string
+  className?: string
+}
+
+function isAsyncIterable(value: unknown): value is AsyncIterable<ChatEvent> {
+  return typeof value === 'object' && value !== null && Symbol.asyncIterator in value
+}
+
+/** Agrupa o transcript em turnos (mensagem do usuário + o que veio em resposta) —
+ *  o cabeçalho do turno fica sticky enquanto o turno está em vista. */
+function groupTurns(items: ChatTranscriptItem[]): Array<{ user: ChatTranscriptItem | null; rest: ChatTranscriptItem[] }> {
+  const turns: Array<{ user: ChatTranscriptItem | null; rest: ChatTranscriptItem[] }> = []
+  for (const item of items) {
+    if (item.role === 'user') turns.push({ user: item, rest: [] })
+    else {
+      if (turns.length === 0) turns.push({ user: null, rest: [] })
+      turns[turns.length - 1].rest.push(item)
+    }
+  }
+  return turns
+}
+
+/**
+ * Chat da casa: lista de mensagens + composer (Enter envia / Shift+Enter quebra linha),
+ * transcript em turnos com o cabeçalho sticky (a pergunta fica à vista enquanto a
+ * resposta rola), assistente em Markdown direto no corpo, tool como indicador vivo
+ * (nunca mensagem) e artefatos via `renderArtifact`. Dois modos:
+ *
+ * - **Autogerenciado** (`send`): o componente é dono da conversa; o `send` devolve
+ *   `Promise<string>` ou `AsyncIterable<ChatEvent>` (streaming).
+ * - **Controlado** (`messages` + `onSend` + `busy`/`activity`): o app é dono do estado —
+ *   o caso de transporte próprio (SSE server-autoritativo com replay, como o Maestro).
+ *
+ * Dê altura ao container (ex.: `h-full`).
+ */
+export function Chat({
+  send,
+  messages,
+  onSend,
+  busy: busyProp,
+  activity: activityProp,
+  notice,
+  composerActions,
+  greeting,
+  initialMessages,
+  kickoff,
+  renderArtifact,
+  humanizeTool = defaultHumanizeTool,
+  placeholder = 'Escreva uma mensagem…',
+  className,
+}: ChatProps): React.ReactElement {
+  const controlled = messages !== undefined
+  const [ownItems, setOwnItems] = React.useState<ChatTranscriptItem[]>(() => [...(initialMessages ?? [])])
+  const [input, setInput] = React.useState('')
+  const [ownBusy, setOwnBusy] = React.useState(false)
+  const [ownActivity, setOwnActivity] = React.useState<string | null>(null)
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+
+  const items = controlled ? messages : ownItems
+  const busy = controlled ? (busyProp ?? false) : ownBusy
+  // Indicador: no controlado o app manda (undefined esconde); no autogerenciado segue o busy.
+  const indicator = controlled ? activityProp : ownBusy ? ownActivity : undefined
+
+  React.useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
+  }, [items, indicator])
+
+  const kickoffRan = React.useRef(false)
+  React.useEffect(() => {
+    if (controlled || kickoff === undefined || kickoffRan.current) return
+    if (ownItems.length > 0) return
+    kickoffRan.current = true
+    void consume(kickoff)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  async function submit(): Promise<void> {
+    const text = input.trim()
+    if (text === '' || busy) return
+    setInput('')
+
+    if (controlled) {
+      const ok = await onSend?.(text)
+      if (ok === false) setInput(text)
+      return
+    }
+
+    const next: ChatTranscriptItem[] = [...ownItems, { role: 'user', content: text }]
+    setOwnItems(next)
+    const transcript = next.filter((i): i is ChatMessage => i.role === 'user' || i.role === 'assistant')
+    await consume(() => send!(transcript))
+  }
+
+  // Turno autogerenciado (send ou kickoff): consome string/stream pro transcript próprio.
+  async function consume(run: () => Promise<string> | AsyncIterable<ChatEvent>): Promise<void> {
+    setOwnBusy(true)
+    setOwnActivity(null)
+    try {
+      const result = run()
+      if (isAsyncIterable(result)) {
+        let streaming = false
+        for await (const event of result) {
+          if (event.type === 'text') {
+            setOwnActivity(null)
+            setOwnItems((list) => {
+              const last = list[list.length - 1]
+              if (streaming && last !== undefined && last.role === 'assistant') {
+                return [...list.slice(0, -1), { role: 'assistant', content: last.content + event.delta }]
+              }
+              streaming = true
+              return [...list, { role: 'assistant', content: event.delta }]
+            })
+          } else if (event.type === 'tool') {
+            streaming = false
+            setOwnActivity(humanizeTool(event.name, event.detail))
+          } else if (event.type === 'artifact') {
+            streaming = false
+            setOwnItems((list) => [
+              ...list,
+              { role: 'artifact', artifact: { kind: event.kind, ref: event.ref, title: event.title } },
+            ])
+          } else if (event.type === 'done') {
+            if (!event.ok) {
+              setOwnItems((list) => [...list, { role: 'error', content: event.error ?? 'Desculpe, algo falhou.' }])
+            }
+          }
+        }
+      } else {
+        const reply = await result
+        setOwnItems((list) => [...list, { role: 'assistant', content: reply }])
+      }
+    } catch {
+      setOwnItems((list) => [...list, { role: 'error', content: 'Desculpe, algo falhou.' }])
+    } finally {
+      setOwnBusy(false)
+      setOwnActivity(null)
+    }
+  }
+
+  const indicatorVisible = indicator !== undefined
+
+  return (
+    <div data-slot="chat" className={cn('flex h-full flex-col', className)}>
+      <div ref={scrollRef} data-slot="chat-scroll" className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
+        {items.length === 0 && !indicatorVisible && greeting !== undefined && (
+          <div data-slot="chat-empty" className="m-auto max-w-[280px] text-center text-muted-foreground">
+            <div className="mb-2 text-4xl">✦</div>
+            <p className="text-sm leading-relaxed">{greeting}</p>
+          </div>
+        )}
+        {groupTurns(items).map((turn, ti) => (
+          // Hierarquia do espaço: as falas de um mesmo turno são um raciocínio contínuo
+          // (o agente narra o que vai fazendo), então andam juntas; quem separa é o gap
+          // MAIOR entre turnos. Com o mesmo gap nos dois níveis, um turno de oito falas
+          // curtas virava uma parede uniforme, sem começo nem fim visíveis.
+          <div key={ti} className="flex flex-col gap-1">
+            {turn.user !== null && turn.user.role === 'user' && (
+              // Cabeçalho do turno: gruda no topo enquanto o turno está em vista (igual
+              // Claude) — a mensagem do usuário num card, não num balão preenchido.
+              <div className="sticky top-0 z-10 py-1.5">
+                <UserTurn content={turn.user.content} />
+              </div>
+            )}
+            {turn.rest.map((item, i) => {
+              if (item.role === 'artifact') {
+                return (
+                  <div key={i} data-slot="chat-artifact" className="flex justify-start">
+                    {renderArtifact !== undefined ? (
+                      renderArtifact(item.artifact)
+                    ) : (
+                      <a
+                        href={item.artifact.ref}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="rounded-xl border bg-card px-3.5 py-2 text-sm underline-offset-2 hover:underline"
+                      >
+                        {item.artifact.title ?? item.artifact.ref}
+                      </a>
+                    )}
+                  </div>
+                )
+              }
+              if (item.role === 'error') {
+                return (
+                  <div
+                    key={i}
+                    className="max-w-[88%] self-start rounded-xl border border-destructive/30 bg-destructive/10 px-3.5 py-2.5 text-sm text-destructive"
+                  >
+                    {item.content}
+                  </div>
+                )
+              }
+              // O assistente responde direto no corpo, em Markdown (convenção da casa).
+              return (
+                <div
+                  key={i}
+                  className="break-words px-1 text-sm leading-snug"
+                >
+                  <Markdown content={item.content} />
+                </div>
+              )
+            })}
+          </div>
+        ))}
+        {indicatorVisible && (
+          <div data-slot="chat-activity" className="flex items-center gap-2 py-1 text-xs text-muted-foreground">
+            <span className="flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <span
+                  key={i}
+                  className="h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground/50"
+                  style={{ animationDelay: `${i * 150}ms` }}
+                />
+              ))}
+            </span>
+            <span>{indicator ?? 'Pensando…'}</span>
+          </div>
+        )}
+      </div>
+      {/* Composer da casa (pílula elevada, enviar dentro). Extraído no <Composer> — o Chat
+          liga texto/envio e repassa `composerActions` pros seletores da conversa (agente,
+          app…); o <Composer> sozinho segue sendo o caminho de quem não tem chat. */}
+      <div className="shrink-0 p-3">
+        {notice}
+        <Composer
+          value={input}
+          onChange={setInput}
+          onSubmit={() => void submit()}
+          busy={busy}
+          placeholder={placeholder}
+          actions={composerActions}
+        />
+      </div>
+    </div>
+  )
+}

package/src/ui/components/primitives/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/ui/components/primitives/collapsible.tsx

@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/ui/components/primitives/command.tsx

@@ -0,0 +1,182 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from '../../lib/cn.ts'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './dialog.tsx'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}