npm - agent-state-machine - Versions diffs - 2.2.0 → 2.2.2 - Mend

agent-state-machine 2.2.0 → 2.2.2

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 (36) hide show

package/bin/cli.js +78 -2
package/lib/remote/client.js +37 -8
package/lib/runtime/agent.js +6 -2
package/lib/runtime/interaction.js +2 -1
package/lib/runtime/prompt.js +37 -1
package/lib/runtime/runtime.js +67 -5
package/package.json +1 -1
package/templates/project-builder/README.md +304 -56
package/templates/project-builder/agents/code-fixer.md +50 -0
package/templates/project-builder/agents/code-writer.md +3 -0
package/templates/project-builder/agents/sanity-checker.md +6 -0
package/templates/project-builder/agents/sanity-runner.js +3 -1
package/templates/project-builder/agents/test-planner.md +3 -1
package/templates/project-builder/config.js +4 -4
package/templates/project-builder/scripts/workflow-helpers.js +104 -2
package/templates/project-builder/workflow.js +151 -14
package/templates/starter/README.md +291 -42
package/templates/starter/config.js +1 -1
package/vercel-server/api/submit/[token].js +2 -13
package/vercel-server/api/ws/cli.js +40 -2
package/vercel-server/local-server.js +32 -22
package/vercel-server/public/remote/assets/index-BsJsLDKc.css +1 -0
package/vercel-server/public/remote/assets/index-CmtT6ADh.js +168 -0
package/vercel-server/public/remote/index.html +2 -2
package/vercel-server/ui/src/App.jsx +69 -62
package/vercel-server/ui/src/components/ChoiceInteraction.jsx +69 -18
package/vercel-server/ui/src/components/ConfirmInteraction.jsx +7 -7
package/vercel-server/ui/src/components/ContentCard.jsx +600 -104
package/vercel-server/ui/src/components/EventsLog.jsx +20 -13
package/vercel-server/ui/src/components/Footer.jsx +9 -4
package/vercel-server/ui/src/components/Header.jsx +12 -3
package/vercel-server/ui/src/components/SendingCard.jsx +33 -0
package/vercel-server/ui/src/components/TextInteraction.jsx +8 -8
package/vercel-server/ui/src/index.css +82 -10
package/vercel-server/public/remote/assets/index-BOKpYANC.js +0 -148
package/vercel-server/public/remote/assets/index-DHL_iHQW.css +0 -1

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

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>{{WORKFLOW_NAME}}</title>
-    <script type="module" crossorigin src="/remote/assets/index-BOKpYANC.js"></script>
-    <link rel="stylesheet" crossorigin href="/remote/assets/index-DHL_iHQW.css">
+    <script type="module" crossorigin src="/remote/assets/index-CmtT6ADh.js"></script>
+    <link rel="stylesheet" crossorigin href="/remote/assets/index-BsJsLDKc.css">
   </head>
   <body>
     <div id="root"></div>

package/vercel-server/ui/src/App.jsx CHANGED Viewed

@@ -5,6 +5,8 @@ import EventsLog from "./components/EventsLog.jsx";
 import Footer from "./components/Footer.jsx";
 import Header from "./components/Header.jsx";
 import InteractionForm from "./components/InteractionForm.jsx";
+import SendingCard from "./components/SendingCard.jsx";
+import { Search } from "lucide-react";
 export default function App() {
   const [history, setHistory] = useState([]);
@@ -15,6 +17,8 @@ export default function App() {
   const [viewMode, setViewMode] = useState("present");
   const [pendingInteraction, setPendingInteraction] = useState(null);
   const [hasNew, setHasNew] = useState(false);
+  const [sendingState, setSendingState] = useState(null);
+  const [promptSearchRequestId, setPromptSearchRequestId] = useState(0);
   useEffect(() => {
     const savedTheme = localStorage.getItem("rf_theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
@@ -76,6 +80,32 @@ export default function App() {
     prevLen.current = history.length;
   }, [history.length, pageIndex]);
+  useEffect(() => {
+    if (!sendingState || history.length === 0) return;
+    const latest = history[history.length - 1];
+    const hasNewEvent =
+      history.length !== sendingState.historyLength ||
+      (latest?.timestamp && latest.timestamp !== sendingState.lastEventTimestamp);
+    if (!hasNewEvent) return;
+    if (latest?.event === "INTERACTION_SUBMITTED") {
+      setSendingState((prev) =>
+        prev
+          ? {
+              ...prev,
+              historyLength: history.length,
+              lastEventTimestamp: latest?.timestamp || prev.lastEventTimestamp,
+            }
+          : prev
+      );
+      return;
+    }
+    setSendingState(null);
+    setPageIndex(history.length - 1);
+  }, [history, sendingState]);
   useEffect(() => {
     if (pageIndex === history.length - 1) {
       setHasNew(false);
@@ -97,35 +127,6 @@ export default function App() {
   const next = () => setPageIndex((prev) => Math.min(history.length - 1, prev + 1));
   const prev = () => setPageIndex((prev) => Math.max(0, prev - 1));
-  const touchStart = useRef(null);
-  const ignoreTouch = useRef(false);
-  const handleTouchStart = (event) => {
-    const target = event.target;
-    const isInput = target.tagName === "TEXTAREA" || (target.tagName === "INPUT" && target.type === "number");
-    if (isInput && target.className !== "jumper-input") {
-      ignoreTouch.current = true;
-      return;
-    }
-    ignoreTouch.current = false;
-    const touch = event.touches[0];
-    touchStart.current = { x: touch.clientX, y: touch.clientY };
-  };
-  const handleTouchEnd = (event) => {
-    if (ignoreTouch.current || !touchStart.current) return;
-    const touch = event.changedTouches[0];
-    const dx = touch.clientX - touchStart.current.x;
-    const dy = touch.clientY - touchStart.current.y;
-    const absX = Math.abs(dx);
-    const absY = Math.abs(dy);
-    const swipeThreshold = 50;
-    if (absX > swipeThreshold && absX > absY + 10) {
-      if (dx > 0) prev();
-      if (dx < 0) next();
-    }
-    touchStart.current = null;
-  };
   useEffect(() => {
     const handler = (event) => {
@@ -139,8 +140,10 @@ export default function App() {
   }, [history.length]);
   const currentItem = history[pageIndex];
+  const isAgentStarted = currentItem?.event === "AGENT_STARTED";
   const isRequestEvent = currentItem && (currentItem.event === "INTERACTION_REQUESTED" || currentItem.event === "PROMPT_REQUESTED");
   const isRequest = pendingInteraction && isRequestEvent && currentItem.slug === pendingInteraction.slug;
+  const isSending = Boolean(sendingState);
   return (
     <div className="w-full h-[100dvh] flex flex-col relative overflow-hidden bg-bg">
@@ -167,54 +170,46 @@ export default function App() {
         <AnimatePresence mode="wait">
           <motion.div
             key={pageIndex}
-            drag="x"
-            dragConstraints={{ left: 0, right: 0 }}
-            dragElastic={0.2}
-            style={{ touchAction: "pan-y" }}
-            onTouchStart={handleTouchStart}
-            onTouchEnd={handleTouchEnd}
-            onDragEnd={(e, { offset, velocity }) => {
-              const swipeThreshold = 50;
-              if (offset.x > swipeThreshold || velocity.x > 500) {
-                prev();
-              } else if (offset.x < -swipeThreshold || velocity.x < -500) {
-                next();
-              }
-            }}
             initial={{ opacity: 0, scale: 0.99, filter: "blur(4px)" }}
             animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
             exit={{ opacity: 0, scale: 1.01, filter: "blur(4px)" }}
             transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
             className="w-full h-full"
           >
-            {isRequest ? (
+            {isSending ? (
+              <SendingCard submission={sendingState} />
+            ) : isRequest ? (
               <div className="content-width h-full">
                 <InteractionForm
                   interaction={pendingInteraction}
                   onSubmit={async (slug, targetKey, response) => {
-                    const responsePreview = typeof response === "string" ? response : JSON.stringify(response);
-                    setHistory((prev) => [
-                      ...prev,
-                      {
-                        timestamp: new Date().toISOString(),
-                        event: "INTERACTION_SUBMITTED",
-                        answer: responsePreview,
-                        response
-                      }
-                    ]);
-                    setPageIndex((prev) => prev + 1);
-                    await fetch(submitUrl, {
-                      method: "POST",
-                      headers: { "Content-Type": "application/json" },
-                      body: JSON.stringify({ slug, targetKey, response })
+                    const lastEvent = history[history.length - 1];
+                    setSendingState({
+                      slug,
+                      targetKey,
+                      historyLength: history.length,
+                      lastEventTimestamp: lastEvent?.timestamp || null,
                     });
-                    setTimeout(fetchData, 1000);
+                    try {
+                      const res = await fetch(submitUrl, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ slug, targetKey, response })
+                      });
+                      if (!res.ok) {
+                        throw new Error(`Submit failed with ${res.status}`);
+                      }
+                    } catch (error) {
+                      setSendingState(null);
+                    } finally {
+                      setTimeout(fetchData, 1000);
+                    }
                   }}
-                  disabled={status === "disconnected"}
+                  disabled={status === "disconnected" || isSending}
                 />
               </div>
             ) : (
-              <ContentCard item={currentItem} />
+              <ContentCard item={currentItem} promptSearchRequestId={promptSearchRequestId} />
             )}
           </motion.div>
         </AnimatePresence>
@@ -230,6 +225,18 @@ export default function App() {
         hasNew={hasNew}
         onJumpToLatest={() => setPageIndex(history.length - 1)}
         className={viewMode === "log" ? "opacity-0 pointer-events-none" : "opacity-100"}
+        leftSlot={
+          isAgentStarted ? (
+            <button
+              type="button"
+              onClick={() => setPromptSearchRequestId((prev) => prev + 1)}
+              className="w-12 h-12 rounded-full bg-white text-black dark:bg-black dark:text-white border border-black/10 dark:border-white/10 flex items-center justify-center shadow-2xl shadow-black/20 dark:shadow-white/10 hover:scale-[1.02] transition-transform"
+              aria-label="Search prompt sections"
+            >
+              <Search className="w-5 h-5" />
+            </button>
+          ) : null
+        }
       />
     </div>
   );

package/vercel-server/ui/src/components/ChoiceInteraction.jsx CHANGED Viewed

@@ -1,15 +1,31 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Bot, Check } from "lucide-react";
 export default function ChoiceInteraction({ interaction, onSubmit, disabled }) {
-  const { prompt, question, options = [], multiSelect, allowCustom } = interaction;
+  const { prompt, question, options = [], multiSelect, allowCustom, fullAuto, autoSelectDelay = 20, timestamp } = interaction;
   const [selected, setSelected] = useState(multiSelect ? [] : null);
   const [customText, setCustomText] = useState("");
   const [showCustom, setShowCustom] = useState(false);
+  const [tick, setTick] = useState(0);
   const list = useMemo(() => options || [], [options]);
   const title = prompt || question || "Choose an option.";
+  // Calculate countdown based on event timestamp
+  const countdown = useMemo(() => {
+    if (!fullAuto || !timestamp) return null;
+    const eventTime = new Date(timestamp).getTime();
+    const elapsed = Math.floor((Date.now() - eventTime) / 1000);
+    return autoSelectDelay - elapsed;
+  }, [fullAuto, timestamp, autoSelectDelay, tick]);
+  // Tick every second to update countdown
+  useEffect(() => {
+    if (!fullAuto) return;
+    const timer = setInterval(() => setTick(t => t + 1), 1000);
+    return () => clearInterval(timer);
+  }, [fullAuto]);
   const handleSelect = (key) => {
     if (multiSelect) {
       setSelected((prev) => (
@@ -44,19 +60,43 @@ export default function ChoiceInteraction({ interaction, onSubmit, disabled }) {
     <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">
+          <div className="w-16 h-16 rounded-3xl bg-black text-white dark:bg-white dark:text-black flex items-center justify-center mx-auto shadow-2xl shadow-black/20 dark:shadow-white/10">
             <Bot className="w-8 h-8" />
           </div>
-          <h3 className="text-4xl font-extrabold tracking-tight text-fg pt-4 text-center">Choose an option.</h3>
+          <h3 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-fg pt-4 text-center">Choose an option.</h3>
         </div>
-        <div className="text-xl font-medium text-fg/70 text-center max-w-2xl whitespace-pre-wrap">
+        <div className="text-lg sm:text-xl font-medium text-fg/70 text-center max-w-2xl whitespace-pre-wrap break-words">
           {title}
         </div>
+        {fullAuto && countdown !== null && (
+          <div className="text-center">
+            <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full ${
+              countdown > 0
+                ? "bg-yellow-500 text-black animate-pulse"
+                : "bg-black text-white dark:bg-white dark:text-black"
+            }`}>
+              <span className="text-xl">⚡</span>
+              <span className="text-sm font-bold">
+                {countdown > 0
+                  ? `Agent deciding in ${countdown}s...`
+                  : "Auto-selecting recommended option..."}
+              </span>
+            </div>
+          </div>
+        )}
         <div className="w-full max-w-2xl space-y-3">
-          {list.map((opt) => {
+          {list.map((opt, index) => {
             const isSelected = multiSelect ? selected.includes(opt.key) : selected === opt.key;
+            const labelClass = isSelected
+              ? "text-white dark:text-black"
+              : "text-black dark:text-white";
+            const descriptionClass = isSelected
+              ? "text-white/70 dark:text-black/70"
+              : "text-black/50 dark:text-white/50";
             return (
               <button
                 key={opt.key}
@@ -65,21 +105,32 @@ export default function ChoiceInteraction({ interaction, onSubmit, disabled }) {
                 type="button"
                 className={`w-full p-6 rounded-2xl border-2 transition-all text-left ${
                   isSelected
-                    ? "border-accent bg-accent/10"
-                    : "border-white/10 hover:border-white/20 bg-black/[0.03] dark:bg-white/[0.03]"
+                    ? "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+                    : "border-black/10 dark:border-white/10 hover:border-black/30 dark:hover:border-white/30 bg-black/[0.02] dark:bg-white/[0.03]"
                 }`}
               >
                 <div className="flex items-center gap-4">
                   <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                     isSelected
-                      ? "border-accent bg-accent text-white"
-                      : "border-white/20"
+                      ? "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+                      : "border-black/30 dark:border-white/30"
                   }`}>
                     {isSelected && <Check className="w-4 h-4" />}
                   </div>
                   <div className="flex-1">
-                    <div className="font-bold text-lg">{opt.label || opt.key}</div>
-                    {opt.description && <div className="text-sm text-fg/50 mt-1">{opt.description}</div>}
+                    <div className={`font-bold text-lg break-words flex flex-wrap items-center gap-2 ${labelClass}`}>
+                      <span className="break-words">{opt.label || opt.key}</span>
+                      {index === 0 && (
+                        <span className={`ml-2 text-xs font-medium px-2 py-0.5 rounded-full ${
+                          isSelected
+                            ? 'bg-white/20 dark:bg-black/20'
+                            : 'bg-black/10 dark:bg-white/10'
+                        }`}>
+                          Recommended
+                        </span>
+                      )}
+                    </div>
+                    {opt.description && <div className={`text-sm mt-1 break-words ${descriptionClass}`}>{opt.description}</div>}
                   </div>
                 </div>
               </button>
@@ -93,12 +144,12 @@ export default function ChoiceInteraction({ interaction, onSubmit, disabled }) {
               type="button"
               className={`w-full p-6 rounded-2xl border-2 transition-all text-left ${
                 showCustom
-                  ? "border-accent bg-accent/10"
-                  : "border-white/10 hover:border-white/20 bg-black/[0.03] dark:bg-white/[0.03]"
+                  ? "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black"
+                  : "border-black/10 dark:border-white/10 hover:border-black/30 dark:hover:border-white/30 bg-black/[0.02] dark:bg-white/[0.03]"
               }`}
             >
-              <div className="font-bold text-lg">Other</div>
-              <div className="text-sm text-fg/50 mt-1">Provide a custom response</div>
+              <div className={`font-bold text-lg break-words ${showCustom ? "text-white dark:text-black" : "text-black dark:text-white"}`}>Other</div>
+              <div className={`text-sm mt-1 break-words ${showCustom ? "text-white/70 dark:text-black/70" : "text-black/50 dark:text-white/50"}`}>Provide a custom response</div>
             </button>
           )}
@@ -107,13 +158,13 @@ export default function ChoiceInteraction({ interaction, onSubmit, disabled }) {
               value={customText}
               onChange={(event) => setCustomText(event.target.value)}
               placeholder="Type your response..."
-              className="w-full h-32 p-6 rounded-2xl bg-black/[0.03] dark:bg-white/[0.03] border-2 border-accent/30 focus:border-accent focus:outline-none text-lg"
+              className="w-full h-32 p-6 rounded-2xl bg-black/[0.02] dark:bg-white/[0.03] border-2 border-black/20 dark:border-white/20 focus:border-black dark:focus:border-white focus:outline-none text-lg"
             />
           )}
         </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">
+      <div className="p-4 flex justify-center bg-gradient-to-t from-bg via-bg to-transparent shrink-0 border-t border-black/10 dark:border-white/10">
         <button
           onClick={handleSubmit}
           disabled={disabled || !isValid}

package/vercel-server/ui/src/components/ConfirmInteraction.jsx CHANGED Viewed

@@ -13,35 +13,35 @@ export default function ConfirmInteraction({ interaction, onSubmit, disabled })
     <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 justify-center">
         <div className="space-y-4">
-          <div className="w-16 h-16 rounded-3xl bg-accent text-white flex items-center justify-center mx-auto shadow-2xl shadow-accent/40">
+          <div className="w-16 h-16 rounded-3xl bg-black text-white dark:bg-white dark:text-black flex items-center justify-center mx-auto shadow-2xl shadow-black/20 dark:shadow-white/10">
             <Bot className="w-8 h-8" />
           </div>
-          <h3 className="text-4xl font-extrabold tracking-tight text-fg pt-4 text-center">Confirm action.</h3>
+          <h3 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-fg pt-4 text-center">Confirm action.</h3>
         </div>
-        <div className="text-xl font-medium text-fg/70 text-center max-w-2xl whitespace-pre-wrap">
+        <div className="text-lg sm:text-xl font-medium text-fg/70 text-center max-w-2xl whitespace-pre-wrap break-words">
           {prompt || question || "Please confirm."}
         </div>
         {context?.documentPath && (
           <div className="text-sm text-fg/40 text-center">
-            Review: <code className="bg-white/10 px-2 py-1 rounded">{context.documentPath}</code>
+            Review: <code className="bg-black/10 dark:bg-white/10 px-2 py-1 rounded">{context.documentPath}</code>
           </div>
         )}
       </div>
-      <div className="p-4 flex justify-center gap-4 bg-gradient-to-t from-bg via-bg to-transparent shrink-0 border-t border-white/5">
+      <div className="p-4 flex justify-center gap-4 bg-gradient-to-t from-bg via-bg to-transparent shrink-0 border-t border-black/10 dark:border-white/10">
         <button
           onClick={() => onSubmit({ confirmed: false, raw: cancelLabel })}
           disabled={disabled}
-          className="px-12 py-6 bg-white/10 text-fg rounded-full font-bold text-xl hover:bg-white/20 transition-all disabled:opacity-30"
+          className="px-12 py-6 border border-black/20 dark:border-white/20 text-fg rounded-full font-bold text-xl hover:bg-black/5 dark:hover:bg-white/10 transition-all disabled:opacity-30"
         >
           {cancelLabel}
         </button>
         <button
           onClick={() => onSubmit({ confirmed: true, raw: confirmLabel })}
           disabled={disabled}
-          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"
+          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 shadow-black/20 dark:shadow-white/10"
         >
           {confirmLabel}
         </button>