@gemboss/ui 0.25.0 → 0.32.0

package/src/assistant/engine-mark-art.ts

@@ -0,0 +1,45 @@
+/**
+ * Each engine's MARK, the artwork only (0.29.0), moved from the admin (apps/admin/src/lib/engine-mark-art.ts, which now
+ * re-exports this file). No JSX and no stylesheet, so a node test and a server module can import it
+ * (`@gemboss/ui/assistant/engine-mark-art`); `EngineMark` (engine-mark.tsx) draws it.
+ *
+ * One shape per engine, never a shared one: a mark that is right for one engine and wrong for the other reads as evidence
+ * while naming the wrong thing.
+ */
+
+/** The Claude asterisk: eight tapered arms from one centre, generated (eight hand-typed arms are eight chances to be off). */
+function claudeAsterisk(): string {
+  const c = 12, root = 1.7, tip = 0.5, len = 9.6;
+  const f = (n: number) => Math.round(n * 100) / 100;
+  const p = (x: number, y: number) => `${f(x)} ${f(y)}`;
+  return Array.from({ length: 8 }, (_, i) => {
+    const a = (i * Math.PI) / 4;
+    const [dx, dy] = [Math.cos(a), Math.sin(a)];
+    const [px, py] = [-dy, dx];
+    return [
+      `M${p(c + px * root, c + py * root)}`,
+      `L${p(c + dx * len + px * tip, c + dy * len + py * tip)}`,
+      `Q${p(c + dx * (len + 0.6), c + dy * (len + 0.6))} ${p(c + dx * len - px * tip, c + dy * len - py * tip)}`,
+      `L${p(c - px * root, c - py * root)}`,
+      "Z",
+    ].join("");
+  }).join(" ");
+}
+
+/** Codex: a hexagonal ring. Not OpenAI's knot (no official asset here; one drawn from memory would be a wrong logo). */
+const CODEX_HEX = "M12 2.6 20.1 7.3V16.7L12 21.4 3.9 16.7V7.3ZM12 6.9 7.6 9.45v5.1L12 17.1l4.4-2.55v-5.1Z";
+
+/** NONZERO: the asterisk's eight subpaths all start at the centre, and under evenodd the overlaps cancel (measured in the
+ *  admin: the centre came back 0/400 inked, a hollow compass rose). */
+export const ENGINE_MARK_FILL_RULE = "nonzero" as const;
+
+export type EngineMarkId = "claude" | "codex";
+export interface EngineMarkArt { path: string; label: string }
+export const ENGINE_MARK_ART: Record<EngineMarkId, EngineMarkArt> = {
+  claude: { path: claudeAsterisk(), label: "Claude Code" },
+  codex: { path: CODEX_HEX, label: "Codex" },
+};
+
+export function isEngineMarkId(v: unknown): v is EngineMarkId {
+  return typeof v === "string" && Object.prototype.hasOwnProperty.call(ENGINE_MARK_ART, v);
+}

package/src/assistant/engine-mark.tsx

@@ -0,0 +1,39 @@
+/**
+ * Each engine's MARK (0.29.0), moved from the admin (apps/admin/src/lib/engine-mark-art.ts + components/chat/EngineMark.tsx).
+ *
+ * Where it shows: on the engine chip when the composer row is too narrow for the name (a name cut to "Clau…" says
+ * nothing; a mark still says whose model answers), and in a narration row that stands for the turn itself.
+ *
+ * One shape per engine, never a shared one: a mark that is right for one engine and wrong for the other reads as evidence
+ * while naming the wrong thing. An engine with no artwork draws NOTHING (silence rather than somebody else's logo), and
+ * the chip then keeps its name.
+ */
+import "../assistant-engine.css"; // the mark's size (`.gemboss-engine-mark`), with the chip that shows it
+import React from "react";
+
+import { ENGINE_MARK_ART, ENGINE_MARK_FILL_RULE, isEngineMarkId } from "./engine-mark-art";
+export { ENGINE_MARK_ART, ENGINE_MARK_FILL_RULE, isEngineMarkId, type EngineMarkArt, type EngineMarkId } from "./engine-mark-art";
+
+
+/** The mark as an image with a NAME (the hover text and the accessible name), or nothing when the engine has no artwork. */
+export function EngineMark({ engine, title, className = "gemboss-engine-mark", decorative = false }: {
+  engine: string;
+  title?: string;
+  className?: string;
+  /** Inside a control that already names the engine (the chip): hidden from assistive tech, no hover title. */
+  decorative?: boolean;
+}) {
+  if (!isEngineMarkId(engine)) return null;
+  const art = ENGINE_MARK_ART[engine];
+  const name = title || art.label;
+  return decorative ? (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <path d={art.path} fillRule={ENGINE_MARK_FILL_RULE} />
+    </svg>
+  ) : (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" role="img" aria-label={name}>
+      <title>{name}</title>
+      <path d={art.path} fillRule={ENGINE_MARK_FILL_RULE} />
+    </svg>
+  );
+}

package/src/assistant/engine.tsx

@@ -28,6 +28,7 @@ import "../assistant-engine.css"; // its own entry (0.25.0): not in gemboss-ui.c
 import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { canFloatMenus, placeFloating } from "../menu-layer";
+import { EngineMark, isEngineMarkId } from "./engine-mark";
 
 const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
 const useBeforePaint = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -47,6 +48,12 @@ export interface EngineChoice {
   badgeTone?: "success" | "warning" | "critical" | "info";
   /** Cannot be picked right now. Say why in `note`. */
   disabled?: boolean;
+  /** The engine's mark ("claude", "codex": `ENGINE_MARK_ART`). The chip shows it in place of the name when the composer row
+   *  is too narrow for the name (`ChatComposer` density "icon"); an engine without one keeps its (cut) name. 0.29.0. */
+  mark?: string;
+  /** THIS engine's models. Give them on every engine and the Engine tab lists each engine with its own models, all at
+   *  once, and one click picks the engine and the model together (`onPick`): the admin's popup. 0.29.0. */
+  models?: readonly Choice[];
 }
 
 export interface Choice {
@@ -139,6 +146,13 @@ export interface EnginePickerProps {
   effortDisabled?: boolean | string;
   /** Quiet lines under the Engine tab's fields: who pays, what this bridge version cannot do yet. */
   notes?: ReactNode;
+  /** With models per engine (`EngineChoice.models`): one click on a model picks both, and closes the panel. Without it the
+   *  picker calls `onEngineChange` (when the engine changes) then `onModelChange`. 0.29.0. */
+  onPick?: (engine: string, model: string) => void;
+  /** A switch that did not go through ("Wait for the current answer to finish"): one red line on the Engine tab. 0.29.0. */
+  problem?: ReactNode;
+  /** The chip itself is disabled (a switch in flight). `locked` keeps the chip and disables the choices. 0.29.0. */
+  disabled?: boolean;
   /** The bridge on the user's machine. Omit for an engine set that runs on the server only: no dot, no Status tab. */
   bridge?: BridgeStatus;
   /** The dot on the chip (default true when `bridge` is given). False when the current engine does not go through the
@@ -157,19 +171,30 @@ export interface EnginePickerProps {
   locked?: boolean;
   /** Align the panel's right edge with the chip's (a chip near the right edge of a narrow frame). */
   end?: boolean;
+  /** The chip button, for the surface (`useEnginePicker` passes its own: `close()` puts focus back on it). 0.32.0. */
+  chipRef?: React.Ref<HTMLButtonElement>;
   labels?: Partial<EnginePickerLabels>;
   className?: string;
 }
 
 /** The open state and tab of one picker, for a surface that also renders a `BridgeNotice`:
- *  `const p = useEnginePicker(); <EnginePicker {...p.props} …/> <BridgeNotice onOpenSetup={() => p.openTab("setup")} …/>` */
+ *  `const p = useEnginePicker(); <EnginePicker {...p.props} …/> <BridgeNotice onOpenSetup={() => p.openTab("setup")} …/>`
+ *
+ *  `close()` (0.32.0) is the surface's close: a button inside the panel that acts and then shuts it (Stop bridge, Remove
+ *  from this machine, before a confirm opens). The button that had focus goes away with the panel, so focus would fall to
+ *  <body> and the confirm would record <body> as where to return; `close()` puts it on the chip first. Every surface
+ *  wrote that by hand (`querySelector(".gb-engine-chip").focus()`: partner-radar, search-radar, gemwatcher #922). An
+ *  outside click still closes without moving focus (`props.onOpenChange(false)`). */
 export function useEnginePicker(initial: EnginePickerTab = "engine") {
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState<EnginePickerTab>(initial);
+  const chipRef = useRef<HTMLButtonElement | null>(null);
   const openTab = useCallback((t: EnginePickerTab) => { setTab(t); setOpen(true); }, []);
   // Closing goes back to Engine: after "Open setup" the next click on the chip is about the engine again (review #3885).
   const onOpenChange = useCallback((v: boolean) => { setOpen(v); if (!v) setTab(initial); }, [initial]);
-  return { open, tab, setOpen, setTab, openTab, props: { open, onOpenChange, tab, onTabChange: setTab } };
+  const focusChip = useCallback(() => { chipRef.current?.focus(); }, []);
+  const close = useCallback(() => { onOpenChange(false); focusChip(); }, [onOpenChange, focusChip]);
+  return { open, tab, setOpen, setTab, openTab, close, focusChip, chipRef, props: { open, onOpenChange, tab, onTabChange: setTab, chipRef } };
 }
 
 function availableTabs(p: Pick<EnginePickerProps, "bridge" | "setup">): EnginePickerTab[] {
@@ -192,8 +217,9 @@ function useTabs(p: Pick<EnginePickerProps, "bridge" | "setup" | "tab" | "onTabC
 
 /** What the chip says out loud: the engine, the model, and the bridge when it is not fine. */
 export function engineChipName(p: Pick<EnginePickerProps, "engines" | "engine" | "models" | "model" | "bridge">, L: EnginePickerLabels = ENGINE_PICKER_EN): string {
-  const eng = p.engines.find((e) => e.id === p.engine)?.label ?? p.engine;
-  const model = p.model ? p.models?.find((m) => m.id === p.model)?.label : undefined;
+  const cur = p.engines.find((e) => e.id === p.engine);
+  const eng = cur?.label ?? p.engine;
+  const model = p.model ? (cur?.models ?? p.models)?.find((m) => m.id === p.model)?.label : undefined;
   const bridge = p.bridge && p.bridge.state !== "running" ? `. ${L.bridge}: ${L[STATE_LABEL[p.bridge.state]]}` : "";
   return `${L.chip}: ${eng}${model ? ` · ${model}` : ""}${bridge}`;
 }
@@ -209,7 +235,13 @@ export function EnginePicker(props: EnginePickerProps) {
   // Decided after mount, so the server and the first client render agree.
   const [portal, setPortal] = useState(false);
   useEffect(() => { setPortal(!canFloatMenus()); }, []);
-  const chipRef = useRef<HTMLButtonElement>(null);
+  const chipRef = useRef<HTMLButtonElement | null>(null);
+  const outerChipRef = props.chipRef;
+  const setChip = useCallback((el: HTMLButtonElement | null) => {
+    chipRef.current = el;
+    if (typeof outerChipRef === "function") outerChipRef(el);
+    else if (outerChipRef) (outerChipRef as { current: HTMLButtonElement | null }).current = el;
+  }, [outerChipRef]);
   const panelRef = useRef<HTMLDivElement>(null);
   const panelId = useId();
 
@@ -242,17 +274,31 @@ export function EnginePicker(props: EnginePickerProps) {
     if (!panel || !chip) return undefined;
     // Escape with focus in the panel or on the chip closes the panel only: captured first and stopped, so the surface's
     // own Escape (hide the assistant) does not fire on the same key. With focus elsewhere (the composer), it closes the
-    // panel and leaves focus and the key alone.
+    // panel and leaves focus alone, and marks the key handled (0.27.0): a surface whose "Escape hides the assistant"
+    // checks `defaultPrevented` waits for the next Escape. Before 0.27.0 the key went on unmarked, and React re-renders
+    // between this listener and the surface's, so every surface (gemlabs #922, gemfeedback #66) needed a window-capture
+    // marker to tell "this Escape closed the picker" from "this one is mine".
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
+      // Not ours: an IME composition (Escape cancels it; the kit's rule, kit-plain.js), or a modal opened from the panel.
+      if (e.isComposing || e.keyCode === 229) return;
       const a = document.activeElement;
-      if (a && (panel.contains(a) || chip.contains(a))) { e.preventDefault(); e.stopPropagation(); closeToChip(); }
+      const modal = a?.closest?.('dialog[open], [aria-modal="true"]');
+      if (modal && !panel.contains(modal)) return;
+      e.preventDefault();
+      if (a && (panel.contains(a) || chip.contains(a))) { e.stopPropagation(); closeToChip(); }
       else setOpen(false);
     };
     const onDown = (e: PointerEvent) => {
       const t = e.target as Node;
       if (!panel.contains(t) && !chip.contains(t)) setOpen(false);
     };
+    // A modal opened from the panel (a confirm behind a Status action) takes the screen: the panel would stay above it in
+    // the top layer, over its buttons (review #3903). Close the panel when focus enters a modal that is not the panel.
+    const onFocusIn = (e: FocusEvent) => {
+      const m = (e.target as Element | null)?.closest?.('dialog[open], [aria-modal="true"]');
+      if (m && !panel.contains(m)) setOpen(false);
+    };
     const replace = () => placeFloating(panel, chip, end);
     // A scroll moves the panel's anchor only when it scrolls something that holds the chip (the page, a frame around the
     // composer): a chat log streaming beside it does not. One placement per frame at most.
@@ -278,12 +324,14 @@ export function EnginePicker(props: EnginePickerProps) {
     if (pane) ro?.observe(pane);
     document.addEventListener("keydown", onKey, true);
     document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("focusin", onFocusIn, true);
     document.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", replace);
     return () => {
       document.removeEventListener("keydown", onKey, true);
       cancelAnimationFrame(frame);
       document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("focusin", onFocusIn, true);
       document.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", replace);
       ro?.disconnect();
@@ -301,16 +349,18 @@ export function EnginePicker(props: EnginePickerProps) {
   }, [open]);
 
   const current = engines.find((e) => e.id === engine);
-  const modelLabel = model ? models?.find((m) => m.id === model)?.label : undefined;
+  const modelLabel = model ? (current?.models ?? models)?.find((m) => m.id === model)?.label : undefined;
+  const mark = current?.mark && isEngineMarkId(current.mark) ? current.mark : null;
   const tone = bridge && props.showBridgeDot !== false ? BRIDGE_TONE[bridge.state] : null;
   const name = engineChipName(props.showBridgeDot === false ? { ...props, bridge: undefined } : props, L);
 
   return (
     <span className={cx("gb-engine", className)}>
       <button
-        ref={chipRef}
+        ref={setChip}
         type="button"
-        className="gb-engine-chip"
+        className={mark ? "gb-engine-chip has-mark" : "gb-engine-chip"}
+        disabled={props.disabled || undefined}
         aria-haspopup="dialog"
         aria-expanded={open}
         aria-controls={panelId}
@@ -323,6 +373,8 @@ export function EnginePicker(props: EnginePickerProps) {
           {current?.label ?? engine}
           {modelLabel ? <span className="gb-engine-chipsub"> · {modelLabel}</span> : null}
         </span>
+        {/* Shown instead of the name when the composer is too narrow for it (assistant-engine.css, ChatComposer density). */}
+        {mark ? <span className="gb-engine-chipmark"><EngineMark engine={mark} decorative /></span> : null}
       </button>
       {(() => { const panelEl = (<div
         ref={panelRef}
@@ -456,8 +508,62 @@ function Options({ label, items, value, onChange, locked, onPicked, disabledReas
   );
 }
 
-function EngineTab({ engines, engine, onEngineChange, models, model, onModelChange, modelControl, efforts, effort, onEffortChange, effortDisabled, notes, locked, L, onPicked }: EnginePickerProps & { L: EnginePickerLabels; onPicked?: () => void }) {
+/** Every engine with its own models, all at once; one click picks both (the admin's popup, 0.29.0). */
+function EngineGroups({ engines, engine, model, onPick, onEngineChange, onModelChange, locked, L, onPicked }: EnginePickerProps & { L: EnginePickerLabels; onPicked?: () => void }) {
   const id = useId();
+  const choose = (e: EngineChoice, m: Choice) => {
+    // The pick already in force: close, change nothing (a surface that starts a new conversation on a switch must not).
+    if (e.id === engine && (model ?? "") === m.id) { onPicked?.(); return; }
+    if (onPick) onPick(e.id, m.id);
+    else { if (e.id !== engine) onEngineChange?.(e.id); onModelChange?.(m.id); }
+    onPicked?.();
+  };
+  const canChoose = Boolean(onPick || onEngineChange || onModelChange);
+  return (
+    <div className="gb-engine-field">
+      <span className="gb-engine-label" id={id}>{L.engine}</span>
+      <div className="gb-engine-groups" role="group" aria-labelledby={id}>
+        {engines.map((e) => {
+          const chosen = e.id === engine;
+          const items = e.models && e.models.length ? e.models : [{ id: "", label: L.defaultChoice }];
+          return (
+            <div key={e.id} className="gb-engine-group" data-current={chosen ? "" : undefined}>
+              <span className="gb-engine-rowhead">
+                <span className="gb-engine-rowname">{e.label}</span>
+                {e.badge ? <span className={e.badgeTone ? BADGE_CLASS[e.badgeTone] : "ui-badge"}>{e.badge}</span> : null}
+              </span>
+              {e.note ? <span className="gb-engine-note">{e.note}</span> : null}
+              <div className="gb-engine-opts" role="group" aria-label={e.label}>
+                {items.map((m) => (
+                  <button key={m.id || "default"} type="button" className="gb-engine-opt" title={m.title}
+                    aria-pressed={chosen && (model ?? "") === m.id}
+                    disabled={locked || e.disabled || !canChoose}
+                    onClick={() => choose(e, m)}>
+                    {m.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function EngineTab(props: EnginePickerProps & { L: EnginePickerLabels; onPicked?: () => void }) {
+  const { engines, engine, onEngineChange, models, model, onModelChange, modelControl, efforts, effort, onEffortChange, effortDisabled, notes, locked, L, onPicked } = props;
+  const id = useId();
+  if (engines.some((e) => e.models && e.models.length)) {
+    return (
+      <>
+        <EngineGroups {...props} />
+        {efforts && efforts.length ? <Options label={L.effort} items={efforts} value={effort} onChange={onEffortChange} locked={locked} onPicked={onPicked} disabledReason={effortDisabled} /> : null}
+        {props.problem ? <p className="gb-engine-problem" role="alert">{props.problem}</p> : null}
+        {notes ? <div className="gb-engine-notes">{notes}</div> : null}
+      </>
+    );
+  }
   // The ARIA radio pattern: one Tab stop (the checked engine, else the first that can be picked); arrows move AND pick.
   const can = (e: EngineChoice) => !(locked || e.disabled || !onEngineChange);
   const stop = engines.find((e) => e.id === engine && can(e))?.id ?? engines.find(can)?.id;
@@ -503,13 +609,14 @@ function EngineTab({ engines, engine, onEngineChange, models, model, onModelChan
         <div className="gb-engine-field"><span className="gb-engine-label">{L.model}</span>{modelControl}</div>
       ) : models && models.length ? <Options label={L.model} items={models} value={model} onChange={onModelChange} locked={locked} onPicked={onPicked} /> : null}
       {efforts && efforts.length ? <Options label={L.effort} items={efforts} value={effort} onChange={onEffortChange} locked={locked} onPicked={onPicked} disabledReason={effortDisabled} /> : null}
+      {props.problem ? <p className="gb-engine-problem" role="alert">{props.problem}</p> : null}
       {notes ? <div className="gb-engine-notes">{notes}</div> : null}
     </>
   );
 }
 
 /** Copies through the async clipboard, else through a selected textarea (an http:// page, an old Safari). */
-async function copyText(text: string): Promise<boolean> {
+export async function copyText(text: string): Promise<boolean> {
   try {
     if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; }
   } catch { /* permission refused: try the old way */ }

package/src/assistant/host.tsx

@@ -39,6 +39,7 @@ export interface AssistantHostLabels {
   close: string; closeBusy: string; closeBusyTitle: string;
   shrinkToPopup: string; tablist: string; primaryTab: string;
   pinSide: string; floatPopup: string; sideGrip: string; backToSide: string;
+  more: string; clearHistory: string;
 }
 const EN: AssistantHostLabels = {
   ready: "Ready", working: "Working", done: "Done — tap to see it",
@@ -52,8 +53,88 @@ const EN: AssistantHostLabels = {
   shrinkToPopup: "Shrink to popup", tablist: "Assistant or a person", primaryTab: "Assistant",
   pinSide: "Pin to the side", floatPopup: "Float as a popup", sideGrip: "Drag to resize the assistant; left and right arrows work too",
   backToSide: "Back to the side panel",
+  more: "More", clearHistory: "Clear history",
 };
 
+/**
+ * One row of the header's ⋯ menu (0.31.0). The fleet's menu row (`ui-menu__item`, shell.css, which every surface with
+ * the shell loads, the admin too). A surface's own rows go in `menuItems`.
+ * It closes the menu and puts focus on ⋯ BEFORE its handler (review #3941): closing after it hid the focused row, so focus
+ * fell to <body>, and a confirm the handler opened (content-radar's Clear history) saved that hidden row as the place to
+ * return to. No `role="menuitem"`: like the kit's Menu, a disclosure of buttons; the menu role promises arrow keys.
+ */
+export function AssistantMenuItem({ danger, disabled, onClick, className, children }: {
+  danger?: boolean;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={["ui-menu__item", danger ? "ui-menu__item--danger" : "", className ?? ""].filter(Boolean).join(" ")}
+      disabled={disabled}
+      onClick={(e) => {
+        const menu = e.currentTarget.closest("details");
+        menu?.removeAttribute("open");
+        menu?.querySelector("summary")?.focus();
+        onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * The header's ⋯ (0.31.0, Chris 08/10/2026: "clear history lên topbar … nhiều icon rồi nên cần gom nhóm"). A `<details>`
+ * like the kit's Menu, but its position and trigger are the host's (assistant.css): the kit's `.ui-menu` rules live in
+ * kit-plain.css, which the admin does not load, while the row (`ui-menu__item`) and the surface
+ * (`gemboss-popover-surface`) are shell.css, which it does. Escape and an outside press close it, the way the engine
+ * picker's popup closes (engine.tsx): Escape with focus inside goes back to ⋯ and is stopped, so the surface's own
+ * "Escape hides the assistant" does not fire on the same key; an Escape meant for a modal elsewhere is left to it. It also
+ * closes when the window loses focus (a click into an iframe), like the kit's plain menus (kit-plain.js initMenus).
+ */
+function HostMenu({ label, trigger = "gb-dock-icon", children }: { label: string; trigger?: string; children: ReactNode }) {
+  const ref = useRef<HTMLDetailsElement>(null);
+  // Listening all the time and asking `el.open`, like the kit's Menu: gating the listeners on an `open` state left the
+  // render between the toggle and the effect unguarded, and a press outside in that window kept the menu open (measured
+  // in the browser test under load).
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      if (!el.open || e.key !== "Escape" || e.defaultPrevented || e.isComposing || e.keyCode === 229) return;
+      const modal = (document.activeElement as Element | null)?.closest?.('dialog[open], [aria-modal="true"]');
+      if (modal && !el.contains(modal)) return;
+      e.preventDefault();
+      if (el.contains(document.activeElement)) { e.stopPropagation(); el.open = false; el.querySelector("summary")?.focus(); }
+      else el.open = false;
+    };
+    const onDown = (e: PointerEvent) => { if (el.open && !el.contains(e.target as Node)) el.open = false; };
+    const onBlur = () => { if (el.open) el.open = false; };
+    window.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, []);
+  return (
+    <details ref={ref} className="gb-dock-menu">
+      <summary className={trigger} title={label} aria-label={label}>
+        <svg viewBox="0 0 20 20" aria-hidden><circle cx="5" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="15" cy="10" r="1.5" fill="currentColor"/></svg>
+      </summary>
+      {/* title="": the popup's header carries "Drag this bar…" as its title, and a browser shows an ancestor's title on
+          any child without one of its own, so every row said it (review #3941). */}
+      <div className="gemboss-popover-surface gb-dock-menu-list" title="">{children}</div>
+    </details>
+  );
+}
+
 /** An optional second tab in the popup (the admin: a person on the Gem team, through gemcare). */
 export interface AssistantSecondTab {
   label: ReactNode;
@@ -88,14 +169,23 @@ function useSideFits(): boolean {
 }
 
 export function AssistantHost({
-  title, labels, onNewChat, onExpand, onShrink, fullActions, secondTab, view = "primary", onViewChange,
-  miniHint, allowSide = true, children,
+  title, labels, onNewChat, onClearHistory, canClearHistory = true, menuItems, onExpand, onShrink, fullActions, secondTab,
+  view = "primary", onViewChange, miniHint, allowSide = true, children,
 }: {
   /** "Gem assistant" in the admin. Names the region, the popup header and the status bar. */
   title: string;
   labels?: Partial<AssistantHostLabels>;
   /** The popup header's ＋. Omit it and the button is not drawn. */
   onNewChat?: () => void;
+  /**
+   * "Clear history" in the ⋯ menu (0.31.0), in the panel's header and in full screen's chrome. The surface confirms (it
+   * knows what is cleared: this browser's chats, an engine's session). Omit it and the row is not drawn.
+   */
+  onClearHistory?: () => void;
+  /** False greys "Clear history" out (nothing to clear). */
+  canClearHistory?: boolean;
+  /** The surface's own rows at the top of the ⋯ menu, as `AssistantMenuItem`s. */
+  menuItems?: ReactNode;
   /** Popup → full screen. The surface decides what that means (the admin navigates to its page). */
   onExpand: () => void;
   /** Full screen → popup, e.g. open the dock and go back to the screen they came from. */
@@ -196,8 +286,8 @@ export function AssistantHost({
     return { min: 8, max: Math.max(8, Math.floor(track - width - 8)) };
   }, []);
   const onHeaderDown = useCallback((e: React.PointerEvent<HTMLElement>) => {
-    // Buttons in the header keep their clicks; only the bare strip drags.
-    if ((e.target as HTMLElement).closest("button")) return;
+    // Buttons in the header keep their clicks — the ⋯ menu's <summary> and its rows too; only the bare strip drags.
+    if ((e.target as HTMLElement).closest("button, summary, .gb-dock-menu")) return;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     setDragging(true);
     slideRef.current = { startX: e.clientX, startOffset: dock.dockOffsetRight, moved: false };
@@ -291,6 +381,11 @@ export function AssistantHost({
   // real ceiling for this window, which changes when the window does.
   const maxDockHeight = clampDockHeight(Number.MAX_SAFE_INTEGER, typeof window === "undefined" ? 900 : window.innerHeight);
   const statusText = dock.busy ? L.working : dock.unread ? L.done : L.ready;
+  // The surface's rows of the ⋯ menu, in the panel's header and in full screen's chrome alike.
+  const clearRow = onClearHistory ? (
+    <AssistantMenuItem danger disabled={!canClearHistory} onClick={onClearHistory}>{L.clearHistory}</AssistantMenuItem>
+  ) : null;
+  const surfaceRows = menuItems || clearRow ? <>{menuItems}{clearRow}</> : null;
   // Full screen is the assistant's own page and has no tab strip; the second tab lives in the popup.
   const secondVisible = isPanel && !!secondTab && view === "secondary";
   const secondBadge = secondTab?.badge || 0;
@@ -305,8 +400,10 @@ export function AssistantHost({
       aria-label={mode === "hidden" ? undefined : title}
     >
       {mode === "full" ? (
-        <div className="gb-dock-fullchrome">
+        // data-gb-dock-chrome: what AssistantChat measures to keep its first line clear of these buttons (0.29.0).
+        <div className="gb-dock-fullchrome" data-gb-dock-chrome="">
           {fullActions}
+          {surfaceRows ? <HostMenu label={L.more} trigger="gb-dock-shrink gb-dock-menu-pill">{surfaceRows}</HostMenu> : null}
           <button type="button" className="gb-dock-shrink" onClick={onShrink}>
             {/* Two arrows pulled INTO the centre. The first attempt drew two corner brackets, which at 16px
                 reads as a plus sign — the opposite of "make this smaller". */}
@@ -405,29 +502,6 @@ export function AssistantHost({
                   <span className="gb-dock-sr">{L.newChat}</span>
                 </button>
               ) : null}
-              {/* On `dock.sideAllowed`, not the prop: it already folds in the window width (SIDE_FITS_QUERY), so the pin
-                  never shows where pressing it would only drop the working shape to "dock" (review #3744). */}
-              {isDock && dock.sideAllowed ? (
-                <button type="button" className="gb-dock-icon gb-dock-action gb-dock-pinside" title={L.pinSide} onClick={dock.openSide}>
-                  {/* A window with its right third filled: the panel it will become. */}
-                  <svg viewBox="0 0 20 20" aria-hidden>
-                    <rect x="3.5" y="4.5" width="13" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.5" fill="none"/>
-                    <path d="M12 4.5v11" stroke="currentColor" strokeWidth="1.5"/>
-                    <path d="M12.75 5.25h3v9.5h-3z" fill="currentColor"/>
-                  </svg>
-                  <span className="gb-dock-sr">{L.pinSide}</span>
-                </button>
-              ) : null}
-              {isSide ? (
-                <button type="button" className="gb-dock-icon gb-dock-action" title={L.floatPopup} onClick={dock.openDock}>
-                  {/* The same window with a small box floating in its bottom-right corner: the popup. */}
-                  <svg viewBox="0 0 20 20" aria-hidden>
-                    <rect x="3.5" y="4.5" width="13" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.5" fill="none"/>
-                    <rect x="10" y="10" width="5" height="4" rx="0.75" fill="currentColor"/>
-                  </svg>
-                  <span className="gb-dock-sr">{L.floatPopup}</span>
-                </button>
-              ) : null}
               <button
                 type="button"
                 className="gb-dock-icon"
@@ -441,10 +515,19 @@ export function AssistantHost({
                 </svg>
                 <span className="gb-dock-sr">{L.openFull}</span>
               </button>
-              <button type="button" className="gb-dock-icon" title={L.minimizeTitle} onClick={dock.minimize}>
-                <svg viewBox="0 0 20 20" aria-hidden><path d="M5 13h10" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>
-                <span className="gb-dock-sr">{L.minimize}</span>
-              </button>
+              {/* ⋯ (0.31.0): what is used once in a while — the surface's rows, Clear history, and the two window controls
+                  that were icons (pin / float, minimise). Four controls stay in sight: ＋, full screen, ⋯, ×. On
+                  `dock.sideAllowed`, not the prop, for the pin: it already folds in the window width (SIDE_FITS_QUERY),
+                  so it is never offered where pressing it would only drop the working shape to "dock" (review #3744). */}
+              <HostMenu label={L.more}>
+                {surfaceRows}
+                {surfaceRows ? <hr className="gb-dock-menu-sep" /> : null}
+                {isDock && dock.sideAllowed ? (
+                  <AssistantMenuItem className="gb-dock-pinside" onClick={dock.openSide}>{L.pinSide}</AssistantMenuItem>
+                ) : null}
+                {isSide ? <AssistantMenuItem onClick={dock.openDock}>{L.floatPopup}</AssistantMenuItem> : null}
+                <AssistantMenuItem onClick={dock.minimize}>{L.minimizeTitle}</AssistantMenuItem>
+              </HostMenu>
               <button
                 type="button"
                 className="gb-dock-icon"

package/src/assistant/index.ts

@@ -1,7 +1,14 @@
 // The assistant's frame: popup, status bar, full screen — and the rules for when each shows.
 // A separate entry from the shell/auth barrel so a surface that never opens an assistant pays nothing for it.
-export { AssistantHost, type AssistantHostLabels, type AssistantSecondTab } from "./host";
+export { AssistantHost, AssistantMenuItem, type AssistantHostLabels, type AssistantSecondTab } from "./host";
 export { AssistantProvider, SIDE_WIDTH_VAR, useAssistant, useAssistantPageFacts, type AssistantDockApi, type AssistantOptions } from "./provider";
 export * from "./dock";
 export { AssistantWorkspaceLayout, OpenChatTabs, SessionRail, SESSION_RAIL_EN, groupSessions, normalizeForSearch, relativeTime, type AssistantSession, type SessionGroup, type SessionRailIcons, type SessionRailLabels } from "./sessions";
 export { BRIDGE_TONE, BridgeNotice, ENGINE_PICKER_EN, EnginePanel, EnginePicker, engineChipName, useEnginePicker, type BridgeSetup, type BridgeState, type BridgeStatus, type Choice, type EngineChoice, type EnginePickerLabels, type EnginePickerProps, type EnginePickerTab } from "./engine";
+// 0.29.0: the chat BODY as components (the surface hands in messages and actions), its markdown, and each engine's mark.
+export { AssistantChat, ChatAttach, ChatBubble, ChatComposer, ChatError, ChatLabelsProvider, ChatMarkdown, ChatMessage, ChatMeta, ChatNote, ChatPending, ChatStarters, ChatSteps, ChatThread, CHAT_EN, PaperclipIcon, useComposerDensity, useFullChromeRoom, type AssistantChatProps, type ChatComposerProps, type ChatFix, type ChatLabels, type ChatMarkdownProps, type ChatMessageData, type ChatStarter, type ChatStep, type ComposerDensity } from "./chat";
+export { bareUrl, CODE_FOLD_LINES, FLEET_IMAGE_HOSTS, imageSource, linkTarget, parseBlocks, parseInline, type Block, type ImageHost, type Inline, type InlineOptions } from "./chat-markdown";
+export { ENGINE_MARK_ART, ENGINE_MARK_FILL_RULE, EngineMark, isEngineMarkId, type EngineMarkArt, type EngineMarkId } from "./engine-mark";
+export { atBridge, BRIDGE_GONE, bridgeTurnError, PAIRING_REJECTED, useChatTurns, type ChatTurns, type TurnError } from "./chat-turns";
+// 0.32.0: the bridge on the user's machine, seen from the browser (the radars' copies, once): client, state, picker props.
+export { BRIDGE_CLOSED_EARLY, BRIDGE_SETUP_EN, BridgePairForm, SERVER_CLOSED_EARLY, bridgeControlNote, bridgePickerProps, createBridgeClient, isLocalPage, localNetworkPermission, mergeBridgeEngines, pickerBridgeState, postTurn, readTurnEvents, useBridge, type BridgeApi, type BridgeClient, type BridgeClientOptions, type BridgeEngineStatus, type BridgeEngines, type BridgePickerOptions, type BridgeProbe, type BridgeProbeState, type BridgeSetupLabels, type TurnEvent, type UseBridgeOptions } from "./bridge";

package/src/assistant-chat.css

@@ -0,0 +1 @@
+.gb-chat{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;background:var(--gemboss-surface, #fff)}.gemboss-assistant-layout:not(.is-dock) .gb-chat{background:transparent}.gb-chat>.gemboss-ec-scroll{flex:1 1 auto}.gb-dock:not(.gb-dock-full) .gb-chat-head{display:none}.gb-chat-head{flex:none;box-sizing:border-box;justify-content:center}.gb-chat[data-chrome]>.gb-chat-head{padding-right:var(--gb-chat-chrome-w);min-height:var(--gb-chat-chrome-h)}.gb-chat[data-chrome]:not(:has(>.gb-chat-head))>.gemboss-ec-scroll{padding-top:var(--gb-chat-chrome-h)}.gemboss-ec-starter.gb-chat-starter{white-space:normal;border-radius:12px;text-align:left;overflow-wrap:anywhere}.gb-chat-starter-hint{display:block;margin-bottom:4px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption, 12px)}.gb-chat-label{margin:0;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption, 12px)}.gb-chat-target{color:var(--gemboss-text-muted)}.gb-chat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption, 12px)}.gb-chat-copy{flex:none}.gb-chat-note{margin:0;align-self:center;text-align:center;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption, 12px)}.gb-chat-notice{margin:0}.gb-chat-error{display:grid;gap:8px;margin:0;overflow-wrap:anywhere}.gb-chat-cmd{display:block;padding:6px 8px;border-radius:8px;background:#0000000d;color:var(--gemboss-text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:16px;overflow-wrap:anywhere;user-select:all}.gb-chat-original>summary{cursor:pointer;min-height:24px;display:flex;align-items:center}.gemboss-ec-input .gemboss-ec-attach-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--gemboss-text-muted);cursor:pointer}.gemboss-ec-input .gemboss-ec-attach-btn:hover:not(:disabled){background-color:var(--gemboss-hover, rgba(0, 0, 0, .05));color:var(--gemboss-text)}.gemboss-ec-input .gemboss-ec-attach-btn:focus-visible{outline:2px solid var(--gemboss-focus, var(--ui-focus, #5661f5));outline-offset:2px}.gemboss-ec-input .gemboss-ec-attach-btn:disabled{opacity:.5;cursor:default}.gemboss-ec-input .gemboss-ec-attach-btn svg{width:24px;height:24px}@media (pointer: fine){.gemboss-ec-input .gb-engine-chip{position:relative}.gemboss-ec-input .gb-engine-chip:after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;z-index:1}}@media (pointer: coarse),(max-width: 47.9975em){.gb-chat-original>summary{min-height:44px}}@media (max-width: 560px){.gb-dock-fullchrome .gb-dock-shrink:not(:has(svg)){padding:0 12px;width:auto}.gb-dock-fullchrome .gb-dock-shrink:not(:has(svg)) span{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

package/src/assistant-engine.css

@@ -1 +1 @@
-.gb-engine{display:inline-flex;min-width:0;max-width:100%}.gb-engine-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 24px 0 8px;font:inherit;font-size:var(--ui-fs-caption, 12px);font-weight:500;line-height:20px;white-space:nowrap;color:var(--ui-text-muted);background-color:transparent;border:1px solid transparent;border-radius:var(--ui-radius-md, 8px);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23686b71' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}@media (hover: hover){.gb-engine-chip:hover{color:var(--ui-text);background-color:var(--gemboss-hover, rgba(0,0,0,.05))}}@media (hover: none){.gb-engine-chip{color:var(--ui-text)}}.gb-engine-chip[aria-expanded=true]{color:var(--ui-text);background-color:var(--gemboss-hover, rgba(0,0,0,.05))}.gb-engine-chip:focus-visible{color:var(--ui-text);outline:2px solid var(--ui-focus);outline-offset:2px}.gb-engine-chiplabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.gb-engine-chipsub{font-weight:450}.gb-engine-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ui-text-muted);vertical-align:middle}.gb-engine-dot--ok{background:var(--gemboss-success, #007f5f)}.gb-engine-dot--warn{background:#e8a10a;box-shadow:0 0 0 1px var(--gemboss-warning, #9a6700) inset}.gb-engine-dot--down{background:var(--gemboss-danger, #d72c0d)}.gb-engine-dot--idle{background:transparent;box-shadow:0 0 0 1.5px var(--ui-text-muted) inset}.gb-engine-panel{position:fixed;z-index:1000;inset:auto;margin:0;width:min(360px,calc(100vw - 16px));box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:0 0 var(--ui-space-3, 12px);color:var(--ui-text);font-size:var(--ui-fs-caption, 12px);line-height:16px}.gb-engine-panel[hidden],.gb-engine-panel[popover]:not(:popover-open):not([data-open]){display:none}:where(.gb-engine-panel[popover]){border:0;background:none;color:inherit}.gb-engine-panel--inline{position:static;z-index:auto;overflow:visible}.gb-engine-tabs{padding:0 var(--ui-space-2, 8px)}.gb-engine-tabs>button{gap:6px}.gb-engine-pane{display:grid;gap:var(--ui-space-3, 12px);padding:var(--ui-space-3, 12px) var(--ui-space-3, 12px) 0}.gb-engine-pane p{margin:0}.gb-engine-field{display:grid;gap:6px}.gb-engine-label{font-weight:550;color:var(--ui-text-strong, var(--ui-text))}.gb-engine-note{color:var(--ui-text-muted)}.gb-engine-list{display:grid;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md, 8px);overflow:hidden}.gb-engine-row{display:grid;gap:2px;min-height:44px;padding:6px 10px 6px 32px;box-sizing:border-box;position:relative;font:inherit;text-align:left;color:inherit;background:transparent;border:0;cursor:pointer}.gb-engine-row+.gb-engine-row{border-top:1px solid var(--ui-border)}.gb-engine-row:before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;box-sizing:border-box;border:1.5px solid var(--ui-text-muted);border-radius:50%}.gb-engine-row[aria-checked=true]{background:var(--gemboss-active-bg, #f0f1f4)}.gb-engine-row[aria-checked=true]:before{border:4.5px solid var(--ui-accent)}.gb-engine-row[aria-checked=true] .gb-engine-rowname{font-weight:600}@media (hover: hover){.gb-engine-row:hover:not(:disabled){background:var(--ui-surface-2)}}.gb-engine-row:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.gb-engine-row:disabled{cursor:not-allowed}.gb-engine-row:disabled .gb-engine-rowname{color:var(--ui-text-muted)}.gb-engine-rowhead{display:flex;align-items:center;gap:var(--ui-space-2, 8px);min-width:0}.gb-engine-rowname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:450}.gb-engine-opts{display:flex;flex-wrap:wrap;gap:var(--ui-space-2, 8px)}.gb-engine-opt{height:var(--ui-btn-h, 28px);padding:0 10px;box-sizing:border-box;font:inherit;font-weight:500;color:var(--ui-text);background:transparent;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md, 8px);cursor:pointer}@media (hover: hover){.gb-engine-opt:hover:not(:disabled){background:var(--ui-surface-2)}}.gb-engine-opt[aria-pressed=true]{background:var(--gemboss-active-bg, #f0f1f4);border-color:var(--ui-text);font-weight:600}.gb-engine-opt:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.gb-engine-opt:disabled{opacity:.5;cursor:not-allowed}.gb-engine-select{width:100%}.gb-engine-notes{display:grid;gap:4px;color:var(--ui-text-muted)}.gb-engine-notes p{margin:0}.gb-engine-callout{padding:8px 10px;border-radius:var(--ui-radius-md, 8px);border:1px solid}.gb-engine-callout--warn{background:var(--gemboss-warning-soft, #fff8e0);border-color:var(--gemboss-warning-border, #f5d569);color:var(--gemboss-warning, #9a6700)}.gb-engine-callout--down{background:var(--gemboss-danger-soft, #fff0e9);border-color:var(--gemboss-danger-border, #f5c9bc);color:var(--gemboss-danger-strong, #b42318)}.gb-engine-steps ol,.gb-engine-steps ul{margin:0;padding-left:18px;display:grid;gap:4px}.gb-engine-cmd{margin:0;padding:8px 10px;border-radius:var(--ui-radius-md, 8px);background:var(--ui-surface-2);border:1px solid var(--ui-border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:16px;white-space:pre-wrap;word-break:break-all;user-select:all;max-height:96px;overflow:auto}.gb-engine-cmd code{padding:0;border:0;background:none;font:inherit;color:inherit}.gb-engine-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2, 8px)}.gb-engine-said{color:var(--ui-text-muted)}.gb-engine-said:empty{display:none}.gb-engine-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;letter-spacing:.04em;user-select:all}.gb-engine-rows{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}.gb-engine-rows dt{color:var(--ui-text-muted)}.gb-engine-rows dd{margin:0;display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.gb-engine-notice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:4px 0;font-size:var(--ui-fs-caption, 12px);line-height:16px;color:var(--ui-text-muted)}.gb-engine-notice>.gb-engine-dot{margin-right:-2px}.gb-engine-notice--down .gb-engine-notice-text,.gb-engine-notice--warn .gb-engine-notice-text{color:var(--ui-text)}.gb-engine-notice-text{min-width:0;flex:0 1 auto}.gb-engine-notice-link{flex:none;position:relative;padding:0;border:0;background:none;font:inherit;font-weight:550;color:var(--ui-accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.gb-engine-notice-link:after{content:"";position:absolute;inset:-4px}.gb-engine-notice-link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:2px}@media (pointer: coarse),(max-width: 47.9975em){.gb-engine-chip{min-height:44px}.gb-engine-opt{min-height:44px;min-width:44px}.gb-engine-notice-link:after{inset:-14px -8px}}@media (prefers-reduced-motion: no-preference){.gb-engine-chip,.gb-engine-opt,.gb-engine-row{transition:background-color .12s ease,color .12s ease}}
+.gb-engine{display:inline-flex;min-width:0;max-width:100%}.gb-engine-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 24px 0 8px;font:inherit;font-size:var(--ui-fs-caption, 12px);font-weight:500;line-height:20px;white-space:nowrap;color:var(--ui-text-muted);background-color:transparent;border:1px solid transparent;border-radius:var(--ui-radius-md, 8px);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23686b71' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}@media (hover: hover){.gb-engine-chip:hover{color:var(--ui-text);background-color:var(--gemboss-hover, rgba(0,0,0,.05))}}@media (hover: none){.gb-engine-chip{color:var(--ui-text)}}.gb-engine-chip[aria-expanded=true]{color:var(--ui-text);background-color:var(--gemboss-hover, rgba(0,0,0,.05))}.gb-engine-chip:focus-visible{color:var(--ui-text);outline:2px solid var(--ui-focus);outline-offset:2px}.gb-engine-chiplabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.gb-engine-chipsub{font-weight:450}.gb-engine-chip:disabled{cursor:default;opacity:.55}.gemboss-engine-mark{display:block;width:14px;height:14px;flex:0 0 auto}.gb-engine-chipmark{display:none}.gb-engine-chipmark .gemboss-engine-mark{width:16px;height:16px}.gemboss-ec-input:not([data-density=full]) .gb-engine-chipsub{display:none}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gb-engine-chip.has-mark .gb-engine-chiplabel{display:none}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gb-engine-chip.has-mark .gb-engine-chipmark{display:block}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gb-engine:has(.has-mark){flex-shrink:0}.gb-engine-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ui-text-muted);vertical-align:middle}.gb-engine-dot--ok{background:var(--gemboss-success, #007f5f)}.gb-engine-dot--warn{background:#e8a10a;box-shadow:0 0 0 1px var(--gemboss-warning, #9a6700) inset}.gb-engine-dot--down{background:var(--gemboss-danger, #d72c0d)}.gb-engine-dot--idle{background:transparent;box-shadow:0 0 0 1.5px var(--ui-text-muted) inset}.gb-engine-panel{position:fixed;z-index:1000;inset:auto;margin:0;width:min(360px,calc(100vw - 16px));box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:0 0 var(--ui-space-3, 12px);color:var(--ui-text);font-size:var(--ui-fs-caption, 12px);line-height:16px}.gb-engine-panel[hidden],.gb-engine-panel[popover]:not(:popover-open):not([data-open]){display:none}:where(.gb-engine-panel[popover]){border:0;background:none;color:inherit}.gb-engine-panel--inline{position:static;z-index:auto;overflow:visible}.gb-engine-tabs{padding:0 var(--ui-space-2, 8px)}.gb-engine-tabs>button{gap:6px}.gb-engine-pane{display:grid;gap:var(--ui-space-3, 12px);padding:var(--ui-space-3, 12px) var(--ui-space-3, 12px) 0}.gb-engine-pane p{margin:0}.gb-engine-field{display:grid;gap:6px}.gb-engine-label{font-weight:550;color:var(--ui-text-strong, var(--ui-text))}.gb-engine-note{color:var(--ui-text-muted)}.gb-engine-list{display:grid;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md, 8px);overflow:hidden}.gb-engine-row{display:grid;gap:2px;min-height:44px;padding:6px 10px 6px 32px;box-sizing:border-box;position:relative;font:inherit;text-align:left;color:inherit;background:transparent;border:0;cursor:pointer}.gb-engine-row+.gb-engine-row{border-top:1px solid var(--ui-border)}.gb-engine-row:before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;box-sizing:border-box;border:1.5px solid var(--ui-text-muted);border-radius:50%}.gb-engine-row[aria-checked=true]{background:var(--gemboss-active-bg, #f0f1f4)}.gb-engine-row[aria-checked=true]:before{border:4.5px solid var(--ui-accent)}.gb-engine-row[aria-checked=true] .gb-engine-rowname{font-weight:600}@media (hover: hover){.gb-engine-row:hover:not(:disabled){background:var(--ui-surface-2)}}.gb-engine-row:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.gb-engine-row:disabled{cursor:not-allowed}.gb-engine-row:disabled .gb-engine-rowname{color:var(--ui-text-muted)}.gb-engine-rowhead{display:flex;align-items:center;gap:var(--ui-space-2, 8px);min-width:0}.gb-engine-rowname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:450}.gb-engine-opts{display:flex;flex-wrap:wrap;gap:var(--ui-space-2, 8px)}.gb-engine-opt{height:var(--ui-btn-h, 28px);padding:0 10px;box-sizing:border-box;font:inherit;font-weight:500;color:var(--ui-text);background:transparent;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md, 8px);cursor:pointer}@media (hover: hover){.gb-engine-opt:hover:not(:disabled){background:var(--ui-surface-2)}}.gb-engine-opt[aria-pressed=true]{background:var(--gemboss-active-bg, #f0f1f4);border-color:var(--ui-text);font-weight:600}.gb-engine-opt:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.gb-engine-opt:disabled{opacity:.5;cursor:not-allowed}.gb-engine-select{width:100%}.gb-engine-groups{display:grid;gap:var(--ui-space-3, 12px)}.gb-engine-group{display:grid;gap:6px}.gb-engine-group+.gb-engine-group{padding-top:var(--ui-space-3, 12px);border-top:1px solid var(--ui-border)}.gb-engine-group[data-current] .gb-engine-rowname{font-weight:600}.gb-engine-problem{color:var(--gemboss-danger-strong, #b42318)}.gb-engine-notes{display:grid;gap:4px;color:var(--ui-text-muted)}.gb-engine-notes p{margin:0}.gb-engine-callout{padding:8px 10px;border-radius:var(--ui-radius-md, 8px);border:1px solid}.gb-engine-callout--warn{background:var(--gemboss-warning-soft, #fff8e0);border-color:var(--gemboss-warning-border, #f5d569);color:var(--gemboss-warning, #9a6700)}.gb-engine-callout--down{background:var(--gemboss-danger-soft, #fff0e9);border-color:var(--gemboss-danger-border, #f5c9bc);color:var(--gemboss-danger-strong, #b42318)}.gb-engine-steps ol,.gb-engine-steps ul{margin:0;padding-left:18px;display:grid;gap:4px}.gb-engine-cmd{margin:0;padding:8px 10px;border-radius:var(--ui-radius-md, 8px);background:var(--ui-surface-2);border:1px solid var(--ui-border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:16px;white-space:pre-wrap;word-break:break-all;user-select:all;max-height:96px;overflow:auto}.gb-engine-cmd code{padding:0;border:0;background:none;font:inherit;color:inherit}.gb-engine-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2, 8px)}.gb-engine-said{color:var(--ui-text-muted)}.gb-engine-said:empty{display:none}.gb-engine-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;letter-spacing:.04em;user-select:all}.gb-engine-rows{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}.gb-engine-rows dt{color:var(--ui-text-muted)}.gb-engine-rows dd{margin:0;display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.gb-engine-notice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 6px;margin:0;padding:4px 0;font-size:var(--ui-fs-caption, 12px);line-height:16px;color:var(--ui-text-muted)}.gb-engine-notice>.gb-engine-dot{margin-top:4px}.gb-engine-notice>.gb-engine-notice-link{grid-column:2;justify-self:start}.gb-engine-notice--down .gb-engine-notice-text,.gb-engine-notice--warn .gb-engine-notice-text{color:var(--ui-text)}.gb-engine-notice-text{min-width:0;overflow-wrap:anywhere}.gb-engine-notice-link{flex:none;display:inline-flex;align-items:center;min-height:24px;margin:-4px 0 -4px -4px;padding:0 4px;border:0;border-radius:4px;background:none;font:inherit;font-weight:550;color:var(--ui-accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.gb-engine-notice-link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:0}@media (pointer: coarse),(max-width: 47.9975em){.gb-engine-chip{min-height:44px}.gb-engine-opt{min-height:44px;min-width:44px}.gb-engine-notice-link{min-height:44px;margin:-14px 0 -14px -8px;padding:0 8px}}@media (prefers-reduced-motion: no-preference){.gb-engine-chip,.gb-engine-opt,.gb-engine-row{transition:background-color .12s ease,color .12s ease}}