agent-state-machine 2.0.14 → 2.1.0

package/vercel-server/ui/src/components/EventsLog.jsx

@@ -0,0 +1,82 @@
+import { Terminal, Send, Play, AlertCircle, CheckCircle2 } from "lucide-react";
+
+const getEventIcon = (event) => {
+    if (!event) return <Terminal className="w-3.5 h-3.5 opacity-40" />;
+    const e = event.toUpperCase();
+    if (e.includes("STARTED") || e.includes("START")) return <Play className="w-3.5 h-3.5 text-blue-500" />;
+    if (e.includes("SUBMITTED") || e.includes("ANSWERED") || e.includes("SUCCESS")) return <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />;
+    if (e.includes("REQUESTED") || e.includes("REQUEST")) return <Send className="w-3.5 h-3.5 text-accent" />;
+    if (e.includes("ERROR") || e.includes("FAILED")) return <AlertCircle className="w-3.5 h-3.5 text-red-500" />;
+    return <Terminal className="w-3.5 h-3.5 opacity-40" />;
+};
+
+const getEventSummary = (item) => {
+    const mainText = item.question || item.answer || item.prompt || item.error || item.status || item.message;
+    const subText = item.slug || (item.event && item.event.startsWith("WORKFLOW_") ? item.event.replace("WORKFLOW_", "") : null);
+
+    if (!mainText && !subText) return item.event || "Unknown Event";
+
+    return (
+        <div className="flex flex-col gap-0.5">
+            {subText && <span className="text-accent font-medium text-[10px] tracking-wider uppercase opacity-80">{subText}</span>}
+            {mainText && (
+                <span className="opacity-80 truncate max-w-md">
+                    {typeof mainText === "string" ? mainText : JSON.stringify(mainText)}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default function EventsLog({ history, onJump }) {
+    return (
+        <div className="w-full h-full flex flex-col overflow-hidden bg-bg">
+            <div className="flex-1 overflow-y-auto custom-scroll px-6 py-24">
+                <div className="max-w-4xl mx-auto space-y-1">
+                    {history.length === 0 ? (
+                        <div className="h-[40vh] flex flex-col items-center justify-center opacity-20 space-y-4">
+                            <Terminal className="w-12 h-12" />
+                            <div className="text-xs font-bold tracking-[0.4em] uppercase">No events yet</div>
+                        </div>
+                    ) : (
+                        history.map((item, idx) => {
+                            const time = new Date(item.timestamp).toLocaleTimeString([], {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                second: "2-digit",
+                                hour12: false
+                            });
+
+                            return (
+                                <button
+                                    key={idx}
+                                    onClick={() => onJump(idx)}
+                                    className="w-full text-left group flex items-start gap-6 p-4 rounded-2xl hover:bg-black/[0.03] dark:hover:bg-white/[0.03] transition-all border border-transparent hover:border-border"
+                                >
+                                    <div className="flex-shrink-0 w-20 pt-1">
+                                        <span className="text-[10px] font-mono font-medium opacity-20 group-hover:opacity-40 transition-opacity">
+                                            {time}
+                                        </span>
+                                    </div>
+
+                                    <div className="flex-shrink-0 pt-0.5">
+                                        {getEventIcon(item.event)}
+                                    </div>
+
+                                    <div className="flex-1 min-w-0 flex flex-col gap-1">
+                                        <div className="text-[10px] font-bold tracking-[0.2em] uppercase opacity-30 group-hover:opacity-50 transition-opacity">
+                                            {item.event?.replace(/_/g, " ") || "EVENT"}
+                                        </div>
+                                        <div className="text-sm leading-relaxed truncate group-hover:text-accent transition-colors">
+                                            {getEventSummary(item)}
+                                        </div>
+                                    </div>
+                                </button>
+                            );
+                        })
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/vercel-server/ui/src/components/Footer.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, onJumpToLatest, className = "" }) {
+  const [inputValue, setInputValue] = useState(page + 1);
+  useEffect(() => setInputValue(page + 1), [page]);
+
+  const handleInputChange = (event) => {
+    const { value } = event.target;
+    setInputValue(value);
+    const num = parseInt(value, 10);
+    if (!Number.isNaN(num) && num >= 1 && num <= total) {
+      onJump(num - 1);
+    }
+  };
+
+  return (
+    <footer className={`nav-footer transition-opacity duration-300 ${className}`}>
+      <div className="footer-control">
+        <button
+          onClick={onPrev}
+          disabled={page === 0}
+          className="tooltip p-1 hover:text-accent disabled:opacity-0 transition-all pointer-events-auto"
+          data-tooltip="Previous"
+          aria-label="Previous event"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+
+        <div className="flex items-center gap-2 text-xs font-mono font-bold tracking-widest opacity-60">
+          <input
+            type="number"
+            value={inputValue}
+            onChange={handleInputChange}
+            className="jumper-input"
+            min="1"
+            max={total}
+          />
+          <span className="opacity-20">/</span>
+          <span>{total}</span>
+        </div>
+
+        <button
+          onClick={onNext}
+          disabled={page === total - 1}
+          className="tooltip p-1 hover:text-accent disabled:opacity-0 transition-all pointer-events-auto"
+          data-tooltip="Next"
+          aria-label="Next event"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+
+        {hasNew ? (
+          <button
+            onClick={onJumpToLatest}
+            className="tooltip px-3 py-1 rounded-full text-[10px] font-bold tracking-[0.2em] uppercase bg-accent text-white shadow-[0_10px_30px_rgba(0,122,255,0.25)] hover:scale-[1.02] transition-transform"
+            data-tooltip="Latest"
+            aria-label="Jump to latest event"
+          >
+            New
+          </button>
+        ) : null}
+      </div>
+    </footer>
+  );
+}

package/vercel-server/ui/src/components/Header.jsx

@@ -0,0 +1,38 @@
+import { Moon, Sun, LayoutList, Presentation } from "lucide-react";
+import CopyButton from "./CopyButton.jsx";
+
+export default function Header({ workflowName, status, theme, toggleTheme, viewMode, setViewMode, history }) {
+  return (
+    <header className="fixed top-0 inset-x-0 h-20 px-12 flex items-center justify-between z-50 bg-bg/80 backdrop-blur-3xl">
+      <div className="flex items-center gap-4">
+        <div className={`w-2 h-2 rounded-full ${status === "connected" ? "bg-green-500 shadow-[0_0_15px_rgba(34,197,94,0.6)]" : "bg-red-500"}`}></div>
+        <span className="font-bold text-[10px] tracking-[0.4em] uppercase opacity-30 truncate max-w-[300px]">{workflowName || "Workflow"}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <CopyButton text={history || []} label="Copy full history" disabled={!history || history.length === 0} />
+        <button
+          onClick={() => setViewMode(viewMode === "present" ? "log" : "present")}
+          className="tooltip w-10 h-10 flex items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+          data-tooltip={viewMode === "present" ? "Log view" : "Present view"}
+          aria-label={viewMode === "present" ? "Switch to Log view" : "Switch to Presentation view"}
+        >
+          {viewMode === "present" ? (
+            <LayoutList className="w-5 h-5 opacity-40 hover:opacity-100" />
+          ) : (
+            <Presentation className="w-5 h-5 opacity-40 hover:opacity-100" />
+          )}
+        </button>
+
+      <button
+        onClick={toggleTheme}
+        className="tooltip w-10 h-10 flex items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+        data-tooltip={theme === "dark" ? "Light theme" : "Dark theme"}
+        aria-label={theme === "dark" ? "Switch to Light theme" : "Switch to Dark theme"}
+      >
+        {theme === "dark" ? <Sun className="w-5 h-5 opacity-40 hover:opacity-100" /> : <Moon className="w-5 h-5 opacity-40 hover:opacity-100" />}
+      </button>
+      </div>
+    </header>
+  );
+}

package/vercel-server/ui/src/components/InteractionForm.jsx

@@ -0,0 +1,42 @@
+import ChoiceInteraction from "./ChoiceInteraction.jsx";
+import ConfirmInteraction from "./ConfirmInteraction.jsx";
+import TextInteraction from "./TextInteraction.jsx";
+
+export default function InteractionForm({ interaction, onSubmit, disabled }) {
+  const type = interaction?.type || "text";
+
+  const handleResponse = (response) => {
+    onSubmit(interaction.slug, interaction.targetKey, response);
+  };
+
+  switch (type) {
+    case "choice":
+      return (
+        <ChoiceInteraction
+          key={interaction.slug}
+          interaction={interaction}
+          onSubmit={handleResponse}
+          disabled={disabled}
+        />
+      );
+    case "confirm":
+      return (
+        <ConfirmInteraction
+          key={interaction.slug}
+          interaction={interaction}
+          onSubmit={handleResponse}
+          disabled={disabled}
+        />
+      );
+    case "text":
+    default:
+      return (
+        <TextInteraction
+          key={interaction.slug}
+          interaction={interaction}
+          onSubmit={handleResponse}
+          disabled={disabled}
+        />
+      );
+  }
+}

package/vercel-server/ui/src/components/TextInteraction.jsx

@@ -0,0 +1,72 @@
+import { useMemo, useState } from "react";
+import { Bot } from "lucide-react";
+
+export default function TextInteraction({ interaction, onSubmit, disabled }) {
+  const { prompt, question, placeholder, validation } = interaction;
+  const [text, setText] = useState("");
+  const [error, setError] = useState(null);
+
+  const rules = useMemo(() => validation || {}, [validation]);
+
+  const validate = (value) => {
+    if (rules.minLength && value.length < rules.minLength) {
+      return `Minimum ${rules.minLength} characters required`;
+    }
+    if (rules.maxLength && value.length > rules.maxLength) {
+      return `Maximum ${rules.maxLength} characters allowed`;
+    }
+    if (rules.pattern && !new RegExp(rules.pattern).test(value)) {
+      return "Invalid format";
+    }
+    return null;
+  };
+
+  const handleSubmit = () => {
+    const trimmed = text.trim();
+    const err = validate(trimmed);
+    if (err) {
+      setError(err);
+      return;
+    }
+    onSubmit({ text: trimmed, raw: trimmed });
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col items-stretch overflow-hidden">
+      <div className="flex-1 overflow-y-auto custom-scroll px-6 py-12 space-y-8 flex flex-col items-center">
+        <div className="space-y-4 shrink-0">
+          <div className="w-16 h-16 rounded-3xl bg-accent text-white flex items-center justify-center mx-auto shadow-2xl shadow-accent/40">
+            <Bot className="w-8 h-8" />
+          </div>
+          <h3 className="text-4xl font-extrabold tracking-tight text-fg pt-4 text-center">Action required.</h3>
+        </div>
+
+        <div className="w-full max-w-2xl space-y-4">
+          <div className="text-xl font-medium text-fg/70 text-center whitespace-pre-wrap">
+            {prompt || question || "Provide your response."}
+          </div>
+          <textarea
+            value={text}
+            onChange={(event) => { setText(event.target.value); setError(null); }}
+            disabled={disabled}
+            placeholder={placeholder || "Your response..."}
+            className={`w-full h-64 p-8 rounded-[32px] bg-black/[0.03] dark:bg-white/[0.03] border-2 ${
+              error ? "border-red-500" : "border-transparent"
+            } focus:ring-4 focus:ring-accent/10 focus:outline-none text-2xl font-medium transition-all text-center placeholder:opacity-20`}
+          />
+          {error && <div className="text-red-500 text-center text-sm">{error}</div>}
+        </div>
+      </div>
+
+      <div className="p-4 flex justify-center bg-gradient-to-t from-bg via-bg to-transparent shrink-0 border-t border-white/5">
+        <button
+          onClick={handleSubmit}
+          disabled={disabled || !text.trim()}
+          className="px-12 py-6 bg-fg text-bg rounded-full font-bold text-xl hover:scale-105 active:scale-95 transition-all disabled:opacity-30 shadow-2xl"
+        >
+          Submit Response
+        </button>
+      </div>
+    </div>
+  );
+}

package/vercel-server/ui/src/index.css

@@ -0,0 +1,145 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #ffffff;
+  --fg: #1d1d1f;
+  --subtle: #86868b;
+  --border: rgba(0, 0, 0, 0.06);
+  --accent: #007aff;
+}
+
+.dark {
+  --bg: #000000;
+  --fg: #f5f5f7;
+  --subtle: #86868b;
+  --border: rgba(255, 255, 255, 0.1);
+  --accent: #0a84ff;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+  font-family: "Inter", sans-serif;
+  transition: background-color 0.4s ease, color 0.4s ease;
+  overflow: hidden;
+  margin: 0;
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+}
+
+.custom-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: var(--subtle);
+  border-radius: 4px;
+  opacity: 0.2;
+}
+
+.markdown-body pre {
+  background: rgba(127, 127, 127, 0.05);
+  padding: 1.5rem;
+  border-radius: 12px;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.content-width {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.main-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-stage {
+  flex: 1;
+  position: relative;
+  z-index: 10;
+  padding-top: calc(80px + env(safe-area-inset-top));
+}
+
+.jumper-input {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  font-weight: 700;
+  text-align: center;
+  width: 2.2rem;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+}
+
+.jumper-input::-webkit-inner-spin-button,
+.jumper-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.nav-footer {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.footer-control {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.5rem 1.2rem;
+  background: rgba(127, 127, 127, 0.05);
+  backdrop-filter: blur(20px);
+  border-radius: 99px;
+  border: 1px solid var(--border);
+}
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: -2.2rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  background: var(--fg);
+  color: var(--bg);
+  padding: 0.35rem 0.55rem;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  z-index: 40;
+}
+
+.tooltip:hover::after,
+.tooltip:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}

package/vercel-server/ui/src/main.jsx

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import "@fontsource-variable/inter/index.css";
+import "@fontsource-variable/jetbrains-mono/index.css";
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);

package/vercel-server/ui/tailwind.config.js

@@ -0,0 +1,19 @@
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"],
+        mono: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"]
+      },
+      colors: {
+        bg: "var(--bg)",
+        fg: "var(--fg)",
+        subtle: "var(--subtle)",
+        border: "var(--border)",
+        accent: "var(--accent)"
+      }
+    }
+  }
+};

package/vercel-server/ui/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "/remote/",
+  build: {
+    outDir: "../public/remote",
+    emptyOutDir: true
+  }
+});