agent-state-machine 2.0.15 → 2.1.1

package/vercel-server/ui/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "remote-follow-ui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.5",
+    "@fontsource-variable/jetbrains-mono": "^5.2.5",
+    "framer-motion": "^10.16.4",
+    "lucide-react": "^0.469.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.4"
+  }
+}

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

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

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

@@ -0,0 +1,236 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import ContentCard from "./components/ContentCard.jsx";
+import EventsLog from "./components/EventsLog.jsx";
+import Footer from "./components/Footer.jsx";
+import Header from "./components/Header.jsx";
+import InteractionForm from "./components/InteractionForm.jsx";
+
+export default function App() {
+  const [history, setHistory] = useState([]);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [status, setStatus] = useState("connecting");
+  const [workflowName, setWorkflowName] = useState("...");
+  const [theme, setTheme] = useState("light");
+  const [viewMode, setViewMode] = useState("present");
+  const [pendingInteraction, setPendingInteraction] = useState(null);
+  const [hasNew, setHasNew] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("rf_theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    setTheme(savedTheme);
+    const savedView = localStorage.getItem("rf_view") || "present";
+    setViewMode(savedView);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("rf_theme", theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem("rf_view", viewMode);
+  }, [viewMode]);
+
+  const token = window.SESSION_TOKEN === "{{" + "SESSION_TOKEN" + "}}" ? null : window.SESSION_TOKEN;
+  const historyUrl = token ? `/api/history/${token}` : "/api/history";
+  const eventsUrl = token ? `/api/events/${token}` : "/api/events";
+  const submitUrl = token ? `/api/submit/${token}` : "/api/submit";
+
+  const fetchData = async () => {
+    try {
+      const res = await fetch(historyUrl);
+      const data = await res.json();
+      if (data.entries) {
+        const chronological = [...data.entries].reverse();
+        setHistory((prev) => {
+          if (prev.length === 0 && chronological.length > 0) {
+            setPageIndex(chronological.length - 1);
+          }
+          return chronological;
+        });
+        const last = chronological[chronological.length - 1];
+        if (last && (last.event === "INTERACTION_REQUESTED" || last.event === "PROMPT_REQUESTED")) {
+          setPendingInteraction(last);
+        } else {
+          setPendingInteraction(null);
+        }
+      }
+      if (data.workflowName) setWorkflowName(data.workflowName);
+      setStatus("connected");
+    } catch (error) {
+      setStatus("disconnected");
+    }
+  };
+
+  const prevLen = useRef(0);
+  useEffect(() => {
+    if (history.length > prevLen.current) {
+      if (prevLen.current === 0 && history.length > 0) {
+        setPageIndex(history.length - 1);
+        setHasNew(false);
+      } else if (pageIndex < history.length - 1) {
+        setHasNew(true);
+      }
+    }
+    prevLen.current = history.length;
+  }, [history.length, pageIndex]);
+
+  useEffect(() => {
+    if (pageIndex === history.length - 1) {
+      setHasNew(false);
+    }
+  }, [pageIndex, history.length]);
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, 3000);
+    const es = new EventSource(eventsUrl);
+    es.onmessage = (event) => {
+      if (event.data === "update") fetchData();
+    };
+    return () => {
+      clearInterval(interval);
+      es.close();
+    };
+  }, []);
+
+  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) => {
+      const isInput = event.target.tagName === "TEXTAREA" || (event.target.tagName === "INPUT" && event.target.type === "number");
+      if (isInput && event.target.className !== "jumper-input") return;
+      if (event.key === "ArrowRight") next();
+      if (event.key === "ArrowLeft") prev();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [history.length]);
+
+  const currentItem = history[pageIndex];
+  const isRequestEvent = currentItem && (currentItem.event === "INTERACTION_REQUESTED" || currentItem.event === "PROMPT_REQUESTED");
+  const isRequest = pendingInteraction && isRequestEvent && currentItem.slug === pendingInteraction.slug;
+
+  return (
+    <div className="w-full h-[100dvh] flex flex-col relative overflow-hidden bg-bg">
+      <Header
+        workflowName={workflowName}
+        status={status}
+        theme={theme}
+        toggleTheme={() => setTheme((value) => (value === "dark" ? "light" : "dark"))}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        history={history}
+      />
+
+      <main className="main-stage overflow-hidden">
+        {viewMode === "log" ? (
+          <EventsLog
+            history={history}
+            onJump={(idx) => {
+              setPageIndex(idx);
+              setViewMode("present");
+            }}
+          />
+        ) : (
+        <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 ? (
+              <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 })
+                    });
+                    setTimeout(fetchData, 1000);
+                  }}
+                  disabled={status === "disconnected"}
+                />
+              </div>
+            ) : (
+              <ContentCard item={currentItem} />
+            )}
+          </motion.div>
+        </AnimatePresence>
+        )}
+      </main>
+
+      <Footer
+        page={pageIndex}
+        total={history.length}
+        onNext={next}
+        onPrev={prev}
+        onJump={setPageIndex}
+        hasNew={hasNew}
+        onJumpToLatest={() => setPageIndex(history.length - 1)}
+        className={viewMode === "log" ? "opacity-0 pointer-events-none" : "opacity-100"}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+import { 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 [selected, setSelected] = useState(multiSelect ? [] : null);
+  const [customText, setCustomText] = useState("");
+  const [showCustom, setShowCustom] = useState(false);
+
+  const list = useMemo(() => options || [], [options]);
+  const title = prompt || question || "Choose an option.";
+
+  const handleSelect = (key) => {
+    if (multiSelect) {
+      setSelected((prev) => (
+        prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key]
+      ));
+      setShowCustom(false);
+    } else {
+      setSelected(key);
+      setShowCustom(false);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (showCustom && customText.trim()) {
+      onSubmit({ isCustom: true, customText: customText.trim(), raw: customText.trim() });
+      return;
+    }
+    if (multiSelect && selected.length > 0) {
+      onSubmit({ selectedKeys: selected, raw: selected.join(", ") });
+      return;
+    }
+    if (selected) {
+      onSubmit({ selectedKey: selected, raw: String(selected) });
+    }
+  };
+
+  const isValid = showCustom
+    ? Boolean(customText.trim())
+    : (multiSelect ? selected.length > 0 : Boolean(selected));
+
+  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">Choose an option.</h3>
+        </div>
+
+        <div className="text-xl font-medium text-fg/70 text-center max-w-2xl whitespace-pre-wrap">
+          {title}
+        </div>
+
+        <div className="w-full max-w-2xl space-y-3">
+          {list.map((opt) => {
+            const isSelected = multiSelect ? selected.includes(opt.key) : selected === opt.key;
+            return (
+              <button
+                key={opt.key}
+                onClick={() => handleSelect(opt.key)}
+                disabled={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]"
+                }`}
+              >
+                <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"
+                  }`}>
+                    {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>
+                </div>
+              </button>
+            );
+          })}
+
+          {allowCustom && (
+            <button
+              onClick={() => { setShowCustom(true); setSelected(multiSelect ? [] : null); }}
+              disabled={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]"
+              }`}
+            >
+              <div className="font-bold text-lg">Other</div>
+              <div className="text-sm text-fg/50 mt-1">Provide a custom response</div>
+            </button>
+          )}
+
+          {showCustom && (
+            <textarea
+              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"
+            />
+          )}
+        </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 || !isValid}
+          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"
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Bot } from "lucide-react";
+
+export default function ConfirmInteraction({ interaction, onSubmit, disabled }) {
+  const {
+    prompt,
+    question,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    context
+  } = interaction;
+
+  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 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">
+            <Bot className="w-8 h-8" />
+          </div>
+          <h3 className="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">
+          {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>
+          </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">
+        <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"
+        >
+          {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"
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+import CopyButton from "./CopyButton.jsx";
+
+export default function ContentCard({ item }) {
+  if (!item) return null;
+  const time = new Date(item.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  const eventLabel = item.event ? item.event.replace(/_/g, " ") : "EVENT";
+
+  const renderValue = (value) => {
+    if (value === null || value === undefined) {
+      return <span className="opacity-40">—</span>;
+    }
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      const looksLikeJson = trimmed.startsWith("{") || trimmed.startsWith("[");
+      if (looksLikeJson) {
+        try {
+          const parsed = JSON.parse(trimmed);
+          return (
+            <pre className="text-sm font-mono opacity-80 leading-relaxed custom-scroll overflow-auto bg-black/[0.015] dark:bg-white/[0.015] p-6 rounded-[24px] border border-border">
+              {JSON.stringify(parsed, null, 2)}
+            </pre>
+          );
+        } catch (error) {
+          return <span className="text-2xl font-semibold whitespace-pre-wrap break-words">{value}</span>;
+        }
+      }
+      if (value.length > 140 || value.includes("\n")) {
+        return (
+          <pre className="text-sm font-mono opacity-80 leading-relaxed custom-scroll overflow-auto bg-black/[0.015] dark:bg-white/[0.015] p-6 rounded-[24px] border border-border">
+            {value}
+          </pre>
+        );
+      }
+      return <span className="text-2xl font-semibold whitespace-pre-wrap break-words">{value}</span>;
+    }
+    if (typeof value === "object") {
+      return (
+        <pre className="text-sm font-mono opacity-80 leading-relaxed custom-scroll overflow-auto bg-black/[0.015] dark:bg-white/[0.015] p-6 rounded-[24px] border border-border">
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      );
+    }
+    return <span className="text-2xl font-semibold">{String(value)}</span>;
+  };
+
+  const renderKeyValueGrid = (entries) => (
+    <div className="space-y-8">
+      {entries.map(([key, value]) => (
+        <div key={key} className="space-y-2">
+          <div className="text-[10px] font-bold tracking-[0.35em] uppercase opacity-40">
+            {key.replace(/_/g, " ")}
+          </div>
+          <div className="text-base">{renderValue(value)}</div>
+        </div>
+      ))}
+    </div>
+  );
+
+  let content = null;
+
+  if (item.event === "AGENT_STARTED") {
+    content = (
+      <div className="space-y-12 py-24">
+        <div className="space-y-3 text-center">
+          <div className="text-xs font-bold tracking-[0.4em] uppercase opacity-40">Agent invocation</div>
+          <h2 className="text-4xl font-black tracking-tight">{item.agent}</h2>
+          <div className="text-xs font-mono opacity-20">{time}</div>
+        </div>
+        <div className="markdown-body opacity-80 leading-relaxed text-xl font-light whitespace-pre-wrap">
+          {item.prompt}
+        </div>
+      </div>
+    );
+  } else if (item.event && item.event.startsWith("WORKFLOW_")) {
+    const step = item.event.replace("WORKFLOW_", "");
+    content = (
+      <div className="min-h-[50vh] flex flex-col items-center justify-center text-center space-y-8 py-20">
+        <div className="text-[10px] font-bold tracking-[0.5em] uppercase opacity-20">Lifecycle status</div>
+        <h2 className="text-8xl font-black tracking-tighter opacity-10 leading-none uppercase">{step}</h2>
+        {item.error && <pre className="text-red-500 font-mono text-xs max-w-xl whitespace-pre-wrap bg-red-50 dark:bg-red-900/5 p-6 rounded-[24px] mt-4">{item.error}</pre>}
+      </div>
+    );
+  } else if (item.event === "PROMPT_REQUESTED" || item.event === "INTERACTION_REQUESTED") {
+    const details = [
+      ["slug", item.slug],
+      ["targetKey", item.targetKey],
+      ["type", item.type]
+    ].filter((entry) => entry[1] !== undefined);
+
+    content = (
+      <div className="space-y-10 py-24">
+        <div className="space-y-3">
+          <div className="text-xs font-bold tracking-[0.4em] uppercase text-accent">Awaiting response</div>
+          <div className="text-xs font-mono opacity-20">{time}</div>
+        </div>
+        <div className="text-4xl font-bold tracking-tight text-balance leading-tight">
+          {item.question || item.prompt || "Prompt"}
+        </div>
+        {item.prompt && item.question && item.prompt !== item.question && (
+          <div className="text-lg font-medium opacity-70 whitespace-pre-wrap">{item.prompt}</div>
+        )}
+        {details.length > 0 && (
+          <div className="pt-4">
+            {renderKeyValueGrid(details)}
+          </div>
+        )}
+      </div>
+    );
+  } else if (item.event === "PROMPT_ANSWERED" || item.event === "INTERACTION_SUBMITTED") {
+    const responseValue = item.answer !== undefined ? item.answer : item.response;
+    const details = [
+      ["slug", item.slug],
+      ["targetKey", item.targetKey]
+    ].filter((entry) => entry[1] !== undefined);
+
+    content = (
+      <div className="space-y-10 py-24">
+        <div className="space-y-3">
+          <div className="text-xs font-bold tracking-[0.4em] uppercase text-accent">Response recorded</div>
+          <div className="text-xs font-mono opacity-20">{time}</div>
+        </div>
+        <div className="text-4xl font-bold tracking-tight text-balance leading-tight">
+          {renderValue(responseValue)}
+        </div>
+        {details.length > 0 && (
+          <div className="pt-4">
+            {renderKeyValueGrid(details)}
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    const entries = Object.entries(item).filter(([key]) => key !== "event" && key !== "timestamp");
+    const fallbackEntries = entries.length > 0 ? entries : [["event", item.event || "Event"]];
+
+    content = (
+      <div className="space-y-12 py-24">
+        <div className="flex items-center justify-between">
+          <div className="text-xs font-bold tracking-[0.4em] uppercase opacity-40">{eventLabel}</div>
+          <div className="flex items-center gap-6">
+            <span className="text-xs font-mono opacity-20">{time}</span>
+            <CopyButton text={item} />
+          </div>
+        </div>
+        {renderKeyValueGrid(fallbackEntries)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-y-auto custom-scroll px-12">
+      <div className="content-width flex-1">
+        <div className="flex items-center justify-between pt-10">
+          <div className="text-[10px] font-bold tracking-[0.4em] uppercase opacity-30">{eventLabel}</div>
+          <CopyButton text={item} />
+        </div>
+        {content}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+export default function CopyButton({ text, label = "Copy", disabled = false }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (event) => {
+    event.stopPropagation();
+    if (disabled) return;
+    const content = typeof text === "string" ? text : JSON.stringify(text, null, 2);
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={`tooltip p-2 rounded-full text-subtle transition-colors ${disabled ? "opacity-30 cursor-not-allowed" : "hover:bg-black/5 dark:hover:bg-white/10"}`}
+      data-tooltip={label}
+      aria-label={label}
+      disabled={disabled}
+    >
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+    </button>
+  );
+}