@dataverse-kit/agent-kit 0.2.0

package/dist/index.cjs

@@ -0,0 +1,3145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ANNOUNCE_FULL_TEXT_MAX_CHARS: () => ANNOUNCE_FULL_TEXT_MAX_CHARS,
+  ActionCard: () => ActionCard,
+  ActionResult: () => ActionResult,
+  AgentAppShell: () => AgentAppShell,
+  AgentAvatar: () => AgentAvatar,
+  AgentKitHostProvider: () => AgentKitHostProvider,
+  AgentOpsPanel: () => AgentOpsPanel,
+  AgentPicker: () => AgentPicker,
+  AgentStatusBadge: () => AgentStatusBadge,
+  AnswerWithCitations: () => AnswerWithCitations,
+  AppRail: () => AppRail,
+  ApprovalCard: () => ApprovalCard,
+  AvailabilityBanner: () => AvailabilityBanner,
+  CitationChip: () => CitationChip,
+  CitationList: () => CitationList,
+  Composer: () => Composer,
+  ConfirmInline: () => ConfirmInline,
+  ConversationHeader: () => ConversationHeader,
+  ConversationList: () => ConversationList,
+  ConversationListItem: () => ConversationListItem,
+  DEFAULT_GROUP_WINDOW_MS: () => DEFAULT_GROUP_WINDOW_MS,
+  DayDivider: () => DayDivider,
+  EmptyConversation: () => EmptyConversation,
+  GlobalSearchBar: () => GlobalSearchBar,
+  GroundingPanel: () => GroundingPanel,
+  LiveAnnouncer: () => LiveAnnouncer,
+  MessageActions: () => MessageActions,
+  MessageBubble: () => MessageBubble,
+  MessageList: () => MessageList,
+  MockAgentService: () => MockAgentService,
+  ModelBadge: () => ModelBadge,
+  NO_ANNOUNCEMENT: () => NO_ANNOUNCEMENT,
+  NullAgentService: () => NullAgentService,
+  ParameterReview: () => ParameterReview,
+  ProviderAttribution: () => ProviderAttribution,
+  RightPane: () => RightPane,
+  RunHistoryPanel: () => RunHistoryPanel,
+  RunTimeline: () => RunTimeline,
+  STICK_TO_BOTTOM_THRESHOLD_PX: () => STICK_TO_BOTTOM_THRESHOLD_PX,
+  SourceCard: () => SourceCard,
+  StreamingText: () => StreamingText,
+  SuggestedPrompts: () => SuggestedPrompts,
+  SystemNotice: () => SystemNotice,
+  ThrottleNotice: () => ThrottleNotice,
+  ToolCallCard: () => ToolCallCard,
+  TypingIndicator: () => TypingIndicator,
+  UsageMeter: () => UsageMeter,
+  agentDarkTheme: () => agentDarkTheme,
+  agentTheme: () => agentTheme,
+  appendUserMessage: () => appendUserMessage,
+  applyAgentEvent: () => applyAgentEvent,
+  bucketByDay: () => bucketByDay,
+  classifyTransportFailure: () => classifyTransportFailure,
+  conversationAccessibleName: () => conversationAccessibleName,
+  createAgentDarkTheme: () => createAgentDarkTheme,
+  createAgentService: () => createAgentService,
+  createAgentTheme: () => createAgentTheme,
+  createIdPrefixCounter: () => createIdPrefixCounter,
+  dayKeyOf: () => dayKeyOf,
+  decide: () => decide,
+  deriveAnnouncement: () => deriveAnnouncement,
+  extractCitationMarkers: () => extractCitationMarkers,
+  formatDayLabel: () => formatDayLabel,
+  fromClaudeStreamEvent: () => fromClaudeStreamEvent,
+  fromFoundryChatResult: () => fromFoundryChatResult,
+  fromOpenAiChatChunk: () => fromOpenAiChatChunk,
+  fromSseLine: () => fromSseLine,
+  groupMessages: () => groupMessages,
+  immediateScheduler: () => immediateScheduler,
+  initialConversation: () => initialConversation,
+  isSameAuthorRun: () => isSameAuthorRun,
+  isTerminalStatus: () => isTerminalStatus,
+  messageAttribution: () => messageAttribution,
+  mockScenarios: () => mockScenarios,
+  nextAgentIdPrefix: () => nextAgentIdPrefix,
+  realScheduler: () => realScheduler,
+  renumberCitations: () => renumberCitations,
+  resolveHostTheme: () => resolveHostTheme,
+  runStatusLabel: () => runStatusLabel,
+  runStatusSeverity: () => runStatusSeverity,
+  shouldStickToBottom: () => shouldStickToBottom,
+  splitTextByCitations: () => splitTextByCitations,
+  useConversation: () => useConversation,
+  useFocusRestore: () => useFocusRestore,
+  useRovingTabindex: () => useRovingTabindex,
+  useStickyScroll: () => useStickyScroll,
+  useVisuallyHiddenStyles: () => useVisuallyHiddenStyles
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/conversation/MessageList.tsx
+var React10 = __toESM(require("react"), 1);
+var import_react_components10 = require("@fluentui/react-components");
+var import_react_icons3 = require("@fluentui/react-icons");
+
+// src/core/runStatus.ts
+var TERMINAL = /* @__PURE__ */ new Set([
+  "succeeded",
+  "blocked",
+  "refused",
+  "error",
+  "notProvisioned",
+  "cancelled"
+]);
+function isTerminalStatus(status) {
+  return TERMINAL.has(status);
+}
+function runStatusSeverity(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "blocked":
+    case "refused":
+      return "warning";
+    case "error":
+      return "error";
+    case "notProvisioned":
+    case "cancelled":
+      return "info";
+  }
+}
+function classifyTransportFailure(input) {
+  const { httpStatus, code, retryAfterMs } = input;
+  const message = input.message ?? "The agent could not be reached.";
+  if (httpStatus === 503) {
+    return {
+      status: "notProvisioned",
+      message,
+      code: code ?? "not_provisioned",
+      recoverable: false,
+      correlationId: void 0
+    };
+  }
+  if (httpStatus === 429) {
+    return { status: "error", message, code: code ?? "rate_limited", recoverable: true, retryAfterMs };
+  }
+  if (code === "content_filter") {
+    return { status: "blocked", message, code, recoverable: false };
+  }
+  return { status: "error", message, code, recoverable: httpStatus !== void 0 && httpStatus >= 500 };
+}
+
+// src/core/grouping.ts
+var DEFAULT_GROUP_WINDOW_MS = 5 * 60 * 1e3;
+function dayKey(epochMs, timeZone) {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(new Date(epochMs));
+}
+function isSameAuthorRun(a, b, windowMs = DEFAULT_GROUP_WINDOW_MS, timeZone) {
+  if (a.authorId !== b.authorId) return false;
+  if (a.role !== b.role) return false;
+  if (a.role === "system" || b.role === "system") return false;
+  if (b.createdAt < a.createdAt) return false;
+  if (b.createdAt - a.createdAt > windowMs) return false;
+  return dayKey(a.createdAt, timeZone) === dayKey(b.createdAt, timeZone);
+}
+function groupMessages(messages, options = {}) {
+  const windowMs = options.windowMs ?? DEFAULT_GROUP_WINDOW_MS;
+  const groups = [];
+  for (const message of messages) {
+    const current = groups[groups.length - 1];
+    const previousId = current?.messageIds[current.messageIds.length - 1];
+    const previous = previousId ? messages.find((m) => m.id === previousId) : void 0;
+    if (current && previous && isSameAuthorRun(previous, message, windowMs, options.timeZone)) {
+      current.messageIds.push(message.id);
+      continue;
+    }
+    groups.push({
+      key: `${message.authorId}:${message.id}`,
+      authorId: message.authorId,
+      role: message.role,
+      startedAt: message.createdAt,
+      messageIds: [message.id]
+    });
+  }
+  return groups;
+}
+
+// src/core/dayDividers.ts
+function dayKeyOf(epochMs, timeZone) {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(new Date(epochMs));
+}
+var DAY_MS = 24 * 60 * 60 * 1e3;
+function labelFor(dayKey2, nowMs, timeZone) {
+  const todayKey = dayKeyOf(nowMs, timeZone);
+  if (dayKey2 === todayKey) return { kind: "today" };
+  if (dayKey2 === dayKeyOf(nowMs - DAY_MS, timeZone)) return { kind: "yesterday" };
+  const asDate = /* @__PURE__ */ new Date(`${dayKey2}T00:00:00Z`);
+  for (let back = 2; back <= 6; back++) {
+    if (dayKey2 === dayKeyOf(nowMs - back * DAY_MS, timeZone)) {
+      return { kind: "weekday", weekday: asDate.getUTCDay(), iso: dayKey2 };
+    }
+  }
+  return { kind: "date", iso: dayKey2 };
+}
+function bucketByDay(messages, options = {}) {
+  const nowMs = options.now ?? Date.now();
+  const buckets = [];
+  for (const message of messages) {
+    const key = dayKeyOf(message.createdAt, options.timeZone);
+    const current = buckets[buckets.length - 1];
+    if (current && current.dayKey === key) {
+      current.messageIds.push(message.id);
+      continue;
+    }
+    buckets.push({
+      dayKey: key,
+      label: labelFor(key, nowMs, options.timeZone),
+      messageIds: [message.id]
+    });
+  }
+  return buckets;
+}
+
+// src/core/citations.ts
+var BRACKET_MARKER = /\[(\d{1,3})\]/g;
+var AOAI_MARKER = /【(\d{1,3}):\d+†[^】]*】/g;
+function extractCitationMarkers(text) {
+  const found = [];
+  for (const re of [BRACKET_MARKER, AOAI_MARKER]) {
+    re.lastIndex = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      found.push({ marker: m[1], index: m.index, length: m[0].length });
+    }
+  }
+  return found.sort((a, b) => a.index - b.index);
+}
+function renumberCitations(text, sources) {
+  const markers = extractCitationMarkers(text);
+  const order = [];
+  for (const { marker } of markers) if (!order.includes(marker)) order.push(marker);
+  const byOriginal = /* @__PURE__ */ new Map();
+  order.forEach((marker, i) => byOriginal.set(marker, i + 1));
+  const used = [];
+  const citations = [];
+  for (const marker of order) {
+    const source = sources[Number(marker) - 1];
+    if (!source) continue;
+    used.push(source);
+    citations.push({ marker: String(byOriginal.get(marker)), sourceId: source.id });
+  }
+  let out = "";
+  let cursor = 0;
+  for (const { marker, index, length } of markers) {
+    out += text.slice(cursor, index);
+    const renumbered = byOriginal.get(marker);
+    out += renumbered === void 0 ? "" : `[${renumbered}]`;
+    cursor = index + length;
+  }
+  out += text.slice(cursor);
+  return { text: out, used, citations };
+}
+function splitTextByCitations(text, citations) {
+  const markers = extractCitationMarkers(text);
+  if (markers.length === 0) return text ? [{ kind: "text", text }] : [];
+  const segments = [];
+  let cursor = 0;
+  for (const { marker, index, length } of markers) {
+    if (index > cursor) segments.push({ kind: "text", text: text.slice(cursor, index) });
+    const citation = citations.find((c) => c.marker === marker);
+    segments.push({
+      kind: "citation",
+      text: `[${marker}]`,
+      marker,
+      sourceId: citation?.sourceId
+    });
+    cursor = index + length;
+  }
+  if (cursor < text.length) segments.push({ kind: "text", text: text.slice(cursor) });
+  return segments;
+}
+
+// src/core/conversationReducer.ts
+function initialConversation(seed = []) {
+  return { messages: [...seed], streamingMessageId: null, status: "idle" };
+}
+function patch(state, messageId, update) {
+  const i = state.messages.findIndex((m) => m.id === messageId);
+  if (i === -1) return state.messages;
+  const next = state.messages.slice();
+  next[i] = update(next[i]);
+  return next;
+}
+function appendUserMessage(state, input) {
+  const message = {
+    id: input.id,
+    role: "user",
+    authorId: input.authorId ?? "user",
+    text: input.text,
+    createdAt: input.now ?? Date.now(),
+    attachments: input.attachments
+  };
+  return { ...state, messages: [...state.messages, message], status: "connecting", failure: void 0 };
+}
+function applyAgentEvent(state, event) {
+  switch (event.type) {
+    case "turn_start": {
+      const message = {
+        id: event.messageId,
+        role: "assistant",
+        authorId: event.provider ?? "agent",
+        text: "",
+        createdAt: Date.now(),
+        streaming: true,
+        provider: event.provider
+      };
+      return {
+        ...state,
+        messages: [...state.messages, message],
+        streamingMessageId: event.messageId,
+        status: "streaming",
+        statusLabel: void 0,
+        failure: void 0,
+        suggestions: void 0
+      };
+    }
+    case "text_delta":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({ ...m, text: m.text + event.text }))
+      };
+    case "thinking_delta":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({
+          ...m,
+          thinking: (m.thinking ?? "") + event.text
+        }))
+      };
+    case "tool_call":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({
+          ...m,
+          toolCalls: [...m.toolCalls ?? [], event.call]
+        }))
+      };
+    case "tool_result":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({
+          ...m,
+          toolCalls: (m.toolCalls ?? []).map(
+            (c) => c.id === event.callId ? { ...c, status: event.status, resultText: event.resultText, failure: event.failure } : c
+          )
+        }))
+      };
+    case "sources":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({ ...m, sources: event.sources }))
+      };
+    case "citation":
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({
+          ...m,
+          citations: [...m.citations ?? [], event.citation]
+        }))
+      };
+    case "suggestions":
+      return { ...state, suggestions: event.prompts };
+    case "status":
+      return { ...state, statusLabel: event.label };
+    case "turn_end": {
+      const { result } = event;
+      return {
+        ...state,
+        messages: patch(state, event.messageId, (m) => ({
+          ...m,
+          // A non-streaming provider sends no deltas, so the assembled text arrives here.
+          text: m.text.length > 0 ? m.text : result.text,
+          streaming: false,
+          guarded: result.guarded,
+          provider: result.provider,
+          usage: result.usage,
+          failure: result.failure
+        })),
+        streamingMessageId: null,
+        status: result.status,
+        statusLabel: void 0,
+        failure: result.failure,
+        usage: result.usage
+      };
+    }
+  }
+}
+
+// src/core/normalize.ts
+function fromSseLine(line) {
+  const trimmed = line.trim();
+  if (trimmed === "" || trimmed.startsWith(":")) return void 0;
+  if (!trimmed.startsWith("data:")) return void 0;
+  const payload = trimmed.slice("data:".length).trim();
+  if (payload === "") return void 0;
+  if (payload === "[DONE]") return "[DONE]";
+  try {
+    return JSON.parse(payload);
+  } catch {
+    return void 0;
+  }
+}
+function fromOpenAiChatChunk(chunk, ctx) {
+  const events = [];
+  const delta = chunk?.choices?.[0]?.delta;
+  if (!delta) return events;
+  if (typeof delta.content === "string" && delta.content.length > 0) {
+    events.push({ type: "text_delta", messageId: ctx.messageId, text: delta.content });
+  }
+  for (const call of delta.tool_calls ?? []) {
+    if (!call.id) continue;
+    const toolCall = {
+      id: call.id,
+      name: call.function?.name ?? "",
+      argumentsJson: call.function?.arguments ?? "",
+      status: "proposed"
+    };
+    events.push({ type: "tool_call", messageId: ctx.messageId, call: toolCall });
+  }
+  return events;
+}
+function fromClaudeStreamEvent(event, ctx) {
+  switch (event.type) {
+    case "init":
+      return [
+        {
+          type: "turn_start",
+          turnId: ctx.turnId,
+          messageId: ctx.messageId,
+          model: event.model,
+          provider: "claude-bridge",
+          sessionId: event.sessionId
+        }
+      ];
+    case "text_delta":
+      return event.text ? [{ type: "text_delta", messageId: ctx.messageId, text: event.text }] : [];
+    case "thinking_delta":
+      return event.text ? [{ type: "thinking_delta", messageId: ctx.messageId, text: event.text }] : [];
+    case "done":
+      return [
+        {
+          type: "turn_end",
+          turnId: ctx.turnId,
+          messageId: ctx.messageId,
+          result: {
+            status: "succeeded",
+            text: event.fullText ?? "",
+            provider: "claude-bridge",
+            model: event.model,
+            usage: {
+              inputTokens: event.inputTokens,
+              outputTokens: event.outputTokens,
+              cachedTokens: event.cacheReadTokens,
+              costUsd: event.costUsd,
+              durationMs: event.durationMs,
+              model: event.model
+            }
+          }
+        }
+      ];
+    case "error":
+      return [
+        {
+          type: "turn_end",
+          turnId: ctx.turnId,
+          messageId: ctx.messageId,
+          result: {
+            status: "error",
+            text: "",
+            provider: "claude-bridge",
+            failure: {
+              status: "error",
+              message: event.message ?? "The agent failed.",
+              recoverable: event.recoverable ?? false
+            }
+          }
+        }
+      ];
+  }
+}
+function fromFoundryChatResult(result, ctx, provider = "foundry") {
+  return [
+    { type: "turn_start", turnId: ctx.turnId, messageId: ctx.messageId, model: result.model, provider },
+    {
+      type: "turn_end",
+      turnId: ctx.turnId,
+      messageId: ctx.messageId,
+      result: {
+        status: "succeeded",
+        text: result.text,
+        provider,
+        model: result.model,
+        usage: {
+          inputTokens: result.promptTokens,
+          outputTokens: result.completionTokens,
+          model: result.model
+        }
+      }
+    }
+  ];
+}
+
+// src/core/announce.ts
+var ANNOUNCE_FULL_TEXT_MAX_CHARS = 240;
+var NO_ANNOUNCEMENT = { polite: "", assertive: "" };
+var TERMINAL2 = /* @__PURE__ */ new Set(["succeeded", "blocked", "refused", "error", "notProvisioned", "cancelled"]);
+function deriveAnnouncement(state, previous) {
+  const wasTerminal = previous ? TERMINAL2.has(previous.status) : false;
+  const isTerminal = TERMINAL2.has(state.status);
+  if (!isTerminal || wasTerminal) return NO_ANNOUNCEMENT;
+  if (state.failure) {
+    return { polite: "", assertive: state.failure.message };
+  }
+  const last = state.messages[state.messages.length - 1];
+  const text = last?.text ?? "";
+  if (!text) return NO_ANNOUNCEMENT;
+  const guarded = last?.guarded ? "The response was withheld. " : "";
+  if (text.length <= ANNOUNCE_FULL_TEXT_MAX_CHARS) {
+    return { polite: `${guarded}${text}`, assertive: "" };
+  }
+  const words = text.trim().split(/\s+/).length;
+  return {
+    polite: `${guarded}Response complete, ${words} words.`,
+    assertive: ""
+  };
+}
+
+// src/core/scroll.ts
+var STICK_TO_BOTTOM_THRESHOLD_PX = 32;
+function shouldStickToBottom(geometry, thresholdPx = STICK_TO_BOTTOM_THRESHOLD_PX) {
+  const { scrollTop, scrollHeight, clientHeight } = geometry;
+  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+  return distanceFromBottom <= thresholdPx;
+}
+
+// src/core/ids.ts
+function createIdPrefixCounter(tag) {
+  let n = 0;
+  return () => `${tag}${++n}-`;
+}
+
+// src/a11y/LiveAnnouncer.tsx
+var React = __toESM(require("react"), 1);
+
+// src/a11y/visuallyHidden.ts
+var import_react_components = require("@fluentui/react-components");
+var useVisuallyHiddenStyles = (0, import_react_components.makeStyles)({
+  root: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap"
+  }
+});
+
+// src/a11y/LiveAnnouncer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function useAnnounceWithRepeat(next, set) {
+  React.useEffect(() => {
+    if (!next) return;
+    let cancelled = false;
+    set("");
+    const id = setTimeout(() => {
+      if (!cancelled) set(next);
+    }, 0);
+    return () => {
+      cancelled = true;
+      clearTimeout(id);
+    };
+  }, [next, set]);
+}
+function LiveAnnouncer({
+  polite = "",
+  assertive = ""
+}) {
+  const styles = useVisuallyHiddenStyles();
+  const [politeText, setPoliteText] = React.useState("");
+  const [assertiveText, setAssertiveText] = React.useState("");
+  useAnnounceWithRepeat(polite, setPoliteText);
+  useAnnounceWithRepeat(assertive, setAssertiveText);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: styles.root,
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        "data-testid": "agentkit-live-polite",
+        children: politeText
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: styles.root,
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        "data-testid": "agentkit-live-assertive",
+        children: assertiveText
+      }
+    )
+  ] });
+}
+
+// src/a11y/useFocusRestore.ts
+var React2 = __toESM(require("react"), 1);
+function useFocusRestore(containerRef) {
+  return React2.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const doc = container.ownerDocument;
+    if (doc.activeElement && doc.activeElement !== doc.body) return;
+    const focusable = container.querySelector(
+      'a[href],button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? container).focus();
+  }, [containerRef]);
+}
+
+// src/a11y/useRovingTabindex.ts
+var React3 = __toESM(require("react"), 1);
+function useRovingTabindex(options) {
+  const { orientation = "horizontal", loop = true, itemCount, onActivate } = options;
+  const [activeIndex, setActiveIndex] = React3.useState(0);
+  const clamp = React3.useCallback(
+    (index) => {
+      if (itemCount === 0) return 0;
+      return loop ? (index + itemCount) % itemCount : Math.min(Math.max(index, 0), itemCount - 1);
+    },
+    [itemCount, loop]
+  );
+  const getItemProps = React3.useCallback(
+    (index) => ({
+      tabIndex: index === activeIndex ? 0 : -1,
+      "data-roving-item": true,
+      onFocus: () => setActiveIndex(index),
+      onKeyDown: (event) => {
+        const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        let target = null;
+        if (event.key === nextKey) target = clamp(index + 1);
+        else if (event.key === prevKey) target = clamp(index - 1);
+        else if (event.key === "Home") target = 0;
+        else if (event.key === "End") target = itemCount - 1;
+        else if (event.key === "Enter" || event.key === " ") {
+          onActivate?.(index);
+          return;
+        }
+        if (target === null) return;
+        event.preventDefault();
+        event.stopPropagation();
+        setActiveIndex(target);
+        const group = event.currentTarget.parentElement;
+        group?.querySelectorAll("[data-roving-item]")[target]?.focus();
+      }
+    }),
+    [activeIndex, clamp, itemCount, onActivate, orientation]
+  );
+  return { activeIndex, setActiveIndex, getItemProps };
+}
+
+// src/hooks/useStickyScroll.ts
+var React4 = __toESM(require("react"), 1);
+function useStickyScroll(ref, messageCount) {
+  const wasPinnedRef = React4.useRef(true);
+  const [isPinned, setIsPinned] = React4.useState(true);
+  const onScroll = React4.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const pinned = shouldStickToBottom({
+      scrollTop: el.scrollTop,
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight
+    });
+    wasPinnedRef.current = pinned;
+    setIsPinned(pinned);
+  }, [ref]);
+  const scrollToBottom = React4.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: "auto" });
+    wasPinnedRef.current = true;
+    setIsPinned(true);
+  }, [ref]);
+  React4.useEffect(() => {
+    if (!wasPinnedRef.current) return;
+    const el = ref.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: "auto" });
+  }, [messageCount, ref]);
+  return { onScroll, scrollToBottom, isPinned };
+}
+
+// src/hooks/useConversation.ts
+var React5 = __toESM(require("react"), 1);
+var fallbackId = 0;
+function useConversation(options) {
+  const { service, seed, grounding, conversationId, createId } = options;
+  const [state, setState] = React5.useState(() => initialConversation(seed));
+  const [announcement, setAnnouncement] = React5.useState(NO_ANNOUNCEMENT);
+  const abortRef = React5.useRef(null);
+  const stateRef = React5.useRef(state);
+  stateRef.current = state;
+  const nextId = React5.useCallback(
+    () => createId?.() ?? `m${++fallbackId}-${Date.now().toString(36)}`,
+    [createId]
+  );
+  const commit = React5.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(() => {
+    abortRef.current?.abort();
+  }, []);
+  const send = React5.useCallback(
+    async (text, attachments) => {
+      if (!text.trim()) return;
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      let next = appendUserMessage(stateRef.current, { id: nextId(), text, attachments });
+      commit(next);
+      try {
+        for await (const event of service.send({
+          text,
+          history: next.messages,
+          grounding,
+          attachments,
+          conversationId,
+          cancelSignal: controller.signal
+        })) {
+          next = applyAgentEvent(next, event);
+          commit(next);
+        }
+      } catch (error) {
+        commit({
+          ...next,
+          streamingMessageId: null,
+          status: "error",
+          failure: {
+            status: "error",
+            message: error instanceof Error ? error.message : String(error),
+            recoverable: true
+          }
+        });
+      } finally {
+        if (abortRef.current === controller) abortRef.current = null;
+      }
+    },
+    [service, grounding, conversationId, nextId, commit]
+  );
+  React5.useEffect(() => () => abortRef.current?.abort(), []);
+  const busy = state.status === "connecting" || state.status === "streaming";
+  return { state, announcement, busy, send, cancel };
+}
+
+// src/conversation/MessageBubble.tsx
+var React9 = __toESM(require("react"), 1);
+var import_react_components7 = require("@fluentui/react-components");
+
+// src/conversation/StreamingText.tsx
+var import_react_components2 = require("@fluentui/react-components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var useStyles = (0, import_react_components2.makeStyles)({
+  root: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
+  caret: {
+    display: "inline-block",
+    width: "2px",
+    height: "1em",
+    marginLeft: "2px",
+    verticalAlign: "text-bottom",
+    backgroundColor: import_react_components2.tokens.colorBrandForeground1,
+    animationName: { "0%,49%": { opacity: 1 }, "50%,100%": { opacity: 0 } },
+    animationDuration: "1s",
+    animationIterationCount: "infinite",
+    // WCAG 2.2.2: a blinking caret is motion, and some readers cannot tolerate it.
+    "@media (prefers-reduced-motion: reduce)": { animationName: "none", opacity: 1 }
+  }
+});
+function StreamingText({ text, streaming }) {
+  const styles = useStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.root, "data-testid": "agentkit-streaming-text", children: [
+    text,
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.caret, "aria-hidden": "true" }) : null
+  ] });
+}
+
+// src/conversation/MessageActions.tsx
+var import_react_icons2 = require("@fluentui/react-icons");
+
+// src/internal/ActionToolbar.tsx
+var import_react_components3 = require("@fluentui/react-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var useStyles2 = (0, import_react_components3.makeStyles)({
+  root: {
+    display: "inline-flex",
+    gap: import_react_components3.tokens.spacingHorizontalXXS,
+    alignItems: "center",
+    backgroundColor: import_react_components3.tokens.colorNeutralBackground1,
+    borderRadius: import_react_components3.tokens.borderRadiusMedium,
+    boxShadow: import_react_components3.tokens.shadow4,
+    padding: import_react_components3.tokens.spacingHorizontalXXS
+  },
+  button: {
+    // ★ A focus ring that survives Windows forced-colors. Once the kit owns its own focus
+    //   management it owns the indicator too, and `outline: none` + box-shadow — the usual
+    //   custom-focus recipe — disappears entirely under forced-colors.
+    ":focus-visible": {
+      outline: `2px solid ${import_react_components3.tokens.colorStrokeFocus2}`,
+      outlineOffset: "1px"
+    }
+  }
+});
+function ActionToolbar({ actions, label, className }) {
+  const styles = useStyles2();
+  const roving = useRovingTabindex({ itemCount: actions.length, orientation: "horizontal" });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "toolbar", "aria-label": label, "aria-orientation": "horizontal", className: (0, import_react_components3.mergeClasses)(styles.root, className), children: actions.map((action, index) => {
+    const item = roving.getItemProps(index);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.Tooltip, { content: action.label, relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_components3.Button,
+      {
+        appearance: "subtle",
+        size: "small",
+        icon: action.icon,
+        disabled: action.disabled,
+        onClick: action.onClick,
+        className: styles.button,
+        ...item
+      }
+    ) }, action.key);
+  }) });
+}
+
+// src/internal/CardSurface.tsx
+var React6 = __toESM(require("react"), 1);
+var import_react_components4 = require("@fluentui/react-components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var useStyles3 = (0, import_react_components4.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: import_react_components4.tokens.spacingVerticalXS,
+    padding: import_react_components4.tokens.spacingVerticalM,
+    borderRadius: import_react_components4.tokens.borderRadiusMedium,
+    backgroundColor: import_react_components4.tokens.colorNeutralBackground1,
+    border: `1px solid ${import_react_components4.tokens.colorNeutralStroke2}`,
+    boxShadow: import_react_components4.tokens.shadow2
+  },
+  attention: { borderLeft: `3px solid ${import_react_components4.tokens.colorBrandStroke1}` }
+});
+var CardSurface = React6.forwardRef(
+  function CardSurface2({ emphasis = "none", className, children, ...rest }, ref) {
+    const styles = useStyles3();
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_react_components4.mergeClasses)(styles.root, emphasis === "attention" && styles.attention, className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+// src/internal/ConfirmInline.tsx
+var React7 = __toESM(require("react"), 1);
+var import_react_components5 = require("@fluentui/react-components");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var useStyles4 = (0, import_react_components5.makeStyles)({
+  root: { maxWidth: "420px" },
+  actions: { display: "flex", gap: import_react_components5.tokens.spacingHorizontalS, justifyContent: "flex-end", marginTop: import_react_components5.tokens.spacingVerticalS }
+});
+var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+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(() => {
+    if (!open) return;
+    returnTo.current = document.activeElement ?? null;
+    const first = ref.current?.querySelector(FOCUSABLE);
+    first?.focus();
+    return () => {
+      const target = returnTo.current;
+      if (target && target.isConnected) target.focus();
+    };
+  }, [open]);
+  if (!open) return null;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onCancel();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = [...ref.current?.querySelectorAll(FOCUSABLE) ?? []];
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    CardSurface,
+    {
+      ref,
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": bodyId,
+      onKeyDown,
+      className: styles.root,
+      emphasis: "attention",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Text, { id: titleId, weight: "semibold", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Text, { id: bodyId, size: 200, children: body }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.actions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Button, { size: "small", onClick: onCancel, children: cancelLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Button, { size: "small", appearance: destructive ? "primary" : "primary", onClick: onConfirm, children: confirmLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/internal/Disclosure.tsx
+var React8 = __toESM(require("react"), 1);
+var import_react_components6 = require("@fluentui/react-components");
+var import_react_icons = require("@fluentui/react-icons");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var useStyles5 = (0, import_react_components6.makeStyles)({
+  trigger: {
+    display: "flex",
+    alignItems: "center",
+    gap: import_react_components6.tokens.spacingHorizontalXS,
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: `${import_react_components6.tokens.spacingVerticalXXS} 0`,
+    color: import_react_components6.tokens.colorNeutralForeground2,
+    font: "inherit",
+    fontSize: import_react_components6.tokens.fontSizeBase200,
+    ":focus-visible": { outline: `2px solid ${import_react_components6.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
+  },
+  panel: { paddingTop: import_react_components6.tokens.spacingVerticalXS }
+});
+function Disclosure({
+  id,
+  summary,
+  children,
+  defaultOpen = false,
+  className
+}) {
+  const styles = useStyles5();
+  const [open, setOpen] = React8.useState(defaultOpen);
+  const panelId = `${id}-panel`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        type: "button",
+        id,
+        className: styles.trigger,
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_icons.ChevronDownRegular, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_icons.ChevronRightRegular, {}),
+          summary
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        id: panelId,
+        role: "region",
+        "aria-labelledby": id,
+        hidden: !open,
+        className: (0, import_react_components6.mergeClasses)(styles.panel),
+        children: open ? children : null
+      }
+    )
+  ] });
+}
+
+// src/conversation/MessageActions.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MessageActions({
+  message,
+  onCopy,
+  onRetry,
+  onFeedback
+}) {
+  const actions = [];
+  if (onCopy) {
+    actions.push({ key: "copy", label: "Copy message", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.CopyRegular, {}), onClick: () => onCopy(message) });
+  }
+  if (onRetry && message.role === "assistant") {
+    actions.push({ key: "retry", label: "Regenerate", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ArrowClockwiseRegular, {}), onClick: () => onRetry(message) });
+  }
+  if (onFeedback && message.role === "assistant") {
+    actions.push(
+      { key: "up", label: "Good response", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ThumbLikeRegular, {}), onClick: () => onFeedback(message, "up") },
+      { key: "down", label: "Bad response", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ThumbDislikeRegular, {}), onClick: () => onFeedback(message, "down") }
+    );
+  }
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionToolbar, { actions, label: `Actions for this message` });
+}
+
+// src/conversation/MessageBubble.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var useStyles6 = (0, import_react_components7.makeStyles)({
+  row: {
+    display: "flex",
+    gap: import_react_components7.tokens.spacingHorizontalS,
+    position: "relative",
+    paddingRight: import_react_components7.tokens.spacingHorizontalXXL
+  },
+  own: { flexDirection: "row-reverse", paddingRight: 0, paddingLeft: import_react_components7.tokens.spacingHorizontalXXL },
+  gutter: { width: "32px", flexShrink: 0 },
+  stack: { display: "flex", flexDirection: "column", gap: "2px", minWidth: 0, maxWidth: "80%" },
+  name: { fontSize: import_react_components7.tokens.fontSizeBase200, color: import_react_components7.tokens.colorNeutralForeground3 },
+  bubble: {
+    padding: `${import_react_components7.tokens.spacingVerticalS} ${import_react_components7.tokens.spacingHorizontalM}`,
+    borderRadius: import_react_components7.tokens.borderRadiusLarge,
+    backgroundColor: import_react_components7.tokens.colorNeutralBackground3,
+    color: import_react_components7.tokens.colorNeutralForeground1,
+    fontSize: import_react_components7.tokens.fontSizeBase300
+  },
+  ownBubble: {
+    backgroundColor: import_react_components7.tokens.colorBrandBackground,
+    color: import_react_components7.tokens.colorNeutralForegroundOnBrand
+  },
+  actions: {
+    position: "absolute",
+    top: "-12px",
+    right: import_react_components7.tokens.spacingHorizontalS,
+    opacity: 0,
+    pointerEvents: "none",
+    transitionProperty: "opacity",
+    transitionDuration: import_react_components7.tokens.durationFaster
+  },
+  // ★ hover OR focus-within. Without the second selector the row is unreachable by keyboard.
+  actionsVisible: { opacity: 1, pointerEvents: "auto" }
+});
+function MessageBubble(props) {
+  const { message, author, isRunStart = true, locale, ...actionHandlers } = props;
+  const styles = useStyles6();
+  const hidden = useVisuallyHiddenStyles();
+  const [revealed, setRevealed] = React9.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));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: (0, import_react_components7.mergeClasses)(styles.row, own && styles.own),
+      onMouseEnter: () => setRevealed(true),
+      onMouseLeave: () => setRevealed(false),
+      onFocus: () => setRevealed(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
+      },
+      "data-testid": "agentkit-message",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: styles.gutter, children: isRunStart ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.Avatar, { name, size: 32, image: author?.imageUrl ? { src: author.imageUrl } : void 0 }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: styles.stack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: hidden.root, children: [
+            name,
+            ", ",
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("time", { dateTime: new Date(message.createdAt).toISOString(), children: time })
+          ] }),
+          isRunStart ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: styles.name, "aria-hidden": "true", children: [
+            name,
+            " \xB7 ",
+            time
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: (0, import_react_components7.mergeClasses)(styles.bubble, own && styles.ownBubble),
+              "aria-busy": message.streaming || void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StreamingText, { text: message.text, streaming: message.streaming })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_react_components7.mergeClasses)(styles.actions, revealed && styles.actionsVisible), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageActions, { message, ...actionHandlers }) })
+      ]
+    }
+  );
+}
+
+// src/conversation/DayDivider.tsx
+var import_react_components8 = require("@fluentui/react-components");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var useStyles7 = (0, import_react_components8.makeStyles)({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: import_react_components8.tokens.spacingHorizontalM,
+    margin: `${import_react_components8.tokens.spacingVerticalM} 0`,
+    color: import_react_components8.tokens.colorNeutralForeground3,
+    fontSize: import_react_components8.tokens.fontSizeBase200
+  },
+  rule: { flex: 1, height: "1px", backgroundColor: import_react_components8.tokens.colorNeutralStroke2 }
+});
+function formatDayLabel(label, locale) {
+  switch (label.kind) {
+    case "today":
+      return "Today";
+    case "yesterday":
+      return "Yesterday";
+    case "weekday":
+      return new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }).format(
+        /* @__PURE__ */ new Date(`${label.iso}T00:00:00Z`)
+      );
+    case "date":
+      return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(
+        /* @__PURE__ */ new Date(`${label.iso}T00:00:00Z`)
+      );
+  }
+}
+function DayDivider({ label, locale }) {
+  const styles = useStyles7();
+  const text = formatDayLabel(label, locale);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.root, role: "separator", "aria-label": text, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.rule, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.rule, "aria-hidden": "true" })
+  ] });
+}
+
+// src/conversation/TypingIndicator.tsx
+var import_react_components9 = require("@fluentui/react-components");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useStyles8 = (0, import_react_components9.makeStyles)({
+  root: { display: "inline-flex", gap: "4px", alignItems: "center", padding: import_react_components9.tokens.spacingVerticalXS },
+  dot: {
+    width: "6px",
+    height: "6px",
+    borderRadius: import_react_components9.tokens.borderRadiusCircular,
+    backgroundColor: import_react_components9.tokens.colorNeutralForeground3,
+    animationName: { "0%,80%,100%": { opacity: 0.3 }, "40%": { opacity: 1 } },
+    animationDuration: "1.4s",
+    animationIterationCount: "infinite",
+    "@media (prefers-reduced-motion: reduce)": { animationName: "none", opacity: 0.6 }
+  },
+  d2: { animationDelay: "0.2s" },
+  d3: { animationDelay: "0.4s" }
+});
+function TypingIndicator({ label = "Assistant is responding" }) {
+  const styles = useStyles8();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.root, role: "status", "aria-label": label, "data-testid": "agentkit-typing", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: styles.dot, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${styles.dot} ${styles.d2}`, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${styles.dot} ${styles.d3}`, "aria-hidden": "true" })
+  ] });
+}
+
+// src/conversation/MessageList.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var useStyles9 = (0, import_react_components10.makeStyles)({
+  root: { position: "relative", height: "100%", minHeight: 0, display: "flex", flexDirection: "column" },
+  scroller: {
+    flex: 1,
+    overflowY: "auto",
+    padding: import_react_components10.tokens.spacingVerticalM,
+    display: "flex",
+    flexDirection: "column",
+    gap: import_react_components10.tokens.spacingVerticalS
+  },
+  jump: { position: "absolute", bottom: import_react_components10.tokens.spacingVerticalM, alignSelf: "center", zIndex: 1 }
+});
+function MessageList(props) {
+  const {
+    messages,
+    participants,
+    busy = false,
+    announcement,
+    groupWindowMs,
+    timeZone,
+    locale,
+    now,
+    emptyState,
+    ...actionHandlers
+  } = props;
+  const styles = useStyles9();
+  const scrollerRef = React10.useRef(null);
+  const { onScroll, scrollToBottom, isPinned } = useStickyScroll(scrollerRef, messages.length);
+  const byId = React10.useMemo(
+    () => new Map((participants ?? []).map((p) => [p.id, p])),
+    [participants]
+  );
+  const runStarts = React10.useMemo(() => {
+    const groups = groupMessages(messages, { windowMs: groupWindowMs, timeZone });
+    return new Set(groups.map((g) => g.messageIds[0]));
+  }, [messages, groupWindowMs, timeZone]);
+  const buckets = React10.useMemo(
+    () => bucketByDay(messages, { timeZone, now }),
+    [messages, timeZone, now]
+  );
+  const dividerBefore = React10.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const bucket of buckets) map.set(bucket.messageIds[0], bucket.label);
+    return map;
+  }, [buckets]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LiveAnnouncer, { polite: announcement?.polite, assertive: announcement?.assertive }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        ref: scrollerRef,
+        className: styles.scroller,
+        onScroll,
+        role: "log",
+        "aria-label": "Conversation",
+        tabIndex: 0,
+        children: [
+          messages.length === 0 ? emptyState ?? null : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React10.Fragment, { children: [
+            dividerBefore.has(message.id) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DayDivider, { label: dividerBefore.get(message.id), locale }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              MessageBubble,
+              {
+                message,
+                author: byId.get(message.authorId),
+                isRunStart: runStarts.has(message.id),
+                locale,
+                ...actionHandlers
+              }
+            )
+          ] }, message.id)),
+          busy ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TypingIndicator, {}) : null
+        ]
+      }
+    ),
+    !isPinned && messages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_components10.Button,
+      {
+        className: styles.jump,
+        size: "small",
+        appearance: "primary",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons3.ArrowDownRegular, {}),
+        onClick: scrollToBottom,
+        children: "Jump to latest"
+      }
+    ) : null
+  ] });
+}
+
+// src/conversation/Composer.tsx
+var React11 = __toESM(require("react"), 1);
+var import_react_components11 = require("@fluentui/react-components");
+var import_react_icons4 = require("@fluentui/react-icons");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var useStyles10 = (0, import_react_components11.makeStyles)({
+  root: {
+    display: "flex",
+    gap: import_react_components11.tokens.spacingHorizontalS,
+    alignItems: "flex-end",
+    padding: import_react_components11.tokens.spacingVerticalS,
+    borderTop: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`
+  },
+  input: { flex: 1 },
+  hint: { fontSize: import_react_components11.tokens.fontSizeBase100, color: import_react_components11.tokens.colorNeutralForeground3 }
+});
+function Composer(props) {
+  const {
+    value,
+    onChange,
+    onSend,
+    onStop,
+    busy = false,
+    disabled = false,
+    placeholder = "Type a message",
+    maxLength,
+    sendOn = "enter",
+    toolbar
+  } = props;
+  const styles = useStyles10();
+  const hintId = React11.useId();
+  const submit = () => {
+    const text = value.trim();
+    if (!text || busy || disabled) return;
+    onSend(text);
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Enter") return;
+    const wants = sendOn === "enter" ? !event.shiftKey : event.metaKey || event.ctrlKey;
+    if (!wants) return;
+    event.preventDefault();
+    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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: styles.input, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_react_components11.Textarea,
+        {
+          value,
+          onChange: (_, data) => onChange(data.value),
+          onKeyDown,
+          placeholder,
+          disabled,
+          maxLength,
+          resize: "vertical",
+          "aria-label": placeholder,
+          "aria-describedby": hintId,
+          textarea: { "aria-multiline": true }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: hintId, className: styles.hint, children: hint })
+    ] }),
+    toolbar,
+    busy && onStop ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Stop generating", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Button, { appearance: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.StopRegular, {}), onClick: onStop }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Tooltip, { content: "Send", relationship: "label", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_components11.Button,
+      {
+        appearance: "primary",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_icons4.SendRegular, {}),
+        onClick: submit,
+        disabled: !value.trim() || busy || disabled
+      }
+    ) })
+  ] });
+}
+
+// src/conversation/SuggestedPrompts.tsx
+var import_react_components12 = require("@fluentui/react-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var useStyles11 = (0, import_react_components12.makeStyles)({
+  root: { display: "flex", flexWrap: "wrap", gap: import_react_components12.tokens.spacingHorizontalXS, padding: import_react_components12.tokens.spacingVerticalXS },
+  heading: { width: "100%", fontSize: import_react_components12.tokens.fontSizeBase200, color: import_react_components12.tokens.colorNeutralForeground3 }
+});
+function SuggestedPrompts({
+  prompts,
+  onPick,
+  heading = "Suggested follow-ups"
+}) {
+  const styles = useStyles11();
+  if (prompts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: styles.root, role: "group", "aria-label": heading, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: styles.heading, children: heading }),
+    prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Button, { size: "small", appearance: "outline", onClick: () => onPick(prompt), children: prompt }, prompt))
+  ] });
+}
+
+// src/conversation/EmptyConversation.tsx
+var import_react_components13 = require("@fluentui/react-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var useStyles12 = (0, import_react_components13.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: import_react_components13.tokens.spacingVerticalS,
+    height: "100%",
+    padding: import_react_components13.tokens.spacingVerticalXXL,
+    textAlign: "center",
+    color: import_react_components13.tokens.colorNeutralForeground3
+  }
+});
+function EmptyConversation({
+  title = "Ask the agent",
+  description = "It answers from the records you have open.",
+  prompts = [],
+  onPick
+}) {
+  const styles = useStyles12();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Text, { as: "h2", size: 500, weight: "semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Text, { children: description }),
+    onPick && prompts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuggestedPrompts, { prompts, onPick, heading: "Try one of these" }) : null
+  ] });
+}
+
+// src/conversation/SystemNotice.tsx
+var import_react_components14 = require("@fluentui/react-components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var INTENT = { success: "success", warning: "warning", error: "error", info: "info" };
+function SystemNotice({ failure, guarded, onRetry }) {
+  if (!failure && !guarded) return null;
+  if (!failure && guarded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.MessageBar, { intent: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components14.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.MessageBarTitle, { children: "Response withheld" }),
+      "The provider substituted safe text for the generated answer."
+    ] }) });
+  }
+  if (!failure) return null;
+  const title = {
+    blocked: "Response withheld",
+    refused: "The agent declined",
+    error: "Something went wrong",
+    notProvisioned: "Not configured",
+    cancelled: "Stopped"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components14.MessageBar, { intent: INTENT[runStatusSeverity(failure.status)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components14.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.MessageBarTitle, { children: title[failure.status] ?? "Notice" }),
+      failure.message
+    ] }),
+    failure.recoverable && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.MessageBarActions, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.Button, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
+  ] });
+}
+
+// src/ops/AgentStatusBadge.tsx
+var import_react_components15 = require("@fluentui/react-components");
+var import_react_icons5 = require("@fluentui/react-icons");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PRESENTATION = {
+  succeeded: { label: "Succeeded", color: "success", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.CheckmarkCircleRegular, {}) },
+  blocked: { label: "Blocked by content filter", color: "warning", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.ShieldErrorRegular, {}) },
+  refused: { label: "Declined", color: "warning", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.DismissCircleRegular, {}) },
+  error: { label: "Error", color: "danger", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.ErrorCircleRegular, {}) },
+  notProvisioned: { label: "Not configured", color: "informative", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.PlugDisconnectedRegular, {}) },
+  cancelled: { label: "Stopped", color: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons5.StopRegular, {}) }
+};
+function runStatusLabel(status) {
+  return PRESENTATION[status].label;
+}
+function AgentStatusBadge({ status, reason, size = "medium" }) {
+  const { label, color, icon } = PRESENTATION[status];
+  const badge = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components15.Badge, { appearance: "tint", color, icon, size, children: label });
+  return reason ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components15.Tooltip, { content: reason, relationship: "description", withArrow: true, children: badge }) : badge;
+}
+
+// src/ops/AvailabilityBanner.tsx
+var import_react_components16 = require("@fluentui/react-components");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function AvailabilityBanner({
+  availability,
+  onRetry,
+  actions
+}) {
+  if (!availability || availability.available) return null;
+  const notProvisioned = availability.status === "notProvisioned";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_components16.MessageBar, { intent: notProvisioned ? "info" : "warning", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_components16.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components16.MessageBarTitle, { children: notProvisioned ? "No agent configured" : "The agent is unavailable" }),
+      availability.reason ?? "No reason was reported."
+    ] }),
+    onRetry || actions ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_components16.MessageBarActions, { children: [
+      actions,
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components16.Button, { size: "small", onClick: onRetry, children: "Check again" }) : null
+    ] }) : null
+  ] });
+}
+
+// src/ops/UsageMeter.tsx
+var import_react_components17 = require("@fluentui/react-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var useStyles13 = (0, import_react_components17.makeStyles)({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: import_react_components17.tokens.spacingHorizontalM,
+    fontSize: import_react_components17.tokens.fontSizeBase100,
+    color: import_react_components17.tokens.colorNeutralForeground3
+  },
+  item: { display: "flex", gap: import_react_components17.tokens.spacingHorizontalXXS },
+  value: { fontFamily: import_react_components17.tokens.fontFamilyMonospace },
+  unknown: { fontStyle: "italic" }
+});
+function UsageMeter({
+  usage,
+  show = ["tokens", "cost", "duration"]
+}) {
+  const styles = useStyles13();
+  if (!usage) return null;
+  const items = [];
+  if (show.includes("tokens")) {
+    const known = usage.inputTokens !== void 0 || usage.outputTokens !== void 0;
+    items.push({
+      key: "tokens",
+      label: "Tokens",
+      value: known ? `${usage.inputTokens ?? 0} in / ${usage.outputTokens ?? 0} out${usage.cachedTokens ? ` / ${usage.cachedTokens} cached` : ""}` : "not reported",
+      known
+    });
+  }
+  if (show.includes("cost")) {
+    const known = usage.costUsd !== void 0;
+    items.push({
+      key: "cost",
+      label: "Cost",
+      value: known ? `$${usage.costUsd.toFixed(6)}` : "not reported",
+      known
+    });
+  }
+  if (show.includes("duration")) {
+    const known = usage.durationMs !== void 0;
+    items.push({
+      key: "duration",
+      label: "Duration",
+      value: known ? `${usage.durationMs} ms` : "not reported",
+      known
+    });
+  }
+  if (show.includes("model") && usage.model) {
+    items.push({ key: "model", label: "Model", value: usage.model, known: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.root, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: styles.item, children: [
+    item.label,
+    ":",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: item.known ? styles.value : styles.unknown, children: item.value })
+  ] }, item.key)) });
+}
+
+// src/ops/ThrottleNotice.tsx
+var React12 = __toESM(require("react"), 1);
+var import_react_components18 = require("@fluentui/react-components");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ThrottleNotice({ failure, onRetry, now = Date.now }) {
+  const retryAfterMs = failure?.retryAfterMs;
+  const eligible = Boolean(failure?.recoverable && retryAfterMs && retryAfterMs > 0);
+  const [remaining, setRemaining] = React12.useState(retryAfterMs ?? 0);
+  React12.useEffect(() => {
+    if (!eligible) return;
+    const deadline = now() + (retryAfterMs ?? 0);
+    setRemaining(retryAfterMs ?? 0);
+    const id = setInterval(() => {
+      const left = deadline - now();
+      setRemaining(left > 0 ? left : 0);
+      if (left <= 0) clearInterval(id);
+    }, 250);
+    return () => clearInterval(id);
+  }, [eligible, retryAfterMs, now]);
+  if (!eligible || !failure) return null;
+  const seconds = Math.ceil(remaining / 1e3);
+  const ready = remaining <= 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_components18.MessageBar, { intent: "warning", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_components18.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components18.MessageBarTitle, { children: "Rate limited" }),
+      ready ? "You can try again now." : `${failure.message} Try again in ${seconds}s.`
+    ] }),
+    onRetry ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components18.MessageBarActions, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components18.Button, { size: "small", onClick: onRetry, disabled: !ready, children: "Try again" }) }) : null
+  ] });
+}
+
+// src/ops/ModelBadge.tsx
+var import_react_components19 = require("@fluentui/react-components");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ModelBadge({ provider, model, version }) {
+  const parts = [provider, model, version ? `v${version}` : void 0].filter(Boolean);
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components19.Badge, { appearance: "outline", color: "informative", children: parts.join(" \xB7 ") });
+}
+
+// src/ops/AgentPicker.tsx
+var import_react_components20 = require("@fluentui/react-components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function AgentPicker({
+  agents,
+  selectedId,
+  onSelect,
+  label = "Agent",
+  disabled
+}) {
+  const selected = agents.find((a) => a.id === selectedId);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components20.Field, { label, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_components20.Dropdown,
+    {
+      disabled,
+      value: selected ? selected.name : "",
+      selectedOptions: selectedId ? [selectedId] : [],
+      onOptionSelect: (_, data) => {
+        if (data.optionValue) onSelect(data.optionValue);
+      },
+      placeholder: "Select an agent",
+      children: agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components20.Option, { value: agent.id, text: agent.name, children: agent.model ? `${agent.name} \u2014 ${agent.model}` : agent.name }, agent.id))
+    }
+  ) });
+}
+
+// src/ops/RunTimeline.tsx
+var React13 = __toESM(require("react"), 1);
+var import_react_components21 = require("@fluentui/react-components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var useStyles14 = (0, import_react_components21.makeStyles)({
+  list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: import_react_components21.tokens.spacingVerticalXS },
+  step: { display: "flex", gap: import_react_components21.tokens.spacingHorizontalS, alignItems: "baseline" },
+  index: { fontFamily: import_react_components21.tokens.fontFamilyMonospace, fontSize: import_react_components21.tokens.fontSizeBase100, color: import_react_components21.tokens.colorNeutralForeground3, minWidth: "18px" },
+  name: { fontFamily: import_react_components21.tokens.fontFamilyMonospace, fontSize: import_react_components21.tokens.fontSizeBase200 },
+  status: { fontSize: import_react_components21.tokens.fontSizeBase100, color: import_react_components21.tokens.colorNeutralForeground3 },
+  section: { marginTop: import_react_components21.tokens.spacingVerticalS }
+});
+var TOOL_STATUS = {
+  proposed: "proposed",
+  running: "running",
+  succeeded: "succeeded",
+  failed: "failed",
+  denied: "denied"
+};
+function RunTimeline({ message, defaultOpen = false }) {
+  const styles = useStyles14();
+  const id = React13.useId();
+  const calls = message.toolCalls ?? [];
+  const sources = message.sources ?? [];
+  const hasAnything = calls.length > 0 || sources.length > 0 || message.usage || message.failure;
+  if (!hasAnything) return null;
+  const status = message.failure?.status ?? (message.guarded ? "blocked" : "succeeded");
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    Disclosure,
+    {
+      id,
+      defaultOpen,
+      summary: `Trace \u2014 ${calls.length} tool call${calls.length === 1 ? "" : "s"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.step, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AgentStatusBadge, { status, reason: message.failure?.message, size: "small" }) }),
+        calls.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: styles.list, "aria-label": "Tool calls", children: calls.map((call, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: styles.step, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: styles.index, children: [
+            index + 1,
+            "."
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: styles.name, children: call.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: styles.status, children: TOOL_STATUS[call.status] })
+        ] }, call.id)) }) : null,
+        sources.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_components21.Text, { as: "p", size: 200, className: styles.section, children: [
+          sources.length,
+          " source",
+          sources.length === 1 ? "" : "s",
+          " retrieved"
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.section, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UsageMeter, { usage: message.usage, show: ["tokens", "cost", "duration", "model"] }) })
+      ]
+    }
+  );
+}
+
+// src/ops/RunHistoryPanel.tsx
+var import_react_components22 = require("@fluentui/react-components");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var useStyles15 = (0, import_react_components22.makeStyles)({
+  list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: import_react_components22.tokens.spacingVerticalXS },
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    padding: import_react_components22.tokens.spacingVerticalXS,
+    borderBottom: `1px solid ${import_react_components22.tokens.colorNeutralStroke2}`
+  },
+  head: { display: "flex", alignItems: "center", gap: import_react_components22.tokens.spacingHorizontalS, flexWrap: "wrap" },
+  time: { fontSize: import_react_components22.tokens.fontSizeBase100, color: import_react_components22.tokens.colorNeutralForeground3 },
+  prompt: { fontSize: import_react_components22.tokens.fontSizeBase200, color: import_react_components22.tokens.colorNeutralForeground2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  id: { fontFamily: import_react_components22.tokens.fontFamilyMonospace, fontSize: import_react_components22.tokens.fontSizeBase100, color: import_react_components22.tokens.colorNeutralForeground3 },
+  empty: { padding: import_react_components22.tokens.spacingVerticalM, color: import_react_components22.tokens.colorNeutralForeground3 }
+});
+function RunHistoryPanel({
+  runs,
+  grid,
+  locale,
+  emptyLabel = "No runs yet."
+}) {
+  const styles = useStyles15();
+  if (grid) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: grid });
+  if (runs.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_components22.Text, { className: styles.empty, size: 200, children: emptyLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: styles.list, "aria-label": "Run history", children: runs.map((run) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: styles.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: styles.head, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AgentStatusBadge, { status: run.status, size: "small" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: styles.time, children: new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "short" }).format(
+        new Date(run.startedAt)
+      ) }),
+      run.correlationId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: styles.id, children: run.correlationId }) : null
+    ] }),
+    run.prompt ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: styles.prompt, children: run.prompt }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UsageMeter, { usage: run.usage })
+  ] }, run.id)) });
+}
+
+// src/ops/AgentOpsPanel.tsx
+var import_react_components23 = require("@fluentui/react-components");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var useStyles16 = (0, import_react_components23.makeStyles)({
+  root: { display: "flex", flexDirection: "column", gap: import_react_components23.tokens.spacingVerticalM, minWidth: 0 },
+  head: { display: "flex", alignItems: "center", gap: import_react_components23.tokens.spacingHorizontalS, flexWrap: "wrap" },
+  section: { display: "flex", flexDirection: "column", gap: import_react_components23.tokens.spacingVerticalXS },
+  caps: { fontSize: import_react_components23.tokens.fontSizeBase100, color: import_react_components23.tokens.colorNeutralForeground3 }
+});
+function AgentOpsPanel(props) {
+  const { availability, agents, selectedAgentId, onSelectAgent, runs = [], runsGrid, onRefresh, locale } = props;
+  const styles = useStyles16();
+  const selected = agents?.find((a) => a.id === selectedAgentId);
+  const caps = availability?.capabilities;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AvailabilityBanner, { availability, onRetry: onRefresh }),
+    agents && agents.length > 0 && onSelectAgent ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: styles.section, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AgentPicker, { agents, selectedId: selectedAgentId, onSelect: onSelectAgent }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: styles.head, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModelBadge, { provider: selected?.name, model: selected?.model, version: selected?.version }) })
+    ] }) : null,
+    caps ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: styles.caps, children: [
+      "Supports:",
+      " ",
+      Object.entries(caps).filter(([, on]) => on).map(([name]) => name).join(", ") || "nothing reported"
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: styles.section, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_components23.Text, { weight: "semibold", size: 300, children: "Recent runs" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RunHistoryPanel, { runs, grid: runsGrid, locale })
+    ] })
+  ] });
+}
+
+// src/shell/AgentAppShell.tsx
+var React14 = __toESM(require("react"), 1);
+var import_react_components24 = require("@fluentui/react-components");
+var import_react_icons6 = require("@fluentui/react-icons");
+var import_v9 = require("@dataverse-kit/surface-kit/v9");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var useStyles17 = (0, import_react_components24.makeStyles)({
+  root: {
+    display: "flex",
+    height: "100%",
+    minHeight: 0,
+    backgroundColor: import_react_components24.tokens.colorNeutralBackground2,
+    position: "relative",
+    overflow: "hidden"
+  },
+  sidebar: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    backgroundColor: import_react_components24.tokens.colorNeutralBackground1,
+    borderRight: `1px solid ${import_react_components24.tokens.colorNeutralStroke2}`
+  },
+  // Below `md` the list overlays the conversation instead of shrinking it to nothing.
+  sidebarOverlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 2,
+    boxShadow: import_react_components24.tokens.shadow16
+  },
+  scrim: { position: "absolute", inset: "0", zIndex: 1, backgroundColor: import_react_components24.tokens.colorBackgroundOverlay },
+  main: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 },
+  body: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" },
+  toggle: { position: "absolute", top: import_react_components24.tokens.spacingVerticalS, left: import_react_components24.tokens.spacingHorizontalS, zIndex: 3 }
+});
+function AgentAppShell(props) {
+  const {
+    rail,
+    sidebar,
+    header,
+    children,
+    rightPane,
+    sidebarWidth = 280,
+    sidebarOpen,
+    onSidebarOpenChange,
+    label = "Agent workspace"
+  } = props;
+  const styles = useStyles17();
+  const [containerRef, measuredWidth] = (0, import_v9.useContainerWidth)();
+  const width = props.containerWidth ?? (measuredWidth > 0 ? measuredWidth : void 0);
+  const effective = width ?? import_v9.BREAKPOINTS.xl;
+  const breakpoint = (0, import_v9.resolveBreakpoint)(effective);
+  const railVisible = effective >= import_v9.BREAKPOINTS.sm;
+  const sidebarInline = effective >= import_v9.BREAKPOINTS.md;
+  const rightPaneVisible = effective >= import_v9.BREAKPOINTS.lg;
+  const [uncontrolledOpen, setUncontrolledOpen] = React14.useState(false);
+  const overlayOpen = sidebarOpen ?? uncontrolledOpen;
+  const setOverlayOpen = (open) => {
+    onSidebarOpenChange?.(open);
+    if (sidebarOpen === void 0) setUncontrolledOpen(open);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: containerRef, className: styles.root, "data-breakpoint": breakpoint, "aria-label": label, children: [
+    rail && railVisible ? rail : null,
+    sidebar && sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.sidebar, style: { width: sidebarWidth }, children: sidebar }) : null,
+    sidebar && !sidebarInline && overlayOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          className: styles.scrim,
+          onClick: () => setOverlayOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${styles.sidebar} ${styles.sidebarOverlay}`, style: { width: sidebarWidth }, children: sidebar })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: styles.main, children: [
+      sidebar && !sidebarInline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_components24.Button,
+        {
+          className: styles.toggle,
+          size: "small",
+          appearance: "subtle",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_icons6.NavigationRegular, {}),
+          "aria-label": overlayOpen ? "Hide conversations" : "Show conversations",
+          "aria-expanded": overlayOpen,
+          onClick: () => setOverlayOpen(!overlayOpen)
+        }
+      ) : null,
+      header,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.body, children })
+    ] }),
+    rightPaneVisible ? rightPane : null
+  ] });
+}
+
+// src/shell/AppRail.tsx
+var import_react_components25 = require("@fluentui/react-components");
+var import_react_icons7 = require("@fluentui/react-icons");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var useStyles18 = (0, import_react_components25.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: import_react_components25.tokens.spacingVerticalXS,
+    padding: import_react_components25.tokens.spacingVerticalS,
+    backgroundColor: import_react_components25.tokens.colorNeutralBackground3,
+    borderRight: `1px solid ${import_react_components25.tokens.colorNeutralStroke2}`,
+    minHeight: 0
+  },
+  spacer: { flex: 1 },
+  button: {
+    position: "relative",
+    ":focus-visible": { outline: `2px solid ${import_react_components25.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
+  },
+  selected: { backgroundColor: import_react_components25.tokens.colorNeutralBackground1Selected },
+  badge: {
+    position: "absolute",
+    top: "2px",
+    right: "2px",
+    minWidth: "16px",
+    height: "16px",
+    padding: "0 3px",
+    borderRadius: import_react_components25.tokens.borderRadiusCircular,
+    backgroundColor: import_react_components25.tokens.colorPaletteRedBackground3,
+    color: import_react_components25.tokens.colorNeutralForegroundOnBrand,
+    fontSize: "10px",
+    lineHeight: "16px"
+  }
+});
+function AppRail(props) {
+  const { items, selectedId, onSelect, maxVisible = 6, label = "Apps", footer } = props;
+  const styles = useStyles18();
+  const visible = items.slice(0, maxVisible);
+  const overflow = items.slice(maxVisible);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: styles.root, "aria-label": label, children: [
+    visible.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.Tooltip, { content: item.label, relationship: "label", positioning: "after", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_react_components25.Button,
+      {
+        appearance: "subtle",
+        icon: item.icon,
+        className: (0, import_react_components25.mergeClasses)(styles.button, item.id === selectedId && styles.selected),
+        "aria-pressed": item.id === selectedId,
+        "aria-label": item.badgeCount ? `${item.label}, ${item.badgeCount} unread` : item.label,
+        onClick: () => onSelect(item.id),
+        children: item.badgeCount ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: styles.badge, "aria-hidden": "true", children: item.badgeCount }) : null
+      }
+    ) }, item.id)),
+    overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_components25.Menu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_react_components25.Button,
+        {
+          appearance: "subtle",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons7.MoreHorizontalRegular, {}),
+          className: styles.button,
+          "aria-label": `More apps, ${overflow.length} hidden`
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuList, { children: overflow.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components25.MenuItem, { icon: item.icon, onClick: () => onSelect(item.id), children: item.label }, item.id)) }) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.spacer }),
+    footer
+  ] });
+}
+
+// src/shell/ConversationList.tsx
+var React15 = __toESM(require("react"), 1);
+var import_react_components28 = require("@fluentui/react-components");
+
+// src/shell/ConversationListItem.tsx
+var import_react_components27 = require("@fluentui/react-components");
+
+// src/shell/AgentAvatar.tsx
+var import_react_components26 = require("@fluentui/react-components");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var STATUS = {
+  available: "available",
+  busy: "busy",
+  away: "away",
+  offline: "offline",
+  dnd: "do-not-disturb",
+  unknown: "unknown"
+};
+function AgentAvatar({ participant, presence, size = 32, name }) {
+  const displayName = name ?? participant?.displayName ?? "Unknown";
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_components26.Avatar,
+    {
+      name: displayName,
+      initials: participant?.initials,
+      image: participant?.imageUrl ? { src: participant.imageUrl } : void 0,
+      size,
+      badge: presence ? { status: STATUS[presence] ?? "unknown" } : void 0,
+      "aria-hidden": void 0
+    }
+  );
+}
+
+// src/shell/ConversationListItem.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var useStyles19 = (0, import_react_components27.makeStyles)({
+  row: {
+    display: "flex",
+    gap: import_react_components27.tokens.spacingHorizontalS,
+    alignItems: "center",
+    padding: `${import_react_components27.tokens.spacingVerticalS} ${import_react_components27.tokens.spacingHorizontalS}`,
+    borderRadius: import_react_components27.tokens.borderRadiusMedium,
+    cursor: "pointer",
+    ":hover": { backgroundColor: import_react_components27.tokens.colorNeutralBackground1Hover }
+  },
+  // ★ The ACTIVE row (aria-activedescendant target) gets a visible focus indicator, because
+  //   real DOM focus stays on the listbox — without this the keyboard user sees nothing move.
+  active: { outline: `2px solid ${import_react_components27.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" },
+  selected: { backgroundColor: import_react_components27.tokens.colorNeutralBackground1Selected },
+  body: { flex: 1, minWidth: 0 },
+  title: {
+    display: "block",
+    fontSize: import_react_components27.tokens.fontSizeBase300,
+    fontWeight: import_react_components27.tokens.fontWeightSemibold,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  muted: { fontWeight: import_react_components27.tokens.fontWeightRegular, color: import_react_components27.tokens.colorNeutralForeground3 },
+  preview: {
+    display: "block",
+    fontSize: import_react_components27.tokens.fontSizeBase200,
+    color: import_react_components27.tokens.colorNeutralForeground3,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  meta: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "2px" },
+  time: { fontSize: import_react_components27.tokens.fontSizeBase100, color: import_react_components27.tokens.colorNeutralForeground3 },
+  unread: {
+    minWidth: "18px",
+    height: "18px",
+    padding: `0 ${import_react_components27.tokens.spacingHorizontalXXS}`,
+    borderRadius: import_react_components27.tokens.borderRadiusCircular,
+    backgroundColor: import_react_components27.tokens.colorBrandBackground,
+    color: import_react_components27.tokens.colorNeutralForegroundOnBrand,
+    fontSize: import_react_components27.tokens.fontSizeBase100,
+    lineHeight: "18px",
+    textAlign: "center"
+  }
+});
+function conversationAccessibleName(summary, locale) {
+  const parts = [summary.title];
+  if (summary.presence && summary.presence !== "unknown") parts.push(summary.presence);
+  if (!summary.muted && summary.unreadCount) {
+    parts.push(`${summary.unreadCount} unread`);
+  }
+  if (summary.muted) parts.push("muted");
+  if (summary.timestamp) {
+    parts.push(new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(new Date(summary.timestamp)));
+  }
+  return parts.join(", ");
+}
+function ConversationListItem(props) {
+  const { summary, selected, active, id, locale, onSelect } = props;
+  const styles = useStyles19();
+  const time = summary.timestamp ? new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(new Date(summary.timestamp)) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      id,
+      role: "option",
+      "aria-selected": selected,
+      "aria-label": conversationAccessibleName(summary, locale),
+      className: (0, import_react_components27.mergeClasses)(styles.row, selected && styles.selected, active && styles.active),
+      onClick: () => onSelect(summary.id),
+      "data-conversation-option": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AgentAvatar, { participant: summary.participant, presence: summary.presence, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.body, "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: (0, import_react_components27.mergeClasses)(styles.title, summary.muted && styles.muted), children: summary.title }),
+          summary.preview ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.preview, children: summary.preview }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.meta, "aria-hidden": "true", children: [
+          time ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.time, children: time }) : null,
+          !summary.muted && summary.unreadCount ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.unread, children: summary.unreadCount }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/shell/ConversationList.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var useStyles20 = (0, import_react_components28.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    padding: import_react_components28.tokens.spacingHorizontalXS,
+    overflowY: "auto",
+    minHeight: 0,
+    ":focus-visible": { outline: `2px solid ${import_react_components28.tokens.colorStrokeFocus2}`, outlineOffset: "-2px" }
+  },
+  empty: { padding: import_react_components28.tokens.spacingVerticalM, color: import_react_components28.tokens.colorNeutralForeground3 }
+});
+function ConversationList(props) {
+  const { items, selectedId, onSelect, label = "Conversations", locale, empty } = props;
+  const styles = useStyles20();
+  const listRef = React15.useRef(null);
+  const idBase = React15.useId();
+  const selectedIndex = Math.max(0, items.findIndex((i) => i.id === selectedId));
+  const [active, setActive] = React15.useState(selectedIndex);
+  React15.useEffect(() => {
+    setActive((current) => {
+      if (items.length === 0) return 0;
+      if (selectedIndex >= 0 && items[selectedIndex]) return selectedIndex;
+      return Math.min(current, items.length - 1);
+    });
+  }, [selectedIndex, items]);
+  const optionId = (index) => `${idBase}-opt-${index}`;
+  React15.useEffect(() => {
+    const el = listRef.current?.ownerDocument.getElementById(optionId(active));
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [active, idBase]);
+  const onKeyDown = (event) => {
+    const last = items.length - 1;
+    if (last < 0) return;
+    let next = null;
+    if (event.key === "ArrowDown") next = Math.min(last, active + 1);
+    else if (event.key === "ArrowUp") next = Math.max(0, active - 1);
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const picked = items[active];
+      if (picked) onSelect(picked.id);
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setActive(next);
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: styles.root, children: empty ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_components28.Text, { className: styles.empty, size: 200, children: "No conversations yet." }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "div",
+    {
+      ref: listRef,
+      className: styles.root,
+      role: "listbox",
+      "aria-label": label,
+      tabIndex: 0,
+      "aria-activedescendant": optionId(active),
+      onKeyDown,
+      children: items.map((summary, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        ConversationListItem,
+        {
+          id: optionId(index),
+          summary,
+          selected: summary.id === selectedId,
+          active: index === active,
+          locale,
+          onSelect
+        },
+        summary.id
+      ))
+    }
+  );
+}
+
+// src/shell/ConversationHeader.tsx
+var import_react_components29 = require("@fluentui/react-components");
+var import_react_icons8 = require("@fluentui/react-icons");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var useStyles21 = (0, import_react_components29.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: import_react_components29.tokens.spacingVerticalXS,
+    padding: `${import_react_components29.tokens.spacingVerticalS} ${import_react_components29.tokens.spacingHorizontalM} 0`,
+    borderBottom: `1px solid ${import_react_components29.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components29.tokens.colorNeutralBackground1
+  },
+  top: { display: "flex", alignItems: "center", gap: import_react_components29.tokens.spacingHorizontalS },
+  identity: { display: "flex", alignItems: "center", gap: import_react_components29.tokens.spacingHorizontalS, minWidth: 0 },
+  titles: { display: "flex", flexDirection: "column", minWidth: 0 },
+  subtitle: { color: import_react_components29.tokens.colorNeutralForeground3, fontSize: import_react_components29.tokens.fontSizeBase200 },
+  spacer: { flex: 1 },
+  tabRow: { display: "flex", alignItems: "flex-end", gap: import_react_components29.tokens.spacingHorizontalS }
+});
+function ConversationHeader(props) {
+  const {
+    title,
+    subtitle,
+    participant,
+    presence,
+    tabs,
+    selectedTabId,
+    onTabSelect,
+    actions,
+    trailing
+  } = props;
+  const styles = useStyles21();
+  const inline = (actions ?? []).slice(0, 2);
+  const overflow = (actions ?? []).slice(2);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.top, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.identity, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AgentAvatar, { participant, presence, size: 32, name: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: styles.titles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.Text, { weight: "semibold", truncate: true, wrap: false, children: title }),
+          subtitle ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: styles.subtitle, children: subtitle }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: styles.spacer }),
+      trailing,
+      inline.map((action) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react_components29.Button,
+        {
+          appearance: "subtle",
+          size: "small",
+          icon: action.icon,
+          "aria-label": action.label,
+          onClick: action.onClick
+        },
+        action.key
+      )),
+      overflow.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_components29.Menu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_react_components29.Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons8.MoreHorizontalRegular, {}),
+            "aria-label": `More actions, ${overflow.length} available`
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuList, { children: overflow.map((action) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.MenuItem, { icon: action.icon, onClick: action.onClick, children: action.label }, action.key)) }) })
+      ] }) : null
+    ] }),
+    tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: styles.tabRow, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_react_components29.TabList,
+      {
+        selectedValue: selectedTabId,
+        onTabSelect: (_, data) => onTabSelect?.(data.value),
+        size: "small",
+        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_components29.Tab, { value: tab.id, children: tab.label }, tab.id))
+      }
+    ) }) : null
+  ] });
+}
+
+// src/shell/RightPane.tsx
+var React16 = __toESM(require("react"), 1);
+var import_react_components30 = require("@fluentui/react-components");
+var import_react_icons9 = require("@fluentui/react-icons");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var useStyles22 = (0, import_react_components30.makeStyles)({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    borderLeft: `1px solid ${import_react_components30.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components30.tokens.colorNeutralBackground1,
+    minHeight: 0
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: import_react_components30.tokens.spacingHorizontalS,
+    padding: import_react_components30.tokens.spacingVerticalS,
+    borderBottom: `1px solid ${import_react_components30.tokens.colorNeutralStroke2}`
+  },
+  body: { flex: 1, overflowY: "auto", padding: import_react_components30.tokens.spacingVerticalM }
+});
+function RightPane({ open, title, onClose, children, width = 320 }) {
+  const styles = useStyles22();
+  const labelId = React16.useId();
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("aside", { className: styles.root, style: { width }, "aria-labelledby": labelId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: styles.head, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_components30.Text, { id: labelId, weight: "semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_react_components30.Button,
+        {
+          appearance: "subtle",
+          size: "small",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_icons9.DismissRegular, {}),
+          onClick: onClose,
+          "aria-label": `Close ${title}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: styles.body, children })
+  ] });
+}
+
+// src/shell/GlobalSearchBar.tsx
+var import_react_components31 = require("@fluentui/react-components");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var useStyles23 = (0, import_react_components31.makeStyles)({
+  root: { width: "100%", maxWidth: "640px" }
+});
+function GlobalSearchBar({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search conversations"
+}) {
+  const styles = useStyles23();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_react_components31.SearchBox,
+    {
+      className: styles.root,
+      value,
+      placeholder,
+      "aria-label": placeholder,
+      onChange: (_, data) => onChange(data.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && onSubmit) onSubmit(value);
+      }
+    }
+  );
+}
+
+// src/grounding/CitationChip.tsx
+var import_react_components32 = require("@fluentui/react-components");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var useStyles24 = (0, import_react_components32.makeStyles)({
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "18px",
+    height: "18px",
+    padding: `0 ${import_react_components32.tokens.spacingHorizontalXXS}`,
+    marginLeft: "2px",
+    verticalAlign: "super",
+    fontSize: import_react_components32.tokens.fontSizeBase100,
+    lineHeight: "18px",
+    borderRadius: import_react_components32.tokens.borderRadiusSmall,
+    border: `1px solid ${import_react_components32.tokens.colorNeutralStroke2}`,
+    backgroundColor: import_react_components32.tokens.colorNeutralBackground3,
+    color: import_react_components32.tokens.colorNeutralForeground2,
+    cursor: "pointer",
+    ":hover": { backgroundColor: import_react_components32.tokens.colorNeutralBackground3Hover },
+    ":focus-visible": { outline: `2px solid ${import_react_components32.tokens.colorStrokeFocus2}`, outlineOffset: "1px" }
+  },
+  inert: { cursor: "default" }
+});
+function CitationChip({ marker, source, onOpen }) {
+  const styles = useStyles24();
+  const label = source ? `Source ${marker}: ${source.title}` : `Source ${marker}`;
+  if (!source || !onOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `${styles.chip} ${styles.inert}`, "aria-label": label, children: marker });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_components32.Tooltip, { content: source.title, relationship: "description", withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: styles.chip, "aria-label": label, onClick: () => onOpen(source), children: marker }) });
+}
+
+// src/grounding/CitationList.tsx
+var React17 = __toESM(require("react"), 1);
+var import_react_components34 = require("@fluentui/react-components");
+
+// src/grounding/SourceCard.tsx
+var import_react_components33 = require("@fluentui/react-components");
+var import_react_icons10 = require("@fluentui/react-icons");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ICONS = {
+  dataverse: import_react_icons10.DatabaseRegular,
+  document: import_react_icons10.DocumentRegular,
+  web: import_react_icons10.GlobeRegular,
+  knowledge: import_react_icons10.BookRegular,
+  other: import_react_icons10.DocumentBulletListRegular
+};
+var useStyles25 = (0, import_react_components33.makeStyles)({
+  root: { gap: import_react_components33.tokens.spacingVerticalXXS },
+  head: { display: "flex", alignItems: "center", gap: import_react_components33.tokens.spacingHorizontalXS },
+  marker: { color: import_react_components33.tokens.colorNeutralForeground3, fontSize: import_react_components33.tokens.fontSizeBase200 },
+  snippet: { color: import_react_components33.tokens.colorNeutralForeground2, fontSize: import_react_components33.tokens.fontSizeBase200 },
+  meta: { display: "flex", alignItems: "center", gap: import_react_components33.tokens.spacingHorizontalS, marginTop: import_react_components33.tokens.spacingVerticalXXS }
+});
+function SourceCard({ source, marker, onOpen, showSnippet = true }) {
+  const styles = useStyles25();
+  const Icon = ICONS[source.kind] ?? ICONS.other;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CardSurface, { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.head, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { "aria-hidden": "true" }),
+      marker ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: styles.marker, children: [
+        "[",
+        marker,
+        "]"
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_components33.Text, { weight: "semibold", children: source.title })
+    ] }),
+    showSnippet && source.snippet ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: styles.snippet, children: source.snippet }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.meta, children: [
+      onOpen && (source.recordId || source.url) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_components33.Button, { size: "small", appearance: "subtle", onClick: () => onOpen(source), children: source.recordId ? "Open record" : "Open" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: styles.snippet, children: source.score === void 0 ? "Relevance not reported" : `Relevance ${Math.round(source.score * 100)}%` })
+    ] })
+  ] });
+}
+
+// src/grounding/CitationList.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var useStyles26 = (0, import_react_components34.makeStyles)({
+  list: { display: "flex", flexDirection: "column", gap: import_react_components34.tokens.spacingVerticalXS, listStyle: "none", margin: 0, padding: 0 }
+});
+function CitationList({
+  text,
+  sources,
+  onOpenSource,
+  defaultOpen = false
+}) {
+  const styles = useStyles26();
+  const id = React17.useId();
+  const { used, citations } = React17.useMemo(() => renumberCitations(text, sources), [text, sources]);
+  if (used.length === 0) return null;
+  const markerFor = (sourceId) => citations.find((c) => c.sourceId === sourceId)?.marker;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    Disclosure,
+    {
+      id,
+      defaultOpen,
+      summary: `${used.length} source${used.length === 1 ? "" : "s"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: styles.list, children: used.map((source) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SourceCard, { source, marker: markerFor(source.id), onOpen: onOpenSource }) }, source.id)) })
+    }
+  );
+}
+
+// src/grounding/AnswerWithCitations.tsx
+var React18 = __toESM(require("react"), 1);
+var import_react_components35 = require("@fluentui/react-components");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var useStyles27 = (0, import_react_components35.makeStyles)({ root: { whiteSpace: "pre-wrap", wordBreak: "break-word" } });
+function AnswerWithCitations({
+  text,
+  citations = [],
+  sources = [],
+  onOpenSource
+}) {
+  const styles = useStyles27();
+  const segments = React18.useMemo(() => splitTextByCitations(text, citations), [text, citations]);
+  const byId = React18.useMemo(() => new Map(sources.map((s) => [s.id, s])), [sources]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: styles.root, children: segments.map(
+    (segment, i) => segment.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(React18.Fragment, { children: segment.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      CitationChip,
+      {
+        marker: segment.marker ?? "",
+        source: segment.sourceId ? byId.get(segment.sourceId) : void 0,
+        onOpen: onOpenSource
+      },
+      i
+    )
+  ) });
+}
+
+// src/grounding/GroundingPanel.tsx
+var React19 = __toESM(require("react"), 1);
+var import_react_components36 = require("@fluentui/react-components");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var useStyles28 = (0, import_react_components36.makeStyles)({
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "minmax(96px, max-content) 1fr",
+    gap: `${import_react_components36.tokens.spacingVerticalXXS} ${import_react_components36.tokens.spacingHorizontalM}`,
+    margin: 0,
+    fontSize: import_react_components36.tokens.fontSizeBase200
+  },
+  key: { color: import_react_components36.tokens.colorNeutralForeground3, margin: 0 },
+  value: { margin: 0, wordBreak: "break-word", fontFamily: import_react_components36.tokens.fontFamilyMonospace },
+  empty: { fontSize: import_react_components36.tokens.fontSizeBase200, color: import_react_components36.tokens.colorNeutralForeground3 }
+});
+function render(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value);
+}
+function GroundingPanel({
+  grounding,
+  title = "What this answer used",
+  defaultOpen = false
+}) {
+  const styles = useStyles28();
+  const id = React19.useId();
+  const entries = Object.entries(grounding ?? {});
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Disclosure, { id, defaultOpen, summary: title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dl", { className: styles.grid, children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(React19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { className: styles.key, children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { className: styles.value, children: render(value) })
+    ] }, key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_components36.Text, { as: "p", className: styles.empty, children: "These facts were supplied by the app, not produced by the model." })
+  ] });
+}
+
+// src/grounding/ProviderAttribution.tsx
+var import_react_components37 = require("@fluentui/react-components");
+var import_react_icons11 = require("@fluentui/react-icons");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var useStyles29 = (0, import_react_components37.makeStyles)({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: import_react_components37.tokens.spacingHorizontalXXS,
+    fontSize: import_react_components37.tokens.fontSizeBase100,
+    color: import_react_components37.tokens.colorNeutralForeground3
+  },
+  guarded: { color: import_react_components37.tokens.colorPaletteDarkOrangeForeground1 }
+});
+function ProviderAttribution({ provider, model, guarded }) {
+  const styles = useStyles29();
+  if (!provider && !model && !guarded) return null;
+  const who = [provider, model].filter(Boolean).join(" \xB7 ");
+  if (guarded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: `${styles.root} ${styles.guarded}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons11.ShieldErrorRegular, { "aria-hidden": "true" }),
+      "Withheld and replaced with safe text",
+      who ? ` \u2014 not ${who}'s words` : ""
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: styles.root, children: [
+    "Answered by ",
+    who || "the agent"
+  ] });
+}
+function messageAttribution(message) {
+  return { provider: message.provider, model: message.usage?.model, guarded: message.guarded };
+}
+
+// src/actions/ActionCard.tsx
+var React20 = __toESM(require("react"), 1);
+var import_react_components38 = require("@fluentui/react-components");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var useStyles30 = (0, import_react_components38.makeStyles)({
+  head: { display: "flex", alignItems: "center", gap: import_react_components38.tokens.spacingHorizontalXS },
+  description: { color: import_react_components38.tokens.colorNeutralForeground2, fontSize: import_react_components38.tokens.fontSizeBase200 },
+  footer: { display: "flex", gap: import_react_components38.tokens.spacingHorizontalS, justifyContent: "flex-end", marginTop: import_react_components38.tokens.spacingVerticalXS }
+});
+function ActionCard({ title, description, icon, pending, children, footer }) {
+  const styles = useStyles30();
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(CardSurface, { emphasis: pending ? "attention" : "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.head, children: [
+      icon ? React20.cloneElement(icon, { "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_components38.Text, { weight: "semibold", children: title })
+    ] }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.description, children: description }) : null,
+    children,
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: styles.footer, children: footer }) : null
+  ] });
+}
+
+// src/actions/ApprovalCard.tsx
+var React22 = __toESM(require("react"), 1);
+var import_react_components41 = require("@fluentui/react-components");
+var import_react_icons12 = require("@fluentui/react-icons");
+
+// src/actions/ParameterReview.tsx
+var React21 = __toESM(require("react"), 1);
+var import_react_components39 = require("@fluentui/react-components");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var useStyles31 = (0, import_react_components39.makeStyles)({
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "minmax(110px, max-content) 1fr",
+    gap: `${import_react_components39.tokens.spacingVerticalXS} ${import_react_components39.tokens.spacingHorizontalM}`,
+    alignItems: "center",
+    margin: 0
+  },
+  key: { margin: 0, color: import_react_components39.tokens.colorNeutralForeground2, fontSize: import_react_components39.tokens.fontSizeBase200 },
+  value: { margin: 0 },
+  raw: {
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+    fontFamily: import_react_components39.tokens.fontFamilyMonospace,
+    fontSize: import_react_components39.tokens.fontSizeBase200,
+    color: import_react_components39.tokens.colorNeutralForeground2
+  }
+});
+function ParameterReview({ argumentsJson, readOnly = true, onChange }) {
+  const styles = useStyles31();
+  const parsed = React21.useMemo(() => {
+    try {
+      const value = JSON.parse(argumentsJson);
+      return value && typeof value === "object" && !Array.isArray(value) ? value : null;
+    } catch {
+      return null;
+    }
+  }, [argumentsJson]);
+  if (!parsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_components39.Text, { size: 200, children: "Arguments (unparsed)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("pre", { className: styles.raw, children: argumentsJson || "(empty)" })
+    ] });
+  }
+  const set = (key, next) => {
+    if (!onChange) return;
+    onChange(JSON.stringify({ ...parsed, [key]: next }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dl", { className: styles.grid, children: Object.entries(parsed).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { className: styles.key, children: key }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { className: styles.value, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: styles.raw, children: typeof value === "string" ? value : JSON.stringify(value) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_react_components39.Input,
+      {
+        size: "small",
+        "aria-label": key,
+        value: typeof value === "string" ? value : JSON.stringify(value),
+        onChange: (_, data) => set(key, data.value)
+      }
+    ) })
+  ] }, key)) });
+}
+
+// src/actions/ActionResult.tsx
+var import_react_components40 = require("@fluentui/react-components");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var INTENT2 = { succeeded: "success", failed: "error", denied: "warning" };
+var TITLE = { succeeded: "Done", failed: "Failed", denied: "Not approved" };
+var useStyles32 = (0, import_react_components40.makeStyles)({
+  id: { display: "block", marginTop: import_react_components40.tokens.spacingVerticalXXS, fontSize: import_react_components40.tokens.fontSizeBase100, color: import_react_components40.tokens.colorNeutralForeground3, fontFamily: import_react_components40.tokens.fontFamilyMonospace }
+});
+function ActionResult({ status, message, correlationId, onRetry }) {
+  const styles = useStyles32();
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_components40.MessageBar, { intent: INTENT2[status], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_components40.MessageBarBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.MessageBarTitle, { children: TITLE[status] }),
+      message,
+      correlationId ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: styles.id, children: [
+        "Correlation id: ",
+        correlationId
+      ] }) : null
+    ] }),
+    status === "failed" && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.MessageBarActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_components40.Button, { size: "small", onClick: onRetry, children: "Try again" }) }) : null
+  ] });
+}
+
+// src/actions/ApprovalCard.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var useStyles33 = (0, import_react_components41.makeStyles)({
+  busy: { display: "flex", alignItems: "center", gap: import_react_components41.tokens.spacingHorizontalXS, fontSize: import_react_components41.tokens.fontSizeBase200 }
+});
+function ApprovalCard({
+  toolCall,
+  onApprove,
+  onDeny,
+  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 settled = toolCall.status === "succeeded" || toolCall.status === "failed" || toolCall.status === "denied";
+  if (settled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ActionCard, { title: toolCall.name, description: "Tool call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        ActionResult,
+        {
+          status: toolCall.status === "succeeded" ? "succeeded" : toolCall.status === "denied" ? "denied" : "failed",
+          message: toolCall.resultText ?? toolCall.failure?.message ?? "Completed.",
+          correlationId: toolCall.failure?.correlationId
+        }
+      )
+    ] });
+  }
+  const locked = decided || busy || toolCall.status === "running";
+  const approve = () => {
+    if (locked) return;
+    setDecided(true);
+    onApprove(toolCall, args);
+  };
+  const deny = () => {
+    if (locked) return;
+    setDecided(true);
+    onDeny(toolCall);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    ActionCard,
+    {
+      title: toolCall.name,
+      description: "The agent is asking to run this. Check the details before approving.",
+      pending: !locked,
+      footer: locked ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: styles.busy, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Spinner, { size: "tiny" }),
+        " Submitting\u2026"
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+        allowEdit ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.EditRegular, {}), onClick: () => setEditing((v) => !v), children: editing ? "Done editing" : "Edit" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.DismissRegular, {}), onClick: deny, disabled: locked, children: "Deny" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_components41.Button, { size: "small", appearance: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_icons12.CheckmarkRegular, {}), onClick: approve, disabled: locked, children: "Approve" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ParameterReview, { argumentsJson: args, readOnly: !editing, onChange: setArgs })
+    }
+  );
+}
+
+// src/actions/ToolCallCard.tsx
+var React23 = __toESM(require("react"), 1);
+var import_react_components42 = require("@fluentui/react-components");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var LABEL = {
+  proposed: "Proposed",
+  running: "Running",
+  succeeded: "Succeeded",
+  failed: "Failed",
+  denied: "Denied"
+};
+var COLOUR = {
+  proposed: "informative",
+  running: "informative",
+  succeeded: "success",
+  failed: "danger",
+  denied: "warning"
+};
+var useStyles34 = (0, import_react_components42.makeStyles)({
+  head: { display: "flex", alignItems: "center", gap: import_react_components42.tokens.spacingHorizontalXS },
+  name: { fontFamily: import_react_components42.tokens.fontFamilyMonospace, fontSize: import_react_components42.tokens.fontSizeBase200 },
+  result: {
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+    fontFamily: import_react_components42.tokens.fontFamilyMonospace,
+    fontSize: import_react_components42.tokens.fontSizeBase200,
+    marginTop: import_react_components42.tokens.spacingVerticalXS
+  }
+});
+function ToolCallCard({ toolCall, defaultExpanded = false }) {
+  const styles = useStyles34();
+  const id = React23.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CardSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    Disclosure,
+    {
+      id,
+      defaultOpen: defaultExpanded,
+      summary: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: styles.head, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: styles.name, children: toolCall.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_components42.Badge, { appearance: "tint", color: COLOUR[toolCall.status], children: LABEL[toolCall.status] }),
+        toolCall.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_components42.Spinner, { size: "extra-tiny" }) : null
+      ] }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ParameterReview, { argumentsJson: toolCall.argumentsJson }),
+        toolCall.resultText ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.result, children: toolCall.resultText }) : null,
+        toolCall.failure ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.result, children: toolCall.failure.message }) : null
+      ]
+    }
+  ) });
+}
+
+// src/host/AgentKitHostProvider.tsx
+var React24 = __toESM(require("react"), 1);
+var import_react_components43 = require("@fluentui/react-components");
+
+// src/theme/index.ts
+var import_fluent_theme = require("@dataverse-kit/fluent-theme");
+var import_design_tokens = require("@dataverse-kit/design-tokens");
+function applyAgentOverrides(base) {
+  return {
+    ...base,
+    // Fluent's web theme is close to CE but does not pin the Web variant of Segoe.
+    fontFamilyBase: import_design_tokens.typography.fontFamily,
+    // CE is squarer than Fluent web's default. Bubbles opt back up to borderRadiusLarge.
+    borderRadiusMedium: import_design_tokens.radius.card
+  };
+}
+function createAgentTheme(brand = import_fluent_theme.dynamicsBrandRamp) {
+  return applyAgentOverrides((0, import_fluent_theme.createDynamicsV9Theme)(brand));
+}
+function createAgentDarkTheme(brand = import_fluent_theme.dynamicsBrandRamp) {
+  return applyAgentOverrides((0, import_fluent_theme.createDynamicsV9DarkTheme)(brand));
+}
+var agentTheme = createAgentTheme();
+var agentDarkTheme = createAgentDarkTheme();
+function resolveHostTheme(input = {}) {
+  if (input.theme) return input.theme;
+  if (input.hostTheme) return input.hostTheme;
+  return input.isDarkTheme ? agentDarkTheme : agentTheme;
+}
+
+// src/host/idPrefix.ts
+var nextAgentIdPrefix = createIdPrefixCounter("dvkak");
+
+// src/host/AgentKitHostProvider.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function AgentKitHostProvider(props) {
+  const { children, theme, hostTheme, isDarkTheme, targetDocument, className, style } = props;
+  const [generated] = React24.useState(nextAgentIdPrefix);
+  const idPrefix = props.idPrefix ?? generated;
+  const resolved = React24.useMemo(
+    () => resolveHostTheme({ theme, hostTheme, isDarkTheme }),
+    [theme, hostTheme, isDarkTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_components43.IdPrefixProvider, { value: idPrefix, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_react_components43.FluentProvider,
+    {
+      theme: resolved,
+      targetDocument,
+      className,
+      style,
+      children
+    }
+  ) });
+}
+
+// src/services/scenarios.ts
+var SOURCES = [
+  { id: "src-acct", title: "Contoso Ltd", kind: "dataverse", entityLogicalName: "account", recordId: "11111111-1111-1111-1111-111111111111", snippet: "Annual revenue \xA34.2m, 38 employees." },
+  { id: "src-case", title: "Case 4417 \u2014 invoice mismatch", kind: "dataverse", entityLogicalName: "incident", recordId: "22222222-2222-2222-2222-222222222222", snippet: "Raised 12 Mar, priority High." },
+  { id: "src-kb", title: "KB-208: credit note policy", kind: "knowledge", url: "https://example.invalid/kb/208", snippet: "Credit notes above \xA35,000 require finance approval.", score: 0.82 },
+  { id: "src-doc", title: "Statement-Mar.pdf", kind: "document", snippet: "Page 3 lists the disputed line." },
+  { id: "src-web", title: "Companies House filing", kind: "web", url: "https://example.invalid/ch" }
+];
+var mockScenarios = {
+  happy: {
+    text: "Contoso has three open cases. The oldest, case 4417, has been waiting eleven days for a credit note.",
+    status: "succeeded",
+    suggestions: ["Draft a credit note", "Show all three cases", "Who owns case 4417?"]
+  },
+  // ★ FIVE sources, but the text cites only [3] and [1] — and out of order. The panel must
+  //   show TWO, renumbered 1 and 2 in first-appearance order. A fixture where every source
+  //   is cited cannot tell a correct implementation from one that lists everything it was given.
+  grounded: {
+    text: "Credit notes over \xA35,000 need finance approval [3], and case 4417 is for \xA36,200 [1]. So this one needs sign-off.",
+    status: "succeeded",
+    sources: SOURCES
+  },
+  toolApproval: {
+    text: "I can raise the credit note for you \u2014 approve the details below and I will submit it.",
+    status: "succeeded",
+    toolCall: {
+      id: "call-1",
+      name: "create_credit_note",
+      argumentsJson: '{"accountId":"11111111-1111-1111-1111-111111111111","amount":6200,"currency":"GBP","reason":"Invoice mismatch, case 4417"}',
+      status: "proposed",
+      requiresApproval: true
+    }
+  },
+  toolAuto: {
+    text: "I checked the balance for you.",
+    status: "succeeded",
+    toolCall: { id: "call-2", name: "get_account_balance", argumentsJson: '{"accountId":"1111"}', status: "running" },
+    autoToolResult: '{"balance":6200,"currency":"GBP"}'
+  },
+  // ★ blocked and refused MUST look different on screen: a content filter fired, versus the
+  //   model declining. They need different fixes, so they are different states.
+  blocked: {
+    text: "I can\u2019t help with that request.",
+    status: "blocked",
+    guarded: true,
+    failureMessage: "The response was withheld by the content filter.",
+    failureCode: "content_filter",
+    recoverable: false
+  },
+  refused: {
+    text: "I don\u2019t have enough information to answer that safely. Could you say which account you mean?",
+    status: "refused",
+    failureMessage: "The agent declined to answer.",
+    recoverable: true
+  },
+  error: {
+    text: "",
+    status: "error",
+    failureMessage: "The agent is rate limited. Try again shortly.",
+    failureCode: "rate_limited",
+    recoverable: true,
+    retryAfterMs: 4e3
+  },
+  notProvisioned: {
+    text: "",
+    status: "notProvisioned",
+    failureMessage: "No Foundry project is configured for this environment.",
+    failureCode: "not_provisioned",
+    recoverable: false,
+    unavailable: true
+  },
+  cancelled: {
+    text: "Let me pull the last six months of activity for Contoso and work through it case by case, starting with the oldest\u2026",
+    status: "cancelled",
+    failureMessage: "Stopped."
+  },
+  // The fixture the autoscroll and live-region gates run against: enough deltas that
+  // "once, not per token" is a meaningful distinction.
+  longAnswer: {
+    text: Array.from({ length: 200 }, (_, i) => `word${i + 1}`).join(" "),
+    status: "succeeded"
+  },
+  throws: {
+    text: "partial\u2026",
+    status: "error",
+    throwsMidStream: true,
+    failureMessage: "never reached \u2014 the iterator throws instead"
+  }
+};
+
+// src/services/MockAgentService.ts
+var realScheduler = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var immediateScheduler = () => Promise.resolve();
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var MockAgentService = class {
+  constructor(options = {}) {
+    this.name = "mock";
+    this.scenarioName = options.scenario ?? "happy";
+    this.scenario = mockScenarios[this.scenarioName];
+    this.scheduler = options.scheduler ?? realScheduler;
+    this.firstTokenMs = options.firstTokenMs ?? 400;
+    this.chunkMs = options.chunkMs ?? 28;
+    this.rand = mulberry32(options.seed ?? 1);
+    this.availabilityOverride = options.availability;
+  }
+  async isAvailable() {
+    if (this.availabilityOverride) return this.availabilityOverride;
+    if (this.scenario.unavailable) {
+      return {
+        available: false,
+        status: "notProvisioned",
+        reason: this.scenario.failureMessage ?? "Not provisioned."
+      };
+    }
+    return {
+      available: true,
+      capabilities: { streaming: true, tools: true, citations: true, attachments: true, cancel: true }
+    };
+  }
+  /**
+   * A prompt can select a scenario (`/blocked`, `/tool`, `/error`), so one story can walk
+   * every state without remounting.
+   */
+  resolveScenario(promptText) {
+    const slash = promptText.trim().match(/^\/(\w+)/)?.[1];
+    if (slash && slash in mockScenarios) {
+      return { name: slash, scenario: mockScenarios[slash] };
+    }
+    return { name: this.scenarioName, scenario: this.scenario };
+  }
+  async *send(turn) {
+    const { scenario } = this.resolveScenario(turn.text);
+    const messageId = `mock-${Math.floor(this.rand() * 1e9).toString(36)}`;
+    const turnId = `turn-${messageId}`;
+    const provider = this.name;
+    const finish = (result) => ({
+      type: "turn_end",
+      turnId,
+      messageId,
+      result: { ...result, provider }
+    });
+    yield { type: "turn_start", turnId, messageId, provider, model: "mock-1" };
+    if (turn.cancelSignal?.aborted) {
+      yield finish({ status: "cancelled", text: "", failure: { status: "cancelled", message: "Stopped." } });
+      return;
+    }
+    if (scenario.status === "notProvisioned" || scenario.status === "error" && !scenario.text) {
+      await this.scheduler(this.firstTokenMs);
+      yield finish({
+        status: scenario.status,
+        text: "",
+        failure: {
+          status: scenario.status,
+          message: scenario.failureMessage ?? "Failed.",
+          code: scenario.failureCode,
+          recoverable: scenario.recoverable,
+          retryAfterMs: scenario.retryAfterMs
+        }
+      });
+      return;
+    }
+    if (scenario.sources) {
+      yield { type: "status", messageId, label: "Searching Dataverse\u2026" };
+      await this.scheduler(this.firstTokenMs);
+      yield { type: "sources", messageId, sources: scenario.sources };
+    }
+    if (scenario.thinking) {
+      yield { type: "thinking_delta", messageId, text: scenario.thinking };
+    }
+    if (scenario.toolCall) {
+      yield { type: "tool_call", messageId, call: scenario.toolCall };
+      if (scenario.autoToolResult !== void 0) {
+        await this.scheduler(this.chunkMs);
+        yield {
+          type: "tool_result",
+          messageId,
+          callId: scenario.toolCall.id,
+          status: "succeeded",
+          resultText: scenario.autoToolResult
+        };
+      }
+    }
+    const chunks = scenario.chunks ?? scenario.text.split(/(?<=\s)/);
+    await this.scheduler(this.firstTokenMs);
+    let emitted = "";
+    for (const [i, chunk] of chunks.entries()) {
+      if (turn.cancelSignal?.aborted) {
+        yield finish({
+          status: "cancelled",
+          text: emitted,
+          failure: { status: "cancelled", message: "Stopped." }
+        });
+        return;
+      }
+      if (scenario.throwsMidStream && i === Math.floor(chunks.length / 2)) {
+        throw new Error("mock transport exploded mid-stream");
+      }
+      emitted += chunk;
+      yield { type: "text_delta", messageId, text: chunk };
+      await this.scheduler(this.chunkMs);
+    }
+    if (scenario.suggestions) {
+      yield { type: "suggestions", messageId, prompts: scenario.suggestions };
+    }
+    const failed = scenario.status !== "succeeded";
+    yield finish({
+      status: scenario.status,
+      text: emitted,
+      guarded: scenario.guarded,
+      usage: {
+        inputTokens: 128,
+        outputTokens: chunks.length,
+        costUsd: Number((chunks.length * 2e-6).toFixed(6)),
+        durationMs: this.firstTokenMs + chunks.length * this.chunkMs,
+        model: "mock-1"
+      },
+      failure: failed ? {
+        status: scenario.status,
+        message: scenario.failureMessage ?? "Failed.",
+        code: scenario.failureCode,
+        recoverable: scenario.recoverable,
+        retryAfterMs: scenario.retryAfterMs
+      } : void 0
+    });
+  }
+};
+
+// src/services/NullAgentService.ts
+var NullAgentService = class {
+  constructor() {
+    this.name = "none";
+  }
+  async isAvailable() {
+    return {
+      available: false,
+      status: "notProvisioned",
+      reason: "No agent provider is configured for this host."
+    };
+  }
+  async *send(turn) {
+    const messageId = `null-${Date.now()}`;
+    const turnId = `turn-${messageId}`;
+    void turn;
+    yield { type: "turn_start", turnId, messageId, provider: this.name };
+    yield {
+      type: "turn_end",
+      turnId,
+      messageId,
+      result: {
+        status: "notProvisioned",
+        text: "",
+        provider: this.name,
+        failure: {
+          status: "notProvisioned",
+          message: "No agent provider is configured for this host.",
+          code: "not_provisioned",
+          recoverable: false
+        }
+      }
+    };
+  }
+};
+
+// src/services/createAgentService.ts
+function decide(config) {
+  switch (config.provider) {
+    case "custom":
+      return config.factory ? { provider: config.factory(), reason: "explicit factory (provider: custom)" } : { provider: new NullAgentService(), reason: "provider: custom but no factory supplied" };
+    case "mock":
+      return { provider: new MockAgentService(), reason: "provider: mock" };
+    case "none":
+      return { provider: new NullAgentService(), reason: "provider: none (the default)" };
+    default:
+      return {
+        provider: new NullAgentService(),
+        reason: `unrecognised provider ${String(config.provider)} \u2014 falling back to none`
+      };
+  }
+}
+function createAgentService(config = { provider: "none" }) {
+  return decide(config).provider;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ANNOUNCE_FULL_TEXT_MAX_CHARS,
+  ActionCard,
+  ActionResult,
+  AgentAppShell,
+  AgentAvatar,
+  AgentKitHostProvider,
+  AgentOpsPanel,
+  AgentPicker,
+  AgentStatusBadge,
+  AnswerWithCitations,
+  AppRail,
+  ApprovalCard,
+  AvailabilityBanner,
+  CitationChip,
+  CitationList,
+  Composer,
+  ConfirmInline,
+  ConversationHeader,
+  ConversationList,
+  ConversationListItem,
+  DEFAULT_GROUP_WINDOW_MS,
+  DayDivider,
+  EmptyConversation,
+  GlobalSearchBar,
+  GroundingPanel,
+  LiveAnnouncer,
+  MessageActions,
+  MessageBubble,
+  MessageList,
+  MockAgentService,
+  ModelBadge,
+  NO_ANNOUNCEMENT,
+  NullAgentService,
+  ParameterReview,
+  ProviderAttribution,
+  RightPane,
+  RunHistoryPanel,
+  RunTimeline,
+  STICK_TO_BOTTOM_THRESHOLD_PX,
+  SourceCard,
+  StreamingText,
+  SuggestedPrompts,
+  SystemNotice,
+  ThrottleNotice,
+  ToolCallCard,
+  TypingIndicator,
+  UsageMeter,
+  agentDarkTheme,
+  agentTheme,
+  appendUserMessage,
+  applyAgentEvent,
+  bucketByDay,
+  classifyTransportFailure,
+  conversationAccessibleName,
+  createAgentDarkTheme,
+  createAgentService,
+  createAgentTheme,
+  createIdPrefixCounter,
+  dayKeyOf,
+  decide,
+  deriveAnnouncement,
+  extractCitationMarkers,
+  formatDayLabel,
+  fromClaudeStreamEvent,
+  fromFoundryChatResult,
+  fromOpenAiChatChunk,
+  fromSseLine,
+  groupMessages,
+  immediateScheduler,
+  initialConversation,
+  isSameAuthorRun,
+  isTerminalStatus,
+  messageAttribution,
+  mockScenarios,
+  nextAgentIdPrefix,
+  realScheduler,
+  renumberCitations,
+  resolveHostTheme,
+  runStatusLabel,
+  runStatusSeverity,
+  shouldStickToBottom,
+  splitTextByCitations,
+  useConversation,
+  useFocusRestore,
+  useRovingTabindex,
+  useStickyScroll,
+  useVisuallyHiddenStyles
+});
+//# sourceMappingURL=index.cjs.map