@saws/open-design-service 2.0.0-beta.17

package/assets/Dockerfile

@@ -0,0 +1,25 @@
+ARG OPEN_DESIGN_IMAGE=ghcr.io/nexu-io/od:0.21.0
+FROM ${OPEN_DESIGN_IMAGE}
+
+ARG CODEX_VERSION=0.151.0
+ARG CLAUDE_CODE_VERSION=2.1.252
+
+USER root
+
+RUN apk add --no-cache bash git libgcc libstdc++ ripgrep && \
+    apk add --no-cache --virtual .gateway-build-deps python3 make g++ && \
+    npm install --global --omit=dev --allow-scripts=@anthropic-ai/claude-code \
+      "@openai/codex@${CODEX_VERSION}" \
+      "@anthropic-ai/claude-code@${CLAUDE_CODE_VERSION}" && \
+    mkdir -p /opt/saws-open-design-gateway /agent-home /workspace && \
+    chown -R open-design:open-design /agent-home /workspace
+
+COPY --chown=open-design:open-design gateway/package.json /opt/saws-open-design-gateway/package.json
+RUN cd /opt/saws-open-design-gateway && \
+    npm install --omit=dev && \
+    apk del .gateway-build-deps && \
+    npm cache clean --force
+
+COPY --chown=open-design:open-design gateway /opt/saws-open-design-gateway
+
+USER open-design

package/assets/gateway/app.js

@@ -0,0 +1,188 @@
+const ui = {
+  notice: document.querySelector("#notice"),
+  passwordForm: document.querySelector("#password-form"),
+  password: document.querySelector("#password"),
+  agents: document.querySelector("#agents"),
+  requirement: document.querySelector("#requirement"),
+  codexStatus: document.querySelector("#codex-status"),
+  claudeStatus: document.querySelector("#claude-status"),
+  codexConnect: document.querySelector("#codex-connect"),
+  claudeConnect: document.querySelector("#claude-connect"),
+  codexDevice: document.querySelector("#codex-device"),
+  codexUrl: document.querySelector("#codex-url"),
+  codexCode: document.querySelector("#codex-code"),
+  terminalWrap: document.querySelector("#terminal-wrap"),
+  terminalClose: document.querySelector("#terminal-close"),
+};
+
+let csrf;
+let codexPoll;
+let terminalSocket;
+
+async function request(path, options = {}) {
+  const response = await fetch(path, {
+    ...options,
+    headers: {
+      "content-type": "application/json",
+      ...(options.method && options.method !== "GET" ? { "x-csrf-token": csrf } : undefined),
+      ...options.headers,
+    },
+  });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(body.error || `Request failed (${response.status})`);
+  return body;
+}
+
+function showNotice(message, error = false) {
+  ui.notice.hidden = !message;
+  ui.notice.textContent = message || "";
+  ui.notice.classList.toggle("error", error);
+}
+
+function setAgentStatus(element, connected) {
+  element.textContent = connected ? "Connected" : "Not connected";
+  element.classList.toggle("ok", connected);
+}
+
+async function refresh() {
+  const status = await request("/__saws/status");
+  if (!status.session) {
+    ui.passwordForm.hidden = false;
+    ui.agents.hidden = true;
+    return;
+  }
+  ui.passwordForm.hidden = true;
+  ui.agents.hidden = false;
+  setAgentStatus(ui.codexStatus, status.codex);
+  setAgentStatus(ui.claudeStatus, status.claude);
+  ui.requirement.textContent = `Access requires ${status.requirement === "any" ? "Codex or Claude Code" : status.requirement === "all" ? "both Codex and Claude Code" : status.requirement}.`;
+  if (status.satisfied) location.replace("/");
+}
+
+ui.passwordForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  showNotice("");
+  try {
+    await request("/__saws/session", {
+      method: "POST",
+      body: JSON.stringify({ password: ui.password.value }),
+    });
+    ui.password.value = "";
+    await refresh();
+  } catch (error) {
+    showNotice(error.message, true);
+  }
+});
+
+ui.codexConnect.addEventListener("click", async () => {
+  ui.codexConnect.disabled = true;
+  showNotice("Starting Codex device login…");
+  try {
+    await request("/__saws/login/codex", { method: "POST", body: "{}" });
+    clearInterval(codexPoll);
+    codexPoll = setInterval(pollCodex, 1500);
+    await pollCodex();
+  } catch (error) {
+    showNotice(error.message, true);
+    ui.codexConnect.disabled = false;
+  }
+});
+
+async function pollCodex() {
+  try {
+    const login = await request("/__saws/login/codex");
+    if (login.verificationUrl) {
+      ui.codexDevice.hidden = false;
+      ui.codexUrl.href = login.verificationUrl;
+      ui.codexCode.textContent = login.userCode;
+      showNotice("Waiting for Codex authorization in your browser.");
+    }
+    if (login.state === "complete") {
+      clearInterval(codexPoll);
+      ui.codexConnect.disabled = false;
+      showNotice("Codex connected.");
+      await refresh();
+    } else if (login.state === "error") {
+      clearInterval(codexPoll);
+      ui.codexConnect.disabled = false;
+      showNotice(login.error || "Codex login failed.", true);
+    }
+  } catch (error) {
+    clearInterval(codexPoll);
+    ui.codexConnect.disabled = false;
+    showNotice(error.message, true);
+  }
+}
+
+ui.claudeConnect.addEventListener("click", async () => {
+  ui.claudeConnect.disabled = true;
+  showNotice("");
+  try {
+    const login = await request("/__saws/login/claude", { method: "POST", body: "{}" });
+    openTerminal(login.id);
+  } catch (error) {
+    ui.claudeConnect.disabled = false;
+    showNotice(error.message, true);
+  }
+});
+
+function openTerminal(id) {
+  ui.terminalWrap.hidden = false;
+  const terminal = new Terminal({
+    cursorBlink: true,
+    convertEol: true,
+    theme: { background: "#000000" },
+  });
+  const fit = new FitAddon.FitAddon();
+  terminal.loadAddon(fit);
+  terminal.open(document.querySelector("#terminal"));
+  fit.fit();
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  terminalSocket = new WebSocket(
+    `${protocol}//${location.host}/__saws/terminal?id=${encodeURIComponent(id)}`,
+  );
+  terminal.onData(
+    (data) =>
+      terminalSocket?.readyState === WebSocket.OPEN &&
+      terminalSocket.send(JSON.stringify({ type: "input", data })),
+  );
+  terminal.onResize(
+    ({ cols, rows }) =>
+      terminalSocket?.readyState === WebSocket.OPEN &&
+      terminalSocket.send(JSON.stringify({ type: "resize", cols, rows })),
+  );
+  terminalSocket.addEventListener("open", () =>
+    terminalSocket.send(
+      JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows }),
+    ),
+  );
+  terminalSocket.addEventListener("message", async (event) => {
+    const message = JSON.parse(event.data);
+    if (message.type === "data") terminal.write(message.data);
+    if (message.type === "exit") {
+      terminal.write(`\r\n[authentication process exited]\r\n`);
+      ui.claudeConnect.disabled = false;
+      await refresh();
+    }
+  });
+  terminalSocket.addEventListener("close", () => {
+    ui.claudeConnect.disabled = false;
+  });
+  window.addEventListener("resize", () => fit.fit(), { passive: true });
+}
+
+ui.terminalClose.addEventListener("click", () => {
+  terminalSocket?.send(JSON.stringify({ type: "cancel" }));
+  terminalSocket?.close();
+  ui.terminalWrap.hidden = true;
+  ui.claudeConnect.disabled = false;
+});
+
+(async () => {
+  try {
+    csrf = (await request("/__saws/csrf")).token;
+    await refresh();
+  } catch (error) {
+    showNotice(error.message, true);
+  }
+})();

package/assets/gateway/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="color-scheme" content="dark" />
+    <title>OpenDesign authentication</title>
+    <link rel="stylesheet" href="/__saws/assets/xterm.css" />
+    <link rel="stylesheet" href="/__saws/assets/style.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="card">
+        <p class="eyebrow">SAWS · OpenDesign</p>
+        <h1>Connect your design agents</h1>
+        <p class="lede">
+          This gateway protects OpenDesign and keeps your Codex and Claude Code sessions in
+          persistent container storage.
+        </p>
+        <div id="notice" class="notice" hidden></div>
+        <form id="password-form" hidden>
+          <label for="password">Application password</label>
+          <div class="row">
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autocomplete="current-password"
+              required
+            />
+            <button type="submit">Continue</button>
+          </div>
+        </form>
+        <section id="agents" hidden>
+          <div class="requirement" id="requirement"></div>
+          <div class="agent-grid">
+            <article class="agent">
+              <div>
+                <h2>Codex</h2>
+                <span id="codex-status" class="pill">Checking</span>
+              </div>
+              <p>
+                Sign in with your ChatGPT subscription using OpenAI’s headless device-code flow.
+              </p>
+              <button id="codex-connect">Connect Codex</button>
+              <div id="codex-device" class="device" hidden>
+                <a id="codex-url" target="_blank" rel="noreferrer">Open verification page</a>
+                <code id="codex-code"></code>
+                <p>
+                  Enter this one-time code after signing in. Device login must be enabled in your
+                  ChatGPT security or workspace settings.
+                </p>
+              </div>
+            </article>
+            <article class="agent">
+              <div>
+                <h2>Claude Code</h2>
+                <span id="claude-status" class="pill">Checking</span>
+              </div>
+              <p>
+                Sign in with a Claude.ai Pro or Max subscription through the supported Claude Code
+                login command.
+              </p>
+              <button id="claude-connect">Connect Claude Code</button>
+            </article>
+          </div>
+          <div id="terminal-wrap" hidden>
+            <div class="terminal-head">
+              <span>Claude Code authentication</span
+              ><button id="terminal-close" class="quiet">Cancel</button>
+            </div>
+            <div id="terminal"></div>
+            <p class="hint">
+              This terminal is constrained to <code>claude auth login</code>; it is not a shell.
+              Follow the displayed URL and paste only when Claude Code asks.
+            </p>
+          </div>
+        </section>
+      </section>
+    </main>
+    <script src="/__saws/assets/xterm.js"></script>
+    <script src="/__saws/assets/addon-fit.js"></script>
+    <script src="/__saws/assets/app.js"></script>
+  </body>
+</html>

package/assets/gateway/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "saws-open-design-gateway-runtime",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@xterm/addon-fit": "0.11.0",
+    "@xterm/xterm": "6.0.0",
+    "node-pty": "1.1.0",
+    "ws": "8.21.3"
+  },
+  "allowScripts": {
+    "node-pty": true
+  }
+}