Working Directory
{ const val = e.currentTarget.value.trim(); onWorkingDirectoryChange(val || null); }} /> {#if workingDirectory} {#if cwdExists === true}
✔
{:else if cwdExists === false}
✖
{:else}
{/if} {/if}
{ modeOverride = "manual"; onAgentChange(null); }} > Manual
{ modeOverride = "agent"; await fetchAgents(); // Re-apply the active agent's settings (including cwd) const current = visibleAgents.find(a => a.slug === activeAgentSlug); const agentToApply = current ?? visibleAgents[0] ?? null; if (agentToApply) { onAgentChange(agentToApply); // Force-update the input since the prop may not change (already set) const cwdEl = document.getElementById("cwd-input") as HTMLInputElement | null; if (cwdEl) cwdEl.value = agentToApply.cwd ?? ""; } }} > Agent
{#if mode === "manual"}
Key
(showKeyModal = true)}> {activeKeyId ?? "Select Key"}
Model
openModelModal()} disabled={!activeKeyId}> {activeModelId ?? "Select Model"}
{#if activeModelId}
Thinking
onReasoningChange(e.currentTarget.value)} >
Off
Low
Medium
High
Max
{/if} {:else} {#if loadingAgents}
Loading agents...
{:else if visibleAgents.length === 0}
No agents configured.
{:else}
{#each visibleAgents as agent (agent.slug + ":" + agent.scope)} {@const isActive = activeAgentSlug === agent.slug} {@const hasMultipleModels = agent.models.length > 1} {@const currentIdx = isActive ? agent.models.findIndex( (m) => m.key_id === activeKeyId && m.model_id === activeModelId, ) : -1}
{ // Only switch agent — don't reset the slider position onAgentChange(agent); const cwdEl = document.getElementById("cwd-input") as HTMLInputElement | null; if (cwdEl) cwdEl.value = agent.cwd ?? ""; }} onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onAgentChange(agent); const cwdEl = document.getElementById("cwd-input") as HTMLInputElement | null; if (cwdEl) cwdEl.value = agent.cwd ?? ""; } }} >
{agent.name}
{agent.models.length} model{agent.models.length !== 1 ? "s" : ""}
{agent.scope === "global" ? "global" : "project"}
{#if agent.description}
{agent.description}
{/if} {#if isActive && hasMultipleModels} {@const displayIdx = sliderDragging !== null ? sliderDragging : (currentIdx >= 0 ? currentIdx : 0)} {@const displayModel = agent.models[displayIdx]}
{displayModel ? `${displayModel.key_id} / ${displayModel.model_id}` : `${activeKeyId} / ${activeModelId}`}
= 0 ? currentIdx : 0} class="range range-xs" step="1" oninput={(e) => { sliderDragging = Number(e.currentTarget.value); }} onchange={(e) => { const idx = Number(e.currentTarget.value); const m = agent.models[idx]; if (m) onModelChange(m.key_id, m.model_id); sliderDragging = null; }} onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} />
{#each agent.models as _, i}
{i + 1}
{/each}
{/if}
{/each}
{/if}
router.navigate("agent-builder")} > Agent Settings
{/if}
{#if showKeyModal}
Select Key
{#each keys as key}
selectKey(key.id)} >
{key.id}
{key.provider}
{key.status}
{/each}
(showKeyModal = false)}>Cancel
(showKeyModal = false)} aria-label="Close modal">
{/if} {#if showModelModal}
Select Model
{#if loadingModels}
{:else if modelError}
{modelError}
{:else}
{#each availableModels as model}
selectModel(model)} > {model}
{/each}
{/if}
(showModelModal = false)}>Cancel
(showModelModal = false)} aria-label="Close modal">
{/if}