@flame0510/project-aether 1.1.15 → 1.3.0

package/app/api/provider/v1/models/route.ts

@@ -3,143 +3,36 @@
  *
  * GET /api/provider/v1/models
  *
- * Returns models available through the Rev4a Gateway
- * in OpenAI-compatible format, filtered by the provider
- * identified from the Authorization token.
+ * Returns the models available through the Rev4a Gateway, in OpenAI-compatible
+ * format. This is the endpoint agent containers call to discover what they can
+ * ask for, so it must agree with what `gateway/sync.ts` writes into their config.
  *
- * The model list is read from models.config.json in the project root.
- * If the file doesn't exist, falls back to provider env config + static defaults.
+ * It did not. This route used to carry its own copy of the catalogue and its own
+ * loader, and the two diverged in ways that mattered:
+ *
+ *  - **User toggles were ignored here.** Disabling a model from the Gateway page
+ *    writes to `model-overrides.json`, which `loadModelsConfig()` applies. This
+ *    route read `models.config.json` raw, so a model switched off in the UI was
+ *    still advertised to agents.
+ *  - **A read failure overwrote the catalogue.** If the file was missing or
+ *    momentarily unparseable, the `catch` wrote a hardcoded 30-model default over
+ *    it — replacing the real catalogue, user overrides included.
+ *
+ * Both are gone: the catalogue now comes from `lib/model-catalogue`, the single
+ * loader shared with the create route, the provider page and the sync.
  */
 import { NextResponse, NextRequest } from 'next/server';
-import { MODELS_CONFIG_FILE } from '@/lib/rev4a-paths';
-import * as fs from 'fs';
-import * as path from 'path';
-import { readProviderKeys } from '@/app/api/gateway/provider/keys';
+import { isGatewayClient } from '@/app/api/provider/auth';
+import { loadOfferedModels } from '@/lib/model-catalogue';
 
 export const dynamic = 'force-dynamic';
 export const runtime = 'nodejs';
 
-interface ModelEntry {
-  id: string;
-  object: string;
-  created: number;
-  owned_by: string;
-  permission: string[];
-  root: string;
-}
-
-interface ModelsConfigEntry {
-  id: string;
-  name: string;
-  provider: string;
-  enabled: boolean;
-}
-
-const CONFIG_PATH = MODELS_CONFIG_FILE;
-
-/** Default model catalogue (known models for each provider) */
-const DEFAULT_CATALOGUE: ModelsConfigEntry[] = [
-  // OpenAI
-  { id: 'openai/gpt-5.6-sol', name: 'GPT-5.6 Sol', provider: 'openai', enabled: true },
-  { id: 'openai/gpt-5.6-terra', name: 'GPT-5.6 Terra', provider: 'openai', enabled: true },
-  { id: 'openai/gpt-5.6-luna', name: 'GPT-5.6 Luna', provider: 'openai', enabled: true },
-  { id: 'openai/gpt-5.5', name: 'GPT-5.5', provider: 'openai', enabled: true },
-  { id: 'openai/gpt-5.4', name: 'GPT-5.4', provider: 'openai', enabled: true },
-  { id: 'openai/gpt-5.4-mini', name: 'GPT-5.4 Mini', provider: 'openai', enabled: true },
-  // Anthropic
-  { id: 'anthropic/claude-fable-5', name: 'Claude Fable 5', provider: 'anthropic', enabled: false },
-  { id: 'anthropic/claude-opus-5', name: 'Claude Opus 5', provider: 'anthropic', enabled: false },
-  { id: 'anthropic/claude-sonnet-5', name: 'Claude Sonnet 5', provider: 'anthropic', enabled: false },
-  { id: 'anthropic/claude-haiku-4-5', name: 'Claude Haiku 4.5', provider: 'anthropic', enabled: false },
-  // DeepSeek
-  { id: 'deepseek/deepseek-v4-pro', name: 'DeepSeek V4 Pro', provider: 'deepseek', enabled: true },
-  { id: 'deepseek/deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'deepseek', enabled: true },
-  // OpenRouter
-  { id: 'openrouter/auto', name: 'OpenRouter Auto', provider: 'openrouter', enabled: true },
-  { id: 'openrouter/deepseek/deepseek-v4-flash', name: 'DeepSeek V4 Flash (OR)', provider: 'openrouter', enabled: true },
-  { id: 'openrouter/google/gemini-2.5-flash', name: 'Gemini 2.5 Flash (OR)', provider: 'openrouter', enabled: true },
-  { id: 'openrouter/google/gemini-2.5-pro', name: 'Gemini 2.5 Pro (OR)', provider: 'openrouter', enabled: true },
-  { id: 'openrouter/anthropic/claude-sonnet-4.6', name: 'Claude Sonnet 4.6 (OR)', provider: 'openrouter', enabled: false },
-  { id: 'openrouter/deepseek/deepseek-r1-0528', name: 'DeepSeek R1 0528 (OR)', provider: 'openrouter', enabled: false },
-  // Groq
-  { id: 'groq/llama-3.1-8b-instant', name: 'Llama 3.1 8B (Groq)', provider: 'groq', enabled: false },
-  { id: 'groq/llama-3.3-70b-versatile', name: 'Llama 3.3 70B (Groq)', provider: 'groq', enabled: false },
-  // Kimi
-  { id: 'kimi/kimi-k3', name: 'Kimi K3', provider: 'kimi', enabled: true },
-  { id: 'kimi/kimi-k2.7-code', name: 'Kimi K2.7 Code', provider: 'kimi', enabled: false },
-  { id: 'kimi/kimi-k2.7-code-highspeed', name: 'Kimi K2.7 Code HighSpeed', provider: 'kimi', enabled: false },
-  { id: 'kimi/kimi-k2.6', name: 'Kimi K2.6', provider: 'kimi', enabled: false },
-  // GLM
-  { id: 'glm/glm-5.2', name: 'GLM-5.2', provider: 'glm', enabled: false },
-  { id: 'glm/glm-5.1', name: 'GLM-5.1', provider: 'glm', enabled: false },
-  { id: 'glm/glm-5', name: 'GLM-5', provider: 'glm', enabled: false },
-  { id: 'glm/glm-4.7', name: 'GLM-4.7', provider: 'glm', enabled: false },
-  { id: 'glm/glm-4.7-flash', name: 'GLM-4.7 Flash', provider: 'glm', enabled: false },
-  { id: 'glm/glm-4.7-flashx', name: 'GLM-4.7 FlashX', provider: 'glm', enabled: false },
-  { id: 'glm/glm-5v-turbo', name: 'GLM-5V Turbo', provider: 'glm', enabled: false },
-  { id: 'glm/glm-4.6v-flash', name: 'GLM-4.6V Flash', provider: 'glm', enabled: false },
-  // Qwen
-  { id: 'qwen/qwen3.7-max', name: 'Qwen 3.7 Max', provider: 'qwen', enabled: false },
-  { id: 'qwen/qwen3.7-plus', name: 'Qwen 3.7 Plus', provider: 'qwen', enabled: true },
-  { id: 'qwen/qwen3.7-flash', name: 'Qwen 3.7 Flash', provider: 'qwen', enabled: false },
-  { id: 'qwen/qwen3-coder-plus', name: 'Qwen 3 Coder Plus', provider: 'qwen', enabled: false },
-  { id: 'qwen/qwen-long', name: 'Qwen Long', provider: 'qwen', enabled: false },
-  // Rev4a aliases (convenience models for the Rev4a proxy)
-  { id: 'rev4a/deepseek-v4-flash', name: 'DeepSeek V4 Flash (Rev4a)', provider: 'rev4a', enabled: true },
-  { id: 'rev4a/deepseek-v4-pro', name: 'DeepSeek V4 Pro (Rev4a)', provider: 'rev4a', enabled: true },
-  { id: 'rev4a/fast', name: 'Rev4a Fast', provider: 'rev4a', enabled: false },
-  { id: 'rev4a/code', name: 'Rev4a Code', provider: 'rev4a', enabled: false },
-  { id: 'rev4a/reason', name: 'Rev4a Reason', provider: 'rev4a', enabled: false },
-  { id: 'rev4a/fallback-general', name: 'Rev4a Fallback General', provider: 'rev4a', enabled: false },
-];
-
-/** Load the models config from file, or create from defaults */
-function loadConfig(): ModelsConfigEntry[] {
-  try {
-    const raw = fs.readFileSync(CONFIG_PATH, 'utf-8');
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed.models)) {
-      return parsed.models as ModelsConfigEntry[];
-    }
-    return DEFAULT_CATALOGUE;
-  } catch {
-    // File doesn't exist or invalid — write defaults
-    try {
-      fs.writeFileSync(CONFIG_PATH, JSON.stringify({ models: DEFAULT_CATALOGUE }, null, 2), 'utf-8');
-    } catch {
-      // Can't write, fall back to defaults in memory
-    }
-    return DEFAULT_CATALOGUE;
-  }
-}
-
-/** Resolve the provider from the Authorization token by matching against provider-keys.json */
-function resolveProviderFromToken(authHeader: string): string | null {
-  const token = authHeader.replace(/^Bearer\s+/i, '').trim();
-  if (!token) return null;
-
-  const providerKeys = readProviderKeys();
-
-  // Match the token value against stored provider keys
-  for (const [, key] of Object.entries(providerKeys)) {
-    if (token === key) return 'authenticated';
-  }
-
-  // Also try matching the rev4a API key env var (legacy compat)
-  if (token === process.env.REV4A_API_KEY) return 'all';
-
-  return null;
-}
-
 export async function GET(request: NextRequest) {
-  const allModels = loadConfig();
-
-  // Determine provider from Authorization token
-  const authHeader = request.headers.get('Authorization') || '';
-  const provider = resolveProviderFromToken(authHeader);
-
-  if (!provider) {
-    // No valid token — return empty list to avoid leaking model info
+  if (!isGatewayClient(request)) {
+    // An empty list rather than a 401: this endpoint should not confirm the
+    // catalogue to a caller that cannot use it. The cost is that a container
+    // configured with the wrong key sees "no models" instead of an auth error.
     return NextResponse.json({
       object: 'list',
       total: 0,
@@ -147,10 +40,10 @@ export async function GET(request: NextRequest) {
     });
   }
 
-  let activeModels: ModelsConfigEntry[];
-
-  // Token authenticated — return all enabled models
-  activeModels = allModels.filter((m) => m.enabled);
+  // Same set as gateway/sync.ts writes into the containers, so what an agent can
+  // discover matches what it was actually given. This route used to skip the
+  // provider-key half of that test and advertise models nobody could be billed for.
+  const activeModels = loadOfferedModels();
 
   return NextResponse.json({
     object: 'list',

package/app/components/PulseChat.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { usePathname } from 'next/navigation';
+import { useModels } from '../lib/models-context';
 import Link from 'next/link';
 
 const STORAGE_KEY = 'rev4a_pulse_chat';
@@ -79,51 +80,36 @@ export default function PulseChat() {
   const [input, setInput] = useState('');
   const [streaming, setStreaming] = useState(false);
   const [selectedModel, setSelectedModel] = useState<string>('');
-  const [modelGroups, setModelGroups] = useState<ModelGroup[]>([]);
-  const [modelsLoading, setModelsLoading] = useState(true);
+  // The shared catalogue, not a private copy. It refreshes when the Gateway page
+  // changes what is enabled, so this select cannot go stale mid-session.
+  const { providers: modelGroups, loaded: modelsLoaded } = useModels();
+  const modelsLoading = !modelsLoaded;
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
 
-  // Fetch available models from backend on mount
+  // Keep the choice valid against the current catalogue.
+  //
+  // Runs whenever the shared list changes, which includes the moment a model is
+  // unchecked on the Gateway page: a selection that just became unavailable is
+  // replaced rather than left to fail at send time. The saved preference is only
+  // honoured while it is still on offer.
   useEffect(() => {
-    let cancelled = false;
-
-    async function fetchModels() {
-      try {
-        const res = await fetch('/api/models');
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data: ModelGroup[] = await res.json();
-        if (cancelled) return;
-
-        setModelGroups(data);
-
-        const allIds = data.flatMap((g) => g.models.map((m) => m.id));
-
-        // Restore saved model if valid, otherwise pick first
-        try {
-          const saved = localStorage.getItem(MODEL_STORAGE_KEY);
-          if (saved && allIds.includes(saved)) {
-            setSelectedModel(saved);
-          } else if (allIds.length > 0) {
-            setSelectedModel(allIds[0]);
-          }
-        } catch {
-          if (allIds.length > 0) setSelectedModel(allIds[0]);
-        }
-      } catch {
-        // API unavailable — leave selectedModel empty, select stays disabled
-      } finally {
-        if (!cancelled) setModelsLoading(false);
-      }
-    }
-
-    fetchModels();
-    return () => { cancelled = true; };
-  }, []);
-
-  // Save model preference on change
+    if (!modelsLoaded) return;
+    const allIds = modelGroups.flatMap((g) => g.models.map((m) => m.id));
+    if (allIds.length === 0) { setSelectedModel(''); return; }
+    if (selectedModel && allIds.includes(selectedModel)) return;
+
+    let saved: string | null = null;
+    try { saved = localStorage.getItem(MODEL_STORAGE_KEY); } catch { /* blocked */ }
+    setSelectedModel(saved && allIds.includes(saved) ? saved : allIds[0]);
+  }, [modelGroups, modelsLoaded, selectedModel]);
+
+  // Save model preference on change. Not while empty: on mount the selection is ''
+  // until the list arrives, and saving that erased the preference before it could
+  // be read back.
   useEffect(() => {
+    if (!selectedModel) return;
     try {
       localStorage.setItem(MODEL_STORAGE_KEY, selectedModel);
     } catch {

package/app/components/Skeleton.tsx

@@ -202,3 +202,135 @@ export function CardRowSkeleton({ count = 3, height = 56 }: { count?: number; he
     </div>
   );
 }
+
+/**
+ * Credential provider cards.
+ *
+ * The credentials page renders one card per entry in CREDENTIAL_PROVIDERS,
+ * which is a static array of five — so the card count here is known, not
+ * guessed, and the grid will not reflow when the data lands.
+ *
+ * Each shape mirrors the real text it stands in for: the label and category
+ * widths track the actual provider names ("Cloud" is short, "Project
+ * Management" is not), and the description line count follows how long each
+ * provider's blurb actually is. That is what keeps the shimmer from jumping
+ * when it is replaced.
+ *
+ * `configuredCards` is the one genuine unknown: whether a provider has stored
+ * profiles is only known once /api/credentials answers. Cards with a profile
+ * are markedly taller, so rendering none would guarantee a jump downward for
+ * anyone who has set some up. Two of five is the middle of the realistic range
+ * and keeps the error small in both directions.
+ */
+export function CredentialCardsSkeleton({ configuredCards = 2 }: { configuredCards?: number }) {
+  // Ordered as CREDENTIAL_PROVIDERS: GitHub, Trello, Vercel, Supabase, Notion.
+  const cards = [
+    { label: 46, cat: 84, pill: 64, desc: ['100%', '58%'], delivery: '56%' },
+    { label: 44, cat: 98, pill: 54, desc: ['92%'], delivery: '82%' },
+    { label: 44, cat: 34, pill: 64, desc: ['100%', '64%'], delivery: '90%' },
+    { label: 58, cat: 50, pill: 54, desc: ['100%', '86%'], delivery: '78%' },
+    { label: 44, cat: 98, pill: 54, desc: ['100%', '92%'], delivery: '72%' },
+  ];
+
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+        gap: 'clamp(12px, 3vw, 16px)',
+      }}
+    >
+      {cards.map((c, i) => (
+        <div
+          key={i}
+          style={{
+            background: 'var(--bg2)',
+            border: '1px solid var(--border)',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {/* Header: provider badge, name over category, status pill */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
+            <Skeleton width={28} height={28} accent style={{ flexShrink: 0 }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <Skeleton width={c.label} height={12} />
+              <Skeleton width={c.cat} height={9} style={{ marginTop: 4 }} />
+            </div>
+            <Skeleton width={c.pill} height={16} style={{ flexShrink: 0 }} />
+          </div>
+
+          {/* Description */}
+          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)' }}>
+            {c.desc.map((w, j) => (
+              <Skeleton key={j} width={w} height={9} style={{ marginTop: j === 0 ? 0 : 5 }} />
+            ))}
+          </div>
+
+          {/* Delivery method — one mono line */}
+          <div style={{ padding: '8px 14px', borderBottom: '1px solid var(--border)' }}>
+            <Skeleton width={c.delivery} height={9} />
+          </div>
+
+          {/* A stored profile: label, masked secret + status + sync time, actions,
+              then the per-agent sync rows underneath. */}
+          {i < configuredCards && (
+            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <Skeleton width="52%" height={11} />
+                  <div style={{ display: 'flex', gap: 10, marginTop: 5 }}>
+                    <Skeleton width={76} height={9} />
+                    <Skeleton width={8} height={9} />
+                    <Skeleton width={62} height={9} />
+                  </div>
+                </div>
+                <Skeleton width={38} height={22} style={{ flexShrink: 0 }} />
+                <Skeleton width={22} height={22} style={{ flexShrink: 0 }} />
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginTop: 9 }}>
+                <Skeleton width="74%" height={9} />
+                <Skeleton width="66%" height={9} />
+              </div>
+            </div>
+          )}
+
+          {/* Footer action, pinned to the bottom as in the real card */}
+          <div style={{ padding: '10px 14px', marginTop: 'auto' }}>
+            <Skeleton width={i < configuredCards ? 92 : 74} height={26} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Per-agent sync rows inside a credential profile.
+ *
+ * Stands in for the block fed by /api/credentials/detect, which shells into
+ * every agent container and takes seconds. The agent list itself comes from that
+ * same response, so before it lands the count is unknown — three rows is a
+ * placeholder, not a prediction, and the block is deliberately the only thing
+ * that waits: the cards, the stored profiles and the Add buttons all come from
+ * the cheap endpoint and render immediately.
+ *
+ * No Sync/De-sync button is drawn here on purpose. Their label depends on
+ * whether the credential is installed, which is exactly what is still unknown —
+ * a button rendered now would have to guess, and guessing wrong invites a click
+ * that does the opposite of what it says.
+ */
+export function AgentSyncRowsSkeleton({ rows = 3 }: { rows?: number }) {
+  const widths = ['62%', '48%', '55%'];
+  return (
+    <div aria-hidden="true" style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <Skeleton width={8} height={8} variant="circle" style={{ flexShrink: 0 }} />
+          <Skeleton width={widths[i % widths.length]} height={9} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/components/ui/RemoveButton.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * Remove an item from a list.
+ *
+ * A small `×` at the end of a row, rather than a "Remove" label: the word reads
+ * as an action already carried out, which is wrong wherever the change only
+ * lands on save.
+ *
+ * One style everywhere — the `danger` treatment the credentials page already
+ * used. Whether the removal is immediate or pending is said in the tooltip, not
+ * in the colour: two tones for the same gesture made the button look like two
+ * different controls.
+ *
+ * Deliberately separate from dismissing a dialog, which looks similar and means
+ * something else. See rule 8 in docs/FRONTEND-ARCHITECTURE.md.
+ */
+import { Button } from './Button';
+
+export function RemoveButton({
+  onClick,
+  label,
+  disabled,
+  title,
+}: {
+  onClick: () => void;
+  /** What is being removed. Becomes the accessible name: "Remove <label>". */
+  label: string;
+  disabled?: boolean;
+  /** Override when the consequence is worth spelling out, e.g. a pending edit. */
+  title?: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="danger"
+      size="sm"
+      disabled={disabled}
+      aria-label={`Remove ${label}`}
+      title={title ?? `Remove ${label}`}
+      onClick={onClick}
+    >
+      ×
+    </Button>
+  );
+}

package/app/components/ui/Select.tsx

@@ -5,7 +5,8 @@ import { useId, type SelectHTMLAttributes, type ReactNode } from 'react';
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   label?: string;
   error?: string;
-  options: { value: string; label: ReactNode }[];
+  /** `disabled` shows a value that exists but may not be chosen, e.g. a current setting no longer on offer. */
+  options: { value: string; label: ReactNode; disabled?: boolean }[];
 }
 
 export function Select({ label, error, options, id, className = '', ...rest }: SelectProps) {
@@ -17,7 +18,7 @@ export function Select({ label, error, options, id, className = '', ...rest }: S
       {label && <label className="ui-field__label" htmlFor={selectId}>{label}</label>}
       <select id={selectId} className={`ui-select ${error ? 'ui-select--error' : ''} ${className}`} {...rest}>
         {options.map((o) => (
-          <option key={o.value} value={o.value}>{o.label}</option>
+          <option key={o.value} value={o.value} disabled={o.disabled}>{o.label}</option>
         ))}
       </select>
       {error && <div className="ui-field__error">{error}</div>}

package/app/components/ui/index.ts

@@ -1,6 +1,7 @@
 export * from './ConfirmModal';
 export * from './Badge';
 export * from './Button';
+export * from './RemoveButton';
 export * from './FilterBar';
 export * from './Input';
 export * from './LoadingSpinner';