v0.8.3: WebUI models, providers and keys; garbled thinking fixed

Streaming: Chinese reasoning showed up garbled in the WebUI. The agent
loop now feeds visible/thinking text in runs instead of byte by byte,
and the WebUI holds an incomplete UTF-8 tail until the next chunk
(cst_utf8_hold_feed), so every think_delta/assistant_delta is whole.

src/provider_switch.c: model list fetch/cache, key verify-and-save and
provider switching moved out of tui.c and shared by TUI and WebUI.

WebUI API:
- GET /api/providers, GET /api/models[?refresh=1] (401 on a rejected
  key, still listing built-ins), POST /api/provider, POST /api/key
  (key checked against /v1/models, saved to credentials 0600, never
  echoed in replies, events or logs)
- /api/config validates everything before applying, persists model,
  effort and approval (not yolo), warns when effort does not apply;
  plan_mode no longer forces read-only
- state: turn_usage, api_base, key_set/key_from, model_info,
  effort_applies, sees_images, max_steps, tool_profile, perm_timeout;
  permission events carry their timeout

Frontend: searchable model picker with refresh and manual entry,
provider picker and key dialog, effort/vision hints, toasts instead of
silent failures, Chinese error text, real protocol in the settings and
usage panels, approval countdown from the server's timeout.

Tests: utf8 hold unit test, scripts/e2e_webui_settings.py (fake
/v1/models, wrong key, switching, persistence, Chinese thinking) run
from e2e_webui.sh, scripts/tui_keys/provider.py.

web/style.css

@@ -546,7 +546,54 @@ body.no-side #side { pointer-events: none; }
 .pop-input button:active { transform: scale(.96); }
 .kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: 13px; }
 .kv span { color: var(--fg-dim); }
-.kv b { font-variant-numeric: tabular-nums; font-weight: 600; }
+.kv b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 0; overflow-wrap: anywhere; text-align: right; }
+.pop { max-height: calc(100vh - 16px); overflow-y: auto; }
+.pop:has(.pop-list) { min-width: min(360px, 94vw); max-width: min(440px, 94vw); }
+.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.pop-list { max-height: min(46vh, 420px); overflow-y: auto; }
+.pop-list .pop-item .pt { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; }
+.pop-empty { padding: 10px; color: var(--fg-faint); font-size: 12.5px; }
+.pop-note { padding: 2px 10px 6px; color: var(--fg-faint); font-size: 11.5px; line-height: 1.45; }
+.pop-note:empty { display: none; }
+.pop-note.bad { color: var(--danger); }
+.pop-note.warn { color: var(--warn); }
+.pop-item.dim { opacity: .55; }
+button.link { color: var(--link); padding: 0 4px; font-size: inherit; text-decoration: underline; }
+.ok-text { color: var(--text-success); }
+.warn-text { color: var(--warn); }
+
+/* providers and the key dialog */
+#modal-box .prov {
+  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
+  border-bottom: 1px solid var(--line); border-radius: 8px;
+}
+#modal-box .prov.on { background: var(--accent-weak); }
+#modal-box .prov .pm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+#modal-box .prov .pm span { overflow-wrap: anywhere; }
+#modal-box .prov-acts button {
+  height: 30px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13px;
+  border: 1px solid var(--line-strong); background: var(--bg-lift); white-space: nowrap;
+}
+#modal-box .prov-acts button.ok { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
+#modal-box .key-input {
+  width: 100%; margin-top: 12px; background: var(--bg-lift); border: 1px solid var(--line);
+  border-radius: 10px; padding: 9px 11px; outline: none; font-family: var(--mono);
+}
+#modal-box .key-input:focus { border-color: var(--accent-line); }
+#modal-box .key-err { min-height: 18px; margin-top: 6px; color: var(--danger); font-size: 12.5px; }
+
+/* one line of feedback for anything that failed or needs a look */
+.toast {
+  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
+  max-width: min(560px, 92vw); padding: 10px 14px; border-radius: 12px;
+  background: var(--main-surface-tertiary); border: 1px solid var(--border-medium);
+  box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
+  animation: fade-up 160ms var(--ease) both;
+}
+.toast.err { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
+.toast.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
+.toast.ok { border-color: var(--accent-line); color: var(--accent); }
+.toast[hidden] { display: none; }
 
 /* --- right panel ---------------------------------------------------------- */
 /* the right panel mirrors the rail: fixed-width contents, clipped by the track,