blume 0.5.4 → 0.6.0

package/src/components/islands/ask-ai.tsx

@@ -1,22 +1,57 @@
-import { useEffect, useState } from "react";
-import type { FormEvent } from "react";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { useEffect, useRef, useState } from "react";
+import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
+import { createPortal } from "react-dom";
 
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { joinBase, stripBase } from "./base-path.ts";
 
 interface ChatMessage {
-  id: number;
-  role: "user" | "assistant";
   content: string;
+  id: number;
+  role: "assistant" | "user";
+}
+
+/** A resolved empty-state prompt; `icon` is ready-to-inline SVG (or null). */
+interface Suggestion {
+  icon: string | null;
+  label: string;
 }
 
+/**
+ * The panel's chrome glyphs, resolved server-side in `AskAI.astro` and passed in
+ * as ready-to-inline Lucide bodies so this client island ships no icon data.
+ */
+interface AskIcons {
+  arrowUp: string;
+  chat: string;
+  clear: string;
+  close: string;
+  copy: string;
+}
+
+// Empty bodies so the island still renders (iconless) if instantiated without
+// the Astro wrapper that resolves the real Lucide glyphs.
+const EMPTY_ICONS: AskIcons = {
+  arrowUp: "",
+  chat: "",
+  clear: "",
+  close: "",
+  copy: "",
+};
+
 // English fallback so the island renders even if no dictionary is passed.
 const DEFAULT_ASK: UIStrings["ask"] = {
+  clear: "Clear conversation",
+  close: "Close",
+  copy: "Copy conversation",
   empty: "Ask a question about the docs.",
   error: "Sorry, something went wrong.",
   label: "Ask a question",
   placeholder: "Ask a question…",
   send: "Send",
+  tip: "Tip: You can open and close chat with",
   title: "Ask AI",
 };
 
@@ -34,20 +69,69 @@ const ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 const currentPath = (): string =>
   stripBase(import.meta.env.BASE_URL, window.location.pathname);
 
-const BUTTON_CLASS =
-  "inline-flex h-9 cursor-pointer items-center gap-2 rounded-blume border border-border bg-muted px-2.5 text-muted-foreground text-sm hover:border-accent disabled:opacity-50";
+// GitHub-flavored markdown with soft line breaks, matching how the docs read.
+marked.setOptions({ breaks: true, gfm: true });
+
+const renderMarkdown = (content: string): string =>
+  DOMPurify.sanitize(marked.parse(content, { async: false }));
+
+const Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (
+  <svg
+    aria-hidden="true"
+    dangerouslySetInnerHTML={{ __html: path }}
+    fill="none"
+    height={size}
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+  />
+);
+
+// Stable empty default so an unset `suggestions` prop doesn't re-render.
+const EMPTY_SUGGESTIONS: Suggestion[] = [];
 
-const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
+// Ghost icon button, matching the header's theme toggle and repo link.
+const TRIGGER_CLASS =
+  "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+const ICON_BUTTON_CLASS =
+  "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-blume text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+
+// The assistant answer: standard prose, but citation links (every `[Title](/route)`
+// the model emits) render as small neutral pills so they read as sources instead
+// of inline text links. `no-underline`/color use `!` to beat the theme's unlayered
+// `.prose a` rule; `leading-none` drops the inherited prose line-height so the
+// pill hugs its label.
+const ANSWER_CLASS =
+  "prose prose-sm max-w-none text-foreground [&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-full [&_a]:bg-muted [&_a]:px-2 [&_a]:py-1 [&_a]:align-middle [&_a]:font-medium [&_a]:text-[0.7rem] [&_a]:leading-none [&_a]:text-muted-foreground! [&_a]:no-underline! [&_a:hover]:text-foreground!";
+
+const AskAI = ({
+  icons = EMPTY_ICONS,
+  strings,
+  suggestions = EMPTY_SUGGESTIONS,
+}: {
+  icons?: AskIcons;
+  strings?: UIStrings["ask"];
+  suggestions?: Suggestion[];
+}) => {
   const t = strings ?? DEFAULT_ASK;
+  const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [busy, setBusy] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Portal target (document.body) only exists after mount; guards SSR.
+  useEffect(() => setMounted(true), []);
 
+  // The search modal forwards its query so "Ask AI: <query>" carries straight in.
   useEffect(() => {
     const handler = (event: Event) => {
-      // The search modal forwards the typed query so "Ask AI: <query>" carries
-      // straight into the chat input.
       const query = (event as CustomEvent<{ query?: string }>).detail?.query;
       if (query) {
         setInput(query);
@@ -58,9 +142,40 @@ const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
     return () => window.removeEventListener("blume:open-ask-ai", handler);
   }, []);
 
-  const send = async (event: FormEvent) => {
-    event.preventDefault();
-    const question = input.trim();
+  // ⌘I / Ctrl+I toggles the panel; Escape closes it.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "i") {
+        event.preventDefault();
+        setOpen((value) => !value);
+      } else if (event.key === "Escape" && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  // Drive the desktop content push from a body attribute (see AskAI.astro CSS).
+  useEffect(() => {
+    if (open) {
+      document.body.dataset.blumeAsk = "open";
+      inputRef.current?.focus();
+    } else {
+      delete document.body.dataset.blumeAsk;
+    }
+    return () => {
+      delete document.body.dataset.blumeAsk;
+    };
+  }, [open]);
+
+  // Keep the newest message in view as it streams in.
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [messages]);
+
+  const runQuestion = async (raw: string) => {
+    const question = raw.trim();
     if (!question || busy) {
       return;
     }
@@ -114,52 +229,173 @@ const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
     }
   };
 
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    void runQuestion(input);
+  };
+
+  const onInputKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void runQuestion(input);
+    }
+  };
+
+  const copyConversation = () => {
+    const text = messages
+      .map((m) => `${m.role === "user" ? "You" : "AI"}: ${m.content}`)
+      .join("\n\n");
+    void navigator.clipboard?.writeText(text);
+  };
+
+  const hasMessages = messages.length > 0;
+
+  const panel = (
+    <aside
+      aria-hidden={open ? undefined : "true"}
+      aria-label={t.title}
+      className={`fixed inset-y-0 end-0 z-[60] flex w-[var(--blume-ask-width)] flex-col border-border border-s bg-background shadow-2xl transition-transform duration-200 ease-out ${
+        open ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"
+      }`}
+    >
+      <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-border border-b px-4">
+        <span className="font-semibold text-foreground">{t.title}</span>
+        <div className="flex items-center gap-0.5">
+          <button
+            aria-label={t.copy}
+            className={ICON_BUTTON_CLASS}
+            disabled={!hasMessages}
+            onClick={copyConversation}
+            title={t.copy}
+            type="button"
+          >
+            <Glyph path={icons.copy} />
+          </button>
+          <button
+            aria-label={t.clear}
+            className={ICON_BUTTON_CLASS}
+            disabled={!hasMessages}
+            onClick={() => setMessages([])}
+            title={t.clear}
+            type="button"
+          >
+            <Glyph path={icons.clear} />
+          </button>
+          <button
+            aria-label={t.close}
+            className={ICON_BUTTON_CLASS}
+            onClick={() => setOpen(false)}
+            title={t.close}
+            type="button"
+          >
+            <Glyph path={icons.close} size={18} />
+          </button>
+        </div>
+      </header>
+
+      <div className="flex flex-1 flex-col overflow-y-auto" ref={scrollRef}>
+        {hasMessages ? (
+          <div className="flex flex-col gap-4 p-4">
+            {messages.map((message) =>
+              message.role === "user" ? (
+                <div
+                  className="max-w-[85%] self-end whitespace-pre-wrap rounded-blume bg-muted px-3 py-2 text-foreground text-sm"
+                  key={message.id}
+                >
+                  {message.content}
+                </div>
+              ) : (
+                <div className={ANSWER_CLASS} key={message.id}>
+                  {message.content ? (
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized above
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: renderMarkdown(message.content),
+                      }}
+                    />
+                  ) : (
+                    <span className="animate-pulse text-muted-foreground">
+                      …
+                    </span>
+                  )}
+                </div>
+              )
+            )}
+          </div>
+        ) : (
+          <div className="mt-auto flex flex-col gap-0.5 p-4">
+            {suggestions.length === 0 && (
+              <p className="px-2 text-muted-foreground text-sm">{t.empty}</p>
+            )}
+            {suggestions.map((suggestion) => (
+              <button
+                className="flex cursor-pointer items-center gap-2.5 rounded-blume px-2 py-2 text-start text-foreground text-sm transition-colors hover:bg-muted"
+                key={suggestion.label}
+                onClick={() => runQuestion(suggestion.label)}
+                type="button"
+              >
+                {suggestion.icon && (
+                  <span
+                    className="shrink-0 text-muted-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]"
+                    dangerouslySetInnerHTML={{ __html: suggestion.icon }}
+                  />
+                )}
+                <span>{suggestion.label}</span>
+              </button>
+            ))}
+            <p className="mt-3 flex items-center gap-1.5 px-2 text-muted-foreground text-sm">
+              {t.tip}
+              <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
+                ⌘
+              </kbd>
+              <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
+                I
+              </kbd>
+            </p>
+          </div>
+        )}
+      </div>
+
+      <form
+        className="relative shrink-0 border-border border-t"
+        onSubmit={onSubmit}
+      >
+        <textarea
+          aria-label={t.label}
+          className="max-h-48 min-h-[5rem] w-full resize-none bg-transparent px-4 py-3.5 pe-14 text-foreground text-sm outline-none placeholder:text-muted-foreground"
+          onChange={(event) => setInput(event.target.value)}
+          onKeyDown={onInputKeyDown}
+          placeholder={t.placeholder}
+          ref={inputRef}
+          rows={3}
+          value={input}
+        />
+        <button
+          aria-label={t.send}
+          className="absolute end-3 bottom-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-blume bg-foreground text-background transition-opacity disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={busy || input.trim().length === 0}
+          type="submit"
+        >
+          <Glyph path={icons.arrowUp} />
+        </button>
+      </form>
+    </aside>
+  );
+
   return (
-    <div className="relative">
+    <>
       <button
-        className={BUTTON_CLASS}
-        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-label={t.title}
+        className={TRIGGER_CLASS}
+        onClick={() => setOpen((value) => !value)}
+        title={t.title}
         type="button"
       >
-        {t.title}
+        <Glyph path={icons.chat} size={18} />
       </button>
-      {open && (
-        <div className="absolute top-[calc(100%+0.5rem)] end-0 z-50 flex max-h-[70vh] w-[min(24rem,90vw)] flex-col overflow-hidden rounded-blume border border-border bg-background shadow-xl">
-          <div className="flex flex-1 flex-col gap-2.5 overflow-y-auto p-3.5">
-            {messages.length === 0 && (
-              <p className="m-0 text-muted-foreground text-sm">{t.empty}</p>
-            )}
-            {messages.map((message) => (
-              <div
-                className={`whitespace-pre-wrap rounded-blume px-2.5 py-2 text-sm ${
-                  message.role === "user"
-                    ? "self-end bg-accent/15"
-                    : "self-start bg-muted"
-                }`}
-                key={message.id}
-              >
-                {message.content}
-              </div>
-            ))}
-          </div>
-          <form
-            className="flex gap-2 border-border border-t p-2.5"
-            onSubmit={send}
-          >
-            <input
-              aria-label={t.label}
-              className="flex-1 rounded-blume border border-border bg-transparent px-2.5 py-1.5 text-sm"
-              onChange={(event) => setInput(event.target.value)}
-              placeholder={t.placeholder}
-              value={input}
-            />
-            <button className={BUTTON_CLASS} disabled={busy} type="submit">
-              {t.send}
-            </button>
-          </form>
-        </div>
-      )}
-    </div>
+      {mounted && createPortal(panel, document.body)}
+    </>
   );
 };
 

package/src/components/layout/Header.astro

@@ -140,7 +140,6 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
     )
   }
   <div class="flex-1"></div>
-  <slot name="ask" />
   {
     localeSwitch && localeSwitch.length > 1 && (
       <LanguageSwitcher
@@ -191,6 +190,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       <span class="inline-flex dark:hidden"><Icon name="sun" size={18} /></span>
       <span class="hidden dark:inline-flex"><Icon name="moon" size={18} /></span>
     </button>
+    <slot name="ask" />
   </div>
 </header>
 <script is:inline set:html={clickScript} />

package/src/components/layout/NavTree.astro

@@ -151,7 +151,7 @@ const initialId =
       ))}
     </blume-nav>
   ) : (
-    <ul class="m-0 list-none p-0">
+    <ul class="m-0 list-none space-y-px p-0">
       {items.map((item, index) => {
         if (item.kind === "page") {
           return (

package/src/components/layout/PageActions.astro

@@ -7,7 +7,6 @@ import Icon from "../Icon.astro";
 interface Props {
   route: string;
   editUrl?: string | null;
-  askEnabled?: boolean;
   /** Show the "Export to PDF" action (native browser print). */
   exportPdf?: boolean;
   /** Show the "Export to EPUB" action (client-side, current page). */
@@ -20,17 +19,11 @@ interface Props {
   strings?: UIStrings["actions"];
 }
 
-const {
-  route,
-  editUrl,
-  askEnabled,
-  exportPdf,
-  exportEpub,
-  mcpUrl,
-  mcpName,
-  strings,
-} = Astro.props;
-const a = strings ?? EN_UI.actions;
+const { route, editUrl, exportPdf, exportEpub, mcpUrl, mcpName, strings } =
+  Astro.props;
+// Merge over the English defaults so a label missing from a translation (or from
+// a not-yet-regenerated snapshot) still renders instead of coming out blank.
+const a = { ...EN_UI.actions, ...strings };
 const mdPath = route === "/" ? "/index.md" : `${route}.md`;
 
 const GITHUB_LOGO = `<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">${GITHUB_MARK}</svg>`;
@@ -41,6 +34,8 @@ const LOGOS: Record<string, string> = {
     '<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>',
   claude:
     '<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" fill-rule="evenodd" d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"/></svg>',
+  codex:
+    '<svg class="size-4 shrink-0" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z"/></svg>',
   cursor:
     '<svg class="size-4 shrink-0" viewBox="0 0 466.73 532.09" xmlns="http://www.w3.org/2000/svg"><path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" fill="currentColor"/></svg>',
   scira:
@@ -110,7 +105,10 @@ const menuRowClass =
             size={14}
           />
         </summary>
-        <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+        <div
+          class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+          data-blume-menu
+        >
           {exportPdf && (
             <button class={menuRowClass} data-blume-export-pdf type="button">
               <Icon name="file" size={16} />
@@ -130,15 +128,6 @@ const menuRowClass =
     )
   }
 
-  {
-    askEnabled && (
-      <button class={rowClass} data-blume-ask-ai type="button">
-        <Icon name="message-circle" size={16} />
-        {a.askAI}
-      </button>
-    )
-  }
-
   <details class="group relative">
     <summary
       class={`${rowClass} cursor-pointer list-none [&::-webkit-details-marker]:hidden`}
@@ -151,7 +140,10 @@ const menuRowClass =
         size={14}
       />
     </summary>
-    <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+    <div
+      class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+      data-blume-menu
+    >
       {
         PROVIDERS.map((provider, index) => (
           <>
@@ -186,7 +178,10 @@ const menuRowClass =
             size={14}
           />
         </summary>
-        <div class="absolute right-0 left-0 z-50 mt-1 rounded-blume border border-border bg-background p-1 shadow-xl">
+        <div
+          class="absolute top-full right-2 z-50 mt-1 w-max min-w-[14rem] max-w-[22rem] rounded-blume border border-border bg-background p-1 shadow-xl"
+          data-blume-menu
+        >
           <button class={menuRowClass} data-mcp-copy-url type="button">
             <Icon name="link" size={16} />
             <span class="flex-1" data-mcp-url-label>
@@ -199,6 +194,12 @@ const menuRowClass =
               {a.copyClaudeCode}
             </span>
           </button>
+          <button class={menuRowClass} data-mcp-copy-codex type="button">
+            <span set:html={LOGOS.codex} />
+            <span class="flex-1" data-mcp-codex-label>
+              {a.copyCodex}
+            </span>
+          </button>
           <hr class="my-1 border-border border-t" />
           <a class={menuRowClass} data-mcp-cursor rel="noreferrer">
             <span set:html={LOGOS.cursor} />
@@ -276,6 +277,46 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
 
   const root = document.querySelector("[data-blume-page-actions]");
   if (root) {
+    // The action dropdowns are native <details>. Make them behave like a proper
+    // menu: only one open at a time, and flip above the trigger when opening
+    // downward would run past the viewport bottom.
+    const dropdowns = [...root.querySelectorAll<HTMLDetailsElement>("details")];
+    const placeMenu = (details: HTMLDetailsElement) => {
+      const menu = details.querySelector<HTMLElement>("[data-blume-menu]");
+      const summary = details.querySelector("summary");
+      if (!(menu && summary)) {
+        return;
+      }
+      const rect = summary.getBoundingClientRect();
+      const margin = 8;
+      const flipUp =
+        rect.bottom + menu.offsetHeight + margin > window.innerHeight &&
+        rect.top - menu.offsetHeight - margin > 0;
+      menu.classList.toggle("top-full", !flipUp);
+      menu.classList.toggle("mt-1", !flipUp);
+      menu.classList.toggle("bottom-full", flipUp);
+      menu.classList.toggle("mb-1", flipUp);
+    };
+    for (const details of dropdowns) {
+      details.addEventListener("toggle", () => {
+        if (!details.open) {
+          return;
+        }
+        for (const other of dropdowns) {
+          if (other !== details) {
+            other.open = false;
+          }
+        }
+        placeMenu(details);
+      });
+    }
+    window.addEventListener("resize", () => {
+      const open = dropdowns.find((details) => details.open);
+      if (open) {
+        placeMenu(open);
+      }
+    });
+
     const md = root.getAttribute("data-md") ?? "";
     const copiedLabel = root.getAttribute("data-i18n-copied") || "Copied!";
     const absolute = new URL(md, location.origin).href;
@@ -296,12 +337,6 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
         window.scrollTo({ behavior: "smooth", top: 0 })
       );
 
-    root
-      .querySelector("[data-blume-ask-ai]")
-      ?.addEventListener("click", () =>
-        window.dispatchEvent(new CustomEvent("blume:open-ask-ai"))
-      );
-
     const mcpUrl = root.getAttribute("data-mcp-url");
     if (mcpUrl) {
       const rawName = root.getAttribute("data-mcp-name") || "docs";
@@ -360,6 +395,14 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
             root.querySelector("[data-mcp-claude-label]")
           )
         );
+      root
+        .querySelector("[data-mcp-copy-codex]")
+        ?.addEventListener("click", () =>
+          copy(
+            `codex mcp add ${id} --url ${mcpUrl}`,
+            root.querySelector("[data-mcp-codex-label]")
+          )
+        );
     }
 
     const label = root.querySelector("[data-blume-copy-label]");