agent-state-machine 2.0.15 → 2.1.1

package/templates/project-builder/workflow.js

@@ -8,7 +8,7 @@
  * 4. Task lifecycle with optimal agent sequencing
  */
 
-import { memory, askHuman } from 'agent-state-machine';
+import { agent, memory, askHuman } from 'agent-state-machine';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import {
@@ -16,13 +16,17 @@ import {
   isApproval,
   renderRoadmapMarkdown,
   renderTasksMarkdown,
-  safeAgent,
   TASK_STAGES,
   getTaskStage,
   setTaskStage,
   getTaskData,
   setTaskData
 } from './scripts/workflow-helpers.js';
+import {
+  createInteraction,
+  parseResponse,
+  formatInteractionPrompt as formatPrompt
+} from './scripts/interaction-helpers.js';
 
 // Derive workflow directory dynamically
 const __filename = fileURLToPath(import.meta.url);
@@ -43,11 +47,17 @@ export default async function () {
   console.log('=== PHASE 1: PROJECT INTAKE ===\n');
 
   if (!memory.projectDescription) {
-    const description = await askHuman(
-      'Describe the project you want to build. Include any initial requirements, goals, or constraints you have in mind.',
-      { slug: 'project-description' }
-    );
-    memory.projectDescription = description;
+    const descriptionInteraction = createInteraction('text', 'project-description', {
+      prompt: 'Describe the project you want to build. Include any initial requirements, goals, or constraints you have in mind.',
+      placeholder: 'A web app that...',
+      validation: { minLength: 20 }
+    });
+    const descriptionRaw = await askHuman(formatPrompt(descriptionInteraction), {
+      slug: descriptionInteraction.slug,
+      interaction: descriptionInteraction
+    });
+    const descriptionParsed = await parseResponse(descriptionInteraction, descriptionRaw);
+    memory.projectDescription = descriptionParsed.text || descriptionParsed.raw || descriptionRaw;
   }
 
   console.log('Project description captured. Starting clarification process...\n');
@@ -61,7 +71,7 @@ export default async function () {
   // 1. Scope Clarification
   if (!memory.scopeClarified) {
     console.log('--- Scope Clarification ---');
-    const scopeResult = await safeAgent('scope-clarifier', {
+    const scopeResult = await agent('scope-clarifier', {
       projectDescription: memory.projectDescription
     });
     memory.scope = scopeResult;
@@ -71,7 +81,7 @@ export default async function () {
   // 2. Requirements Clarification
   if (!memory.requirementsClarified) {
     console.log('--- Requirements Clarification ---');
-    const reqResult = await safeAgent('requirements-clarifier', {
+    const reqResult = await agent('requirements-clarifier', {
       projectDescription: memory.projectDescription,
       scope: memory.scope
     });
@@ -82,7 +92,7 @@ export default async function () {
   // 3. Assumptions Clarification
   if (!memory.assumptionsClarified) {
     console.log('--- Assumptions Clarification ---');
-    const assumeResult = await safeAgent('assumptions-clarifier', {
+    const assumeResult = await agent('assumptions-clarifier', {
       projectDescription: memory.projectDescription,
       scope: memory.scope,
       requirements: memory.requirements
@@ -94,7 +104,7 @@ export default async function () {
   // 4. Security Clarification
   if (!memory.securityClarified) {
     console.log('--- Security Clarification ---');
-    const secResult = await safeAgent('security-clarifier', {
+    const secResult = await agent('security-clarifier', {
       projectDescription: memory.projectDescription,
       scope: memory.scope,
       requirements: memory.requirements,
@@ -114,7 +124,7 @@ export default async function () {
   if (!memory.roadmapApproved) {
     // Generate roadmap as JSON
     if (!memory.roadmap) {
-      const roadmapResult = await safeAgent('roadmap-generator', {
+      const roadmapResult = await agent('roadmap-generator', {
         projectDescription: memory.projectDescription,
         scope: memory.scope,
         requirements: memory.requirements,
@@ -129,24 +139,35 @@ export default async function () {
     // Roadmap approval loop
     let approved = false;
     while (!approved) {
-      const reviewResponse = await askHuman(
-        `Please review the roadmap in state/roadmap.md\n\nOptions:\n- A: Approve roadmap as-is\n- B: Request changes (describe what to change)\n\nYour choice:`,
-        { slug: 'roadmap-review' }
-      );
+      const roadmapInteraction = createInteraction('choice', 'roadmap-review', {
+        prompt: 'Please review the roadmap in state/roadmap.md.\nHow would you like to proceed?',
+        options: [
+          { key: 'approve', label: 'Approve roadmap as-is' },
+          { key: 'changes', label: 'Request changes', description: 'Describe what to change' }
+        ],
+        allowCustom: true
+      });
+
+      const reviewRaw = await askHuman(formatPrompt(roadmapInteraction), {
+        slug: roadmapInteraction.slug,
+        interaction: roadmapInteraction
+      });
+      const reviewResponse = await parseResponse(roadmapInteraction, reviewRaw);
 
-      if (isApproval(reviewResponse)) {
+      if (reviewResponse.selectedKey === 'approve' || isApproval(reviewResponse.raw || reviewRaw)) {
         approved = true;
         memory.roadmapApproved = true;
         console.log('Roadmap approved!\n');
       } else {
+        const feedback = reviewResponse.customText || reviewResponse.text || reviewResponse.raw || reviewRaw;
         // Regenerate roadmap with feedback
-        const updatedRoadmap = await safeAgent('roadmap-generator', {
+        const updatedRoadmap = await agent('roadmap-generator', {
           projectDescription: memory.projectDescription,
           scope: memory.scope,
           requirements: memory.requirements,
           assumptions: memory.assumptions,
           security: memory.security,
-          feedback: reviewResponse
+          feedback
         });
         memory.roadmap = updatedRoadmap;
         writeMarkdownFile(STATE_DIR, 'roadmap.md', renderRoadmapMarkdown(memory.roadmap));
@@ -178,7 +199,7 @@ export default async function () {
     // Generate task list for this phase (as JSON)
     if (!memory[tasksApprovedKey]) {
       if (!memory[tasksKey]) {
-        const taskResult = await safeAgent('task-planner', {
+        const taskResult = await agent('task-planner', {
           projectDescription: memory.projectDescription,
           scope: memory.scope,
           requirements: memory.requirements,
@@ -193,23 +214,34 @@ export default async function () {
       // Task list approval loop
       let tasksApproved = false;
       while (!tasksApproved) {
-        const taskReview = await askHuman(
-          `Please review the task list for Phase ${i + 1} in state/phase-${i + 1}-tasks.md\n\nOptions:\n- A: Approve task list\n- B: Request changes (describe what to change)\n\nYour choice:`,
-          { slug: `phase-${i + 1}-task-review` }
-        );
+        const taskReviewInteraction = createInteraction('choice', `phase-${i + 1}-task-review`, {
+          prompt: `Please review the task list for Phase ${i + 1} in state/phase-${i + 1}-tasks.md.\nHow would you like to proceed?`,
+          options: [
+            { key: 'approve', label: 'Approve task list' },
+            { key: 'changes', label: 'Request changes', description: 'Describe what to change' }
+          ],
+          allowCustom: true
+        });
 
-        if (isApproval(taskReview)) {
+        const taskReviewRaw = await askHuman(formatPrompt(taskReviewInteraction), {
+          slug: taskReviewInteraction.slug,
+          interaction: taskReviewInteraction
+        });
+        const taskReview = await parseResponse(taskReviewInteraction, taskReviewRaw);
+
+        if (taskReview.selectedKey === 'approve' || isApproval(taskReview.raw || taskReviewRaw)) {
           tasksApproved = true;
           memory[tasksApprovedKey] = true;
           console.log(`Phase ${i + 1} task list approved!\n`);
         } else {
-          const updatedTasks = await safeAgent('task-planner', {
+          const feedback = taskReview.customText || taskReview.text || taskReview.raw || taskReviewRaw;
+          const updatedTasks = await agent('task-planner', {
             projectDescription: memory.projectDescription,
             scope: memory.scope,
             requirements: memory.requirements,
             phase: phase,
             phaseIndex: i + 1,
-            feedback: taskReview
+            feedback
           });
           memory[tasksKey] = updatedTasks;
           writeMarkdownFile(STATE_DIR, `phase-${i + 1}-tasks.md`, renderTasksMarkdown(i + 1, phase.title, memory[tasksKey]?.tasks || memory[tasksKey]));
@@ -241,6 +273,15 @@ export default async function () {
       // Get current stage for this task
       let stage = getTaskStage(i, taskId);
 
+      // Update progress tracking for remote monitoring
+      memory.progress = {
+        phase: `${i + 1}/${phases.length}`,
+        task: `${t + 1}/${tasks.length}`,
+        stage: stage,
+        currentTask: task.title,
+        currentPhase: phase.title
+      };
+
       // Store any feedback for this task
       const feedback = getTaskData(i, taskId, 'feedback');
 
@@ -249,7 +290,7 @@ export default async function () {
         if (stage === TASK_STAGES.PENDING || stage === TASK_STAGES.SECURITY_PRE) {
           if (!getTaskData(i, taskId, 'security_pre')) {
             console.log('    > Security pre-review...');
-            const securityPreReview = await safeAgent('security-reviewer', {
+            const securityPreReview = await agent('security-reviewer', {
               task: task,
               phase: phase,
               scope: memory.scope,
@@ -266,7 +307,7 @@ export default async function () {
         if (stage === TASK_STAGES.TEST_PLANNING) {
           if (!getTaskData(i, taskId, 'tests')) {
             console.log('    > Test planning...');
-            const testPlan = await safeAgent('test-planner', {
+            const testPlan = await agent('test-planner', {
               task: task,
               phase: phase,
               requirements: memory.requirements,
@@ -283,7 +324,7 @@ export default async function () {
         if (stage === TASK_STAGES.IMPLEMENTING) {
           if (!getTaskData(i, taskId, 'code')) {
             console.log('    > Code implementation...');
-            const implementation = await safeAgent('code-writer', {
+            const implementation = await agent('code-writer', {
               task: task,
               phase: phase,
               requirements: memory.requirements,
@@ -301,7 +342,7 @@ export default async function () {
         if (stage === TASK_STAGES.CODE_REVIEW) {
           if (!getTaskData(i, taskId, 'review')) {
             console.log('    > Code review...');
-            const codeReview = await safeAgent('code-reviewer', {
+            const codeReview = await agent('code-reviewer', {
               task: task,
               implementation: getTaskData(i, taskId, 'code'),
               testPlan: getTaskData(i, taskId, 'tests'),
@@ -317,7 +358,7 @@ export default async function () {
         if (stage === TASK_STAGES.SECURITY_POST) {
           if (!getTaskData(i, taskId, 'security_post')) {
             console.log('    > Final security check...');
-            const securityPostReview = await safeAgent('security-reviewer', {
+            const securityPostReview = await agent('security-reviewer', {
               task: task,
               phase: phase,
               implementation: getTaskData(i, taskId, 'code'),
@@ -326,39 +367,147 @@ export default async function () {
             });
             setTaskData(i, taskId, 'security_post', securityPostReview);
           }
-          setTaskStage(i, taskId, TASK_STAGES.AWAITING_APPROVAL);
-          stage = TASK_STAGES.AWAITING_APPROVAL;
+          setTaskStage(i, taskId, TASK_STAGES.SANITY_CHECK);
+          stage = TASK_STAGES.SANITY_CHECK;
         }
 
-        // 6. Sanity check with user
+        // 6. Sanity check generation & execution
+        if (stage === TASK_STAGES.SANITY_CHECK) {
+          const executableChecks = await agent('sanity-checker', {
+            task: task,
+            implementation: getTaskData(i, taskId, 'code'),
+            testPlan: getTaskData(i, taskId, 'tests')
+          });
+          setTaskData(i, taskId, 'sanity_checks', executableChecks);
+
+          const checksDisplay = (executableChecks.checks || [])
+            .map((check) => `  ${check.id}. ${check.description}\n     → ${check.command || check.path || check.testCommand}`)
+            .join('\n');
+
+          const sanityChoice = createInteraction('choice', `phase-${i + 1}-task-${taskId}-sanity-choice`, {
+            prompt: `Sanity checks for "${task.title}":\n\n${checksDisplay}\n\nHow would you like to proceed?`,
+            options: [
+              { key: 'manual', label: 'Run checks manually', description: 'You run the commands and confirm results' },
+              { key: 'auto', label: 'Run automatically', description: 'Agent executes checks and reports results' },
+              { key: 'skip', label: 'Skip verification', description: 'Approve without running checks' }
+            ],
+            allowCustom: true
+          });
+
+          const sanityRaw = await askHuman(formatPrompt(sanityChoice), {
+            slug: sanityChoice.slug,
+            interaction: sanityChoice
+          });
+          const sanityResponse = await parseResponse(sanityChoice, sanityRaw);
+
+          if (sanityResponse.isCustom) {
+            setTaskData(i, taskId, 'feedback', sanityResponse.customText || sanityResponse.raw || sanityRaw);
+            setTaskStage(i, taskId, TASK_STAGES.PENDING);
+            t--;
+            continue;
+          }
+
+          const action = sanityResponse.selectedKey;
+
+          if (action === 'auto') {
+            const results = await agent('sanity-runner', {
+              checks: executableChecks.checks,
+              setup: executableChecks.setup,
+              teardown: executableChecks.teardown
+            });
+            setTaskData(i, taskId, 'sanity_results', results);
+
+            if (results.summary?.failed > 0) {
+              const failedChecks = results.results
+                .filter((r) => r.status === 'failed')
+                .map((r) => `  - Check ${r.id}: ${r.error}`)
+                .join('\n');
+
+              const failChoice = createInteraction('choice', `phase-${i + 1}-task-${taskId}-sanity-fail`, {
+                prompt: `${results.summary.failed} sanity check(s) failed:\n\n${failedChecks}\n\nHow would you like to proceed?`,
+                options: [
+                  { key: 'reimplement', label: 'Re-implement task with this feedback' },
+                  { key: 'ignore', label: 'Ignore failures and approve anyway' }
+                ],
+                allowCustom: true
+              });
+
+              const failRaw = await askHuman(formatPrompt(failChoice), {
+                slug: failChoice.slug,
+                interaction: failChoice
+              });
+              const failResponse = await parseResponse(failChoice, failRaw);
+
+              if (failResponse.selectedKey === 'reimplement' || failResponse.isCustom) {
+                setTaskData(i, taskId, 'feedback', `Sanity check failures:\n${failedChecks}`);
+                setTaskData(i, taskId, 'security_pre', null);
+                setTaskData(i, taskId, 'tests', null);
+                setTaskData(i, taskId, 'code', null);
+                setTaskData(i, taskId, 'review', null);
+                setTaskData(i, taskId, 'security_post', null);
+                setTaskStage(i, taskId, TASK_STAGES.PENDING);
+                t--;
+                continue;
+              }
+            }
+
+            setTaskStage(i, taskId, TASK_STAGES.COMPLETED);
+            stage = TASK_STAGES.COMPLETED;
+            task.stage = 'completed';
+            memory[tasksKey] = tasks;
+            writeMarkdownFile(STATE_DIR, `phase-${i + 1}-tasks.md`, renderTasksMarkdown(i + 1, phase.title, tasks));
+            console.log(`    Task ${t + 1} confirmed complete!\n`);
+          } else if (action === 'skip') {
+            setTaskStage(i, taskId, TASK_STAGES.COMPLETED);
+            stage = TASK_STAGES.COMPLETED;
+            task.stage = 'completed';
+            memory[tasksKey] = tasks;
+            writeMarkdownFile(STATE_DIR, `phase-${i + 1}-tasks.md`, renderTasksMarkdown(i + 1, phase.title, tasks));
+            console.log(`    Task ${t + 1} confirmed complete!\n`);
+          } else {
+            setTaskStage(i, taskId, TASK_STAGES.AWAITING_APPROVAL);
+            stage = TASK_STAGES.AWAITING_APPROVAL;
+          }
+        }
+
+        // 7. Manual approval (for when user runs checks)
         if (stage === TASK_STAGES.AWAITING_APPROVAL) {
-          const sanityCheck = await askHuman(
-            `Task ${t + 1} (${task.title}) complete.\n\nDefinition of Done: ${task.doneDefinition || 'Task completed successfully'}\n\nSanity Check: ${task.sanityCheck || 'Review the implementation and confirm it meets requirements.'}\n\nOptions:\n- A: Confirm task completion\n- B: Flag issue (describe the problem)\n\nYour response:`,
-            { slug: `phase-${i + 1}-task-${taskId}-sanity` }
-          );
+          const approvalInteraction = createInteraction('choice', `phase-${i + 1}-task-${taskId}-approval`, {
+            prompt: `Task ${t + 1} (${task.title}) complete.\n\nDefinition of Done: ${task.doneDefinition || 'Task completed successfully'}`,
+            options: [
+              { key: 'approve', label: 'Confirm task completion' },
+              { key: 'issue', label: 'Flag issue', description: 'Describe the problem' }
+            ],
+            allowCustom: true
+          });
 
-          if (isApproval(sanityCheck)) {
-            // Mark task complete
+          const approvalRaw = await askHuman(formatPrompt(approvalInteraction), {
+            slug: approvalInteraction.slug,
+            interaction: approvalInteraction
+          });
+          const approvalResponse = await parseResponse(approvalInteraction, approvalRaw);
+
+          if (approvalResponse.selectedKey === 'approve' || isApproval(approvalResponse.raw || approvalRaw)) {
             setTaskStage(i, taskId, TASK_STAGES.COMPLETED);
             task.stage = 'completed';
-            memory[tasksKey] = tasks; // Persist updated tasks
+            memory[tasksKey] = tasks;
             writeMarkdownFile(STATE_DIR, `phase-${i + 1}-tasks.md`, renderTasksMarkdown(i + 1, phase.title, tasks));
             console.log(`    Task ${t + 1} confirmed complete!\n`);
           } else {
-            // Store feedback and reset task for reprocessing
             console.log('    > Issue flagged, reprocessing task with feedback...');
-            setTaskData(i, taskId, 'feedback', sanityCheck);
+            const feedbackText = approvalResponse.customText || approvalResponse.text || approvalResponse.raw || approvalRaw;
+            setTaskData(i, taskId, 'feedback', feedbackText);
 
-            // Clear previous outputs to force regeneration
             setTaskData(i, taskId, 'security_pre', null);
             setTaskData(i, taskId, 'tests', null);
             setTaskData(i, taskId, 'code', null);
             setTaskData(i, taskId, 'review', null);
             setTaskData(i, taskId, 'security_post', null);
+            setTaskData(i, taskId, 'sanity_checks', null);
+            setTaskData(i, taskId, 'sanity_results', null);
 
-            // Reset to pending and reprocess same task
             setTaskStage(i, taskId, TASK_STAGES.PENDING);
-            t--; // Reprocess this task
+            t--;
           }
         }
 
@@ -366,16 +515,27 @@ export default async function () {
         console.error(`    Task ${t + 1} failed: ${error.message}`);
         setTaskStage(i, taskId, TASK_STAGES.FAILED);
 
-        const retry = await askHuman(
-          `Task "${task.title}" failed with error: ${error.message}\n\nOptions:\n- A: Retry this task\n- B: Skip and continue\n- C: Abort workflow\n\nYour choice:`,
-          { slug: `phase-${i + 1}-task-${taskId}-error` }
-        );
+        const retryInteraction = createInteraction('choice', `phase-${i + 1}-task-${taskId}-error`, {
+          prompt: `Task "${task.title}" failed with error: ${error.message}\n\nHow would you like to proceed?`,
+          options: [
+            { key: 'retry', label: 'Retry this task' },
+            { key: 'skip', label: 'Skip and continue' },
+            { key: 'abort', label: 'Abort workflow' }
+          ],
+          allowCustom: true
+        });
+
+        const retryRaw = await askHuman(formatPrompt(retryInteraction), {
+          slug: retryInteraction.slug,
+          interaction: retryInteraction
+        });
+        const retryResponse = await parseResponse(retryInteraction, retryRaw);
+        const retryValue = (retryResponse.raw || retryRaw).trim().toLowerCase();
 
-        const retryTrimmed = retry.trim().toLowerCase();
-        if (retryTrimmed.startsWith('a') || retryTrimmed.startsWith('retry')) {
+        if (retryResponse.selectedKey === 'retry' || retryValue.startsWith('a') || retryValue.startsWith('retry')) {
           setTaskStage(i, taskId, TASK_STAGES.PENDING);
           t--; // Retry this task
-        } else if (retryTrimmed.startsWith('c') || retryTrimmed.startsWith('abort')) {
+        } else if (retryResponse.selectedKey === 'abort' || retryValue.startsWith('c') || retryValue.startsWith('abort')) {
           throw new Error('Workflow aborted by user');
         }
         // Otherwise skip and continue to next task

package/vercel-server/api/session/[token].js

@@ -11,8 +11,8 @@ const __dirname = path.dirname(__filename);
 let cachedTemplate = null;
 async function getTemplate() {
   if (cachedTemplate) return cachedTemplate;
-  // Point to the unified template in vercel-server/ui/index.html
-  const templatePath = path.join(__dirname, '..', '..', 'ui', 'index.html');
+  // Point to the built template in vercel-server/public/remote/index.html
+  const templatePath = path.join(__dirname, '..', '..', 'public', 'remote', 'index.html');
   cachedTemplate = await readFile(templatePath, 'utf8');
   return cachedTemplate;
 }
@@ -46,4 +46,4 @@ export default async function handler(req, res) {
 
   res.setHeader('Content-Type', 'text/html; charset=utf-8');
   res.send(html);
-}
+}

package/vercel-server/api/submit/[token].js

@@ -47,12 +47,14 @@ export default async function handler(req, res) {
     const body = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
     const { slug, targetKey, response } = body;
 
-    if (!slug || !response) {
+    if (!slug || response === undefined || response === null) {
       return res.status(400).json({ error: 'Missing required fields: slug, response' });
     }
 
+    const responseString = typeof response === 'string' ? response : JSON.stringify(response);
+
     // Validate response size (max 1MB)
-    if (response.length > 1024 * 1024) {
+    if (responseString.length > 1024 * 1024) {
       return res.status(413).json({ error: 'Response too large (max 1MB)' });
     }
 
@@ -73,7 +75,7 @@ export default async function handler(req, res) {
       event: 'INTERACTION_SUBMITTED',
       slug,
       targetKey: targetKey || `_interaction_${slug}`,
-      answer: response.substring(0, 200) + (response.length > 200 ? '...' : ''),
+      answer: responseString.substring(0, 200) + (responseString.length > 200 ? '...' : ''),
       source: 'remote',
     });
 

package/vercel-server/local-server.js

@@ -24,6 +24,7 @@ const PORT = process.env.PORT || 3001;
 
 // In-memory session storage
 const sessions = new Map();
+let latestSessionToken = null;
 
 // SSE clients per session
 const sseClients = new Map(); // token -> Set<res>
@@ -44,6 +45,7 @@ function createSession(token, data) {
     createdAt: Date.now(),
   };
   sessions.set(token, session);
+  latestSessionToken = token;
   return session;
 }
 
@@ -308,10 +310,12 @@ async function handleSubmitPost(req, res, token) {
   const body = await parseBody(req);
   const { slug, targetKey, response } = body;
 
-  if (!slug || !response) {
+  if (!slug || response === undefined || response === null) {
     return sendJson(res, 400, { error: 'Missing slug or response' });
   }
 
+  const responseString = typeof response === 'string' ? response : JSON.stringify(response);
+
   // Add to pending interactions for CLI to pick up
   session.pendingInteractions.push({
     slug,
@@ -325,7 +329,7 @@ async function handleSubmitPost(req, res, token) {
     event: 'INTERACTION_SUBMITTED',
     slug,
     targetKey: targetKey || `_interaction_${slug}`,
-    answer: response.substring(0, 200) + (response.length > 200 ? '...' : ''),
+    answer: responseString.substring(0, 200) + (responseString.length > 200 ? '...' : ''),
     source: 'remote',
   };
   session.history.unshift(event);
@@ -342,10 +346,10 @@ async function handleSubmitPost(req, res, token) {
 /**
  * Serve session UI
  */
-const MASTER_TEMPLATE_PATH = path.join(__dirname, 'ui', 'index.html');
+const MASTER_TEMPLATE_PATH = path.join(__dirname, 'public', 'remote', 'index.html');
 
 /**
- * Get session HTML by reading the master template from lib/ui/index.html
+ * Get session HTML by reading the master template from public/remote/index.html
  */
 function getSessionHTML(token, workflowName) {
   try {
@@ -362,7 +366,8 @@ function getSessionHTML(token, workflowName) {
         <body style="font-family: system-ui; max-width: 600px; margin: 100px auto; text-align: center;">
           <h1>Error loading UI template</h1>
           <p>${err.message}</p>
-          <p>Make sure <code>lib/ui/index.html</code> exists.</p>
+          <p>Make sure <code>public/remote/index.html</code> exists.</p>
+          <p>Build the UI first: <code>cd vercel-server/ui && npm install && npm run build</code></p>
         </body>
       </html>
     `;
@@ -395,6 +400,16 @@ function serveSessionUI(res, token) {
 
 // getSessionHTML was moved up and updated to read from MASTER_TEMPLATE_PATH
 
+function getDefaultSessionToken() {
+  if (latestSessionToken && sessions.has(latestSessionToken)) {
+    return latestSessionToken;
+  }
+  if (sessions.size === 1) {
+    return sessions.keys().next().value;
+  }
+  return null;
+}
+
 /**
  * Serve static files
  */
@@ -470,10 +485,22 @@ async function handleRequest(req, res) {
   }
 
   // Route: Static files
-  if (pathname === '/' || pathname === '/index.html') {
+  if (pathname === '/') {
+    const defaultToken = getDefaultSessionToken();
+    if (defaultToken) {
+      return serveSessionUI(res, defaultToken);
+    }
     return serveStatic(res, 'index.html');
   }
 
+  if (pathname === '/index.html') {
+    return serveStatic(res, 'index.html');
+  }
+
+  if (pathname.startsWith('/remote/')) {
+    return serveStatic(res, pathname.slice(1));
+  }
+
   // 404
   res.writeHead(404);
   res.end('Not found');

package/vercel-server/public/remote/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>{{WORKFLOW_NAME}}</title>
+    <script type="module" crossorigin src="/remote/assets/index-DiKoT5IY.js"></script>
+    <link rel="stylesheet" crossorigin href="/remote/assets/index-dzq5qHNh.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      window.SESSION_TOKEN = "{{SESSION_TOKEN}}";
+      window.WORKFLOW_NAME_TEMPLATE = "{{WORKFLOW_NAME}}";
+    </script>
+  </body>
+</html>