@jacobbd/relay-ai 0.3.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,228 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>relay-ai settings</title>
7
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%231a1b2e'/><text x='50%25' y='22' font-family='system-ui' font-size='18' font-weight='700' fill='%236366f1' text-anchor='middle'>R</text></svg>">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body>
14
+ <div class="layout">
15
+
16
+ <!-- Sidebar -->
17
+ <aside class="sidebar">
18
+ <div class="sidebar-brand">
19
+ <div class="brand-logo">
20
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
21
+ <defs>
22
+ <linearGradient id="neonPink" x1="0%" y1="0%" x2="100%" y2="100%">
23
+ <stop offset="0%" stop-color="#ff007f" />
24
+ <stop offset="100%" stop-color="#7928ca" />
25
+ </linearGradient>
26
+ </defs>
27
+ <rect width="400" height="400" fill="#111111" />
28
+ <path d="M100 200 H50 M350 200 H300 M200 100 V50 M200 350 V300" stroke="#333333" stroke-width="6" />
29
+ <path d="M130 130 L90 90 M270 270 L310 310 M270 130 L310 90 M130 270 L90 310" stroke="#333333" stroke-width="6" />
30
+ <path d="M100 200 H80 M320 200 H300" stroke="#ff007f" stroke-width="4" stroke-linecap="round" />
31
+ <rect x="120" y="120" width="160" height="160" fill="#1a1a1a" stroke="#ff007f" stroke-width="4" rx="20" />
32
+ <rect x="140" y="140" width="120" height="120" fill="url(#neonPink)" rx="10" opacity="0.8" />
33
+ <path d="M175 170 L205 200 L175 230" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
34
+ <path d="M215 230 H235" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" />
35
+ <circle cx="140" cy="140" r="4" fill="#ffffff" />
36
+ <circle cx="260" cy="140" r="4" fill="#ffffff" />
37
+ <circle cx="140" cy="260" r="4" fill="#ffffff" />
38
+ <circle cx="260" cy="260" r="4" fill="#ffffff" />
39
+ </svg>
40
+ </div>
41
+ <div class="brand-meta">
42
+ <div class="brand-name">relay<span class="brand-accent">-ai</span></div>
43
+ <div class="brand-byline">by jacob-bd</div>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="sidebar-version">v0.4.0</div>
48
+
49
+ <nav class="sidebar-nav" aria-label="Sections">
50
+ <a href="#providers" class="nav-item active" data-section="providers">
51
+ <span class="nav-icon">
52
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
53
+ </span>
54
+ Providers &amp; Keys
55
+ </a>
56
+ <a href="#favorites" class="nav-item" data-section="favorites">
57
+ <span class="nav-icon">
58
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
59
+ </span>
60
+ Favorites
61
+ </a>
62
+ <a href="#antigravity" class="nav-item" data-section="antigravity">
63
+ <span class="nav-icon">
64
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5"/></svg>
65
+ </span>
66
+ Antigravity Favorites
67
+ <span class="nav-badge" id="nav-agy-badge">0/6</span>
68
+ </a>
69
+ <a href="#apps" class="nav-item" data-section="apps">
70
+ <span class="nav-icon">
71
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
72
+ </span>
73
+ Apps &amp; Launch
74
+ </a>
75
+ <a href="#server" class="nav-item" data-section="server">
76
+ <span class="nav-icon">
77
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6"/><path d="M6.343 8.343a8 8 0 1011.314 0"/></svg>
78
+ </span>
79
+ Server
80
+ <span class="nav-badge nav-badge-status" id="nav-server-badge" hidden>Live</span>
81
+ </a>
82
+ </nav>
83
+
84
+ <div class="sidebar-footer">
85
+ <button class="btn-theme-full" id="theme-toggle" title="Toggle theme">
86
+ <span class="theme-icon"></span>
87
+ <span class="theme-label">Toggle theme</span>
88
+ </button>
89
+ <div class="sidebar-footer-text">Model settings persist to<br><code>~/.relay-ai/config.json</code></div>
90
+ </div>
91
+ </aside>
92
+
93
+ <!-- Main content -->
94
+ <main class="content" id="content">
95
+
96
+ <!-- Providers section -->
97
+ <section id="providers" class="section">
98
+ <div class="section-hero">
99
+ <div class="section-eyebrow">Configuration</div>
100
+ <h1 class="section-heading">Providers <span class="heading-accent">&amp; Keys</span></h1>
101
+ <p class="section-sub">Manage API keys for your configured AI providers. Keys are stored securely in your OS keychain.</p>
102
+ <div class="provider-stats" id="provider-stats"></div>
103
+ </div>
104
+ <div class="search-row">
105
+ <div class="search-field">
106
+ <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
107
+ <input type="search" id="provider-search" class="search-input" placeholder="Search all providers…" aria-label="Search providers">
108
+ </div>
109
+ <button class="btn btn-ghost btn-refresh-all" id="refresh-all-btn" title="Refresh model lists for all providers">
110
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
111
+ Refresh All
112
+ </button>
113
+ </div>
114
+ <div id="refresh-all-status" class="refresh-all-status" hidden></div>
115
+ <div id="providers-list" class="provider-grid" role="list"></div>
116
+
117
+ <div id="available-providers-section" hidden>
118
+ <div class="available-heading">
119
+ <span class="available-heading-label">Available to add</span>
120
+ <span class="available-heading-hint">Enter an API key to configure</span>
121
+ </div>
122
+ <div id="available-providers-list" class="provider-grid provider-grid-available" role="list"></div>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- Favorites section -->
127
+ <section id="favorites" class="section">
128
+ <div class="section-hero">
129
+ <div class="section-eyebrow">Model Routing</div>
130
+ <h1 class="section-heading">General <span class="heading-accent">Favorites</span></h1>
131
+ <p class="section-sub">Models shown in the switch menu for Claude, Codex, and Gemini. Drag to reorder, Alt+↑↓ to move with keyboard.</p>
132
+ </div>
133
+ <div class="agy-slot-bar">
134
+ <div class="agy-slot-label">Slots used</div>
135
+ <div class="agy-slot-pips" id="gen-pips"></div>
136
+ <div class="agy-slot-count" id="gen-counter">0<span class="agy-slot-max">/20</span></div>
137
+ </div>
138
+ <div class="search-row">
139
+ <div class="search-field">
140
+ <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
141
+ <input type="search" id="model-search" class="search-input" placeholder="Search models to add…" aria-label="Search models">
142
+ </div>
143
+ <label class="free-only-toggle">
144
+ <input type="checkbox" id="model-free-only">
145
+ <span>Free models only</span>
146
+ </label>
147
+ </div>
148
+ <div id="model-results" class="model-results" hidden></div>
149
+ <div id="favorites-list" class="fav-list" role="list" aria-label="General favorites" data-list="general"></div>
150
+ </section>
151
+
152
+ <!-- Antigravity section -->
153
+ <section id="antigravity" class="section">
154
+ <div class="section-hero">
155
+ <div class="section-eyebrow">Antigravity CLI</div>
156
+ <h1 class="section-heading">Antigravity <span class="heading-accent">Favorites</span></h1>
157
+ <p class="section-sub">Models available in the Antigravity switch menu. Limited to <strong>6 slots</strong> — slot 7 is always the model you pick at launch.</p>
158
+ </div>
159
+ <div class="agy-slot-bar">
160
+ <div class="agy-slot-label">Slots used</div>
161
+ <div class="agy-slot-pips" id="agy-pips"></div>
162
+ <div class="agy-slot-count" id="agy-counter">0<span class="agy-slot-max">/6</span></div>
163
+ </div>
164
+ <div class="search-row">
165
+ <div class="search-field">
166
+ <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
167
+ <input type="search" id="agy-search" class="search-input" placeholder="Search models to add…" aria-label="Search Antigravity models">
168
+ </div>
169
+ <label class="free-only-toggle">
170
+ <input type="checkbox" id="agy-free-only">
171
+ <span>Free models only</span>
172
+ </label>
173
+ </div>
174
+ <div id="agy-results" class="model-results" hidden></div>
175
+ <div id="agy-list" class="fav-list" role="list" aria-label="Antigravity favorites" data-list="agy"></div>
176
+ </section>
177
+
178
+ <!-- Apps section -->
179
+ <section id="apps" class="section">
180
+ <div class="section-hero">
181
+ <div class="section-eyebrow">Control Center</div>
182
+ <h1 class="section-heading">Applications <span class="heading-accent">&amp; Launch</span></h1>
183
+ <p class="section-sub">Manage and launch your configured terminal interfaces or GUI desktop clients directly from the web panel.</p>
184
+ </div>
185
+ <div class="search-row">
186
+ <div class="search-field">
187
+ <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
188
+ <input type="search" id="app-model-search" class="search-input" placeholder="Search launch models by provider or model…" aria-label="Search launch models">
189
+ </div>
190
+ <label class="free-only-toggle">
191
+ <input type="checkbox" id="app-free-only">
192
+ <span>Free models only</span>
193
+ </label>
194
+ </div>
195
+
196
+ <div class="apps-columns">
197
+ <div class="provider-grid apps-column" id="apps-list-cli">
198
+ <!-- CLI cards populated dynamically -->
199
+ </div>
200
+ <div class="apps-column-divider" aria-hidden="true"></div>
201
+ <div class="provider-grid apps-column" id="apps-list-apps">
202
+ <!-- Desktop app cards populated dynamically -->
203
+ </div>
204
+ </div>
205
+
206
+ <details class="advanced-app-paths">
207
+ <summary>Advanced app paths</summary>
208
+ <div id="app-paths-list" class="app-paths-list"></div>
209
+ </details>
210
+ </section>
211
+
212
+ <!-- Server section -->
213
+ <section id="server" class="section">
214
+ <div class="section-hero">
215
+ <div class="section-eyebrow">Gateway</div>
216
+ <h1 class="section-heading">Server <span class="heading-accent">Gateway</span></h1>
217
+ <p class="section-sub">Runs the same Anthropic/OpenAI-compatible gateway as <code>relay-ai server</code> in the terminal — configure it here and see the URLs and models the moment it starts.</p>
218
+ </div>
219
+ <div id="server-panel"></div>
220
+ </section>
221
+
222
+ </main>
223
+ </div>
224
+
225
+ <div id="toast-container" class="toast-container" aria-live="polite"></div>
226
+ <script src="app.js" type="module"></script>
227
+ </body>
228
+ </html>