@industry-theme/file-city-panel 0.5.62 → 0.5.64

package/dist/panels.bundle.js

@@ -255103,7 +255103,7 @@ const toUiNote = (n) => {
 };
 const PANEL_WIDTH_PCT$3 = 38;
 const FLOAT_INSET$3 = 16;
-const TOP_INSET$3 = 72;
+const TOP_INSET$2 = 72;
 const MIN_WIDTH_PX$3 = 360;
 const MIN_LEFT_GAP_PX$1 = 80;
 const RESIZE_HANDLE_WIDTH$3 = 6;
@@ -255259,7 +255259,7 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
   const NOTES_PANEL_GAP = 12;
   const notesPanelStyle = {
     position: "absolute",
-    top: TOP_INSET$3,
+    top: TOP_INSET$2,
     bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$3}px)`,
     width: NOTES_PANEL_WIDTH,
     right: `calc(${detailWidthCss} + ${FLOAT_INSET$3}px + ${NOTES_PANEL_GAP}px)`,
@@ -255310,7 +255310,7 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
         onAnimationEnd: () => setHasEntered(true),
         style: {
           position: "absolute",
-          top: TOP_INSET$3,
+          top: TOP_INSET$2,
           right: FLOAT_INSET$3,
           // Anchor the bottom edge (mirroring the markdown overlay) so the
           // panel has a *definite* height — otherwise transient placeholder
@@ -255574,7 +255574,7 @@ const iconButtonStyle = (color2, disabled = false) => ({
 });
 const PANEL_WIDTH_PCT$2 = 38;
 const FLOAT_INSET$2 = 16;
-const TOP_INSET$2 = 72;
+const TOP_INSET$1 = 72;
 const MIN_WIDTH_PX$2 = 360;
 const MIN_LEFT_GAP_PX = 80;
 const RESIZE_HANDLE_WIDTH$2 = 6;
@@ -255631,7 +255631,7 @@ const SequenceFilesOverlay = ({
       onAnimationEnd: () => setHasEntered(true),
       style: {
         position: "absolute",
-        top: TOP_INSET$2,
+        top: TOP_INSET$1,
         right: FLOAT_INSET$2,
         bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$2}px)`,
         width: widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$2}% - ${FLOAT_INSET$2}px)`,
@@ -256360,7 +256360,7 @@ const primaryButton = (theme2) => ({
 });
 const PANEL_WIDTH_PCT$1 = 38;
 const FLOAT_INSET$1 = 16;
-const TOP_INSET$1 = 72;
+const TOP_INSET = 72;
 const MIN_WIDTH_PX$1 = 360;
 const RESIZE_HANDLE_WIDTH$1 = 6;
 const SequenceMarkdownOverlay = ({
@@ -256475,7 +256475,7 @@ const SequenceMarkdownOverlay = ({
       onAnimationEnd: () => setHasEntered(true),
       style: {
         position: "absolute",
-        top: TOP_INSET$1,
+        top: TOP_INSET,
         left: FLOAT_INSET$1,
         // Anchor the bottom edge too so the column has a *definite* height —
         // `IndustryMarkdownSlide` renders with `height: 100%` and only
@@ -257701,14 +257701,30 @@ const TrailLeaderLine = React.forwardRef(function TrailLeaderLine2({ containerRe
       const sx = canvasLeft + (v.x * 0.5 + 0.5) * size.width;
       const sy = canvasTop + (v.y * -0.5 + 0.5) * size.height;
       const HEADER_BAND_OFFSET = 22;
-      const nodeCenterX = nodeRect.left + nodeRect.width / 2 - containerRect.left;
-      const aimRight = nodeCenterX < sx;
-      const bx = aimRight ? nodeRect.right - containerRect.left : nodeRect.left - containerRect.left;
+      const bx = nodeRect.left - containerRect.left;
       const by = nodeRect.top - containerRect.top + HEADER_BAND_OFFSET;
-      const dxRaw = (bx - sx) * 0.5;
-      const dxAbs = Math.max(80, Math.abs(dxRaw));
-      const dx = dxRaw < 0 ? -dxAbs : dxAbs;
-      const d = `M ${sx} ${sy} C ${sx + dx} ${sy}, ${bx - dx} ${by}, ${bx} ${by}`;
+      const ELBOW_GAP = 60;
+      const CORNER_RADIUS = 14;
+      const elbowX = Math.max(
+        canvasLeft + 8,
+        Math.min(sx, bx) - ELBOW_GAP
+      );
+      const goingUp = by < sy;
+      const r2 = Math.min(
+        CORNER_RADIUS,
+        Math.abs(sy - by) / 2,
+        Math.abs(sx - elbowX) / 2,
+        Math.abs(bx - elbowX) / 2
+      );
+      const cornerSign = goingUp ? -1 : 1;
+      const d = [
+        `M ${sx} ${sy}`,
+        `L ${elbowX + r2} ${sy}`,
+        `Q ${elbowX} ${sy} ${elbowX} ${sy + cornerSign * r2}`,
+        `L ${elbowX} ${by - cornerSign * r2}`,
+        `Q ${elbowX} ${by} ${elbowX + r2} ${by}`,
+        `L ${bx} ${by}`
+      ].join(" ");
       const pathEl = pathRef.current;
       const buildingEl = buildingMarkerRef.current;
       const nodeMarkerEl = nodeMarkerRef.current;
@@ -257790,9 +257806,141 @@ const TrailLeaderLine = React.forwardRef(function TrailLeaderLine2({ containerRe
     )
   ] });
 });
+const TrailFilePath = React.forwardRef(function TrailFilePath2({ containerRef, buildings, cityCenter }, ref) {
+  const { theme: theme2 } = useTheme();
+  const color2 = theme2.colors.accent ?? "#22d3ee";
+  const groupRef = React.useRef(null);
+  const projectScratch = React.useRef(new THREE.Vector3());
+  const buildingsRef = React.useRef(buildings);
+  const cityCenterRef = React.useRef(cityCenter);
+  React.useEffect(() => {
+    buildingsRef.current = buildings;
+  }, [buildings]);
+  React.useEffect(() => {
+    cityCenterRef.current = cityCenter;
+  }, [cityCenter]);
+  const hideAll = React.useCallback(() => {
+    const g2 = groupRef.current;
+    if (!g2) return;
+    g2.setAttribute("opacity", "0");
+  }, []);
+  React.useEffect(() => {
+    if (buildings.length < 2) hideAll();
+  }, [buildings, hideAll]);
+  const onCameraFrame = React.useCallback(
+    (camera, size) => {
+      const targets = buildingsRef.current;
+      const center = cityCenterRef.current;
+      const container = containerRef.current;
+      const g2 = groupRef.current;
+      if (!targets || targets.length < 2 || !center || !container || !g2 || size.width === 0) {
+        hideAll();
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const canvasEl = container.querySelector("canvas");
+      if (!canvasEl) {
+        hideAll();
+        return;
+      }
+      const canvasRect = canvasEl.getBoundingClientRect();
+      const canvasLeft = canvasRect.left - containerRect.left;
+      const canvasTop = canvasRect.top - containerRect.top;
+      const points = [];
+      const v = projectScratch.current;
+      for (const b of targets) {
+        v.set(b.position.x - center.x, 0, b.position.z - center.z).project(
+          camera
+        );
+        const visible = v.z <= 1;
+        const x2 = canvasLeft + (v.x * 0.5 + 0.5) * size.width;
+        const y2 = canvasTop + (v.y * -0.5 + 0.5) * size.height;
+        points.push({ x: x2, y: y2, visible });
+      }
+      let d = "";
+      for (let i = 0; i < points.length; i++) {
+        const p2 = points[i];
+        if (!p2.visible) {
+          d += "";
+          continue;
+        }
+        if (i === 0 || !points[i - 1].visible) {
+          d += `M ${p2.x} ${p2.y} `;
+        } else {
+          d += `L ${p2.x} ${p2.y} `;
+        }
+      }
+      while (g2.children.length < 1 + targets.length * 2) {
+        g2.appendChild(
+          document.createElementNS("http://www.w3.org/2000/svg", "path")
+        );
+        g2.appendChild(
+          document.createElementNS("http://www.w3.org/2000/svg", "circle")
+        );
+        g2.appendChild(
+          document.createElementNS("http://www.w3.org/2000/svg", "text")
+        );
+      }
+      while (g2.children.length > 1 + targets.length * 2) {
+        g2.removeChild(g2.children[g2.children.length - 1]);
+      }
+      const pathEl = g2.children[0];
+      pathEl.setAttribute("d", d.trim() || "M 0 0");
+      pathEl.setAttribute("fill", "none");
+      pathEl.setAttribute("stroke", color2);
+      pathEl.setAttribute("stroke-width", "2");
+      pathEl.setAttribute("stroke-dasharray", "6 4");
+      pathEl.setAttribute("opacity", "0.75");
+      for (let i = 0; i < targets.length; i++) {
+        const dot = g2.children[1 + i * 2];
+        const label = g2.children[1 + i * 2 + 1];
+        const p2 = points[i];
+        if (!p2.visible) {
+          dot.setAttribute("opacity", "0");
+          label.setAttribute("opacity", "0");
+          continue;
+        }
+        dot.setAttribute("cx", String(p2.x));
+        dot.setAttribute("cy", String(p2.y));
+        dot.setAttribute("r", "6");
+        dot.setAttribute("fill", color2);
+        dot.setAttribute("stroke", "#0f1419");
+        dot.setAttribute("stroke-width", "1.5");
+        dot.setAttribute("opacity", "1");
+        label.setAttribute("x", String(p2.x));
+        label.setAttribute("y", String(p2.y - 10));
+        label.setAttribute("text-anchor", "middle");
+        label.setAttribute("fill", color2);
+        label.setAttribute("font-size", "11");
+        label.setAttribute("font-weight", "600");
+        label.setAttribute("opacity", "1");
+        label.textContent = String(i + 1);
+      }
+      g2.setAttribute("opacity", "1");
+    },
+    [containerRef, hideAll, color2]
+  );
+  React.useImperativeHandle(ref, () => ({ onCameraFrame }), [onCameraFrame]);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "visible",
+        // Above the city canvas (auto z-index) but below the floating
+        // overlays (z 1900) so the path only paints over the city.
+        zIndex: 26
+      },
+      children: /* @__PURE__ */ jsx("g", { ref: groupRef, opacity: 0 })
+    }
+  );
+});
 const PANEL_WIDTH_PCT = 38;
 const FLOAT_INSET = 16;
-const TOP_INSET = 16;
 const MIN_WIDTH_PX = 360;
 const RESIZE_HANDLE_WIDTH = 6;
 const TrailMarkdownOverlay = ({
@@ -257802,7 +257950,9 @@ const TrailMarkdownOverlay = ({
   slideIdPrefix,
   bottomOffset,
   containerRef: externalContainerRef,
-  nav
+  disableBottomTransition,
+  nav,
+  files
 }) => {
   const { theme: theme2 } = useTheme();
   const body = markdown2.trim();
@@ -257845,7 +257995,7 @@ const TrailMarkdownOverlay = ({
       if (!drag2) return;
       const parent = (_a = containerRef.current) == null ? void 0 : _a.parentElement;
       const parentWidth = (parent == null ? void 0 : parent.clientWidth) ?? window.innerWidth;
-      const maxWidth = Math.max(MIN_WIDTH_PX, parentWidth - FLOAT_INSET * 2);
+      const maxWidth = Math.max(MIN_WIDTH_PX, parentWidth - FLOAT_INSET);
       const dx = e.clientX - drag2.startX;
       const next2 = Math.min(maxWidth, Math.max(MIN_WIDTH_PX, drag2.startWidth + dx));
       setWidthPx(next2);
@@ -257871,16 +258021,25 @@ const TrailMarkdownOverlay = ({
       onAnimationEnd: () => setHasEntered(true),
       style: {
         position: "absolute",
-        top: TOP_INSET,
-        left: FLOAT_INSET,
-        bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET}px)`,
-        width: widthPx != null ? widthPx : `calc(${PANEL_WIDTH_PCT}% - ${FLOAT_INSET}px)`,
+        top: 0,
+        left: 0,
+        // 1px gap above the drawer's top edge so the drawer reads
+        // cleanly through any subpixel rounding / transition flicker.
+        bottom: `calc(${bottomOffsetCss} + 1px)`,
+        // Match the sequence drawer's slide animation so the
+        // overlay's bottom edge tracks the drawer's height instead
+        // of snapping when the host toggles `bottomOffset`. Skipped
+        // while the drawer is being live-resized so the bottom edge
+        // tracks the cursor without lag.
+        transition: disableBottomTransition ? void 0 : "bottom 280ms ease",
+        width: widthPx != null ? widthPx : `${PANEL_WIDTH_PCT}%`,
         minWidth: MIN_WIDTH_PX,
         backgroundColor: theme2.colors.background,
-        border: `1px solid ${theme2.colors.border}`,
-        borderRadius: 12,
+        // Flush against the city container's left/top/bottom edges;
+        // only the right edge separates from the canvas, so we draw
+        // the border there only.
+        borderRight: `1px solid ${theme2.colors.border}`,
         overflow: "hidden",
-        boxShadow: "0 12px 32px rgba(0, 0, 0, 0.28)",
         display: "flex",
         flexDirection: "column",
         zIndex: 1900,
@@ -257894,7 +258053,7 @@ const TrailMarkdownOverlay = ({
           to { transform: translateX(0); }
         }
       ` }),
-        /* @__PURE__ */ jsxs(
+        eyebrow || title ? /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -257908,7 +258067,7 @@ const TrailMarkdownOverlay = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx(
+              eyebrow ? /* @__PURE__ */ jsx(
                 "span",
                 {
                   style: {
@@ -257919,8 +258078,8 @@ const TrailMarkdownOverlay = ({
                   },
                   children: eyebrow
                 }
-              ),
-              /* @__PURE__ */ jsx(
+              ) : null,
+              title ? /* @__PURE__ */ jsx(
                 "span",
                 {
                   style: {
@@ -257933,23 +258092,35 @@ const TrailMarkdownOverlay = ({
                   title,
                   children: title
                 }
-              )
+              ) : null
             ]
           }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx(
-          IndustryMarkdownSlide,
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            content: body,
-            slideIdPrefix,
-            slideIndex: 0,
-            isVisible: true,
-            theme: theme2,
-            transparentBackground: true,
-            enableKeyboardScrolling: false
+            style: {
+              flex: 1,
+              minHeight: 0,
+              maxHeight: files && files.length > 0 ? "30%" : void 0,
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx(
+              IndustryMarkdownSlide,
+              {
+                content: body,
+                slideIdPrefix,
+                slideIndex: 0,
+                isVisible: true,
+                theme: theme2,
+                transparentBackground: true,
+                enableKeyboardScrolling: false
+              }
+            ) })
           }
-        ) }) }),
+        ),
         nav ? /* @__PURE__ */ jsx(TrailMarkdownOverlayFooter, { nav }) : null,
+        files && files.length > 0 ? /* @__PURE__ */ jsx(TrailFilesList, { files }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -257985,13 +258156,156 @@ const TrailMarkdownOverlay = ({
     }
   );
 };
+const TrailFilesList = ({ files }) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderTop: `1px solid ${theme2.colors.border}`,
+        // Markdown body is capped at 50% above; files take the rest
+        // of the remaining column. Grows past 50% if the summary is
+        // shorter than its cap (the markdown body shrinks below 50%
+        // to accommodate, since `max-height` doesn't force it).
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "8px 14px 4px",
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              letterSpacing: 0.4,
+              textTransform: "uppercase",
+              flexShrink: 0
+            },
+            children: "Files in this trail"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", minHeight: 0, padding: "0 6px 8px" }, children: files.map((file) => {
+          const fileName = file.sourcePath.split("/").pop() ?? file.sourcePath;
+          const dir = file.sourcePath.slice(
+            0,
+            Math.max(0, file.sourcePath.length - fileName.length - 1)
+          );
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: file.onClick,
+              title: file.sourcePath,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 8,
+                width: "100%",
+                background: file.isActive ? `color-mix(in oklab, ${theme2.colors.accent} 20%, transparent)` : "transparent",
+                border: "none",
+                borderRadius: theme2.radii[2],
+                padding: "6px 8px",
+                cursor: "pointer",
+                color: theme2.colors.text,
+                fontFamily: theme2.fonts.monospace,
+                fontSize: theme2.fontSizes[1],
+                textAlign: "left"
+              },
+              onMouseEnter: (e) => {
+                var _a;
+                (_a = file.onHoverChange) == null ? void 0 : _a.call(file, file.sourcePath);
+                if (file.isActive) return;
+                e.currentTarget.style.background = `color-mix(in oklab, ${theme2.colors.text} 6%, transparent)`;
+              },
+              onMouseLeave: (e) => {
+                var _a;
+                (_a = file.onHoverChange) == null ? void 0 : _a.call(file, null);
+                if (file.isActive) return;
+                e.currentTarget.style.background = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 1,
+                      minWidth: 0,
+                      flex: 1,
+                      overflow: "hidden"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: file.isActive ? theme2.fontWeights.semibold : theme2.fontWeights.body,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            maxWidth: "100%"
+                          },
+                          children: fileName
+                        }
+                      ),
+                      dir ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: theme2.fontSizes[0],
+                            color: theme2.colors.textTertiary,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            direction: "rtl",
+                            textAlign: "left",
+                            maxWidth: "100%"
+                          },
+                          children: dir
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      flexShrink: 0,
+                      color: theme2.colors.textSecondary,
+                      fontFamily: theme2.fonts.body,
+                      fontVariantNumeric: "tabular-nums"
+                    },
+                    children: file.markerCount
+                  }
+                )
+              ]
+            },
+            file.sourcePath
+          );
+        }) })
+      ]
+    }
+  );
+};
 const TrailMarkdownOverlayFooter = ({
   nav
 }) => {
   const { theme: theme2 } = useTheme();
   const idle = nav.position < 0;
-  const canPrev = !idle && nav.position > 0;
+  const canPrev = !idle;
   const canNext = !idle && nav.position < nav.total - 1;
+  const startEnabled = nav.total > 0;
+  const [startHover, setStartHover] = React.useState(false);
+  const [startActive, setStartActive] = React.useState(false);
+  const startBackground = !startEnabled ? theme2.colors.accent : startActive ? `color-mix(in oklab, ${theme2.colors.accent} 82%, black)` : startHover ? `color-mix(in oklab, ${theme2.colors.accent} 88%, black)` : theme2.colors.accent;
   const stepButtonStyle = (enabled) => ({
     background: "transparent",
     border: `1px solid ${theme2.colors.muted}`,
@@ -258008,11 +258322,14 @@ const TrailMarkdownOverlayFooter = ({
     "div",
     {
       style: {
-        padding: "8px 14px",
+        // In idle state the Start button fills the entire footer
+        // (no padding around it); in active state we keep the inset
+        // chrome so the prev/counter/next row reads as a row.
+        padding: idle ? 0 : "8px 14px",
         borderTop: `1px solid ${theme2.colors.border}`,
         display: "flex",
-        alignItems: "center",
-        justifyContent: idle ? "center" : "space-between",
+        alignItems: "stretch",
+        justifyContent: idle ? "stretch" : "space-between",
         gap: 8,
         flexShrink: 0
       },
@@ -258021,20 +258338,30 @@ const TrailMarkdownOverlayFooter = ({
         {
           type: "button",
           onClick: nav.onStart,
-          disabled: nav.total === 0,
-          title: nav.total === 0 ? "No markers in this repo" : "Jump to the first marker",
+          disabled: !startEnabled,
+          title: startEnabled ? "Jump to the first marker" : "No markers in this repo",
+          onMouseEnter: () => setStartHover(true),
+          onMouseLeave: () => {
+            setStartHover(false);
+            setStartActive(false);
+          },
+          onPointerDown: () => setStartActive(true),
+          onPointerUp: () => setStartActive(false),
+          onPointerCancel: () => setStartActive(false),
           style: {
-            background: theme2.colors.accent,
+            flex: 1,
+            background: startBackground,
             color: theme2.colors.background,
             border: "none",
-            borderRadius: theme2.radii[3],
-            padding: "6px 14px",
+            borderRadius: 0,
+            padding: "12px 14px",
             fontFamily: theme2.fonts.body,
-            fontSize: theme2.fontSizes[0],
+            fontSize: theme2.fontSizes[1],
             fontWeight: theme2.fontWeights.semibold,
-            cursor: nav.total === 0 ? "not-allowed" : "pointer",
-            opacity: nav.total === 0 ? 0.5 : 1,
-            lineHeight: 1.2
+            cursor: startEnabled ? "pointer" : "not-allowed",
+            opacity: startEnabled ? 1 : 0.5,
+            lineHeight: 1.2,
+            transition: "background 120ms ease"
           },
           children: "Start trail"
         }
@@ -258355,9 +258682,10 @@ const pierreOptionsBase = {
 const pierreStyle = {
   display: "block"
 };
-const SEQUENCE_DRAWER_HEIGHT_PCT = 38;
+const SEQUENCE_DRAWER_HEIGHT_PCT = 45;
 const SNIPPET_PANE_WIDTH_PX = 460;
 const HEADER_HEIGHT_PX = 48;
+const PANEL_TRANSITION_MS = 280;
 const THREE_D_TOGGLE_DISABLED = true;
 const FileCityTrailExplorerPanel = ({ context, actions }) => {
   var _a;
@@ -258438,6 +258766,10 @@ const FileCityTrailSequenceLayout = ({
     return;
   }, [hasLineCounts]);
   const effectiveShow3D = false;
+  const [showSequenceDrawer, setShowSequenceDrawer] = React.useState(false);
+  const [drawerHeightOverridePct, setDrawerHeightOverridePct] = React.useState(null);
+  const [isResizingDrawer, setIsResizingDrawer] = React.useState(false);
+  const drawerHeightPct = !showSequenceDrawer ? 0 : drawerHeightOverridePct ?? SEQUENCE_DRAWER_HEIGHT_PCT;
   const selectedMarker = React.useMemo(() => {
     if (!selectedMarkerId) return null;
     return trail2.markers.find((m) => m.id === selectedMarkerId) ?? null;
@@ -258465,8 +258797,16 @@ const FileCityTrailSequenceLayout = ({
     const first = markersForThisRepo[0];
     if (first) onSelectMarker(first.id);
   }, [markersForThisRepo, onSelectMarker]);
+  const [snippetExpanded, setSnippetExpanded] = React.useState(false);
+  React.useEffect(() => {
+    setSnippetExpanded(false);
+  }, [selectedMarkerId]);
   const handleStepPrev = React.useCallback(() => {
-    if (stepperIndex <= 0) return;
+    if (stepperIndex < 0) return;
+    if (stepperIndex === 0) {
+      onSelectMarker(null);
+      return;
+    }
     const target = markersForThisRepo[stepperIndex - 1];
     if (target) onSelectMarker(target.id);
   }, [markersForThisRepo, stepperIndex, onSelectMarker]);
@@ -258475,6 +258815,33 @@ const FileCityTrailSequenceLayout = ({
     const target = markersForThisRepo[stepperIndex + 1];
     if (target) onSelectMarker(target.id);
   }, [markersForThisRepo, stepperIndex, onSelectMarker]);
+  const [hoveredFilePath, setHoveredFilePath] = React.useState(
+    null
+  );
+  const trailFiles = React.useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    const firstMarkerByPath = /* @__PURE__ */ new Map();
+    const order2 = [];
+    for (const m of markersForThisRepo) {
+      if (!m.sourcePath) continue;
+      const existing = counts.get(m.sourcePath) ?? 0;
+      counts.set(m.sourcePath, existing + 1);
+      if (!firstMarkerByPath.has(m.sourcePath)) {
+        firstMarkerByPath.set(m.sourcePath, m.id);
+        order2.push(m.sourcePath);
+      }
+    }
+    return order2.map((sourcePath) => ({
+      sourcePath,
+      markerCount: counts.get(sourcePath) ?? 0,
+      isActive: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) === sourcePath,
+      onClick: () => {
+        const markerId = firstMarkerByPath.get(sourcePath);
+        if (markerId) onSelectMarker(markerId);
+      },
+      onHoverChange: setHoveredFilePath
+    }));
+  }, [markersForThisRepo, selectedMarker, onSelectMarker]);
   const trailFilesHighlightLayers = React.useMemo(() => {
     if (!cityData) return null;
     const sourcePaths = markersForThisRepo.map((m) => m.sourcePath).filter((p2) => typeof p2 === "string" && p2.length > 0);
@@ -258510,9 +258877,39 @@ const FileCityTrailSequenceLayout = ({
     }));
   }, [markersForThisRepo, cityData]);
   const trailFilesActive = trailFilesHighlightLayers !== null && trailFilesHighlightLayers.length > 0;
+  const hoveredFileHighlightLayer = React.useMemo(() => {
+    if (!hoveredFilePath || !cityData) return null;
+    const building = cityData.buildings.find((b) => b.path === hoveredFilePath) ?? cityData.buildings.find(
+      (b) => b.path.endsWith(`/${hoveredFilePath}`)
+    );
+    if (!building) return null;
+    return {
+      id: "trail-files-hover",
+      name: "Trail file hover",
+      enabled: true,
+      color: theme2.colors.accent,
+      opacity: 0.9,
+      borderWidth: 4,
+      priority: 100,
+      items: [
+        {
+          path: building.path,
+          type: "file",
+          renderStrategy: "fill"
+        }
+      ]
+    };
+  }, [hoveredFilePath, cityData, theme2.colors.accent]);
+  const cityHighlightLayers = React.useMemo(() => {
+    const layers = [];
+    if (trailFilesHighlightLayers) layers.push(...trailFilesHighlightLayers);
+    if (hoveredFileHighlightLayer) layers.push(hoveredFileHighlightLayer);
+    return layers.length > 0 ? layers : void 0;
+  }, [trailFilesHighlightLayers, hoveredFileHighlightLayer]);
   const containerRef = React.useRef(null);
   const snippetPaneRef = React.useRef(null);
   const leaderLineRef = React.useRef(null);
+  const filePathRef = React.useRef(null);
   const [markdownOverlayWidth, setMarkdownOverlayWidth] = React.useState(null);
   const [snippetPaneEl, setSnippetPaneEl] = React.useState(null);
   const snippetPaneCallbackRef = React.useCallback(
@@ -258536,10 +258933,22 @@ const FileCityTrailSequenceLayout = ({
       z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2
     };
   }, [cityData]);
+  const trailPathBuildings = React.useMemo(() => {
+    if (!cityData || markersForThisRepo.length === 0) return [];
+    const buildingByPath = new Map(cityData.buildings.map((b) => [b.path, b]));
+    const out = [];
+    for (const m of markersForThisRepo) {
+      if (!m.sourcePath) continue;
+      const b = buildingByPath.get(m.sourcePath) ?? cityData.buildings.find((cb) => cb.path.endsWith(`/${m.sourcePath}`));
+      if (b) out.push(b);
+    }
+    return out;
+  }, [cityData, markersForThisRepo]);
   const onCameraFrame = React.useCallback(
     (camera, size) => {
-      var _a2;
+      var _a2, _b2;
       (_a2 = leaderLineRef.current) == null ? void 0 : _a2.onCameraFrame(camera, size);
+      (_b2 = filePathRef.current) == null ? void 0 : _b2.onCameraFrame(camera, size);
     },
     []
   );
@@ -258584,8 +258993,8 @@ const FileCityTrailSequenceLayout = ({
     markdown: selectedMarker.description,
     slideIdPrefix: `trail-${trail2.id}-marker-${selectedMarker.id}`
   } : ((_b = trail2.summary) == null ? void 0 : _b.trim()) ? {
-    eyebrow: "Trail",
-    title: trail2.title,
+    eyebrow: null,
+    title: null,
     markdown: trail2.summary,
     slideIdPrefix: `trail-${trail2.id}-summary`
   } : null;
@@ -258600,11 +259009,10 @@ const FileCityTrailSequenceLayout = ({
       if (hasOverlayMarkdown && markdownOverlayWidth == null) return;
       if (showSnippetPane && snippetPaneWidth == null) return;
       const FLOAT_INSET2 = 16;
-      const leftInset = hasOverlayMarkdown ? FLOAT_INSET2 + (markdownOverlayWidth ?? 0) : 0;
-      const snippetW = snippetPaneWidth ?? SNIPPET_PANE_WIDTH_PX;
-      const rightInset = showSnippetPane ? snippetW + FLOAT_INSET2 : 0;
-      const topInset = FLOAT_INSET2;
-      const bottomInset = SEQUENCE_DRAWER_HEIGHT_PCT / 100 * containerSize.height;
+      const leftInset = hasOverlayMarkdown ? markdownOverlayWidth ?? 0 : 0;
+      const rightInset = 0;
+      const topInset = showSnippetPane ? containerSize.height * 0.5 + FLOAT_INSET2 : FLOAT_INSET2;
+      const bottomInset = showSnippetPane ? 0 : drawerHeightPct / 100 * containerSize.height;
       const result = computeCameraFraming({
         canvasW: containerSize.width,
         canvasH: containerSize.height,
@@ -258649,7 +259057,8 @@ const FileCityTrailSequenceLayout = ({
     showSnippetPane,
     snippetPaneWidth,
     hasOverlayMarkdown,
-    markdownOverlayWidth
+    markdownOverlayWidth,
+    drawerHeightPct
   ]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -258671,7 +259080,19 @@ const FileCityTrailSequenceLayout = ({
             markerCount: markersForThisRepo.length,
             show3D: effectiveShow3D,
             onToggle3D: () => setShow3D((v) => !v),
-            hideToggle: THREE_D_TOGGLE_DISABLED
+            hideToggle: THREE_D_TOGGLE_DISABLED,
+            showSequenceDrawer,
+            onToggleSequenceDrawer: () => {
+              setDrawerHeightOverridePct(null);
+              setShowSequenceDrawer((v) => !v);
+            },
+            canExit: selectedMarkerId != null || showSequenceDrawer || snippetExpanded,
+            onExitTrail: () => {
+              onSelectMarker(null);
+              setShowSequenceDrawer(false);
+              setDrawerHeightOverridePct(null);
+              setSnippetExpanded(false);
+            }
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -258698,10 +259119,19 @@ const FileCityTrailSequenceLayout = ({
                   backgroundColor: theme2.colors.background,
                   textColor: theme2.colors.textMuted,
                   isGrown: effectiveShow3D,
-                  highlightLayers: trailFilesHighlightLayers ?? void 0,
+                  highlightLayers: cityHighlightLayers,
                   defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
                 }
               ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
+              /* @__PURE__ */ jsx(
+                TrailFilePath,
+                {
+                  ref: filePathRef,
+                  containerRef,
+                  buildings: trailPathBuildings,
+                  cityCenter
+                }
+              ),
               /* @__PURE__ */ jsx(
                 TrailLeaderLine,
                 {
@@ -258719,7 +259149,8 @@ const FileCityTrailSequenceLayout = ({
                   title: overlayMarkdown.title,
                   markdown: overlayMarkdown.markdown,
                   slideIdPrefix: overlayMarkdown.slideIdPrefix,
-                  bottomOffset: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
+                  bottomOffset: `${drawerHeightPct}%`,
+                  disableBottomTransition: isResizingDrawer,
                   containerRef: setMarkdownOverlayEl,
                   nav: markersForThisRepo.length > 0 ? {
                     position: stepperIndex,
@@ -258727,7 +259158,8 @@ const FileCityTrailSequenceLayout = ({
                     onStart: handleStartTrail,
                     onPrev: handleStepPrev,
                     onNext: handleStepNext
-                  } : void 0
+                  } : void 0,
+                  files: showSequenceDrawer ? void 0 : trailFiles
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -258736,7 +259168,13 @@ const FileCityTrailSequenceLayout = ({
                   trail: trail2,
                   view,
                   selectedMarkerId,
-                  onSelectMarker
+                  onSelectMarker,
+                  visible: showSequenceDrawer,
+                  heightPct: drawerHeightPct,
+                  containerHeightPx: (containerSize == null ? void 0 : containerSize.height) ?? null,
+                  onHeightChange: setDrawerHeightOverridePct,
+                  onResizeStart: () => setIsResizingDrawer(true),
+                  onResizeEnd: () => setIsResizingDrawer(false)
                 }
               ),
               (selectedMarker == null ? void 0 : selectedMarker.snippet) ? /* @__PURE__ */ jsx(
@@ -258746,7 +259184,11 @@ const FileCityTrailSequenceLayout = ({
                   marker: selectedMarker,
                   snippet: selectedMarker.snippet,
                   readFile,
-                  onClose: () => onSelectMarker(null)
+                  onClose: () => onSelectMarker(null),
+                  drawerHeightPct,
+                  disableBottomTransition: isResizingDrawer,
+                  expanded: snippetExpanded,
+                  onToggleExpanded: () => setSnippetExpanded((v) => !v)
                 }
               ) : null
             ]
@@ -258756,11 +259198,20 @@ const FileCityTrailSequenceLayout = ({
     }
   );
 };
+const DRAWER_RESIZE_HANDLE_HEIGHT = 6;
+const DRAWER_MIN_HEIGHT_PCT = 12;
+const DRAWER_MAX_HEIGHT_PCT = 80;
 const SequenceDrawer = ({
   trail: trail2,
   view,
   selectedMarkerId,
-  onSelectMarker
+  onSelectMarker,
+  visible,
+  heightPct,
+  containerHeightPx,
+  onHeightChange,
+  onResizeStart,
+  onResizeEnd
 }) => {
   const { theme: theme2 } = useTheme();
   const inputs = React.useMemo(
@@ -258774,86 +259225,215 @@ const SequenceDrawer = ({
     },
     [onSelectMarker, selectedMarkerId]
   );
-  return /* @__PURE__ */ jsx(
+  const [isResizing, setIsResizing] = React.useState(false);
+  const dragStateRef = React.useRef(null);
+  const handleResizePointerDown = React.useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      if (containerHeightPx == null || containerHeightPx <= 0) return;
+      e.preventDefault();
+      dragStateRef.current = {
+        startY: e.clientY,
+        startHeightPct: heightPct,
+        containerHeightPx
+      };
+      setIsResizing(true);
+      onResizeStart();
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [heightPct, containerHeightPx, onResizeStart]
+  );
+  const handleResizePointerMove = React.useCallback(
+    (e) => {
+      const drag2 = dragStateRef.current;
+      if (!drag2) return;
+      const dy = e.clientY - drag2.startY;
+      const deltaPct = dy / drag2.containerHeightPx * 100;
+      const next2 = Math.min(
+        DRAWER_MAX_HEIGHT_PCT,
+        Math.max(DRAWER_MIN_HEIGHT_PCT, drag2.startHeightPct - deltaPct)
+      );
+      onHeightChange(next2);
+    },
+    [onHeightChange]
+  );
+  const handleResizePointerUp = React.useCallback(
+    (e) => {
+      if (!dragStateRef.current) return;
+      dragStateRef.current = null;
+      setIsResizing(false);
+      onResizeEnd();
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    },
+    [onResizeEnd]
+  );
+  const handleResizeDoubleClick = React.useCallback(() => {
+    onHeightChange(null);
+  }, [onHeightChange]);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-hidden": !visible,
       style: {
         position: "absolute",
         left: 0,
         right: 0,
         bottom: 0,
-        height: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
+        height: visible ? `${heightPct}%` : 0,
+        opacity: visible ? 1 : 0,
+        pointerEvents: visible ? "auto" : "none",
         backgroundColor: withAlpha(theme2.colors.background, 92),
         borderTop: `1px solid ${theme2.colors.border}`,
-        zIndex: 10
+        zIndex: 10,
+        overflow: "hidden",
+        transition: isResizing ? `opacity ${PANEL_TRANSITION_MS}ms ease` : `height ${PANEL_TRANSITION_MS}ms ease, opacity ${PANEL_TRANSITION_MS}ms ease`
       },
-      children: /* @__PURE__ */ jsx(
-        SequenceDiagramRenderer,
-        {
-          events: inputs.events,
-          edges: inputs.edges,
-          layoutOptions: inputs.layoutOptions,
-          width: "100%",
-          height: "100%",
-          showControls: false,
-          showBackground: false,
-          stickyHeaders: true,
-          selectedNodeId: selectedMarkerId ?? void 0,
-          onNodeClick: handleNodeClick2
-        }
-      )
+      children: [
+        visible && containerHeightPx != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "horizontal",
+            "aria-label": "Resize sequence drawer",
+            onPointerDown: handleResizePointerDown,
+            onPointerMove: handleResizePointerMove,
+            onPointerUp: handleResizePointerUp,
+            onPointerCancel: handleResizePointerUp,
+            onDoubleClick: handleResizeDoubleClick,
+            title: "Drag to resize · double-click to reset",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              height: DRAWER_RESIZE_HANDLE_HEIGHT,
+              cursor: "ns-resize",
+              backgroundColor: isResizing ? theme2.colors.accent : "transparent",
+              transition: isResizing ? void 0 : "background-color 120ms ease",
+              touchAction: "none",
+              zIndex: 1
+            },
+            onMouseEnter: (e) => {
+              if (isResizing) return;
+              e.currentTarget.style.backgroundColor = theme2.colors.border;
+            },
+            onMouseLeave: (e) => {
+              if (isResizing) return;
+              e.currentTarget.style.backgroundColor = "transparent";
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          SequenceDiagramRenderer,
+          {
+            events: inputs.events,
+            edges: inputs.edges,
+            layoutOptions: inputs.layoutOptions,
+            width: "100%",
+            height: "100%",
+            showControls: false,
+            showBackground: false,
+            stickyHeaders: true,
+            selectedNodeId: selectedMarkerId ?? void 0,
+            onNodeClick: handleNodeClick2
+          }
+        )
+      ]
     }
   );
 };
-const SnippetSidePane = React.forwardRef(function SnippetSidePane2({ marker, snippet: snippet2, readFile, onClose }, ref) {
+const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
+  marker,
+  snippet: snippet2,
+  readFile,
+  onClose,
+  drawerHeightPct,
+  disableBottomTransition,
+  expanded,
+  onToggleExpanded
+}, ref) {
   const { theme: theme2 } = useTheme();
   if (!marker.sourcePath) {
-    return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: /* @__PURE__ */ jsx(
-      "div",
+    return /* @__PURE__ */ jsx(
+      SidePaneFrame,
       {
-        style: {
-          fontSize: theme2.fontSizes[0],
-          color: theme2.colors.textSecondary,
-          padding: 8
-        },
-        children: "Marker has no sourcePath; snippet cannot be rendered."
+        ref,
+        marker,
+        onClose,
+        drawerHeightPct,
+        disableBottomTransition,
+        expanded,
+        onToggleExpanded,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              padding: 8
+            },
+            children: "Marker has no sourcePath; snippet cannot be rendered."
+          }
+        )
       }
-    ) });
+    );
   }
   const fileName = marker.sourcePath.split("/").pop() ?? marker.sourcePath;
-  return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: snippet2.kind === "slice" ? /* @__PURE__ */ jsx(
-    TrailSnippetView,
-    {
-      filePath: marker.sourcePath,
-      fileName,
-      startLine: snippet2.startLine,
-      endLine: snippet2.endLine,
-      focusLine: snippet2.focusLine,
-      contextLines: snippet2.contextLines,
-      readFile,
-      background: theme2.colors.background
-    }
-  ) : /* @__PURE__ */ jsx(
-    TrailDiffSnippetView,
+  return /* @__PURE__ */ jsx(
+    SidePaneFrame,
     {
-      filePath: marker.sourcePath,
-      fileName,
-      oldContents: snippet2.oldContents,
-      newContents: snippet2.newContents,
-      readFile,
-      startLine: snippet2.startLine,
-      endLine: snippet2.endLine,
-      focusLine: snippet2.focusLine,
-      contextLines: snippet2.contextLines,
-      diffStyle: snippet2.diffStyle,
-      background: theme2.colors.background
+      ref,
+      marker,
+      onClose,
+      drawerHeightPct,
+      disableBottomTransition,
+      expanded,
+      onToggleExpanded,
+      children: snippet2.kind === "slice" ? /* @__PURE__ */ jsx(
+        TrailSnippetView,
+        {
+          filePath: marker.sourcePath,
+          fileName,
+          startLine: snippet2.startLine,
+          endLine: snippet2.endLine,
+          focusLine: snippet2.focusLine,
+          contextLines: snippet2.contextLines,
+          readFile,
+          background: theme2.colors.background
+        }
+      ) : /* @__PURE__ */ jsx(
+        TrailDiffSnippetView,
+        {
+          filePath: marker.sourcePath,
+          fileName,
+          oldContents: snippet2.oldContents,
+          newContents: snippet2.newContents,
+          readFile,
+          startLine: snippet2.startLine,
+          endLine: snippet2.endLine,
+          focusLine: snippet2.focusLine,
+          contextLines: snippet2.contextLines,
+          diffStyle: snippet2.diffStyle,
+          background: theme2.colors.background
+        }
+      )
     }
-  ) });
+  );
 });
 const SNIPPET_PANE_MIN_WIDTH_PX = 320;
 const SNIPPET_PANE_RESIZE_HANDLE_WIDTH = 6;
 const SidePaneFrame = React.forwardRef(
-  function SidePaneFrame2({ marker, onClose, children: children2 }, ref) {
+  function SidePaneFrame2({
+    marker,
+    onClose,
+    children: children2,
+    drawerHeightPct,
+    disableBottomTransition,
+    expanded,
+    onToggleExpanded
+  }, ref) {
     const { theme: theme2 } = useTheme();
     const [widthPx, setWidthPx] = React.useState(null);
     const [isResizing, setIsResizing] = React.useState(false);
@@ -258924,7 +259504,7 @@ const SidePaneFrame = React.forwardRef(
           position: "absolute",
           top: 16,
           right: 16,
-          bottom: `calc(${SEQUENCE_DRAWER_HEIGHT_PCT}% + 16px)`,
+          bottom: expanded ? `calc(${drawerHeightPct}% + 16px)` : "50%",
           width: widthPx ?? SNIPPET_PANE_WIDTH_PX,
           minWidth: SNIPPET_PANE_MIN_WIDTH_PX,
           backgroundColor: theme2.colors.background,
@@ -258935,6 +259515,11 @@ const SidePaneFrame = React.forwardRef(
           flexDirection: "column",
           overflow: "hidden",
           zIndex: 1900,
+          // Match the sequence drawer's slide animation so the pane
+          // grows/shrinks with the drawer instead of snapping. Skipped
+          // while the drawer is being live-resized so the bottom edge
+          // tracks the cursor without lag.
+          transition: disableBottomTransition ? void 0 : `bottom ${PANEL_TRANSITION_MS}ms ease`,
           userSelect: isResizing ? "none" : void 0
         },
         children: [
@@ -259010,24 +259595,45 @@ const SidePaneFrame = React.forwardRef(
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onClose,
-                    style: {
-                      background: "transparent",
-                      color: theme2.colors.text,
-                      border: `1px solid ${theme2.colors.muted}`,
-                      borderRadius: theme2.radii[2],
-                      padding: "2px 8px",
-                      cursor: "pointer",
-                      fontSize: theme2.fontSizes[0],
-                      fontFamily: theme2.fonts.body,
-                      flexShrink: 0
-                    },
-                    children: "Close"
-                  }
-                )
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexShrink: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: onToggleExpanded,
+                      "aria-pressed": expanded,
+                      title: expanded ? "Collapse to top half (city visible below)" : "Expand to fill the right column",
+                      style: {
+                        background: "transparent",
+                        color: theme2.colors.text,
+                        border: `1px solid ${theme2.colors.muted}`,
+                        borderRadius: theme2.radii[2],
+                        padding: "2px 8px",
+                        cursor: "pointer",
+                        fontSize: theme2.fontSizes[0],
+                        fontFamily: theme2.fonts.body,
+                        lineHeight: 1.2
+                      },
+                      children: expanded ? "▾" : "▴"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "transparent",
+                        color: theme2.colors.text,
+                        border: `1px solid ${theme2.colors.muted}`,
+                        borderRadius: theme2.radii[2],
+                        padding: "2px 8px",
+                        cursor: "pointer",
+                        fontSize: theme2.fontSizes[0],
+                        fontFamily: theme2.fonts.body
+                      },
+                      children: "Close"
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -259042,9 +259648,26 @@ const TrailHeader = ({
   markerCount,
   show3D,
   onToggle3D,
-  hideToggle = false
+  hideToggle = false,
+  showSequenceDrawer,
+  onToggleSequenceDrawer,
+  canExit,
+  onExitTrail
 }) => {
   const { theme: theme2 } = useTheme();
+  const toggleButtonStyle = (active) => ({
+    flexShrink: 0,
+    fontFamily: theme2.fonts.body,
+    fontSize: theme2.fontSizes[0],
+    fontWeight: theme2.fontWeights.medium,
+    color: active ? theme2.colors.background : theme2.colors.text,
+    background: active ? theme2.colors.accent : "transparent",
+    border: `1px solid ${active ? theme2.colors.accent : theme2.colors.muted}`,
+    borderRadius: theme2.radii[3],
+    padding: "4px 10px",
+    cursor: "pointer",
+    lineHeight: 1.2
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -259102,29 +259725,54 @@ const TrailHeader = ({
             ]
           }
         ),
-        hideToggle ? null : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle3D,
-            "aria-pressed": show3D,
-            title: show3D ? "Switch to flat (2D) view" : "Switch to 3D view",
-            style: {
-              flexShrink: 0,
-              fontFamily: theme2.fonts.body,
-              fontSize: theme2.fontSizes[0],
-              fontWeight: theme2.fontWeights.medium,
-              color: show3D ? theme2.colors.background : theme2.colors.text,
-              background: show3D ? theme2.colors.accent : "transparent",
-              border: `1px solid ${show3D ? theme2.colors.accent : theme2.colors.muted}`,
-              borderRadius: theme2.radii[3],
-              padding: "4px 10px",
-              cursor: "pointer",
-              lineHeight: 1.2
-            },
-            children: "3D"
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggleSequenceDrawer,
+              "aria-pressed": showSequenceDrawer,
+              title: showSequenceDrawer ? "Hide sequence diagram" : "Show sequence diagram",
+              style: toggleButtonStyle(showSequenceDrawer),
+              children: "Diagram"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onExitTrail,
+              disabled: !canExit,
+              title: canExit ? "Return to the trail summary" : "Already at the trail summary",
+              style: {
+                flexShrink: 0,
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[0],
+                fontWeight: theme2.fontWeights.medium,
+                color: canExit ? theme2.colors.text : theme2.colors.textTertiary,
+                background: "transparent",
+                border: `1px solid ${theme2.colors.muted}`,
+                borderRadius: theme2.radii[3],
+                padding: "4px 10px",
+                cursor: canExit ? "pointer" : "not-allowed",
+                opacity: canExit ? 1 : 0.5,
+                lineHeight: 1.2
+              },
+              children: "Exit"
+            }
+          ),
+          hideToggle ? null : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggle3D,
+              "aria-pressed": show3D,
+              title: show3D ? "Switch to flat (2D) view" : "Switch to 3D view",
+              style: toggleButtonStyle(show3D),
+              children: "3D"
+            }
+          )
+        ] })
       ]
     }
   );