agent-state-machine 2.0.5 → 2.0.7

package/lib/llm.js

@@ -52,6 +52,10 @@ export function buildPrompt(context, options) {
     delete cleanContext._loop;
     delete cleanContext._config;
 
+    // Add the actual prompt
+    parts.push('# Task\n\n');
+    parts.push(options.prompt);
+
     if (Object.keys(cleanContext).length > 0) {
       parts.push('# Current Context\n');
       parts.push('```json\n');
@@ -73,10 +77,6 @@ export function buildPrompt(context, options) {
     parts.push('\n---\n');
   }
 
-  // Add the actual prompt
-  parts.push('# Task\n\n');
-  parts.push(options.prompt);
-
   return parts.join('\n');
 }
 

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() {

package/package.json

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

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/ui/index.html

@@ -107,6 +107,14 @@
             white-space: pre-wrap;
         }
 
+        .agent-prompt summary {
+            list-style: none;
+        }
+
+        .agent-prompt summary::-webkit-details-marker {
+            display: none;
+        }
+
         @keyframes blink {
 
             0%,
@@ -674,11 +682,61 @@
 
                 // 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">
+                                <details className="agent-prompt">
+                                    <summary className="rtl-safe px-5 py-4 divider cursor-pointer">
+                                        <div className="flex items-center justify-between gap-4">
+                                            <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="mt-3 text-[11px] tracking-[0.18em] font-semibold uppercase" style={{ color: "var(--muted)" }}>
+                                            Show Prompt ▼
+                                        </div>
+                                    </summary>
+                                    <div className="px-5 py-4">
+                                        <div className="markdown-body text-[13px] leading-relaxed overflow-x-auto">{item.prompt}</div>
+                                    </div>
+                                </details>
+                            </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 +772,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 +793,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 +810,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
                     );
                 }
 
@@ -844,17 +908,9 @@
 
                                     <div className="flex items-center justify-between gap-4">
                                         <div className="min-w-0 flex items-center gap-3">
-                                            <div className="text-[12px] tracking-[0.24em] font-semibold whitespace-nowrap" style={{ color: "var(--muted)" }}>
-                                                {token ? "REMOTE FOLLOW" : "LOCAL TERMINAL"}
-                                            </div>
-
-                                            <span className="text-[12px] tracking-[0.24em] font-semibold" style={{ color: "var(--muted)" }}>•</span>
-
-                                            <h1 className="text-[14px] tracking-[0.06em] font-semibold truncate">
+                                            <div className="text-[12px] tracking-[0.24em] font-semibold uppercase whitespace-nowrap" style={{ color: "var(--muted)" }}>
                                                 {workflowName || "WORKFLOW"}
-                                            </h1>
-
-                                            <span className="text-[12px] tracking-[0.24em] font-semibold" style={{ color: "var(--muted)" }}>•</span>
+                                            </div>
 
                                             <StatusBadge status={status} />
                                         </div>
@@ -936,4 +992,4 @@
     </script>
 </body>
 
-</html>
+</html>