DashboardSearch.vue

<script setup lang="ts">
import { ref } from 'vue'

const open1 = ref(false)
const open2 = ref(false)
const open3 = ref(false)

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 sessionGroups = [
  {
    id: 'sessions',
    label: 'Active Sessions',
    items: [
      { label: 'sess-001', icon: 'i-material-symbols-account-circle-outline', description: 'inference-worker · 12 min' },
      { label: 'sess-002', icon: 'i-material-symbols-account-circle-outline', description: 'batch-processor · 3 min' },
      { label: 'sess-003', icon: 'i-material-symbols-account-circle-outline', description: 'trace-exporter · 47 min' },
    ],
  },
  {
    id: 'events',
    label: 'Recent Events',
    items: [
      { label: 'session.started', icon: 'i-material-symbols-play-circle-outline', description: '2s ago' },
      { label: 'job.completed', icon: 'i-material-symbols-check-circle-outline', description: '14s ago' },
      { label: 'lease.expiring', icon: 'i-material-symbols-timer-outline', description: '30s remaining' },
    ],
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic (modal trigger)">
      <UDashboardSearch
        v-model:open="open1"
        placeholder="Search agents, jobs, runtimes…"
        :groups="agentGroups"
        :color-mode="false"
      />
      <UButton
        icon="i-material-symbols-search"
        variant="outline"
        color="neutral"
        @click="open1 = true"
      >
        Search ARCP
      </UButton>
    </GallerySection>

    <GallerySection title="DashboardSearchButton in sidebar (collapsed & expanded)">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar :toggle="false" class="relative! hidden! md:flex!">
            <template #header>
              <div class="flex items-center gap-2 px-4 py-3">
                <UIcon name="i-material-symbols-bolt" class="text-primary h-5 w-5" />
                <span class="font-semibold text-sm text-[var(--ui-text)]">ARCP Console</span>
              </div>
            </template>

            <div class="px-3 py-2">
              <UDashboardSearchButton label="Search ARCP…" class="w-full" />
            </div>

            <template #footer>
              <div class="flex items-center gap-2 px-4 py-3 border-t border-[var(--ui-border)]">
                <UAvatar
                  icon="i-material-symbols-person-outline"
                  size="xs"
                  color="neutral"
                  variant="soft"
                />
                <span class="text-xs text-[var(--ui-text-muted)]">agent-runtime@arcp.io</span>
              </div>
            </template>
          </UDashboardSidebar>

          <div class="flex flex-1 flex-col p-6 gap-4 overflow-auto">
            <p class="text-sm text-[var(--ui-text-muted)]">Click the search button in the sidebar to open the command palette.</p>
            <div class="grid grid-cols-2 gap-3">
              <UCard>
                <div class="flex items-center gap-2">
                  <UIcon name="i-material-symbols-work-outline" class="text-primary h-4 w-4" />
                  <span class="text-sm font-medium">12 Active Jobs</span>
                </div>
              </UCard>
              <UCard>
                <div class="flex items-center gap-2">
                  <UIcon name="i-material-symbols-smart-toy-outline" class="text-success h-4 w-4" />
                  <span class="text-sm font-medium">4 Agents Online</span>
                </div>
              </UCard>
            </div>
          </div>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>

    <GallerySection title="DashboardSearchButton collapsed (icon-only) in sidebar">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar collapsible :toggle="false" class="relative! hidden! md:flex!">
            <template #header>
              <div class="flex items-center gap-2 px-3 py-3">
                <UIcon name="i-material-symbols-bolt" class="text-primary h-5 w-5 shrink-0" />
              </div>
            </template>

            <template #default>
              <div class="px-2 py-2">
                <UDashboardSearchButton :collapsed="true" />
              </div>
            </template>

            <template #footer>
              <div class="flex items-center gap-2 px-3 py-3 border-t border-[var(--ui-border)]">
                <UAvatar
                  icon="i-material-symbols-person-outline"
                  size="xs"
                  color="neutral"
                  variant="soft"
                />
              </div>
            </template>
          </UDashboardSidebar>

          <div class="flex flex-1 flex-col p-6 gap-4 overflow-auto">
            <p class="text-sm text-[var(--ui-text-muted)]">Icon-only collapsed search button for narrow sidebars.</p>
            <UBadge color="info" variant="soft" icon="i-material-symbols-info-outline">
              Session lease active · 4m 22s remaining
            </UBadge>
          </div>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>

    <GallerySection title="With sessions & events groups">
      <UDashboardSearch
        v-model:open="open2"
        placeholder="Search sessions and events…"
        :groups="sessionGroups"
        :color-mode="false"
      />
      <UButton
        icon="i-material-symbols-manage-search-outline"
        variant="soft"
        color="primary"
        @click="open2 = true"
      >
        Session search
      </UButton>
    </GallerySection>

    <GallerySection title="Loading state">
      <UDashboardSearch
        v-model:open="open3"
        placeholder="Fetching runtime index…"
        :groups="[]"
        :loading="true"
        :color-mode="false"
      />
      <UButton
        icon="i-material-symbols-hourglass-outline"
        variant="soft"
        color="neutral"
        @click="open3 = true"
      >
        Open (loading)
      </UButton>
    </GallerySection>

    <GallerySection title="Keyboard shortcut hint">
      <div class="flex flex-col gap-2 text-sm text-(--ui-text-muted)">
        <p>
          <UKbd>meta</UKbd> + <UKbd>K</UKbd> — default shortcut to open the search modal from anywhere in the dashboard.
        </p>
        <p class="text-xs">
          The shortcut is registered via <code class="font-mono">defineShortcuts</code> internally. Pass <code class="font-mono">shortcut</code> prop to override.
        </p>
      </div>
    </GallerySection>
  </div>
</template>