@truefoundry/trueforge-ui 0.3.0-rc.5 → 0.3.0-rc.7

package/dist/{chunk-MMU55KCW.js → chunk-XANC4F2H.js}

@@ -3,7 +3,7 @@ import {
   replaceScheduleShareSearch,
   searchAllAgents,
   useSearchAgentsList
-} from "./chunk-3QWUHGNL.js";
+} from "./chunk-T6QQV5LK.js";
 import {
   Icon,
   PageHeader,
@@ -14,7 +14,7 @@ import {
   sidebarRailButtonClassName,
   useCompactLayout,
   useDraftCatalog
-} from "./chunk-IIHJ32YH.js";
+} from "./chunk-3ZW74FHC.js";
 import {
   SESSION_CUSTOM_RANGE_MAX_DAYS,
   SESSION_SHARE_CHANGE_EVENT,
@@ -43,13 +43,13 @@ import {
   useServer,
   useServerCapabilities,
   useShellMode
-} from "./chunk-TAABBM7F.js";
+} from "./chunk-2GIZY3JJ.js";
 import {
   useAuiState
 } from "./chunk-M6MHLVSO.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-CFGLAGWH.js";
+} from "./chunk-CG75X77Q.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -57,7 +57,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-OWDH67NY.js";
+} from "./chunk-JCL3Q7RW.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -1009,7 +1009,7 @@ function AgentCodeBlock({ code, language }) {
       language,
       showLineNumbers: true,
       darkTheme: mode === "dark",
-      className: "m-0 flex min-h-full flex-col rounded-none [&>pre]:flex-1"
+      className: "m-0 flex min-h-full flex-col rounded-none text-xs [&>pre]:flex-1"
     }
   );
 }
@@ -1277,6 +1277,9 @@ function DialogFooter({ className, ...props }) {
 import React8, { useCallback as useCallback3, useEffect as useEffect2, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function isSurfaceClick(event) {
+  return event.target === event.currentTarget;
+}
 function DropdownMenu({
   trigger,
   children,
@@ -1286,7 +1289,8 @@ function DropdownMenu({
   containerClassName,
   open: controlledOpen,
   onOpenChange,
-  closeOnClick = true
+  closeOnClick = true,
+  lockScroll = false
 }) {
   const [internalOpen, setInternalOpen] = useState5(false);
   const open = controlledOpen ?? internalOpen;
@@ -1336,6 +1340,20 @@ function DropdownMenu({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  useEffect2(() => {
+    if (!open || !lockScroll) return;
+    const block = (event) => {
+      const target = event.target;
+      if (target instanceof Node && menuRef.current?.contains(target)) return;
+      event.preventDefault();
+    };
+    document.addEventListener("wheel", block, { passive: false, capture: true });
+    document.addEventListener("touchmove", block, { passive: false, capture: true });
+    return () => {
+      document.removeEventListener("wheel", block, { capture: true });
+      document.removeEventListener("touchmove", block, { capture: true });
+    };
+  }, [open, lockScroll]);
   useEffect2(() => {
     if (!open) {
       focusedOpenRef.current = false;
@@ -1402,12 +1420,15 @@ function DropdownMenu({
           transform: [align === "end" ? "translateX(-100%)" : null, side === "top" ? "translateY(-100%)" : null].filter((value) => value !== null).join(" ") || void 0
         },
         className: cn(
-          "fixed z-[200] flex min-w-[8rem] flex-col rounded-md border border-border bg-card-bg p-1",
+          "aui-popup-enter fixed z-[200] flex min-w-[8rem] flex-col overscroll-contain rounded-md border border-border bg-card-bg p-1",
           "text-text-primary shadow-md",
           className
         ),
         onMouseDown: (event) => event.stopPropagation(),
-        onClick: closeOnClick ? () => setOpen(false) : void 0,
+        onClick: closeOnClick ? (event) => {
+          if (isSurfaceClick(event)) return;
+          setOpen(false);
+        } : void 0,
         children
       }
     ),
@@ -1448,6 +1469,7 @@ function cloneAgentName(agentName) {
 }
 function AgentOverflowMenu({
   agentName,
+  description,
   agentSpec,
   canMutate,
   canUse = true,
@@ -1479,6 +1501,7 @@ function AgentOverflowMenu({
     try {
       await builder.saveAgent({
         agentName: clonedName,
+        ...description === void 0 ? {} : { description },
         agentSpec,
         intent: "create"
       });
@@ -1661,6 +1684,7 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
       isCreateAgent: true,
       agentId: detail.agentId,
       agentName: detail.name,
+      ...detail.description === void 0 ? {} : { description: detail.description },
       agentSpec: detail.agentSpec
     });
   };
@@ -1703,6 +1727,7 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
           AgentOverflowMenu,
           {
             agentName: detail.name,
+            ...detail.description === void 0 ? {} : { description: detail.description },
             agentSpec: detail.agentSpec,
             canMutate,
             canUse,
@@ -2202,7 +2227,7 @@ import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function AgentOverviewCard({ title, icon, count, children }) {
   return /* @__PURE__ */ jsxs19("section", { className: "rounded-lg border border-border bg-card-bg p-3 text-text-primary", children: [
     /* @__PURE__ */ jsxs19("h2", { className: "mb-2 flex items-center gap-1.5 text-xs font-semibold", children: [
-      /* @__PURE__ */ jsx29(Icon, { name: icon, className: "size-3.5 text-text-secondary" }),
+      icon ? /* @__PURE__ */ jsx29(Icon, { name: icon, className: "size-3.5 text-text-secondary" }) : null,
       title,
       count !== void 0 ? /* @__PURE__ */ jsxs19("span", { className: "text-text-secondary", children: [
         "(",
@@ -2667,7 +2692,7 @@ function auiSelectPrefixTriggerClass(className) {
 }
 function auiSelectMenuClass(className) {
   return cn(
-    "bg-card-bg text-text-primary z-50 max-h-64 overflow-y-auto rounded-md border border-border p-1 shadow-md",
+    "aui-popup-enter bg-card-bg text-text-primary z-50 max-h-64 overflow-y-auto rounded-md border border-border p-1 shadow-md",
     className
   );
 }
@@ -2684,6 +2709,28 @@ function auiSelectOptionClass(className) {
 import { useEffect as useEffect5, useId as useId3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState9 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+var MENU_GAP_PX = 4;
+var MENU_MAX_HEIGHT_PX = 256;
+function estimateMenuHeight({ optionCount, hasFooter }) {
+  const rows = Math.max(optionCount, 1) * 32;
+  const footer = hasFooter ? 40 : 0;
+  return Math.min(8 + rows + footer, MENU_MAX_HEIGHT_PX);
+}
+function resolveMenuPlacement({
+  preferred,
+  spaceAbove,
+  spaceBelow,
+  menuHeight
+}) {
+  if (preferred === "bottom") {
+    if (spaceBelow >= menuHeight) return "bottom";
+    if (spaceAbove >= menuHeight) return "top";
+    return spaceAbove > spaceBelow ? "top" : "bottom";
+  }
+  if (spaceAbove >= menuHeight) return "top";
+  if (spaceBelow >= menuHeight) return "bottom";
+  return spaceBelow > spaceAbove ? "bottom" : "top";
+}
 function PopoverSelect(props) {
   const [open, setOpen] = useState9(false);
   const [pos, setPos] = useState9(null);
@@ -2693,7 +2740,9 @@ function PopoverSelect(props) {
   const listboxRef = useRef3(null);
   const focusedOpenRef = useRef3(false);
   const listboxId = useId3();
-  const menuPlacement = props.menuPlacement ?? "bottom";
+  const preferredPlacement = props.menuPlacement ?? "bottom";
+  const hasFooter = props.footer != null;
+  const optionCount = props.options.length;
   useLayoutEffect3(() => {
     if (!open) {
       setPos(null);
@@ -2703,20 +2752,33 @@ function PopoverSelect(props) {
       const el = triggerRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom - MENU_GAP_PX;
+      const spaceAbove = rect.top - MENU_GAP_PX;
+      const measuredHeight = menuRef.current?.offsetHeight;
+      const menuHeight = measuredHeight != null && measuredHeight > 0 ? measuredHeight : estimateMenuHeight({ optionCount, hasFooter });
+      const placement = resolveMenuPlacement({
+        preferred: preferredPlacement,
+        spaceAbove,
+        spaceBelow,
+        menuHeight
+      });
       setPos({
-        top: menuPlacement === "top" ? rect.top - 4 : rect.bottom + 4,
+        top: placement === "top" ? rect.top - MENU_GAP_PX : rect.bottom + MENU_GAP_PX,
         left: rect.left,
-        width: rect.width
+        width: rect.width,
+        placement
       });
     };
     update();
+    const rafId = requestAnimationFrame(update);
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update);
     return () => {
+      cancelAnimationFrame(rafId);
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [open, menuPlacement]);
+  }, [open, preferredPlacement, optionCount, hasFooter]);
   useEffect5(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
@@ -2786,7 +2848,7 @@ function PopoverSelect(props) {
           top: pos.top,
           left: pos.left,
           width: pos.width,
-          transform: menuPlacement === "top" ? "translateY(-100%)" : void 0
+          transform: pos.placement === "top" ? "translateY(-100%)" : void 0
         },
         onMouseDown: (event) => event.stopPropagation(),
         children: [
@@ -3239,9 +3301,9 @@ function useOptionalCurrentUser() {
 import { useState as useState12 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var sizeClasses = {
-  sm: "h-6 w-6 text-xs",
-  default: "h-8 w-8 text-sm",
-  lg: "h-10 w-10 text-base"
+  sm: "h-5 w-5 text-[0.625rem] leading-none",
+  default: "h-8 w-8 text-sm leading-none",
+  lg: "h-10 w-10 text-base leading-none"
 };
 function Avatar({ className, size = "default", ...props }) {
   return /* @__PURE__ */ jsx39(
@@ -3278,7 +3340,7 @@ function AvatarFallback({ className, ...props }) {
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-secondary-bg font-medium text-text-secondary",
+        "flex h-full w-full items-center justify-center rounded-full bg-gradient-to-br from-primary-button-bg/20 to-primary-button-bg/10 font-medium text-primary-button-bg dark:from-primary-button-bg dark:to-primary-button-hover dark:text-primary-button-text",
         className
       ),
       ...props
@@ -3289,14 +3351,8 @@ function AvatarFallback({ className, ...props }) {
 // src/atoms/UserAvatar.tsx
 import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 function getUserInitials(displayName) {
-  const parts = displayName.trim().split(/\s+/).filter(Boolean);
-  const first = parts[0];
-  if (first === void 0) {
-    return "";
-  }
-  const last = parts.at(-1);
-  const characters = parts.length === 1 ? Array.from(first).slice(0, 2) : [Array.from(first)[0], Array.from(last ?? "")[0]];
-  return characters.filter((character) => character !== void 0).join("").toLocaleUpperCase();
+  const first = Array.from(displayName.trim())[0];
+  return first === void 0 ? "" : first.toLocaleUpperCase();
 }
 function UserAvatar({ labeled = false, className }) {
   const currentUser = useOptionalCurrentUser();
@@ -3316,7 +3372,7 @@ function UserAvatar({ labeled = false, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(Avatar, { size: "sm", children: /* @__PURE__ */ jsx40(AvatarFallback, { className: "bg-primary-button-bg text-primary-button-text", children: getUserInitials(displayName) }) }),
+        /* @__PURE__ */ jsx40(Avatar, { size: "sm", children: /* @__PURE__ */ jsx40(AvatarFallback, { children: getUserInitials(displayName) }) }),
         /* @__PURE__ */ jsx40("span", { className: "w-full truncate text-center text-[0.625rem] leading-tight", children: displayName })
       ]
     }
@@ -3596,6 +3652,7 @@ function TableTokenPagination({
 
 // src/atoms/AgentsLibrary.tsx
 import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+var AGENTS_PAGE_SIZE_OPTIONS = [10, 25];
 function displayModelLabel(modelName) {
   const slash = modelName.lastIndexOf("/");
   return slash >= 0 ? modelName.slice(slash + 1) : modelName;
@@ -3699,17 +3756,30 @@ function AgentLibraryRow({
   const skillsTitle = skillNames.length ? skillNames.join(", ") : `${skillsCount} skills`;
   const hasConfiguration = modelLabel != null || skillsCount > 0 || mcpCount > 0;
   const hasNoSchedules = scheduleSummary != null && scheduleSummary.count === 0;
+  const storedDescription = agent.description?.trim() || null;
+  const description = storedDescription != null && storedDescription !== agent.name ? storedDescription : null;
   return /* @__PURE__ */ jsxs33(TableRow, { className: hasNoSchedules ? "group" : void 0, children: [
-    /* @__PURE__ */ jsx45(TableCell, { className: "text-text-primary font-medium", children: onOpen == null ? /* @__PURE__ */ jsx45("span", { className: "block truncate", children: agent.name }) : /* @__PURE__ */ jsx45(
-      "button",
-      {
-        type: "button",
-        className: "block max-w-full cursor-pointer text-left",
-        "aria-label": `Open ${agent.name}`,
-        onClick: onOpen,
-        children: /* @__PURE__ */ jsx45("span", { className: "block truncate", children: agent.name })
-      }
-    ) }),
+    /* @__PURE__ */ jsxs33(TableCell, { className: "text-text-primary w-96 max-w-96 font-medium", children: [
+      onOpen == null ? /* @__PURE__ */ jsx45("span", { className: "block truncate", children: agent.name }) : /* @__PURE__ */ jsx45(
+        "button",
+        {
+          type: "button",
+          className: "block max-w-full cursor-pointer text-left",
+          "aria-label": `Open ${agent.name}`,
+          onClick: onOpen,
+          children: /* @__PURE__ */ jsx45("span", { className: "block truncate", children: agent.name })
+        }
+      ),
+      description ? /* @__PURE__ */ jsx45(
+        Tooltip,
+        {
+          content: description,
+          className: "max-w-sm whitespace-normal text-left",
+          triggerClassName: "block min-w-0 w-full max-w-full",
+          children: /* @__PURE__ */ jsx45("span", { className: "text-text-secondary block truncate text-xs font-normal", children: description })
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsx45(TableCell, { children: hasConfiguration ? /* @__PURE__ */ jsxs33("div", { className: "text-text-secondary flex min-w-0 items-center gap-2", children: [
       modelLabel != null ? /* @__PURE__ */ jsx45(Tooltip, { content: modelTitle, children: /* @__PURE__ */ jsxs33(
         "span",
@@ -3750,6 +3820,7 @@ function AgentLibraryRow({
         AgentOverflowMenu,
         {
           agentName: agent.name,
+          ...storedDescription != null ? { description: storedDescription } : {},
           ...spec != null ? { agentSpec: spec } : {},
           canMutate,
           canUse: canUseAgent,
@@ -3831,11 +3902,14 @@ function AgentsLibrary({ onSelectAgent }) {
     window.addEventListener("keydown", onKeyDown, true);
     return () => window.removeEventListener("keydown", onKeyDown, true);
   }, [closeLibrary, open]);
-  const { agents, isInitialLoading, isSearching, loadingMore, error, hasMore, listRef, sentinelRef } = useSearchAgentsList({
+  const { agents, isInitialLoading, isSearching, error, pageSize, setPageSize, canPrev, canNext, goPrev, goNext } = useSearchAgentsList({
     enabled: open,
     query,
-    refreshKey: agentsListEpoch
+    refreshKey: agentsListEpoch,
+    mode: "paged",
+    limit: DEFAULT_TABLE_PAGE_SIZE
   });
+  const hasPageNav = canPrev || canNext;
   const showCreatedByColumn = hasCreatedBySubject(agents);
   const permissionAgentIds = open ? agents.map(libraryAgentId) : [];
   const { allows } = useResourcePermissions({
@@ -3892,6 +3966,7 @@ function AgentsLibrary({ onSelectAgent }) {
       isCreateAgent: true,
       agentId: libraryAgentId(agent),
       agentName: agent.name,
+      ...agent.description === void 0 ? {} : { description: agent.description },
       agentSpec
     });
   };
@@ -3907,7 +3982,7 @@ function AgentsLibrary({ onSelectAgent }) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx45("div", { className: "bg-secondary-bg/40 flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx45("div", { ref: listRef, className: "min-h-0 flex-1 overflow-y-auto p-4", "aria-label": "Agents", children: isInitialLoading ? /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-2 p-1", role: "status", "aria-label": "Loading agents", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx45(Skeleton, { className: "h-11 w-full rounded-md" }, i)) }) : error ? /* @__PURE__ */ jsx45("p", { className: "text-failure-bg px-3 py-8 text-center text-sm", children: error }) : agents.length === 0 ? /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx45("div", { className: "bg-secondary-bg/40 flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx45("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", "aria-label": "Agents", children: isInitialLoading ? /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-2 p-1", role: "status", "aria-label": "Loading agents", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx45(Skeleton, { className: "h-11 w-full rounded-md" }, i)) }) : error ? /* @__PURE__ */ jsx45("p", { className: "text-failure-bg px-3 py-8 text-center text-sm", children: error }) : agents.length === 0 && !hasPageNav ? /* @__PURE__ */ jsx45(
       EmptyScreen,
       {
         title: "No Agents Found",
@@ -3916,10 +3991,35 @@ function AgentsLibrary({ onSelectAgent }) {
           /* @__PURE__ */ jsx45(EmptyScreenQueryHighlight, { children: query.trim() })
         ] }) : "Build one in a chat, then save it as an agent."
       }
-    ) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
-      /* @__PURE__ */ jsx45("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxs33(Table, { children: [
+    ) : agents.length === 0 ? /* @__PURE__ */ jsxs33("div", { className: "flex min-h-full flex-col", children: [
+      /* @__PURE__ */ jsx45(
+        EmptyScreen,
+        {
+          title: "No Agents Found",
+          description: query.trim() ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
+            "No search results found for ",
+            /* @__PURE__ */ jsx45(EmptyScreenQueryHighlight, { children: query.trim() })
+          ] }) : "Build one in a chat, then save it as an agent.",
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx45("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx45(
+        TableTokenPagination,
+        {
+          pageSize,
+          rowCount: 0,
+          canPrev,
+          canNext,
+          onPrev: goPrev,
+          onNext: goNext,
+          pageSizeOptions: AGENTS_PAGE_SIZE_OPTIONS,
+          onPageSizeChange: setPageSize
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs33("div", { className: "overflow-hidden rounded-lg border border-border", children: [
+      /* @__PURE__ */ jsxs33(Table, { children: [
         /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs33(TableRow, { className: "hover:bg-transparent", children: [
-          /* @__PURE__ */ jsx45(TableHead, { children: "Agent name" }),
+          /* @__PURE__ */ jsx45(TableHead, { className: "w-96 min-w-96", children: "Agent name" }),
           /* @__PURE__ */ jsx45(TableHead, { children: "Configuration" }),
           showCreatedByColumn ? /* @__PURE__ */ jsx45(TableHead, { children: "Created by" }) : null,
           showSchedulesColumn ? /* @__PURE__ */ jsx45(TableHead, { className: "w-[14rem]", children: "Schedules" }) : null,
@@ -3968,8 +4068,20 @@ function AgentsLibrary({ onSelectAgent }) {
             id
           );
         }) })
-      ] }) }),
-      hasMore ? /* @__PURE__ */ jsx45("div", { ref: sentinelRef, className: "flex h-8 shrink-0 items-center justify-center", "aria-hidden": true, children: loadingMore ? /* @__PURE__ */ jsx45("span", { className: "text-text-secondary text-xs", role: "status", children: "Loading more\u2026" }) : null }) : null
+      ] }),
+      /* @__PURE__ */ jsx45(
+        TableTokenPagination,
+        {
+          pageSize,
+          rowCount: agents.length,
+          canPrev,
+          canNext,
+          onPrev: goPrev,
+          onNext: goNext,
+          pageSizeOptions: AGENTS_PAGE_SIZE_OPTIONS,
+          onPageSizeChange: setPageSize
+        }
+      )
     ] }) }) })
   ] });
 }
@@ -4165,7 +4277,7 @@ function AttachmentCard({
       children: [
         /* @__PURE__ */ jsx49(Tooltip, { content: name, side: "top", triggerClassName: "size-full", children: /* @__PURE__ */ jsx49("div", { className: "bg-secondary-bg relative size-full overflow-hidden rounded-[calc(var(--composer-radius,1.5rem)-var(--composer-padding,8px))] border border-primary-button-bg/20", children: /* @__PURE__ */ jsxs37(Avatar, { className: "size-full rounded-none", children: [
           /* @__PURE__ */ jsx49(AvatarImage, { src: isImage ? previewSrc : void 0, alt: name, className: "object-cover" }),
-          /* @__PURE__ */ jsx49(AvatarFallback, { className: "rounded-none", children: /* @__PURE__ */ jsx49(Icon, { name: "file", size: "1.5rem", className: "text-text-secondary" }) })
+          /* @__PURE__ */ jsx49(AvatarFallback, { className: "rounded-none bg-secondary-bg bg-none text-text-secondary", children: /* @__PURE__ */ jsx49(Icon, { name: "file", size: "1.5rem", className: "text-text-secondary" }) })
         ] }) }) }),
         /* @__PURE__ */ jsx49("span", { className: "sr-only", children: name }),
         onRemove && /* @__PURE__ */ jsx49(
@@ -5053,7 +5165,10 @@ function ResponsiveDropdownMenu({
       "div",
       {
         className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
-        onClick: closeOnClick ? () => setOpen(false) : void 0,
+        onClick: closeOnClick ? (event) => {
+          if (isSurfaceClick(event)) return;
+          setOpen(false);
+        } : void 0,
         children
       }
     ) }) : null
@@ -5431,7 +5546,8 @@ function SkillVersionSelector({
       onOpenChange: (open) => {
         if (open) load();
       },
-      className: "min-w-40",
+      className: "max-h-64 min-w-40 overflow-y-auto",
+      lockScroll: true,
       trigger: /* @__PURE__ */ jsxs49(
         "button",
         {
@@ -6209,8 +6325,10 @@ function SideDrawer({
         onOpenChange(false);
       },
       style: compactStyle,
+      "data-anchor": anchor,
+      "data-compact": compact ? "" : void 0,
       className: cn(
-        "bg-card-bg text-text-primary border-border open:flex open:flex-col overflow-hidden rounded-none p-0 shadow-xl",
+        "aui-side-drawer bg-card-bg text-text-primary border-border open:flex open:flex-col overflow-hidden rounded-none p-0 shadow-xl",
         "backdrop:bg-black/50 backdrop:backdrop-blur-[2px] dark:backdrop:bg-black/70",
         compact ? "m-0 mt-auto h-[min(85dvh,40rem)] w-full max-w-none border-t pb-[env(safe-area-inset-bottom)]" : cn(
           // Mobile / narrow: bottom sheet
@@ -6290,7 +6408,7 @@ function AgentInstructionsDrawer({
       open,
       onOpenChange: (nextOpen) => !nextOpen && onClose(),
       title: "Instructions",
-      description: "Define the agent behavior and messages added at the start of every session.",
+      description: "System prompt that defines the agent's role, goals, and how it should behave. Written once, applied to every run.",
       anchor: "right",
       size: "lg",
       "aria-label": "Edit Instructions",
@@ -8216,7 +8334,7 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
         ]
       }
     ),
-    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx82(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select reasoning effort", children: content }) : /* @__PURE__ */ jsx82("div", { className: "bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[12rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
+    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx82(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select reasoning effort", children: content }) : /* @__PURE__ */ jsx82("div", { className: "aui-popup-enter bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[12rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
   ] });
 }
 
@@ -8833,7 +8951,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
         id: menuId,
         role: "dialog",
         "aria-label": "Add to composer",
-        className: "bg-card-bg text-text-primary absolute bottom-full left-0 z-50 mb-2 flex h-[22rem] w-[28rem] max-w-[min(28rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-lg border border-border shadow-lg",
+        className: "aui-popup-enter bg-card-bg text-text-primary absolute bottom-full left-0 z-50 mb-2 flex h-[22rem] w-[28rem] max-w-[min(28rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-lg border border-border shadow-lg",
         children: content
       }
     ) : null
@@ -8940,7 +9058,7 @@ function DraftModelSelector({ disabled, isRunning }) {
         ]
       }
     ),
-    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx85(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select model", children: content }) : /* @__PURE__ */ jsx85("div", { className: "bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[18rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
+    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx85(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select model", children: content }) : /* @__PURE__ */ jsx85("div", { className: "aui-popup-enter bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[18rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
   ] });
 }
 
@@ -8970,7 +9088,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Fragment as Fragment14, jsx as jsx87 } from "react/jsx-runtime";
 function preloadMarkdownOpenUI() {
-  return import("./OpenUiFenceBlock-FHEYXZEQ.js");
+  return import("./OpenUiFenceBlock-KPZFLUSC.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -9136,15 +9254,19 @@ function MessageErrorBanner({ message, className }) {
 }
 
 // src/atoms/MessageIndicator.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { ThinkingOrb } from "thinking-orbs";
+import { jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
 function MessageIndicator({ className }) {
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsxs67(
     "span",
     {
       "data-slot": "aui_assistant-message-indicator",
-      className: cn("animate-pulse font-sans", className),
-      "aria-label": "Assistant is working",
-      children: "\u25CF"
+      role: "status",
+      className: cn("inline-flex items-center gap-1.5 font-sans text-sm text-text-secondary", className),
+      children: [
+        /* @__PURE__ */ jsx90(ThinkingOrb, { state: "listening", size: 20, "aria-hidden": true }),
+        /* @__PURE__ */ jsx90("span", { className: "aui-message-indicator-shimmer", children: "Working..." })
+      ]
     }
   );
 }
@@ -9448,7 +9570,7 @@ function SandboxArtifactDownload({
 }
 
 // src/atoms/SandboxToolCallCard.tsx
-import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs68 } from "react/jsx-runtime";
 function JsonPane({ value, className }) {
   const MonacoEditorCore2 = useSlot("MonacoEditorCore");
   return /* @__PURE__ */ jsx95(
@@ -9482,22 +9604,22 @@ function SandboxBody({
   onViewModeChange,
   dataTestPrefix
 }) {
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs68(
     "div",
     {
       className: "rounded-lg border border-border bg-primary-bg",
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-sandbox` : void 0,
       children: [
-        /* @__PURE__ */ jsx95("div", { className: "rounded-t-md border-b border-primary-button-bg/30 bg-primary-button-bg/10", children: /* @__PURE__ */ jsxs67("div", { className: "flex w-full min-w-0 items-center gap-2 px-3 py-1.5", children: [
+        /* @__PURE__ */ jsx95("div", { className: "rounded-t-md border-b border-primary-button-bg/30 bg-primary-button-bg/10", children: /* @__PURE__ */ jsxs68("div", { className: "flex w-full min-w-0 items-center gap-2 px-3 py-1.5", children: [
           /* @__PURE__ */ jsx95("p", { className: "min-w-0 font-sans text-xs font-medium text-primary-button-bg", children: "sandbox" }),
-          /* @__PURE__ */ jsxs67(
+          /* @__PURE__ */ jsxs68(
             "div",
             {
               className: "ml-auto flex shrink-0 items-center gap-1.5",
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
               children: [
-                exitCode != null && /* @__PURE__ */ jsxs67(
+                exitCode != null && /* @__PURE__ */ jsxs68(
                   "span",
                   {
                     className: cn(
@@ -9512,7 +9634,7 @@ function SandboxBody({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs67(
+                /* @__PURE__ */ jsxs68(
                   "div",
                   {
                     className: "inline-flex h-6 items-center rounded-md border border-border bg-primary-bg p-0.5",
@@ -9556,33 +9678,33 @@ function SandboxBody({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx95("div", { className: "rounded-b-lg border border-t-0 border-border p-3", children: hasContent && /* @__PURE__ */ jsx95("div", { className: "max-h-80 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs text-text-primary", children: viewMode === "code" ? /* @__PURE__ */ jsxs67(Fragment15, { children: [
-          argsJson && /* @__PURE__ */ jsxs67("div", { className: "my-1 border-l-4 border-primary-button-bg px-3", children: [
+        /* @__PURE__ */ jsx95("div", { className: "rounded-b-lg border border-t-0 border-border p-3", children: hasContent && /* @__PURE__ */ jsx95("div", { className: "max-h-80 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs text-text-primary", children: viewMode === "code" ? /* @__PURE__ */ jsxs68(Fragment15, { children: [
+          argsJson && /* @__PURE__ */ jsxs68("div", { className: "my-1 border-l-4 border-primary-button-bg px-3", children: [
             /* @__PURE__ */ jsx95("div", { className: "mb-1 font-sans text-xs font-medium leading-4", children: "Arguments" }),
             /* @__PURE__ */ jsx95(JsonPane, { value: argsJson, className: "pl-2" })
           ] }),
-          resultJson && /* @__PURE__ */ jsxs67("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
+          resultJson && /* @__PURE__ */ jsxs68("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
             /* @__PURE__ */ jsx95("div", { className: "mb-1 mt-2 font-sans text-xs font-medium leading-4", children: "Result" }),
             /* @__PURE__ */ jsx95(JsonPane, { value: resultJson, className: "pl-2" })
           ] })
-        ] }) : /* @__PURE__ */ jsxs67(Fragment15, { children: [
-          command && /* @__PURE__ */ jsxs67("div", { className: "my-1 break-all border-l-4 border-primary-button-bg px-3", children: [
+        ] }) : /* @__PURE__ */ jsxs68(Fragment15, { children: [
+          command && /* @__PURE__ */ jsxs68("div", { className: "my-1 break-all border-l-4 border-primary-button-bg px-3", children: [
             /* @__PURE__ */ jsx95("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "COMMAND" }),
-            /* @__PURE__ */ jsxs67("div", { children: [
+            /* @__PURE__ */ jsxs68("div", { children: [
               /* @__PURE__ */ jsx95("span", { className: "text-primary-button-bg", children: "$" }),
               " ",
               command
             ] })
           ] }),
-          resultText ? /* @__PURE__ */ jsxs67(Fragment15, { children: [
+          resultText ? /* @__PURE__ */ jsxs68(Fragment15, { children: [
             /* @__PURE__ */ jsx95("div", { className: "mx-3 my-1 border-t border-border" }),
-            /* @__PURE__ */ jsxs67("div", { className: "my-1 break-all border-l-4 border-primary-button-bg/60 px-3", children: [
+            /* @__PURE__ */ jsxs68("div", { className: "my-1 break-all border-l-4 border-primary-button-bg/60 px-3", children: [
               /* @__PURE__ */ jsx95("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "OUTPUT" }),
               /* @__PURE__ */ jsx95("div", { children: resultText })
             ] })
-          ] }) : resultJson && /* @__PURE__ */ jsxs67(Fragment15, { children: [
+          ] }) : resultJson && /* @__PURE__ */ jsxs68(Fragment15, { children: [
             /* @__PURE__ */ jsx95("div", { className: "mx-3 my-1 border-t border-border" }),
-            /* @__PURE__ */ jsxs67("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
+            /* @__PURE__ */ jsxs68("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
               /* @__PURE__ */ jsx95("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "OUTPUT" }),
               /* @__PURE__ */ jsx95(JsonPane, { value: resultJson, className: "pl-2" })
             ] })
@@ -9741,7 +9863,7 @@ function useOptionalAgentConfigInstructions() {
 }
 
 // src/atoms/SaveAgentButton.tsx
-import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs69 } from "react/jsx-runtime";
 function cloneAgentSpec(spec) {
   return {
     ...spec,
@@ -9788,12 +9910,14 @@ function SaveAgentButtonContent({
   const [open, setOpen] = useState36(false);
   const [intent, setIntent] = useState36("create");
   const [name, setName] = useState36("");
+  const [description, setDescription] = useState36("");
   const [draftSpec, setDraftSpec] = useState36(null);
   const [saving, setSaving] = useState36(false);
   const [error, setError] = useState36(null);
   const close = () => {
     if (saving) return;
     setOpen(false);
+    setDescription("");
     setDraftSpec(null);
     setError(null);
   };
@@ -9810,6 +9934,7 @@ function SaveAgentButtonContent({
     const currentName = shell?.mode.status === "active" ? shell.mode.agentName ?? shell.mode.agentId ?? "" : "";
     setIntent(currentName ? "update" : "create");
     setName(currentName);
+    setDescription(currentName && shell?.mode.status === "active" ? shell.mode.description ?? "" : "");
     setDraftSpec(cloneAgentSpec(latestAgentSpec));
     setOpen(true);
   };
@@ -9818,11 +9943,14 @@ function SaveAgentButtonContent({
     if (intent === "update" && !canManageAgent) return;
     const normalizedName = name.trim();
     if (!normalizedName || !draftSpec.model.name.trim()) return;
+    const normalizedDescription = description.trim();
+    if (!normalizedDescription) return;
     setSaving(true);
     setError(null);
     try {
       const result = await builder.saveAgent({
         agentName: normalizedName,
+        ...normalizedDescription ? { description: normalizedDescription } : {},
         agentSpec: draftSpec,
         intent,
         sessionId: draftSessionId
@@ -9831,10 +9959,12 @@ function SaveAgentButtonContent({
       shell?.bindMutableAgent({
         agentId: result.agentId ?? normalizedName,
         agentName: normalizedName,
+        ...normalizedDescription ? { description: normalizedDescription } : {},
         agentSpec: draftSpec
       });
       shell?.invalidateAgentsList();
       setOpen(false);
+      setDescription("");
       setDraftSpec(null);
     } catch (caught) {
       setError(getErrorMessage(caught, "Could not save agent"));
@@ -9845,8 +9975,8 @@ function SaveAgentButtonContent({
   const isUpdateMode = shell?.mode.status === "active" && shell.mode.isMutable && (shell.mode.agentName !== void 0 || shell.mode.agentId !== void 0);
   const triggerLabel = isUpdateMode && children === "Save Agent" ? "Update Agent" : children;
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
-    /* @__PURE__ */ jsx97(PermissionGuard2, { allowed: canManageAgent, children: /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsxs69(Fragment16, { children: [
+    /* @__PURE__ */ jsx97(PermissionGuard2, { allowed: canManageAgent, children: /* @__PURE__ */ jsxs69(
       Button.Primary,
       {
         type: "button",
@@ -9874,11 +10004,12 @@ function SaveAgentButtonContent({
           {
             intent,
             name,
+            description,
             spec: draftSpec,
             saving,
             error,
             onNameChange: setName,
-            onChange: setDraftSpec,
+            onDescriptionChange: setDescription,
             onCancel: close,
             onSave: () => void save()
           }
@@ -9890,14 +10021,16 @@ function SaveAgentButtonContent({
 
 // src/atoms/SaveAgentForm.tsx
 import { useEffect as useEffect21, useRef as useRef20 } from "react";
-import { jsx as jsx98, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs70 } from "react/jsx-runtime";
 function SaveAgentForm({
   intent,
   name,
+  description,
   spec,
   saving,
   error,
   onNameChange,
+  onDescriptionChange,
   onCancel,
   onSave
 }) {
@@ -9906,9 +10039,10 @@ function SaveAgentForm({
     if (error === null) return;
     errorRef.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
   }, [error]);
-  return /* @__PURE__ */ jsxs69("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs69("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-3", children: [
-      /* @__PURE__ */ jsxs69("label", { className: "mb-3 block", children: [
+  const canSave = name.trim() !== "" && spec.model.name.trim() !== "" && description.trim() !== "";
+  return /* @__PURE__ */ jsxs70("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs70("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-3", children: [
+      /* @__PURE__ */ jsxs70("label", { className: "mb-3 block", children: [
         /* @__PURE__ */ jsx98("span", { className: "mb-1.5 block text-sm font-medium", children: "Agent name" }),
         /* @__PURE__ */ jsx98(
           "input",
@@ -9921,6 +10055,21 @@ function SaveAgentForm({
           }
         )
       ] }),
+      /* @__PURE__ */ jsxs70("label", { className: "mb-3 block", children: [
+        /* @__PURE__ */ jsx98("span", { className: "mb-1.5 block text-sm font-medium", children: "Description" }),
+        /* @__PURE__ */ jsx98(
+          "textarea",
+          {
+            value: description,
+            disabled: saving,
+            onChange: (event) => onDescriptionChange(event.target.value),
+            rows: 4,
+            maxLength: 1024,
+            placeholder: "Describe what this agent does.",
+            className: auiInputClass("resize-y py-2 disabled:opacity-60")
+          }
+        )
+      ] }),
       error ? /* @__PURE__ */ jsx98(
         "p",
         {
@@ -9931,22 +10080,22 @@ function SaveAgentForm({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs69("div", { className: "bg-card-bg sticky bottom-0 z-10 flex shrink-0 justify-end gap-2 border-t border-border px-5 py-4", children: [
+    /* @__PURE__ */ jsxs70("div", { className: "bg-card-bg sticky bottom-0 z-10 flex shrink-0 justify-end gap-2 border-t border-border px-5 py-4", children: [
       /* @__PURE__ */ jsx98(Button.Secondary, { type: "button", disabled: saving, onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx98(Button.Primary, { type: "button", disabled: saving || !name.trim() || !spec.model.name.trim(), onClick: onSave, children: saving ? "Saving\u2026" : "Save changes" })
+      /* @__PURE__ */ jsx98(Button.Primary, { type: "button", disabled: saving || !canSave, onClick: onSave, children: saving ? "Saving\u2026" : "Save changes" })
     ] })
   ] });
 }
 
 // src/atoms/SchedulesButton.tsx
-import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs71 } from "react/jsx-runtime";
 function SchedulesButton({ className, compact = false }) {
   const shell = useOptionalShellMode();
   const scheduleServer = useOptionalScheduleServer();
   const enabled = isSchedulesChromeEnabled({ schedules: scheduleServer }) && shell != null;
   const open = shell?.schedulesOpen === true;
   if (!enabled) return null;
-  return /* @__PURE__ */ jsx99("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsx99("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs71(
     "button",
     {
       type: "button",
@@ -9965,7 +10114,7 @@ function SchedulesButton({ className, compact = false }) {
       onClick: () => shell.setSchedulesOpen(!open),
       children: [
         /* @__PURE__ */ jsx99(Icon, { name: "calendar-clock", size: compact ? 14 : void 0 }),
-        compact ? /* @__PURE__ */ jsx99("span", { className: "text-center", children: "Schedules" }) : /* @__PURE__ */ jsxs70(Fragment17, { children: [
+        compact ? /* @__PURE__ */ jsx99("span", { className: "text-center", children: "Schedules" }) : /* @__PURE__ */ jsxs71(Fragment17, { children: [
           /* @__PURE__ */ jsx99("span", { className: "truncate", children: "Schedules" }),
           /* @__PURE__ */ jsx99(Icon, { name: "chevron-right", className: "ml-auto size-3.5 shrink-0 opacity-60" })
         ] })
@@ -10004,12 +10153,12 @@ var ScrollToBottomButton = forwardRef2(
 ScrollToBottomButton.displayName = "ScrollToBottomButton";
 
 // src/atoms/SelectAgentEmptyState.tsx
-import { jsx as jsx101, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs72 } from "react/jsx-runtime";
 function SelectAgentEmptyState() {
   const shell = useOptionalShellMode();
   const AgentsLibraryButton2 = useSlot("AgentsLibraryButton");
   if (shell?.mode.status !== "idle") return null;
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs72(
     "div",
     {
       className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-4 px-6",
@@ -10023,7 +10172,7 @@ function SelectAgentEmptyState() {
 }
 
 // src/atoms/SessionsBrowserButton.tsx
-import { Fragment as Fragment18, jsx as jsx102, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx102, jsxs as jsxs73 } from "react/jsx-runtime";
 function SessionsBrowserButton({ className, compact = false }) {
   const sessionsServer = useOptionalAgentSessionsServer();
   const shell = useOptionalShellMode();
@@ -10031,7 +10180,7 @@ function SessionsBrowserButton({ className, compact = false }) {
   const sessionsOpen = shell?.sessionsOpen === true;
   const enabled = isSessionsChromeEnabled({ sessions: sessionsServer }) && shell != null;
   if (!enabled) return null;
-  return /* @__PURE__ */ jsx102("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsx102("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs73(
     "button",
     {
       type: "button",
@@ -10061,7 +10210,7 @@ function SessionsBrowserButton({ className, compact = false }) {
       },
       children: [
         /* @__PURE__ */ jsx102(Icon, { name: "message-square-text", size: compact ? 14 : void 0 }),
-        compact ? /* @__PURE__ */ jsx102("span", { className: "text-center", children: "Sessions" }) : /* @__PURE__ */ jsxs72(Fragment18, { children: [
+        compact ? /* @__PURE__ */ jsx102("span", { className: "text-center", children: "Sessions" }) : /* @__PURE__ */ jsxs73(Fragment18, { children: [
           /* @__PURE__ */ jsx102("span", { className: "truncate", children: "Sessions" }),
           /* @__PURE__ */ jsx102(Icon, { name: "chevron-right", className: "ml-auto size-3.5 shrink-0 opacity-60" })
         ] })
@@ -10076,9 +10225,9 @@ function ShellActionsActionSlot() {
 }
 
 // src/atoms/Skeletons.tsx
-import { jsx as jsx103, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs74 } from "react/jsx-runtime";
 function MessageListSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs74(
     "div",
     {
       role: "status",
@@ -10087,7 +10236,7 @@ function MessageListSkeleton({ className }) {
       className: cn("mb-14 flex flex-col gap-y-6", className),
       children: [
         /* @__PURE__ */ jsx103("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx103(Skeleton, { className: "h-10 w-[min(85%,20rem)] rounded-xl" }) }),
-        /* @__PURE__ */ jsxs73("div", { className: "flex flex-col gap-2 px-2", children: [
+        /* @__PURE__ */ jsxs74("div", { className: "flex flex-col gap-2 px-2", children: [
           /* @__PURE__ */ jsx103(Skeleton, { className: "h-4 w-full max-w-md" }),
           /* @__PURE__ */ jsx103(Skeleton, { className: "h-4 w-full max-w-sm" }),
           /* @__PURE__ */ jsx103(Skeleton, { className: "h-4 w-2/3 max-w-xs" })
@@ -10098,7 +10247,7 @@ function MessageListSkeleton({ className }) {
 }
 
 // src/atoms/SubAgentCard.tsx
-import { jsx as jsx104, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs75 } from "react/jsx-runtime";
 function SubAgentCard({
   agentName,
   instruction,
@@ -10120,7 +10269,7 @@ function SubAgentCard({
     {
       className: cn("aui-sub-agent-card min-w-0", className),
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-sub-agent-card` : void 0,
-      children: /* @__PURE__ */ jsxs74(
+      children: /* @__PURE__ */ jsxs75(
         AgentStepRow,
         {
           icon: "agent-2",
@@ -10133,7 +10282,7 @@ function SubAgentCard({
           statusText: durationText,
           dataTestPrefix,
           children: [
-            instructionContent != null && /* @__PURE__ */ jsxs74("div", { className: "mb-3 flex flex-col gap-2 rounded-md border border-border p-2", children: [
+            instructionContent != null && /* @__PURE__ */ jsxs75("div", { className: "mb-3 flex flex-col gap-2 rounded-md border border-border p-2", children: [
               /* @__PURE__ */ jsx104("h4", { className: "text-sm font-semibold text-text-primary", children: "Instructions" }),
               /* @__PURE__ */ jsx104(
                 "div",
@@ -11166,7 +11315,7 @@ var one_light_default = {
 };
 
 // src/atoms/SyntaxHighlighter.tsx
-import { jsx as jsx105, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs76 } from "react/jsx-runtime";
 function stripTrailingNewline(code) {
   return code.endsWith("\n") ? code.slice(0, -1) : code;
 }
@@ -11190,7 +11339,7 @@ function SyntaxHighlighterImpl({ code, language, darkTheme, className, showLineN
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [code]);
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       className: cn(
@@ -11252,7 +11401,7 @@ function SyntaxHighlighterImpl({ code, language, darkTheme, className, showLineN
 var SyntaxHighlighter = memo(SyntaxHighlighterImpl);
 
 // src/atoms/ThreadListMisc.tsx
-import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs77 } from "react/jsx-runtime";
 function ThreadListNewButton({ className, children, style, ...rest }) {
   return /* @__PURE__ */ jsx106(
     "button",
@@ -11268,7 +11417,7 @@ function ThreadListNewButton({ className, children, style, ...rest }) {
         )
       }),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs76(Fragment19, { children: [
+      children: children ?? /* @__PURE__ */ jsxs77(Fragment19, { children: [
         /* @__PURE__ */ jsx106(Icon, { name: "square-pen" }),
         "New Chat"
       ] })
@@ -11288,14 +11437,14 @@ function ThreadListEmptyState({ message = "No threads yet", className }) {
   );
 }
 function ThreadListShell({ header, children, className }) {
-  return /* @__PURE__ */ jsxs76("div", { className: cn("font-sans-flex flex h-full min-h-0 flex-1 flex-col overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs77("div", { className: cn("font-sans-flex flex h-full min-h-0 flex-1 flex-col overflow-hidden", className), children: [
     header != null ? /* @__PURE__ */ jsx106("div", { className: "shrink-0 border-b border-border px-2 py-2", children: header }) : null,
     /* @__PURE__ */ jsx106("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-2", children })
   ] });
 }
 
 // src/atoms/ThreadListRow.tsx
-import { jsx as jsx107, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs78 } from "react/jsx-runtime";
 function ThreadListRow({
   title,
   active,
@@ -11307,13 +11456,13 @@ function ThreadListRow({
 }) {
   const relative = lastMessageAt != null ? formatRelativeShort(lastMessageAt) : void 0;
   const hasTrailing = relative != null || actions != null;
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs78(
     "div",
     {
       "data-slot": "aui_thread-list-item",
       "data-active": active || void 0,
       className: cn(
-        "group flex min-w-0 items-center gap-0.5 rounded-[0.75rem] transition-colors",
+        "group flex min-w-0 items-center gap-0.5 rounded-[0.5rem] transition-colors",
         active ? "bg-dropdown-selected-item-bg text-dropdown-selected-item-text" : "text-text-secondary hover:bg-ghost-button-hover hover:text-text-primary",
         className
       ),
@@ -11332,16 +11481,16 @@ function ThreadListRow({
                 active ? "text-dropdown-selected-item-text" : "text-inherit"
               )
             }),
-            children: /* @__PURE__ */ jsxs77("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx107("span", { className: "block truncate text-sm font-medium text-text-primary", children: title }),
-              agentName != null ? /* @__PURE__ */ jsxs77("span", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs text-text-secondary", children: [
-                /* @__PURE__ */ jsx107(Icon, { name: "agent-2", className: "size-3 shrink-0" }),
+            children: /* @__PURE__ */ jsxs78("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx107("span", { className: "block truncate text-sm font-normal text-text-primary", children: title }),
+              agentName != null ? /* @__PURE__ */ jsxs78("span", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-[0.75rem] text-text-secondary", children: [
+                /* @__PURE__ */ jsx107(Icon, { name: "bot", className: "shrink-0" }),
                 /* @__PURE__ */ jsx107("span", { className: "truncate", children: agentName })
               ] }) : null
             ] })
           }
         ),
-        hasTrailing ? /* @__PURE__ */ jsxs77("div", { className: "relative mr-1 flex size-7 shrink-0 items-center justify-center", children: [
+        hasTrailing ? /* @__PURE__ */ jsxs78("div", { className: "relative mr-1 flex size-7 shrink-0 items-center justify-center", children: [
           relative != null ? /* @__PURE__ */ jsx107(
             "span",
             {
@@ -11449,7 +11598,7 @@ MessageGroup.displayName = "MessageGroup";
 // src/atoms/Toast.tsx
 import { useCallback as useCallback15, useState as useState38 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx109, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs79 } from "react/jsx-runtime";
 function Toast({ title, description, open, onOpenChange, variant = "error", className }) {
   const [copied, setCopied] = useState38(false);
   const handleCopy = useCallback15(async () => {
@@ -11463,7 +11612,7 @@ ${description}`;
     }
   }, [title, description]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     "div",
     {
       role: "alert",
@@ -11481,8 +11630,8 @@ ${description}`;
             className: cn("shrink-0", variant === "success" ? "text-success-bg" : "text-failure-bg")
           }
         ),
-        /* @__PURE__ */ jsxs78("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs78("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs79("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsx109(
               "div",
               {
@@ -11493,7 +11642,7 @@ ${description}`;
                 children: title
               }
             ),
-            /* @__PURE__ */ jsxs78("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxs79("div", { className: "flex shrink-0 items-center gap-1", children: [
               variant === "error" ? /* @__PURE__ */ jsx109(
                 "button",
                 {
@@ -11550,7 +11699,7 @@ function ToastStack({ children, duration: _duration = Number.POSITIVE_INFINITY }
 }
 
 // src/atoms/ToolApprovalBar.tsx
-import { jsx as jsx110, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_APPROVE_OPTIONS = [{ id: "approve", label: "Approve", variant: "primary" }];
 var DEFAULT_DENY_OPTIONS = [
   { id: "deny", label: "Deny", variant: "secondary", requiresReason: true }
@@ -11583,22 +11732,22 @@ function ToolApprovalBar({
   const isDenied = status?.type === "denied";
   const interactionsLocked = disabled && !isDecided;
   const headingText = isApproved ? "Tool Approved" : isDenied ? "Tool Approval Denied" : "Tool Approval Required for";
-  return /* @__PURE__ */ jsxs79(
+  return /* @__PURE__ */ jsxs80(
     "div",
     {
       className: cn("aui-tool-approval-bar", className),
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-approval` : void 0,
       children: [
-        /* @__PURE__ */ jsxs79("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs79("div", { className: cn("flex shrink-0 flex-col items-center", !showLineBelow && "pb-1"), children: [
+        /* @__PURE__ */ jsxs80("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs80("div", { className: cn("flex shrink-0 flex-col items-center", !showLineBelow && "pb-1"), children: [
             /* @__PURE__ */ jsx110("div", { className: "min-h-[0.75rem] w-px flex-1 bg-border" }),
             /* @__PURE__ */ jsx110(StepIconBox, { icon: "wrench", variant: "muted", iconSize: "0.875em", className: "my-1" }),
             showLineBelow && /* @__PURE__ */ jsx110("div", { className: "min-h-[0.75rem] w-px flex-1 bg-border" })
           ] }),
-          /* @__PURE__ */ jsxs79("div", { className: "mt-2 flex flex-1 items-center justify-between", children: [
-            /* @__PURE__ */ jsxs79("div", { className: "flex w-full items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxs79("span", { className: "inline-flex flex-wrap items-center gap-1 font-sans text-xs font-medium leading-4 text-text-primary", children: [
+          /* @__PURE__ */ jsxs80("div", { className: "mt-2 flex flex-1 items-center justify-between", children: [
+            /* @__PURE__ */ jsxs80("div", { className: "flex w-full items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs80("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs80("span", { className: "inline-flex flex-wrap items-center gap-1 font-sans text-xs font-medium leading-4 text-text-primary", children: [
                   headingText,
                   /* @__PURE__ */ jsx110("span", { className: "rounded bg-secondary-bg px-1.5 py-0.5 text-xs text-text-secondary", children: toolName })
                 ] }),
@@ -11613,8 +11762,8 @@ function ToolApprovalBar({
               ] }),
               !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsx110(Button.Secondary, { size: "small", disabled: interactionsLocked, onClick: () => onDenyOptionChange?.(null), children: "Back" })
             ] }),
-            !isDecided && !readOnly && !selectedDenyOption && /* @__PURE__ */ jsxs79("div", { className: "flex gap-2", children: [
-              approveOptions.map((option) => /* @__PURE__ */ jsxs79(
+            !isDecided && !readOnly && !selectedDenyOption && /* @__PURE__ */ jsxs80("div", { className: "flex gap-2", children: [
+              approveOptions.map((option) => /* @__PURE__ */ jsxs80(
                 Button,
                 {
                   size: "small",
@@ -11648,16 +11797,16 @@ function ToolApprovalBar({
             ] })
           ] })
         ] }),
-        !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsxs79("div", { className: "flex flex-col gap-1 pl-8 pt-3", children: [
-          (selectedDenyOption.confirm?.title || selectedDenyOption.confirm?.description) && /* @__PURE__ */ jsxs79("div", { className: "flex flex-col gap-0.5", children: [
+        !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsxs80("div", { className: "flex flex-col gap-1 pl-8 pt-3", children: [
+          (selectedDenyOption.confirm?.title || selectedDenyOption.confirm?.description) && /* @__PURE__ */ jsxs80("div", { className: "flex flex-col gap-0.5", children: [
             selectedDenyOption.confirm.title && /* @__PURE__ */ jsx110("span", { className: "text-xs font-medium text-text-primary", children: selectedDenyOption.confirm.title }),
             selectedDenyOption.confirm.description && /* @__PURE__ */ jsx110("span", { className: "text-xs text-text-secondary", children: selectedDenyOption.confirm.description })
           ] }),
-          selectedDenyOption.grants && selectedDenyOption.grants.length > 0 && /* @__PURE__ */ jsxs79("div", { className: "flex flex-wrap items-center gap-1", children: [
+          selectedDenyOption.grants && selectedDenyOption.grants.length > 0 && /* @__PURE__ */ jsxs80("div", { className: "flex flex-wrap items-center gap-1", children: [
             /* @__PURE__ */ jsx110("span", { className: "text-xs text-text-secondary", children: "Grants:" }),
             selectedDenyOption.grants.map((grant) => /* @__PURE__ */ jsx110("span", { className: "rounded bg-secondary-bg px-1.5 py-0.5 text-xs text-text-secondary", children: grant }, grant))
           ] }),
-          /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs80("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx110(
               "input",
               {
@@ -11678,7 +11827,7 @@ function ToolApprovalBar({
           ] }),
           showReasonError && /* @__PURE__ */ jsx110("span", { id: "aui-denial-reason-error", className: "text-xs text-failure-bg", role: "alert", children: "Reason is required" })
         ] }),
-        isDecided && status?.reason && /* @__PURE__ */ jsx110("div", { className: "pl-8 pt-2", children: /* @__PURE__ */ jsxs79("span", { className: "text-xs text-text-secondary", children: [
+        isDecided && status?.reason && /* @__PURE__ */ jsx110("div", { className: "pl-8 pt-2", children: /* @__PURE__ */ jsxs80("span", { className: "text-xs text-text-secondary", children: [
           "Reason: ",
           status.reason
         ] }) })
@@ -12018,7 +12167,7 @@ function useRegisterApprovalExpand(toolCallId, expand) {
 }
 
 // src/atoms/ToolCallCard.tsx
-import { Fragment as Fragment20, jsx as jsx112, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx112, jsxs as jsxs81 } from "react/jsx-runtime";
 var DEFAULT_AWAITING_TEXT = "Awaiting Response...";
 function ToolCallCard({
   icon = "mcp-server",
@@ -12090,7 +12239,7 @@ function ToolCallCard({
           showContentConnector: true,
           showPersistentContentConnector: !hasApproval,
           dataTestPrefix: dataTestPrefix ? `${dataTestPrefix}-header` : void 0,
-          persistentChildren: /* @__PURE__ */ jsxs80(Fragment20, { children: [
+          persistentChildren: /* @__PURE__ */ jsxs81(Fragment20, { children: [
             approvalSlot,
             expanded && showResponseLine && responseSlot && /* @__PURE__ */ jsx112("div", { "data-testid": dataTestPrefix ? `${dataTestPrefix}-response` : void 0, children: responseSlot })
           ] }),
@@ -12103,7 +12252,7 @@ function ToolCallCard({
 
 // src/atoms/ToolCallContentBlock.tsx
 import { useState as useState40 } from "react";
-import { jsx as jsx113, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs82 } from "react/jsx-runtime";
 function JsonEditor({
   content,
   height,
@@ -12166,7 +12315,7 @@ function ToolCallContentBlock({
   } : {
     padding: "0.25rem"
   };
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs82(
     "div",
     {
       className: cn(
@@ -12176,9 +12325,9 @@ function ToolCallContentBlock({
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-content-block` : "tfy-tool-call-content-block",
       "data-content": content,
       children: [
-        /* @__PURE__ */ jsxs81("div", { className: "flex items-center justify-between rounded-t-lg border border-primary-button-bg/30 bg-primary-button-bg/10 px-3 py-1", children: [
+        /* @__PURE__ */ jsxs82("div", { className: "flex items-center justify-between rounded-t-lg border border-primary-button-bg/30 bg-primary-button-bg/10 px-3 py-1", children: [
           /* @__PURE__ */ jsx113("div", { className: "font-sans text-xs font-medium text-primary-button-bg", children: title }),
-          /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx113(
               "button",
               {
@@ -12230,8 +12379,8 @@ function ToolCallContentBlock({
             )
           }
         ),
-        fullscreen && /* @__PURE__ */ jsx113(Dialog, { open: true, onOpenChange: (open) => onFullscreenChange?.(open), children: /* @__PURE__ */ jsxs81(DialogContent, { className: "flex h-[80vh] max-w-4xl flex-col", children: [
-          /* @__PURE__ */ jsxs81(DialogHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+        fullscreen && /* @__PURE__ */ jsx113(Dialog, { open: true, onOpenChange: (open) => onFullscreenChange?.(open), children: /* @__PURE__ */ jsxs82(DialogContent, { className: "flex h-[80vh] max-w-4xl flex-col", children: [
+          /* @__PURE__ */ jsxs82(DialogHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsx113(DialogTitle, { children: title }),
             /* @__PURE__ */ jsx113(IconButton, { variant: "ghost", onClick: () => onFullscreenChange?.(false), "aria-label": "Minimize", children: /* @__PURE__ */ jsx113(Icon, { name: "compress", size: "0.875em" }) })
           ] }),
@@ -12243,7 +12392,7 @@ function ToolCallContentBlock({
 }
 
 // src/atoms/ToolGroupCard.tsx
-import { jsx as jsx114, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs83 } from "react/jsx-runtime";
 function ToolGroupCard({
   toolCallCount,
   expanded,
@@ -12256,7 +12405,7 @@ function ToolGroupCard({
   const AccordionSummary2 = useSlot("AccordionSummary");
   const AccordionDetails2 = useSlot("AccordionDetails");
   const label = `${toolCallCount} tool ${toolCallCount === 1 ? "call" : "calls"}`;
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     Accordion2,
     {
       "data-slot": "tool-group-card",
@@ -12278,7 +12427,7 @@ function ToolGroupCard({
               "&:hover": { backgroundColor: "transparent" },
               "& .MuiAccordionSummary-content": { margin: 0, width: "100%" }
             },
-            children: /* @__PURE__ */ jsxs82("div", { className: "text-text-secondary hover:text-text-primary flex origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]", children: [
+            children: /* @__PURE__ */ jsxs83("div", { className: "text-text-secondary hover:text-text-primary flex origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]", children: [
               active && /* @__PURE__ */ jsx114(Icon, { name: "loader", className: "size-3 shrink-0 animate-spin [animation-duration:0.6s]" }),
               /* @__PURE__ */ jsx114("span", { className: "text-xs font-medium", children: label }),
               /* @__PURE__ */ jsx114(
@@ -12301,7 +12450,7 @@ function ToolGroupCard({
 }
 
 // src/atoms/UserMessageActionBar.tsx
-import { jsx as jsx115, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs84 } from "react/jsx-runtime";
 var actionBtnClass2 = "h-6 w-6 text-text-secondary hover:text-text-primary [&_svg]:size-3.5";
 function UserMessageActionBar({
   isCopied,
@@ -12314,7 +12463,7 @@ function UserMessageActionBar({
   className
 }) {
   const MessageTimestamp2 = useSlot("MessageTimestamp");
-  return /* @__PURE__ */ jsxs83("div", { className: cn("aui-user-action-bar-root animate-in fade-in flex items-center gap-1 duration-200", className), children: [
+  return /* @__PURE__ */ jsxs84("div", { className: cn("aui-user-action-bar-root animate-in fade-in flex items-center gap-1 duration-200", className), children: [
     /* @__PURE__ */ jsx115(MessageTimestamp2, { createdAt, className: "mr-1" }),
     /* @__PURE__ */ jsx115(
       IconButton,
@@ -12345,9 +12494,9 @@ function UserMessageActionBar({
 }
 
 // src/atoms/UserMessageBubble.tsx
-import { jsx as jsx116, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs85 } from "react/jsx-runtime";
 function UserMessageBubble({ text, attachments, editAction, className }) {
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs85(
     "div",
     {
       "data-slot": "aui_user-message-root",
@@ -12371,10 +12520,10 @@ function UserMessageBubble({ text, attachments, editAction, className }) {
 
 // src/atoms/UserMessageEdit.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx117, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs86 } from "react/jsx-runtime";
 var UserMessageEdit = forwardRef4(
   function UserMessageEdit2({ timestamp, attachments, input, footer, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs85(
+    return /* @__PURE__ */ jsxs86(
       "div",
       {
         ref,
@@ -12382,7 +12531,7 @@ var UserMessageEdit = forwardRef4(
         className: cn("flex flex-col gap-2 w-full", className),
         ...rest,
         children: [
-          (timestamp || attachments) && /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
+          (timestamp || attachments) && /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
             /* @__PURE__ */ jsx117("span", { className: "font-medium text-text-primary", children: "User" }),
             timestamp
           ] }),
@@ -12396,12 +12545,12 @@ var UserMessageEdit = forwardRef4(
 );
 
 // src/atoms/WelcomeScreen.tsx
-import { jsx as jsx118, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs87 } from "react/jsx-runtime";
 function WelcomeScreen({ heading = "How can I help you today?", icon, className }) {
   const preset = useOptionalThemePreset();
   const BrandLogo2 = useSlot("BrandLogo");
   const resolvedIcon = icon !== void 0 ? icon : preset === "chatgpt" ? null : preset === "claude" ? /* @__PURE__ */ jsx118(Icon, { name: "welcome-sparkle", className: "size-5 fill-current text-primary-button-bg" }) : /* @__PURE__ */ jsx118(BrandLogo2, { variant: "icon", className: "size-10" });
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs87(
     "div",
     {
       "data-preset": preset,
@@ -14245,7 +14394,7 @@ function UserMessageContainer() {
 }
 
 // src/containers/AgentSessionTimelineContainer.tsx
-import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs87 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs88 } from "react/jsx-runtime";
 var READ_ONLY_SLOT_OVERRIDES = {
   UserMessageActionBar: () => /* @__PURE__ */ jsx132(Fragment21, {}),
   MessageActionBar: () => /* @__PURE__ */ jsx132(Fragment21, {})
@@ -14359,8 +14508,8 @@ function AgentSessionTimelineContainer({ sessionId, events, listMetrics }) {
   if (messages.length === 0 && turnViews.length === 0) {
     return /* @__PURE__ */ jsx132("div", { className: "flex flex-1 items-center justify-center px-6 text-sm text-text-secondary", children: "This session has no messages yet." });
   }
-  return /* @__PURE__ */ jsxs87("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs87("div", { className: "shrink-0 border-b border-border", children: [
+  return /* @__PURE__ */ jsxs88("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs88("div", { className: "shrink-0 border-b border-border", children: [
       /* @__PURE__ */ jsx132(AgentSessionMetricsStrip2, { metrics: sessionMetrics }),
       /* @__PURE__ */ jsx132(Suspense3, { fallback: null, children: /* @__PURE__ */ jsx132(AgentSessionEventTimeline2, { turns: turnViews, segments: timelineSegments, onSelectTurn: handleSelectTurn }) })
     ] }),
@@ -14388,7 +14537,7 @@ function SessionTurnSection({
   if (!turn.showHeader && messages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs87("section", { ref: onMount, id: `session-turn-${turn.turnNumber}`, className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsxs88("section", { ref: onMount, id: `session-turn-${turn.turnNumber}`, className: "flex flex-col gap-2", children: [
     turn.showHeader ? /* @__PURE__ */ jsx132(
       AgentSessionTurnHeader2,
       {
@@ -14406,28 +14555,28 @@ function SessionTurnSection({
 }
 
 // src/theme/defaultSlots.ts
-var AgentOverview = lazy(() => import("./AgentOverview-NPC4P2EY.js"));
+var AgentOverview = lazy(() => import("./AgentOverview-WC7WMNMS.js"));
 var AgentSessions = lazy(async () => {
-  const mod = await import("./AgentSessions-WHODEG2M.js");
+  const mod = await import("./AgentSessions-YCAPM5GK.js");
   return { default: mod.AgentSessions };
 });
 var AgentCodeSnippets = lazy(
-  () => import("./AgentCodeSnippets-V5A56M7R.js")
+  () => import("./AgentCodeSnippets-T7PR6PDP.js")
 );
 var SchedulesPage = lazy(async () => {
-  const mod = await import("./SchedulesPage-JIUWNYUH.js");
+  const mod = await import("./SchedulesPage-2G6F4XO6.js");
   return { default: mod.SchedulesPage };
 });
 var AgentSessionEventTimeline = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimeline-UUXOJXTC.js");
+  const mod = await import("./AgentSessionEventTimeline-SETKGGCI.js");
   return { default: mod.AgentSessionEventTimeline };
 });
 var AgentSessionEventTimelineChart = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimelineChart-FIAQCYJC.js");
+  const mod = await import("./AgentSessionEventTimelineChart-4Y7PY5SJ.js");
   return { default: mod.AgentSessionEventTimelineChart };
 });
 var AgentMetricChart = lazy(async () => {
-  const mod = await import("./AgentMetricChart-GEADURES.js");
+  const mod = await import("./AgentMetricChart-J3RCSCAG.js");
   return { default: mod.AgentMetricChart };
 });
 var defaultSlots = {
@@ -14649,6 +14798,9 @@ export {
   getSessionEventLabel,
   getSessionEventTooltipHeading,
   auiInputClass,
+  auiSelectTriggerClass,
+  auiSelectMenuClass,
+  auiSelectOptionClass,
   PopoverSelect,
   AgentSessionsFilters,
   SessionsPage,
@@ -14797,4 +14949,4 @@ export {
   UserMessageContainer,
   defaultSlots
 };
-//# sourceMappingURL=chunk-MMU55KCW.js.map
+//# sourceMappingURL=chunk-XANC4F2H.js.map