@dataverse-kit/agent-kit 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/conversation/MessageList.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Button as Button3, makeStyles as makeStyles10, tokens as tokens9 } from "@fluentui/react-components";
 import { ArrowDownRegular } from "@fluentui/react-icons";
 
@@ -585,12 +585,40 @@ function useRovingTabindex(options) {
   return { activeIndex, setActiveIndex, getItemProps };
 }
 
-// src/hooks/useStickyScroll.ts
+// src/a11y/useReturnFocus.ts
 import * as React4 from "react";
+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
+import * as React5 from "react";
 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({
@@ -601,14 +629,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;
@@ -618,30 +646,30 @@ function useStickyScroll(ref, messageCount) {
 }
 
 // src/hooks/useConversation.ts
-import * as React5 from "react";
+import * as React6 from "react";
 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();
@@ -678,13 +706,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
-import * as React9 from "react";
+import * as React10 from "react";
 import { Avatar, makeStyles as makeStyles7, mergeClasses as mergeClasses4, tokens as tokens6 } from "@fluentui/react-components";
 
 // src/conversation/StreamingText.tsx
@@ -761,7 +789,7 @@ function ActionToolbar({ actions, label, className }) {
 }
 
 // src/internal/CardSurface.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { makeStyles as makeStyles4, mergeClasses as mergeClasses2, tokens as tokens3 } from "@fluentui/react-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var useStyles3 = makeStyles4({
@@ -777,7 +805,7 @@ var useStyles3 = makeStyles4({
   },
   attention: { borderLeft: `3px solid ${tokens3.colorBrandStroke1}` }
 });
-var CardSurface = React6.forwardRef(
+var CardSurface = React7.forwardRef(
   function CardSurface2({ emphasis = "none", className, children, ...rest }, ref) {
     const styles = useStyles3();
     return /* @__PURE__ */ jsx4(
@@ -793,7 +821,7 @@ var CardSurface = React6.forwardRef(
 );
 
 // src/internal/ConfirmInline.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { Button as Button2, makeStyles as makeStyles5, tokens as tokens4, Text } from "@fluentui/react-components";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var useStyles4 = makeStyles5({
@@ -804,11 +832,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);
@@ -863,7 +891,7 @@ function ConfirmInline(props) {
 }
 
 // src/internal/Disclosure.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { makeStyles as makeStyles6, tokens as tokens5, mergeClasses as mergeClasses3 } from "@fluentui/react-components";
 import { ChevronRightRegular, ChevronDownRegular } from "@fluentui/react-icons";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -891,7 +919,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__ */ jsxs4("div", { className, children: [
     /* @__PURE__ */ jsxs4(
@@ -988,7 +1016,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));
@@ -1126,21 +1154,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;
@@ -1157,7 +1185,7 @@ function MessageList(props) {
         "aria-label": "Conversation",
         tabIndex: 0,
         children: [
-          messages.length === 0 ? emptyState ?? null : messages.map((message) => /* @__PURE__ */ jsxs8(React10.Fragment, { children: [
+          messages.length === 0 ? emptyState ?? null : messages.map((message) => /* @__PURE__ */ jsxs8(React11.Fragment, { children: [
             dividerBefore.has(message.id) ? /* @__PURE__ */ jsx11(DayDivider, { label: dividerBefore.get(message.id), locale }) : null,
             /* @__PURE__ */ jsx11(
               MessageBubble,
@@ -1189,20 +1217,77 @@ function MessageList(props) {
 }
 
 // src/conversation/Composer.tsx
-import * as React11 from "react";
-import { Button as Button4, Textarea, makeStyles as makeStyles11, tokens as tokens10, Tooltip as Tooltip2 } from "@fluentui/react-components";
+import * as React12 from "react";
+import { Button as Button4, Textarea, makeStyles as makeStyles11, mergeClasses as mergeClasses5, tokens as tokens10, Tooltip as Tooltip2 } from "@fluentui/react-components";
 import { SendRegular, StopRegular } from "@fluentui/react-icons";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var MAX_ROWS = 6;
 var useStyles10 = makeStyles11({
-  root: {
-    display: "flex",
-    gap: tokens10.spacingHorizontalS,
-    alignItems: "flex-end",
+  wrapper: {
     padding: tokens10.spacingVerticalS,
     borderTop: `1px solid ${tokens10.colorNeutralStroke2}`
   },
-  input: { flex: 1 },
-  hint: { fontSize: tokens10.fontSizeBase100, color: tokens10.colorNeutralForeground3 }
+  // The Teams send box: ONE rounded container holding the field and the affordances.
+  box: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: tokens10.spacingHorizontalXXS,
+    paddingLeft: tokens10.spacingHorizontalS,
+    paddingRight: tokens10.spacingHorizontalXXS,
+    paddingTop: tokens10.spacingVerticalXXS,
+    paddingBottom: tokens10.spacingVerticalXXS,
+    borderRadius: tokens10.borderRadiusXLarge,
+    border: `1px solid ${tokens10.colorNeutralStroke1}`,
+    backgroundColor: tokens10.colorNeutralBackground1,
+    // ★ The ring moves to the CONTAINER because the field's own indicator is suppressed below.
+    //   It is an `outline`, not a box-shadow, so forced-colors still paints it (a11y rule 5).
+    ":focus-within": {
+      border: `1px solid ${tokens10.colorCompoundBrandStroke}`,
+      outline: `2px solid ${tokens10.colorCompoundBrandStroke}`,
+      outlineOffset: "-1px"
+    }
+  },
+  boxDisabled: {
+    backgroundColor: tokens10.colorNeutralBackgroundDisabled,
+    border: `1px solid ${tokens10.colorNeutralStrokeDisabled}`
+  },
+  // Fluent's Textarea has no transparent appearance, so its chrome is removed here and the
+  // container above supplies it. `::after` is Fluent's focus underline.
+  field: {
+    flexGrow: 1,
+    minWidth: 0,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: 0,
+    "::after": { display: "none" }
+  },
+  fieldInner: {
+    backgroundColor: "transparent",
+    // ★ Fluent's Textarea ships `min-height: 52px` (measured). The affordance buttons are 32px,
+    //   so the default left the placeholder on one line and the icons on another — the single
+    //   visible difference from the Teams reference. Matching the button height puts them on
+    //   one baseline; growth past one row is then driven by `rows`, up to maxHeight.
+    minHeight: "32px",
+    maxHeight: "160px",
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens10.spacingHorizontalXXS
+    // ★ No extra bottom padding: `alignItems: flex-end` on the box already pins this row to the
+    //   field's last line, and padding on top of it pushed the send glyph visibly below the
+    //   baseline on a single-row box (measured against the Teams reference).
+  },
+  divider: {
+    width: "1px",
+    alignSelf: "center",
+    height: "20px",
+    marginLeft: tokens10.spacingHorizontalXXS,
+    marginRight: tokens10.spacingHorizontalXXS,
+    backgroundColor: tokens10.colorNeutralStroke2
+  }
 });
 function Composer(props) {
   const {
@@ -1218,7 +1303,8 @@ function Composer(props) {
     toolbar
   } = props;
   const styles = useStyles10();
-  const hintId = React11.useId();
+  const vh = useVisuallyHiddenStyles();
+  const hintId = React12.useId();
   const submit = () => {
     const text = value.trim();
     if (!text || busy || disabled) return;
@@ -1232,56 +1318,77 @@ function Composer(props) {
     submit();
   };
   const hint = sendOn === "enter" ? "Press Enter to send, Shift plus Enter for a new line." : "Press Control or Command plus Enter to send.";
-  return /* @__PURE__ */ jsxs9("div", { className: styles.root, children: [
-    /* @__PURE__ */ jsxs9("div", { className: styles.input, children: [
+  const rows = Math.min(MAX_ROWS, Math.max(1, value.split("\n").length));
+  return /* @__PURE__ */ jsxs9("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs9("div", { className: mergeClasses5(styles.box, disabled && styles.boxDisabled), children: [
       /* @__PURE__ */ jsx12(
         Textarea,
         {
+          className: styles.field,
           value,
           onChange: (_, data) => onChange(data.value),
           onKeyDown,
           placeholder,
           disabled,
           maxLength,
-          resize: "vertical",
+          resize: "none",
+          appearance: "outline",
           "aria-label": placeholder,
           "aria-describedby": hintId,
-          textarea: { "aria-multiline": true }
+          textarea: { "aria-multiline": true, rows, className: styles.fieldInner }
         }
       ),
-      /* @__PURE__ */ jsx12("span", { id: hintId, className: styles.hint, children: hint })
+      /* @__PURE__ */ jsxs9("div", { className: styles.actions, children: [
+        toolbar,
+        toolbar ? /* @__PURE__ */ jsx12("span", { className: styles.divider, "aria-hidden": "true" }) : null,
+        busy && onStop ? /* @__PURE__ */ jsx12(Tooltip2, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(Button4, { appearance: "subtle", icon: /* @__PURE__ */ jsx12(StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ jsx12(Tooltip2, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(
+          Button4,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ jsx12(SendRegular, {}),
+            onClick: submit,
+            disabled: !value.trim() || busy || disabled
+          }
+        ) })
+      ] })
     ] }),
-    toolbar,
-    busy && onStop ? /* @__PURE__ */ jsx12(Tooltip2, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(Button4, { appearance: "secondary", icon: /* @__PURE__ */ jsx12(StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ jsx12(Tooltip2, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx12(
-      Button4,
-      {
-        appearance: "primary",
-        icon: /* @__PURE__ */ jsx12(SendRegular, {}),
-        onClick: submit,
-        disabled: !value.trim() || busy || disabled
-      }
-    ) })
+    /* @__PURE__ */ jsx12("span", { id: hintId, className: vh.root, children: hint })
   ] });
 }
 
 // src/conversation/SuggestedPrompts.tsx
-import { Button as Button5, makeStyles as makeStyles12, tokens as tokens11 } from "@fluentui/react-components";
+import { Button as Button5, makeStyles as makeStyles12, mergeClasses as mergeClasses6, tokens as tokens11 } from "@fluentui/react-components";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var useStyles11 = makeStyles12({
   root: { display: "flex", flexWrap: "wrap", gap: tokens11.spacingHorizontalXS, padding: tokens11.spacingVerticalXS },
+  // ★ The heading is `width: 100%`, so it takes the PARENT's text-align while the chips take the
+  //   flex row's justification. That split is why the label could look centred while the chips
+  //   stayed left-packed — the two are aligned by different mechanisms and must both be set.
+  center: { justifyContent: "center" },
+  headingCenter: { textAlign: "center" },
   heading: { width: "100%", fontSize: tokens11.fontSizeBase200, color: tokens11.colorNeutralForeground3 }
 });
 function SuggestedPrompts({
   prompts,
   onPick,
-  heading = "Suggested follow-ups"
+  heading = "Suggested follow-ups",
+  align = "start"
 }) {
   const styles = useStyles11();
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: styles.root, role: "group", "aria-label": heading, children: [
-    /* @__PURE__ */ jsx13("span", { className: styles.heading, children: heading }),
-    prompts.map((prompt) => /* @__PURE__ */ jsx13(Button5, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
-  ] });
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: mergeClasses6(styles.root, centered && styles.center),
+      role: "group",
+      "aria-label": heading,
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: mergeClasses6(styles.heading, centered && styles.headingCenter), children: heading }),
+        prompts.map((prompt) => /* @__PURE__ */ jsx13(Button5, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
+      ]
+    }
+  );
 }
 
 // src/conversation/EmptyConversation.tsx
@@ -1310,7 +1417,7 @@ function EmptyConversation({
   return /* @__PURE__ */ jsxs11("div", { className: styles.root, children: [
     /* @__PURE__ */ jsx14(Text2, { as: "h2", size: 500, weight: "semibold", children: title }),
     /* @__PURE__ */ jsx14(Text2, { children: description }),
-    onPick && prompts.length > 0 ? /* @__PURE__ */ jsx14(SuggestedPrompts, { prompts, onPick, heading: "Try one of these" }) : null
+    onPick && prompts.length > 0 ? /* @__PURE__ */ jsx14(SuggestedPrompts, { prompts, onPick, heading: "Try one of these", align: "center" }) : null
   ] });
 }
 
@@ -1460,14 +1567,14 @@ function UsageMeter({
 }
 
 // src/ops/ThrottleNotice.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { MessageBar as MessageBar3, MessageBarBody as MessageBarBody3, MessageBarTitle as MessageBarTitle3, MessageBarActions as MessageBarActions3, Button as Button8 } from "@fluentui/react-components";
 import { jsx as jsx19, jsxs as jsxs15 } from "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);
@@ -1526,7 +1633,7 @@ function AgentPicker({
 }
 
 // src/ops/RunTimeline.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { makeStyles as makeStyles15, tokens as tokens14, Text as Text3 } from "@fluentui/react-components";
 import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var useStyles14 = makeStyles15({
@@ -1546,7 +1653,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;
@@ -1654,18 +1761,397 @@ function AgentOpsPanel(props) {
   ] });
 }
 
+// src/support/AgentLauncher.tsx
+import { makeStyles as makeStyles18, mergeClasses as mergeClasses7, tokens as tokens17, Badge as Badge3 } from "@fluentui/react-components";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var useStyles17 = makeStyles18({
+  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: tokens17.spacingHorizontalS,
+    border: "none",
+    cursor: "pointer",
+    padding: `${tokens17.spacingVerticalM} ${tokens17.spacingHorizontalM}`,
+    color: tokens17.colorNeutralForegroundOnBrand,
+    fontFamily: tokens17.fontFamilyBase,
+    fontSize: tokens17.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: tokens17.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 ${tokens17.colorStrokeFocus2}`, outlineOffset: "-2px" }
+  },
+  primary: { backgroundColor: tokens17.colorBrandBackground, ":hover": { backgroundColor: tokens17.colorBrandBackgroundHover, maxWidth: "260px" } },
+  secondary: { backgroundColor: tokens17.colorBrandBackgroundStatic, ":hover": { backgroundColor: tokens17.colorBrandBackgroundStatic, maxWidth: "260px" } },
+  firstRight: { borderTopLeftRadius: tokens17.borderRadiusXLarge },
+  lastRight: { borderBottomLeftRadius: tokens17.borderRadiusXLarge },
+  firstLeft: { borderTopRightRadius: tokens17.borderRadiusXLarge },
+  lastLeft: { borderBottomRightRadius: tokens17.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: tokens17.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__ */ jsx25(
+    "div",
+    {
+      className: mergeClasses7(styles.root, side === "right" ? styles.right : styles.left, hidden && styles.hidden),
+      role: "group",
+      "aria-label": label,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs19(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(item.id),
+          className: mergeClasses7(
+            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__ */ jsx25("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }),
+            /* @__PURE__ */ jsx25("span", { className: mergeClasses7(styles.text, "fui-launcher-label"), children: item.label }),
+            item.badgeCount ? /* @__PURE__ */ jsx25(Badge3, { appearance: "filled", color: "danger", children: item.badgeCount }) : null
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+
+// src/support/AssistantPanel.tsx
+import * as React15 from "react";
+import { Button as Button9, Switch, Text as Text6, Tooltip as Tooltip4, makeStyles as makeStyles19, mergeClasses as mergeClasses8, tokens as tokens18 } from "@fluentui/react-components";
+import { DismissRegular, ArrowDownloadRegular, SpeakerMuteRegular, Speaker2Regular } from "@fluentui/react-icons";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+var useStyles18 = makeStyles19({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minWidth: "320px",
+    backgroundColor: tokens18.colorNeutralBackground1,
+    borderLeft: `1px solid ${tokens18.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: tokens18.durationGentle,
+    transitionTimingFunction: tokens18.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: tokens18.spacingHorizontalS, padding: tokens18.spacingVerticalS },
+  tabstrip: { display: "flex", gap: tokens18.spacingHorizontalXXS, flexGrow: 1 },
+  tab: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens18.spacingHorizontalXS,
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    padding: `${tokens18.spacingVerticalXS} ${tokens18.spacingHorizontalS}`,
+    color: tokens18.colorNeutralForeground2,
+    fontFamily: tokens18.fontFamilyBase,
+    borderBottom: `2px solid transparent`,
+    ":focus-visible": { outline: `2px solid ${tokens18.colorStrokeFocus2}`, outlineOffset: "-2px" }
+  },
+  tabSelected: { color: tokens18.colorNeutralForeground1, borderBottom: `2px solid ${tokens18.colorCompoundBrandStroke}` },
+  title: { padding: `0 ${tokens18.spacingHorizontalM} ${tokens18.spacingVerticalS}` },
+  status: {
+    padding: `${tokens18.spacingVerticalXS} ${tokens18.spacingHorizontalM}`,
+    color: tokens18.colorNeutralForeground3,
+    fontSize: tokens18.fontSizeBase200
+  },
+  body: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: tokens18.spacingVerticalXS,
+    borderTop: `1px solid ${tokens18.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__ */ jsxs20(
+    "section",
+    {
+      ref: rootRef,
+      className: mergeClasses8(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__ */ jsxs20("div", { className: styles.header, children: [
+          /* @__PURE__ */ jsx26("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__ */ jsxs20(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                id: `${baseId}-tab-${tab.id}`,
+                "aria-selected": selected,
+                "aria-controls": `${baseId}-panel`,
+                className: mergeClasses8(styles.tab, selected && styles.tabSelected),
+                ...item,
+                onClick: () => {
+                  roving.setActiveIndex(i);
+                  onTabChange(tab.id);
+                },
+                children: [
+                  tab.icon,
+                  /* @__PURE__ */ jsx26("span", { children: tab.label })
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          onEnabledChange ? /* @__PURE__ */ jsx26(Switch, { checked: enabled ?? true, onChange: (_, d) => onEnabledChange(d.checked), label: enabled ?? true ? "On" : "Off" }) : null,
+          onClose ? /* @__PURE__ */ jsx26(Tooltip4, { content: "Close", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx26(Button9, { appearance: "subtle", icon: /* @__PURE__ */ jsx26(DismissRegular, {}), onClick: onClose }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx26(Text6, { as: "h2", size: 600, weight: "semibold", className: styles.title, children: title }),
+        /* @__PURE__ */ jsxs20("div", { className: styles.body, id: `${baseId}-panel`, role: "tabpanel", "aria-labelledby": `${baseId}-tab-${activeTabId}`, children: [
+          status ? /* @__PURE__ */ jsx26("div", { className: styles.status, children: status }) : null,
+          children
+        ] }),
+        onDownloadTranscript || onMutedChange ? /* @__PURE__ */ jsxs20("div", { className: styles.footer, children: [
+          onDownloadTranscript ? /* @__PURE__ */ jsx26(Tooltip4, { content: "Download transcript", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx26(Button9, { appearance: "subtle", icon: /* @__PURE__ */ jsx26(ArrowDownloadRegular, {}), onClick: onDownloadTranscript }) }) : /* @__PURE__ */ jsx26("span", {}),
+          onMutedChange ? /* @__PURE__ */ jsx26(Tooltip4, { content: muted ? "Unmute" : "Mute", relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx26(
+            Button9,
+            {
+              appearance: "subtle",
+              "aria-pressed": !!muted,
+              icon: muted ? /* @__PURE__ */ jsx26(SpeakerMuteRegular, {}) : /* @__PURE__ */ jsx26(Speaker2Regular, {}),
+              onClick: () => onMutedChange(!muted)
+            }
+          ) }) : /* @__PURE__ */ jsx26("span", {})
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/support/FeedbackPanel.tsx
+import * as React16 from "react";
+import {
+  Button as Button10,
+  Radio,
+  RadioGroup,
+  Text as Text7,
+  Textarea as Textarea2,
+  makeStyles as makeStyles20,
+  mergeClasses as mergeClasses9,
+  tokens as tokens19
+} from "@fluentui/react-components";
+import { StarRegular, StarFilled } from "@fluentui/react-icons";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+var STARS = [1, 2, 3, 4, 5];
+var useStyles19 = makeStyles20({
+  root: { display: "flex", flexDirection: "column", gap: tokens19.spacingVerticalM, padding: tokens19.spacingVerticalL, maxWidth: "680px" },
+  field: { display: "flex", flexDirection: "column", gap: tokens19.spacingVerticalXS },
+  stars: { display: "flex", gap: tokens19.spacingHorizontalXS },
+  star: {
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    padding: tokens19.spacingVerticalXXS,
+    color: tokens19.colorNeutralForeground2,
+    fontSize: "26px",
+    lineHeight: 1,
+    ":focus-visible": { outline: `2px solid ${tokens19.colorStrokeFocus2}`, outlineOffset: "2px" }
+  },
+  starOn: { color: tokens19.colorCompoundBrandForeground1 },
+  footer: { display: "flex", justifyContent: "flex-end", gap: tokens19.spacingHorizontalS },
+  note: { color: tokens19.colorNeutralForeground3, fontSize: tokens19.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__ */ jsxs21("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx27(Text7, { as: "h2", size: 600, weight: "semibold", children: heading }),
+    /* @__PURE__ */ jsxs21("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx27(Text7, { id: `${baseId}-rating`, children: ratingLabel }),
+      /* @__PURE__ */ jsx27("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__ */ jsx27(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value.rating === n,
+            "aria-label": `${n} of 5`,
+            className: mergeClasses9(styles.star, on && styles.starOn),
+            ...item,
+            onClick: () => {
+              roving.setActiveIndex(i);
+              onChange({ ...value, rating: n });
+            },
+            children: on ? /* @__PURE__ */ jsx27(StarFilled, {}) : /* @__PURE__ */ jsx27(StarRegular, {})
+          },
+          n
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx27(Text7, { id: `${baseId}-detail`, children: "Explain in more detail" }),
+      /* @__PURE__ */ jsx27(
+        Textarea2,
+        {
+          "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__ */ jsxs21("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx27(Text7, { children: "Add more details" }),
+      attachments
+    ] }) : null,
+    /* @__PURE__ */ jsxs21("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx27(Text7, { id: `${baseId}-consent`, children: "May we contact you about your feedback?" }),
+      /* @__PURE__ */ jsxs21(
+        RadioGroup,
+        {
+          "aria-labelledby": `${baseId}-consent`,
+          value: value.mayContact === void 0 ? "" : value.mayContact ? "yes" : "no",
+          onChange: (_, d) => onChange({ ...value, mayContact: d.value === "yes" }),
+          children: [
+            /* @__PURE__ */ jsx27(Radio, { value: "yes", label: "Yes, you may contact me" }),
+            /* @__PURE__ */ jsx27(Radio, { value: "no", label: "No, don't contact me" })
+          ]
+        }
+      )
+    ] }),
+    privacyNote ? /* @__PURE__ */ jsx27("div", { className: styles.note, children: privacyNote }) : null,
+    /* @__PURE__ */ jsxs21("div", { className: styles.footer, children: [
+      onCancel ? /* @__PURE__ */ jsx27(Button10, { appearance: "secondary", onClick: onCancel, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx27(Button10, { appearance: "primary", disabled: !canSubmit, onClick: () => onSubmit(value), children: "Submit" })
+    ] })
+  ] });
+}
+
 // src/shell/AgentAppShell.tsx
-import * as React14 from "react";
-import { makeStyles as makeStyles18, tokens as tokens17, Button as Button9 } from "@fluentui/react-components";
+import * as React17 from "react";
+import { makeStyles as makeStyles21, tokens as tokens20, Button as Button11 } from "@fluentui/react-components";
 import { NavigationRegular } from "@fluentui/react-icons";
 import { BREAKPOINTS, resolveBreakpoint, useContainerWidth } from "@dataverse-kit/surface-kit/v9";
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
-var useStyles17 = makeStyles18({
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+var useStyles20 = makeStyles21({
   root: {
     display: "flex",
     height: "100%",
     minHeight: 0,
-    backgroundColor: tokens17.colorNeutralBackground2,
+    backgroundColor: tokens20.colorNeutralBackground2,
     position: "relative",
     overflow: "hidden"
   },
@@ -1673,8 +2159,8 @@ var useStyles17 = makeStyles18({
     display: "flex",
     flexDirection: "column",
     minHeight: 0,
-    backgroundColor: tokens17.colorNeutralBackground1,
-    borderRight: `1px solid ${tokens17.colorNeutralStroke2}`
+    backgroundColor: tokens20.colorNeutralBackground1,
+    borderRight: `1px solid ${tokens20.colorNeutralStroke2}`
   },
   // Below `md` the list overlays the conversation instead of shrinking it to nothing.
   sidebarOverlay: {
@@ -1683,12 +2169,12 @@ var useStyles17 = makeStyles18({
     bottom: 0,
     left: 0,
     zIndex: 2,
-    boxShadow: tokens17.shadow16
+    boxShadow: tokens20.shadow16
   },
-  scrim: { position: "absolute", inset: "0", zIndex: 1, backgroundColor: tokens17.colorBackgroundOverlay },
+  scrim: { position: "absolute", inset: "0", zIndex: 1, backgroundColor: tokens20.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: tokens17.spacingVerticalS, left: tokens17.spacingHorizontalS, zIndex: 3 }
+  toggle: { position: "absolute", top: tokens20.spacingVerticalS, left: tokens20.spacingHorizontalS, zIndex: 3 }
 });
 function AgentAppShell(props) {
   const {
@@ -1702,7 +2188,7 @@ function AgentAppShell(props) {
     onSidebarOpenChange,
     label = "Agent workspace"
   } = props;
-  const styles = useStyles17();
+  const styles = useStyles20();
   const [containerRef, measuredWidth] = useContainerWidth();
   const width = props.containerWidth ?? (measuredWidth > 0 ? measuredWidth : void 0);
   const effective = width ?? BREAKPOINTS.xl;
@@ -1710,17 +2196,17 @@ function AgentAppShell(props) {
   const railVisible = effective >= BREAKPOINTS.sm;
   const sidebarInline = effective >= BREAKPOINTS.md;
   const rightPaneVisible = effective >= 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__ */ jsxs19("div", { ref: containerRef, className: styles.root, "data-breakpoint": breakpoint, "aria-label": label, children: [
+  return /* @__PURE__ */ jsxs22("div", { ref: containerRef, className: styles.root, "data-breakpoint": breakpoint, "aria-label": label, children: [
     rail && railVisible ? rail : null,
-    sidebar && sidebarInline ? /* @__PURE__ */ jsx25("div", { className: styles.sidebar, style: { width: sidebarWidth }, children: sidebar }) : null,
-    sidebar && !sidebarInline && overlayOpen ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
-      /* @__PURE__ */ jsx25(
+    sidebar && sidebarInline ? /* @__PURE__ */ jsx28("div", { className: styles.sidebar, style: { width: sidebarWidth }, children: sidebar }) : null,
+    sidebar && !sidebarInline && overlayOpen ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+      /* @__PURE__ */ jsx28(
         "div",
         {
           className: styles.scrim,
@@ -1728,23 +2214,23 @@ function AgentAppShell(props) {
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: `${styles.sidebar} ${styles.sidebarOverlay}`, style: { width: sidebarWidth }, children: sidebar })
+      /* @__PURE__ */ jsx28("div", { className: `${styles.sidebar} ${styles.sidebarOverlay}`, style: { width: sidebarWidth }, children: sidebar })
     ] }) : null,
-    /* @__PURE__ */ jsxs19("div", { className: styles.main, children: [
-      sidebar && !sidebarInline ? /* @__PURE__ */ jsx25(
-        Button9,
+    /* @__PURE__ */ jsxs22("div", { className: styles.main, children: [
+      sidebar && !sidebarInline ? /* @__PURE__ */ jsx28(
+        Button11,
         {
           className: styles.toggle,
           size: "small",
           appearance: "subtle",
-          icon: /* @__PURE__ */ jsx25(NavigationRegular, {}),
+          icon: /* @__PURE__ */ jsx28(NavigationRegular, {}),
           "aria-label": overlayOpen ? "Hide conversations" : "Show conversations",
           "aria-expanded": overlayOpen,
           onClick: () => setOverlayOpen(!overlayOpen)
         }
       ) : null,
       header,
-      /* @__PURE__ */ jsx25("div", { className: styles.body, children })
+      /* @__PURE__ */ jsx28("div", { className: styles.body, children })
     ] }),
     rightPaneVisible ? rightPane : null
   ] });
@@ -1752,36 +2238,36 @@ function AgentAppShell(props) {
 
 // src/shell/AppRail.tsx
 import {
-  Button as Button10,
+  Button as Button12,
   Menu,
   MenuTrigger,
   MenuPopover,
   MenuList,
   MenuItem,
-  Tooltip as Tooltip4,
-  makeStyles as makeStyles19,
-  mergeClasses as mergeClasses5,
-  tokens as tokens18
+  Tooltip as Tooltip5,
+  makeStyles as makeStyles22,
+  mergeClasses as mergeClasses10,
+  tokens as tokens21
 } from "@fluentui/react-components";
 import { MoreHorizontalRegular } from "@fluentui/react-icons";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-var useStyles18 = makeStyles19({
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+var useStyles21 = makeStyles22({
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: tokens18.spacingVerticalXS,
-    padding: tokens18.spacingVerticalS,
-    backgroundColor: tokens18.colorNeutralBackground3,
-    borderRight: `1px solid ${tokens18.colorNeutralStroke2}`,
+    gap: tokens21.spacingVerticalXS,
+    padding: tokens21.spacingVerticalS,
+    backgroundColor: tokens21.colorNeutralBackground3,
+    borderRight: `1px solid ${tokens21.colorNeutralStroke2}`,
     minHeight: 0
   },
   spacer: { flex: 1 },
   button: {
     position: "relative",
-    ":focus-visible": { outline: `2px solid ${tokens18.colorStrokeFocus2}`, outlineOffset: "1px" }
+    ":focus-visible": { outline: `2px solid ${tokens21.colorStrokeFocus2}`, outlineOffset: "1px" }
   },
-  selected: { backgroundColor: tokens18.colorNeutralBackground1Selected },
+  selected: { backgroundColor: tokens21.colorNeutralBackground1Selected },
   badge: {
     position: "absolute",
     top: "2px",
@@ -1789,58 +2275,58 @@ var useStyles18 = makeStyles19({
     minWidth: "16px",
     height: "16px",
     padding: "0 3px",
-    borderRadius: tokens18.borderRadiusCircular,
-    backgroundColor: tokens18.colorPaletteRedBackground3,
-    color: tokens18.colorNeutralForegroundOnBrand,
+    borderRadius: tokens21.borderRadiusCircular,
+    backgroundColor: tokens21.colorPaletteRedBackground3,
+    color: tokens21.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__ */ jsxs20("nav", { className: styles.root, "aria-label": label, children: [
-    visible.map((item) => /* @__PURE__ */ jsx26(Tooltip4, { content: item.label, relationship: "label", positioning: "after", withArrow: true, children: /* @__PURE__ */ jsx26(
-      Button10,
+  return /* @__PURE__ */ jsxs23("nav", { className: styles.root, "aria-label": label, children: [
+    visible.map((item) => /* @__PURE__ */ jsx29(Tooltip5, { content: item.label, relationship: "label", positioning: "after", withArrow: true, children: /* @__PURE__ */ jsx29(
+      Button12,
       {
         appearance: "subtle",
         icon: item.icon,
-        className: mergeClasses5(styles.button, item.id === selectedId && styles.selected),
+        className: mergeClasses10(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__ */ jsx26("span", { className: styles.badge, "aria-hidden": "true", children: item.badgeCount }) : null
+        children: item.badgeCount ? /* @__PURE__ */ jsx29("span", { className: styles.badge, "aria-hidden": "true", children: item.badgeCount }) : null
       }
     ) }, item.id)),
-    overflow.length > 0 ? /* @__PURE__ */ jsxs20(Menu, { children: [
-      /* @__PURE__ */ jsx26(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx26(
-        Button10,
+    overflow.length > 0 ? /* @__PURE__ */ jsxs23(Menu, { children: [
+      /* @__PURE__ */ jsx29(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx29(
+        Button12,
         {
           appearance: "subtle",
-          icon: /* @__PURE__ */ jsx26(MoreHorizontalRegular, {}),
+          icon: /* @__PURE__ */ jsx29(MoreHorizontalRegular, {}),
           className: styles.button,
           "aria-label": `More apps, ${overflow.length} hidden`
         }
       ) }),
-      /* @__PURE__ */ jsx26(MenuPopover, { children: /* @__PURE__ */ jsx26(MenuList, { children: overflow.map((item) => /* @__PURE__ */ jsx26(MenuItem, { icon: item.icon, onClick: () => onSelect(item.id), children: item.label }, item.id)) }) })
+      /* @__PURE__ */ jsx29(MenuPopover, { children: /* @__PURE__ */ jsx29(MenuList, { children: overflow.map((item) => /* @__PURE__ */ jsx29(MenuItem, { icon: item.icon, onClick: () => onSelect(item.id), children: item.label }, item.id)) }) })
     ] }) : null,
-    /* @__PURE__ */ jsx26("div", { className: styles.spacer }),
+    /* @__PURE__ */ jsx29("div", { className: styles.spacer }),
     footer
   ] });
 }
 
 // src/shell/ConversationList.tsx
-import * as React15 from "react";
-import { makeStyles as makeStyles21, tokens as tokens20, Text as Text6 } from "@fluentui/react-components";
+import * as React18 from "react";
+import { makeStyles as makeStyles24, tokens as tokens23, Text as Text8 } from "@fluentui/react-components";
 
 // src/shell/ConversationListItem.tsx
-import { makeStyles as makeStyles20, mergeClasses as mergeClasses6, tokens as tokens19 } from "@fluentui/react-components";
+import { makeStyles as makeStyles23, mergeClasses as mergeClasses11, tokens as tokens22 } from "@fluentui/react-components";
 
 // src/shell/AgentAvatar.tsx
 import { Avatar as Avatar2 } from "@fluentui/react-components";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var STATUS = {
   available: "available",
   busy: "busy",
@@ -1851,7 +2337,7 @@ var STATUS = {
 };
 function AgentAvatar({ participant, presence, size = 32, name }) {
   const displayName = name ?? participant?.displayName ?? "Unknown";
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     Avatar2,
     {
       name: displayName,
@@ -1865,49 +2351,49 @@ function AgentAvatar({ participant, presence, size = 32, name }) {
 }
 
 // src/shell/ConversationListItem.tsx
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-var useStyles19 = makeStyles20({
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var useStyles22 = makeStyles23({
   row: {
     display: "flex",
-    gap: tokens19.spacingHorizontalS,
+    gap: tokens22.spacingHorizontalS,
     alignItems: "center",
-    padding: `${tokens19.spacingVerticalS} ${tokens19.spacingHorizontalS}`,
-    borderRadius: tokens19.borderRadiusMedium,
+    padding: `${tokens22.spacingVerticalS} ${tokens22.spacingHorizontalS}`,
+    borderRadius: tokens22.borderRadiusMedium,
     cursor: "pointer",
-    ":hover": { backgroundColor: tokens19.colorNeutralBackground1Hover }
+    ":hover": { backgroundColor: tokens22.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 ${tokens19.colorStrokeFocus2}`, outlineOffset: "-2px" },
-  selected: { backgroundColor: tokens19.colorNeutralBackground1Selected },
+  active: { outline: `2px solid ${tokens22.colorStrokeFocus2}`, outlineOffset: "-2px" },
+  selected: { backgroundColor: tokens22.colorNeutralBackground1Selected },
   body: { flex: 1, minWidth: 0 },
   title: {
     display: "block",
-    fontSize: tokens19.fontSizeBase300,
-    fontWeight: tokens19.fontWeightSemibold,
+    fontSize: tokens22.fontSizeBase300,
+    fontWeight: tokens22.fontWeightSemibold,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  muted: { fontWeight: tokens19.fontWeightRegular, color: tokens19.colorNeutralForeground3 },
+  muted: { fontWeight: tokens22.fontWeightRegular, color: tokens22.colorNeutralForeground3 },
   preview: {
     display: "block",
-    fontSize: tokens19.fontSizeBase200,
-    color: tokens19.colorNeutralForeground3,
+    fontSize: tokens22.fontSizeBase200,
+    color: tokens22.colorNeutralForeground3,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   meta: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "2px" },
-  time: { fontSize: tokens19.fontSizeBase100, color: tokens19.colorNeutralForeground3 },
+  time: { fontSize: tokens22.fontSizeBase100, color: tokens22.colorNeutralForeground3 },
   unread: {
     minWidth: "18px",
     height: "18px",
-    padding: `0 ${tokens19.spacingHorizontalXXS}`,
-    borderRadius: tokens19.borderRadiusCircular,
-    backgroundColor: tokens19.colorBrandBackground,
-    color: tokens19.colorNeutralForegroundOnBrand,
-    fontSize: tokens19.fontSizeBase100,
+    padding: `0 ${tokens22.spacingHorizontalXXS}`,
+    borderRadius: tokens22.borderRadiusCircular,
+    backgroundColor: tokens22.colorBrandBackground,
+    color: tokens22.colorNeutralForegroundOnBrand,
+    fontSize: tokens22.fontSizeBase100,
     lineHeight: "18px",
     textAlign: "center"
   }
@@ -1926,27 +2412,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__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       id,
       role: "option",
       "aria-selected": selected,
       "aria-label": conversationAccessibleName(summary, locale),
-      className: mergeClasses6(styles.row, selected && styles.selected, active && styles.active),
+      className: mergeClasses11(styles.row, selected && styles.selected, active && styles.active),
       onClick: () => onSelect(summary.id),
       "data-conversation-option": true,
       children: [
-        /* @__PURE__ */ jsx28(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
-        /* @__PURE__ */ jsxs21("div", { className: styles.body, "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx28("span", { className: mergeClasses6(styles.title, summary.muted && styles.muted), children: summary.title }),
-          summary.preview ? /* @__PURE__ */ jsx28("span", { className: styles.preview, children: summary.preview }) : null
+        /* @__PURE__ */ jsx31(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
+        /* @__PURE__ */ jsxs24("div", { className: styles.body, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx31("span", { className: mergeClasses11(styles.title, summary.muted && styles.muted), children: summary.title }),
+          summary.preview ? /* @__PURE__ */ jsx31("span", { className: styles.preview, children: summary.preview }) : null
         ] }),
-        /* @__PURE__ */ jsxs21("div", { className: styles.meta, "aria-hidden": "true", children: [
-          time ? /* @__PURE__ */ jsx28("span", { className: styles.time, children: time }) : null,
-          !summary.muted && summary.unreadCount ? /* @__PURE__ */ jsx28("span", { className: styles.unread, children: summary.unreadCount }) : null
+        /* @__PURE__ */ jsxs24("div", { className: styles.meta, "aria-hidden": "true", children: [
+          time ? /* @__PURE__ */ jsx31("span", { className: styles.time, children: time }) : null,
+          !summary.muted && summary.unreadCount ? /* @__PURE__ */ jsx31("span", { className: styles.unread, children: summary.unreadCount }) : null
         ] })
       ]
     }
@@ -1954,27 +2440,27 @@ function ConversationListItem(props) {
 }
 
 // src/shell/ConversationList.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var useStyles20 = makeStyles21({
+import { jsx as jsx32 } from "react/jsx-runtime";
+var useStyles23 = makeStyles24({
   root: {
     display: "flex",
     flexDirection: "column",
     gap: "2px",
-    padding: tokens20.spacingHorizontalXS,
+    padding: tokens23.spacingHorizontalXS,
     overflowY: "auto",
     minHeight: 0,
-    ":focus-visible": { outline: `2px solid ${tokens20.colorStrokeFocus2}`, outlineOffset: "-2px" }
+    ":focus-visible": { outline: `2px solid ${tokens23.colorStrokeFocus2}`, outlineOffset: "-2px" }
   },
-  empty: { padding: tokens20.spacingVerticalM, color: tokens20.colorNeutralForeground3 }
+  empty: { padding: tokens23.spacingVerticalM, color: tokens23.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;
@@ -1982,7 +2468,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]);
@@ -2005,9 +2491,9 @@ function ConversationList(props) {
     setActive(next);
   };
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx29("div", { className: styles.root, children: empty ?? /* @__PURE__ */ jsx29(Text6, { className: styles.empty, size: 200, children: "No conversations yet." }) });
+    return /* @__PURE__ */ jsx32("div", { className: styles.root, children: empty ?? /* @__PURE__ */ jsx32(Text8, { className: styles.empty, size: 200, children: "No conversations yet." }) });
   }
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       ref: listRef,
@@ -2017,7 +2503,7 @@ function ConversationList(props) {
       tabIndex: 0,
       "aria-activedescendant": optionId(active),
       onKeyDown,
-      children: items.map((summary, index) => /* @__PURE__ */ jsx29(
+      children: items.map((summary, index) => /* @__PURE__ */ jsx32(
         ConversationListItem,
         {
           id: optionId(index),
@@ -2035,7 +2521,7 @@ function ConversationList(props) {
 
 // src/shell/ConversationHeader.tsx
 import {
-  Button as Button11,
+  Button as Button13,
   Menu as Menu2,
   MenuTrigger as MenuTrigger2,
   MenuPopover as MenuPopover2,
@@ -2043,27 +2529,27 @@ import {
   MenuItem as MenuItem2,
   Tab,
   TabList,
-  Text as Text7,
-  makeStyles as makeStyles22,
-  tokens as tokens21
+  Text as Text9,
+  makeStyles as makeStyles25,
+  tokens as tokens24
 } from "@fluentui/react-components";
 import { MoreHorizontalRegular as MoreHorizontalRegular2 } from "@fluentui/react-icons";
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
-var useStyles21 = makeStyles22({
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+var useStyles24 = makeStyles25({
   root: {
     display: "flex",
     flexDirection: "column",
-    gap: tokens21.spacingVerticalXS,
-    padding: `${tokens21.spacingVerticalS} ${tokens21.spacingHorizontalM} 0`,
-    borderBottom: `1px solid ${tokens21.colorNeutralStroke2}`,
-    backgroundColor: tokens21.colorNeutralBackground1
+    gap: tokens24.spacingVerticalXS,
+    padding: `${tokens24.spacingVerticalS} ${tokens24.spacingHorizontalM} 0`,
+    borderBottom: `1px solid ${tokens24.colorNeutralStroke2}`,
+    backgroundColor: tokens24.colorNeutralBackground1
   },
-  top: { display: "flex", alignItems: "center", gap: tokens21.spacingHorizontalS },
-  identity: { display: "flex", alignItems: "center", gap: tokens21.spacingHorizontalS, minWidth: 0 },
+  top: { display: "flex", alignItems: "center", gap: tokens24.spacingHorizontalS },
+  identity: { display: "flex", alignItems: "center", gap: tokens24.spacingHorizontalS, minWidth: 0 },
   titles: { display: "flex", flexDirection: "column", minWidth: 0 },
-  subtitle: { color: tokens21.colorNeutralForeground3, fontSize: tokens21.fontSizeBase200 },
+  subtitle: { color: tokens24.colorNeutralForeground3, fontSize: tokens24.fontSizeBase200 },
   spacer: { flex: 1 },
-  tabRow: { display: "flex", alignItems: "flex-end", gap: tokens21.spacingHorizontalS }
+  tabRow: { display: "flex", alignItems: "flex-end", gap: tokens24.spacingHorizontalS }
 });
 function ConversationHeader(props) {
   const {
@@ -2077,22 +2563,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__ */ jsxs22("header", { className: styles.root, children: [
-    /* @__PURE__ */ jsxs22("div", { className: styles.top, children: [
-      /* @__PURE__ */ jsxs22("div", { className: styles.identity, children: [
-        /* @__PURE__ */ jsx30(AgentAvatar, { participant, presence, size: 32, name: title }),
-        /* @__PURE__ */ jsxs22("div", { className: styles.titles, children: [
-          /* @__PURE__ */ jsx30(Text7, { weight: "semibold", truncate: true, wrap: false, children: title }),
-          subtitle ? /* @__PURE__ */ jsx30("span", { className: styles.subtitle, children: subtitle }) : null
+  return /* @__PURE__ */ jsxs25("header", { className: styles.root, children: [
+    /* @__PURE__ */ jsxs25("div", { className: styles.top, children: [
+      /* @__PURE__ */ jsxs25("div", { className: styles.identity, children: [
+        /* @__PURE__ */ jsx33(AgentAvatar, { participant, presence, size: 32, name: title }),
+        /* @__PURE__ */ jsxs25("div", { className: styles.titles, children: [
+          /* @__PURE__ */ jsx33(Text9, { weight: "semibold", truncate: true, wrap: false, children: title }),
+          subtitle ? /* @__PURE__ */ jsx33("span", { className: styles.subtitle, children: subtitle }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsx30("div", { className: styles.spacer }),
+      /* @__PURE__ */ jsx33("div", { className: styles.spacer }),
       trailing,
-      inline.map((action) => /* @__PURE__ */ jsx30(
-        Button11,
+      inline.map((action) => /* @__PURE__ */ jsx33(
+        Button13,
         {
           appearance: "subtle",
           size: "small",
@@ -2102,80 +2588,80 @@ function ConversationHeader(props) {
         },
         action.key
       )),
-      overflow.length > 0 ? /* @__PURE__ */ jsxs22(Menu2, { children: [
-        /* @__PURE__ */ jsx30(MenuTrigger2, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx30(
-          Button11,
+      overflow.length > 0 ? /* @__PURE__ */ jsxs25(Menu2, { children: [
+        /* @__PURE__ */ jsx33(MenuTrigger2, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx33(
+          Button13,
           {
             appearance: "subtle",
             size: "small",
-            icon: /* @__PURE__ */ jsx30(MoreHorizontalRegular2, {}),
+            icon: /* @__PURE__ */ jsx33(MoreHorizontalRegular2, {}),
             "aria-label": `More actions, ${overflow.length} available`
           }
         ) }),
-        /* @__PURE__ */ jsx30(MenuPopover2, { children: /* @__PURE__ */ jsx30(MenuList2, { children: overflow.map((action) => /* @__PURE__ */ jsx30(MenuItem2, { icon: action.icon, onClick: action.onClick, children: action.label }, action.key)) }) })
+        /* @__PURE__ */ jsx33(MenuPopover2, { children: /* @__PURE__ */ jsx33(MenuList2, { children: overflow.map((action) => /* @__PURE__ */ jsx33(MenuItem2, { icon: action.icon, onClick: action.onClick, children: action.label }, action.key)) }) })
       ] }) : null
     ] }),
-    tabs && tabs.length > 0 ? /* @__PURE__ */ jsx30("div", { className: styles.tabRow, children: /* @__PURE__ */ jsx30(
+    tabs && tabs.length > 0 ? /* @__PURE__ */ jsx33("div", { className: styles.tabRow, children: /* @__PURE__ */ jsx33(
       TabList,
       {
         selectedValue: selectedTabId,
         onTabSelect: (_, data) => onTabSelect?.(data.value),
         size: "small",
-        children: tabs.map((tab) => /* @__PURE__ */ jsx30(Tab, { value: tab.id, children: tab.label }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx33(Tab, { value: tab.id, children: tab.label }, tab.id))
       }
     ) }) : null
   ] });
 }
 
 // src/shell/RightPane.tsx
-import * as React16 from "react";
-import { Button as Button12, makeStyles as makeStyles23, tokens as tokens22, Text as Text8 } from "@fluentui/react-components";
-import { DismissRegular } from "@fluentui/react-icons";
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
-var useStyles22 = makeStyles23({
+import * as React19 from "react";
+import { Button as Button14, makeStyles as makeStyles26, tokens as tokens25, Text as Text10 } from "@fluentui/react-components";
+import { DismissRegular as DismissRegular2 } from "@fluentui/react-icons";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var useStyles25 = makeStyles26({
   root: {
     display: "flex",
     flexDirection: "column",
-    borderLeft: `1px solid ${tokens22.colorNeutralStroke2}`,
-    backgroundColor: tokens22.colorNeutralBackground1,
+    borderLeft: `1px solid ${tokens25.colorNeutralStroke2}`,
+    backgroundColor: tokens25.colorNeutralBackground1,
     minHeight: 0
   },
   head: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: tokens22.spacingHorizontalS,
-    padding: tokens22.spacingVerticalS,
-    borderBottom: `1px solid ${tokens22.colorNeutralStroke2}`
+    gap: tokens25.spacingHorizontalS,
+    padding: tokens25.spacingVerticalS,
+    borderBottom: `1px solid ${tokens25.colorNeutralStroke2}`
   },
-  body: { flex: 1, overflowY: "auto", padding: tokens22.spacingVerticalM }
+  body: { flex: 1, overflowY: "auto", padding: tokens25.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__ */ jsxs23("aside", { className: styles.root, style: { width }, "aria-labelledby": labelId, children: [
-    /* @__PURE__ */ jsxs23("div", { className: styles.head, children: [
-      /* @__PURE__ */ jsx31(Text8, { id: labelId, weight: "semibold", children: title }),
-      /* @__PURE__ */ jsx31(
-        Button12,
+  return /* @__PURE__ */ jsxs26("aside", { className: styles.root, style: { width }, "aria-labelledby": labelId, children: [
+    /* @__PURE__ */ jsxs26("div", { className: styles.head, children: [
+      /* @__PURE__ */ jsx34(Text10, { id: labelId, weight: "semibold", children: title }),
+      /* @__PURE__ */ jsx34(
+        Button14,
         {
           appearance: "subtle",
           size: "small",
-          icon: /* @__PURE__ */ jsx31(DismissRegular, {}),
+          icon: /* @__PURE__ */ jsx34(DismissRegular2, {}),
           onClick: onClose,
           "aria-label": `Close ${title}`
         }
       )
     ] }),
-    /* @__PURE__ */ jsx31("div", { className: styles.body, children })
+    /* @__PURE__ */ jsx34("div", { className: styles.body, children })
   ] });
 }
 
 // src/shell/GlobalSearchBar.tsx
-import { SearchBox, makeStyles as makeStyles24 } from "@fluentui/react-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var useStyles23 = makeStyles24({
+import { SearchBox, makeStyles as makeStyles27 } from "@fluentui/react-components";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var useStyles26 = makeStyles27({
   root: { width: "100%", maxWidth: "640px" }
 });
 function GlobalSearchBar({
@@ -2184,8 +2670,8 @@ function GlobalSearchBar({
   onSubmit,
   placeholder = "Search conversations"
 }) {
-  const styles = useStyles23();
-  return /* @__PURE__ */ jsx32(
+  const styles = useStyles26();
+  return /* @__PURE__ */ jsx35(
     SearchBox,
     {
       className: styles.root,
@@ -2201,45 +2687,45 @@ function GlobalSearchBar({
 }
 
 // src/grounding/CitationChip.tsx
-import { Tooltip as Tooltip5, makeStyles as makeStyles25, tokens as tokens23 } from "@fluentui/react-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var useStyles24 = makeStyles25({
+import { Tooltip as Tooltip6, makeStyles as makeStyles28, tokens as tokens26 } from "@fluentui/react-components";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var useStyles27 = makeStyles28({
   chip: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     minWidth: "18px",
     height: "18px",
-    padding: `0 ${tokens23.spacingHorizontalXXS}`,
+    padding: `0 ${tokens26.spacingHorizontalXXS}`,
     marginLeft: "2px",
     verticalAlign: "super",
-    fontSize: tokens23.fontSizeBase100,
+    fontSize: tokens26.fontSizeBase100,
     lineHeight: "18px",
-    borderRadius: tokens23.borderRadiusSmall,
-    border: `1px solid ${tokens23.colorNeutralStroke2}`,
-    backgroundColor: tokens23.colorNeutralBackground3,
-    color: tokens23.colorNeutralForeground2,
+    borderRadius: tokens26.borderRadiusSmall,
+    border: `1px solid ${tokens26.colorNeutralStroke2}`,
+    backgroundColor: tokens26.colorNeutralBackground3,
+    color: tokens26.colorNeutralForeground2,
     cursor: "pointer",
-    ":hover": { backgroundColor: tokens23.colorNeutralBackground3Hover },
-    ":focus-visible": { outline: `2px solid ${tokens23.colorStrokeFocus2}`, outlineOffset: "1px" }
+    ":hover": { backgroundColor: tokens26.colorNeutralBackground3Hover },
+    ":focus-visible": { outline: `2px solid ${tokens26.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__ */ jsx33("span", { className: `${styles.chip} ${styles.inert}`, "aria-label": label, children: marker });
+    return /* @__PURE__ */ jsx36("span", { className: `${styles.chip} ${styles.inert}`, "aria-label": label, children: marker });
   }
-  return /* @__PURE__ */ jsx33(Tooltip5, { content: source.title, relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx33("button", { type: "button", className: styles.chip, "aria-label": label, onClick: () => onOpen(source), children: marker }) });
+  return /* @__PURE__ */ jsx36(Tooltip6, { content: source.title, relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx36("button", { type: "button", className: styles.chip, "aria-label": label, onClick: () => onOpen(source), children: marker }) });
 }
 
 // src/grounding/CitationList.tsx
-import * as React17 from "react";
-import { makeStyles as makeStyles27, tokens as tokens25 } from "@fluentui/react-components";
+import * as React20 from "react";
+import { makeStyles as makeStyles30, tokens as tokens28 } from "@fluentui/react-components";
 
 // src/grounding/SourceCard.tsx
-import { Button as Button13, Text as Text9, makeStyles as makeStyles26, tokens as tokens24 } from "@fluentui/react-components";
+import { Button as Button15, Text as Text11, makeStyles as makeStyles29, tokens as tokens27 } from "@fluentui/react-components";
 import {
   DocumentRegular,
   DatabaseRegular,
@@ -2247,7 +2733,7 @@ import {
   BookRegular,
   DocumentBulletListRegular
 } from "@fluentui/react-icons";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var ICONS = {
   dataverse: DatabaseRegular,
   document: DocumentRegular,
@@ -2255,38 +2741,38 @@ var ICONS = {
   knowledge: BookRegular,
   other: DocumentBulletListRegular
 };
-var useStyles25 = makeStyles26({
-  root: { gap: tokens24.spacingVerticalXXS },
-  head: { display: "flex", alignItems: "center", gap: tokens24.spacingHorizontalXS },
-  marker: { color: tokens24.colorNeutralForeground3, fontSize: tokens24.fontSizeBase200 },
-  snippet: { color: tokens24.colorNeutralForeground2, fontSize: tokens24.fontSizeBase200 },
-  meta: { display: "flex", alignItems: "center", gap: tokens24.spacingHorizontalS, marginTop: tokens24.spacingVerticalXXS }
+var useStyles28 = makeStyles29({
+  root: { gap: tokens27.spacingVerticalXXS },
+  head: { display: "flex", alignItems: "center", gap: tokens27.spacingHorizontalXS },
+  marker: { color: tokens27.colorNeutralForeground3, fontSize: tokens27.fontSizeBase200 },
+  snippet: { color: tokens27.colorNeutralForeground2, fontSize: tokens27.fontSizeBase200 },
+  meta: { display: "flex", alignItems: "center", gap: tokens27.spacingHorizontalS, marginTop: tokens27.spacingVerticalXXS }
 });
 function SourceCard({ source, marker, onOpen, showSnippet = true }) {
-  const styles = useStyles25();
+  const styles = useStyles28();
   const Icon = ICONS[source.kind] ?? ICONS.other;
-  return /* @__PURE__ */ jsxs24(CardSurface, { className: styles.root, children: [
-    /* @__PURE__ */ jsxs24("div", { className: styles.head, children: [
-      /* @__PURE__ */ jsx34(Icon, { "aria-hidden": "true" }),
-      marker ? /* @__PURE__ */ jsxs24("span", { className: styles.marker, children: [
+  return /* @__PURE__ */ jsxs27(CardSurface, { className: styles.root, children: [
+    /* @__PURE__ */ jsxs27("div", { className: styles.head, children: [
+      /* @__PURE__ */ jsx37(Icon, { "aria-hidden": "true" }),
+      marker ? /* @__PURE__ */ jsxs27("span", { className: styles.marker, children: [
         "[",
         marker,
         "]"
       ] }) : null,
-      /* @__PURE__ */ jsx34(Text9, { weight: "semibold", children: source.title })
+      /* @__PURE__ */ jsx37(Text11, { weight: "semibold", children: source.title })
     ] }),
-    showSnippet && source.snippet ? /* @__PURE__ */ jsx34("span", { className: styles.snippet, children: source.snippet }) : null,
-    /* @__PURE__ */ jsxs24("div", { className: styles.meta, children: [
-      onOpen && (source.recordId || source.url) ? /* @__PURE__ */ jsx34(Button13, { size: "small", appearance: "subtle", onClick: () => onOpen(source), children: source.recordId ? "Open record" : "Open" }) : null,
-      /* @__PURE__ */ jsx34("span", { className: styles.snippet, children: source.score === void 0 ? "Relevance not reported" : `Relevance ${Math.round(source.score * 100)}%` })
+    showSnippet && source.snippet ? /* @__PURE__ */ jsx37("span", { className: styles.snippet, children: source.snippet }) : null,
+    /* @__PURE__ */ jsxs27("div", { className: styles.meta, children: [
+      onOpen && (source.recordId || source.url) ? /* @__PURE__ */ jsx37(Button15, { size: "small", appearance: "subtle", onClick: () => onOpen(source), children: source.recordId ? "Open record" : "Open" }) : null,
+      /* @__PURE__ */ jsx37("span", { className: styles.snippet, children: source.score === void 0 ? "Relevance not reported" : `Relevance ${Math.round(source.score * 100)}%` })
     ] })
   ] });
 }
 
 // src/grounding/CitationList.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var useStyles26 = makeStyles27({
-  list: { display: "flex", flexDirection: "column", gap: tokens25.spacingVerticalXS, listStyle: "none", margin: 0, padding: 0 }
+import { jsx as jsx38 } from "react/jsx-runtime";
+var useStyles29 = makeStyles30({
+  list: { display: "flex", flexDirection: "column", gap: tokens28.spacingVerticalXS, listStyle: "none", margin: 0, padding: 0 }
 });
 function CitationList({
   text,
@@ -2294,38 +2780,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__ */ jsx35(
+  return /* @__PURE__ */ jsx38(
     Disclosure,
     {
       id,
       defaultOpen,
       summary: `${used.length} source${used.length === 1 ? "" : "s"}`,
-      children: /* @__PURE__ */ jsx35("ul", { className: styles.list, children: used.map((source) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(SourceCard, { source, marker: markerFor(source.id), onOpen: onOpenSource }) }, source.id)) })
+      children: /* @__PURE__ */ jsx38("ul", { className: styles.list, children: used.map((source) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(SourceCard, { source, marker: markerFor(source.id), onOpen: onOpenSource }) }, source.id)) })
     }
   );
 }
 
 // src/grounding/AnswerWithCitations.tsx
-import * as React18 from "react";
-import { makeStyles as makeStyles28 } from "@fluentui/react-components";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var useStyles27 = makeStyles28({ root: { whiteSpace: "pre-wrap", wordBreak: "break-word" } });
+import * as React21 from "react";
+import { makeStyles as makeStyles31 } from "@fluentui/react-components";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var useStyles30 = makeStyles31({ 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__ */ jsx36("span", { className: styles.root, children: segments.map(
-    (segment, i) => segment.kind === "text" ? /* @__PURE__ */ jsx36(React18.Fragment, { children: segment.text }, i) : /* @__PURE__ */ jsx36(
+  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__ */ jsx39("span", { className: styles.root, children: segments.map(
+    (segment, i) => segment.kind === "text" ? /* @__PURE__ */ jsx39(React21.Fragment, { children: segment.text }, i) : /* @__PURE__ */ jsx39(
       CitationChip,
       {
         marker: segment.marker ?? "",
@@ -2338,20 +2824,20 @@ function AnswerWithCitations({
 }
 
 // src/grounding/GroundingPanel.tsx
-import * as React19 from "react";
-import { Text as Text10, makeStyles as makeStyles29, tokens as tokens26 } from "@fluentui/react-components";
-import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
-var useStyles28 = makeStyles29({
+import * as React22 from "react";
+import { Text as Text12, makeStyles as makeStyles32, tokens as tokens29 } from "@fluentui/react-components";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+var useStyles31 = makeStyles32({
   grid: {
     display: "grid",
     gridTemplateColumns: "minmax(96px, max-content) 1fr",
-    gap: `${tokens26.spacingVerticalXXS} ${tokens26.spacingHorizontalM}`,
+    gap: `${tokens29.spacingVerticalXXS} ${tokens29.spacingHorizontalM}`,
     margin: 0,
-    fontSize: tokens26.fontSizeBase200
+    fontSize: tokens29.fontSizeBase200
   },
-  key: { color: tokens26.colorNeutralForeground3, margin: 0 },
-  value: { margin: 0, wordBreak: "break-word", fontFamily: tokens26.fontFamilyMonospace },
-  empty: { fontSize: tokens26.fontSizeBase200, color: tokens26.colorNeutralForeground3 }
+  key: { color: tokens29.colorNeutralForeground3, margin: 0 },
+  value: { margin: 0, wordBreak: "break-word", fontFamily: tokens29.fontFamilyMonospace },
+  empty: { fontSize: tokens29.fontSizeBase200, color: tokens29.colorNeutralForeground3 }
 });
 function render(value) {
   if (value === null || value === void 0) return "\u2014";
@@ -2363,45 +2849,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__ */ jsxs25(Disclosure, { id, defaultOpen, summary: title, children: [
-    /* @__PURE__ */ jsx37("dl", { className: styles.grid, children: entries.map(([key, value]) => /* @__PURE__ */ jsxs25(React19.Fragment, { children: [
-      /* @__PURE__ */ jsx37("dt", { className: styles.key, children: key }),
-      /* @__PURE__ */ jsx37("dd", { className: styles.value, children: render(value) })
+  return /* @__PURE__ */ jsxs28(Disclosure, { id, defaultOpen, summary: title, children: [
+    /* @__PURE__ */ jsx40("dl", { className: styles.grid, children: entries.map(([key, value]) => /* @__PURE__ */ jsxs28(React22.Fragment, { children: [
+      /* @__PURE__ */ jsx40("dt", { className: styles.key, children: key }),
+      /* @__PURE__ */ jsx40("dd", { className: styles.value, children: render(value) })
     ] }, key)) }),
-    /* @__PURE__ */ jsx37(Text10, { as: "p", className: styles.empty, children: "These facts were supplied by the app, not produced by the model." })
+    /* @__PURE__ */ jsx40(Text12, { as: "p", className: styles.empty, children: "These facts were supplied by the app, not produced by the model." })
   ] });
 }
 
 // src/grounding/ProviderAttribution.tsx
-import { makeStyles as makeStyles30, tokens as tokens27 } from "@fluentui/react-components";
+import { makeStyles as makeStyles33, tokens as tokens30 } from "@fluentui/react-components";
 import { ShieldErrorRegular as ShieldErrorRegular2 } from "@fluentui/react-icons";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
-var useStyles29 = makeStyles30({
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+var useStyles32 = makeStyles33({
   root: {
     display: "flex",
     alignItems: "center",
-    gap: tokens27.spacingHorizontalXXS,
-    fontSize: tokens27.fontSizeBase100,
-    color: tokens27.colorNeutralForeground3
+    gap: tokens30.spacingHorizontalXXS,
+    fontSize: tokens30.fontSizeBase100,
+    color: tokens30.colorNeutralForeground3
   },
-  guarded: { color: tokens27.colorPaletteDarkOrangeForeground1 }
+  guarded: { color: tokens30.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__ */ jsxs26("span", { className: `${styles.root} ${styles.guarded}`, children: [
-      /* @__PURE__ */ jsx38(ShieldErrorRegular2, { "aria-hidden": "true" }),
+    return /* @__PURE__ */ jsxs29("span", { className: `${styles.root} ${styles.guarded}`, children: [
+      /* @__PURE__ */ jsx41(ShieldErrorRegular2, { "aria-hidden": "true" }),
       "Withheld and replaced with safe text",
       who ? ` \u2014 not ${who}'s words` : ""
     ] });
   }
-  return /* @__PURE__ */ jsxs26("span", { className: styles.root, children: [
+  return /* @__PURE__ */ jsxs29("span", { className: styles.root, children: [
     "Answered by ",
     who || "the agent"
   ] });
@@ -2411,57 +2897,57 @@ function messageAttribution(message) {
 }
 
 // src/actions/ActionCard.tsx
-import * as React20 from "react";
-import { Text as Text11, makeStyles as makeStyles31, tokens as tokens28 } from "@fluentui/react-components";
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
-var useStyles30 = makeStyles31({
-  head: { display: "flex", alignItems: "center", gap: tokens28.spacingHorizontalXS },
-  description: { color: tokens28.colorNeutralForeground2, fontSize: tokens28.fontSizeBase200 },
-  footer: { display: "flex", gap: tokens28.spacingHorizontalS, justifyContent: "flex-end", marginTop: tokens28.spacingVerticalXS }
+import * as React23 from "react";
+import { Text as Text13, makeStyles as makeStyles34, tokens as tokens31 } from "@fluentui/react-components";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+var useStyles33 = makeStyles34({
+  head: { display: "flex", alignItems: "center", gap: tokens31.spacingHorizontalXS },
+  description: { color: tokens31.colorNeutralForeground2, fontSize: tokens31.fontSizeBase200 },
+  footer: { display: "flex", gap: tokens31.spacingHorizontalS, justifyContent: "flex-end", marginTop: tokens31.spacingVerticalXS }
 });
 function ActionCard({ title, description, icon, pending, children, footer }) {
-  const styles = useStyles30();
-  return /* @__PURE__ */ jsxs27(CardSurface, { emphasis: pending ? "attention" : "none", children: [
-    /* @__PURE__ */ jsxs27("div", { className: styles.head, children: [
-      icon ? React20.cloneElement(icon, { "aria-hidden": "true" }) : null,
-      /* @__PURE__ */ jsx39(Text11, { weight: "semibold", children: title })
+  const styles = useStyles33();
+  return /* @__PURE__ */ jsxs30(CardSurface, { emphasis: pending ? "attention" : "none", children: [
+    /* @__PURE__ */ jsxs30("div", { className: styles.head, children: [
+      icon ? React23.cloneElement(icon, { "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ jsx42(Text13, { weight: "semibold", children: title })
     ] }),
-    description ? /* @__PURE__ */ jsx39("span", { className: styles.description, children: description }) : null,
+    description ? /* @__PURE__ */ jsx42("span", { className: styles.description, children: description }) : null,
     children,
-    footer ? /* @__PURE__ */ jsx39("div", { className: styles.footer, children: footer }) : null
+    footer ? /* @__PURE__ */ jsx42("div", { className: styles.footer, children: footer }) : null
   ] });
 }
 
 // src/actions/ApprovalCard.tsx
-import * as React22 from "react";
-import { Button as Button15, Spinner, makeStyles as makeStyles34, tokens as tokens31 } from "@fluentui/react-components";
-import { CheckmarkRegular, DismissRegular as DismissRegular2, EditRegular } from "@fluentui/react-icons";
+import * as React25 from "react";
+import { Button as Button17, Spinner, makeStyles as makeStyles37, tokens as tokens34 } from "@fluentui/react-components";
+import { CheckmarkRegular, DismissRegular as DismissRegular3, EditRegular } from "@fluentui/react-icons";
 
 // src/actions/ParameterReview.tsx
-import * as React21 from "react";
-import { Input, makeStyles as makeStyles32, tokens as tokens29, Text as Text12 } from "@fluentui/react-components";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
-var useStyles31 = makeStyles32({
+import * as React24 from "react";
+import { Input, makeStyles as makeStyles35, tokens as tokens32, Text as Text14 } from "@fluentui/react-components";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+var useStyles34 = makeStyles35({
   grid: {
     display: "grid",
     gridTemplateColumns: "minmax(110px, max-content) 1fr",
-    gap: `${tokens29.spacingVerticalXS} ${tokens29.spacingHorizontalM}`,
+    gap: `${tokens32.spacingVerticalXS} ${tokens32.spacingHorizontalM}`,
     alignItems: "center",
     margin: 0
   },
-  key: { margin: 0, color: tokens29.colorNeutralForeground2, fontSize: tokens29.fontSizeBase200 },
+  key: { margin: 0, color: tokens32.colorNeutralForeground2, fontSize: tokens32.fontSizeBase200 },
   value: { margin: 0 },
   raw: {
     whiteSpace: "pre-wrap",
     wordBreak: "break-all",
-    fontFamily: tokens29.fontFamilyMonospace,
-    fontSize: tokens29.fontSizeBase200,
-    color: tokens29.colorNeutralForeground2
+    fontFamily: tokens32.fontFamilyMonospace,
+    fontSize: tokens32.fontSizeBase200,
+    color: tokens32.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;
@@ -2470,18 +2956,18 @@ function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
     }
   }, [argumentsJson]);
   if (!parsed) {
-    return /* @__PURE__ */ jsxs28("div", { children: [
-      /* @__PURE__ */ jsx40(Text12, { size: 200, children: "Arguments (unparsed)" }),
-      /* @__PURE__ */ jsx40("pre", { className: styles.raw, children: argumentsJson || "(empty)" })
+    return /* @__PURE__ */ jsxs31("div", { children: [
+      /* @__PURE__ */ jsx43(Text14, { size: 200, children: "Arguments (unparsed)" }),
+      /* @__PURE__ */ jsx43("pre", { className: styles.raw, children: argumentsJson || "(empty)" })
     ] });
   }
   const set = (key, next) => {
     if (!onChange) return;
     onChange(JSON.stringify({ ...parsed, [key]: next }));
   };
-  return /* @__PURE__ */ jsx40("dl", { className: styles.grid, children: Object.entries(parsed).map(([key, value]) => /* @__PURE__ */ jsxs28(React21.Fragment, { children: [
-    /* @__PURE__ */ jsx40("dt", { className: styles.key, children: key }),
-    /* @__PURE__ */ jsx40("dd", { className: styles.value, children: readOnly ? /* @__PURE__ */ jsx40("span", { className: styles.raw, children: typeof value === "string" ? value : JSON.stringify(value) }) : /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43("dl", { className: styles.grid, children: Object.entries(parsed).map(([key, value]) => /* @__PURE__ */ jsxs31(React24.Fragment, { children: [
+    /* @__PURE__ */ jsx43("dt", { className: styles.key, children: key }),
+    /* @__PURE__ */ jsx43("dd", { className: styles.value, children: readOnly ? /* @__PURE__ */ jsx43("span", { className: styles.raw, children: typeof value === "string" ? value : JSON.stringify(value) }) : /* @__PURE__ */ jsx43(
       Input,
       {
         size: "small",
@@ -2494,32 +2980,32 @@ function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
 }
 
 // src/actions/ActionResult.tsx
-import { MessageBar as MessageBar4, MessageBarBody as MessageBarBody4, MessageBarTitle as MessageBarTitle4, MessageBarActions as MessageBarActions4, Button as Button14, makeStyles as makeStyles33, tokens as tokens30 } from "@fluentui/react-components";
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { MessageBar as MessageBar4, MessageBarBody as MessageBarBody4, MessageBarTitle as MessageBarTitle4, MessageBarActions as MessageBarActions4, Button as Button16, makeStyles as makeStyles36, tokens as tokens33 } from "@fluentui/react-components";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 var INTENT2 = { succeeded: "success", failed: "error", denied: "warning" };
 var TITLE = { succeeded: "Done", failed: "Failed", denied: "Not approved" };
-var useStyles32 = makeStyles33({
-  id: { display: "block", marginTop: tokens30.spacingVerticalXXS, fontSize: tokens30.fontSizeBase100, color: tokens30.colorNeutralForeground3, fontFamily: tokens30.fontFamilyMonospace }
+var useStyles35 = makeStyles36({
+  id: { display: "block", marginTop: tokens33.spacingVerticalXXS, fontSize: tokens33.fontSizeBase100, color: tokens33.colorNeutralForeground3, fontFamily: tokens33.fontFamilyMonospace }
 });
 function ActionResult({ status, message, correlationId, onRetry }) {
-  const styles = useStyles32();
-  return /* @__PURE__ */ jsxs29(MessageBar4, { intent: INTENT2[status], children: [
-    /* @__PURE__ */ jsxs29(MessageBarBody4, { children: [
-      /* @__PURE__ */ jsx41(MessageBarTitle4, { children: TITLE[status] }),
+  const styles = useStyles35();
+  return /* @__PURE__ */ jsxs32(MessageBar4, { intent: INTENT2[status], children: [
+    /* @__PURE__ */ jsxs32(MessageBarBody4, { children: [
+      /* @__PURE__ */ jsx44(MessageBarTitle4, { children: TITLE[status] }),
       message,
-      correlationId ? /* @__PURE__ */ jsxs29("span", { className: styles.id, children: [
+      correlationId ? /* @__PURE__ */ jsxs32("span", { className: styles.id, children: [
         "Correlation id: ",
         correlationId
       ] }) : null
     ] }),
-    status === "failed" && onRetry ? /* @__PURE__ */ jsx41(MessageBarActions4, { children: /* @__PURE__ */ jsx41(Button14, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
+    status === "failed" && onRetry ? /* @__PURE__ */ jsx44(MessageBarActions4, { children: /* @__PURE__ */ jsx44(Button16, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
   ] });
 }
 
 // src/actions/ApprovalCard.tsx
-import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
-var useStyles33 = makeStyles34({
-  busy: { display: "flex", alignItems: "center", gap: tokens31.spacingHorizontalXS, fontSize: tokens31.fontSizeBase200 }
+import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+var useStyles36 = makeStyles37({
+  busy: { display: "flex", alignItems: "center", gap: tokens34.spacingHorizontalXS, fontSize: tokens34.fontSizeBase200 }
 });
 function ApprovalCard({
   toolCall,
@@ -2528,15 +3014,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__ */ jsxs30(ActionCard, { title: toolCall.name, description: "Tool call", children: [
-      /* @__PURE__ */ jsx42(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
-      /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsxs33(ActionCard, { title: toolCall.name, description: "Tool call", children: [
+      /* @__PURE__ */ jsx45(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+      /* @__PURE__ */ jsx45(
         ActionResult,
         {
           status: toolCall.status === "succeeded" ? "succeeded" : toolCall.status === "denied" ? "denied" : "failed",
@@ -2557,29 +3043,29 @@ function ApprovalCard({
     setDecided(true);
     onDeny(toolCall);
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx45(
     ActionCard,
     {
       title: toolCall.name,
       description: "The agent is asking to run this. Check the details before approving.",
       pending: !locked,
-      footer: locked ? /* @__PURE__ */ jsxs30("span", { className: styles.busy, children: [
-        /* @__PURE__ */ jsx42(Spinner, { size: "tiny" }),
+      footer: locked ? /* @__PURE__ */ jsxs33("span", { className: styles.busy, children: [
+        /* @__PURE__ */ jsx45(Spinner, { size: "tiny" }),
         " Submitting\u2026"
-      ] }) : /* @__PURE__ */ jsxs30(Fragment8, { children: [
-        allowEdit ? /* @__PURE__ */ jsx42(Button15, { size: "small", icon: /* @__PURE__ */ jsx42(EditRegular, {}), onClick: () => setEditing((v) => !v), children: editing ? "Done editing" : "Edit" }) : null,
-        /* @__PURE__ */ jsx42(Button15, { size: "small", icon: /* @__PURE__ */ jsx42(DismissRegular2, {}), onClick: deny, disabled: locked, children: "Deny" }),
-        /* @__PURE__ */ jsx42(Button15, { size: "small", appearance: "primary", icon: /* @__PURE__ */ jsx42(CheckmarkRegular, {}), onClick: approve, disabled: locked, children: "Approve" })
+      ] }) : /* @__PURE__ */ jsxs33(Fragment8, { children: [
+        allowEdit ? /* @__PURE__ */ jsx45(Button17, { size: "small", icon: /* @__PURE__ */ jsx45(EditRegular, {}), onClick: () => setEditing((v) => !v), children: editing ? "Done editing" : "Edit" }) : null,
+        /* @__PURE__ */ jsx45(Button17, { size: "small", icon: /* @__PURE__ */ jsx45(DismissRegular3, {}), onClick: deny, disabled: locked, children: "Deny" }),
+        /* @__PURE__ */ jsx45(Button17, { size: "small", appearance: "primary", icon: /* @__PURE__ */ jsx45(CheckmarkRegular, {}), onClick: approve, disabled: locked, children: "Approve" })
       ] }),
-      children: /* @__PURE__ */ jsx42(ParameterReview, { argumentsJson: args, readOnly: !editing, onChange: setArgs })
+      children: /* @__PURE__ */ jsx45(ParameterReview, { argumentsJson: args, readOnly: !editing, onChange: setArgs })
     }
   );
 }
 
 // src/actions/ToolCallCard.tsx
-import * as React23 from "react";
-import { Badge as Badge3, Spinner as Spinner2, makeStyles as makeStyles35, tokens as tokens32 } from "@fluentui/react-components";
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { Badge as Badge4, Spinner as Spinner2, makeStyles as makeStyles38, tokens as tokens35 } from "@fluentui/react-components";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 var LABEL = {
   proposed: "Proposed",
   running: "Running",
@@ -2594,41 +3080,41 @@ var COLOUR = {
   failed: "danger",
   denied: "warning"
 };
-var useStyles34 = makeStyles35({
-  head: { display: "flex", alignItems: "center", gap: tokens32.spacingHorizontalXS },
-  name: { fontFamily: tokens32.fontFamilyMonospace, fontSize: tokens32.fontSizeBase200 },
+var useStyles37 = makeStyles38({
+  head: { display: "flex", alignItems: "center", gap: tokens35.spacingHorizontalXS },
+  name: { fontFamily: tokens35.fontFamilyMonospace, fontSize: tokens35.fontSizeBase200 },
   result: {
     whiteSpace: "pre-wrap",
     wordBreak: "break-all",
-    fontFamily: tokens32.fontFamilyMonospace,
-    fontSize: tokens32.fontSizeBase200,
-    marginTop: tokens32.spacingVerticalXS
+    fontFamily: tokens35.fontFamilyMonospace,
+    fontSize: tokens35.fontSizeBase200,
+    marginTop: tokens35.spacingVerticalXS
   }
 });
 function ToolCallCard({ toolCall, defaultExpanded = false }) {
-  const styles = useStyles34();
-  const id = React23.useId();
-  return /* @__PURE__ */ jsx43(CardSurface, { children: /* @__PURE__ */ jsxs31(
+  const styles = useStyles37();
+  const id = React26.useId();
+  return /* @__PURE__ */ jsx46(CardSurface, { children: /* @__PURE__ */ jsxs34(
     Disclosure,
     {
       id,
       defaultOpen: defaultExpanded,
-      summary: /* @__PURE__ */ jsxs31("span", { className: styles.head, children: [
-        /* @__PURE__ */ jsx43("span", { className: styles.name, children: toolCall.name }),
-        /* @__PURE__ */ jsx43(Badge3, { appearance: "tint", color: COLOUR[toolCall.status], children: LABEL[toolCall.status] }),
-        toolCall.status === "running" ? /* @__PURE__ */ jsx43(Spinner2, { size: "extra-tiny" }) : null
+      summary: /* @__PURE__ */ jsxs34("span", { className: styles.head, children: [
+        /* @__PURE__ */ jsx46("span", { className: styles.name, children: toolCall.name }),
+        /* @__PURE__ */ jsx46(Badge4, { appearance: "tint", color: COLOUR[toolCall.status], children: LABEL[toolCall.status] }),
+        toolCall.status === "running" ? /* @__PURE__ */ jsx46(Spinner2, { size: "extra-tiny" }) : null
       ] }),
       children: [
-        /* @__PURE__ */ jsx43(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
-        toolCall.resultText ? /* @__PURE__ */ jsx43("div", { className: styles.result, children: toolCall.resultText }) : null,
-        toolCall.failure ? /* @__PURE__ */ jsx43("div", { className: styles.result, children: toolCall.failure.message }) : null
+        /* @__PURE__ */ jsx46(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+        toolCall.resultText ? /* @__PURE__ */ jsx46("div", { className: styles.result, children: toolCall.resultText }) : null,
+        toolCall.failure ? /* @__PURE__ */ jsx46("div", { className: styles.result, children: toolCall.failure.message }) : null
       ]
     }
   ) });
 }
 
 // src/host/AgentKitHostProvider.tsx
-import * as React24 from "react";
+import * as React27 from "react";
 import { FluentProvider, IdPrefixProvider } from "@fluentui/react-components";
 
 // src/theme/index.ts
@@ -2665,16 +3151,16 @@ function resolveHostTheme(input = {}) {
 var nextAgentIdPrefix = createIdPrefixCounter("dvkak");
 
 // src/host/AgentKitHostProvider.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "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__ */ jsx44(IdPrefixProvider, { value: idPrefix, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(IdPrefixProvider, { value: idPrefix, children: /* @__PURE__ */ jsx47(
     FluentProvider,
     {
       theme: resolved,
@@ -2983,12 +3469,14 @@ export {
   AgentAppShell,
   AgentAvatar,
   AgentKitHostProvider,
+  AgentLauncher,
   AgentOpsPanel,
   AgentPicker,
   AgentStatusBadge,
   AnswerWithCitations,
   AppRail,
   ApprovalCard,
+  AssistantPanel,
   AvailabilityBanner,
   CitationChip,
   CitationList,
@@ -3000,6 +3488,7 @@ export {
   DEFAULT_GROUP_WINDOW_MS,
   DayDivider,
   EmptyConversation,
+  FeedbackPanel,
   GlobalSearchBar,
   GroundingPanel,
   LiveAnnouncer,
@@ -3061,6 +3550,7 @@ export {
   splitTextByCitations,
   useConversation,
   useFocusRestore,
+  useReturnFocus,
   useRovingTabindex,
   useStickyScroll,
   useVisuallyHiddenStyles