From 69f3825f81f45281797e8a5cf29c5079d4c23c9f Mon Sep 17 00:00:00 2001
From: Inzimam <hi@inhaq.com>
Date: Sun, 14 Jun 2026 11:25:58 +0000
Subject: [PATCH 1/2] Redesign New run tab + add Model settings view

- New run tab is now a minimal box: just the goal input and a Start
  run button. The selected repository shows top-right of the box and
  the writer/reviewer models in use show bottom-right.
- Move all model/runner selection and run options out of the run form
  into a dedicated Model settings tab with grouped model pickers for the
  writer (actor) and reviewer (critic) roles.
- Replace the placeholder runner-profile presets/JSON editor with a
  real model catalog grouped by the environment key that unlocks each
  provider's models.
- Secrets view now lists, per environment key, whether it is stored and
  which models it unlocks.
- Persist run settings (repo, models, options) in localStorage and build
  the engine env from them at run start.

Co-authored-by: Inzimam Ul Haq <27832433+inhaq@users.noreply.github.com>
---
 desktop/index.html      |   4 +
 desktop/src/main.ts     | 444 ++++++++++++++++++++++------------------
 desktop/src/settings.ts | 202 ++++++++++++++++++
 desktop/src/styles.css  | 100 +++++++++
 4 files changed, 552 insertions(+), 198 deletions(-)
 create mode 100644 desktop/src/settings.ts

diff --git a/desktop/index.html b/desktop/index.html
index a324904..374c56c 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -27,6 +27,10 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.7 9.7 0 0 0-6.7 2.8L3 8"/><path d="M3 4v4h4"/><path d="M12 7v5l3 2"/></svg>
             <span>Sessions</span>
           </button>
+          <button data-nav="models" class="nav-item" aria-label="Model settings">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
+            <span>Model settings</span>
+          </button>
           <button data-nav="secrets" class="nav-item" id="nav-secrets" aria-label="Secrets" hidden>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
             <span>Secrets</span>
diff --git a/desktop/src/main.ts b/desktop/src/main.ts
index e628e4c..02f717a 100644
--- a/desktop/src/main.ts
+++ b/desktop/src/main.ts
@@ -14,6 +14,15 @@ import {
   setSecret,
   startRun,
 } from "./api.js";
+import {
+  MODEL_CATALOG,
+  buildRunEnv,
+  findModel,
+  loadSettings,
+  modelLabel,
+  saveSettings,
+  type ModelChoice,
+} from "./settings.js";
 import type { RunMessage, SessionRecord, TraceResponse } from "./types.js";
 
 const view = document.getElementById("view") as HTMLElement;
@@ -57,6 +66,10 @@ const ICONS = {
   key: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
   arrow: '<path d="M9 18l6-6-6-6"/>',
   caret: '<path d="M9 18l6-6-6-6"/>',
+  repo: '<path d="M3 3h12a2 2 0 0 1 2 2v16l-8-4-8 4V5a2 2 0 0 1 2-2z" transform="translate(2 0)"/>',
+  write: '<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
+  review: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+  sliders: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
 };
 
 /** Valid POSIX-ish environment variable name (used for secret keys). */
@@ -64,7 +77,7 @@ const ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
 
 // --- navigation -------------------------------------------------------------
 
-type Nav = "start" | "sessions" | "secrets";
+type Nav = "start" | "sessions" | "models" | "secrets";
 let teardown: (() => void) | null = null;
 
 function navigate(nav: Nav, arg?: string): void {
@@ -79,6 +92,7 @@ function navigate(nav: Nav, arg?: string): void {
   view.scrollTop = 0;
   if (nav === "start") renderStart();
   else if (nav === "sessions") renderSessions();
+  else if (nav === "models") renderModels();
   else if (nav === "secrets") renderSecrets();
   void arg;
 }
@@ -93,49 +107,6 @@ function clearNavActive(): void {
 
 // --- Start view -------------------------------------------------------------
 
-interface Preset {
-  label: string;
-  json: string;
-}
-
-const PRESETS: Record<string, Preset> = {
-  openai: {
-    label: "OpenAI (gpt-4o-mini)",
-    json: JSON.stringify(
-      [{ id: "primary", kind: "http", model: "gpt-4o-mini", options: { baseUrl: "https://api.openai.com/v1", apiKeyEnv: "OPENAI_API_KEY" } }],
-      null,
-      2,
-    ),
-  },
-  anthropic: {
-    label: "Anthropic (claude-3-5-sonnet)",
-    json: JSON.stringify(
-      [{ id: "primary", kind: "http", model: "claude-3-5-sonnet-latest", options: { baseUrl: "https://api.anthropic.com/v1", apiKeyEnv: "ANTHROPIC_API_KEY" } }],
-      null,
-      2,
-    ),
-  },
-  local: {
-    label: "Local (Ollama / OpenAI-compatible)",
-    json: JSON.stringify(
-      [{ id: "primary", kind: "http", model: "llama3.1", options: { baseUrl: "http://localhost:11434/v1", apiKeyEnv: "OLLAMA_API_KEY" } }],
-      null,
-      2,
-    ),
-  },
-  split: {
-    label: "Split actor + critic",
-    json: JSON.stringify(
-      [
-        { id: "builder", kind: "http", model: "gpt-4o-mini", options: { baseUrl: "https://api.openai.com/v1", apiKeyEnv: "OPENAI_API_KEY" } },
-        { id: "reviewer", kind: "http", model: "gpt-4o", options: { baseUrl: "https://api.openai.com/v1", apiKeyEnv: "OPENAI_API_KEY" } },
-      ],
-      null,
-      2,
-    ),
-  },
-};
-
 const EXAMPLE_GOALS = [
   "Add a /healthz endpoint with a test",
   "Fix the failing auth middleware tests",
@@ -144,49 +115,40 @@ const EXAMPLE_GOALS = [
 ];
 
 function renderStart(): void {
-  const page = h("section", { class: "page" });
+  const settings = loadSettings();
+  const page = h("section", { class: "page page-run" });
 
-  // Header
   page.append(
     h("div", { class: "page-head" }, [
       h("div", { class: "eyebrow" }, ["Actor – Critic loop"]),
       h("h1", {}, ["Start a new run"]),
-      h("p", { class: "page-sub" }, [
-        "Describe a goal in plain language. Loopwright plans the work, an actor agent implements it, a critic agent reviews each change, and the loop repeats until the work is verified.",
-      ]),
     ]),
   );
 
-  // How it works
-  const steps = h("div", { class: "steps" });
-  const stepData: Array<[string, string, string, string]> = [
-    ["1", ICONS.plan, "Plan", "The goal is broken into small, independently verifiable tasks."],
-    ["2", ICONS.loop, "Build & critique", "An actor writes code; a critic reviews it. They iterate until it holds up."],
-    ["3", ICONS.verify, "Verify & integrate", "Mechanical checks run, branches merge, and results are traced end to end."],
-  ];
-  for (const [n, p, title, desc] of stepData) {
-    steps.append(
-      h("div", { class: "step", "data-n": n }, [
-        icon(p, "step-ico"),
-        h("h4", {}, [title]),
-        h("p", {}, [desc]),
-      ]),
-    );
-  }
-  page.append(steps);
+  const form = h("form", { class: "card run-box" });
 
-  // Form
-  const form = h("form", { class: "card form" });
+  // -- Top row: "Goal" label on the left, selected repo on the right.
+  const repoPill = h("button", { type: "button", class: "repo-pill", title: "Change in Model settings" }, [
+    icon(ICONS.repo),
+    h("span", {}, [settings.repo.trim() || "No repository selected"]),
+  ]);
+  repoPill.classList.toggle("unset", !settings.repo.trim());
+  repoPill.addEventListener("click", () => navigate("models"));
+
+  const topRow = h("div", { class: "run-box-top" }, [
+    h("label", { class: "label", for: "start-goal" }, ["Goal"]),
+    repoPill,
+  ]);
 
-  // -- Goal field
-  const goalField = h("div", { class: "field" });
+  // -- Goal input + example chips
   const goalArea = h("textarea", {
     id: "start-goal",
     name: "goal",
-    rows: "3",
+    rows: "4",
     placeholder: "e.g. Add a /healthz endpoint that returns 200 and write a test for it",
     required: "true",
   }) as HTMLTextAreaElement;
+
   const chips = h("div", { class: "chips" });
   for (const ex of EXAMPLE_GOALS) {
     const chip = h("button", { type: "button", class: "chip" }, [ex]);
@@ -196,152 +158,35 @@ function renderStart(): void {
     });
     chips.append(chip);
   }
-  goalField.append(
-    h("label", { class: "label", for: "start-goal" }, ["Goal"]),
-    h("div", { class: "desc" }, ["What should the agents accomplish? Be specific about the outcome you expect."]),
-    goalArea,
-    chips,
-  );
-
-  // -- Model / runner field
-  const runnerField = h("div", { class: "field" });
-  const presetSelect = h("select", { id: "start-preset", name: "preset" }) as HTMLSelectElement;
-  for (const [key, p] of Object.entries(PRESETS)) {
-    presetSelect.append(h("option", { value: key }, [p.label]));
-  }
-  const runnersArea = h("textarea", { name: "runners", rows: "10", spellcheck: "false", class: "mono", "aria-label": "Runner profiles (JSON)" }) as HTMLTextAreaElement;
-  runnersArea.value = PRESETS.openai!.json;
-
-  const advanced = h("details", { class: "advanced" });
-  const summary = h("summary", {}, [icon(ICONS.caret, "caret"), "Advanced — edit runner profiles (JSON)"]);
-  advanced.append(
-    summary,
-    h("div", { class: "advanced-body" }, [
-      runnersArea,
-      h("small", { class: "desc" }, [
-        "Maps to LOOPWRIGHT_RUNNERS. API keys are referenced by env var name (apiKeyEnv) and resolved from secure storage — never pasted here.",
-      ]),
-    ]),
-  );
 
-  presetSelect.addEventListener("change", () => {
-    const p = PRESETS[presetSelect.value];
-    if (p) {
-      runnersArea.value = p.json;
-      syncRunnerIds();
-    }
-  });
-
-  runnerField.append(
-    h("label", { class: "label", for: "start-preset" }, ["Model provider"]),
-    h("div", { class: "desc" }, ["Pick a preset to get started, or open Advanced to define your own runner profiles."]),
-    presetSelect,
-    advanced,
-  );
+  // -- Bottom row: run button on the left, the two models in use on the right.
+  const submit = h("button", { type: "submit", class: "primary" }, [icon(ICONS.rocket), "Start run"]);
 
-  // -- Roles
-  const rolesGrid = h("div", { class: "field-grid" });
-  const actorInput = h("input", { type: "text", name: "actor", value: "primary", list: "runner-ids" }) as HTMLInputElement;
-  const criticInput = h("input", { type: "text", name: "critic", value: "primary", list: "runner-ids" }) as HTMLInputElement;
-  const idDatalist = h("datalist", { id: "runner-ids" });
-  rolesGrid.append(
-    h("label", { class: "inline-label" }, ["Actor runner", h("span", { class: "desc" }, ["Writes the code"]), actorInput]),
-    h("label", { class: "inline-label" }, ["Critic runner", h("span", { class: "desc" }, ["Reviews the code"]), criticInput]),
-    idDatalist,
-  );
-  const rolesField = h("div", { class: "field" }, [
-    h("div", { class: "label" }, ["Roles"]),
-    h("div", { class: "desc" }, ["Which runner profile plays each role. They can be the same."]),
-    rolesGrid,
+  const models = h("button", { type: "button", class: "run-models", title: "Change in Model settings" }, [
+    h("span", { class: "run-model" }, [icon(ICONS.write, "rm-ico"), h("span", { class: "rm-role" }, ["Writes"]), h("span", { class: "rm-name" }, [modelLabel(settings.writer)])]),
+    h("span", { class: "run-model" }, [icon(ICONS.review, "rm-ico"), h("span", { class: "rm-role" }, ["Reviews"]), h("span", { class: "rm-name" }, [modelLabel(settings.reviewer)])]),
   ]);
+  models.addEventListener("click", () => navigate("models"));
 
-  function syncRunnerIds(): void {
-    idDatalist.innerHTML = "";
-    try {
-      const arr = JSON.parse(runnersArea.value) as Array<{ id?: string }>;
-      const ids = arr.map((r) => r.id).filter((x): x is string => typeof x === "string");
-      for (const id of ids) idDatalist.append(h("option", { value: id }));
-      // If current actor/critic aren't valid ids, point them at the first one.
-      if (ids[0] && !ids.includes(actorInput.value)) actorInput.value = ids[0];
-      if (ids[0] && !ids.includes(criticInput.value)) criticInput.value = ids[0];
-    } catch {
-      /* invalid JSON — leave inputs as-is, validated on submit */
-    }
-  }
-  runnersArea.addEventListener("input", syncRunnerIds);
-  syncRunnerIds();
-
-  // -- Options
-  const optionsField = h("div", { class: "field" });
-  const options = h("div", { class: "options" });
-
-  function optionRow(name: string, title: string, desc: string, checked: boolean): HTMLElement {
-    const input = h("input", { type: "checkbox", name, "aria-label": title }) as HTMLInputElement;
-    if (checked) input.checked = true;
-    return h("div", { class: "option" }, [
-      h("div", { class: "option-text" }, [h("strong", {}, [title]), h("span", {}, [desc])]),
-      h("label", { class: "switch" }, [input, h("span", { class: "track" })]),
-    ]);
-  }
-
-  // Max parallel stepper
-  const parallelInput = h("input", { type: "number", name: "maxParallel", min: "1", value: "2", "aria-label": "Max parallel tasks" }) as HTMLInputElement;
-  const dec = h("button", { type: "button", "aria-label": "decrease" }, [icon("<path d='M5 12h14'/>")]);
-  const inc = h("button", { type: "button", "aria-label": "increase" }, [icon("<path d='M12 5v14'/><path d='M5 12h14'/>")]);
-  dec.addEventListener("click", () => { parallelInput.value = String(Math.max(1, Number(parallelInput.value || "1") - 1)); });
-  inc.addEventListener("click", () => { parallelInput.value = String(Number(parallelInput.value || "1") + 1); });
-  const stepper = h("div", { class: "stepper" }, [parallelInput, h("div", { class: "steps-btns" }, [inc, dec])]);
-
-  options.append(
-    h("div", { class: "option" }, [
-      h("div", { class: "option-text" }, [h("strong", {}, ["Max parallel tasks"]), h("span", {}, ["How many tasks run at the same time."])]),
-      stepper,
-    ]),
-    optionRow("worktrees", "Use git worktrees", "Isolate each task in its own worktree so parallel work never collides.", false),
-    optionRow("gate", "Mechanical gate", "Run build / test / lint checks before the critic reviews each change.", true),
-  );
-  optionsField.append(h("div", { class: "label" }, ["Options"]), options);
+  const bottomRow = h("div", { class: "run-box-bottom" }, [submit, models]);
 
-  // -- Submit
   const hint = h("span", { class: "hint", id: "start-hint" });
-  const submit = h("button", { type: "submit", class: "primary" }, [icon(ICONS.rocket), "Start run"]);
-  const actions = h("div", { class: "actions" }, [submit, hint]);
 
-  form.append(goalField, runnerField, rolesField, optionsField, actions);
+  form.append(topRow, goalArea, chips, bottomRow, hint);
 
   form.addEventListener("submit", async (e) => {
     e.preventDefault();
-    const data = new FormData(form);
-    const goal = String(data.get("goal") ?? "").trim();
+    const goal = goalArea.value.trim();
     if (!goal) {
       goalArea.focus();
       return;
     }
 
-    const env: Record<string, string> = {
-      LOOPWRIGHT_RUNNERS: String(data.get("runners") ?? "").trim(),
-      LOOPWRIGHT_ACTOR_RUNNER: String(data.get("actor") ?? "").trim(),
-      LOOPWRIGHT_CRITIC_RUNNER: String(data.get("critic") ?? "").trim(),
-      LOOPWRIGHT_MAX_PARALLEL: String(data.get("maxParallel") ?? "2"),
-      LOOPWRIGHT_USE_WORKTREES: data.get("worktrees") ? "true" : "false",
-      LOOPWRIGHT_MECHANICAL_GATE: data.get("gate") ? "true" : "false",
-    };
-
-    try {
-      // Validate JSON early so the user gets a clear message, not a 400.
-      if (env.LOOPWRIGHT_RUNNERS) JSON.parse(env.LOOPWRIGHT_RUNNERS);
-    } catch (err) {
-      advanced.setAttribute("open", "true");
-      hint.textContent = `Runner profiles must be valid JSON: ${(err as Error).message}`;
-      hint.className = "hint error";
-      return;
-    }
-
     hint.textContent = "Starting…";
     hint.className = "hint";
     submit.setAttribute("disabled", "true");
     try {
-      const sessionId = await startRun({ goal, env });
+      const sessionId = await startRun({ goal, env: buildRunEnv(settings) });
       renderMonitor(sessionId, goal);
     } catch (err) {
       submit.removeAttribute("disabled");
@@ -354,6 +199,183 @@ function renderStart(): void {
   view.append(page);
 }
 
+// --- Model settings view ----------------------------------------------------
+
+async function renderModels(): Promise<void> {
+  const settings = loadSettings();
+  const page = h("section", { class: "page" });
+  page.append(
+    h("div", { class: "page-head" }, [
+      h("h1", {}, ["Model settings"]),
+      h("p", { class: "page-sub" }, [
+        "Choose which model writes the code and which reviews it, pick the repository to work in, and tune how runs execute. These apply to every new run.",
+      ]),
+    ]),
+  );
+  view.append(page);
+
+  // Which provider keys are stored locally (Tauri keychain). In the browser we
+  // can't see them — keys live in the engine's environment — so we don't gate.
+  let storedKeys = new Set<string>();
+  let knowKeys = false;
+  if (isTauri()) {
+    try {
+      storedKeys = new Set(await listSecretKeys());
+      knowKeys = true;
+    } catch {
+      /* fall back to "unknown" — show everything as selectable */
+    }
+  }
+
+  const persist = (): void => saveSettings(settings);
+
+  /**
+   * Builds a grouped <select> of every catalog model. Models whose API key
+   * isn't stored are still listed but flagged, so the choice is informed.
+   */
+  function modelSelect(role: "writer" | "reviewer", onChange: () => void): HTMLSelectElement {
+    const current = settings[role];
+    const select = h("select", { "aria-label": `${role} model` }) as HTMLSelectElement;
+    for (const provider of MODEL_CATALOG) {
+      const missing = knowKeys && !storedKeys.has(provider.apiKeyEnv);
+      const group = h("optgroup", { label: missing ? `${provider.label} (add ${provider.apiKeyEnv})` : provider.label }) as HTMLOptGroupElement;
+      for (const m of provider.models) {
+        const value = `${provider.id}::${m.id}`;
+        const opt = h("option", { value }, [m.label]) as HTMLOptionElement;
+        if (current.provider === provider.id && current.model === m.id) opt.selected = true;
+        group.append(opt);
+      }
+      select.append(group);
+    }
+    select.addEventListener("change", () => {
+      const [provider, model] = select.value.split("::");
+      settings[role] = { provider: provider!, model: model! } as ModelChoice;
+      persist();
+      onChange();
+    });
+    return select;
+  }
+
+  // -- Repository
+  const repoInput = h("input", {
+    type: "text",
+    value: settings.repo,
+    placeholder: "e.g. acme/web-app",
+    "aria-label": "Repository",
+  }) as HTMLInputElement;
+  repoInput.addEventListener("input", () => {
+    settings.repo = repoInput.value;
+    persist();
+  });
+  const repoCard = h("div", { class: "card" }, [
+    h("h3", {}, ["Repository"]),
+    h("div", { class: "field" }, [
+      h("div", { class: "desc" }, ["The repository this run works in. Shown on the New run box so you always know where the agents are operating."]),
+      repoInput,
+    ]),
+  ]);
+
+  // -- Models (writer + reviewer)
+  const writerNote = h("div", { class: "model-note" });
+  const reviewerNote = h("div", { class: "model-note" });
+
+  function keyHint(choice: ModelChoice): HTMLElement {
+    const found = findModel(choice);
+    const note = h("div", { class: "model-note" });
+    if (!found) return note;
+    if (knowKeys && !storedKeys.has(found.provider.apiKeyEnv)) {
+      note.classList.add("warn");
+      const link = h("button", { type: "button", class: "linklike" }, [`Add ${found.provider.apiKeyEnv}`]);
+      link.addEventListener("click", () => navigate("secrets"));
+      note.append(h("span", {}, [`No key stored for ${found.provider.label}. `]), link);
+    } else {
+      note.append(h("span", {}, [`Uses ${found.provider.apiKeyEnv} · ${found.model.id}`]));
+    }
+    return note;
+  }
+
+  const writerSelect = modelSelect("writer", () => {
+    refreshNote(writerNote, settings.writer);
+  });
+  const reviewerSelect = modelSelect("reviewer", () => {
+    refreshNote(reviewerNote, settings.reviewer);
+  });
+
+  function refreshNote(target: HTMLElement, choice: ModelChoice): void {
+    const fresh = keyHint(choice);
+    target.className = fresh.className;
+    target.innerHTML = fresh.innerHTML;
+    // Re-bind the "Add key" button if present (innerHTML drops listeners).
+    const btn = target.querySelector("button.linklike");
+    if (btn) btn.addEventListener("click", () => navigate("secrets"));
+  }
+  refreshNote(writerNote, settings.writer);
+  refreshNote(reviewerNote, settings.reviewer);
+
+  const modelsCard = h("div", { class: "card" }, [
+    h("h3", {}, ["Models"]),
+    h("div", { class: "model-grid" }, [
+      h("div", { class: "model-pick" }, [
+        h("label", { class: "model-pick-head" }, [icon(ICONS.write, "mp-ico"), "Writer", h("span", { class: "desc" }, ["Writes the code"])]),
+        writerSelect,
+        writerNote,
+      ]),
+      h("div", { class: "model-pick" }, [
+        h("label", { class: "model-pick-head" }, [icon(ICONS.review, "mp-ico"), "Reviewer", h("span", { class: "desc" }, ["Reviews the code"])]),
+        reviewerSelect,
+        reviewerNote,
+      ]),
+    ]),
+    h("div", { class: "desc keys-hint" }, [
+      isTauri()
+        ? "Models are unlocked by the API keys you store under Secrets."
+        : "Models are unlocked by the API keys provided in the engine's environment.",
+    ]),
+  ]);
+
+  // -- Run options
+  const optionsCard = h("div", { class: "card" }, [h("h3", {}, ["Run options"])]);
+  const options = h("div", { class: "options" });
+
+  const parallelInput = h("input", { type: "number", min: "1", value: String(settings.maxParallel), "aria-label": "Max parallel tasks" }) as HTMLInputElement;
+  const dec = h("button", { type: "button", "aria-label": "decrease" }, [icon("<path d='M5 12h14'/>")]);
+  const inc = h("button", { type: "button", "aria-label": "increase" }, [icon("<path d='M12 5v14'/><path d='M5 12h14'/>")]);
+  const commitParallel = (): void => {
+    settings.maxParallel = Math.max(1, Number(parallelInput.value || "1"));
+    parallelInput.value = String(settings.maxParallel);
+    persist();
+  };
+  dec.addEventListener("click", () => { parallelInput.value = String(Math.max(1, Number(parallelInput.value || "1") - 1)); commitParallel(); });
+  inc.addEventListener("click", () => { parallelInput.value = String(Number(parallelInput.value || "1") + 1); commitParallel(); });
+  parallelInput.addEventListener("change", commitParallel);
+  const stepper = h("div", { class: "stepper" }, [parallelInput, h("div", { class: "steps-btns" }, [inc, dec])]);
+
+  function optionRow(title: string, desc: string, key: "worktrees" | "mechanicalGate"): HTMLElement {
+    const input = h("input", { type: "checkbox", "aria-label": title }) as HTMLInputElement;
+    if (settings[key]) input.checked = true;
+    input.addEventListener("change", () => {
+      settings[key] = input.checked;
+      persist();
+    });
+    return h("div", { class: "option" }, [
+      h("div", { class: "option-text" }, [h("strong", {}, [title]), h("span", {}, [desc])]),
+      h("label", { class: "switch" }, [input, h("span", { class: "track" })]),
+    ]);
+  }
+
+  options.append(
+    h("div", { class: "option" }, [
+      h("div", { class: "option-text" }, [h("strong", {}, ["Max parallel tasks"]), h("span", {}, ["How many tasks run at the same time."])]),
+      stepper,
+    ]),
+    optionRow("Use git worktrees", "Isolate each task in its own worktree so parallel work never collides.", "worktrees"),
+    optionRow("Mechanical gate", "Run build / test / lint checks before the critic reviews each change.", "mechanicalGate"),
+  );
+  optionsCard.append(options);
+
+  page.append(repoCard, modelsCard, optionsCard);
+}
+
 // --- Monitor view -----------------------------------------------------------
 
 function renderMonitor(sessionId: string, goal: string): void {
@@ -751,6 +773,31 @@ async function renderSecrets(): Promise<void> {
   const listEl = h("ul", { class: "secret-list" });
   card.append(h("h3", {}, ["Stored keys"]), listEl);
 
+  // Models-by-key: makes it explicit which models each environment key unlocks,
+  // so the user can see exactly what a key buys them before (or after) adding it.
+  const catalogCard = h("div", { class: "card" }, [h("h3", {}, ["Models by environment key"])]);
+  const catalogList = h("div", { class: "key-catalog" });
+  catalogCard.append(catalogList);
+
+  function renderCatalog(stored: Set<string>): void {
+    catalogList.innerHTML = "";
+    for (const provider of MODEL_CATALOG) {
+      const has = stored.has(provider.apiKeyEnv);
+      const head = h("div", { class: "key-cat-head" }, [
+        icon(ICONS.key, "key-cat-ico"),
+        h("code", {}, [provider.apiKeyEnv]),
+        h("span", { class: "key-cat-prov" }, [provider.label]),
+        h("span", { class: `key-cat-status ${has ? "on" : "off"}` }, [has ? "stored" : "not stored"]),
+      ]);
+      const models = h("div", { class: "key-cat-models" });
+      for (const m of provider.models) {
+        models.append(h("span", { class: "model-tag" }, [m.label]));
+      }
+      catalogList.append(h("div", { class: `key-cat${has ? " on" : ""}` }, [head, models]));
+    }
+  }
+  page.append(catalogCard);
+
   // Stored secrets are injected into the engine only at (re)start, so changing
   // them requires a restart to take effect. Make that gate explicit rather than
   // silently leaving the running engine on stale values.
@@ -774,6 +821,7 @@ async function renderSecrets(): Promise<void> {
       return;
     }
     formError.hidden = true;
+    renderCatalog(new Set(keys));
     if (!keys.length) listEl.append(h("li", { class: "hint" }, ["No secrets stored yet."]));
     for (const k of keys) {
       const del = h("button", { class: "danger small" }, ["Delete"]);
diff --git a/desktop/src/settings.ts b/desktop/src/settings.ts
new file mode 100644
index 0000000..60a3a91
--- /dev/null
+++ b/desktop/src/settings.ts
@@ -0,0 +1,202 @@
+/**
+ * Run settings + the model catalog.
+ *
+ * The engine itself is vendor-neutral: a run is configured purely by env vars
+ * (LOOPWRIGHT_RUNNERS + role bindings). This module is the UI-side source of
+ * truth that turns a friendly "which model writes / which model reviews"
+ * choice into those env vars, and remembers the user's choice between runs.
+ *
+ * Models are grouped by the *environment key* (API key env var) that unlocks
+ * them, so the Secrets view can show exactly what each key enables and the
+ * Model-settings view can offer only models the user can actually run.
+ */
+
+export interface CatalogModel {
+  /** model id sent to the provider (the runner profile's `model`) */
+  id: string;
+  /** human label shown in the UI */
+  label: string;
+}
+
+export interface Provider {
+  /** stable provider id, e.g. "openai" */
+  id: string;
+  /** display name, e.g. "OpenAI" */
+  label: string;
+  /** OpenAI-compatible base URL the HttpRunner targets */
+  baseUrl: string;
+  /** env var name that holds this provider's API key */
+  apiKeyEnv: string;
+  /** models this key unlocks */
+  models: CatalogModel[];
+}
+
+/**
+ * Real providers and models, keyed by the environment variable that holds the
+ * API key. No placeholder/demo entries: every model here is something a user
+ * can actually run once the matching key is stored.
+ */
+export const MODEL_CATALOG: Provider[] = [
+  {
+    id: "openai",
+    label: "OpenAI",
+    baseUrl: "https://api.openai.com/v1",
+    apiKeyEnv: "OPENAI_API_KEY",
+    models: [
+      { id: "gpt-4o", label: "GPT-4o" },
+      { id: "gpt-4o-mini", label: "GPT-4o mini" },
+      { id: "gpt-4.1", label: "GPT-4.1" },
+      { id: "gpt-4.1-mini", label: "GPT-4.1 mini" },
+      { id: "o3", label: "o3" },
+      { id: "o4-mini", label: "o4-mini" },
+    ],
+  },
+  {
+    id: "anthropic",
+    label: "Anthropic",
+    baseUrl: "https://api.anthropic.com/v1",
+    apiKeyEnv: "ANTHROPIC_API_KEY",
+    models: [
+      { id: "claude-3-7-sonnet-latest", label: "Claude 3.7 Sonnet" },
+      { id: "claude-3-5-sonnet-latest", label: "Claude 3.5 Sonnet" },
+      { id: "claude-3-5-haiku-latest", label: "Claude 3.5 Haiku" },
+    ],
+  },
+  {
+    id: "google",
+    label: "Google",
+    baseUrl: "https://generativelanguage.googleapis.com/v1beta/openai",
+    apiKeyEnv: "GEMINI_API_KEY",
+    models: [
+      { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+      { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+      { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+    ],
+  },
+];
+
+/** A concrete model choice: which provider + which model id. */
+export interface ModelChoice {
+  provider: string;
+  model: string;
+}
+
+export interface RunSettings {
+  /** label of the repository the run targets (shown on the New run box) */
+  repo: string;
+  /** model that writes the code (actor role) */
+  writer: ModelChoice;
+  /** model that reviews the code (critic role) */
+  reviewer: ModelChoice;
+  /** how many tasks run at once */
+  maxParallel: number;
+  /** isolate each task in its own git worktree */
+  worktrees: boolean;
+  /** run build/test/lint before the critic reviews */
+  mechanicalGate: boolean;
+}
+
+const STORAGE_KEY = "loopwright.runSettings.v1";
+
+/** First provider that has at least one model — the baseline for defaults. */
+const firstProvider = MODEL_CATALOG[0]!;
+
+export const DEFAULT_SETTINGS: RunSettings = {
+  repo: "",
+  writer: { provider: firstProvider.id, model: "gpt-4o-mini" },
+  reviewer: { provider: firstProvider.id, model: "gpt-4o" },
+  maxParallel: 2,
+  worktrees: true,
+  mechanicalGate: true,
+};
+
+export function getProvider(id: string): Provider | undefined {
+  return MODEL_CATALOG.find((p) => p.id === id);
+}
+
+export function findModel(choice: ModelChoice): { provider: Provider; model: CatalogModel } | undefined {
+  const provider = getProvider(choice.provider);
+  if (!provider) return undefined;
+  const model = provider.models.find((m) => m.id === choice.model);
+  if (!model) return undefined;
+  return { provider, model };
+}
+
+/** Friendly one-line label for a model choice, e.g. "GPT-4o mini · OpenAI". */
+export function describeChoice(choice: ModelChoice): string {
+  const found = findModel(choice);
+  if (!found) return choice.model || "Not selected";
+  return `${found.model.label} · ${found.provider.label}`;
+}
+
+/** Just the model label, e.g. "GPT-4o mini" (falls back to the raw id). */
+export function modelLabel(choice: ModelChoice): string {
+  return findModel(choice)?.model.label ?? choice.model ?? "—";
+}
+
+/** Loads saved settings, falling back to defaults and tolerating bad/legacy data. */
+export function loadSettings(): RunSettings {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_SETTINGS };
+    const parsed = JSON.parse(raw) as Partial<RunSettings>;
+    const merged: RunSettings = {
+      ...DEFAULT_SETTINGS,
+      ...parsed,
+      writer: { ...DEFAULT_SETTINGS.writer, ...(parsed.writer ?? {}) },
+      reviewer: { ...DEFAULT_SETTINGS.reviewer, ...(parsed.reviewer ?? {}) },
+    };
+    // Drop selections that no longer exist in the catalog so the UI never shows
+    // a stale/removed model as active.
+    if (!findModel(merged.writer)) merged.writer = { ...DEFAULT_SETTINGS.writer };
+    if (!findModel(merged.reviewer)) merged.reviewer = { ...DEFAULT_SETTINGS.reviewer };
+    return merged;
+  } catch {
+    return { ...DEFAULT_SETTINGS };
+  }
+}
+
+export function saveSettings(settings: RunSettings): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+    /* storage unavailable (private mode / quota) — settings stay in-memory */
+  }
+}
+
+/** A runner profile as accepted by LOOPWRIGHT_RUNNERS. */
+interface RunnerProfile {
+  id: string;
+  kind: "http";
+  model: string;
+  options: { baseUrl: string; apiKeyEnv: string };
+}
+
+function profileFor(id: string, choice: ModelChoice): RunnerProfile {
+  const provider = getProvider(choice.provider) ?? firstProvider;
+  return {
+    id,
+    kind: "http",
+    model: choice.model,
+    options: { baseUrl: provider.baseUrl, apiKeyEnv: provider.apiKeyEnv },
+  };
+}
+
+/**
+ * Translates the saved settings into the LOOPWRIGHT_* env the engine expects.
+ * The writer backs the actor role, the reviewer backs the critic role.
+ */
+export function buildRunEnv(settings: RunSettings): Record<string, string> {
+  const runners: RunnerProfile[] = [
+    profileFor("writer", settings.writer),
+    profileFor("reviewer", settings.reviewer),
+  ];
+  return {
+    LOOPWRIGHT_RUNNERS: JSON.stringify(runners),
+    LOOPWRIGHT_ACTOR_RUNNER: "writer",
+    LOOPWRIGHT_CRITIC_RUNNER: "reviewer",
+    LOOPWRIGHT_MAX_PARALLEL: String(settings.maxParallel),
+    LOOPWRIGHT_USE_WORKTREES: settings.worktrees ? "true" : "false",
+    LOOPWRIGHT_MECHANICAL_GATE: settings.mechanicalGate ? "true" : "false",
+  };
+}
diff --git a/desktop/src/styles.css b/desktop/src/styles.css
index f77a63e..9861347 100644
--- a/desktop/src/styles.css
+++ b/desktop/src/styles.css
@@ -608,6 +608,104 @@ button.linkish:hover .s-arrow { color: var(--accent); }
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
+/* ===========================================================================
+   New run — minimal box
+   =========================================================================== */
+.page-run { max-width: 680px; }
+.run-box { display: flex; flex-direction: column; gap: 14px; }
+
+.run-box-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.run-box-top .label { font-size: 13px; font-weight: 600; color: var(--text); }
+
+.repo-pill {
+  display: inline-flex; align-items: center; gap: 7px;
+  max-width: 60%;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit; font-size: 12.5px; font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
+}
+.repo-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.repo-pill svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
+.repo-pill:hover { border-color: var(--accent); background: var(--accent-soft); }
+.repo-pill.unset { color: var(--muted); border-style: dashed; }
+.repo-pill.unset svg { color: var(--faint); }
+
+.run-box textarea { min-height: 96px; }
+
+.run-box-bottom {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 14px; flex-wrap: wrap;
+}
+
+.run-models {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: transparent; border: none; cursor: pointer;
+  padding: 4px 6px; border-radius: var(--r-sm);
+  font: inherit;
+  transition: background 0.14s ease;
+}
+.run-models:hover { background: var(--surface); }
+.run-model {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-pill);
+  background: var(--panel-2);
+}
+.run-model + .run-model { margin-left: 2px; }
+.run-model svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
+.run-model .rm-role { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
+.run-model .rm-name { font-size: 12px; font-weight: 600; color: var(--text); }
+
+/* ===========================================================================
+   Model settings — pickers
+   =========================================================================== */
+.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+.model-pick { display: flex; flex-direction: column; gap: 8px; }
+.model-pick-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
+.model-pick-head svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
+.model-pick-head .desc { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
+
+.model-note { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.model-note.warn { color: var(--yellow); }
+.linklike { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; }
+.linklike:hover { color: var(--accent-strong); }
+.keys-hint { margin-top: 14px; }
+
+/* ===========================================================================
+   Secrets — models by environment key
+   =========================================================================== */
+.key-catalog { display: flex; flex-direction: column; gap: 10px; }
+.key-cat {
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  padding: 12px 14px;
+  display: flex; flex-direction: column; gap: 9px;
+}
+.key-cat.on { border-color: rgba(70, 196, 106, 0.3); }
+.key-cat-head { display: flex; align-items: center; gap: 9px; }
+.key-cat-head .key-cat-ico svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
+.key-cat-head code { font-family: var(--mono); font-size: 13px; color: var(--text); }
+.key-cat-prov { font-size: 12.5px; color: var(--muted); }
+.key-cat-status {
+  margin-left: auto; font-size: 11px; font-weight: 600;
+  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--border);
+}
+.key-cat-status.on { color: var(--green); border-color: rgba(70, 196, 106, 0.4); background: var(--green-soft); }
+.key-cat-status.off { color: var(--faint); background: var(--panel-2); }
+.key-cat-models { display: flex; flex-wrap: wrap; gap: 6px; }
+.model-tag {
+  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
+  background: var(--panel-2); border: 1px solid var(--border-soft);
+  border-radius: var(--r-pill); padding: 3px 9px;
+}
+
 /* ===========================================================================
    Responsive
    =========================================================================== */
@@ -626,5 +724,7 @@ button.linkish:hover .s-arrow { color: var(--accent); }
   .sidebar-footer { margin: 0 0 0 auto; padding: 0; }
   .steps { grid-template-columns: 1fr; }
   .field-grid, .secret-form { grid-template-columns: 1fr; }
+  .model-grid { grid-template-columns: 1fr; }
+  .repo-pill { max-width: 50%; }
   .page { padding: 24px 18px 60px; }
 }

From 101730af4bf5da9085f0e5e8ae49909b08177bc2 Mon Sep 17 00:00:00 2001
From: Inzimam <hi@inhaq.com>
Date: Sun, 14 Jun 2026 14:07:34 +0000
Subject: [PATCH 2/2] Harden persisted run settings against invalid values

Addresses CodeRabbit review feedback on PR #15:
- loadSettings(): coerce persisted scalars (repo, maxParallel, worktrees,
  mechanicalGate, publishing flags, advanced fields) to their expected types,
  falling back to defaults. Tampered/legacy localStorage can no longer flow
  bad values (e.g. maxParallel "abc", worktrees null) into buildRunEnv() and
  break run startup.
- commitParallel(): guard the parsed number with Number.isFinite so a NaN can
  never be persisted or emitted into LOOPWRIGHT_MAX_PARALLEL.
---
 desktop/src/main.ts     |  3 ++-
 desktop/src/settings.ts | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/desktop/src/main.ts b/desktop/src/main.ts
index 6ba63be..20a5a4d 100644
--- a/desktop/src/main.ts
+++ b/desktop/src/main.ts
@@ -590,7 +590,8 @@ async function renderModels(): Promise<void> {
   const dec = h("button", { type: "button", "aria-label": "decrease" }, [icon("<path d='M5 12h14'/>")]);
   const inc = h("button", { type: "button", "aria-label": "increase" }, [icon("<path d='M12 5v14'/><path d='M5 12h14'/>")]);
   const commitParallel = (): void => {
-    settings.maxParallel = Math.max(1, Number(parallelInput.value || "1"));
+    const parsed = Number(parallelInput.value);
+    settings.maxParallel = Number.isFinite(parsed) ? Math.max(1, Math.floor(parsed)) : 1;
     parallelInput.value = String(settings.maxParallel);
     persist();
   };
diff --git a/desktop/src/settings.ts b/desktop/src/settings.ts
index 108929b..7f1c2d6 100644
--- a/desktop/src/settings.ts
+++ b/desktop/src/settings.ts
@@ -223,6 +223,31 @@ export function loadSettings(): RunSettings {
       writer: { ...DEFAULT_SETTINGS.writer, ...(parsed.writer ?? {}) },
       reviewer: { ...DEFAULT_SETTINGS.reviewer, ...(parsed.reviewer ?? {}) },
     };
+    // Coerce persisted scalars: tampered or legacy localStorage could hold the
+    // wrong type (e.g. maxParallel "abc", worktrees null), which would otherwise
+    // flow into buildRunEnv() and fail run startup with invalid config.
+    const str = (v: unknown, d: string): string => (typeof v === "string" ? v : d);
+    const bool = (v: unknown, d: boolean): boolean => (typeof v === "boolean" ? v : d);
+    merged.repo = str(merged.repo, DEFAULT_SETTINGS.repo);
+    merged.maxParallel =
+      Number.isFinite(merged.maxParallel) && merged.maxParallel >= 1
+        ? Math.floor(merged.maxParallel)
+        : DEFAULT_SETTINGS.maxParallel;
+    merged.worktrees = bool(merged.worktrees, DEFAULT_SETTINGS.worktrees);
+    merged.mechanicalGate = bool(merged.mechanicalGate, DEFAULT_SETTINGS.mechanicalGate);
+    merged.branchPrefix = str(merged.branchPrefix, DEFAULT_SETTINGS.branchPrefix);
+    merged.dryRun = bool(merged.dryRun, DEFAULT_SETTINGS.dryRun);
+    merged.pushToRemote = bool(merged.pushToRemote, DEFAULT_SETTINGS.pushToRemote);
+    merged.remote = str(merged.remote, DEFAULT_SETTINGS.remote);
+    merged.pushBranch = str(merged.pushBranch, DEFAULT_SETTINGS.pushBranch);
+    merged.openPr = bool(merged.openPr, DEFAULT_SETTINGS.openPr);
+    merged.prBase = str(merged.prBase, DEFAULT_SETTINGS.prBase);
+    merged.prTitle = str(merged.prTitle, DEFAULT_SETTINGS.prTitle);
+    merged.prDraft = bool(merged.prDraft, DEFAULT_SETTINGS.prDraft);
+    merged.pushOverride = bool(merged.pushOverride, DEFAULT_SETTINGS.pushOverride);
+    merged.advancedRunners = str(merged.advancedRunners, DEFAULT_SETTINGS.advancedRunners);
+    merged.advancedActor = str(merged.advancedActor, DEFAULT_SETTINGS.advancedActor);
+    merged.advancedCritic = str(merged.advancedCritic, DEFAULT_SETTINGS.advancedCritic);
     // Drop selections that no longer exist in the catalog so the UI never shows
     // a stale/removed model as active.
     if (!findModel(merged.writer)) merged.writer = { ...DEFAULT_SETTINGS.writer };