@emblemvault/hustle-react 1.0.0 → 1.1.1

package/dist/browser/hustle-react.js

@@ -1820,35 +1820,52 @@ var pluginRegistry = new PluginRegistry();
 function getStorageKey(instanceId) {
   return `hustle-plugins-${instanceId}`;
 }
-function usePlugins(instanceId = "default") {
+function getInstanceId(providedId) {
+  if (providedId) return providedId;
+  if (typeof window !== "undefined") {
+    const globalId = window.__hustleInstanceId;
+    if (globalId) return globalId;
+  }
+  return "default";
+}
+function usePlugins(instanceId) {
+  const [resolvedInstanceId] = useState(() => getInstanceId(instanceId));
   const [plugins, setPlugins] = useState([]);
   useEffect(() => {
-    setPlugins(pluginRegistry.loadFromStorage(instanceId));
-    const unsubscribe = pluginRegistry.onChange(setPlugins, instanceId);
-    const storageKey = getStorageKey(instanceId);
+    setPlugins(pluginRegistry.loadFromStorage(resolvedInstanceId));
+    const unsubscribe = pluginRegistry.onChange(setPlugins, resolvedInstanceId);
+    const storageKey = getStorageKey(resolvedInstanceId);
     const handleStorage = (e) => {
       if (e.key === storageKey) {
-        setPlugins(pluginRegistry.loadFromStorage(instanceId));
+        setPlugins(pluginRegistry.loadFromStorage(resolvedInstanceId));
       }
     };
     window.addEventListener("storage", handleStorage);
+    const handlePluginInstalled = (e) => {
+      const customEvent = e;
+      if (customEvent.detail.instanceId === resolvedInstanceId) {
+        setPlugins(pluginRegistry.loadFromStorage(resolvedInstanceId));
+      }
+    };
+    window.addEventListener("hustle-plugin-installed", handlePluginInstalled);
     return () => {
       unsubscribe();
       window.removeEventListener("storage", handleStorage);
+      window.removeEventListener("hustle-plugin-installed", handlePluginInstalled);
     };
-  }, [instanceId]);
+  }, [resolvedInstanceId]);
   const registerPlugin = useCallback((plugin) => {
-    pluginRegistry.register(plugin, true, instanceId);
-  }, [instanceId]);
+    pluginRegistry.register(plugin, true, resolvedInstanceId);
+  }, [resolvedInstanceId]);
   const unregisterPlugin = useCallback((name) => {
-    pluginRegistry.unregister(name, instanceId);
-  }, [instanceId]);
+    pluginRegistry.unregister(name, resolvedInstanceId);
+  }, [resolvedInstanceId]);
   const enablePlugin = useCallback((name) => {
-    pluginRegistry.setEnabled(name, true, instanceId);
-  }, [instanceId]);
+    pluginRegistry.setEnabled(name, true, resolvedInstanceId);
+  }, [resolvedInstanceId]);
   const disablePlugin = useCallback((name) => {
-    pluginRegistry.setEnabled(name, false, instanceId);
-  }, [instanceId]);
+    pluginRegistry.setEnabled(name, false, resolvedInstanceId);
+  }, [resolvedInstanceId]);
   const isRegistered = useCallback(
     (name) => plugins.some((p) => p.name === name),
     [plugins]
@@ -1903,6 +1920,42 @@ function HustleProvider({
       }
     };
   }, [isAutoInstance, resolvedInstanceId]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const win = window;
+      win.__hustleInstanceId = resolvedInstanceId;
+      win.__hustleRegisterPlugin = async (plugin, enabled = true) => {
+        const hydrated = hydratePlugin(plugin);
+        pluginRegistry.register(hydrated, enabled, resolvedInstanceId);
+      };
+      win.__hustleUnregisterPlugin = async (name) => {
+        pluginRegistry.unregister(name, resolvedInstanceId);
+      };
+      win.__hustleListPlugins = () => {
+        const plugins = pluginRegistry.loadFromStorage(resolvedInstanceId);
+        return plugins.map((p) => ({
+          name: p.name,
+          version: p.version,
+          description: p.description || "",
+          enabled: p.enabled
+        }));
+      };
+      win.__hustleGetPlugin = (name) => {
+        const plugins = pluginRegistry.loadFromStorage(resolvedInstanceId);
+        return plugins.find((p) => p.name === name) || null;
+      };
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        const win = window;
+        delete win.__hustleInstanceId;
+        delete win.__hustleRegisterPlugin;
+        delete win.__hustleUnregisterPlugin;
+        delete win.__hustleListPlugins;
+        delete win.__hustleGetPlugin;
+      }
+    };
+  }, [resolvedInstanceId]);
   const isApiKeyMode = Boolean(apiKey && vaultId);
   const authContext = useEmblemAuthOptional();
   const authSDK = isApiKeyMode ? null : authContext?.authSDK ?? null;
@@ -2050,6 +2103,19 @@ function HustleProvider({
     };
     registerPlugins();
   }, [client, enabledPlugins, log]);
+  useEffect(() => {
+    if (typeof window !== "undefined" && client) {
+      const win = window;
+      win.__hustleUploadFile = async (file, fileName) => {
+        return await client.uploadFile(file, fileName);
+      };
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        delete window.__hustleUploadFile;
+      }
+    };
+  }, [client]);
   const loadModels = useCallback(async () => {
     if (!client) {
       log("Cannot load models - client not ready");
@@ -2930,12 +2996,16 @@ function ensureModalStyles() {
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(0, 0, 0, 0.6);
+      background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10000;
-      animation: uqFadeIn 0.2s ease-out;
+      pointer-events: none;
+    }
+
+    .user-question-modal {
+      pointer-events: auto;
     }
 
     @keyframes uqFadeIn {
@@ -3048,6 +3118,27 @@ function ensureModalStyles() {
       color: #666;
       cursor: not-allowed;
     }
+
+    .user-question-custom-input {
+      width: 100%;
+      padding: 8px 12px;
+      margin-top: 8px;
+      background: #1a1a2e;
+      border: 1px solid #444;
+      border-radius: 6px;
+      color: #e0e0e0;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+
+    .user-question-custom-input:focus {
+      outline: none;
+      border-color: #4a7aff;
+    }
+
+    .user-question-custom-input::placeholder {
+      color: #666;
+    }
   `;
   document.head.appendChild(styles2);
 }
@@ -3069,13 +3160,17 @@ var askUserTool = {
       allowMultiple: {
         type: "boolean",
         description: "If true, user can select multiple choices. Default: false"
+      },
+      allowCustom: {
+        type: "boolean",
+        description: 'If true, adds an "Other" option where user can type a custom response. Default: false'
       }
     },
     required: ["question", "choices"]
   }
 };
 var askUserExecutor = async (args2) => {
-  const { question, choices, allowMultiple = false } = args2;
+  const { question, choices, allowMultiple = false, allowCustom = false } = args2;
   if (!question || !choices || !Array.isArray(choices) || choices.length === 0) {
     return {
       question: question || "",
@@ -3107,6 +3202,17 @@ var askUserExecutor = async (args2) => {
     choicesDiv.className = "user-question-choices";
     const inputType = allowMultiple ? "checkbox" : "radio";
     const inputName = `uq-${Date.now()}`;
+    let customInput = null;
+    let isCustomSelected = false;
+    const submitBtn = document.createElement("button");
+    submitBtn.className = "user-question-btn user-question-btn-submit";
+    submitBtn.textContent = "Submit";
+    submitBtn.disabled = true;
+    const updateSubmitButton = () => {
+      const hasSelection = selected.size > 0;
+      const hasCustomValue = isCustomSelected && customInput && customInput.value.trim().length > 0;
+      submitBtn.disabled = !hasSelection && !hasCustomValue;
+    };
     choices.forEach((choice, index) => {
       const choiceDiv = document.createElement("div");
       choiceDiv.className = "user-question-choice";
@@ -3131,6 +3237,8 @@ var askUserExecutor = async (args2) => {
           }
         } else {
           selected.clear();
+          isCustomSelected = false;
+          if (customInput) customInput.value = "";
           selected.add(choice);
           choicesDiv.querySelectorAll(".user-question-choice").forEach((c) => c.classList.remove("selected"));
           choiceDiv.classList.add("selected");
@@ -3146,9 +3254,62 @@ var askUserExecutor = async (args2) => {
       });
       choicesDiv.appendChild(choiceDiv);
     });
+    if (allowCustom) {
+      const customChoiceDiv = document.createElement("div");
+      customChoiceDiv.className = "user-question-choice";
+      const customRadio = document.createElement("input");
+      customRadio.type = inputType;
+      customRadio.name = inputName;
+      customRadio.id = `${inputName}-custom`;
+      customRadio.value = "__custom__";
+      const customLabel = document.createElement("label");
+      customLabel.htmlFor = customRadio.id;
+      customLabel.textContent = "Other:";
+      customLabel.style.flexShrink = "0";
+      customInput = document.createElement("input");
+      customInput.type = "text";
+      customInput.className = "user-question-custom-input";
+      customInput.placeholder = "Type your answer...";
+      customInput.style.marginTop = "0";
+      customInput.style.marginLeft = "8px";
+      customInput.style.flex = "1";
+      customChoiceDiv.appendChild(customRadio);
+      customChoiceDiv.appendChild(customLabel);
+      customChoiceDiv.appendChild(customInput);
+      const handleCustomSelect = () => {
+        if (!allowMultiple) {
+          selected.clear();
+          choicesDiv.querySelectorAll(".user-question-choice").forEach((c) => c.classList.remove("selected"));
+        }
+        isCustomSelected = true;
+        customChoiceDiv.classList.add("selected");
+        customInput?.focus();
+        updateSubmitButton();
+      };
+      customRadio.addEventListener("change", handleCustomSelect);
+      customChoiceDiv.addEventListener("click", (e) => {
+        if (e.target !== customRadio && e.target !== customInput) {
+          customRadio.checked = true;
+          handleCustomSelect();
+        }
+      });
+      customInput.addEventListener("focus", () => {
+        if (!customRadio.checked) {
+          customRadio.checked = true;
+          handleCustomSelect();
+        }
+      });
+      customInput.addEventListener("input", updateSubmitButton);
+      choicesDiv.appendChild(customChoiceDiv);
+    }
     modal.appendChild(choicesDiv);
     const actions = document.createElement("div");
     actions.className = "user-question-actions";
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    const cleanup = () => {
+      overlay.remove();
+    };
     const cancelBtn = document.createElement("button");
     cancelBtn.className = "user-question-btn user-question-btn-cancel";
     cancelBtn.textContent = "Skip";
@@ -3160,29 +3321,21 @@ var askUserExecutor = async (args2) => {
         answered: false
       });
     };
-    const submitBtn = document.createElement("button");
-    submitBtn.className = "user-question-btn user-question-btn-submit";
-    submitBtn.textContent = "Submit";
-    submitBtn.disabled = true;
     submitBtn.onclick = () => {
       cleanup();
+      const results = Array.from(selected);
+      if (isCustomSelected && customInput && customInput.value.trim()) {
+        results.push(customInput.value.trim());
+      }
       resolve({
         question,
-        selectedChoices: Array.from(selected),
+        selectedChoices: results,
         answered: true
       });
     };
-    const updateSubmitButton = () => {
-      submitBtn.disabled = selected.size === 0;
-    };
     actions.appendChild(cancelBtn);
     actions.appendChild(submitBtn);
     modal.appendChild(actions);
-    overlay.appendChild(modal);
-    document.body.appendChild(overlay);
-    const cleanup = () => {
-      overlay.remove();
-    };
     const handleEscape = (e) => {
       if (e.key === "Escape") {
         document.removeEventListener("keydown", handleEscape);
@@ -3351,6 +3504,11 @@ var screenshotTool = {
 
 The screenshot captures the visible viewport of the page. The image is uploaded to the server and a permanent URL is returned.
 
+IMPORTANT: Before taking a screenshot, use the ask_user tool (if available) to ask which size they prefer:
+- "full" (100%) - highest quality, larger file
+- "half" (50%) - good balance of quality and size
+- "quarter" (25%) - smallest file, faster upload
+
 Use this when:
 - User asks to see what's on their screen
 - You need to analyze the current page visually
@@ -3361,12 +3519,24 @@ Use this when:
       selector: {
         type: "string",
         description: "Optional CSS selector to capture a specific element instead of the full page. Leave empty for full page screenshot."
+      },
+      size: {
+        type: "string",
+        enum: ["full", "half", "quarter"],
+        description: 'Image size: "full" (100%), "half" (50%), or "quarter" (25%). Ask the user which size they prefer before capturing.'
       }
     }
   }
 };
 var screenshotExecutor = async (args2) => {
   const selector = args2.selector;
+  const size = args2.size || "full";
+  const scaleMap = {
+    full: 1,
+    half: 0.5,
+    quarter: 0.25
+  };
+  const scale = scaleMap[size] || 1;
   if (typeof window === "undefined" || typeof document === "undefined") {
     return {
       success: false,
@@ -3387,34 +3557,41 @@ var screenshotExecutor = async (args2) => {
     if (!target) {
       return { success: false, error: "Element not found: " + selector };
     }
-    const canvas = await window.html2canvas(target, {
+    const fullCanvas = await window.html2canvas(target, {
       useCORS: true,
       allowTaint: true,
       backgroundColor: "#000000",
       scale: 1
     });
+    let finalCanvas = fullCanvas;
+    if (scale < 1) {
+      const resizedCanvas = document.createElement("canvas");
+      resizedCanvas.width = Math.round(fullCanvas.width * scale);
+      resizedCanvas.height = Math.round(fullCanvas.height * scale);
+      const ctx = resizedCanvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(fullCanvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
+        finalCanvas = resizedCanvas;
+      }
+    }
     const blob = await new Promise((resolve) => {
-      canvas.toBlob(resolve, "image/png", 0.9);
+      finalCanvas.toBlob(resolve, "image/png", 0.9);
     });
     if (!blob) {
       return { success: false, error: "Failed to create image blob" };
     }
-    const formData = new FormData();
-    formData.append("file", blob, "screenshot-" + Date.now() + ".png");
-    const response = await fetch("/api/files/upload", {
-      method: "POST",
-      body: formData
-    });
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      return { success: false, error: errorData.error || "Upload failed" };
+    const uploadFn = window.__hustleUploadFile;
+    if (!uploadFn) {
+      return { success: false, error: "Upload not available. Make sure HustleProvider is mounted and client is ready." };
     }
-    const data = await response.json();
+    const fileName = "screenshot-" + Date.now() + ".png";
+    const attachment = await uploadFn(blob, fileName);
+    const sizeLabel = size === "full" ? "100%" : size === "half" ? "50%" : "25%";
     return {
       success: true,
-      url: data.url,
-      contentType: data.contentType,
-      message: "Screenshot captured and uploaded successfully"
+      url: attachment.url,
+      contentType: attachment.contentType || "image/png",
+      message: `Screenshot captured at ${sizeLabel} size (${finalCanvas.width}x${finalCanvas.height}) and uploaded successfully`
     };
   } catch (e) {
     const err = e;
@@ -3439,6 +3616,636 @@ var screenshotPlugin = {
   }
 };
 
+// src/plugins/pluginBuilder.ts
+var buildPluginTool = {
+  name: "build_plugin",
+  description: `Build a Hustle plugin definition. Use this tool to construct a plugin based on user requirements.
+
+## Plugin Structure
+
+A plugin consists of:
+- **name**: Unique identifier (lowercase, no spaces, e.g., "my-plugin")
+- **version**: Semantic version (e.g., "1.0.0")
+- **description**: What the plugin does
+- **tools**: Array of tool definitions the AI can call
+- **executorCode**: Object mapping tool names to JavaScript function code strings
+
+## Tool Definition Format
+
+Each tool needs:
+- **name**: Unique tool name (alphanumeric + underscore, e.g., "get_weather")
+- **description**: Clear description for the AI to understand when to use it
+- **parameters**: JSON Schema object defining the arguments
+
+Example tool:
+{
+  "name": "get_weather",
+  "description": "Get current weather for a city",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "city": { "type": "string", "description": "City name" },
+      "units": { "type": "string", "enum": ["celsius", "fahrenheit"], "description": "Temperature units" }
+    },
+    "required": ["city"]
+  }
+}
+
+## Executor Code Format
+
+Executors are async JavaScript functions that receive args and return a result.
+Write them as arrow function strings that will be eval'd:
+
+"async (args) => { const { city } = args; return { weather: 'sunny', city }; }"
+
+The function receives args as Record<string, unknown> and should return the result.
+
+## Available in Executor Scope
+
+Executors run in the browser context with full access to:
+
+### Browser APIs
+- **fetch(url, options)** - HTTP requests (subject to CORS)
+- **localStorage / sessionStorage** - Persistent storage
+- **document** - Full DOM access (create elements, modals, forms, etc.)
+- **window** - Global window object
+- **console** - Logging (log, warn, error, etc.)
+- **setTimeout / setInterval / clearTimeout / clearInterval** - Timers
+- **JSON** - Parse and stringify
+- **Date** - Date/time operations
+- **URL / URLSearchParams** - URL manipulation
+- **FormData / Blob / File / FileReader** - File handling
+- **crypto** - Cryptographic operations (crypto.randomUUID(), etc.)
+- **navigator** - Browser info, clipboard, geolocation, etc.
+- **location** - Current URL info
+- **history** - Browser history navigation
+- **WebSocket** - Real-time bidirectional communication
+- **EventSource** - Server-sent events
+- **indexedDB** - Client-side database for large data
+- **Notification** - Browser notifications (requires permission)
+- **performance** - Performance timing
+- **atob / btoa** - Base64 encoding/decoding
+- **TextEncoder / TextDecoder** - Text encoding
+- **AbortController** - Cancel fetch requests
+- **IntersectionObserver / MutationObserver / ResizeObserver** - DOM observers
+- **requestAnimationFrame** - Animation timing
+- **speechSynthesis** - Text-to-speech
+- **Audio / Image / Canvas** - Media APIs
+
+### Hustle Plugin System Globals
+- **window.__hustleInstanceId** - Current Hustle instance ID
+- **window.__hustleRegisterPlugin(plugin, enabled)** - Install another plugin dynamically
+- **window.__hustleUnregisterPlugin(name)** - Uninstall a plugin by name
+- **window.__hustleUploadFile(file, fileName?)** - Upload a File/Blob to the server, returns { url, contentType }
+- **window.__hustleListPlugins()** - List all installed plugins
+- **window.__hustleGetPlugin(name)** - Get a specific plugin by name
+
+### DOM Manipulation Examples
+Create a modal: document.createElement('div'), style it, append to document.body
+Add event listeners: element.addEventListener('click', handler)
+Query elements: document.querySelector(), document.querySelectorAll()
+
+### Storage Patterns
+Store data: localStorage.setItem('key', JSON.stringify(data))
+Retrieve data: JSON.parse(localStorage.getItem('key') || '{}')
+Namespace your keys: Use plugin name prefix like "myplugin-settings"
+
+### Async Patterns
+All executors should be async. Use await for promises:
+"async (args) => { const res = await fetch(url); return await res.json(); }"
+
+## Lifecycle Hooks (Optional)
+
+Hooks also have full access to the browser scope described above.
+
+- **onRegisterCode**: Called once when plugin is registered/enabled. Good for initialization.
+  **IMPORTANT: Always log when your plugin registers so users know it's active!**
+  Example: "async () => { console.log('[MyPlugin] v1.0.0 registered'); }"
+
+- **beforeRequestCode**: Modify messages before sending. Receives request object with { messages, model, ... }. Must return the modified request.
+  Example: "async (req) => { req.messages = req.messages.map(m => ({...m, content: m.content.toUpperCase()})); return req; }"
+
+- **afterResponseCode**: Process/modify response after receiving. Receives response object with { content, ... }.
+  Example: "async (res) => { console.log('Response received:', res.content.substring(0, 100)); }"
+
+- **onErrorCode**: Called on errors. Receives (error, context) where context has { phase: 'beforeRequest'|'execute'|'afterResponse' }.
+  Example: "async (error, ctx) => { console.error('[MyPlugin] Error in', ctx.phase, ':', error.message); }"
+
+## Best Practices
+
+1. **Always add onRegisterCode** that logs the plugin name and version
+2. **Namespace console logs** with [PluginName] prefix for easy identification
+3. **Handle errors gracefully** in executors - return { error: message } instead of throwing
+
+## Security Notes
+- Code runs in browser sandbox with same-origin policy
+- fetch() is subject to CORS restrictions
+- No direct filesystem access (use File API with user interaction)
+- Be careful with eval() on user input`,
+  parameters: {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        description: "Unique plugin identifier (lowercase, no spaces)"
+      },
+      version: {
+        type: "string",
+        description: 'Semantic version (e.g., "1.0.0")'
+      },
+      description: {
+        type: "string",
+        description: "What the plugin does"
+      },
+      tools: {
+        type: "array",
+        description: "Array of tool definitions",
+        items: {
+          type: "object",
+          properties: {
+            name: { type: "string", description: "Tool name" },
+            description: { type: "string", description: "Tool description for AI" },
+            parameters: { type: "object", description: "JSON Schema for arguments" }
+          },
+          required: ["name", "description", "parameters"]
+        }
+      },
+      executorCode: {
+        type: "object",
+        description: "Object mapping tool names to executor function code strings"
+      },
+      beforeRequestCode: {
+        type: "string",
+        description: "Optional: Code for beforeRequest hook"
+      },
+      afterResponseCode: {
+        type: "string",
+        description: "Optional: Code for afterResponse hook"
+      },
+      onRegisterCode: {
+        type: "string",
+        description: "Optional: Code for onRegister hook"
+      },
+      onErrorCode: {
+        type: "string",
+        description: "Optional: Code for onError hook"
+      }
+    },
+    required: ["name", "version", "description", "tools", "executorCode"]
+  }
+};
+var savePluginTool = {
+  name: "save_plugin",
+  description: "Save a built plugin as a JSON file. Opens a download dialog for the user.",
+  parameters: {
+    type: "object",
+    properties: {
+      plugin: {
+        type: "object",
+        description: "The plugin object to save (from build_plugin result)"
+      },
+      filename: {
+        type: "string",
+        description: "Filename without extension (defaults to plugin name)"
+      }
+    },
+    required: ["plugin"]
+  }
+};
+var installPluginTool = {
+  name: "install_plugin",
+  description: "Install a built plugin to browser storage so it persists and can be used.",
+  parameters: {
+    type: "object",
+    properties: {
+      plugin: {
+        type: "object",
+        description: "The plugin object to install (from build_plugin result)"
+      },
+      enabled: {
+        type: "boolean",
+        description: "Whether to enable the plugin immediately (default: true)"
+      }
+    },
+    required: ["plugin"]
+  }
+};
+var uninstallPluginTool = {
+  name: "uninstall_plugin",
+  description: "Uninstall a plugin by name, removing it from browser storage.",
+  parameters: {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        description: "The name of the plugin to uninstall"
+      }
+    },
+    required: ["name"]
+  }
+};
+var listPluginsTool = {
+  name: "list_plugins",
+  description: "List all installed plugins with their enabled/disabled status.",
+  parameters: {
+    type: "object",
+    properties: {},
+    required: []
+  }
+};
+var modifyPluginTool = {
+  name: "modify_plugin",
+  description: `Modify an existing installed plugin. Can update version, description, tools, executors, and hooks.
+
+Use list_plugins first to see installed plugins, then modify by name.
+
+You can:
+- Add new tools (provide tools array with new tools to add)
+- Update existing tools (provide tool with same name)
+- Remove tools (set removeTool to the tool name)
+- Update hooks (provide hook code)
+- Update version/description
+
+Example: Add a new tool to existing plugin:
+{
+  "name": "my-plugin",
+  "addTools": [{ "name": "new_tool", "description": "...", "parameters": {...} }],
+  "addExecutorCode": { "new_tool": "async (args) => { ... }" }
+}`,
+  parameters: {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        description: "Name of the plugin to modify (required)"
+      },
+      version: {
+        type: "string",
+        description: "New version string"
+      },
+      description: {
+        type: "string",
+        description: "New description"
+      },
+      addTools: {
+        type: "array",
+        description: "Tools to add or update",
+        items: {
+          type: "object",
+          properties: {
+            name: { type: "string" },
+            description: { type: "string" },
+            parameters: { type: "object" }
+          }
+        }
+      },
+      addExecutorCode: {
+        type: "object",
+        description: "Executor code to add/update (tool name -> code string)"
+      },
+      removeTools: {
+        type: "array",
+        description: "Names of tools to remove",
+        items: { type: "string" }
+      },
+      onRegisterCode: {
+        type: "string",
+        description: "New onRegister hook code"
+      },
+      beforeRequestCode: {
+        type: "string",
+        description: "New beforeRequest hook code"
+      },
+      afterResponseCode: {
+        type: "string",
+        description: "New afterResponse hook code"
+      },
+      onErrorCode: {
+        type: "string",
+        description: "New onError hook code"
+      }
+    },
+    required: ["name"]
+  }
+};
+var buildPluginExecutor = async (args2) => {
+  const {
+    name,
+    version,
+    description,
+    tools,
+    executorCode,
+    beforeRequestCode,
+    afterResponseCode,
+    onRegisterCode,
+    onErrorCode
+  } = args2;
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
+    return {
+      success: false,
+      error: "Plugin name must be lowercase, start with a letter, and contain only letters, numbers, and hyphens"
+    };
+  }
+  if (!/^\d+\.\d+\.\d+/.test(version)) {
+    return {
+      success: false,
+      error: 'Version must be in semver format (e.g., "1.0.0")'
+    };
+  }
+  for (const tool of tools) {
+    if (!executorCode[tool.name]) {
+      return {
+        success: false,
+        error: `Missing executor code for tool: ${tool.name}`
+      };
+    }
+  }
+  const storedPlugin = {
+    name,
+    version,
+    description,
+    tools: tools.map((tool) => ({
+      ...tool,
+      executorCode: executorCode[tool.name]
+    })),
+    enabled: true,
+    installedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  if (beforeRequestCode || afterResponseCode || onRegisterCode || onErrorCode) {
+    storedPlugin.hooksCode = {};
+    if (beforeRequestCode) storedPlugin.hooksCode.beforeRequestCode = beforeRequestCode;
+    if (afterResponseCode) storedPlugin.hooksCode.afterResponseCode = afterResponseCode;
+    if (onRegisterCode) storedPlugin.hooksCode.onRegisterCode = onRegisterCode;
+    if (onErrorCode) storedPlugin.hooksCode.onErrorCode = onErrorCode;
+  }
+  return {
+    success: true,
+    plugin: storedPlugin,
+    message: `Plugin "${name}" v${version} built successfully with ${tools.length} tool(s). Use save_plugin to download or install_plugin to add to browser storage.`
+  };
+};
+function normalizePlugin(input) {
+  const plugin = input;
+  const tools = plugin.tools;
+  const hasEmbeddedExecutors = tools?.[0]?.executorCode !== void 0;
+  if (hasEmbeddedExecutors) {
+    return {
+      ...plugin,
+      enabled: plugin.enabled ?? true,
+      installedAt: plugin.installedAt ?? (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  const executorCode = plugin.executorCode;
+  const rawTools = tools || [];
+  const hookKeys = ["onRegisterCode", "beforeRequestCode", "afterResponseCode", "onErrorCode"];
+  const hooksCode = {};
+  for (const key of hookKeys) {
+    if (executorCode?.[key]) {
+      hooksCode[key] = executorCode[key];
+    }
+    if (plugin[key]) {
+      hooksCode[key] = plugin[key];
+    }
+  }
+  return {
+    name: plugin.name,
+    version: plugin.version,
+    description: plugin.description,
+    tools: rawTools.map((tool) => ({
+      name: tool.name,
+      description: tool.description,
+      parameters: tool.parameters,
+      executorCode: executorCode?.[tool.name]
+    })),
+    hooksCode: Object.keys(hooksCode).length > 0 ? hooksCode : void 0,
+    enabled: true,
+    installedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+var savePluginExecutor = async (args2) => {
+  const { plugin: rawPlugin, filename } = args2;
+  if (typeof window === "undefined") {
+    return { success: false, error: "Cannot save files in server environment" };
+  }
+  try {
+    const plugin = normalizePlugin(rawPlugin);
+    const json2 = JSON.stringify(plugin, null, 2);
+    const blob = new Blob([json2], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${filename || plugin.name}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    return {
+      success: true,
+      message: `Plugin saved as ${filename || plugin.name}.json`
+    };
+  } catch (error2) {
+    return {
+      success: false,
+      error: `Failed to save: ${error2 instanceof Error ? error2.message : "Unknown error"}`
+    };
+  }
+};
+var installPluginExecutor = async (args2) => {
+  const { plugin: rawPlugin, enabled = true } = args2;
+  if (typeof window === "undefined") {
+    return { success: false, error: "Cannot install plugins in server environment" };
+  }
+  try {
+    const plugin = normalizePlugin(rawPlugin);
+    const win = window;
+    if (!win.__hustleRegisterPlugin) {
+      return {
+        success: false,
+        error: "Plugin registration not available. Make sure HustleProvider is mounted."
+      };
+    }
+    await win.__hustleRegisterPlugin(plugin, enabled);
+    return {
+      success: true,
+      message: `Plugin "${plugin.name}" installed${enabled ? " and enabled" : ""}.`
+    };
+  } catch (error2) {
+    return {
+      success: false,
+      error: `Failed to install: ${error2 instanceof Error ? error2.message : "Unknown error"}`
+    };
+  }
+};
+var uninstallPluginExecutor = async (args2) => {
+  const { name } = args2;
+  if (typeof window === "undefined") {
+    return { success: false, error: "Cannot uninstall plugins in server environment" };
+  }
+  try {
+    const win = window;
+    if (!win.__hustleUnregisterPlugin) {
+      return {
+        success: false,
+        error: "Plugin unregistration not available. Make sure HustleProvider is mounted."
+      };
+    }
+    await win.__hustleUnregisterPlugin(name);
+    return {
+      success: true,
+      message: `Plugin "${name}" has been uninstalled.`
+    };
+  } catch (error2) {
+    return {
+      success: false,
+      error: `Failed to uninstall: ${error2 instanceof Error ? error2.message : "Unknown error"}`
+    };
+  }
+};
+var listPluginsExecutor = async () => {
+  if (typeof window === "undefined") {
+    return { success: false, error: "Cannot list plugins in server environment" };
+  }
+  try {
+    const win = window;
+    if (!win.__hustleListPlugins) {
+      return {
+        success: false,
+        error: "Plugin listing not available. Make sure HustleProvider is mounted."
+      };
+    }
+    const plugins = win.__hustleListPlugins();
+    return {
+      success: true,
+      plugins,
+      summary: plugins.length === 0 ? "No plugins installed." : `${plugins.length} plugin(s) installed: ${plugins.map((p) => `${p.name} v${p.version} (${p.enabled ? "enabled" : "disabled"})`).join(", ")}`
+    };
+  } catch (error2) {
+    return {
+      success: false,
+      error: `Failed to list plugins: ${error2 instanceof Error ? error2.message : "Unknown error"}`
+    };
+  }
+};
+var modifyPluginExecutor = async (args2) => {
+  const {
+    name,
+    version,
+    description,
+    addTools,
+    addExecutorCode,
+    removeTools,
+    onRegisterCode,
+    beforeRequestCode,
+    afterResponseCode,
+    onErrorCode
+  } = args2;
+  if (typeof window === "undefined") {
+    return { success: false, error: "Cannot modify plugins in server environment" };
+  }
+  try {
+    const win = window;
+    if (!win.__hustleGetPlugin || !win.__hustleRegisterPlugin) {
+      return {
+        success: false,
+        error: "Plugin modification not available. Make sure HustleProvider is mounted."
+      };
+    }
+    const existing = win.__hustleGetPlugin(name);
+    if (!existing) {
+      return {
+        success: false,
+        error: `Plugin "${name}" not found. Use list_plugins to see installed plugins.`
+      };
+    }
+    let tools = existing.tools ? [...existing.tools] : [];
+    if (removeTools && removeTools.length > 0) {
+      tools = tools.filter((t) => !removeTools.includes(t.name));
+    }
+    if (addTools && addTools.length > 0) {
+      for (const newTool of addTools) {
+        const existingIndex = tools.findIndex((t) => t.name === newTool.name);
+        const toolWithExecutor = {
+          ...newTool,
+          executorCode: addExecutorCode?.[newTool.name] || tools.find((t) => t.name === newTool.name)?.executorCode
+        };
+        if (existingIndex >= 0) {
+          tools[existingIndex] = toolWithExecutor;
+        } else {
+          tools.push(toolWithExecutor);
+        }
+      }
+    }
+    if (addExecutorCode) {
+      for (const [toolName, code2] of Object.entries(addExecutorCode)) {
+        const tool = tools.find((t) => t.name === toolName);
+        if (tool) {
+          tool.executorCode = code2;
+        }
+      }
+    }
+    const modified = {
+      ...existing,
+      tools
+    };
+    if (version) modified.version = version;
+    if (description) modified.description = description;
+    if (onRegisterCode || beforeRequestCode || afterResponseCode || onErrorCode) {
+      modified.hooksCode = modified.hooksCode || {};
+      if (onRegisterCode) modified.hooksCode.onRegisterCode = onRegisterCode;
+      if (beforeRequestCode) modified.hooksCode.beforeRequestCode = beforeRequestCode;
+      if (afterResponseCode) modified.hooksCode.afterResponseCode = afterResponseCode;
+      if (onErrorCode) modified.hooksCode.onErrorCode = onErrorCode;
+    }
+    const unregisterFn = window.__hustleUnregisterPlugin;
+    if (unregisterFn) {
+      await unregisterFn(name);
+    }
+    await win.__hustleRegisterPlugin(modified, existing.enabled);
+    const changes = [];
+    if (version) changes.push(`version \u2192 ${version}`);
+    if (description) changes.push("description updated");
+    if (removeTools?.length) changes.push(`removed ${removeTools.length} tool(s)`);
+    if (addTools?.length) changes.push(`added/updated ${addTools.length} tool(s)`);
+    if (onRegisterCode) changes.push("onRegister hook updated");
+    if (beforeRequestCode) changes.push("beforeRequest hook updated");
+    if (afterResponseCode) changes.push("afterResponse hook updated");
+    if (onErrorCode) changes.push("onError hook updated");
+    return {
+      success: true,
+      message: `Plugin "${name}" modified: ${changes.join(", ")}`,
+      plugin: {
+        name: modified.name,
+        version: modified.version,
+        toolCount: tools.length
+      }
+    };
+  } catch (error2) {
+    return {
+      success: false,
+      error: `Failed to modify plugin: ${error2 instanceof Error ? error2.message : "Unknown error"}`
+    };
+  }
+};
+var pluginBuilderPlugin = {
+  name: "plugin-builder",
+  version: "1.2.0",
+  description: "Build custom plugins through conversation",
+  tools: [buildPluginTool, savePluginTool, installPluginTool, uninstallPluginTool, listPluginsTool, modifyPluginTool],
+  executors: {
+    build_plugin: buildPluginExecutor,
+    save_plugin: savePluginExecutor,
+    install_plugin: installPluginExecutor,
+    uninstall_plugin: uninstallPluginExecutor,
+    list_plugins: listPluginsExecutor,
+    modify_plugin: modifyPluginExecutor
+  },
+  hooks: {
+    onRegister: () => {
+      console.log("[Plugin Builder] Ready to help build custom plugins");
+    }
+  }
+};
+
 // src/plugins/index.ts
 var availablePlugins = [
   {
@@ -3468,6 +4275,10 @@ var availablePlugins = [
   {
     ...screenshotPlugin,
     description: "Take screenshots of the current page"
+  },
+  {
+    ...pluginBuilderPlugin,
+    description: "Build custom plugins through conversation with AI"
   }
 ];
 function getAvailablePlugin(name) {