@ewjdev/anyclick-react 3.0.0 → 4.0.0

package/dist/index.js

@@ -31,28 +31,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ALL_CURATED_PROPERTIES: () => import_anyclick_core7.ALL_CURATED_PROPERTIES,
+  ALL_CURATED_PROPERTIES: () => import_anyclick_core8.ALL_CURATED_PROPERTIES,
   AnyclickContext: () => AnyclickContext,
   AnyclickLogo: () => AnyclickLogo,
   AnyclickProvider: () => AnyclickProvider,
-  CURATED_STYLE_PROPERTIES: () => import_anyclick_core7.CURATED_STYLE_PROPERTIES,
+  Button: () => Button,
+  CURATED_STYLE_PROPERTIES: () => import_anyclick_core8.CURATED_STYLE_PROPERTIES,
   ContextMenu: () => ContextMenu,
   DEFAULT_COMPACT_CONFIG: () => DEFAULT_COMPACT_CONFIG,
   DEFAULT_QUICK_CHAT_CONFIG: () => DEFAULT_QUICK_CHAT_CONFIG,
-  DEFAULT_SCREENSHOT_CONFIG: () => import_anyclick_core6.DEFAULT_SCREENSHOT_CONFIG,
-  DEFAULT_SENSITIVE_SELECTORS: () => import_anyclick_core6.DEFAULT_SENSITIVE_SELECTORS,
+  DEFAULT_SCREENSHOT_CONFIG: () => import_anyclick_core7.DEFAULT_SCREENSHOT_CONFIG,
+  DEFAULT_SENSITIVE_SELECTORS: () => import_anyclick_core7.DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext: () => FeedbackContext,
   FeedbackProvider: () => FeedbackProvider,
   FunModeBridge: () => FunModeBridge,
   INSPECT_DIALOG_EVENT: () => INSPECT_DIALOG_EVENT,
+  Input: () => Input,
   InspectDialogManager: () => InspectDialogManager,
   InspectSimple: () => InspectSimple,
   QuickChat: () => QuickChat,
   ScreenshotPreview: () => ScreenshotPreview,
   applyHighlights: () => applyHighlights,
   buildIDEUrl: () => buildIDEUrl,
-  captureAllScreenshots: () => import_anyclick_core6.captureAllScreenshots,
-  captureScreenshot: () => import_anyclick_core6.captureScreenshot,
+  captureAllScreenshots: () => import_anyclick_core7.captureAllScreenshots,
+  captureScreenshot: () => import_anyclick_core7.captureScreenshot,
   clearHighlights: () => clearHighlights,
   createIDEOpener: () => createIDEOpener,
   createPresetMenu: () => createPresetMenu,
@@ -65,28 +67,28 @@ __export(index_exports, {
   detectImageElement: () => detectImageElement,
   detectPreferredIDE: () => detectPreferredIDE,
   dispatchContextMenuEvent: () => dispatchContextMenuEvent,
-  estimateTotalSize: () => import_anyclick_core6.estimateTotalSize,
+  estimateTotalSize: () => import_anyclick_core7.estimateTotalSize,
   filterMenuItemsByRole: () => filterMenuItemsByRole,
   findContainerParent: () => findContainerParent,
   findSourceLocationInAncestors: () => findSourceLocationInAncestors,
-  formatBoxModel: () => import_anyclick_core7.formatBoxModel,
-  formatBytes: () => import_anyclick_core6.formatBytes,
+  formatBoxModel: () => import_anyclick_core8.formatBoxModel,
+  formatBytes: () => import_anyclick_core7.formatBytes,
   formatSourceLocation: () => formatSourceLocation,
-  formatStylesAsCSS: () => import_anyclick_core7.formatStylesAsCSS,
+  formatStylesAsCSS: () => import_anyclick_core8.formatStylesAsCSS,
   generateProviderId: () => generateProviderId,
-  getAccessibilityInfo: () => import_anyclick_core7.getAccessibilityInfo,
-  getAttributes: () => import_anyclick_core7.getAttributes,
+  getAccessibilityInfo: () => import_anyclick_core8.getAccessibilityInfo,
+  getAttributes: () => import_anyclick_core8.getAttributes,
   getBadgeStyle: () => getBadgeStyle,
-  getBoxModelInfo: () => import_anyclick_core7.getBoxModelInfo,
-  getComputedStyles: () => import_anyclick_core7.getComputedStyles,
-  getElementInspectInfo: () => import_anyclick_core7.getElementInspectInfo,
+  getBoxModelInfo: () => import_anyclick_core8.getBoxModelInfo,
+  getComputedStyles: () => import_anyclick_core8.getComputedStyles,
+  getElementInspectInfo: () => import_anyclick_core8.getElementInspectInfo,
   getSelectedText: () => getSelectedText,
   getSourceLocationFromElement: () => getSourceLocationFromElement,
   hasTextSelection: () => hasTextSelection,
   highlightContainer: () => highlightContainer,
   highlightTarget: () => highlightTarget,
   isIDEProtocolSupported: () => isIDEProtocolSupported,
-  isScreenshotSupported: () => import_anyclick_core6.isScreenshotSupported,
+  isScreenshotSupported: () => import_anyclick_core7.isScreenshotSupported,
   listPresets: () => listPresets,
   menuCSSVariables: () => menuCSSVariables,
   menuStyles: () => menuStyles,
@@ -103,16 +105,17 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/AnyclickProvider.tsx
-var import_react6 = require("react");
-var import_anyclick_core4 = require("@ewjdev/anyclick-core");
+var import_react7 = require("react");
+var import_anyclick_core5 = require("@ewjdev/anyclick-core");
 
 // src/ContextMenu.tsx
-var import_react4 = __toESM(require("react"));
-var import_anyclick_core3 = require("@ewjdev/anyclick-core");
+var import_react5 = __toESM(require("react"));
+var import_anyclick_core4 = require("@ewjdev/anyclick-core");
 var import_lucide_react3 = require("lucide-react");
 
 // src/QuickChat/QuickChat.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+var import_anyclick_core2 = require("@ewjdev/anyclick-core");
 var import_lucide_react = require("lucide-react");
 
 // src/QuickChat/styles.ts
@@ -294,6 +297,7 @@ var quickChatStyles = {
   // Suggestions - compact horizontal scroll
   suggestionsContainer: {
     display: "flex",
+    flexDirection: "column",
     gap: "6px",
     padding: "6px 8px",
     overflowX: "auto",
@@ -557,7 +561,130 @@ var quickChatKeyframes = `
 
 // src/QuickChat/useQuickChat.ts
 var import_react = require("react");
-var import_anyclick_core = require("@ewjdev/anyclick-core");
+var import_react2 = require("@ai-sdk/react");
+var import_ai = require("ai");
+
+// src/QuickChat/store.ts
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var STORE_NAME = "anyclick-quick-chat-store";
+var TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1e3;
+function generateMessageId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+var storage = (0, import_middleware.createJSONStorage)(() => localStorage);
+function filterExpiredMessages(messages) {
+  const now = Date.now();
+  return messages.filter((msg) => msg.expiresAt > now);
+}
+var useQuickChatStore = (0, import_zustand.create)()(
+  (0, import_middleware.persist)(
+    (set, get) => ({
+      messages: [],
+      isPinned: false,
+      input: "",
+      contextChunks: [],
+      suggestedPrompts: [],
+      isLoadingSuggestions: false,
+      isSending: false,
+      isStreaming: false,
+      error: null,
+      lastSyncedAt: null,
+      setInput: (input) => set({ input }),
+      addMessage: (message) => {
+        const id = generateMessageId();
+        const now = Date.now();
+        const storedMessage = {
+          ...message,
+          id,
+          timestamp: now,
+          expiresAt: now + TWENTY_FOUR_HOURS_MS
+        };
+        set((state) => {
+          const newMessages = [...state.messages, storedMessage];
+          return {
+            messages: newMessages
+          };
+        });
+        return id;
+      },
+      updateMessage: (id, updates) => {
+        set((state) => ({
+          messages: state.messages.map(
+            (msg) => msg.id === id ? { ...msg, ...updates } : msg
+          )
+        }));
+      },
+      clearMessages: () => set({ messages: [], error: null }),
+      setIsPinned: (pinned) => set({ isPinned: pinned }),
+      setContextChunks: (chunks) => set({ contextChunks: chunks }),
+      toggleChunk: (chunkId) => {
+        set((state) => ({
+          contextChunks: state.contextChunks.map(
+            (chunk) => chunk.id === chunkId ? { ...chunk, included: !chunk.included } : chunk
+          )
+        }));
+      },
+      toggleAllChunks: (included) => {
+        set((state) => ({
+          contextChunks: state.contextChunks.map((chunk) => ({
+            ...chunk,
+            included
+          }))
+        }));
+      },
+      setSuggestedPrompts: (prompts) => set({ suggestedPrompts: prompts }),
+      setIsLoadingSuggestions: (loading) => set({ isLoadingSuggestions: loading }),
+      setIsSending: (sending) => set({ isSending: sending }),
+      setIsStreaming: (streaming) => set({ isStreaming: streaming }),
+      setError: (error) => set({ error }),
+      setLastSyncedAt: (timestamp) => set({ lastSyncedAt: timestamp }),
+      pruneExpiredMessages: () => {
+        set((state) => ({
+          messages: filterExpiredMessages(state.messages)
+        }));
+      },
+      getActiveMessages: () => {
+        const state = get();
+        const now = Date.now();
+        const active = state.messages.filter((msg) => msg.expiresAt > now).map(({ expiresAt, ...msg }) => msg);
+        console.log("[store] getActiveMessages", {
+          totalMessages: state.messages.length,
+          activeMessages: active.length,
+          activeIds: active.map((m) => m.id)
+        });
+        return active;
+      },
+      hydrate: (messages) => {
+        const now = Date.now();
+        const storedMessages = messages.map((msg) => ({
+          ...msg,
+          expiresAt: now + TWENTY_FOUR_HOURS_MS
+        }));
+        set({ messages: storedMessages, lastSyncedAt: now });
+      }
+    }),
+    {
+      name: STORE_NAME,
+      storage,
+      partialize: (state) => ({
+        messages: state.messages,
+        isPinned: state.isPinned,
+        lastSyncedAt: state.lastSyncedAt
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.pruneExpiredMessages();
+        }
+      }
+    }
+  )
+);
+function useActiveMessages() {
+  const messages = useQuickChatStore((state) => state.messages);
+  const now = Date.now();
+  return messages.filter((msg) => msg.expiresAt > now).map(({ expiresAt, ...msg }) => msg);
+}
 
 // src/QuickChat/types.ts
 var DEFAULT_T3CHAT_CONFIG = {
@@ -567,9 +694,9 @@ var DEFAULT_T3CHAT_CONFIG = {
 };
 var DEFAULT_QUICK_CHAT_CONFIG = {
   endpoint: "/api/anyclick/chat",
-  model: "gpt-5-mini",
+  model: "gpt-5-nano",
   prePassModel: "gpt-5-nano",
-  maxResponseLength: 500,
+  maxResponseLength: 1e4,
   showRedactionUI: true,
   showSuggestions: true,
   systemPrompt: "You are a helpful assistant that provides quick, concise answers about web elements and UI. Keep responses brief and actionable.",
@@ -578,57 +705,9 @@ var DEFAULT_QUICK_CHAT_CONFIG = {
   t3chat: DEFAULT_T3CHAT_CONFIG
 };
 
-// src/QuickChat/useQuickChat.ts
-var PINNED_STATE_KEY = "anyclick-quick-chat-pinned";
-var CHAT_HISTORY_KEY = "anyclick-quick-chat-history";
-function generateId() {
-  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
-function getPinnedState() {
-  if (typeof window === "undefined") return false;
-  try {
-    return sessionStorage.getItem(PINNED_STATE_KEY) === "true";
-  } catch {
-    return false;
-  }
-}
-function getChatHistory() {
-  if (typeof window === "undefined") return [];
-  try {
-    const stored = sessionStorage.getItem(CHAT_HISTORY_KEY);
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      return parsed.map((msg) => ({
-        ...msg,
-        isStreaming: false,
-        actions: void 0
-      }));
-    }
-  } catch {
-  }
-  return [];
-}
-function saveChatHistory(messages) {
-  if (typeof window === "undefined") return;
-  try {
-    const toStore = messages.slice(-10).map((msg) => ({
-      id: msg.id,
-      role: msg.role,
-      content: msg.content,
-      timestamp: msg.timestamp
-    }));
-    sessionStorage.setItem(CHAT_HISTORY_KEY, JSON.stringify(toStore));
-  } catch {
-  }
-}
-function clearChatHistory() {
-  if (typeof window === "undefined") return;
-  try {
-    sessionStorage.removeItem(CHAT_HISTORY_KEY);
-  } catch {
-  }
-}
-function extractContextChunks(targetElement, containerElement) {
+// src/QuickChat/useQuickChat.context.ts
+var import_anyclick_core = require("@ewjdev/anyclick-core");
+function extractContextChunks(targetElement, _containerElement) {
   const chunks = [];
   if (!targetElement) return chunks;
   try {
@@ -655,7 +734,7 @@ function extractContextChunks(targetElement, containerElement) {
     }
     if (info.computedStyles) {
       const styleEntries = [];
-      for (const [category, styles] of Object.entries(info.computedStyles)) {
+      for (const [, styles] of Object.entries(info.computedStyles)) {
         if (styles && typeof styles === "object") {
           const entries = Object.entries(styles).slice(0, 2);
           for (const [k, v] of entries) {
@@ -693,7 +772,9 @@ function extractContextChunks(targetElement, containerElement) {
       }
     }
     if (info.boxModel) {
-      const boxContent = `${Math.round(info.boxModel.content.width)}x${Math.round(info.boxModel.content.height)}px`;
+      const boxContent = `${Math.round(info.boxModel.content.width)}x${Math.round(
+        info.boxModel.content.height
+      )}px`;
       chunks.push({
         id: "element-dimensions",
         label: "Dimensions",
@@ -704,54 +785,358 @@ function extractContextChunks(targetElement, containerElement) {
       });
     }
   } catch (error) {
-    console.error("Failed to extract context:", error);
+    console.error("[useQuickChat] Failed to extract context:", error);
   }
   return chunks;
 }
 function buildContextString(chunks) {
-  const includedChunks = chunks.filter((c) => c.included);
-  if (includedChunks.length === 0) return "";
-  return includedChunks.map((c) => `[${c.label}]: ${c.content}`).join("\n");
+  const included = chunks.filter((c) => c.included);
+  if (included.length === 0) return "";
+  return included.map((c) => `[${c.label}]: ${c.content}`).join("\n");
+}
+
+// src/QuickChat/useQuickChat.debug.ts
+function createDebugInfo(args) {
+  return {
+    status: args.status,
+    ok: args.ok,
+    contentType: args.contentType ?? null,
+    rawTextPreview: args.rawText ?? "",
+    timestamp: Date.now(),
+    error: args.error
+  };
+}
+
+// src/QuickChat/useQuickChat.messages.ts
+function getUIMessageText(msg) {
+  const partsText = msg.parts?.map((p) => {
+    const part = p;
+    if (typeof part.text === "string") return part.text;
+    if (typeof part.content === "string") return part.content;
+    return "";
+  }).join("") ?? "";
+  if (partsText) return partsText;
+  const maybeContent = msg.content;
+  return typeof maybeContent === "string" ? maybeContent : "";
+}
+function chatMessagesToUiMessages(messages) {
+  return messages.map((msg) => ({
+    id: msg.id,
+    role: msg.role,
+    parts: [{ type: "text", text: msg.content }]
+  }));
+}
+function safeCopyToClipboard(text) {
+  try {
+    if (typeof navigator === "undefined") return;
+    void navigator.clipboard.writeText(text);
+  } catch {
+  }
+}
+function buildAssistantActions(messageText, setInput) {
+  return [
+    {
+      id: "copy",
+      label: "Copy",
+      onClick: () => safeCopyToClipboard(messageText)
+    },
+    {
+      id: "research",
+      label: "Research more",
+      onClick: () => setInput(`Tell me more about: ${messageText.slice(0, 50)}`)
+    }
+  ];
+}
+function uiMessagesToChatMessages(args) {
+  const { uiMessages, status, setInput } = args;
+  const last = uiMessages[uiMessages.length - 1];
+  return uiMessages.map((msg) => {
+    const text = getUIMessageText(msg);
+    const isStreaming = status === "streaming" && msg.role === "assistant" && msg === last;
+    const actions = msg.role === "assistant" && status === "ready" ? buildAssistantActions(text, setInput) : void 0;
+    return {
+      id: msg.id,
+      role: msg.role,
+      content: text,
+      timestamp: Date.now(),
+      isStreaming,
+      actions
+    };
+  });
+}
+
+// src/QuickChat/useQuickChat.rateLimit.ts
+function safeJsonParse(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+function formatRetryAt(retryAtMs) {
+  try {
+    const d = new Date(retryAtMs);
+    return new Intl.DateTimeFormat(void 0, {
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(d);
+  } catch {
+    return new Date(retryAtMs).toLocaleTimeString();
+  }
+}
+function getRequestIdFromHeaders(res) {
+  return res?.headers?.get?.("X-Anyclick-Request-Id") ?? res?.headers?.get?.("x-anyclick-request-id") ?? void 0;
 }
+function parseRetryAfterSeconds(args) {
+  const { payload, res } = args;
+  if (typeof payload?.retryAfterSeconds === "number")
+    return payload.retryAfterSeconds;
+  const headerRetryAfter = res?.headers?.get?.("Retry-After");
+  if (!headerRetryAfter) return void 0;
+  const n = Number(headerRetryAfter);
+  return Number.isFinite(n) ? n : void 0;
+}
+function parseRetryAt(args) {
+  const { payload, retryAfterSeconds, nowMs } = args;
+  if (typeof payload?.retryAt === "number" && Number.isFinite(payload.retryAt)) {
+    return payload.retryAt;
+  }
+  if (typeof retryAfterSeconds === "number" && Number.isFinite(retryAfterSeconds)) {
+    return nowMs + Math.max(0, retryAfterSeconds) * 1e3;
+  }
+  return void 0;
+}
+function buildNotice(args) {
+  const { rawText, endpoint, res, nowMs } = args;
+  const parsed = safeJsonParse(rawText);
+  const payload = parsed && typeof parsed === "object" ? parsed : null;
+  const retryAfterSeconds = parseRetryAfterSeconds({ payload, res });
+  const retryAt = parseRetryAt({ payload, retryAfterSeconds, nowMs });
+  const timePart = retryAt ? `Try again at ${formatRetryAt(retryAt)}.` : "";
+  const message = timePart ? `Rate limited. ${timePart}` : "Rate limited.";
+  const requestId = payload?.requestId ?? getRequestIdFromHeaders(res);
+  return {
+    status: 429,
+    message,
+    retryAt,
+    retryAfterSeconds,
+    requestId,
+    endpoint,
+    raw: rawText
+  };
+}
+async function rateLimitNoticeFromResponse(res, endpoint) {
+  if (res.status !== 429) return null;
+  const raw = await res.text().catch(() => "");
+  return buildNotice({ rawText: raw, endpoint, res, nowMs: Date.now() });
+}
+function rateLimitNoticeFromError(args) {
+  const { statusCode, response, responseText, endpoint } = args;
+  if (statusCode !== 429) return null;
+  const raw = responseText ?? "";
+  return buildNotice({
+    rawText: raw,
+    endpoint,
+    res: response,
+    nowMs: Date.now()
+  });
+}
+
+// src/QuickChat/useQuickChat.ts
 function useQuickChat(targetElement, containerElement, config = {}) {
+  console.count("useQuickChat");
   const mergedConfig = { ...DEFAULT_QUICK_CHAT_CONFIG, ...config };
-  const abortControllerRef = (0, import_react.useRef)(null);
   const initializedRef = (0, import_react.useRef)(false);
-  const [state, setState] = (0, import_react.useState)({
-    input: "",
-    messages: [],
-    isLoadingSuggestions: false,
-    isSending: false,
-    isStreaming: false,
-    suggestedPrompts: [],
-    contextChunks: [],
-    error: null
+  const syncTimeoutRef = (0, import_react.useRef)(null);
+  const [manualSending, setManualSending] = (0, import_react.useState)(false);
+  const [debugInfo, setDebugInfo] = (0, import_react.useState)(null);
+  const [rateLimitNotice, setRateLimitNotice] = (0, import_react.useState)(null);
+  const {
+    input,
+    setInput,
+    isPinned,
+    setIsPinned,
+    contextChunks,
+    setContextChunks,
+    toggleChunk,
+    toggleAllChunks,
+    suggestedPrompts,
+    setSuggestedPrompts,
+    isLoadingSuggestions,
+    setIsLoadingSuggestions,
+    error,
+    setError,
+    addMessage,
+    clearMessages: storeClearMessages,
+    setLastSyncedAt,
+    lastSyncedAt,
+    setIsSending: setStoreIsSending,
+    setIsStreaming: setStoreIsStreaming
+  } = useQuickChatStore();
+  const storedMessages = useActiveMessages();
+  const contextString = (0, import_react.useMemo)(
+    () => buildContextString(contextChunks),
+    [contextChunks]
+  );
+  const chatBody = (0, import_react.useMemo)(
+    () => ({
+      action: "chat",
+      context: contextString,
+      model: mergedConfig.model,
+      systemPrompt: mergedConfig.systemPrompt,
+      maxLength: mergedConfig.maxResponseLength
+    }),
+    [
+      contextString,
+      mergedConfig.model,
+      mergedConfig.systemPrompt,
+      mergedConfig.maxResponseLength
+    ]
+  );
+  const transport = (0, import_react.useMemo)(
+    () => new import_ai.DefaultChatTransport({
+      api: mergedConfig.endpoint,
+      body: chatBody
+    }),
+    [mergedConfig.endpoint, chatBody]
+  );
+  const handleRateLimitResponse = (0, import_react.useCallback)(
+    async (res, endpoint) => {
+      const notice = await rateLimitNoticeFromResponse(res, endpoint);
+      if (!notice) return false;
+      setRateLimitNotice(notice);
+      setError(null);
+      return true;
+    },
+    [setError]
+  );
+  const scheduleBackendSync = (0, import_react.useCallback)(() => {
+    if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+    syncTimeoutRef.current = setTimeout(async () => {
+      try {
+        const currentMessages = useQuickChatStore.getState().getActiveMessages();
+        if (currentMessages.length === 0) return;
+        const endpoint = `${mergedConfig.endpoint}/history`;
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action: "save",
+            messages: currentMessages
+          })
+        });
+        if (await handleRateLimitResponse(res, endpoint)) return;
+        if (res.ok) setLastSyncedAt(Date.now());
+      } catch (err) {
+        console.error("[useQuickChat] Failed to sync chat history:", err);
+      }
+    }, 1e3);
+  }, [handleRateLimitResponse, mergedConfig.endpoint, setLastSyncedAt]);
+  const {
+    messages: aiMessages,
+    sendMessage: aiSendMessage,
+    status,
+    stop,
+    setMessages: setAiMessages
+  } = (0, import_react2.useChat)({
+    transport,
+    onError: (err) => {
+      const response = err.response ?? void 0;
+      const statusCode = err.status ?? (response ? response.status : void 0) ?? -1;
+      const responseText = err.responseText ?? err.message ?? "";
+      setDebugInfo(
+        createDebugInfo({
+          status: statusCode,
+          ok: false,
+          contentType: response?.headers?.get?.("content-type") ?? null,
+          rawText: responseText,
+          error: err.message
+        })
+      );
+      setStoreIsStreaming(false);
+      setStoreIsSending(false);
+      const notice = rateLimitNoticeFromError({
+        statusCode,
+        response,
+        responseText,
+        endpoint: mergedConfig.endpoint
+      });
+      if (notice) {
+        setRateLimitNotice(notice);
+        setError(null);
+        return;
+      }
+      setRateLimitNotice(null);
+      setError(err.message);
+    },
+    onFinish: ({ message }) => {
+      const messageText = getUIMessageText(message);
+      const current = useQuickChatStore.getState().getActiveMessages();
+      const last = current[current.length - 1];
+      const alreadyHaveSameTail = last?.role === "assistant" && last.content === messageText;
+      if (!alreadyHaveSameTail && messageText) {
+        addMessage({
+          role: message.role,
+          content: messageText,
+          isStreaming: false
+        });
+      }
+      scheduleBackendSync();
+      setStoreIsStreaming(false);
+      setStoreIsSending(false);
+    }
   });
+  const loadFromBackend = (0, import_react.useCallback)(async () => {
+    try {
+      const endpoint = `${mergedConfig.endpoint}/history`;
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "load" })
+      });
+      if (await handleRateLimitResponse(response, endpoint)) return;
+      if (!response.ok) return;
+      const data = await response.json().catch(() => null);
+      if (!data?.messages || !Array.isArray(data.messages)) return;
+      if (data.messages.length === 0) return;
+      useQuickChatStore.getState().hydrate(data.messages);
+      setAiMessages(chatMessagesToUiMessages(data.messages));
+    } catch (err) {
+      console.error("[useQuickChat] Failed to load chat history:", err);
+    }
+  }, [handleRateLimitResponse, mergedConfig.endpoint, setAiMessages]);
+  const messages = (0, import_react.useMemo)(
+    () => uiMessagesToChatMessages({
+      uiMessages: aiMessages,
+      status,
+      setInput
+    }),
+    [aiMessages, setInput, status]
+  );
+  const isStreaming = status === "streaming";
+  const isSending = status === "submitted" || status === "streaming" || manualSending;
   (0, import_react.useEffect)(() => {
     if (initializedRef.current) return;
     initializedRef.current = true;
-    const isPinned = getPinnedState();
-    if (isPinned) {
-      const history = getChatHistory();
-      if (history.length > 0) {
-        setState((prev) => ({ ...prev, messages: history }));
-      }
+    if (storedMessages.length > 0) {
+      setAiMessages(chatMessagesToUiMessages(storedMessages));
+    } else {
+      void loadFromBackend();
     }
-  }, []);
+  }, [loadFromBackend, setAiMessages, storedMessages]);
   (0, import_react.useEffect)(() => {
-    if (targetElement) {
-      const chunks = extractContextChunks(targetElement, containerElement);
-      setState((prev) => ({ ...prev, contextChunks: chunks }));
-    }
-  }, [targetElement, containerElement]);
+    if (!targetElement) return;
+    const chunks = extractContextChunks(targetElement, containerElement);
+    setContextChunks(chunks);
+  }, [targetElement, containerElement, setContextChunks]);
   (0, import_react.useEffect)(() => {
-    if (!mergedConfig.showSuggestions || state.contextChunks.length === 0 || state.suggestedPrompts.length > 0) {
-      return;
-    }
+    if (!mergedConfig.showSuggestions) return;
+    if (!contextString) return;
+    if (suggestedPrompts.length > 0) return;
+    let cancelled = false;
     const fetchSuggestions = async () => {
-      setState((prev) => ({ ...prev, isLoadingSuggestions: true }));
+      setIsLoadingSuggestions(true);
       try {
-        const contextString = buildContextString(state.contextChunks);
         const response = await fetch(mergedConfig.endpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -761,250 +1146,142 @@ function useQuickChat(targetElement, containerElement, config = {}) {
             model: mergedConfig.prePassModel
           })
         });
+        if (await handleRateLimitResponse(response, mergedConfig.endpoint)) {
+          return;
+        }
         if (response.ok) {
-          const data = await response.json();
-          if (data.suggestions && Array.isArray(data.suggestions)) {
-            setState((prev) => ({
-              ...prev,
-              suggestedPrompts: data.suggestions.map(
-                (text, i) => ({
+          const data = await response.json().catch(() => null);
+          if (data?.suggestions && Array.isArray(data.suggestions)) {
+            if (!cancelled) {
+              setSuggestedPrompts(
+                data.suggestions.map((text, i) => ({
                   id: `suggestion-${i}`,
                   text
-                })
-              ),
-              isLoadingSuggestions: false
-            }));
+                }))
+              );
+              setIsLoadingSuggestions(false);
+            }
             return;
           }
         }
-      } catch (error) {
-        console.error("Failed to fetch suggestions:", error);
+      } catch (err) {
+        console.error("[useQuickChat] Failed to fetch suggestions:", err);
       }
-      setState((prev) => ({
-        ...prev,
-        suggestedPrompts: [
+      if (!cancelled) {
+        setSuggestedPrompts([
           { id: "s1", text: "What is this element?" },
           { id: "s2", text: "How can I style this?" },
           { id: "s3", text: "Is this accessible?" }
-        ],
-        isLoadingSuggestions: false
-      }));
+        ]);
+        setIsLoadingSuggestions(false);
+      }
+    };
+    void fetchSuggestions();
+    return () => {
+      cancelled = true;
     };
-    fetchSuggestions();
   }, [
-    state.contextChunks,
-    state.suggestedPrompts.length,
-    mergedConfig.showSuggestions,
+    contextString,
+    handleRateLimitResponse,
     mergedConfig.endpoint,
-    mergedConfig.prePassModel
+    mergedConfig.prePassModel,
+    mergedConfig.showSuggestions,
+    setIsLoadingSuggestions,
+    setSuggestedPrompts,
+    suggestedPrompts.length
   ]);
-  const setInput = (0, import_react.useCallback)((value) => {
-    setState((prev) => ({ ...prev, input: value }));
-  }, []);
-  const toggleChunk = (0, import_react.useCallback)((chunkId) => {
-    setState((prev) => ({
-      ...prev,
-      contextChunks: prev.contextChunks.map(
-        (chunk) => chunk.id === chunkId ? { ...chunk, included: !chunk.included } : chunk
-      )
-    }));
-  }, []);
-  const toggleAllChunks = (0, import_react.useCallback)((included) => {
-    setState((prev) => ({
-      ...prev,
-      contextChunks: prev.contextChunks.map((chunk) => ({
-        ...chunk,
-        included
-      }))
-    }));
-  }, []);
-  const selectSuggestion = (0, import_react.useCallback)((prompt) => {
-    setState((prev) => ({ ...prev, input: prompt.text }));
-  }, []);
+  const selectSuggestion = (0, import_react.useCallback)(
+    (prompt) => {
+      setInput(prompt.text);
+    },
+    [setInput]
+  );
   const sendMessage = (0, import_react.useCallback)(
     async (messageText) => {
-      const text = (messageText || state.input).trim();
+      const text = (messageText || input).trim();
       if (!text) return;
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-      abortControllerRef.current = new AbortController();
-      const userMessage = {
-        id: generateId(),
-        role: "user",
-        content: text,
-        timestamp: Date.now()
-      };
-      const assistantMessageId = generateId();
-      const assistantMessage = {
-        id: assistantMessageId,
-        role: "assistant",
-        content: "",
-        timestamp: Date.now(),
-        isStreaming: true
-      };
-      setState((prev) => ({
-        ...prev,
-        input: "",
-        messages: [...prev.messages, userMessage, assistantMessage],
-        isSending: true,
-        isStreaming: true,
-        error: null
-      }));
+      setInput("");
+      setError(null);
+      setManualSending(true);
+      setStoreIsSending(true);
+      setStoreIsStreaming(true);
+      setDebugInfo(null);
       try {
-        const contextString = buildContextString(state.contextChunks);
-        const response = await fetch(mergedConfig.endpoint, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            action: "chat",
-            message: text,
-            context: contextString,
-            model: mergedConfig.model,
-            systemPrompt: mergedConfig.systemPrompt,
-            maxLength: mergedConfig.maxResponseLength
-          }),
-          signal: abortControllerRef.current.signal
+        addMessage({
+          role: "user",
+          content: text
         });
-        if (!response.ok) {
-          throw new Error(`Request failed: ${response.status}`);
-        }
-        const reader = response.body?.getReader();
-        if (!reader) {
-          throw new Error("No response body");
-        }
-        const decoder = new TextDecoder();
-        let fullContent = "";
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          const chunk = decoder.decode(value, { stream: true });
-          fullContent += chunk;
-          if (fullContent.length > mergedConfig.maxResponseLength) {
-            fullContent = fullContent.slice(0, mergedConfig.maxResponseLength) + "...";
-          }
-          setState((prev) => ({
-            ...prev,
-            messages: prev.messages.map(
-              (msg) => msg.id === assistantMessageId ? { ...msg, content: fullContent } : msg
-            )
-          }));
-        }
-        setState((prev) => ({
-          ...prev,
-          messages: prev.messages.map(
-            (msg) => msg.id === assistantMessageId ? {
-              ...msg,
-              content: fullContent,
-              isStreaming: false,
-              actions: [
-                {
-                  id: "copy",
-                  label: "Copy",
-                  onClick: () => {
-                    navigator.clipboard.writeText(fullContent);
-                  }
-                },
-                {
-                  id: "research",
-                  label: "Research more",
-                  onClick: () => {
-                    setState((p) => ({
-                      ...p,
-                      input: `Tell me more about: ${text}`
-                    }));
-                  }
-                }
-              ]
-            } : msg
-          ),
-          isSending: false,
-          isStreaming: false
-        }));
-      } catch (error) {
-        if (error.name === "AbortError") {
-          return;
-        }
-        console.error("Chat error:", error);
-        setState((prev) => ({
-          ...prev,
-          messages: prev.messages.map(
-            (msg) => msg.id === assistantMessageId ? {
-              ...msg,
-              content: "Sorry, I couldn't process your request. Please try again.",
-              isStreaming: false
-            } : msg
-          ),
-          isSending: false,
-          isStreaming: false,
-          error: error.message
-        }));
+        await aiSendMessage({ text });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setError(msg);
+      } finally {
+        setManualSending(false);
+        setStoreIsSending(false);
+        setStoreIsStreaming(false);
       }
     },
-    [state.input, state.contextChunks, mergedConfig]
+    [
+      addMessage,
+      aiSendMessage,
+      input,
+      setError,
+      setInput,
+      setStoreIsSending,
+      setStoreIsStreaming
+    ]
   );
   const clearMessages = (0, import_react.useCallback)(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-    clearChatHistory();
-    setState((prev) => ({
-      ...prev,
-      messages: [],
-      error: null
-    }));
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (state.messages.length > 0 && getPinnedState()) {
-      const completedMessages = state.messages.filter(
-        (msg) => !msg.isStreaming
-      );
-      if (completedMessages.length > 0) {
-        saveChatHistory(completedMessages);
-      }
-    }
-  }, [state.messages]);
+    stop();
+    storeClearMessages();
+    setAiMessages([]);
+    const endpoint = `${mergedConfig.endpoint}/history`;
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "clear" })
+    }).then((res) => handleRateLimitResponse(res, endpoint)).catch(
+      (err) => console.error("[useQuickChat] Failed to clear backend history:", err)
+    );
+  }, [
+    handleRateLimitResponse,
+    mergedConfig.endpoint,
+    setAiMessages,
+    stop,
+    storeClearMessages
+  ]);
   (0, import_react.useEffect)(() => {
     return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
     };
   }, []);
   return {
-    ...state,
+    input,
+    messages,
+    isLoadingSuggestions,
+    isSending,
+    isStreaming,
+    suggestedPrompts,
+    contextChunks,
+    error,
+    debugInfo,
+    rateLimitNotice,
+    isPinned,
+    lastSyncedAt,
     config: mergedConfig,
     setInput,
     toggleChunk,
     toggleAllChunks,
     selectSuggestion,
     sendMessage,
-    clearMessages
+    clearMessages,
+    setIsPinned,
+    clearRateLimitNotice: () => setRateLimitNotice(null)
   };
 }
 
 // src/QuickChat/QuickChat.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var PINNED_STATE_KEY2 = "anyclick-quick-chat-pinned";
-function getStoredPinnedState() {
-  if (typeof window === "undefined") return false;
-  try {
-    return sessionStorage.getItem(PINNED_STATE_KEY2) === "true";
-  } catch {
-    return false;
-  }
-}
-function setStoredPinnedState(pinned) {
-  if (typeof window === "undefined") return;
-  try {
-    if (pinned) {
-      sessionStorage.setItem(PINNED_STATE_KEY2, "true");
-    } else {
-      sessionStorage.removeItem(PINNED_STATE_KEY2);
-    }
-  } catch {
-  }
-}
 var stylesInjected = false;
 function injectStyles() {
   if (stylesInjected || typeof document === "undefined") return;
@@ -1013,7 +1290,7 @@ function injectStyles() {
   document.head.appendChild(style);
   stylesInjected = true;
 }
-var LoadingDots = import_react2.default.memo(function LoadingDots2() {
+var LoadingDots = import_react3.default.memo(function LoadingDots2() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: quickChatStyles.loadingDots, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -1038,50 +1315,52 @@ function QuickChat({
   initialInput,
   onInitialInputConsumed
 }) {
-  const inputRef = (0, import_react2.useRef)(null);
-  const messagesEndRef = (0, import_react2.useRef)(null);
-  const [inputFocused, setInputFocused] = (0, import_react2.useState)(false);
-  const [showContext, setShowContext] = (0, import_react2.useState)(false);
-  const [hoveredSuggestion, setHoveredSuggestion] = (0, import_react2.useState)(
+  const inputRef = (0, import_react3.useRef)(null);
+  const messagesEndRef = (0, import_react3.useRef)(null);
+  const [inputFocused, setInputFocused] = (0, import_react3.useState)(false);
+  const [showContext, setShowContext] = (0, import_react3.useState)(false);
+  const [hoveredSuggestion, setHoveredSuggestion] = (0, import_react3.useState)(
     null
   );
-  const [localPinned, setLocalPinned] = (0, import_react2.useState)(() => getStoredPinnedState());
-  const isPinned = isPinnedProp || localPinned;
-  const handlePinToggle = (0, import_react2.useCallback)(() => {
-    const newPinned = !isPinned;
-    setLocalPinned(newPinned);
-    setStoredPinnedState(newPinned);
-    onPin?.(newPinned);
-  }, [isPinned, onPin]);
-  const handleClose = (0, import_react2.useCallback)(() => {
-    if (isPinned) {
-      setLocalPinned(false);
-      setStoredPinnedState(false);
-      onPin?.(false);
-    }
-    onClose();
-  }, [isPinned, onPin, onClose]);
   const {
     input,
     messages,
     isLoadingSuggestions,
     isSending,
     isStreaming,
+    debugInfo,
+    rateLimitNotice,
     suggestedPrompts,
     contextChunks,
     error,
+    isPinned: storePinned,
     setInput,
     toggleChunk,
     toggleAllChunks,
     selectSuggestion,
     sendMessage,
     clearMessages,
+    setIsPinned,
+    clearRateLimitNotice,
     config: mergedConfig
   } = useQuickChat(targetElement, containerElement, config);
-  (0, import_react2.useEffect)(() => {
+  const isPinned = isPinnedProp || storePinned;
+  const handlePinToggle = (0, import_react3.useCallback)(() => {
+    const newPinned = !isPinned;
+    setIsPinned(newPinned);
+    onPin?.(newPinned);
+  }, [isPinned, setIsPinned, onPin]);
+  const handleClose = (0, import_react3.useCallback)(() => {
+    if (isPinned) {
+      setIsPinned(false);
+      onPin?.(false);
+    }
+    onClose();
+  }, [isPinned, setIsPinned, onPin, onClose]);
+  (0, import_react3.useEffect)(() => {
     injectStyles();
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (visible && inputRef.current) {
       const timer = setTimeout(() => {
         inputRef.current?.focus();
@@ -1089,7 +1368,7 @@ function QuickChat({
       return () => clearTimeout(timer);
     }
   }, [visible]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (initialInput && visible) {
       setInput(initialInput);
       onInitialInputConsumed?.();
@@ -1102,12 +1381,12 @@ function QuickChat({
       }
     }
   }, [initialInput, visible, setInput, onInitialInputConsumed]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages]);
-  const handleInputChange = (0, import_react2.useCallback)(
+  const handleInputChange = (0, import_react3.useCallback)(
     (e) => {
       setInput(e.target.value);
       const target = e.target;
@@ -1116,7 +1395,7 @@ function QuickChat({
     },
     [setInput]
   );
-  const handleKeyDown = (0, import_react2.useCallback)(
+  const handleKeyDown = (0, import_react3.useCallback)(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -1127,23 +1406,78 @@ function QuickChat({
     },
     [sendMessage, onClose]
   );
-  const handleSend = (0, import_react2.useCallback)(() => {
+  const handleSend = (0, import_react3.useCallback)(() => {
     sendMessage();
   }, [sendMessage]);
-  const handleSendToT3Chat = (0, import_react2.useCallback)(() => {
+  const handleSendToT3Chat = (0, import_react3.useCallback)(() => {
     if (typeof window === "undefined") return;
     const query = input.trim();
     const baseUrl = mergedConfig.t3chat?.baseUrl ?? "https://t3.chat";
     const url = query ? `${baseUrl}/?q=${encodeURIComponent(query)}` : baseUrl;
     window.open(url, "_blank", "noopener,noreferrer");
   }, [input, mergedConfig.t3chat?.baseUrl]);
-  const handleCopy = (0, import_react2.useCallback)((text) => {
+  const handleCopy = (0, import_react3.useCallback)((text) => {
     navigator.clipboard.writeText(text);
   }, []);
-  const includedCount = (0, import_react2.useMemo)(
+  const includedCount = (0, import_react3.useMemo)(
     () => contextChunks.filter((c) => c.included).length,
     [contextChunks]
   );
+  const [rateLimitExpanded, setRateLimitExpanded] = (0, import_react3.useState)(false);
+  const [reportStatus, setReportStatus] = (0, import_react3.useState)("idle");
+  const [reportUrl, setReportUrl] = (0, import_react3.useState)(null);
+  const [reportError, setReportError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    if (rateLimitNotice) {
+      setReportStatus("idle");
+      setReportUrl(null);
+      setReportError(null);
+      setRateLimitExpanded(false);
+    }
+  }, [rateLimitNotice]);
+  const handleReportIssue = (0, import_react3.useCallback)(async () => {
+    if (!rateLimitNotice) return;
+    if (!targetElement) {
+      setReportStatus("error");
+      setReportError("No target element available to report.");
+      return;
+    }
+    setReportStatus("sending");
+    setReportError(null);
+    try {
+      const payload = (0, import_anyclick_core2.buildAnyclickPayload)(targetElement, "issue", {
+        comment: `QuickChat: ${rateLimitNotice.message}`,
+        metadata: {
+          source: "quickchat",
+          kind: "rate_limit",
+          endpoint: rateLimitNotice.endpoint ?? mergedConfig.endpoint,
+          retryAt: rateLimitNotice.retryAt,
+          retryAfterSeconds: rateLimitNotice.retryAfterSeconds,
+          requestId: rateLimitNotice.requestId,
+          debugInfo: debugInfo ?? void 0,
+          raw: rateLimitNotice.raw ?? void 0
+        }
+      });
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      const json = await res.json().catch(() => null);
+      if (!res.ok || !json?.success) {
+        const msg = json?.error || (res.status ? `Failed to create issue (${res.status}).` : "Failed to create issue.");
+        throw new Error(msg);
+      }
+      const firstUrl = json.results?.find(
+        (r) => typeof r.url === "string"
+      )?.url;
+      setReportUrl(firstUrl ?? null);
+      setReportStatus("sent");
+    } catch (e) {
+      setReportStatus("error");
+      setReportError(e instanceof Error ? e.message : String(e));
+    }
+  }, [rateLimitNotice, targetElement, mergedConfig.endpoint, debugInfo]);
   if (!visible) return null;
   const containerStyles = isPinned ? {
     ...quickChatStyles.pinnedContainer,
@@ -1302,7 +1636,7 @@ function QuickChat({
       {
         style: isPinned ? quickChatStyles.pinnedMessagesArea : quickChatStyles.messagesArea,
         children: [
-          error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: quickChatStyles.errorContainer, children: [
+          error && !rateLimitNotice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: quickChatStyles.errorContainer, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AlertCircle, { size: 20, style: quickChatStyles.errorIcon }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: quickChatStyles.errorText, children: error }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1318,6 +1652,55 @@ function QuickChat({
               }
             )
           ] }),
+          debugInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                backgroundColor: "#0f172a",
+                color: "#e2e8f0",
+                border: "1px solid #334155",
+                borderRadius: "8px",
+                padding: "8px",
+                margin: "0 0 8px",
+                fontSize: "12px",
+                lineHeight: 1.4,
+                wordBreak: "break-word"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      gap: "8px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                        "Last request: ",
+                        debugInfo.status,
+                        " ",
+                        debugInfo.ok ? "(ok)" : "(error)"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.7 }, children: new Date(debugInfo.timestamp).toLocaleTimeString() })
+                    ]
+                  }
+                ),
+                debugInfo.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "#f87171", marginTop: "4px" }, children: [
+                  "Error: ",
+                  debugInfo.error
+                ] }),
+                debugInfo.contentPreview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "4px" }, children: [
+                  "Content: ",
+                  debugInfo.contentPreview
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "4px", opacity: 0.8 }, children: [
+                  "Raw: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          ),
           messages.length > 0 && messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
             {
@@ -1372,6 +1755,153 @@ function QuickChat({
         ]
       }
     ),
+    rateLimitNotice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(148, 163, 184, 0.25)",
+          background: "linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96))",
+          color: "#e2e8f0",
+          padding: "8px 10px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AlertCircle, { size: 16, style: { color: "#fbbf24" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", lineHeight: 1.2 }, children: rateLimitNotice.message })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setRateLimitExpanded((v) => !v),
+                      style: {
+                        border: "1px solid rgba(148, 163, 184, 0.25)",
+                        background: "rgba(30, 41, 59, 0.6)",
+                        color: "#e2e8f0",
+                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        fontSize: "12px",
+                        cursor: "pointer"
+                      },
+                      children: rateLimitExpanded ? "Hide" : "Details"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleReportIssue,
+                      disabled: reportStatus === "sending" || reportStatus === "sent",
+                      style: {
+                        border: "1px solid rgba(148, 163, 184, 0.25)",
+                        background: reportStatus === "sent" ? "rgba(34, 197, 94, 0.22)" : "rgba(30, 41, 59, 0.6)",
+                        color: "#e2e8f0",
+                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        fontSize: "12px",
+                        cursor: reportStatus === "sending" || reportStatus === "sent" ? "not-allowed" : "pointer",
+                        opacity: reportStatus === "sending" ? 0.7 : 1
+                      },
+                      title: "Create a GitHub issue via /api/feedback",
+                      children: reportStatus === "sending" ? "Reporting..." : reportStatus === "sent" ? "Reported" : "Report"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        clearRateLimitNotice();
+                        setRateLimitExpanded(false);
+                      },
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "rgba(226, 232, 240, 0.8)",
+                        padding: "4px",
+                        cursor: "pointer"
+                      },
+                      title: "Dismiss",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          reportUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "6px", fontSize: "12px" }, children: [
+            "Created:",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: reportUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "#93c5fd" },
+                children: "Open issue"
+              }
+            )
+          ] }),
+          reportError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: { marginTop: "6px", fontSize: "12px", color: "#fca5a5" },
+              children: reportError
+            }
+          ),
+          rateLimitExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                marginTop: "8px",
+                fontSize: "12px",
+                lineHeight: 1.4,
+                backgroundColor: "rgba(2, 6, 23, 0.55)",
+                border: "1px solid rgba(148, 163, 184, 0.25)",
+                borderRadius: "8px",
+                padding: "8px",
+                wordBreak: "break-word"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { opacity: 0.85 }, children: [
+                  "Status: ",
+                  rateLimitNotice.status,
+                  rateLimitNotice.requestId ? ` \u2022 Request: ${rateLimitNotice.requestId}` : ""
+                ] }),
+                rateLimitNotice.endpoint && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "Endpoint: ",
+                  rateLimitNotice.endpoint
+                ] }),
+                rateLimitNotice.retryAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "RetryAt: ",
+                  new Date(rateLimitNotice.retryAt).toLocaleString()
+                ] }),
+                rateLimitNotice.raw && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Raw: ",
+                  rateLimitNotice.raw
+                ] }),
+                debugInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Debug: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: quickChatStyles.inputContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "textarea",
@@ -1438,8 +1968,8 @@ function QuickChat({
 }
 
 // src/ScreenshotPreview.tsx
-var import_react3 = __toESM(require("react"));
-var import_anyclick_core2 = require("@ewjdev/anyclick-core");
+var import_react4 = __toESM(require("react"));
+var import_anyclick_core3 = require("@ewjdev/anyclick-core");
 var import_lucide_react2 = require("lucide-react");
 
 // src/styles.ts
@@ -1916,7 +2446,7 @@ var screenshotPreviewStyles = {
 
 // src/ScreenshotPreview.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ScreenshotPreview = import_react3.default.memo(function ScreenshotPreview2({
+var ScreenshotPreview = import_react4.default.memo(function ScreenshotPreview2({
   isLoading,
   isSubmitting,
   onCancel,
@@ -1924,12 +2454,12 @@ var ScreenshotPreview = import_react3.default.memo(function ScreenshotPreview2({
   onRetake,
   screenshots
 }) {
-  const [activeTab, setActiveTab] = (0, import_react3.useState)("element");
-  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react4.useState)("element");
+  const [isExpanded, setIsExpanded] = (0, import_react4.useState)(false);
   const getError = (key) => {
     return screenshots?.errors?.[key];
   };
-  const tabs = (0, import_react3.useMemo)(() => {
+  const tabs = (0, import_react4.useMemo)(() => {
     if (!screenshots) return [];
     const allTabs = [
       {
@@ -1953,8 +2483,8 @@ var ScreenshotPreview = import_react3.default.memo(function ScreenshotPreview2({
     ];
     return allTabs.filter((tab) => tab.data || tab.error);
   }, [screenshots]);
-  const totalSize = (0, import_react3.useMemo)(
-    () => screenshots ? (0, import_anyclick_core2.estimateTotalSize)(screenshots) : 0,
+  const totalSize = (0, import_react4.useMemo)(
+    () => screenshots ? (0, import_anyclick_core3.estimateTotalSize)(screenshots) : 0,
     [screenshots]
   );
   if (isLoading) {
@@ -2018,7 +2548,7 @@ var ScreenshotPreview = import_react3.default.memo(function ScreenshotPreview2({
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: screenshotPreviewStyles.header, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: screenshotPreviewStyles.headerTitle, children: "Review Screenshots" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: screenshotPreviewStyles.headerActions, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: screenshotPreviewStyles.sizeLabel, children: (0, import_anyclick_core2.formatBytes)(totalSize) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: screenshotPreviewStyles.sizeLabel, children: (0, import_anyclick_core3.formatBytes)(totalSize) }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
@@ -2050,7 +2580,7 @@ var ScreenshotPreview = import_react3.default.memo(function ScreenshotPreview2({
                 }
               ),
               tab.label,
-              tab.data && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: screenshotPreviewStyles.tabSize, children: (0, import_anyclick_core2.formatBytes)(tab.data.sizeBytes) })
+              tab.data && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: screenshotPreviewStyles.tabSize, children: (0, import_anyclick_core3.formatBytes)(tab.data.sizeBytes) })
             ]
           },
           tab.key
@@ -2329,14 +2859,14 @@ var DefaultHeader = ({
     children
   ] });
 };
-var MenuItem = import_react4.default.memo(function MenuItem2({
+var MenuItem = import_react5.default.memo(function MenuItem2({
   disabled,
   hasChildren,
   item,
   onClick
 }) {
-  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
-  const [isPressed, setIsPressed] = (0, import_react4.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react5.useState)(false);
   const isComingSoon = item.status === "comingSoon";
   const badgeLabel = item.badge?.label ?? (isComingSoon ? "Coming soon" : null);
   const badgeTone = item.badge?.tone ?? (isComingSoon ? "neutral" : "neutral");
@@ -2373,11 +2903,11 @@ var MenuItem = import_react4.default.memo(function MenuItem2({
     }
   );
 });
-var BackButton = import_react4.default.memo(function BackButton2({
+var BackButton = import_react5.default.memo(function BackButton2({
   onClick
 }) {
-  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
-  const [isPressed, setIsPressed] = (0, import_react4.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "button",
     {
@@ -2404,20 +2934,20 @@ var BackButton = import_react4.default.memo(function BackButton2({
     }
   );
 });
-var CommentForm = import_react4.default.memo(function CommentForm2({
+var CommentForm = import_react5.default.memo(function CommentForm2({
   isSubmitting,
   onCancel,
   onSubmit
 }) {
-  const [comment, setComment] = (0, import_react4.useState)("");
-  const inputRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [comment, setComment] = (0, import_react5.useState)("");
+  const inputRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     inputRef.current?.focus();
   }, []);
-  const handleSubmit = (0, import_react4.useCallback)(() => {
+  const handleSubmit = (0, import_react5.useCallback)(() => {
     onSubmit(comment);
   }, [comment, onSubmit]);
-  const handleKeyDown = (0, import_react4.useCallback)(
+  const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
         handleSubmit();
@@ -2505,13 +3035,13 @@ function ContextMenu({
   targetElement,
   visible
 }) {
-  const [selectedType, setSelectedType] = (0, import_react4.useState)(null);
-  const [currentView, setCurrentView] = (0, import_react4.useState)("menu");
-  const [pendingComment, setPendingComment] = (0, import_react4.useState)();
-  const [submenuStack, setSubmenuStack] = (0, import_react4.useState)([]);
-  const [screenshots, setScreenshots] = (0, import_react4.useState)(null);
-  const [isCapturing, setIsCapturing] = (0, import_react4.useState)(false);
-  const [isQuickChatPinned, setIsQuickChatPinned] = (0, import_react4.useState)(() => {
+  const [selectedType, setSelectedType] = (0, import_react5.useState)(null);
+  const [currentView, setCurrentView] = (0, import_react5.useState)("menu");
+  const [pendingComment, setPendingComment] = (0, import_react5.useState)();
+  const [submenuStack, setSubmenuStack] = (0, import_react5.useState)([]);
+  const [screenshots, setScreenshots] = (0, import_react5.useState)(null);
+  const [isCapturing, setIsCapturing] = (0, import_react5.useState)(false);
+  const [isQuickChatPinned, setIsQuickChatPinned] = (0, import_react5.useState)(() => {
     if (typeof window === "undefined") return false;
     try {
       return sessionStorage.getItem("anyclick-quick-chat-pinned") === "true";
@@ -2519,28 +3049,28 @@ function ContextMenu({
       return false;
     }
   });
-  const menuRef = (0, import_react4.useRef)(null);
-  const [adjustedPosition, setAdjustedPosition] = (0, import_react4.useState)(OFFSCREEN_POSITION);
-  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react4.useState)({
+  const menuRef = (0, import_react5.useRef)(null);
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react5.useState)(OFFSCREEN_POSITION);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react5.useState)({
     x: 0,
     y: 0
   });
-  const dragStartRef = (0, import_react4.useRef)(null);
-  const mergedScreenshotConfig = import_react4.default.useMemo(
+  const dragStartRef = (0, import_react5.useRef)(null);
+  const mergedScreenshotConfig = import_react5.default.useMemo(
     () => ({
-      ...import_anyclick_core3.DEFAULT_SCREENSHOT_CONFIG,
+      ...import_anyclick_core4.DEFAULT_SCREENSHOT_CONFIG,
       ...screenshotConfig
     }),
     [screenshotConfig]
   );
-  const showPreview = mergedScreenshotConfig.showPreview && (0, import_anyclick_core3.isScreenshotSupported)();
+  const showPreview = mergedScreenshotConfig.showPreview && (0, import_anyclick_core4.isScreenshotSupported)();
   const currentItems = submenuStack.length > 0 ? submenuStack[submenuStack.length - 1] : items;
-  const captureScreenshots = (0, import_react4.useCallback)(async () => {
+  const captureScreenshots = (0, import_react5.useCallback)(async () => {
     if (!targetElement || !showPreview) return;
     setIsCapturing(true);
     try {
-      const captured = await (0, import_anyclick_core3.captureAllScreenshots)(
+      const captured = await (0, import_anyclick_core4.captureAllScreenshots)(
         targetElement,
         containerElement,
         mergedScreenshotConfig
@@ -2553,7 +3083,7 @@ function ContextMenu({
       setIsCapturing(false);
     }
   }, [containerElement, mergedScreenshotConfig, showPreview, targetElement]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!visible) {
       setSelectedType(null);
       setCurrentView("menu");
@@ -2567,7 +3097,7 @@ function ContextMenu({
       dragStartRef.current = null;
     }
   }, [visible]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (visible && targetElement) {
       clearHighlights();
       applyHighlights(targetElement, highlightConfig);
@@ -2578,7 +3108,7 @@ function ContextMenu({
       clearHighlights();
     };
   }, [highlightConfig, targetElement, visible]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!visible) {
       return;
     }
@@ -2597,13 +3127,13 @@ function ContextMenu({
       document.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [onClose, visible]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (visible) {
       setAdjustedPosition(position);
       setDragOffset({ x: 0, y: 0 });
     }
   }, [position.x, position.y, visible]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!visible || !menuRef.current) return;
     const updatePosition = () => {
       const menuElement = menuRef.current;
@@ -2627,7 +3157,7 @@ function ContextMenu({
     window.addEventListener("resize", updatePosition);
     return () => window.removeEventListener("resize", updatePosition);
   }, [currentView, dragOffset, position, positionMode, visible]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!visible || positionMode !== "dynamic") return;
     const handlePointerMove = (event) => {
       if (!isDragging || !dragStartRef.current) return;
@@ -2654,7 +3184,7 @@ function ContextMenu({
       };
     }
   }, [isDragging, positionMode, visible]);
-  const handleDragStart = (0, import_react4.useCallback)(
+  const handleDragStart = (0, import_react5.useCallback)(
     (event) => {
       if (positionMode !== "dynamic") return;
       event.preventDefault();
@@ -2663,8 +3193,8 @@ function ContextMenu({
     },
     [positionMode]
   );
-  const [initialChatInput, setInitialChatInput] = (0, import_react4.useState)("");
-  (0, import_react4.useEffect)(() => {
+  const [initialChatInput, setInitialChatInput] = (0, import_react5.useState)("");
+  (0, import_react5.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         if (currentView === "screenshot-preview") {
@@ -2704,7 +3234,7 @@ function ContextMenu({
     submenuStack.length,
     visible
   ]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const menuElement = menuRef.current;
     if (!visible || !menuElement) return;
     const preventTouchDefault = (e) => {
@@ -2952,18 +3482,18 @@ function ContextMenu({
 }
 
 // src/context.ts
-var import_react5 = require("react");
-var AnyclickContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var AnyclickContext = (0, import_react6.createContext)(null);
 var FeedbackContext = AnyclickContext;
 function useAnyclick() {
-  const context = (0, import_react5.useContext)(AnyclickContext);
+  const context = (0, import_react6.useContext)(AnyclickContext);
   if (!context) {
     throw new Error("useAnyclick must be used within an AnyclickProvider");
   }
   return context;
 }
 function useFeedback() {
-  const context = (0, import_react5.useContext)(AnyclickContext);
+  const context = (0, import_react6.useContext)(AnyclickContext);
   if (!context) {
     throw new Error("useFeedback must be used within a FeedbackProvider");
   }
@@ -2971,12 +3501,12 @@ function useFeedback() {
 }
 
 // src/store.ts
-var import_zustand = require("zustand");
+var import_zustand2 = require("zustand");
 var providerIdCounter = 0;
 function generateProviderId() {
   return `anyclick-provider-${++providerIdCounter}`;
 }
-var useProviderStore = (0, import_zustand.create)((set, get) => ({
+var useProviderStore = (0, import_zustand2.create)((set, get) => ({
   providers: /* @__PURE__ */ new Map(),
   findProvidersForElement: (element) => {
     const { providers } = get();
@@ -3164,18 +3694,18 @@ function AnyclickProvider({
   touchHoldDurationMs,
   touchMoveThreshold
 }) {
-  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
-  const [menuVisible, setMenuVisible] = (0, import_react6.useState)(false);
-  const [menuPosition, setMenuPosition] = (0, import_react6.useState)(OFFSCREEN_POSITION2);
-  const [targetElement, setTargetElement] = (0, import_react6.useState)(null);
-  const [containerElement, setContainerElement] = (0, import_react6.useState)(
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
+  const [menuVisible, setMenuVisible] = (0, import_react7.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, import_react7.useState)(OFFSCREEN_POSITION2);
+  const [targetElement, setTargetElement] = (0, import_react7.useState)(null);
+  const [containerElement, setContainerElement] = (0, import_react7.useState)(
     null
   );
-  const providerId = (0, import_react6.useId)();
-  const containerRef = (0, import_react6.useRef)(null);
-  const [containerReady, setContainerReady] = (0, import_react6.useState)(!scoped);
-  const clientRef = (0, import_react6.useRef)(null);
-  const setContainerRef = (0, import_react6.useCallback)(
+  const providerId = (0, import_react7.useId)();
+  const containerRef = (0, import_react7.useRef)(null);
+  const [containerReady, setContainerReady] = (0, import_react7.useState)(!scoped);
+  const clientRef = (0, import_react7.useRef)(null);
+  const setContainerRef = (0, import_react7.useCallback)(
     (node) => {
       containerRef.current = node;
       if (scoped && node) {
@@ -3204,7 +3734,7 @@ function AnyclickProvider({
     updateProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
-  const actualDepth = (0, import_react6.useMemo)(() => {
+  const actualDepth = (0, import_react7.useMemo)(() => {
     if (!parentContext) return 0;
     let d = 0;
     let currentId = parentId;
@@ -3218,7 +3748,7 @@ function AnyclickProvider({
   }, [parentContext, parentId]);
   const isDisabledByTheme = theme === null || theme?.disabled === true;
   const effectiveDisabled = disabled || isDisabledByTheme;
-  const localTheme = (0, import_react6.useMemo)(() => {
+  const localTheme = (0, import_react7.useMemo)(() => {
     if (theme === null) {
       return { disabled: true };
     }
@@ -3233,7 +3763,7 @@ function AnyclickProvider({
       ...theme
     };
   }, [highlightConfig, menuClassName, menuStyle, screenshotConfig, theme]);
-  const handleContextMenu = (0, import_react6.useCallback)(
+  const handleContextMenu = (0, import_react7.useCallback)(
     (event, element) => {
       if (!scoped && isElementInDisabledScope(element)) {
         return false;
@@ -3261,7 +3791,7 @@ function AnyclickProvider({
       scoped
     ]
   );
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     const providerInstance = {
       containerRef,
       depth: actualDepth,
@@ -3287,7 +3817,7 @@ function AnyclickProvider({
     scoped,
     unregisterProvider
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     updateProvider(providerId, {
       disabled: effectiveDisabled,
       onContextMenu: handleContextMenu,
@@ -3300,14 +3830,14 @@ function AnyclickProvider({
     providerId,
     updateProvider
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isDisabledByAncestor(providerId)) {
       return;
     }
     if (scoped && !containerReady) {
       return;
     }
-    const client = (0, import_anyclick_core4.createAnyclickClient)({
+    const client = (0, import_anyclick_core5.createAnyclickClient)({
       adapter,
       container: scoped ? containerRef.current : null,
       cooldownMs,
@@ -3348,7 +3878,7 @@ function AnyclickProvider({
     touchHoldDurationMs,
     touchMoveThreshold
   ]);
-  const submitAnyclick = (0, import_react6.useCallback)(
+  const submitAnyclick = (0, import_react7.useCallback)(
     async (element, type, comment, screenshots) => {
       const client = clientRef.current;
       if (!client) return;
@@ -3369,7 +3899,7 @@ function AnyclickProvider({
     },
     [metadata]
   );
-  const openMenu = (0, import_react6.useCallback)(
+  const openMenu = (0, import_react7.useCallback)(
     (element, position) => {
       setTargetElement(element);
       const mergedTheme2 = getMergedTheme(providerId);
@@ -3383,13 +3913,13 @@ function AnyclickProvider({
     },
     [getMergedTheme, highlightConfig, providerId]
   );
-  const closeMenu = (0, import_react6.useCallback)(() => {
+  const closeMenu = (0, import_react7.useCallback)(() => {
     setMenuVisible(false);
     setMenuPosition(OFFSCREEN_POSITION2);
     setTargetElement(null);
     setContainerElement(null);
   }, []);
-  const handleMenuSelect = (0, import_react6.useCallback)(
+  const handleMenuSelect = (0, import_react7.useCallback)(
     (type, comment, screenshots) => {
       if (targetElement) {
         submitAnyclick(targetElement, type, comment, screenshots);
@@ -3398,7 +3928,7 @@ function AnyclickProvider({
     [submitAnyclick, targetElement]
   );
   const inheritedTheme = getMergedTheme(providerId);
-  const mergedTheme = (0, import_react6.useMemo)(
+  const mergedTheme = (0, import_react7.useMemo)(
     () => ({
       ...inheritedTheme,
       ...localTheme,
@@ -3421,7 +3951,7 @@ function AnyclickProvider({
   const effectiveMenuClassName = mergedTheme.menuClassName ?? menuClassName;
   const effectiveHighlightConfig = mergedTheme.highlightConfig ?? highlightConfig;
   const effectiveScreenshotConfig = mergedTheme.screenshotConfig ?? screenshotConfig;
-  const contextValue = (0, import_react6.useMemo)(
+  const contextValue = (0, import_react7.useMemo)(
     () => ({
       closeMenu,
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
@@ -3453,7 +3983,7 @@ function AnyclickProvider({
       children
     }
   ) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AnyclickContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnyclickContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-anyclick-root": true, children: [
     content,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ContextMenu,
@@ -3474,12 +4004,12 @@ function AnyclickProvider({
         visible: menuVisible && !effectiveDisabled
       }
     )
-  ] });
+  ] }) });
 }
 var FeedbackProvider = AnyclickProvider;
 
 // src/FunModeBridge.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_anyclick_pointer = require("@ewjdev/anyclick-pointer");
 function isFunModeEnabled(theme) {
   if (!theme) return false;
@@ -3526,9 +4056,9 @@ function buildFunConfig(theme, container) {
 function FunModeBridge() {
   const { setConfig } = (0, import_anyclick_pointer.usePointer)();
   const providerStore = useProviderStore();
-  const activeProviderRef = (0, import_react7.useRef)(null);
-  const cachedConfigs = (0, import_react7.useRef)({});
-  const findActiveFunProvider = (0, import_react7.useMemo)(() => {
+  const activeProviderRef = (0, import_react8.useRef)(null);
+  const cachedConfigs = (0, import_react8.useRef)({});
+  const findActiveFunProvider = (0, import_react8.useMemo)(() => {
     return (el) => {
       if (!el) return null;
       const providers = providerStore.findProvidersForElement(el);
@@ -3540,7 +4070,7 @@ function FunModeBridge() {
       return null;
     };
   }, [providerStore]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleMove = (event) => {
       const el = document.elementFromPoint(event.clientX, event.clientY);
       const provider = findActiveFunProvider(el);
@@ -3574,12 +4104,72 @@ function FunModeBridge() {
   return null;
 }
 
-// src/InspectDialog/InspectDialogManager.tsx
+// src/ui/button.tsx
 var import_react9 = require("react");
 
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/ui/button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var variantClasses = {
+  default: "ac-bg-accent ac-text-accent-foreground hover:ac-bg-accent-muted ac-border ac-border-border",
+  ghost: "ac-bg-transparent hover:ac-bg-surface-muted ac-text-text",
+  outline: "ac-bg-transparent ac-text-text ac-border ac-border-border hover:ac-bg-surface-muted",
+  destructive: "ac-bg-destructive ac-text-accent-foreground hover:ac-bg-destructive/80"
+};
+var sizeClasses = {
+  sm: "ac-h-8 ac-px-3 ac-text-sm",
+  md: "ac-h-10 ac-px-4 ac-text-sm",
+  lg: "ac-h-11 ac-px-5 ac-text-base"
+};
+var Button = (0, import_react9.forwardRef)(
+  ({ className, variant = "default", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(
+          "ac-inline-flex ac-items-center ac-justify-center ac-gap-2 ac-rounded-md ac-font-medium ac-transition-colors focus-visible:ac-outline focus-visible:ac-outline-2 focus-visible:ac-outline-offset-2 focus-visible:ac-outline-accent disabled:ac-opacity-50 disabled:ac-cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/input.tsx
+var import_react10 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Input = (0, import_react10.forwardRef)(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref,
+        className: cn(
+          "ac-h-10 ac-w-full ac-rounded-md ac-border ac-border-border ac-bg-surface ac-text-text ac-placeholder-text-muted ac-px-3 ac-py-2 ac-text-sm focus-visible:ac-outline focus-visible:ac-outline-2 focus-visible:ac-outline-offset-2 focus-visible:ac-outline-accent disabled:ac-opacity-50 disabled:ac-cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/InspectDialog/InspectDialogManager.tsx
+var import_react12 = require("react");
+
 // src/InspectDialog/InspectSimple.tsx
-var import_react8 = require("react");
-var import_anyclick_core5 = require("@ewjdev/anyclick-core");
+var import_react11 = require("react");
+var import_anyclick_core6 = require("@ewjdev/anyclick-core");
 var import_lucide_react4 = require("lucide-react");
 
 // src/ide.ts
@@ -3682,7 +4272,7 @@ function formatSourceLocation(location) {
 }
 
 // src/InspectDialog/InspectSimple.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_COMPACT_CONFIG = {
   scale: 0.5,
   fonts: {
@@ -3744,8 +4334,8 @@ function downloadDataUrl(dataUrl, filename) {
   link.click();
 }
 function useIsMobile() {
-  const [isMobile, setIsMobile] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     const mq = window.matchMedia("(max-width: 640px)");
     setIsMobile(mq.matches);
     const handler = (e) => setIsMobile(e.matches);
@@ -3763,20 +4353,20 @@ function InspectSimple({
   className,
   highlightColors
 }) {
-  const [info, setInfo] = (0, import_react8.useState)(null);
-  const [sourceLocation, setSourceLocation] = (0, import_react8.useState)(
+  const [info, setInfo] = (0, import_react11.useState)(null);
+  const [sourceLocation, setSourceLocation] = (0, import_react11.useState)(
     null
   );
-  const [status, setStatus] = (0, import_react8.useState)(null);
-  const [saving, setSaving] = (0, import_react8.useState)(false);
-  const dialogRef = (0, import_react8.useRef)(null);
+  const [status, setStatus] = (0, import_react11.useState)(null);
+  const [saving, setSaving] = (0, import_react11.useState)(false);
+  const dialogRef = (0, import_react11.useRef)(null);
   const isMobile = useIsMobile();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!status) return;
     const timer = setTimeout(() => setStatus(null), 5e3);
     return () => clearTimeout(timer);
   }, [status]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!visible || !targetElement) return;
     try {
       clearHighlights();
@@ -3785,7 +4375,7 @@ function InspectSimple({
       if (container) highlightContainer(container, highlightColors);
     } catch {
     }
-    const nextInfo = (0, import_anyclick_core5.getElementInspectInfo)(targetElement);
+    const nextInfo = (0, import_anyclick_core6.getElementInspectInfo)(targetElement);
     setInfo(nextInfo);
     setSourceLocation(
       findSourceLocationInAncestors(targetElement) ?? nextInfo.sourceLocation ?? null
@@ -3794,7 +4384,7 @@ function InspectSimple({
       clearHighlights();
     };
   }, [visible, targetElement, highlightColors]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (dialogRef.current && !dialogRef.current.contains(e.target)) {
@@ -3809,7 +4399,7 @@ function InspectSimple({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [visible, onClose]);
-  const identityLabel = (0, import_react8.useMemo)(() => {
+  const identityLabel = (0, import_react11.useMemo)(() => {
     if (!info) return "Select an element";
     const classes = info.classNames[0] ? `.${info.classNames[0]}` : "";
     const id = info.id ? `#${info.id}` : "";
@@ -3839,7 +4429,7 @@ function InspectSimple({
     if (!targetElement) return;
     setSaving(true);
     setStatus("Capturing screenshot\u2026");
-    const result = await (0, import_anyclick_core5.captureScreenshot)(targetElement, null, "element");
+    const result = await (0, import_anyclick_core6.captureScreenshot)(targetElement, null, "element");
     setSaving(false);
     if (result.capture?.dataUrl) {
       downloadDataUrl(result.capture.dataUrl, "anyclick-inspect.png");
@@ -3895,8 +4485,8 @@ function InspectSimple({
     overflow: "hidden",
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -3911,14 +4501,14 @@ function InspectSimple({
         role: "presentation"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref: dialogRef,
         className: `anyclick-tiny-inspect ${className ?? ""}`,
         style: dialogStyles,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               style: {
@@ -3930,7 +4520,7 @@ function InspectSimple({
                 borderBottom: "1px solid #1e293b"
               },
               children: [
-                isMobile && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                isMobile && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     style: {
@@ -3945,8 +4535,8 @@ function InspectSimple({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "span",
                     {
                       style: {
@@ -3961,31 +4551,31 @@ function InspectSimple({
                       children: identityLabel
                     }
                   ),
-                  sourceLocation && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  sourceLocation && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "button",
                     {
                       type: "button",
                       onClick: handleOpenIDE,
                       title: formatSourceLocation(sourceLocation),
                       style: iconBtnStyle,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ExternalLink, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.ExternalLink, { size: 14 })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: onClose,
                     style: iconBtnStyle,
                     "aria-label": "Close inspector",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { size: 16 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.X, { size: 16 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               style: {
@@ -3995,7 +4585,7 @@ function InspectSimple({
                 gap: 8
               },
               children: [
-                info?.selector && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                info?.selector && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "code",
                   {
                     style: {
@@ -4010,7 +4600,7 @@ function InspectSimple({
                     children: info.selector
                   }
                 ),
-                status && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                status && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     style: {
@@ -4022,7 +4612,7 @@ function InspectSimple({
                     children: status
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "div",
                   {
                     style: {
@@ -4031,7 +4621,7 @@ function InspectSimple({
                       gap: 6
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "button",
                         {
                           type: "button",
@@ -4039,10 +4629,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy CSS selector",
                           "aria-label": "Copy CSS selector",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Copy, { size: 15 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Copy, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "button",
                         {
                           type: "button",
@@ -4050,10 +4640,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy text content",
                           "aria-label": "Copy text content",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.FileText, { size: 15 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.FileText, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "button",
                         {
                           type: "button",
@@ -4061,10 +4651,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy HTML markup",
                           "aria-label": "Copy HTML markup",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Code, { size: 15 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Code, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "button",
                         {
                           type: "button",
@@ -4076,7 +4666,7 @@ function InspectSimple({
                           disabled: saving,
                           title: "Save screenshot",
                           "aria-label": "Save screenshot",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Camera, { size: 15 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Camera, { size: 15 })
                         }
                       )
                     ]
@@ -4119,7 +4709,7 @@ var iconActionStyle = {
 };
 
 // src/InspectDialog/InspectDialogManager.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var INSPECT_DIALOG_EVENT = "anyclick:inspect";
 function openInspectDialog(targetElement) {
   if (typeof window === "undefined") return;
@@ -4142,16 +4732,16 @@ function InspectDialogManager({
   initialPinnedPosition = "floating",
   compactConfig
 }) {
-  const [visible, setVisible] = (0, import_react9.useState)(false);
-  const [targetElement, setTargetElement] = (0, import_react9.useState)(null);
-  const handleClose = (0, import_react9.useCallback)(() => {
+  const [visible, setVisible] = (0, import_react12.useState)(false);
+  const [targetElement, setTargetElement] = (0, import_react12.useState)(null);
+  const handleClose = (0, import_react12.useCallback)(() => {
     setVisible(false);
     setTargetElement(null);
   }, []);
-  const handleSelectElement = (0, import_react9.useCallback)((element) => {
+  const handleSelectElement = (0, import_react12.useCallback)((element) => {
     setTargetElement(element);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleInspectEvent = (event) => {
       const customEvent = event;
       if (customEvent.detail?.targetElement) {
@@ -4164,7 +4754,7 @@ function InspectDialogManager({
       window.removeEventListener(INSPECT_DIALOG_EVENT, handleInspectEvent);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     InspectSimple,
     {
       visible,
@@ -4693,10 +5283,10 @@ function filterMenuItemsByRole(items, userContext) {
 }
 
 // src/index.ts
-var import_anyclick_core6 = require("@ewjdev/anyclick-core");
+var import_anyclick_core7 = require("@ewjdev/anyclick-core");
 
 // src/AnyclickLogo.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function AnyclickLogo({
   size = 64,
   borderWidth = 2,
@@ -4708,7 +5298,7 @@ function AnyclickLogo({
 }) {
   const cursorSize = size * 0.45;
   const cursorStroke = borderWidth;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: size,
@@ -4722,7 +5312,7 @@ function AnyclickLogo({
       role: onClick ? "button" : "img",
       "aria-label": "Anyclick Logo",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "circle",
           {
             cx: size / 2,
@@ -4733,11 +5323,11 @@ function AnyclickLogo({
             strokeWidth: borderWidth
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "g",
           {
             transform: `translate(${(size - cursorSize) / 2}, ${(size - cursorSize) / 2})`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "path",
               {
                 d: `
@@ -4765,13 +5355,14 @@ function AnyclickLogo({
 }
 
 // src/index.ts
-var import_anyclick_core7 = require("@ewjdev/anyclick-core");
+var import_anyclick_core8 = require("@ewjdev/anyclick-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ALL_CURATED_PROPERTIES,
   AnyclickContext,
   AnyclickLogo,
   AnyclickProvider,
+  Button,
   CURATED_STYLE_PROPERTIES,
   ContextMenu,
   DEFAULT_COMPACT_CONFIG,
@@ -4782,6 +5373,7 @@ var import_anyclick_core7 = require("@ewjdev/anyclick-core");
   FeedbackProvider,
   FunModeBridge,
   INSPECT_DIALOG_EVENT,
+  Input,
   InspectDialogManager,
   InspectSimple,
   QuickChat,