@burdenoff/fe-libs 2026.910.7 → 2026.911.2

package/dist/shared/assistant/ui/AIAssistantPanel.js

@@ -4,55 +4,92 @@ import { AssistantNavigateProvider as n } from "./AssistantMarkdownRenderer.js";
 import { useAssistantStore as r } from "../store.js";
 import { AssistantSpeechProvider as i } from "./AssistantSpeechProvider.js";
 import { AssistantConnectSourceProvider as a } from "./composer/connectSource.js";
-import { AssistantHeader as o } from "./AssistantHeader.js";
-import { AssistantConversationList as s } from "./AssistantConversationList.js";
-import { useFilesServiceWarmup as c } from "../../../storage/warmFilesService.js";
-import { useAssistantHeartbeat as l } from "../useAssistantHeartbeat.js";
-import { useAssistantKeyboardShortcuts as u } from "../useAssistantKeyboardShortcuts.js";
-import { AssistantChatArea as d } from "./AssistantChatArea.js";
-import { useRef as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { AssistantPreviewProvider as o } from "../preview/context.js";
+import { escapeDismisses as s, nextPanelOverlays as c } from "./panelOverlays.js";
+import { useAssistantPreviewBridge as l } from "../preview/useAssistantPreviewBridge.js";
+import { AssistantPreviewOverlay as u } from "../preview/AssistantPreviewOverlay.js";
+import { AssistantHeader as d } from "./AssistantHeader.js";
+import { AssistantConversationList as f } from "./AssistantConversationList.js";
+import { useFilesServiceWarmup as p } from "../../../storage/warmFilesService.js";
+import { useAssistantHeartbeat as m } from "../useAssistantHeartbeat.js";
+import { useAssistantKeyboardShortcuts as h } from "../useAssistantKeyboardShortcuts.js";
+import { AssistantChatArea as g } from "./AssistantChatArea.js";
+import { useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/shared/assistant/ui/AIAssistantPanel.tsx
-var h = ({ onClose: h, visible: g, docked: _, onToggleDock: v, writeAccess: y, onNavigate: b, connectSourceHref: x }) => {
-	let S = t(), C = f(null), { conversations: w, activeConversationId: T, conversationListOpen: E, toggleConversationList: D, createConversation: O } = r(), k = w.find((e) => e.id === T);
-	l(k?.backendSessionId ?? null, k?.mode ?? null, g ?? !0), c(g ?? !0);
-	let A = e(g !== !1);
-	return u({
-		panelRef: C,
-		onClose: h
-	}), /* @__PURE__ */ p(i, {
-		visible: g ?? !0,
-		children: /* @__PURE__ */ p(n, {
-			value: b,
-			children: /* @__PURE__ */ p(a, {
-				value: x,
-				children: /* @__PURE__ */ m("div", {
-					ref: C,
-					className: "relative flex h-full w-full flex-col bg-bg-surface",
-					role: "complementary",
-					"aria-label": S("panel.ariaLabel", "AI Assistant"),
-					"data-testid": "ai-assistant-panel",
-					tabIndex: -1,
-					children: [
-						/* @__PURE__ */ p(o, {
-							contextLabel: A,
-							onNewConversation: () => O(),
-							onOpenHistory: D,
-							historyOpen: E,
-							onClose: h,
-							docked: _,
-							onToggleDock: v
-						}),
-						E && /* @__PURE__ */ p(s, {}),
-						/* @__PURE__ */ p(d, {
-							visible: g ?? !0,
-							writeAccess: y
-						})
-					]
+var x = ({ onClose: x, visible: S, docked: C, onToggleDock: w, writeAccess: T, onNavigate: E, connectSourceHref: D, preview: O }) => {
+	let k = t(), [A, j] = v(!1);
+	A && !O && j(!1);
+	let M = A && !!O;
+	l(O ?? null);
+	let N = _(null), { conversations: P, activeConversationId: F, conversationListOpen: I, setConversationListOpen: L, createConversation: R } = r(), z = I || M, B = (e) => {
+		let t = c({
+			historyOpen: I,
+			previewOpen: M
+		}, e);
+		L(t.historyOpen), j(t.previewOpen);
+	}, V = P.find((e) => e.id === F);
+	m(V?.backendSessionId ?? null, V?.mode ?? null, S ?? !0), p(S ?? !0);
+	let H = e(S !== !1);
+	return h({
+		panelRef: N,
+		onClose: () => {
+			if (s({
+				historyOpen: I,
+				previewOpen: M
+			}) === "overlay") {
+				L(!1), j(!1);
+				return;
+			}
+			x();
+		}
+	}), /* @__PURE__ */ y(i, {
+		visible: S ?? !0,
+		children: /* @__PURE__ */ y(o, {
+			value: O,
+			children: /* @__PURE__ */ y(n, {
+				value: E,
+				children: /* @__PURE__ */ y(a, {
+					value: D,
+					children: /* @__PURE__ */ b("div", {
+						ref: N,
+						className: "relative flex h-full w-full flex-col bg-bg-surface",
+						role: "complementary",
+						"aria-label": k("panel.ariaLabel", "AI Assistant"),
+						"data-testid": "ai-assistant-panel",
+						tabIndex: -1,
+						children: [
+							/* @__PURE__ */ y("div", {
+								className: "contents",
+								inert: z || void 0,
+								children: /* @__PURE__ */ y(d, {
+									contextLabel: H,
+									onNewConversation: () => R(),
+									onOpenHistory: () => B("history"),
+									historyOpen: I,
+									onTogglePreview: () => B("preview"),
+									previewOpen: M,
+									onClose: x,
+									docked: C,
+									onToggleDock: w
+								})
+							}),
+							I && /* @__PURE__ */ y(f, {}),
+							M && /* @__PURE__ */ y(u, { onClose: () => j(!1) }),
+							/* @__PURE__ */ y("div", {
+								className: "contents",
+								inert: z || void 0,
+								children: /* @__PURE__ */ y(g, {
+									visible: S ?? !0,
+									writeAccess: T
+								})
+							})
+						]
+					})
 				})
 			})
 		})
 	});
 };
 //#endregion
-export { h as AIAssistantPanel };
+export { x as AIAssistantPanel };

package/dist/shared/assistant/ui/AssistantConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantConversationList.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/AssistantConversationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAc1C,eAAO,MAAM,yBAAyB,EAAE,EAgPvC,CAAC"}
+{"version":3,"file":"AssistantConversationList.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/AssistantConversationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAgB1C,eAAO,MAAM,yBAAyB,EAAE,EA8PvC,CAAC"}

package/dist/shared/assistant/ui/AssistantConversationList.js

@@ -2,151 +2,156 @@ import { useAssistantProduct as e } from "../product.js";
 import { useAssistantTr as t } from "../i18n.js";
 import { chatTurns as n } from "../voice/turnVisibility.js";
 import { useAssistantStore as r } from "../store.js";
-import { useState as i } from "react";
-import { Check as a, MessageSquare as o, PanelLeftClose as s, Pencil as c, Plus as l, Trash2 as u } from "lucide-react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useOverlayFocus as i } from "./useOverlayFocus.js";
+import { useState as a } from "react";
+import { Check as o, MessageSquare as s, PanelLeftClose as c, Pencil as l, Plus as u, Trash2 as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/shared/assistant/ui/AssistantConversationList.tsx
-var m = () => {
-	let m = t(), { modes: h } = e(), { conversations: g, activeConversationId: _, processingByConversationId: v, setActiveConversation: y, setMode: b, createConversation: x, deleteConversation: S, renameConversation: C, setConversationListOpen: w } = r(), [T, E] = i(null), [D, O] = i(""), k = () => {
-		x(), w(!1);
-	}, A = (e) => {
-		let t = g.find((t) => t.id === e);
-		y(e), t && b(t.mode), w(!1);
-	}, j = (e, t) => {
-		E(e), O(t);
-	}, M = () => {
-		T && D.trim() && C(T, D.trim()), E(null);
-	}, N = (e, t) => {
-		e.stopPropagation(), S(t);
+var h = () => {
+	let h = t(), { modes: g } = e(), { conversations: _, activeConversationId: v, processingByConversationId: y, setActiveConversation: b, setMode: x, createConversation: S, deleteConversation: C, renameConversation: w, setConversationListOpen: T } = r(), [E, D] = a(null), [O, k] = a(""), A = () => {
+		S(), T(!1);
+	}, j = (e) => {
+		let t = _.find((t) => t.id === e);
+		b(e), t && x(t.mode), T(!1);
+	}, M = (e, t) => {
+		D(e), k(t);
+	}, N = () => {
+		E && O.trim() && w(E, O.trim()), D(null);
+	}, P = (e, t) => {
+		e.stopPropagation(), C(t);
 	};
-	return /* @__PURE__ */ p("div", {
-		className: "absolute inset-0 z-10 flex flex-col bg-bg-surface animate-in slide-in-from-left-2 fade-in duration-200",
+	return /* @__PURE__ */ m("div", {
+		ref: i("assistant-open-history"),
+		tabIndex: -1,
+		role: "region",
+		"aria-label": h("conversations.title", "History"),
+		className: "absolute inset-0 z-10 flex flex-col bg-bg-surface outline-none animate-in slide-in-from-left-2 fade-in duration-200",
 		"data-testid": "conversation-list",
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ m("div", {
 			className: "flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-elevated",
-			children: [/* @__PURE__ */ f("span", {
+			children: [/* @__PURE__ */ p("span", {
 				className: "text-[13px] font-semibold text-text-primary",
-				children: m("conversations.title", "History")
-			}), /* @__PURE__ */ p("div", {
+				children: h("conversations.title", "History")
+			}), /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-0.5",
-				children: [/* @__PURE__ */ f("button", {
+				children: [/* @__PURE__ */ p("button", {
 					type: "button",
-					onClick: k,
+					onClick: A,
 					className: "p-1.5 rounded-lg text-text-secondary hover:bg-bg-sunken transition-colors",
-					"aria-label": m("conversations.new", "New conversation"),
+					"aria-label": h("conversations.new", "New conversation"),
 					"data-testid": "new-conversation",
-					children: /* @__PURE__ */ f(l, { className: "size-4" })
-				}), /* @__PURE__ */ p("button", {
+					children: /* @__PURE__ */ p(u, { className: "size-4" })
+				}), /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => w(!1),
+					onClick: () => T(!1),
 					className: "flex items-center gap-1 px-2 py-1.5 rounded-lg text-text-secondary hover:bg-bg-sunken transition-colors",
-					"aria-label": m("conversations.collapse", "Collapse history"),
+					"aria-label": h("conversations.collapse", "Collapse history"),
 					"data-testid": "collapse-conversation-list",
-					children: [/* @__PURE__ */ f(s, { className: "size-4" }), /* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ p(c, { className: "size-4" }), /* @__PURE__ */ p("span", {
 						className: "text-[11px] font-medium",
-						children: m("conversations.collapseLabel", "Collapse")
+						children: h("conversations.collapseLabel", "Collapse")
 					})]
 				})]
 			})]
-		}), /* @__PURE__ */ f("div", {
+		}), /* @__PURE__ */ p("div", {
 			className: "flex-1 overflow-y-auto",
-			children: g.length === 0 ? /* @__PURE__ */ p("div", {
+			children: _.length === 0 ? /* @__PURE__ */ m("div", {
 				className: "flex flex-col items-center justify-center h-full text-center px-4",
 				children: [
-					/* @__PURE__ */ f(o, { className: "size-6 text-text-muted mb-2" }),
-					/* @__PURE__ */ f("p", {
+					/* @__PURE__ */ p(s, { className: "size-6 text-text-muted mb-2" }),
+					/* @__PURE__ */ p("p", {
 						className: "text-xs text-text-muted",
-						children: m("conversations.empty", "No conversations yet")
+						children: h("conversations.empty", "No conversations yet")
 					}),
-					/* @__PURE__ */ f("button", {
+					/* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: k,
+						onClick: A,
 						className: "mt-2 text-xs text-action-primary-bg hover:underline",
-						children: m("conversations.startNew", "Start a new conversation")
+						children: h("conversations.startNew", "Start a new conversation")
 					})
 				]
-			}) : /* @__PURE__ */ f("div", {
+			}) : /* @__PURE__ */ p("div", {
 				className: "py-1",
-				children: g.map((e) => {
-					let t = e.id === _, r = e.id === T, i = h.find((t) => t.id === e.mode), o = n(e.messages), s = o[o.length - 1], l = o.length === 0 && e.messages.length > 0, g = v[e.id];
-					return /* @__PURE__ */ f("div", {
+				children: _.map((e) => {
+					let t = e.id === v, r = e.id === E, i = g.find((t) => t.id === e.mode), a = n(e.messages), s = a[a.length - 1], c = a.length === 0 && e.messages.length > 0, u = y[e.id];
+					return /* @__PURE__ */ p("div", {
 						role: "button",
 						tabIndex: 0,
 						onKeyDown: (t) => {
-							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), !r && A(e.id));
+							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), !r && j(e.id));
 						},
-						onClick: () => !r && A(e.id),
+						onClick: () => !r && j(e.id),
 						className: `group px-3 py-2 cursor-pointer hover:bg-bg-elevated transition-colors ${t ? "bg-bg-elevated border-l-2 border-action-primary-bg" : ""}`,
-						children: r ? /* @__PURE__ */ p("div", {
+						children: r ? /* @__PURE__ */ m("div", {
 							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ f("input", {
-								"aria-label": m("conversations.renameLabel", "Conversation title"),
-								value: D,
-								onChange: (e) => O(e.target.value),
+							children: [/* @__PURE__ */ p("input", {
+								"aria-label": h("conversations.renameLabel", "Conversation title"),
+								value: O,
+								onChange: (e) => k(e.target.value),
 								onKeyDown: (e) => {
-									e.key === "Enter" && M(), e.key === "Escape" && E(null);
+									e.key === "Enter" && N(), e.key === "Escape" && D(null);
 								},
 								className: "flex-1 text-xs bg-bg-sunken border border-border-default rounded px-2 py-1 text-text-primary focus:outline-none focus:border-action-primary-bg",
 								onClick: (e) => e.stopPropagation()
-							}), /* @__PURE__ */ f("button", {
+							}), /* @__PURE__ */ p("button", {
 								type: "button",
 								onClick: (e) => {
-									e.stopPropagation(), M();
+									e.stopPropagation(), N();
 								},
 								className: "p-1 hover:bg-bg-sunken rounded",
-								"aria-label": m("conversations.saveTitle", "Save title"),
-								children: /* @__PURE__ */ f(a, { className: "size-3 text-status-success-text" })
+								"aria-label": h("conversations.saveTitle", "Save title"),
+								children: /* @__PURE__ */ p(o, { className: "size-3 text-status-success-text" })
 							})]
-						}) : /* @__PURE__ */ p(d, { children: [
-							/* @__PURE__ */ p("div", {
+						}) : /* @__PURE__ */ m(f, { children: [
+							/* @__PURE__ */ m("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ f("span", {
+								children: [/* @__PURE__ */ p("span", {
 									className: "text-xs font-medium text-text-primary truncate flex-1",
 									children: e.title
-								}), /* @__PURE__ */ p("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "hidden group-hover:flex group-focus-within:flex items-center gap-0.5 ml-1",
-									children: [/* @__PURE__ */ f("button", {
+									children: [/* @__PURE__ */ p("button", {
 										type: "button",
 										onClick: (t) => {
-											t.stopPropagation(), j(e.id, e.title);
+											t.stopPropagation(), M(e.id, e.title);
 										},
 										className: "p-0.5 hover:bg-bg-sunken rounded",
-										"aria-label": m("conversations.rename", "Rename conversation"),
-										children: /* @__PURE__ */ f(c, { className: "size-3 text-text-muted" })
-									}), /* @__PURE__ */ f("button", {
+										"aria-label": h("conversations.rename", "Rename conversation"),
+										children: /* @__PURE__ */ p(l, { className: "size-3 text-text-muted" })
+									}), /* @__PURE__ */ p("button", {
 										type: "button",
-										onClick: (t) => N(t, e.id),
+										onClick: (t) => P(t, e.id),
 										className: "p-0.5 hover:bg-bg-sunken rounded",
-										"aria-label": m("conversations.delete", "Delete conversation"),
+										"aria-label": h("conversations.delete", "Delete conversation"),
 										"data-testid": "delete-conversation",
-										children: /* @__PURE__ */ f(u, { className: "size-3 text-status-error-text" })
+										children: /* @__PURE__ */ p(d, { className: "size-3 text-status-error-text" })
 									})]
 								})]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-1.5 mt-0.5",
 								children: [
-									/* @__PURE__ */ f("span", {
+									/* @__PURE__ */ p("span", {
 										className: "text-[10px] text-text-muted px-1 py-0.5 bg-bg-sunken rounded",
 										children: i?.label ?? e.mode
 									}),
-									/* @__PURE__ */ p("span", {
+									/* @__PURE__ */ m("span", {
 										className: "text-[10px] text-text-muted",
-										children: [o.length, " msgs"]
+										children: [a.length, " msgs"]
 									}),
-									g && g.status !== "idle" && /* @__PURE__ */ f("span", {
+									u && u.status !== "idle" && /* @__PURE__ */ p("span", {
 										className: "text-[10px] text-action-primary-bg px-1 py-0.5 bg-bg-sunken rounded",
-										children: g.status
+										children: u.status
 									})
 								]
 							}),
-							s && /* @__PURE__ */ f("p", {
+							s && /* @__PURE__ */ p("p", {
 								className: "text-[10px] text-text-muted truncate mt-0.5",
 								children: s.content.slice(0, 60)
 							}),
-							l && /* @__PURE__ */ f("p", {
+							c && /* @__PURE__ */ p("p", {
 								className: "text-[10px] text-text-muted truncate mt-0.5",
-								children: m("conversationList.voiceOnly", "Spoken conversation")
+								children: h("conversationList.voiceOnly", "Spoken conversation")
 							})
 						] })
 					}, e.id);
@@ -156,4 +161,4 @@ var m = () => {
 	});
 };
 //#endregion
-export { m as AssistantConversationList };
+export { h as AssistantConversationList };

package/dist/shared/assistant/ui/AssistantHeader.d.ts

@@ -14,6 +14,16 @@ interface Props {
     onOpenHistory: () => void;
     /** True when the history drawer is currently open (drives the toggle state). */
     historyOpen: boolean;
+    /**
+     * ★★ OPTIONAL, because this component is published. `AssistantHeader` is
+     * `export *`-ed from the assistant barrel and reaches the built package, so a
+     * product that composes its own panel chrome renders it directly. Two
+     * REQUIRED props would have failed that product's build the moment it bumped
+     * fe-libs — a breaking change to ship an OPTIONAL capability, which is
+     * exactly backwards. Absent, the toggle simply does not render.
+     */
+    onTogglePreview?: () => void;
+    previewOpen?: boolean;
     onClose: () => void;
     docked?: boolean;
     onToggleDock?: () => void;

package/dist/shared/assistant/ui/AssistantHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantHeader.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/AssistantHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,UAAU,KAAK;IACb,qEAAqE;IACrE;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAmHrC,CAAC"}
+{"version":3,"file":"AssistantHeader.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/AssistantHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,UAAU,KAAK;IACb,qEAAqE;IACrE;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA4IrC,CAAC"}

package/dist/shared/assistant/ui/AssistantHeader.js

@@ -1,71 +1,81 @@
 import { useAssistantTr as e } from "../i18n.js";
-import { AssistantMoreMenu as t } from "./AssistantMoreMenu.js";
-import { History as n, PanelBottom as r, PanelRight as i, Plus as a, Sparkles as o, X as s } from "lucide-react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useAssistantPreview as t } from "../preview/context.js";
+import { AssistantMoreMenu as n } from "./AssistantMoreMenu.js";
+import { Eye as r, History as i, PanelBottom as a, PanelRight as o, Plus as s, Sparkles as c, X as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/shared/assistant/ui/AssistantHeader.tsx
-var d = ({ contextLabel: d, onNewConversation: f, onOpenHistory: p, historyOpen: m, onClose: h, docked: g, onToggleDock: _ }) => {
-	let v = e();
-	return /* @__PURE__ */ u("div", {
+var p = ({ contextLabel: p, onNewConversation: m, onOpenHistory: h, historyOpen: g, onTogglePreview: _, previewOpen: v, onClose: y, docked: b, onToggleDock: x }) => {
+	let S = e(), C = t();
+	return /* @__PURE__ */ f("div", {
 		className: "flex items-center gap-2 border-b border-border-default bg-bg-elevated px-3 py-2.5",
-		children: [/* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
-			children: [/* @__PURE__ */ l("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: "flex size-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-action-primary-bg/25 to-action-primary-bg/5 text-action-primary-bg",
-				children: /* @__PURE__ */ l(o, { className: "size-4" })
-			}), /* @__PURE__ */ u("span", {
+				children: /* @__PURE__ */ d(c, { className: "size-4" })
+			}), /* @__PURE__ */ f("span", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ d("span", {
 					className: "block truncate text-[14px] font-semibold leading-tight text-text-primary",
-					children: v("header.title", "AI Assistant")
-				}), /* @__PURE__ */ u("span", {
+					children: S("header.title", "AI Assistant")
+				}), /* @__PURE__ */ f("span", {
 					className: "block truncate text-[11px] leading-tight text-text-muted",
-					children: [v("header.ready", "Ready"), d && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+					children: [S("header.ready", "Ready"), p && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
 						"aria-hidden": "true",
 						children: " · "
-					}), v("header.context", "Context: {{page}}", { page: d })] })]
+					}), S("header.context", "Context: {{page}}", { page: p })] })]
 				})]
 			})]
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ f("div", {
 			className: "flex flex-shrink-0 items-center gap-0.5",
 			children: [
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: f,
+					onClick: m,
 					className: "rounded-lg p-1.5 text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary",
-					"aria-label": v("header.newConversation", "New conversation"),
+					"aria-label": S("header.newConversation", "New conversation"),
 					"data-testid": "assistant-new-conversation",
-					children: /* @__PURE__ */ l(a, { className: "size-4" })
+					children: /* @__PURE__ */ d(s, { className: "size-4" })
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: p,
-					className: `rounded-lg p-1.5 transition-colors ${m ? "bg-action-primary-bg/15 text-action-primary-bg" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
-					"aria-label": v("header.history", "Conversation history"),
-					"aria-pressed": m,
+					onClick: h,
+					className: `rounded-lg p-1.5 transition-colors ${g ? "bg-action-primary-bg/15 text-action-primary-bg" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
+					"aria-label": S("header.history", "Conversation history"),
+					"aria-pressed": g,
 					"data-testid": "assistant-open-history",
-					children: /* @__PURE__ */ l(n, { className: "size-4" })
+					children: /* @__PURE__ */ d(i, { className: "size-4" })
 				}),
-				/* @__PURE__ */ l(t, {}),
-				_ && /* @__PURE__ */ l("button", {
+				C && _ && /* @__PURE__ */ d("button", {
 					type: "button",
 					onClick: _,
+					className: `rounded-lg p-1.5 transition-colors ${v ? "bg-action-primary-bg/15 text-action-primary-bg" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
+					"aria-label": C.label ?? S("header.preview", "Preview"),
+					"aria-pressed": !!v,
+					"data-testid": "assistant-toggle-preview",
+					children: /* @__PURE__ */ d(r, { className: "size-4" })
+				}),
+				/* @__PURE__ */ d(n, {}),
+				x && /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: x,
 					className: "hidden rounded-lg p-1.5 text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary sm:inline-flex",
-					"aria-label": g ? v("header.float", "Float chat window") : v("header.dock", "Dock to side panel"),
-					"aria-pressed": g,
+					"aria-label": b ? S("header.float", "Float chat window") : S("header.dock", "Dock to side panel"),
+					"aria-pressed": b,
 					"data-testid": "assistant-toggle-dock",
-					children: l(g ? r : i, { className: "size-4" })
+					children: d(b ? a : o, { className: "size-4" })
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: h,
+					onClick: y,
 					className: "rounded-lg p-1.5 text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary",
-					"aria-label": v("header.close", "Close assistant"),
+					"aria-label": S("header.close", "Close assistant"),
 					"data-testid": "assistant-close",
-					children: /* @__PURE__ */ l(s, { className: "size-4" })
+					children: /* @__PURE__ */ d(l, { className: "size-4" })
 				})
 			]
 		})]
 	});
 };
 //#endregion
-export { d as AssistantHeader };
+export { p as AssistantHeader };

package/dist/shared/assistant/ui/panelOverlays.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Which of the panel's full-surface overlays is showing.
+ *
+ * ★★ THEY ARE MUTUALLY EXCLUSIVE, and that is not a style choice. The history
+ * drawer (`AssistantConversationList.tsx:71`) and the preview surface
+ * (`AssistantPreviewOverlay.tsx:57`) are BOTH `absolute inset-0 z-10` with an
+ * opaque `bg-bg-surface`, inside the same relative panel. Equal z-index means
+ * the later one in DOM order simply paints over the earlier one, so allowing
+ * both produces three separate defects at once:
+ *
+ *  - the covered surface is invisible while its own toggle still reports
+ *    `aria-pressed="true"`, so a screen reader announces a drawer the sighted
+ *    user cannot see and the sighted user sees a pressed button doing nothing;
+ *  - closing the top one makes a surface the user had forgotten reappear
+ *    unbidden, over their conversation;
+ *  - which one wins depends on JSX order, so a future reorder silently swaps
+ *    the behaviour with nothing to catch it.
+ *
+ * Modelled as one slot with two toggles rather than two independent booleans,
+ * because "at most one is true" is then true by construction instead of by
+ * everyone remembering to close the other one.
+ */
+export interface PanelOverlayState {
+    readonly historyOpen: boolean;
+    readonly previewOpen: boolean;
+}
+/** Nothing showing — the state the panel opens in. */
+export declare const NO_PANEL_OVERLAY: PanelOverlayState;
+/**
+ * The state after the user presses one of the two toggles.
+ *
+ * Pressing the toggle of the overlay already showing closes it; pressing the
+ * other one swaps to it. There is deliberately no way to express "both".
+ */
+export declare function nextPanelOverlays(current: PanelOverlayState, toggled: "history" | "preview"): PanelOverlayState;
+/**
+ * What Escape should dismiss.
+ *
+ * ★★ THE TOPMOST LAYER, NOT THE WHOLE ASSISTANT. `useAssistantKeyboardShortcuts`
+ * calls `onClose()` on Escape (`:39-43`), and both host apps mount the panel as
+ * `{isOpen && <AIAssistantPanel/>}` — so with an overlay open, Escape did not
+ * close the overlay, it UNMOUNTED the assistant and took the in-flight turn,
+ * the composer draft and the attachments with it. The user's mental model of
+ * Escape is "back out of the thing I just opened"; here it destroyed a
+ * conversation instead.
+ */
+export declare function escapeDismisses(current: PanelOverlayState): "overlay" | "panel";
+//# sourceMappingURL=panelOverlays.d.ts.map

package/dist/shared/assistant/ui/panelOverlays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelOverlays.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/panelOverlays.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B;AAED,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,EAAE,iBAG9B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,SAAS,GAAG,SAAS,GAC7B,iBAAiB,CAOnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,iBAAiB,GACzB,SAAS,GAAG,OAAO,CAErB"}

package/dist/shared/assistant/ui/panelOverlays.js

@@ -0,0 +1,16 @@
+//#region src/shared/assistant/ui/panelOverlays.ts
+var e = {
+	historyOpen: !1,
+	previewOpen: !1
+};
+function t(t, n) {
+	return (n === "history" ? t.historyOpen : t.previewOpen) ? e : {
+		historyOpen: n === "history",
+		previewOpen: n === "preview"
+	};
+}
+function n(e) {
+	return e.historyOpen || e.previewOpen ? "overlay" : "panel";
+}
+//#endregion
+export { e as NO_PANEL_OVERLAY, n as escapeDismisses, t as nextPanelOverlays };

package/dist/shared/assistant/ui/useOverlayFocus.d.ts

@@ -0,0 +1,4 @@
+export declare function useOverlayFocus<T extends HTMLElement>(
+/** `data-testid` of the control that opens this overlay, for focus return. */
+returnFocusTestId?: string): import('react').RefObject<T | null>;
+//# sourceMappingURL=useOverlayFocus.d.ts.map

package/dist/shared/assistant/ui/useOverlayFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayFocus.d.ts","sourceRoot":"","sources":["../../../../src/shared/assistant/ui/useOverlayFocus.ts"],"names":[],"mappings":"AAmDA,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW;AACnD,8EAA8E;AAC9E,iBAAiB,CAAC,EAAE,MAAM,uCAmD3B"}

package/dist/shared/assistant/ui/useOverlayFocus.js

@@ -0,0 +1,17 @@
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+//#region src/shared/assistant/ui/useOverlayFocus.ts
+var r = "[data-testid=\"ai-assistant-panel\"]", i = typeof document > "u" ? e : t;
+function a(e) {
+	let t = n(null);
+	return i(() => {
+		let n = t.current, i = n?.closest(r) ?? null;
+		return n?.focus({ preventScroll: !0 }), () => {
+			let t = document.activeElement;
+			if (!(n && (n === t || n.contains(t)))) return;
+			let r = e ? i?.querySelector(`[data-testid="${e}"]`) : null;
+			(r?.isConnected ? r : i)?.focus({ preventScroll: !0 }), i && (document.activeElement === i || i.contains(document.activeElement)) || i?.focus({ preventScroll: !0 });
+		};
+	}, [e]), t;
+}
+//#endregion
+export { a as useOverlayFocus };