console/app/components/showcase/Switch.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
129
130
131
132
133
134
135
<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 colorStates = reactive(
  Object.fromEntries(colors.map(c => [c, false])) as Record<string, boolean>
)
const sizeStates = reactive(
  Object.fromEntries(sizes.map(s => [s, true])) as Record<string, boolean>
)

const tracing = ref(true)
const liveReload = ref(false)
const autoRetry = ref(true)
const rateLimit = ref(false)
const debugMode = ref(false)

const loadingSwitch = ref(false)
const highlightSwitch = ref(true)
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex flex-col gap-3">
        <USwitch
          v-for="c in colors"
          :key="c"
          v-model="colorStates[c]"
          :color="c"
          :label="c"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-3">
        <USwitch
          v-for="s in sizes"
          :key="s"
          v-model="sizeStates[s]"
          :size="s"
          :label="s"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="With icons">
      <div class="flex flex-col gap-3">
        <USwitch
          v-model="tracing"
          color="primary"
          checked-icon="i-material-symbols-visibility-outline"
          unchecked-icon="i-material-symbols-visibility-off-outline"
          label="Trace capture"
          description="Record spans for all agent sessions."
        />
        <USwitch
          v-model="liveReload"
          color="info"
          checked-icon="i-material-symbols-sync"
          unchecked-icon="i-material-symbols-sync-disabled"
          label="Live reload"
          description="Reload runtime on config change."
        />
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-col gap-3">
        <USwitch
          :model-value="true"
          disabled
          label="Disabled (on)"
          description="Cannot be toggled."
        />
        <USwitch
          :model-value="false"
          disabled
          label="Disabled (off)"
          description="Cannot be toggled."
        />
        <USwitch
          v-model="loadingSwitch"
          loading
          label="Loading"
          description="Runtime state is syncing…"
        />
        <USwitch
          v-model="highlightSwitch"
          highlight
          color="success"
          label="Highlighted"
          description="Ring shown like a focus state."
        />
      </div>
    </GallerySection>

    <GallerySection title="Runtime settings">
      <div class="w-full max-w-sm rounded-lg border border-[--ui-border] p-4 flex flex-col gap-4">
        <p class="text-sm font-semibold text-[--ui-text]">Agent Runtime Config</p>
        <USwitch
          v-model="tracing"
          color="primary"
          label="Distributed tracing"
          description="Emit OTLP spans to the collector."
          checked-icon="i-material-symbols-alt-route"
        />
        <USwitch
          v-model="autoRetry"
          color="success"
          label="Auto-retry failed jobs"
          description="Retry up to 3 times on transient errors."
          checked-icon="i-material-symbols-replay"
        />
        <USwitch
          v-model="rateLimit"
          color="warning"
          label="Rate limiting"
          description="Throttle agent invocations per lease window."
          checked-icon="i-material-symbols-timer-outline"
        />
        <USwitch
          v-model="debugMode"
          color="error"
          label="Debug mode"
          description="Verbose logging for all runtime events."
          checked-icon="i-material-symbols-bug-report-outline"
        />
      </div>
    </GallerySection>
  </div>
</template>