chore(dev-harness): overflow seed, deepseek AI toggle, generic LLM CORS proxy

aksOps · claude · aksOps · commit 40786b8defa9 · 2026-06-19T02:05:45.000Z
Dev-only (e2e/harness, not published): ?seed=N seeds varied issues for overflow/preview testing, ?ai=1 enables AI with the dev proxy injecting the local Ollama key, and a same-origin /llmx/<host> proxy makes any OpenAI-compatible provider reachable from the browser dev preview. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RVxYQbH2FUj7AHZ4RCSdTA
diff --git a/e2e/harness/dev-main.tsx b/e2e/harness/dev-main.tsx
@@ -3,21 +3,74 @@ import { installFetchMock } from "./devmock";
 import { Tracker } from "../../src/index";
 import { createTokenStore } from "../../src/auth/tokenStore";
 
-// Interactive dev launch: mock GitLab in the browser and seed a token so the
-// app boots straight to a populated board. Sign-out still works (it returns to
-// the connect screen; re-entering any token re-enters via the mocked /user).
+// Interactive dev launch. Mode is chosen by URL query:
+//
+//   (default) LIVE — talk to a real GitLab. instanceUrl defaults to
+//     https://gitlab.com (override with ?instance=https://gitlab.example).
+//     personalProjectId is fixed at mount, so pass your project's numeric id
+//     with ?project=<id> (GitLab → project home → ⋯ menu → "Copy project ID").
+//     Sign in with a Personal Access Token (scope: api) on the connect screen.
+//
+//   ?mock=1 — in-browser GitLab mock + a seeded token: boots straight to a
+//     populated fake board. Non-GitLab requests still hit the network, so a
+//     real LLM key in Settings exercises the live streaming paths.
 async function boot(): Promise<void> {
-  installFetchMock();
-  try {
-    const ts = await createTokenStore();
-    await ts.set({ kind: "pat", token: "dev-token" });
-  } catch {
-    /* IndexedDB unavailable — the connect screen will handle sign-in */
-  }
+  const q = new URLSearchParams(location.search);
   const el = document.getElementById("root");
   if (!el) return;
+
+  // ---- mock mode -------------------------------------------------------
+  if (q.get("mock") === "1") {
+    // ?ai=1 → turn on AI with deepseek-v4-flash via the key-injecting dev proxy
+    // (no key needed in the browser; the proxy adds the box's Ollama key).
+    if (q.get("ai") === "1") {
+      try {
+        localStorage.setItem(
+          "lane.llm.config",
+          JSON.stringify({
+            enabled: true,
+            baseUrl: "https://lane.randomcodespace.dev/llm/v1",
+            model: "deepseek-v4-flash",
+            temperature: 0.4,
+          }),
+        );
+      } catch {
+        /* localStorage unavailable — Settings can still enable AI manually */
+      }
+    }
+    installFetchMock();
+    try {
+      const ts = await createTokenStore();
+      await ts.set({ kind: "pat", token: "dev-token" });
+    } catch {
+      /* IndexedDB unavailable — the connect screen will handle sign-in */
+    }
+    createRoot(el).render(
+      <Tracker instanceUrl="https://gitlab.test" personalProjectId={42} llm={{}} />,
+    );
+    return;
+  }
+
+  // ---- live mode (default) ---------------------------------------------
+  const instanceUrl = q.get("instance") ?? "https://gitlab.com";
+  const projectId = Number(q.get("project"));
+  if (!Number.isInteger(projectId) || projectId <= 0) {
+    el.innerHTML = [
+      '<div style="font:14px/1.6 system-ui,sans-serif;max-width:42rem;margin:12vh auto;padding:0 1.5rem;color:#d7dbe0">',
+      '<h1 style="font-size:1.15rem;margin:0 0 .75rem">Lane dev — live GitLab</h1>',
+      `<p style="margin:.4rem 0">Connecting to <code>${instanceUrl}</code>. Add your project id to the URL:</p>`,
+      '<p style="margin:.4rem 0"><code>?project=&lt;numeric id&gt;</code> — e.g. <code>?project=12345678</code></p>',
+      '<p style="margin:.9rem 0 .4rem;opacity:.85">Find the id on your GitLab project’s home page (under the title, or the ⋯ menu → <em>Copy project ID</em>).</p>',
+      '<p style="margin:.4rem 0;opacity:.85">Then sign in with a Personal Access Token (scope <code>api</code>) on the connect screen.</p>',
+      '<p style="margin:1.1rem 0 0;opacity:.6">Tip: append <code>&amp;mock=1</code> (or use <code>?mock=1</code>) to boot the offline mock board instead.</p>',
+      "</div>",
+    ].join("");
+    return;
+  }
+
+  // llm={{}} exposes the AI section in Settings (default-off).
   createRoot(el).render(
-    <Tracker instanceUrl="https://gitlab.test" personalProjectId={42} />,
+    <Tracker instanceUrl={instanceUrl} personalProjectId={projectId} llm={{}} />,
   );
 }
 
diff --git a/e2e/harness/dev.vite.config.ts b/e2e/harness/dev.vite.config.ts
@@ -1,17 +1,95 @@
-import { defineConfig, mergeConfig, type UserConfig } from "vite";
+import { defineConfig, mergeConfig, type Plugin, type UserConfig } from "vite";
+import { request as httpsRequest } from "node:https";
+import type { IncomingMessage, ServerResponse } from "node:http";
 import base from "./vite.config";
 
 // Dev-only: same harness as vite.config.ts, but allows the reverse-proxied
-// public host and routes HMR over the HTTPS tunnel. Kept separate so the
-// Playwright config stays clean.
+// public host, routes HMR over the HTTPS tunnel, and adds a same-origin LLM
+// CORS shim. Kept separate so the Playwright config stays clean.
+
+// Most LLM APIs (ollama, OpenAI, Groq, Together, …) send no CORS headers, so a
+// browser can't POST to them directly. This middleware lets the browser call a
+// same-origin path; the dev server forwards it to the real API, streaming both
+// ways (SSE-safe) and preserving the Authorization: Bearer <key> header.
+//   Base URL = https://lane.randomcodespace.dev/llmx/<host>/<suffix>   (https assumed)
+//   e.g.  …/llmx/api.openai.com/v1   ·   …/llmx/api.groq.com/openai/v1   ·   …/llmx/ollama.com/v1
+// Hop-by-hop response headers are dropped so Node re-frames the stream itself.
+const HOP_BY_HOP = new Set([
+  "connection", "keep-alive", "transfer-encoding", "upgrade",
+  "te", "trailer", "proxy-authenticate", "proxy-authorization",
+]);
+
+function llmCorsProxy(): Plugin {
+  return {
+    name: "lane-dev-llm-cors-proxy",
+    configureServer(server) {
+      server.middlewares.use(
+        (req: IncomingMessage, res: ServerResponse, next: (err?: unknown) => void) => {
+          const m = (req.url ?? "").match(/^\/llmx\/([^/]+)(\/.*)?$/);
+          if (!m) return next();
+          const host = m[1];
+          if (!host) return next();
+          const path = m[2] ?? "/";
+          const [hostname, port] = host.split(":");
+          const headers = { ...req.headers, host };
+          // Dev convenience: inject the box's Ollama key when targeting ollama and
+          // the browser sent none, so AI works without pasting a key in the browser.
+          if (hostname === "ollama.com" && process.env.OLLAMA_API_KEY && !headers.authorization) {
+            headers.authorization = `Bearer ${process.env.OLLAMA_API_KEY}`;
+          }
+          const upstream = httpsRequest(
+            {
+              hostname,
+              port: port ? Number(port) : 443,
+              path,
+              method: req.method,
+              headers,
+              servername: hostname, // SNI for the real host, not lane.…
+            },
+            (up) => {
+              res.statusCode = up.statusCode ?? 502;
+              for (const [k, v] of Object.entries(up.headers)) {
+                if (v !== undefined && !HOP_BY_HOP.has(k)) res.setHeader(k, v);
+              }
+              up.pipe(res);
+            },
+          );
+          upstream.on("error", (e) => {
+            res.statusCode = 502;
+            res.end(`llmx proxy error: ${(e as Error).message}`);
+          });
+          req.pipe(upstream);
+        },
+      );
+    },
+  };
+}
+
 export default mergeConfig(
   base as UserConfig,
   defineConfig({
+    plugins: [llmCorsProxy()],
     server: {
       allowedHosts: ["oteliq.randomcodespace.dev", ".randomcodespace.dev"],
+      // Shortcut for Ollama Cloud → Base URL https://lane.randomcodespace.dev/llm/v1
+      // (equivalent to the generic …/llmx/ollama.com/v1).
+      proxy: {
+        "/llm": {
+          target: "https://ollama.com",
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/llm/, ""),
+          configure: (proxy) => {
+            proxy.on("proxyReq", (proxyReq) => {
+              if (process.env.OLLAMA_API_KEY && !proxyReq.getHeader("authorization")) {
+                proxyReq.setHeader("authorization", `Bearer ${process.env.OLLAMA_API_KEY}`);
+              }
+            });
+          },
+        },
+      },
       hmr: {
         protocol: "wss",
-        host: "oteliq.randomcodespace.dev",
+        host: "lane.randomcodespace.dev",
         clientPort: 443,
       },
     },
diff --git a/e2e/harness/devmock.ts b/e2e/harness/devmock.ts
@@ -3,7 +3,7 @@
 // Reuses the exported fixtures from the e2e GitLab mock and reimplements the
 // REST handler against window.fetch (Playwright's page.route isn't available in
 // a normal browser).
-import { USER, PROJECT, PROJECT_ID, SYSTEM_LABELS, USER_LABELS } from "../fixtures/gitlab";
+import { USER, PROJECT, PROJECT_ID, PROJECT_PATH, SYSTEM_LABELS, USER_LABELS } from "../fixtures/gitlab";
 
 type Obj = Record<string, unknown>;
 
@@ -56,6 +56,41 @@ function freshState(): State {
   };
 }
 
+// Overflow/preview stress seed: append N varied issues (long titles, many
+// labels, heading/code/checklist/long-prose descriptions). Enabled via ?seed=N.
+function seedExtra(state: State, n: number): void {
+  const states = ["state::todo", "state::doing", "state::done"];
+  const pool = ["frontend", "backend", "urgent", "design", "infra", "docs", "perf", "a11y", "security", "tech-debt"];
+  const descs = [
+    "## Background\n\nThe webhook retries are not idempotent, so a duplicate delivery double-charges. We need an idempotency key keyed on the event id, persisted for 24h.\n\n- [ ] add key column\n- [ ] dedupe on ingest\n- [x] write the migration",
+    "```ts\nexport const retry = (n: number) => backoff(n);\n```\nNeeds a jittered backoff; the current fixed delay thunders the herd on outage recovery.",
+    "Short note.",
+    "",
+    "Refactor the pagination cursor to be opaque and signed so clients cannot enumerate ids. Touches the list endpoint, the typed client, and the e2e fixtures; preserve backwards compatibility for one release.",
+    "- [x] spec\n- [x] api\n- [ ] docs\n- [ ] changelog",
+  ];
+  for (let i = 0; i < n; i++) {
+    const st = states[i % 3]!;
+    const labels = [st, "src::side", ...pool.slice(i % 6, (i % 6) + ((i % 4) + 1))];
+    if (i % 7 === 0) labels.push("flag::blocked");
+    if (i % 9 === 0) labels.push("flag::reviewing");
+    state.issues.push(
+      mkIssue({
+        iid: 200 + i,
+        title:
+          i % 5 === 0
+            ? `Investigate the very long and unwieldy issue title number ${200 + i} that should wrap gracefully across lines on a card`
+            : `Seeded issue ${200 + i}: ${["tune", "audit", "ship", "spike", "patch"][i % 5]} the ${pool[i % pool.length]} path`,
+        labels,
+        description: descs[i % descs.length] ?? "",
+        weight: i % 3 === 0 ? (i % 13) + 1 : null,
+        due_date: i % 4 === 0 ? "2026-06-05" : i % 4 === 1 ? "2026-07-01" : null,
+        notes: i % 6,
+      }),
+    );
+  }
+}
+
 function csv(v: unknown): string[] {
   return typeof v === "string" && v ? v.split(",").map((s) => s.trim()).filter(Boolean) : [];
 }
@@ -68,6 +103,14 @@ function handle(state: State, method: string, path: string, body: Obj): { status
 
   if (/^\/projects\/\d+$/.test(path) && method === "GET") return { status: 200, data: PROJECT };
 
+  // Connect-screen path resolver: GET /projects/<url-encoded path> (non-numeric).
+  const pm = path.match(/^\/projects\/([^/]+)$/);
+  if (pm && method === "GET" && !/^\d+$/.test(pm[1] ?? "")) {
+    const decoded = decodeURIComponent(pm[1] ?? "");
+    if (decoded === PROJECT_PATH) return { status: 200, data: PROJECT };
+    return { status: 404, data: { message: "404 Project Not Found" } };
+  }
+
   if (path === `/projects/${PROJECT_ID}/labels`) {
     if (method === "GET") return { status: 200, data: state.labels };
     if (method === "POST") {
@@ -137,11 +180,15 @@ function handle(state: State, method: string, path: string, body: Obj): { status
     }
   }
 
+  // eslint-disable-next-line no-console
+  console.warn(`[lane dev] unmocked GitLab call: ${method} ${path} — returning {}`);
   return { status: 200, data: {} };
 }
 
 export function installFetchMock(): void {
   const state = freshState();
+  const seed = Number(new URLSearchParams(location.search).get("seed"));
+  if (Number.isInteger(seed) && seed > 0) seedExtra(state, Math.min(seed, 200));
   const orig = window.fetch.bind(window);
   window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
