@industry-theme/file-city-panel 0.5.60 → 0.5.61

package/dist/panels.bundle.js

@@ -253815,12 +253815,12 @@ const PierreFileView = ({
     File$2,
     {
       file: fileObject,
-      options: background ? buildPierreOptions$1(background) : pierreOptions$1,
-      style: pierreStyle$2
+      options: background ? buildPierreOptions$2(background) : pierreOptions$2,
+      style: pierreStyle$4
     }
   );
 };
-const buildBackgroundCSS$1 = (color2) => `
+const buildBackgroundCSS$2 = (color2) => `
   :host {
     background: ${color2} !important;
   }
@@ -253835,19 +253835,19 @@ const buildBackgroundCSS$1 = (color2) => `
     background: ${color2} !important;
   }
 `;
-const pierreOptions$1 = {
+const pierreOptions$2 = {
   disableFileHeader: true
 };
-const buildPierreOptions$1 = (background) => ({
+const buildPierreOptions$2 = (background) => ({
   disableFileHeader: true,
-  unsafeCSS: buildBackgroundCSS$1(background)
+  unsafeCSS: buildBackgroundCSS$2(background)
 });
-const pierreStyle$2 = {
+const pierreStyle$4 = {
   display: "block"
 };
-const MIN_WIDTH_PX$3 = 320;
+const MIN_WIDTH_PX$4 = 320;
 const MIN_LEFT_GAP_PX$2 = 80;
-const RESIZE_HANDLE_WIDTH$3 = 6;
+const RESIZE_HANDLE_WIDTH$4 = 6;
 const FileOverlay = ({
   filePath,
   fileName,
@@ -253876,7 +253876,7 @@ const FileOverlay = ({
     setIsResizing(true);
     const onMove = (ev) => {
       const next2 = Math.max(
-        MIN_WIDTH_PX$3,
+        MIN_WIDTH_PX$4,
         Math.min(parentRect.width - MIN_LEFT_GAP_PX$2, parentRect.right - ev.clientX)
       );
       setWidthPx(next2);
@@ -253926,8 +253926,8 @@ const FileOverlay = ({
               position: "absolute",
               top: 0,
               bottom: 0,
-              left: -RESIZE_HANDLE_WIDTH$3 / 2,
-              width: RESIZE_HANDLE_WIDTH$3,
+              left: -RESIZE_HANDLE_WIDTH$4 / 2,
+              width: RESIZE_HANDLE_WIDTH$4,
               cursor: "col-resize",
               zIndex: 1,
               background: isResizing ? `color-mix(in srgb, ${theme2.colors.primary} 40%, transparent)` : "transparent"
@@ -254911,7 +254911,7 @@ const PierreSnippetView = ({
     [slice, onOpenComposer]
   );
   const options = React.useMemo(() => {
-    const base2 = background ? buildPierreOptions(background) : pierreOptions;
+    const base2 = background ? buildPierreOptions$1(background) : pierreOptions$1;
     return {
       ...base2,
       onPostRender,
@@ -254950,12 +254950,12 @@ const PierreSnippetView = ({
         lineAnnotations,
         renderAnnotation,
         selectedLines: slice.focusOffset != null ? { start: slice.focusOffset, end: slice.focusOffset } : void 0,
-        style: pierreStyle$1
+        style: pierreStyle$3
       }
     )
   ] });
 };
-const buildBackgroundCSS = (color2) => `
+const buildBackgroundCSS$1 = (color2) => `
   :host {
     background: ${color2} !important;
   }
@@ -254970,17 +254970,17 @@ const buildBackgroundCSS = (color2) => `
     background: ${color2} !important;
   }
 `;
-const pierreOptions = {
+const pierreOptions$1 = {
   disableFileHeader: true
 };
-const buildPierreOptions = (background) => ({
+const buildPierreOptions$1 = (background) => ({
   disableFileHeader: true,
-  unsafeCSS: buildBackgroundCSS(background)
+  unsafeCSS: buildBackgroundCSS$1(background)
 });
-const pierreStyle$1 = {
+const pierreStyle$3 = {
   display: "block"
 };
-const sliceWindow = (oldContents, newContents, startLine, endLine, focusLine, contextLines) => {
+const sliceWindow$1 = (oldContents, newContents, startLine, endLine, focusLine, contextLines) => {
   if (startLine == null || endLine == null) {
     return {
       oldText: oldContents,
@@ -255019,7 +255019,7 @@ const PierreSnippetDiffView = ({
 }) => {
   const { theme: theme2 } = useTheme();
   const slice = React.useMemo(
-    () => sliceWindow(
+    () => sliceWindow$1(
       oldContents,
       newContents,
       startLine,
@@ -255062,10 +255062,10 @@ const PierreSnippetDiffView = ({
       FileDiff$2,
       {
         fileDiff,
-        options: { ...pierreOptionsBase, diffStyle },
+        options: { ...pierreOptionsBase$1, diffStyle },
         selectedLines: slice.focusOffset != null ? { start: slice.focusOffset, end: slice.focusOffset } : void 0,
         style: background ? {
-          ...pierreStyle,
+          ...pierreStyle$2,
           // Pierre derives addition/deletion/context/separator surfaces
           // by `color-mix`ing from --diffs-bg, which is keyed off
           // --diffs-light-bg / --diffs-dark-bg. Overriding the source
@@ -255074,15 +255074,15 @@ const PierreSnippetDiffView = ({
           // anchored to our theme background.
           ["--diffs-light-bg"]: background,
           ["--diffs-dark-bg"]: background
-        } : pierreStyle
+        } : pierreStyle$2
       }
     )
   ] });
 };
-const pierreOptionsBase = {
+const pierreOptionsBase$1 = {
   disableFileHeader: true
 };
-const pierreStyle = {
+const pierreStyle$2 = {
   display: "block"
 };
 const toUiNote = (n) => {
@@ -255101,12 +255101,12 @@ const toUiNote = (n) => {
     createdAt: new Date(n.createdAt).getTime()
   };
 };
-const PANEL_WIDTH_PCT$2 = 38;
-const FLOAT_INSET$2 = 16;
-const TOP_INSET$2 = 72;
-const MIN_WIDTH_PX$2 = 360;
+const PANEL_WIDTH_PCT$3 = 38;
+const FLOAT_INSET$3 = 16;
+const TOP_INSET$3 = 72;
+const MIN_WIDTH_PX$3 = 360;
 const MIN_LEFT_GAP_PX$1 = 80;
-const RESIZE_HANDLE_WIDTH$2 = 6;
+const RESIZE_HANDLE_WIDTH$3 = 6;
 const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetailOverlay2({
   event,
   absolutePath,
@@ -255254,15 +255254,15 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
     },
     [deleteSequenceNote, payloadId]
   );
-  const detailWidthCss = widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$2}% - ${FLOAT_INSET$2}px)`;
+  const detailWidthCss = widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$3}% - ${FLOAT_INSET$3}px)`;
   const NOTES_PANEL_WIDTH = 320;
   const NOTES_PANEL_GAP = 12;
   const notesPanelStyle = {
     position: "absolute",
-    top: TOP_INSET$2,
-    bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$2}px)`,
+    top: TOP_INSET$3,
+    bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$3}px)`,
     width: NOTES_PANEL_WIDTH,
-    right: `calc(${detailWidthCss} + ${FLOAT_INSET$2}px + ${NOTES_PANEL_GAP}px)`,
+    right: `calc(${detailWidthCss} + ${FLOAT_INSET$3}px + ${NOTES_PANEL_GAP}px)`,
     // Above the markdown overlay (z 1900) so an open thread wins when the
     // snippet drawer is dragged wide enough that the notes panel reaches the
     // left side of the workspace. The leader-line dot (z 1901) anchors at the
@@ -255286,10 +255286,10 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
     setIsResizing(true);
     const onMove = (ev) => {
       const next2 = Math.max(
-        MIN_WIDTH_PX$2,
+        MIN_WIDTH_PX$3,
         Math.min(
-          parentRect.width - MIN_LEFT_GAP_PX$1 - FLOAT_INSET$2,
-          parentRect.right - FLOAT_INSET$2 - ev.clientX
+          parentRect.width - MIN_LEFT_GAP_PX$1 - FLOAT_INSET$3,
+          parentRect.right - FLOAT_INSET$3 - ev.clientX
         )
       );
       setWidthPx(next2);
@@ -255310,14 +255310,14 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
         onAnimationEnd: () => setHasEntered(true),
         style: {
           position: "absolute",
-          top: TOP_INSET$2,
-          right: FLOAT_INSET$2,
+          top: TOP_INSET$3,
+          right: FLOAT_INSET$3,
           // Anchor the bottom edge (mirroring the markdown overlay) so the
           // panel has a *definite* height — otherwise transient placeholder
           // states like "Loading…" collapse the panel to the content size.
-          bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$2}px)`,
-          width: widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$2}% - ${FLOAT_INSET$2}px)`,
-          minWidth: MIN_WIDTH_PX$2,
+          bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$3}px)`,
+          width: widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$3}% - ${FLOAT_INSET$3}px)`,
+          minWidth: MIN_WIDTH_PX$3,
           backgroundColor: theme2.colors.background,
           border: `1px solid ${theme2.colors.border}`,
           borderRadius: 12,
@@ -255347,8 +255347,8 @@ const SequenceEventDetailOverlay = React.forwardRef(function SequenceEventDetail
                 position: "absolute",
                 top: 0,
                 bottom: 0,
-                left: -RESIZE_HANDLE_WIDTH$2 / 2,
-                width: RESIZE_HANDLE_WIDTH$2,
+                left: -RESIZE_HANDLE_WIDTH$3 / 2,
+                width: RESIZE_HANDLE_WIDTH$3,
                 cursor: "col-resize",
                 zIndex: 1,
                 background: isResizing ? `color-mix(in srgb, ${theme2.colors.primary} 40%, transparent)` : "transparent"
@@ -255572,12 +255572,12 @@ const iconButtonStyle = (color2, disabled = false) => ({
   alignItems: "center",
   opacity: disabled ? 0.5 : 1
 });
-const PANEL_WIDTH_PCT$1 = 38;
-const FLOAT_INSET$1 = 16;
-const TOP_INSET$1 = 72;
-const MIN_WIDTH_PX$1 = 360;
+const PANEL_WIDTH_PCT$2 = 38;
+const FLOAT_INSET$2 = 16;
+const TOP_INSET$2 = 72;
+const MIN_WIDTH_PX$2 = 360;
 const MIN_LEFT_GAP_PX = 80;
-const RESIZE_HANDLE_WIDTH$1 = 6;
+const RESIZE_HANDLE_WIDTH$2 = 6;
 const SequenceFilesOverlay = ({
   steps,
   totalEvents,
@@ -255608,10 +255608,10 @@ const SequenceFilesOverlay = ({
     setIsResizing(true);
     const onMove = (ev) => {
       const next2 = Math.max(
-        MIN_WIDTH_PX$1,
+        MIN_WIDTH_PX$2,
         Math.min(
-          parentRect.width - MIN_LEFT_GAP_PX - FLOAT_INSET$1,
-          parentRect.right - FLOAT_INSET$1 - ev.clientX
+          parentRect.width - MIN_LEFT_GAP_PX - FLOAT_INSET$2,
+          parentRect.right - FLOAT_INSET$2 - ev.clientX
         )
       );
       setWidthPx(next2);
@@ -255631,11 +255631,11 @@ const SequenceFilesOverlay = ({
       onAnimationEnd: () => setHasEntered(true),
       style: {
         position: "absolute",
-        top: TOP_INSET$1,
-        right: FLOAT_INSET$1,
-        bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$1}px)`,
-        width: widthPx != null ? `${widthPx}px` : `calc(${PANEL_WIDTH_PCT$1}% - ${FLOAT_INSET$1}px)`,
-        minWidth: MIN_WIDTH_PX$1,
+        top: TOP_INSET$2,
+        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)`,
+        minWidth: MIN_WIDTH_PX$2,
         backgroundColor: theme2.colors.background,
         border: `1px solid ${theme2.colors.border}`,
         borderRadius: 12,
@@ -255678,8 +255678,8 @@ const SequenceFilesOverlay = ({
               position: "absolute",
               top: 0,
               bottom: 0,
-              left: -RESIZE_HANDLE_WIDTH$1 / 2,
-              width: RESIZE_HANDLE_WIDTH$1,
+              left: -RESIZE_HANDLE_WIDTH$2 / 2,
+              width: RESIZE_HANDLE_WIDTH$2,
               cursor: "col-resize",
               zIndex: 1,
               background: isResizing ? `color-mix(in srgb, ${theme2.colors.primary} 40%, transparent)` : "transparent"
@@ -256358,11 +256358,11 @@ const primaryButton = (theme2) => ({
   fontSize: theme2.fontSizes[0],
   fontWeight: 600
 });
-const PANEL_WIDTH_PCT = 38;
-const FLOAT_INSET = 16;
-const TOP_INSET = 72;
-const MIN_WIDTH_PX = 360;
-const RESIZE_HANDLE_WIDTH = 6;
+const PANEL_WIDTH_PCT$1 = 38;
+const FLOAT_INSET$1 = 16;
+const TOP_INSET$1 = 72;
+const MIN_WIDTH_PX$1 = 360;
+const RESIZE_HANDLE_WIDTH$1 = 6;
 const SequenceMarkdownOverlay = ({
   eyebrow,
   title,
@@ -256449,9 +256449,9 @@ const SequenceMarkdownOverlay = ({
       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$1, parentWidth - FLOAT_INSET$1 * 2);
       const dx = e.clientX - drag2.startX;
-      const next2 = Math.min(maxWidth, Math.max(MIN_WIDTH_PX, drag2.startWidth + dx));
+      const next2 = Math.min(maxWidth, Math.max(MIN_WIDTH_PX$1, drag2.startWidth + dx));
       setWidthPx(next2);
     },
     []
@@ -256475,16 +256475,16 @@ const SequenceMarkdownOverlay = ({
       onAnimationEnd: () => setHasEntered(true),
       style: {
         position: "absolute",
-        top: TOP_INSET,
-        left: FLOAT_INSET,
+        top: TOP_INSET$1,
+        left: FLOAT_INSET$1,
         // Anchor the bottom edge too so the column has a *definite* height —
         // `IndustryMarkdownSlide` renders with `height: 100%` and only
         // engages its internal scroll when the chain of ancestors hands it a
         // resolvable pixel height. A `maxHeight`-only cap on a content-sized
         // flex column doesn't qualify across browsers.
-        bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET}px)`,
-        width: widthPx != null ? widthPx : `calc(${PANEL_WIDTH_PCT}% - ${FLOAT_INSET}px)`,
-        minWidth: MIN_WIDTH_PX,
+        bottom: `calc(${bottomOffsetCss} + ${FLOAT_INSET$1}px)`,
+        width: widthPx != null ? widthPx : `calc(${PANEL_WIDTH_PCT$1}% - ${FLOAT_INSET$1}px)`,
+        minWidth: MIN_WIDTH_PX$1,
         backgroundColor: theme2.colors.background,
         border: `1px solid ${theme2.colors.border}`,
         borderRadius: 12,
@@ -256704,7 +256704,7 @@ const SequenceMarkdownOverlay = ({
               top: 0,
               right: 0,
               bottom: 0,
-              width: RESIZE_HANDLE_WIDTH,
+              width: RESIZE_HANDLE_WIDTH$1,
               cursor: "ew-resize",
               // Subtle painted line on hover/drag so users discover it without
               // bias-distracting the rest of the time.
@@ -257577,188 +257577,1419 @@ const Placeholder = ({ building }) => {
     }
   );
 };
-const focusBuildingTool = {
-  name: "focus_building",
-  description: "Focuses the camera on a specific file (building) in the file city visualization",
-  inputs: {
-    type: "object",
-    properties: {
-      filePath: {
-        type: "string",
-        description: "Path to the file to focus on"
-      },
-      animate: {
-        type: "boolean",
-        description: "Whether to animate the camera transition"
-      }
-    },
-    required: ["filePath"]
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" },
-      message: { type: "string" }
-    }
-  },
-  tags: ["navigation", "camera", "focus"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:focus-building"
-  }
-};
-const selectDistrictTool = {
-  name: "select_district",
-  description: "Selects and highlights a directory (district) in the file city visualization",
-  inputs: {
-    type: "object",
-    properties: {
-      directoryPath: {
-        type: "string",
-        description: "Path to the directory to select"
-      },
-      expandChildren: {
-        type: "boolean",
-        description: "Whether to expand and show child buildings"
-      }
-    },
-    required: ["directoryPath"]
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" },
-      selectedDistrict: { type: "string" }
+function buildSequenceViewInputs(payload, view) {
+  var _a;
+  const markersById = /* @__PURE__ */ new Map();
+  for (const m of payload.markers) markersById.set(m.id, m);
+  const events2 = [];
+  for (const ref of view.markers) {
+    const marker = markersById.get(ref.markerId);
+    if (!marker) {
+      console.warn(
+        `[trail] sequence view references unknown markerId: ${ref.markerId}`
+      );
+      continue;
     }
-  },
-  tags: ["selection", "district", "directory"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:select-district"
+    events2.push({
+      id: marker.id,
+      name: ref.name,
+      label: marker.label,
+      participant: ref.participant,
+      moveEvent: ref.moveEvent,
+      type: ref.type,
+      sourcePath: marker.sourcePath
+    });
   }
-};
-const resetViewTool = {
-  name: "reset_view",
-  description: "Resets the file city view to the default camera position",
-  inputs: {
-    type: "object",
-    properties: {
-      animate: {
-        type: "boolean",
-        description: "Whether to animate the camera reset"
-      }
-    }
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" }
+  if (view.actors) {
+    for (const actor of view.actors) {
+      events2.push({
+        id: `__actor:${actor.name}`,
+        name: actor.name,
+        label: actor.label
+      });
     }
-  },
-  tags: ["navigation", "camera", "reset"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:reset-view"
-  }
-};
-const codeCityPanelTools = [
-  focusBuildingTool,
-  selectDistrictTool,
-  resetViewTool
-];
-const codeCityPanelToolsMetadata = {
-  id: "industry-theme.file-city-panel",
-  name: "File City Panel",
-  description: "Tools provided by the file city visualization panel extension",
-  tools: codeCityPanelTools
-};
-const NpmIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#CB3837", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" }) });
-const YarnIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#2C8EBB", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06z" }) });
-const PnpmIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#F69220", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" }) });
-const BunIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#FBF0DF", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001Z" }) });
-const PackageManagerIcon = ({
-  packageManager,
-  size = 16,
-  color: color2
-}) => {
-  switch (packageManager) {
-    case "npm":
-      return /* @__PURE__ */ jsx(NpmIcon, { size });
-    case "yarn":
-      return /* @__PURE__ */ jsx(YarnIcon, { size });
-    case "pnpm":
-      return /* @__PURE__ */ jsx(PnpmIcon, { size });
-    case "bun":
-      return /* @__PURE__ */ jsx(BunIcon, { size });
-    default:
-      return /* @__PURE__ */ jsx(Package$1, { size, color: color2 });
   }
-};
-const ProjectInfoHeader = ({
-  project,
-  onOpen,
-  compact = false
-}) => {
+  return {
+    events: events2,
+    edges: view.edges,
+    layoutOptions: {
+      laneOrder: (_a = view.layout) == null ? void 0 : _a.laneOrder
+    }
+  };
+}
+const FOV_DEG = 50;
+const FOV_RAD = FOV_DEG * Math.PI / 180;
+const TAN_HALF_FOV = Math.tan(FOV_RAD / 2);
+const FIT_PADDING = 1.08;
+function computeCameraFraming(inputs) {
+  const { canvasW, canvasH, cityBounds, leftInset, rightInset, topInset, bottomInset } = inputs;
+  if (canvasW <= 0 || canvasH <= 0) return null;
+  const citySize = Math.max(
+    cityBounds.maxX - cityBounds.minX,
+    cityBounds.maxZ - cityBounds.minZ
+  );
+  const effectiveAspect = Math.min(1, canvasW / canvasH);
+  const baseline = citySize / (2 * TAN_HALF_FOV * effectiveAspect) * FIT_PADDING;
+  const visW = canvasW - leftInset - rightInset;
+  const visH = canvasH - topInset - bottomInset;
+  if (visW <= 0 || visH <= 0) return null;
+  const fraction = Math.min(visW / canvasW, visH / canvasH);
+  const height = baseline / fraction;
+  const vH = 2 * height * TAN_HALF_FOV;
+  const vW = vH * (canvasW / canvasH);
+  const dxPx = canvasW / 2 - (leftInset + (canvasW - rightInset)) / 2;
+  const dyPx = canvasH / 2 - (topInset + (canvasH - bottomInset)) / 2;
+  const targetX = dxPx * (vW / canvasW);
+  const targetZ = dyPx * (vH / canvasH);
+  return { targetX, targetZ, height };
+}
+const TrailLeaderLine = React.forwardRef(function TrailLeaderLine2({ containerRef, building, cityCenter, targetRef }, ref) {
   const { theme: theme2 } = useTheme();
-  const totalDeps = (project.dependencyCount || 0) + (project.devDependencyCount || 0);
-  const fontSizeSmall = theme2.fontSizes[0];
-  const fontSizeMedium = theme2.fontSizes[1];
-  const fontSizeLarge = theme2.fontSizes[2] || theme2.fontSizes[1];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: compact ? 4 : 8,
-        padding: compact ? "8px 12px" : "12px 16px",
-        backgroundColor: theme2.colors.background,
-        borderBottom: `1px solid ${theme2.colors.border}`,
-        fontFamily: theme2.fonts.body,
-        minHeight: compact ? 48 : "auto"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1, minWidth: 0 }, children: [
-                project.packageManager && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-                  PackageManagerIcon,
-                  {
-                    packageManager: project.packageManager,
-                    size: compact ? 18 : 20,
-                    color: theme2.colors.textSecondary
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: compact ? fontSizeMedium : fontSizeLarge,
-                      fontWeight: 600,
-                      color: theme2.colors.text,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    },
-                    title: project.name,
-                    children: project.name
-                  }
-                ),
-                project.version && /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: fontSizeSmall,
-                      color: theme2.colors.textSecondary,
-                      backgroundColor: theme2.colors.backgroundLight,
+  const color2 = theme2.colors.primary ?? "#22d3ee";
+  const pathRef = React.useRef(null);
+  const buildingMarkerRef = React.useRef(null);
+  const nodeMarkerRef = React.useRef(null);
+  const projectScratch = React.useRef(new THREE.Vector3());
+  const buildingRef = React.useRef(building);
+  const cityCenterRef = React.useRef(cityCenter);
+  React.useEffect(() => {
+    buildingRef.current = building;
+  }, [building]);
+  React.useEffect(() => {
+    cityCenterRef.current = cityCenter;
+  }, [cityCenter]);
+  const hideAll = React.useCallback(() => {
+    var _a, _b, _c;
+    (_a = pathRef.current) == null ? void 0 : _a.setAttribute("opacity", "0");
+    (_b = buildingMarkerRef.current) == null ? void 0 : _b.setAttribute("opacity", "0");
+    (_c = nodeMarkerRef.current) == null ? void 0 : _c.setAttribute("opacity", "0");
+  }, []);
+  React.useEffect(() => {
+    if (!building) hideAll();
+  }, [building, hideAll]);
+  const onCameraFrame = React.useCallback(
+    (camera, size) => {
+      const target = buildingRef.current;
+      const center = cityCenterRef.current;
+      const container = containerRef.current;
+      const nodeEl = targetRef.current;
+      if (!target || !center || !nodeEl || !container || size.width === 0) {
+        hideAll();
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const nodeRect = nodeEl.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 v = projectScratch.current;
+      v.set(
+        target.position.x - center.x,
+        0,
+        target.position.z - center.z
+      ).project(camera);
+      const behindCamera = v.z > 1;
+      if (behindCamera) {
+        hideAll();
+        return;
+      }
+      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 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 pathEl = pathRef.current;
+      const buildingEl = buildingMarkerRef.current;
+      const nodeMarkerEl = nodeMarkerRef.current;
+      if (pathEl) {
+        pathEl.setAttribute("d", d);
+        pathEl.setAttribute("stroke", color2);
+        pathEl.setAttribute("opacity", "0.85");
+      }
+      if (buildingEl) {
+        buildingEl.setAttribute("x", String(sx - 3.5));
+        buildingEl.setAttribute("y", String(sy - 3.5));
+        buildingEl.setAttribute("fill", color2);
+        buildingEl.setAttribute("opacity", "1");
+      }
+      if (nodeMarkerEl) {
+        nodeMarkerEl.setAttribute("cx", String(bx));
+        nodeMarkerEl.setAttribute("cy", String(by));
+        nodeMarkerEl.setAttribute("fill", color2);
+        nodeMarkerEl.setAttribute("opacity", "1");
+      }
+    },
+    [containerRef, targetRef, hideAll, color2]
+  );
+  React.useImperativeHandle(ref, () => ({ onCameraFrame }), [onCameraFrame]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "100%",
+        height: "100%",
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          overflow: "visible",
+          // Above the 3D canvas (auto z-index) but below the floating
+          // overlays (z 1900), so the line only paints over the city.
+          zIndex: 25
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ref: pathRef,
+              fill: "none",
+              strokeWidth: 1.75,
+              strokeDasharray: "5 4",
+              opacity: 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              ref: buildingMarkerRef,
+              width: 7,
+              height: 7,
+              stroke: "#0f1419",
+              strokeWidth: 1.25,
+              opacity: 0
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "100%",
+        height: "100%",
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          overflow: "visible",
+          zIndex: 1901
+        },
+        children: /* @__PURE__ */ jsx("circle", { ref: nodeMarkerRef, r: 3.5, 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 = ({
+  eyebrow,
+  title,
+  markdown: markdown2,
+  slideIdPrefix,
+  bottomOffset,
+  containerRef: externalContainerRef
+}) => {
+  const { theme: theme2 } = useTheme();
+  const body = markdown2.trim();
+  const bottomOffsetCss = typeof bottomOffset === "number" ? `${bottomOffset}px` : bottomOffset;
+  const [hasEntered, setHasEntered] = React.useState(false);
+  const [widthPx, setWidthPx] = React.useState(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const setContainerRef = React.useCallback(
+    (node2) => {
+      containerRef.current = node2;
+      if (typeof externalContainerRef === "function") {
+        externalContainerRef(node2);
+      } else if (externalContainerRef) {
+        externalContainerRef.current = node2;
+      }
+    },
+    [externalContainerRef]
+  );
+  const dragStateRef = React.useRef(null);
+  const handleResizePointerDown = React.useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      const el = containerRef.current;
+      if (!el) return;
+      e.preventDefault();
+      dragStateRef.current = {
+        startX: e.clientX,
+        startWidth: el.getBoundingClientRect().width
+      };
+      setIsResizing(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    []
+  );
+  const handleResizePointerMove = React.useCallback(
+    (e) => {
+      var _a;
+      const drag2 = dragStateRef.current;
+      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 dx = e.clientX - drag2.startX;
+      const next2 = Math.min(maxWidth, Math.max(MIN_WIDTH_PX, drag2.startWidth + dx));
+      setWidthPx(next2);
+    },
+    []
+  );
+  const handleResizePointerUp = React.useCallback(
+    (e) => {
+      if (!dragStateRef.current) return;
+      dragStateRef.current = null;
+      setIsResizing(false);
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    },
+    []
+  );
+  if (!body) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setContainerRef,
+      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)`,
+        minWidth: MIN_WIDTH_PX,
+        backgroundColor: theme2.colors.background,
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: 12,
+        overflow: "hidden",
+        boxShadow: "0 12px 32px rgba(0, 0, 0, 0.28)",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 1900,
+        animation: hasEntered || isResizing ? void 0 : "trailMarkdownOverlaySlideIn 220ms ease-out",
+        userSelect: isResizing ? "none" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes trailMarkdownOverlaySlideIn {
+          from { transform: translateX(-100%); }
+          to { transform: translateX(0); }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              flexDirection: "column",
+              color: theme2.colors.text,
+              fontFamily: theme2.fonts.body,
+              flexShrink: 0,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    letterSpacing: 0.4,
+                    textTransform: "uppercase"
+                  },
+                  children: eyebrow
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: 600,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title,
+                  children: title
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 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
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "Resize markdown panel",
+            onPointerDown: handleResizePointerDown,
+            onPointerMove: handleResizePointerMove,
+            onPointerUp: handleResizePointerUp,
+            onPointerCancel: handleResizePointerUp,
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: RESIZE_HANDLE_WIDTH,
+              cursor: "ew-resize",
+              backgroundColor: isResizing ? theme2.colors.accent : "transparent",
+              transition: isResizing ? void 0 : "background-color 120ms ease",
+              touchAction: "none"
+            },
+            onMouseEnter: (e) => {
+              if (isResizing) return;
+              e.currentTarget.style.backgroundColor = theme2.colors.border;
+            },
+            onMouseLeave: (e) => {
+              if (isResizing) return;
+              e.currentTarget.style.backgroundColor = "transparent";
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const TrailSnippetView = ({
+  filePath,
+  fileName,
+  startLine,
+  endLine,
+  focusLine,
+  contextLines = 2,
+  readFile,
+  background
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [contents, setContents] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    setContents(null);
+    setError(null);
+    readFile(filePath).then((content2) => {
+      if (cancelled) return;
+      setContents(content2);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err.message : "Failed to read file");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [filePath, readFile]);
+  const slice = React.useMemo(() => {
+    if (contents == null) return null;
+    const allLines = contents.split("\n");
+    const total = allLines.length;
+    const safeStart = Math.max(1, Math.min(startLine, total));
+    const safeEnd = Math.max(safeStart, Math.min(endLine, total));
+    const sliceStart = Math.max(1, safeStart - contextLines);
+    const sliceEnd = Math.min(total, safeEnd + contextLines);
+    return {
+      contents: allLines.slice(sliceStart - 1, sliceEnd).join("\n"),
+      sliceStart,
+      sliceEnd,
+      focusOffset: focusLine == null ? null : Math.max(1, focusLine - sliceStart + 1)
+    };
+  }, [contents, startLine, endLine, contextLines, focusLine]);
+  const fileObject = React.useMemo(
+    () => slice ? { name: fileName, contents: slice.contents } : null,
+    [fileName, slice]
+  );
+  const lineNumberOffset = slice ? slice.sliceStart - 1 : 0;
+  const onPostRender = React.useCallback(
+    (fileContainer) => {
+      if (lineNumberOffset === 0) return;
+      const root2 = fileContainer.shadowRoot ?? fileContainer;
+      const items = root2.querySelectorAll(
+        "[data-column-number][data-line-index]"
+      );
+      items.forEach((el) => {
+        const idxStr = el.dataset.lineIndex;
+        if (idxStr == null) return;
+        const idx = Number.parseInt(idxStr, 10);
+        if (Number.isNaN(idx)) return;
+        const display = String(idx + 1 + lineNumberOffset);
+        const span = el.querySelector(
+          "[data-line-number-content]"
+        );
+        if (span && span.textContent !== display) {
+          span.textContent = display;
+        }
+      });
+    },
+    [lineNumberOffset]
+  );
+  const options = React.useMemo(() => {
+    const base2 = background ? buildPierreOptions(background) : pierreOptions;
+    return { ...base2, onPostRender };
+  }, [background, onPostRender]);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.error }, children: error });
+  }
+  if (!fileObject || !slice) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.textSecondary }, children: "Loading…" });
+  }
+  const rangeLabel = slice.sliceStart === slice.sliceEnd ? `Line ${slice.sliceStart}` : `Lines ${slice.sliceStart}–${slice.sliceEnd}`;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "4px 14px 6px",
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary,
+          letterSpacing: 0.4,
+          textTransform: "uppercase"
+        },
+        children: rangeLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      File$2,
+      {
+        file: fileObject,
+        options,
+        selectedLines: slice.focusOffset != null ? { start: slice.focusOffset, end: slice.focusOffset } : void 0,
+        style: pierreStyle$1
+      }
+    )
+  ] });
+};
+const buildBackgroundCSS = (color2) => `
+  :host {
+    background: ${color2} !important;
+  }
+  pre, code,
+  [data-gutter], [data-content],
+  [data-line], [data-column-number],
+  [data-gutter-buffer], [data-line-annotation], [data-no-newline],
+  [data-separator], [data-separator-wrapper] {
+    background: ${color2} !important;
+  }
+  [data-line] span {
+    background: ${color2} !important;
+  }
+`;
+const pierreOptions = {
+  disableFileHeader: true
+};
+const buildPierreOptions = (background) => ({
+  disableFileHeader: true,
+  unsafeCSS: buildBackgroundCSS(background)
+});
+const pierreStyle$1 = {
+  display: "block"
+};
+const sliceWindow = (oldContents, newContents, startLine, endLine, focusLine, contextLines) => {
+  if (startLine == null || endLine == null) {
+    return {
+      oldText: oldContents,
+      newText: newContents,
+      windowStart: 1,
+      focusOffset: focusLine ?? null
+    };
+  }
+  const oldLines = oldContents.split("\n");
+  const newLines = newContents.split("\n");
+  const totalNew = newLines.length;
+  const totalOld = oldLines.length;
+  const safeStart = Math.max(1, Math.min(startLine, totalNew));
+  const safeEnd = Math.max(safeStart, Math.min(endLine, totalNew));
+  const sliceStart = Math.max(1, safeStart - contextLines);
+  const sliceEnd = Math.min(
+    Math.max(totalOld, totalNew),
+    safeEnd + contextLines
+  );
+  const sliceOldEnd = Math.min(totalOld, sliceEnd);
+  const sliceNewEnd = Math.min(totalNew, sliceEnd);
+  return {
+    oldText: oldLines.slice(sliceStart - 1, sliceOldEnd).join("\n"),
+    newText: newLines.slice(sliceStart - 1, sliceNewEnd).join("\n"),
+    windowStart: sliceStart,
+    focusOffset: focusLine == null ? null : Math.max(1, focusLine - sliceStart + 1)
+  };
+};
+const TrailDiffSnippetView = ({
+  filePath,
+  fileName,
+  oldContents,
+  newContents,
+  readFile,
+  startLine,
+  endLine,
+  focusLine,
+  contextLines = 2,
+  background,
+  diffStyle = "unified"
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [resolvedNew, setResolvedNew] = React.useState(
+    newContents ?? null
+  );
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    if (newContents !== void 0) {
+      setResolvedNew(newContents);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setResolvedNew(null);
+    setError(null);
+    readFile(filePath).then((content2) => {
+      if (cancelled) return;
+      setResolvedNew(content2);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err.message : "Failed to read file");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [filePath, newContents, readFile]);
+  const slice = React.useMemo(
+    () => resolvedNew == null ? null : sliceWindow(
+      oldContents,
+      resolvedNew,
+      startLine,
+      endLine,
+      focusLine,
+      contextLines
+    ),
+    [oldContents, resolvedNew, startLine, endLine, focusLine, contextLines]
+  );
+  const fileDiff = React.useMemo(() => {
+    if (!slice) return null;
+    try {
+      return parseDiffFromFile(
+        { name: fileName, contents: slice.oldText },
+        { name: fileName, contents: slice.newText }
+      );
+    } catch {
+      return null;
+    }
+  }, [fileName, slice]);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.error }, children: error });
+  }
+  if (!slice) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.textSecondary }, children: "Loading…" });
+  }
+  if (!fileDiff) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.error }, children: "Failed to compute diff" });
+  }
+  const rangeLabel = startLine != null && endLine != null ? startLine === endLine ? `Line ${startLine}` : `Lines ${startLine}–${endLine}` : null;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+    rangeLabel && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "4px 14px 6px",
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary,
+          letterSpacing: 0.4,
+          textTransform: "uppercase"
+        },
+        children: rangeLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FileDiff$2,
+      {
+        fileDiff,
+        options: { ...pierreOptionsBase, diffStyle },
+        selectedLines: slice.focusOffset != null ? { start: slice.focusOffset, end: slice.focusOffset } : void 0,
+        style: background ? {
+          ...pierreStyle,
+          // Pierre derives addition/deletion/context surfaces by
+          // `color-mix`ing from --diffs-bg, which is keyed off
+          // --diffs-light-bg / --diffs-dark-bg. Overriding the
+          // source variables recolors the whole palette coherently.
+          ["--diffs-light-bg"]: background,
+          ["--diffs-dark-bg"]: background
+        } : pierreStyle
+      }
+    )
+  ] });
+};
+const pierreOptionsBase = {
+  disableFileHeader: true
+};
+const pierreStyle = {
+  display: "block"
+};
+const SEQUENCE_DRAWER_HEIGHT_PCT = 38;
+const SNIPPET_PANE_WIDTH_PX = 460;
+const HEADER_HEIGHT_PX = 48;
+const SNIPPET_PANE_BG = "#0b0f14";
+const FileCityTrailExplorerPanel = ({ context, actions }) => {
+  var _a;
+  const tree = context.fileTree.data;
+  const lineCounts = ((_a = context.lineCounts.data) == null ? void 0 : _a.lineCounts) ?? null;
+  const trail2 = context.trail.data;
+  const repository = context.repository;
+  const cityData = React.useMemo(
+    () => tree ? buildCityDataFromContext({ fileTree: tree, lineCounts }) : null,
+    [tree, lineCounts]
+  );
+  const [selectedMarkerId, setSelectedMarkerId] = React.useState(null);
+  React.useEffect(() => {
+    setSelectedMarkerId(null);
+  }, [trail2 == null ? void 0 : trail2.id]);
+  const markersForThisRepo = React.useMemo(() => {
+    if (!trail2) return [];
+    return filterMarkersForRepo(trail2, repository);
+  }, [trail2, repository]);
+  if (!trail2) {
+    return /* @__PURE__ */ jsx(
+      FileCityTrailExplorerEmptyState,
+      {
+        message: "No trail loaded.",
+        cityData
+      }
+    );
+  }
+  const view = trail2.views[0];
+  if (!view) {
+    return /* @__PURE__ */ jsx(
+      FileCityTrailExplorerEmptyState,
+      {
+        message: "Trail has no views.",
+        cityData
+      }
+    );
+  }
+  if (view.kind !== "sequence") {
+    return /* @__PURE__ */ jsx(
+      FileCityTrailExplorerEmptyState,
+      {
+        message: `Unsupported view kind: ${view.kind}. v1 only renders kind:'sequence'.`,
+        cityData
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FileCityTrailSequenceLayout,
+    {
+      trail: trail2,
+      view,
+      markersForThisRepo,
+      selectedMarkerId,
+      onSelectMarker: setSelectedMarkerId,
+      cityData,
+      readFile: actions.readFile
+    }
+  );
+};
+const FileCityTrailSequenceLayout = ({
+  trail: trail2,
+  view,
+  markersForThisRepo,
+  selectedMarkerId,
+  onSelectMarker,
+  cityData,
+  readFile
+}) => {
+  var _a, _b;
+  const selectedMarker = React.useMemo(() => {
+    if (!selectedMarkerId) return null;
+    return trail2.markers.find((m) => m.id === selectedMarkerId) ?? null;
+  }, [trail2.markers, selectedMarkerId]);
+  const markerBySourcePathForThisRepo = React.useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    for (const m of markersForThisRepo) {
+      if (m.sourcePath) map2.set(m.sourcePath, m);
+    }
+    return map2;
+  }, [markersForThisRepo]);
+  const handleBuildingClick = React.useCallback(
+    (building) => {
+      const marker = markerBySourcePathForThisRepo.get(building.path);
+      if (!marker) return;
+      onSelectMarker(selectedMarkerId === marker.id ? null : marker.id);
+    },
+    [markerBySourcePathForThisRepo, selectedMarkerId, onSelectMarker]
+  );
+  const containerRef = React.useRef(null);
+  const snippetPaneRef = React.useRef(null);
+  const leaderLineRef = React.useRef(null);
+  const [markdownOverlayWidth, setMarkdownOverlayWidth] = React.useState(null);
+  const [containerSize, setContainerSize] = React.useState(null);
+  const selectedBuilding = React.useMemo(() => {
+    if (!cityData || !(selectedMarker == null ? void 0 : selectedMarker.sourcePath)) return null;
+    const path2 = selectedMarker.sourcePath;
+    return cityData.buildings.find((b) => b.path === path2) ?? cityData.buildings.find((b) => b.path.endsWith(`/${path2}`)) ?? null;
+  }, [cityData, selectedMarker]);
+  const cityCenter = React.useMemo(() => {
+    if (!cityData) return null;
+    return {
+      x: (cityData.bounds.minX + cityData.bounds.maxX) / 2,
+      z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2
+    };
+  }, [cityData]);
+  const onCameraFrame = React.useCallback(
+    (camera, size) => {
+      var _a2;
+      (_a2 = leaderLineRef.current) == null ? void 0 : _a2.onCameraFrame(camera, size);
+    },
+    []
+  );
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setContainerSize({ width: rect.width, height: rect.height });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const [markdownOverlayEl, setMarkdownOverlayEl] = React.useState(null);
+  React.useEffect(() => {
+    if (!markdownOverlayEl) {
+      setMarkdownOverlayWidth(null);
+      return;
+    }
+    const update = () => setMarkdownOverlayWidth(markdownOverlayEl.getBoundingClientRect().width);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(markdownOverlayEl);
+    return () => observer.disconnect();
+  }, [markdownOverlayEl]);
+  const overlayMarkdown = ((_a = selectedMarker == null ? void 0 : selectedMarker.description) == null ? void 0 : _a.trim()) ? {
+    eyebrow: "Marker",
+    title: selectedMarker.label ?? selectedMarker.id,
+    markdown: selectedMarker.description,
+    slideIdPrefix: `trail-${trail2.id}-marker-${selectedMarker.id}`
+  } : ((_b = trail2.summary) == null ? void 0 : _b.trim()) ? {
+    eyebrow: "Trail",
+    title: trail2.title,
+    markdown: trail2.summary,
+    slideIdPrefix: `trail-${trail2.id}-summary`
+  } : null;
+  const hasOverlayMarkdown = overlayMarkdown != null;
+  const showSnippetPane = !!(selectedMarker == null ? void 0 : selectedMarker.snippet);
+  React.useEffect(() => {
+    if (!cityData || !containerSize) return;
+    let cancelled = false;
+    let waitId = null;
+    const apply = () => {
+      if (cancelled) return;
+      if (hasOverlayMarkdown && markdownOverlayWidth == null) return;
+      const FLOAT_INSET2 = 16;
+      const leftInset = hasOverlayMarkdown ? FLOAT_INSET2 + (markdownOverlayWidth ?? 0) : 0;
+      const snippetW = Math.min(
+        SNIPPET_PANE_WIDTH_PX,
+        containerSize.width / 2
+      );
+      const rightInset = showSnippetPane ? snippetW + FLOAT_INSET2 : 0;
+      const topInset = FLOAT_INSET2;
+      const bottomInset = SEQUENCE_DRAWER_HEIGHT_PCT / 100 * containerSize.height;
+      const result = computeCameraFraming({
+        canvasW: containerSize.width,
+        canvasH: containerSize.height,
+        cityBounds: cityData.bounds,
+        leftInset,
+        rightInset,
+        topInset,
+        bottomInset
+      });
+      if (!result) return;
+      setCameraFlatView(result.targetX, result.targetZ, result.height, {
+        duration: 400
+      });
+    };
+    const handle2 = setTimeout(() => {
+      if (getCameraPosition() != null) {
+        apply();
+        return;
+      }
+      let waited = 0;
+      waitId = setInterval(() => {
+        waited += 50;
+        if (cancelled) return;
+        if (getCameraPosition() != null) {
+          if (waitId) clearInterval(waitId);
+          waitId = null;
+          apply();
+        } else if (waited >= 3e3) {
+          if (waitId) clearInterval(waitId);
+          waitId = null;
+        }
+      }, 50);
+    }, 350);
+    return () => {
+      cancelled = true;
+      clearTimeout(handle2);
+      if (waitId) clearInterval(waitId);
+    };
+  }, [
+    cityData,
+    containerSize,
+    showSnippetPane,
+    hasOverlayMarkdown,
+    markdownOverlayWidth
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#0b0f14",
+        color: "#e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsx(TrailHeader, { trail: trail2, markerCount: markersForThisRepo.length }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            style: {
+              flex: 1,
+              position: "relative",
+              minHeight: 0,
+              overflow: "hidden"
+            },
+            children: [
+              cityData ? /* @__PURE__ */ jsx(
+                FileCity3D,
+                {
+                  cityData,
+                  width: "100%",
+                  height: "100%",
+                  selectedPath: (selectedMarker == null ? void 0 : selectedMarker.sourcePath) ?? null,
+                  onBuildingClick: handleBuildingClick,
+                  onCameraFrame,
+                  showControls: false,
+                  backgroundColor: "#0b0f14"
+                }
+              ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
+              /* @__PURE__ */ jsx(
+                TrailLeaderLine,
+                {
+                  ref: leaderLineRef,
+                  containerRef,
+                  building: selectedBuilding,
+                  cityCenter,
+                  targetRef: snippetPaneRef
+                }
+              ),
+              overlayMarkdown ? /* @__PURE__ */ jsx(
+                TrailMarkdownOverlay,
+                {
+                  eyebrow: overlayMarkdown.eyebrow,
+                  title: overlayMarkdown.title,
+                  markdown: overlayMarkdown.markdown,
+                  slideIdPrefix: overlayMarkdown.slideIdPrefix,
+                  bottomOffset: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
+                  containerRef: setMarkdownOverlayEl
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                SequenceDrawer,
+                {
+                  trail: trail2,
+                  view,
+                  selectedMarkerId,
+                  onSelectMarker
+                }
+              ),
+              (selectedMarker == null ? void 0 : selectedMarker.snippet) ? /* @__PURE__ */ jsx(
+                SnippetSidePane,
+                {
+                  ref: snippetPaneRef,
+                  marker: selectedMarker,
+                  snippet: selectedMarker.snippet,
+                  readFile,
+                  onClose: () => onSelectMarker(null)
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const SequenceDrawer = ({
+  trail: trail2,
+  view,
+  selectedMarkerId,
+  onSelectMarker
+}) => {
+  const inputs = React.useMemo(
+    () => buildSequenceViewInputs(trail2, view),
+    [trail2, view]
+  );
+  const handleNodeClick2 = React.useCallback(
+    (nodeId) => {
+      if (nodeId.startsWith("__actor:")) return;
+      onSelectMarker(selectedMarkerId === nodeId ? null : nodeId);
+    },
+    [onSelectMarker, selectedMarkerId]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: `${SEQUENCE_DRAWER_HEIGHT_PCT}%`,
+        backgroundColor: "rgba(11, 15, 20, 0.92)",
+        borderTop: "1px solid #1f2937",
+        zIndex: 10
+      },
+      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
+        }
+      )
+    }
+  );
+};
+const SnippetSidePane = React.forwardRef(function SnippetSidePane2({ marker, snippet: snippet2, readFile, onClose }, ref) {
+  if (!marker.sourcePath) {
+    return /* @__PURE__ */ jsx(SidePaneFrame, { ref, marker, onClose, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 11, opacity: 0.6, 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: SNIPPET_PANE_BG
+    }
+  ) : /* @__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: SNIPPET_PANE_BG
+    }
+  ) });
+});
+const SidePaneFrame = React.forwardRef(
+  function SidePaneFrame2({ marker, onClose, children: children2 }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          top: 16,
+          right: 16,
+          bottom: `calc(${SEQUENCE_DRAWER_HEIGHT_PCT}% + 16px)`,
+          width: SNIPPET_PANE_WIDTH_PX,
+          maxWidth: "50%",
+          backgroundColor: SNIPPET_PANE_BG,
+          border: "1px solid #1f2937",
+          borderRadius: 12,
+          boxShadow: "-2px 0 12px rgba(0,0,0,0.35)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          zIndex: 1900
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: 8,
+                padding: "10px 14px",
+                borderBottom: "1px solid #1f2937",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600 }, children: marker.label ?? marker.id }),
+                  marker.sourcePath ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: 11,
+                        opacity: 0.6,
+                        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+                        marginTop: 2,
+                        wordBreak: "break-all"
+                      },
+                      children: marker.sourcePath
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    style: {
+                      background: "transparent",
+                      color: "#e5e7eb",
+                      border: "1px solid #374151",
+                      borderRadius: 4,
+                      padding: "2px 8px",
+                      cursor: "pointer",
+                      fontSize: 11,
+                      flexShrink: 0
+                    },
+                    children: "Close"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: children2 })
+        ]
+      }
+    );
+  }
+);
+const TrailHeader = ({ trail: trail2, markerCount }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: HEADER_HEIGHT_PX,
+        padding: "8px 16px",
+        borderBottom: "1px solid #1f2937",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: 2,
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: trail2.title }),
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
+          markerCount,
+          " marker",
+          markerCount === 1 ? "" : "s",
+          " in this repo"
+        ] })
+      ]
+    }
+  );
+};
+const FileCityTrailExplorerEmptyState = ({
+  message,
+  cityData
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#0b0f14",
+        color: "#e5e7eb"
+      },
+      children: [
+        cityData ? /* @__PURE__ */ jsx(
+          FileCity3D,
+          {
+            cityData,
+            width: "100%",
+            height: "100%",
+            showControls: false,
+            backgroundColor: "#0b0f14"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 16,
+              backgroundColor: cityData ? "rgba(11, 15, 20, 0.6)" : void 0,
+              opacity: 0.85,
+              fontSize: 13
+            },
+            children: message
+          }
+        )
+      ]
+    }
+  );
+};
+const CityLoadingPlaceholder = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: 0.5,
+      fontSize: 12
+    },
+    children: "Building the city…"
+  }
+);
+function filterMarkersForRepo(trail2, repository) {
+  const repos = trail2.repos ?? [];
+  if (repos.length <= 1 || !repository) {
+    return trail2.markers;
+  }
+  return trail2.markers.filter((m) => m.repo === repository.id);
+}
+const focusBuildingTool = {
+  name: "focus_building",
+  description: "Focuses the camera on a specific file (building) in the file city visualization",
+  inputs: {
+    type: "object",
+    properties: {
+      filePath: {
+        type: "string",
+        description: "Path to the file to focus on"
+      },
+      animate: {
+        type: "boolean",
+        description: "Whether to animate the camera transition"
+      }
+    },
+    required: ["filePath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      message: { type: "string" }
+    }
+  },
+  tags: ["navigation", "camera", "focus"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:focus-building"
+  }
+};
+const selectDistrictTool = {
+  name: "select_district",
+  description: "Selects and highlights a directory (district) in the file city visualization",
+  inputs: {
+    type: "object",
+    properties: {
+      directoryPath: {
+        type: "string",
+        description: "Path to the directory to select"
+      },
+      expandChildren: {
+        type: "boolean",
+        description: "Whether to expand and show child buildings"
+      }
+    },
+    required: ["directoryPath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      selectedDistrict: { type: "string" }
+    }
+  },
+  tags: ["selection", "district", "directory"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:select-district"
+  }
+};
+const resetViewTool = {
+  name: "reset_view",
+  description: "Resets the file city view to the default camera position",
+  inputs: {
+    type: "object",
+    properties: {
+      animate: {
+        type: "boolean",
+        description: "Whether to animate the camera reset"
+      }
+    }
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" }
+    }
+  },
+  tags: ["navigation", "camera", "reset"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:reset-view"
+  }
+};
+const codeCityPanelTools = [
+  focusBuildingTool,
+  selectDistrictTool,
+  resetViewTool
+];
+const codeCityPanelToolsMetadata = {
+  id: "industry-theme.file-city-panel",
+  name: "File City Panel",
+  description: "Tools provided by the file city visualization panel extension",
+  tools: codeCityPanelTools
+};
+const NpmIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#CB3837", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" }) });
+const YarnIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#2C8EBB", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06z" }) });
+const PnpmIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#F69220", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" }) });
+const BunIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "#FBF0DF", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001Z" }) });
+const PackageManagerIcon = ({
+  packageManager,
+  size = 16,
+  color: color2
+}) => {
+  switch (packageManager) {
+    case "npm":
+      return /* @__PURE__ */ jsx(NpmIcon, { size });
+    case "yarn":
+      return /* @__PURE__ */ jsx(YarnIcon, { size });
+    case "pnpm":
+      return /* @__PURE__ */ jsx(PnpmIcon, { size });
+    case "bun":
+      return /* @__PURE__ */ jsx(BunIcon, { size });
+    default:
+      return /* @__PURE__ */ jsx(Package$1, { size, color: color2 });
+  }
+};
+const ProjectInfoHeader = ({
+  project,
+  onOpen,
+  compact = false
+}) => {
+  const { theme: theme2 } = useTheme();
+  const totalDeps = (project.dependencyCount || 0) + (project.devDependencyCount || 0);
+  const fontSizeSmall = theme2.fontSizes[0];
+  const fontSizeMedium = theme2.fontSizes[1];
+  const fontSizeLarge = theme2.fontSizes[2] || theme2.fontSizes[1];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: compact ? 4 : 8,
+        padding: compact ? "8px 12px" : "12px 16px",
+        backgroundColor: theme2.colors.background,
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        fontFamily: theme2.fonts.body,
+        minHeight: compact ? 48 : "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1, minWidth: 0 }, children: [
+                project.packageManager && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                  PackageManagerIcon,
+                  {
+                    packageManager: project.packageManager,
+                    size: compact ? 18 : 20,
+                    color: theme2.colors.textSecondary
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: compact ? fontSizeMedium : fontSizeLarge,
+                      fontWeight: 600,
+                      color: theme2.colors.text,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    title: project.name,
+                    children: project.name
+                  }
+                ),
+                project.version && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: fontSizeSmall,
+                      color: theme2.colors.textSecondary,
+                      backgroundColor: theme2.colors.backgroundLight,
                       padding: "2px 6px",
                       borderRadius: "4px",
                       flexShrink: 0
@@ -258301,6 +259532,32 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("File City Explorer Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "principal-ade.file-city-trail-explorer-panel",
+      name: "File City Trail Explorer",
+      icon: "🥾",
+      version: "0.1.0",
+      author: "Principal AI",
+      description: "3D file-city visualization for trails — the new authored-walkthrough medium. See docs/TRAIL_RENAME.md.",
+      // Required slice — the explorer cannot render without a tree. Other
+      // slices declared on FileCityTrailExplorerPanelContext are
+      // host-supplied with `data: null` when no trail is active.
+      slices: ["fileTree"]
+    },
+    component: FileCityTrailExplorerPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "File City Trail Explorer Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      await context.refresh("repository", "fileTree");
+    },
+    onUnmount: async (_context) => {
+      console.log("File City Trail Explorer Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -258319,6 +259576,7 @@ export {
   FileCardList,
   FileCitySequenceExplorer,
   FileCitySequenceExplorerPanel,
+  FileCityTrailExplorerPanel,
   GitChangesCardList,
   MockTTSAdapter,
   PrChangesCardList,