console/app/components/showcase/PageGrid.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Default grid — PageCard items">
      <UPageGrid class="w-full">
        <UPageCard
          icon="i-material-symbols-robot-2-outline"
          title="Agent Runtime"
          description="Manages the full lifecycle of agent sessions, including spawn, suspend, and teardown."
        />
        <UPageCard
          icon="i-material-symbols-work-history-outline"
          title="Job Scheduler"
          description="Queues and dispatches jobs across available runtimes with priority-based routing."
        />
        <UPageCard
          icon="i-material-symbols-timeline-outline"
          title="Trace Collector"
          description="Captures span events from every agent hop for distributed tracing and replay."
        />
        <UPageCard
          icon="i-material-symbols-key-outline"
          title="Lease Manager"
          description="Issues and renews time-bounded leases to prevent orphaned agent sessions."
        />
        <UPageCard
          icon="i-material-symbols-monitor-heart-outline"
          title="Health Probe"
          description="Continuously polls runtime endpoints and removes unhealthy nodes from rotation."
        />
        <UPageCard
          icon="i-material-symbols-event-note-outline"
          title="Event Bus"
          description="Routes structured control-plane events to registered subscribers in real time."
        />
      </UPageGrid>
    </GallerySection>

    <GallerySection title="Highlighted cards">
      <UPageGrid class="w-full">
        <UPageCard
          icon="i-material-symbols-rocket-launch-outline"
          title="Launch Session"
          description="Bootstraps a new agent context and binds it to a runtime node."
          highlight
          highlight-color="primary"
        />
        <UPageCard
          icon="i-material-symbols-check-circle-outline"
          title="Job Complete"
          description="The job finished within its SLA window with all checkpoints verified."
          highlight
          highlight-color="success"
        />
        <UPageCard
          icon="i-material-symbols-warning-outline"
          title="Lease Expiring"
          description="This session's lease expires in under 30 seconds — renew or terminate."
          highlight
          highlight-color="warning"
        />
      </UPageGrid>
    </GallerySection>

    <GallerySection title="Spotlight effect">
      <UPageGrid class="w-full">
        <UPageCard
          icon="i-material-symbols-hub-outline"
          title="Control Plane"
          description="Central orchestrator that negotiates agent placement and session routing."
          spotlight
          spotlight-color="primary"
          variant="outline"
        />
        <UPageCard
          icon="i-material-symbols-device-hub-outline"
          title="Data Plane"
          description="High-throughput channel for streaming payloads between agent and runtime."
          spotlight
          spotlight-color="secondary"
          variant="outline"
        />
        <UPageCard
          icon="i-material-symbols-security-outline"
          title="Auth Layer"
          description="Validates tokens and enforces per-session capability grants on every call."
          spotlight
          spotlight-color="info"
          variant="outline"
        />
      </UPageGrid>
    </GallerySection>

    <GallerySection title="PageFeature items in grid">
      <UPageGrid class="w-full">
        <UPageFeature
          icon="i-material-symbols-bolt-outline"
          title="Sub-millisecond dispatch"
          description="Jobs are routed to idle runtimes in under 1 ms via the in-memory scheduler."
          orientation="vertical"
        />
        <UPageFeature
          icon="i-material-symbols-lock-outline"
          title="Zero-trust sessions"
          description="Every agent session is scoped to a signed lease — no implicit ambient authority."
          orientation="vertical"
        />
        <UPageFeature
          icon="i-material-symbols-sync-outline"
          title="Idempotent retries"
          description="The runtime deduplicates replayed jobs using content-addressed job IDs."
          orientation="vertical"
        />
        <UPageFeature
          icon="i-material-symbols-stacked-line-chart-outline"
          title="Structured traces"
          description="Every span carries W3C trace context for seamless OpenTelemetry export."
          orientation="vertical"
        />
      </UPageGrid>
    </GallerySection>
  </div>
</template>