@useclickly/react 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -499,9 +499,15 @@ async function safeReadText(res) {
     return "";
   }
 }
+var PANEL_W = 284;
+var PANEL_H = 340;
+var PANEL_GAP = 12;
+var VIEWPORT_PAD = 8;
+var TOOLBAR_H = 46;
 function SettingsPopover({ anchor, width, onClose }) {
   const ref = react.useRef(null);
-  const s = useSettings();
+  const [view, setView] = react.useState("main");
+  const [detailMenuOpen, setDetailMenuOpen] = react.useState(false);
   react.useEffect(() => {
     const onDown = (e) => {
       if (ref.current && e.composedPath().includes(ref.current)) return;
@@ -510,95 +516,162 @@ function SettingsPopover({ anchor, width, onClose }) {
     window.addEventListener("pointerdown", onDown, true);
     return () => window.removeEventListener("pointerdown", onDown, true);
   }, [onClose]);
-  const PANEL_H = 330;
-  const top = Math.max(8, anchor.y - PANEL_H - 12);
-  const left = Math.min(window.innerWidth - 300, Math.max(8, anchor.x + width - 284));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "clickly-settings", style: { left, top }, children: [
+  react.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (view !== "main") {
+        e.preventDefault();
+        setView("main");
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [view]);
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  const spaceAbove = anchor.y - VIEWPORT_PAD;
+  const spaceBelow = vh - anchor.y - TOOLBAR_H - VIEWPORT_PAD;
+  const placeAbove = spaceAbove >= PANEL_H + PANEL_GAP || spaceAbove >= spaceBelow;
+  const top = placeAbove ? Math.max(VIEWPORT_PAD, anchor.y - PANEL_H - PANEL_GAP) : Math.min(vh - PANEL_H - VIEWPORT_PAD, anchor.y + TOOLBAR_H + PANEL_GAP);
+  const desiredLeft = anchor.x + width - PANEL_W;
+  const left = Math.min(
+    vw - PANEL_W - VIEWPORT_PAD,
+    Math.max(VIEWPORT_PAD, desiredLeft)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: "clickly-settings",
+      style: { left, top, width: PANEL_W, height: PANEL_H },
+      children: view === "main" ? /* @__PURE__ */ jsxRuntime.jsx(
+        MainView,
+        {
+          onClose,
+          onOpenMcp: () => setView("mcp"),
+          detailMenuOpen,
+          setDetailMenuOpen
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(McpSubView, { onBack: () => setView("main"), onClose })
+    }
+  );
+}
+function MainView({
+  onClose,
+  onOpenMcp,
+  detailMenuOpen,
+  setDetailMenuOpen
+}) {
+  const s = useSettings();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-title", children: "Settings" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { className: "settings-close", onClick: onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-label", htmlFor: "clickly-detail", children: [
-        "Output detail",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "How much metadata is captured" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          id: "clickly-detail",
-          className: "settings-select",
-          value: s.outputDetail,
-          onChange: (e) => s.set({ outputDetail: e.target.value }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "compact", children: "Compact" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "standard", children: "Standard" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "detailed", children: "Detailed" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "forensic", children: "Forensic" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-          "Copy on add",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Auto-copy markdown when annotating" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-scroll", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "How much metadata the markdown output captures.", children: "Output Detail" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-inline-select", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              type: "checkbox",
-              checked: s.copyOnAdd,
-              onChange: (e) => s.set({ copyOnAdd: e.target.checked })
+              type: "button",
+              className: "settings-inline-select-trigger",
+              onClick: () => setDetailMenuOpen((v) => !v),
+              "aria-haspopup": "menu",
+              "aria-expanded": detailMenuOpen,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: labelForDetail(s.outputDetail) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-inline-chev", "aria-hidden": true, children: "\u22EE" })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-          "React components",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Include component tree in output" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          detailMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-inline-menu", role: "menu", children: ["compact", "standard", "detailed", "forensic"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              type: "checkbox",
-              checked: s.showReactComponents,
-              onChange: (e) => s.set({ showReactComponents: e.target.checked })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": s.outputDetail === v,
+              className: `settings-inline-menu-item${s.outputDetail === v ? " is-active" : ""}`,
+              onClick: () => {
+                s.set({ outputDetail: v });
+                setDetailMenuOpen(false);
+              },
+              children: labelForDetail(v)
+            },
+            v
+          )) }) : null
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-section", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-        "Marker color",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Color used for annotation pins" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-color-wrap", "aria-label": "Marker color", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "color-swatch", style: { background: s.markerColor } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Auto-copy markdown to the clipboard every time you submit an annotation.", children: "Copy on Add" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          Toggle,
           {
-            type: "color",
-            value: s.markerColor,
-            onChange: (e) => s.set({ markerColor: e.target.value })
+            checked: s.copyOnAdd,
+            onChange: (v) => s.set({ copyOnAdd: v })
           }
         )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-divider" }),
-    /* @__PURE__ */ jsxRuntime.jsx(McpSection, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Include the React component tree (App \u203A Page \u203A Button) in the output.", children: "React Components" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Toggle,
+          {
+            checked: s.showReactComponents,
+            onChange: (v) => s.set({ showReactComponents: v })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-compact settings-row-stacked", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { hint: "Color used for the floating annotation pins on the page.", children: "Marker Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-color-presets", role: "radiogroup", "aria-label": "Marker color", children: [
+          MARKER_PRESETS.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": s.markerColor.toLowerCase() === color.toLowerCase(),
+              className: `settings-color-preset${s.markerColor.toLowerCase() === color.toLowerCase() ? " is-active" : ""}`,
+              style: { "--preset": color },
+              onClick: () => s.set({ markerColor: color }),
+              title: color,
+              "aria-label": `Use color ${color}`
+            },
+            color
+          )),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "settings-color-preset is-custom", title: "Custom color", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "color",
+                value: s.markerColor,
+                onChange: (e) => s.set({ markerColor: e.target.value }),
+                "aria-label": "Pick a custom marker color"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-color-custom-glyph", children: "+" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "settings-disclosure",
+          onClick: onOpenMcp,
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-disclosure-label", children: "Manage MCP & Webhooks" }),
+            /* @__PURE__ */ jsxRuntime.jsx(McpStatusDot, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-disclosure-chev", "aria-hidden": true, children: "\u203A" })
+          ]
+        }
+      )
+    ] })
   ] });
 }
-function McpSection() {
+function McpSubView({ onBack, onClose }) {
   const s = useSettings();
   const status = useMcpStatus((m) => m.status);
   const lastError = useMcpStatus((m) => m.lastError);
@@ -611,64 +684,177 @@ function McpSection() {
     error: { label: "Error", modifier: "is-error" }
   };
   const meta = statusMeta[status];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-section", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label", children: [
-        "MCP sync",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-hint", children: "Push annotations to a running mcp-server so the agent reads them live" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: s.mcpEnabled,
-            onChange: (e) => s.set({ mcpEnabled: e.target.checked })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row", style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "settings-row-label", style: { flex: "0 0 auto", minWidth: 72 }, children: "Endpoint" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          className: "settings-input",
-          value: s.mcpEndpoint,
-          onChange: (e) => s.set({ mcpEndpoint: e.target.value }),
-          placeholder: "http://localhost:4747",
-          disabled: !s.mcpEnabled,
-          spellCheck: false
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `settings-mcp-status ${meta.modifier}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-dot", "aria-hidden": true }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", children: meta.label }),
-      status === "connected" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mcp-status-detail", children: [
-        serverVersion ? `v${serverVersion}` : "",
-        lastPingAt ? ` \xB7 pinged ${formatRelative(Date.now() - lastPingAt)} ago` : ""
-      ] }),
-      status === "error" && lastError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-detail mcp-status-error", children: lastError }) : null
-    ] }),
-    status === "connected" && s.mcpSessionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-mcp-session", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", style: { opacity: 0.7 }, children: "Session" }),
-      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mcp-session-id", children: s.mcpSessionId }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-header settings-subview-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: "mcp-session-reset",
-          onClick: () => s.set({ mcpSessionId: null }),
-          title: "Start a fresh session on the next ping",
-          children: "Reset"
+          className: "settings-back",
+          onClick: onBack,
+          "aria-label": "Back to settings",
+          title: "Back (Esc)",
+          children: "\u2039"
         }
-      )
-    ] }) : null
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-title", children: "Manage MCP & Webhooks" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "settings-close", onClick: onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsxRuntime.jsx(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-scroll", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-section-title", children: "MCP Connection" }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: "Lets a running mcp-server bridge annotations to your AI agent. Requires the @useclickly/mcp-server CLI running on your machine." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Toggle,
+            {
+              checked: s.mcpEnabled,
+              onChange: (v) => s.set({ mcpEnabled: v })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "settings-subview-desc", children: [
+          "MCP connection allows agents to receive and act on annotations.",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "https://www.useclickly.com/docs/mcp",
+              target: "_blank",
+              rel: "noreferrer",
+              className: "settings-subview-link",
+              children: "Learn more"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "settings-subview-field-label", htmlFor: "clickly-mcp-endpoint", children: "Endpoint" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "clickly-mcp-endpoint",
+              type: "text",
+              className: "settings-input",
+              value: s.mcpEndpoint,
+              onChange: (e) => s.set({ mcpEndpoint: e.target.value }),
+              placeholder: "http://localhost:4747",
+              disabled: !s.mcpEnabled,
+              spellCheck: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `settings-mcp-status ${meta.modifier}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-dot", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", children: meta.label }),
+          status === "connected" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mcp-status-detail", children: [
+            serverVersion ? `v${serverVersion}` : "",
+            lastPingAt ? ` \xB7 pinged ${formatRelative(Date.now() - lastPingAt)} ago` : ""
+          ] }),
+          status === "error" && lastError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-detail mcp-status-error", children: lastError }) : null
+        ] }),
+        status === "connected" && s.mcpSessionId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-mcp-session", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-status-label", style: { opacity: 0.7 }, children: "Session" }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mcp-session-id", children: s.mcpSessionId }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "mcp-session-reset",
+              onClick: () => s.set({ mcpSessionId: null }),
+              title: "Start a fresh session on the next ping",
+              children: "Reset"
+            }
+          )
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section is-dim", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-subview-section-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-section-title", children: "Webhooks" }),
+          /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: "Forward annotation events to your own server. Not yet available \u2014 open an issue if you want this." }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-subview-badge", children: "Soon" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "settings-subview-desc", children: "The webhook URL will receive live annotation changes." }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            className: "settings-input settings-subview-textarea",
+            placeholder: "Webhook URL",
+            disabled: true,
+            rows: 2
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function RowLabel({ children, hint }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "settings-row-label-compact", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx(InfoTip, { children: hint }) : null
   ] });
 }
+function InfoTip({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "settings-infotip", tabIndex: 0, "aria-label": "More info", children: [
+    "?",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "settings-infotip-bubble", role: "tooltip", children })
+  ] });
+}
+function Toggle({
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "clickly-toggle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "toggle-track" })
+  ] });
+}
+function McpStatusDot() {
+  const s = useSettings();
+  const status = useMcpStatus((m) => m.status);
+  if (!s.mcpEnabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `settings-mcp-mini-dot is-${status}`,
+      "aria-label": `MCP sync: ${status}`
+    }
+  );
+}
+function labelForDetail(d) {
+  switch (d) {
+    case "compact":
+      return "Compact";
+    case "standard":
+      return "Standard";
+    case "detailed":
+      return "Detailed";
+    case "forensic":
+      return "Forensic";
+  }
+}
+var MARKER_PRESETS = [
+  "#6366f1",
+  // indigo
+  "#0ea5e9",
+  // sky
+  "#06b6d4",
+  // cyan (current default)
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#f97316",
+  // orange
+  "#ef4444"
+  // red
+];
 function formatRelative(ms) {
   if (ms < 1500) return "just now";
   const s = Math.round(ms / 1e3);
@@ -4427,8 +4613,12 @@ var REACT_UI_CSS = `
 /* \u2500\u2500\u2500 Settings panel (redesigned) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .clickly-settings {
+  /* Fixed-size frame. Width/height are also set inline by SettingsPopover
+     so the values stay in one place (TS source of truth). The flex
+     column splits: header (fixed) on top, scroll body underneath. */
   position: fixed;
-  width: 284px;
+  display: flex;
+  flex-direction: column;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 16px 48px rgba(2,6,23,0.20), 0 0 0 1px rgba(15,23,42,0.07);
@@ -4440,12 +4630,48 @@ var REACT_UI_CSS = `
   overflow: hidden;
 }
 
+/* Scrollable body \u2014 wraps everything below the header. Header stays
+   pinned; this region grows to fill the remaining height of the
+   fixed-size .clickly-settings frame and scrolls internally when
+   content overflows.
+
+   The overscroll-behavior:contain rule prevents wheel/touch scroll from
+   bubbling into the host page once you reach the top/bottom of the
+   panel \u2014 without this, scrolling past the end would scroll the user's
+   actual app underneath, which is jarring. */
+.settings-scroll {
+  flex: 1 1 auto;
+  min-height: 0; /* required for flex children to allow overflow */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* Thin scrollbar in both light + dark themes */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15,23,42,0.20) transparent;
+}
+.settings-scroll::-webkit-scrollbar { width: 6px; }
+.settings-scroll::-webkit-scrollbar-thumb {
+  background: rgba(15,23,42,0.18);
+  border-radius: 3px;
+}
+.settings-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); }
+:host([data-clickly-theme="dark"]) .settings-scroll {
+  scrollbar-color: rgba(255,255,255,0.18) transparent;
+}
+:host([data-clickly-theme="dark"]) .settings-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.18);
+}
+:host([data-clickly-theme="dark"]) .settings-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.32);
+}
+
 .settings-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 14px 12px;
   border-bottom: 1px solid #f1f5f9;
+  /* Header never shrinks \u2014 body scrolls instead */
+  flex-shrink: 0;
 }
 
 .settings-title {
@@ -4540,6 +4766,415 @@ var REACT_UI_CSS = `
   min-width: 0;
 }
 
+/* \u2500\u2500\u2500 Dense Agentation-style rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * One row per setting, single-line label on the left, control on the
+ * right. Hints move into (?) hover tooltips so the row stays compact.
+ * Used by the refactored SettingsPopover.
+ */
+
+.settings-row-compact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-top: 1px solid #f1f5f9;
+}
+.settings-row-compact:first-of-type { border-top: none; }
+.settings-row-compact.settings-row-stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.settings-row-label-compact {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  min-width: 0;
+}
+
+/* Info tooltip \u2014 small (?) circle + hover bubble */
+.settings-infotip {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  color: #64748b;
+  font: 600 9px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  cursor: help;
+  position: relative;
+  flex-shrink: 0;
+  user-select: none;
+  outline: none;
+}
+.settings-infotip:hover,
+.settings-infotip:focus-visible {
+  background: #cbd5e1;
+  color: #1e293b;
+}
+.settings-infotip-bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(15, 23, 42, 0.98);
+  color: #f1f5f9;
+  font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  padding: 6px 10px;
+  border-radius: 6px;
+  width: max-content;
+  max-width: 220px;
+  white-space: normal;
+  text-align: left;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 100ms ease 150ms;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
+  z-index: 10;
+}
+.settings-infotip-bubble::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(15,23,42,0.98);
+}
+.settings-infotip:hover .settings-infotip-bubble,
+.settings-infotip:focus-visible .settings-infotip-bubble { opacity: 1; }
+
+/* Inline-value selector (Output Detail) */
+.settings-inline-select { position: relative; }
+.settings-inline-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: 13px;
+  color: #475569;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+  transition: background 100ms, color 100ms;
+}
+.settings-inline-select-trigger:hover { background: #f1f5f9; color: #0f172a; }
+.settings-inline-chev {
+  font-size: 14px;
+  line-height: 1;
+  color: #94a3b8;
+  transform: rotate(0deg);
+}
+.settings-inline-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  min-width: 140px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(2,6,23,0.22), 0 0 0 1px rgba(15,23,42,0.06);
+  padding: 4px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  animation: clickly-fade-in 80ms ease;
+}
+.settings-inline-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: 13px;
+  color: #1e293b;
+  cursor: pointer;
+  padding: 7px 10px;
+  border-radius: 6px;
+  text-align: left;
+  transition: background 100ms, color 100ms;
+}
+.settings-inline-menu-item:hover { background: #f1f5f9; }
+.settings-inline-menu-item.is-active {
+  background: rgba(14,165,233,0.10);
+  color: #0284c7;
+  font-weight: 600;
+}
+
+/* Marker color preset circles */
+.settings-color-presets {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.settings-color-preset {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--preset, #94a3b8);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 100ms ease;
+  box-shadow:
+    0 0 0 1.5px rgba(15,23,42,0.06),
+    0 1px 2px rgba(15,23,42,0.10);
+}
+.settings-color-preset:hover { transform: scale(1.08); }
+.settings-color-preset.is-active {
+  /* Ring around the active preset \u2014 matches Agentation's selected style. */
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 4px currentColor,
+    0 0 0 5px rgba(15,23,42,0.10);
+  color: var(--preset, #0ea5e9);
+}
+.settings-color-preset.is-custom {
+  display: inline-grid;
+  place-items: center;
+  background: #f1f5f9;
+  border: 1.5px dashed #cbd5e1;
+}
+.settings-color-preset.is-custom input[type="color"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+.settings-color-custom-glyph {
+  font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  color: #64748b;
+}
+
+/* MCP disclosure (collapsible footer row) */
+.settings-disclosure {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-top: 1px solid #f1f5f9;
+  padding: 12px 14px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  cursor: pointer;
+  text-align: left;
+  transition: background 100ms ease;
+}
+.settings-disclosure:hover { background: #f8fafc; }
+.settings-disclosure-label { flex: 1; }
+.settings-disclosure-chev {
+  color: #94a3b8;
+  font-size: 16px;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+.settings-disclosure.is-open .settings-disclosure-chev {
+  transform: rotate(90deg);
+}
+
+.settings-mcp-mini-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #94a3b8;
+  flex-shrink: 0;
+}
+.settings-mcp-mini-dot.is-connecting {
+  background: #f59e0b;
+  animation: mcp-dot-pulse 1.2s ease-in-out infinite;
+}
+.settings-mcp-mini-dot.is-connected { background: #10b981; }
+.settings-mcp-mini-dot.is-error { background: #ef4444; }
+
+.settings-mcp-panel {
+  background: rgba(15, 23, 42, 0.02);
+  border-top: 1px solid #f1f5f9;
+  padding: 4px 0 10px;
+}
+
+/* \u2500\u2500\u2500 Sub-view (MCP / Webhooks page swap) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Header gets a back arrow on the left + title centered.
+   Re-uses .settings-header but with a 3-column layout. */
+.settings-header.settings-subview-header {
+  display: grid;
+  grid-template-columns: 24px 1fr 24px;
+  align-items: center;
+  gap: 8px;
+}
+.settings-header.settings-subview-header .settings-title {
+  text-align: center;
+}
+
+.settings-back {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font: 600 18px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 6px;
+  transition: background 100ms, color 100ms;
+}
+.settings-back:hover { background: #f1f5f9; color: #0f172a; }
+
+.settings-subview-section {
+  padding: 14px 16px 16px;
+  border-top: 1px solid #f1f5f9;
+}
+.settings-subview-section:first-of-type { border-top: none; }
+.settings-subview-section.is-dim { opacity: 0.65; }
+
+.settings-subview-section-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.settings-subview-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
+  flex: 1;
+}
+.settings-subview-section-head .clickly-toggle { margin-left: auto; }
+
+.settings-subview-desc {
+  margin: 0 0 12px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: #64748b;
+}
+
+.settings-subview-link {
+  color: #0ea5e9;
+  text-decoration: none;
+  font-weight: 500;
+}
+.settings-subview-link:hover {
+  color: #0284c7;
+  text-decoration: underline;
+}
+
+.settings-subview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.settings-subview-field-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.settings-subview-textarea {
+  resize: none;
+  min-height: 56px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+}
+
+.settings-subview-badge {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #fef3c7;
+  color: #b45309;
+}
+
+:host([data-clickly-theme="dark"]) .settings-back { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-back:hover {
+  background: rgba(255,255,255,0.06);
+  color: #f8fafc;
+}
+:host([data-clickly-theme="dark"]) .settings-subview-section {
+  border-top-color: rgba(255,255,255,0.06);
+}
+:host([data-clickly-theme="dark"]) .settings-subview-section-title { color: #f1f5f9; }
+:host([data-clickly-theme="dark"]) .settings-subview-desc { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-subview-field-label { color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-subview-link { color: #38bdf8; }
+:host([data-clickly-theme="dark"]) .settings-subview-link:hover { color: #7dd3fc; }
+:host([data-clickly-theme="dark"]) .settings-subview-badge {
+  background: rgba(245, 158, 11, 0.18);
+  color: #fbbf24;
+}
+
+/* Dark-mode overrides for the new compact rows */
+:host([data-clickly-theme="dark"]) .settings-row-compact { border-top-color: rgba(255,255,255,0.06); }
+:host([data-clickly-theme="dark"]) .settings-row-label-compact { color: #e2e8f0; }
+:host([data-clickly-theme="dark"]) .settings-infotip { background: rgba(255,255,255,0.10); color: #94a3b8; }
+:host([data-clickly-theme="dark"]) .settings-infotip:hover { background: rgba(255,255,255,0.18); color: #f8fafc; }
+:host([data-clickly-theme="dark"]) .settings-inline-select-trigger { color: #cbd5e1; }
+:host([data-clickly-theme="dark"]) .settings-inline-select-trigger:hover {
+  background: rgba(255,255,255,0.06);
+  color: #f8fafc;
+}
+:host([data-clickly-theme="dark"]) .settings-inline-menu {
+  background: #1e293b;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
+}
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item { color: #e2e8f0; }
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item:hover { background: rgba(255,255,255,0.06); }
+:host([data-clickly-theme="dark"]) .settings-inline-menu-item.is-active {
+  background: rgba(14,165,233,0.20);
+  color: #7dd3fc;
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset {
+  box-shadow:
+    0 0 0 1.5px rgba(255,255,255,0.10),
+    0 1px 2px rgba(0,0,0,0.40);
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset.is-active {
+  box-shadow:
+    0 0 0 2px #0f172a,
+    0 0 0 4px currentColor,
+    0 0 0 5px rgba(255,255,255,0.10);
+}
+:host([data-clickly-theme="dark"]) .settings-color-preset.is-custom {
+  background: rgba(255,255,255,0.05);
+  border-color: rgba(255,255,255,0.20);
+}
+:host([data-clickly-theme="dark"]) .settings-color-custom-glyph { color: #cbd5e1; }
+:host([data-clickly-theme="dark"]) .settings-disclosure {
+  color: #e2e8f0;
+  border-top-color: rgba(255,255,255,0.06);
+}
+:host([data-clickly-theme="dark"]) .settings-disclosure:hover { background: rgba(255,255,255,0.04); }
+:host([data-clickly-theme="dark"]) .settings-mcp-panel {
+  background: rgba(255,255,255,0.02);
+  border-top-color: rgba(255,255,255,0.06);
+}
+
 /* Toggle switch */
 .clickly-toggle {
   position: relative;