@akropolys/kiku 1.6.2 → 1.6.4

package/dist/index.js

@@ -52,7 +52,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { wid
 function SearchBar({
   placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 300,
+  debounceMs = 150,
   onSelect,
   className,
   inputClassName,
@@ -63,10 +63,8 @@ function SearchBar({
 }) {
   const [query, setQuery] = (0, import_react.useState)("");
   const [open, setOpen] = (0, import_react.useState)(false);
-  const [isDebouncing, setIsDebouncing] = (0, import_react.useState)(false);
-  const { results, loading, search, clear } = (0, import_sdk.useSearch)();
+  const { results, loading, search, clear } = (0, import_sdk.useSearch)({ debounceMs });
   const client = (0, import_sdk.useAkropolysContext)();
-  const timer = (0, import_react.useRef)();
   const wrap = (0, import_react.useRef)(null);
   const ignoreNextQueryChange = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
@@ -74,20 +72,13 @@ function SearchBar({
       ignoreNextQueryChange.current = false;
       return;
     }
-    clearTimeout(timer.current);
     if (!query.trim()) {
       clear();
       setOpen(false);
-      setIsDebouncing(false);
       return;
     }
     setOpen(true);
-    setIsDebouncing(true);
-    timer.current = setTimeout(() => {
-      setIsDebouncing(false);
-      search(query, limit);
-    }, debounceMs);
-    return () => clearTimeout(timer.current);
+    search(query, limit);
   }, [query]);
   (0, import_react.useEffect)(() => {
     const h = (e) => {
@@ -143,8 +134,8 @@ function SearchBar({
       }
     ),
     showDrop && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("hsk-sb-drop", classNames.dropdown, dropdownClassName), style: { position: "absolute" }, children: [
-      (loading || isDebouncing) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-loading-bar" }),
-      (loading || isDebouncing) && results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-loading-bar" }),
+      loading && results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-skeleton-row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hsk-sb-skeleton-icon" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-row-body", children: [
@@ -160,36 +151,52 @@ function SearchBar({
           ] })
         ] })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        results.length === 0 && !loading && !isDebouncing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-empty", children: [
+        results.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-empty", children: [
           "No results for \u201C",
           query,
           "\u201D"
         ] }),
-        results.map((r, i) => renderResult ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            onClick: () => handleSelect(r),
-            className: "hsk-sb-fade",
-            style: { animationDelay: `${i * 18}ms` },
-            children: renderResult(r)
-          },
-          r.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
-            style: { animationDelay: `${i * 18}ms` },
-            onClick: () => handleSelect(r),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-row-body", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-row-title", children: r.entity.title ?? r.entity.name }),
-                (r.entity.category || r.entity.brand) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-row-sub", children: r.entity.category ?? r.entity.brand })
-              ] })
-            ]
-          },
-          r.id
-        ))
+        results.map((r, i) => {
+          if (renderResult) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                onClick: () => handleSelect(r),
+                className: "hsk-sb-fade",
+                style: { animationDelay: `${i * 18}ms` },
+                children: renderResult(r)
+              },
+              r.id
+            );
+          }
+          const thumb = r.entity.image ?? r.entity.thumbnail ?? r.entity.images?.[0];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
+              style: { animationDelay: `${i * 18}ms` },
+              onClick: () => handleSelect(r),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hsk-sb-row-thumb", children: thumb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: thumb,
+                    alt: "",
+                    loading: "lazy",
+                    onError: (e) => {
+                      e.currentTarget.style.display = "none";
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hsk-sb-row-body", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-row-title", children: r.entity.title ?? r.entity.name }),
+                  (r.entity.category || r.entity.brand) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hsk-sb-row-sub", children: r.entity.category ?? r.entity.brand })
+                ] })
+              ]
+            },
+            r.id
+          );
+        })
       ] })
     ] })
   ] });
@@ -1199,6 +1206,25 @@ var ShoppingBagIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg",
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M16 10a4 4 0 0 1-8 0" })
 ] });
+var SecureShieldIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    className,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 11v4" })
+    ]
+  }
+);
 var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 var MicIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
@@ -1221,6 +1247,173 @@ var DEFAULT_CHIPS = [
 ];
 var SESSIONS_KEY = "akropolys_chat_sessions";
 var MAX_SESSIONS = 20;
+function parseAtKiku(raw) {
+  const trimmed = raw.trim();
+  if (!/^@kiku\b/i.test(trimmed)) return null;
+  const rest = trimmed.slice(5).trim();
+  if (rest === "" || /^(capture|save)\b/i.test(rest)) {
+    return {
+      intent: "capture",
+      cleanQuery: rest.replace(/^(capture|save)\s*/i, "").trim() || trimmed
+    };
+  }
+  if (/^(history|what have you|show my|my items|what did you|saved|captures|recall)\b/i.test(rest)) {
+    return { intent: "view_history", cleanQuery: "show my saved items" };
+  }
+  if (/^(delete|forget|remove|unsave)\b/i.test(rest)) {
+    return {
+      intent: "delete",
+      cleanQuery: rest.replace(/^(delete|forget|remove|unsave)\s*/i, "").trim() || trimmed
+    };
+  }
+  return { intent: "capture", cleanQuery: rest || trimmed };
+}
+function KikuPickerMenu({
+  sources,
+  referencedIds,
+  defaultCurrency,
+  onCapture,
+  onCaptureAll,
+  onViewHistory,
+  onDelete,
+  onDismiss
+}) {
+  const discussed = sources.filter((s) => s.id && referencedIds.includes(s.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "hsk-kiku-picker",
+      role: "menu",
+      "aria-label": "@kiku commands",
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-kiku-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-at", children: "@kiku" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-hint", children: "What would you like to do?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-kiku-picker-close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
+        ] }),
+        discussed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-section", children: "Discussed in this chat" }),
+          discussed.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item",
+              role: "menuitem",
+              onClick: () => {
+                onCapture(src);
+                onDismiss();
+              },
+              children: [
+                src.image ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: src.image, alt: src.name, className: "hsk-kiku-picker-img" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-img-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecureShieldIcon, { size: 14 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-body", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-name", children: [
+                    "\u{1F4CC} ",
+                    src.name
+                  ] }),
+                  src.price && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-price", children: [
+                    src.currency ?? defaultCurrency,
+                    " ",
+                    parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+                  ] })
+                ] })
+              ]
+            },
+            src.id ?? i
+          )),
+          discussed.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item hsk-kiku-picker-item--all",
+              role: "menuitem",
+              onClick: () => {
+                onCaptureAll(discussed);
+                onDismiss();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-name", children: [
+                "\u{1F4CC} Capture all (",
+                discussed.length,
+                " items)"
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-divider" })
+        ] }),
+        discussed.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              className: "hsk-kiku-picker-item",
+              role: "menuitem",
+              onClick: () => {
+                onCapture({ name: "current page", id: void 0 });
+                onDismiss();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F4CC} Capture current page" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-kiku-picker-divider" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => {
+              onViewHistory();
+              onDismiss();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F4CB} What have you saved?" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => {
+              onDelete();
+              onDismiss();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "\u{1F5D1}\uFE0F Delete this" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function AtPickerMenu({ onSelect, onDismiss }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "hsk-kiku-picker",
+      role: "menu",
+      "aria-label": "Extensions",
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-kiku-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-at", children: "@" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-hint", children: "Use an extension" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-kiku-picker-close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "button",
+          {
+            className: "hsk-kiku-picker-item",
+            role: "menuitem",
+            onClick: () => onSelect("@kiku"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-img-placeholder", style: { background: "color-mix(in srgb, var(--hsk-primary, #7c5cfc) 15%, transparent)", color: "var(--hsk-primary, #7c5cfc)" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-kiku-picker-item-body", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-name", children: "@kiku" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-picker-item-price", style: { fontSize: "11px", whiteSpace: "normal", lineHeight: "1.3" }, children: "Ask Kiku to capture pages, remember items, or show your history" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function loadSessions() {
   try {
     if (typeof window === "undefined") return [];
@@ -1541,18 +1734,7 @@ var getFriendlyError = (err) => {
     return str;
   }
 };
-var MK_ADJ = ["flying", "silent", "golden", "lucky", "brave", "swift", "royal", "cosmic"];
-var MK_NOUN = ["thunder", "falcon", "river", "ember", "tiger", "comet", "willow", "onyx"];
-function generateMagicWord() {
-  return MK_ADJ[Math.floor(Math.random() * MK_ADJ.length)] + MK_NOUN[Math.floor(Math.random() * MK_NOUN.length)];
-}
-function parseMemoryKey(raw) {
-  const cleaned = raw.trim().replace(/\s+/g, "");
-  const m = cleaned.match(/^(\d{6,})([a-zA-Z].*)?$/);
-  const phone = m?.[1] || cleaned.replace(/\D/g, "");
-  const word = (m?.[2] || "").toLowerCase() || generateMagicWord();
-  return { phone, word };
-}
+var KIKU_KEY_REVEAL_SECONDS = 60;
 function parseThinking(text) {
   const openMatch = text.match(/<\s*thinking\s*>/i);
   if (!openMatch) {
@@ -1660,6 +1842,7 @@ function ChatModal({
   theme,
   classNames = {},
   enableVoice = false,
+  voiceLang,
   enableVision = false,
   visionCategoryHint
 }) {
@@ -1693,7 +1876,7 @@ function ChatModal({
     if (!hasSpeechAPI || voiceState !== "idle") return;
     const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
     const recognition = new SR();
-    recognition.lang = "en-US";
+    recognition.lang = voiceLang || document.documentElement.lang || navigator.language || "en-US";
     recognition.interimResults = true;
     recognition.maxAlternatives = 1;
     recognitionRef.current = recognition;
@@ -1726,7 +1909,7 @@ function ChatModal({
       setVoiceState((prev) => prev === "listening" ? "idle" : prev);
     };
     recognition.start();
-  }, [hasSpeechAPI, voiceState]);
+  }, [hasSpeechAPI, voiceState, voiceLang]);
   const stopVoice = (0, import_react5.useCallback)(() => {
     recognitionRef.current?.stop();
     setVoiceState("idle");
@@ -1741,23 +1924,37 @@ function ChatModal({
   const [selectedProduct, setSelectedProduct] = (0, import_react5.useState)(null);
   const bottomRef = (0, import_react5.useRef)(null);
   const textareaRef = (0, import_react5.useRef)(null);
-  const [phoneInput, setPhoneInput] = (0, import_react5.useState)(() => {
-    if (typeof window !== "undefined") {
-      return localStorage.getItem("akropolys_user_phone") || "";
-    }
-    return "";
-  });
-  const [paymentPhase, setPaymentPhase] = (0, import_react5.useState)("idle");
-  const [memoryKey, setMemoryKey] = (0, import_react5.useState)(null);
+  const [keyInput, setKeyInput] = (0, import_react5.useState)("");
+  const [keyPhase, setKeyPhase] = (0, import_react5.useState)("idle");
+  const [mintedKey, setMintedKey] = (0, import_react5.useState)(null);
+  const [keyCountdown, setKeyCountdown] = (0, import_react5.useState)(KIKU_KEY_REVEAL_SECONDS);
+  const [minting, setMinting] = (0, import_react5.useState)(false);
+  const [showKikuPicker, setShowKikuPicker] = (0, import_react5.useState)(false);
+  const [showAtPicker, setShowAtPicker] = (0, import_react5.useState)(false);
   const [sessions, setSessions] = (0, import_react5.useState)(() => loadSessions());
   const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
   const [replayMessages, setReplayMessages] = (0, import_react5.useState)(null);
   (0, import_react5.useEffect)(() => {
     if (!lastAction) return;
-    if (lastAction.type === "request_phone") {
-      setPaymentPhase("prompt_phone");
+    if (lastAction.type === "request_kiku_key") {
+      setKeyPhase("prompt_key");
     }
   }, [lastAction]);
+  (0, import_react5.useEffect)(() => {
+    if (!mintedKey) return;
+    setKeyCountdown(KIKU_KEY_REVEAL_SECONDS);
+    const t = setInterval(() => {
+      setKeyCountdown((s) => {
+        if (s <= 1) {
+          clearInterval(t);
+          setMintedKey(null);
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(t);
+  }, [mintedKey]);
   const isStringTheme = typeof theme === "string";
   const hskThemeAttr = isStringTheme ? theme : void 0;
   const customStyles = !isStringTheme && theme ? {
@@ -1767,16 +1964,30 @@ function ChatModal({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  const handlePhoneSubmit = async () => {
-    if (!phoneInput.trim()) return;
-    const { phone, word } = parseMemoryKey(phoneInput);
-    if (!phone) return;
-    if (typeof window !== "undefined") localStorage.setItem("akropolys_user_phone", phone);
-    client.setShopperIdentity(phone, word);
-    setMemoryKey(phone + word);
-    setPaymentPhase("idle");
+  const retryLastMessage = async () => {
     const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
-    if (lastUserMsg) await send(lastUserMsg.content);
+    if (lastUserMsg) await handleSend(lastUserMsg.content);
+  };
+  const handleUseExistingKey = async () => {
+    const key = keyInput.trim();
+    if (!key) return;
+    client.setKikuKey(key);
+    setKeyInput("");
+    setKeyPhase("idle");
+    await retryLastMessage();
+  };
+  const handleCreateKey = async () => {
+    if (minting) return;
+    setMinting(true);
+    try {
+      const key = await client.mintKikuKey();
+      setMintedKey(key);
+      setKeyPhase("idle");
+      await retryLastMessage();
+    } catch {
+    } finally {
+      setMinting(false);
+    }
   };
   const msgsContainerRef = (0, import_react5.useRef)(null);
   (0, import_react5.useEffect)(() => {
@@ -1811,7 +2022,7 @@ function ChatModal({
     saveCurrentSession();
     reset();
     setReplayMessages(null);
-    setPaymentPhase("idle");
+    setKeyPhase("idle");
   }, [reset, saveCurrentSession]);
   const handleSourceClick = (src) => {
     setSelectedProduct(src);
@@ -1819,27 +2030,97 @@ function ChatModal({
     const q = `Tell me more about the ${src.name}${src.price ? ` (${src.currency ?? defaultCurrency} ${src.price})` : ""} \u2014 what are its key specs, who is it best for, and is it worth buying?`;
     send(q);
   };
-  const handleSend = async (text, extraAttachments) => {
-    const q = (text ?? input).trim();
-    if (!q || loading) return;
+  const handleSend = async (text, extraAttachments, forcedIntent, captureTargets) => {
+    const raw = (text ?? input).trim();
+    if (!raw || loading) return;
+    const kiku = parseAtKiku(raw);
+    const q = kiku ? kiku.cleanQuery : raw;
+    const resolvedForcedIntent = forcedIntent ?? kiku?.intent;
     setReplayMessages(null);
     setSelectedProduct(null);
+    setShowKikuPicker(false);
+    setShowAtPicker(false);
     setInput("");
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
     const toSend = extraAttachments ?? attachments;
     setAttachments([]);
-    await send(q, void 0, toSend.length > 0 ? toSend : void 0);
+    await send(q, raw, toSend.length > 0 ? toSend : void 0, resolvedForcedIntent, captureTargets);
   };
+  const handleSelectExtension = (ext) => {
+    setInput(ext + " ");
+    setShowAtPicker(false);
+    setShowKikuPicker(true);
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  };
+  const handleKikuCapture = (0, import_react5.useCallback)((product) => {
+    const name = product.name || "";
+    const display = `@kiku capture${name ? " " + name : ""}`;
+    const q = name || "capture current page";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    const toSend = attachments;
+    setAttachments([]);
+    send(q, display, toSend.length > 0 ? toSend : void 0, "capture");
+  }, [attachments, send]);
+  const handleKikuCaptureAll = (0, import_react5.useCallback)((products) => {
+    const targets = products.filter((p) => p.id).map((p) => ({
+      name: p.name || "",
+      url: p.url || "",
+      image: p.image || "",
+      price: p.price ? String(p.price) : "",
+      currency: p.currency || defaultCurrency
+    }));
+    const names = products.map((p) => p.name).filter(Boolean).join(", ");
+    const display = `@kiku capture all (${products.length} items)`;
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send(names || "capture all", display, void 0, "capture_all", targets);
+  }, [defaultCurrency, send]);
+  const handleKikuViewHistory = (0, import_react5.useCallback)(() => {
+    const display = "@kiku what have you saved?";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send("show my saved items", display, void 0, "view_history");
+  }, [send]);
+  const handleKikuDelete = (0, import_react5.useCallback)(() => {
+    const display = "@kiku delete this";
+    setInput("");
+    setReplayMessages(null);
+    setSelectedProduct(null);
+    setAttachments([]);
+    send("delete this", display, void 0, "delete");
+  }, [send]);
   const handleKeyDown = (e) => {
+    if (e.key === "Escape" && showKikuPicker) {
+      e.preventDefault();
+      setShowKikuPicker(false);
+      return;
+    }
+    if (e.key === "Escape" && showAtPicker) {
+      e.preventDefault();
+      setShowAtPicker(false);
+      return;
+    }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
   const handleInput = (e) => {
-    setInput(e.target.value);
+    const val = e.target.value;
+    setInput(val);
+    const trimmed = val.trim();
+    setShowAtPicker(trimmed === "@");
+    setShowKikuPicker(/^@kiku\b/i.test(trimmed));
     const t = e.target;
     t.style.height = "auto";
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
@@ -1976,7 +2257,10 @@ function ChatModal({
               const displayContent = !isUser && isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages ? stripMarkdownTables(msg.content) : msg.content;
               return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-msg", children: [
                 msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
-                msg.content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content })
+                msg.content && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-bubble", children: [
+                  /^@kiku\b/i.test(msg.content) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-kiku-badge", children: "@kiku" }),
+                  msg.content
+                ] })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-body", children: [
@@ -1991,7 +2275,7 @@ function ChatModal({
                     ] });
                   })(),
                   isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
-                  isLast && referencedIds.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  isLast && referencedIds.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_kiku_key" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && lastAction?.type !== "capture" && lastAction?.type !== "delete" && lastAction?.type !== "view_history" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     SourcesCarousel,
                     {
                       sources,
@@ -2064,44 +2348,71 @@ function ChatModal({
               ] })
             ] }),
             error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
-            !replayMessages && paymentPhase === "prompt_phone" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+            !replayMessages && keyPhase === "prompt_key" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-phone-form", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "hsk-cb-phone-label", children: "Your phone number \u2014 or paste your memory key" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "hsk-cb-phone-label", children: "Paste your kiku key \u2014 or create one" }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
                     type: "text",
                     className: "hsk-cb-phone-input",
-                    placeholder: "0712345678  or  0712345678flyingthunder",
-                    value: phoneInput,
-                    onChange: (e) => setPhoneInput(e.target.value.replace(/[^0-9a-zA-Z]/g, "")),
-                    onKeyDown: (e) => e.key === "Enter" && handlePhoneSubmit(),
+                    placeholder: "kiku_\u2026",
+                    value: keyInput,
+                    onChange: (e) => setKeyInput(e.target.value),
+                    onKeyDown: (e) => e.key === "Enter" && handleUseExistingKey(),
                     autoFocus: true
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Save & sync my items" })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleUseExistingKey, disabled: !keyInput.trim(), children: "Use my key" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handleCreateKey, disabled: minting, children: minting ? "Creating\u2026" : "I'm new \u2014 create my key" })
+                ] })
               ] }) }) })
             ] }),
-            !replayMessages && memoryKey && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+            !replayMessages && mintedKey && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "10px 12px", border: "1px solid var(--hsk-border, #e5e5e5)", borderRadius: 8 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "\u{1F511} Your memory key" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: memoryKey }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "\u{1F511} Your kiku key \u2014 shown only once" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { style: { display: "block", fontSize: 14, fontWeight: 700, marginBottom: 6, wordBreak: "break-all" }, children: mintedKey }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", style: { padding: "4px 10px" }, onClick: () => {
                     try {
-                      navigator.clipboard?.writeText(memoryKey);
+                      navigator.clipboard?.writeText(mintedKey);
                     } catch {
                     }
                   }, children: "Copy" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 11, opacity: 0.7 }, children: "Save it \u2014 enter it on any site to get your items back." })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: 11, opacity: 0.7 }, children: [
+                    "Disappears in ",
+                    keyCountdown,
+                    "s. Save it like a password \u2014 if lost, the memory it opens is lost with it."
+                  ] })
                 ] })
               ] }) }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef, style: { height: 1 } })
           ] }),
           !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
+            showAtPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              AtPickerMenu,
+              {
+                onSelect: handleSelectExtension,
+                onDismiss: () => setShowAtPicker(false)
+              }
+            ),
+            showKikuPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              KikuPickerMenu,
+              {
+                sources,
+                referencedIds,
+                defaultCurrency,
+                onCapture: handleKikuCapture,
+                onCaptureAll: handleKikuCaptureAll,
+                onViewHistory: handleKikuViewHistory,
+                onDelete: handleKikuDelete,
+                onDismiss: () => setShowKikuPicker(false)
+              }
+            ),
             attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-img-strip", children: attachments.map((att, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-img-thumb-wrap", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: att.data, alt: `attachment ${i + 1}`, className: "hsk-cb-img-thumb" }),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2200,6 +2511,7 @@ function KikuButton({
   theme,
   classNames = {},
   enableVoice = false,
+  voiceLang,
   enableVision = false,
   visionCategoryHint
 }) {
@@ -2269,6 +2581,7 @@ function KikuButton({
           theme,
           classNames,
           enableVoice,
+          voiceLang,
           enableVision,
           visionCategoryHint
         }