claudy 0.2.2

Modern multi-provider launcher for Claude CLI
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* =========================================================
   * Dark — Binance exact tokens (DESIGN-dark.md)
   * Canvas: #0b0e11 · Card: #1e2329 · Elevated: #2b3139
   * Accent: #fcd535 Binance Yellow · on-primary: #181a20
   * ========================================================= */
  --bg:               #0b0e11;
  --surface:          #0b0e11;
  --surface-lowest:   #0b0e11;
  --surface-low:      #131920;
  --surface-mid:      #1e2329;
  --surface-high:     #2b3139;
  --surface-highest:  #363d47;
  --surface-variant:  #2b3139;
  --surface-card:     #1e2329;
  --surface-elevated: #2b3139;

  --on-surface:         #eaecef;
  --on-surface-variant: #b7bdc6;
  --outline:            #707a8a;
  --outline-variant:    #474d57;

  --accent:        #fcd535;
  --accent-hover:  #f0b90b;
  --accent-dim:    rgba(252, 213, 53, 0.08);
  --accent-glow:   rgba(252, 213, 53, 0.15);
  --on-accent:     #181a20;

  --primary:           #fcd535;
  --primary-active:    #f0b90b;
  --primary-disabled:  #3a3a1f;
  --on-primary:        #181a20;

  --trading-up:  #0ecb81;
  --trading-down: #f6465d;
  --positive:    #0ecb81;
  --critical:    #f6465d;
  --warning:     #f2b94b;
  --error:       #f6465d;

  --border:        #2b3139;
  --border-strong: #363d47;
  --border-hover:  #474d57;

  --chart-1: #fcd535;
  --chart-2: #0ecb81;
  --chart-3: #f6465d;
  --chart-4: #707a8a;
  --chart-5: #f0b90b;
  --chart-6: #929aa5;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-data:    'JetBrains Mono', ui-monospace, monospace;

  /* Binance radius — tight */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 9999px;

  --nav-width:         160px;
  --top-bar-height:    48px;
  --status-bar-height: 24px;
}

body.light {
  /* =========================================================
   * Light — Airbnb exact tokens (DESIGN-light.md)
   * Canvas: #ffffff · Hairline: #dddddd · Ink: #222222
   * Accent: #ff385c Rausch · on-primary: #ffffff
   * ========================================================= */
  --bg:               #ffffff;
  --surface:          #ffffff;
  --surface-lowest:   #ffffff;
  --surface-low:      #f7f7f7;
  --surface-mid:      #f2f2f2;
  --surface-high:     #ebebeb;
  --surface-highest:  #dddddd;
  --surface-variant:  #f2f2f2;
  --surface-card:     #ffffff;
  --surface-elevated: #f7f7f7;

  --on-surface:         #222222;
  --on-surface-variant: #3f3f3f;
  --outline:            #6a6a6a;
  --outline-variant:    #929292;

  --accent:        #ff385c;
  --accent-hover:  #e00b41;
  --accent-dim:    rgba(255, 56, 92, 0.06);
  --accent-glow:   rgba(255, 56, 92, 0.1);
  --on-accent:     #ffffff;

  --primary:          #ff385c;
  --primary-active:   #e00b41;
  --primary-disabled: #ffd1da;
  --on-primary:       #ffffff;

  --trading-up:  #008a05;
  --trading-down: #c13515;
  --positive:    #008a05;
  --critical:    #c13515;
  --warning:     #e65100;
  --error:       #c13515;

  --border:        #dddddd;
  --border-strong: #c1c1c1;
  --border-hover:  #929292;

  --chart-1: #ff385c;
  --chart-2: #222222;
  --chart-3: #6a6a6a;
  --chart-4: #929292;
  --chart-5: #e00b41;
  --chart-6: #c1c1c1;

  --font-display: 'Space Grotesk', sans-serif;

  /* Airbnb radius — generous, pill-friendly */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 9999px;
}

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 18px;
}

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}