Repository navigation
Expand file tree
/
Copy pathScrollArea.vue
More file actions
122 lines (116 loc) · 5.65 KB
/
Copy pathScrollArea.vue
File metadata and controls
122 lines (116 loc) · 5.65 KB
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
<script setup lang="ts">
const agentEvents = [
{ id: 1, type: 'session.started', agent: 'planner-v2', ts: '09:00:01', color: 'success' },
{ id: 2, type: 'job.accepted', agent: 'executor-a1', ts: '09:00:03', color: 'primary' },
{ id: 3, type: 'lease.acquired', agent: 'executor-a1', ts: '09:00:04', color: 'info' },
{ id: 4, type: 'job.running', agent: 'executor-a1', ts: '09:00:05', color: 'info' },
{ id: 5, type: 'trace.span', agent: 'planner-v2', ts: '09:00:07', color: 'neutral' },
{ id: 6, type: 'job.completed', agent: 'executor-a1', ts: '09:00:12', color: 'success' },
{ id: 7, type: 'lease.released', agent: 'executor-a1', ts: '09:00:13', color: 'neutral' },
{ id: 8, type: 'session.idle', agent: 'planner-v2', ts: '09:00:15', color: 'warning' },
{ id: 9, type: 'job.accepted', agent: 'worker-b3', ts: '09:00:17', color: 'primary' },
{ id: 10, type: 'lease.acquired', agent: 'worker-b3', ts: '09:00:18', color: 'info' },
{ id: 11, type: 'job.failed', agent: 'worker-b3', ts: '09:00:22', color: 'error' },
{ id: 12, type: 'job.retrying', agent: 'worker-b3', ts: '09:00:23', color: 'warning' },
{ id: 13, type: 'job.completed', agent: 'worker-b3', ts: '09:00:29', color: 'success' },
{ id: 14, type: 'session.ended', agent: 'planner-v2', ts: '09:00:31', color: 'neutral' },
]
const runtimes = [
{ id: 'rt-alpha', status: 'active', jobs: 12 },
{ id: 'rt-beta', status: 'active', jobs: 8 },
{ id: 'rt-gamma', status: 'draining', jobs: 2 },
{ id: 'rt-delta', status: 'idle', jobs: 0 },
{ id: 'rt-epsilon', status: 'active', jobs: 5 },
{ id: 'rt-zeta', status: 'active', jobs: 17 },
]
const traceLines = Array.from({ length: 40 }, (_, i) => ({
idx: i + 1,
span: `span-${String(i + 1).padStart(3, '0')}`,
duration: Math.floor(Math.random() * 900 + 100),
}))
</script>
<template>
<div class="flex flex-col gap-8">
<GallerySection title="Vertical (default)">
<UScrollArea class="h-52 w-72 rounded-lg border border-(--ui-border) bg-(--ui-bg-muted)">
<div class="flex flex-col divide-y divide-(--ui-border)">
<div
v-for="e in agentEvents"
:key="e.id"
class="flex items-center gap-3 px-4 py-2 text-sm"
>
<UBadge :color="e.color as any" variant="soft" size="xs" class="shrink-0 font-mono">
{{ e.type }}
</UBadge>
<span class="text-(--ui-text-muted) truncate">{{ e.agent }}</span>
<span class="ml-auto text-(--ui-text-dimmed) font-mono text-xs shrink-0">{{ e.ts }}</span>
</div>
</div>
</UScrollArea>
</GallerySection>
<GallerySection title="Horizontal">
<UScrollArea orientation="horizontal" class="w-80 rounded-lg border border-(--ui-border) bg-(--ui-bg-muted) p-3">
<div class="flex gap-3" style="width: max-content">
<div
v-for="r in runtimes"
:key="r.id"
class="flex w-32 shrink-0 flex-col gap-1 rounded-md border border-(--ui-border) bg-(--ui-bg) p-3"
>
<span class="font-mono text-xs font-semibold text-(--ui-text)">{{ r.id }}</span>
<UBadge
:color="r.status === 'active' ? 'success' : r.status === 'draining' ? 'warning' : 'neutral'"
variant="soft"
size="xs"
>
{{ r.status }}
</UBadge>
<span class="text-(--ui-text-muted) text-xs">{{ r.jobs }} jobs</span>
</div>
</div>
</UScrollArea>
</GallerySection>
<GallerySection title="Virtualized list">
<UScrollArea
class="h-56 w-72 rounded-lg border border-(--ui-border) bg-(--ui-bg-muted)"
:items="traceLines"
:virtualize="{ estimateSize: 36, skipMeasurement: true }"
>
<template #default="{ item }">
<div class="flex items-center gap-3 border-b border-(--ui-border) px-4 py-2 text-sm">
<span class="text-(--ui-text-dimmed) w-6 shrink-0 text-right font-mono text-xs">{{ item.idx }}</span>
<span class="font-mono text-(--ui-text) text-xs">{{ item.span }}</span>
<span class="ml-auto text-(--ui-text-muted) font-mono text-xs shrink-0">{{ item.duration }}ms</span>
</div>
</template>
</UScrollArea>
</GallerySection>
<GallerySection title="Realistic usage — agent event log">
<div class="w-full max-w-lg rounded-xl border border-(--ui-border) bg-(--ui-bg) shadow-sm">
<div class="flex items-center gap-2 border-b border-(--ui-border) px-4 py-3">
<UIcon name="i-material-symbols-list-alt-outline" class="text-(--ui-text-muted) size-4" />
<span class="text-sm font-semibold text-(--ui-text)">Runtime Event Stream</span>
<UBadge color="success" variant="soft" size="xs" class="ml-auto">live</UBadge>
</div>
<UScrollArea class="h-64">
<div class="flex flex-col divide-y divide-(--ui-border)">
<div
v-for="e in agentEvents"
:key="e.id"
class="group flex items-start gap-3 px-4 py-2.5 hover:bg-(--ui-bg-elevated) transition-colors"
>
<UIcon
name="i-material-symbols-fiber-manual-record"
:class="`size-2 mt-1.5 shrink-0 text-${e.color}-500`"
/>
<div class="min-w-0 flex-1">
<p class="font-mono text-xs font-medium text-(--ui-text)">{{ e.type }}</p>
<p class="text-(--ui-text-muted) text-xs">{{ e.agent }}</p>
</div>
<span class="text-(--ui-text-dimmed) font-mono text-xs shrink-0">{{ e.ts }}</span>
</div>
</div>
</UScrollArea>
</div>
</GallerySection>
</div>
</template>