console/app/components/showcase/Empty.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
<script setup lang="ts">
const variants = ['solid', 'outline', 'soft', 'subtle', 'naked'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 w-full">
        <UEmpty
          v-for="v in variants"
          :key="v"
          :variant="v"
          :title="`${v}`"
          description="No active agents in this session."
          icon="i-material-symbols-inbox-outline"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-4 w-full max-w-md">
        <UEmpty
          v-for="s in sizes"
          :key="s"
          :size="s"
          variant="outline"
          :title="`Size ${s}`"
          description="No runtime events recorded."
          icon="i-material-symbols-data-usage-outline"
        />
      </div>
    </GallerySection>

    <GallerySection title="With icon">
      <UEmpty
        class="w-full max-w-sm"
        variant="soft"
        icon="i-material-symbols-robot-outline"
        title="No agents running"
        description="Dispatch a job to start an agent session in this runtime."
      />
    </GallerySection>

    <GallerySection title="With avatar">
      <UEmpty
        class="w-full max-w-sm"
        variant="outline"
        :avatar="{ src: '', icon: 'i-material-symbols-account-circle-outline', size: 'xl' }"
        title="No trace data"
        description="Traces will appear here once a job has been submitted."
      />
    </GallerySection>

    <GallerySection title="With actions">
      <UEmpty
        class="w-full max-w-sm"
        variant="subtle"
        icon="i-material-symbols-assignment-outline"
        title="No jobs scheduled"
        description="Queue is empty. Create a new job to assign work to an available agent."
        :actions="[
          { label: 'Create job', color: 'primary', icon: 'i-material-symbols-add' },
          { label: 'Learn more', variant: 'ghost', color: 'neutral', icon: 'i-material-symbols-open-in-new' },
        ]"
      />
    </GallerySection>

    <GallerySection title="Realistic usage — lease table empty state">
      <UEmpty
        class="w-full max-w-md"
        variant="outline"
        size="lg"
        icon="i-material-symbols-lock-clock-outline"
        title="No active leases"
        description="Leases are granted when an agent acquires a job. Nothing is running right now."
        :actions="[
          { label: 'Dispatch job', color: 'primary', icon: 'i-material-symbols-rocket-launch-outline' },
          { label: 'Refresh', variant: 'outline', color: 'neutral', icon: 'i-material-symbols-refresh' },
        ]"
      />
    </GallerySection>
  </div>
</template>