Settings/LLM: unified panel with per-row active toggle, edit, spend

Reworks the LLM settings surface based on UX feedback. Drops the
separate "Active LLM (this session)" card — its functionality is now
inline on each saved config as a star toggle (writes the same
localStorage key the Assistant reads via @crema/llm-providers-ui's
saveSettings, so the existing assistant code picks the change up
without any plumbing).

Per-row controls now include:
- Star: make this config active for the current browser
- Switch: enable/disable server-side
- Pencil: edit (modal, not inline-expand)
- Trash: delete (with confirm)
- Spend (30d): cost + request count, sourced from
  /api/v1/ai/llm/usage/by-model and matched on (provider, model)

Other improvements:
- Add wizard moved to a Dialog modal instead of pushing the list
  around. Same form handles edit.
- Empty state: "Seed from catalog" button creates a curated starter
  set (GPT-4o mini/4o, Sonnet 4.6, Haiku 4.5, DeepSeek V4 Flash, LM
  Studio) so first-time operators don't face a blank panel.
- Catalog dropdown picks now auto-fill input/output costs as you
  switch models, so the rates always reflect the chosen model unless
  manually overridden.
- The lib's full settings card (system prompt, transport, context
  budget) is still reachable for advanced cases — collapsed into a
  <details> below the panel.

Adds llm-configs.ts: getUsageByModel + findSpend helper for the
per-row spend lookup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-05-02 18:47:45 +10:00
parent bfe61c220a
commit 5dfceeff94
3 changed files with 510 additions and 177 deletions

View File

@@ -215,22 +215,18 @@ export default function SettingsRoute() {
<div className="flex flex-col gap-4">
<LlmConfigurationsPanel />
<Card>
<CardHeader>
<CardTitle>Active LLM (this session)</CardTitle>
<CardDescription>
The Assistant uses this provider/model on the next message. For
persistent setups shared across operators, use the Saved
configurations card above.
</CardDescription>
</CardHeader>
<CardContent>
<details className="rounded-md border bg-muted/20 px-3 py-2 text-sm">
<summary className="cursor-pointer text-muted-foreground">
Advanced: tweak the active session settings (transport, system prompt,
context budget) directly
</summary>
<div className="pt-3">
<LLMProvidersSettingsCard
onTest={testConnection}
hideTransportToggle={false}
/>
</CardContent>
</Card>
</div>
</details>
<div className="flex items-center gap-2">
<Button