@dataverse-kit/agent-kit 0.2.1 → 0.3.1

package/dist/index.cjs

@@ -36,12 +36,14 @@ __export(src_exports, {
   AgentAppShell: () => AgentAppShell,
   AgentAvatar: () => AgentAvatar,
   AgentKitHostProvider: () => AgentKitHostProvider,
+  AgentLauncher: () => AgentLauncher,
   AgentOpsPanel: () => AgentOpsPanel,
   AgentPicker: () => AgentPicker,
   AgentStatusBadge: () => AgentStatusBadge,
   AnswerWithCitations: () => AnswerWithCitations,
   AppRail: () => AppRail,
   ApprovalCard: () => ApprovalCard,
+  AssistantPanel: () => AssistantPanel,
   AvailabilityBanner: () => AvailabilityBanner,
   CitationChip: () => CitationChip,
   CitationList: () => CitationList,
@@ -53,6 +55,7 @@ __export(src_exports, {
   DEFAULT_GROUP_WINDOW_MS: () => DEFAULT_GROUP_WINDOW_MS,
   DayDivider: () => DayDivider,
   EmptyConversation: () => EmptyConversation,
+  FeedbackPanel: () => FeedbackPanel,
   GlobalSearchBar: () => GlobalSearchBar,
   GroundingPanel: () => GroundingPanel,
   LiveAnnouncer: () => LiveAnnouncer,
@@ -114,6 +117,7 @@ __export(src_exports, {
   splitTextByCitations: () => splitTextByCitations,
   useConversation: () => useConversation,
   useFocusRestore: () => useFocusRestore,
+  useReturnFocus: () => useReturnFocus,
   useRovingTabindex: () => useRovingTabindex,
   useStickyScroll: () => useStickyScroll,
   useVisuallyHiddenStyles: () => useVisuallyHiddenStyles
@@ -121,7 +125,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/conversation/MessageList.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_react_components10 = require("@fluentui/react-components");
 var import_react_icons3 = require("@fluentui/react-icons");
 
@@ -707,12 +711,40 @@ function useRovingTabindex(options) {
   return { activeIndex, setActiveIndex, getItemProps };
 }
 
-// src/hooks/useStickyScroll.ts
+// src/a11y/useReturnFocus.ts
 var React4 = __toESM(require("react"), 1);
+function useReturnFocus({ open, containerRef, manageInitialFocus = true }) {
+  const openerRef = React4.useRef(null);
+  const wasOpen = React4.useRef(open);
+  React4.useEffect(() => {
+    const container = containerRef.current;
+    const doc = container?.ownerDocument ?? (typeof document !== "undefined" ? document : void 0);
+    if (!doc) return;
+    if (open && !wasOpen.current) {
+      const active = doc.activeElement;
+      openerRef.current = active instanceof HTMLElement && active !== doc.body ? active : null;
+      if (manageInitialFocus && container) {
+        const first = container.querySelector(
+          'a[href],button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
+        );
+        (first ?? container).focus();
+      }
+    }
+    if (!open && wasOpen.current) {
+      const opener = openerRef.current;
+      if (opener && opener.isConnected) opener.focus();
+      openerRef.current = null;
+    }
+    wasOpen.current = open;
+  }, [open, containerRef, manageInitialFocus]);
+}
+
+// src/hooks/useStickyScroll.ts
+var React5 = __toESM(require("react"), 1);
 function useStickyScroll(ref, messageCount) {
-  const wasPinnedRef = React4.useRef(true);
-  const [isPinned, setIsPinned] = React4.useState(true);
-  const onScroll = React4.useCallback(() => {
+  const wasPinnedRef = React5.useRef(true);
+  const [isPinned, setIsPinned] = React5.useState(true);
+  const onScroll = React5.useCallback(() => {
     const el = ref.current;
     if (!el) return;
     const pinned = shouldStickToBottom({
@@ -723,14 +755,14 @@ function useStickyScroll(ref, messageCount) {
     wasPinnedRef.current = pinned;
     setIsPinned(pinned);
   }, [ref]);
-  const scrollToBottom = React4.useCallback(() => {
+  const scrollToBottom = React5.useCallback(() => {
     const el = ref.current;
     if (!el) return;
     el.scrollTo({ top: el.scrollHeight, behavior: "auto" });
     wasPinnedRef.current = true;
     setIsPinned(true);
   }, [ref]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!wasPinnedRef.current) return;
     const el = ref.current;
     if (!el) return;
@@ -740,30 +772,30 @@ function useStickyScroll(ref, messageCount) {
 }
 
 // src/hooks/useConversation.ts
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var fallbackId = 0;
 function useConversation(options) {
   const { service, seed, grounding, conversationId, createId } = options;
-  const [state, setState] = React5.useState(() => initialConversation(seed));
-  const [announcement, setAnnouncement] = React5.useState(NO_ANNOUNCEMENT);
-  const abortRef = React5.useRef(null);
-  const stateRef = React5.useRef(state);
+  const [state, setState] = React6.useState(() => initialConversation(seed));
+  const [announcement, setAnnouncement] = React6.useState(NO_ANNOUNCEMENT);
+  const abortRef = React6.useRef(null);
+  const stateRef = React6.useRef(state);
   stateRef.current = state;
-  const nextId = React5.useCallback(
+  const nextId = React6.useCallback(
     () => createId?.() ?? `m${++fallbackId}-${Date.now().toString(36)}`,
     [createId]
   );
-  const commit = React5.useCallback((next) => {
+  const commit = React6.useCallback((next) => {
     const previous = stateRef.current;
     stateRef.current = next;
     setState(next);
     const derived = deriveAnnouncement(next, previous);
     if (derived.polite || derived.assertive) setAnnouncement(derived);
   }, []);
-  const cancel = React5.useCallback(() => {
+  const cancel = React6.useCallback(() => {
     abortRef.current?.abort();
   }, []);
-  const send = React5.useCallback(
+  const send = React6.useCallback(
     async (text, attachments) => {
       if (!text.trim()) return;
       abortRef.current?.abort();
@@ -800,13 +832,13 @@ function useConversation(options) {
     },
     [service, grounding, conversationId, nextId, commit]
   );
-  React5.useEffect(() => () => abortRef.current?.abort(), []);
+  React6.useEffect(() => () => abortRef.current?.abort(), []);
   const busy = state.status === "connecting" || state.status === "streaming";
   return { state, announcement, busy, send, cancel };
 }
 
 // src/conversation/MessageBubble.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_react_components7 = require("@fluentui/react-components");
 
 // src/conversation/StreamingText.tsx
@@ -883,7 +915,7 @@ function ActionToolbar({ actions, label, className }) {
 }
 
 // src/internal/CardSurface.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_react_components4 = require("@fluentui/react-components");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var useStyles3 = (0, import_react_components4.makeStyles)({
@@ -899,7 +931,7 @@ var useStyles3 = (0, import_react_components4.makeStyles)({
   },
   attention: { borderLeft: `3px solid ${import_react_components4.tokens.colorBrandStroke1}` }
 });
-var CardSurface = React6.forwardRef(
+var CardSurface = React7.forwardRef(
   function CardSurface2({ emphasis = "none", className, children, ...rest }, ref) {
     const styles = useStyles3();
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -915,7 +947,7 @@ var CardSurface = React6.forwardRef(
 );
 
 // src/internal/ConfirmInline.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_react_components5 = require("@fluentui/react-components");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var useStyles4 = (0, import_react_components5.makeStyles)({
@@ -926,11 +958,11 @@ var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),textarea:n
 function ConfirmInline(props) {
   const { open, title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive, onConfirm, onCancel } = props;
   const styles = useStyles4();
-  const ref = React7.useRef(null);
-  const returnTo = React7.useRef(null);
-  const titleId = React7.useId();
-  const bodyId = React7.useId();
-  React7.useEffect(() => {
+  const ref = React8.useRef(null);
+  const returnTo = React8.useRef(null);
+  const titleId = React8.useId();
+  const bodyId = React8.useId();
+  React8.useEffect(() => {
     if (!open) return;
     returnTo.current = document.activeElement ?? null;
     const first = ref.current?.querySelector(FOCUSABLE);
@@ -985,7 +1017,7 @@ function ConfirmInline(props) {
 }
 
 // src/internal/Disclosure.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_react_components6 = require("@fluentui/react-components");
 var import_react_icons = require("@fluentui/react-icons");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1013,7 +1045,7 @@ function Disclosure({
   className
 }) {
   const styles = useStyles5();
-  const [open, setOpen] = React8.useState(defaultOpen);
+  const [open, setOpen] = React9.useState(defaultOpen);
   const panelId = `${id}-panel`;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1110,7 +1142,7 @@ function MessageBubble(props) {
   const { message, author, isRunStart = true, locale, ...actionHandlers } = props;
   const styles = useStyles6();
   const hidden = useVisuallyHiddenStyles();
-  const [revealed, setRevealed] = React9.useState(false);
+  const [revealed, setRevealed] = React10.useState(false);
   const own = message.role === "user";
   const name = author?.displayName ?? (own ? "You" : message.provider ?? "Assistant");
   const time = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(new Date(message.createdAt));
@@ -1248,21 +1280,21 @@ function MessageList(props) {
     ...actionHandlers
   } = props;
   const styles = useStyles9();
-  const scrollerRef = React10.useRef(null);
+  const scrollerRef = React11.useRef(null);
   const { onScroll, scrollToBottom, isPinned } = useStickyScroll(scrollerRef, messages.length);
-  const byId = React10.useMemo(
+  const byId = React11.useMemo(
     () => new Map((participants ?? []).map((p) => [p.id, p])),
     [participants]
   );
-  const runStarts = React10.useMemo(() => {
+  const runStarts = React11.useMemo(() => {
     const groups = groupMessages(messages, { windowMs: groupWindowMs, timeZone });
     return new Set(groups.map((g) => g.messageIds[0]));
   }, [messages, groupWindowMs, timeZone]);
-  const buckets = React10.useMemo(
+  const buckets = React11.useMemo(
     () => bucketByDay(messages, { timeZone, now }),
     [messages, timeZone, now]
   );
-  const dividerBefore = React10.useMemo(() => {
+  const dividerBefore = React11.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const bucket of buckets) map.set(bucket.messageIds[0], bucket.label);
     return map;
@@ -1279,7 +1311,7 @@ function MessageList(props) {
         "aria-label": "Conversation",
         tabIndex: 0,
         children: [
-          messages.length === 0 ? emptyState ?? null : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React10.Fragment, { children: [
+          messages.length === 0 ? emptyState ?? null : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React11.Fragment, { children: [
             dividerBefore.has(message.id) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DayDivider, { label: dividerBefore.get(message.id), locale }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MessageBubble,
@@ -1311,7 +1343,7 @@ function MessageList(props) {
 }
 
 // src/conversation/Composer.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_react_components11 = require("@fluentui/react-components");
 var import_react_icons4 = require("@fluentui/react-icons");
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -1398,7 +1430,7 @@ function Composer(props) {
   } = props;
   const styles = useStyles10();
   const vh = useVisuallyHiddenStyles();
-  const hintId = React11.useId();
+  const hintId = React12.useId();
   const submit = () => {
     const text = value.trim();
     if (!text || busy || disabled) return;
@@ -1648,14 +1680,14 @@ function UsageMeter({
 }
 
 // src/ops/ThrottleNotice.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_react_components18 = require("@fluentui/react-components");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ThrottleNotice({ failure, onRetry, now = Date.now }) {
   const retryAfterMs = failure?.retryAfterMs;
   const eligible = Boolean(failure?.recoverable && retryAfterMs && retryAfterMs > 0);
-  const [remaining, setRemaining] = React12.useState(retryAfterMs ?? 0);
-  React12.useEffect(() => {
+  const [remaining, setRemaining] = React13.useState(retryAfterMs ?? 0);
+  React13.useEffect(() => {
     if (!eligible) return;
     const deadline = now() + (retryAfterMs ?? 0);
     setRemaining(retryAfterMs ?? 0);
@@ -1714,7 +1746,7 @@ function AgentPicker({
 }
 
 // src/ops/RunTimeline.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_react_components21 = require("@fluentui/react-components");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var useStyles14 = (0, import_react_components21.makeStyles)({
@@ -1734,7 +1766,7 @@ var TOOL_STATUS = {
 };
 function RunTimeline({ message, defaultOpen = false }) {
   const styles = useStyles14();
-  const id = React13.useId();
+  const id = React14.useId();
   const calls = message.toolCalls ?? [];
   const sources = message.sources ?? [];
   const hasAnything = calls.length > 0 || sources.length > 0 || message.usage || message.failure;
@@ -1842,18 +1874,388 @@ function AgentOpsPanel(props) {
   ] });
 }
 
-// src/shell/AgentAppShell.tsx
-var React14 = __toESM(require("react"), 1);
+// src/support/AgentLauncher.tsx
 var import_react_components24 = require("@fluentui/react-components");
-var import_react_icons6 = require("@fluentui/react-icons");
-var import_v9 = require("@dataverse-kit/surface-kit/v9");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var useStyles17 = (0, import_react_components24.makeStyles)({
+  root: {
+    position: "absolute",
+    top: "30%",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 100
+  },
+  right: { right: 0, alignItems: "flex-end" },
+  left: { left: 0, alignItems: "flex-start" },
+  hidden: { display: "none" },
+  pill: {
+    display: "flex",
+    alignItems: "center",
+    gap: import_react_components24.tokens.spacingHorizontalS,
+    border: "none",
+    cursor: "pointer",
+    padding: `${import_react_components24.tokens.spacingVerticalM} ${import_react_components24.tokens.spacingHorizontalM}`,
+    color: import_react_components24.tokens.colorNeutralForegroundOnBrand,
+    fontFamily: import_react_components24.tokens.fontFamilyBase,
+    fontSize: import_react_components24.tokens.fontSizeBase300,
+    // ★ Collapsed shows the icon only; the LABEL IS STILL IN THE DOM (see below), so the
+    //   expand-on-hover is purely visual and the button is named for AT at every width.
+    maxWidth: "44px",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    transitionProperty: "max-width",
+    transitionDuration: import_react_components24.tokens.durationNormal,
+    ":hover": { maxWidth: "260px" },
+    ":hover .fui-launcher-label": { opacity: 1 },
+    ":focus-within .fui-launcher-label": { opacity: 1 },
+    // ★ :focus-within as well as :hover — a keyboard user must get the same reveal, and this is
+    //   the affordance the M365 reference only shows on pointer hover.
+    ":focus-within": { maxWidth: "260px" },
+    ":focus-visible": { outline: `2px solid ${import_react_components24.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" }
+  },
+  primary: { backgroundColor: import_react_components24.tokens.colorBrandBackground, ":hover": { backgroundColor: import_react_components24.tokens.colorBrandBackgroundHover, maxWidth: "260px" } },
+  secondary: { backgroundColor: import_react_components24.tokens.colorBrandBackgroundStatic, ":hover": { backgroundColor: import_react_components24.tokens.colorBrandBackgroundStatic, maxWidth: "260px" } },
+  firstRight: { borderTopLeftRadius: import_react_components24.tokens.borderRadiusXLarge },
+  lastRight: { borderBottomLeftRadius: import_react_components24.tokens.borderRadiusXLarge },
+  firstLeft: { borderTopRightRadius: import_react_components24.tokens.borderRadiusXLarge },
+  lastLeft: { borderBottomRightRadius: import_react_components24.tokens.borderRadiusXLarge },
+  // ★★ flexShrink BELONGS ON THE ICON, NOT THE TEXT. With it on the text, a collapsed 44px pill
+  //   (20px of content box after padding) gave the unshrinkable label the whole width and squeezed
+  //   the icon to ZERO — so the collapsed rail showed two clipped letters instead of a glyph.
+  //   MEASURED on Chromatic build 18: svgWidth 0, reported as "the content is off screen".
+  icon: { flexShrink: 0, display: "flex", fontSize: "20px", lineHeight: 1 },
+  // ★ The label FADES rather than relying on the clip. `overflow: hidden` cuts at the PADDING box,
+  //   so a 44px pill still showed ~4px of the first letter beside the icon. Opacity keeps the label
+  //   in the accessible name (see the class docstring) while hiding it from sight.
+  text: {
+    flexShrink: 1,
+    minWidth: 0,
+    opacity: 0,
+    transitionProperty: "opacity",
+    transitionDuration: import_react_components24.tokens.durationNormal,
+    "@media (prefers-reduced-motion: reduce)": { transitionDuration: "1ms" }
+  }
+});
+function AgentLauncher({
+  items,
+  onSelect,
+  side = "right",
+  label = "Assistant",
+  hidden = false
+}) {
+  const styles = useStyles17();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      className: (0, import_react_components24.mergeClasses)(styles.root, side === "right" ? styles.right : styles.left, hidden && styles.hidden),
+      role: "group",
+      "aria-label": label,
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(item.id),
+          className: (0, import_react_components24.mergeClasses)(
+            styles.pill,
+            i === 0 ? styles.primary : styles.secondary,
+            i === 0 && (side === "right" ? styles.firstRight : styles.firstLeft),
+            i === items.length - 1 && (side === "right" ? styles.lastRight : styles.lastLeft)
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_react_components24.mergeClasses)(styles.text, "fui-launcher-label"), children: item.label }),
+            item.badgeCount ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_components24.Badge, { appearance: "filled", color: "danger", children: item.badgeCount }) : null
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+
+// src/support/AssistantPanel.tsx
+var React15 = __toESM(require("react"), 1);
+var import_react_components25 = require("@fluentui/react-components");
+var import_react_icons6 = require("@fluentui/react-icons");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var useStyles18 = (0, import_react_components25.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minWidth: "320px",
+    backgroundColor: import_react_components25.tokens.colorNeutralBackground1,
+    borderLeft: `1px solid ${import_react_components25.tokens.colorNeutralStroke2}`,
+    // ★ transform, not width/left — those two lay out on every frame and a transcript is an
+    //   expensive subtree to reflow 60 times a second.
+    transform: "translateX(0)",
+    transitionProperty: "transform",
+    transitionDuration: import_react_components25.tokens.durationGentle,
+    transitionTimingFunction: import_react_components25.tokens.curveDecelerateMid,
+    // ★★ prefers-reduced-motion is honoured, and it is not decoration: a full-height panel
+    //   sliding across the viewport is exactly the vestibular trigger the setting exists for.
+    "@media (prefers-reduced-motion: reduce)": { transitionDuration: "1ms" }
+  },
+  closed: {
+    transform: "translateX(100%)",
+    // ★ Hidden from AT as well as sight. A translated-off panel is still in the a11y tree and
+    //   still tabbable, so a keyboard user would tab into a drawer they cannot see.
+    visibility: "hidden"
+  },
+  header: { display: "flex", alignItems: "center", gap: import_react_components25.tokens.spacingHorizontalS, padding: import_react_components25.tokens.spacingVerticalS },
+  tabstrip: { display: "flex", gap: import_react_components25.tokens.spacingHorizontalXXS, flexGrow: 1 },
+  tab: {
+    display: "flex",
+    alignItems: "center",
+    gap: import_react_components25.tokens.spacingHorizontalXS,
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    padding: `${import_react_components25.tokens.spacingVerticalXS} ${import_react_components25.tokens.spacingHorizontalS}`,
+    color: import_react_components25.tokens.colorNeutralForeground2,
+    fontFamily: import_react_components25.tokens.fontFamilyBase,
+    borderBottom: `2px solid transparent`,
+    ":focus-visible": { outline: `2px solid ${import_react_components25.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" }
+  },
+  tabSelected: { color: import_react_components25.tokens.colorNeutralForeground1, borderBottom: `2px solid ${import_react_components25.tokens.colorCompoundBrandStroke}` },
+  title: { padding: `0 ${import_react_components25.tokens.spacingHorizontalM} ${import_react_components25.tokens.spacingVerticalS}` },
+  status: {
+    padding: `${import_react_components25.tokens.spacingVerticalXS} ${import_react_components25.tokens.spacingHorizontalM}`,
+    color: import_react_components25.tokens.colorNeutralForeground3,
+    fontSize: import_react_components25.tokens.fontSizeBase200
+  },
+  body: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: import_react_components25.tokens.spacingVerticalXS,
+    borderTop: `1px solid ${import_react_components25.tokens.colorNeutralStroke2}`
+  }
+});
+function AssistantPanel(props) {
+  const {
+    title,
+    tabs,
+    activeTabId,
+    onTabChange,
+    onClose,
+    enabled,
+    onEnabledChange,
+    status,
+    onDownloadTranscript,
+    muted,
+    onMutedChange,
+    children,
+    open = true,
+    onDismiss
+  } = props;
+  const styles = useStyles18();
+  const baseId = React15.useId();
+  const rootRef = React15.useRef(null);
+  useReturnFocus({ open, containerRef: rootRef });
+  const selectedIndex = Math.max(0, tabs.findIndex((t) => t.id === activeTabId));
+  const roving = useRovingTabindex({
+    itemCount: tabs.length,
+    orientation: "horizontal",
+    // ★ MANUAL ACTIVATION: arrows move focus, Enter/Space selects. That is what the kit's
+    //   useRovingTabindex does everywhere, and it is the APG pattern for tabs whose panel is not
+    //   free to render. Do not special-case it here; consistency is worth more than the one
+    //   keystroke, and a divergent strip is the kind of thing nobody notices until it is shipped.
+    onActivate: (i) => tabs[i] && onTabChange(tabs[i].id)
+  });
+  const { setActiveIndex } = roving;
+  React15.useEffect(() => {
+    setActiveIndex(selectedIndex);
+  }, [selectedIndex, setActiveIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "section",
+    {
+      ref: rootRef,
+      className: (0, import_react_components25.mergeClasses)(styles.root, !open && styles.closed),
+      "aria-label": title,
+      "aria-hidden": !open || void 0,
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        if (e.key !== "Escape" || !onDismiss) return;
+        e.stopPropagation();
+        onDismiss();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.tabstrip, role: "tablist", "aria-label": `${title} views`, children: tabs.map((tab, i) => {
+            const item = roving.getItemProps(i);
+            const selected = tab.id === activeTabId;
+            return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                id: `${baseId}-tab-${tab.id}`,
+                "aria-selected": selected,
+                "aria-controls": `${baseId}-panel`,
+                className: (0, import_react_components25.mergeClasses)(styles.tab, selected && styles.tabSelected),
+                ...item,
+                onClick: () => {
+                  roving.setActiveIndex(i);
+                  onTabChange(tab.id);
+                },
+                children: [
+                  tab.icon,
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: tab.label })
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          onEnabledChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Switch, { checked: enabled ?? true, onChange: (_, d) => onEnabledChange(d.checked), label: enabled ?? true ? "On" : "Off" }) : null,
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Tooltip, { content: "Close", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons6.DismissRegular, {}), onClick: onClose }) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Text, { as: "h2", size: 600, weight: "semibold", className: styles.title, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: styles.body, id: `${baseId}-panel`, role: "tabpanel", "aria-labelledby": `${baseId}-tab-${activeTabId}`, children: [
+          status ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.status, children: status }) : null,
+          children
+        ] }),
+        onDownloadTranscript || onMutedChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: styles.footer, children: [
+          onDownloadTranscript ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Tooltip, { content: "Download transcript", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons6.ArrowDownloadRegular, {}), onClick: onDownloadTranscript }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
+          onMutedChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Tooltip, { content: muted ? "Unmute" : "Mute", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_react_components25.Button,
+            {
+              appearance: "subtle",
+              "aria-pressed": !!muted,
+              icon: muted ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons6.SpeakerMuteRegular, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons6.Speaker2Regular, {}),
+              onClick: () => onMutedChange(!muted)
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {})
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/support/FeedbackPanel.tsx
+var React16 = __toESM(require("react"), 1);
+var import_react_components26 = require("@fluentui/react-components");
+var import_react_icons7 = require("@fluentui/react-icons");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var STARS = [1, 2, 3, 4, 5];
+var useStyles19 = (0, import_react_components26.makeStyles)({
+  root: { display: "flex", flexDirection: "column", gap: import_react_components26.tokens.spacingVerticalM, padding: import_react_components26.tokens.spacingVerticalL, maxWidth: "680px" },
+  field: { display: "flex", flexDirection: "column", gap: import_react_components26.tokens.spacingVerticalXS },
+  stars: { display: "flex", gap: import_react_components26.tokens.spacingHorizontalXS },
+  star: {
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    padding: import_react_components26.tokens.spacingVerticalXXS,
+    color: import_react_components26.tokens.colorNeutralForeground2,
+    fontSize: "26px",
+    lineHeight: 1,
+    ":focus-visible": { outline: `2px solid ${import_react_components26.tokens.colorStrokeFocus2}`, outlineOffset: "2px" }
+  },
+  starOn: { color: import_react_components26.tokens.colorCompoundBrandForeground1 },
+  footer: { display: "flex", justifyContent: "flex-end", gap: import_react_components26.tokens.spacingHorizontalS },
+  note: { color: import_react_components26.tokens.colorNeutralForeground3, fontSize: import_react_components26.tokens.fontSizeBase200 }
+});
+function FeedbackPanel(props) {
+  const {
+    value,
+    onChange,
+    onSubmit,
+    onCancel,
+    heading = "Send feedback",
+    ratingLabel = "Rate your experience",
+    attachments,
+    privacyNote,
+    busy = false
+  } = props;
+  const styles = useStyles19();
+  const baseId = React16.useId();
+  const roving = useRovingTabindex({
+    itemCount: STARS.length,
+    orientation: "horizontal",
+    onActivate: (i) => onChange({ ...value, rating: i + 1 })
+  });
+  const canSubmit = value.rating > 0 && value.mayContact !== void 0 && !busy;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Text, { as: "h2", size: 600, weight: "semibold", children: heading }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Text, { id: `${baseId}-rating`, children: ratingLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.stars, role: "radiogroup", "aria-labelledby": `${baseId}-rating`, children: STARS.map((n, i) => {
+        const item = roving.getItemProps(i);
+        const on = value.rating >= n;
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value.rating === n,
+            "aria-label": `${n} of 5`,
+            className: (0, import_react_components26.mergeClasses)(styles.star, on && styles.starOn),
+            ...item,
+            onClick: () => {
+              roving.setActiveIndex(i);
+              onChange({ ...value, rating: n });
+            },
+            children: on ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_icons7.StarFilled, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_icons7.StarRegular, {})
+          },
+          n
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Text, { id: `${baseId}-detail`, children: "Explain in more detail" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react_components26.Textarea,
+        {
+          "aria-labelledby": `${baseId}-detail`,
+          placeholder: "Do not include any private or sensitive information.",
+          value: value.comment,
+          onChange: (_, d) => onChange({ ...value, comment: d.value }),
+          resize: "vertical"
+        }
+      )
+    ] }),
+    attachments ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Text, { children: "Add more details" }),
+      attachments
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Text, { id: `${baseId}-consent`, children: "May we contact you about your feedback?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        import_react_components26.RadioGroup,
+        {
+          "aria-labelledby": `${baseId}-consent`,
+          value: value.mayContact === void 0 ? "" : value.mayContact ? "yes" : "no",
+          onChange: (_, d) => onChange({ ...value, mayContact: d.value === "yes" }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Radio, { value: "yes", label: "Yes, you may contact me" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Radio, { value: "no", label: "No, don't contact me" })
+          ]
+        }
+      )
+    ] }),
+    privacyNote ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.note, children: privacyNote }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.footer, children: [
+      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Button, { appearance: "secondary", onClick: onCancel, children: "Cancel" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_components26.Button, { appearance: "primary", disabled: !canSubmit, onClick: () => onSubmit(value), children: "Submit" })
+    ] })
+  ] });
+}
+
+// src/shell/AgentAppShell.tsx
+var React17 = __toESM(require("react"), 1);
+var import_react_components27 = require("@fluentui/react-components");
+var import_react_icons8 = require("@fluentui/react-icons");
+var import_v9 = require("@dataverse-kit/surface-kit/v9");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var useStyles20 = (0, import_react_components27.makeStyles)({
   root: {
     display: "flex",
     height: "100%",
     minHeight: 0,
-    backgroundColor: import_react_components24.tokens.colorNeutralBackground2,
+    backgroundColor: import_react_components27.tokens.colorNeutralBackground2,
     position: "relative",
     overflow: "hidden"
   },
@@ -1861,8 +2263,8 @@ var useStyles17 = (0, import_react_components24.makeStyles)({
     display: "flex",
     flexDirection: "column",
     minHeight: 0,
-    backgroundColor: import_react_components24.tokens.colorNeutralBackground1,
-    borderRight: `1px solid ${import_react_components24.tokens.colorNeutralStroke2}`
+    backgroundColor: import_react_components27.tokens.colorNeutralBackground1,
+    borderRight: `1px solid ${import_react_components27.tokens.colorNeutralStroke2}`
   },
   // Below `md` the list overlays the conversation instead of shrinking it to nothing.
   sidebarOverlay: {
@@ -1871,12 +2273,12 @@ var useStyles17 = (0, import_react_components24.makeStyles)({
     bottom: 0,
     left: 0,
     zIndex: 2,
-    boxShadow: import_react_components24.tokens.shadow16
+    boxShadow: import_react_components27.tokens.shadow16
   },
-  scrim: { position: "absolute", inset: "0", zIndex: 1, backgroundColor: import_react_components24.tokens.colorBackgroundOverlay },
+  scrim: { position: "absolute", inset: "0", zIndex: 1, backgroundColor: import_react_components27.tokens.colorBackgroundOverlay },
   main: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 },
   body: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" },
-  toggle: { position: "absolute", top: import_react_components24.tokens.spacingVerticalS, left: import_react_components24.tokens.spacingHorizontalS, zIndex: 3 }
+  toggle: { position: "absolute", top: import_react_components27.tokens.spacingVerticalS, left: import_react_components27.tokens.spacingHorizontalS, zIndex: 3 }
 });
 function AgentAppShell(props) {
   const {
@@ -1890,7 +2292,7 @@ function AgentAppShell(props) {
     onSidebarOpenChange,
     label = "Agent workspace"
   } = props;
-  const styles = useStyles17();
+  const styles = useStyles20();
   const [containerRef, measuredWidth] = (0, import_v9.useContainerWidth)();
   const width = props.containerWidth ?? (measuredWidth > 0 ? measuredWidth : void 0);
   const effective = width ?? import_v9.BREAKPOINTS.xl;
@@ -1898,17 +2300,17 @@ function AgentAppShell(props) {
   const railVisible = effective >= import_v9.BREAKPOINTS.sm;
   const sidebarInline = effective >= import_v9.BREAKPOINTS.md;
   const rightPaneVisible = effective >= import_v9.BREAKPOINTS.lg;
-  const [uncontrolledOpen, setUncontrolledOpen] = React14.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React17.useState(false);
   const overlayOpen = sidebarOpen ?? uncontrolledOpen;
   const setOverlayOpen = (open) => {
     onSidebarOpenChange?.(open);
     if (sidebarOpen === void 0) setUncontrolledOpen(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: containerRef, className: styles.root, "data-breakpoint": breakpoint, "aria-label": label, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: containerRef, className: styles.root, "data-breakpoint": breakpoint, "aria-label": label, children: [
     rail && railVisible ? rail : null,
-    sidebar && sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.sidebar, style: { width: sidebarWidth }, children: sidebar }) : null,
-    sidebar && !sidebarInline && overlayOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    sidebar && sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.sidebar, style: { width: sidebarWidth }, children: sidebar }) : null,
+    sidebar && !sidebarInline && overlayOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           className: styles.scrim,
@@ -1916,49 +2318,49 @@ function AgentAppShell(props) {
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${styles.sidebar} ${styles.sidebarOverlay}`, style: { width: sidebarWidth }, children: sidebar })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `${styles.sidebar} ${styles.sidebarOverlay}`, style: { width: sidebarWidth }, children: sidebar })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: styles.main, children: [
-      sidebar && !sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        import_react_components24.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.main, children: [
+      sidebar && !sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_react_components27.Button,
         {
           className: styles.toggle,
           size: "small",
           appearance: "subtle",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons6.NavigationRegular, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_icons8.NavigationRegular, {}),
           "aria-label": overlayOpen ? "Hide conversations" : "Show conversations",
           "aria-expanded": overlayOpen,
           onClick: () => setOverlayOpen(!overlayOpen)
         }
       ) : null,
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.body, children })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.body, children })
     ] }),
     rightPaneVisible ? rightPane : null
   ] });
 }
 
 // src/shell/AppRail.tsx
-var import_react_components25 = require("@fluentui/react-components");
-var import_react_icons7 = require("@fluentui/react-icons");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var useStyles18 = (0, import_react_components25.makeStyles)({
+var import_react_components28 = require("@fluentui/react-components");
+var import_react_icons9 = require("@fluentui/react-icons");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var useStyles21 = (0, import_react_components28.makeStyles)({
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: import_react_components25.tokens.spacingVerticalXS,
-    padding: import_react_components25.tokens.spacingVerticalS,
-    backgroundColor: import_react_components25.tokens.colorNeutralBackground3,
-    borderRight: `1px solid ${import_react_components25.tokens.colorNeutralStroke2}`,
+    gap: import_react_components28.tokens.spacingVerticalXS,
+    padding: import_react_components28.tokens.spacingVerticalS,
+    backgroundColor: import_react_components28.tokens.colorNeutralBackground3,
+    borderRight: `1px solid ${import_react_components28.tokens.colorNeutralStroke2}`,
     minHeight: 0
   },
   spacer: { flex: 1 },
   button: {
     position: "relative",
-    ":focus-visible": { outline: `2px solid ${import_react_components25.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
+    ":focus-visible": { outline: `2px solid ${import_react_components28.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
   },
-  selected: { backgroundColor: import_react_components25.tokens.colorNeutralBackground1Selected },
+  selected: { backgroundColor: import_react_components28.tokens.colorNeutralBackground1Selected },
   badge: {
     position: "absolute",
     top: "2px",
@@ -1966,58 +2368,58 @@ var useStyles18 = (0, import_react_components25.makeStyles)({
     minWidth: "16px",
     height: "16px",
     padding: "0 3px",
-    borderRadius: import_react_components25.tokens.borderRadiusCircular,
-    backgroundColor: import_react_components25.tokens.colorPaletteRedBackground3,
-    color: import_react_components25.tokens.colorNeutralForegroundOnBrand,
+    borderRadius: import_react_components28.tokens.borderRadiusCircular,
+    backgroundColor: import_react_components28.tokens.colorPaletteRedBackground3,
+    color: import_react_components28.tokens.colorNeutralForegroundOnBrand,
     fontSize: "10px",
     lineHeight: "16px"
   }
 });
 function AppRail(props) {
   const { items, selectedId, onSelect, maxVisible = 6, label = "Apps", footer } = props;
-  const styles = useStyles18();
+  const styles = useStyles21();
   const visible = items.slice(0, maxVisible);
   const overflow = items.slice(maxVisible);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: styles.root, "aria-label": label, children: [
-    visible.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Tooltip, { content: item.label, relationship: "label", positioning: "after", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_react_components25.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("nav", { className: styles.root, "aria-label": label, children: [
+    visible.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.Tooltip, { content: item.label, relationship: "label", positioning: "after", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_react_components28.Button,
       {
         appearance: "subtle",
         icon: item.icon,
-        className: (0, import_react_components25.mergeClasses)(styles.button, item.id === selectedId && styles.selected),
+        className: (0, import_react_components28.mergeClasses)(styles.button, item.id === selectedId && styles.selected),
         "aria-pressed": item.id === selectedId,
         "aria-label": item.badgeCount ? `${item.label}, ${item.badgeCount} unread` : item.label,
         onClick: () => onSelect(item.id),
-        children: item.badgeCount ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: styles.badge, "aria-hidden": "true", children: item.badgeCount }) : null
+        children: item.badgeCount ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: styles.badge, "aria-hidden": "true", children: item.badgeCount }) : null
       }
     ) }, item.id)),
-    overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_components25.Menu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react_components25.Button,
+    overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_components28.Menu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_react_components28.Button,
         {
           appearance: "subtle",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons7.MoreHorizontalRegular, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons9.MoreHorizontalRegular, {}),
           className: styles.button,
           "aria-label": `More apps, ${overflow.length} hidden`
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuList, { children: overflow.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuItem, { icon: item.icon, onClick: () => onSelect(item.id), children: item.label }, item.id)) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.MenuList, { children: overflow.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.MenuItem, { icon: item.icon, onClick: () => onSelect(item.id), children: item.label }, item.id)) }) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.spacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: styles.spacer }),
     footer
   ] });
 }
 
 // src/shell/ConversationList.tsx
-var React15 = __toESM(require("react"), 1);
-var import_react_components28 = require("@fluentui/react-components");
+var React18 = __toESM(require("react"), 1);
+var import_react_components31 = require("@fluentui/react-components");
 
 // src/shell/ConversationListItem.tsx
-var import_react_components27 = require("@fluentui/react-components");
+var import_react_components30 = require("@fluentui/react-components");
 
 // src/shell/AgentAvatar.tsx
-var import_react_components26 = require("@fluentui/react-components");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react_components29 = require("@fluentui/react-components");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var STATUS = {
   available: "available",
   busy: "busy",
@@ -2028,8 +2430,8 @@ var STATUS = {
 };
 function AgentAvatar({ participant, presence, size = 32, name }) {
   const displayName = name ?? participant?.displayName ?? "Unknown";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react_components26.Avatar,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_react_components29.Avatar,
     {
       name: displayName,
       initials: participant?.initials,
@@ -2042,49 +2444,49 @@ function AgentAvatar({ participant, presence, size = 32, name }) {
 }
 
 // src/shell/ConversationListItem.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var useStyles19 = (0, import_react_components27.makeStyles)({
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var useStyles22 = (0, import_react_components30.makeStyles)({
   row: {
     display: "flex",
-    gap: import_react_components27.tokens.spacingHorizontalS,
+    gap: import_react_components30.tokens.spacingHorizontalS,
     alignItems: "center",
-    padding: `${import_react_components27.tokens.spacingVerticalS} ${import_react_components27.tokens.spacingHorizontalS}`,
-    borderRadius: import_react_components27.tokens.borderRadiusMedium,
+    padding: `${import_react_components30.tokens.spacingVerticalS} ${import_react_components30.tokens.spacingHorizontalS}`,
+    borderRadius: import_react_components30.tokens.borderRadiusMedium,
     cursor: "pointer",
-    ":hover": { backgroundColor: import_react_components27.tokens.colorNeutralBackground1Hover }
+    ":hover": { backgroundColor: import_react_components30.tokens.colorNeutralBackground1Hover }
   },
   // ★ The ACTIVE row (aria-activedescendant target) gets a visible focus indicator, because
   //   real DOM focus stays on the listbox — without this the keyboard user sees nothing move.
-  active: { outline: `2px solid ${import_react_components27.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" },
-  selected: { backgroundColor: import_react_components27.tokens.colorNeutralBackground1Selected },
+  active: { outline: `2px solid ${import_react_components30.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" },
+  selected: { backgroundColor: import_react_components30.tokens.colorNeutralBackground1Selected },
   body: { flex: 1, minWidth: 0 },
   title: {
     display: "block",
-    fontSize: import_react_components27.tokens.fontSizeBase300,
-    fontWeight: import_react_components27.tokens.fontWeightSemibold,
+    fontSize: import_react_components30.tokens.fontSizeBase300,
+    fontWeight: import_react_components30.tokens.fontWeightSemibold,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  muted: { fontWeight: import_react_components27.tokens.fontWeightRegular, color: import_react_components27.tokens.colorNeutralForeground3 },
+  muted: { fontWeight: import_react_components30.tokens.fontWeightRegular, color: import_react_components30.tokens.colorNeutralForeground3 },
   preview: {
     display: "block",
-    fontSize: import_react_components27.tokens.fontSizeBase200,
-    color: import_react_components27.tokens.colorNeutralForeground3,
+    fontSize: import_react_components30.tokens.fontSizeBase200,
+    color: import_react_components30.tokens.colorNeutralForeground3,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   meta: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "2px" },
-  time: { fontSize: import_react_components27.tokens.fontSizeBase100, color: import_react_components27.tokens.colorNeutralForeground3 },
+  time: { fontSize: import_react_components30.tokens.fontSizeBase100, color: import_react_components30.tokens.colorNeutralForeground3 },
   unread: {
     minWidth: "18px",
     height: "18px",
-    padding: `0 ${import_react_components27.tokens.spacingHorizontalXXS}`,
-    borderRadius: import_react_components27.tokens.borderRadiusCircular,
-    backgroundColor: import_react_components27.tokens.colorBrandBackground,
-    color: import_react_components27.tokens.colorNeutralForegroundOnBrand,
-    fontSize: import_react_components27.tokens.fontSizeBase100,
+    padding: `0 ${import_react_components30.tokens.spacingHorizontalXXS}`,
+    borderRadius: import_react_components30.tokens.borderRadiusCircular,
+    backgroundColor: import_react_components30.tokens.colorBrandBackground,
+    color: import_react_components30.tokens.colorNeutralForegroundOnBrand,
+    fontSize: import_react_components30.tokens.fontSizeBase100,
     lineHeight: "18px",
     textAlign: "center"
   }
@@ -2103,27 +2505,27 @@ function conversationAccessibleName(summary, locale) {
 }
 function ConversationListItem(props) {
   const { summary, selected, active, id, locale, onSelect } = props;
-  const styles = useStyles19();
+  const styles = useStyles22();
   const time = summary.timestamp ? new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(new Date(summary.timestamp)) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       id,
       role: "option",
       "aria-selected": selected,
       "aria-label": conversationAccessibleName(summary, locale),
-      className: (0, import_react_components27.mergeClasses)(styles.row, selected && styles.selected, active && styles.active),
+      className: (0, import_react_components30.mergeClasses)(styles.row, selected && styles.selected, active && styles.active),
       onClick: () => onSelect(summary.id),
       "data-conversation-option": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.body, "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: (0, import_react_components27.mergeClasses)(styles.title, summary.muted && styles.muted), children: summary.title }),
-          summary.preview ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.preview, children: summary.preview }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: styles.body, "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: (0, import_react_components30.mergeClasses)(styles.title, summary.muted && styles.muted), children: summary.title }),
+          summary.preview ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: styles.preview, children: summary.preview }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.meta, "aria-hidden": "true", children: [
-          time ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.time, children: time }) : null,
-          !summary.muted && summary.unreadCount ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.unread, children: summary.unreadCount }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: styles.meta, "aria-hidden": "true", children: [
+          time ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: styles.time, children: time }) : null,
+          !summary.muted && summary.unreadCount ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: styles.unread, children: summary.unreadCount }) : null
         ] })
       ]
     }
@@ -2131,27 +2533,27 @@ function ConversationListItem(props) {
 }
 
 // src/shell/ConversationList.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var useStyles20 = (0, import_react_components28.makeStyles)({
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var useStyles23 = (0, import_react_components31.makeStyles)({
   root: {
     display: "flex",
     flexDirection: "column",
     gap: "2px",
-    padding: import_react_components28.tokens.spacingHorizontalXS,
+    padding: import_react_components31.tokens.spacingHorizontalXS,
     overflowY: "auto",
     minHeight: 0,
-    ":focus-visible": { outline: `2px solid ${import_react_components28.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" }
+    ":focus-visible": { outline: `2px solid ${import_react_components31.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" }
   },
-  empty: { padding: import_react_components28.tokens.spacingVerticalM, color: import_react_components28.tokens.colorNeutralForeground3 }
+  empty: { padding: import_react_components31.tokens.spacingVerticalM, color: import_react_components31.tokens.colorNeutralForeground3 }
 });
 function ConversationList(props) {
   const { items, selectedId, onSelect, label = "Conversations", locale, empty } = props;
-  const styles = useStyles20();
-  const listRef = React15.useRef(null);
-  const idBase = React15.useId();
+  const styles = useStyles23();
+  const listRef = React18.useRef(null);
+  const idBase = React18.useId();
   const selectedIndex = Math.max(0, items.findIndex((i) => i.id === selectedId));
-  const [active, setActive] = React15.useState(selectedIndex);
-  React15.useEffect(() => {
+  const [active, setActive] = React18.useState(selectedIndex);
+  React18.useEffect(() => {
     setActive((current) => {
       if (items.length === 0) return 0;
       if (selectedIndex >= 0 && items[selectedIndex]) return selectedIndex;
@@ -2159,7 +2561,7 @@ function ConversationList(props) {
     });
   }, [selectedIndex, items]);
   const optionId = (index) => `${idBase}-opt-${index}`;
-  React15.useEffect(() => {
+  React18.useEffect(() => {
     const el = listRef.current?.ownerDocument.getElementById(optionId(active));
     el?.scrollIntoView?.({ block: "nearest" });
   }, [active, idBase]);
@@ -2182,9 +2584,9 @@ function ConversationList(props) {
     setActive(next);
   };
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: styles.root, children: empty ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.Text, { className: styles.empty, size: 200, children: "No conversations yet." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.root, children: empty ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_components31.Text, { className: styles.empty, size: 200, children: "No conversations yet." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ref: listRef,
@@ -2194,7 +2596,7 @@ function ConversationList(props) {
       tabIndex: 0,
       "aria-activedescendant": optionId(active),
       onKeyDown,
-      children: items.map((summary, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: items.map((summary, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         ConversationListItem,
         {
           id: optionId(index),
@@ -2211,24 +2613,24 @@ function ConversationList(props) {
 }
 
 // src/shell/ConversationHeader.tsx
-var import_react_components29 = require("@fluentui/react-components");
-var import_react_icons8 = require("@fluentui/react-icons");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var useStyles21 = (0, import_react_components29.makeStyles)({
+var import_react_components32 = require("@fluentui/react-components");
+var import_react_icons10 = require("@fluentui/react-icons");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var useStyles24 = (0, import_react_components32.makeStyles)({
   root: {
     display: "flex",
     flexDirection: "column",
-    gap: import_react_components29.tokens.spacingVerticalXS,
-    padding: `${import_react_components29.tokens.spacingVerticalS} ${import_react_components29.tokens.spacingHorizontalM} 0`,
-    borderBottom: `1px solid ${import_react_components29.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components29.tokens.colorNeutralBackground1
+    gap: import_react_components32.tokens.spacingVerticalXS,
+    padding: `${import_react_components32.tokens.spacingVerticalS} ${import_react_components32.tokens.spacingHorizontalM} 0`,
+    borderBottom: `1px solid ${import_react_components32.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components32.tokens.colorNeutralBackground1
   },
-  top: { display: "flex", alignItems: "center", gap: import_react_components29.tokens.spacingHorizontalS },
-  identity: { display: "flex", alignItems: "center", gap: import_react_components29.tokens.spacingHorizontalS, minWidth: 0 },
+  top: { display: "flex", alignItems: "center", gap: import_react_components32.tokens.spacingHorizontalS },
+  identity: { display: "flex", alignItems: "center", gap: import_react_components32.tokens.spacingHorizontalS, minWidth: 0 },
   titles: { display: "flex", flexDirection: "column", minWidth: 0 },
-  subtitle: { color: import_react_components29.tokens.colorNeutralForeground3, fontSize: import_react_components29.tokens.fontSizeBase200 },
+  subtitle: { color: import_react_components32.tokens.colorNeutralForeground3, fontSize: import_react_components32.tokens.fontSizeBase200 },
   spacer: { flex: 1 },
-  tabRow: { display: "flex", alignItems: "flex-end", gap: import_react_components29.tokens.spacingHorizontalS }
+  tabRow: { display: "flex", alignItems: "flex-end", gap: import_react_components32.tokens.spacingHorizontalS }
 });
 function ConversationHeader(props) {
   const {
@@ -2242,22 +2644,22 @@ function ConversationHeader(props) {
     actions,
     trailing
   } = props;
-  const styles = useStyles21();
+  const styles = useStyles24();
   const inline = (actions ?? []).slice(0, 2);
   const overflow = (actions ?? []).slice(2);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.top, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.identity, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AgentAvatar, { participant, presence, size: 32, name: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.titles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.Text, { weight: "semibold", truncate: true, wrap: false, children: title }),
-          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: styles.subtitle, children: subtitle }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.top, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.identity, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AgentAvatar, { participant, presence, size: 32, name: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.titles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.Text, { weight: "semibold", truncate: true, wrap: false, children: title }),
+          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: styles.subtitle, children: subtitle }) : null
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: styles.spacer }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.spacer }),
       trailing,
-      inline.map((action) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_react_components29.Button,
+      inline.map((action) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_react_components32.Button,
         {
           appearance: "subtle",
           size: "small",
@@ -2267,80 +2669,80 @@ function ConversationHeader(props) {
         },
         action.key
       )),
-      overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_components29.Menu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_react_components29.Button,
+      overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_components32.Menu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_react_components32.Button,
           {
             appearance: "subtle",
             size: "small",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons8.MoreHorizontalRegular, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons10.MoreHorizontalRegular, {}),
             "aria-label": `More actions, ${overflow.length} available`
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuList, { children: overflow.map((action) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuItem, { icon: action.icon, onClick: action.onClick, children: action.label }, action.key)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.MenuList, { children: overflow.map((action) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.MenuItem, { icon: action.icon, onClick: action.onClick, children: action.label }, action.key)) }) })
       ] }) : null
     ] }),
-    tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: styles.tabRow, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_react_components29.TabList,
+    tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.tabRow, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_react_components32.TabList,
       {
         selectedValue: selectedTabId,
         onTabSelect: (_, data) => onTabSelect?.(data.value),
         size: "small",
-        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.Tab, { value: tab.id, children: tab.label }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.Tab, { value: tab.id, children: tab.label }, tab.id))
       }
     ) }) : null
   ] });
 }
 
 // src/shell/RightPane.tsx
-var React16 = __toESM(require("react"), 1);
-var import_react_components30 = require("@fluentui/react-components");
-var import_react_icons9 = require("@fluentui/react-icons");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var useStyles22 = (0, import_react_components30.makeStyles)({
+var React19 = __toESM(require("react"), 1);
+var import_react_components33 = require("@fluentui/react-components");
+var import_react_icons11 = require("@fluentui/react-icons");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var useStyles25 = (0, import_react_components33.makeStyles)({
   root: {
     display: "flex",
     flexDirection: "column",
-    borderLeft: `1px solid ${import_react_components30.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components30.tokens.colorNeutralBackground1,
+    borderLeft: `1px solid ${import_react_components33.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components33.tokens.colorNeutralBackground1,
     minHeight: 0
   },
   head: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: import_react_components30.tokens.spacingHorizontalS,
-    padding: import_react_components30.tokens.spacingVerticalS,
-    borderBottom: `1px solid ${import_react_components30.tokens.colorNeutralStroke2}`
+    gap: import_react_components33.tokens.spacingHorizontalS,
+    padding: import_react_components33.tokens.spacingVerticalS,
+    borderBottom: `1px solid ${import_react_components33.tokens.colorNeutralStroke2}`
   },
-  body: { flex: 1, overflowY: "auto", padding: import_react_components30.tokens.spacingVerticalM }
+  body: { flex: 1, overflowY: "auto", padding: import_react_components33.tokens.spacingVerticalM }
 });
 function RightPane({ open, title, onClose, children, width = 320 }) {
-  const styles = useStyles22();
-  const labelId = React16.useId();
+  const styles = useStyles25();
+  const labelId = React19.useId();
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("aside", { className: styles.root, style: { width }, "aria-labelledby": labelId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: styles.head, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_components30.Text, { id: labelId, weight: "semibold", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_react_components30.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("aside", { className: styles.root, style: { width }, "aria-labelledby": labelId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.head, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_components33.Text, { id: labelId, weight: "semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        import_react_components33.Button,
         {
           appearance: "subtle",
           size: "small",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_icons9.DismissRegular, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_icons11.DismissRegular, {}),
           onClick: onClose,
           "aria-label": `Close ${title}`
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: styles.body, children })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.body, children })
   ] });
 }
 
 // src/shell/GlobalSearchBar.tsx
-var import_react_components31 = require("@fluentui/react-components");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var useStyles23 = (0, import_react_components31.makeStyles)({
+var import_react_components34 = require("@fluentui/react-components");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var useStyles26 = (0, import_react_components34.makeStyles)({
   root: { width: "100%", maxWidth: "640px" }
 });
 function GlobalSearchBar({
@@ -2349,9 +2751,9 @@ function GlobalSearchBar({
   onSubmit,
   placeholder = "Search conversations"
 }) {
-  const styles = useStyles23();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_react_components31.SearchBox,
+  const styles = useStyles26();
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_react_components34.SearchBox,
     {
       className: styles.root,
       value,
@@ -2366,86 +2768,86 @@ function GlobalSearchBar({
 }
 
 // src/grounding/CitationChip.tsx
-var import_react_components32 = require("@fluentui/react-components");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var useStyles24 = (0, import_react_components32.makeStyles)({
+var import_react_components35 = require("@fluentui/react-components");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var useStyles27 = (0, import_react_components35.makeStyles)({
   chip: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     minWidth: "18px",
     height: "18px",
-    padding: `0 ${import_react_components32.tokens.spacingHorizontalXXS}`,
+    padding: `0 ${import_react_components35.tokens.spacingHorizontalXXS}`,
     marginLeft: "2px",
     verticalAlign: "super",
-    fontSize: import_react_components32.tokens.fontSizeBase100,
+    fontSize: import_react_components35.tokens.fontSizeBase100,
     lineHeight: "18px",
-    borderRadius: import_react_components32.tokens.borderRadiusSmall,
-    border: `1px solid ${import_react_components32.tokens.colorNeutralStroke2}`,
-    backgroundColor: import_react_components32.tokens.colorNeutralBackground3,
-    color: import_react_components32.tokens.colorNeutralForeground2,
+    borderRadius: import_react_components35.tokens.borderRadiusSmall,
+    border: `1px solid ${import_react_components35.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components35.tokens.colorNeutralBackground3,
+    color: import_react_components35.tokens.colorNeutralForeground2,
     cursor: "pointer",
-    ":hover": { backgroundColor: import_react_components32.tokens.colorNeutralBackground3Hover },
-    ":focus-visible": { outline: `2px solid ${import_react_components32.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
+    ":hover": { backgroundColor: import_react_components35.tokens.colorNeutralBackground3Hover },
+    ":focus-visible": { outline: `2px solid ${import_react_components35.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
   },
   inert: { cursor: "default" }
 });
 function CitationChip({ marker, source, onOpen }) {
-  const styles = useStyles24();
+  const styles = useStyles27();
   const label = source ? `Source ${marker}: ${source.title}` : `Source ${marker}`;
   if (!source || !onOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `${styles.chip} ${styles.inert}`, "aria-label": label, children: marker });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `${styles.chip} ${styles.inert}`, "aria-label": label, children: marker });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.Tooltip, { content: source.title, relationship: "description", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: styles.chip, "aria-label": label, onClick: () => onOpen(source), children: marker }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_components35.Tooltip, { content: source.title, relationship: "description", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: styles.chip, "aria-label": label, onClick: () => onOpen(source), children: marker }) });
 }
 
 // src/grounding/CitationList.tsx
-var React17 = __toESM(require("react"), 1);
-var import_react_components34 = require("@fluentui/react-components");
+var React20 = __toESM(require("react"), 1);
+var import_react_components37 = require("@fluentui/react-components");
 
 // src/grounding/SourceCard.tsx
-var import_react_components33 = require("@fluentui/react-components");
-var import_react_icons10 = require("@fluentui/react-icons");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react_components36 = require("@fluentui/react-components");
+var import_react_icons12 = require("@fluentui/react-icons");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var ICONS = {
-  dataverse: import_react_icons10.DatabaseRegular,
-  document: import_react_icons10.DocumentRegular,
-  web: import_react_icons10.GlobeRegular,
-  knowledge: import_react_icons10.BookRegular,
-  other: import_react_icons10.DocumentBulletListRegular
+  dataverse: import_react_icons12.DatabaseRegular,
+  document: import_react_icons12.DocumentRegular,
+  web: import_react_icons12.GlobeRegular,
+  knowledge: import_react_icons12.BookRegular,
+  other: import_react_icons12.DocumentBulletListRegular
 };
-var useStyles25 = (0, import_react_components33.makeStyles)({
-  root: { gap: import_react_components33.tokens.spacingVerticalXXS },
-  head: { display: "flex", alignItems: "center", gap: import_react_components33.tokens.spacingHorizontalXS },
-  marker: { color: import_react_components33.tokens.colorNeutralForeground3, fontSize: import_react_components33.tokens.fontSizeBase200 },
-  snippet: { color: import_react_components33.tokens.colorNeutralForeground2, fontSize: import_react_components33.tokens.fontSizeBase200 },
-  meta: { display: "flex", alignItems: "center", gap: import_react_components33.tokens.spacingHorizontalS, marginTop: import_react_components33.tokens.spacingVerticalXXS }
+var useStyles28 = (0, import_react_components36.makeStyles)({
+  root: { gap: import_react_components36.tokens.spacingVerticalXXS },
+  head: { display: "flex", alignItems: "center", gap: import_react_components36.tokens.spacingHorizontalXS },
+  marker: { color: import_react_components36.tokens.colorNeutralForeground3, fontSize: import_react_components36.tokens.fontSizeBase200 },
+  snippet: { color: import_react_components36.tokens.colorNeutralForeground2, fontSize: import_react_components36.tokens.fontSizeBase200 },
+  meta: { display: "flex", alignItems: "center", gap: import_react_components36.tokens.spacingHorizontalS, marginTop: import_react_components36.tokens.spacingVerticalXXS }
 });
 function SourceCard({ source, marker, onOpen, showSnippet = true }) {
-  const styles = useStyles25();
+  const styles = useStyles28();
   const Icon = ICONS[source.kind] ?? ICONS.other;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CardSurface, { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.head, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { "aria-hidden": "true" }),
-      marker ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: styles.marker, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(CardSurface, { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.head, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { "aria-hidden": "true" }),
+      marker ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: styles.marker, children: [
         "[",
         marker,
         "]"
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_components33.Text, { weight: "semibold", children: source.title })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_components36.Text, { weight: "semibold", children: source.title })
     ] }),
-    showSnippet && source.snippet ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: styles.snippet, children: source.snippet }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.meta, children: [
-      onOpen && (source.recordId || source.url) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_components33.Button, { size: "small", appearance: "subtle", onClick: () => onOpen(source), children: source.recordId ? "Open record" : "Open" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: styles.snippet, children: source.score === void 0 ? "Relevance not reported" : `Relevance ${Math.round(source.score * 100)}%` })
+    showSnippet && source.snippet ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.snippet, children: source.snippet }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.meta, children: [
+      onOpen && (source.recordId || source.url) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_components36.Button, { size: "small", appearance: "subtle", onClick: () => onOpen(source), children: source.recordId ? "Open record" : "Open" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.snippet, children: source.score === void 0 ? "Relevance not reported" : `Relevance ${Math.round(source.score * 100)}%` })
     ] })
   ] });
 }
 
 // src/grounding/CitationList.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var useStyles26 = (0, import_react_components34.makeStyles)({
-  list: { display: "flex", flexDirection: "column", gap: import_react_components34.tokens.spacingVerticalXS, listStyle: "none", margin: 0, padding: 0 }
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var useStyles29 = (0, import_react_components37.makeStyles)({
+  list: { display: "flex", flexDirection: "column", gap: import_react_components37.tokens.spacingVerticalXS, listStyle: "none", margin: 0, padding: 0 }
 });
 function CitationList({
   text,
@@ -2453,38 +2855,38 @@ function CitationList({
   onOpenSource,
   defaultOpen = false
 }) {
-  const styles = useStyles26();
-  const id = React17.useId();
-  const { used, citations } = React17.useMemo(() => renumberCitations(text, sources), [text, sources]);
+  const styles = useStyles29();
+  const id = React20.useId();
+  const { used, citations } = React20.useMemo(() => renumberCitations(text, sources), [text, sources]);
   if (used.length === 0) return null;
   const markerFor = (sourceId) => citations.find((c) => c.sourceId === sourceId)?.marker;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Disclosure,
     {
       id,
       defaultOpen,
       summary: `${used.length} source${used.length === 1 ? "" : "s"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: styles.list, children: used.map((source) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SourceCard, { source, marker: markerFor(source.id), onOpen: onOpenSource }) }, source.id)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: styles.list, children: used.map((source) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SourceCard, { source, marker: markerFor(source.id), onOpen: onOpenSource }) }, source.id)) })
     }
   );
 }
 
 // src/grounding/AnswerWithCitations.tsx
-var React18 = __toESM(require("react"), 1);
-var import_react_components35 = require("@fluentui/react-components");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var useStyles27 = (0, import_react_components35.makeStyles)({ root: { whiteSpace: "pre-wrap", wordBreak: "break-word" } });
+var React21 = __toESM(require("react"), 1);
+var import_react_components38 = require("@fluentui/react-components");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var useStyles30 = (0, import_react_components38.makeStyles)({ root: { whiteSpace: "pre-wrap", wordBreak: "break-word" } });
 function AnswerWithCitations({
   text,
   citations = [],
   sources = [],
   onOpenSource
 }) {
-  const styles = useStyles27();
-  const segments = React18.useMemo(() => splitTextByCitations(text, citations), [text, citations]);
-  const byId = React18.useMemo(() => new Map(sources.map((s) => [s.id, s])), [sources]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: styles.root, children: segments.map(
-    (segment, i) => segment.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(React18.Fragment, { children: segment.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  const styles = useStyles30();
+  const segments = React21.useMemo(() => splitTextByCitations(text, citations), [text, citations]);
+  const byId = React21.useMemo(() => new Map(sources.map((s) => [s.id, s])), [sources]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.root, children: segments.map(
+    (segment, i) => segment.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(React21.Fragment, { children: segment.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       CitationChip,
       {
         marker: segment.marker ?? "",
@@ -2497,20 +2899,20 @@ function AnswerWithCitations({
 }
 
 // src/grounding/GroundingPanel.tsx
-var React19 = __toESM(require("react"), 1);
-var import_react_components36 = require("@fluentui/react-components");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var useStyles28 = (0, import_react_components36.makeStyles)({
+var React22 = __toESM(require("react"), 1);
+var import_react_components39 = require("@fluentui/react-components");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var useStyles31 = (0, import_react_components39.makeStyles)({
   grid: {
     display: "grid",
     gridTemplateColumns: "minmax(96px, max-content) 1fr",
-    gap: `${import_react_components36.tokens.spacingVerticalXXS} ${import_react_components36.tokens.spacingHorizontalM}`,
+    gap: `${import_react_components39.tokens.spacingVerticalXXS} ${import_react_components39.tokens.spacingHorizontalM}`,
     margin: 0,
-    fontSize: import_react_components36.tokens.fontSizeBase200
+    fontSize: import_react_components39.tokens.fontSizeBase200
   },
-  key: { color: import_react_components36.tokens.colorNeutralForeground3, margin: 0 },
-  value: { margin: 0, wordBreak: "break-word", fontFamily: import_react_components36.tokens.fontFamilyMonospace },
-  empty: { fontSize: import_react_components36.tokens.fontSizeBase200, color: import_react_components36.tokens.colorNeutralForeground3 }
+  key: { color: import_react_components39.tokens.colorNeutralForeground3, margin: 0 },
+  value: { margin: 0, wordBreak: "break-word", fontFamily: import_react_components39.tokens.fontFamilyMonospace },
+  empty: { fontSize: import_react_components39.tokens.fontSizeBase200, color: import_react_components39.tokens.colorNeutralForeground3 }
 });
 function render(value) {
   if (value === null || value === void 0) return "\u2014";
@@ -2522,45 +2924,45 @@ function GroundingPanel({
   title = "What this answer used",
   defaultOpen = false
 }) {
-  const styles = useStyles28();
-  const id = React19.useId();
+  const styles = useStyles31();
+  const id = React22.useId();
   const entries = Object.entries(grounding ?? {});
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Disclosure, { id, defaultOpen, summary: title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dl", { className: styles.grid, children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(React19.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { className: styles.key, children: key }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { className: styles.value, children: render(value) })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Disclosure, { id, defaultOpen, summary: title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dl", { className: styles.grid, children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { className: styles.key, children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { className: styles.value, children: render(value) })
     ] }, key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_components36.Text, { as: "p", className: styles.empty, children: "These facts were supplied by the app, not produced by the model." })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_components39.Text, { as: "p", className: styles.empty, children: "These facts were supplied by the app, not produced by the model." })
   ] });
 }
 
 // src/grounding/ProviderAttribution.tsx
-var import_react_components37 = require("@fluentui/react-components");
-var import_react_icons11 = require("@fluentui/react-icons");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var useStyles29 = (0, import_react_components37.makeStyles)({
+var import_react_components40 = require("@fluentui/react-components");
+var import_react_icons13 = require("@fluentui/react-icons");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var useStyles32 = (0, import_react_components40.makeStyles)({
   root: {
     display: "flex",
     alignItems: "center",
-    gap: import_react_components37.tokens.spacingHorizontalXXS,
-    fontSize: import_react_components37.tokens.fontSizeBase100,
-    color: import_react_components37.tokens.colorNeutralForeground3
+    gap: import_react_components40.tokens.spacingHorizontalXXS,
+    fontSize: import_react_components40.tokens.fontSizeBase100,
+    color: import_react_components40.tokens.colorNeutralForeground3
   },
-  guarded: { color: import_react_components37.tokens.colorPaletteDarkOrangeForeground1 }
+  guarded: { color: import_react_components40.tokens.colorPaletteDarkOrangeForeground1 }
 });
 function ProviderAttribution({ provider, model, guarded }) {
-  const styles = useStyles29();
+  const styles = useStyles32();
   if (!provider && !model && !guarded) return null;
   const who = [provider, model].filter(Boolean).join(" \xB7 ");
   if (guarded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: `${styles.root} ${styles.guarded}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons11.ShieldErrorRegular, { "aria-hidden": "true" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: `${styles.root} ${styles.guarded}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_icons13.ShieldErrorRegular, { "aria-hidden": "true" }),
       "Withheld and replaced with safe text",
       who ? ` \u2014 not ${who}'s words` : ""
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: styles.root, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: styles.root, children: [
     "Answered by ",
     who || "the agent"
   ] });
@@ -2570,57 +2972,57 @@ function messageAttribution(message) {
 }
 
 // src/actions/ActionCard.tsx
-var React20 = __toESM(require("react"), 1);
-var import_react_components38 = require("@fluentui/react-components");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var useStyles30 = (0, import_react_components38.makeStyles)({
-  head: { display: "flex", alignItems: "center", gap: import_react_components38.tokens.spacingHorizontalXS },
-  description: { color: import_react_components38.tokens.colorNeutralForeground2, fontSize: import_react_components38.tokens.fontSizeBase200 },
-  footer: { display: "flex", gap: import_react_components38.tokens.spacingHorizontalS, justifyContent: "flex-end", marginTop: import_react_components38.tokens.spacingVerticalXS }
+var React23 = __toESM(require("react"), 1);
+var import_react_components41 = require("@fluentui/react-components");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var useStyles33 = (0, import_react_components41.makeStyles)({
+  head: { display: "flex", alignItems: "center", gap: import_react_components41.tokens.spacingHorizontalXS },
+  description: { color: import_react_components41.tokens.colorNeutralForeground2, fontSize: import_react_components41.tokens.fontSizeBase200 },
+  footer: { display: "flex", gap: import_react_components41.tokens.spacingHorizontalS, justifyContent: "flex-end", marginTop: import_react_components41.tokens.spacingVerticalXS }
 });
 function ActionCard({ title, description, icon, pending, children, footer }) {
-  const styles = useStyles30();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(CardSurface, { emphasis: pending ? "attention" : "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.head, children: [
-      icon ? React20.cloneElement(icon, { "aria-hidden": "true" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_components38.Text, { weight: "semibold", children: title })
+  const styles = useStyles33();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(CardSurface, { emphasis: pending ? "attention" : "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.head, children: [
+      icon ? React23.cloneElement(icon, { "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Text, { weight: "semibold", children: title })
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.description, children: description }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: styles.description, children: description }) : null,
     children,
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: styles.footer, children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: styles.footer, children: footer }) : null
   ] });
 }
 
 // src/actions/ApprovalCard.tsx
-var React22 = __toESM(require("react"), 1);
-var import_react_components41 = require("@fluentui/react-components");
-var import_react_icons12 = require("@fluentui/react-icons");
+var React25 = __toESM(require("react"), 1);
+var import_react_components44 = require("@fluentui/react-components");
+var import_react_icons14 = require("@fluentui/react-icons");
 
 // src/actions/ParameterReview.tsx
-var React21 = __toESM(require("react"), 1);
-var import_react_components39 = require("@fluentui/react-components");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var useStyles31 = (0, import_react_components39.makeStyles)({
+var React24 = __toESM(require("react"), 1);
+var import_react_components42 = require("@fluentui/react-components");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var useStyles34 = (0, import_react_components42.makeStyles)({
   grid: {
     display: "grid",
     gridTemplateColumns: "minmax(110px, max-content) 1fr",
-    gap: `${import_react_components39.tokens.spacingVerticalXS} ${import_react_components39.tokens.spacingHorizontalM}`,
+    gap: `${import_react_components42.tokens.spacingVerticalXS} ${import_react_components42.tokens.spacingHorizontalM}`,
     alignItems: "center",
     margin: 0
   },
-  key: { margin: 0, color: import_react_components39.tokens.colorNeutralForeground2, fontSize: import_react_components39.tokens.fontSizeBase200 },
+  key: { margin: 0, color: import_react_components42.tokens.colorNeutralForeground2, fontSize: import_react_components42.tokens.fontSizeBase200 },
   value: { margin: 0 },
   raw: {
     whiteSpace: "pre-wrap",
     wordBreak: "break-all",
-    fontFamily: import_react_components39.tokens.fontFamilyMonospace,
-    fontSize: import_react_components39.tokens.fontSizeBase200,
-    color: import_react_components39.tokens.colorNeutralForeground2
+    fontFamily: import_react_components42.tokens.fontFamilyMonospace,
+    fontSize: import_react_components42.tokens.fontSizeBase200,
+    color: import_react_components42.tokens.colorNeutralForeground2
   }
 });
 function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
-  const styles = useStyles31();
-  const parsed = React21.useMemo(() => {
+  const styles = useStyles34();
+  const parsed = React24.useMemo(() => {
     try {
       const value = JSON.parse(argumentsJson);
       return value && typeof value === "object" && !Array.isArray(value) ? value : null;
@@ -2629,19 +3031,19 @@ function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
     }
   }, [argumentsJson]);
   if (!parsed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_components39.Text, { size: 200, children: "Arguments (unparsed)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("pre", { className: styles.raw, children: argumentsJson || "(empty)" })
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_components42.Text, { size: 200, children: "Arguments (unparsed)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("pre", { className: styles.raw, children: argumentsJson || "(empty)" })
     ] });
   }
   const set = (key, next) => {
     if (!onChange) return;
     onChange(JSON.stringify({ ...parsed, [key]: next }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dl", { className: styles.grid, children: Object.entries(parsed).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { className: styles.key, children: key }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { className: styles.value, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: styles.raw, children: typeof value === "string" ? value : JSON.stringify(value) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_react_components39.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dl", { className: styles.grid, children: Object.entries(parsed).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(React24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dt", { className: styles.key, children: key }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dd", { className: styles.value, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: styles.raw, children: typeof value === "string" ? value : JSON.stringify(value) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_react_components42.Input,
       {
         size: "small",
         "aria-label": key,
@@ -2653,32 +3055,32 @@ function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
 }
 
 // src/actions/ActionResult.tsx
-var import_react_components40 = require("@fluentui/react-components");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react_components43 = require("@fluentui/react-components");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var INTENT2 = { succeeded: "success", failed: "error", denied: "warning" };
 var TITLE = { succeeded: "Done", failed: "Failed", denied: "Not approved" };
-var useStyles32 = (0, import_react_components40.makeStyles)({
-  id: { display: "block", marginTop: import_react_components40.tokens.spacingVerticalXXS, fontSize: import_react_components40.tokens.fontSizeBase100, color: import_react_components40.tokens.colorNeutralForeground3, fontFamily: import_react_components40.tokens.fontFamilyMonospace }
+var useStyles35 = (0, import_react_components43.makeStyles)({
+  id: { display: "block", marginTop: import_react_components43.tokens.spacingVerticalXXS, fontSize: import_react_components43.tokens.fontSizeBase100, color: import_react_components43.tokens.colorNeutralForeground3, fontFamily: import_react_components43.tokens.fontFamilyMonospace }
 });
 function ActionResult({ status, message, correlationId, onRetry }) {
-  const styles = useStyles32();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_components40.MessageBar, { intent: INTENT2[status], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_components40.MessageBarBody, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.MessageBarTitle, { children: TITLE[status] }),
+  const styles = useStyles35();
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_components43.MessageBar, { intent: INTENT2[status], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_components43.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_components43.MessageBarTitle, { children: TITLE[status] }),
       message,
-      correlationId ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: styles.id, children: [
+      correlationId ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: styles.id, children: [
         "Correlation id: ",
         correlationId
       ] }) : null
     ] }),
-    status === "failed" && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.MessageBarActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.Button, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
+    status === "failed" && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_components43.MessageBarActions, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_components43.Button, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
   ] });
 }
 
 // src/actions/ApprovalCard.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var useStyles33 = (0, import_react_components41.makeStyles)({
-  busy: { display: "flex", alignItems: "center", gap: import_react_components41.tokens.spacingHorizontalXS, fontSize: import_react_components41.tokens.fontSizeBase200 }
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var useStyles36 = (0, import_react_components44.makeStyles)({
+  busy: { display: "flex", alignItems: "center", gap: import_react_components44.tokens.spacingHorizontalXS, fontSize: import_react_components44.tokens.fontSizeBase200 }
 });
 function ApprovalCard({
   toolCall,
@@ -2687,15 +3089,15 @@ function ApprovalCard({
   allowEdit = false,
   busy = false
 }) {
-  const styles = useStyles33();
-  const [args, setArgs] = React22.useState(toolCall.argumentsJson);
-  const [editing, setEditing] = React22.useState(false);
-  const [decided, setDecided] = React22.useState(false);
+  const styles = useStyles36();
+  const [args, setArgs] = React25.useState(toolCall.argumentsJson);
+  const [editing, setEditing] = React25.useState(false);
+  const [decided, setDecided] = React25.useState(false);
   const settled = toolCall.status === "succeeded" || toolCall.status === "failed" || toolCall.status === "denied";
   if (settled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ActionCard, { title: toolCall.name, description: "Tool call", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ActionCard, { title: toolCall.name, description: "Tool call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         ActionResult,
         {
           status: toolCall.status === "succeeded" ? "succeeded" : toolCall.status === "denied" ? "denied" : "failed",
@@ -2716,29 +3118,29 @@ function ApprovalCard({
     setDecided(true);
     onDeny(toolCall);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     ActionCard,
     {
       title: toolCall.name,
       description: "The agent is asking to run this. Check the details before approving.",
       pending: !locked,
-      footer: locked ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: styles.busy, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Spinner, { size: "tiny" }),
+      footer: locked ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: styles.busy, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_components44.Spinner, { size: "tiny" }),
         " Submitting\u2026"
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-        allowEdit ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.EditRegular, {}), onClick: () => setEditing((v) => !v), children: editing ? "Done editing" : "Edit" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.DismissRegular, {}), onClick: deny, disabled: locked, children: "Deny" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", appearance: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.CheckmarkRegular, {}), onClick: approve, disabled: locked, children: "Approve" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        allowEdit ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_components44.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_icons14.EditRegular, {}), onClick: () => setEditing((v) => !v), children: editing ? "Done editing" : "Edit" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_components44.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_icons14.DismissRegular, {}), onClick: deny, disabled: locked, children: "Deny" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_components44.Button, { size: "small", appearance: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_icons14.CheckmarkRegular, {}), onClick: approve, disabled: locked, children: "Approve" })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ParameterReview, { argumentsJson: args, readOnly: !editing, onChange: setArgs })
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ParameterReview, { argumentsJson: args, readOnly: !editing, onChange: setArgs })
     }
   );
 }
 
 // src/actions/ToolCallCard.tsx
-var React23 = __toESM(require("react"), 1);
-var import_react_components42 = require("@fluentui/react-components");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var React26 = __toESM(require("react"), 1);
+var import_react_components45 = require("@fluentui/react-components");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var LABEL = {
   proposed: "Proposed",
   running: "Running",
@@ -2753,42 +3155,42 @@ var COLOUR = {
   failed: "danger",
   denied: "warning"
 };
-var useStyles34 = (0, import_react_components42.makeStyles)({
-  head: { display: "flex", alignItems: "center", gap: import_react_components42.tokens.spacingHorizontalXS },
-  name: { fontFamily: import_react_components42.tokens.fontFamilyMonospace, fontSize: import_react_components42.tokens.fontSizeBase200 },
+var useStyles37 = (0, import_react_components45.makeStyles)({
+  head: { display: "flex", alignItems: "center", gap: import_react_components45.tokens.spacingHorizontalXS },
+  name: { fontFamily: import_react_components45.tokens.fontFamilyMonospace, fontSize: import_react_components45.tokens.fontSizeBase200 },
   result: {
     whiteSpace: "pre-wrap",
     wordBreak: "break-all",
-    fontFamily: import_react_components42.tokens.fontFamilyMonospace,
-    fontSize: import_react_components42.tokens.fontSizeBase200,
-    marginTop: import_react_components42.tokens.spacingVerticalXS
+    fontFamily: import_react_components45.tokens.fontFamilyMonospace,
+    fontSize: import_react_components45.tokens.fontSizeBase200,
+    marginTop: import_react_components45.tokens.spacingVerticalXS
   }
 });
 function ToolCallCard({ toolCall, defaultExpanded = false }) {
-  const styles = useStyles34();
-  const id = React23.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CardSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  const styles = useStyles37();
+  const id = React26.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CardSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Disclosure,
     {
       id,
       defaultOpen: defaultExpanded,
-      summary: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: styles.head, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: styles.name, children: toolCall.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_components42.Badge, { appearance: "tint", color: COLOUR[toolCall.status], children: LABEL[toolCall.status] }),
-        toolCall.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_components42.Spinner, { size: "extra-tiny" }) : null
+      summary: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: styles.head, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: styles.name, children: toolCall.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_components45.Badge, { appearance: "tint", color: COLOUR[toolCall.status], children: LABEL[toolCall.status] }),
+        toolCall.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_components45.Spinner, { size: "extra-tiny" }) : null
       ] }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
-        toolCall.resultText ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.result, children: toolCall.resultText }) : null,
-        toolCall.failure ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.result, children: toolCall.failure.message }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+        toolCall.resultText ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: styles.result, children: toolCall.resultText }) : null,
+        toolCall.failure ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: styles.result, children: toolCall.failure.message }) : null
       ]
     }
   ) });
 }
 
 // src/host/AgentKitHostProvider.tsx
-var React24 = __toESM(require("react"), 1);
-var import_react_components43 = require("@fluentui/react-components");
+var React27 = __toESM(require("react"), 1);
+var import_react_components46 = require("@fluentui/react-components");
 
 // src/theme/index.ts
 var import_fluent_theme = require("@dataverse-kit/fluent-theme");
@@ -2820,17 +3222,17 @@ function resolveHostTheme(input = {}) {
 var nextAgentIdPrefix = createIdPrefixCounter("dvkak");
 
 // src/host/AgentKitHostProvider.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function AgentKitHostProvider(props) {
   const { children, theme, hostTheme, isDarkTheme, targetDocument, className, style } = props;
-  const [generated] = React24.useState(nextAgentIdPrefix);
+  const [generated] = React27.useState(nextAgentIdPrefix);
   const idPrefix = props.idPrefix ?? generated;
-  const resolved = React24.useMemo(
+  const resolved = React27.useMemo(
     () => resolveHostTheme({ theme, hostTheme, isDarkTheme }),
     [theme, hostTheme, isDarkTheme]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_components43.IdPrefixProvider, { value: idPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_react_components43.FluentProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_components46.IdPrefixProvider, { value: idPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react_components46.FluentProvider,
     {
       theme: resolved,
       targetDocument,
@@ -3139,12 +3541,14 @@ function createAgentService(config = { provider: "none" }) {
   AgentAppShell,
   AgentAvatar,
   AgentKitHostProvider,
+  AgentLauncher,
   AgentOpsPanel,
   AgentPicker,
   AgentStatusBadge,
   AnswerWithCitations,
   AppRail,
   ApprovalCard,
+  AssistantPanel,
   AvailabilityBanner,
   CitationChip,
   CitationList,
@@ -3156,6 +3560,7 @@ function createAgentService(config = { provider: "none" }) {
   DEFAULT_GROUP_WINDOW_MS,
   DayDivider,
   EmptyConversation,
+  FeedbackPanel,
   GlobalSearchBar,
   GroundingPanel,
   LiveAnnouncer,
@@ -3217,6 +3622,7 @@ function createAgentService(config = { provider: "none" }) {
   splitTextByCitations,
   useConversation,
   useFocusRestore,
+  useReturnFocus,
   useRovingTabindex,
   useStickyScroll,
   useVisuallyHiddenStyles