npm - agent-state-machine - Versions diffs - 1.4.2 → 2.0.1 - Mend

agent-state-machine 1.4.2 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +2 -6
package/bin/cli.js +4 -19
package/package.json +4 -2
package/vercel-server/api/events/[token].js +119 -0
package/vercel-server/api/history/[token].js +51 -0
package/vercel-server/api/session/[token].js +49 -0
package/vercel-server/api/submit/[token].js +94 -0
package/vercel-server/api/ws/cli.js +186 -0
package/vercel-server/local-server.js +30 -329
package/vercel-server/public/index.html +17 -5
package/{lib → vercel-server}/ui/index.html +339 -114
package/lib/ui/server.js +0 -150

package/vercel-server/local-server.js CHANGED Viewed

@@ -342,6 +342,35 @@ async function handleSubmitPost(req, res, token) {
 /**
  * Serve session UI
  */
+const MASTER_TEMPLATE_PATH = path.join(__dirname, 'ui', 'index.html');
+/**
+ * Get session HTML by reading the master template from lib/ui/index.html
+ */
+function getSessionHTML(token, workflowName) {
+  try {
+    const template = fs.readFileSync(MASTER_TEMPLATE_PATH, 'utf8');
+    return template
+      .replace(/\{\{SESSION_TOKEN\}\}/g, token)
+      .replace(/\{\{WORKFLOW_NAME\}\}/g, workflowName || 'Workflow');
+  } catch (err) {
+    console.error('Error loading master template:', err);
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head><title>Error</title></head>
+        <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>
+        </body>
+      </html>
+    `;
+  }
+}
 function serveSessionUI(res, token) {
   const session = getSession(token);
@@ -359,340 +388,12 @@ function serveSessionUI(res, token) {
     `);
   }
-  // Read the session UI template from api/session/[token].js and extract HTML
-  // For simplicity, serve a standalone version
   const html = getSessionHTML(token, session.workflowName);
   res.writeHead(200, { 'Content-Type': 'text/html' });
   res.end(html);
 }
-/**
- * Get session HTML (inline version for local dev)
- */
-function getSessionHTML(token, workflowName) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${workflowName} - Remote Follow</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <style>
-    .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-  </style>
-</head>
-<body class="bg-zinc-950 text-zinc-100 min-h-screen">
-  <div id="root"></div>
-  <script>
-    window.SESSION_TOKEN = '${token}';
-    window.WORKFLOW_NAME = '${workflowName}';
-  </script>
-  <script type="text/babel">
-    const { useState, useEffect, useRef } = React;
-    function StatusBadge({ status }) {
-      const colors = {
-        connected: 'bg-green-500',
-        disconnected: 'bg-red-500',
-        connecting: 'bg-yellow-500 animate-pulse-slow',
-      };
-      const labels = {
-        connected: 'Live',
-        disconnected: 'CLI Offline',
-        connecting: 'Connecting...',
-      };
-      return (
-        <div className="flex items-center gap-2">
-          <div className={\`w-2 h-2 rounded-full \${colors[status] || colors.disconnected}\`}></div>
-          <span className="text-xs uppercase tracking-wider text-zinc-400">{labels[status] || status}</span>
-        </div>
-      );
-    }
-    function CopyButton({ text }) {
-      const [copied, setCopied] = useState(false);
-      const handleCopy = async () => {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      };
-      return (
-        <button onClick={handleCopy} className="px-2 py-1 text-xs bg-zinc-700 hover:bg-zinc-600 rounded">
-          {copied ? 'Copied!' : 'Copy'}
-        </button>
-      );
-    }
-    function JsonView({ data, label }) {
-      const [isRaw, setIsRaw] = useState(false);
-      const jsonStr = JSON.stringify(data, null, 2);
-      return (
-        <div className="bg-zinc-800 rounded-lg overflow-hidden">
-          <div className="flex justify-between items-center px-3 py-2 bg-zinc-700">
-            <span className="text-xs font-medium text-zinc-300">{label}</span>
-            <div className="flex gap-2">
-              <button onClick={() => setIsRaw(!isRaw)} className="text-xs text-zinc-400 hover:text-zinc-200">
-                {isRaw ? 'Clean' : 'Raw'}
-              </button>
-              <CopyButton text={jsonStr} />
-            </div>
-          </div>
-          <pre className="p-3 text-xs overflow-auto max-h-96 text-zinc-300">{jsonStr}</pre>
-        </div>
-      );
-    }
-    function InteractionForm({ interaction, onSubmit, disabled }) {
-      const [response, setResponse] = useState('');
-      const [submitting, setSubmitting] = useState(false);
-      const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!response.trim() || submitting) return;
-        setSubmitting(true);
-        try {
-          await onSubmit(interaction.slug, interaction.targetKey, response.trim());
-          setResponse('');
-        } finally {
-          setSubmitting(false);
-        }
-      };
-      return (
-        <div className="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-6 mb-6">
-          <div className="text-sm font-bold text-yellow-200 mb-2">Input Required</div>
-          <div className="text-sm text-yellow-100/80 mb-4 whitespace-pre-wrap">
-            {interaction.question || 'Please provide your input.'}
-          </div>
-          <form onSubmit={handleSubmit}>
-            <textarea
-              value={response}
-              onChange={(e) => setResponse(e.target.value)}
-              className="w-full p-3 bg-zinc-800 border border-zinc-700 rounded-lg text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-yellow-500"
-              rows={4}
-              placeholder="Enter your response..."
-              disabled={submitting || disabled}
-            />
-            <div className="flex justify-end mt-3 gap-2">
-              {disabled && <span className="text-sm text-red-400">CLI is offline</span>}
-              <button
-                type="submit"
-                disabled={submitting || disabled || !response.trim()}
-                className="px-4 py-2 bg-yellow-600 hover:bg-yellow-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {submitting ? 'Submitting...' : 'Submit'}
-              </button>
-            </div>
-          </form>
-        </div>
-      );
-    }
-    function EventCard({ entry }) {
-      const eventColors = {
-        WORKFLOW_STARTED: 'border-blue-500',
-        WORKFLOW_COMPLETED: 'border-green-500',
-        WORKFLOW_FAILED: 'border-red-500',
-        AGENT_STARTED: 'border-blue-400',
-        AGENT_COMPLETED: 'border-green-400',
-        AGENT_FAILED: 'border-red-400',
-        PROMPT_REQUESTED: 'border-yellow-500',
-        PROMPT_ANSWERED: 'border-yellow-400',
-        INTERACTION_REQUESTED: 'border-yellow-500',
-        INTERACTION_RESOLVED: 'border-yellow-400',
-        INTERACTION_SUBMITTED: 'border-yellow-300',
-      };
-      const borderColor = eventColors[entry.event] || 'border-zinc-600';
-      const time = entry.timestamp ? new Date(entry.timestamp).toLocaleTimeString() : '';
-      return (
-        <div className={\`border-l-2 \${borderColor} pl-4 py-3\`}>
-          <div className="flex justify-between items-start mb-2">
-            <span className="font-medium text-sm">{entry.event}</span>
-            <span className="text-xs text-zinc-500">{time}</span>
-          </div>
-          {entry.agent && <div className="text-xs text-zinc-400 mb-1">Agent: <span className="text-zinc-300">{entry.agent}</span></div>}
-          {entry.slug && <div className="text-xs text-zinc-400 mb-1">Slug: <span className="text-zinc-300">{entry.slug}</span></div>}
-          {entry.question && (
-            <div className="text-xs text-zinc-400 mt-2">
-              <div className="text-zinc-500 mb-1">Question:</div>
-              <div className="text-zinc-300 whitespace-pre-wrap">{entry.question}</div>
-            </div>
-          )}
-          {entry.answer && (
-            <div className="text-xs text-zinc-400 mt-2">
-              <div className="text-zinc-500 mb-1">Answer:</div>
-              <div className="text-zinc-300">{entry.answer}</div>
-            </div>
-          )}
-          {entry.error && <div className="text-xs text-red-400 mt-2">{entry.error}</div>}
-          {entry.output && <div className="mt-2"><JsonView data={entry.output} label="Output" /></div>}
-          {entry.prompt && (
-            <details className="mt-2">
-              <summary className="text-xs text-zinc-500 cursor-pointer hover:text-zinc-300">Show Prompt</summary>
-              <pre className="mt-2 p-2 bg-zinc-800 rounded text-xs text-zinc-400 overflow-auto max-h-48">
-                {typeof entry.prompt === 'string' ? entry.prompt : JSON.stringify(entry.prompt, null, 2)}
-              </pre>
-            </details>
-          )}
-        </div>
-      );
-    }
-    function App() {
-      const [history, setHistory] = useState([]);
-      const [status, setStatus] = useState('connecting');
-      const [pendingInteraction, setPendingInteraction] = useState(null);
-      const [sortNewest, setSortNewest] = useState(true);
-      // Detect pending interactions - scan history for unresolved requests
-      useEffect(() => {
-        if (history.length === 0) {
-          setPendingInteraction(null);
-          return;
-        }
-        // Build set of resolved slugs (scan from newest to oldest)
-        const resolvedSlugs = new Set();
-        let pending = null;
-        for (const entry of history) {
-          const isResolution = entry.event === 'INTERACTION_RESOLVED' ||
-                               entry.event === 'PROMPT_ANSWERED' ||
-                               entry.event === 'INTERACTION_SUBMITTED';
-          const isRequest = entry.event === 'INTERACTION_REQUESTED' ||
-                            entry.event === 'PROMPT_REQUESTED';
-          if (isResolution && entry.slug) {
-            resolvedSlugs.add(entry.slug);
-          }
-          // Find the most recent unresolved request
-          if (isRequest && entry.slug && !resolvedSlugs.has(entry.slug) && !pending) {
-            pending = {
-              slug: entry.slug,
-              targetKey: entry.targetKey || \`_interaction_\${entry.slug}\`,
-              question: entry.question,
-            };
-          }
-        }
-        setPendingInteraction(pending);
-      }, [history]);
-      useEffect(() => {
-        const token = window.SESSION_TOKEN;
-        fetch(\`/api/history/\${token}\`)
-          .then(res => res.json())
-          .then(data => {
-            if (data.entries) setHistory(data.entries);
-            setStatus(data.cliConnected ? 'connected' : 'disconnected');
-          })
-          .catch(() => setStatus('disconnected'));
-        const eventSource = new EventSource(\`/api/events/\${token}\`);
-        eventSource.onopen = () => setStatus('connected');
-        eventSource.onerror = () => setStatus('disconnected');
-        eventSource.onmessage = (e) => {
-          try {
-            const data = JSON.parse(e.data);
-            switch (data.type) {
-              case 'status': setStatus(data.cliConnected ? 'connected' : 'disconnected'); break;
-              case 'history': setHistory(data.entries || []); break;
-              case 'event':
-                // Skip duplicate INTERACTION_SUBMITTED events (from optimistic updates)
-                setHistory(prev => {
-                  if (data.event === 'INTERACTION_SUBMITTED' && data.slug) {
-                    const hasDupe = prev.some(e =>
-                      e.event === 'INTERACTION_SUBMITTED' && e.slug === data.slug
-                    );
-                    if (hasDupe) return prev;
-                  }
-                  return [data, ...prev];
-                });
-                break;
-              case 'cli_connected':
-              case 'cli_reconnected': setStatus('connected'); break;
-              case 'cli_disconnected': setStatus('disconnected'); break;
-            }
-          } catch (err) { console.error(err); }
-        };
-        return () => eventSource.close();
-      }, []);
-      const handleSubmit = async (slug, targetKey, response) => {
-        // Optimistic update - add event immediately to hide form
-        const optimisticEvent = {
-          timestamp: new Date().toISOString(),
-          event: 'INTERACTION_SUBMITTED',
-          slug,
-          targetKey,
-          answer: response.substring(0, 200) + (response.length > 200 ? '...' : ''),
-          source: 'remote',
-        };
-        setHistory(prev => [optimisticEvent, ...prev]);
-        const res = await fetch(\`/api/submit/\${window.SESSION_TOKEN}\`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ slug, targetKey, response }),
-        });
-        if (!res.ok) {
-          // Rollback optimistic update on error
-          setHistory(prev => prev.filter(e => e !== optimisticEvent));
-          const error = await res.json();
-          throw new Error(error.error || 'Failed to submit');
-        }
-      };
-      const sortedHistory = sortNewest ? history : [...history].reverse();
-      return (
-        <div className="max-w-4xl mx-auto p-6">
-          <div className="sticky top-0 bg-zinc-950/95 backdrop-blur py-4 mb-6 border-b border-zinc-800">
-            <div className="flex justify-between items-center">
-              <div>
-                <h1 className="text-xl font-bold text-zinc-100">{window.WORKFLOW_NAME || 'Workflow'}</h1>
-                <div className="text-xs text-zinc-500 mt-1">Remote Follow (Local Dev)</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <button onClick={() => setSortNewest(!sortNewest)} className="text-xs text-zinc-400 hover:text-zinc-200">
-                  {sortNewest ? 'Newest First' : 'Oldest First'}
-                </button>
-                <StatusBadge status={status} />
-              </div>
-            </div>
-          </div>
-          {pendingInteraction && (
-            <InteractionForm interaction={pendingInteraction} onSubmit={handleSubmit} disabled={status !== 'connected'} />
-          )}
-          {status === 'disconnected' && !pendingInteraction && (
-            <div className="bg-red-900/20 border border-red-700/50 rounded-lg p-4 mb-6">
-              <div className="text-sm text-red-200">CLI is disconnected. Waiting for reconnection...</div>
-            </div>
-          )}
-          <div className="space-y-2">
-            {sortedHistory.length === 0 ? (
-              <div className="text-center text-zinc-500 py-12">No events yet. Waiting for workflow activity...</div>
-            ) : (
-              sortedHistory.map((entry, i) => <EventCard key={\`\${entry.timestamp}-\${i}\`} entry={entry} />)
-            )}
-          </div>
-        </div>
-      );
-    }
-    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
-  </script>
-</body>
-</html>`;
-}
+// getSessionHTML was moved up and updated to read from MASTER_TEMPLATE_PATH
 /**
  * Serve static files

package/vercel-server/public/index.html CHANGED Viewed

@@ -17,28 +17,40 @@
       <ol class="space-y-4 text-zinc-300">
         <li class="flex gap-3">
           <span class="text-zinc-500 font-mono">1.</span>
-          <span>Run your workflow with the <code class="bg-zinc-800 px-2 py-0.5 rounded">--remote</code> flag:</span>
+          <span>Install package:
+          <br><code class="bg-zinc-800 px-2 py-0.5 rounded">npm i -D agent-state-machine</code></span>
+        </li>
+        <li class="flex gap-3">
+          <span class="text-zinc-500 font-mono">2.</span>
+          <span>Initialize your workflow:
+          <br><code class="bg-zinc-800 px-2 py-0.5 rounded">npx state-machine --setup my-workflow</code></span>
+        </li>
+        <li class="flex gap-3">
+          <span class="text-zinc-500 font-mono">3.</span>
+          <span>Run your workflow:</span>
         </li>
         <li class="pl-6">
           <code class="bg-zinc-800 px-3 py-2 rounded block text-sm">
-            state-machine run my-workflow --remote
+            npx state-machine run my-workflow
           </code>
         </li>
         <li class="flex gap-3 mt-4">
-          <span class="text-zinc-500 font-mono">2.</span>
+          <span class="text-zinc-500 font-mono">4.</span>
           <span>The CLI will print a unique URL. Share it with anyone who needs to follow along or interact with the workflow.</span>
         </li>
         <li class="flex gap-3 mt-4">
-          <span class="text-zinc-500 font-mono">3.</span>
+          <span class="text-zinc-500 font-mono">5.</span>
           <span>Open the URL in a browser to see live workflow events and submit interaction responses.</span>
         </li>
       </ol>
     </div>
     <p class="text-zinc-500 text-sm mt-8">
-      Learn more at <a href="https://github.com/anthropics/agent-state-machine" class="text-cyan-400 hover:underline">GitHub</a>
+      Learn more at <a href="https://github.com/superbasicman/state-machine" target="_blank" class="text-cyan-400 hover:underline">GitHub</a>
     </p>
   </div>
 </body>