agent-state-machine 2.2.1 → 2.3.0

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

@@ -1,13 +1,16 @@
 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 base = "w-3.5 h-3.5 text-black/70 dark:text-white/70";
+    if (!event) return <Terminal className={`${base} 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" />;
+    if (e.includes("STARTED") || e.includes("START")) return <Play className={`${base} opacity-70`} />;
+    if (e.includes("SUBMITTED") || e.includes("ANSWERED") || e.includes("SUCCESS") || e.includes("RESOLVED")) {
+        return <CheckCircle2 className={`${base} opacity-80`} />;
+    }
+    if (e.includes("REQUESTED") || e.includes("REQUEST")) return <Send className={`${base} opacity-60`} />;
+    if (e.includes("ERROR") || e.includes("FAILED")) return <AlertCircle className={`${base} opacity-90`} />;
+    return <Terminal className={`${base} opacity-40`} />;
 };
 
 const getEventSummary = (item) => {
@@ -18,9 +21,13 @@ const getEventSummary = (item) => {
 
     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>}
+            {subText && (
+                <span className="text-black/60 dark:text-white/60 font-medium text-[10px] tracking-[0.24em] uppercase">
+                    {subText}
+                </span>
+            )}
             {mainText && (
-                <span className="opacity-80 truncate max-w-md">
+                <span className="opacity-70 truncate max-w-md">
                     {typeof mainText === "string" ? mainText : JSON.stringify(mainText)}
                 </span>
             )}
@@ -31,7 +38,7 @@ const getEventSummary = (item) => {
 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="flex-1 overflow-y-auto custom-scroll px-6 sm:px-8 lg:px-10 py-20">
                 <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">
@@ -51,10 +58,10 @@ export default function EventsLog({ history, onJump }) {
                                 <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"
+                                    className="w-full text-left group flex items-start gap-6 p-5 rounded-2xl transition-all border border-black/10 dark:border-white/10 hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
                                 >
                                     <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">
+                                        <span className="text-[10px] font-mono font-medium opacity-30 group-hover:opacity-60 transition-opacity">
                                             {time}
                                         </span>
                                     </div>
@@ -64,10 +71,10 @@ export default function EventsLog({ history, onJump }) {
                                     </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">
+                                        <div className="text-[10px] font-semibold tracking-[0.28em] uppercase opacity-40 group-hover:opacity-70 transition-opacity">
                                             {item.event?.replace(/_/g, " ") || "EVENT"}
                                         </div>
-                                        <div className="text-sm leading-relaxed truncate group-hover:text-accent transition-colors">
+                                        <div className="text-sm leading-relaxed truncate group-hover:text-black dark:group-hover:text-white transition-colors">
                                             {getEventSummary(item)}
                                         </div>
                                     </div>

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
-export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, onJumpToLatest, className = "" }) {
+export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, onJumpToLatest, className = "", leftSlot = null }) {
   const [inputValue, setInputValue] = useState(page + 1);
   useEffect(() => setInputValue(page + 1), [page]);
 
@@ -16,11 +16,16 @@ export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, on
 
   return (
     <footer className={`nav-footer transition-opacity duration-300 ${className}`}>
+      {leftSlot ? (
+        <div className="fixed bottom-6 left-2 sm:left-4 z-40">
+          {leftSlot}
+        </div>
+      ) : null}
       <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"
+          className="tooltip p-1 hover:text-black dark:hover:text-white disabled:opacity-0 transition-all pointer-events-auto"
           data-tooltip="Previous"
           aria-label="Previous event"
         >
@@ -43,7 +48,7 @@ export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, on
         <button
           onClick={onNext}
           disabled={page === total - 1}
-          className="tooltip p-1 hover:text-accent disabled:opacity-0 transition-all pointer-events-auto"
+          className="tooltip p-1 hover:text-black dark:hover:text-white disabled:opacity-0 transition-all pointer-events-auto"
           data-tooltip="Next"
           aria-label="Next event"
         >
@@ -53,7 +58,7 @@ export default function Footer({ page, total, onNext, onPrev, onJump, hasNew, on
         {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"
+            className="tooltip px-3 py-1 rounded-full text-[10px] font-bold tracking-[0.2em] uppercase bg-black text-white dark:bg-white dark:text-black shadow-[0_10px_30px_rgba(0,0,0,0.2)] dark:shadow-[0_10px_30px_rgba(255,255,255,0.1)] hover:scale-[1.02] transition-transform"
             data-tooltip="Latest"
             aria-label="Jump to latest event"
           >

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

@@ -3,10 +3,19 @@ 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">
+    <header className="fixed top-0 inset-x-0 h-20 px-6 sm:px-10 lg: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
+          className={`w-2.5 h-2.5 rounded-full border ${
+            status === "connected"
+              ? "bg-black border-black dark:bg-white dark:border-white"
+              : "bg-transparent border-black/30 dark:border-white/30"
+          }`}
+          aria-hidden="true"
+        />
+        <span className="font-semibold text-[10px] tracking-[0.32em] uppercase text-black/50 dark:text-white/50 truncate max-w-[300px]">
+          {workflowName || "Workflow"}
+        </span>
       </div>
 
       <div className="flex items-center gap-2">

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

@@ -0,0 +1,33 @@
+import { Loader2 } from "lucide-react";
+
+export default function SendingCard({ submission }) {
+  const subtitle = submission?.slug
+    ? `Waiting for the CLI to receive ${submission.slug} and log the next event.`
+    : "Waiting for the CLI to receive the response and log the next event.";
+
+  return (
+    <div className="w-full h-full flex items-center justify-center px-6 py-12 bg-white text-black dark:bg-black dark:text-white">
+      <div className="content-width w-full flex flex-col items-center text-center gap-6">
+        <div className="relative">
+          <div
+            className="absolute -inset-4 rounded-[36px] bg-black/10 dark:bg-white/10 blur-2xl opacity-60"
+            aria-hidden="true"
+          />
+          <div className="relative w-20 h-20 rounded-[28px] border border-black/10 dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.03] flex items-center justify-center shadow-2xl shadow-black/20 dark:shadow-white/10">
+            <Loader2 className="w-9 h-9 text-black dark:text-white animate-spin" />
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <div className="text-4xl font-black tracking-tight">Sending response</div>
+          <div className="text-lg font-medium text-black/60 dark:text-white/60 max-w-xl break-words">
+            {subtitle}
+          </div>
+          <div className="text-[10px] font-bold tracking-[0.35em] uppercase opacity-30">
+            Keep this tab open
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -35,14 +35,14 @@ export default function TextInteraction({ 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">Action required.</h3>
+          <h3 className="text-3xl sm: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">
+          <div className="text-lg sm:text-xl font-medium text-fg/70 text-center whitespace-pre-wrap break-words">
             {prompt || question || "Provide your response."}
           </div>
           <textarea
@@ -50,15 +50,15 @@ export default function TextInteraction({ interaction, onSubmit, disabled }) {
             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`}
+            className={`w-full h-64 p-8 rounded-[32px] bg-black/[0.02] dark:bg-white/[0.03] border-2 ${
+              error ? "border-black dark:border-white" : "border-transparent"
+            } focus:border-black dark:focus:border-white focus:outline-none text-xl sm:text-2xl font-medium transition-all text-center placeholder:opacity-20`}
           />
-          {error && <div className="text-red-500 text-center text-sm">{error}</div>}
+          {error && <div className="text-black dark:text-white text-center text-sm font-semibold">{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">
+      <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 || !text.trim()}

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

@@ -4,18 +4,18 @@
 
 :root {
   --bg: #ffffff;
-  --fg: #1d1d1f;
-  --subtle: #86868b;
-  --border: rgba(0, 0, 0, 0.06);
-  --accent: #007aff;
+  --fg: #000000;
+  --subtle: rgba(0, 0, 0, 0.45);
+  --border: rgba(0, 0, 0, 0.12);
+  --accent: #000000;
 }
 
 .dark {
   --bg: #000000;
-  --fg: #f5f5f7;
-  --subtle: #86868b;
-  --border: rgba(255, 255, 255, 0.1);
-  --accent: #0a84ff;
+  --fg: #ffffff;
+  --subtle: rgba(255, 255, 255, 0.45);
+  --border: rgba(255, 255, 255, 0.18);
+  --accent: #ffffff;
 }
 
 body {
@@ -45,7 +45,7 @@ body {
 }
 
 .markdown-body pre {
-  background: rgba(127, 127, 127, 0.05);
+  background: rgba(0, 0, 0, 0.05);
   padding: 1.5rem;
   border-radius: 12px;
   overflow-x: auto;
@@ -53,6 +53,10 @@ body {
   line-height: 1.6;
 }
 
+.dark .markdown-body pre {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .content-width {
   width: 100%;
   max-width: 900px;
@@ -106,12 +110,16 @@ body {
   align-items: center;
   gap: 1.5rem;
   padding: 0.5rem 1.2rem;
-  background: rgba(127, 127, 127, 0.05);
+  background: rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(20px);
   border-radius: 99px;
   border: 1px solid var(--border);
 }
 
+.dark .footer-control {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .tooltip {
   position: relative;
 }
@@ -143,3 +151,67 @@ body {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+
+.raw-json-block {
+  margin: 0;
+  padding: 1.5rem;
+  border-radius: 24px;
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.85);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "monospace";
+  font-size: 0.85rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+  max-height: 70vh;
+}
+
+.raw-json-block--full {
+  max-height: none;
+  overflow: visible;
+}
+
+.dark .raw-json-block {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.json-token-key {
+  color: rgba(0, 0, 0, 0.75);
+  font-weight: 600;
+}
+
+.json-token-string {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.json-token-number {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.json-token-boolean {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.json-token-null {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.dark .json-token-key {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.dark .json-token-string {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.dark .json-token-number,
+.dark .json-token-boolean {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.dark .json-token-null {
+  color: rgba(255, 255, 255, 0.55);
+}