agent-state-machine 2.3.0 → 2.5.0

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

@@ -0,0 +1,130 @@
+import { X, Square } from "lucide-react";
+import { useState } from "react";
+
+export default function SettingsModal({
+  isOpen,
+  onClose,
+  fullAuto,
+  onToggleFullAuto,
+  autoSelectDelay,
+  onDelayChange,
+  onStop,
+  disabled,
+}) {
+  const [showStopConfirm, setShowStopConfirm] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleStop = () => {
+    if (showStopConfirm) {
+      onStop();
+      setShowStopConfirm(false);
+      onClose();
+    } else {
+      setShowStopConfirm(true);
+    }
+  };
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      setShowStopConfirm(false);
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-white dark:bg-black border border-black/10 dark:border-white/10 rounded-3xl p-8 w-[90vw] max-w-md shadow-2xl">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-bold">Settings</h2>
+          <button
+            onClick={() => {
+              setShowStopConfirm(false);
+              onClose();
+            }}
+            className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors"
+            aria-label="Close settings"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Full-auto toggle */}
+        <div className="flex items-center justify-between py-4 border-b border-black/10 dark:border-white/10">
+          <div>
+            <div className="font-semibold">Full-Auto Mode</div>
+            <div className="text-sm text-black/50 dark:text-white/50">
+              Auto-select recommended options
+            </div>
+          </div>
+          <button
+            onClick={onToggleFullAuto}
+            disabled={disabled}
+            className={`w-12 h-7 rounded-full transition-colors relative ${
+              fullAuto
+                ? "bg-black dark:bg-white"
+                : "bg-black/20 dark:bg-white/20"
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+            aria-pressed={fullAuto}
+            aria-label="Toggle full-auto mode"
+          >
+            <div
+              className={`absolute top-1 w-5 h-5 rounded-full bg-white dark:bg-black transition-transform ${
+                fullAuto ? "left-6" : "left-1"
+              }`}
+            />
+          </button>
+        </div>
+
+        {/* Countdown delay */}
+        <div className="flex items-center justify-between py-4 border-b border-black/10 dark:border-white/10">
+          <div>
+            <div className="font-semibold">Countdown Delay</div>
+            <div className="text-sm text-black/50 dark:text-white/50">
+              Seconds before auto-select
+            </div>
+          </div>
+          <input
+            type="number"
+            value={autoSelectDelay}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val) && val >= 1 && val <= 120) {
+                onDelayChange(val);
+              }
+            }}
+            min={1}
+            max={120}
+            disabled={disabled}
+            className="w-20 p-2 text-center rounded-xl border border-black/20 dark:border-white/20 bg-transparent disabled:opacity-50"
+          />
+        </div>
+
+        {/* Stop button */}
+        <div className="mt-6">
+          <button
+            onClick={handleStop}
+            disabled={disabled}
+            className={`w-full py-4 rounded-2xl font-bold flex items-center justify-center gap-2 transition-colors ${
+              showStopConfirm
+                ? "bg-red-600 text-white hover:bg-red-700"
+                : "bg-red-500/10 text-red-500 hover:bg-red-500/20"
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+          >
+            <Square className="w-5 h-5" />
+            {showStopConfirm ? "Click again to confirm" : "Stop Workflow"}
+          </button>
+          {showStopConfirm && (
+            <div className="text-center text-sm text-black/50 dark:text-white/50 mt-2">
+              This will terminate the CLI process
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -199,6 +199,59 @@ body {
   color: rgba(0, 0, 0, 0.45);
 }
 
+@keyframes check-pop {
+  0% {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes check-draw {
+  0% {
+    stroke-dashoffset: 30;
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes ring-pop {
+  0% {
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+
+.checkmark-pop {
+  animation: check-pop 0.45s ease-out both;
+}
+
+.checkmark-draw {
+  stroke-dasharray: 30;
+  stroke-dashoffset: 30;
+  animation: check-draw 0.65s ease-out 0.15s forwards;
+}
+
+.success-ring {
+  animation: ring-pop 0.8s ease-out both;
+}
+
 .dark .json-token-key {
   color: rgba(255, 255, 255, 0.8);
 }