feat(api-tab): give the page back its scrollbar

The API tab locked itself to the viewport on any desktop above 1100x700
and then handed vertical scroll to four nested `contain` scrollers. Storage
removed that same arrangement for the same reason: the wheel never reached
the document, so content below the fold was reachable only by finding the
right inner column first. The media query is gone with no replacement — the
base rules already provide width, padding, grid, and natural height.

The model catalog is now the one capped region, using the rule Usage
settled on: bounded height, sticky header, and `overscroll-behavior: auto`
so an exhausted table gives the wheel back. Driving that in a real browser
turned up a defect no CSS reading would have found: `.api-panel` sets
`overflow: hidden` for every panel on the tab, and a clipping ancestor
swallows the wheel event at the end of the list. The handoff was dead. It
is overridden for the model panel alone, with a guard.

Usage examples left their disclosure. They are the answer to "how do I call
this?", and a closed `<details>` answered it only for someone who already
suspected the examples were in there.

The catalog had one sentence for three situations. An empty catalog, a
query matching nothing, and a load that failed now read differently, the
failure carries its own retry beside the rows it repairs rather than a page
banner that outlived them, and a refresh over cached rows keeps them and
says it is working. `hasModelData` compared against `undefined` while the
cache reader answers `null`, so a failed cold load rendered "no models
available" about a catalog it never read.

The locale test named eight keys out of seventy-four; it now compares the
whole `api.` namespace across all six dictionaries, which catches missing
and extra keys alike. `api.workspace.selectKeyHint` was in every dictionary
and rendered nowhere.

Tests: 463 pass across 92 files.

Author: lidge-jun

gui/src/components/apikeys-workspace/ApiKeysWorkspace.tsx

@@ -39,6 +39,8 @@ export interface ApiKeysWorkspaceProps {
   filteredModels: ExternalModelRow[];
   modelsLoading: boolean;
   modelsLoadFailed: boolean;
+  modelCount: number;
+  hasModelData: boolean;
   modelQuery: string;
   copiedModelId: string | null;
   modelTests: ModelTests;
@@ -52,6 +54,7 @@ export interface ApiKeysWorkspaceProps {
   onModelQueryChange: (value: string) => void;
   onCopyModelId: (modelId: string) => void;
   onTestModel: (model: ExternalModelRow, protocol: GatewayInboundProtocol) => void;
+  onRetryModels: () => void;
   sourceLabel: (model: ExternalModelRow) => string;
   protocolLabel: (protocol: GatewayInboundProtocol) => string;
 }
@@ -72,6 +75,8 @@ export default function ApiKeysWorkspace({
   filteredModels,
   modelsLoading,
   modelsLoadFailed,
+  modelCount,
+  hasModelData,
   modelQuery,
   copiedModelId,
   modelTests,
@@ -85,6 +90,7 @@ export default function ApiKeysWorkspace({
   onModelQueryChange,
   onCopyModelId,
   onTestModel,
+  onRetryModels,
   sourceLabel,
   protocolLabel,
 }: ApiKeysWorkspaceProps) {
@@ -413,13 +419,16 @@ export default function ApiKeysWorkspace({
                   filteredModels={filteredModels}
                   modelsLoading={modelsLoading}
                   modelsLoadFailed={modelsLoadFailed}
+                  modelCount={modelCount}
+                  hasModelData={hasModelData}
                   modelQuery={modelQuery}
                   copiedModelId={copiedModelId}
                   modelTests={modelTests}
                   claudeCodeEnabled={claudeCodeEnabled}
                   onModelQueryChange={onModelQueryChange}
                   onCopyModelId={onCopyModelId}
                   onTestModel={onTestModel}
+                  onRetryModels={onRetryModels}
                   canTestModels={canTestModels}
                   sourceLabel={sourceLabel}
                   protocolLabel={protocolLabel}

gui/src/i18n/de.ts

@@ -823,6 +823,7 @@ export const de: Record<TKey, string> = {
   "api.modelsSubtitle": "Verwende diese exakten Modell-IDs mit /v1/models und dem gewählten eingehenden Protokoll.",
   "api.modelsLoading": "Modelle werden geladen…",
   "api.modelsEmpty": "Noch keine extern aufrufbaren Modelle verfügbar.",
+  "api.modelsNoMatch": "Keine Modelle passen zu „{query}“.",
   "api.modelsLoadFailed": "Der externe Modellkatalog konnte nicht geladen werden.",
   "api.colModel": "Modell",
   "api.colSource": "Quelle",
@@ -861,7 +862,6 @@ export const de: Record<TKey, string> = {
   "api.workspace.deleteKey": "Schlüssel löschen",
   "api.workspace.deleteConfirm": "Diesen Schlüssel wirklich löschen? Das lässt sich nicht rückgängig machen.",
   "api.workspace.noKeysHint": "Noch keine API-Schlüssel. Erstelle einen, um zu starten.",
-  "api.workspace.selectKeyHint": "Wähle einen Schlüssel aus der Liste, um Details zu sehen.",
   "api.workspace.usageExamples": "Nutzungsbeispiele",
   "api.copyUrlHint": "Klick um URL zu kopieren",
   "api.urlCopied": "URL kopiert",

gui/src/i18n/en.ts

@@ -1283,7 +1283,6 @@ export const en = {
   "api.workspace.deleteKey": "Delete key",
   "api.workspace.deleteConfirm": "Are you sure you want to delete this key? This cannot be undone.",
   "api.workspace.noKeysHint": "No API keys yet. Generate one to get started.",
-  "api.workspace.selectKeyHint": "Select a key from the list to view its details.",
   "api.workspace.usageExamples": "Usage examples",
   "api.copyUrlHint": "Click to copy URL",
   "api.urlCopied": "URL copied",
@@ -1300,6 +1299,7 @@ export const en = {
   "api.modelsSearch": "Search models",
   "api.modelsSubtitle": "Use these exact model IDs with /v1/models and your chosen inbound protocol.",
   "api.modelsEmpty": "No externally callable models are available yet.",
+  "api.modelsNoMatch": "No models match “{query}”.",
   "api.modelsLoadFailed": "Could not load the external model catalog.",
   "api.colModel": "Model",
   "api.colSource": "Source",

gui/src/i18n/ja.ts

@@ -1219,6 +1219,7 @@ export const ja: Record<TKey, string> = {
   "api.modelsLoading": "モデルを読み込み中…",
   "api.modelsLoadFailed": "外部モデルカタログを読み込めませんでした。",
   "api.modelsEmpty": "外部から呼び出せるモデルはまだありません。",
+  "api.modelsNoMatch": "「{query}」に一致するモデルはありません。",
   "api.colModel": "モデル",
   "api.colSource": "ソース",
   "api.colProtocols": "プロトコル",
@@ -1256,7 +1257,6 @@ export const ja: Record<TKey, string> = {
   "api.workspace.deleteKey": "キーを削除",
   "api.workspace.deleteConfirm": "このキーを削除しますか？この操作は元に戻せません。",
   "api.workspace.noKeysHint": "API キーがまだありません。作成して始めましょう。",
-  "api.workspace.selectKeyHint": "一覧からキーを選択すると、詳細が表示されます。",
   "api.workspace.usageExamples": "使用例",
   "api.copyUrlHint": "クリックして URL をコピー",
   "api.urlCopied": "URL をコピーしました",

gui/src/i18n/ko.ts

@@ -850,6 +850,7 @@ export const ko: Record<TKey, string> = {
   "api.modelsSubtitle": "이 정확한 모델 ID를 /v1/models와 선택한 인바운드 프로토콜과 함께 사용하세요.",
   "api.modelsLoading": "모델 불러오는 중…",
   "api.modelsEmpty": "아직 외부에서 호출 가능한 모델이 없습니다.",
+  "api.modelsNoMatch": "“{query}”와 일치하는 모델이 없습니다.",
   "api.modelsLoadFailed": "외부 모델 카탈로그를 불러오지 못했습니다.",
   "api.colModel": "모델",
   "api.colSource": "출처",
@@ -888,7 +889,6 @@ export const ko: Record<TKey, string> = {
   "api.workspace.deleteKey": "키 삭제",
   "api.workspace.deleteConfirm": "이 키를 삭제하시겠습니까? 되돌릴 수 없습니다.",
   "api.workspace.noKeysHint": "아직 API 키가 없습니다. 키를 생성하여 시작하세요.",
-  "api.workspace.selectKeyHint": "목록에서 키를 선택하여 세부 정보를 확인하세요.",
   "api.workspace.usageExamples": "사용 예제",
   "api.copyUrlHint": "클릭하여 URL 복사",
   "api.urlCopied": "URL 복사됨",

gui/src/i18n/ru.ts

@@ -1261,6 +1261,7 @@ export const ru: Record<TKey, string> = {
   "api.modelsLoading": "Загрузка моделей…",
   "api.modelsLoadFailed": "Не удалось загрузить каталог внешних моделей.",
   "api.modelsEmpty": "Пока нет внешне доступных моделей.",
+  "api.modelsNoMatch": "Нет моделей, соответствующих «{query}».",
   "api.colModel": "Модель",
   "api.colSource": "Источник",
   "api.colProtocols": "Протоколы",
@@ -1298,7 +1299,6 @@ export const ru: Record<TKey, string> = {
   "api.workspace.deleteKey": "Удалить ключ",
   "api.workspace.deleteConfirm": "Удалить этот ключ? Это действие нельзя отменить.",
   "api.workspace.noKeysHint": "API-ключей пока нет. Создайте один, чтобы начать.",
-  "api.workspace.selectKeyHint": "Выберите ключ из списка, чтобы просмотреть сведения.",
   "api.workspace.usageExamples": "Примеры использования",
   "api.copyUrlHint": "Нажмите, чтобы скопировать URL",
   "api.urlCopied": "URL скопирован",

gui/src/i18n/zh.ts

@@ -843,6 +843,7 @@ export const zh: Record<TKey, string> = {
   "api.modelsSubtitle": "请使用这些精确的模型 ID 搭配 /v1/models 和你选择的入站协议。",
   "api.modelsLoading": "正在加载模型…",
   "api.modelsEmpty": "还没有可供外部调用的模型。",
+  "api.modelsNoMatch": "没有与“{query}”匹配的模型。",
   "api.modelsLoadFailed": "无法加载外部模型目录。",
   "api.colModel": "模型",
   "api.colSource": "来源",
@@ -881,7 +882,6 @@ export const zh: Record<TKey, string> = {
   "api.workspace.deleteKey": "删除密钥",
   "api.workspace.deleteConfirm": "确定要删除此密钥吗？此操作无法撤销。",
   "api.workspace.noKeysHint": "还没有 API 密钥。生成一个以开始使用。",
-  "api.workspace.selectKeyHint": "从列表中选择一个密钥以查看其详情。",
   "api.workspace.usageExamples": "用法示例",
   "api.copyUrlHint": "点击复制 URL",
   "api.urlCopied": "已复制 URL",

gui/src/pages/ApiKeys.tsx

@@ -185,6 +185,7 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) {
   // can never be presented as the server's answer.
   const authMatrix = keysData?.authMatrix ?? [];
   const refreshKeys = keysResource.refresh;
+  const refreshModels = modelsResource.refresh;
 
   const filteredModels = useMemo(() => {
     const query = modelQuery.trim().toLowerCase();
@@ -381,7 +382,9 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) {
 
       {actionError && <Notice tone="err">{actionError}</Notice>}
       {keysState.showError && keysData && <Notice tone="err">{t("api.keysLoadFailed")}</Notice>}
-      {modelsState.showError && keysData && <Notice tone="err">{t("api.modelsLoadFailed")}</Notice>}
+      {/* The model failure is reported inside the models panel, beside the
+          retry that repairs it. A page banner said it a second time and stayed
+          up while the panel below it showed perfectly good cached rows. */}
 
       {keysState.showSkeleton && !keysData ? (
         <DataSurfaceSkeleton label={t("api.activeKeysLoading")} rows={4} />
@@ -398,7 +401,10 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) {
           {keysState.refreshing && keysData && (
             <DataSurfaceStatus live={!keysState.showError}>{t("api.activeKeysLoading")}</DataSurfaceStatus>
           )}
-          {modelsState.refreshing && modelsState.data && (
+          {/* `modelsState.data` alone misses the session-cached case: after a
+              failure the rows on screen come from `cachedModels`, and a retry
+              then ran with no visible progress at all. */}
+          {modelsState.refreshing && (modelsState.data !== undefined || cachedModels !== null) && (
             <DataSurfaceStatus live={!modelsState.showError && !(keysState.refreshing && keysData)}>
               {t("api.modelsLoading")}
             </DataSurfaceStatus>
@@ -419,6 +425,11 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) {
         filteredModels={filteredModels}
         modelsLoading={modelsState.showSkeleton && !modelsState.data && !cachedModels}
         modelsLoadFailed={modelsState.showError}
+        modelCount={models.length}
+        // `readSessionListCache` answers `null`, not `undefined`, when it has
+        // nothing — comparing against `undefined` made a failed cold load look
+        // like a successfully-read empty catalog.
+        hasModelData={modelsState.data !== undefined || cachedModels !== null}
         modelQuery={modelQuery}
         copiedModelId={copiedModelId}
         modelTests={modelTests}
@@ -431,6 +442,7 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) {
         onModelQueryChange={setModelQuery}
         onCopyModelId={(modelId) => { void copyModelId(modelId); }}
         onTestModel={(model, protocol) => { void testModel(model, protocol); }}
+        onRetryModels={() => { refreshModels({ forceLoading: true }); }}
         canTestModels={newKey !== null}
         sourceLabel={sourceLabel}
         protocolLabel={protocolLabel}

gui/src/pages/api-keys-panels.tsx

@@ -143,27 +143,37 @@ export function ApiKeysModelsPanel({
   filteredModels,
   modelsLoading,
   modelsLoadFailed,
+  modelCount,
+  hasModelData,
   modelQuery,
   copiedModelId,
   modelTests,
   claudeCodeEnabled,
   onModelQueryChange,
   onCopyModelId,
   onTestModel,
+  onRetryModels,
   canTestModels,
   sourceLabel,
   protocolLabel,
 }: {
   filteredModels: ExternalModelRow[];
   modelsLoading: boolean;
   modelsLoadFailed: boolean;
+  /** The whole catalog, before the search box narrowed it. "No models" and
+   *  "no models matching this query" are different sentences. */
+  modelCount: number;
+  /** True once a catalog has loaded at least once, from network or cache.
+   *  Distinguishes a server that really has no models from a failed cold load. */
+  hasModelData: boolean;
   modelQuery: string;
   copiedModelId: string | null;
   modelTests: ModelTests;
   claudeCodeEnabled: boolean;
   onModelQueryChange: (value: string) => void;
   onCopyModelId: (modelId: string) => void;
   onTestModel: (model: ExternalModelRow, protocol: GatewayInboundProtocol) => void;
+  onRetryModels: () => void;
   /** The GUI only ever holds the one-time key from a create, so an authenticated
    *  test is available in that window and honestly disabled outside it. */
   canTestModels: boolean;
@@ -186,14 +196,31 @@ export function ApiKeysModelsPanel({
         placeholder={t("api.modelsSearch")}
         aria-label={t("api.modelsSearch")}
       />
+      {/* The retry sits beside the catalog it repairs, not in a page banner that
+          outlives the panel. A failed refresh can coexist with last-good rows,
+          so this is rendered alongside the table rather than instead of it. */}
+      {modelsLoadFailed && (
+        <div className="api-models-error">
+          {/* The page-level notice this replaced was announced. Moving the
+              message next to its retry must not also make it silent. */}
+          <p className="muted small" role="alert">{t("api.modelsLoadFailed")}</p>
+          <button type="button" className="btn btn-ghost btn-sm" onClick={onRetryModels}>
+            {t("common.retry")}
+          </button>
+        </div>
+      )}
       {modelsLoading ? (
         <DataSurfaceSkeleton label={t("api.modelsLoading")} rows={3} />
-      ) : modelsLoadFailed ? (
-        // The page-level notice owns the persistent announcement and retry surface. Keeping this
-        // panel mounted preserves the query field without adding a second live error region.
+      ) : !hasModelData ? (
+        // Failed cold: the error above is the whole story. Adding "no models"
+        // here would assert an empty catalog we never managed to read.
         null
       ) : filteredModels.length === 0 ? (
-        <p className="muted small" style={{ marginTop: "0.75rem" }}>{t("api.modelsEmpty")}</p>
+        <p className="muted small api-models-empty">
+          {modelCount === 0
+            ? t("api.modelsEmpty")
+            : t("api.modelsNoMatch", { query: modelQuery.trim() })}
+        </p>
       ) : (
         <div className="api-models-scroll">
           <table className="tbl">
@@ -308,9 +335,12 @@ export function ApiKeysUsagePanel({
   }'`;
 
   return (
-    <details className="awi-usage-fold">
-      <summary>{t("api.workspace.usageExamples")}</summary>
-      <div className="awi-usage-fold-body">
+    // Not a disclosure. These are the answer to "how do I call this?", and a
+    // closed <details> answered it only for someone who already suspected the
+    // examples were in there.
+    <section className="panel api-panel awi-usage-panel">
+      <h3 className="panel-title">{t("api.workspace.usageExamples")}</h3>
+      <div className="awi-usage-panel-body">
         <div className="awi-usage-example">
           <h4 className="awi-usage-example-title">{t("api.usageChatTitle")}</h4>
           <CopyableExample text={chatExample} />
@@ -328,6 +358,6 @@ export function ApiKeysUsagePanel({
           </div>
         )}
       </div>
-    </details>
+    </section>
   );
 }