console/app/components/showcase/Banner.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
<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex w-full flex-col gap-3">
        <UBanner
          v-for="c in colors"
          :key="c"
          :color="c"
          :icon="c === 'success' ? 'i-material-symbols-check-circle-outline'
            : c === 'warning' ? 'i-material-symbols-timer-outline'
            : c === 'error' ? 'i-material-symbols-error-outline'
            : c === 'info' ? 'i-material-symbols-info-outline'
            : 'i-material-symbols-rocket-launch-outline'"
          :title="`${c.charAt(0).toUpperCase() + c.slice(1)}: agent runtime is online`"
          :close="true"
        />
      </div>
    </GallerySection>

    <GallerySection title="With actions">
      <div class="flex w-full flex-col gap-3">
        <UBanner
          color="warning"
          icon="i-material-symbols-timer-outline"
          title="Job lease expires in 60 seconds — renew to keep the session alive."
          :actions="[{ label: 'Renew lease', color: 'warning', variant: 'solid' }, { label: 'Release', color: 'neutral', variant: 'ghost' }]"
          :close="true"
        />
        <UBanner
          color="info"
          icon="i-material-symbols-info-outline"
          title="New runtime version v2.4.0 is available for your agents."
          :actions="[{ label: 'View changelog', color: 'neutral', variant: 'ghost' }]"
          :close="true"
        />
      </div>
    </GallerySection>

    <GallerySection title="Persistent (with id)">
      <div class="flex w-full flex-col gap-3">
        <UBanner
          id="arcp-deploy-notice"
          color="success"
          icon="i-material-symbols-check-circle-outline"
          title="Deployment complete — 12 agents successfully provisioned to the runtime cluster."
          :close="true"
        />
      </div>
    </GallerySection>

    <GallerySection title="With link">
      <div class="flex w-full flex-col gap-3">
        <UBanner
          color="primary"
          icon="i-material-symbols-open-in-new"
          title="Read the ARCP session lifecycle guide to learn about lease management and trace events."
          to="https://agentruntimecontrolprotocol.io/docs"
          target="_blank"
          :close="true"
        />
      </div>
    </GallerySection>

    <GallerySection title="Without close">
      <div class="flex w-full flex-col gap-3">
        <UBanner
          color="error"
          icon="i-material-symbols-error-outline"
          title="Runtime unreachable — all sessions suspended. Contact your cluster administrator."
        />
      </div>
    </GallerySection>
  </div>
</template>