@emblemvault/hustle-react 1.1.0 → 1.1.2

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;
@@ -3444,6 +3621,21 @@ var buildPluginTool = {
   name: "build_plugin",
   description: `Build a Hustle plugin definition. Use this tool to construct a plugin based on user requirements.
 
+## Testing Before Building (IMPORTANT)
+
+If the execute_javascript tool is available, use it to prototype and test code BEFORE building the plugin. This allows rapid iteration without the overhead of building/installing/uninstalling.
+
+**Workflow:**
+1. When a user describes what they want, first test the core logic using execute_javascript
+2. Iterate on the code until it works correctly
+3. Ask the user: "Would you like to test this further, or should I build it into a plugin?"
+4. Only call build_plugin once the code is validated and the user confirms
+
+**Example:** If building a weather plugin, first test the API call:
+execute_javascript({ code: "fetch('https://api.example.com/weather?city=London').then(r => r.json()).then(console.log)" })
+
+This catches errors early and lets users see results before committing to a plugin.
+
 ## Plugin Structure
 
 A plugin consists of:
@@ -3482,21 +3674,127 @@ 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.
-You can use fetch(), standard browser APIs, and async/await.
+
+## 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)
 
-- **beforeRequestCode**: Modify messages before sending. Receives request object, must return modified request.
+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 response after receiving. Receives response object.
-  Example: "async (res) => { console.log('Response:', res.content); }"
+- **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
 
-- **onRegisterCode**: Called when plugin is registered.
-  Example: "async () => { console.log('Plugin loaded!'); }"
+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
 
-- **onErrorCode**: Called on errors. Receives (error, context).
-  Example: "async (error, ctx) => { console.error('Error in', ctx.phase, error); }"`,
+## Building Plugin UI
+
+Plugins can embed custom UI elements in two ways:
+
+### Persistent UI (via onRegister hook)
+Use the onRegister hook to embed UI that persists across the chat session. Check if your element already exists to avoid duplicates on re-registration:
+
+"async () => {
+  console.log('[MyPlugin] v1.0.0 registered');
+  if (document.getElementById('my-plugin-panel')) return; // Already exists
+
+  const panel = document.createElement('div');
+  panel.id = 'my-plugin-panel';
+  Object.assign(panel.style, { position: 'fixed', bottom: '20px', right: '20px', padding: '10px', background: '#333', color: '#fff' });
+  panel.textContent = 'My Panel';
+  document.body.appendChild(panel);
+}"
+
+### On-Demand UI (via tool executors)
+Embed UI just-in-time when a tool is invoked. Useful for tools like show_clock, display_chart, etc.:
+
+"async (args) => {
+  const modal = document.createElement('div');
+  modal.id = 'clock-modal';
+  Object.assign(modal.style, { position: 'fixed', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)' });
+  modal.textContent = 'Current time: ' + new Date().toLocaleTimeString();
+  modal.onclick = () => modal.remove(); // Click to dismiss
+  document.body.appendChild(modal);
+  return { success: true, message: 'Clock displayed' };
+}"
+
+### UI Best Practices
+- Always use unique IDs with your plugin name prefix (e.g., "myplugin-modal")
+- For persistent UI, check existence in onRegister before creating
+- Provide a way to dismiss/close UI elements (click handler, close button)
+- Use Object.assign(el.style, {...}) for inline styles or inject a <style> tag
+- Clean up UI in tool executors if appropriate (e.g., remove after timeout)
+
+## 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)
+- Sanitize any user-provided content before inserting into the DOM`,
   parameters: {
     type: "object",
     properties: {
@@ -3585,6 +3883,104 @@ var installPluginTool = {
     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,
@@ -3641,12 +4037,51 @@ var buildPluginExecutor = async (args2) => {
     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, filename } = 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);
@@ -3669,31 +4104,23 @@ var savePluginExecutor = async (args2) => {
   }
 };
 var installPluginExecutor = async (args2) => {
-  const { plugin, enabled = true } = args2;
+  const { plugin: rawPlugin, enabled = true } = args2;
   if (typeof window === "undefined") {
     return { success: false, error: "Cannot install plugins in server environment" };
   }
   try {
-    const instanceId = window.__hustleInstanceId || "global-demo";
-    const STORAGE_KEY = `hustle-plugins-${instanceId}`;
-    const stored = localStorage.getItem(STORAGE_KEY);
-    const plugins = stored ? JSON.parse(stored) : [];
-    const existingIndex = plugins.findIndex((p) => p.name === plugin.name);
-    const pluginToStore = {
-      ...plugin,
-      enabled,
-      installedAt: (/* @__PURE__ */ new Date()).toISOString()
-    };
-    if (existingIndex >= 0) {
-      plugins[existingIndex] = pluginToStore;
-    } else {
-      plugins.push(pluginToStore);
+    const plugin = normalizePlugin(rawPlugin);
+    const win = window;
+    if (!win.__hustleRegisterPlugin) {
+      return {
+        success: false,
+        error: "Plugin registration not available. Make sure HustleProvider is mounted."
+      };
     }
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(plugins));
+    await win.__hustleRegisterPlugin(plugin, enabled);
     return {
       success: true,
-      message: `Plugin "${plugin.name}" installed${enabled ? " and enabled" : ""}. Refresh the page or re-register plugins to activate.`,
-      action: existingIndex >= 0 ? "updated" : "installed"
+      message: `Plugin "${plugin.name}" installed${enabled ? " and enabled" : ""}.`
     };
   } catch (error2) {
     return {
@@ -3702,15 +4129,168 @@ var installPluginExecutor = async (args2) => {
     };
   }
 };
+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.0.0",
+  version: "1.2.0",
   description: "Build custom plugins through conversation",
-  tools: [buildPluginTool, savePluginTool, installPluginTool],
+  tools: [buildPluginTool, savePluginTool, installPluginTool, uninstallPluginTool, listPluginsTool, modifyPluginTool],
   executors: {
     build_plugin: buildPluginExecutor,
     save_plugin: savePluginExecutor,
-    install_plugin: installPluginExecutor
+    install_plugin: installPluginExecutor,
+    uninstall_plugin: uninstallPluginExecutor,
+    list_plugins: listPluginsExecutor,
+    modify_plugin: modifyPluginExecutor
   },
   hooks: {
     onRegister: () => {