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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.3.0-rc.2
+
+### Minor Changes
+
+- 04d2ee6: Add a `sidebarText` semantic token for sidebar nav labels, refresh trueforge sidebar colors, set trueforge base `radius` to `0.375rem` (6px), and set sidebar / thread-list control corners to `0.75rem` (12px).
+
+  Expose design-system `Button` (`Button.Primary` / `.Secondary` / `.Ghost` / `.Destructive`). `ButtonVariant` is now `primary | secondary | ghost | destructive` (`default` renamed to `primary`; `outline` removed — use `secondary`). Button sizes are `large` (default) and `small` (`icon` for icon-only).
+
+### Patch Changes
+
+- 2a0ae4c: Show connector catalog logos in the composer Tools picker, matching the Connectors settings page.
+- 2a0ae4c: Align AttachmentCard with assistant-ui's default square thumbnail, filename tooltip, and overlay remove control.
+- fe6a14b: Improve session timelines with sub-agent wait states, grouped point-event markers, clean linear ticks, and readable summary durations.
+- d5b479d: Clamp optional sessions/schedules chrome and unregister `/sessions`, `/schedules`, and `/library/:agentId` when those server ports are omitted, matching the Settings Lego gate.
+- 5d72138: Keep `npx @truefoundry/trueforge` working on native Windows: import Kysely migrations with `pathToFileURL`, and keep sandbox guest paths POSIX. Source development stays Unix/WSL; CI also runs unit and SQLite store tests on Windows.
+- Updated dependencies [a000b47]
+- Updated dependencies [0ec8dc6]
+- Updated dependencies [11865b4]
+  - @truefoundry/trueforge-sdk@0.1.4-rc.2
+
 ## 0.3.0-rc.1
 
 ### Minor Changes

package/README.md

@@ -550,6 +550,7 @@ type AgentUIServer = AgentChatServer &
     catalog?: CatalogServer;
     sessions?: AgentSessionsServer;
     metrics?: AgentMetricsServer;
+    schedules?: ScheduleServer;
   };
 ```
 
@@ -557,8 +558,14 @@ type AgentUIServer = AgentChatServer &
 | -------------------- | ------------------------------------------------------------------- |
 | `AgentChatServer`    | Sessions, turns, streaming, draft `AgentSpec` sync                  |
 | `AgentBuilderServer` | `getModels` / `getSkills` / `getMcp` / `searchAgents` / `saveAgent` |
+| `catalog`            | Settings CRUD (models / connectors / optional skills & sandbox)     |
+| `sessions`           | Agent details + sessions browser (`/sessions`, `/library/:agentId`) |
+| `schedules`          | Schedules page (`/schedules`)                                       |
 | `AgentMetricsServer` | Agent meter aggregates, chart definitions, and chart data           |
 
+Omit an optional port to hide its chrome and unregister its routes (same gate as the
+Settings button for `catalog`).
+
 **Zero-config TrueFoundry** — see [Getting started](#getting-started). The SDK calls `createTrueFoundryAgentUIServer` for you.
 
 **Zero-config TrueForge (Harness)** — see [Getting started](#getting-started).

package/dist/{AgentCodeSnippets-NZOFJE57.js → AgentCodeSnippets-637HQUXD.js}

@@ -1,17 +1,17 @@
 "use client";
 import {
   useSlot
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
 import {
   Icon
-} from "./chunk-XAU7QFG3.js";
-import "./chunk-U7KURWW3.js";
+} from "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
+import "./chunk-VJ7BZGAF.js";
 import {
   cn
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-BWHOZFIV.js";
 
 // src/atoms/agent-details/AgentCodeSnippets.tsx
 import { useEffect, useState } from "react";
@@ -71,4 +71,4 @@ function AgentCodeSnippets({ snippets }) {
 export {
   AgentCodeSnippets as default
 };
-//# sourceMappingURL=AgentCodeSnippets-NZOFJE57.js.map
+//# sourceMappingURL=AgentCodeSnippets-637HQUXD.js.map

package/dist/AgentMetricChart-4FYECRIN.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  AgentMetricChart
+} from "./chunk-5I2COQNL.js";
+import "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
+export {
+  AgentMetricChart
+};
+//# sourceMappingURL=AgentMetricChart-4FYECRIN.js.map

package/dist/{AgentOverview-EEBHJC32.js → AgentOverview-3FJ5EE6N.js}

@@ -1,17 +1,17 @@
 "use client";
 import {
   useSlot
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
 import {
   Icon
-} from "./chunk-XAU7QFG3.js";
-import "./chunk-U7KURWW3.js";
+} from "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
+import "./chunk-VJ7BZGAF.js";
 import {
   cn
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-BWHOZFIV.js";
 
 // src/atoms/agent-details/AgentOverview.tsx
 import { useState } from "react";
@@ -164,4 +164,4 @@ function AgentOverview({ detail }) {
 export {
   AgentOverview as default
 };
-//# sourceMappingURL=AgentOverview-EEBHJC32.js.map
+//# sourceMappingURL=AgentOverview-3FJ5EE6N.js.map

package/dist/{AgentSessionEventTimeline-26Z6IB3B.js → AgentSessionEventTimeline-VELWUYPR.js}

@@ -1,22 +1,25 @@
 "use client";
 import {
   SESSION_EVENT_TYPES,
-  useSlot
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
-import "./chunk-XAU7QFG3.js";
-import "./chunk-U7KURWW3.js";
+  getSessionEventColor,
+  useSlot,
+  useThemeMode
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
+import "./chunk-VJ7BZGAF.js";
 import {
   cn
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-BWHOZFIV.js";
 
 // src/atoms/agent-details/AgentSessionEventTimeline.tsx
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
   const AgentSessionEventTimelineChart = useSlot("AgentSessionEventTimelineChart");
+  const isDark = useThemeMode() === "dark";
   const [hiddenTypes, setHiddenTypes] = useState(() => /* @__PURE__ */ new Set());
   const availableEventTypes = useMemo(() => {
     const available = new Set(segments.map((segment) => segment.type));
@@ -52,7 +55,13 @@ function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
                 ),
                 onClick: () => handleToggleType(eventType.id),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: eventType.color } }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-2 rounded-sm",
+                      style: { backgroundColor: getSessionEventColor(eventType.id, isDark) }
+                    }
+                  ),
                   eventType.label
                 ]
               },
@@ -76,4 +85,4 @@ function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
 export {
   AgentSessionEventTimeline
 };
-//# sourceMappingURL=AgentSessionEventTimeline-26Z6IB3B.js.map
+//# sourceMappingURL=AgentSessionEventTimeline-VELWUYPR.js.map

package/dist/AgentSessionEventTimeline-VELWUYPR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentSessionEventTimeline.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState, type ComponentType } from 'react';\n\nimport { useSlot, useThemeMode } from '../../theme/SlotsProvider.js';\nimport { getSessionEventColor, SESSION_EVENT_TYPES, type SessionEventType } from '../../utils/sessionEventTimeline.js';\nimport { cn } from '../lib/cn.js';\nimport type { AgentSessionEventTimelineProps } from './types.js';\n\nexport function AgentSessionEventTimeline({ turns, segments, onSelectTurn }: AgentSessionEventTimelineProps) {\n  const AgentSessionEventTimelineChart = useSlot('AgentSessionEventTimelineChart');\n  const isDark = useThemeMode() === 'dark';\n  const [hiddenTypes, setHiddenTypes] = useState<Set<SessionEventType>>(() => new Set());\n\n  const availableEventTypes = useMemo(() => {\n    const available = new Set(segments.map(segment => segment.type));\n    return SESSION_EVENT_TYPES.filter(eventType => available.has(eventType.id));\n  }, [segments]);\n\n  const handleToggleType = useCallback((type: SessionEventType) => {\n    setHiddenTypes(previous => {\n      const next = new Set(previous);\n      if (next.has(type)) next.delete(type);\n      else next.add(type);\n      return next;\n    });\n  }, []);\n\n  if (segments.length === 0) return null;\n\n  return (\n    <div className=\"w-full\" data-slot=\"agent-session-event-timeline\">\n      <div\n        className=\"flex flex-wrap items-center gap-2 border-b border-border px-3 py-2\"\n        data-slot=\"agent-session-event-types\"\n      >\n        <span className=\"text-xs font-medium uppercase text-text-secondary\">Event types</span>\n        <div className=\"flex flex-wrap items-center gap-1\">\n          {availableEventTypes.map(eventType => {\n            const isVisible = !hiddenTypes.has(eventType.id);\n            return (\n              <button\n                key={eventType.id}\n                type=\"button\"\n                aria-pressed={isVisible}\n                className={cn(\n                  'flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',\n                  isVisible ? 'border-border text-text-primary' : 'border-transparent text-text-secondary opacity-80',\n                )}\n                onClick={() => handleToggleType(eventType.id)}\n              >\n                <span\n                  className=\"size-2 rounded-sm\"\n                  style={{ backgroundColor: getSessionEventColor(eventType.id, isDark) }}\n                />\n                {eventType.label}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"w-full py-2\">\n        <AgentSessionEventTimelineChart\n          turns={turns}\n          segments={segments}\n          hiddenTypes={hiddenTypes}\n          onSelectTurn={onSelectTurn}\n        />\n      </div>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentSessionEventTimeline: ComponentType<AgentSessionEventTimelineProps>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,SAAS,aAAa,SAAS,gBAAoC;AAkC3D,cAKM,YALN;AA3BD,SAAS,0BAA0B,EAAE,OAAO,UAAU,aAAa,GAAmC;AAC3G,QAAM,iCAAiC,QAAQ,gCAAgC;AAC/E,QAAM,SAAS,aAAa,MAAM;AAClC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,MAAM,oBAAI,IAAI,CAAC;AAErF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,YAAY,IAAI,IAAI,SAAS,IAAI,aAAW,QAAQ,IAAI,CAAC;AAC/D,WAAO,oBAAoB,OAAO,eAAa,UAAU,IAAI,UAAU,EAAE,CAAC;AAAA,EAC5E,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAAmB,YAAY,CAAC,SAA2B;AAC/D,mBAAe,cAAY;AACzB,YAAM,OAAO,IAAI,IAAI,QAAQ;AAC7B,UAAI,KAAK,IAAI,IAAI,EAAG,MAAK,OAAO,IAAI;AAAA,UAC/B,MAAK,IAAI,IAAI;AAClB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,SACE,qBAAC,SAAI,WAAU,UAAS,aAAU,gCAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,qDAAoD,yBAAW;AAAA,UAC/E,oBAAC,SAAI,WAAU,qCACZ,8BAAoB,IAAI,eAAa;AACpC,kBAAM,YAAY,CAAC,YAAY,IAAI,UAAU,EAAE;AAC/C,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,oCAAoC;AAAA,gBAClD;AAAA,gBACA,SAAS,MAAM,iBAAiB,UAAU,EAAE;AAAA,gBAE5C;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,iBAAiB,qBAAqB,UAAU,IAAI,MAAM,EAAE;AAAA;AAAA,kBACvE;AAAA,kBACC,UAAU;AAAA;AAAA;AAAA,cAbN,UAAU;AAAA,YAcjB;AAAA,UAEJ,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/{AgentSessionEventTimelineChart-CGCU7WBK.js → AgentSessionEventTimelineChart-CUKETHWM.js}

@@ -7,6 +7,7 @@ import {
   buildTimelineAxisTicks,
   formatCostUsd,
   formatDurationMs,
+  formatTimelineAxisDuration,
   formatTimelineDuration,
   formatTokenCount,
   getActiveTimelineMs,
@@ -19,26 +20,31 @@ import {
   getTimelineHoverTargetId,
   getTimelineLayout,
   getTimelineRange,
+  groupCoincidentTimelineMarkers,
   groupOverlappingToolCalls,
   pickLongestNonOverlappingSegments,
+  roundDurationMsToSecond,
   useThemeMode
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
-import "./chunk-XAU7QFG3.js";
-import "./chunk-U7KURWW3.js";
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
-import "./chunk-7Z2C2K7F.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
 
 // src/atoms/agent-details/AgentSessionEventTimelineChart.tsx
 import {
+  BarController,
   BarElement,
   Chart as ChartJS,
   LinearScale,
+  PointElement,
+  ScatterController,
   Tooltip
 } from "chart.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Bar } from "react-chartjs-2";
+import { Chart } from "react-chartjs-2";
 
 // src/atoms/agent-details/AgentSessionTimelineTooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -70,6 +76,7 @@ function SessionTurnTooltip({
   durationMs,
   segments
 }) {
+  const isDark = useThemeMode() === "dark";
   return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-72 max-w-full overflow-auto text-xs text-text-primary", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsx("span", { className: "font-semibold", children: `Turn ${turnNumber}` }),
@@ -86,7 +93,7 @@ function SessionTurnTooltip({
           "span",
           {
             className: "size-1.5 shrink-0 rounded-full",
-            style: { backgroundColor: getSessionEventColor(segment.type) }
+            style: { backgroundColor: getSessionEventColor(segment.type, isDark) }
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
@@ -107,6 +114,27 @@ function SessionToolCallGroupTooltip({ group }) {
     ] }, segment.id)) })
   ] });
 }
+function SessionMarkerGroupTooltip({ group }) {
+  const isDark = useThemeMode() === "dark";
+  const singleSegment = group.segments.length === 1 ? group.segments[0] : void 0;
+  if (singleSegment != null) return /* @__PURE__ */ jsx(SessionEventTooltip, { segment: singleSegment });
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-80 max-w-full overflow-auto text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-text-secondary", children: "Events" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border pt-1.5", children: group.segments.map((segment) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 py-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "mt-1 size-1.5 shrink-0 rounded-full",
+          style: { backgroundColor: getSessionEventColor(segment.type, isDark) }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-text-secondary", children: getSessionEventTooltipHeading(segment.type) }),
+        /* @__PURE__ */ jsx("div", { className: "wrap-break-word font-medium text-text-primary", children: segment.description.trim() || segment.title })
+      ] })
+    ] }, segment.id)) })
+  ] });
+}
 function SessionSubAgentGroupTooltip({ group }) {
   return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-80 max-w-full overflow-auto text-xs", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
@@ -114,29 +142,30 @@ function SessionSubAgentGroupTooltip({ group }) {
       /* @__PURE__ */ jsx("span", { className: "tabular-nums text-text-secondary", children: formatTimelineDuration(group.endMs - group.startMs) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border pt-1.5", children: group.segments.map((segment, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-text-primary", children: `Sub-agent ${index + 1}: ${segment.description || segment.title}` }),
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) })
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-text-primary", children: group.segments.length === 1 ? segment.description || segment.title : `Sub-agent ${index + 1}: ${segment.description || segment.title}` }),
+      group.segments.length === 1 ? null : /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) })
     ] }, segment.id)) })
   ] });
 }
 
 // src/atoms/agent-details/AgentSessionEventTimelineChart.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-ChartJS.register(LinearScale, BarElement, Tooltip);
+ChartJS.register(BarController, BarElement, LinearScale, PointElement, ScatterController, Tooltip);
 var MARKER_PX = 4;
 var TURN_GAP_PX = 12;
 var END_PAD_PX = 12;
 var BAR_RADIUS_PX = 2;
 var ROW_GAP_PX = 8;
+var MARKER_EVENT_GAP_PX = 2;
 var OVERHEAD_PX = 30;
-function rowCenters(heights, gap) {
+function rowCenters({ heights, gaps }) {
   const centers = [];
   let offset = 0;
-  for (const height of heights) {
+  heights.forEach((height, index) => {
     centers.push(offset + height / 2);
-    offset += height + gap;
-  }
-  return { centers, band: Math.max(0, offset - gap) };
+    offset += height + (gaps[index] ?? 0);
+  });
+  return { centers, band: offset };
 }
 function eventOrder(type) {
   if (type === "sub_agent") return 0;
@@ -159,8 +188,8 @@ function AgentSessionEventTimelineChart({
   const isDark = mode === "dark";
   const axis = isDark ? "#8c8c92" : "#71717a";
   const grid = isDark ? "#27272a" : "#e4e4e7";
-  const turnFill = isDark ? "#3f3f46" : "#e4e4e7";
-  const turnHover = isDark ? "#52525b" : "#d4d4d8";
+  const turnFill = isDark ? "#3f3f46" : "#E0ECFD";
+  const turnHover = isDark ? "#52525b" : "#E0ECFD";
   const wrapperRef = useRef(null);
   const [widthPx, setWidthPx] = useState(0);
   const [overheadPx, setOverheadPx] = useState(OVERHEAD_PX);
@@ -199,17 +228,22 @@ function AgentSessionEventTimelineChart({
       window.removeEventListener("resize", refreshTooltipAnchor);
     };
   }, [refreshTooltipAnchor, tooltipTarget]);
-  const activeTotalMs = Math.max(1, ...segments.map((segment) => segment.endMs));
+  const segmentTotalMs = Math.max(0, ...segments.map((segment) => segment.endMs));
+  const activeTotalMs = Math.max(1, roundDurationMsToSecond(segmentTotalMs));
   const { turnStartsMs, turnOrdinals, turnRanges } = useMemo(() => getTimelineLayout(segments), [segments]);
-  const gapCount = Math.max(0, turnStartsMs.length - 1);
+  const activeTurnStartsMs = useMemo(
+    () => turnStartsMs.filter((startMs, index) => index === 0 || startMs <= activeTotalMs),
+    [activeTotalMs, turnStartsMs]
+  );
+  const gapCount = Math.max(0, activeTurnStartsMs.length - 1);
   const scaleWidthPx = Math.max(widthPx / 2, widthPx - TURN_GAP_PX * gapCount - END_PAD_PX);
   const msPerPx = activeTotalMs / Math.max(1, scaleWidthPx);
   const turnGapMs = TURN_GAP_PX * msPerPx;
   const totalMs = activeTotalMs + gapCount * turnGapMs;
   const timelineMaxMs = totalMs + END_PAD_PX * msPerPx;
   const timelineGaps = useMemo(
-    () => turnStartsMs.slice(1).map((startMs, index) => ({ startMs: startMs + index * turnGapMs, endMs: startMs + (index + 1) * turnGapMs })),
-    [turnGapMs, turnStartsMs]
+    () => activeTurnStartsMs.slice(1).map((startMs, index) => ({ startMs: startMs + index * turnGapMs, endMs: startMs + (index + 1) * turnGapMs })),
+    [activeTurnStartsMs, turnGapMs]
   );
   const visibleSegments = useMemo(
     () => segments.flatMap((segment) => {
@@ -219,6 +253,8 @@ function AgentSessionEventTimelineChart({
     }),
     [hiddenTypes, segments, turnGapMs, turnOrdinals]
   );
+  const markerGroups = useMemo(() => groupCoincidentTimelineMarkers(visibleSegments), [visibleSegments]);
+  const durationSegments = useMemo(() => visibleSegments.filter((segment) => !segment.isMarker), [visibleSegments]);
   const turnBars = useMemo(
     () => turnRanges.length < 2 ? [] : turnRanges.map((range) => ({
       ...range,
@@ -230,8 +266,8 @@ function AgentSessionEventTimelineChart({
     [msPerPx, turnGapMs, turnRanges]
   );
   const subAgentSegments = useMemo(
-    () => visibleSegments.filter((segment) => segment.type === "sub_agent"),
-    [visibleSegments]
+    () => durationSegments.filter((segment) => segment.type === "sub_agent"),
+    [durationSegments]
   );
   const mainSubAgents = useMemo(() => pickLongestNonOverlappingSegments(subAgentSegments), [subAgentSegments]);
   const subAgentGroups = useMemo(
@@ -239,15 +275,15 @@ function AgentSessionEventTimelineChart({
     [mainSubAgents, subAgentSegments]
   );
   const subAgentLanes = useMemo(
-    () => getSubAgentLanes({ subAgentSegments, threadSegments: visibleSegments, minWidthMs: MARKER_PX * msPerPx }),
-    [msPerPx, subAgentSegments, visibleSegments]
+    () => getSubAgentLanes({ subAgentSegments, threadSegments: durationSegments, minWidthMs: MARKER_PX * msPerPx }),
+    [durationSegments, msPerPx, subAgentSegments]
   );
   const mainCandidates = useMemo(() => {
     const kept = new Set(mainSubAgents.map((segment) => segment.id));
-    return visibleSegments.filter(
+    return durationSegments.filter(
       (segment) => segment.threadId === MAIN_THREAD_ID || segment.type === "sub_agent" && kept.has(segment.id)
     );
-  }, [mainSubAgents, visibleSegments]);
+  }, [durationSegments, mainSubAgents]);
   const toolCallGroups = useMemo(
     () => groupOverlappingToolCalls(mainCandidates.filter((segment) => segment.type === "tool_call")).filter(
       (group) => group.segments.length > 1
@@ -264,14 +300,20 @@ function AgentSessionEventTimelineChart({
   );
   const laneCount = subAgentLanes.reduce((count, lane) => Math.max(count, lane.lane + 1), 0);
   const hasTurnRow = turnBars.length > 0;
-  const eventRow = hasTurnRow ? 1 : 0;
-  const { centers, band } = useMemo(
-    () => rowCenters([...hasTurnRow ? [16] : [], 28, ...Array.from({ length: laneCount }, () => 12)], ROW_GAP_PX),
-    [hasTurnRow, laneCount]
-  );
+  const markerRow = hasTurnRow ? 1 : 0;
+  const eventRow = markerRow + 1;
+  const { centers, band } = useMemo(() => {
+    const heights = [...hasTurnRow ? [16] : [], 10, 28, ...Array.from({ length: laneCount }, () => 12)];
+    const gaps = heights.map((_, index) => {
+      if (index === heights.length - 1) return 0;
+      return index === markerRow ? MARKER_EVENT_GAP_PX : ROW_GAP_PX;
+    });
+    return rowCenters({ heights, gaps });
+  }, [hasTurnRow, laneCount, markerRow]);
   const chartTargets = useMemo(
     () => [
       ...turnBars.map((bar) => ({ type: TIMELINE_TYPE.turn, bar })),
+      ...markerGroups.map((group) => ({ type: TIMELINE_TYPE.markerGroup, group })),
       ...subAgentLanes.flatMap(
         (lane) => lane.segments.map((segment) => ({ type: TIMELINE_TYPE.event, segment }))
       ),
@@ -282,7 +324,7 @@ function AgentSessionEventTimelineChart({
       }),
       ...toolCallGroups.map((group) => ({ type: TIMELINE_TYPE.toolCallGroup, group }))
     ],
-    [mainEventSegments, subAgentGroups, subAgentLanes, toolCallGroups, turnBars]
+    [mainEventSegments, markerGroups, subAgentGroups, subAgentLanes, toolCallGroups, turnBars]
   );
   const barDataset = ({
     label,
@@ -321,14 +363,31 @@ function AgentSessionEventTimelineChart({
             thickness: 16
           })
         ),
+        ...markerGroups.map((group) => {
+          const type = group.segments.length === 1 ? group.segments[0]?.type : "system";
+          const color = getSessionEventColor(type ?? "system", isDark);
+          return {
+            type: "scatter",
+            label: group.segments.map((segment) => getSessionEventLabel(segment.type)).join(", "),
+            data: [{ x: group.startMs, y: centers[markerRow] ?? 0 }],
+            pointStyle: "rectRot",
+            pointRadius: 5,
+            pointHoverRadius: 6,
+            clip: false,
+            backgroundColor: color,
+            hoverBackgroundColor: getSessionEventHoverColor(type ?? "system", isDark),
+            borderWidth: 0,
+            order: 0
+          };
+        }),
         ...subAgentLanes.flatMap(
           (lane) => lane.segments.map(
             (segment) => barDataset({
               label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,
               range: segment,
               y: centers[eventRow + 1 + lane.lane] ?? 0,
-              color: getSessionEventColor(segment.type),
-              hover: getSessionEventHoverColor(segment.type),
+              color: getSessionEventColor(segment.type, isDark),
+              hover: getSessionEventHoverColor(segment.type, isDark),
               thickness: 12,
               order: eventOrder(segment.type),
               inflateAmount: 0.5
@@ -340,8 +399,8 @@ function AgentSessionEventTimelineChart({
             label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,
             range: segment,
             y: centers[eventRow] ?? 0,
-            color: getSessionEventColor(segment.type),
-            hover: getSessionEventHoverColor(segment.type),
+            color: getSessionEventColor(segment.type, isDark),
+            hover: getSessionEventHoverColor(segment.type, isDark),
             thickness: 28,
             order: eventOrder(segment.type),
             inflateAmount: 0.5
@@ -352,8 +411,8 @@ function AgentSessionEventTimelineChart({
             label: "Parallel tool calls",
             range: group,
             y: centers[eventRow] ?? 0,
-            color: getSessionEventColor("tool_call"),
-            hover: getSessionEventHoverColor("tool_call"),
+            color: getSessionEventColor("tool_call", isDark),
+            hover: getSessionEventHoverColor("tool_call", isDark),
             thickness: 28,
             order: eventOrder("tool_call"),
             inflateAmount: 0.5
@@ -361,7 +420,19 @@ function AgentSessionEventTimelineChart({
         )
       ]
     }),
-    [centers, eventRow, mainEventSegments, subAgentLanes, toolCallGroups, turnBars, turnFill, turnHover]
+    [
+      centers,
+      eventRow,
+      isDark,
+      mainEventSegments,
+      markerGroups,
+      markerRow,
+      subAgentLanes,
+      toolCallGroups,
+      turnBars,
+      turnFill,
+      turnHover
+    ]
   );
   const turnLabelPlugin = useMemo(
     () => ({
@@ -436,21 +507,16 @@ function AgentSessionEventTimelineChart({
           grid: { color: grid },
           border: { color: grid },
           afterBuildTicks: (scale) => {
-            scale.ticks = buildTimelineAxisTicks({
-              ticks: scale.ticks,
-              totalMs,
-              timelineMaxMs
-            });
+            scale.ticks = buildTimelineAxisTicks({ activeTotalMs, turnStartsMs: activeTurnStartsMs, turnGapMs });
           },
           ticks: {
             color: axis,
             autoSkip: false,
-            includeBounds: true,
+            includeBounds: false,
             maxTicksLimit: 9,
-            stepSize: timelineMaxMs / 8,
             callback: (value) => {
               const timelineMs = Number(value);
-              return timelineMs <= totalMs ? formatTimelineDuration(getActiveTimelineMs(timelineMs, timelineGaps)) : "";
+              return timelineMs <= totalMs ? formatTimelineAxisDuration(getActiveTimelineMs(timelineMs, timelineGaps)) : "";
             }
           }
         },
@@ -465,7 +531,20 @@ function AgentSessionEventTimelineChart({
         }
       }
     }),
-    [axis, band, chartTargets, grid, onSelectTurn, refreshTooltipAnchor, timelineGaps, timelineMaxMs, totalMs]
+    [
+      activeTotalMs,
+      activeTurnStartsMs,
+      axis,
+      band,
+      chartTargets,
+      grid,
+      onSelectTurn,
+      refreshTooltipAnchor,
+      timelineGaps,
+      timelineMaxMs,
+      totalMs,
+      turnGapMs
+    ]
   );
   const tooltipTurn = tooltipTarget?.type === TIMELINE_TYPE.turn ? turns[tooltipTarget.bar.turnIndex] : void 0;
   const containerStyle = useMemo(() => ({ height: band + overheadPx }), [band, overheadPx]);
@@ -483,7 +562,7 @@ function AgentSessionEventTimelineChart({
       segment: tooltipTarget.segment,
       subAgentLabel: tooltipTarget.segment.type === "sub_agent" ? void 0 : subAgentLanes.find((lane) => lane.threadId === tooltipTarget.segment.threadId)?.track.description
     }
-  ) : tooltipTarget?.type === TIMELINE_TYPE.toolCallGroup ? /* @__PURE__ */ jsx2(SessionToolCallGroupTooltip, { group: tooltipTarget.group }) : tooltipTarget?.type === TIMELINE_TYPE.subAgentGroup ? /* @__PURE__ */ jsx2(SessionSubAgentGroupTooltip, { group: tooltipTarget.group }) : null;
+  ) : tooltipTarget?.type === TIMELINE_TYPE.toolCallGroup ? /* @__PURE__ */ jsx2(SessionToolCallGroupTooltip, { group: tooltipTarget.group }) : tooltipTarget?.type === TIMELINE_TYPE.markerGroup ? /* @__PURE__ */ jsx2(SessionMarkerGroupTooltip, { group: tooltipTarget.group }) : tooltipTarget?.type === TIMELINE_TYPE.subAgentGroup ? /* @__PURE__ */ jsx2(SessionSubAgentGroupTooltip, { group: tooltipTarget.group }) : null;
   return /* @__PURE__ */ jsx2("div", { ref: wrapperRef, className: "w-full", "data-slot": "agent-session-event-timeline-chart", children: /* @__PURE__ */ jsx2(
     LightTooltip,
     {
@@ -494,11 +573,19 @@ function AgentSessionEventTimelineChart({
       open: tooltipTarget != null && tooltipContent != null,
       className: "max-w-[min(25rem,calc(100vw-1rem))] whitespace-normal",
       anchor: tooltipAnchor,
-      children: /* @__PURE__ */ jsx2("div", { className: "w-full", style: containerStyle, onMouseLeave: clearTooltip, children: /* @__PURE__ */ jsx2(Bar, { data: chartData, options: chartOptions, plugins: [turnLabelPlugin, overheadPlugin] }) })
+      children: /* @__PURE__ */ jsx2("div", { className: "w-full", style: containerStyle, onMouseLeave: clearTooltip, children: /* @__PURE__ */ jsx2(
+        Chart,
+        {
+          type: "bar",
+          data: chartData,
+          options: chartOptions,
+          plugins: [turnLabelPlugin, overheadPlugin]
+        }
+      ) })
     }
   ) });
 }
 export {
   AgentSessionEventTimelineChart
 };
-//# sourceMappingURL=AgentSessionEventTimelineChart-CGCU7WBK.js.map
+//# sourceMappingURL=AgentSessionEventTimelineChart-CUKETHWM.js.map