@flame0510/project-aether 1.2.0 → 1.3.0

package/README.md

@@ -12,7 +12,7 @@
 - **Multi-container agent management** — Create, monitor, and manage OpenClaw agents in isolated Docker containers from a single UI
 - **Agent creation wizard** — Pick a template (Atlas, Prometheus, Argus), choose an LLM model, deploy an agent in seconds
 - **Provider sync** — Add API keys once, push them to all agent containers with one click
-- **Model configuration** — Change the primary model per agent, for every major provider (OpenAI, Anthropic, DeepSeek, Gemini, Ollama, etc.)
+- **Model configuration** — Change the primary model and fallbacks per agent, from the detail panel on the Agents page. Providers: OpenAI, Anthropic, Google, DeepSeek, Groq, Kimi, GLM, Qwen, plus OpenRouter as an aggregator.
 - **Shared gateway token** — One token to rule all agents. Manage from the dashboard, sync to all containers
 - **Live event stream** — Real-time session lineage, agent spawning, cost reporting
 - **Workspace browser** — Browse and edit agent files live from the dashboard
@@ -81,6 +81,7 @@ already filled in — you normally never set these by hand. See
 | `REV4A_DATA_DIR` | `~/.config/rev4a` | No | Root of all persistent data |
 | `REV4A_DB` | `<data dir>/data/events.db` | No | SQLite database path |
 | `REV4A_WORKSPACE_ROOT` | — | No | Root exposed by the local file explorer |
+| `REV4A_DOCKER_WAIT_SECONDS` | `90` | No | How long `rev4a serve` waits for the Docker daemon at start-up before starting without it. Capped at 600; `0` checks once; a negative or non-numeric value means 90. Read from the process environment, not from the `.env` file |
 
 ---
 

package/app/agents/ModelSection.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+/**
+ * Model section of the agent detail panel.
+ *
+ * Primary model and fallbacks used to live on the Gateway page, which mixed two
+ * unrelated jobs: provider keys and catalogue (system configuration) and
+ * per-agent model assignment (one agent's configuration). This is the second.
+ *
+ * Fallbacks matter more than they look. The create wizard has never set them: it
+ * holds `const [fallbacks] = useState<string[]>([])` and nothing writes to that
+ * state. The only UI that could was the Gateway Agents tab this panel replaced,
+ * and in practice no agent carries any. When a
+ * model is disabled on the Gateway page while some agent still has it as
+ * primary, that agent has nothing to fall back to and goes silent on its next
+ * turn. This panel surfaces exactly that condition.
+ *
+ * `agents` is in OpenClaw's no-restart column, so saving applies immediately
+ * with no container restart.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, RemoveButton, Select } from '../components/ui';
+
+interface ModelOption {
+  id: string;
+  label: string;
+  input: number | null;
+  output: number | null;
+  /** Upstream retired the name. It still answers, so this warns rather than blocks. */
+  deprecated: boolean;
+}
+
+interface ProviderGroup {
+  provider: string;
+  emoji: string;
+  models: ModelOption[];
+}
+
+interface AgentModel {
+  reachable: boolean;
+  primary: string | null;
+  fallbacks: string[];
+  resolvable: boolean | null;
+  catalogueSize?: number;
+  /** Server-side cause for a failing primary; absent on the unreachable branch. */
+  primaryStatus?: 'offered' | 'disabled' | 'missing' | null;
+}
+
+/** Strip the `rev4a/` prefix the container config stores, for comparison with catalogue ids. */
+const bare = (id: string) => id.replace(/^rev4a\//, '');
+
+function priceLabel(m: ModelOption): string {
+  if (m.input === null && m.output === null) return '';
+  const fmt = (n: number | null) => (n === null ? '?' : `$${n}`);
+  return `  ·  ${fmt(m.input)} / ${fmt(m.output)} per 1M`;
+}
+
+/**
+ * A deprecated model is still selectable — it works — but picking one by accident
+ * is exactly how an agent ends up on a name upstream no longer honours. The tag
+ * sits next to the name it qualifies, not at the head of the row, so the
+ * provider grouping stays scannable.
+ */
+function optionLabel(m: ModelOption): string {
+  return `${m.label}${m.deprecated ? ' (deprecated)' : ''}${priceLabel(m)}`;
+}
+
+export default function ModelSection({
+  agentId,
+  onSaved,
+}: {
+  agentId: string;
+  /** Called after a successful save so the agent list can refresh its chip. */
+  onSaved?: () => void;
+}) {
+  const [groups, setGroups] = useState<ProviderGroup[]>([]);
+  const [current, setCurrent] = useState<AgentModel | null>(null);
+  const [primary, setPrimary] = useState<string>('');
+  const [fallbacks, setFallbacks] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState<{ text: string; ok: boolean } | null>(null);
+
+  const abortRef = useRef<AbortController | null>(null);
+
+  const load = useCallback(async () => {
+    // Cancel any in-flight load: this fires on mount and after every save, and
+    // a stale response arriving late would overwrite fresher state.
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setLoading(true);
+    try {
+      const [mRes, aRes] = await Promise.all([
+        fetch('/api/models', { signal: controller.signal }),
+        fetch(`/api/agents/${encodeURIComponent(agentId)}/model`, { signal: controller.signal }),
+      ]);
+      if (!mRes.ok || !aRes.ok) {
+        // Say so. An empty picker with no message reads as "no models available",
+        // which is a different problem with a different fix.
+        setMsg({
+          text: `Could not load model configuration (${!mRes.ok ? `catalogue HTTP ${mRes.status}` : `agent HTTP ${aRes.status}`})`,
+          ok: false,
+        });
+      }
+      if (mRes.ok) setGroups((await mRes.json()) as ProviderGroup[]);
+      if (aRes.ok) {
+        const data = (await aRes.json()) as AgentModel;
+        setCurrent(data);
+        setPrimary(data.primary ? bare(data.primary) : '');
+        setFallbacks((data.fallbacks ?? []).map(bare));
+      }
+    } catch (e) {
+      if ((e as Error)?.name !== 'AbortError') setMsg({ text: 'Could not load model configuration', ok: false });
+    }
+    // Only the load that is still current may end the loading state. A save
+    // triggers a reload that aborts the previous one; the aborted request lands in
+    // the catch above and used to switch off the spinner the new one had just
+    // switched on.
+    if (abortRef.current === controller) setLoading(false);
+  }, [agentId]);
+
+  useEffect(() => {
+    void load();
+    return () => abortRef.current?.abort();
+  }, [load]);
+
+  const allModels = groups.flatMap((g) => g.models);
+  const byId = new Map(allModels.map((m) => [m.id, m]));
+  const dirty =
+    primary !== (current?.primary ? bare(current.primary) : '') ||
+    fallbacks.join(',') !== (current?.fallbacks ?? []).map(bare).join(',');
+
+  /** Return the form to what the container actually holds. */
+  const reset = () => {
+    setPrimary(current?.primary ? bare(current.primary) : '');
+    setFallbacks((current?.fallbacks ?? []).map(bare));
+    setMsg(null);
+  };
+
+  const save = async () => {
+    setSaving(true);
+    setMsg(null);
+    try {
+      const res = await fetch('/api/gateway/agent', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ containerName: agentId, model: primary, fallbacks }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok && data.success !== false) {
+        setMsg({ text: 'Model saved. It applies immediately, no restart needed.', ok: true });
+        await load();
+        // The card in the list reads a separate summary endpoint; without this it
+        // keeps showing the previous model until the next poll.
+        onSaved?.();
+      } else {
+        setMsg({ text: data.error || 'Save failed', ok: false });
+      }
+    } catch (e) {
+      setMsg({ text: (e as Error).message, ok: false });
+    }
+    setSaving(false);
+  };
+
+  // The current primary may no longer be on offer: unchecked on the Gateway page,
+  // or its provider key removed. A native select whose value matches no option
+  // renders as though nothing were chosen, contradicting the warning above it.
+  // Show the real value, disabled so it cannot be picked again. Guarded on a
+  // loaded catalogue so a failed fetch does not flag every model.
+  const primaryUnavailable = !!primary && groups.length > 0 && !byId.has(primary);
+  const options = [
+    { value: '', label: '— select a model —' },
+    ...(primaryUnavailable ? [{ value: primary, label: `${primary} (${current?.primaryStatus === 'missing' ? 'no longer in catalogue' : 'not enabled'})`, disabled: true }] : []),
+    ...groups.flatMap((g) =>
+      g.models.map((m) => ({ value: m.id, label: `${g.provider} · ${optionLabel(m)}` })),
+    ),
+  ];
+
+  // Two different failures, two different remedies. The panel used to show one
+  // message for both and guess "disabled on the Gateway page" — wrong when the
+  // model is enabled and a sync simply never reached this container, which is
+  // exactly what a toggle made while Docker was stopped produces.
+  const containerLacksIt = !!current?.reachable && current.resolvable === false;
+  // The server states the cause; the offered list is only a fallback for when it
+  // did not, so the panel and the card chip cannot disagree about why.
+  const status = current?.primaryStatus;
+  const warnRemoved = status === 'missing';
+  const warnNotEnabled = status === 'disabled' || (status == null && primaryUnavailable);
+  const warnNotSynced = containerLacksIt && (status === 'offered' || (status == null && groups.length > 0 && !primaryUnavailable));
+  const warnUnknown = containerLacksIt && status == null && groups.length === 0;
+
+  return (
+    <div style={{ padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {loading && <div style={{ fontSize: 11, color: '#888' }}>Loading…</div>}
+
+      {!loading && current && !current.reachable && (
+        <div style={{ fontSize: 11, color: '#888' }}>
+          Container not reachable — start the agent to read or change its model.
+        </div>
+      )}
+
+      {!loading && current?.reachable && (
+        <>
+          {(warnRemoved || warnNotEnabled || warnNotSynced || warnUnknown) && (
+            <div style={{
+              border: '1px solid rgba(239,68,68,0.35)', background: 'rgba(239,68,68,0.06)',
+              padding: '8px 10px', fontSize: 11, color: '#ef4444', lineHeight: 1.5,
+            }}>
+              {warnRemoved && (
+                <>
+                  <strong>This agent&rsquo;s model is no longer in the catalogue.</strong> It is
+                  set to <code>{current.primary}</code>, which this version of Rev4a no longer
+                  offers. The gateway refuses it, so the agent fails on its next turn. Pick a
+                  model below.
+                </>
+              )}
+              {warnNotEnabled && (
+                <>
+                  <strong>This agent&rsquo;s model is not enabled.</strong> It is set to{' '}
+                  <code>{current.primary}</code>, which the Gateway does not offer — unchecked
+                  there, or its provider has no key. The gateway refuses it, so the agent fails
+                  on its next turn. Pick a model below.
+                </>
+              )}
+              {warnNotSynced && (
+                <>
+                  <strong>This container is out of sync.</strong> Its model{' '}
+                  <code>{current.primary}</code> is enabled on the Gateway but not among the{' '}
+                  {current.catalogueSize} models synced to this container — a sync did not reach
+                  it. Run <em>Sync All Agents</em> on the Gateway page; the model does not need to
+                  change.
+                </>
+              )}
+              {warnUnknown && (
+                <>
+                  <strong>This agent&rsquo;s model is not in its catalogue.</strong> It is set to{' '}
+                  <code>{current.primary}</code>, which the {current.catalogueSize} models synced
+                  to this container do not include. The model list could not be loaded, so the
+                  cause is unknown.
+                </>
+              )}
+            </div>
+          )}
+
+          <Select
+            label="Primary model"
+            options={options}
+            value={primary}
+            onChange={(e) => setPrimary(e.target.value)}
+          />
+
+          <div>
+            <div style={{ fontSize: 10, color: '#888', letterSpacing: '0.06em', marginBottom: 4 }}>
+              FALLBACKS
+            </div>
+            {fallbacks.length === 0 && (
+              <div style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>
+                None set. Without a fallback, the agent goes silent if its primary
+                becomes unavailable.
+              </div>
+            )}
+            {fallbacks.map((f, i) => (
+              <div key={`${f}-${i}`} style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 4 }}>
+                <span style={{ fontSize: 10, color: '#666', minWidth: 12 }}>{i + 1}.</span>
+                <span style={{ fontSize: 11, flex: 1, wordBreak: 'break-all' }}>
+                  {f}
+                  {byId.get(f)?.deprecated && (
+                    <span style={{ color: '#eab308' }}> (deprecated)</span>
+                  )}
+                  {groups.length > 0 && !byId.has(f) && (
+                    <span style={{ color: '#ef4444' }}> (not enabled)</span>
+                  )}
+                </span>
+                <RemoveButton
+                  label={`fallback ${f}`}
+                  title="Remove from the list — applied when you save"
+                  onClick={() => setFallbacks(fallbacks.filter((_, j) => j !== i))}
+                />
+              </div>
+            ))}
+            <Select
+              options={[
+                { value: '', label: '— add a fallback —' },
+                ...allModels
+                  .filter((m) => m.id !== primary && !fallbacks.includes(m.id))
+                  .map((m) => ({ value: m.id, label: optionLabel(m) })),
+              ]}
+              value=""
+              onChange={(e) => { if (e.target.value) setFallbacks([...fallbacks, e.target.value]); }}
+            />
+          </div>
+
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+            <Button variant="primary" size="sm" loading={saving} disabled={!dirty || !primary || primaryUnavailable} onClick={save}>
+              {saving ? 'Saving…' : 'Save model'}
+            </Button>
+            {dirty && !saving && (
+              <>
+                <span style={{ fontSize: 11, color: '#eab308' }}>Unsaved changes</span>
+                <Button variant="secondary" size="sm" onClick={reset}>Discard</Button>
+              </>
+            )}
+            {msg && (
+              <span style={{ fontSize: 11, color: msg.ok ? '#4ade80' : '#ef4444' }}>{msg.text}</span>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/app/agents/PageClient.tsx

@@ -7,6 +7,7 @@ import { Button, ListItem, Badge, ConfirmModal, Input, type Tone } from '../comp
 import PasswordInput from '../components/PasswordInput';
 import ImageDownloadBanner from './ImageDownloadBanner';
 import ChannelManager from './ChannelManager';
+import ModelSection from './ModelSection';
 import {
   InfoIcon, BracesIcon, KeyIcon, TrashIcon, TerminalIcon,
   LinkIcon, ArchiveIcon, RotateIcon, PackageIcon,
@@ -174,6 +175,7 @@ function AgentListItem({
   loading,
   selected,
   channelSummary,
+  modelSummary,
   onClick,
   onLifecycle,
 }: {
@@ -181,6 +183,7 @@ function AgentListItem({
   loading: boolean;
   selected?: boolean;
   channelSummary: Record<string, { telegram: boolean }>;
+  modelSummary: Record<string, { primary: string | null; health: string; fallbackCount: number; firstFallback?: string | null }>;
   onClick: () => void;
   onLifecycle: () => void;
 }) {
@@ -221,6 +224,41 @@ function AgentListItem({
         {agent.image?.includes('/') ? agent.image.split('/').pop() : agent.image}
         {agent.ports && <span style={{ marginLeft: 8 }}>{agent.ports}</span>}
       </div>
+      {(() => {
+        const m = modelSummary[agent.agentId];
+        if (!m || !m.primary) return null;
+        // Tone follows what the operator has to do about it: red means the agent
+        // will fail on its next turn, amber means it still works on a retired name.
+        // The red states differ in remedy — pick another model for the first two,
+        // run Sync All on the Gateway page for OUT OF SYNC.
+        const failing = m.health === 'missing' || m.health === 'disabled' || m.health === 'out-of-sync';
+        const tone = failing ? 'danger' : m.health === 'deprecated' ? 'warning' : undefined;
+        const chip = m.health === 'missing' ? 'NOT IN CATALOGUE'
+                   : m.health === 'disabled' ? 'NOT ENABLED'
+                   : m.health === 'out-of-sync' ? 'OUT OF SYNC'
+                   : m.health === 'deprecated' ? 'DEPRECATED'
+                   : m.fallbackCount === 0 ? 'NO FALLBACK' : null;
+        return (
+          <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 4, flexWrap: 'wrap' }}>
+            <span style={{ fontSize: 11, color: '#888', wordBreak: 'break-all' }}>
+              {m.primary.replace(/^rev4a\//, '')}
+              {/* Only the first fallback: a list here would drown the row, and the
+                  full set is editable in the detail panel anyway. */}
+              {m.firstFallback && (
+                <span style={{ color: '#666' }}>
+                  {' ↳ '}{m.firstFallback.replace(/^rev4a\//, '')}
+                  {m.fallbackCount > 1 && ` +${m.fallbackCount - 1}`}
+                </span>
+              )}
+            </span>
+            {chip && (
+              <Badge tone={(tone ?? 'neutral') as Tone}>
+                <span style={{ fontSize: 8, padding: '1px 6px' }}>{chip}</span>
+              </Badge>
+            )}
+          </div>
+        );
+      })()}
       {channelSummary[agent.agentId]?.telegram && (
         <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
           <Badge tone="success"><span style={{ fontSize: 8, padding: '1px 6px' }}>TG</span></Badge>
@@ -245,6 +283,7 @@ export default function AgentsPageClient() {
   const [isMobile, setIsMobile] = useState(false);
   const [showList, setShowList] = useState(true);
   const [chSummary, setChSummary] = useState<Record<string, { telegram: boolean }>>({});
+  const [mdSummary, setMdSummary] = useState<Record<string, { primary: string | null; health: string; fallbackCount: number; firstFallback?: string | null }>>({});
   const [imageReady, setImageReady] = useState(true);
   // null = not checked yet. Keeping "unknown" distinct from "none configured" is
   // the whole point: `false` as the initial value makes an unanswered check look
@@ -258,6 +297,28 @@ export default function AgentsPageClient() {
   const skipNextPoll = useRef(false);
   /** Guards the un-awaited channel-summary fetch against out-of-order responses. */
   const chSummarySeq = useRef(0);
+  const mdSummarySeq = useRef(0);
+
+  /**
+   * Refresh the per-agent model rows that feed the card chips.
+   *
+   * Shared by the 15s poll and by a save in the detail panel: without the second
+   * caller the chip kept showing the previous model until the next poll, which
+   * reads as "the save did not work".
+   *
+   * Sequence-guarded because several can overlap; the last one issued wins.
+   */
+  const refreshModelSummary = useCallback(async () => {
+    const seq = ++mdSummarySeq.current;
+    try {
+      const res = await fetch('/api/agents/models-summary');
+      if (!res.ok || seq !== mdSummarySeq.current) return;
+      const payload = await res.json();
+      const byId: Record<string, { primary: string | null; health: string; fallbackCount: number; firstFallback?: string | null }> = {};
+      for (const row of payload.agents ?? []) byId[row.agentId] = row;
+      setMdSummary(byId);
+    } catch { /* badges are optional */ }
+  }, []);
   useEffect(() => {
     const check = () => setIsMobile(window.innerWidth < 768);
     check();
@@ -290,6 +351,10 @@ export default function AgentsPageClient() {
           setChSummary(await chRes.json());
         } catch { /* badges are optional */ }
       })();
+
+      // Same treatment for the model summary: it decorates rows, so it must not
+      // hold the list, and a slow earlier response must not overwrite a newer one.
+      void refreshModelSummary();
     } catch (e: any) {
       setError(e.message || 'Loading error');
     } finally {
@@ -511,13 +576,13 @@ export default function AgentsPageClient() {
         {providersConfigured === false && <NoProviderBanner />}
           {/* Scrollable content */}
           <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
-            <DetailPanel key={selected.agentId} agent={selected} onDeleted={handleAgentDeleted} onChanged={load} />
+            <DetailPanel key={selected.agentId} agent={selected} onDeleted={handleAgentDeleted} onChanged={load} onModelSaved={refreshModelSummary} />
           </div>
         </div>
       );
     }
 
-    // Mobile: lista
+    // Mobile: list
     return (
       <div style={{ flex: 1, background: 'var(--bg)', color: 'var(--text)', fontFamily: 'var(--font-mono-stack)', display: 'flex', flexDirection: 'column', }}>
         <div style={{ height: 48, padding: '0 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
@@ -545,6 +610,7 @@ export default function AgentsPageClient() {
               agent={agent}
               loading={lifecycleLoading === agent.agentId}
               channelSummary={chSummary}
+              modelSummary={mdSummary}
               onClick={() => selectAgent(agent)}
               onLifecycle={() => handleLifecycle(agent)}
             />
@@ -590,6 +656,7 @@ export default function AgentsPageClient() {
                 agent={agent}
                 loading={lifecycleLoading === agent.agentId}
                 channelSummary={chSummary}
+                modelSummary={mdSummary}
                 selected={isSelected}
                 onClick={() => setSelectedId(agent.agentId)}
                 onLifecycle={() => handleLifecycle(agent)}
@@ -604,7 +671,7 @@ export default function AgentsPageClient() {
             // key: without it React reuses one DetailPanel instance across
             // selections, so in-flight state (deleting, recreating, restarting,
             // toasts, open confirms) leaks onto the next agent you click.
-            <DetailPanel key={selected.agentId} agent={selected} onDeleted={handleAgentDeleted} onChanged={load} />
+            <DetailPanel key={selected.agentId} agent={selected} onDeleted={handleAgentDeleted} onChanged={load} onModelSaved={refreshModelSummary} />
           )}
         </div>
       </div>
@@ -768,12 +835,18 @@ function ConfigModal({ agent, onClose }: { agent: Agent; onClose: () => void })
 }
 
 // ─── Detail panel (shared between mobile & desktop) ───
-function DetailPanel({ agent, onDeleted, onChanged }: {
+function DetailPanel({ agent, onDeleted, onChanged, onModelSaved }: {
   agent: Agent;
   /** The agent is gone — the parent drops it from the list. */
   onDeleted: (agentId: string) => void;
   /** The agent changed in place (renamed, recreated) — refetch the list. */
   onChanged: () => void;
+  /**
+   * The model changed. Narrower than `onChanged` on purpose: only the card chip
+   * needs refreshing, so this avoids refetching the whole list plus the channel
+   * summary for a field the parent already knows how to reload on its own.
+   */
+  onModelSaved: () => void;
 }) {
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState('');
@@ -856,6 +929,12 @@ function DetailPanel({ agent, onDeleted, onChanged }: {
       {/* Channels - Telegram */}
       <ChannelSection agentId={agent.agentId} agentName={agent.name} />
 
+      {/* Model - primary + fallbacks (moved here from the Gateway page) */}
+      <div style={{ border: '1px solid var(--border)', borderRadius: 0, background: 'var(--bg)', overflow: 'hidden' }}>
+        <SectionHeader icon={<BracesIcon size={12} />} label="MODEL" />
+        <ModelSection agentId={agent.agentId} onSaved={onModelSaved} />
+      </div>
+
       {/* Config - View openclaw.json */}
       <div style={{ border: '1px solid var(--border)', borderRadius: 0, background: 'var(--bg)', overflow: 'hidden' }}>
         <SectionHeader icon={<BracesIcon size={12} />} label="CONFIG" />

package/app/agents/create/page.tsx

@@ -1,7 +1,8 @@
 import { execSync } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
-import { DB_FILE, AGENTS_TOKEN_FILE, MODELS_CONFIG_FILE, PROVIDER_KEYS_FILE, templatesDir } from '@/lib/rev4a-paths';
+import { DB_FILE, AGENTS_TOKEN_FILE, templatesDir } from '@/lib/rev4a-paths';
+import { loadOfferedModels } from '@/lib/model-catalogue';
 import CreatePageClient from './PageClient';
 
 export const dynamic = 'force-dynamic';
@@ -33,26 +34,12 @@ async function getTemplates(): Promise<TemplateInfo[]> {
 }
 
 async function getModels(): Promise<ModelInfo[]> {
-  try {
-    const raw = fs.readFileSync(MODELS_CONFIG_FILE, 'utf-8');
-    const config = JSON.parse(raw);
-    const allModels: ModelInfo[] = (config.models || []).filter((m: { enabled: boolean }) => m.enabled !== false);
-
-    let configuredProviders: string[] = [];
-    try {
-      const keysRaw = fs.readFileSync(PROVIDER_KEYS_FILE, 'utf-8');
-      configuredProviders = Object.keys(JSON.parse(keysRaw));
-    } catch { /* no keys configured yet */ }
-
-    if (configuredProviders.length > 0) {
-      return allModels.filter((m) => configuredProviders.includes(m.provider));
-    }
-
-    // No providers configured — show no models
-    return [];
-  } catch {
-    return [];
-  }
+  // Through the shared definition, not a raw file read. Reading the bundle
+  // directly skipped model-overrides.json, so a model the operator had switched
+  // off on the Gateway page was still offered here — and one they had switched
+  // on was missing. On the production host that was 58 models listed against 62
+  // correct: two offered that should not be, six absent that should be.
+  return loadOfferedModels().map((m) => ({ id: m.id, name: m.name, provider: m.provider }));
 }
 
 async function getUsedNames(): Promise<string[]> {

package/app/api/agents/[id]/model/route.ts

@@ -0,0 +1,113 @@
+/**
+ * GET /api/agents/[id]/model
+ *
+ * The model configuration of one agent: primary, fallbacks, and whether the
+ * primary is actually resolvable from the catalogue the agent was given.
+ *
+ * This replaced `GET /api/gateway`, which reported the same two fields but walked
+ * every container to do it — on a seven-agent host, seven `docker exec` calls at
+ * ~90ms each, paid to open one agent's detail panel. This reads one container.
+ *
+ * Writes still go to `PUT /api/gateway/agent`, which already handles the
+ * `rev4a/` prefixing and fallback de-duplication.
+ */
+import { NextResponse } from 'next/server';
+import { resolveAgentedContainer, isValidAgentId } from '@/lib/container';
+import { dockerExecNoFail } from '@/lib/docker-exec';
+import { catalogueStatus } from '@/lib/model-catalogue';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+
+export const dynamic = 'force-dynamic';
+
+interface ModelRef {
+  primary: string | null;
+  fallbacks: string[];
+}
+
+function readModelRef(config: Record<string, unknown>): ModelRef {
+  const agents = (config.agents ?? {}) as Record<string, unknown>;
+  const defaults = (agents.defaults ?? {}) as Record<string, unknown>;
+  const model = defaults.model;
+
+  // `model` accepts either a bare string or { primary, fallbacks }.
+  if (typeof model === 'string') return { primary: model, fallbacks: [] };
+  if (model && typeof model === 'object') {
+    const m = model as Record<string, unknown>;
+    return {
+      primary: typeof m.primary === 'string' ? m.primary : null,
+      fallbacks: Array.isArray(m.fallbacks) ? m.fallbacks.filter((f): f is string => typeof f === 'string') : [],
+    };
+  }
+  return { primary: null, fallbacks: [] };
+}
+
+/** Model ids the agent's own catalogue offers, as written by gateway/sync. */
+function readCatalogueIds(config: Record<string, unknown>): string[] {
+  const models = (config.models ?? {}) as Record<string, unknown>;
+  const providers = (models.providers ?? {}) as Record<string, unknown>;
+  const rev4a = (providers.rev4a ?? {}) as Record<string, unknown>;
+  const list = Array.isArray(rev4a.models) ? rev4a.models : [];
+  return list
+    .map((m) => (m && typeof m === 'object' ? (m as Record<string, unknown>).id : null))
+    .filter((id): id is string => typeof id === 'string');
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> },
+): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request);
+  if (denied) return denied as any;
+
+  const { id } = await params;
+  if (!id || !isValidAgentId(id)) {
+    return NextResponse.json({ error: 'Invalid agent id' }, { status: 400 });
+  }
+
+  const container = resolveAgentedContainer(id);
+  if (!container) {
+    return NextResponse.json({ error: `No container found with AGENT_ID '${id}'` }, { status: 404 });
+  }
+
+  const raw = await dockerExecNoFail(container, ['cat', '/root/.openclaw/openclaw.json'], { timeoutMs: 8000 });
+  if (!raw) {
+    // A stopped container, or a read that timed out. `docker exec` exits 0 on
+    // the SIGTERM sent at the deadline, so an empty body is the only signal
+    // either way — report unknown rather than inventing an empty config.
+    return NextResponse.json({ agentId: id, reachable: false, primary: null, fallbacks: [], resolvable: null });
+  }
+
+  let config: Record<string, unknown>;
+  try {
+    config = JSON.parse(raw);
+  } catch {
+    return NextResponse.json({ error: 'Container config is not valid JSON' }, { status: 502 });
+  }
+
+  const { primary, fallbacks } = readModelRef(config);
+  const catalogue = readCatalogueIds(config);
+
+  // The primary is stored prefixed (`rev4a/<id>`); the catalogue stores bare ids.
+  const bare = primary ? primary.replace(/^rev4a\//, '') : null;
+
+  return NextResponse.json({
+    agentId: id,
+    reachable: true,
+    primary,
+    fallbacks,
+    /**
+     * False means the agent is configured for a model its own catalogue does not
+     * carry — it will fail on its next turn, and with no fallbacks it fails hard.
+     * This happens when a model is disabled in the Gateway while some agent still
+     * has it as primary.
+     */
+    resolvable: bare ? catalogue.includes(bare) : null,
+    catalogueSize: catalogue.length,
+    /**
+     * Why the primary would fail regardless of this container: `offered`,
+     * `disabled` (unchecked, or no provider key) or `missing` (no longer in the
+     * catalogue). Lets the panel name the right cause instead of guessing it.
+     */
+    primaryStatus: bare ? catalogueStatus(bare) : null,
+  });
+}