Merge pull request #19 from block/codex/repair-summon-ghost-fingerprint

[codex] Add UI sandbox model providers

Author: nahiyankhan

README.md

@@ -33,7 +33,7 @@ The public package boundary is:
 ```sh
 pnpm install
 cp apps/server/.env.example apps/server/.env
-# edit apps/server/.env and set ANTHROPIC_API_KEY
+# edit apps/server/.env and set ANTHROPIC_API_KEY, OPENAI_API_KEY, or GEMINI_API_KEY
 pnpm dev:gallery
 ```
 
@@ -114,8 +114,8 @@ registered host tools.
   `packages/sandbox-runtime`, `packages/server`, `packages/react` - private
   implementation workspaces published only through the public facades.
 - `examples/surface-gallery` - first-run live example app for OSS adopters.
-- `apps/server` - Anthropic-backed demo server, direction loading, validation
-  retry feedback, and demo backing routes.
+- `apps/server` - multi-provider demo server for Anthropic, OpenAI, and Gemini,
+  direction loading, validation retry feedback, and demo backing routes.
 - `apps/demo` - Vite maintainer workbench for generation, batch runs,
   adversarial checks, strict input, Ghost steering, diagnostics, and fatal
   sandbox testing.
@@ -169,4 +169,4 @@ pnpm eval-directions [--prompts N] [--directions id,id] [--seed N] [--dry]
 `pnpm test:safety` runs the Playwright Chromium and WebKit smoke suite for
 sandbox containment, bootstrap fatal checks, strict input, and generate-page
 boot. It starts only the Vite demo app and does not require
-`ANTHROPIC_API_KEY`.
+a model-provider API key.

apps/demo/generate.html

@@ -92,6 +92,10 @@ <h2 id="scenario-active-title">Host Data Search</h2>
 
     <section class="run-settings" aria-label="Run settings">
       <div class="settings-grid">
+        <label>
+          <span class="field-label">Provider</span>
+          <select id="model-provider" class="pill-select" title="Model provider"></select>
+        </label>
         <label>
           <span class="field-label">Direction</span>
           <select id="direction" class="pill-select" title="Design direction"></select>

apps/demo/src/capabilities.ts

@@ -56,9 +56,14 @@ const summonArgsSchema = z.object({
 type SearchResult = z.infer<typeof searchResultSchema>;
 type SummonArgs = z.infer<typeof summonArgsSchema>;
 
+function providerPayload(modelProvider: string | null | undefined): { modelProvider?: string } {
+  return modelProvider ? { modelProvider } : {};
+}
+
 export interface DemoHandlerOptions {
   onLog?: (message: string) => void;
   onError?: (message: string) => void;
+  modelProvider?: () => string | null;
   /**
    * Optional because only the single-prompt generate page owns the DOM and
    * streaming machinery needed to spawn sibling sandboxes.
@@ -220,7 +225,10 @@ export function createDemoCapabilityRegistry(
         const res = await fetch('/api/mock-search', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ query }),
+          body: JSON.stringify({
+            query,
+            ...providerPayload(opts.modelProvider?.()),
+          }),
           signal,
         });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -265,7 +273,10 @@ export function createDemoCapabilityRegistry(
         const res = await fetch('/api/ai-call', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ prompt }),
+          body: JSON.stringify({
+            prompt,
+            ...providerPayload(opts.modelProvider?.()),
+          }),
           signal,
         });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);

apps/demo/src/generate-main.ts

@@ -67,6 +67,15 @@ interface GhostRootInfo {
   defaultBaseDirectionId?: string | null;
 }
 
+interface ModelProviderInfo {
+  id: string;
+  name: string;
+  configured: boolean;
+  model: string;
+  utilityModel: string;
+  missingEnv?: string;
+}
+
 const layoutPresets = new Map<string, SummonLayout>([
   [
     'card-structured',
@@ -92,6 +101,7 @@ const scenarioActiveTitleEl = document.getElementById('scenario-active-title')!;
 const scenarioActiveDescEl = document.getElementById('scenario-active-desc')!;
 const scenarioActiveFingerprintEl = document.getElementById('scenario-active-fingerprint')!;
 const scenarioActiveGrantsEl = document.getElementById('scenario-active-grants')!;
+const modelProviderSel = document.getElementById('model-provider') as HTMLSelectElement;
 const directionSel = document.getElementById('direction') as HTMLSelectElement;
 const ghostTargetEl = document.getElementById('ghost-target') as HTMLInputElement;
 const ghostBaseDirectionSel = document.getElementById('ghost-base-direction') as HTMLSelectElement;
@@ -147,6 +157,9 @@ function readMode(): Mode {
   const checked = document.querySelector<HTMLInputElement>('input[name=mode]:checked');
   return (checked?.value as Mode) ?? 'static';
 }
+function readModelProviderId(): string | null {
+  return modelProviderSel.value || defaultModelProviderId;
+}
 function readLayout(): SummonLayout | null {
   const layout = layoutPresets.get(layoutSel.value);
   return layout ? { id: layout.id, slots: layout.slots.map((slot) => ({ ...slot })) } : null;
@@ -169,6 +182,8 @@ function logLine(cls: string, text: string) {
 
 let directions: DirectionInfo[] = [];
 let ghostRoots: GhostRootInfo[] = [];
+let modelProviders: ModelProviderInfo[] = [];
+let defaultModelProviderId: string | null = null;
 let showcaseScenarios: ShowcaseScenario[] = [...SHOWCASE_SCENARIOS];
 let currentEffectiveSurfacePlan: SurfacePlan | null = null;
 let currentShape: string | null = null;
@@ -539,6 +554,7 @@ function readActiveContract(): ActiveContract {
     ...(readTokenOverrides() ? { tokenOverrides: readTokenOverrides() } : {}),
     ...(readRepairOptions() ? { repair: readRepairOptions() } : {}),
     directionId: currentDirectionId,
+    modelProvider: readModelProviderId(),
   };
 }
 
@@ -604,9 +620,11 @@ function renderContractSummary() {
   const validation = currentValidationSummary ?? 'pending';
   const stream = currentStreamHealth ?? 'pending';
   const effective = currentEffectiveSurfacePlan ? planText(currentEffectiveSurfacePlan) : 'pending';
+  const provider = modelProviders.find((item) => item.id === active.modelProvider);
   inspectorStatusEl.textContent = currentEffectiveSurfacePlan ? 'effective' : 'pending';
   contractSummaryEl.innerHTML = '';
   const rows = [
+    ['provider', 'Model provider', provider ? `${provider.name} · ${provider.model}` : 'server default', provider ? 'neutral' : 'pending'],
     ['requested', 'Requested surface config', planText(requested), 'neutral'],
     ['effective', 'Effective safety plan', effective, currentEffectiveSurfacePlan ? 'good' : 'pending'],
     ['grants', 'Allowed host tools', `${active.capabilityNames.length}: ${hostTools}`, active.capabilityNames.length ? 'neutral' : 'pending'],
@@ -697,6 +715,38 @@ function parseAppliedTokenOverrides(value: unknown): Array<{ token: string; valu
 }
 
 async function loadDirections(): Promise<void> {
+  try {
+    const res = await fetch('/api/model-providers');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const payload = (await res.json()) as { defaultProvider?: unknown; providers?: unknown };
+    defaultModelProviderId = typeof payload.defaultProvider === 'string' ? payload.defaultProvider : null;
+    modelProviders = Array.isArray(payload.providers)
+      ? payload.providers.flatMap((provider): ModelProviderInfo[] => {
+          if (!provider || typeof provider !== 'object') return [];
+          const item = provider as Record<string, unknown>;
+          if (
+            typeof item.id !== 'string' ||
+            typeof item.name !== 'string' ||
+            typeof item.model !== 'string' ||
+            typeof item.utilityModel !== 'string'
+          ) {
+            return [];
+          }
+          return [{
+            id: item.id,
+            name: item.name,
+            configured: item.configured === true,
+            model: item.model,
+            utilityModel: item.utilityModel,
+            missingEnv: typeof item.missingEnv === 'string' ? item.missingEnv : undefined,
+          }];
+        })
+      : [];
+  } catch {
+    modelProviders = [];
+    defaultModelProviderId = null;
+  }
+
   try {
     const res = await fetch('/api/directions');
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -711,6 +761,7 @@ async function loadDirections(): Promise<void> {
   } catch {
     ghostRoots = [];
   }
+  populateModelProviderSelect();
   ghostBaseDirectionSel.innerHTML = '';
   for (const d of directions) {
     const opt = document.createElement('option');
@@ -754,6 +805,38 @@ async function loadDirections(): Promise<void> {
   updateGhostControls();
 }
 
+function populateModelProviderSelect() {
+  modelProviderSel.innerHTML = '';
+  if (modelProviders.length === 0) {
+    const opt = document.createElement('option');
+    opt.value = '';
+    opt.textContent = 'Server default';
+    modelProviderSel.appendChild(opt);
+    modelProviderSel.disabled = true;
+    return;
+  }
+
+  modelProviderSel.disabled = false;
+  for (const provider of modelProviders) {
+    const opt = document.createElement('option');
+    opt.value = provider.id;
+    opt.textContent = provider.configured
+      ? `${provider.name}`
+      : `${provider.name} (missing key)`;
+    opt.title = provider.configured
+      ? `${provider.model} for generation; ${provider.utilityModel} for utility calls`
+      : `Set ${provider.missingEnv ?? 'the provider API key'}`;
+    opt.disabled = !provider.configured;
+    modelProviderSel.appendChild(opt);
+  }
+
+  const defaultProvider = defaultModelProviderId
+    ? modelProviders.find((provider) => provider.id === defaultModelProviderId && provider.configured)
+    : null;
+  const firstConfigured = modelProviders.find((provider) => provider.configured);
+  modelProviderSel.value = defaultProvider?.id ?? firstConfigured?.id ?? '';
+}
+
 function ghostSelectionValue(rootId: string): string {
   return `ghost:${rootId}`;
 }
@@ -856,6 +939,7 @@ function respawn(
 
   if (mode === 'interactive') {
     const registry = createScopedDemoRegistry({
+      modelProvider: readModelProviderId,
       onLog: (m) => logLine('op-add', m),
       onError: (m) => logLine('op-error', m),
       // summon needs DOM access (spawns a sibling iframe) and the streaming
@@ -940,6 +1024,11 @@ directionSel.addEventListener('change', () => {
   logLine('op-meta', `direction → ${currentDirectionId ?? 'default'}`);
 });
 
+modelProviderSel.addEventListener('change', () => {
+  clearEffectiveContractSummary();
+  logLine('op-meta', `provider → ${readModelProviderId() ?? 'server default'}`);
+});
+
 ghostTargetEl.addEventListener('change', () => {
   const root = ghostRootFromSelection(currentDirectionId);
   if (!root) return;
@@ -1221,6 +1310,7 @@ function applyLineTo(target: SandboxTarget, line: ProtocolLine, context: Surface
 
 interface StreamOptions {
   prompt: string;
+  modelProvider?: string | null;
   directionId: string | null;
   layout?: SummonLayout | null;
   scriptPolicy?: ScriptPolicy;
@@ -1258,6 +1348,7 @@ async function streamGenerationInto(target: SandboxTarget, opts: StreamOptions):
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       prompt: opts.prompt,
+      ...(opts.modelProvider ? { modelProvider: opts.modelProvider } : {}),
       ...(ghostRootId
         ? {
             ghost: {
@@ -1609,6 +1700,7 @@ async function generate(prompt: string) {
   try {
     const result = await streamGenerationInto(target, {
       prompt,
+      modelProvider: active.modelProvider,
       directionId: currentDirectionId,
       layout: readLayout(),
       scriptPolicy: active.scriptPolicy,
@@ -1668,6 +1760,7 @@ async function editArtifact(instruction: string) {
   try {
     const result = await streamGenerationInto(createParentTarget(active), {
       prompt: instruction,
+      modelProvider: active.modelProvider,
       directionId: currentDirectionId,
       layout: readLayout(),
       scriptPolicy: active.scriptPolicy,
@@ -1753,6 +1846,7 @@ function summonChild(childPrompt: string, title?: string) {
     .map((intent) => intent.name)
     .filter((name) => name !== 'summon');
   const childRegistry = createScopedDemoRegistry({
+    modelProvider: readModelProviderId,
     onLog: () => {},
     onError: (m) => {
       statusEl.textContent = `error: ${m.slice(0, 40)}`;
@@ -1834,6 +1928,7 @@ function summonChild(childPrompt: string, title?: string) {
 
   void streamGenerationInto(childTarget, {
     prompt: childPrompt,
+    modelProvider: readModelProviderId(),
     directionId: currentDirectionId,
     signal: abort.signal,
   })

apps/demo/src/showcase.ts

@@ -44,6 +44,7 @@ export interface ActiveContract {
   tokenOverrides?: Record<string, string>;
   repair?: RepairOptions;
   directionId?: string | null;
+  modelProvider?: string | null;
 }
 
 export const SHOWCASE_SCENARIOS: ShowcaseScenario[] = [

apps/server/.env.example

@@ -1,4 +1,19 @@
+# Pick one configured provider for server-default generation.
+# The Generate workbench can override this per run when multiple keys are set.
+SUMMON_MODEL_PROVIDER=anthropic
+
 ANTHROPIC_API_KEY=sk-ant-...
+# OPENAI_API_KEY=sk-...
+# GEMINI_API_KEY=...
+
+# Optional model overrides.
+# ANTHROPIC_MODEL=claude-sonnet-4-6
+# ANTHROPIC_SMALL_MODEL=claude-haiku-4-5
+# OPENAI_MODEL=gpt-5
+# OPENAI_SMALL_MODEL=gpt-5-mini
+# GEMINI_MODEL=gemini-2.5-pro
+# GEMINI_SMALL_MODEL=gemini-2.5-flash
+
 PORT=3001
 
 # Optional Ghost steering roots for /generate.html.
@@ -7,12 +22,12 @@ PORT=3001
 # Legacy .ghost/fingerprint.yml roots are still bridged for compatibility.
 # SUMMON_GHOST_ROOTS=checkout=/absolute/path/to/checkout
 
-# Layer 3 — Claude Haiku capability inference. When set to "1", a small Haiku
+# Layer 3 — utility-model capability inference. When set to "1", a small model
 # call decides mode + narrows the intent pack per prompt. Falls back to the
 # regex heuristic on timeout/error. Leave unset to use regex only.
 # SUMMON_INFER_CAPABILITIES=1
 
-# Shape classifier. Default-on — a Haiku call picks one of article / card /
+# Shape classifier. Default-on — a utility-model call picks one of article / card /
 # comparison / tracker per prompt so only the matching shape exemplar ships
 # in the system prompt. Set to "0" to disable (all shape exemplars ship).
 # SUMMON_INFER_SHAPE=0