wire llms, ui tweaks

2026-04-12 11:32:36 -03:00
parent 4de44baf98
commit 0f122fa8f7
22 changed files with 960 additions and 203 deletions
--- a/ui/app/src/App.vue
+++ b/ui/app/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, provide } from 'vue'
+import { ref, provide, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ScenarioSelector from './components/ScenarioSelector.vue'

@@ -7,11 +7,37 @@ const router = useRouter()
 const route = useRoute()
 const scenarioVersion = ref(0)

+// View mode for the main ops page
+const showOps = ref(true)
+const showInternals = ref(false)
+
+function toggleOps() {
+  if (route.path !== '/') router.push('/')
+  if (showOps.value && showInternals.value) {
+    showOps.value = false
+  } else {
+    showOps.value = true
+  }
+}
+
+function toggleInternals() {
+  if (route.path !== '/') router.push('/')
+  if (showInternals.value && showOps.value) {
+    showInternals.value = false
+  } else {
+    showInternals.value = true
+  }
+}
+
 function onScenarioChange() {
  scenarioVersion.value++
 }

+const isMainPage = computed(() => route.path === '/')
+
 provide('scenarioVersion', scenarioVersion)
+provide('showOps', showOps)
+provide('showInternals', showInternals)
 </script>

 <template>
@@ -22,9 +48,10 @@ provide('scenarioVersion', scenarioVersion)
        <span class="app-subtitle">NOVA Operations Platform</span>
      </div>
      <nav class="app-nav">
-        <router-link to="/" :class="{ active: route.path === '/' }">Operations</router-link>
-        <router-link to="/internals" :class="{ active: route.path === '/internals' }">Internals</router-link>
+        <a href="#" :class="{ active: isMainPage && showOps }" @click.prevent="toggleOps">Operations</a>
+        <a href="#" :class="{ active: isMainPage && showInternals }" @click.prevent="toggleInternals">Internals</a>
        <router-link to="/data" :class="{ active: route.path === '/data' }">Data</router-link>
+        <router-link to="/settings" :class="{ active: route.path === '/settings' }">Settings</router-link>
        <a href="/docs/" class="docs-link" target="_blank">Docs</a>
      </nav>
      <ScenarioSelector @change="onScenarioChange" />
--- a/ui/app/src/components/HandoverBrief.vue
+++ b/ui/app/src/components/HandoverBrief.vue
@@ -7,6 +7,7 @@ defineProps<{
    generated_at: string
    duration_ms: number
    hubs: string[]
+    llm_provider?: string
  }
 }>()
 </script>
@@ -53,7 +54,12 @@ defineProps<{

    <div class="brief-footer">
      <span>Hubs: {{ data.hubs.join(', ') }}</span>
-      <span>{{ data.duration_ms }}ms</span>
+      <span>
+        <span v-if="data.llm_provider" :style="{ color: data.llm_provider === 'template' ? 'var(--text-dim)' : 'var(--status-live)' }">
+          {{ data.llm_provider }}
+        </span>
+        {{ data.duration_ms }}ms
+      </span>
    </div>
  </div>
 </template>
--- a/ui/app/src/components/NotificationCard.vue
+++ b/ui/app/src/components/NotificationCard.vue
@@ -9,6 +9,7 @@ defineProps<{
    generated_at: string
    human_approved: boolean
    duration_ms: number
+    llm_provider?: string
  }
 }>()

@@ -38,6 +39,9 @@ const causeColor: Record<string, string> = {
        </template>
      </span>
      <span class="meta">
+        <span v-if="data.llm_provider" :class="['provider-tag', data.llm_provider === 'template' ? 'mock' : 'live']">
+          {{ data.llm_provider }}
+        </span>
        {{ data.duration_ms }}ms
        <span v-if="data.human_approved" class="approved">approved</span>
      </span>
@@ -117,6 +121,24 @@ const causeColor: Record<string, string> = {
  font-family: var(--font-mono);
 }

+.provider-tag {
+  padding: 1px 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--surface-3);
+  margin-right: 8px;
+}
+
+.provider-tag.live {
+  border-color: var(--status-live);
+  color: var(--status-live);
+}
+
+.provider-tag.mock {
+  color: var(--text-dim);
+}
+
 .approved {
  color: var(--status-live);
  margin-left: 8px;
--- a/ui/app/src/composables/useAgentEvents.ts
+++ b/ui/app/src/composables/useAgentEvents.ts
@@ -0,0 +1,112 @@
+import { ref, onUnmounted } from 'vue'
+
+export interface GraphNode {
+  id: string
+  status: string
+}
+
+export interface AgentRun {
+  agent: string
+  run_id: string
+}
+
+export interface LogEntry {
+  level: string
+  stage: string
+  msg: string
+  ts: string
+}
+
+export function useAgentEvents() {
+  const agentStatus = ref<'idle' | 'live' | 'processing' | 'error'>('idle')
+  const entries = ref<LogEntry[]>([])
+  const graphNodes = ref<GraphNode[]>([])
+  const currentRun = ref<AgentRun | null>(null)
+
+  let ws: WebSocket | null = null
+
+  function connect() {
+    if (ws) return
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+    ws = new WebSocket(`${protocol}//${location.host}/ws/agent-events`)
+
+    ws.onopen = () => { agentStatus.value = 'live' }
+
+    ws.onmessage = (e) => {
+      const event = JSON.parse(e.data)
+      handleEvent(event)
+    }
+
+    ws.onclose = () => {
+      agentStatus.value = 'idle'
+      ws = null
+      setTimeout(connect, 3000)
+    }
+
+    ws.onerror = () => { agentStatus.value = 'error' }
+  }
+
+  function disconnect() {
+    ws?.close()
+    ws = null
+  }
+
+  function handleEvent(event: any) {
+    const ts = event.timestamp || new Date().toISOString()
+    const time = ts.split('T')[1]?.split('.')[0] || ts
+
+    switch (event.type) {
+      case 'agent_start':
+        currentRun.value = { agent: event.agent, run_id: event.run_id }
+        agentStatus.value = 'processing'
+        graphNodes.value = []
+        entries.value = [{
+          level: 'info', stage: 'system',
+          msg: `Agent ${event.agent} started (${event.run_id})`, ts: time,
+        }]
+        break
+
+      case 'node_enter':
+        graphNodes.value.push({ id: event.node, status: 'processing' })
+        entries.value.push({
+          level: 'info', stage: event.node,
+          msg: `→ entering ${event.node}`, ts: time,
+        })
+        break
+
+      case 'node_exit': {
+        const node = graphNodes.value.find(n => n.id === event.node)
+        if (node) node.status = 'done'
+        break
+      }
+
+      case 'tool_call_end': {
+        const liveTag = event.is_live ? ' (live)' : ' (mock)'
+        entries.value.push({
+          level: 'info', stage: '',
+          msg: `${event.tool} — ${event.latency_ms}ms ✓${liveTag}`, ts: time,
+        })
+        break
+      }
+
+      case 'tool_call_error':
+        entries.value.push({
+          level: 'error', stage: '',
+          msg: `${event.tool} — FAILED: ${event.error}`, ts: time,
+        })
+        break
+
+      case 'agent_end':
+        agentStatus.value = 'live'
+        entries.value.push({
+          level: 'info', stage: 'system',
+          msg: `Agent complete: ${event.output_summary}`, ts: time,
+        })
+        break
+    }
+  }
+
+  onUnmounted(disconnect)
+
+  return { agentStatus, entries, graphNodes, currentRun, connect, disconnect }
+}
--- a/ui/app/src/main.ts
+++ b/ui/app/src/main.ts
@@ -4,15 +4,15 @@ import 'soleprint-ui/src/tokens.css'
 import './styles/mars-tokens.css'
 import App from './App.vue'
 import OpsNotifications from './pages/OpsNotifications.vue'
-import AgentInternals from './pages/AgentInternals.vue'
 import ScenarioData from './pages/ScenarioData.vue'
+import Settings from './pages/Settings.vue'

 const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: OpsNotifications },
-    { path: '/internals', component: AgentInternals },
    { path: '/data', component: ScenarioData },
+    { path: '/settings', component: Settings },
  ],
 })

--- a/ui/app/src/pages/AgentInternals.vue
+++ b/ui/app/src/pages/AgentInternals.vue
@@ -1,103 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { onMounted } from 'vue'
 import { Panel, SplitPane, LogRenderer } from 'soleprint-ui'
-import type { LogEntry } from 'soleprint-ui'
+import { useAgentEvents } from '../composables/useAgentEvents'

-const agentStatus = ref<'idle' | 'live' | 'processing' | 'error'>('idle')
-const entries = ref<LogEntry[]>([])
-const graphNodes = ref<{ id: string; status: string }[]>([])
-const currentRun = ref<{ agent: string; run_id: string } | null>(null)
+const { agentStatus, entries, graphNodes, currentRun, connect } = useAgentEvents()

-let ws: WebSocket | null = null
-
-function connectWs() {
-  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-  ws = new WebSocket(`${protocol}//${location.host}/ws/agent-events`)
-
-  ws.onopen = () => {
-    agentStatus.value = 'live'
-  }
-
-  ws.onmessage = (e) => {
-    const event = JSON.parse(e.data)
-    handleEvent(event)
-  }
-
-  ws.onclose = () => {
-    agentStatus.value = 'idle'
-    setTimeout(connectWs, 3000)
-  }
-
-  ws.onerror = () => {
-    agentStatus.value = 'error'
-  }
-}
-
-function handleEvent(event: any) {
-  const ts = event.timestamp || new Date().toISOString()
-  const time = ts.split('T')[1]?.split('.')[0] || ts
-
-  switch (event.type) {
-    case 'agent_start':
-      currentRun.value = { agent: event.agent, run_id: event.run_id }
-      agentStatus.value = 'processing'
-      graphNodes.value = []
-      entries.value = [{
-        level: 'info',
-        stage: 'system',
-        msg: `Agent ${event.agent} started (${event.run_id})`,
-        ts: time,
-      }]
-      break
-
-    case 'node_enter':
-      graphNodes.value.push({ id: event.node, status: 'processing' })
-      entries.value.push({
-        level: 'info',
-        stage: event.node,
-        msg: `→ entering ${event.node}`,
-        ts: time,
-      })
-      break
-
-    case 'node_exit':
-      const node = graphNodes.value.find(n => n.id === event.node)
-      if (node) node.status = 'done'
-      break
-
-    case 'tool_call_end':
-      const liveTag = event.is_live ? ' (live)' : ' (mock)'
-      entries.value.push({
-        level: 'info',
-        stage: '',
-        msg: `${event.tool} — ${event.latency_ms}ms ✓${liveTag}`,
-        ts: time,
-      })
-      break
-
-    case 'tool_call_error':
-      entries.value.push({
-        level: 'error',
-        stage: '',
-        msg: `${event.tool} — FAILED: ${event.error}`,
-        ts: time,
-      })
-      break
-
-    case 'agent_end':
-      agentStatus.value = 'live'
-      entries.value.push({
-        level: 'info',
-        stage: 'system',
-        msg: `Agent complete: ${event.output_summary}`,
-        ts: time,
-      })
-      break
-  }
-}
-
-onMounted(connectWs)
-onUnmounted(() => { ws?.close() })
+onMounted(connect)
 </script>

 <template>
@@ -111,7 +19,7 @@ onUnmounted(() => { ws?.close() })
            </div>
            <div v-else class="graph-nodes">
              <div
-                v-for="(node, i) in graphNodes"
+                v-for="node in graphNodes"
                :key="node.id"
                :class="['graph-node', node.status]"
              >
@@ -157,10 +65,7 @@ onUnmounted(() => { ws?.close() })
  min-height: 0;
 }

-.graph-container {
-  padding: 16px;
-  height: 100%;
-}
+.graph-container { padding: 16px; height: 100%; }

 .graph-nodes {
  display: flex;
@@ -208,14 +113,8 @@ onUnmounted(() => { ws?.close() })
  box-shadow: 0 0 8px var(--status-live);
 }

-.node-label {
-  font-family: var(--font-mono);
-  font-size: 13px;
-}
-
-.summary-panel {
-  flex-shrink: 0;
-}
+.node-label { font-family: var(--font-mono); font-size: 13px; }
+.summary-panel { flex-shrink: 0; }

 .summary {
  display: flex;
--- a/ui/app/src/pages/OpsNotifications.vue
+++ b/ui/app/src/pages/OpsNotifications.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, inject } from 'vue'
-import { Panel } from 'soleprint-ui'
+import { Panel, SplitPane, LogRenderer } from 'soleprint-ui'
 import NotificationCard from '../components/NotificationCard.vue'
 import HandoverBrief from '../components/HandoverBrief.vue'
+import { useAgentEvents } from '../composables/useAgentEvents'

 const flights = ref<any[]>([])
 const selectedFlight = ref('')
@@ -12,6 +13,13 @@ const notification = ref<any>(null)
 const handoverBrief = ref<any>(null)
 const scenarioVersion = inject<any>('scenarioVersion')

+const showOps = inject<any>('showOps')
+const showInternals = inject<any>('showInternals')
+const { agentStatus, entries, graphNodes, currentRun, connect } = useAgentEvents()
+
+// Connect WebSocket immediately so we don't miss events
+onMounted(connect)
+
 watch(scenarioVersion, () => {
  loadFlights()
  notification.value = null
@@ -34,6 +42,7 @@ async function runFce() {
  if (!selectedFlight.value) return
  fceStatus.value = 'processing'
  notification.value = null
+  if (!showInternals.value) showInternals.value = true

  const res = await fetch('/agents/fce', {
    method: 'POST',
@@ -42,7 +51,6 @@ async function runFce() {
  })
  const { run_id } = await res.json()

-  // Poll for result
  const poll = setInterval(async () => {
    const r = await fetch(`/agents/runs/${run_id}`)
    const data = await r.json()
@@ -60,6 +68,7 @@ async function runFce() {
 async function runHandover() {
  handoverStatus.value = 'processing'
  handoverBrief.value = null
+  if (!showInternals.value) showInternals.value = true

  const res = await fetch('/agents/handover', {
    method: 'POST',
@@ -86,55 +95,106 @@ onMounted(loadFlights)
 </script>

 <template>
-  <div class="ops-page">
-    <Panel title="FCE — Behind Every Departure" :status="fceStatus">
-      <template #actions>
-        <select v-model="selectedFlight" class="flight-select">
-          <option v-for="f in flights" :key="f.id" :value="f.id">{{ f.label }}</option>
-        </select>
-        <button class="run-btn" @click="runFce" :disabled="fceStatus === 'processing'">
-          {{ fceStatus === 'processing' ? 'Running...' : 'Run FCE' }}
-        </button>
-      </template>
+  <div :class="['ops-layout', { split: showOps && showInternals }]">
+    <!-- Ops pane (left) -->
+    <div v-show="showOps" class="ops-pane">
+      <Panel title="FCE — Behind Every Departure" :status="fceStatus">
+        <template #actions>
+          <select v-model="selectedFlight" class="flight-select">
+            <option v-for="f in flights" :key="f.id" :value="f.id">{{ f.label }}</option>
+          </select>
+          <button class="run-btn" @click="runFce" :disabled="fceStatus === 'processing'">
+            {{ fceStatus === 'processing' ? 'Running...' : 'Run FCE' }}
+          </button>
+        </template>
+        <div v-if="notification" class="result-area"><NotificationCard :data="notification" /></div>
+        <div v-else-if="fceStatus === 'processing'" class="loading">Running agent...</div>
+        <div v-else class="empty">Select a flight and click Run FCE.</div>
+      </Panel>

-      <div v-if="notification" class="result-area">
-        <NotificationCard :data="notification" />
-      </div>
-      <div v-else-if="fceStatus === 'processing'" class="loading">
-        Running agent... gathering flight data, weather, crew notes...
-      </div>
-      <div v-else class="empty">
-        Select a flight and click Run FCE to generate a notification.
-      </div>
-    </Panel>
+      <Panel title="Shift Handover Brief" :status="handoverStatus">
+        <template #actions>
+          <button class="run-btn" @click="runHandover" :disabled="handoverStatus === 'processing'">
+            {{ handoverStatus === 'processing' ? 'Running...' : 'Run Handover' }}
+          </button>
+        </template>
+        <div v-if="handoverBrief" class="result-area"><HandoverBrief :data="handoverBrief" /></div>
+        <div v-else-if="handoverStatus === 'processing'" class="loading">Running agent...</div>
+        <div v-else class="empty">Click Run Handover.</div>
+      </Panel>
+    </div>

-    <Panel title="Shift Handover Brief" :status="handoverStatus">
-      <template #actions>
-        <button class="run-btn" @click="runHandover" :disabled="handoverStatus === 'processing'">
-          {{ handoverStatus === 'processing' ? 'Running...' : 'Run Handover' }}
-        </button>
-      </template>
-
-      <div v-if="handoverBrief" class="result-area">
-        <HandoverBrief :data="handoverBrief" />
+    <!-- Internals pane (right) -->
+    <div v-show="showInternals" class="internals-pane">
+      <Panel title="Agent Graph" :status="agentStatus">
+        <div class="graph-container">
+          <div v-if="graphNodes.length === 0" class="empty">Waiting for agent run...</div>
+          <div v-else class="graph-nodes">
+            <div v-for="node in graphNodes" :key="node.id" :class="['graph-node', node.status]">
+              <div class="node-dot"></div>
+              <span class="node-label">{{ node.id }}</span>
+            </div>
+            <div class="graph-edge-line"></div>
+          </div>
+        </div>
+      </Panel>
+      <Panel title="Tool Call Stream" :status="agentStatus" class="stream-panel">
+        <LogRenderer :entries="entries" :auto-scroll="true" />
+      </Panel>
+      <div v-if="currentRun" class="run-summary">
+        {{ currentRun.agent }} / {{ currentRun.run_id }} / {{ entries.length }} events
      </div>
-      <div v-else-if="handoverStatus === 'processing'" class="loading">
-        Running agent... scanning all hubs for active issues...
-      </div>
-      <div v-else class="empty">
-        Click Run Handover to generate a shift handover brief.
-      </div>
-    </Panel>
+    </div>
  </div>
 </template>

 <style scoped>
-.ops-page {
+.ops-layout {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - 80px);
+  position: relative;
+}
+
+/* Both visible: 50/50 with divider */
+.ops-layout.split > .ops-pane { flex: 1; }
+.ops-layout.split > .internals-pane { flex: 1; border-left: var(--panel-border); padding-left: 16px; }
+
+/* Single pane: full width */
+.ops-layout > .internals-pane { flex: 1; }
+.ops-layout > .ops-pane { flex: 1; }
+
+.ops-pane {
  display: flex;
  flex-direction: column;
  gap: 24px;
+  overflow: auto;
+  height: 100%;
+  min-width: 0;
 }

+.internals-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  overflow: auto;
+  min-width: 0;
+}
+
+.internals-pane > :first-child { flex-shrink: 0; }
+.internals-pane > .stream-panel { flex: 1; min-height: 0; }
+
+.run-summary {
+  padding: 4px 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+
+
 .flight-select {
  background: var(--surface-2);
  color: var(--text-primary);
@@ -152,15 +212,12 @@ onMounted(loadFlights)
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
-  transition: background 0.15s;
 }

 .run-btn:hover { background: var(--accent-dim); }
 .run-btn:disabled { opacity: 0.5; cursor: not-allowed; }

-.result-area {
-  padding: 16px;
-}
+.result-area { padding: 16px; }

 .loading, .empty {
  padding: 32px;
@@ -170,7 +227,58 @@ onMounted(loadFlights)
  font-size: 13px;
 }

-.loading {
-  color: var(--accent);
+.loading { color: var(--accent); }
+
+.graph-container { padding: 12px; }
+
+.graph-nodes {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  padding-left: 12px;
+}
+
+.graph-edge-line {
+  position: absolute;
+  left: 17px;
+  top: 10px;
+  bottom: 10px;
+  width: 2px;
+  background: var(--surface-3);
+}
+
+.graph-node {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--surface-2);
+  border: var(--panel-border);
+  position: relative;
+  z-index: 1;
+}
+
+.node-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--status-idle);
+  flex-shrink: 0;
+}
+
+.graph-node.processing .node-dot {
+  background: var(--status-processing);
+  box-shadow: 0 0 8px var(--status-processing);
+}
+
+.graph-node.done .node-dot {
+  background: var(--status-live);
+  box-shadow: 0 0 8px var(--status-live);
+}
+
+.node-label {
+  font-family: var(--font-mono);
+  font-size: 12px;
 }
 </style>
--- a/ui/app/src/pages/Settings.vue
+++ b/ui/app/src/pages/Settings.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Panel } from 'soleprint-ui'
+
+const config = ref<any>(null)
+const selectedProvider = ref('')
+const apiKey = ref('')
+const model = ref('')
+const baseUrl = ref('')
+const saving = ref(false)
+
+async function loadConfig() {
+  const res = await fetch('/config/llm')
+  config.value = await res.json()
+  selectedProvider.value = config.value.provider
+  const p = config.value.providers[selectedProvider.value]
+  model.value = p?.model || ''
+  baseUrl.value = p?.base_url || ''
+  apiKey.value = ''
+}
+
+function onProviderChange() {
+  const p = config.value?.providers[selectedProvider.value]
+  model.value = p?.model || ''
+  baseUrl.value = p?.base_url || ''
+  apiKey.value = ''
+}
+
+async function save() {
+  saving.value = true
+  const body: any = { provider: selectedProvider.value }
+  if (apiKey.value) body.api_key = apiKey.value
+  if (model.value) body.model = model.value
+  if (baseUrl.value) body.base_url = baseUrl.value
+
+  const res = await fetch('/config/llm', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  config.value = await res.json()
+  saving.value = false
+}
+
+const providerLabels: Record<string, string> = {
+  groq: 'Groq (Llama 3.3 70B)',
+  anthropic: 'Anthropic (Claude)',
+  bedrock: 'AWS Bedrock (Claude)',
+  openai: 'OpenAI-compatible',
+  template: 'Template (no LLM)',
+}
+
+onMounted(loadConfig)
+</script>
+
+<template>
+  <div class="settings-page">
+    <Panel title="LLM Provider" status="idle">
+      <div v-if="config" class="config-form">
+        <div class="field">
+          <label>Provider</label>
+          <div class="provider-options">
+            <button
+              v-for="(label, key) in providerLabels"
+              :key="key"
+              :class="['provider-btn', { active: selectedProvider === key, configured: config.providers[key]?.configured }]"
+              @click="selectedProvider = key; onProviderChange()"
+            >
+              <span class="provider-name">{{ label }}</span>
+              <span v-if="config.providers[key]?.configured" class="configured-dot"></span>
+            </button>
+          </div>
+        </div>
+
+        <div v-if="selectedProvider !== 'template'" class="field">
+          <label>Model</label>
+          <input v-model="model" class="input" placeholder="model name" />
+        </div>
+
+        <div v-if="selectedProvider !== 'template' && selectedProvider !== 'bedrock'" class="field">
+          <label>API Key</label>
+          <input
+            v-model="apiKey"
+            type="password"
+            class="input"
+            :placeholder="config.providers[selectedProvider]?.configured ? '(configured — leave blank to keep)' : 'enter API key'"
+          />
+        </div>
+
+        <div v-if="selectedProvider === 'openai'" class="field">
+          <label>Base URL</label>
+          <input v-model="baseUrl" class="input" placeholder="https://api.openai.com/v1" />
+        </div>
+
+        <div class="actions">
+          <button class="save-btn" @click="save" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Apply' }}
+          </button>
+          <span v-if="config.provider === selectedProvider" class="active-label">active</span>
+        </div>
+
+        <div class="status-table">
+          <div class="status-header">Provider Status</div>
+          <div v-for="(info, key) in config.providers" :key="key" class="status-row">
+            <span :class="['status-name', { active: config.provider === key }]">{{ key }}</span>
+            <span :class="['status-badge', info.configured ? 'ok' : 'missing']">
+              {{ info.configured ? 'configured' : 'no key' }}
+            </span>
+            <span class="status-model">{{ info.model }}</span>
+          </div>
+        </div>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<style scoped>
+.settings-page {
+  max-width: 700px;
+}
+
+.config-form {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.provider-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.provider-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border: var(--panel-border);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.provider-btn:hover { background: var(--surface-3); }
+.provider-btn.active { border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }
+
+.configured-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--status-live);
+  margin-left: auto;
+}
+
+.input {
+  background: var(--surface-0);
+  color: var(--text-primary);
+  border: var(--panel-border);
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.input:focus { outline: 1px solid var(--accent); }
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.save-btn {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 6px 24px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.save-btn:hover { background: var(--accent-dim); }
+.save-btn:disabled { opacity: 0.5; }
+
+.active-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--status-live);
+}
+
+.status-table {
+  margin-top: 8px;
+  border-top: var(--panel-border);
+  padding-top: 12px;
+}
+
+.status-header {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+.status-name {
+  font-family: var(--font-mono);
+  width: 80px;
+  color: var(--text-dim);
+}
+
+.status-name.active { color: var(--accent); font-weight: 600; }
+
+.status-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  width: 80px;
+  text-align: center;
+}
+
+.status-badge.ok { color: var(--status-live); border: 1px solid var(--status-live); }
+.status-badge.missing { color: var(--text-dim); border: 1px solid var(--surface-3); }
+
+.status-model {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+</style>