fix(upstreams): show cached models when opening editor

apps/web/src/components/upstream-editor/data.ts

@@ -3,7 +3,6 @@ import type { InferRequestType } from 'hono/client';
 import { PATH_OVERRIDE_PATHS } from './endpoints';
 import { api, callApi } from '../../api/client';
 import type {
-  BackoffRow,
   ProxyRecord,
   ProviderModelsFailureResponse,
   UpstreamRecord,
@@ -23,15 +22,12 @@ export interface RuntimeInfo {
 
 export interface EditorAuxData {
   proxies: ProxyRecord[];
-  backoffs: BackoffRow[];
   runtime: RuntimeInfo;
-  upstreams: UpstreamRecord[];
 }
 
 interface UpstreamEditorLoaderDataBase extends EditorAuxData {
   record: UpstreamRecord;
-  discovered: UpstreamModelConfig[];
-  modelsError: ModelListingFailure | null;
+  discovered: UpstreamModelConfig[] | null;
   // For providers whose credential is an API key, the editor can keep that
   // stored key when the form's blank secret field is left alone; OAuth
   // providers do not copy their tokens and start from the blueprint
@@ -88,19 +84,15 @@ export const providerDefaultName: Record<UpstreamProviderKind, string> = {
 };
 
 export const loadEditorAux = async (): Promise<EditorAuxData> => {
-  const [proxies, backoffs, runtime, upstreams] = await Promise.all([
+  const [proxies, runtime] = await Promise.all([
     callApi(() => api.api.proxies.$get()),
-    callApi(() => api.api.proxies.backoffs.$get()),
     callApi(() => api.api['runtime-info'].$get()),
-    callApi(() => api.api.upstreams.$get()),
   ]);
-  const error = proxies.error ?? backoffs.error ?? runtime.error ?? upstreams.error;
-  if (error) throw new Error(error.message);
+  if (proxies.error) throw new Error(proxies.error.message);
+  if (runtime.error) throw new Error(runtime.error.message);
   return {
-    proxies: proxies.data!,
-    backoffs: backoffs.data!,
-    runtime: runtime.data!,
-    upstreams: upstreams.data!,
+    proxies: proxies.data,
+    runtime: runtime.data,
   };
 };
 
@@ -130,7 +122,7 @@ export const manualModelsSupported = (record: UpstreamRecord): record is Extract
   record.kind === 'custom' || record.kind === 'azure' || record.kind === 'ollama';
 
 export interface ModelCatalogFetch {
-  /** Null when nothing was listed, which leaves whatever the caller already shows. */
+  /** Null when the request produced no new catalog. */
   discovered: UpstreamModelConfig[] | null;
   modelsError: ModelListingFailure | null;
   modelsCache: UpstreamRecord['modelsCache'] | null;

apps/web/src/components/upstream-editor/page.tsx

@@ -61,8 +61,8 @@ export function UpstreamEditorPage({ data }: { data: UpstreamEditorLoaderData })
     setRecord(next);
   }, []);
   const [discovered, setDiscovered] = useState(data.discovered);
-  const [catalogAvailable, setCatalogAvailable] = useState(false);
-  const [modelsError, setModelsError] = useState<ModelListingFailure | null>(data.modelsError);
+  const catalogAvailable = discovered !== null;
+  const [modelsError, setModelsError] = useState<ModelListingFailure | null>(null);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [modelsYamlDraft, setModelsYamlDraft] = useState<ModelsYamlDraft | null>(null);
@@ -166,8 +166,9 @@ export function UpstreamEditorPage({ data }: { data: UpstreamEditorLoaderData })
         : await previewDraftModelCatalog(record, getValues(), { signal });
     if (signal.aborted) return;
     setModelsError(catalog.modelsError);
-    setCatalogAvailable(catalog.discovered !== null && catalog.modelsError === null);
-    if (catalog.discovered) setDiscovered(catalog.discovered);
+    if (catalog.discovered !== null) {
+      setDiscovered(catalog.discovered);
+    } else if (catalog.modelsCache?.fetchedAt === null) setDiscovered(null);
     if (catalog.modelsCache) updateRecord({ ...recordRef.current, modelsCache: catalog.modelsCache } as UpstreamRecord);
   }, [discoveryInputsDirty, getValues, record, updateRecord]));
 
@@ -232,7 +233,7 @@ export function UpstreamEditorPage({ data }: { data: UpstreamEditorLoaderData })
       if (invalidatesPendingFetch) cancelModelsRefresh();
       updateRecord(saved);
       reset(valuesFromRecord(saved));
-      if (invalidatesDiscovered) { setModelsError(null); setDiscovered([]); setCatalogAvailable(false); }
+      if (invalidatesDiscovered) { setModelsError(null); setDiscovered(null); }
       handle.succeed(t('dashboard.upstreamEditor.toast.saved'));
       savedRecord = saved;
       // `saving` stays set during the route handoff; the old form is still
@@ -271,7 +272,7 @@ export function UpstreamEditorPage({ data }: { data: UpstreamEditorLoaderData })
         <Panel className="min-h-0 min-w-0 overflow-hidden" padding="flush">
           <UpstreamConfigSidebar
             catalogAvailable={catalogAvailable}
-            discovered={discovered}
+            discovered={discovered ?? []}
             onPatch={applyProviderPatch}
             onRefreshModels={requestModels}
             proxies={data.proxies}
@@ -280,7 +281,7 @@ export function UpstreamEditorPage({ data }: { data: UpstreamEditorLoaderData })
           />
         </Panel>
         <Panel className="min-h-0 min-w-0 overflow-hidden" padding="flush">
-          <UpstreamWorkspace record={record} discovered={discovered} modelsLoading={modelsLoading} modelsError={modelsError} modelsYamlDraft={modelsYamlDraft} onModelsYamlDraftChange={setModelsYamlDraft} onRefreshModels={requestModels} />
+          <UpstreamWorkspace record={record} discovered={discovered ?? []} modelsLoading={modelsLoading} modelsError={modelsError} modelsYamlDraft={modelsYamlDraft} onModelsYamlDraftChange={setModelsYamlDraft} onRefreshModels={requestModels} />
         </Panel>
       </div>
     </div>

apps/web/src/routes/dashboard-providers-upstreams-copy.tsx

@@ -82,26 +82,27 @@ const copyableRecord = (source: UpstreamRecord, name: string, hue: number): {
 
 export async function clientLoader({ params }: Route.ClientLoaderArgs) {
   await requireDashboardAdmin();
-  const [sourceResult, aux] = await Promise.all([
+  const [sourceResult, aux, upstreamsResult] = await Promise.all([
     callApi(() => api.api.upstreams[':id'].$get({ param: { id: params.id } })),
     loadEditorAux(),
+    callApi(() => api.api.upstreams.$get()),
   ]);
   if (sourceResult.error?.status === 404) {
     throw redirect('/dashboard/providers/upstreams?missing=1');
   }
   if (sourceResult.error) throw new Error(sourceResult.error.message);
+  if (upstreamsResult.error) throw new Error(upstreamsResult.error.message);
   const source = sourceResult.data;
   const { record, preserveCredentials } = copyableRecord(
     source,
     i18n.t('dashboard.upstreams.copy.nameSuffix', { name: source.name }),
-    pickDistinctHue(aux.upstreams.map(upstream => upstream.hue)),
+    pickDistinctHue(upstreamsResult.data.map(upstream => upstream.hue)),
   );
   return {
     ...aux,
     mode: 'create' as const,
     record,
-    discovered: [],
-    modelsError: null,
+    discovered: null,
     preserveCredentials,
   };
 }

apps/web/src/routes/dashboard-providers-upstreams-edit.tsx

@@ -23,8 +23,7 @@ export async function clientLoader({ params }: Route.ClientLoaderArgs) {
   return {
     ...aux,
     record: recordResult.data,
-    discovered: [],
-    modelsError: null,
+    discovered: recordResult.data.cachedModels,
     mode: 'edit' as const,
   };
 }

apps/web/src/routes/dashboard-providers-upstreams-new.tsx

@@ -21,22 +21,24 @@ export async function clientLoader({ params }: Route.ClientLoaderArgs) {
   if (!kind) {
     throw redirect('/dashboard/providers/upstreams');
   }
-  const [recordResult, aux] = await Promise.all([
+  const [recordResult, aux, upstreamsResult] = await Promise.all([
     callApi(() =>
       api.api.upstreams.blueprint.$get({ query: { kind } })),
     loadEditorAux(),
+    callApi(() => api.api.upstreams.$get()),
   ]);
   if (recordResult.error) throw new Error(recordResult.error.message);
+  if (upstreamsResult.error) throw new Error(upstreamsResult.error.message);
   const record = {
     ...recordResult.data,
     name: providerDefaultName[kind],
     enabled: true,
     // A blueprint carries no hue: the badge only has to be told apart from the
     // ones already on screen, which is a fact the dashboard holds and the
     // server does not.
-    hue: pickDistinctHue(aux.upstreams.map(upstream => upstream.hue)),
+    hue: pickDistinctHue(upstreamsResult.data.map(upstream => upstream.hue)),
   };
-  return { ...aux, mode: 'create' as const, record, discovered: [], modelsError: null };
+  return { ...aux, mode: 'create' as const, record, discovered: null };
 }
 
 export const shouldRevalidate = revalidateOnPathnameChange;