@polderlabs/bizar 4.4.11 → 4.4.13

package/bizar-dash/src/server/routes/minimax.mjs

@@ -0,0 +1,133 @@
+/**
+ * src/server/routes/minimax.mjs
+ *
+ * v4.5.0 — REST surface for the MiniMax Token Plan integration.
+ *
+ * Endpoints:
+ *   GET  /api/minimax/status         — current key + cached remains summary
+ *   GET  /api/minimax/remains        — full remains snapshot (5h + weekly per model)
+ *   POST /api/minimax/remains/refresh — force re-fetch from the API
+ *   POST /api/minimax/test           — smoke-test the key with a one-shot chat call
+ *   GET  /api/minimax/cache          — read the on-disk cache file (for debugging)
+ *   DELETE /api/minimax/cache        — clear cache
+ *   POST /api/minimax/onboarding     — onboarding wizard state (dismissed, hiddenModels)
+ *   POST /api/minimax/onboarding/save-key  — write the user's key to opencode's
+ *                                           auth.json (the canonical place)
+ *
+ * The MiniMax key is read from opencode's auth store, NOT from
+ * settings.json. The dashboard's onboarding wizard writes the key
+ * directly to ~/.local/share/opencode/auth.json so opencode itself
+ * can pick it up — that way the user only enters the key once.
+ */
+import { Router } from 'express';
+import {
+  fetchRemains,
+  chatCompletion,
+  readCachedRemains,
+  clearRemainsCache,
+  getStatus,
+  writeAuthFile,
+  writeOnboarding,
+  readOnboarding,
+  maskKey,
+  KNOWN_MODELS,
+} from '../minimax.mjs';
+import { wrap } from './_shared.mjs';
+
+/**
+ * @param {object} deps
+ * @param {object} deps.state
+ * @param {Function} deps.broadcast
+ * @returns {import('express').Router}
+ */
+export function createMinimaxRouter({ state, broadcast }) {
+  const router = Router();
+
+  // GET / — health + config summary
+  router.get('/minimax/status', wrap(async (_req, res) => {
+    res.json(getStatus());
+  }));
+
+  // GET /onboarding — wizard state (dismissed?, hidden models)
+  router.get('/minimax/onboarding', wrap(async (_req, res) => {
+    res.json(readOnboarding());
+  }));
+
+  // POST /onboarding — update wizard state
+  router.post('/minimax/onboarding', wrap(async (req, res) => {
+    const patch = req.body || {};
+    const next = writeOnboarding(patch);
+    res.json(next);
+  }));
+
+  // POST /onboarding/save-key — write the key to opencode's auth.json
+  router.post('/minimax/onboarding/save-key', wrap(async (req, res) => {
+    const { key, groupId } = req.body || {};
+    if (typeof key !== 'string' || !key.trim()) {
+      res.status(400).json({ ok: false, error: 'no_key', message: 'Key is required' });
+      return;
+    }
+    try {
+      const path = writeAuthFile(key.trim(), groupId || 'default');
+      // Clear the remains cache so the next load picks up the new key.
+      clearRemainsCache();
+      // Mark the onboarding as dismissed (user has the key now).
+      writeOnboarding({ dismissedAt: Date.now() });
+      if (broadcast) {
+        broadcast({ type: 'minimax:configured', source: 'auth.json' });
+      }
+      res.json({ ok: true, path, apiKeyHint: maskKey(key) });
+    } catch (err) {
+      res.status(500).json({ ok: false, error: 'write_failed', message: err.message });
+    }
+  }));
+
+  // GET /remains — current snapshot (cache-or-fetch)
+  router.get('/minimax/remains', wrap(async (_req, res) => {
+    const result = await fetchRemains();
+    if (broadcast && result.ok) {
+      broadcast({ type: 'minimax:remains', remains: result });
+    }
+    res.json(result);
+  }));
+
+  // POST /remains/refresh — force re-fetch (bypass cache TTL)
+  router.post('/minimax/remains/refresh', wrap(async (_req, res) => {
+    const result = await fetchRemains({ force: true });
+    if (broadcast && result.ok) {
+      broadcast({ type: 'minimax:remains:refreshed', remains: result });
+    }
+    res.json(result);
+  }));
+
+  // POST /test — smoke-test the key with a chat completion
+  router.post('/minimax/test', wrap(async (req, res) => {
+    const body = req.body || {};
+    const prompt = typeof body.prompt === 'string' && body.prompt.trim()
+      ? body.prompt
+      : 'Reply with the single word: ok';
+    const model = typeof body.model === 'string' && body.model.trim()
+      ? body.model.trim()
+      : 'MiniMax-M3';
+    const result = await chatCompletion({
+      prompt,
+      model,
+      maxTokens: typeof body.maxTokens === 'number' ? body.maxTokens : 32,
+    });
+    res.json(result);
+  }));
+
+  // GET /cache — read the on-disk cache (debugging)
+  router.get('/minimax/cache', wrap(async (_req, res) => {
+    res.json(readCachedRemains() || null);
+  }));
+
+  // DELETE /cache — clear cache
+  router.delete('/minimax/cache', wrap(async (_req, res) => {
+    clearRemainsCache();
+    if (broadcast) broadcast({ type: 'minimax:cache:cleared' });
+    res.json({ ok: true });
+  }));
+
+  return router;
+}

package/bizar-dash/src/web/App.tsx

@@ -35,6 +35,7 @@ import { ModView, type ModView as ModViewType } from './views/ModView';
 import { Schedules } from './views/Schedules';
 import { Skills } from './views/Skills';
 import { History } from './views/History';
+import { MiniMaxUsage } from './views/MiniMaxUsage';
 import { BackgroundAgents } from './views/BackgroundAgents';
 import { Spinner } from './components/Spinner';
 import { Button } from './components/Button';
@@ -75,6 +76,7 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   schedules: Schedules,
   skills: Skills,
   history: History,
+  minimax: MiniMaxUsage,
 };
 
 const VERSION = 'v3.21.0';

package/bizar-dash/src/web/components/Topbar.tsx

@@ -21,6 +21,7 @@ import {
   Sparkles,
   Activity,
   Radio,
+  Coins,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -48,6 +49,7 @@ export const TABS: TabDef[] = [
   { id: 'mods', label: 'Mods', icon: Puzzle },
   { id: 'schedules', label: 'Schedules', icon: Clock },
   { id: 'history', label: 'History', icon: HistoryIcon },
+  { id: 'minimax', label: 'Usage', icon: Coins },
   { id: 'config', label: 'Config', icon: Settings2 },
   { id: 'settings', label: 'Settings', icon: Sliders },
 ];

package/bizar-dash/src/web/lib/types.ts

@@ -265,6 +265,18 @@ export type Settings = {
   };
   // v3.21.0 — System LLM calls (auto-title, enhance-prompt, summarization).
   systemLlm?: SystemLlmConfig;
+  // v4.5.0 — MiniMax Token Plan integration. `apiKey` is the user's
+  // Subscription Key (NOT a pay-as-you-go API key). `groupId` is usually
+  // 'default' for an individual team. `baseUrl` is the Token Plan host
+  // (the remains endpoint lives on www.*, not api.*). `chatBaseUrl` is
+  // the chat-completions host (api.*/v1).
+  minimax?: {
+    enabled: boolean;
+    apiKey: string;
+    groupId: string;
+    baseUrl: string;
+    chatBaseUrl: string;
+  };
 };
 
 export type SettingsResponse = {

package/bizar-dash/src/web/main.tsx

@@ -8,6 +8,7 @@ import { MobileApp } from './MobileApp';
 import './styles/main.css';
 import './styles/mobile.css';
 import './styles/glyphs.css';
+import './styles/minimax-usage.css';
 
 function Root() {
   const [isMobile, setIsMobile] = useState(() => {

package/bizar-dash/src/web/styles/minimax-usage.css

@@ -0,0 +1,507 @@
+/* ============================================================================
+ * src/web/styles/minimax-usage.css
+ *
+ * v4.5.0 — Styles for the MiniMax Token Plan usage dashboard.
+ *
+ * Scope: `.view-minimax-usage` and all child classes prefixed with
+ * `minimax-`. Reuses the dashboard's existing CSS variables
+ * (--accent, --bg-1, --bg-2, --border, --text, --text-muted, --success,
+ * --warning, --error) so the page inherits the rest of the design
+ * system automatically.
+ * ========================================================================== */
+
+.view-minimax-usage {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 20px 32px;
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* ── header ────────────────────────────────────────────────────────────── */
+.view-minimax-usage .view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.view-minimax-usage .view-header-titles { flex: 1 1 360px; min-width: 0; }
+.view-minimax-usage .view-title {
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: var(--text);
+}
+.view-minimax-usage .view-subtitle {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.view-minimax-usage .view-subtitle code {
+  font-size: 12px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-2);
+  color: var(--text);
+}
+.view-minimax-usage .view-header-actions { display: flex; gap: 8px; align-items: center; }
+
+/* ── banner (warn / err) ───────────────────────────────────────────── */
+.view-minimax-usage .banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  border: 1px solid transparent;
+}
+.view-minimax-usage .banner code {
+  font-size: 12px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.18);
+}
+.view-minimax-usage .banner-warn {
+  background: rgba(217, 158, 38, 0.12);
+  border-color: rgba(217, 158, 38, 0.35);
+  color: var(--text);
+}
+.view-minimax-usage .banner-err {
+  background: rgba(248, 81, 73, 0.10);
+  border-color: rgba(248, 81, 73, 0.40);
+  color: var(--text);
+}
+
+/* ── stat row ──────────────────────────────────────────────────────── */
+.view-minimax-usage .minimax-stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+@media (max-width: 900px) {
+  .view-minimax-usage .minimax-stats-row { grid-template-columns: repeat(2, 1fr); }
+}
+.view-minimax-usage .stat {
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.view-minimax-usage .stat-label {
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.view-minimax-usage .stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  word-break: break-word;
+}
+.view-minimax-usage .stat-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ── per-model quota grid ────────────────────────────────────────── */
+.view-minimax-usage .minimax-models-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 14px;
+}
+.view-minimax-usage .minimax-model-card { padding: 14px 16px; }
+.view-minimax-usage .minimax-model-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 8px;
+}
+.view-minimax-usage .minimax-model-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+.view-minimax-usage .minimax-model-status {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
+}
+.view-minimax-usage .minimax-model-status.is-warn { color: var(--warning, #d29922); }
+.view-minimax-usage .minimax-model-status.is-ok { color: var(--success, #3fb950); }
+
+/* ── quota rows inside a model card ─────────────────────────────── */
+.view-minimax-usage .minimax-quota-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.view-minimax-usage .minimax-quota-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.02);
+  border: 1px solid var(--border);
+}
+.view-minimax-usage .minimax-quota-row.is-good { border-color: rgba(63, 185, 80, 0.25); }
+.view-minimax-usage .minimax-quota-row.is-warn { border-color: rgba(217, 158, 38, 0.35); background: rgba(217, 158, 38, 0.05); }
+.view-minimax-usage .minimax-quota-row.is-low  { border-color: rgba(248, 81, 73, 0.45); background: rgba(248, 81, 73, 0.06); }
+
+.view-minimax-usage .minimax-quota-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.view-minimax-usage .minimax-quota-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text);
+  font-weight: 500;
+}
+.view-minimax-usage .minimax-quota-remaining {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-weight: 600;
+  color: var(--text);
+}
+.view-minimax-usage .minimax-quota-row.is-good .minimax-quota-remaining { color: var(--success, #3fb950); }
+.view-minimax-usage .minimax-quota-row.is-warn .minimax-quota-remaining { color: var(--warning, #d29922); }
+.view-minimax-usage .minimax-quota-row.is-low  .minimax-quota-remaining { color: var(--error, #f85149); }
+
+.view-minimax-usage .minimax-bar {
+  position: relative;
+  height: 8px;
+  background: var(--bg-2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.view-minimax-usage .minimax-bar-fill {
+  height: 100%;
+  background: var(--accent);
+  transition: width 200ms ease-out;
+}
+.view-minimax-usage .minimax-quota-row.is-good .minimax-bar-fill { background: var(--success, #3fb950); }
+.view-minimax-usage .minimax-quota-row.is-warn .minimax-bar-fill { background: var(--warning, #d29922); }
+.view-minimax-usage .minimax-quota-row.is-low  .minimax-bar-fill { background: var(--error, #f85149); }
+
+.view-minimax-usage .minimax-quota-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.view-minimax-usage .minimax-quota-meta strong {
+  color: var(--text);
+  font-weight: 600;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+/* ── Onboarding wizard ─────────────────────────────────────────── */
+.view-minimax-onboarding {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 20px 32px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+.view-minimax-onboarding .minimax-wizard-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.view-minimax-onboarding .minimax-wizard-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.view-minimax-onboarding .minimax-wizard-step-bullet {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--text);
+  flex-shrink: 0;
+}
+.view-minimax-onboarding .minimax-wizard-step.is-current .minimax-wizard-step-bullet {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.view-minimax-onboarding .minimax-wizard-step.is-done .minimax-wizard-step-bullet {
+  background: var(--success, #3fb950);
+  border-color: var(--success, #3fb950);
+  color: #fff;
+}
+.view-minimax-onboarding .minimax-wizard-step.is-done { color: var(--success, #3fb950); }
+.view-minimax-onboarding .minimax-wizard-step.is-current { color: var(--text); font-weight: 500; }
+.view-minimax-onboarding .minimax-wizard-step-label { font-size: 12px; }
+.view-minimax-onboarding .minimax-wizard-step.is-current .minimax-wizard-step-label {
+  font-weight: 500;
+}
+.view-minimax-onboarding .minimax-wizard-body {
+  padding: 4px 4px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.view-minimax-onboarding .minimax-wizard-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+}
+.view-minimax-onboarding .minimax-wizard-prose {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.view-minimax-onboarding .minimax-wizard-prose code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-2);
+  color: var(--text);
+}
+.view-minimax-onboarding .minimax-wizard-prose--muted { font-size: 12px; opacity: 0.85; }
+.view-minimax-onboarding .minimax-wizard-list {
+  margin: 0;
+  padding-left: 22px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.view-minimax-onboarding .minimax-wizard-list li { margin-bottom: 4px; }
+.view-minimax-onboarding .minimax-wizard-link {
+  color: var(--accent);
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.view-minimax-onboarding .minimax-wizard-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.view-minimax-onboarding .minimax-wizard-error {
+  display: flex;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: rgba(248, 81, 73, 0.08);
+  border: 1px solid rgba(248, 81, 73, 0.30);
+  color: var(--text);
+  font-size: 12px;
+}
+.view-minimax-onboarding .minimax-wizard-footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 0 4px;
+  margin-top: 8px;
+}
+.view-minimax-onboarding .minimax-wizard-footer code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10px;
+  padding: 0 3px;
+  background: rgba(0,0,0,0.25);
+  border-radius: 2px;
+}
+
+/* ── Subscription Key card ──────────────────────────────────────── */
+.view-minimax-usage .minimax-link {
+  color: var(--accent);
+  text-decoration: underline;
+}
+.view-minimax-usage .minimax-key-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.view-minimax-usage .minimax-key-input-wrap {
+  position: relative;
+  flex: 1 1 320px;
+  display: flex;
+  align-items: center;
+}
+.view-minimax-usage .minimax-key-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+.view-minimax-usage .minimax-key-input {
+  width: 100%;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 36px 8px 32px;
+  color: var(--text);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 120ms ease;
+}
+.view-minimax-usage .minimax-key-input:focus {
+  border-color: var(--accent);
+}
+.view-minimax-usage .minimax-key-input::placeholder {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+.view-minimax-usage .minimax-key-toggle {
+  position: absolute;
+  right: 6px;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.view-minimax-usage .minimax-key-toggle:hover { color: var(--text); background: var(--bg-1); }
+.view-minimax-usage .is-ok { color: var(--success, #3fb950); }
+.view-minimax-usage .is-warn { color: var(--warning, #d29922); }
+
+/* ── test prompt card ────────────────────────────────────────────── */
+.view-minimax-usage .minimax-test-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+.view-minimax-usage .minimax-test-prompt {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 4px 8px;
+  background: var(--bg-2);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.view-minimax-usage .minimax-test-result {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 13px;
+  border: 1px solid transparent;
+}
+.view-minimax-usage .minimax-test-result.ok {
+  background: rgba(63, 185, 80, 0.08);
+  border-color: rgba(63, 185, 80, 0.30);
+  color: var(--text);
+}
+.view-minimax-usage .minimax-test-result.err {
+  background: rgba(248, 81, 73, 0.08);
+  border-color: rgba(248, 81, 73, 0.30);
+  color: var(--text);
+}
+.view-minimax-usage .minimax-test-body { flex: 1; min-width: 0; }
+.view-minimax-usage .minimax-test-line { margin-bottom: 4px; }
+.view-minimax-usage .minimax-test-line code {
+  font-size: 12px;
+  background: rgba(0,0,0,0.25);
+  padding: 0 4px;
+  border-radius: 3px;
+}
+.view-minimax-usage .minimax-test-content {
+  margin: 6px 0;
+  padding: 6px 8px;
+  background: var(--bg-2);
+  border-radius: 4px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+}
+.view-minimax-usage .minimax-test-usage {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.view-minimax-usage .minimax-test-usage code {
+  background: rgba(0,0,0,0.25);
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+.view-minimax-usage .minimax-test-result pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+}
+
+/* ── error card fallback ─────────────────────────────────────────── */
+.view-minimax-usage .error-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: rgba(248, 81, 73, 0.06);
+  border: 1px solid rgba(248, 81, 73, 0.30);
+  color: var(--text);
+}
+.view-minimax-usage .error-card pre {
+  margin: 6px 0 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+/* ── spinner helper (in case global .spin doesn't cover all cases) ─── */
+.view-minimax-usage .spin { animation: minimax-spin 900ms linear infinite; }
+@keyframes minimax-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}