fix(custom-model): move the switching/loading status to a centred banner

The "Claude started - switching to <endpoint>..." and "Loading <model> on
<endpoint>... this can take a while" messages lived in the top-right toast
corner along with everything else, easy to miss given they can each sit on
screen for well over a minute (a real llama-swap model load).

Adds _showCenterStatus() (panels-ui.js): a single, reused, screen-centred
banner with a spinner, non-blocking (no backdrop, pointer-events: none on
the wrapper) so it never gets in the way of using the app while it's up.
Both call sites (_runCustomModelEntryViaRestart's switching message,
_watchLlamaSwapLoading's loading message) now use it instead of showToast.
Every OTHER status in these two flows - the llama-swap conflict warning
already moved to its own modal, apply failures, cancellation, and
_watchLlamaSwapLoading's own final "ready"/"still waiting" outcome - stays
exactly where it was, in the corner.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqZeHrRS6DYcGcGX2p9EwG

src/web/public/panels-ui.js

@@ -5551,6 +5551,49 @@ Object.assign(CodemanApp.prototype, {
     return { dismiss, setMessage: (text) => { msgSpan.textContent = text; } };
   },
 
+  /**
+   * A prominent, screen-centred status banner — for the small set of messages that are
+   * genuinely worth interrupting the eye for rather than living in the corner with every
+   * other toast (currently: a custom-model session's "switching backends" and "loading
+   * model" states, both of which can sit on screen for well over a minute and are easy to
+   * mistake for nothing happening). Non-blocking (`pointer-events: none`, no backdrop) —
+   * this is informational, never a gate the user has to dismiss to keep working. Only one
+   * is ever shown at a time (the DOM node is created once and reused), which matches every
+   * current caller: each hands off to the next rather than stacking.
+   */
+  _showCenterStatus(message) {
+    let el = document.getElementById('customModelCenterStatus');
+    if (!el) {
+      el = document.createElement('div');
+      el.id = 'customModelCenterStatus';
+      el.className = 'center-status-banner';
+      const spinner = document.createElement('span');
+      spinner.className = 'center-status-spinner';
+      spinner.setAttribute('aria-hidden', 'true');
+      const text = document.createElement('span');
+      text.className = 'center-status-text';
+      el.appendChild(spinner);
+      el.appendChild(text);
+      document.body.appendChild(el);
+    }
+    const textEl = el.querySelector('.center-status-text');
+    if (textEl) textEl.textContent = message;
+    el.hidden = false;
+    requestAnimationFrame(() => el.classList.add('show'));
+    return {
+      dismiss: () => {
+        el.classList.remove('show');
+        setTimeout(() => {
+          el.hidden = true;
+        }, 200);
+      },
+      setMessage: (next) => {
+        const t = el.querySelector('.center-status-text');
+        if (t) t.textContent = next;
+      },
+    };
+  },
+
 
   // ═══════════════════════════════════════════════════════════════
   // System Stats

src/web/public/session-ui.js

@@ -839,9 +839,10 @@ Object.assign(CodemanApp.prototype, {
     // Claude just launched on the NATIVE backend and is about to be restarted onto
     // the endpoint — without something saying so, that native boot (which can talk
     // to Opus for a moment) reads as "the endpoint didn't apply" rather than "the
-    // switch hasn't happened yet". Sticky until the apply below settles one way or
-    // the other, or hands off to _watchLlamaSwapLoading's own sticky toast.
-    const switchingToast = this.showToast(`Claude started — switching to ${endpointId}…`, 'info', { duration: 0 });
+    // switch hasn't happened yet". Prominent and screen-centred (not a corner toast)
+    // since this can sit on screen for a while; sticky until the apply below settles
+    // one way or the other, or hands off to _watchLlamaSwapLoading's own banner.
+    const switchingToast = this._showCenterStatus(`Claude started — switching to ${endpointId}…`);
 
     // A freshly launched CLI reports its OWN startup as 'busy' (spinner, the
     // workspace-trust check, whatever else it does before its first prompt) —
@@ -937,9 +938,9 @@ Object.assign(CodemanApp.prototype, {
    * rather than only in a test fixture.
    */
   async _watchLlamaSwapLoading(endpointId, modelId, pollIntervalMs = 3000, maxWaitMs = 120000) {
-    const toast = this.showToast(`Loading ${modelId} on ${endpointId}… this can take a while`, 'info', {
-      duration: 0,
-    });
+    // Prominent and screen-centred, not a corner toast — a real llama-swap model load can
+    // sit on screen for well over a minute, easy to mistake for nothing happening there.
+    const toast = this._showCenterStatus(`Loading ${modelId} on ${endpointId}… this can take a while`);
     const deadline = Date.now() + maxWaitMs;
     while (Date.now() < deadline) {
       await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));

src/web/public/styles.css

@@ -8522,6 +8522,66 @@ kbd {
   opacity: 1;
 }
 
+/* Custom Model Endpoint Profiles: the "switching backends" / "loading model" states
+   (docs/custom-model-endpoints-plan.md) — a small set of messages prominent and
+   screen-centred rather than corner toasts, since they can sit on screen for well
+   over a minute (a real llama-swap model load) and are easy to mistake for nothing
+   happening. Non-blocking: `pointer-events: none` on the wrapper (no backdrop, no
+   click-catcher) with `auto` restored only on the card itself, purely so the text
+   inside remains selectable — there is nothing to click to dismiss it early. */
+.center-status-banner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.96);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1rem 1.5rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text);
+  max-width: min(90vw, 460px);
+  text-align: left;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.center-status-banner.show {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.center-status-spinner {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent, var(--text));
+  animation: center-status-spin 0.8s linear infinite;
+}
+
+@keyframes center-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.center-status-text {
+  pointer-events: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .toast-success { border-color: rgba(34, 197, 94, 0.4); }
 .toast-error { border-color: rgba(239, 68, 68, 0.4); }
 .toast-warning { border-color: rgba(234, 179, 8, 0.4); }