console/app/components/showcase/PageHeader.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          title="Agent Runtime"
          description="The ARCP runtime schedules jobs, manages leases, and emits structured traces for every session."
        />
      </div>
    </GallerySection>

    <GallerySection title="With headline">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          headline="ARCP v2"
          title="Runtime Control Protocol"
          description="A deterministic, auditable protocol for scheduling agents, acquiring leases, and streaming events to consumers."
        />
      </div>
    </GallerySection>

    <GallerySection title="With links">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          headline="Jobs"
          title="Job Queue"
          description="Inspect enqueued, running, and completed jobs across all registered runtimes."
          :links="[
            { label: 'Submit job', color: 'primary', icon: 'i-material-symbols-add-circle-outline' },
            { label: 'View logs', color: 'neutral', variant: 'outline', icon: 'i-material-symbols-terminal-outline' },
          ]"
        />
      </div>
    </GallerySection>

    <GallerySection title="With default slot">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          headline="Sessions"
          title="Active Sessions"
          description="Real-time view of agent sessions, lease TTLs, and runtime health across the cluster."
          :links="[
            { label: 'New session', color: 'primary', icon: 'i-material-symbols-play-circle-outline' },
          ]"
        >
          <div class="flex items-center gap-4 mt-2">
            <div class="flex items-center gap-1.5 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-check-circle-outline" class="text-success text-base" />
              <span>12 running</span>
            </div>
            <div class="flex items-center gap-1.5 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-schedule-outline" class="text-warning text-base" />
              <span>4 pending</span>
            </div>
            <div class="flex items-center gap-1.5 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-cancel-outline" class="text-error text-base" />
              <span>1 failed</span>
            </div>
          </div>
        </UPageHeader>
      </div>
    </GallerySection>

    <GallerySection title="With headline slot">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          title="Lease Manager"
          description="Acquire, renew, and release leases for agent-owned resources with configurable TTLs and retry policies."
          :links="[
            { label: 'Acquire lease', color: 'primary', icon: 'i-material-symbols-lock-outline' },
            { label: 'Release all', color: 'error', variant: 'soft', icon: 'i-material-symbols-lock-open-outline' },
          ]"
        >
          <template #headline>
            <div class="flex items-center gap-1.5">
              <UBadge color="success" variant="subtle" size="sm" label="Healthy" />
              <span class="text-sm text-(--ui-text-muted)">Lease service · 99.9% uptime</span>
            </div>
          </template>
        </UPageHeader>
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — Trace detail page">
      <div class="w-full rounded-xl border border-(--ui-border) overflow-hidden">
        <UPageHeader
          headline="Traces"
          title="trace_7f3a2b · agent:invoke"
          description="Root span for job #4821. Agent completed in 214 ms with 3 child spans and 0 errors."
          :links="[
            { label: 'Export', color: 'neutral', variant: 'outline', icon: 'i-material-symbols-download-outline' },
            { label: 'Replay job', color: 'primary', icon: 'i-material-symbols-replay-outline' },
          ]"
        >
          <div class="flex flex-wrap items-center gap-3 mt-2">
            <UBadge color="success" variant="soft" label="Completed" icon="i-material-symbols-check-circle-outline" />
            <span class="text-xs text-(--ui-text-muted) font-mono">job:4821 · session:9c1d · runtime:us-east-1</span>
          </div>
        </UPageHeader>
      </div>
    </GallerySection>
  </div>
</template>