@wrongstack/webui 0.8.4 → 0.8.5

package/dist/server/index.js

@@ -32,7 +32,7 @@ import { decryptConfigSecrets, encryptConfigSecrets } from "@wrongstack/core/sec
 import { buildProviderFactoriesFromRegistry, makeProviderFromConfig } from "@wrongstack/providers";
 import { builtinToolsPack, forgetTool, rememberTool } from "@wrongstack/tools";
 import { WebSocket, WebSocketServer } from "ws";
-import { randomBytes } from "crypto";
+import { randomBytes, timingSafeEqual } from "crypto";
 
 // ../runtime/src/container.ts
 import {
@@ -134,7 +134,310 @@ function patchConfig(config, updates) {
   return Object.freeze({ ...config, ...updates });
 }
 
+// src/server/autophase-ws-handler.ts
+import {
+  AutoPhasePlanner,
+  PhaseGraphBuilder,
+  PhaseOrchestrator,
+  PhaseStore
+} from "@wrongstack/core";
+var AutoPhaseWebSocketHandler = class {
+  constructor(agent, context, logger, storeDir) {
+    this.agent = agent;
+    this.context = context;
+    this.logger = logger;
+    this.store = new PhaseStore({ baseDir: storeDir });
+  }
+  agent;
+  context;
+  logger;
+  orchestrator = null;
+  graph = null;
+  store;
+  clients = /* @__PURE__ */ new Set();
+  broadcastInterval = null;
+  /** Aborts in-flight task agents when the run is stopped. */
+  abort = null;
+  addClient(ws) {
+    const client = { ws, id: crypto.randomUUID() };
+    this.clients.add(client);
+    ws.on("close", () => this.clients.delete(client));
+    ws.on("error", () => this.clients.delete(client));
+    this.sendState(client);
+  }
+  async handleMessage(msg) {
+    switch (msg.type) {
+      case "autophase.start":
+        await this.handleStart(msg.payload);
+        break;
+      case "autophase.pause":
+        this.orchestrator?.pause();
+        this.broadcast({ type: "autophase.paused", payload: {} });
+        break;
+      case "autophase.resume":
+        this.orchestrator?.resume();
+        this.broadcast({ type: "autophase.resumed", payload: {} });
+        break;
+      case "autophase.stop":
+        this.abort?.abort();
+        this.orchestrator?.stop();
+        this.stopBroadcast();
+        if (this.graph) void this.store.save(this.graph);
+        this.broadcast({ type: "autophase.stopped", payload: {} });
+        break;
+      case "autophase.status":
+        this.broadcastState();
+        break;
+      case "autophase.selectPhase": {
+        const phaseId = msg.payload?.phaseId;
+        if (phaseId && this.graph) {
+          this.broadcastState(phaseId);
+        }
+        break;
+      }
+      case "autophase.taskStatus": {
+        const { taskId, status } = msg.payload;
+        await this.handleTaskStatusChange(taskId, status);
+        break;
+      }
+      case "autophase.toggleAutonomous": {
+        const autonomous = msg.payload?.autonomous ?? !this.graph?.autonomous;
+        if (this.graph) {
+          this.graph.autonomous = autonomous;
+          await this.store.save(this.graph);
+          this.broadcast({ type: "autophase.state", payload: this.buildState() });
+        }
+        break;
+      }
+      case "autophase.save": {
+        if (this.graph) {
+          await this.store.save(this.graph);
+          this.broadcast({ type: "autophase.saved", payload: { graphId: this.graph.id } });
+        }
+        break;
+      }
+      case "autophase.list": {
+        const graphs = await this.store.list();
+        this.broadcast({ type: "autophase.list", payload: { graphs } });
+        break;
+      }
+      case "autophase.load": {
+        const graphId = msg.payload?.graphId;
+        if (graphId) {
+          const graph = await this.store.load(graphId);
+          if (graph) {
+            this.graph = graph;
+            this.broadcast({ type: "autophase.state", payload: this.buildState() });
+          } else {
+            this.broadcast({ type: "autophase.error", payload: { message: `Graph not found: ${graphId}` } });
+          }
+        }
+        break;
+      }
+    }
+  }
+  async handleStart(payload) {
+    const title = payload?.goal || payload?.title || "Untitled Project";
+    const autonomous = payload?.autonomous ?? true;
+    const phases = Array.isArray(payload?.phases) ? payload.phases : await this.planPhases(title);
+    this.logger.info(`[AutoPhase] Starting: ${title}`);
+    const graph = await new PhaseGraphBuilder({ title, phases, autonomous }).build();
+    this.graph = graph;
+    this.abort = new AbortController();
+    await this.store.save(graph);
+    this.orchestrator = new PhaseOrchestrator({
+      graph,
+      ctx: {
+        executeTask: async (task, phaseId) => {
+          this.logger.info(`[AutoPhase] [${phaseId}] Executing: ${task.title}`);
+          const result = await this.executeTaskWithAgent(task, phaseId);
+          this.logger.info(`[AutoPhase] [${phaseId}] Completed: ${task.title}`);
+          return result;
+        },
+        onPhaseComplete: (phase) => {
+          this.logger.info(`[AutoPhase] Phase completed: ${phase.name}`);
+          void this.store.save(graph);
+          this.broadcastState();
+        },
+        onPhaseFail: (phase, error) => {
+          this.logger.error(`[AutoPhase] Phase failed: ${phase.name} \u2014 ${error.message}`);
+          void this.store.save(graph);
+          this.broadcastState();
+        }
+      },
+      autonomous,
+      maxConcurrentPhases: 1,
+      // Sequential within a phase: each todo is a full-tool agent editing the
+      // shared working tree, so running two at once risks concurrent writes.
+      maxConcurrentTasks: 1
+    });
+    this.startBroadcast();
+    this.broadcastState();
+    void this.orchestrator.start().then(() => {
+      this.orchestrator?.stop();
+      void this.store.save(graph);
+      this.stopBroadcast();
+      const failed = graph.failedPhaseIds.length > 0;
+      this.broadcast(
+        failed ? { type: "autophase.failed", payload: { title } } : { type: "autophase.completed", payload: { title } }
+      );
+      this.broadcastState();
+    }).catch((err) => {
+      this.logger.error(`[AutoPhase] Aborted: ${err instanceof Error ? err.message : String(err)}`);
+      this.stopBroadcast();
+      this.broadcast({ type: "autophase.failed", payload: { title, error: String(err) } });
+    });
+  }
+  /** Generic fallback phases when the LLM planner produces nothing usable. */
+  defaultPhases() {
+    return [
+      { name: "Discovery", description: "Requirements gathering", priority: "high", estimateHours: 2, parallelizable: false },
+      { name: "Design", description: "Architecture and design", priority: "critical", estimateHours: 4, parallelizable: false },
+      { name: "Implementation", description: "Core development", priority: "critical", estimateHours: 12, parallelizable: false },
+      { name: "Testing", description: "Unit and integration tests", priority: "high", estimateHours: 6, parallelizable: true },
+      { name: "Deployment", description: "Deploy to production", priority: "medium", estimateHours: 2, parallelizable: false }
+    ];
+  }
+  /** Plan phases+todos for the goal via the LLM; fall back to defaults on failure. */
+  async planPhases(goal) {
+    try {
+      const planner = new AutoPhasePlanner({
+        goal,
+        runOnce: async (prompt) => {
+          const result = await this.agent.run(prompt, { signal: new AbortController().signal });
+          return result.status === "done" ? result.finalText ?? "" : "";
+        }
+      });
+      const { phases, parseFailed } = await planner.plan();
+      if (!parseFailed && phases.length > 0) {
+        const todos = phases.reduce((n, p) => n + (p.taskTemplates?.length ?? 0), 0);
+        this.logger.info(`[AutoPhase] Planned ${phases.length} phases / ${todos} todos for: ${goal}`);
+        return phases;
+      }
+      this.logger.info(`[AutoPhase] Planner produced no phases; using defaults for: ${goal}`);
+    } catch (err) {
+      this.logger.error(`[AutoPhase] Planning failed, using defaults: ${err instanceof Error ? err.message : String(err)}`);
+    }
+    return this.defaultPhases();
+  }
+  async executeTaskWithAgent(task, phaseId) {
+    const prompt = `Execute task: ${task.title}
+
+Description: ${task.description}
+Phase: ${phaseId}
+Priority: ${task.priority}
+Type: ${task.type}`;
+    const signal = this.abort?.signal ?? new AbortController().signal;
+    const result = await this.agent.run(prompt, { signal });
+    return result;
+  }
+  async handleTaskStatusChange(taskId, status) {
+    if (!this.graph) return;
+    for (const phase of this.graph.phases.values()) {
+      const task = phase.taskGraph.nodes.get(taskId);
+      if (task) {
+        task.status = status;
+        task.updatedAt = Date.now();
+        this.broadcastState();
+        return;
+      }
+    }
+  }
+  startBroadcast() {
+    if (this.broadcastInterval) return;
+    this.broadcastInterval = setInterval(() => {
+      const progress = this.orchestrator?.getProgress();
+      if (progress) this.broadcast({ type: "autophase.progress", payload: progress });
+      this.broadcastState();
+    }, 2e3);
+  }
+  stopBroadcast() {
+    if (this.broadcastInterval) {
+      clearInterval(this.broadcastInterval);
+      this.broadcastInterval = null;
+    }
+  }
+  broadcastState(activePhaseId) {
+    if (!this.graph) return;
+    const state = this.buildState(activePhaseId);
+    this.broadcast({ type: "autophase.state", payload: state });
+  }
+  buildState(activePhaseId) {
+    if (!this.graph) {
+      return { phases: [], tasks: [], overallPercent: 0, autonomous: true, title: "" };
+    }
+    const phases = Array.from(this.graph.phases.values());
+    const currentActiveId = activePhaseId || phases.find((p) => p.status === "running")?.id || phases[0]?.id || "";
+    const activePhase = this.graph.phases.get(currentActiveId);
+    const totalTasks = phases.reduce((sum, p) => sum + p.taskGraph.nodes.size, 0);
+    const completedTasks = phases.reduce(
+      (sum, p) => sum + Array.from(p.taskGraph.nodes.values()).filter((t) => t.status === "completed").length,
+      0
+    );
+    const phaseItems = phases.map((p) => ({
+      id: p.id,
+      name: p.name,
+      description: p.description,
+      status: p.status,
+      priority: p.priority,
+      estimateHours: p.estimateHours,
+      actualDurationMs: p.actualDurationMs,
+      startedAt: p.startedAt,
+      completedAt: p.completedAt,
+      progressPercent: p.taskGraph.nodes.size > 0 ? Math.round(Array.from(p.taskGraph.nodes.values()).filter((t) => t.status === "completed").length / p.taskGraph.nodes.size * 100) : 0,
+      taskCount: p.taskGraph.nodes.size,
+      completedTasks: Array.from(p.taskGraph.nodes.values()).filter((t) => t.status === "completed").length,
+      assignedAgents: p.assignedAgents,
+      isActive: p.id === currentActiveId
+    }));
+    const taskItems = activePhase ? Array.from(activePhase.taskGraph.nodes.values()).map((t) => ({
+      id: t.id,
+      title: t.title,
+      description: t.description,
+      status: t.status,
+      priority: t.priority,
+      type: t.type,
+      estimateHours: t.estimateHours,
+      actualHours: t.actualHours,
+      assignee: t.assignee,
+      tags: t.tags || [],
+      startedAt: t.startedAt,
+      completedAt: t.completedAt
+    })) : [];
+    const completedPhases = phases.filter((p) => p.status === "completed").length;
+    return {
+      title: this.graph.title,
+      phases: phaseItems,
+      tasks: taskItems,
+      activePhaseId: currentActiveId,
+      overallPercent: phases.length > 0 ? Math.round(completedPhases / phases.length * 100) : 0,
+      autonomous: this.graph.autonomous,
+      totalTasks,
+      completedTasks
+    };
+  }
+  sendState(client) {
+    if (!this.graph) return;
+    const state = this.buildState();
+    this.send(client, { type: "autophase.state", payload: state });
+  }
+  broadcast(msg) {
+    const data = JSON.stringify(msg);
+    for (const client of this.clients) {
+      if (client.ws.readyState === 1) {
+        client.ws.send(data);
+      }
+    }
+  }
+  send(client, msg) {
+    if (client.ws.readyState === 1) {
+      client.ws.send(JSON.stringify(msg));
+    }
+  }
+};
+
 // src/server/index.ts
+var HTML_CSP = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; img-src 'self' data:; font-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'";
 async function startWebUI(opts = {}) {
   const wsPort = opts.wsPort ?? 3457;
   const wsHost = opts.wsHost ?? "127.0.0.1";
@@ -336,6 +639,7 @@ async function startWebUI(opts = {}) {
     toolExecutor
   });
   console.log("[WebUI] Agent initialized");
+  const autoPhaseHandler = new AutoPhaseWebSocketHandler(agent, context, logger, wpaths.projectAutophase);
   async function sessionStartPayload() {
     let maxContext = 0;
     let inputCost = 0;
@@ -368,12 +672,33 @@ async function startWebUI(opts = {}) {
   const wsToken = randomBytes(16).toString("hex");
   console.log(`[WebUI] WS auth token: ${wsToken.slice(0, 4)}\u2026${wsToken.slice(-4)} (masked)`);
   const isLoopback = (hostname) => hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname === "[::1]";
+  const tokenMatches = (provided) => {
+    if (!provided) return false;
+    const a = Buffer.from(provided);
+    const b = Buffer.from(wsToken);
+    if (a.length !== b.length) return false;
+    return timingSafeEqual(a, b);
+  };
+  const hostHeaderOk = (req) => {
+    const boundToLoopback = wsHost === "127.0.0.1" || wsHost === "::1" || wsHost === "localhost";
+    if (!boundToLoopback) return true;
+    const hostHeader = (req.headers.host ?? "").trim();
+    if (!hostHeader) return false;
+    let hostname;
+    try {
+      hostname = new URL(`http://${hostHeader}`).hostname;
+    } catch {
+      return false;
+    }
+    return isLoopback(hostname);
+  };
   const verifyClient = (info) => {
     const origin = info.origin;
     const url = info.req.url ?? "";
     const tokenMatch = url.match(/[?&]token=([^&]+)/);
     const providedToken = tokenMatch ? tokenMatch[1] : void 0;
-    const tokenOk = providedToken === wsToken;
+    const tokenOk = tokenMatches(providedToken);
+    if (!hostHeaderOk(info.req)) return false;
     if (!origin) {
       const remoteIp = info.req.socket.remoteAddress ?? "";
       const isRemoteLoopback = remoteIp === "127.0.0.1" || remoteIp === "::1";
@@ -383,18 +708,24 @@ async function startWebUI(opts = {}) {
     try {
       const { hostname } = new URL(origin);
       if (isLoopback(hostname)) return true;
-      if (wsHost === "0.0.0.0") return tokenOk;
       return tokenOk;
     } catch {
       return false;
     }
   };
+  const WS_MAX_PAYLOAD = 8 * 1024 * 1024;
   const wssPrimary = new WebSocketServer({
     port: wsPort,
     host: wsHost,
-    verifyClient
+    verifyClient,
+    maxPayload: WS_MAX_PAYLOAD
   });
-  const wssSecondary = wsHost === "127.0.0.1" ? new WebSocketServer({ port: wsPort, host: "::1", verifyClient }) : null;
+  const wssSecondary = wsHost === "127.0.0.1" ? new WebSocketServer({
+    port: wsPort,
+    host: "::1",
+    verifyClient,
+    maxPayload: WS_MAX_PAYLOAD
+  }) : null;
   const clients = /* @__PURE__ */ new Map();
   const RATE_LIMIT_MESSAGES = 60;
   const RATE_LIMIT_WINDOW_MS = 6e4;
@@ -529,6 +860,7 @@ async function startWebUI(opts = {}) {
     void sessionStartPayload().then((payload) => {
       send(ws, { type: "session.start", payload });
     });
+    autoPhaseHandler.addClient(ws);
     ws.on("message", async (data) => {
       if (!checkRateLimit(ws)) {
         send(ws, {
@@ -1341,6 +1673,12 @@ async function startWebUI(opts = {}) {
         });
         break;
       }
+      default:
+        if (msg.type.startsWith("autophase.")) {
+          await autoPhaseHandler.handleMessage(msg);
+        } else {
+          send(ws, { type: "error", payload: { phase: "handleMessage", message: `Unknown message type: ${msg.type}` } });
+        }
     }
   }
   async function loadSavedProviders() {
@@ -1537,10 +1875,7 @@ async function startWebUI(opts = {}) {
       res.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
       if (ext === ".html") {
         res.setHeader("Cache-Control", "no-cache");
-        res.setHeader(
-          "Content-Security-Policy",
-          "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; img-src 'self' data:; font-src 'self' data:"
-        );
+        res.setHeader("Content-Security-Policy", HTML_CSP);
       }
       const fileContent = await fs2.readFile(resolvedPath);
       res.writeHead(200);
@@ -1552,7 +1887,11 @@ async function startWebUI(opts = {}) {
           res.writeHead(200, {
             "Content-Type": "text/html",
             "X-Content-Type-Options": "nosniff",
-            "X-Frame-Options": "DENY"
+            "X-Frame-Options": "DENY",
+            "Referrer-Policy": "strict-origin-when-cross-origin",
+            // SPA fallback previously shipped no CSP — apply the same policy as
+            // the direct .html branch so deep-linked routes aren't unprotected.
+            "Content-Security-Policy": HTML_CSP
           });
           res.end(fileContent);
         } catch {