@industry-theme/file-city-panel 0.5.63 → 0.5.65

package/dist/panels.bundle.js

@@ -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,6 +257806,139 @@ 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 MIN_WIDTH_PX = 360;
@@ -257970,8 +258119,8 @@ const TrailMarkdownOverlay = ({
             ) })
           }
         ),
-        files && files.length > 0 ? /* @__PURE__ */ jsx(TrailFilesList, { files }) : null,
         nav ? /* @__PURE__ */ jsx(TrailMarkdownOverlayFooter, { nav }) : null,
+        files && files.length > 0 ? /* @__PURE__ */ jsx(TrailFilesList, { files }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -258533,9 +258682,8 @@ const pierreOptionsBase = {
 const pierreStyle = {
   display: "block"
 };
-const SEQUENCE_DRAWER_HEIGHT_PCT = 35;
+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 }) => {
@@ -258617,6 +258765,7 @@ const FileCityTrailSequenceLayout = ({
     return;
   }, [hasLineCounts]);
   const effectiveShow3D = false;
+  const [viewMode, setViewMode] = React.useState("city");
   const [showSequenceDrawer, setShowSequenceDrawer] = React.useState(false);
   const [drawerHeightOverridePct, setDrawerHeightOverridePct] = React.useState(null);
   const [isResizingDrawer, setIsResizingDrawer] = React.useState(false);
@@ -258648,6 +258797,10 @@ 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) {
@@ -258756,6 +258909,7 @@ const FileCityTrailSequenceLayout = ({
   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(
@@ -258779,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);
     },
     []
   );
@@ -258844,10 +259010,9 @@ const FileCityTrailSequenceLayout = ({
       if (showSnippetPane && snippetPaneWidth == null) return;
       const FLOAT_INSET2 = 16;
       const leftInset = hasOverlayMarkdown ? markdownOverlayWidth ?? 0 : 0;
-      const snippetW = snippetPaneWidth ?? SNIPPET_PANE_WIDTH_PX;
-      const rightInset = showSnippetPane ? snippetW + FLOAT_INSET2 : 0;
-      const topInset = FLOAT_INSET2;
-      const bottomInset = drawerHeightPct / 100 * containerSize.height;
+      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,
@@ -258920,10 +259085,29 @@ const FileCityTrailSequenceLayout = ({
             onToggleSequenceDrawer: () => {
               setDrawerHeightOverridePct(null);
               setShowSequenceDrawer((v) => !v);
-            }
+            },
+            canExit: selectedMarkerId != null || showSequenceDrawer || snippetExpanded || viewMode !== "city",
+            onExitTrail: () => {
+              onSelectMarker(null);
+              setShowSequenceDrawer(false);
+              setDrawerHeightOverridePct(null);
+              setSnippetExpanded(false);
+              setViewMode("city");
+            },
+            viewMode,
+            onSetViewMode: setViewMode
           }
         ),
-        /* @__PURE__ */ jsxs(
+        viewMode === "doc" ? /* @__PURE__ */ jsx(
+          TrailDocumentView,
+          {
+            markers: markersForThisRepo,
+            summary: trail2.summary,
+            readFile,
+            selectedMarkerId,
+            onSelectMarker
+          }
+        ) : /* @__PURE__ */ jsxs(
           "div",
           {
             ref: containerRef,
@@ -258951,6 +259135,15 @@ const FileCityTrailSequenceLayout = ({
                   defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
                 }
               ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
+              /* @__PURE__ */ jsx(
+                TrailFilePath,
+                {
+                  ref: filePathRef,
+                  containerRef,
+                  buildings: trailPathBuildings,
+                  cityCenter
+                }
+              ),
               /* @__PURE__ */ jsx(
                 TrailLeaderLine,
                 {
@@ -258978,7 +259171,7 @@ const FileCityTrailSequenceLayout = ({
                     onPrev: handleStepPrev,
                     onNext: handleStepNext
                   } : void 0,
-                  files: trailFiles
+                  files: showSequenceDrawer ? void 0 : trailFiles
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -259005,7 +259198,9 @@ const FileCityTrailSequenceLayout = ({
                   readFile,
                   onClose: () => onSelectMarker(null),
                   drawerHeightPct,
-                  disableBottomTransition: isResizingDrawer
+                  disableBottomTransition: isResizingDrawer,
+                  expanded: snippetExpanded,
+                  onToggleExpanded: () => setSnippetExpanded((v) => !v)
                 }
               ) : null
             ]
@@ -259167,7 +259362,9 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
   readFile,
   onClose,
   drawerHeightPct,
-  disableBottomTransition
+  disableBottomTransition,
+  expanded,
+  onToggleExpanded
 }, ref) {
   const { theme: theme2 } = useTheme();
   if (!marker.sourcePath) {
@@ -259179,6 +259376,8 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
         onClose,
         drawerHeightPct,
         disableBottomTransition,
+        expanded,
+        onToggleExpanded,
         children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -259202,6 +259401,8 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
       onClose,
       drawerHeightPct,
       disableBottomTransition,
+      expanded,
+      onToggleExpanded,
       children: snippet2.kind === "slice" ? /* @__PURE__ */ jsx(
         TrailSnippetView,
         {
@@ -259236,7 +259437,15 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
 const SNIPPET_PANE_MIN_WIDTH_PX = 320;
 const SNIPPET_PANE_RESIZE_HANDLE_WIDTH = 6;
 const SidePaneFrame = React.forwardRef(
-  function SidePaneFrame2({ marker, onClose, children: children2, drawerHeightPct, disableBottomTransition }, 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);
@@ -259307,7 +259516,7 @@ const SidePaneFrame = React.forwardRef(
           position: "absolute",
           top: 16,
           right: 16,
-          bottom: `calc(${drawerHeightPct}% + 16px)`,
+          bottom: expanded ? `calc(${drawerHeightPct}% + 16px)` : "50%",
           width: widthPx ?? SNIPPET_PANE_WIDTH_PX,
           minWidth: SNIPPET_PANE_MIN_WIDTH_PX,
           backgroundColor: theme2.colors.background,
@@ -259398,24 +259607,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"
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -259425,6 +259655,251 @@ const SidePaneFrame = React.forwardRef(
     );
   }
 );
+const TrailDocumentView = ({
+  markers,
+  summary,
+  readFile,
+  selectedMarkerId,
+  onSelectMarker
+}) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        overflowX: "hidden",
+        padding: "24px 32px 64px",
+        background: theme2.colors.background
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: 880, margin: "0 auto" }, children: [
+        summary ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[1],
+              lineHeight: 1.6,
+              color: theme2.colors.text,
+              whiteSpace: "pre-wrap",
+              marginBottom: 32,
+              paddingBottom: 24,
+              borderBottom: `1px solid ${theme2.colors.border}`
+            },
+            children: summary
+          }
+        ) : null,
+        markers.length === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[1],
+              color: theme2.colors.textSecondary
+            },
+            children: "No markers in this repo."
+          }
+        ) : markers.map((marker, idx) => /* @__PURE__ */ jsx(
+          TrailDocumentCard,
+          {
+            index: idx,
+            total: markers.length,
+            marker,
+            readFile,
+            isActive: marker.id === selectedMarkerId,
+            onActivate: () => onSelectMarker(
+              marker.id === selectedMarkerId ? null : marker.id
+            )
+          },
+          marker.id
+        ))
+      ] })
+    }
+  );
+};
+const TrailDocumentCard = ({
+  index: index2,
+  total,
+  marker,
+  readFile,
+  isActive,
+  onActivate
+}) => {
+  const { theme: theme2 } = useTheme();
+  const fileName = marker.sourcePath ? marker.sourcePath.split("/").pop() ?? marker.sourcePath : null;
+  const headingLabel = marker.label ?? `Marker ${index2 + 1}`;
+  const snippet2 = marker.snippet;
+  const [snippetExpanded, setSnippetExpanded] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginBottom: 32,
+        border: `1px solid ${isActive ? theme2.colors.accent : theme2.colors.border}`,
+        borderRadius: theme2.radii[3],
+        background: theme2.colors.background,
+        boxShadow: isActive ? `0 0 0 2px ${withAlpha(theme2.colors.accent, 0.18)}` : "none",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onActivate,
+            title: isActive ? "Clear selection" : "Select this marker on the city view",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: 4,
+              width: "100%",
+              textAlign: "left",
+              padding: "16px 20px",
+              background: "transparent",
+              border: "none",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              cursor: "pointer",
+              color: theme2.colors.text
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    letterSpacing: "0.04em",
+                    textTransform: "uppercase"
+                  },
+                  children: [
+                    index2 + 1,
+                    " / ",
+                    total
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.heading,
+                    fontSize: theme2.fontSizes[2],
+                    fontWeight: theme2.fontWeights.semibold,
+                    color: theme2.colors.text
+                  },
+                  children: headingLabel
+                }
+              ),
+              marker.sourcePath ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.monospace,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: marker.sourcePath
+                }
+              ) : null
+            ]
+          }
+        ),
+        marker.description ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[1],
+              lineHeight: 1.6,
+              color: theme2.colors.text,
+              whiteSpace: "pre-wrap",
+              padding: "16px 20px",
+              borderBottom: snippet2 ? `1px solid ${theme2.colors.border}` : "none"
+            },
+            children: marker.description
+          }
+        ) : null,
+        snippet2 && marker.sourcePath ? /* @__PURE__ */ jsxs("div", { style: { background: theme2.colors.background }, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSnippetExpanded((v) => !v),
+              "aria-expanded": snippetExpanded,
+              title: snippetExpanded ? "Hide snippet" : "Show snippet",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                textAlign: "left",
+                padding: "10px 20px",
+                background: "transparent",
+                border: "none",
+                borderBottom: snippetExpanded ? `1px solid ${theme2.colors.border}` : "none",
+                cursor: "pointer",
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[0],
+                fontWeight: theme2.fontWeights.medium,
+                color: theme2.colors.textSecondary,
+                letterSpacing: "0.04em",
+                textTransform: "uppercase"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      display: "inline-block",
+                      width: 10,
+                      transform: snippetExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                      transition: "transform 120ms ease"
+                    },
+                    children: "▶"
+                  }
+                ),
+                snippetExpanded ? "Hide snippet" : "Show snippet"
+              ]
+            }
+          ),
+          snippetExpanded ? /* @__PURE__ */ jsx("div", { style: { padding: 12 }, children: snippet2.kind === "slice" ? /* @__PURE__ */ jsx(
+            TrailSnippetView,
+            {
+              filePath: marker.sourcePath,
+              fileName: fileName ?? marker.sourcePath,
+              startLine: snippet2.startLine,
+              endLine: snippet2.endLine,
+              focusLine: snippet2.focusLine,
+              contextLines: snippet2.contextLines,
+              readFile,
+              background: theme2.colors.background
+            }
+          ) : /* @__PURE__ */ jsx(
+            TrailDiffSnippetView,
+            {
+              filePath: marker.sourcePath,
+              fileName: fileName ?? marker.sourcePath,
+              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
+            }
+          ) }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
 const TrailHeader = ({
   trail: trail2,
   markerCount,
@@ -259432,7 +259907,11 @@ const TrailHeader = ({
   onToggle3D,
   hideToggle = false,
   showSequenceDrawer,
-  onToggleSequenceDrawer
+  onToggleSequenceDrawer,
+  canExit,
+  onExitTrail,
+  viewMode,
+  onSetViewMode
 }) => {
   const { theme: theme2 } = useTheme();
   const toggleButtonStyle = (active) => ({
@@ -259448,11 +259927,28 @@ const TrailHeader = ({
     cursor: "pointer",
     lineHeight: 1.2
   });
+  const segmentStyle = (active, side) => ({
+    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}`,
+    borderTopLeftRadius: side === "left" ? theme2.radii[3] : 0,
+    borderBottomLeftRadius: side === "left" ? theme2.radii[3] : 0,
+    borderTopRightRadius: side === "right" ? theme2.radii[3] : 0,
+    borderBottomRightRadius: side === "right" ? theme2.radii[3] : 0,
+    marginLeft: side === "right" ? -1 : 0,
+    padding: "4px 10px",
+    cursor: "pointer",
+    lineHeight: 1.2
+  });
+  const isDoc = viewMode === "doc";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        height: HEADER_HEIGHT_PX,
         padding: "8px 16px",
         borderBottom: `1px solid ${theme2.colors.border}`,
         display: "flex",
@@ -259506,7 +260002,7 @@ const TrailHeader = ({
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ jsx(
+          isDoc ? null : /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -259517,7 +260013,31 @@ const TrailHeader = ({
               children: "Diagram"
             }
           ),
-          hideToggle ? null : /* @__PURE__ */ jsx(
+          /* @__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 || isDoc ? null : /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -259527,7 +260047,31 @@ const TrailHeader = ({
               style: toggleButtonStyle(show3D),
               children: "3D"
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", marginLeft: 6 }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSetViewMode("city"),
+                "aria-pressed": !isDoc,
+                title: "City view — 3D buildings + sequence drawer",
+                style: segmentStyle(!isDoc, "left"),
+                children: "City"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSetViewMode("doc"),
+                "aria-pressed": isDoc,
+                title: "Document view — scroll all markers as one page",
+                style: segmentStyle(isDoc, "right"),
+                children: "Doc"
+              }
+            )
+          ] })
         ] })
       ]
     }