agent-state-machine 2.0.4 → 2.0.6

package/lib/remote/client.js

@@ -164,6 +164,18 @@ export class RemoteClient {
     });
   }
 
+  /**
+   * Sync history to remote (for manual edits to history.jsonl)
+   * @param {Array} history - Array of history entries
+   */
+  async sendHistorySync(history = []) {
+    await this.send({
+      type: 'history_sync',
+      sessionToken: this.sessionToken,
+      history,
+    });
+  }
+
   /**
    * Send an event to the server
    * @param {object} event - Event object with timestamp, event type, etc.

package/lib/runtime/agent.js

@@ -26,26 +26,24 @@ export async function agent(name, params = {}) {
   }
 
   console.log(`  [Agent: ${name}] Starting...`);
-  runtime.prependHistory({
-    event: 'AGENT_STARTED',
-    agent: name
-  });
 
   try {
     const result = await executeAgent(runtime, name, params);
 
-    let prompt = undefined;
     if (result && typeof result === 'object' && result._debug_prompt) {
-      prompt = result._debug_prompt;
       delete result._debug_prompt;
     }
 
     console.log(`  [Agent: ${name}] Completed`);
+    if (runtime._agentSuppressCompletion?.has(name)) {
+      runtime._agentSuppressCompletion.delete(name);
+      return result;
+    }
+
     runtime.prependHistory({
       event: 'AGENT_COMPLETED',
       agent: name,
-      output: result,
-      prompt: prompt
+      output: result
     });
 
     return result;
@@ -119,6 +117,8 @@ async function executeJSAgent(runtime, agentPath, name, params) {
     throw new Error(`Agent ${name} does not export a function`);
   }
 
+  logAgentStart(runtime, name);
+
   // Build context
   const context = {
     ...runtime._rawMemory,
@@ -135,7 +135,7 @@ async function executeJSAgent(runtime, agentPath, name, params) {
 
   // Handle interaction response from JS agent
   if (result && result._interaction) {
-    const interactionResponse = await handleInteraction(runtime, result._interaction);
+    const interactionResponse = await handleInteraction(runtime, result._interaction, name);
     
     // Use the interaction response as the primary output if it exists
     // This allows the workflow to receive the user's input directly
@@ -176,7 +176,7 @@ async function executeJSAgent(runtime, agentPath, name, params) {
  * Execute a Markdown agent (prompt-based)
  */
 async function executeMDAgent(runtime, agentPath, name, params) {
-  const { llm, parseJSON, parseInteractionRequest } = await import('../llm.js');
+  const { llm, buildPrompt, parseJSON, parseInteractionRequest } = await import('../llm.js');
 
   const content = fs.readFileSync(agentPath, 'utf-8');
   const { config, prompt } = parseMarkdownAgent(content);
@@ -201,6 +201,14 @@ async function executeMDAgent(runtime, agentPath, name, params) {
 
   const model = config.model || 'fast';
 
+  const fullPrompt = buildPrompt(context, {
+    model,
+    prompt: interpolatedPrompt,
+    includeContext: config.includeContext !== 'false'
+  });
+
+  logAgentStart(runtime, name, fullPrompt);
+
   console.log(`    Using model: ${model}`);
 
   const response = await llm(context, {
@@ -247,7 +255,7 @@ async function executeMDAgent(runtime, agentPath, name, params) {
       slug,
       targetKey,
       content: interactionContent
-    });
+    }, name);
 
     // Return the user's response as the agent result
     return { [outputKey]: userResponse, _debug_prompt: response.fullPrompt };
@@ -334,7 +342,9 @@ function sanitizeSlug(input) {
 /**
  * Handle interaction (create file, wait for user, return response)
  */
-async function handleInteraction(runtime, interaction) {
+async function handleInteraction(runtime, interaction, agentName) {
+  const effectiveAgentName = typeof agentName === 'string' ? agentName : null;
+
   const slug = sanitizeSlug(interaction.slug);
   const targetKey = String(interaction.targetKey || slug);
   const content = String(interaction.content || '').trim();
@@ -357,8 +367,35 @@ ${content}
     question: content
   });
 
+  if (effectiveAgentName) {
+    runtime._agentSuppressCompletion?.add(effectiveAgentName);
+    runtime._agentResumeFlags?.add(effectiveAgentName);
+  }
+
   // Block and wait for user input (instead of throwing)
   const response = await runtime.waitForInteraction(filePath, slug, targetKey);
 
   return response;
 }
+
+function logAgentStart(runtime, name, prompt) {
+  if (runtime._agentResumeFlags?.has(name)) {
+    runtime._agentResumeFlags.delete(name);
+    runtime.prependHistory({
+      event: 'AGENT_RESUMED',
+      agent: name
+    });
+    return;
+  }
+
+  const entry = {
+    event: 'AGENT_STARTED',
+    agent: name
+  };
+
+  if (prompt) {
+    entry.prompt = prompt;
+  }
+
+  runtime.prependHistory(entry);
+}

package/lib/runtime/runtime.js

@@ -84,6 +84,10 @@ export class WorkflowRuntime {
     this.remoteEnabled = false;
     this.remoteUrl = null;
     this.pendingRemoteInteraction = null; // { slug, targetKey, resolve, reject }
+
+    // Agent interaction tracking for history logging
+    this._agentResumeFlags = new Set();
+    this._agentSuppressCompletion = new Set();
   }
 
   ensureDirectories() {
@@ -164,6 +168,9 @@ export class WorkflowRuntime {
 
     const line = JSON.stringify(entry) + '\n';
 
+    // Track when we're writing to avoid triggering the file watcher
+    this._lastHistoryWrite = Date.now();
+
     // Prepend to file (read existing, write new + existing)
     let existing = '';
     if (fs.existsSync(this.historyFile)) {
@@ -539,16 +546,63 @@ export class WorkflowRuntime {
     this.remoteEnabled = true;
     this.remoteUrl = this.remoteClient.getRemoteUrl();
 
+    // Watch history.jsonl for manual edits and sync to remote
+    this.startHistoryWatcher();
+
     console.log(`\n${C.cyan}${C.bold}Remote follow enabled${C.reset}`);
     console.log(`  ${C.dim}URL:${C.reset} ${this.remoteUrl}\n`);
 
     return this.remoteUrl;
   }
 
+  /**
+   * Start watching history.jsonl for manual edits
+   */
+  startHistoryWatcher() {
+    if (this.historyWatcher) return;
+
+    // Debounce to avoid multiple syncs for rapid changes
+    let debounceTimer = null;
+
+    try {
+      this.historyWatcher = fs.watch(this.historyFile, (eventType) => {
+        if (eventType !== 'change') return;
+
+        // Debounce: wait 300ms after last change before syncing
+        if (debounceTimer) clearTimeout(debounceTimer);
+
+        debounceTimer = setTimeout(async () => {
+          // Don't sync if we just wrote to the file ourselves (within 500ms)
+          if (this._lastHistoryWrite && Date.now() - this._lastHistoryWrite < 500) return;
+
+          if (this.remoteClient && this.remoteEnabled) {
+            const history = this.loadHistory();
+            await this.remoteClient.sendHistorySync(history);
+            console.log(`${C.dim}Remote: History synced from file${C.reset}`);
+          }
+        }, 300);
+      });
+    } catch (err) {
+      // File might not exist yet, that's ok
+    }
+  }
+
+  /**
+   * Stop watching history.jsonl
+   */
+  stopHistoryWatcher() {
+    if (this.historyWatcher) {
+      this.historyWatcher.close();
+      this.historyWatcher = null;
+    }
+  }
+
   /**
    * Disable remote follow mode and disconnect
    */
   async disableRemote() {
+    this.stopHistoryWatcher();
+
     if (this.remoteClient) {
       await this.remoteClient.disconnect();
       this.remoteClient = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-state-machine",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "type": "module",
   "description": "A workflow orchestrator for running agents and scripts in sequence with state management",
   "main": "lib/index.js",

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

@@ -2,14 +2,14 @@
  * File: /vercel-server/api/events/[token].js
  *
  * SSE endpoint for browser connections
- * Streams history and real-time events to connected browsers
+ * Streams events to connected browsers from a single source of truth (events list)
  */
 
 import {
   getSession,
-  getHistory,
-  redis,
-  KEYS,
+  getEvents,
+  getEventsLength,
+  getEventsRange,
   refreshSession,
 } from '../../lib/redis.js';
 
@@ -48,32 +48,15 @@ export default async function handler(req, res) {
       workflowName: session.workflowName,
     })}\n\n`);
 
-    // Send existing history
-    const history = await getHistory(token);
+    // Send all existing events (single source of truth)
+    const events = await getEvents(token);
     res.write(`data: ${JSON.stringify({
       type: 'history',
-      entries: history,
+      entries: events,
     })}\n\n`);
 
-    // Poll for new events
-    const eventsListKey = `${KEYS.events(token)}:list`;
-    let lastEventIndex = 0;
-
-    // If history is empty, seed from the event list to catch early events.
-    const currentLength = await redis.llen(eventsListKey);
-    // if (history.length === 0 && currentLength > 0) {
-    //   const existingEvents = await redis.lrange(eventsListKey, 0, -1);
-    //   const entries = existingEvents
-    //     .map((event) => (typeof event === 'object' ? event : JSON.parse(event)))
-    //     .filter(Boolean);
-    //   res.write(`data: ${JSON.stringify({
-    //     type: 'history',
-    //     entries,
-    //   })}\n\n`);
-    //   lastEventIndex = currentLength;
-    // } else {
-    //   lastEventIndex = currentLength;
-    // }
+    // Track current position for polling new events
+    let lastEventIndex = await getEventsLength(token);
 
     const pollInterval = setInterval(async () => {
       try {
@@ -81,15 +64,19 @@ export default async function handler(req, res) {
         await refreshSession(token);
 
         // Check for new events
-        const newLength = await redis.llen(eventsListKey);
+        const newLength = await getEventsLength(token);
 
         if (newLength > lastEventIndex) {
-          // Get new events (newest first)
-          const newEvents = await redis.lrange(eventsListKey, 0, newLength - lastEventIndex - 1);
-
-          for (const event of newEvents.reverse()) {
-            const eventData = typeof event === 'object' ? event : JSON.parse(event);
-            res.write(`data: ${JSON.stringify(eventData)}\n\n`);
+          // Get new events (they're prepended, so newest are at the start)
+          const newCount = newLength - lastEventIndex;
+          const newEvents = await getEventsRange(token, 0, newCount - 1);
+
+          // Send in chronological order (oldest first of the new batch)
+          for (const eventData of newEvents.reverse()) {
+            res.write(`data: ${JSON.stringify({
+              type: 'event',
+              ...eventData,
+            })}\n\n`);
           }
 
           lastEventIndex = newLength;
@@ -106,14 +93,13 @@ export default async function handler(req, res) {
       } catch (err) {
         console.error('Error polling events:', err);
       }
-    }, 2000);
+    }, 1000); // Poll every 1 second for faster updates
 
     // Clean up on client disconnect
     req.on('close', () => {
       clearInterval(pollInterval);
     });
 
-    // For Vercel, we need to keep the connection alive but also respect function timeout
     // Send keepalive pings
     const keepaliveInterval = setInterval(() => {
       res.write(': keepalive\n\n');

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

@@ -6,8 +6,7 @@
 
 import {
   getSession,
-  addHistoryEvent,
-  publishEvent,
+  addEvent,
   redis,
   KEYS,
 } from '../../lib/redis.js';
@@ -68,22 +67,14 @@ export default async function handler(req, res) {
     // Set TTL on pending list
     await redis.expire(pendingKey, 300); // 5 minutes
 
-    // Log event to history (include answer preview)
-    const event = {
+    // Log event to events list (single source of truth for UI)
+    await addEvent(token, {
       timestamp: new Date().toISOString(),
       event: 'INTERACTION_SUBMITTED',
       slug,
       targetKey: targetKey || `_interaction_${slug}`,
       answer: response.substring(0, 200) + (response.length > 200 ? '...' : ''),
       source: 'remote',
-    };
-
-    await addHistoryEvent(token, event);
-
-    // Notify other browsers
-    await publishEvent(token, {
-      type: 'event',
-      ...event,
     });
 
     return res.status(200).json({ success: true });

package/vercel-server/api/ws/cli.js

@@ -12,9 +12,8 @@ import {
   getSession,
   updateSession,
   setCLIConnected,
-  addHistoryEvent,
-  addHistoryEvents,
-  publishEvent,
+  addEvent,
+  setEvents,
   redis,
   KEYS,
 } from '../../lib/redis.js';
@@ -59,19 +58,8 @@ async function handlePost(req, res) {
         // Create session
         await createSession(sessionToken, { workflowName, cliConnected: true });
 
-        // Replace any existing history and event stream with the provided snapshot
-        await redis.del(KEYS.history(sessionToken), `${KEYS.events(sessionToken)}:list`);
-
-        // Store initial history
-        if (history && history.length > 0) {
-          await addHistoryEvents(sessionToken, history);
-        }
-
-        // Notify browsers
-        await publishEvent(sessionToken, {
-          type: 'cli_connected',
-          workflowName,
-        });
+        // Replace events with the provided history snapshot (single source of truth)
+        await setEvents(sessionToken, history || []);
 
         return res.status(200).json({ success: true });
       }
@@ -82,9 +70,10 @@ async function handlePost(req, res) {
         // Update session as connected
         await setCLIConnected(sessionToken, true);
 
-        // Notify browsers
-        await publishEvent(sessionToken, {
-          type: 'cli_reconnected',
+        // Add reconnect event to events list
+        await addEvent(sessionToken, {
+          timestamp: new Date().toISOString(),
+          event: 'CLI_RECONNECTED',
           workflowName,
         });
 
@@ -104,14 +93,8 @@ async function handlePost(req, res) {
         delete historyEvent.sessionToken;
         delete historyEvent.type;
 
-        // Add to history
-        await addHistoryEvent(sessionToken, historyEvent);
-
-        // Notify browsers
-        await publishEvent(sessionToken, {
-          type: 'event',
-          ...historyEvent,
-        });
+        // Add to events list (single source of truth)
+        await addEvent(sessionToken, historyEvent);
 
         return res.status(200).json({ success: true });
       }
@@ -122,15 +105,25 @@ async function handlePost(req, res) {
         // Mark CLI as disconnected
         await setCLIConnected(sessionToken, false);
 
-        // Notify browsers
-        await publishEvent(sessionToken, {
-          type: 'cli_disconnected',
+        // Add disconnect event to events list
+        await addEvent(sessionToken, {
+          timestamp: new Date().toISOString(),
+          event: 'CLI_DISCONNECTED',
           reason,
         });
 
         return res.status(200).json({ success: true });
       }
 
+      case 'history_sync': {
+        const { history } = body;
+
+        // Replace events with synced history (for manual edits to history.jsonl)
+        await setEvents(sessionToken, history || []);
+
+        return res.status(200).json({ success: true });
+      }
+
       default:
         return res.status(400).json({ error: `Unknown message type: ${type}` });
     }

package/vercel-server/ui/index.html

@@ -674,11 +674,54 @@
 
                 // CENTERED inside card
                 if (item.event === "AGENT_STARTED") {
+                    if (item.prompt) {
+                        return wrapIO(
+                            "left",
+                            <section className="hairline rounded-2xl rounded-tl-none overflow-hidden io-in">
+                                <div className="rtl-safe px-5 py-4 divider flex items-center justify-between">
+                                    <div>
+                                        <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
+                                            AGENT STARTED
+                                        </div>
+                                        <div className="mt-1 text-[11px] tracking-[0.14em]" style={{ color: "var(--muted)" }}>
+                                            {(item.agent || "").toString()} • {time}
+                                        </div>
+                                    </div>
+                                    <CopyButton text={item.prompt} />
+                                </div>
+                                <div className="px-5 py-4">
+                                    <div className="markdown-body text-[13px] leading-relaxed overflow-x-auto">{item.prompt}</div>
+                                </div>
+                            </section>,
+                            idx
+                        );
+                    }
+
+                    return wrapIO(
+                        "left",
+                        <section className="hairline rounded-2xl rounded-tl-none px-6 py-5 io-in">
+                            <div className="rtl-safe flex items-center justify-between gap-4">
+                                <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
+                                    AGENT STARTED
+                                </div>
+                                <span className="text-[11px] tracking-[0.14em]" style={{ color: "var(--muted)" }}>
+                                    {time}
+                                </span>
+                            </div>
+                            <div className="mt-3 text-[13px] leading-relaxed">
+                                <span className="font-semibold">{item.agent}</span>
+                            </div>
+                        </section>,
+                        idx
+                    );
+                }
+
+                if (item.event === "AGENT_RESUMED") {
                     return wrapIO(
                         "center",
                         <section className="meta-center">
                             <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
-                                AGENT STARTED
+                                AGENT RESUMED
                             </div>
                             <div className="mt-2 text-[13px] leading-relaxed">
                                 <span className="font-semibold">{item.agent}</span>
@@ -714,8 +757,8 @@
 
                 if (item.event === "INTERACTION_REQUESTED" || item.event === "PROMPT_REQUESTED") {
                     return wrapIO(
-                        "left",
-                        <section className="hairline rounded-2xl px-6 py-5 io-in">
+                        "center",
+                        <section className="hairline rounded-2xl px-6 py-5">
                             <div className="rtl-safe flex items-center justify-between gap-4">
                                 <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
                                     INTERVENTION REQUIRED
@@ -735,8 +778,8 @@
                 if (item.event === "PROMPT_ANSWERED" || item.event === "INTERACTION_SUBMITTED") {
                     const isManual = item.source === "remote";
                     return wrapIO(
-                        "left",
-                        <section className="hairline rounded-2xl px-6 py-5 io-in">
+                        "center",
+                        <section className="hairline rounded-2xl px-6 py-5">
                             <div className="rtl-safe flex items-center justify-between gap-4">
                                 <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
                                     {isManual ? "RESOLVED VIA BROWSER" : "USER ANSWERED"}
@@ -752,31 +795,37 @@
                 }
 
                 if (item.event === "AGENT_COMPLETED" || item.event === "INTERACTION_RESOLVED") {
-                    return (
-                        <React.Fragment key={idx}>
-                            {wrapIO(
-                                "center",
-                                <section className="meta-center">
+                    if (item.event === "AGENT_COMPLETED") {
+                        return wrapIO(
+                            "right",
+                            <section className="io-out">
+                                <section className="meta-center mb-4">
                                     <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
                                         DONE
                                     </div>
                                     <div className="mt-1 text-[11px] tracking-[0.14em]" style={{ color: "var(--muted)" }}>
-                                        {(item.agent || item.slug || "").toString()} • {time}
+                                        {(item.agent || "").toString()} • {time}
                                     </div>
-                                </section>,
-                                `done-meta-${idx}`
-                            )}
-
-                            {(item.output || item.result) && wrapIO(
-                                "right",
-                                <section className="io-out">
+                                </section>
+                                {(item.output || item.result) && (
                                     <JsonView data={item.output || item.result} label="OUTPUT / RESPONSE" align="right" />
-                                </section>,
-                                `done-io-${idx}`
-                            )}
+                                )}
+                            </section>,
+                            idx
+                        );
+                    }
 
-                            {item.prompt ? renderPromptInputCard(item.prompt, `prompt-${idx}`) : null}
-                        </React.Fragment>
+                    return wrapIO(
+                        "center",
+                        <section className="meta-center">
+                            <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
+                                DONE
+                            </div>
+                            <div className="mt-1 text-[11px] tracking-[0.14em]" style={{ color: "var(--muted)" }}>
+                                {(item.slug || "").toString()} • {time}
+                            </div>
+                        </section>,
+                        idx
                     );
                 }
 
@@ -936,4 +985,4 @@
     </script>
 </body>
 
-</html>
+</html>