PageBody.vue

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic usage">
      <UPage class="w-full max-w-2xl border border-(--ui-border) rounded-lg overflow-hidden">
        <UPageHeader
          headline="Agent Runtime"
          title="Job Execution Dashboard"
          description="Monitor active jobs, sessions, and runtime leases across all connected agents."
          :links="[
            { label: 'Submit Job', icon: 'i-material-symbols-rocket-launch-outline', color: 'primary' },
            { label: 'View Logs', icon: 'i-material-symbols-receipt-long-outline', color: 'neutral', variant: 'outline' },
          ]"
        />
        <UPageBody>
          <div class="flex flex-col gap-4">
            <p class="text-(--ui-text-muted) text-sm">
              The runtime currently has <strong>3 active sessions</strong> with leases valid for the next 5 minutes.
              All agents are reporting healthy heartbeats.
            </p>
            <div class="grid grid-cols-3 gap-3">
              <div
                v-for="stat in runtimeStats"
                :key="stat.label"
                class="flex flex-col gap-1 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-3"
              >
                <span class="text-xs text-(--ui-text-muted)">{{ stat.label }}</span>
                <span class="text-lg font-semibold text-(--ui-text)">{{ stat.value }}</span>
              </div>
            </div>
          </div>
        </UPageBody>
      </UPage>
    </GallerySection>

    <GallerySection title="With prose content">
      <UPage class="w-full max-w-2xl border border-(--ui-border) rounded-lg overflow-hidden">
        <UPageHeader
          headline="ARCP Specification"
          title="Lease Lifecycle"
          description="How the runtime manages lease acquisition, renewal, and expiration for agent jobs."
        />
        <UPageBody>
          <div class="prose prose-sm dark:prose-invert max-w-none">
            <h3>Acquiring a Lease</h3>
            <p>
              When an agent submits a job, the runtime allocates a lease with a configured TTL.
              The agent must renew the lease before expiry or the job will be reclaimed.
            </p>
            <h3>Renewal Window</h3>
            <p>
              Renewal requests are accepted within the final 20% of the lease TTL.
              Early renewal attempts are rejected with a <code>LEASE_NOT_RENEWABLE</code> status.
            </p>
            <h3>Expiration &amp; Reclaim</h3>
            <p>
              On expiry the runtime emits a <code>lease.expired</code> event and transitions
              the job to <code>RECLAIMED</code>. Agents may resubmit with the original trace ID.
            </p>
          </div>
        </UPageBody>
      </UPage>
    </GallerySection>

    <GallerySection title="Custom element (as)">
      <UPage class="w-full max-w-2xl border border-(--ui-border) rounded-lg overflow-hidden">
        <UPageHeader
          headline="Events"
          title="Runtime Event Stream"
          description="Live trace events emitted by the ARCP runtime during job execution."
        />
        <UPageBody as="section">
          <ul class="flex flex-col gap-2">
            <li
              v-for="event in traceEvents"
              :key="event.id"
              class="flex items-center gap-3 rounded-md border border-(--ui-border) bg-(--ui-bg) px-3 py-2 text-sm"
            >
              <UIcon :name="event.icon" :class="`text-(--ui-color-${event.color}-500) shrink-0`" />
              <span class="font-mono text-(--ui-text-muted) text-xs">{{ event.ts }}</span>
              <span class="text-(--ui-text) flex-1">{{ event.label }}</span>
              <UBadge :color="event.color" variant="soft" size="xs">{{ event.type }}</UBadge>
            </li>
          </ul>
        </UPageBody>
      </UPage>
    </GallerySection>
  </div>
</template>

<script setup lang="ts">
const runtimeStats = [
  { label: 'Active Jobs', value: '14' },
  { label: 'Sessions', value: '3' },
  { label: 'Avg Lease TTL', value: '4m 22s' },
]

const traceEvents = [
  {
    id: 1,
    ts: '12:04:01.003',
    label: 'Job submitted by agent-7f3a',
    type: 'job.submitted',
    icon: 'i-material-symbols-upload-outline',
    color: 'primary',
  },
  {
    id: 2,
    ts: '12:04:01.187',
    label: 'Lease acquired — TTL 300s',
    type: 'lease.acquired',
    icon: 'i-material-symbols-lock-outline',
    color: 'success',
  },
  {
    id: 3,
    ts: '12:04:45.002',
    label: 'Lease renewal requested',
    type: 'lease.renewed',
    icon: 'i-material-symbols-autorenew',
    color: 'info',
  },
  {
    id: 4,
    ts: '12:05:10.441',
    label: 'Checkpoint written to trace',
    type: 'trace.checkpoint',
    icon: 'i-material-symbols-save-outline',
    color: 'neutral',
  },
  {
    id: 5,
    ts: '12:05:58.900',
    label: 'Job completed successfully',
    type: 'job.completed',
    icon: 'i-material-symbols-check-circle-outline',
    color: 'success',
  },
]
</script>