@truefoundry/trueforge-ui 0.3.0-rc.1 → 0.3.0-rc.2

package/dist/{chunk-ZTMKFZQ3.js → chunk-YQO2NMJ3.js}

@@ -1,6 +1,6 @@
 import {
   writeOpenSchedulesForAgentSearch
-} from "./chunk-2XPPBEYF.js";
+} from "./chunk-NHHSZB5N.js";
 import {
   DraftCatalogProvider,
   Icon,
@@ -9,14 +9,19 @@ import {
   auiButtonClass,
   getErrorMessage,
   pageHeaderTitleClassName,
+  sidebarButtonRadiusClassName,
+  sidebarRailButtonClassName,
   useCompactLayout,
   useDraftCatalog
-} from "./chunk-XAU7QFG3.js";
+} from "./chunk-H6WTY5PM.js";
 import {
   SESSION_CUSTOM_RANGE_MAX_DAYS,
   SESSION_SHARE_CHANGE_EVENT,
   buildAgentSessionShareUrl,
   defaultSessionTimeRange,
+  isMetricsChromeEnabled,
+  isSchedulesChromeEnabled,
+  isSessionsChromeEnabled,
   libraryAgentId,
   libraryAgentTabFromSearch,
   readSessionShareSearch,
@@ -34,13 +39,13 @@ import {
   useServer,
   useServerCapabilities,
   useShellMode
-} from "./chunk-U7KURWW3.js";
+} from "./chunk-FQK2XVVE.js";
 import {
   useAuiState
 } from "./chunk-M6MHLVSO.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-MPNSO7E6.js";
+} from "./chunk-VJ7BZGAF.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -48,7 +53,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-BWHOZFIV.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -247,12 +252,23 @@ function AgentStepsCard({
 // src/atoms/primitives/Button.tsx
 import React4 from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Button = React4.forwardRef(
-  ({ className, variant = "default", size = "default", ...props }, ref) => {
+var ButtonRoot = React4.forwardRef(
+  ({ className, variant = "primary", size = "large", ...props }, ref) => {
     return /* @__PURE__ */ jsx6("button", { ref, className: auiButtonClass({ variant, size, className }), ...props });
   }
 );
-Button.displayName = "Button";
+ButtonRoot.displayName = "Button";
+function fixedVariant(variant, displayName) {
+  const Fixed = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx6(ButtonRoot, { ref, variant, ...props }));
+  Fixed.displayName = displayName;
+  return Fixed;
+}
+var Button = Object.assign(ButtonRoot, {
+  Primary: fixedVariant("primary", "Button.Primary"),
+  Secondary: fixedVariant("secondary", "Button.Secondary"),
+  Ghost: fixedVariant("ghost", "Button.Ghost"),
+  Destructive: fixedVariant("destructive", "Button.Destructive")
+});
 
 // src/theme/SlotsProvider.tsx
 import { createContext as createContext5, useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -473,7 +489,7 @@ function AskUserPrompt({
               }),
               children: [
                 isMultiQuestion && isLastQuestion && !allQuestionsAnswered ? /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium text-failure-bg", children: "Answer all questions to submit" }) : /* @__PURE__ */ jsx8("span", {}),
-                isNextStep ? /* @__PURE__ */ jsx8(Button, { type: "button", size: "sm", onClick: goToNextQuestion, disabled: isSubmitDisabled, children: "Next" }) : /* @__PURE__ */ jsx8(Button, { type: "button", size: "sm", onClick: onSubmit, disabled: isSubmitAllDisabled, children: "Submit" })
+                isNextStep ? /* @__PURE__ */ jsx8(Button.Primary, { type: "button", size: "small", onClick: goToNextQuestion, disabled: isSubmitDisabled, children: "Next" }) : /* @__PURE__ */ jsx8(Button.Primary, { type: "button", size: "small", onClick: onSubmit, disabled: isSubmitAllDisabled, children: "Submit" })
               ]
             }
           )
@@ -510,12 +526,12 @@ function McpAuthPrompt({
               /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-xs font-semibold text-text-secondary", children: ":" }),
               /* @__PURE__ */ jsx9("span", { className: "truncate font-sans font-medium text-text-primary", children: server.name })
             ] }),
-            /* @__PURE__ */ jsxs5(Button, { size: "sm", disabled: readOnly, onClick: () => onConnect(server.id), className: "shrink-0", children: [
+            /* @__PURE__ */ jsxs5(Button.Primary, { size: "small", disabled: readOnly, onClick: () => onConnect(server.id), className: "shrink-0", children: [
               "Connect",
               /* @__PURE__ */ jsx9(Icon, { name: "external-link", size: "0.75em", className: "ml-1" })
             ] })
           ] }, server.id)),
-          onContinue && /* @__PURE__ */ jsx9("div", { className: "flex justify-end border-t border-border pt-2", children: /* @__PURE__ */ jsx9(Button, { size: "sm", disabled: readOnly, onClick: onContinue, children: "Continue" }) })
+          onContinue && /* @__PURE__ */ jsx9("div", { className: "flex justify-end border-t border-border pt-2", children: /* @__PURE__ */ jsx9(Button.Primary, { size: "small", disabled: readOnly, onClick: onContinue, children: "Continue" }) })
         ] })
       ]
     }
@@ -1183,7 +1199,7 @@ function AgentOverflowMenu({
             type: "button",
             className: auiButtonClass({ variant: "ghost", size: "icon" }),
             "aria-label": `Actions for ${agentName}`,
-            children: /* @__PURE__ */ jsx19(Icon, { name: "ellipsis-vertical", className: "size-4" })
+            children: /* @__PURE__ */ jsx19(Icon, { name: "ellipsis-vertical" })
           }
         ),
         children: [
@@ -1228,8 +1244,8 @@ function AgentOverflowMenu({
         ] })
       ] }) }),
       /* @__PURE__ */ jsxs11(DialogFooter, { children: [
-        /* @__PURE__ */ jsx19(Button, { type: "button", variant: "secondary", disabled: busy, onClick: closePending, children: "Cancel" }),
-        /* @__PURE__ */ jsx19(Button, { type: "button", disabled: busy || builder == null, onClick: () => void handleClone(), children: "Clone" })
+        /* @__PURE__ */ jsx19(Button.Secondary, { type: "button", disabled: busy, onClick: closePending, children: "Cancel" }),
+        /* @__PURE__ */ jsx19(Button.Primary, { type: "button", disabled: busy || builder == null, onClick: () => void handleClone(), children: "Clone" })
       ] })
     ] }) : null,
     pending === "delete" ? /* @__PURE__ */ jsxs11(Dialog, { open: true, onOpenChange: (open) => !open && closePending(), "aria-label": "Delete agent", className: "max-w-md", children: [
@@ -1242,12 +1258,11 @@ function AgentOverflowMenu({
         ] })
       ] }) }),
       /* @__PURE__ */ jsxs11(DialogFooter, { children: [
-        /* @__PURE__ */ jsx19(Button, { type: "button", variant: "secondary", disabled: busy, onClick: closePending, children: "Cancel" }),
+        /* @__PURE__ */ jsx19(Button.Secondary, { type: "button", disabled: busy, onClick: closePending, children: "Cancel" }),
         /* @__PURE__ */ jsx19(
-          Button,
+          Button.Destructive,
           {
             type: "button",
-            variant: "destructive",
             disabled: busy || builder == null || typeof builder.deleteAgent !== "function",
             onClick: () => void handleDelete(),
             children: "Delete"
@@ -1265,7 +1280,7 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
   const scheduleServer = useOptionalScheduleServer();
   const builder = useOptionalServer();
   const canMutate = shell.isComposerEnabled && detail != null && builder != null;
-  const canManageSchedules = scheduleServer != null && detail != null;
+  const canManageSchedules = isSchedulesChromeEnabled({ schedules: scheduleServer }) && detail != null;
   const handleTry = () => {
     if (detail == null) return;
     shell.selectLibraryAgent({
@@ -1310,12 +1325,12 @@ function AgentDetailsHeader({ agentId, detail, onBack }) {
       ] }),
       end: /* @__PURE__ */ jsxs12(Fragment3, { children: [
         /* @__PURE__ */ jsxs12(
-          "button",
+          Button.Primary,
           {
             type: "button",
             "aria-label": "Try agent",
+            size: "large",
             disabled: detail == null,
-            className: auiButtonClass({ variant: "default", size: "sm" }),
             onClick: handleTry,
             children: [
               /* @__PURE__ */ jsx20(Icon, { name: "play", className: "size-3.5" }),
@@ -1383,7 +1398,8 @@ function AgentDetailsPage({ agentId }) {
   const share = useSessionShareSearch();
   const { updateShareSearch } = share;
   const requestedTab = libraryAgentTabFromSearch(share, agentId);
-  const activeTab = requestedTab === "metrics" && metricsServer == null ? "overview" : requestedTab;
+  const showMetrics = isMetricsChromeEnabled({ metrics: metricsServer });
+  const activeTab = requestedTab === "metrics" && !showMetrics ? "overview" : requestedTab;
   const AgentDetailsHeader2 = useSlot("AgentDetailsHeader");
   const AgentDetailsTabs2 = useSlot("AgentDetailsTabs");
   const AgentDetailsUnavailable2 = useSlot("AgentDetailsUnavailable");
@@ -1490,7 +1506,7 @@ function AgentDetailsPage({ agentId }) {
       AgentDetailsTabs2,
       {
         activeTab,
-        showMetrics: metricsServer != null,
+        showMetrics,
         onTabChange: (tab) => updateShareSearch({
           agentId,
           tab,
@@ -1558,7 +1574,7 @@ function AgentDetailsUnavailable({ onBack, reason }) {
       /* @__PURE__ */ jsx24("h2", { className: "text-base font-semibold text-text-primary", children: "Agent details unavailable" }),
       /* @__PURE__ */ jsx24("p", { className: "mt-1 max-w-md text-sm text-text-secondary", children: reason ?? "The agent details could not be loaded. Please try again later." })
     ] }),
-    /* @__PURE__ */ jsxs15("button", { type: "button", className: auiButtonClass({ variant: "outline", size: "sm" }), onClick: onBack, children: [
+    /* @__PURE__ */ jsxs15(Button.Secondary, { type: "button", size: "small", onClick: onBack, children: [
       /* @__PURE__ */ jsx24(Icon, { name: "arrow-left", className: "size-3.5" }),
       "Back to Agents"
     ] })
@@ -1587,11 +1603,25 @@ function formatDurationMs(durationMs) {
   }
   return `${(durationMs / 36e5).toFixed(2)}h`;
 }
+function roundDurationMsToSecond(durationMs) {
+  return Math.max(0, Math.round(durationMs / 1e3) * 1e3);
+}
+function formatReadableDurationMs(durationMs) {
+  const totalSeconds = roundDurationMsToSecond(durationMs) / 1e3;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  return [
+    ...hours > 0 ? [`${hours}h`] : [],
+    ...minutes > 0 ? [`${minutes}m`] : [],
+    ...seconds > 0 || totalSeconds === 0 ? [`${seconds}s`] : []
+  ].join(" ");
+}
 function formatSessionListMetrics(metrics) {
   return [
     `${metrics.totalTurns} turns`,
     ...metrics.totalCostInUsd == null ? [] : [formatCostUsd(metrics.totalCostInUsd)],
-    formatDurationMs(metrics.totalDurationMs)
+    formatReadableDurationMs(metrics.totalDurationMs)
   ].join(" | ");
 }
 
@@ -1915,13 +1945,13 @@ function AgentSessionDetailHeader({
         href: resumeHref,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: auiButtonClass({ variant: "outline", size: "sm" }),
+        className: auiButtonClass({ variant: "secondary", size: "large" }),
         children: [
           resumeLabel,
-          /* @__PURE__ */ jsx30(Icon, { name: "square-arrow-out-up-right", size: "0.875em", className: "shrink-0" })
+          /* @__PURE__ */ jsx30(Icon, { name: "square-arrow-out-up-right", className: "shrink-0" })
         ]
       }
-    ) : resumeLabel != null && onResume != null ? /* @__PURE__ */ jsx30("button", { type: "button", className: auiButtonClass({ variant: "outline", size: "sm" }), onClick: onResume, children: resumeLabel }) : null,
+    ) : resumeLabel != null && onResume != null ? /* @__PURE__ */ jsx30(Button.Secondary, { type: "button", size: "large", onClick: onResume, children: resumeLabel }) : null,
     /* @__PURE__ */ jsx30(
       "button",
       {
@@ -2038,10 +2068,10 @@ var MAIN_THREAD_ID = "main";
 var SESSION_EVENT_TYPES = [
   { id: "system", label: "System", color: "#94a3b8" },
   { id: "user", label: "User", color: "#34d399" },
-  { id: "model", label: "Model", color: "#3b82f6" },
+  { id: "model", label: "Model", color: "#3b82f6", darkColor: "#6366f1" },
   { id: "tool_call", label: "Tool call", color: "#f59e0b" },
   { id: "approval", label: "Approval / HITL", color: "#f472b6" },
-  { id: "sub_agent", label: "Sub-agent", color: "#c084fc" },
+  { id: "sub_agent", label: "Sub-agent", color: "#e2e8f0", darkColor: "#3f3f46" },
   { id: "waiting_on_human", label: "Waiting on human", color: "#22d3ee" },
   { id: "error", label: "Error", color: "#f87171" }
 ];
@@ -2057,13 +2087,15 @@ function formatTimelineDuration(durationMs) {
   if (durationMs < 36e5) return `${Number((durationMs / 6e4).toPrecision(3))}m`;
   return `${Number((durationMs / 36e5).toPrecision(3))}h`;
 }
-function getSessionEventColor(type) {
-  return SESSION_EVENT_TYPES.find((eventType) => eventType.id === type)?.color ?? "#94a3b8";
+function getSessionEventColor(type, isDarkMode = false) {
+  const eventType = SESSION_EVENT_TYPES.find((eventType2) => eventType2.id === type);
+  return (isDarkMode ? eventType?.darkColor : void 0) ?? eventType?.color ?? "#94a3b8";
 }
-function getSessionEventHoverColor(type) {
-  const hex = getSessionEventColor(type).replace("#", "");
+function getSessionEventHoverColor(type, isDarkMode = false) {
+  const color = getSessionEventColor(type, isDarkMode);
+  const hex = color.replace("#", "");
   const normalized = hex.length === 3 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
-  if (normalized.length !== 6) return getSessionEventColor(type);
+  if (normalized.length !== 6) return color;
   const value = Number.parseInt(normalized, 16);
   const channel = (shift) => Math.max(0, Math.round((value >> shift & 255) * 0.9)).toString(16).padStart(2, "0");
   return `#${channel(16)}${channel(8)}${channel(0)}`;
@@ -2187,7 +2219,7 @@ function AgentSessionMetricsStrip({ metrics }) {
       {
         id: "wall-time",
         label: "Duration",
-        value: formatTimelineDuration(metrics.wallTimeMs),
+        value: formatReadableDurationMs(metrics.wallTimeMs),
         tooltip: /* @__PURE__ */ jsx33(SessionMetricTooltipContent, { title: "Where the time went", children: /* @__PURE__ */ jsx33(StackedProportionBar, { data: metrics.timeBreakdown, formatValue: formatTimelineDuration }) })
       }
     ),
@@ -2276,11 +2308,11 @@ function auiInputClass(className) {
 
 // src/atoms/lib/selectClasses.ts
 function auiSelectTriggerClass(className) {
-  return auiInputClass(cn("flex h-9 cursor-pointer items-center justify-between gap-2 pr-2 text-left", className));
+  return auiInputClass(cn("flex h-8 cursor-pointer items-center justify-between gap-2 pr-2 text-left", className));
 }
 function auiSelectPrefixTriggerClass(className) {
   return cn(
-    "inline-flex h-9 w-full cursor-pointer items-center rounded-md border border-border bg-input-box-bg text-left text-sm text-text-primary outline-none",
+    "inline-flex h-8 w-full cursor-pointer items-center rounded-md border border-border bg-input-box-bg text-left text-sm text-text-primary outline-none",
     "focus-visible:ring-2 focus-visible:ring-focus-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
     className
   );
@@ -2665,7 +2697,7 @@ function AgentSessionsFilters({
               {
                 type: "datetime-local",
                 step: "1",
-                className: auiInputClass("h-9"),
+                className: auiInputClass("h-8"),
                 value: fromValue,
                 onChange: (event) => setFromValue(event.target.value)
               }
@@ -2678,7 +2710,7 @@ function AgentSessionsFilters({
               {
                 type: "datetime-local",
                 step: "1",
-                className: auiInputClass("h-9"),
+                className: auiInputClass("h-8"),
                 value: toValue,
                 onChange: (event) => setToValue(event.target.value)
               }
@@ -2688,7 +2720,7 @@ function AgentSessionsFilters({
             "Timezone: ",
             /* @__PURE__ */ jsx35("span", { className: "font-medium text-text-primary", children: formatTimezoneOffsetLabel() })
           ] }),
-          /* @__PURE__ */ jsx35("button", { type: "button", className: auiButtonClass({ className: "mt-auto" }), onClick: applyCustom, children: "Apply" })
+          /* @__PURE__ */ jsx35(Button.Primary, { type: "button", className: "mt-auto", onClick: applyCustom, children: "Apply" })
         ] }) : null,
         /* @__PURE__ */ jsxs25("div", { className: "flex max-h-80 w-44 shrink-0 flex-col overflow-y-auto p-1", role: "listbox", children: [
           showCustomTimeRange ? /* @__PURE__ */ jsxs25(
@@ -2946,7 +2978,7 @@ var SearchInput = ({ query, setQuery, placeholder = "Search" }) => {
         value: query,
         onChange: (e) => setQuery(e.target.value),
         placeholder,
-        className: "border-input-border bg-input-box-bg text-text-primary placeholder:text-text-secondary/70 h-9 w-full rounded-md border py-1 pr-3 pl-8 text-sm outline-none",
+        className: "border-input-border bg-input-box-bg text-text-primary placeholder:text-text-secondary/70 h-8 w-full rounded-md border py-1 pr-3 pl-8 text-sm outline-none",
         autoFocus: true
       }
     )
@@ -2963,29 +2995,50 @@ function Table({ className, containerClassName, ...props }) {
   return /* @__PURE__ */ jsx40("div", { className: cn("w-full overflow-x-auto", containerClassName), children: /* @__PURE__ */ jsx40("table", { className: cn("w-full min-w-full border-collapse bg-primary-bg text-sm", className), ...props }) });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("thead", { className: cn("bg-secondary-bg/60", className), ...props });
+  return /* @__PURE__ */ jsx40("thead", { className: cn("bg-primary-bg", className), ...props });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("tbody", { className: cn(className), ...props });
+  return /* @__PURE__ */ jsx40("tbody", { className: cn("[&>tr:not(:last-child)>td]:after:block", className), ...props });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("tr", { className: cn("border-b border-border last:border-b-0 hover:bg-ghost-button-hover/40", className), ...props });
+  return /* @__PURE__ */ jsx40(
+    "tr",
+    {
+      className: cn(
+        "group/table-row hover:bg-ghost-button-hover/40",
+        "[&_td:first-child_a]:text-text-primary [&_td:first-child_button]:text-text-primary",
+        // `:hover` on the row (not group-hover) so the rule lives on the same element as the target descendants.
+        "hover:[&_td:first-child_a]:underline hover:[&_td:first-child_button]:underline",
+        className
+      ),
+      ...props
+    }
+  );
 }
 function TableHead({ className, ...props }) {
   return /* @__PURE__ */ jsx40(
     "th",
+    {
+      className: cn("text-text-secondary p-3 text-left text-xs font-normal tracking-wide uppercase", className),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx40(
+    "td",
     {
       className: cn(
-        "text-text-secondary border-b border-border px-3 py-2.5 text-left text-xs font-semibold tracking-wide uppercase",
+        "text-text-secondary relative px-3 py-3",
+        // Inset row divider (aligns with cell padding); shown for non-last body rows via TableBody.
+        "after:bg-border after:pointer-events-none after:absolute after:right-0 after:bottom-0 after:left-0 after:hidden after:h-px",
+        "first:after:left-3 last:after:right-3",
         className
       ),
       ...props
     }
   );
 }
-function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("td", { className: cn("text-text-secondary px-3 py-3", className), ...props });
-}
 function TablePagination({
   page,
   pageSize,
@@ -3009,7 +3062,7 @@ function TablePagination({
     "div",
     {
       className: cn(
-        "text-text-secondary flex flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-2 text-sm",
+        "text-text-secondary flex flex-wrap items-center justify-between gap-3 px-3 py-2 text-sm",
         className
       ),
       children: [
@@ -3039,7 +3092,7 @@ function TablePagination({
                 disabled: !canPrev,
                 className: auiButtonClass({ variant: "ghost", size: "icon" }),
                 onClick: () => onPageChange(safePage - 1),
-                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-left", className: "size-4" })
+                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-left" })
               }
             ),
             /* @__PURE__ */ jsxs30("span", { className: "min-w-[4.5rem] text-center tabular-nums", children: [
@@ -3055,7 +3108,7 @@ function TablePagination({
                 disabled: !canNext,
                 className: auiButtonClass({ variant: "ghost", size: "icon" }),
                 onClick: () => onPageChange(safePage + 1),
-                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-right", className: "size-4" })
+                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-right" })
               }
             )
           ] })
@@ -3083,7 +3136,7 @@ function TableTokenPagination({
     "div",
     {
       className: cn(
-        "text-text-secondary flex flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-2 text-sm",
+        "text-text-secondary flex flex-wrap items-center justify-between gap-3 px-3 py-2 text-sm",
         className
       ),
       children: [
@@ -3113,7 +3166,7 @@ function TableTokenPagination({
                 disabled: !canPrev,
                 className: auiButtonClass({ variant: "ghost", size: "icon" }),
                 onClick: onPrev,
-                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-left", className: "size-4" })
+                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-left" })
               }
             ),
             /* @__PURE__ */ jsx40(
@@ -3124,7 +3177,7 @@ function TableTokenPagination({
                 disabled: !canNext,
                 className: auiButtonClass({ variant: "ghost", size: "icon" }),
                 onClick: onNext,
-                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-right", className: "size-4" })
+                children: /* @__PURE__ */ jsx40(Icon, { name: "chevron-right" })
               }
             )
           ] })
@@ -3213,10 +3266,10 @@ function AgentLibraryRow({
         "button",
         {
           type: "button",
-          className: "hover:text-primary-button-bg block max-w-full cursor-pointer truncate text-left hover:underline",
+          className: "block max-w-full cursor-pointer text-left",
           "aria-label": `Open ${agent.name}`,
           onClick: onOpen,
-          children: agent.name
+          children: /* @__PURE__ */ jsx41("span", { className: "block truncate", children: agent.name })
         }
       ) })
     ] }) }),
@@ -3224,7 +3277,7 @@ function AgentLibraryRow({
       modelLabel != null ? /* @__PURE__ */ jsx41(Tooltip, { content: modelTitle, children: /* @__PURE__ */ jsxs31(
         "span",
         {
-          className: "bg-primary-button-bg/10 text-primary-button-bg inline-flex max-w-[10rem] items-center gap-1 truncate rounded-full px-2 py-0.5 text-xs font-medium",
+          className: "bg-secondary-bg text-text-secondary inline-flex max-w-[10rem] items-center gap-1 truncate rounded-full px-2 py-0.5 text-xs font-medium",
           "aria-label": modelTitle,
           children: [
             /* @__PURE__ */ jsx41(Icon, { name: "cpu", className: "size-3.5 shrink-0" }),
@@ -3243,22 +3296,10 @@ function AgentLibraryRow({
     ] }) : /* @__PURE__ */ jsx41("span", { className: "text-text-secondary text-sm", "aria-label": `Configuration unavailable for ${agent.name}`, children: "\u2014" }) }),
     scheduleSummary !== void 0 ? /* @__PURE__ */ jsx41(TableCell, { children: scheduleSummary != null && scheduleSummary.count > 0 ? /* @__PURE__ */ jsx41(AgentSchedulesBadge, { summary: scheduleSummary, agentName: agent.name, onOpen: onOpenSchedules }) : scheduleSummary != null ? /* @__PURE__ */ jsx41(AgentSchedulesEmptyState, { agentName: agent.name, onOpen: onCreateSchedule }) : /* @__PURE__ */ jsx41("span", { className: "text-text-secondary text-sm", "aria-label": `Schedule count unavailable for ${agent.name}`, children: "\u2014" }) }) : null,
     /* @__PURE__ */ jsx41(TableCell, { className: "w-px", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-1.5", children: [
-      /* @__PURE__ */ jsxs31(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Try agent ${agent.name}`,
-          className: auiButtonClass({
-            variant: "outline",
-            size: "sm"
-          }),
-          onClick: onTry,
-          children: [
-            /* @__PURE__ */ jsx41(Icon, { name: "play", className: "size-3.5" }),
-            "Try"
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxs31(Button.Secondary, { type: "button", "aria-label": `Try agent ${agent.name}`, size: "large", onClick: onTry, children: [
+        /* @__PURE__ */ jsx41(Icon, { name: "play", className: "size-3.5" }),
+        "Try"
+      ] }),
       /* @__PURE__ */ jsx41(
         AgentOverflowMenu,
         {
@@ -3318,8 +3359,9 @@ function AgentsLibrary({ onSelectAgent }) {
   const open = shell.libraryOpen;
   const canMutate = shell.isComposerEnabled === true;
   const agentsListEpoch = shell.agentsListEpoch;
-  const showSchedulesColumn = scheduleServer != null;
-  const canManageSchedules = scheduleServer != null;
+  const showSchedulesColumn = isSchedulesChromeEnabled({ schedules: scheduleServer });
+  const canManageSchedules = showSchedulesColumn;
+  const canOpenAgentDetails = isSessionsChromeEnabled({ sessions: sessionsServer });
   useEffect9(() => {
     if (!open) setQuery("");
   }, [open]);
@@ -3429,7 +3471,7 @@ function AgentsLibrary({ onSelectAgent }) {
                 onCreateSchedule: () => openSchedulesForAgent({ agentId: id, isNew: true }),
                 onManageSchedules: () => openSchedulesForAgent({ agentId: id })
               } : {},
-              ...sessionsServer != null && agentId != null ? {
+              ...canOpenAgentDetails && agentId != null ? {
                 onOpen: () => {
                   updateShareSearch({
                     agentId,
@@ -3477,7 +3519,7 @@ function AgentsLibraryButton({ className, compact = false }) {
     };
   }, [enabled, server, agentsListEpoch, compact]);
   if (!enabled) return null;
-  return /* @__PURE__ */ jsx42("div", { className: cn("relative min-w-0 w-full", className), children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx42("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs32(
     "button",
     {
       type: "button",
@@ -3487,14 +3529,15 @@ function AgentsLibraryButton({ className, compact = false }) {
       className: auiButtonClass({
         variant: "ghost",
         className: cn(
-          "rounded-md text-sm font-medium text-text-primary shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
-          compact ? "h-auto w-full flex-col gap-1.5 whitespace-normal px-1 py-3 text-[0.625rem] leading-tight !justify-center" : "h-8 w-full !justify-start px-2.5",
-          libraryOpen && "bg-primary-button-bg text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
+          sidebarButtonRadiusClassName,
+          "font-normal text-sidebar-text shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
+          compact ? sidebarRailButtonClassName : "h-8 w-full !justify-start px-2.5 text-sm",
+          libraryOpen && "bg-primary-button-bg font-medium text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
         )
       }),
       onClick: () => shell?.setLibraryOpen(true),
       children: [
-        /* @__PURE__ */ jsx42(Icon, { name: "library-big", size: compact ? 16 : void 0 }),
+        /* @__PURE__ */ jsx42(Icon, { name: "library-big", size: compact ? 14 : void 0 }),
         compact ? /* @__PURE__ */ jsx42("span", { className: "text-center", children: "Agents" }) : /* @__PURE__ */ jsxs32(Fragment7, { children: [
           /* @__PURE__ */ jsxs32("span", { className: "truncate", children: [
             "Agents",
@@ -3606,7 +3649,7 @@ function AttachmentCard({
         "data-slot": "aui_attachment-preview",
         style: previewSize,
         className: cn(
-          "aui-attachment-preview relative shrink-0 cursor-pointer overflow-hidden rounded-lg border",
+          "aui-attachment-preview relative shrink-0 cursor-pointer overflow-hidden rounded-lg border border-primary-button-bg/20",
           previewRem == null && "size-24",
           className
         ),
@@ -3619,16 +3662,13 @@ function AttachmentCard({
     {
       "data-slot": "aui_attachment-chip",
       style: previewRem != null ? { maxWidth: `${previewRem}rem` } : void 0,
-      className: cn(
-        "aui-attachment-chip bg-secondary-bg flex max-w-full shrink-0 items-center gap-2 rounded-lg border px-2 py-1.5",
-        className
-      ),
+      className: cn("aui-attachment-chip relative size-14 shrink-0", className),
       children: [
-        /* @__PURE__ */ jsx45("div", { className: "bg-primary-bg flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md border", children: isImage && previewSrc ? /* @__PURE__ */ jsxs34(Avatar, { className: "size-7 rounded-none", children: [
-          /* @__PURE__ */ jsx45(AvatarImage, { src: previewSrc, alt: name, className: "object-cover" }),
-          /* @__PURE__ */ jsx45(AvatarFallback, { children: /* @__PURE__ */ jsx45(Icon, { name: "file", size: "1rem", className: "text-text-secondary" }) })
-        ] }) : /* @__PURE__ */ jsx45(Icon, { name: "file", size: "1rem", className: "text-text-secondary" }) }),
-        /* @__PURE__ */ jsx45("span", { className: "text-text-primary min-w-0 truncate text-sm", children: name }),
+        /* @__PURE__ */ jsx45(Tooltip, { content: name, side: "top", triggerClassName: "size-full", children: /* @__PURE__ */ jsx45("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__ */ jsxs34(Avatar, { className: "size-full rounded-none", children: [
+          /* @__PURE__ */ jsx45(AvatarImage, { src: isImage ? previewSrc : void 0, alt: name, className: "object-cover" }),
+          /* @__PURE__ */ jsx45(AvatarFallback, { className: "rounded-none", children: /* @__PURE__ */ jsx45(Icon, { name: "file", size: "1.5rem", className: "text-text-secondary" }) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx45("span", { className: "sr-only", children: name }),
         onRemove && /* @__PURE__ */ jsx45(
           "button",
           {
@@ -3638,10 +3678,13 @@ function AttachmentCard({
             className: auiButtonClass({
               variant: "ghost",
               size: "icon",
-              className: "size-6 shrink-0 rounded-full"
+              className: "aui-attachment-tile-remove absolute inset-e-1 top-1 z-10 size-5 rounded-full bg-black/50 text-white hover:bg-black/70 hover:text-white"
             }),
-            onClick: onRemove,
-            children: /* @__PURE__ */ jsx45(Icon, { name: "xmark" })
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ jsx45(Icon, { name: "xmark", size: "0.75rem" })
           }
         )
       ]
@@ -3857,7 +3900,7 @@ function ClearChatButton() {
     {
       type: "button",
       title: "Clear chat",
-      className: auiButtonClass({ variant: "ghost", size: "sm" }),
+      className: auiButtonClass({ variant: "ghost", size: "large" }),
       onClick: () => shell.clearChat(),
       children: [
         /* @__PURE__ */ jsx49(Icon, { name: "broom", size: "0.875rem" }),
@@ -4017,26 +4060,18 @@ function ComposerRightSection(_) {
 }
 function ComposerSendButton({ canSubmit, isRunning, onSubmit, onCancel }) {
   if (isRunning) {
-    return /* @__PURE__ */ jsxs39(
-      "button",
-      {
-        type: "button",
-        className: auiButtonClass({ size: "sm" }),
-        disabled: !onCancel,
-        onClick: onCancel,
-        "aria-label": "Cancel",
-        children: [
-          /* @__PURE__ */ jsx51(Spinner, { size: 14 }),
-          "Cancel"
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs39(Button.Primary, { type: "button", size: "small", disabled: !onCancel, onClick: onCancel, "aria-label": "Cancel", children: [
+      /* @__PURE__ */ jsx51(Spinner, { size: 14 }),
+      "Cancel"
+    ] });
   }
   return /* @__PURE__ */ jsx51(
-    "button",
+    Button.Primary,
     {
       type: "button",
-      className: auiButtonClass({ size: "icon" }),
+      size: "icon",
+      "data-slot": "aui_composer-send",
+      className: "shadow-none",
       disabled: !canSubmit,
       onClick: onSubmit,
       title: "Send message",
@@ -4589,6 +4624,9 @@ function modelParamSummary(params) {
 function enabledLabel(value, defaultValue) {
   return value ?? defaultValue ? "on" : "off";
 }
+function runtimeConfigValueClassName(value) {
+  return value === "off" ? "text-failure-bg font-medium" : "text-primary-button-bg font-medium";
+}
 function runtimeConfigSummary(config) {
   return [
     { label: "iteration limit", value: String(config?.iterationLimit ?? 100) },
@@ -4642,7 +4680,10 @@ function McpServerChip({
               "flex h-full items-center justify-center border-r border-border px-1.5 transition-colors",
               preload ? "bg-primary-button-bg text-primary-button-text" : "text-text-secondary hover:bg-ghost-button-hover"
             ),
-            onClick: onTogglePreload,
+            onClick: (event) => {
+              event.stopPropagation();
+              onTogglePreload();
+            },
             children: /* @__PURE__ */ jsx56(Icon, { name: "book-open", className: "size-3.5" })
           }
         )
@@ -4660,7 +4701,10 @@ function McpServerChip({
           size: "icon",
           className: "mx-1 size-5"
         }),
-        onClick: onRemove,
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
         children: /* @__PURE__ */ jsx56(Icon, { name: "xmark", className: "size-3" })
       }
     ) : /* @__PURE__ */ jsx56("span", { className: "pr-2" })
@@ -4669,28 +4713,58 @@ function McpServerChip({
 function AgentConfigSection({
   title,
   description,
+  icon,
+  actionIcon = "pencil",
+  actionLabel,
   onEdit,
   children
 }) {
-  return /* @__PURE__ */ jsxs44("section", { className: "border-b border-border px-4 py-4", children: [
-    /* @__PURE__ */ jsxs44("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs44("div", { children: [
-        /* @__PURE__ */ jsx56("h3", { className: "text-text-primary text-sm font-semibold", children: title }),
-        description ? /* @__PURE__ */ jsx56("p", { className: "text-text-secondary mt-0.5 text-xs", children: description }) : null
-      ] }),
-      onEdit ? /* @__PURE__ */ jsx56(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Edit ${title}`,
-          className: auiButtonClass({ variant: "ghost", size: "icon", className: "size-7" }),
-          onClick: onEdit,
-          children: /* @__PURE__ */ jsx56(Icon, { name: "pencil", className: "size-3.5" })
-        }
-      ) : null
-    ] }),
-    children
-  ] });
+  const action = actionLabel ?? `Edit ${title}`;
+  return /* @__PURE__ */ jsxs44(
+    "section",
+    {
+      className: cn("group border-b border-border px-4 py-4", onEdit ? "cursor-pointer" : null),
+      role: onEdit ? "button" : void 0,
+      tabIndex: onEdit ? 0 : void 0,
+      onClick: onEdit,
+      onKeyDown: onEdit ? (event) => {
+        if (event.target !== event.currentTarget) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onEdit();
+      } : void 0,
+      children: [
+        title && /* @__PURE__ */ jsxs44("div", { className: cn("flex items-start justify-between gap-3", children ? "mb-3" : null), children: [
+          /* @__PURE__ */ jsxs44("div", { className: "flex min-w-0 items-start gap-2", children: [
+            icon ? /* @__PURE__ */ jsx56(Icon, { name: icon, className: "text-text-secondary mt-0.5 size-4 shrink-0" }) : null,
+            /* @__PURE__ */ jsxs44("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx56("h3", { className: "text-text-primary text-sm font-semibold", children: title }),
+              description ? /* @__PURE__ */ jsx56("p", { className: "text-text-secondary mt-0.5 text-xs", children: description }) : null
+            ] })
+          ] }),
+          onEdit ? /* @__PURE__ */ jsx56(
+            "button",
+            {
+              type: "button",
+              "aria-label": action,
+              title: action,
+              className: auiButtonClass({
+                variant: "ghost",
+                size: "icon",
+                className: "size-7 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+              }),
+              onClick: (event) => {
+                event.stopPropagation();
+                onEdit();
+              },
+              children: /* @__PURE__ */ jsx56(Icon, { name: actionIcon, className: "size-3.5" })
+            }
+          ) : null
+        ] }),
+        children
+      ]
+    }
+  );
 }
 function AgentConfigPanel({
   spec,
@@ -4732,7 +4806,7 @@ function AgentConfigPanel({
       ) : null
     ] }),
     /* @__PURE__ */ jsxs44("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs44(Section, { title: "Model", children: [
+      /* @__PURE__ */ jsxs44(Section, { children: [
         /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx56(
             ProviderMark,
@@ -4815,56 +4889,45 @@ function AgentConfigPanel({
         {
           title: "Runtime Config",
           description: "Control execution and context behavior.",
+          actionIcon: "sliders",
           onEdit: () => onOpenEditor("runtime"),
           children: /* @__PURE__ */ jsx56("dl", { className: "text-text-secondary flex flex-wrap gap-x-3 gap-y-1 text-xs leading-relaxed", children: runtimeConfig.map((entry) => /* @__PURE__ */ jsxs44("div", { className: "flex gap-1", children: [
             /* @__PURE__ */ jsxs44("dt", { children: [
               entry.label,
               ":"
             ] }),
-            /* @__PURE__ */ jsx56("dd", { className: "text-text-primary font-medium", children: entry.value })
+            /* @__PURE__ */ jsx56("dd", { className: runtimeConfigValueClassName(entry.value), children: entry.value })
           ] }, entry.label)) })
         }
       ),
-      /* @__PURE__ */ jsxs44("section", { className: "group border-b border-border px-4 py-4", children: [
-        /* @__PURE__ */ jsxs44("div", { className: cn("flex items-center justify-between gap-3", mcp.length ? "mb-3" : null), children: [
-          /* @__PURE__ */ jsxs44("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx56(Icon, { name: "mcp-server", className: "text-text-secondary size-4 shrink-0" }),
-            /* @__PURE__ */ jsx56("h3", { className: "text-text-primary text-sm font-semibold", children: "MCP Servers" })
-          ] }),
-          /* @__PURE__ */ jsx56(
-            "button",
+      /* @__PURE__ */ jsx56(
+        Section,
+        {
+          title: "MCP Servers",
+          icon: "mcp-server",
+          actionIcon: "plus",
+          actionLabel: "Add MCP server",
+          onEdit: () => onOpenEditor("mcp"),
+          children: mcp.length ? /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap gap-1.5", children: mcp.map((item) => /* @__PURE__ */ jsx56(
+            McpServerChip,
             {
-              type: "button",
-              "aria-label": "Add MCP server",
-              className: auiButtonClass({
-                variant: "ghost",
-                size: "icon",
-                className: "size-7 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
-              }),
-              onClick: () => onOpenEditor("mcp"),
-              children: /* @__PURE__ */ jsx56(Icon, { name: "plus", className: "size-3.5" })
-            }
-          )
-        ] }),
-        mcp.length ? /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap gap-1.5", children: mcp.map((item) => /* @__PURE__ */ jsx56(
-          McpServerChip,
-          {
-            item,
-            onRemove: onChange ? () => onChange({
-              ...spec,
-              mcpServers: mcp.filter((mount) => mount.id !== item.id).map((mount) => mount.value)
-            }) : void 0,
-            onTogglePreload: onChange ? () => onChange({
-              ...spec,
-              mcpServers: mcp.map(
-                (mount) => mount.id === item.id ? withPreload(mount.value, !preloadFromMount(mount.value)) : mount.value
-              )
-            }) : void 0
-          },
-          item.id
-        )) }) : null
-      ] }),
-      /* @__PURE__ */ jsx56(Section, { title: "Skills", onEdit: () => onOpenEditor("skills"), children: !skillsAvailable ? /* @__PURE__ */ jsx56("p", { className: "text-text-secondary text-xs", children: "Skills require an available sandbox." }) : skills.length ? /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap gap-1.5", children: skills.map((item) => /* @__PURE__ */ jsx56("span", { className: "rounded-md border border-border px-2 py-1 text-xs", children: item.name }, item.id)) }) : /* @__PURE__ */ jsx56("p", { className: "text-text-secondary text-xs", children: "No skills selected." }) })
+              item,
+              onRemove: onChange ? () => onChange({
+                ...spec,
+                mcpServers: mcp.filter((mount) => mount.id !== item.id).map((mount) => mount.value)
+              }) : void 0,
+              onTogglePreload: onChange ? () => onChange({
+                ...spec,
+                mcpServers: mcp.map(
+                  (mount) => mount.id === item.id ? withPreload(mount.value, !preloadFromMount(mount.value)) : mount.value
+                )
+              }) : void 0
+            },
+            item.id
+          )) }) : null
+        }
+      ),
+      /* @__PURE__ */ jsx56(Section, { title: "Skills", actionIcon: "plus", actionLabel: "Add skill", onEdit: () => onOpenEditor("skills"), children: !skillsAvailable ? /* @__PURE__ */ jsx56("p", { className: "text-text-secondary text-xs", children: "Skills require an available sandbox." }) : skills.length ? /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap gap-1.5", children: skills.map((item) => /* @__PURE__ */ jsx56("span", { className: "rounded-md border border-border px-2 py-1 text-xs", children: item.name }, item.id)) }) : /* @__PURE__ */ jsx56("p", { className: "text-text-secondary text-xs", children: "No skills selected." }) })
     ] })
   ] });
 }
@@ -5047,7 +5110,7 @@ function AgentInstructionsDrawer({
       anchor: "right",
       size: "lg",
       "aria-label": "Edit Instructions",
-      footer: /* @__PURE__ */ jsx58("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx58("button", { type: "button", className: auiButtonClass({ variant: "default" }), onClick: save, children: "Save" }) }),
+      footer: /* @__PURE__ */ jsx58("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx58(Button.Primary, { type: "button", onClick: save, children: "Save" }) }),
       children: /* @__PURE__ */ jsxs46("div", { className: "flex min-h-0 flex-1 flex-col gap-6 p-5", children: [
         /* @__PURE__ */ jsxs46("section", { children: [
           /* @__PURE__ */ jsx58("label", { htmlFor: `${fieldId}-instructions`, className: "text-text-primary text-sm font-semibold", children: "Agent instructions" }),
@@ -5070,18 +5133,10 @@ function AgentInstructionsDrawer({
               /* @__PURE__ */ jsx58("h3", { className: "text-text-primary text-sm font-semibold", children: "User Messages" }),
               /* @__PURE__ */ jsx58("p", { className: "text-text-secondary mt-1 text-xs", children: "Add initial messages to every new agent session." })
             ] }),
-            /* @__PURE__ */ jsxs46(
-              "button",
-              {
-                type: "button",
-                className: auiButtonClass({ variant: "outline", size: "sm" }),
-                onClick: addUserMessage,
-                children: [
-                  /* @__PURE__ */ jsx58(Icon, { name: "plus", className: "size-3.5" }),
-                  "Add User Message"
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs46(Button.Secondary, { type: "button", size: "small", onClick: addUserMessage, children: [
+              /* @__PURE__ */ jsx58(Icon, { name: "plus", className: "size-3.5" }),
+              "Add User Message"
+            ] })
           ] }),
           messageDrafts.length > 0 ? /* @__PURE__ */ jsx58("div", { className: "mt-4 flex flex-col gap-4", children: messageDrafts.map((message, index) => {
             const messageId = `${fieldId}-user-message-${message.id}`;
@@ -5211,7 +5266,7 @@ var useMCPAuth = ({ callbackPath } = {}) => {
 
 // src/atoms/lib/useInfiniteScrollSentinel.ts
 import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef9, useState as useState24 } from "react";
-var DEFAULT_ROOT_MARGIN = "3rem";
+var DEFAULT_ROOT_MARGIN = "48px";
 function useInfiniteScrollSentinel({
   enabled,
   hasMore,
@@ -5329,10 +5384,10 @@ function selectedToolsHeaderLabel(mcpMounts) {
 function ConnectNowButton({ connectorId, onConnected }) {
   const { handleAuthorize, isOAuthLoading } = useMCPAuth();
   return /* @__PURE__ */ jsx60(
-    "button",
+    Button.Primary,
     {
       type: "button",
-      className: auiButtonClass({ className: "min-w-44" }),
+      className: "min-w-44",
       disabled: isOAuthLoading,
       onClick: () => {
         void handleAuthorize(connectorId, (isSuccess) => {
@@ -5437,7 +5492,7 @@ function AgentMcpEditorContent({
             value: query,
             onChange: (event) => onQueryChange(event.target.value),
             placeholder: "Search MCP",
-            className: auiInputClass("h-9 w-full pl-7")
+            className: auiInputClass("h-8 w-full pl-7")
           }
         )
       ] }),
@@ -5481,7 +5536,7 @@ function AgentMcpEditorContent({
               "button",
               {
                 type: "button",
-                className: auiButtonClass({ variant: "ghost", size: "sm" }),
+                className: auiButtonClass({ variant: "ghost", size: "small" }),
                 onClick: loadMoreConnectors,
                 children: "Retry loading connectors"
               }
@@ -5500,10 +5555,10 @@ function AgentMcpEditorContent({
         /* @__PURE__ */ jsx60("span", { className: "bg-border h-px flex-1" })
       ] }),
       /* @__PURE__ */ jsx60(
-        "button",
+        Button.Secondary,
         {
           type: "button",
-          className: auiButtonClass({ variant: "outline", className: "min-w-44" }),
+          className: "min-w-44",
           disabled: activeMount !== void 0,
           onClick: connectDuringChat,
           children: "Connect During Chat"
@@ -5554,7 +5609,7 @@ function AgentMcpEditorContent({
             value: toolQuery,
             onChange: (event) => setToolQuery(event.target.value),
             placeholder: "Search Tools",
-            className: auiInputClass("h-9 w-full pl-7")
+            className: auiInputClass("h-8 w-full pl-7")
           }
         )
       ] }),
@@ -5562,15 +5617,7 @@ function AgentMcpEditorContent({
         toolsLoading ? /* @__PURE__ */ jsx60("div", { className: "flex h-full min-h-24 items-center justify-center p-3", "aria-label": "Loading tools", children: /* @__PURE__ */ jsx60(Spinner, { size: 20, className: "text-text-secondary" }) }) : null,
         toolsError ? /* @__PURE__ */ jsxs47("div", { className: "p-3", children: [
           /* @__PURE__ */ jsx60("p", { className: "text-failure-bg text-sm", children: toolsError }),
-          /* @__PURE__ */ jsx60(
-            "button",
-            {
-              type: "button",
-              className: auiButtonClass({ variant: "secondary", size: "sm", className: "mt-2" }),
-              onClick: onRetryTools,
-              children: "Retry"
-            }
-          )
+          /* @__PURE__ */ jsx60(Button.Secondary, { type: "button", size: "small", className: "mt-2", onClick: onRetryTools, children: "Retry" })
         ] }) : null,
         !toolsLoading ? filteredTools.map((tool) => {
           const checked = enabledTools === "all" || enabledTools.includes(tool.name);
@@ -5989,7 +6036,7 @@ function AgentModelSettingsContent({ spec, model, onChange }) {
           value: params.reasoningEffort ?? "",
           disabled: params.reasoningEffort === void 0,
           "aria-label": "Reasoning effort value",
-          className: auiInputClass("mt-2 h-9 cursor-pointer py-1.5"),
+          className: auiInputClass("mt-2 h-8 cursor-pointer py-1.5"),
           onChange: (event) => setParam("reasoningEffort", event.target.value),
           children: reasoningEfforts.map((effort) => /* @__PURE__ */ jsx64("option", { value: effort, children: effort }, effort))
         }
@@ -6019,7 +6066,7 @@ function AgentResourceConfigModal({ editor, onClose, ...contentProps }) {
       className: selectingMcp ? "md:w-[min(64rem,calc(100%-3rem))] md:max-w-5xl" : "md:w-[min(40rem,calc(100%-3rem))] md:max-w-2xl",
       contentSized: true,
       "aria-label": selectingMcp ? "Select MCP Tools" : "Edit skills",
-      footer: selectingMcp ? /* @__PURE__ */ jsx65("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx65("button", { type: "button", className: auiButtonClass(), onClick: onClose, children: "Save" }) }) : void 0,
+      footer: selectingMcp ? /* @__PURE__ */ jsx65("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx65(Button.Primary, { type: "button", onClick: onClose, children: "Save" }) }) : void 0,
       children: editor ? /* @__PURE__ */ jsx65(AgentResourceEditorContent2, { editor, ...contentProps }) : null
     }
   );
@@ -6074,6 +6121,7 @@ function parsePositiveInteger(raw) {
   const parsed = Number(raw);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
 }
+var NO_SANDBOX_PROVIDER_HINT = "No sandbox provider yet, add one in Settings \u2192 Sandbox";
 function AgentRuntimeConfigFields({
   value,
   sandboxAvailable,
@@ -6110,6 +6158,7 @@ function AgentRuntimeConfigFields({
     description: "Provide an isolated environment for code, files, and skills.",
     checked: sandboxEnabled,
     disabled: !sandboxAvailable || hasSkills,
+    disabledTooltip: !sandboxAvailable ? NO_SANDBOX_PROVIDER_HINT : hasSkills ? "Always on while skills are attached \u2014 remove them to turn it off" : void 0,
     update: (enabled) => ({ ...value, sandbox: { ...value.sandbox, enabled } })
   };
   const fileDownloadsField = {
@@ -6140,6 +6189,7 @@ function AgentRuntimeConfigFields({
     description: "Move large tool output to the sandbox and retain a preview.",
     checked: value.contextManagement?.largeToolResponse?.enabled ?? true,
     disabled: !sandboxAvailable,
+    disabledTooltip: !sandboxAvailable ? `Offloading needs a sandbox. ${NO_SANDBOX_PROVIDER_HINT}` : void 0,
     update: (enabled) => ({
       ...value,
       contextManagement: {
@@ -6151,26 +6201,48 @@ function AgentRuntimeConfigFields({
   };
   const runtimeFields = [sandboxField, fileDownloadsField, compactionField, largeToolResponseField];
   const compactionThreshold = value.contextManagement?.compaction?.trigger?.value ?? 5e4;
-  const switchField = (field, className = "") => /* @__PURE__ */ jsxs51("label", { className: className || "flex items-center justify-between gap-3 py-1.5", children: [
-    /* @__PURE__ */ jsxs51("span", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx67("span", { className: "text-text-primary block text-xs font-medium", children: field.label }),
-      layout === "detailed" ? /* @__PURE__ */ jsx67("span", { className: "text-text-secondary mt-0.5 block text-xs leading-snug", children: field.description }) : null
-    ] }),
-    /* @__PURE__ */ jsx67(
-      Switch,
-      {
-        checked: field.checked,
-        disabled: disabled || field.disabled,
-        onCheckedChange: (enabled) => onChange(field.update(enabled)),
-        "aria-label": field.label
-      }
-    )
-  ] }, field.label);
+  const switchField = ({
+    field,
+    className,
+    wrapperClassName
+  }) => /* @__PURE__ */ jsx67(
+    Tooltip,
+    {
+      content: field.disabledTooltip ?? "",
+      triggerClassName: cn("flex w-full min-w-0", wrapperClassName),
+      children: /* @__PURE__ */ jsxs51("label", { className: cn("flex w-full", className ?? "items-center justify-between gap-3 py-1.5"), children: [
+        /* @__PURE__ */ jsxs51("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx67("span", { className: cn("text-text-primary text-xs", layout === "detailed" && "block font-medium"), children: field.label }),
+          layout === "detailed" ? /* @__PURE__ */ jsx67("span", { className: "text-text-secondary mt-0.5 block text-xs leading-snug", children: field.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx67(
+          Switch,
+          {
+            checked: field.checked,
+            disabled: disabled || field.disabled,
+            onCheckedChange: (enabled) => onChange(field.update(enabled)),
+            "aria-label": field.label
+          }
+        )
+      ] })
+    },
+    field.label
+  );
   if (layout === "detailed") {
     return /* @__PURE__ */ jsxs51("div", { className: "space-y-5", children: [
-      showCapabilities ? /* @__PURE__ */ jsx67("div", { className: "grid gap-3 md:grid-cols-3", children: capabilityFields.map(
-        (field) => switchField(field, "flex min-h-24 items-start justify-between gap-3 rounded-lg border border-border p-3")
-      ) }) : null,
+      showCapabilities ? (
+        // Stacked below `md` so the bottom-sheet modal does not cram three labeled switches into one row.
+        /* @__PURE__ */ jsx67("div", { className: "flex flex-col gap-3 md:flex-row", children: capabilityFields.map(
+          (field, index) => switchField({
+            field,
+            className: "items-start justify-between gap-3",
+            wrapperClassName: cn(
+              "flex-1",
+              index < capabilityFields.length - 1 && "border-b border-border pb-3 md:border-b-0 md:border-r md:pb-0 md:pr-3"
+            )
+          })
+        ) })
+      ) : null,
       /* @__PURE__ */ jsxs51("label", { className: "flex items-center justify-between gap-4 border-b border-border py-3", children: [
         /* @__PURE__ */ jsxs51("span", { children: [
           /* @__PURE__ */ jsx67("span", { className: "text-text-primary block text-sm font-medium", children: "Iteration limit" }),
@@ -6194,11 +6266,11 @@ function AgentRuntimeConfigFields({
       ] }),
       /* @__PURE__ */ jsxs51("div", { className: "divide-y divide-border", children: [
         /* @__PURE__ */ jsxs51("section", { className: "py-3", children: [
-          switchField(sandboxField, "flex items-center justify-between gap-4"),
-          /* @__PURE__ */ jsx67("div", { className: `mt-3 border-l-2 border-primary-button-bg/50 pl-3 ${sandboxEnabled ? "" : "opacity-50"}`, children: switchField(fileDownloadsField, "flex items-center justify-between gap-4") })
+          switchField({ field: sandboxField, className: "items-center justify-between gap-4" }),
+          /* @__PURE__ */ jsx67("div", { className: `mt-3 border-l-2 border-primary-button-bg/50 pl-3 ${sandboxEnabled ? "" : "opacity-50"}`, children: switchField({ field: fileDownloadsField, className: "items-center justify-between gap-4" }) })
         ] }),
         /* @__PURE__ */ jsxs51("section", { className: "py-3", children: [
-          switchField(compactionField, "flex items-center justify-between gap-4"),
+          switchField({ field: compactionField, className: "items-center justify-between gap-4" }),
           /* @__PURE__ */ jsxs51(
             "label",
             {
@@ -6238,7 +6310,7 @@ function AgentRuntimeConfigFields({
             }
           )
         ] }),
-        switchField(largeToolResponseField, "flex items-center justify-between gap-4 py-3")
+        switchField({ field: largeToolResponseField, className: "items-center justify-between gap-4 py-3" })
       ] })
     ] });
   }
@@ -6261,18 +6333,7 @@ function AgentRuntimeConfigFields({
         }
       )
     ] }),
-    [...runtimeFields, ...showCapabilities ? capabilityFields : []].map((field) => /* @__PURE__ */ jsxs51("label", { className: "flex items-center justify-between gap-3 py-1.5", children: [
-      /* @__PURE__ */ jsx67("span", { className: "text-text-primary text-xs", children: field.label }),
-      /* @__PURE__ */ jsx67(
-        Switch,
-        {
-          checked: field.checked,
-          disabled: disabled || field.disabled,
-          onCheckedChange: (enabled) => onChange(field.update(enabled)),
-          "aria-label": field.label
-        }
-      )
-    ] }, field.label))
+    [...runtimeFields, ...showCapabilities ? capabilityFields : []].map((field) => switchField({ field }))
   ] });
 }
 
@@ -6343,7 +6404,7 @@ function AgentSkillsEditorContent({
           value: query,
           onChange: (event) => onQueryChange(event.target.value),
           placeholder: "Search skills",
-          className: auiInputClass("h-9 w-full pl-7")
+          className: auiInputClass("h-8 w-full pl-7")
         }
       )
     ] }),
@@ -6654,7 +6715,7 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
         title: "Select reasoning effort",
         className: auiButtonClass({
           variant: "ghost",
-          size: "sm",
+          size: "small",
           className: cn(
             "h-8 max-w-[10rem] gap-1.5 rounded-full px-2 text-xs font-medium",
             "hover:bg-ghost-button-hover"
@@ -6741,6 +6802,8 @@ function Checkbox({ checked }) {
 function CatalogRow({
   title,
   description,
+  logo,
+  fallbackIcon,
   checked,
   disabled = false,
   onToggle,
@@ -6748,7 +6811,14 @@ function CatalogRow({
   action
 }) {
   const content = /* @__PURE__ */ jsxs57(Fragment13, { children: [
-    /* @__PURE__ */ jsx76("span", { className: "bg-secondary-bg text-text-secondary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded text-xs font-semibold", children: title.charAt(0).toUpperCase() }),
+    /* @__PURE__ */ jsx76(
+      "span",
+      {
+        className: "bg-secondary-bg text-text-secondary mt-0.5 flex size-7 shrink-0 items-center justify-center overflow-hidden rounded border border-border text-xs font-semibold",
+        "aria-hidden": true,
+        children: logo ? /* @__PURE__ */ jsx76(CatalogLogo, { src: logo, alt: title, className: "size-4" }) : fallbackIcon ? /* @__PURE__ */ jsx76(Icon, { name: fallbackIcon, className: "text-text-primary size-4" }) : title.charAt(0).toUpperCase()
+      }
+    ),
     /* @__PURE__ */ jsxs57("span", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx76("span", { className: "text-text-primary block truncate text-sm font-medium", children: title }),
       description ? /* @__PURE__ */ jsx76("span", { className: "text-text-secondary line-clamp-1 text-xs", children: description }) : null
@@ -6817,12 +6887,12 @@ function ConnectorConnectButton({
 }) {
   const { handleAuthorize, isOAuthLoading } = useMCPAuth();
   return /* @__PURE__ */ jsx76(
-    "button",
+    Button.Secondary,
     {
       type: "button",
       "aria-label": `Connect ${connector.name}`,
       disabled: isOAuthLoading,
-      className: auiButtonClass({ variant: "secondary", size: "sm" }),
+      size: "small",
       onKeyDown: (event) => {
         event.stopPropagation();
       },
@@ -6873,6 +6943,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
   const {
     skills,
     connectors,
+    connectorLogos,
     connectorsHasMore,
     connectorsLoadMoreFailed,
     connectorsLoadingMore,
@@ -7126,7 +7197,8 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
                 CatalogRow,
                 {
                   title: c.name,
-                  description: c.description,
+                  logo: connectorLogos[c.name],
+                  fallbackIcon: "mcp-server",
                   checked: selectedMcpIds.has(c.id),
                   action: isUnauthenticatedDcrConnector(c) ? /* @__PURE__ */ jsx76(ConnectorConnectButton, { connector: c, onConnected: refreshConnectors }) : void 0,
                   onToggle: () => toggleConnector(c)
@@ -7140,7 +7212,8 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
                 CatalogRow,
                 {
                   title: c.name,
-                  description: c.description,
+                  logo: connectorLogos[c.name],
+                  fallbackIcon: "mcp-server",
                   checked: selectedMcpIds.has(c.id),
                   action: isUnauthenticatedDcrConnector(c) ? /* @__PURE__ */ jsx76(ConnectorConnectButton, { connector: c, onConnected: refreshConnectors }) : void 0,
                   onToggle: () => toggleConnector(c)
@@ -7167,7 +7240,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
                   "button",
                   {
                     type: "button",
-                    className: auiButtonClass({ variant: "ghost", size: "sm" }),
+                    className: auiButtonClass({ variant: "ghost", size: "small" }),
                     onClick: loadMoreConnectors,
                     children: "Retry loading connectors"
                   }
@@ -7227,11 +7300,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
-        className: auiButtonClass({
-          variant: "ghost",
-          size: "sm",
-          className: "h-8 rounded-md px-2 text-xs"
-        }),
+        className: auiButtonClass({ variant: "ghost", size: "icon" }),
         onClick: () => {
           if (open) {
             setOpenAndFlush(false);
@@ -7239,7 +7308,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
           }
           openPicker();
         },
-        children: /* @__PURE__ */ jsx76(Icon, { name: "wrench", className: "size-3.5" })
+        children: /* @__PURE__ */ jsx76(Icon, { name: "wrench" })
       }
     ) }) : null,
     onAttach ? /* @__PURE__ */ jsx76(Tooltip, { content: "Attach a file", children: /* @__PURE__ */ jsx76(
@@ -7355,7 +7424,7 @@ function DraftModelSelector({ disabled, isRunning }) {
         title: "Select model",
         className: auiButtonClass({
           variant: "ghost",
-          size: "sm",
+          size: "small",
           className: cn("h-8 max-w-48 gap-1.5 rounded-full px-2 text-xs font-medium", "hover:bg-ghost-button-hover")
         }),
         onClick: () => setOpen((v) => !v),
@@ -7396,7 +7465,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Fragment as Fragment14, jsx as jsx79 } from "react/jsx-runtime";
 function preloadMarkdownOpenUI() {
-  return import("./OpenUiFenceBlock-2TV5TQ6P.js");
+  return import("./OpenUiFenceBlock-JEPNPJ7U.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -8276,15 +8345,12 @@ function SaveAgentButtonContent({
   if (!visible) return null;
   return /* @__PURE__ */ jsxs61(Fragment16, { children: [
     /* @__PURE__ */ jsxs61(
-      "button",
+      Button.Primary,
       {
         type: "button",
+        size: "large",
         disabled: disabled || builder === null || agentSpec === null,
-        className: auiButtonClass({
-          variant: "default",
-          size: "sm",
-          className
-        }),
+        className,
         onClick: () => void show(),
         children: [
           /* @__PURE__ */ jsx88(Icon, { name: "save", className: "size-3.5" }),
@@ -8380,7 +8446,7 @@ function SaveAgentForm({
             disabled: saving || intent === "update",
             onChange: (event) => onNameChange(event.target.value),
             placeholder: "release-notes",
-            className: auiInputClass("h-9 disabled:opacity-60")
+            className: auiInputClass("h-8 disabled:opacity-60")
           }
         )
       ] }),
@@ -8422,17 +8488,8 @@ function SaveAgentForm({
       ) : null
     ] }),
     /* @__PURE__ */ jsxs62("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__ */ jsx89("button", { type: "button", disabled: saving, className: auiButtonClass({ variant: "secondary" }), onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx89(
-        "button",
-        {
-          type: "button",
-          disabled: saving || !name.trim() || !spec.model.name.trim(),
-          className: auiButtonClass({ variant: "default" }),
-          onClick: onSave,
-          children: saving ? "Saving\u2026" : "Save changes"
-        }
-      )
+      /* @__PURE__ */ jsx89(Button.Secondary, { type: "button", disabled: saving, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx89(Button.Primary, { type: "button", disabled: saving || !name.trim() || !spec.model.name.trim(), onClick: onSave, children: saving ? "Saving\u2026" : "Save changes" })
     ] })
   ] });
 }
@@ -8540,7 +8597,7 @@ function SaveAgentFormFields({
           entry.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsx90("dd", { className: "text-text-primary font-medium", children: entry.value })
+        /* @__PURE__ */ jsx90("dd", { className: runtimeConfigValueClassName(entry.value), children: entry.value })
       ] }, entry.label)) })
     ] }),
     /* @__PURE__ */ jsxs63("div", { className: "mb-3", children: [
@@ -8646,10 +8703,10 @@ import { Fragment as Fragment18, jsx as jsx91, jsxs as jsxs64 } from "react/jsx-
 function SchedulesButton({ className, compact = false }) {
   const shell = useOptionalShellMode();
   const scheduleServer = useOptionalScheduleServer();
-  const enabled = scheduleServer != null && shell != null;
+  const enabled = isSchedulesChromeEnabled({ schedules: scheduleServer }) && shell != null;
   const open = shell?.schedulesOpen === true;
   if (!enabled) return null;
-  return /* @__PURE__ */ jsx91("div", { className: cn("relative min-w-0 w-full", className), children: /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsx91("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs64(
     "button",
     {
       type: "button",
@@ -8659,14 +8716,15 @@ function SchedulesButton({ className, compact = false }) {
       className: auiButtonClass({
         variant: "ghost",
         className: cn(
-          "rounded-md text-sm font-medium text-text-primary shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
-          compact ? "h-auto w-full flex-col gap-1.5 whitespace-normal px-1 py-3 text-[0.625rem] leading-tight !justify-center" : "h-8 w-full !justify-start px-2.5",
-          open && "bg-primary-button-bg text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
+          sidebarButtonRadiusClassName,
+          "font-normal text-sidebar-text shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
+          compact ? sidebarRailButtonClassName : "h-8 w-full !justify-start px-2.5 text-sm",
+          open && "bg-primary-button-bg font-medium text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
         )
       }),
       onClick: () => shell.setSchedulesOpen(!open),
       children: [
-        /* @__PURE__ */ jsx91(Icon, { name: "calendar-clock", size: compact ? 16 : void 0 }),
+        /* @__PURE__ */ jsx91(Icon, { name: "calendar-clock", size: compact ? 14 : void 0 }),
         compact ? /* @__PURE__ */ jsx91("span", { className: "text-center", children: "Schedules" }) : /* @__PURE__ */ jsxs64(Fragment18, { children: [
           /* @__PURE__ */ jsx91("span", { className: "truncate", children: "Schedules" }),
           /* @__PURE__ */ jsx91(Icon, { name: "chevron-right", className: "ml-auto size-3.5 shrink-0 opacity-60" })
@@ -8731,8 +8789,9 @@ function SessionsBrowserButton({ className, compact = false }) {
   const shell = useOptionalShellMode();
   const { updateShareSearch } = useSessionShareSearch();
   const sessionsOpen = shell?.sessionsOpen === true;
-  if (sessionsServer == null || shell == null) return null;
-  return /* @__PURE__ */ jsx94("div", { className: cn("relative min-w-0 w-full", className), children: /* @__PURE__ */ jsxs66(
+  const enabled = isSessionsChromeEnabled({ sessions: sessionsServer }) && shell != null;
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx94("div", { className: cn("relative min-w-0", compact ? "flex justify-center" : "w-full", className), children: /* @__PURE__ */ jsxs66(
     "button",
     {
       type: "button",
@@ -8742,9 +8801,10 @@ function SessionsBrowserButton({ className, compact = false }) {
       className: auiButtonClass({
         variant: "ghost",
         className: cn(
-          "rounded-md text-sm font-medium text-text-primary shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
-          compact ? "h-auto w-full flex-col gap-1.5 whitespace-normal px-1 py-3 text-[0.625rem] leading-tight !justify-center" : "h-8 w-full !justify-start px-2.5",
-          sessionsOpen && "bg-primary-button-bg text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
+          sidebarButtonRadiusClassName,
+          "font-normal text-sidebar-text shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
+          compact ? sidebarRailButtonClassName : "h-8 w-full !justify-start px-2.5 text-sm",
+          sessionsOpen && "bg-primary-button-bg font-medium text-primary-button-text hover:bg-primary-button-hover hover:text-primary-button-text"
         )
       }),
       onClick: () => {
@@ -8760,7 +8820,7 @@ function SessionsBrowserButton({ className, compact = false }) {
         shell.setSessionsOpen(true);
       },
       children: [
-        /* @__PURE__ */ jsx94(Icon, { name: "message-square-text", size: compact ? 16 : void 0 }),
+        /* @__PURE__ */ jsx94(Icon, { name: "message-square-text", size: compact ? 14 : void 0 }),
         compact ? /* @__PURE__ */ jsx94("span", { className: "text-center", children: "Sessions" }) : /* @__PURE__ */ jsxs66(Fragment19, { children: [
           /* @__PURE__ */ jsx94("span", { className: "truncate", children: "Sessions" }),
           /* @__PURE__ */ jsx94(Icon, { name: "chevron-right", className: "ml-auto size-3.5 shrink-0 opacity-60" })
@@ -9959,11 +10019,11 @@ function ThreadListNewButton({ className, children, style, ...rest }) {
     {
       type: "button",
       "aria-label": "Start new chat",
-      style: { borderRadius: "var(--thread-list-item-radius, 0.5rem)", ...style },
+      style: { borderRadius: "var(--thread-list-item-radius, 0.75rem)", ...style },
       className: auiButtonClass({
         variant: "ghost",
         className: cn(
-          "!justify-start h-8 px-2.5 text-sm font-medium text-text-primary shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
+          "!justify-start h-8 px-2.5 text-sm font-normal text-sidebar-text shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text",
           className
         )
       }),
@@ -10013,7 +10073,7 @@ function ThreadListRow({
       "data-slot": "aui_thread-list-item",
       "data-active": active || void 0,
       className: cn(
-        "group flex min-w-0 items-center gap-0.5 rounded-md transition-colors",
+        "group flex min-w-0 items-center gap-0.5 rounded-[0.75rem] 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
       ),
@@ -10023,11 +10083,11 @@ function ThreadListRow({
           {
             type: "button",
             onClick: onSelect,
-            style: { borderRadius: "var(--thread-list-item-radius, 0.5rem)" },
+            style: { borderRadius: "var(--thread-list-item-radius, 0.75rem)" },
             className: auiButtonClass({
               variant: "ghost",
               className: cn(
-                "!justify-start h-auto min-h-8 min-w-0 flex-1 overflow-hidden rounded-md px-2.5 py-1.5 text-left font-normal shadow-none",
+                "!justify-start h-auto min-h-8 min-w-0 flex-1 overflow-hidden rounded-[0.75rem] px-2.5 py-1.5 text-left font-normal shadow-none",
                 "bg-transparent hover:bg-transparent hover:text-inherit",
                 active ? "text-dropdown-selected-item-text" : "text-inherit"
               )
@@ -10258,7 +10318,7 @@ var DEFAULT_DENY_OPTIONS = [
 function optionVariant(option) {
   if (option.variant === "destructive") return "destructive";
   if (option.variant === "secondary") return "secondary";
-  return "default";
+  return "primary";
 }
 function ToolApprovalBar({
   toolName,
@@ -10311,22 +10371,13 @@ function ToolApprovalBar({
                   }
                 )
               ] }),
-              !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsx102(
-                Button,
-                {
-                  size: "sm",
-                  variant: "secondary",
-                  disabled: interactionsLocked,
-                  onClick: () => onDenyOptionChange?.(null),
-                  children: "Back"
-                }
-              )
+              !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsx102(Button.Secondary, { size: "small", disabled: interactionsLocked, onClick: () => onDenyOptionChange?.(null), children: "Back" })
             ] }),
             !isDecided && !readOnly && !selectedDenyOption && /* @__PURE__ */ jsxs73("div", { className: "flex gap-2", children: [
               approveOptions.map((option) => /* @__PURE__ */ jsxs73(
                 Button,
                 {
-                  size: "sm",
+                  size: "small",
                   variant: optionVariant(option),
                   disabled: interactionsLocked,
                   onClick: () => onSelect(option.id),
@@ -10340,7 +10391,7 @@ function ToolApprovalBar({
               denyOptions.map((option) => /* @__PURE__ */ jsx102(
                 Button,
                 {
-                  size: "sm",
+                  size: "small",
                   variant: optionVariant(option),
                   disabled: interactionsLocked,
                   onClick: () => {
@@ -10383,7 +10434,7 @@ function ToolApprovalBar({
                 )
               }
             ),
-            /* @__PURE__ */ jsx102(Button, { size: "sm", disabled: interactionsLocked, onClick: onReasonSubmit, children: "Submit" })
+            /* @__PURE__ */ jsx102(Button.Primary, { size: "small", disabled: interactionsLocked, onClick: onReasonSubmit, children: "Submit" })
           ] }),
           showReasonError && /* @__PURE__ */ jsx102("span", { id: "aui-denial-reason-error", className: "text-xs text-failure-bg", role: "alert", children: "Reason is required" })
         ] }),
@@ -11016,6 +11067,7 @@ function buildSessionMetrics({
 var TIMELINE_TYPE = {
   turn: "turn",
   event: "event",
+  markerGroup: "markerGroup",
   toolCallGroup: "toolCallGroup",
   subAgentGroup: "subAgentGroup"
 };
@@ -11028,6 +11080,58 @@ function getTimelineHoverTargetId(target) {
 function getTimelineRange({ startMs, endMs }) {
   return [startMs, endMs];
 }
+function groupCoincidentTimelineMarkers(segments) {
+  const groupsByTimestamp = /* @__PURE__ */ new Map();
+  for (const segment of segments) {
+    if (!segment.isMarker) continue;
+    const group = groupsByTimestamp.get(segment.startMs);
+    if (group) group.push(segment);
+    else groupsByTimestamp.set(segment.startMs, [segment]);
+  }
+  return Array.from(groupsByTimestamp, ([startMs, group]) => ({
+    id: `marker-group-${group.map((segment) => segment.id).join("-")}`,
+    startMs,
+    endMs: startMs,
+    segments: group
+  })).sort((left, right) => left.startMs - right.startMs);
+}
+function timelineAxisUnit(totalMs) {
+  if (totalMs < 1e3) return { divisorMs: 1, suffix: "ms" };
+  if (totalMs < 6e4) return { divisorMs: 1e3, suffix: "s" };
+  if (totalMs < 36e5) return { divisorMs: 6e4, suffix: "m" };
+  return { divisorMs: 36e5, suffix: "h" };
+}
+function formatTimelineAxisDuration(durationMs) {
+  const unit = timelineAxisUnit(durationMs);
+  return `${Number((durationMs / unit.divisorMs).toFixed(2))}${unit.suffix}`;
+}
+function getCleanAxisStepMs(totalMs) {
+  const { divisorMs } = timelineAxisUnit(totalMs);
+  const target = totalMs / divisorMs / 8;
+  if (divisorMs >= 6e4 && target < 1) return Math.max(0.25, Math.ceil(target * 4) / 4) * divisorMs;
+  const integerTarget = Math.max(1, target);
+  const magnitude = 10 ** Math.floor(Math.log10(integerTarget));
+  const normalized = integerTarget / magnitude;
+  const multiplier = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return multiplier * magnitude * divisorMs;
+}
+function buildTimelineAxisTicks({
+  activeTotalMs,
+  turnStartsMs,
+  turnGapMs
+}) {
+  const stepMs = getCleanAxisStepMs(activeTotalMs);
+  const activeTicks = [];
+  for (let activeMs = 0; activeMs < activeTotalMs; activeMs += stepMs) activeTicks.push(activeMs);
+  const lastRegularTick = activeTicks.at(-1);
+  if (lastRegularTick != null && lastRegularTick > 0 && activeTotalMs - lastRegularTick < stepMs / 4) {
+    activeTicks.pop();
+  }
+  if (activeTicks.at(-1) !== activeTotalMs) activeTicks.push(activeTotalMs);
+  return activeTicks.map((activeMs) => ({
+    value: activeMs + turnStartsMs.slice(1).filter((turnStartMs) => turnStartMs <= activeMs).length * turnGapMs
+  }));
+}
 function getTimelineLayout(segments) {
   const rangesByTurnIndex = /* @__PURE__ */ new Map();
   for (const segment of segments) {
@@ -11159,13 +11263,6 @@ function getActiveTimelineMs(valueMs, gaps) {
   }
   return Math.max(0, activeMs);
 }
-function buildTimelineAxisTicks({
-  ticks,
-  totalMs,
-  timelineMaxMs
-}) {
-  return [...ticks.filter((tick) => tick.value < totalMs), { value: totalMs }, { value: timelineMaxMs }];
-}
 
 // src/utils/toolCallParsing.ts
 import { parse as parsePartialJson } from "partial-json";
@@ -11459,6 +11556,7 @@ function buildSessionTimelineSegments(turns) {
   const approvalRequiredIdsByTurnId = /* @__PURE__ */ new Map();
   const threadDoneEvents = /* @__PURE__ */ new Map();
   const subAgentToolCallIds = /* @__PURE__ */ new Set();
+  const toolCallRequestsByTurnId = /* @__PURE__ */ new Map();
   let latestMs = originMs;
   for (const turn of turns) {
     latestMs = Math.max(latestMs, parseTimestamp(turn.created.createdAt) ?? latestMs);
@@ -11484,6 +11582,16 @@ function buildSessionTimelineSegments(turns) {
         if (toolCallId != null) subAgentToolCallIds.add(toolCallId);
       } else if (event.type === "thread.done") {
         threadDoneEvents.set(eventThreadId(event), event);
+      } else if (event.type === "model.message") {
+        const startedAtMs = parseTimestamp(eventCreatedAt(event));
+        if (startedAtMs == null) continue;
+        const requests = toolCallRequestsByTurnId.get(turn.turnId) ?? /* @__PURE__ */ new Map();
+        for (const toolCall of toolCallsOf(event)) {
+          if (typeof toolCall.id === "string") {
+            requests.set(toolCall.id, { startedAtMs, threadId: eventThreadId(event) });
+          }
+        }
+        toolCallRequestsByTurnId.set(turn.turnId, requests);
       }
     }
   }
@@ -11523,6 +11631,7 @@ function buildSessionTimelineSegments(turns) {
         toolResponsesByTurnId,
         approvalRequiredIdsByTurnId,
         subAgentToolCallIds,
+        toolCallRequestsByTurnId,
         threadDoneEvents,
         segments
       });
@@ -11550,6 +11659,7 @@ function appendEventSegments({
   toolResponsesByTurnId,
   approvalRequiredIdsByTurnId,
   subAgentToolCallIds,
+  toolCallRequestsByTurnId,
   threadDoneEvents,
   segments
 }) {
@@ -11592,6 +11702,20 @@ function appendEventSegments({
       return;
     }
     case "thread.created": {
+      const parentCallId = parentToolCallId(event);
+      const request = parentCallId == null ? void 0 : toolCallRequestsByTurnId.get(turn.turnId)?.get(parentCallId);
+      if (request != null && request.startedAtMs < eventMs) {
+        segments.push({
+          id: `${eventId(event)}-waiting`,
+          type: "system",
+          title: "system.waiting_for_sub_agent",
+          description: "System waiting for sub-agent to start executing",
+          startMs: request.startedAtMs - originMs,
+          endMs: eventMs - originMs,
+          turnIndex,
+          threadId: request.threadId
+        });
+      }
       const doneEvent = threadDoneEvents.get(threadId);
       const doneMs = doneEvent == null ? null : parseTimestamp(eventCreatedAt(doneEvent));
       segments.push({
@@ -12847,24 +12971,24 @@ function SessionTurnSection({
 }
 
 // src/theme/defaultSlots.ts
-var AgentOverview = lazy(() => import("./AgentOverview-EEBHJC32.js"));
+var AgentOverview = lazy(() => import("./AgentOverview-3FJ5EE6N.js"));
 var AgentSessions = lazy(async () => {
-  const mod = await import("./AgentSessions-3MPDZASK.js");
+  const mod = await import("./AgentSessions-T7MOGOTZ.js");
   return { default: mod.AgentSessions };
 });
 var AgentCodeSnippets = lazy(
-  () => import("./AgentCodeSnippets-NZOFJE57.js")
+  () => import("./AgentCodeSnippets-637HQUXD.js")
 );
 var AgentSessionEventTimeline = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimeline-26Z6IB3B.js");
+  const mod = await import("./AgentSessionEventTimeline-VELWUYPR.js");
   return { default: mod.AgentSessionEventTimeline };
 });
 var AgentSessionEventTimelineChart = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimelineChart-CGCU7WBK.js");
+  const mod = await import("./AgentSessionEventTimelineChart-CUKETHWM.js");
   return { default: mod.AgentSessionEventTimelineChart };
 });
 var AgentMetricChart = lazy(async () => {
-  const mod = await import("./AgentMetricChart-JPU3MFQ2.js");
+  const mod = await import("./AgentMetricChart-4FYECRIN.js");
   return { default: mod.AgentMetricChart };
 });
 var defaultSlots = {
@@ -13056,6 +13180,7 @@ export {
   formatTokenCount,
   formatCostUsd,
   formatDurationMs,
+  roundDurationMsToSecond,
   AgentMetricCard,
   AgentMetricsTimeRangeFilter,
   AgentMetricsView,
@@ -13190,13 +13315,15 @@ export {
   TIMELINE_TYPE,
   getTimelineHoverTargetId,
   getTimelineRange,
+  groupCoincidentTimelineMarkers,
+  formatTimelineAxisDuration,
+  buildTimelineAxisTicks,
   getTimelineLayout,
   pickLongestNonOverlappingSegments,
   groupOverlappingToolCalls,
   getSubAgentHoverGroups,
   getSubAgentLanes,
   getActiveTimelineMs,
-  buildTimelineAxisTicks,
   computeAgentStepsSplit,
   AgentStepsContainer,
   AssistantTextContainer,
@@ -13211,4 +13338,4 @@ export {
   UserMessageContainer,
   defaultSlots
 };
-//# sourceMappingURL=chunk-ZTMKFZQ3.js.map
+//# sourceMappingURL=chunk-YQO2NMJ3.js.map