@truefoundry/trueforge-ui 0.3.0-rc.4 → 0.3.0-rc.6

package/dist/{chunk-2OKGEU6X.js → chunk-DNOQ4WYH.js}

@@ -3,7 +3,7 @@ import {
   replaceScheduleShareSearch,
   searchAllAgents,
   useSearchAgentsList
-} from "./chunk-E4GVP6PM.js";
+} from "./chunk-T6QQV5LK.js";
 import {
   Icon,
   PageHeader,
@@ -14,11 +14,12 @@ import {
   sidebarRailButtonClassName,
   useCompactLayout,
   useDraftCatalog
-} from "./chunk-MAA7U4RF.js";
+} from "./chunk-3ZW74FHC.js";
 import {
   SESSION_CUSTOM_RANGE_MAX_DAYS,
   SESSION_SHARE_CHANGE_EVENT,
   buildAgentSessionShareUrl,
+  defaultMetricsTimeRange,
   defaultSessionTimeRange,
   getErrorMessage,
   isMetricsChromeEnabled,
@@ -42,13 +43,13 @@ import {
   useServer,
   useServerCapabilities,
   useShellMode
-} from "./chunk-6CFZHEYH.js";
+} from "./chunk-2GIZY3JJ.js";
 import {
   useAuiState
 } from "./chunk-M6MHLVSO.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-GTTMLDCI.js";
+} from "./chunk-CG75X77Q.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -56,7 +57,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-P7J2ABEP.js";
+} from "./chunk-JCL3Q7RW.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -1008,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"
     }
   );
 }
@@ -1401,7 +1402,7 @@ 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 rounded-md border border-border bg-card-bg p-1",
           "text-text-primary shadow-md",
           className
         ),
@@ -1447,6 +1448,7 @@ function cloneAgentName(agentName) {
 }
 function AgentOverflowMenu({
   agentName,
+  description,
   agentSpec,
   canMutate,
   canUse = true,
@@ -1478,6 +1480,7 @@ function AgentOverflowMenu({
     try {
       await builder.saveAgent({
         agentName: clonedName,
+        ...description === void 0 ? {} : { description },
         agentSpec,
         intent: "create"
       });
@@ -1660,6 +1663,7 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
       isCreateAgent: true,
       agentId: detail.agentId,
       agentName: detail.name,
+      ...detail.description === void 0 ? {} : { description: detail.description },
       agentSpec: detail.agentSpec
     });
   };
@@ -1702,6 +1706,7 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
           AgentOverflowMenu,
           {
             agentName: detail.name,
+            ...detail.description === void 0 ? {} : { description: detail.description },
             agentSpec: detail.agentSpec,
             canMutate,
             canUse,
@@ -1771,11 +1776,13 @@ function AgentDetailsPage({ agentId }) {
   const AgentSessions2 = useSlot("AgentSessions");
   const SchedulesPage2 = useSlot("SchedulesPage");
   const AgentMetrics = useSlot("AgentMetrics");
+  const AgentMetricsTimeRangeFilter2 = useSlot("AgentMetricsTimeRangeFilter");
   const AgentCodeSnippets2 = useSlot("AgentCodeSnippets");
   const [detail, setDetail] = useState7();
   const [detailFailed, setDetailFailed] = useState7(false);
   const [snippets, setSnippets] = useState7();
   const [snippetsFailed, setSnippetsFailed] = useState7(false);
+  const [metricsTimeRange, setMetricsTimeRange] = useState7(defaultMetricsTimeRange);
   const goBack = useCallback5(() => {
     updateShareSearch({
       sessionId: null,
@@ -1856,7 +1863,15 @@ function AgentDetailsPage({ agentId }) {
   } else if (activeTab === "schedules") {
     content = /* @__PURE__ */ jsx23(SchedulesPage2, { agentId });
   } else if (activeTab === "metrics") {
-    content = /* @__PURE__ */ jsx23(AgentMetrics, { agentId });
+    content = /* @__PURE__ */ jsx23(
+      AgentMetrics,
+      {
+        agentId,
+        timeRange: metricsTimeRange,
+        onTimeRangeChange: setMetricsTimeRange,
+        showTimeRangeFilter: false
+      }
+    );
   } else if (snippetsFailed) {
     content = /* @__PURE__ */ jsx23(AgentDetailsUnavailable2, { onBack: goBack, reason: "Code samples for this agent could not be loaded." });
   } else if (snippets === void 0) {
@@ -1875,6 +1890,7 @@ function AgentDetailsPage({ agentId }) {
         activeTab,
         showMetrics,
         showSchedules,
+        end: activeTab === "metrics" ? /* @__PURE__ */ jsx23(AgentMetricsTimeRangeFilter2, { timeRange: metricsTimeRange, onTimeRangeChange: setMetricsTimeRange }) : null,
         onTabChange: (tab) => updateShareSearch({
           agentId,
           tab,
@@ -1907,36 +1923,32 @@ function AgentDetailsTabs({
   activeTab,
   onTabChange,
   showMetrics = false,
-  showSchedules = false
+  showSchedules = false,
+  end
 }) {
-  return /* @__PURE__ */ jsx24(
-    "div",
-    {
-      role: "tablist",
-      "aria-label": "Agent details",
-      className: "flex shrink-0 gap-1 overflow-x-auto border-b border-border bg-primary-bg px-3",
-      children: tabs.filter((tab) => (tab.id !== "metrics" || showMetrics) && (tab.id !== "schedules" || showSchedules)).map((tab) => /* @__PURE__ */ jsxs15(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          "aria-selected": activeTab === tab.id,
-          "aria-current": activeTab === tab.id ? "page" : void 0,
-          className: cn(
-            "relative flex h-10 shrink-0 cursor-pointer items-center gap-1.5 px-2 text-xs font-medium text-text-secondary",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
-            activeTab === tab.id && "text-primary-button-bg after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-button-bg"
-          ),
-          onClick: () => onTabChange(tab.id),
-          children: [
-            /* @__PURE__ */ jsx24(Icon, { name: tab.icon, className: "size-3.5" }),
-            tab.label
-          ]
-        },
-        tab.id
-      ))
-    }
-  );
+  return /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center border-b border-border bg-primary-bg px-3", children: [
+    /* @__PURE__ */ jsx24("div", { role: "tablist", "aria-label": "Agent details", className: "flex min-w-0 flex-1 gap-1 overflow-x-auto", children: tabs.filter((tab) => (tab.id !== "metrics" || showMetrics) && (tab.id !== "schedules" || showSchedules)).map((tab) => /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": activeTab === tab.id,
+        "aria-current": activeTab === tab.id ? "page" : void 0,
+        className: cn(
+          "relative flex h-10 shrink-0 cursor-pointer items-center gap-1.5 px-2 text-xs font-medium text-text-secondary",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+          activeTab === tab.id && "text-primary-button-bg after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-button-bg"
+        ),
+        onClick: () => onTabChange(tab.id),
+        children: [
+          /* @__PURE__ */ jsx24(Icon, { name: tab.icon, className: "size-3.5" }),
+          tab.label
+        ]
+      },
+      tab.id
+    )) }),
+    end != null ? /* @__PURE__ */ jsx24("div", { className: "ml-auto shrink-0 pl-2", children: end }) : null
+  ] });
 }
 
 // src/atoms/agent-details/AgentDetailsUnavailable.tsx
@@ -2123,17 +2135,24 @@ function AgentMetricStatistics({ meters }) {
           meter: item.meter,
           durationInSeconds: section.durationInSeconds
         });
-        return /* @__PURE__ */ jsxs18("div", { className: "min-w-0 px-3 first:pl-0 last:pr-0", children: [
-          /* @__PURE__ */ jsx28("dt", { className: "truncate text-xs font-medium text-text-secondary", children: item.label }),
-          /* @__PURE__ */ jsx28(
-            "dd",
-            {
-              className: `mt-1 truncate font-semibold tabular-nums ${item.prominent ? "text-xl" : "text-base"} ${item.highlighted ? "text-primary-button-bg" : "text-text-primary"}`,
-              title: value,
-              children: value
-            }
-          )
-        ] }, item.label);
+        return /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: `min-w-0 px-3 first:pl-0 last:pr-0 ${item.prominent ? "" : "text-center"}`,
+            children: [
+              /* @__PURE__ */ jsx28("dt", { className: "truncate text-sm font-medium text-text-secondary", children: item.label }),
+              /* @__PURE__ */ jsx28(
+                "dd",
+                {
+                  className: `truncate font-bold tabular-nums ${item.prominent ? "text-3xl" : "text-base mt-1.5"} ${item.highlighted ? "text-primary-button-bg" : "text-text-primary"}`,
+                  title: value,
+                  children: value
+                }
+              )
+            ]
+          },
+          item.label
+        );
       }) })
     },
     section.ariaLabel
@@ -2146,7 +2165,8 @@ function AgentMetricsView({
   chartsLoading,
   chartsError,
   timeRange,
-  onTimeRangeChange
+  onTimeRangeChange,
+  showTimeRangeFilter = true
 }) {
   const AgentMetricCard2 = useSlot("AgentMetricCard");
   const AgentMetricChart2 = useSlot("AgentMetricChart");
@@ -2158,11 +2178,11 @@ function AgentMetricsView({
   });
   const hasStatistics = meters?.some((meter) => statisticMetricNames.has(meter.name)) ?? false;
   return /* @__PURE__ */ jsxs18("div", { className: "min-h-0 flex-1 overflow-auto bg-secondary-bg/40 p-4", "data-slot": "agent-metrics-view", children: [
-    /* @__PURE__ */ jsx28("div", { className: "mb-4 flex justify-end", children: /* @__PURE__ */ jsx28(AgentMetricsTimeRangeFilter2, { timeRange, onTimeRangeChange }) }),
+    showTimeRangeFilter ? /* @__PURE__ */ jsx28("div", { className: "mb-4 flex justify-end", children: /* @__PURE__ */ jsx28(AgentMetricsTimeRangeFilter2, { timeRange, onTimeRangeChange }) }) : null,
     meterError != null ? /* @__PURE__ */ jsx28("div", { className: "mb-4 rounded-lg border border-failure-bg/30 bg-failure-bg/10 p-3 text-sm text-failure-bg", children: meterError }) : meters == null ? /* @__PURE__ */ jsxs18("div", { className: "mb-4 grid gap-4", "aria-label": "Loading metrics", children: [
       /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx28(Skeleton, { className: "h-20 rounded-lg" }, index)) }),
       /* @__PURE__ */ jsx28("div", { className: "grid gap-4 lg:grid-cols-2", children: Array.from({ length: 2 }, (_, index) => /* @__PURE__ */ jsx28(Skeleton, { className: "h-20 rounded-lg" }, index)) })
-    ] }) : featuredMeters?.length === 0 && !hasStatistics ? /* @__PURE__ */ jsx28("div", { className: "mb-4 rounded-lg border border-border bg-card-bg p-6 text-center text-sm text-text-secondary", children: "No aggregate metrics" }) : /* @__PURE__ */ jsxs18("div", { className: "mb-4 grid gap-4", children: [
+    ] }) : featuredMeters?.length === 0 && !hasStatistics ? /* @__PURE__ */ jsx28("div", { className: "mb-4 rounded-lg border border-border bg-card-bg p-6 text-center text-sm text-text-secondary", children: "No aggregate metrics" }) : /* @__PURE__ */ jsxs18("div", { className: "mb-3 grid gap-3", children: [
       featuredMeters != null && featuredMeters.length > 0 ? /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: featuredMeters.map((meter) => /* @__PURE__ */ jsx28(AgentMetricCard2, { meter }, meter.name)) }) : null,
       hasStatistics ? /* @__PURE__ */ jsx28(AgentMetricStatistics2, { meters }) : null
     ] }),
@@ -2186,7 +2206,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: [
         "(",
@@ -2651,7 +2671,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
   );
 }
@@ -2668,6 +2688,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);
@@ -2677,7 +2719,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);
@@ -2687,20 +2731,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) => {
@@ -2770,7 +2827,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: [
@@ -3223,9 +3280,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(
@@ -3262,7 +3319,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
@@ -3273,14 +3330,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();
@@ -3300,7 +3351,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 })
       ]
     }
@@ -3580,6 +3631,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;
@@ -3683,17 +3735,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",
@@ -3734,6 +3799,7 @@ function AgentLibraryRow({
         AgentOverflowMenu,
         {
           agentName: agent.name,
+          ...storedDescription != null ? { description: storedDescription } : {},
           ...spec != null ? { agentSpec: spec } : {},
           canMutate,
           canUse: canUseAgent,
@@ -3815,11 +3881,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({
@@ -3876,6 +3945,7 @@ function AgentsLibrary({ onSelectAgent }) {
       isCreateAgent: true,
       agentId: libraryAgentId(agent),
       agentName: agent.name,
+      ...agent.description === void 0 ? {} : { description: agent.description },
       agentSpec
     });
   };
@@ -3891,7 +3961,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",
@@ -3900,10 +3970,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,
@@ -3952,8 +4047,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
+        }
+      )
     ] }) }) })
   ] });
 }
@@ -4149,7 +4256,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(
@@ -6193,8 +6300,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
@@ -6274,7 +6383,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",
@@ -8200,7 +8309,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
   ] });
 }
 
@@ -8817,7 +8926,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
@@ -8924,7 +9033,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
   ] });
 }
 
@@ -8954,7 +9063,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-UTDCTNTM.js");
+  return import("./OpenUiFenceBlock-KPZFLUSC.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -9120,15 +9229,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..." })
+      ]
     }
   );
 }
@@ -9432,7 +9545,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(
@@ -9466,22 +9579,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(
@@ -9496,7 +9609,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",
@@ -9540,33 +9653,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" })
             ] })
@@ -9725,7 +9838,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,
@@ -9772,12 +9885,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);
   };
@@ -9794,6 +9909,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);
   };
@@ -9802,11 +9918,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
@@ -9815,10 +9934,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"));
@@ -9829,8 +9950,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",
@@ -9858,11 +9979,12 @@ function SaveAgentButtonContent({
           {
             intent,
             name,
+            description,
             spec: draftSpec,
             saving,
             error,
             onNameChange: setName,
-            onChange: setDraftSpec,
+            onDescriptionChange: setDescription,
             onCancel: close,
             onSave: () => void save()
           }
@@ -9874,14 +9996,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
 }) {
@@ -9890,9 +10014,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",
@@ -9905,6 +10030,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",
         {
@@ -9915,22 +10055,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",
@@ -9949,7 +10089,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" })
         ] })
@@ -9988,12 +10128,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",
@@ -10007,7 +10147,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();
@@ -10015,7 +10155,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",
@@ -10045,7 +10185,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" })
         ] })
@@ -10060,9 +10200,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",
@@ -10071,7 +10211,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" })
@@ -10082,7 +10222,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,
@@ -10104,7 +10244,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",
@@ -10117,7 +10257,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",
@@ -11150,7 +11290,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;
 }
@@ -11174,7 +11314,7 @@ function SyntaxHighlighterImpl({ code, language, darkTheme, className, showLineN
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [code]);
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       className: cn(
@@ -11236,7 +11376,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",
@@ -11252,7 +11392,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"
       ] })
@@ -11272,14 +11412,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,
@@ -11291,13 +11431,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
       ),
@@ -11316,16 +11456,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",
             {
@@ -11433,7 +11573,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 () => {
@@ -11447,7 +11587,7 @@ ${description}`;
     }
   }, [title, description]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     "div",
     {
       role: "alert",
@@ -11465,8 +11605,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",
               {
@@ -11477,7 +11617,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",
                 {
@@ -11534,7 +11674,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 }
@@ -11567,22 +11707,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 })
                 ] }),
@@ -11597,8 +11737,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",
@@ -11632,16 +11772,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",
               {
@@ -11662,7 +11802,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
         ] }) })
@@ -12002,7 +12142,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",
@@ -12074,7 +12214,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 })
           ] }),
@@ -12087,7 +12227,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,
@@ -12150,7 +12290,7 @@ function ToolCallContentBlock({
   } : {
     padding: "0.25rem"
   };
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs82(
     "div",
     {
       className: cn(
@@ -12160,9 +12300,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",
               {
@@ -12214,8 +12354,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" }) })
           ] }),
@@ -12227,7 +12367,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,
@@ -12240,7 +12380,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",
@@ -12262,7 +12402,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(
@@ -12285,7 +12425,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,
@@ -12298,7 +12438,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,
@@ -12329,9 +12469,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",
@@ -12355,10 +12495,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,
@@ -12366,7 +12506,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
           ] }),
@@ -12380,12 +12520,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,
@@ -12432,18 +12572,17 @@ function WelcomeScreen({ heading = "How can I help you today?", icon, className
 // src/containers/AgentMetricsContainer.tsx
 import { useEffect as useEffect23, useState as useState41 } from "react";
 import { jsx as jsx119 } from "react/jsx-runtime";
-var DEFAULT_METRICS_WINDOW_MS = 24 * 60 * 60 * 1e3;
-function AgentMetricsContainer({ agentId }) {
+function AgentMetricsContainer({
+  agentId,
+  timeRange: controlledTimeRange,
+  onTimeRangeChange,
+  showTimeRangeFilter = true
+}) {
   const metricsServer = useAgentMetricsServer();
   const AgentMetricsView2 = useSlot("AgentMetricsView");
-  const [timeRange, setTimeRange] = useState41(() => {
-    const endTs = Date.now();
-    return {
-      startTs: endTs - DEFAULT_METRICS_WINDOW_MS,
-      endTs,
-      timeWindowMs: DEFAULT_METRICS_WINDOW_MS
-    };
-  });
+  const [internalTimeRange, setInternalTimeRange] = useState41(defaultMetricsTimeRange);
+  const timeRange = controlledTimeRange ?? internalTimeRange;
+  const setTimeRange = onTimeRangeChange ?? setInternalTimeRange;
   const [definitions, setDefinitions] = useState41();
   const [chartsError, setChartsError] = useState41();
   const [meters, setMeters] = useState41();
@@ -12525,7 +12664,8 @@ function AgentMetricsContainer({ agentId }) {
       chartsLoading,
       chartsError,
       timeRange,
-      onTimeRangeChange: setTimeRange
+      onTimeRangeChange: setTimeRange,
+      showTimeRangeFilter
     }
   );
 }
@@ -14229,7 +14369,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, {})
@@ -14343,8 +14483,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 }) })
     ] }),
@@ -14372,7 +14512,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,
       {
@@ -14390,28 +14530,28 @@ function SessionTurnSection({
 }
 
 // src/theme/defaultSlots.ts
-var AgentOverview = lazy(() => import("./AgentOverview-RLJ6HZCN.js"));
+var AgentOverview = lazy(() => import("./AgentOverview-UZBCVNMP.js"));
 var AgentSessions = lazy(async () => {
-  const mod = await import("./AgentSessions-UI3L7XY2.js");
+  const mod = await import("./AgentSessions-CD7JAQTC.js");
   return { default: mod.AgentSessions };
 });
 var AgentCodeSnippets = lazy(
-  () => import("./AgentCodeSnippets-U6KQWVBJ.js")
+  () => import("./AgentCodeSnippets-UWKIJI6U.js")
 );
 var SchedulesPage = lazy(async () => {
-  const mod = await import("./SchedulesPage-ARWU7BZF.js");
+  const mod = await import("./SchedulesPage-ZG5IMQI3.js");
   return { default: mod.SchedulesPage };
 });
 var AgentSessionEventTimeline = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimeline-CDXRRUZQ.js");
+  const mod = await import("./AgentSessionEventTimeline-N4RXG2NU.js");
   return { default: mod.AgentSessionEventTimeline };
 });
 var AgentSessionEventTimelineChart = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimelineChart-S2WX6ZEA.js");
+  const mod = await import("./AgentSessionEventTimelineChart-EMWNJMMK.js");
   return { default: mod.AgentSessionEventTimelineChart };
 });
 var AgentMetricChart = lazy(async () => {
-  const mod = await import("./AgentMetricChart-3D6FUFO6.js");
+  const mod = await import("./AgentMetricChart-4ZJJED5Q.js");
   return { default: mod.AgentMetricChart };
 });
 var defaultSlots = {
@@ -14633,6 +14773,9 @@ export {
   getSessionEventLabel,
   getSessionEventTooltipHeading,
   auiInputClass,
+  auiSelectTriggerClass,
+  auiSelectMenuClass,
+  auiSelectOptionClass,
   PopoverSelect,
   AgentSessionsFilters,
   SessionsPage,
@@ -14781,4 +14924,4 @@ export {
   UserMessageContainer,
   defaultSlots
 };
-//# sourceMappingURL=chunk-2OKGEU6X.js.map
+//# sourceMappingURL=chunk-DNOQ4WYH.js.map