harness-mix 0.1.0

package/src/native-ui/renderer-extension/test/renderer-binding-probe-host-catalog.test.ts

@@ -0,0 +1,728 @@
+import { harnessIdSchema } from "@codexhost/shared-contracts";
+import { harnessModelRefSchema } from "@codexhost/shared-contracts";
+import { afterEach, assert, describe, expect, it, vi } from "vitest";
+
+import type * as RendererComposerDom from "../src/renderer-composer-dom.js";
+import {
+  isRendererModelPickerDisabled,
+  type RendererModelControlView,
+} from "../src/renderer-model-picker.js";
+import type { RendererConnectionDiagnostics } from "../src/settings/connections-page.js";
+import type { RendererSessionImportClient } from "../src/settings/session-import-page.js";
+import type * as VersionedRendererAdapter from "../src/versioned-renderer-adapter.js";
+
+const testState = vi.hoisted(() => ({
+  composer: null as unknown as Element,
+  editor: null as unknown as Element,
+  sendButton: null as unknown as HTMLButtonElement,
+  renderedModelViews: [] as RendererModelControlView[],
+  selectModel: null as null | ((modelId: string) => void),
+  getConnectionDiagnostics: null as null | (() => RendererConnectionDiagnostics | null),
+  getSessionImportClient: null as null | (() => RendererSessionImportClient | null),
+  documentListeners: new Map<string, EventListener>(),
+  modelTarget: ["conversation", "thread-a"] as readonly unknown[],
+}));
+
+vi.mock("../src/renderer-composer-dom.js", async (importOriginal) => {
+  const original = await importOriginal<typeof RendererComposerDom>();
+  return {
+    ...original,
+    composerForEditor: () => testState.composer,
+    composerForElement: () => testState.composer,
+    editorForElement: () => testState.editor,
+    eventElement: () => testState.composer,
+    mountComposerAgentControl: (
+      ...args: Parameters<typeof RendererComposerDom.mountComposerAgentControl>
+    ) => {
+      testState.selectModel = args[8];
+      return {
+        composer: testState.composer,
+        composerId: "composer-1",
+        root: { isConnected: true, remove: vi.fn() },
+        picker: { root: { isConnected: true } },
+        modelPicker: { root: { isConnected: true }, trigger: {} },
+        permissionModePicker: { root: { isConnected: true } },
+        nativeModelControl: null,
+        nativePermissionModeControl: null,
+        nativeContextUsageControl: null,
+        nativePermissionModeControlVerified: false,
+        credits: { anchor: null, place: vi.fn(), root: { remove: vi.fn() } },
+        usage: null,
+        harnessCommands: {
+          setCommands: vi.fn(),
+          setExecuting: vi.fn(),
+          setLocale: vi.fn(),
+          placeBefore: vi.fn(),
+          dispose: vi.fn(),
+        },
+        sendButton: testState.sendButton,
+        sendDisabledBeforeSwitch: null,
+      };
+    },
+    renderComposerAgentControl: (
+      _control: unknown,
+      _selection: unknown,
+      _adapter: unknown,
+      _switching: unknown,
+      _availability: unknown,
+      modelView: RendererModelControlView,
+    ) => {
+      testState.renderedModelViews.push({ ...modelView });
+    },
+    reconcileComposerNativeControls: vi.fn(),
+    disposeComposerAgentControl: vi.fn(),
+    sendButtonWithin: () => testState.sendButton,
+  };
+});
+
+vi.mock("../src/versioned-renderer-adapter.js", async (importOriginal) => {
+  const original = await importOriginal<typeof VersionedRendererAdapter>();
+  return {
+    ...original,
+    findComposerModelTarget: () => testState.modelTarget,
+    waitForRendererDraftPrewarmPolicy: async () => ({ clear: async () => undefined }),
+  };
+});
+
+vi.mock("../src/renderer-sidebar-agent-icons.js", () => ({
+  installRendererSidebarAgentIcons: () => ({ refresh: vi.fn(), dispose: vi.fn() }),
+}));
+
+vi.mock("../src/renderer-harness-mentions.js", () => ({
+  installHarnessMentions: () => ({ dispose: vi.fn() }),
+}));
+
+vi.mock("../src/harness-mix-settings.js", () => ({
+  installRendererSettingsLifecycle: (
+    _window: unknown,
+    options: {
+      getConnectionDiagnostics(): RendererConnectionDiagnostics | null;
+      getSessionImportClient(): RendererSessionImportClient | null;
+    },
+  ) => {
+    testState.getConnectionDiagnostics = options.getConnectionDiagnostics;
+    testState.getSessionImportClient = options.getSessionImportClient;
+    return {
+      locale: "en",
+      refresh: vi.fn(),
+      dispose: vi.fn(),
+    };
+  },
+}));
+
+function readyInspection(modelId = "claude-model-v1.b3B1cw") {
+  const model = harnessModelRefSchema.parse({ id: modelId });
+  return {
+    status: "ready" as const,
+    catalog: {
+      models: [{ ref: model, label: modelId }],
+      defaultModel: model,
+      thinkingOptions: [],
+    },
+    capabilities: {
+      configuration: {
+        selectModel: true,
+        selectThinkingOption: false,
+        selectPermissionMode: false,
+        permissionModeScope: "live" as const,
+      },
+      history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+    },
+  };
+}
+
+function emptyInspection() {
+  return {
+    status: "ready" as const,
+    catalog: { models: [], thinkingOptions: [] },
+    capabilities: {
+      configuration: {
+        selectModel: false,
+        selectThinkingOption: false,
+        selectPermissionMode: false,
+        permissionModeScope: "live" as const,
+      },
+      history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+    },
+  };
+}
+
+function installFakeBrowser(): void {
+  const listeners = new EventTarget();
+  const composer = {
+    isConnected: true,
+    matches: (selector: string) => selector === "[data-codex-composer-root]",
+    querySelectorAll: (selector: string) => (selector === "button" ? [testState.sendButton] : []),
+    querySelector: (selector: string) => (selector.includes("textarea") ? testState.editor : null),
+  } as unknown as Element;
+  const editor = { closest: () => composer } as unknown as Element;
+  const sendButton = {
+    type: "submit",
+    disabled: false,
+    parentElement: null,
+    getAttribute: () => null,
+  } as unknown as HTMLButtonElement;
+  testState.composer = composer;
+  testState.editor = editor;
+  testState.sendButton = sendButton;
+  testState.renderedModelViews = [];
+  testState.selectModel = null;
+  testState.getConnectionDiagnostics = null;
+  testState.getSessionImportClient = null;
+  testState.documentListeners.clear();
+  testState.modelTarget = ["conversation", "thread-a"];
+  const window_ = {
+    addEventListener: listeners.addEventListener.bind(listeners),
+    removeEventListener: listeners.removeEventListener.bind(listeners),
+    dispatchEvent: listeners.dispatchEvent.bind(listeners),
+    setTimeout,
+    clearTimeout,
+    open: vi.fn(),
+  };
+  const document_ = {
+    documentElement: {},
+    body: {},
+    activeElement: null,
+    querySelectorAll: (selector: string) => (selector.includes("textarea") ? [editor] : []),
+    querySelector: () => null,
+    addEventListener: vi.fn((type: string, listener: EventListener) => {
+      testState.documentListeners.set(type, listener);
+    }),
+    removeEventListener: vi.fn(),
+  };
+  vi.stubGlobal("window", window_);
+  vi.stubGlobal("document", document_);
+  vi.stubGlobal("Node", { ELEMENT_NODE: 1 });
+  vi.stubGlobal(
+    "MutationObserver",
+    class {
+      observe(): void {}
+      disconnect(): void {}
+    },
+  );
+  vi.stubGlobal(
+    "CustomEvent",
+    class extends Event {
+      constructor(
+        type: string,
+        readonly init?: CustomEventInit,
+      ) {
+        super(type);
+      }
+    },
+  );
+}
+
+afterEach(() => {
+  const api = (
+    globalThis.window as unknown as {
+      __codexhostRendererBindingProbeV1?: { dispose(): void };
+    }
+  ).__codexhostRendererBindingProbeV1;
+  api?.dispose();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+describe("Renderer binding Host-scoped Claude catalogs", () => {
+  it("keeps the latest catalog selectable until a locked Thread explicitly replaces its missing Model", async () => {
+    installFakeBrowser();
+    const oldModel = harnessModelRefSchema.parse({ id: "claude-model-v1.b3B1cw" });
+    const inspection = {
+      ...readyInspection("claude-model-v1.c29ubmV0"),
+      permissionModes: {
+        modes: [{ id: "bypassPermissions", label: "Bypass permissions" }],
+        defaultModeId: "bypassPermissions",
+      },
+    };
+    inspection.capabilities.configuration.selectThinkingOption = true;
+    inspection.capabilities.configuration.selectPermissionMode = true;
+    const newModel = inspection.catalog.defaultModel;
+    let resolveSelection!: (state: { effectiveModel: typeof newModel }) => void;
+    const host = {
+      inspectHarness: vi.fn(async () => inspection),
+      inspectThread: vi.fn(async () => ({
+        owner: "external" as const,
+        harnessId: "claude-code",
+        transportModelId:
+          "codexhost/claude-code-native@claude-model-v1.b3B1cw@bypassPermissions@auto",
+        effectiveModel: oldModel,
+        history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+        locked: true,
+      })),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(async () => ({
+        threadId: "thread-a",
+        usage: null,
+        accountCredits: null,
+      })),
+      selectThreadModel: vi
+        .fn()
+        .mockRejectedValueOnce(new Error("Model selection failed"))
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve) => {
+              resolveSelection = resolve;
+            }),
+        ),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const modelControl = {
+      ...host,
+      currentHostId: () => "local",
+      clientForHost: () => host,
+    };
+    const applyAgent = vi.fn(() => true);
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "claude-code"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      applyAgent,
+      modelControl as never,
+    );
+    const expectSubmissionBlocked = (blocked: boolean) => {
+      const preventDefault = vi.fn();
+      const stopImmediatePropagation = vi.fn();
+      const submit = testState.documentListeners.get("submit");
+      assert(submit);
+      submit({
+        target: testState.composer,
+        preventDefault,
+        stopImmediatePropagation,
+      } as unknown as Event);
+      expect(preventDefault).toHaveBeenCalledTimes(blocked ? 1 : 0);
+      expect(stopImmediatePropagation).toHaveBeenCalledTimes(blocked ? 1 : 0);
+    };
+    const expectRecoverableView = (error: string) => {
+      const view = testState.renderedModelViews.at(-1);
+      assert(view);
+      expect(view).toMatchObject({
+        status: "error",
+        catalog: inspection.catalog,
+        selected: oldModel,
+        thinkingSelectionSupported: true,
+        error,
+      });
+      expect(isRendererModelPickerDisabled(view)).toBe(false);
+      expect(probe.lockedSelection()?.model).toEqual(oldModel);
+      expectSubmissionBlocked(true);
+    };
+
+    await vi.waitFor(() => {
+      expectRecoverableView("Existing Thread Model is absent from the current Catalog");
+    });
+    expect(host.selectThreadModel).not.toHaveBeenCalled();
+    expect(applyAgent).not.toHaveBeenCalled();
+
+    const selectModel = testState.selectModel;
+    assert(selectModel);
+    selectModel(newModel.id);
+    await vi.waitFor(() => expectRecoverableView("Model selection failed"));
+    expect(host.selectThreadModel).toHaveBeenCalledExactlyOnceWith({
+      threadId: "thread-a",
+      model: newModel,
+    });
+
+    selectModel(newModel.id);
+    expect(testState.renderedModelViews.at(-1)).toMatchObject({
+      status: "selecting",
+      selected: oldModel,
+    });
+    expect(probe.lockedSelection()?.model).toEqual(oldModel);
+    expectSubmissionBlocked(true);
+    resolveSelection({ effectiveModel: newModel });
+    await vi.waitFor(() => {
+      expect(testState.renderedModelViews.at(-1)).toMatchObject({
+        status: "ready",
+        catalog: inspection.catalog,
+        selected: newModel,
+      });
+    });
+    expect(host.selectThreadModel).toHaveBeenCalledTimes(2);
+    expect(probe.lockedSelection()?.model).toEqual(newModel);
+    expectSubmissionBlocked(false);
+    expect(applyAgent).not.toHaveBeenCalled();
+  });
+
+  it("routes Session import to local while the current Composer Host is remote", async () => {
+    installFakeBrowser();
+    const local = {
+      inspectHarness: vi.fn(async () => readyInspection()),
+      listSessionImportSources: vi.fn(async () => ({
+        harnesses: [
+          { harnessId: harnessIdSchema.parse("deepseek-harness"), name: "DeepSeek Harness" },
+        ],
+      })),
+      listHarnessSessions: vi.fn(async () => ({ candidates: [] })),
+      importHarnessSession: vi.fn(async () => ({ threadId: "local-thread" })),
+    };
+    const remote = {
+      inspectHarness: vi.fn(async () => readyInspection()),
+      listSessionImportSources: vi.fn(async () => ({
+        harnesses: [
+          { harnessId: harnessIdSchema.parse("deepseek-harness"), name: "DeepSeek Harness" },
+        ],
+      })),
+      listHarnessSessions: vi.fn(),
+      importHarnessSession: vi.fn(),
+    };
+    const modelControl = {
+      ...remote,
+      currentHostId: () => "remote-1",
+      clientForHost: vi.fn((hostId: string) => (hostId === "local" ? local : remote)),
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "deepseek-harness"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    const client = testState.getSessionImportClient?.();
+    if (!client) throw new Error("Local Session import client was not installed");
+    await client.listSessionImportSources();
+    await client.listHarnessSessions({ harnessId: harnessIdSchema.parse("pi") });
+    await client.importHarnessSession({
+      harnessId: harnessIdSchema.parse("pi"),
+      nativeSessionId: "native-session",
+    });
+
+    expect(modelControl.clientForHost).toHaveBeenCalledWith("local");
+    expect(local.listSessionImportSources).toHaveBeenCalledOnce();
+    expect(local.listHarnessSessions).toHaveBeenCalledWith({ harnessId: "pi" });
+    expect(local.importHarnessSession).toHaveBeenCalledWith({
+      harnessId: "pi",
+      nativeSessionId: "native-session",
+    });
+    expect(remote.listHarnessSessions).not.toHaveBeenCalled();
+    expect(remote.importHarnessSession).not.toHaveBeenCalled();
+  });
+
+  it("invalidates and refreshes a stale managed Web capability after open fails", async () => {
+    installFakeBrowser();
+    let dshAvailable = true;
+    let dshInspections = 0;
+    const local = {
+      inspectHarness: vi.fn(async ({ harnessId }: { harnessId: string }) => {
+        if (harnessId !== "deepseek-harness") return readyInspection();
+        dshInspections += 1;
+        return dshAvailable
+          ? { ...readyInspection("deepseek-model-v1.bW9kZWw"), webUi: { open: true as const } }
+          : {
+              status: "unavailable" as const,
+              error: { code: "processExited", message: "managed DSH exited", retryable: true },
+            };
+      }),
+      openHarnessWebUi: vi.fn(async () => {
+        throw new Error("managed DSH exited");
+      }),
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const modelControl = {
+      ...local,
+      currentHostId: () => "local",
+      clientForHost: vi.fn(() => local),
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "deepseek-harness"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    await vi.waitFor(() => {
+      const diagnostics = testState.getConnectionDiagnostics?.();
+      const dsh = diagnostics
+        ?.snapshot()
+        .hosts.find(({ hostId }) => hostId === "local")
+        ?.agents.find(({ agent }) => agent === "deepseek-harness");
+      expect(dsh?.webUiAvailable).toBe(true);
+    });
+    const inspectionsBeforeFailure = dshInspections;
+    dshAvailable = false;
+    const diagnostics = testState.getConnectionDiagnostics?.();
+    await expect(diagnostics?.openWebUi?.("local", "deepseek-harness")).rejects.toThrow(
+      "managed DSH exited",
+    );
+    expect(
+      diagnostics
+        ?.snapshot()
+        .hosts.find(({ hostId }) => hostId === "local")
+        ?.agents.find(({ agent }) => agent === "deepseek-harness")?.webUiAvailable,
+    ).toBeUndefined();
+    await vi.waitFor(() => expect(dshInspections).toBeGreaterThan(inspectionsBeforeFailure));
+
+    probe.dispose();
+  });
+
+  it("does not let a stale remote Host response mark a locked Claude Model unavailable", async () => {
+    installFakeBrowser();
+    let currentHostId = "host-a";
+    let resolveCatalog!: (value: ReturnType<typeof readyInspection>) => void;
+    const pendingCatalog = new Promise<ReturnType<typeof readyInspection>>((resolve) => {
+      resolveCatalog = resolve;
+    });
+    let claudeInspections = 0;
+    const hostA = {
+      inspectHarness: vi.fn(({ harnessId }: { harnessId: string }) => {
+        if (harnessId !== "claude-code") return Promise.resolve(readyInspection());
+        claudeInspections += 1;
+        return claudeInspections === 1 ? Promise.resolve(readyInspection()) : pendingCatalog;
+      }),
+      inspectThread: vi.fn(async () => ({
+        owner: "external" as const,
+        harnessId: "claude-code",
+        transportModelId:
+          "codexhost/claude-code-native@claude-model-v1.b3B1cw@bypassPermissions@auto",
+        effectiveModel: harnessModelRefSchema.parse({ id: "claude-model-v1.b3B1cw" }),
+        history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+        locked: true,
+      })),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(async () => ({
+        threadId: "thread-a",
+        usage: null,
+        accountCredits: null,
+      })),
+    };
+    const genericHostB = {
+      inspectHarness: vi.fn(async () => readyInspection("opencodex-model-v1.generic")),
+    };
+    const modelControl = {
+      currentHostId: () => currentHostId,
+      clientForHost: vi.fn((hostId: string) => (hostId === "host-a" ? hostA : genericHostB)),
+      inspectHarness: genericHostB.inspectHarness,
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "claude-code"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    await vi.waitFor(() => expect(claudeInspections).toBe(2));
+    currentHostId = "host-b";
+    resolveCatalog(readyInspection("claude-model-v1.c29ubmV0"));
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(hostA.inspectThread).toHaveBeenCalledWith({ threadId: "thread-a" });
+    expect(modelControl.clientForHost).toHaveBeenCalledWith("host-a");
+    expect(genericHostB.inspectHarness).not.toHaveBeenCalledWith({ harnessId: "claude-code" });
+    expect(testState.renderedModelViews.at(-1)).not.toMatchObject({ status: "error" });
+    expect(testState.renderedModelViews).not.toContainEqual(
+      expect.objectContaining({
+        error: "Existing Thread Model is absent from the current Catalog",
+      }),
+    );
+  });
+
+  it("discards a stale catalog when the selected client changes for the same Host", async () => {
+    installFakeBrowser();
+    let resolveCatalog!: (value: ReturnType<typeof readyInspection>) => void;
+    const pendingCatalog = new Promise<ReturnType<typeof readyInspection>>((resolve) => {
+      resolveCatalog = resolve;
+    });
+    let claudeInspections = 0;
+    const originalHost = {
+      inspectHarness: vi.fn(({ harnessId }: { harnessId: string }) => {
+        if (harnessId !== "claude-code") return Promise.resolve(readyInspection());
+        claudeInspections += 1;
+        return claudeInspections === 1 ? Promise.resolve(readyInspection()) : pendingCatalog;
+      }),
+      inspectThread: vi.fn(async () => ({
+        owner: "external" as const,
+        harnessId: "claude-code",
+        transportModelId:
+          "codexhost/claude-code-native@claude-model-v1.b3B1cw@bypassPermissions@auto",
+        effectiveModel: harnessModelRefSchema.parse({ id: "claude-model-v1.b3B1cw" }),
+        history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+        locked: true,
+      })),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(async () => ({
+        threadId: "thread-a",
+        usage: null,
+        accountCredits: null,
+      })),
+    };
+    const replacementHost = {
+      inspectHarness: vi.fn(async () => readyInspection()),
+    };
+    let selectedHost: typeof originalHost | typeof replacementHost = originalHost;
+    const modelControl = {
+      currentHostId: () => "host-a",
+      clientForHost: vi.fn(() => selectedHost),
+      inspectHarness: originalHost.inspectHarness,
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "claude-code"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    await vi.waitFor(() => expect(claudeInspections).toBe(2));
+    selectedHost = replacementHost;
+    resolveCatalog(readyInspection("claude-model-v1.c3RhbGU"));
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(testState.renderedModelViews.at(-1)).not.toMatchObject({ status: "error" });
+    expect(testState.renderedModelViews).not.toContainEqual(
+      expect.objectContaining({
+        error: "Existing Thread Model is absent from the current Catalog",
+      }),
+    );
+  });
+
+  it("loads an external catalog for a draft mounted before the Adapter", async () => {
+    installFakeBrowser();
+    testState.modelTarget = ["default"];
+    let claudeInspections = 0;
+    const hostA = {
+      inspectHarness: vi.fn(async () => {
+        claudeInspections += 1;
+        return readyInspection();
+      }),
+    };
+    const modelControl = {
+      currentHostId: () => "host-a",
+      clientForHost: vi.fn(() => hostA),
+      inspectHarness: hostA.inspectHarness,
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "claude-code"],
+      defaultAgent: "claude-code",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    await vi.waitFor(() => expect(claudeInspections).toBeGreaterThanOrEqual(2));
+    expect(testState.renderedModelViews.at(-1)).not.toMatchObject({ status: "error" });
+  });
+
+  it("reloads a same-Host empty Claude catalog on explicit refresh", async () => {
+    installFakeBrowser();
+    let claudeInspections = 0;
+    const hostA = {
+      inspectHarness: vi.fn(({ harnessId }: { harnessId: string }) => {
+        if (harnessId !== "claude-code") return Promise.resolve(readyInspection());
+        claudeInspections += 1;
+        return Promise.resolve(claudeInspections === 2 ? emptyInspection() : readyInspection());
+      }),
+      inspectThread: vi.fn(async () => ({
+        owner: "external" as const,
+        harnessId: "claude-code",
+        transportModelId:
+          "codexhost/claude-code-native@claude-model-v1.b3B1cw@bypassPermissions@auto",
+        effectiveModel: harnessModelRefSchema.parse({ id: "claude-model-v1.b3B1cw" }),
+        history: { fork: true, forkAcrossCwd: false, rollbackLastTurn: true },
+        locked: true,
+      })),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(async () => ({
+        threadId: "thread-a",
+        usage: null,
+        accountCredits: null,
+      })),
+    };
+    const local = { inspectHarness: vi.fn(async () => readyInspection()) };
+    const modelControl = {
+      currentHostId: () => "host-a",
+      clientForHost: vi.fn((hostId: string) => (hostId === "host-a" ? hostA : local)),
+      inspectHarness: local.inspectHarness,
+      inspectThread: vi.fn(),
+      inspectThreadCommands: vi.fn(async () => ({ commands: [] })),
+      inspectThreadUsage: vi.fn(),
+      subscribeThreadUsage: () => () => undefined,
+    };
+    const { installRendererBindingProbe } = await import("../src/renderer-binding-probe.js");
+    const probe = installRendererBindingProbe({
+      enabledAgents: ["codex", "claude-code"],
+      defaultAgent: "codex",
+    });
+    probe.setAdapter(
+      { state: "ready", reason: "ready", modelUpdates: 0, hook: "request-bridge" },
+      undefined,
+      undefined,
+      modelControl as never,
+    );
+
+    await vi.waitFor(() => {
+      expect(testState.renderedModelViews.at(-1)).toMatchObject({ status: "empty" });
+    });
+    expect(claudeInspections).toBe(2);
+    const preventDefault = vi.fn();
+    const stopImmediatePropagation = vi.fn();
+    testState.documentListeners.get("submit")?.({
+      target: testState.composer,
+      preventDefault,
+      stopImmediatePropagation,
+    } as unknown as Event);
+    expect(preventDefault).toHaveBeenCalledOnce();
+    expect(stopImmediatePropagation).toHaveBeenCalledOnce();
+
+    await testState.getConnectionDiagnostics?.()?.refresh();
+    await vi.waitFor(() => expect(claudeInspections).toBeGreaterThan(2));
+    const inspectionsAfterRefresh = claudeInspections;
+    await new Promise((resolve) => setTimeout(resolve, 25));
+
+    expect(claudeInspections).toBe(inspectionsAfterRefresh);
+    expect(testState.renderedModelViews.at(-1)).toMatchObject({
+      status: "ready",
+      catalog: readyInspection().catalog,
+    });
+    expect(testState.renderedModelViews).not.toContainEqual(
+      expect.objectContaining({ status: "error" }),
+    );
+  });
+});