177 lines
11 KiB
TypeScript
177 lines
11 KiB
TypeScript
import React, { act } from "react";
|
|
(globalThis as Record<string, unknown>).React = React;
|
|
import assert from "node:assert/strict";
|
|
import { afterEach, test } from "node:test";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { parseHTML } from "linkedom";
|
|
import { SetupDialog } from "../components/setup-dialog.tsx";
|
|
import { AgentSection } from "../components/settings/agent-section.tsx";
|
|
import { providerKeyLabel, classifyKeys } from "../components/settings/keys-section.tsx";
|
|
import { useModelCatalog } from "../components/model-catalog.ts";
|
|
import { notifySettingsSaved } from "../components/settings-signal.ts";
|
|
import type { ModelCatalogEntry, ModelCatalogResponse, ModelsSettings } from "../src/core/index.ts";
|
|
|
|
const dom = parseHTML("<html><body></body></html>");
|
|
Object.assign(globalThis, {
|
|
window: dom.window, document: dom.document, Element: dom.window.Element,
|
|
HTMLElement: dom.window.HTMLElement, HTMLInputElement: dom.window.HTMLInputElement,
|
|
CustomEvent: dom.window.CustomEvent, IS_REACT_ACT_ENVIRONMENT: true,
|
|
requestAnimationFrame: (callback: FrameRequestCallback) => setTimeout(() => callback(performance.now()), 0),
|
|
cancelAnimationFrame: (id: number) => clearTimeout(id),
|
|
});
|
|
Object.assign(dom.window, { innerWidth: 1280, innerHeight: 800 });
|
|
dom.window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
const originalFetch = globalThis.fetch;
|
|
let root: Root | undefined;
|
|
let host: HTMLDivElement | undefined;
|
|
let requests: ReturnType<typeof deferred<Response>>[] = [];
|
|
let writes: ModelsSettings[] = [];
|
|
let snapshot: ReturnType<typeof useModelCatalog>;
|
|
function deferred<T>() { let resolve!: (value: T) => void; const promise = new Promise<T>((done) => { resolve = done; }); return { resolve, promise }; }
|
|
const provider = { id: "fixture", envVar: "FIXTURE_KEY", label: "Fixture" };
|
|
const a: ModelCatalogEntry = { id: "vendor/model:free", name: "Model free", provider: provider.id, input: ["text", "image"], reasoning: true, supportedLevels: ["off", "low", "high"], cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }, contextWindow: 8192, maxTokens: 1024 };
|
|
const b: ModelCatalogEntry = { ...a, id: "claude-opus-5-5", name: "Claude Opus 5.5", supportedLevels: ["off", "medium"] };
|
|
function catalog(connected = true): ModelCatalogResponse {
|
|
return {
|
|
models: connected ? [a, b] : [], defaults: null,
|
|
rolePins: { researcher: null, demoBuilder: null, visualMaker: null, extractor: null, auditor: null },
|
|
slots: { strong: { model: { provider: a.provider, id: a.id }, thinkingLevel: "low" }, cheap: { model: { provider: a.provider, id: a.id }, thinkingLevel: "high" }, vision: { model: { provider: a.provider, id: a.id }, thinkingLevel: "low" } },
|
|
providers: [{ ...provider, keyPresent: connected }],
|
|
};
|
|
}
|
|
function Reader() { snapshot = useModelCatalog(); return null; }
|
|
function setup() { return <SetupDialog open onClose={() => {}} onDone={() => {}} />; }
|
|
function installFetch() {
|
|
requests = []; writes = [];
|
|
globalThis.fetch = async (input, init) => {
|
|
const path = String(input);
|
|
if (path === "/api/models") { const request = deferred<Response>(); requests.push(request); return request.promise; }
|
|
if (path === "/api/settings/models") { writes.push(JSON.parse(String(init?.body))); return Response.json({ settings: { models: writes.at(-1) } }); }
|
|
if (path === "/api/keys") return Response.json({ providers: [provider], keys: [] });
|
|
if (path === "/api/settings/prompts") return Response.json({ prober: [], teacher: [] });
|
|
if (path === "/api/search") return Response.json({ available: false, engine: null, reason: "fixture" });
|
|
throw new Error(`Unexpected request ${path}`);
|
|
};
|
|
}
|
|
async function render(children: React.ReactNode) {
|
|
if (!root) { host = document.createElement("div"); document.body.append(host); root = createRoot(host); }
|
|
await act(async () => root!.render(children));
|
|
}
|
|
async function answer(index: number, body: ModelCatalogResponse | null) { await act(async () => requests[index]!.resolve(body ? Response.json(body) : new Response("unavailable", { status: 503 }))); }
|
|
function element(testid: string) { const e = document.querySelector<HTMLElement>(`[data-testid="${testid}"]`); assert.ok(e, testid); return e; }
|
|
async function click(testid: string) { await act(async () => element(testid).click()); }
|
|
function levels() { return [...document.querySelectorAll('[data-testid^="thinking-option-"]')].map((e) => e.textContent); }
|
|
async function warm(body = catalog()) { await render(<Reader />); await answer(0, body); }
|
|
|
|
afterEach(async () => {
|
|
await act(async () => root?.unmount()); host?.remove(); root = undefined; host = undefined;
|
|
globalThis.fetch = originalFetch;
|
|
});
|
|
|
|
test("cold setup is loading, not keyless; failure/Retry does not invent a key stage", async () => {
|
|
installFetch(); await render(setup());
|
|
assert.ok(element("setup-stage-loading"));
|
|
assert.equal(document.querySelector('[data-testid="setup-stage-keys"]'), null);
|
|
await answer(0, null);
|
|
assert.ok(element("setup-catalog-error"));
|
|
assert.equal(document.querySelector('[data-testid="setup-stage-keys"]'), null);
|
|
await click("setup-retry"); assert.ok(element("setup-stage-loading"));
|
|
const empty = catalog(false); empty.slots = { strong: null, cheap: null, vision: null };
|
|
await answer(1, empty); assert.ok(element("setup-stage-keys"));
|
|
});
|
|
|
|
test("cached setup is immediately usable; fresh metadata/untouched slots update without wiping model or thinking edits; failed refresh still allows exact-ID Save", async () => {
|
|
installFetch(); await warm();
|
|
await render(<><Reader />{setup()}</>);
|
|
assert.equal(requests.length, 2);
|
|
assert.ok(element("setup-stage-pickers"));
|
|
assert.equal(document.querySelector('[data-testid="setup-stage-keys"]'), null);
|
|
assert.equal(element("setup-trigger-strong").textContent, "model:free▾");
|
|
await click("setup-trigger-strong"); await click("model-option-claude-opus-5-5");
|
|
await click("setup-thinking-strong"); await click("thinking-option-medium");
|
|
const fresh = catalog(); fresh.slots.cheap = { model: { provider: b.provider, id: b.id }, thinkingLevel: "off" };
|
|
fresh.models[1] = { ...b, supportedLevels: ["off", "medium", "high"] };
|
|
await answer(1, fresh);
|
|
assert.equal(element("setup-trigger-strong").textContent, "claude-opus-5-5▾");
|
|
assert.equal(element("setup-thinking-strong").textContent?.trim(), "medium▾");
|
|
assert.equal(element("setup-trigger-cheap").textContent, "claude-opus-5-5▾");
|
|
await click("setup-thinking-strong"); assert.deepEqual(levels(), ["off", "medium✓", "high"]);
|
|
await click("setup-thinking-strong");
|
|
await act(async () => snapshot.refresh()); await answer(2, null);
|
|
assert.ok(element("setup-catalog-error")); assert.equal(element("setup-save").hasAttribute("disabled"), false);
|
|
await click("setup-save");
|
|
assert.deepEqual(writes[0], {
|
|
strong: { model: { provider: b.provider, id: b.id }, thinkingLevel: "medium" },
|
|
cheap: { model: { provider: b.provider, id: b.id }, thinkingLevel: "off" },
|
|
vision: { model: { provider: a.provider, id: a.id }, thinkingLevel: "low" },
|
|
});
|
|
});
|
|
|
|
test("disconnect invalidates choices, not saved selections or thinking; all-disconnected setup offers Add provider", async () => {
|
|
installFetch(); await warm(); await render(<><Reader />{setup()}</>); await answer(1, catalog());
|
|
await click("setup-trigger-strong");
|
|
assert.ok(document.querySelector('[data-testid="model-option-claude-opus-5-5"]'));
|
|
await act(async () => notifySettingsSaved("keys"));
|
|
assert.equal(document.querySelector('[data-testid="model-option-claude-opus-5-5"]'), null, "stale choices disappear before the fresh request resolves");
|
|
await answer(2, catalog(false));
|
|
assert.equal(element("setup-trigger-strong").textContent, "model:free▾");
|
|
assert.equal(element("setup-thinking-strong").textContent?.trim(), "low▾");
|
|
assert.ok(element("setup-add-provider")); await click("setup-add-provider"); assert.ok(element("setup-stage-keys"));
|
|
await click("setup-thinking-strong"); await click("thinking-option-xhigh");
|
|
assert.equal(element("setup-thinking-strong").textContent?.trim(), "xhigh▾");
|
|
await click("setup-save"); assert.equal(writes[0]?.strong?.thinkingLevel, "xhigh"); assert.equal(writes[0]?.strong?.model?.id, a.id);
|
|
});
|
|
|
|
test("cold reconnect checks saved pins before choosing the key stage, and reopening gets a new draft", async () => {
|
|
installFetch(); await warm();
|
|
await act(async () => notifySettingsSaved("keys"));
|
|
const stages: Array<string | undefined> = [];
|
|
function Probe() {
|
|
const { catalog } = useModelCatalog();
|
|
React.useLayoutEffect(() => { stages.push(document.querySelector<HTMLElement>('[data-testid^="setup-stage-"]')?.dataset.testid); }, [catalog]);
|
|
return null;
|
|
}
|
|
await render(<><Reader />{setup()}<Probe /></>);
|
|
assert.ok(element("setup-stage-loading"));
|
|
await answer(1, catalog(false));
|
|
assert.deepEqual(stages, ["setup-stage-loading", "setup-stage-pickers"]);
|
|
await click("setup-thinking-strong"); await click("thinking-option-xhigh");
|
|
await render(<Reader />);
|
|
await render(<><Reader />{setup()}</>);
|
|
assert.equal(element("setup-thinking-strong").textContent?.trim(), "low▾", "a reopened draft uses saved state, not the abandoned edit");
|
|
await answer(2, catalog(false));
|
|
});
|
|
|
|
test("Agent opens with cached thinking metadata; refresh and disconnect never clear saved levels", async () => {
|
|
installFetch(); await warm();
|
|
const models: ModelsSettings = { strong: { model: { provider: a.provider, id: a.id }, thinkingLevel: "low" } };
|
|
let changed: ModelsSettings | undefined;
|
|
await render(<><Reader /><AgentSection agent={undefined} models={models} graph={undefined} compaction={undefined} onSectionChange={() => {}} onModelsChange={(next) => { changed = next; }} onCompactionChange={() => {}} /></>);
|
|
await click("slot-thinking-strong"); assert.deepEqual(levels(), ["off", "low✓", "high"]);
|
|
assert.equal(element("slot-model-strong").textContent, "model:free▾");
|
|
await answer(1, catalog());
|
|
await act(async () => notifySettingsSaved("keys")); await answer(2, catalog(false));
|
|
assert.equal(element("slot-thinking-strong").textContent, "low▾");
|
|
await click("thinking-option-xhigh"); assert.equal(changed?.strong?.thinkingLevel, "xhigh"); assert.equal(changed?.strong?.model?.id, a.id);
|
|
});
|
|
|
|
test("shared refresh fences late failure as well as late success, and Retry clears a current error", async () => {
|
|
installFetch(); await warm();
|
|
await act(async () => snapshot.refresh()); await act(async () => snapshot.refresh());
|
|
const fresh = catalog(); fresh.models = [b];
|
|
await answer(2, fresh); await answer(1, null);
|
|
assert.equal(snapshot.failed, false); assert.equal(snapshot.catalog?.models[0]?.id, b.id);
|
|
await act(async () => snapshot.refresh()); await answer(3, null);
|
|
assert.equal(snapshot.failed, true); assert.equal(snapshot.catalog?.models[0]?.id, b.id);
|
|
await act(async () => snapshot.refresh()); assert.equal(snapshot.failed, false);
|
|
await answer(4, fresh);
|
|
});
|
|
|
|
test("OpenCode's saved shared credential names both Pi providers without changing addable-provider semantics", () => {
|
|
const providers = [{ id: "opencode", envVar: "OPENCODE_API_KEY", label: "OpenCode Zen" }, { id: "opencode-go", envVar: "OPENCODE_API_KEY", label: "OpenCode Go" }];
|
|
assert.equal(providerKeyLabel("OPENCODE_API_KEY", providers), "OpenCode (Zen / Go)");
|
|
assert.equal(providerKeyLabel("OPENCODE_API_KEY", [...providers].reverse()), "OpenCode (Zen / Go)");
|
|
assert.equal(providerKeyLabel("FIXTURE_KEY", [provider]), "Fixture");
|
|
assert.equal(classifyKeys([{ id: "OPENCODE_API_KEY", info: null, present: true, masked: "…fake", source: "file", shadowedByEnv: false }], providers).addable.length, 0);
|
|
});
|