console/app/components/showcase/PageFeature.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
<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Horizontal (default)">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <UPageFeature
          icon="i-material-symbols-rocket-launch-outline"
          title="Job Dispatch"
          description="Submit and track agent jobs across distributed runtimes with guaranteed delivery."
        />
        <UPageFeature
          icon="i-material-symbols-sensors"
          title="Live Telemetry"
          description="Stream traces and events from every active session in real time."
        />
        <UPageFeature
          icon="i-material-symbols-lock-outline"
          title="Lease Management"
          description="Acquire, renew, and release leases with automatic expiry enforcement."
        />
      </div>
    </GallerySection>

    <GallerySection title="Vertical">
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-3 w-full max-w-2xl">
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-account-tree-outline"
          title="Agent Graph"
          description="Visualize the full dependency graph of running agents and their sub-tasks."
        />
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-schedule-outline"
          title="Scheduled Runs"
          description="Trigger agent runtimes on a cron schedule or event-driven webhook."
        />
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-tune"
          title="Runtime Config"
          description="Tune concurrency limits, timeout policies, and retry strategies per session."
        />
      </div>
    </GallerySection>

    <GallerySection title="As links">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <UPageFeature
          icon="i-material-symbols-open-in-new"
          title="View Trace Explorer"
          description="Drill into individual span timelines and inspect event payloads."
          to="#"
        />
        <UPageFeature
          icon="i-material-symbols-dataset-outline"
          title="Browse Sessions"
          description="Filter and inspect all active and completed agent sessions."
          to="#"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic feature grid">
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 w-full max-w-2xl">
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-bolt-outline"
          title="Fast Cold Start"
          description="Runtimes boot in under 200 ms, keeping agent latency imperceptible."
        />
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-shield-outline"
          title="Isolated Sandboxes"
          description="Each job runs in its own ephemeral sandbox with no shared state."
        />
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-sync-outline"
          title="Idempotent Replay"
          description="Re-run any historical event sequence to reproduce or debug a session."
        />
        <UPageFeature
          orientation="vertical"
          icon="i-material-symbols-hub-outline"
          title="Multi-Runtime Mesh"
          description="Route jobs across heterogeneous runtimes using policy-based scheduling."
        />
      </div>
    </GallerySection>
  </div>
</template>