console/app/components/showcase/Timeline.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
123
124
125
126
127
128
<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const jobEvents = [
  {
    date: '14:02:11',
    title: 'Job submitted',
    description: 'Agent dispatched task to runtime scheduler.',
    icon: 'i-material-symbols-send-outline',
  },
  {
    date: '14:02:13',
    title: 'Lease acquired',
    description: 'Worker claimed a 60-second execution lease.',
    icon: 'i-material-symbols-lock-outline',
  },
  {
    date: '14:02:45',
    title: 'Trace emitted',
    description: 'Span recorded: tool_call → fetch_context.',
    icon: 'i-material-symbols-alt-route',
  },
  {
    date: '14:03:01',
    title: 'Session closed',
    description: 'Runtime released all resources and persisted state.',
    icon: 'i-material-symbols-check-circle-outline',
  },
]

const agentLifecycle = [
  {
    value: 'init',
    date: '09:00:00',
    title: 'Agent initialised',
    description: 'Configuration loaded; capability map registered.',
    icon: 'i-material-symbols-settings-outline',
  },
  {
    value: 'active',
    date: '09:00:02',
    title: 'Runtime active',
    description: 'Heartbeat loop started; ready to accept sessions.',
    icon: 'i-material-symbols-bolt',
  },
  {
    value: 'draining',
    date: '09:14:55',
    title: 'Drain requested',
    description: 'Graceful shutdown signal received from orchestrator.',
    icon: 'i-material-symbols-warning-outline',
  },
  {
    value: 'stopped',
    date: '09:15:00',
    title: 'Agent stopped',
    description: 'All leases expired; process exited cleanly.',
    icon: 'i-material-symbols-stop-circle-outline',
  },
]

const colorItems = (color: string) => [
  {
    title: 'Event received',
    description: 'Inbound message queued.',
    icon: 'i-material-symbols-inbox-outline',
    color,
  },
  {
    title: 'Processing',
    description: 'Handler invoked.',
    icon: 'i-material-symbols-autorenew',
    color,
  },
  {
    title: 'Acknowledged',
    description: 'Response dispatched.',
    icon: 'i-material-symbols-check-circle-outline',
    color,
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Default (vertical)">
      <UTimeline :items="jobEvents" />
    </GallerySection>

    <GallerySection title="Horizontal orientation">
      <UTimeline :items="jobEvents" orientation="horizontal" class="w-full" />
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex flex-col gap-6 w-full">
        <div v-for="c in colors" :key="c" class="flex items-center gap-4">
          <span class="w-20 text-sm text-right text-[var(--ui-text-muted)] capitalize shrink-0">{{ c }}</span>
          <UTimeline :items="colorItems(c)" :color="c" orientation="horizontal" class="flex-1" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-6">
        <div v-for="s in sizes" :key="s" class="flex items-start gap-4">
          <span class="w-8 text-sm text-[var(--ui-text-muted)] shrink-0 mt-1">{{ s }}</span>
          <UTimeline
            :items="[
              { title: 'Lease acquired', description: 'Worker locked the task.', icon: 'i-material-symbols-lock-outline' },
              { title: 'Trace emitted', description: 'Span recorded.', icon: 'i-material-symbols-alt-route' },
              { title: 'Job complete', description: 'Runtime released.', icon: 'i-material-symbols-check-circle-outline' },
            ]"
            :size="s"
          />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Reverse order">
      <UTimeline :items="jobEvents" reverse />
    </GallerySection>

    <GallerySection title="Agent lifecycle (realistic)">
      <UTimeline :items="agentLifecycle" color="primary" />
    </GallerySection>
  </div>
</template>