console/app/components/showcase/ColorPicker.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
<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
const formats = ['hex', 'rgb', 'hsl', 'cmyk', 'lab'] as const

const agentColor = ref('#3B82F6')
const traceColor = ref('#10B981')
const sessionColor = ref('#F59E0B')
const disabledColor = ref('#6B7280')

const activeFormat = ref<'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'>('hex')
const formatColor = ref('#8B5CF6')

const sizeColor = ref('#EF4444')
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Default">
      <div class="flex flex-col gap-2 items-center">
        <UColorPicker v-model="agentColor" />
        <span class="text-sm text-muted font-mono">Agent highlight: {{ agentColor }}</span>
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap gap-6 items-start">
        <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
          <UColorPicker v-model="sizeColor" :size="s" />
          <span class="text-xs text-muted capitalize">{{ s }}</span>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Color Formats">
      <div class="flex flex-col gap-4 items-start">
        <div class="flex gap-2 flex-wrap">
          <UButton
            v-for="f in formats"
            :key="f"
            :variant="activeFormat === f ? 'solid' : 'outline'"
            color="primary"
            size="sm"
            class="uppercase"
            @click="activeFormat = f"
          >{{ f }}</UButton>
        </div>
        <UColorPicker v-model="formatColor" :format="activeFormat" />
        <span class="text-sm text-muted font-mono">Runtime trace color ({{ activeFormat }}): {{ formatColor }}</span>
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-wrap gap-8 items-start">
        <div class="flex flex-col items-center gap-2">
          <UColorPicker v-model="traceColor" />
          <span class="text-xs text-muted">Enabled — trace event</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <UColorPicker v-model="disabledColor" disabled />
          <span class="text-xs text-muted">Disabled — lease locked</span>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Realistic Usage — Session Label Colors">
      <div class="flex flex-col gap-4 w-full max-w-sm">
        <div class="flex items-center gap-4 p-3 rounded-lg border border-default">
          <div
            class="size-8 rounded-full flex-shrink-0 ring-2 ring-white shadow"
            :style="{ backgroundColor: agentColor }"
          />
          <div class="flex flex-col gap-1 flex-1">
            <span class="text-sm font-medium">Agent color tag</span>
            <span class="text-xs text-muted font-mono">{{ agentColor }}</span>
          </div>
          <UColorPicker v-model="agentColor" size="sm" />
        </div>
        <div class="flex items-center gap-4 p-3 rounded-lg border border-default">
          <div
            class="size-8 rounded-full flex-shrink-0 ring-2 ring-white shadow"
            :style="{ backgroundColor: sessionColor }"
          />
          <div class="flex flex-col gap-1 flex-1">
            <span class="text-sm font-medium">Session color tag</span>
            <span class="text-xs text-muted font-mono">{{ sessionColor }}</span>
          </div>
          <UColorPicker v-model="sessionColor" size="sm" />
        </div>
      </div>
    </GallerySection>
  </div>
</template>