agent-state-machine 2.0.7 → 2.0.10

package/README.md

@@ -4,7 +4,7 @@ A workflow runner for building **linear, stateful agent workflows** in plain Jav
 
 You write normal `async/await` code. The runtime handles:
 - **Auto-persisted** `memory` (saved to disk on mutation)
-- **Human-in-the-loop** blocking via `initialPrompt()` or agent-driven interactions
+- **Human-in-the-loop** blocking via `askHuman()` or agent-driven interactions
 - Local **JS agents** + **Markdown agents** (LLM-powered)
 
 ---
@@ -80,7 +80,7 @@ workflows/<name>/
  * - Interactive prompts pause and wait for user input
  */
 
-import { agent, memory, initialPrompt, parallel } from 'agent-state-machine';
+import { agent, memory, askHuman, parallel } from 'agent-state-machine';
 import { notify } from './scripts/mac-notification.js';
 
 // Model configuration (also supports models in a separate config export)
@@ -101,7 +101,7 @@ export default async function() {
   console.log('Starting project-builder workflow...');
 
   // Example: Get user input (saved to memory)
-  const userLocation = await initialPrompt('Where do you live?');
+  const userLocation = await askHuman('Where do you live?');
   console.log('Example prompt answer:', userLocation);
 
   const userInfo = await agent('yoda-name-collector');
@@ -168,7 +168,7 @@ A persisted object for your workflow.
 memory.count = (memory.count || 0) + 1;
 ```
 
-### `initialPrompt(question, options?)`
+### `askHuman(question, options?)`
 
 Gets user input.
 
@@ -176,7 +176,7 @@ Gets user input.
 - Otherwise it creates `interactions/<slug>.md` and blocks until you confirm in the terminal (or respond in the browser).
 
 ```js
-const repo = await initialPrompt('What repo should I work on?', { slug: 'repo' });
+const repo = await askHuman('What repo should I work on?', { slug: 'repo' });
 memory.repo = repo;
 ```
 

package/lib/index.js

@@ -11,7 +11,7 @@ import {
   WorkflowRuntime,
   agent,
   executeAgent,
-  initialPrompt,
+  askHuman,
   parallel,
   parallelLimit,
   getMemory,
@@ -82,7 +82,7 @@ export {
   WorkflowRuntime,
   agent,
   executeAgent,
-  initialPrompt,
+  askHuman,
   parallel,
   parallelLimit,
   getCurrentRuntime,
@@ -99,7 +99,7 @@ const api = {
   WorkflowRuntime,
   agent,
   executeAgent,
-  initialPrompt,
+  askHuman,
   parallel,
   parallelLimit,
   getCurrentRuntime,

package/lib/runtime/index.js

@@ -14,7 +14,7 @@ export {
 } from './runtime.js';
 
 export { agent, executeAgent } from './agent.js';
-export { initialPrompt } from './prompt.js';
+export { askHuman } from './prompt.js';
 export { parallel, parallelLimit } from './parallel.js';
 export { createMemoryProxy } from './memory.js';
 

package/lib/runtime/prompt.js

@@ -27,10 +27,10 @@ const C = {
  * @param {string} options.slug - Unique identifier for this prompt (for file)
  * @returns {Promise<string>} User's response
  */
-export async function initialPrompt(question, options = {}) {
+export async function askHuman(question, options = {}) {
   const runtime = getCurrentRuntime();
   if (!runtime) {
-    throw new Error('initialPrompt() must be called within a workflow context');
+    throw new Error('askHuman() must be called within a workflow context');
   }
 
   const slug = options.slug || generateSlug(question);
@@ -121,7 +121,7 @@ function askQuestionWithRemote(runtime, question, slug, memoryKey) {
           console.log(`\n${C.green}✓ Answered via remote${C.reset}`);
           resolve(response);
         },
-        reject: () => {} // Prompts don't reject
+        reject: () => { } // Prompts don't reject
       };
     }
 

package/lib/setup.js

@@ -59,7 +59,7 @@ async function setup(workflowName) {
  * - Interactive prompts pause and wait for user input
  */
 
-import { agent, memory, initialPrompt, parallel } from 'agent-state-machine';
+import { agent, memory, askHuman, parallel } from 'agent-state-machine';
 import { notify } from './scripts/mac-notification.js';
 
 // Model configuration (also supports models in a separate config export)
@@ -80,7 +80,7 @@ export default async function() {
   console.log('Starting ${workflowName} workflow...');
 
   // Example: Get user input (saved to memory)
-  const userLocation = await initialPrompt('Where do you live?');
+  const userLocation = await askHuman('Where do you live?');
   console.log('Example prompt answer:', userLocation);
 
   const userInfo = await agent('yoda-name-collector');
@@ -339,13 +339,13 @@ state-machine reset-hard ${workflowName}
 Edit \`workflow.js\` - write normal async JavaScript:
 
 \\\`\\\`\\\`js
-import { agent, memory, initialPrompt, parallel } from 'agent-state-machine';
+import { agent, memory, askHuman, parallel } from 'agent-state-machine';
 
 export default async function() {
   console.log('Starting project-builder workflow...');
 
   // Example: Get user input (saved to memory)
-  const userLocation = await initialPrompt('Where do you live?');
+  const userLocation = await askHuman('Where do you live?');
   console.log('Example prompt answer:', userLocation);
 
   const userInfo = await agent('yoda-name-collector');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-state-machine",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "type": "module",
   "description": "A workflow orchestrator for running agents and scripts in sequence with state management",
   "main": "lib/index.js",
@@ -32,5 +32,8 @@
     "vercel-server/public",
     "vercel-server/ui",
     "vercel-server/api"
-  ]
+  ],
+  "devDependencies": {
+    "nodemailer": "^7.0.11"
+  }
 }

package/vercel-server/ui/index.html

@@ -219,7 +219,7 @@
     </script>
 
     <script type="text/babel">
-        const { useEffect, useMemo, useState } = React;
+        const { useEffect, useMemo, useRef, useState } = React;
 
         const Icon = ({ name }) => {
             const common = "w-4 h-4";
@@ -253,14 +253,6 @@
                     </svg>
                 );
             }
-            if (name === "sort") {
-                return (
-                    <svg className={common} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path strokeLinecap="round" d="M7 4h14M7 8h10M7 12h6" />
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 20V4m0 16 2-2m-2 2-2-2" />
-                    </svg>
-                );
-            }
             return null;
         };
 
@@ -396,6 +388,18 @@
         function InteractionForm({ interaction, onSubmit, disabled }) {
             const [response, setResponse] = useState("");
             const [submitting, setSubmitting] = useState(false);
+            const textareaRef = useRef(null);
+
+            useEffect(() => {
+                setResponse(interaction.question || "");
+            }, [interaction.slug, interaction.question]);
+
+            useEffect(() => {
+                const el = textareaRef.current;
+                if (!el) return;
+                el.style.height = "auto";
+                el.style.height = `${el.scrollHeight}px`;
+            }, [response]);
 
             const handleSubmit = async (e) => {
                 e.preventDefault();
@@ -416,8 +420,8 @@
                             <div className="text-[11px] tracking-[0.22em] font-semibold" style={{ color: "var(--muted)" }}>
                                 INPUT REQUIRED
                             </div>
-                            <div className="mt-2 text-[13px] leading-relaxed markdown-body">
-                                {interaction.question || "Please provide your input."}
+                            <div className="mt-2 text-[12px] tracking-[0.16em] uppercase" style={{ color: "var(--muted)" }}>
+                                Safe to delete all text and type your answer.
                             </div>
                         </div>
                         <div className="flex items-center gap-2">
@@ -427,17 +431,17 @@
 
                     <form onSubmit={handleSubmit} className="px-6 py-5">
                         <textarea
+                            ref={textareaRef}
                             value={response}
                             onChange={(e) => setResponse(e.target.value)}
                             disabled={disabled || submitting}
-                            placeholder="Type response…"
                             className="w-full rounded-2xl hairline p-4 text-[13px] leading-relaxed min-h-[120px]"
                             style={{
                                 background: "transparent",
                                 color: "var(--fg)",
                                 borderColor: "var(--hairline)",
                                 outline: "none",
-                                resize: "vertical",
+                                resize: "none",
                                 direction: "ltr",
                                 textAlign: "left",
                             }}
@@ -471,7 +475,6 @@
                 if (saved === "light" || saved === "dark") return saved;
                 return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
             });
-            const [sortNewest, setSortNewest] = useState(true);
             const [pendingInteraction, setPendingInteraction] = useState(null);
 
             const token =
@@ -630,12 +633,11 @@
             };
 
             const toggleTheme = () => setTheme((p) => (p === "dark" ? "light" : "dark"));
-            const toggleSort = () => setSortNewest((p) => !p);
 
             const formatTime = (ts) =>
                 new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
 
-            const visibleEvents = sortNewest ? history : [...history].reverse();
+            const visibleEvents = [...history].reverse();
 
             const wrapIO = (side, children, key) => (
                 <div key={key} className={`io-row ${side === "right" ? "io-right" : side === "center" ? "io-center" : "io-left"}`}>
@@ -667,14 +669,12 @@
                     return wrapIO(
                         "center",
                         <section className="text-center">
-                            <div className="divider" />
                             <div className="py-4">
                                 <div className="text-[11px] tracking-[0.24em] font-semibold" style={{ color: "var(--muted)" }}>
                                     {item.event.replace("WORKFLOW_", "")} • {time}
                                 </div>
                                 {item.error && <div className="mt-3 text-[13px] leading-relaxed markdown-body">{item.error}</div>}
                             </div>
-                            <div className="divider" />
                         </section>,
                         idx
                     );
@@ -916,15 +916,6 @@
                                         </div>
 
                                         <div className="flex items-center gap-2">
-                                            <Toggle
-                                                onClick={() => setSortNewest((p) => !p)}
-                                                label=""
-                                                title={sortNewest ? "Newest first" : "Oldest first"}
-                                            >
-                                                <span className={`transition-transform duration-100 ${!sortNewest ? "rotate-180" : ""}`}>
-                                                    <Icon name="sort" />
-                                                </span>
-                                            </Toggle>
                                             <Toggle onClick={() => setTheme((p) => (p === "dark" ? "light" : "dark"))} label="" title="Toggle theme">
                                                 {theme === "dark" ? <Icon name="sun" /> : <Icon name="moon" />}
                                             </Toggle>
@@ -935,19 +926,6 @@
                                 </div>
                             </header>
 
-                            {/* Pending interaction always left */}
-                            {pendingInteraction && (
-                                <div className="io-row io-left mb-8">
-                                    <div className="io-card">
-                                        <InteractionForm
-                                            interaction={pendingInteraction}
-                                            onSubmit={handleSubmit}
-                                            disabled={status !== "connected"}
-                                        />
-                                    </div>
-                                </div>
-                            )}
-
                             {/* Error stays right */}
                             {error && (
                                 <div className="io-row io-right mb-8">
@@ -974,6 +952,18 @@
                                 {visibleEvents.map(renderEvent)}
                             </main>
 
+                            {pendingInteraction && (
+                                <div className="io-row io-left mt-10">
+                                    <div className="io-card">
+                                        <InteractionForm
+                                            interaction={pendingInteraction}
+                                            onSubmit={handleSubmit}
+                                            disabled={status !== "connected"}
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
                             <footer className="mt-16 pt-8 divider">
                                 <div className="center-wrap text-center">
                                     <div className="py-6 text-[11px] tracking-[0.28em] font-semibold" style={{ color: "var(--muted)" }}>