CommandPalette.vue

<script setup lang="ts">
const agentGroups = [
  {
    id: 'actions',
    label: 'Actions',
    items: [
      { label: 'Spawn agent', icon: 'i-material-symbols-add-circle-outline', description: 'Start a new agent session', kbds: ['meta', 'N'] },
      { label: 'Terminate session', icon: 'i-material-symbols-stop-circle-outline', description: 'Gracefully stop the current session', kbds: ['meta', 'T'] },
      { label: 'Renew lease', icon: 'i-material-symbols-autorenew', description: 'Extend the active job lease', kbds: ['meta', 'R'] },
    ],
  },
  {
    id: 'jobs',
    label: 'Recent Jobs',
    items: [
      { label: 'job-7f3a2c', icon: 'i-material-symbols-work-outline', description: 'Inference pipeline · running' },
      { label: 'job-4b1e9d', icon: 'i-material-symbols-work-history-outline', description: 'Batch trace export · completed' },
      { label: 'job-9c0f55', icon: 'i-material-symbols-work-outline', description: 'Event stream replay · queued' },
    ],
  },
  {
    id: 'runtimes',
    label: 'Runtimes',
    items: [
      { label: 'runtime-alpha', icon: 'i-material-symbols-memory-outline', description: 'GPU cluster · 4 agents active' },
      { label: 'runtime-beta', icon: 'i-material-symbols-memory-outline', description: 'CPU pool · idle' },
    ],
  },
]

const agentGroupsWithIcons = [
  {
    id: 'events',
    label: 'Events',
    highlightedIcon: 'i-material-symbols-arrow-forward',
    items: [
      { label: 'session.started', icon: 'i-material-symbols-play-circle-outline', description: 'Session lifecycle event' },
      { label: 'job.completed', icon: 'i-material-symbols-check-circle-outline', description: 'Job terminal event' },
      { label: 'lease.expiring', icon: 'i-material-symbols-timer-outline', description: 'Lease lifecycle warning' },
      { label: 'trace.emitted', icon: 'i-material-symbols-route-outline', description: 'Observability trace event' },
    ],
  },
]

const multiGroups = [
  {
    id: 'commands',
    label: 'Commands',
    items: [
      { label: 'View traces', icon: 'i-material-symbols-route-outline' },
      { label: 'Open logs', icon: 'i-material-symbols-terminal-outline' },
      { label: 'Inspect agent', icon: 'i-material-symbols-manage-search-outline' },
    ],
  },
  {
    id: 'sessions',
    label: 'Sessions',
    items: [
      { label: 'sess-001', icon: 'i-material-symbols-account-circle-outline', description: 'inference-worker · active' },
      { label: 'sess-002', icon: 'i-material-symbols-account-circle-outline', description: 'batch-processor · idle' },
    ],
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic palette with groups">
      <div class="w-full max-w-lg rounded-lg border border-(--ui-border) shadow-sm overflow-hidden">
        <UCommandPalette
          :autofocus="false"
          placeholder="Search agents, jobs, runtimes…"
          :groups="agentGroups"
        />
      </div>
    </GallerySection>

    <GallerySection title="With highlighted icon per group">
      <div class="w-full max-w-lg rounded-lg border border-(--ui-border) shadow-sm overflow-hidden">
        <UCommandPalette
          :autofocus="false"
          placeholder="Search events…"
          :groups="agentGroupsWithIcons"
        />
      </div>
    </GallerySection>

    <GallerySection title="Multiple groups">
      <div class="w-full max-w-lg rounded-lg border border-(--ui-border) shadow-sm overflow-hidden">
        <UCommandPalette
          :autofocus="false"
          placeholder="Search commands and sessions…"
          :groups="multiGroups"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-6 w-full max-w-lg">
        <div v-for="s in ['sm', 'md', 'lg'] as const" :key="s" class="rounded-lg border border-(--ui-border) shadow-sm overflow-hidden">
          <UCommandPalette
            :autofocus="false"
            :size="s"
            :placeholder="`Size ${s} — search jobs…`"
            :groups="[{
              id: 'jobs',
              label: 'Jobs',
              items: [
                { label: 'job-alpha', icon: 'i-material-symbols-work-outline', description: 'Running' },
                { label: 'job-beta', icon: 'i-material-symbols-work-history-outline', description: 'Completed' },
              ]
            }]"
          />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Inside a Modal (realistic usage)">
      <UModal>
        <UButton icon="i-material-symbols-search" variant="outline" color="neutral">
          Open command palette
        </UButton>
        <template #content>
          <UCommandPalette
            placeholder="Search ARCP resources…"
            :groups="agentGroups"
            :close="true"
          />
        </template>
      </UModal>
    </GallerySection>

    <GallerySection title="Loading state">
      <div class="w-full max-w-lg rounded-lg border border-(--ui-border) shadow-sm overflow-hidden">
        <UCommandPalette
          :autofocus="false"
          loading
          placeholder="Fetching runtime index…"
          :groups="[]"
        />
      </div>
    </GallerySection>
  </div>
</template>