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

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

@@ -3,7 +3,7 @@ import {
   replaceScheduleShareSearch,
   searchAllAgents,
   useSearchAgentsList
-} from "./chunk-E4GVP6PM.js";
+} from "./chunk-3QWUHGNL.js";
 import {
   Icon,
   PageHeader,
@@ -14,11 +14,12 @@ import {
   sidebarRailButtonClassName,
   useCompactLayout,
   useDraftCatalog
-} from "./chunk-MAA7U4RF.js";
+} from "./chunk-IIHJ32YH.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-TAABBM7F.js";
 import {
   useAuiState
 } from "./chunk-M6MHLVSO.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-GTTMLDCI.js";
+} from "./chunk-CFGLAGWH.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -56,7 +57,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-P7J2ABEP.js";
+} from "./chunk-OWDH67NY.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -1771,11 +1772,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 +1859,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 +1886,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 +1919,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 +2131,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 +2161,8 @@ function AgentMetricsView({
   chartsLoading,
   chartsError,
   timeRange,
-  onTimeRangeChange
+  onTimeRangeChange,
+  showTimeRangeFilter = true
 }) {
   const AgentMetricCard2 = useSlot("AgentMetricCard");
   const AgentMetricChart2 = useSlot("AgentMetricChart");
@@ -2158,11 +2174,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
     ] }),
@@ -8954,7 +8970,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-FHEYXZEQ.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -12432,18 +12448,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 +12540,8 @@ function AgentMetricsContainer({ agentId }) {
       chartsLoading,
       chartsError,
       timeRange,
-      onTimeRangeChange: setTimeRange
+      onTimeRangeChange: setTimeRange,
+      showTimeRangeFilter
     }
   );
 }
@@ -14390,28 +14406,28 @@ function SessionTurnSection({
 }
 
 // src/theme/defaultSlots.ts
-var AgentOverview = lazy(() => import("./AgentOverview-RLJ6HZCN.js"));
+var AgentOverview = lazy(() => import("./AgentOverview-NPC4P2EY.js"));
 var AgentSessions = lazy(async () => {
-  const mod = await import("./AgentSessions-UI3L7XY2.js");
+  const mod = await import("./AgentSessions-WHODEG2M.js");
   return { default: mod.AgentSessions };
 });
 var AgentCodeSnippets = lazy(
-  () => import("./AgentCodeSnippets-U6KQWVBJ.js")
+  () => import("./AgentCodeSnippets-V5A56M7R.js")
 );
 var SchedulesPage = lazy(async () => {
-  const mod = await import("./SchedulesPage-ARWU7BZF.js");
+  const mod = await import("./SchedulesPage-JIUWNYUH.js");
   return { default: mod.SchedulesPage };
 });
 var AgentSessionEventTimeline = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimeline-CDXRRUZQ.js");
+  const mod = await import("./AgentSessionEventTimeline-UUXOJXTC.js");
   return { default: mod.AgentSessionEventTimeline };
 });
 var AgentSessionEventTimelineChart = lazy(async () => {
-  const mod = await import("./AgentSessionEventTimelineChart-S2WX6ZEA.js");
+  const mod = await import("./AgentSessionEventTimelineChart-FIAQCYJC.js");
   return { default: mod.AgentSessionEventTimelineChart };
 });
 var AgentMetricChart = lazy(async () => {
-  const mod = await import("./AgentMetricChart-3D6FUFO6.js");
+  const mod = await import("./AgentMetricChart-GEADURES.js");
   return { default: mod.AgentMetricChart };
 });
 var defaultSlots = {
@@ -14781,4 +14797,4 @@ export {
   UserMessageContainer,
   defaultSlots
 };
-//# sourceMappingURL=chunk-2OKGEU6X.js.map
+//# sourceMappingURL=chunk-MMU55KCW.js.map