@mydatavalue/polter 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1263 @@
+import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/AgentActionProvider.tsx
+
+// src/core/schemaGenerator.ts
+function zodToJsonSchema(schema) {
+  if (typeof schema.toJSONSchema === "function") {
+    try {
+      const result = schema.toJSONSchema();
+      delete result.$schema;
+      return result;
+    } catch {
+    }
+  }
+  const def = schema._def;
+  const description = schema.description;
+  switch (def.typeName) {
+    case "ZodString": {
+      const result = { type: "string" };
+      if (description) result.description = description;
+      if (def.checks) {
+        for (const check of def.checks) {
+          if (check.kind === "min") result.minLength = check.value;
+          if (check.kind === "max") result.maxLength = check.value;
+        }
+      }
+      return result;
+    }
+    case "ZodNumber": {
+      const result = { type: "number" };
+      if (description) result.description = description;
+      if (def.checks) {
+        for (const check of def.checks) {
+          if (check.kind === "int") result.type = "integer";
+          if (check.kind === "min")
+            result[check.inclusive ? "minimum" : "exclusiveMinimum"] = check.value;
+          if (check.kind === "max")
+            result[check.inclusive ? "maximum" : "exclusiveMaximum"] = check.value;
+        }
+      }
+      return result;
+    }
+    case "ZodBoolean": {
+      const result = { type: "boolean" };
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodArray": {
+      const result = {
+        type: "array",
+        items: zodToJsonSchema(def.type)
+      };
+      if (description) result.description = description;
+      if (def.minLength !== null && def.minLength !== void 0)
+        result.minItems = def.minLength.value;
+      if (def.maxLength !== null && def.maxLength !== void 0)
+        result.maxItems = def.maxLength.value;
+      return result;
+    }
+    case "ZodObject": {
+      const shape = def.shape();
+      const properties = {};
+      const required = [];
+      for (const [key, value] of Object.entries(shape)) {
+        properties[key] = zodToJsonSchema(value);
+        if (!value.isOptional()) {
+          required.push(key);
+        }
+      }
+      const result = { type: "object", properties };
+      if (required.length > 0) result.required = required;
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodEnum": {
+      const result = { type: "string", enum: [...def.values] };
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodLiteral": {
+      const result = { type: typeof def.value, const: def.value };
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodUnion":
+    case "ZodDiscriminatedUnion": {
+      const options = def.options;
+      const result = { anyOf: options.map((o) => zodToJsonSchema(o)) };
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodOptional": {
+      const inner = zodToJsonSchema(def.innerType);
+      if (description && !inner.description) inner.description = description;
+      return inner;
+    }
+    case "ZodNullable": {
+      const inner = zodToJsonSchema(def.innerType);
+      if (description && !inner.description) inner.description = description;
+      return inner;
+    }
+    case "ZodDefault": {
+      const inner = zodToJsonSchema(def.innerType);
+      if (description && !inner.description) inner.description = description;
+      return inner;
+    }
+    case "ZodRecord": {
+      const result = {
+        type: "object",
+        additionalProperties: zodToJsonSchema(def.valueType)
+      };
+      if (description) result.description = description;
+      return result;
+    }
+    case "ZodNull": {
+      return { type: "null", ...description && { description } };
+    }
+    case "ZodAny":
+    case "ZodUnknown": {
+      return description ? { description } : {};
+    }
+    default: {
+      return { type: "object", ...description && { description } };
+    }
+  }
+}
+function generateToolSchemas(actions) {
+  return actions.filter((a) => !a.disabled).map((action) => ({
+    name: action.name,
+    description: action.description,
+    parameters: action.parameters ? zodToJsonSchema(action.parameters) : { type: "object", properties: {} }
+  }));
+}
+
+// src/executor/visualExecutor.ts
+var stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected) return;
+  if (typeof document === "undefined") return;
+  stylesInjected = true;
+  const style = document.createElement("style");
+  style.id = "polter-styles";
+  style.textContent = `
+    @keyframes polter-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.7; transform: scale(1.02); }
+    }
+    @keyframes polter-fade-in {
+      from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+      to { opacity: 1; transform: translateX(-50%) translateY(0); }
+    }
+    @keyframes polter-cursor-click {
+      0% { transform: scale(1); }
+      50% { transform: scale(0.85); }
+      100% { transform: scale(1); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+var CURSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .68-.61.3-.92L5.95 2.87a.5.5 0 0 0-.45.34z" fill="#1e293b" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>`;
+function createBlockingOverlay() {
+  const overlay = document.createElement("div");
+  overlay.className = "polter-blocking-overlay";
+  overlay.style.cssText = `
+    position:fixed;
+    inset:0;
+    z-index:99997;
+    cursor:not-allowed;
+  `;
+  document.body.appendChild(overlay);
+  return { remove: () => overlay.remove() };
+}
+function createCursor() {
+  injectStyles();
+  const cursor = document.createElement("div");
+  cursor.className = "polter-cursor";
+  cursor.innerHTML = CURSOR_SVG;
+  cursor.style.cssText = `
+    position:fixed;
+    left:-40px;
+    top:-40px;
+    z-index:100000;
+    pointer-events:none;
+    transition:left 0.4s cubic-bezier(0.4,0,0.2,1),top 0.4s cubic-bezier(0.4,0,0.2,1);
+    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+  `;
+  document.body.appendChild(cursor);
+  return { remove: () => cursor.remove() };
+}
+function moveCursorTo(target, signal) {
+  const cursor = document.querySelector(".polter-cursor");
+  if (!cursor) return Promise.resolve();
+  const rect = target.getBoundingClientRect();
+  cursor.style.left = `${rect.left + rect.width / 2}px`;
+  cursor.style.top = `${rect.top + rect.height / 2}px`;
+  return delay(450, signal);
+}
+function animateCursorClick() {
+  const cursor = document.querySelector(".polter-cursor");
+  if (!cursor) return;
+  cursor.style.animation = "polter-cursor-click 0.2s ease";
+  cursor.addEventListener("animationend", () => {
+    cursor.style.animation = "";
+  }, { once: true });
+}
+function createSpotlight(target, label, config) {
+  injectStyles();
+  const rect = target.getBoundingClientRect();
+  const padding = config.spotlightPadding;
+  const overlayRgba = `rgba(0, 0, 0, ${config.overlayOpacity})`;
+  const container = document.createElement("div");
+  container.className = "polter-spotlight-container";
+  container.style.cssText = "position:fixed;inset:0;z-index:99998;pointer-events:none;";
+  const spotlight = document.createElement("div");
+  spotlight.className = "polter-spotlight";
+  spotlight.style.cssText = `
+    position:fixed;
+    left:${rect.left - padding}px;
+    top:${rect.top - padding}px;
+    width:${rect.width + padding * 2}px;
+    height:${rect.height + padding * 2}px;
+    border-radius:8px;
+    box-shadow:0 0 0 9999px ${overlayRgba};
+    z-index:99998;
+    pointer-events:none;
+    transition:all 0.3s ease;
+  `;
+  const ring = document.createElement("div");
+  ring.className = "polter-ring";
+  ring.style.cssText = `
+    position:fixed;
+    left:${rect.left - padding - 2}px;
+    top:${rect.top - padding - 2}px;
+    width:${rect.width + padding * 2 + 4}px;
+    height:${rect.height + padding * 2 + 4}px;
+    border:2px solid #3b82f6;
+    border-radius:10px;
+    z-index:99999;
+    pointer-events:none;
+    animation:polter-pulse 1.5s ease-in-out infinite;
+  `;
+  container.appendChild(spotlight);
+  container.appendChild(ring);
+  if (label && config.tooltipEnabled) {
+    const tooltip = document.createElement("div");
+    tooltip.className = "polter-tooltip";
+    tooltip.textContent = label;
+    const spaceBelow = window.innerHeight - rect.bottom - padding;
+    const isBelow = spaceBelow > 60;
+    const tooltipTop = isBelow ? rect.bottom + padding + 12 : rect.top - padding - 44;
+    tooltip.style.cssText = `
+      position:fixed;
+      left:${rect.left + rect.width / 2}px;
+      top:${tooltipTop}px;
+      transform:translateX(-50%);
+      background:#1e293b;
+      color:#f8fafc;
+      padding:8px 14px;
+      border-radius:6px;
+      font-size:13px;
+      font-weight:500;
+      line-height:1.4;
+      white-space:nowrap;
+      z-index:99999;
+      pointer-events:none;
+      animation:polter-fade-in 0.2s ease;
+      box-shadow:0 4px 12px rgba(0,0,0,0.15);
+    `;
+    container.appendChild(tooltip);
+  }
+  document.body.appendChild(container);
+  return {
+    remove: () => container.remove()
+  };
+}
+function delay(ms, signal) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException("Aborted", "AbortError"));
+      return;
+    }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener(
+      "abort",
+      () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      },
+      { once: true }
+    );
+  });
+}
+function setNativeInputValue(input, value) {
+  const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set ?? Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+  if (nativeSetter) {
+    nativeSetter.call(input, value);
+  } else {
+    input.value = value;
+  }
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+}
+async function simulateTyping(element, value, signal) {
+  const input = element;
+  input.focus();
+  if (input.value) {
+    setNativeInputValue(input, "");
+    await delay(30, signal);
+  }
+  const charDelay = Math.max(15, Math.min(40, 800 / value.length));
+  for (let i = 0; i < value.length; i++) {
+    if (signal?.aborted) return;
+    setNativeInputValue(input, value.slice(0, i + 1));
+    await delay(charDelay, signal);
+  }
+}
+async function resolveStepElement(target, actionName, params, config) {
+  if (target.prepareView) {
+    await target.prepareView(params);
+    await delay(200, config.signal);
+  }
+  if (target.fromParam && config.resolveTarget) {
+    const raw = params[target.fromParam];
+    const paramValue = String(Array.isArray(raw) ? raw[0] ?? "" : raw ?? "");
+    return config.resolveTarget(actionName, target.fromParam, paramValue, config.signal);
+  }
+  if (target.fromTarget && config.resolveNamedTarget) {
+    return config.resolveNamedTarget(actionName, target.fromTarget, config.signal);
+  }
+  return target.element;
+}
+async function executeInstant(action, params) {
+  try {
+    if (action.onExecute) {
+      await action.onExecute(params);
+    } else {
+      const targets = action.getExecutionTargets();
+      for (const target of targets) {
+        target.element?.click();
+      }
+    }
+    return { success: true, actionName: action.name };
+  } catch (err) {
+    return { success: false, actionName: action.name, error: String(err) };
+  }
+}
+function isElementVisible(el) {
+  if (!el.isConnected) return false;
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+async function executeGuided(action, params, config) {
+  const targets = action.getExecutionTargets();
+  if (targets.length === 0 || targets.every((t) => t.element && !isElementVisible(t.element))) {
+    if (action.onExecute) {
+      await action.onExecute(params);
+    }
+    return { success: true, actionName: action.name };
+  }
+  let spotlight = null;
+  let cursor = null;
+  const blocker = createBlockingOverlay();
+  if (config.cursorEnabled) {
+    cursor = createCursor();
+  }
+  try {
+    for (let i = 0; i < targets.length; i++) {
+      const target = targets[i];
+      const isLast = i === targets.length - 1;
+      const element = await resolveStepElement(target, action.name, params, config);
+      if (!element) continue;
+      if (!isElementVisible(element)) {
+        if (targets.length > 1) {
+          blocker.remove();
+          cursor?.remove();
+          return { success: false, actionName: action.name, error: `Step element not visible: "${target.label}"` };
+        }
+        continue;
+      }
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      await delay(300, config.signal);
+      if (cursor) {
+        await moveCursorTo(element, config.signal);
+      }
+      spotlight = createSpotlight(element, target.label, config);
+      await delay(config.stepDelay, config.signal);
+      if (target.setParam) {
+        const inputEl = element.tagName === "INPUT" || element.tagName === "TEXTAREA" ? element : element.querySelector("input, textarea") ?? element;
+        const value = String(params[target.setParam] ?? "");
+        await simulateTyping(inputEl, value, config.signal);
+      } else if (target.setValue && target.onSetValue) {
+        const value = params[target.setValue];
+        target.onSetValue(value);
+      } else if (target.fromParam || target.fromTarget) {
+        animateCursorClick();
+        element.click();
+      } else if (action.onExecute) {
+        if (!isLast) {
+          animateCursorClick();
+          element.click();
+        }
+      } else {
+        animateCursorClick();
+        element.click();
+      }
+      spotlight.remove();
+      spotlight = null;
+      if (!isLast) {
+        await delay(200, config.signal);
+      }
+    }
+    if (action.onExecute) {
+      await action.onExecute(params);
+    }
+    blocker.remove();
+    cursor?.remove();
+    return { success: true, actionName: action.name };
+  } catch (err) {
+    spotlight?.remove();
+    blocker.remove();
+    cursor?.remove();
+    if (err instanceof DOMException && err.name === "AbortError") {
+      return { success: false, actionName: action.name, error: "Execution cancelled" };
+    }
+    return { success: false, actionName: action.name, error: String(err) };
+  }
+}
+async function executeAction(action, params, config) {
+  if (config.mode === "instant") {
+    return executeInstant(action, params);
+  }
+  return executeGuided(action, params, config);
+}
+var AgentActionContext = createContext(null);
+function AgentActionProvider({
+  mode = "guided",
+  stepDelay = 600,
+  overlayOpacity = 0.5,
+  spotlightPadding = 8,
+  tooltipEnabled = true,
+  cursorEnabled = true,
+  children,
+  onExecutionStart,
+  onExecutionComplete
+}) {
+  const actionsRef = useRef(/* @__PURE__ */ new Map());
+  const targetsRef = useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = useState(0);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const currentExecutionRef = useRef(null);
+  const registerAction = useCallback((action) => {
+    const existing = actionsRef.current.get(action.name);
+    actionsRef.current.set(action.name, action);
+    if (!existing || existing.description !== action.description || existing.disabled !== action.disabled || existing.disabledReason !== action.disabledReason) {
+      setVersion((v) => v + 1);
+    }
+  }, []);
+  const unregisterAction = useCallback((name) => {
+    if (actionsRef.current.delete(name)) {
+      setVersion((v) => v + 1);
+    }
+  }, []);
+  const registerTarget = useCallback((id, entry) => {
+    targetsRef.current.set(id, entry);
+  }, []);
+  const unregisterTarget = useCallback((id) => {
+    targetsRef.current.delete(id);
+  }, []);
+  const resolveTarget = useCallback(
+    async (actionName, param, value, signal) => {
+      const normalizedValue = value.toLowerCase();
+      const maxWait = 3e3;
+      const pollInterval = 50;
+      const start = Date.now();
+      while (Date.now() - start < maxWait) {
+        if (signal?.aborted) return null;
+        for (const entry of targetsRef.current.values()) {
+          if ((!entry.action || entry.action === actionName) && entry.param === param && entry.value?.toLowerCase() === normalizedValue && entry.element.isConnected) {
+            return entry.element;
+          }
+        }
+        await new Promise((r) => setTimeout(r, pollInterval));
+      }
+      return null;
+    },
+    []
+  );
+  const resolveNamedTarget = useCallback(
+    async (actionName, name, signal) => {
+      const maxWait = 3e3;
+      const pollInterval = 50;
+      const start = Date.now();
+      while (Date.now() - start < maxWait) {
+        if (signal?.aborted) return null;
+        for (const entry of targetsRef.current.values()) {
+          if ((!entry.action || entry.action === actionName) && entry.name === name && entry.element.isConnected) {
+            return entry.element;
+          }
+        }
+        await new Promise((r) => setTimeout(r, pollInterval));
+      }
+      return null;
+    },
+    []
+  );
+  const execute = useCallback(
+    async (actionName, params) => {
+      currentExecutionRef.current?.abort();
+      const controller = new AbortController();
+      currentExecutionRef.current = controller;
+      const action = actionsRef.current.get(actionName);
+      if (!action) {
+        return { success: false, actionName, error: `Action "${actionName}" not found` };
+      }
+      if (action.disabled) {
+        return {
+          success: false,
+          actionName,
+          error: action.disabledReason || "Action is disabled"
+        };
+      }
+      setIsExecuting(true);
+      onExecutionStart?.(actionName);
+      try {
+        const result = await executeAction(action, params ?? {}, {
+          mode,
+          stepDelay,
+          overlayOpacity,
+          spotlightPadding,
+          tooltipEnabled,
+          cursorEnabled,
+          signal: controller.signal,
+          resolveTarget,
+          resolveNamedTarget
+        });
+        onExecutionComplete?.(result);
+        return result;
+      } catch (err) {
+        const result = {
+          success: false,
+          actionName,
+          error: err instanceof DOMException && err.name === "AbortError" ? "Execution cancelled" : String(err)
+        };
+        onExecutionComplete?.(result);
+        return result;
+      } finally {
+        setIsExecuting(false);
+        if (currentExecutionRef.current === controller) {
+          currentExecutionRef.current = null;
+        }
+      }
+    },
+    [mode, stepDelay, overlayOpacity, spotlightPadding, tooltipEnabled, cursorEnabled, onExecutionStart, onExecutionComplete, resolveTarget, resolveNamedTarget]
+  );
+  const availableActions = useMemo(
+    () => Array.from(actionsRef.current.values()).map((a) => ({
+      name: a.name,
+      description: a.description,
+      disabled: a.disabled,
+      disabledReason: a.disabledReason,
+      hasParameters: !!a.parameters
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [version]
+  );
+  const schemas = useMemo(
+    () => generateToolSchemas(Array.from(actionsRef.current.values())),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [version]
+  );
+  const contextValue = useMemo(
+    () => ({
+      registerAction,
+      unregisterAction,
+      registerTarget,
+      unregisterTarget,
+      execute,
+      availableActions,
+      schemas,
+      isExecuting,
+      mode
+    }),
+    [
+      registerAction,
+      unregisterAction,
+      registerTarget,
+      unregisterTarget,
+      execute,
+      availableActions,
+      schemas,
+      isExecuting,
+      mode
+    ]
+  );
+  return /* @__PURE__ */ jsx(AgentActionContext.Provider, { value: contextValue, children });
+}
+var AgentStepContext = createContext(null);
+function AgentAction({
+  name,
+  description,
+  parameters,
+  onExecute,
+  disabled = false,
+  disabledReason,
+  children
+}) {
+  const context = useContext(AgentActionContext);
+  if (!context) {
+    throw new Error("AgentAction must be used within an AgentActionProvider");
+  }
+  const wrapperRef = useRef(null);
+  const stepsRef = useRef(/* @__PURE__ */ new Map());
+  const onExecuteRef = useRef(onExecute);
+  onExecuteRef.current = onExecute;
+  const parametersRef = useRef(parameters);
+  parametersRef.current = parameters;
+  const stableOnExecute = useCallback((params) => {
+    return onExecuteRef.current?.(params);
+  }, []);
+  const getExecutionTargets = useCallback(() => {
+    if (stepsRef.current.size > 0) {
+      const steps = Array.from(stepsRef.current.values());
+      const withElements = steps.filter((s) => s.element);
+      const withoutElements = steps.filter((s) => !s.element && (s.fromParam || s.fromTarget));
+      withElements.sort((a, b) => {
+        if (!a.element || !b.element) return 0;
+        const pos = a.element.compareDocumentPosition(b.element);
+        return pos & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      });
+      const ordered = [...withElements, ...withoutElements];
+      return ordered.map((s) => ({
+        label: s.label,
+        element: s.element,
+        fromParam: s.fromParam,
+        fromTarget: s.fromTarget,
+        setParam: s.setParam,
+        setValue: s.setValue,
+        onSetValue: s.onSetValue,
+        prepareView: s.prepareView
+      }));
+    }
+    const el = wrapperRef.current?.firstElementChild;
+    return el ? [{ label: description, element: el }] : [];
+  }, [description]);
+  const { registerAction, unregisterAction } = context;
+  useEffect(() => {
+    registerAction({
+      name,
+      description,
+      parameters: parametersRef.current,
+      onExecute: onExecuteRef.current ? stableOnExecute : void 0,
+      disabled,
+      disabledReason,
+      getExecutionTargets
+    });
+    return () => unregisterAction(name);
+  }, [name, description, disabled, disabledReason, stableOnExecute, getExecutionTargets, registerAction, unregisterAction]);
+  const registerStep = useCallback(
+    (id, data) => {
+      stepsRef.current.set(id, data);
+    },
+    []
+  );
+  const unregisterStep = useCallback((id) => {
+    stepsRef.current.delete(id);
+  }, []);
+  const stepContextValue = useMemo(
+    () => ({ registerStep, unregisterStep }),
+    [registerStep, unregisterStep]
+  );
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(AgentStepContext.Provider, { value: stepContextValue, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "contents" }, children }) });
+}
+function AgentStep({
+  label,
+  children,
+  fromParam,
+  fromTarget,
+  setParam,
+  setValue,
+  onSetValue,
+  prepareView
+}) {
+  const id = useId();
+  const wrapperRef = useRef(null);
+  const stepContext = useContext(AgentStepContext);
+  if (!stepContext) {
+    throw new Error("AgentStep must be used within an AgentAction");
+  }
+  const onSetValueRef = useRef(onSetValue);
+  onSetValueRef.current = onSetValue;
+  const prepareViewRef = useRef(prepareView);
+  prepareViewRef.current = prepareView;
+  useEffect(() => {
+    const element = children ? wrapperRef.current?.firstElementChild : null;
+    stepContext.registerStep(id, {
+      label,
+      element,
+      fromParam,
+      fromTarget,
+      setParam,
+      setValue,
+      onSetValue: onSetValueRef.current,
+      prepareView: prepareViewRef.current
+    });
+    return () => stepContext.unregisterStep(id);
+  }, [id, label, fromParam, fromTarget, setParam, setValue, stepContext]);
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "contents" }, children });
+}
+function AgentTarget({ action, param, value, name, children }) {
+  const id = useId();
+  const wrapperRef = useRef(null);
+  const context = useContext(AgentActionContext);
+  if (!context) {
+    throw new Error("AgentTarget must be used within an AgentActionProvider");
+  }
+  const { registerTarget, unregisterTarget } = context;
+  useEffect(() => {
+    const element = wrapperRef.current?.firstElementChild;
+    if (element) {
+      registerTarget(id, { action, param, value, name, element });
+    }
+    return () => unregisterTarget(id);
+  }, [id, action, param, value, name, registerTarget, unregisterTarget]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { display: "contents" }, children });
+}
+function useAgentActions() {
+  const context = useContext(AgentActionContext);
+  if (!context) {
+    throw new Error("useAgentActions must be used within an AgentActionProvider");
+  }
+  return context;
+}
+var logId = 0;
+var PANEL_WIDTH = 440;
+function getSchemaFields(schemas, actionName) {
+  const schema = schemas.find((s) => s.name === actionName);
+  if (!schema?.parameters) return [];
+  const params = schema.parameters;
+  const properties = params.properties ?? {};
+  const required = params.required ?? [];
+  return Object.entries(properties).map(([name, prop]) => ({
+    name,
+    type: prop.type ?? "string",
+    description: prop.description,
+    enumValues: prop.enum,
+    isRequired: required.includes(name)
+  }));
+}
+function AgentDevTools({ defaultOpen = false }) {
+  const { availableActions, execute, isExecuting, mode, schemas } = useAgentActions();
+  const [open, setOpen] = useState(defaultOpen);
+  const [log, setLog] = useState([]);
+  const [expandedAction, setExpandedAction] = useState(null);
+  const [paramInputs, setParamInputs] = useState({});
+  const [filter, setFilter] = useState("");
+  const [tab, setTab] = useState("actions");
+  const logEndRef = useRef(null);
+  useEffect(() => {
+    if (tab === "log") logEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [log, tab]);
+  const setFieldValue = useCallback((actionName, fieldName, value) => {
+    setParamInputs((prev) => ({
+      ...prev,
+      [actionName]: { ...prev[actionName], [fieldName]: value }
+    }));
+  }, []);
+  const handleExecute = useCallback(
+    async (action) => {
+      const entryId = ++logId;
+      let params;
+      const fields = getSchemaFields(schemas, action.name);
+      const rawInputs = paramInputs[action.name];
+      if (fields.length > 0 && rawInputs) {
+        params = {};
+        for (const field of fields) {
+          const raw = rawInputs[field.name];
+          if (raw === void 0 || raw === "") continue;
+          if (field.type === "number" || field.type === "integer") {
+            params[field.name] = Number(raw);
+          } else if (field.type === "boolean") {
+            params[field.name] = raw === "true";
+          } else if (field.type === "array") {
+            try {
+              params[field.name] = JSON.parse(raw);
+            } catch {
+              setLog((prev) => [
+                ...prev,
+                {
+                  id: entryId,
+                  action: action.name,
+                  timestamp: Date.now(),
+                  result: { success: false, actionName: action.name, error: `Invalid JSON for ${field.name}` }
+                }
+              ]);
+              return;
+            }
+          } else {
+            params[field.name] = raw;
+          }
+        }
+      }
+      setLog((prev) => [...prev, { id: entryId, action: action.name, params, timestamp: Date.now() }]);
+      const result = await execute(action.name, params);
+      setLog((prev) => prev.map((e) => e.id === entryId ? { ...e, result } : e));
+    },
+    [execute, paramInputs, schemas]
+  );
+  const filtered = filter ? availableActions.filter((a) => a.name.includes(filter) || a.description.includes(filter)) : availableActions;
+  if (!open) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        style: {
+          position: "fixed",
+          bottom: 16,
+          right: 16,
+          zIndex: 99990,
+          height: 36,
+          paddingLeft: 12,
+          paddingRight: 14,
+          borderRadius: 18,
+          border: "none",
+          cursor: "pointer",
+          background: "#3b82f6",
+          color: "white",
+          fontSize: 13,
+          fontWeight: 600,
+          fontFamily: "system-ui, sans-serif",
+          boxShadow: "0 2px 12px rgba(59,130,246,0.4)",
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 16 }, children: "\u2699" }),
+          "Agent \xB7 ",
+          availableActions.length
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setOpen(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 99989,
+          background: "rgba(0,0,0,0.15)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 99990,
+          width: PANEL_WIDTH,
+          display: "flex",
+          flexDirection: "column",
+          background: "#0f172a",
+          color: "#e2e8f0",
+          boxShadow: "-4px 0 24px rgba(0,0,0,0.3)",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          fontSize: 13
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "16px 20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                borderBottom: "1px solid #1e293b"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 15 }, children: "Agent DevTools" }),
+                  /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#64748b", marginTop: 2 }, children: [
+                    availableActions.length,
+                    " actions registered \xB7 ",
+                    mode,
+                    " mode"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), style: closeBtnStyle, children: "\u2715" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", borderBottom: "1px solid #1e293b" }, children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => setTab("actions"), style: tabStyle(tab === "actions"), children: "Actions" }),
+            /* @__PURE__ */ jsxs("button", { onClick: () => setTab("log"), style: tabStyle(tab === "log"), children: [
+              "Log ",
+              log.length > 0 && `(${log.length})`
+            ] })
+          ] }),
+          tab === "actions" ? /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { padding: "12px 20px" }, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: filter,
+                onChange: (e) => setFilter(e.target.value),
+                placeholder: "Filter actions...",
+                style: filterInputStyle
+              }
+            ) }),
+            filtered.length > 0 && filtered.map((action) => /* @__PURE__ */ jsx(
+              ActionRow,
+              {
+                action,
+                schemas,
+                expanded: expandedAction === action.name,
+                onToggle: () => setExpandedAction(expandedAction === action.name ? null : action.name),
+                fieldValues: paramInputs[action.name] ?? {},
+                onFieldChange: (field, value) => setFieldValue(action.name, field, value),
+                onExecute: () => handleExecute(action),
+                isExecuting
+              },
+              action.name
+            )),
+            filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: 20, color: "#475569", textAlign: "center" }, children: filter ? "No matching actions" : "No actions registered" })
+          ] }) : /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: log.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 20, color: "#475569", textAlign: "center" }, children: "No executions yet. Run an action to see results here." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { style: { padding: "8px 20px", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx("button", { onClick: () => setLog([]), style: clearBtnStyle, children: "Clear" }) }),
+            log.map((entry) => /* @__PURE__ */ jsxs("div", { style: { padding: "10px 20px", borderBottom: "1px solid #1e293b" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx(StatusDot, { result: entry.result }),
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 13 }, children: entry.action }),
+                /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 11, color: "#475569" }, children: new Date(entry.timestamp).toLocaleTimeString() })
+              ] }),
+              entry.params && /* @__PURE__ */ jsx("pre", { style: logParamsStyle, children: JSON.stringify(entry.params, null, 2) }),
+              entry.result && !entry.result.success && /* @__PURE__ */ jsx("div", { style: { marginTop: 4, fontSize: 12, color: "#f87171" }, children: entry.result.error })
+            ] }, entry.id)),
+            /* @__PURE__ */ jsx("div", { ref: logEndRef })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function ActionRow({
+  action,
+  schemas,
+  expanded,
+  onToggle,
+  fieldValues,
+  onFieldChange,
+  onExecute,
+  isExecuting,
+  badge
+}) {
+  const fields = getSchemaFields(schemas, action.name);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "10px 20px",
+        borderBottom: "1px solid #1e293b",
+        opacity: action.disabled ? 0.5 : 1,
+        cursor: "pointer"
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && expanded && !action.disabled && !isExecuting) {
+          e.preventDefault();
+          onExecute();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { onClick: onToggle, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#475569", fontSize: 10, flexShrink: 0 }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#93c5fd" }, children: action.name }),
+              badge && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    padding: "1px 5px",
+                    borderRadius: 3,
+                    background: "#1e3a5f",
+                    color: "#60a5fa",
+                    fontWeight: 600
+                  },
+                  children: badge
+                }
+              ),
+              action.disabled && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 9,
+                    padding: "1px 5px",
+                    borderRadius: 3,
+                    background: "#3f1d1d",
+                    color: "#f87171",
+                    fontWeight: 600
+                  },
+                  children: "disabled"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { color: "#94a3b8", fontSize: 12, marginTop: 2 }, children: action.disabled && action.disabledReason ? action.disabledReason : action.description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onExecute();
+              },
+              disabled: action.disabled || isExecuting,
+              style: {
+                padding: "5px 14px",
+                borderRadius: 6,
+                border: "none",
+                fontSize: 12,
+                fontWeight: 600,
+                cursor: action.disabled ? "not-allowed" : "pointer",
+                background: action.disabled ? "#334155" : "#3b82f6",
+                color: "white",
+                flexShrink: 0
+              },
+              children: isExecuting ? "\xB7\xB7\xB7" : "Run"
+            }
+          )
+        ] }),
+        expanded && /* @__PURE__ */ jsx("div", { style: { marginTop: 10, marginLeft: 18 }, children: fields.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: fields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { style: { fontSize: 11, color: "#64748b", display: "block", marginBottom: 3 }, children: [
+            field.name,
+            field.isRequired && /* @__PURE__ */ jsx("span", { style: { color: "#f87171", marginLeft: 2 }, children: "*" }),
+            field.description && /* @__PURE__ */ jsx("span", { style: { color: "#475569", marginLeft: 6 }, children: field.description })
+          ] }),
+          field.enumValues ? /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: fieldValues[field.name] ?? "",
+              onChange: (e) => onFieldChange(field.name, e.target.value),
+              style: fieldSelectStyle,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+                field.enumValues.map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v))
+              ]
+            }
+          ) : field.type === "boolean" ? /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: fieldValues[field.name] ?? "",
+              onChange: (e) => onFieldChange(field.name, e.target.value),
+              style: fieldSelectStyle,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+                /* @__PURE__ */ jsx("option", { value: "true", children: "true" }),
+                /* @__PURE__ */ jsx("option", { value: "false", children: "false" })
+              ]
+            }
+          ) : field.type === "array" ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: fieldValues[field.name] ?? "",
+              onChange: (e) => onFieldChange(field.name, e.target.value),
+              placeholder: "[1, 2, 3]",
+              rows: 2,
+              style: textareaStyle
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: field.type === "number" || field.type === "integer" ? "number" : "text",
+              value: fieldValues[field.name] ?? "",
+              onChange: (e) => onFieldChange(field.name, e.target.value),
+              placeholder: field.description ?? field.name,
+              style: fieldInputStyle
+            }
+          )
+        ] }, field.name)) }) : /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#475569" }, children: "No parameters" }) })
+      ]
+    }
+  );
+}
+function StatusDot({ result }) {
+  const color = !result ? "#fbbf24" : result.success ? "#4ade80" : "#f87171";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: color,
+        display: "inline-block",
+        flexShrink: 0
+      }
+    }
+  );
+}
+var closeBtnStyle = {
+  width: 28,
+  height: 28,
+  borderRadius: 6,
+  border: "1px solid #334155",
+  background: "transparent",
+  color: "#94a3b8",
+  cursor: "pointer",
+  fontSize: 14,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var tabStyle = (active) => ({
+  flex: 1,
+  padding: "10px 0",
+  border: "none",
+  cursor: "pointer",
+  fontSize: 13,
+  fontWeight: 600,
+  fontFamily: "inherit",
+  background: active ? "#1e293b" : "transparent",
+  color: active ? "#e2e8f0" : "#64748b",
+  borderBottom: active ? "2px solid #3b82f6" : "2px solid transparent"
+});
+var filterInputStyle = {
+  width: "100%",
+  background: "#1e293b",
+  border: "1px solid #334155",
+  borderRadius: 6,
+  padding: "8px 12px",
+  color: "#e2e8f0",
+  fontSize: 13,
+  outline: "none",
+  fontFamily: "inherit"
+};
+var clearBtnStyle = {
+  padding: "4px 10px",
+  borderRadius: 4,
+  border: "1px solid #334155",
+  background: "transparent",
+  color: "#64748b",
+  cursor: "pointer",
+  fontSize: 11,
+  fontFamily: "inherit"
+};
+var fieldInputStyle = {
+  width: "100%",
+  background: "#1e293b",
+  border: "1px solid #334155",
+  borderRadius: 6,
+  padding: "7px 10px",
+  color: "#e2e8f0",
+  fontSize: 12,
+  outline: "none",
+  fontFamily: "inherit"
+};
+var fieldSelectStyle = {
+  width: "100%",
+  background: "#1e293b",
+  border: "1px solid #334155",
+  borderRadius: 6,
+  padding: "7px 10px",
+  color: "#e2e8f0",
+  fontSize: 12,
+  outline: "none",
+  fontFamily: "inherit",
+  cursor: "pointer"
+};
+var textareaStyle = {
+  width: "100%",
+  background: "#1e293b",
+  border: "1px solid #334155",
+  borderRadius: 6,
+  padding: "8px 10px",
+  color: "#e2e8f0",
+  fontSize: 12,
+  outline: "none",
+  resize: "vertical",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+};
+var logParamsStyle = {
+  marginTop: 4,
+  padding: "6px 8px",
+  background: "#1e293b",
+  borderRadius: 4,
+  fontSize: 11,
+  color: "#94a3b8",
+  overflow: "auto",
+  maxHeight: 80,
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+};
+function useAgentAction(config) {
+  const context = useContext(AgentActionContext);
+  if (!context) {
+    throw new Error("useAgentAction must be used within an AgentActionProvider");
+  }
+  const configRef = useRef(config);
+  configRef.current = config;
+  const { registerAction, unregisterAction } = context;
+  useEffect(() => {
+    const items = Array.isArray(configRef.current) ? configRef.current : [configRef.current];
+    for (const item of items) {
+      const onExecute = item.onExecute;
+      const steps = item.steps;
+      registerAction({
+        name: item.name,
+        description: item.description,
+        parameters: item.parameters,
+        onExecute: onExecute ? (params) => onExecute(params) : void 0,
+        disabled: item.disabled ?? false,
+        disabledReason: item.disabledReason,
+        getExecutionTargets: () => {
+          if (!steps?.length) return [];
+          return steps.map((s) => ({
+            label: s.label,
+            element: null,
+            fromParam: s.fromParam,
+            fromTarget: s.fromTarget,
+            setParam: s.setParam,
+            setValue: s.setValue,
+            onSetValue: s.onSetValue,
+            prepareView: s.prepareView
+          }));
+        }
+      });
+    }
+    return () => {
+      const items2 = Array.isArray(configRef.current) ? configRef.current : [configRef.current];
+      for (const item of items2) {
+        unregisterAction(item.name);
+      }
+    };
+  }, [registerAction, unregisterAction]);
+}
+function useAgentCommandRouter(fallback, getActionName) {
+  const { execute, availableActions } = useAgentActions();
+  return useCallback(
+    async (command) => {
+      const actionName = getActionName(command);
+      const isRegistered = availableActions.some((a) => a.name === actionName && !a.disabled);
+      if (isRegistered) {
+        await execute(actionName, command);
+        return;
+      }
+      await fallback?.(command);
+    },
+    [execute, availableActions, fallback, getActionName]
+  );
+}
+
+export { AgentAction, AgentActionProvider, AgentDevTools, AgentStep, AgentTarget, generateToolSchemas, useAgentAction, useAgentActions, useAgentCommandRouter, zodToJsonSchema };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map