Drawer.vue

<script setup lang="ts">
const openBottom = ref(false)
const openRight = ref(false)
const openLeft = ref(false)
const openTop = ref(false)
const openNoHandle = ref(false)
const openSnap = ref(false)
const openInset = ref(false)
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Directions">
      <UButton icon="i-material-symbols-expand-less" @click="openBottom = true">Bottom (default)</UButton>
      <UButton icon="i-material-symbols-chevron-right" color="secondary" variant="outline" @click="openRight = true">Right</UButton>
      <UButton icon="i-material-symbols-chevron-left" color="secondary" variant="outline" @click="openLeft = true">Left</UButton>
      <UButton icon="i-material-symbols-expand-more" color="secondary" variant="outline" @click="openTop = true">Top</UButton>

      <UDrawer v-model:open="openBottom" direction="bottom" title="Active Jobs" description="Jobs currently running in the runtime.">
        <template #body>
          <div class="flex flex-col gap-3 p-4">
            <div v-for="i in 3" :key="i" class="flex items-center justify-between rounded-lg border border-gray-200 dark:border-gray-700 p-3">
              <div class="flex items-center gap-2">
                <UIcon name="i-material-symbols-play-circle-outline" class="text-primary-500" />
                <span class="text-sm font-medium">agent-job-{{ i.toString().padStart(3, '0') }}</span>
              </div>
              <UBadge color="success" variant="soft" size="sm">running</UBadge>
            </div>
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end gap-2 p-4">
            <UButton variant="ghost" color="neutral" @click="openBottom = false">Close</UButton>
            <UButton icon="i-material-symbols-stop-circle-outline" color="error" variant="soft">Stop all</UButton>
          </div>
        </template>
      </UDrawer>

      <UDrawer v-model:open="openRight" direction="right" title="Agent Inspector" description="Runtime agent session details.">
        <template #body>
          <div class="flex flex-col gap-4 p-4">
            <div class="flex flex-col gap-1">
              <span class="text-xs text-gray-500 uppercase tracking-wide">Session ID</span>
              <code class="text-sm font-mono">sess_arcp_0xf3a9</code>
            </div>
            <div class="flex flex-col gap-1">
              <span class="text-xs text-gray-500 uppercase tracking-wide">Runtime</span>
              <span class="text-sm">arcp-worker-us-east-1</span>
            </div>
            <div class="flex flex-col gap-1">
              <span class="text-xs text-gray-500 uppercase tracking-wide">Lease expires</span>
              <span class="text-sm text-warning-600 dark:text-warning-400">in 4m 12s</span>
            </div>
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end p-4">
            <UButton trailing-icon="i-material-symbols-arrow-forward" color="primary" @click="openRight = false">View session</UButton>
          </div>
        </template>
      </UDrawer>

      <UDrawer v-model:open="openLeft" direction="left" title="Event Log" description="Recent runtime events.">
        <template #body>
          <div class="flex flex-col gap-2 p-4">
            <div v-for="(evt, i) in ['job.accepted', 'session.started', 'lease.renewed', 'trace.emitted']" :key="i" class="flex items-center gap-2 text-sm">
              <UIcon name="i-material-symbols-circle" class="text-success-500 size-2" />
              <span class="font-mono text-xs text-gray-600 dark:text-gray-400">{{ evt }}</span>
            </div>
          </div>
        </template>
      </UDrawer>

      <UDrawer v-model:open="openTop" direction="top" title="Runtime Notice" description="System-level broadcast from the ARCP scheduler.">
        <template #body>
          <div class="p-4">
            <UAlert color="info" variant="soft" icon="i-material-symbols-info-outline" title="Scheduled maintenance" description="The runtime cluster will undergo rolling restarts at 02:00 UTC. Jobs will be migrated automatically." />
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end p-4">
            <UButton color="neutral" variant="outline" @click="openTop = false">Acknowledge</UButton>
          </div>
        </template>
      </UDrawer>
    </GallerySection>

    <GallerySection title="Snap Points">
      <UButton icon="i-material-symbols-drag-handle" color="info" variant="soft" @click="openSnap = true">With snap points</UButton>

      <UDrawer v-model:open="openSnap" :snap-points="[0.4, 0.75, 1]" title="Trace Viewer" description="Inspect the agent execution trace.">
        <template #body>
          <div class="flex flex-col gap-3 p-4">
            <p class="text-sm text-gray-500">Drag the handle to snap between 40%, 75%, and 100% height.</p>
            <div v-for="(step, i) in ['spawn', 'authenticate', 'fetch-context', 'execute-tool', 'emit-result']" :key="i" class="flex items-center gap-3 rounded-md bg-gray-50 dark:bg-gray-800 p-2">
              <UBadge :color="i < 3 ? 'success' : 'neutral'" variant="soft" size="xs">{{ i + 1 }}</UBadge>
              <span class="text-sm font-mono">{{ step }}</span>
              <span v-if="i < 3" class="ml-auto text-xs text-gray-400">{{ (i + 1) * 12 }}ms</span>
            </div>
          </div>
        </template>
      </UDrawer>
    </GallerySection>

    <GallerySection title="Without handle">
      <UButton icon="i-material-symbols-block" color="neutral" variant="outline" @click="openNoHandle = true">No handle</UButton>

      <UDrawer v-model:open="openNoHandle" :handle="false" title="Confirm Revoke Lease" description="This action cannot be undone.">
        <template #body>
          <div class="p-4">
            <UAlert color="error" variant="soft" icon="i-material-symbols-warning-outline" title="Lease will be revoked" description="Agent session sess_arcp_0xf3a9 will lose its runtime lock immediately." />
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end gap-2 p-4">
            <UButton variant="ghost" color="neutral" @click="openNoHandle = false">Cancel</UButton>
            <UButton color="error" icon="i-material-symbols-delete-outline" @click="openNoHandle = false">Revoke</UButton>
          </div>
        </template>
      </UDrawer>
    </GallerySection>

    <GallerySection title="Inset">
      <UButton icon="i-material-symbols-open-in-new" color="primary" variant="soft" @click="openInset = true">Inset drawer</UButton>

      <UDrawer v-model:open="openInset" inset title="Schedule Job" description="Configure and enqueue a new ARCP job.">
        <template #body>
          <div class="flex flex-col gap-4 p-4">
            <UFormField label="Job name">
              <UInput placeholder="e.g. nightly-trace-export" icon="i-material-symbols-label-outline" />
            </UFormField>
            <UFormField label="Runtime target">
              <USelect :items="['arcp-worker-us-east-1', 'arcp-worker-eu-west-1', 'arcp-worker-ap-south-1']" placeholder="Select runtime" />
            </UFormField>
            <UFormField label="Lease duration (s)">
              <UInputNumber :min="30" :max="3600" :default-value="300" />
            </UFormField>
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end gap-2 p-4">
            <UButton variant="ghost" color="neutral" @click="openInset = false">Cancel</UButton>
            <UButton icon="i-material-symbols-rocket-launch-outline" color="primary" @click="openInset = false">Enqueue job</UButton>
          </div>
        </template>
      </UDrawer>
    </GallerySection>
  </div>
</template>