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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
<script module>
const modelCache = new Map<string, string[]>();
</script>
<script lang="ts">
import type { KeyInfo } from "../types.js";
import { config } from "../config.js";
// Moves an element to document.body so modals escape the sidebar's
// transform stacking context and cover the full viewport.
function portal(node: HTMLElement) {
document.body.appendChild(node);
return {
destroy() {
node.remove();
},
};
}
const {
keys = [],
activeKeyId = null,
activeModelId = null,
reasoningEffort = "max",
onKeyChange,
onModelChange,
onReasoningChange,
}: {
keys?: KeyInfo[];
activeKeyId?: string | null;
activeModelId?: string | null;
reasoningEffort?: string;
onKeyChange: (keyId: string) => void;
onModelChange: (keyId: string, modelId: string) => void;
onReasoningChange: (effort: string) => void;
} = $props();
let showKeyModal = $state(false);
let showModelModal = $state(false);
let availableModels = $state<string[]>([]);
let loadingModels = $state(false);
let modelError = $state<string | null>(null);
function selectKey(keyId: string) {
showKeyModal = false;
onKeyChange(keyId);
}
async function openModelModal() {
if (!activeKeyId) return;
showModelModal = true;
modelError = null;
// Check session cache
if (modelCache.has(activeKeyId)) {
availableModels = modelCache.get(activeKeyId)!;
loadingModels = false;
return;
}
loadingModels = true;
availableModels = [];
try {
const res = await fetch(
`${config.apiBase}/models/available?keyId=${encodeURIComponent(activeKeyId)}`,
);
if (!res.ok) {
const data = await res.json().catch(() => ({}));
modelError = data.error ?? `Failed to fetch models (HTTP ${res.status})`;
return;
}
const data = await res.json();
availableModels = data.models ?? [];
// Cache for session
modelCache.set(activeKeyId, availableModels);
} catch (err) {
modelError = err instanceof Error ? err.message : "Failed to fetch models";
} finally {
loadingModels = false;
}
}
function selectModel(model: string) {
showModelModal = false;
if (activeKeyId) {
onModelChange(activeKeyId, model);
}
}
</script>
<div class="bg-base-200 rounded-lg p-3">
<div class="flex items-center justify-between">
<span class="text-sm font-medium">Key</span>
<button class="btn btn-sm btn-outline" onclick={() => (showKeyModal = true)}>
{activeKeyId ?? "Select Key"}
</button>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-sm font-medium">Model</span>
<button class="btn btn-sm btn-outline" onclick={openModelModal} disabled={!activeKeyId}>
{activeModelId ?? "Select Model"}
</button>
</div>
{#if activeModelId}
<div class="flex items-center justify-between mt-2">
<span class="text-sm font-medium">Thinking</span>
<select
class="select select-bordered select-sm"
value={reasoningEffort}
onchange={(e) => onReasoningChange(e.currentTarget.value)}
>
<option value="none">Off</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
<option value="max">Max</option>
</select>
</div>
{/if}
</div>
{#if showKeyModal}
<div class="modal modal-open" use:portal>
<div class="modal-box">
<h3 class="font-bold text-xl">Select Key</h3>
<div class="mt-4 flex flex-col gap-2">
{#each keys as key}
<button
class="btn {key.id === activeKeyId
? 'btn-primary'
: 'btn-ghost'} justify-start text-base"
onclick={() => selectKey(key.id)}
>
<span class="font-mono">{key.id}</span>
<span class="badge ml-auto">{key.provider}</span>
<span
class="badge {key.status === 'active'
? 'badge-success'
: 'badge-error'}">{key.status}</span
>
</button>
{/each}
</div>
<div class="modal-action">
<button class="btn" onclick={() => (showKeyModal = false)}>Cancel</button>
</div>
</div>
<button type="button" class="modal-backdrop" onclick={() => (showKeyModal = false)} aria-label="Close modal"></button>
</div>
{/if}
{#if showModelModal}
<div class="modal modal-open" use:portal>
<div class="modal-box">
<h3 class="font-bold text-xl">Select Model</h3>
{#if loadingModels}
<div class="flex justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
</div>
{:else if modelError}
<div class="alert alert-error mt-4 text-base">
<span>{modelError}</span>
</div>
{:else}
<div class="mt-4 flex flex-col gap-1 max-h-96 overflow-y-auto">
{#each availableModels as model}
<button
class="btn {model === activeModelId
? 'btn-primary'
: 'btn-ghost'} justify-start font-mono text-base"
onclick={() => selectModel(model)}
>
{model}
</button>
{/each}
</div>
{/if}
<div class="modal-action">
<button class="btn" onclick={() => (showModelModal = false)}>Cancel</button>
</div>
</div>
<button type="button" class="modal-backdrop" onclick={() => (showModelModal = false)} aria-label="Close modal"></button>
</div>
{/if}
|
