@ewjdev/anyclick-react 3.0.0 → 4.0.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   useEffect as useEffect4,
   useId,
   useLayoutEffect,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef as useRef4,
   useState as useState5
 } from "react";
@@ -34,10 +34,11 @@ import {
 import React, {
   useCallback as useCallback2,
   useEffect as useEffect2,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState as useState2
 } from "react";
+import { buildAnyclickPayload } from "@ewjdev/anyclick-core";
 import {
   AlertCircle,
   ChevronDown,
@@ -231,6 +232,7 @@ var quickChatStyles = {
   // Suggestions - compact horizontal scroll
   suggestionsContainer: {
     display: "flex",
+    flexDirection: "column",
     gap: "6px",
     padding: "6px 8px",
     overflowX: "auto",
@@ -493,8 +495,131 @@ var quickChatKeyframes = `
 `;
 
 // src/QuickChat/useQuickChat.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getElementInspectInfo } from "@ewjdev/anyclick-core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+
+// src/QuickChat/store.ts
+import { create } from "zustand";
+import { createJSONStorage, persist } from "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 = createJSONStorage(() => localStorage);
+function filterExpiredMessages(messages) {
+  const now = Date.now();
+  return messages.filter((msg) => msg.expiresAt > now);
+}
+var useQuickChatStore = create()(
+  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 = {
@@ -504,9 +629,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.",
@@ -515,57 +640,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
+import { getElementInspectInfo } from "@ewjdev/anyclick-core";
+function extractContextChunks(targetElement, _containerElement) {
   const chunks = [];
   if (!targetElement) return chunks;
   try {
@@ -592,7 +669,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) {
@@ -630,7 +707,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",
@@ -641,54 +720,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 = useRef(null);
   const initializedRef = useRef(false);
-  const [state, setState] = useState({
-    input: "",
-    messages: [],
-    isLoadingSuggestions: false,
-    isSending: false,
-    isStreaming: false,
-    suggestedPrompts: [],
-    contextChunks: [],
-    error: null
+  const syncTimeoutRef = useRef(null);
+  const [manualSending, setManualSending] = useState(false);
+  const [debugInfo, setDebugInfo] = useState(null);
+  const [rateLimitNotice, setRateLimitNotice] = 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 = useMemo(
+    () => buildContextString(contextChunks),
+    [contextChunks]
+  );
+  const chatBody = useMemo(
+    () => ({
+      action: "chat",
+      context: contextString,
+      model: mergedConfig.model,
+      systemPrompt: mergedConfig.systemPrompt,
+      maxLength: mergedConfig.maxResponseLength
+    }),
+    [
+      contextString,
+      mergedConfig.model,
+      mergedConfig.systemPrompt,
+      mergedConfig.maxResponseLength
+    ]
+  );
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: mergedConfig.endpoint,
+      body: chatBody
+    }),
+    [mergedConfig.endpoint, chatBody]
+  );
+  const handleRateLimitResponse = useCallback(
+    async (res, endpoint) => {
+      const notice = await rateLimitNoticeFromResponse(res, endpoint);
+      if (!notice) return false;
+      setRateLimitNotice(notice);
+      setError(null);
+      return true;
+    },
+    [setError]
+  );
+  const scheduleBackendSync = 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
+  } = 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 = 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 = useMemo(
+    () => uiMessagesToChatMessages({
+      uiMessages: aiMessages,
+      status,
+      setInput
+    }),
+    [aiMessages, setInput, status]
+  );
+  const isStreaming = status === "streaming";
+  const isSending = status === "submitted" || status === "streaming" || manualSending;
   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]);
   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]);
   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" },
@@ -698,250 +1081,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 = useCallback((value) => {
-    setState((prev) => ({ ...prev, input: value }));
-  }, []);
-  const toggleChunk = useCallback((chunkId) => {
-    setState((prev) => ({
-      ...prev,
-      contextChunks: prev.contextChunks.map(
-        (chunk) => chunk.id === chunkId ? { ...chunk, included: !chunk.included } : chunk
-      )
-    }));
-  }, []);
-  const toggleAllChunks = useCallback((included) => {
-    setState((prev) => ({
-      ...prev,
-      contextChunks: prev.contextChunks.map((chunk) => ({
-        ...chunk,
-        included
-      }))
-    }));
-  }, []);
-  const selectSuggestion = useCallback((prompt) => {
-    setState((prev) => ({ ...prev, input: prompt.text }));
-  }, []);
+  const selectSuggestion = useCallback(
+    (prompt) => {
+      setInput(prompt.text);
+    },
+    [setInput]
+  );
   const sendMessage = 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 = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-    clearChatHistory();
-    setState((prev) => ({
-      ...prev,
-      messages: [],
-      error: null
-    }));
-  }, []);
-  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
+  ]);
   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
 import { Fragment, jsx, jsxs } from "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;
@@ -982,39 +1257,41 @@ function QuickChat({
   const [hoveredSuggestion, setHoveredSuggestion] = useState2(
     null
   );
-  const [localPinned, setLocalPinned] = useState2(() => getStoredPinnedState());
-  const isPinned = isPinnedProp || localPinned;
-  const handlePinToggle = useCallback2(() => {
-    const newPinned = !isPinned;
-    setLocalPinned(newPinned);
-    setStoredPinnedState(newPinned);
-    onPin?.(newPinned);
-  }, [isPinned, onPin]);
-  const handleClose = useCallback2(() => {
-    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);
+  const isPinned = isPinnedProp || storePinned;
+  const handlePinToggle = useCallback2(() => {
+    const newPinned = !isPinned;
+    setIsPinned(newPinned);
+    onPin?.(newPinned);
+  }, [isPinned, setIsPinned, onPin]);
+  const handleClose = useCallback2(() => {
+    if (isPinned) {
+      setIsPinned(false);
+      onPin?.(false);
+    }
+    onClose();
+  }, [isPinned, setIsPinned, onPin, onClose]);
   useEffect2(() => {
     injectStyles();
   }, []);
@@ -1077,10 +1354,65 @@ function QuickChat({
   const handleCopy = useCallback2((text) => {
     navigator.clipboard.writeText(text);
   }, []);
-  const includedCount = useMemo(
+  const includedCount = useMemo2(
     () => contextChunks.filter((c) => c.included).length,
     [contextChunks]
   );
+  const [rateLimitExpanded, setRateLimitExpanded] = useState2(false);
+  const [reportStatus, setReportStatus] = useState2("idle");
+  const [reportUrl, setReportUrl] = useState2(null);
+  const [reportError, setReportError] = useState2(null);
+  useEffect2(() => {
+    if (rateLimitNotice) {
+      setReportStatus("idle");
+      setReportUrl(null);
+      setReportError(null);
+      setRateLimitExpanded(false);
+    }
+  }, [rateLimitNotice]);
+  const handleReportIssue = useCallback2(async () => {
+    if (!rateLimitNotice) return;
+    if (!targetElement) {
+      setReportStatus("error");
+      setReportError("No target element available to report.");
+      return;
+    }
+    setReportStatus("sending");
+    setReportError(null);
+    try {
+      const payload = 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,
@@ -1239,7 +1571,7 @@ function QuickChat({
       {
         style: isPinned ? quickChatStyles.pinnedMessagesArea : quickChatStyles.messagesArea,
         children: [
-          error && /* @__PURE__ */ jsxs("div", { style: quickChatStyles.errorContainer, children: [
+          error && !rateLimitNotice && /* @__PURE__ */ jsxs("div", { style: quickChatStyles.errorContainer, children: [
             /* @__PURE__ */ jsx(AlertCircle, { size: 20, style: quickChatStyles.errorIcon }),
             /* @__PURE__ */ jsx("span", { style: quickChatStyles.errorText, children: error }),
             /* @__PURE__ */ jsxs(
@@ -1255,6 +1587,55 @@ function QuickChat({
               }
             )
           ] }),
+          debugInfo && /* @__PURE__ */ 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__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      gap: "8px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Last request: ",
+                        debugInfo.status,
+                        " ",
+                        debugInfo.ok ? "(ok)" : "(error)"
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { opacity: 0.7 }, children: new Date(debugInfo.timestamp).toLocaleTimeString() })
+                    ]
+                  }
+                ),
+                debugInfo.error && /* @__PURE__ */ jsxs("div", { style: { color: "#f87171", marginTop: "4px" }, children: [
+                  "Error: ",
+                  debugInfo.error
+                ] }),
+                debugInfo.contentPreview && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+                  "Content: ",
+                  debugInfo.contentPreview
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px", opacity: 0.8 }, children: [
+                  "Raw: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          ),
           messages.length > 0 && messages.map((message) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1309,6 +1690,153 @@ function QuickChat({
         ]
       }
     ),
+    rateLimitNotice && /* @__PURE__ */ 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__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(AlertCircle, { size: 16, style: { color: "#fbbf24" } }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", lineHeight: 1.2 }, children: rateLimitNotice.message })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(X, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          reportUrl && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", fontSize: "12px" }, children: [
+            "Created:",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: reportUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "#93c5fd" },
+                children: "Open issue"
+              }
+            )
+          ] }),
+          reportError && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { marginTop: "6px", fontSize: "12px", color: "#fca5a5" },
+              children: reportError
+            }
+          ),
+          rateLimitExpanded && /* @__PURE__ */ 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__ */ jsxs("div", { style: { opacity: 0.85 }, children: [
+                  "Status: ",
+                  rateLimitNotice.status,
+                  rateLimitNotice.requestId ? ` \u2022 Request: ${rateLimitNotice.requestId}` : ""
+                ] }),
+                rateLimitNotice.endpoint && /* @__PURE__ */ jsxs("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "Endpoint: ",
+                  rateLimitNotice.endpoint
+                ] }),
+                rateLimitNotice.retryAt && /* @__PURE__ */ jsxs("div", { style: { opacity: 0.75, marginTop: "4px" }, children: [
+                  "RetryAt: ",
+                  new Date(rateLimitNotice.retryAt).toLocaleString()
+                ] }),
+                rateLimitNotice.raw && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Raw: ",
+                  rateLimitNotice.raw
+                ] }),
+                debugInfo && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", opacity: 0.85 }, children: [
+                  "Debug: ",
+                  debugInfo.rawTextPreview || "(empty)"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { style: quickChatStyles.inputContainer, children: [
       /* @__PURE__ */ jsx(
         "textarea",
@@ -1375,7 +1903,7 @@ function QuickChat({
 }
 
 // src/ScreenshotPreview.tsx
-import React2, { useMemo as useMemo2, useState as useState3 } from "react";
+import React2, { useMemo as useMemo3, useState as useState3 } from "react";
 import { estimateTotalSize, formatBytes } from "@ewjdev/anyclick-core";
 import {
   AlertCircleIcon,
@@ -1875,7 +2403,7 @@ var ScreenshotPreview = React2.memo(function ScreenshotPreview2({
   const getError = (key) => {
     return screenshots?.errors?.[key];
   };
-  const tabs = useMemo2(() => {
+  const tabs = useMemo3(() => {
     if (!screenshots) return [];
     const allTabs = [
       {
@@ -1899,7 +2427,7 @@ var ScreenshotPreview = React2.memo(function ScreenshotPreview2({
     ];
     return allTabs.filter((tab) => tab.data || tab.error);
   }, [screenshots]);
-  const totalSize = useMemo2(
+  const totalSize = useMemo3(
     () => screenshots ? estimateTotalSize(screenshots) : 0,
     [screenshots]
   );
@@ -2917,12 +3445,12 @@ function useFeedback() {
 }
 
 // src/store.ts
-import { create } from "zustand";
+import { create as create2 } from "zustand";
 var providerIdCounter = 0;
 function generateProviderId() {
   return `anyclick-provider-${++providerIdCounter}`;
 }
-var useProviderStore = create((set, get) => ({
+var useProviderStore = create2((set, get) => ({
   providers: /* @__PURE__ */ new Map(),
   findProvidersForElement: (element) => {
     const { providers } = get();
@@ -3150,7 +3678,7 @@ function AnyclickProvider({
     updateProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
-  const actualDepth = useMemo3(() => {
+  const actualDepth = useMemo4(() => {
     if (!parentContext) return 0;
     let d = 0;
     let currentId = parentId;
@@ -3164,7 +3692,7 @@ function AnyclickProvider({
   }, [parentContext, parentId]);
   const isDisabledByTheme = theme === null || theme?.disabled === true;
   const effectiveDisabled = disabled || isDisabledByTheme;
-  const localTheme = useMemo3(() => {
+  const localTheme = useMemo4(() => {
     if (theme === null) {
       return { disabled: true };
     }
@@ -3344,7 +3872,7 @@ function AnyclickProvider({
     [submitAnyclick, targetElement]
   );
   const inheritedTheme = getMergedTheme(providerId);
-  const mergedTheme = useMemo3(
+  const mergedTheme = useMemo4(
     () => ({
       ...inheritedTheme,
       ...localTheme,
@@ -3367,7 +3895,7 @@ function AnyclickProvider({
   const effectiveMenuClassName = mergedTheme.menuClassName ?? menuClassName;
   const effectiveHighlightConfig = mergedTheme.highlightConfig ?? highlightConfig;
   const effectiveScreenshotConfig = mergedTheme.screenshotConfig ?? screenshotConfig;
-  const contextValue = useMemo3(
+  const contextValue = useMemo4(
     () => ({
       closeMenu,
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
@@ -3399,7 +3927,7 @@ function AnyclickProvider({
       children
     }
   ) : children;
-  return /* @__PURE__ */ jsxs4(AnyclickContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsx4(AnyclickContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { "data-anyclick-root": true, children: [
     content,
     /* @__PURE__ */ jsx4(
       ContextMenu,
@@ -3420,12 +3948,12 @@ function AnyclickProvider({
         visible: menuVisible && !effectiveDisabled
       }
     )
-  ] });
+  ] }) });
 }
 var FeedbackProvider = AnyclickProvider;
 
 // src/FunModeBridge.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
 import {
   usePointer
 } from "@ewjdev/anyclick-pointer";
@@ -3476,7 +4004,7 @@ function FunModeBridge() {
   const providerStore = useProviderStore();
   const activeProviderRef = useRef5(null);
   const cachedConfigs = useRef5({});
-  const findActiveFunProvider = useMemo4(() => {
+  const findActiveFunProvider = useMemo5(() => {
     return (el) => {
       if (!el) return null;
       const providers = providerStore.findProvidersForElement(el);
@@ -3522,11 +4050,71 @@ function FunModeBridge() {
   return null;
 }
 
+// src/ui/button.tsx
+import { forwardRef } from "react";
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/ui/button.tsx
+import { jsx as jsx5 } from "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 = forwardRef(
+  ({ className, variant = "default", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "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
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Input = forwardRef2(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx6(
+      "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
 import { useCallback as useCallback5, useEffect as useEffect7, useState as useState7 } from "react";
 
 // src/InspectDialog/InspectSimple.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef6, useState as useState6 } from "react";
 import {
   captureScreenshot,
   getElementInspectInfo as getElementInspectInfo2
@@ -3633,7 +4221,7 @@ function formatSourceLocation(location) {
 }
 
 // src/InspectDialog/InspectSimple.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_COMPACT_CONFIG = {
   scale: 0.5,
   fonts: {
@@ -3760,7 +4348,7 @@ function InspectSimple({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [visible, onClose]);
-  const identityLabel = useMemo5(() => {
+  const identityLabel = useMemo6(() => {
     if (!info) return "Select an element";
     const classes = info.classNames[0] ? `.${info.classNames[0]}` : "";
     const id = info.id ? `#${info.id}` : "";
@@ -3847,7 +4435,7 @@ function InspectSimple({
     ...style
   };
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -3881,7 +4469,7 @@ function InspectSimple({
                 borderBottom: "1px solid #1e293b"
               },
               children: [
-                isMobile && /* @__PURE__ */ jsx5(
+                isMobile && /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -3897,7 +4485,7 @@ function InspectSimple({
                   }
                 ),
                 /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx7(
                     "span",
                     {
                       style: {
@@ -3912,25 +4500,25 @@ function InspectSimple({
                       children: identityLabel
                     }
                   ),
-                  sourceLocation && /* @__PURE__ */ jsx5(
+                  sourceLocation && /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
                       onClick: handleOpenIDE,
                       title: formatSourceLocation(sourceLocation),
                       style: iconBtnStyle,
-                      children: /* @__PURE__ */ jsx5(ExternalLink2, { size: 14 })
+                      children: /* @__PURE__ */ jsx7(ExternalLink2, { size: 14 })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
                     onClick: onClose,
                     style: iconBtnStyle,
                     "aria-label": "Close inspector",
-                    children: /* @__PURE__ */ jsx5(X2, { size: 16 })
+                    children: /* @__PURE__ */ jsx7(X2, { size: 16 })
                   }
                 )
               ]
@@ -3946,7 +4534,7 @@ function InspectSimple({
                 gap: 8
               },
               children: [
-                info?.selector && /* @__PURE__ */ jsx5(
+                info?.selector && /* @__PURE__ */ jsx7(
                   "code",
                   {
                     style: {
@@ -3961,7 +4549,7 @@ function InspectSimple({
                     children: info.selector
                   }
                 ),
-                status && /* @__PURE__ */ jsx5(
+                status && /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -3982,7 +4570,7 @@ function InspectSimple({
                       gap: 6
                     },
                     children: [
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -3990,10 +4578,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy CSS selector",
                           "aria-label": "Copy CSS selector",
-                          children: /* @__PURE__ */ jsx5(Copy2, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Copy2, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -4001,10 +4589,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy text content",
                           "aria-label": "Copy text content",
-                          children: /* @__PURE__ */ jsx5(FileText, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(FileText, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -4012,10 +4600,10 @@ function InspectSimple({
                           style: iconActionStyle,
                           title: "Copy HTML markup",
                           "aria-label": "Copy HTML markup",
-                          children: /* @__PURE__ */ jsx5(Code, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Code, { size: 15 })
                         }
                       ),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx7(
                         "button",
                         {
                           type: "button",
@@ -4027,7 +4615,7 @@ function InspectSimple({
                           disabled: saving,
                           title: "Save screenshot",
                           "aria-label": "Save screenshot",
-                          children: /* @__PURE__ */ jsx5(Camera, { size: 15 })
+                          children: /* @__PURE__ */ jsx7(Camera, { size: 15 })
                         }
                       )
                     ]
@@ -4070,7 +4658,7 @@ var iconActionStyle = {
 };
 
 // src/InspectDialog/InspectDialogManager.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var INSPECT_DIALOG_EVENT = "anyclick:inspect";
 function openInspectDialog(targetElement) {
   if (typeof window === "undefined") return;
@@ -4115,7 +4703,7 @@ function InspectDialogManager({
       window.removeEventListener(INSPECT_DIALOG_EVENT, handleInspectEvent);
     };
   }, []);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     InspectSimple,
     {
       visible,
@@ -4655,7 +5243,7 @@ import {
 } from "@ewjdev/anyclick-core";
 
 // src/AnyclickLogo.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function AnyclickLogo({
   size = 64,
   borderWidth = 2,
@@ -4681,7 +5269,7 @@ function AnyclickLogo({
       role: onClick ? "button" : "img",
       "aria-label": "Anyclick Logo",
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "circle",
           {
             cx: size / 2,
@@ -4692,11 +5280,11 @@ function AnyclickLogo({
             strokeWidth: borderWidth
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "g",
           {
             transform: `translate(${(size - cursorSize) / 2}, ${(size - cursorSize) / 2})`,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx9(
               "path",
               {
                 d: `
@@ -4740,6 +5328,7 @@ export {
   AnyclickContext,
   AnyclickLogo,
   AnyclickProvider,
+  Button,
   CURATED_STYLE_PROPERTIES,
   ContextMenu,
   DEFAULT_COMPACT_CONFIG,
@@ -4750,6 +5339,7 @@ export {
   FeedbackProvider,
   FunModeBridge,
   INSPECT_DIALOG_EVENT,
+  Input,
   InspectDialogManager,
   InspectSimple,
   QuickChat,