@industry-theme/file-city-panel 0.5.72 → 0.5.74

package/dist/panels.bundle.js

@@ -254529,7 +254529,7 @@ const NoteCard$1 = ({ note, onDelete }) => {
         alignItems: "flex-start"
       },
       children: [
-        /* @__PURE__ */ jsx(Avatar$1, { name: author, theme: theme2, size: 22 }),
+        /* @__PURE__ */ jsx(Avatar$2, { name: author, theme: theme2, size: 22 }),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -254693,7 +254693,7 @@ const ComposerForm$1 = ({
     }
   );
 };
-const Avatar$1 = ({ name: name2, theme: theme2, size }) => /* @__PURE__ */ jsx(
+const Avatar$2 = ({ name: name2, theme: theme2, size }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
@@ -256173,7 +256173,7 @@ const NoteCard = ({ note, onDelete }) => {
   const { theme: theme2 } = useTheme();
   const author = note.author ?? "Anonymous";
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsx(Avatar, { name: author, theme: theme2, size: 22 }),
+    /* @__PURE__ */ jsx(Avatar$1, { name: author, theme: theme2, size: 22 }),
     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsxs(
         "div",
@@ -256291,7 +256291,7 @@ const ComposerForm = ({
     }
   );
 };
-const Avatar = ({ name: name2, theme: theme2, size }) => /* @__PURE__ */ jsx(
+const Avatar$1 = ({ name: name2, theme: theme2, size }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
@@ -256898,14 +256898,14 @@ const SequenceLeaderLine = React.forwardRef(function SequenceLeaderLine2({ conta
     )
   ] });
 });
-const DRAFT_MARKDOWN_ANNOTATION_ID = "__draft-md__";
+const DRAFT_MARKDOWN_ANNOTATION_ID$1 = "__draft-md__";
 const sameMarkdownScope = (a, b) => {
   if (a.kind === "summary" && b.kind === "summary") return true;
   if (a.kind === "description" && b.kind === "description")
     return a.eventId === b.eventId;
   return false;
 };
-const toMarkdownUiNote = (n) => {
+const toMarkdownUiNote$1 = (n) => {
   if (n.kind !== "markdown") return null;
   return {
     id: n.id,
@@ -257096,7 +257096,7 @@ const FileCitySequenceExplorerPanel = ({
     if (!(sequencePayload == null ? void 0 : sequencePayload.notes) || !markdownScope) return [];
     return sequencePayload.notes.filter(
       (n) => n.kind === "markdown" && sameMarkdownScope(n.scope, markdownScope)
-    ).map(toMarkdownUiNote).filter((n) => n != null);
+    ).map(toMarkdownUiNote$1).filter((n) => n != null);
   }, [sequencePayload == null ? void 0 : sequencePayload.notes, markdownScope]);
   const [markdownNotesSelection, setMarkdownNotesSelection] = React.useState(null);
   const scopeKey = markdownScope ? markdownScope.kind === "description" ? `d-${markdownScope.eventId}` : "s" : "-";
@@ -257126,7 +257126,7 @@ const FileCitySequenceExplorerPanel = ({
     }
     if ((markdownNotesSelection == null ? void 0 : markdownNotesSelection.kind) === "composer") {
       result.push({
-        id: DRAFT_MARKDOWN_ANNOTATION_ID,
+        id: DRAFT_MARKDOWN_ANNOTATION_ID$1,
         anchor: {
           exact: markdownNotesSelection.anchor.exact,
           prefix: markdownNotesSelection.anchor.prefix,
@@ -257139,7 +257139,7 @@ const FileCitySequenceExplorerPanel = ({
   const activeMarkdownAnnotationId = React.useMemo(() => {
     if (!markdownNotesSelection) return null;
     if (markdownNotesSelection.kind === "composer") {
-      return DRAFT_MARKDOWN_ANNOTATION_ID;
+      return DRAFT_MARKDOWN_ANNOTATION_ID$1;
     }
     const head = markdownNotes.find(
       (n) => n.id === markdownNotesSelection.noteId
@@ -257152,7 +257152,7 @@ const FileCitySequenceExplorerPanel = ({
   }, [markdownNotesSelection, markdownNotes]);
   const handleMarkdownAnnotationClick = React.useCallback(
     (annotationId) => {
-      if (annotationId === DRAFT_MARKDOWN_ANNOTATION_ID) return;
+      if (annotationId === DRAFT_MARKDOWN_ANNOTATION_ID$1) return;
       setMarkdownNotesSelection((prev) => {
         if ((prev == null ? void 0 : prev.kind) === "thread" && prev.noteId === annotationId) {
           return null;
@@ -258269,248 +258269,1156 @@ const TrailFilePath = React.forwardRef(function TrailFilePath2({
     }
   );
 });
-const PANEL_WIDTH_PCT = 38;
-const FLOAT_INSET = 16;
-const MIN_WIDTH_PX = 360;
-const RESIZE_HANDLE_WIDTH = 6;
-const TrailMarkdownOverlay = ({
-  eyebrow,
+const modeSegmentStyle = (theme2, active, side) => ({
+  flexShrink: 0,
+  fontFamily: theme2.fonts.body,
+  fontSize: theme2.fontSizes[1],
+  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: "6px 14px",
+  cursor: "pointer",
+  lineHeight: 1.2
+});
+const TrailRequestIntroModal = ({
+  body,
+  request,
   title,
-  subtitle,
-  markdown: markdown2,
-  slideIdPrefix,
-  bottomOffset,
-  containerRef: externalContainerRef,
-  disableBottomTransition,
-  nav,
-  files
+  author,
+  createdAt,
+  markerCount,
+  repoCount,
+  fileCount,
+  steps,
+  slideIdPrefix = "trail-request-intro",
+  defaultMode,
+  onBegin,
+  onBeginAtStep,
+  onDismiss,
+  signOffs,
+  signedByCurrentUser = false,
+  seenBy,
+  notesByAuthor
 }) => {
   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 isInformative = !request || request.trim().length === 0;
+  const eyebrowLabel = isInformative ? "Light Reading" : "Request";
+  const headingLine = isInformative ? title : request;
+  const stampText = isInformative ? "ACK" : "LGTM";
+  const [showManifest, setShowManifest] = React.useState(false);
+  const canExpandManifest = !!(steps && steps.length > 0);
+  const [manifestRowHover, setManifestRowHover] = React.useState(false);
+  const [noteAuthorFilter, setNoteAuthorFilter] = React.useState(
+    null
   );
-  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);
-      const dx = e.clientX - drag2.startX;
-      const next2 = Math.min(maxWidth, Math.max(MIN_WIDTH_PX, drag2.startWidth + dx));
-      setWidthPx(next2);
+  const filteredMarkerIds = React.useMemo(() => {
+    if (!noteAuthorFilter) return null;
+    const list2 = notesByAuthor == null ? void 0 : notesByAuthor[noteAuthorFilter];
+    if (!list2 || list2.length === 0) return null;
+    return new Set(list2);
+  }, [noteAuthorFilter, notesByAuthor]);
+  const handleAvatarClick = React.useCallback(
+    (author2) => {
+      const markerIds = notesByAuthor == null ? void 0 : notesByAuthor[author2];
+      if (!markerIds || markerIds.length === 0) return;
+      setNoteAuthorFilter((prev) => prev === author2 ? null : author2);
+      setShowManifest(true);
     },
-    []
+    [notesByAuthor]
   );
-  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);
-      }
-    },
-    []
+  React.useEffect(() => {
+    if (!showManifest) setNoteAuthorFilter(null);
+  }, [showManifest]);
+  const [selectedMode, setSelectedMode] = React.useState(
+    defaultMode
   );
-  if (!body) return null;
-  return /* @__PURE__ */ jsxs(
+  const dateStamp = React.useMemo(() => {
+    if (!createdAt) return null;
+    const d = new Date(createdAt);
+    if (Number.isNaN(d.getTime())) return null;
+    const diffMs = Date.now() - d.getTime();
+    const sec = Math.round(diffMs / 1e3);
+    if (sec < 45) return "just now";
+    const min = Math.round(sec / 60);
+    if (min < 60) return `${min}m ago`;
+    const hr = Math.round(min / 60);
+    if (hr < 24) return `${hr}h ago`;
+    const day = Math.round(hr / 24);
+    if (day < 7) return `${day}d ago`;
+    const wk = Math.round(day / 7);
+    if (wk < 5) return `${wk}w ago`;
+    const mo = Math.round(day / 30);
+    if (mo < 12) return `${mo}mo ago`;
+    const yr = Math.round(day / 365);
+    return `${yr}y ago`;
+  }, [createdAt]);
+  const manifestParts = [];
+  if (fileCount && fileCount > 0) {
+    manifestParts.push(`${fileCount} ${fileCount === 1 ? "file" : "files"}`);
+  }
+  manifestParts.push(`${markerCount} ${markerCount === 1 ? "step" : "steps"}`);
+  if (repoCount && repoCount > 1) {
+    manifestParts.push(`${repoCount} repos`);
+  }
+  React.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onDismiss();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onDismiss]);
+  const trimmedBody = body.trim();
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: setContainerRef,
-      onAnimationEnd: () => setHasEntered(true),
+      onClick: onDismiss,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Trail request",
       style: {
         position: "absolute",
-        top: 0,
-        left: 0,
-        // 1px gap above the drawer's top edge so the drawer reads
-        // cleanly through any subpixel rounding / transition flicker.
-        bottom: `calc(${bottomOffsetCss} + 1px)`,
-        // Match the sequence drawer's slide animation so the
-        // overlay's bottom edge tracks the drawer's height instead
-        // of snapping when the host toggles `bottomOffset`. Skipped
-        // while the drawer is being live-resized so the bottom edge
-        // tracks the cursor without lag.
-        transition: disableBottomTransition ? void 0 : "bottom 280ms ease",
-        width: widthPx != null ? widthPx : `${PANEL_WIDTH_PCT}%`,
-        minWidth: MIN_WIDTH_PX,
-        backgroundColor: theme2.colors.background,
-        // Flush against the city container's left/top/bottom edges;
-        // only the right edge separates from the canvas, so we draw
-        // the border there only.
-        borderRight: `1px solid ${theme2.colors.border}`,
-        overflow: "hidden",
+        inset: 0,
+        // Fully opaque so the city, markdown overlay, and snippet
+        // pane behind the modal don't bleed through and compete with
+        // the request for attention.
+        background: theme2.colors.background,
         display: "flex",
-        flexDirection: "column",
-        zIndex: 1900,
-        animation: hasEntered || isResizing ? void 0 : "trailMarkdownOverlaySlideIn 220ms ease-out",
-        userSelect: isResizing ? "none" : void 0
+        alignItems: "center",
+        justifyContent: "center",
+        // Above every other trail overlay — markdown overlay sits at
+        // 1900 and the leader line at 1901, so the intro must clear
+        // both or the left edge bleeds through the backdrop.
+        zIndex: 2e3,
+        fontFamily: theme2.fonts.body,
+        padding: theme2.space[4]
       },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes trailMarkdownOverlaySlideIn {
-          from { transform: translateX(-100%); }
-          to { transform: translateX(0); }
-        }
-      ` }),
-        eyebrow || title || subtitle ? /* @__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: [
-              eyebrow ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    color: theme2.colors.textSecondary,
-                    letterSpacing: 0.4,
-                    textTransform: "uppercase"
-                  },
-                  children: eyebrow
-                }
-              ) : null,
-              title ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[1],
-                    fontWeight: 600,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  title,
-                  children: title
-                }
-              ) : null,
-              subtitle ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    color: theme2.colors.textSecondary,
-                    fontFamily: theme2.fonts.monospace,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    marginTop: 2
-                  },
-                  title: subtitle,
-                  children: subtitle
-                }
-              ) : null
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: 1,
-              minHeight: 0,
-              overflowY: "auto",
-              display: "flex",
-              flexDirection: "column"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(
-                IndustryMarkdownSlide,
-                {
-                  content: body,
-                  slideIdPrefix,
-                  slideIndex: 0,
-                  isVisible: true,
-                  theme: theme2,
-                  transparentBackground: true,
-                  enableKeyboardScrolling: false,
-                  disableScroll: true
-                }
-              ) }),
-              nav ? /* @__PURE__ */ jsx(TrailMarkdownOverlayFooter, { nav }) : null,
-              files && files.length > 0 ? /* @__PURE__ */ jsx(TrailFilesList, { files }) : null
-            ]
-          }
-        ),
-        /* @__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 TrailFilesList = ({ files }) => {
-  const { theme: theme2 } = useTheme();
-  return /* @__PURE__ */ jsxs(
-    "div",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            width: "min(640px, 100%)",
+            maxHeight: "100%",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  maxHeight: "min(70vh, 640px)",
+                  flexShrink: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  // Card background is the secondary shade so it still reads
+                  // as a card against the opaque panel-background backdrop.
+                  background: theme2.colors.backgroundSecondary,
+                  color: theme2.colors.text,
+                  borderRadius: theme2.radii[4],
+                  border: `1px solid ${theme2.colors.border}`,
+                  boxShadow: theme2.shadows[4],
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "14px 18px",
+                        borderBottom: `1px solid ${theme2.colors.border}`,
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        gap: theme2.space[3]
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: theme2.fonts.monospace,
+                                fontSize: theme2.fontSizes[0],
+                                color: theme2.colors.textTertiary,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.08em"
+                              },
+                              children: eyebrowLabel
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: theme2.fonts.body,
+                                fontSize: theme2.fontSizes[3],
+                                fontWeight: theme2.fontWeights.medium,
+                                color: theme2.colors.text,
+                                marginTop: 2
+                              },
+                              children: headingLine
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                if (canExpandManifest) setShowManifest((v) => !v);
+                              },
+                              onMouseEnter: () => setManifestRowHover(true),
+                              onMouseLeave: () => setManifestRowHover(false),
+                              disabled: !canExpandManifest,
+                              "aria-expanded": canExpandManifest ? showManifest : void 0,
+                              style: {
+                                fontFamily: theme2.fonts.monospace,
+                                fontSize: theme2.fontSizes[0],
+                                color: showManifest ? theme2.colors.text : theme2.colors.textTertiary,
+                                marginTop: 8,
+                                marginLeft: -6,
+                                marginRight: -6,
+                                letterSpacing: "0.04em",
+                                background: canExpandManifest && (showManifest || manifestRowHover) ? theme2.colors.backgroundTertiary ?? theme2.colors.background : "transparent",
+                                border: "none",
+                                padding: "4px 6px",
+                                borderRadius: theme2.radii[1],
+                                cursor: canExpandManifest ? "pointer" : "default",
+                                textAlign: "left",
+                                display: "block",
+                                width: "calc(100% + 12px)",
+                                transition: "background 120ms ease, color 120ms ease"
+                              },
+                              children: [
+                                "MANIFEST",
+                                " ",
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    style: {
+                                      color: showManifest ? theme2.colors.text : theme2.colors.textSecondary
+                                    },
+                                    children: manifestParts.join(" · ")
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: theme2.fonts.monospace,
+                                fontSize: theme2.fontSizes[0],
+                                color: theme2.colors.textTertiary,
+                                marginTop: 2,
+                                letterSpacing: "0.04em",
+                                display: "flex",
+                                flexWrap: "wrap",
+                                gap: "0 10px",
+                                lineHeight: 1.55
+                              },
+                              children: [
+                                author && author.trim().length > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+                                  "FROM",
+                                  " ",
+                                  /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: author })
+                                ] }) : null,
+                                dateStamp ? /* @__PURE__ */ jsx("span", { children: dateStamp }) : null
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            "aria-hidden": true,
+                            style: {
+                              flexShrink: 0,
+                              alignSelf: "center",
+                              width: 80,
+                              height: 80,
+                              position: "relative",
+                              background: theme2.colors.background,
+                              borderRadius: theme2.radii[1],
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontFamily: theme2.fonts.monospace,
+                              fontSize: theme2.fontSizes[0],
+                              color: theme2.colors.textTertiary,
+                              letterSpacing: "0.08em",
+                              userSelect: "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                "svg",
+                                {
+                                  style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    width: "100%",
+                                    height: "100%",
+                                    pointerEvents: "none"
+                                  },
+                                  viewBox: "0 0 80 80",
+                                  preserveAspectRatio: "none",
+                                  "aria-hidden": true,
+                                  children: /* @__PURE__ */ jsx(
+                                    "rect",
+                                    {
+                                      x: "1",
+                                      y: "1",
+                                      width: "78",
+                                      height: "78",
+                                      rx: "3",
+                                      ry: "3",
+                                      fill: "none",
+                                      stroke: theme2.colors.textTertiary,
+                                      strokeWidth: 2,
+                                      pathLength: 16,
+                                      strokeDasharray: "1 1",
+                                      strokeDashoffset: -0.5,
+                                      strokeLinecap: "butt"
+                                    }
+                                  )
+                                }
+                              ),
+                              signedByCurrentUser ? /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center"
+                                  },
+                                  children: /* @__PURE__ */ jsx(LgtmStamp, { theme: theme2, size: 80, rotated: false, text: stampText })
+                                }
+                              ) : /* @__PURE__ */ jsxs(
+                                "span",
+                                {
+                                  style: {
+                                    position: "relative",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    gap: 1,
+                                    lineHeight: 1.1,
+                                    fontSize: "0.75em"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { children: "TRAIL" }),
+                                    /* @__PURE__ */ jsx("span", { children: "UNREVIEWED" })
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        minHeight: 0,
+                        overflowY: "auto",
+                        padding: 0,
+                        position: "relative"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          IndustryMarkdownSlide,
+                          {
+                            content: trimmedBody,
+                            slideIdPrefix,
+                            slideIndex: 0,
+                            isVisible: true,
+                            theme: theme2,
+                            transparentBackground: true,
+                            enableKeyboardScrolling: false,
+                            disableScroll: true
+                          }
+                        ),
+                        showManifest && steps && steps.length > 0 ? /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              inset: 0,
+                              background: theme2.colors.backgroundSecondary,
+                              display: "flex",
+                              flexDirection: "column"
+                            },
+                            children: [
+                              noteAuthorFilter ? /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    padding: "8px 18px",
+                                    borderBottom: `1px solid ${theme2.colors.border}`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 8,
+                                    fontFamily: theme2.fonts.monospace,
+                                    fontSize: theme2.fontSizes[0],
+                                    color: theme2.colors.textTertiary,
+                                    letterSpacing: "0.04em",
+                                    flexShrink: 0
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsxs("span", { children: [
+                                      "NOTES BY",
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.text }, children: noteAuthorFilter })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => setNoteAuthorFilter(null),
+                                        "aria-label": "Clear filter",
+                                        title: "Clear filter",
+                                        style: {
+                                          marginLeft: "auto",
+                                          background: "transparent",
+                                          border: "none",
+                                          color: theme2.colors.textTertiary,
+                                          cursor: "pointer",
+                                          padding: "0 4px",
+                                          fontSize: theme2.fontSizes[1],
+                                          lineHeight: 1
+                                        },
+                                        children: "×"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ) : null,
+                              /* @__PURE__ */ jsx(
+                                "ol",
+                                {
+                                  style: {
+                                    listStyle: "none",
+                                    margin: 0,
+                                    padding: "18px 18px 18px",
+                                    fontFamily: theme2.fonts.monospace,
+                                    fontSize: theme2.fontSizes[1],
+                                    lineHeight: 1.6,
+                                    color: theme2.colors.textSecondary,
+                                    overflowY: "auto",
+                                    flex: 1,
+                                    minHeight: 0
+                                  },
+                                  children: steps.map((step, i) => {
+                                    const clickable = !!onBeginAtStep;
+                                    const matchesFilter = filteredMarkerIds != null && step.id != null && filteredMarkerIds.has(step.id);
+                                    const dimmed = filteredMarkerIds != null && !matchesFilter;
+                                    return /* @__PURE__ */ jsx(
+                                      "li",
+                                      {
+                                        style: {
+                                          borderBottom: i < steps.length - 1 ? `1px dashed ${theme2.colors.border}` : "none",
+                                          opacity: dimmed ? 0.4 : 1,
+                                          transition: "opacity 120ms ease"
+                                        },
+                                        children: /* @__PURE__ */ jsxs(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            onClick: () => {
+                                              if (onBeginAtStep) onBeginAtStep(i, selectedMode);
+                                            },
+                                            disabled: !clickable,
+                                            style: {
+                                              all: "unset",
+                                              boxSizing: "border-box",
+                                              display: "flex",
+                                              gap: 12,
+                                              alignItems: "baseline",
+                                              width: "100%",
+                                              padding: "6px 8px",
+                                              margin: "0 -8px",
+                                              borderRadius: theme2.radii[1],
+                                              cursor: clickable ? "pointer" : "default",
+                                              fontFamily: "inherit",
+                                              fontSize: "inherit",
+                                              lineHeight: "inherit",
+                                              color: "inherit",
+                                              transition: "background 100ms ease",
+                                              background: matchesFilter ? `color-mix(in srgb, ${theme2.colors.accent} 18%, transparent)` : "transparent",
+                                              borderLeft: matchesFilter ? `3px solid ${theme2.colors.accent}` : "3px solid transparent",
+                                              paddingLeft: 8
+                                            },
+                                            onMouseEnter: (e) => {
+                                              if (clickable && !matchesFilter) {
+                                                e.currentTarget.style.background = theme2.colors.backgroundTertiary ?? theme2.colors.background;
+                                              }
+                                            },
+                                            onMouseLeave: (e) => {
+                                              e.currentTarget.style.background = matchesFilter ? `color-mix(in srgb, ${theme2.colors.accent} 18%, transparent)` : "transparent";
+                                            },
+                                            title: clickable ? `Start walkthrough at step ${i + 1}` : void 0,
+                                            children: [
+                                              /* @__PURE__ */ jsx(
+                                                "span",
+                                                {
+                                                  style: {
+                                                    color: theme2.colors.textTertiary,
+                                                    flexShrink: 0,
+                                                    minWidth: 24
+                                                  },
+                                                  children: String(i + 1).padStart(2, "0")
+                                                }
+                                              ),
+                                              /* @__PURE__ */ jsx(
+                                                "span",
+                                                {
+                                                  style: {
+                                                    flex: 1,
+                                                    minWidth: 0,
+                                                    color: theme2.colors.text
+                                                  },
+                                                  children: step.label
+                                                }
+                                              ),
+                                              step.sourcePath ? /* @__PURE__ */ jsx(
+                                                "span",
+                                                {
+                                                  style: {
+                                                    color: theme2.colors.textTertiary,
+                                                    flexShrink: 1,
+                                                    minWidth: 0,
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap"
+                                                  },
+                                                  title: step.sourcePath,
+                                                  children: step.sourcePath
+                                                }
+                                              ) : null
+                                            ]
+                                          }
+                                        )
+                                      },
+                                      i
+                                    );
+                                  })
+                                }
+                              )
+                            ]
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "14px 18px",
+                        borderTop: `1px solid ${theme2.colors.border}`,
+                        display: "grid",
+                        // Three-column grid so the switch sits in the true center
+                        // of the footer regardless of the OPEN AS label width or
+                        // the Start button width. Left/right columns share `1fr`
+                        // so the center stays balanced.
+                        gridTemplateColumns: "1fr auto 1fr",
+                        alignItems: "center",
+                        gap: theme2.space[3]
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              justifySelf: "start",
+                              fontFamily: theme2.fonts.monospace,
+                              fontSize: theme2.fontSizes[0],
+                              color: theme2.colors.textTertiary,
+                              letterSpacing: "0.04em"
+                            },
+                            children: "OPEN AS"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifySelf: "center" }, children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSelectedMode("city"),
+                              "aria-pressed": selectedMode === "city",
+                              title: "City view — 3D buildings + sequence drawer",
+                              style: {
+                                ...modeSegmentStyle(theme2, selectedMode === "city", "left"),
+                                // Both segments share a min-width so the switch reads
+                                // as two equal halves regardless of label length.
+                                minWidth: 110,
+                                textAlign: "center"
+                              },
+                              children: "Walkthrough"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSelectedMode("doc"),
+                              "aria-pressed": selectedMode === "doc",
+                              title: "Document view — scroll all markers as one page",
+                              style: {
+                                ...modeSegmentStyle(theme2, selectedMode === "doc", "right"),
+                                minWidth: 110,
+                                textAlign: "center"
+                              },
+                              children: "Doc"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => onBegin(selectedMode),
+                            autoFocus: true,
+                            title: "Start the trail in the chosen format",
+                            style: {
+                              justifySelf: "end",
+                              fontFamily: theme2.fonts.body,
+                              fontSize: theme2.fontSizes[1],
+                              fontWeight: theme2.fontWeights.semibold,
+                              color: theme2.colors.background,
+                              background: theme2.colors.accent,
+                              border: `1px solid ${theme2.colors.accent}`,
+                              borderRadius: theme2.radii[3],
+                              padding: "6px 18px",
+                              cursor: "pointer",
+                              lineHeight: 1.2
+                            },
+                            children: "Start"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            signOffs && signOffs.length > 0 ? /* @__PURE__ */ jsx(
+              AvatarStrip,
+              {
+                theme: theme2,
+                label: "REVIEWED BY",
+                ringed: true,
+                entries: signOffs.map((s2) => {
+                  var _a;
+                  const hasNotes = (((_a = notesByAuthor == null ? void 0 : notesByAuthor[s2.author]) == null ? void 0 : _a.length) ?? 0) > 0;
+                  return {
+                    key: s2.id,
+                    name: s2.author,
+                    tooltip: `${s2.author} · ${s2.signedAt.slice(0, 10)}${s2.comment ? `
+${s2.comment}` : ""}${hasNotes ? "\n(click to highlight their notes on the manifest)" : ""}`,
+                    onClick: hasNotes ? () => handleAvatarClick(s2.author) : void 0,
+                    active: noteAuthorFilter === s2.author
+                  };
+                })
+              }
+            ) : null,
+            seenBy && seenBy.length > 0 ? /* @__PURE__ */ jsx(
+              AvatarStrip,
+              {
+                theme: theme2,
+                label: "NOTES BY",
+                entries: seenBy.map((name2) => {
+                  var _a;
+                  const hasNotes = (((_a = notesByAuthor == null ? void 0 : notesByAuthor[name2]) == null ? void 0 : _a.length) ?? 0) > 0;
+                  return {
+                    key: name2,
+                    name: name2,
+                    tooltip: hasNotes ? `${name2} — click to highlight their notes on the manifest` : name2,
+                    onClick: hasNotes ? () => handleAvatarClick(name2) : void 0,
+                    active: noteAuthorFilter === name2
+                  };
+                })
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+const Avatar = ({ theme: theme2, name: name2, size, ringed }) => {
+  const initials2 = (() => {
+    var _a, _b;
+    const parts = name2.trim().split(/\s+/);
+    return ((((_a = parts[0]) == null ? void 0 : _a[0]) ?? "") + (((_b = parts[1]) == null ? void 0 : _b[0]) ?? "")).toUpperCase();
+  })();
+  const borderWidth = ringed ? 2 : 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        boxSizing: "border-box",
+        flexShrink: 0,
+        borderRadius: "50%",
+        border: ringed ? `${borderWidth}px solid ${theme2.colors.success}` : "none",
+        background: `color-mix(in srgb, ${theme2.colors.accent} 30%, ${theme2.colors.background})`,
+        color: theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        fontSize: Math.max(10, Math.round(size * 0.4)),
+        fontWeight: theme2.fontWeights.bold,
+        letterSpacing: 0.4
+      },
+      children: initials2 || "?"
+    }
+  );
+};
+const AvatarStrip = ({ theme: theme2, label, entries, ringed = false }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginTop: 10,
+        padding: "8px 14px",
+        background: theme2.colors.backgroundSecondary,
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: theme2.radii[3],
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        flexShrink: 0,
+        boxShadow: theme2.shadows[2]
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: theme2.fonts.monospace,
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textTertiary,
+              letterSpacing: "0.04em",
+              flexShrink: 0
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              flex: 1,
+              minWidth: 0,
+              overflowX: "auto"
+            },
+            children: entries.map((e) => {
+              const Tag2 = e.onClick ? "button" : "span";
+              return /* @__PURE__ */ jsxs(
+                Tag2,
+                {
+                  type: e.onClick ? "button" : void 0,
+                  onClick: e.onClick,
+                  title: e.tooltip ?? e.name,
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                    flexShrink: 0,
+                    background: e.active ? `color-mix(in srgb, ${theme2.colors.accent} 18%, transparent)` : "transparent",
+                    border: e.active ? `1px solid ${theme2.colors.accent}` : `1px solid transparent`,
+                    borderRadius: 999,
+                    padding: e.onClick ? "2px 8px 2px 2px" : 0,
+                    cursor: e.onClick ? "pointer" : "default",
+                    color: "inherit",
+                    fontFamily: "inherit",
+                    fontSize: "inherit"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Avatar, { theme: theme2, name: e.name, size: 24, ringed }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textSecondary
+                        },
+                        children: e.name
+                      }
+                    )
+                  ]
+                },
+                e.key
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+const LgtmStamp = ({ theme: theme2, size, rotated = true, text: text2 = "LGTM" }) => {
+  const inkColor = theme2.colors.success;
+  const borderWidth = Math.max(2, Math.round(size / 30));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        width: size,
+        height: size,
+        transform: rotated ? "rotate(-8deg)" : "none",
+        border: `${borderWidth}px double ${inkColor}`,
+        borderRadius: theme2.radii[1],
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: theme2.fonts.monospace,
+        color: inkColor,
+        letterSpacing: "0.1em",
+        opacity: 0.9,
+        userSelect: "none",
+        padding: size * 0.05,
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: size * 0.26,
+              fontWeight: theme2.fontWeights.bold,
+              lineHeight: 1
+            },
+            children: text2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: size * 0.1,
+              marginTop: size * 0.05,
+              letterSpacing: "0.08em"
+            },
+            children: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+          }
+        )
+      ]
+    }
+  );
+};
+const PANEL_WIDTH_PCT = 38;
+const FLOAT_INSET = 16;
+const MIN_WIDTH_PX = 360;
+const RESIZE_HANDLE_WIDTH = 6;
+const TrailMarkdownOverlay = ({
+  eyebrow,
+  title,
+  subtitle,
+  markdown: markdown2,
+  slideIdPrefix,
+  bottomOffset,
+  containerRef: externalContainerRef,
+  disableBottomTransition,
+  nav,
+  files,
+  annotations,
+  activeAnnotationId,
+  onAnnotationClick,
+  onCreateNoteForSelection,
+  composerOpen
+}) => {
+  const { theme: theme2 } = useTheme();
+  const body = markdown2.trim();
+  const [pendingSelection, setPendingSelection] = React.useState(null);
+  const handleSelectionChange = React.useCallback(
+    (selection2) => {
+      setPendingSelection(selection2);
+    },
+    []
+  );
+  const handleAnnotationClick = React.useCallback(
+    (annotationId) => {
+      onAnnotationClick == null ? void 0 : onAnnotationClick(annotationId);
+    },
+    [onAnnotationClick]
+  );
+  const annotationStyleVars = React.useMemo(
+    () => ({
+      backgroundColor: `color-mix(in srgb, ${theme2.colors.accent} 22%, transparent)`,
+      activeBackgroundColor: `color-mix(in srgb, ${theme2.colors.accent} 45%, transparent)`
+    }),
+    [theme2.colors.accent]
+  );
+  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);
+      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: 0,
+        left: 0,
+        // 1px gap above the drawer's top edge so the drawer reads
+        // cleanly through any subpixel rounding / transition flicker.
+        bottom: `calc(${bottomOffsetCss} + 1px)`,
+        // Match the sequence drawer's slide animation so the
+        // overlay's bottom edge tracks the drawer's height instead
+        // of snapping when the host toggles `bottomOffset`. Skipped
+        // while the drawer is being live-resized so the bottom edge
+        // tracks the cursor without lag.
+        transition: disableBottomTransition ? void 0 : "bottom 280ms ease",
+        width: widthPx != null ? widthPx : `${PANEL_WIDTH_PCT}%`,
+        minWidth: MIN_WIDTH_PX,
+        backgroundColor: theme2.colors.background,
+        // Flush against the city container's left/top/bottom edges;
+        // only the right edge separates from the canvas, so we draw
+        // the border there only.
+        borderRight: `1px solid ${theme2.colors.border}`,
+        overflow: "hidden",
+        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); }
+        }
+      ` }),
+        eyebrow || title || subtitle ? /* @__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: [
+              eyebrow ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    letterSpacing: 0.4,
+                    textTransform: "uppercase"
+                  },
+                  children: eyebrow
+                }
+              ) : null,
+              title ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: 600,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title,
+                  children: title
+                }
+              ) : null,
+              subtitle ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.monospace,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    marginTop: 2
+                  },
+                  title: subtitle,
+                  children: subtitle
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              display: "flex",
+              flexDirection: "column",
+              position: "relative"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(
+                IndustryMarkdownSlide,
+                {
+                  content: body,
+                  slideIdPrefix,
+                  slideIndex: 0,
+                  isVisible: true,
+                  theme: theme2,
+                  transparentBackground: true,
+                  enableKeyboardScrolling: false,
+                  disableScroll: true,
+                  annotations,
+                  activeAnnotationId: activeAnnotationId ?? null,
+                  onAnnotationClick: onAnnotationClick ? handleAnnotationClick : void 0,
+                  onSelectionChange: onCreateNoteForSelection ? handleSelectionChange : void 0,
+                  annotationStyle: annotationStyleVars
+                }
+              ) }),
+              nav ? /* @__PURE__ */ jsx(TrailMarkdownOverlayFooter, { nav }) : null,
+              files && files.length > 0 ? /* @__PURE__ */ jsx(TrailFilesList, { files }) : null,
+              !composerOpen && pendingSelection && onCreateNoteForSelection && /* @__PURE__ */ jsx(
+                MarkdownSelectionPill,
+                {
+                  rect: {
+                    left: pendingSelection.rect.left,
+                    top: pendingSelection.rect.top,
+                    right: pendingSelection.rect.right,
+                    bottom: pendingSelection.rect.bottom
+                  },
+                  onClick: () => {
+                    onCreateNoteForSelection(pendingSelection.anchor);
+                    setPendingSelection(null);
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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 TrailFilesList = ({ files }) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
       style: {
         borderTop: `1px solid ${theme2.colors.border}`,
@@ -258769,7 +259677,13 @@ const TrailSnippetView = ({
   focusLine,
   contextLines = 2,
   readFile,
-  background
+  background,
+  notes,
+  activeThreadKey,
+  composerOpen,
+  onOpenThread,
+  onCloseThread,
+  onOpenComposer
 }) => {
   const { theme: theme2 } = useTheme();
   const [contents, setContents] = React.useState(null);
@@ -258830,12 +259744,96 @@ const TrailSnippetView = ({
         }
       });
     },
-    [lineNumberOffset]
+    [lineNumberOffset]
+  );
+  const lineAnnotations = React.useMemo(() => {
+    if (!slice) return [];
+    const threadsByKey = /* @__PURE__ */ new Map();
+    for (const n of notes ?? []) {
+      const arr = threadsByKey.get(n.threadKey) ?? [];
+      arr.push(n);
+      threadsByKey.set(n.threadKey, arr);
+    }
+    const result = [];
+    for (const [threadKey, threadNotes] of threadsByKey) {
+      const head = threadNotes[0];
+      const active = activeThreadKey === threadKey;
+      const seen = /* @__PURE__ */ new Set();
+      for (const range of head.ranges) {
+        const key = `${range.startLine}-${range.endLine}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        const sliceLocal = range.startLine - slice.sliceStart + 1;
+        if (sliceLocal < 1) continue;
+        result.push({
+          lineNumber: sliceLocal,
+          metadata: {
+            absoluteLine: range.startLine,
+            notes: threadNotes,
+            range,
+            threadKey,
+            active,
+            disabled: !!composerOpen
+          }
+        });
+      }
+    }
+    return result;
+  }, [slice, notes, activeThreadKey, composerOpen]);
+  const renderAnnotation = React.useCallback(
+    (annotation) => {
+      if (!annotation.metadata) return null;
+      const {
+        notes: threadNotes,
+        range,
+        threadKey,
+        active,
+        disabled
+      } = annotation.metadata;
+      return /* @__PURE__ */ jsx(
+        SnippetNoteIndicator,
+        {
+          notes: threadNotes,
+          range,
+          active,
+          disabled,
+          onClick: () => {
+            if (disabled) return;
+            if (active) onCloseThread == null ? void 0 : onCloseThread();
+            else onOpenThread == null ? void 0 : onOpenThread(threadKey);
+          }
+        }
+      );
+    },
+    [onOpenThread, onCloseThread]
+  );
+  const onGutterUtilityClick = React.useCallback(
+    (range) => {
+      if (!slice || !onOpenComposer) return;
+      const startAbs = range.start + slice.sliceStart - 1;
+      const endAbs = range.end + slice.sliceStart - 1;
+      const sliceLines = slice.contents.split("\n");
+      const startLineText = sliceLines[startAbs - slice.sliceStart] ?? "";
+      const endLineText = sliceLines[endAbs - slice.sliceStart] ?? "";
+      onOpenComposer({
+        startLine: startAbs,
+        endLine: endAbs,
+        startLineText,
+        endLineText
+      });
+    },
+    [slice, onOpenComposer]
   );
   const options = React.useMemo(() => {
     const base2 = background ? buildPierreOptions(background) : pierreOptions;
-    return { ...base2, onPostRender };
-  }, [background, onPostRender]);
+    return {
+      ...base2,
+      onPostRender,
+      enableGutterUtility: !!onOpenComposer,
+      enableLineSelection: !!onOpenComposer,
+      onGutterUtilityClick
+    };
+  }, [background, onPostRender, onOpenComposer, onGutterUtilityClick]);
   if (error) {
     return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: theme2.colors.error }, children: error });
   }
@@ -258847,6 +259845,8 @@ const TrailSnippetView = ({
     {
       file: fileObject,
       options,
+      lineAnnotations,
+      renderAnnotation,
       selectedLines: slice.focusOffset != null ? { start: slice.focusOffset, end: slice.focusOffset } : void 0,
       style: pierreStyle$1
     }
@@ -259004,7 +260004,51 @@ const SNIPPET_PANE_RIGHT_GUTTER_PX = 16;
 const SNIPPET_PANE_LEADER_BUFFER_PX = 60;
 const PANEL_TRANSITION_MS = 280;
 const THREE_D_TOGGLE_DISABLED = true;
-const FileCityTrailExplorerPanel = ({ context, actions, defaultViewMode, defaultShowSequenceDrawer }) => {
+const DRAFT_MARKDOWN_ANNOTATION_ID = "__draft-md__";
+const sameTrailMarkdownScope = (a, b) => {
+  if (a.kind === "summary" && b.kind === "summary") return true;
+  if (a.kind === "description" && b.kind === "description") {
+    return a.markerId === b.markerId;
+  }
+  return false;
+};
+const toMarkdownUiNote = (n) => {
+  if (n.kind !== "markdown") return null;
+  return {
+    id: n.id,
+    anchor: {
+      exact: n.anchor.exact,
+      prefix: n.anchor.prefix,
+      suffix: n.anchor.suffix
+    },
+    body: n.body,
+    author: n.author,
+    createdAt: new Date(n.createdAt).getTime()
+  };
+};
+const toSnippetUiNote = (n) => {
+  if (n.kind !== "snippet") return null;
+  if (n.anchor.kind !== "slice") return null;
+  const ranges = n.anchor.ranges.map((r2) => ({
+    startLine: r2.startLine,
+    endLine: r2.endLine
+  }));
+  return {
+    id: n.id,
+    threadKey: computeThreadKey(ranges),
+    ranges,
+    body: n.body,
+    author: n.author,
+    createdAt: new Date(n.createdAt).getTime()
+  };
+};
+const FileCityTrailExplorerPanel = ({
+  context,
+  actions,
+  defaultViewMode,
+  defaultShowSequenceDrawer,
+  currentAuthor
+}) => {
   var _a;
   const tree = context.fileTree.data;
   const lineCounts = ((_a = context.lineCounts.data) == null ? void 0 : _a.lineCounts) ?? null;
@@ -259061,6 +260105,12 @@ const FileCityTrailExplorerPanel = ({ context, actions, defaultViewMode, default
       cityData,
       hasLineCounts: lineCounts != null && Object.keys(lineCounts).length > 0,
       readFile: actions.readFile,
+      createTrailNote: actions.createTrailNote,
+      updateTrailNote: actions.updateTrailNote,
+      deleteTrailNote: actions.deleteTrailNote,
+      createTrailSignOff: actions.createTrailSignOff,
+      deleteTrailSignOff: actions.deleteTrailSignOff,
+      currentAuthor,
       defaultViewMode,
       defaultShowSequenceDrawer
     }
@@ -259075,10 +260125,14 @@ const FileCityTrailSequenceLayout = ({
   cityData,
   hasLineCounts,
   readFile,
+  createTrailNote,
+  deleteTrailNote,
+  createTrailSignOff,
+  currentAuthor = "You",
   defaultViewMode = "city",
-  defaultShowSequenceDrawer = true
+  defaultShowSequenceDrawer = false
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { theme: theme2 } = useTheme();
   const [show3D, setShow3D] = React.useState(
     false
@@ -259087,12 +260141,32 @@ const FileCityTrailSequenceLayout = ({
     return;
   }, [hasLineCounts]);
   const effectiveShow3D = false;
+  const [requestDismissed, setRequestDismissed] = React.useState(false);
+  React.useEffect(() => {
+    setRequestDismissed(false);
+  }, [trail2.id]);
   const [viewMode, setViewMode] = React.useState(
     defaultViewMode
   );
   const [showSequenceDrawer, setShowSequenceDrawer] = React.useState(
     defaultShowSequenceDrawer
   );
+  const [showFilesPanel, setShowFilesPanel] = React.useState(false);
+  const [showNotesPanel, setShowNotesPanel] = React.useState(false);
+  const isInformative = !trail2.request || trail2.request.trim().length === 0;
+  const userHasSignedOff = React.useMemo(() => {
+    return (trail2.signOffs ?? []).some((s2) => s2.author === currentAuthor);
+  }, [trail2.signOffs, currentAuthor]);
+  const [signOffAnimating, setSignOffAnimating] = React.useState(false);
+  const handleSignOff = React.useCallback(() => {
+    if (userHasSignedOff || signOffAnimating) return;
+    setSignOffAnimating(true);
+    void createTrailSignOff(trail2.id, { author: currentAuthor });
+    window.setTimeout(() => {
+      setSignOffAnimating(false);
+      setRequestDismissed(false);
+    }, 1400);
+  }, [userHasSignedOff, signOffAnimating, createTrailSignOff, trail2.id, currentAuthor]);
   const [drawerHeightOverridePct, setDrawerHeightOverridePct] = React.useState(null);
   const [isResizingDrawer, setIsResizingDrawer] = React.useState(false);
   const drawerHeightPct = !showSequenceDrawer ? 0 : drawerHeightOverridePct ?? SEQUENCE_DRAWER_HEIGHT_PCT;
@@ -259290,6 +260364,8 @@ const FileCityTrailSequenceLayout = ({
   );
   const [snippetPaneWidth, setSnippetPaneWidth] = React.useState(null);
   const [containerSize, setContainerSize] = React.useState(null);
+  const mainAreaRef = React.useRef(null);
+  const [mainAreaSize, setMainAreaSize] = React.useState(null);
   const selectedBuilding = React.useMemo(() => {
     if (!cityData || !selectedMarker) return null;
     const path2 = markerCityPath(selectedMarker, trail2);
@@ -259358,6 +260434,18 @@ const FileCityTrailSequenceLayout = ({
     const observer = new ResizeObserver(update);
     observer.observe(el);
     return () => observer.disconnect();
+  }, [viewMode]);
+  React.useEffect(() => {
+    const el = mainAreaRef.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setMainAreaSize({ 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(() => {
@@ -259371,6 +260459,274 @@ const FileCityTrailSequenceLayout = ({
     observer.observe(markdownOverlayEl);
     return () => observer.disconnect();
   }, [markdownOverlayEl]);
+  const markdownScope = React.useMemo(() => {
+    if (selectedMarkerId) {
+      return { kind: "description", markerId: selectedMarkerId };
+    }
+    if (trail2.summary && trail2.summary.trim().length > 0) {
+      return { kind: "summary" };
+    }
+    return null;
+  }, [selectedMarkerId, trail2.summary]);
+  const markdownNotes = React.useMemo(() => {
+    if (!trail2.notes || !markdownScope) return [];
+    return trail2.notes.filter(
+      (n) => n.kind === "markdown" && sameTrailMarkdownScope(n.scope, markdownScope)
+    ).map(toMarkdownUiNote).filter((n) => n != null);
+  }, [trail2.notes, markdownScope]);
+  const [markdownNotesSelection, setMarkdownNotesSelection] = React.useState(null);
+  const markdownScopeKey = markdownScope ? markdownScope.kind === "description" ? `d-${markdownScope.markerId}` : "s" : "-";
+  React.useEffect(() => {
+    setMarkdownNotesSelection(null);
+  }, [markdownScopeKey]);
+  const markdownComposerOpen = (markdownNotesSelection == null ? void 0 : markdownNotesSelection.kind) === "composer";
+  const markdownAnnotations = React.useMemo(() => {
+    const result = [];
+    const counts = /* @__PURE__ */ new Map();
+    for (const n of markdownNotes) {
+      counts.set(n.anchor.exact, (counts.get(n.anchor.exact) ?? 0) + 1);
+    }
+    const seenAnchors = /* @__PURE__ */ new Set();
+    for (const n of markdownNotes) {
+      if (seenAnchors.has(n.anchor.exact)) continue;
+      seenAnchors.add(n.anchor.exact);
+      result.push({
+        id: n.id,
+        anchor: {
+          exact: n.anchor.exact,
+          prefix: n.anchor.prefix,
+          suffix: n.anchor.suffix
+        },
+        count: counts.get(n.anchor.exact)
+      });
+    }
+    if ((markdownNotesSelection == null ? void 0 : markdownNotesSelection.kind) === "composer") {
+      result.push({
+        id: DRAFT_MARKDOWN_ANNOTATION_ID,
+        anchor: {
+          exact: markdownNotesSelection.anchor.exact,
+          prefix: markdownNotesSelection.anchor.prefix,
+          suffix: markdownNotesSelection.anchor.suffix
+        }
+      });
+    }
+    return result;
+  }, [markdownNotes, markdownNotesSelection]);
+  const activeMarkdownAnnotationId = React.useMemo(() => {
+    if (!markdownNotesSelection) return null;
+    if (markdownNotesSelection.kind === "composer") {
+      return DRAFT_MARKDOWN_ANNOTATION_ID;
+    }
+    const head = markdownNotes.find(
+      (n) => n.id === markdownNotesSelection.noteId
+    );
+    if (!head) return null;
+    const anchorMatch = markdownNotes.find(
+      (n) => n.anchor.exact === head.anchor.exact
+    );
+    return (anchorMatch == null ? void 0 : anchorMatch.id) ?? head.id;
+  }, [markdownNotesSelection, markdownNotes]);
+  const handleMarkdownAnnotationClick = React.useCallback(
+    (annotationId) => {
+      if (annotationId === DRAFT_MARKDOWN_ANNOTATION_ID) return;
+      setMarkdownNotesSelection((prev) => {
+        if ((prev == null ? void 0 : prev.kind) === "thread" && prev.noteId === annotationId) {
+          return null;
+        }
+        return { kind: "thread", noteId: annotationId };
+      });
+    },
+    []
+  );
+  const handleCreateMarkdownNoteForSelection = React.useCallback(
+    (anchor) => {
+      setMarkdownNotesSelection({ kind: "composer", anchor });
+    },
+    []
+  );
+  const handleSubmitMarkdownNote = React.useCallback(
+    async (anchor, body) => {
+      if (!markdownScope) return;
+      const note = await createTrailNote(trail2.id, {
+        kind: "markdown",
+        scope: markdownScope,
+        anchor: {
+          kind: "text-quote",
+          exact: anchor.exact,
+          prefix: anchor.prefix,
+          suffix: anchor.suffix
+        },
+        body,
+        author: "You"
+      });
+      if (note) {
+        setMarkdownNotesSelection({ kind: "thread", noteId: note.id });
+      }
+    },
+    [createTrailNote, trail2.id, markdownScope]
+  );
+  const handleReplyMarkdownNote = React.useCallback(
+    async (noteId, body) => {
+      if (!markdownScope) return;
+      const head = markdownNotes.find((n) => n.id === noteId);
+      if (!head) return;
+      await createTrailNote(trail2.id, {
+        kind: "markdown",
+        scope: markdownScope,
+        anchor: {
+          kind: "text-quote",
+          exact: head.anchor.exact,
+          prefix: head.anchor.prefix,
+          suffix: head.anchor.suffix
+        },
+        body,
+        author: "You"
+      });
+    },
+    [createTrailNote, trail2.id, markdownScope, markdownNotes]
+  );
+  const handleDeleteMarkdownNote = React.useCallback(
+    async (id2) => {
+      await deleteTrailNote(trail2.id, id2);
+    },
+    [deleteTrailNote, trail2.id]
+  );
+  const snippetNotes = React.useMemo(() => {
+    if (!trail2.notes || !selectedMarkerId) return [];
+    return trail2.notes.filter(
+      (n) => n.kind === "snippet" && n.scope.markerId === selectedMarkerId
+    ).map(toSnippetUiNote).filter((n) => n != null);
+  }, [trail2.notes, selectedMarkerId]);
+  const [snippetNotesSelection, setSnippetNotesSelection] = React.useState(null);
+  React.useEffect(() => {
+    setSnippetNotesSelection(null);
+  }, [selectedMarkerId]);
+  const snippetComposerOpen = (snippetNotesSelection == null ? void 0 : snippetNotesSelection.kind) === "composer";
+  const activeSnippetThreadKey = (snippetNotesSelection == null ? void 0 : snippetNotesSelection.kind) === "thread" ? snippetNotesSelection.threadKey : null;
+  const appendSnippetComposerRange = React.useCallback(
+    (range) => {
+      setSnippetNotesSelection((prev) => {
+        if ((prev == null ? void 0 : prev.kind) !== "composer") {
+          return { kind: "composer", ranges: [range] };
+        }
+        const exists = prev.ranges.some(
+          (r2) => r2.startLine === range.startLine && r2.endLine === range.endLine
+        );
+        if (exists) return prev;
+        return { kind: "composer", ranges: [...prev.ranges, range] };
+      });
+    },
+    []
+  );
+  const removeSnippetComposerRange = React.useCallback(
+    (range) => {
+      setSnippetNotesSelection((prev) => {
+        if ((prev == null ? void 0 : prev.kind) !== "composer") return prev;
+        const next2 = prev.ranges.filter(
+          (r2) => !(r2.startLine === range.startLine && r2.endLine === range.endLine)
+        );
+        if (next2.length === 0) return null;
+        return { kind: "composer", ranges: next2 };
+      });
+    },
+    []
+  );
+  const snippetLineTextsFromThread = React.useCallback(
+    (threadKey) => {
+      const head = (trail2.notes ?? []).find(
+        (n) => n.kind === "snippet" && n.scope.markerId === selectedMarkerId && n.anchor.kind === "slice" && computeThreadKey(
+          n.anchor.ranges.map((r2) => ({
+            startLine: r2.startLine,
+            endLine: r2.endLine
+          }))
+        ) === threadKey
+      );
+      if (!head || head.anchor.kind !== "slice") return null;
+      return head.anchor.ranges.map((r2) => ({
+        startLineText: r2.startLineText,
+        endLineText: r2.endLineText
+      }));
+    },
+    [trail2.notes, selectedMarkerId]
+  );
+  const createSnippetNote = React.useCallback(
+    async (ranges, body) => {
+      if (!selectedMarkerId || ranges.length === 0) return;
+      await createTrailNote(trail2.id, {
+        kind: "snippet",
+        scope: { markerId: selectedMarkerId },
+        anchor: {
+          kind: "slice",
+          ranges: ranges.map((r2) => ({
+            startLine: r2.startLine,
+            endLine: r2.endLine,
+            startLineText: r2.startLineText,
+            endLineText: r2.endLineText
+          }))
+        },
+        body,
+        author: "You"
+      });
+    },
+    [createTrailNote, trail2.id, selectedMarkerId]
+  );
+  const handleSubmitSnippetNote = React.useCallback(
+    async (ranges, body) => {
+      await createSnippetNote(ranges, body);
+      const uiRanges = ranges.map((r2) => ({
+        startLine: r2.startLine,
+        endLine: r2.endLine
+      }));
+      setSnippetNotesSelection({
+        kind: "thread",
+        threadKey: computeThreadKey(uiRanges)
+      });
+    },
+    [createSnippetNote]
+  );
+  const handleReplySnippetNote = React.useCallback(
+    async (threadKey, body) => {
+      const fingerprints = snippetLineTextsFromThread(threadKey);
+      const head = (trail2.notes ?? []).find(
+        (n) => n.kind === "snippet" && n.scope.markerId === selectedMarkerId && n.anchor.kind === "slice" && computeThreadKey(
+          n.anchor.ranges.map((r2) => ({
+            startLine: r2.startLine,
+            endLine: r2.endLine
+          }))
+        ) === threadKey
+      );
+      if (!head || head.anchor.kind !== "slice" || !fingerprints) return;
+      const ranges = head.anchor.ranges.map((r2, i) => {
+        var _a2, _b2;
+        return {
+          startLine: r2.startLine,
+          endLine: r2.endLine,
+          startLineText: ((_a2 = fingerprints[i]) == null ? void 0 : _a2.startLineText) ?? r2.startLineText,
+          endLineText: ((_b2 = fingerprints[i]) == null ? void 0 : _b2.endLineText) ?? r2.endLineText
+        };
+      });
+      await createSnippetNote(ranges, body);
+    },
+    [snippetLineTextsFromThread, trail2.notes, selectedMarkerId, createSnippetNote]
+  );
+  const handleDeleteSnippetNote = React.useCallback(
+    async (id2) => {
+      await deleteTrailNote(trail2.id, id2);
+    },
+    [deleteTrailNote, trail2.id]
+  );
+  const handleOpenSnippetThread = React.useCallback((threadKey) => {
+    setSnippetNotesSelection({ kind: "thread", threadKey });
+  }, []);
+  const handleCloseSnippetThread = React.useCallback(() => {
+    setSnippetNotesSelection(null);
+  }, []);
+  const handleOpenSnippetComposer = React.useCallback(
+    (input) => {
+      appendSnippetComposerRange(input);
+    },
+    [appendSnippetComposerRange]
+  );
   React.useEffect(() => {
     if (!snippetPaneEl) {
       setSnippetPaneWidth(null);
@@ -259482,18 +260838,15 @@ const FileCityTrailSequenceLayout = ({
             show3D: effectiveShow3D,
             onToggle3D: () => setShow3D((v) => !v),
             hideToggle: THREE_D_TOGGLE_DISABLED,
-            showSequenceDrawer,
-            onToggleSequenceDrawer: () => {
-              setDrawerHeightOverridePct(null);
-              setShowSequenceDrawer((v) => !v);
-            },
             canExit: (
-              // Drawer-open is the default start state, so it no longer
-              // counts as "non-idle". Exit is offered only when the user
-              // has drilled into something the start view doesn't show.
-              // The "idle" view-mode is the host-supplied default — when
-              // the host opens the panel in 'doc', staying in 'doc' is
-              // idle and switching to 'city' is the non-idle drill-in.
+              // The drawer (and the Files panel) are passive viewing
+              // aids that the user toggles freely from the footer, so
+              // their state isn't part of `canExit`. Exit is offered
+              // only when the user has drilled into something the start
+              // view doesn't show. The "idle" view-mode is the host-
+              // supplied default — when the host opens the panel in
+              // 'doc', staying in 'doc' is idle and switching to 'city'
+              // is the non-idle drill-in.
               selectedMarkerId != null || snippetExpanded || viewMode !== defaultViewMode
             ),
             onExitTrail: () => {
@@ -259501,90 +260854,253 @@ const FileCityTrailSequenceLayout = ({
               setDrawerHeightOverridePct(null);
               setSnippetExpanded(false);
               setViewMode(defaultViewMode);
+              setRequestDismissed(false);
             },
             viewMode,
-            onSetViewMode: setViewMode
+            onSignOff: handleSignOff,
+            signedOff: userHasSignedOff,
+            informative: isInformative
           }
         ),
-        viewMode === "doc" ? /* @__PURE__ */ jsx(
-          TrailDocumentView,
+        trail2.summary && trail2.summary.trim().length > 0 && !requestDismissed ? /* @__PURE__ */ jsx(
+          TrailRequestIntroModal,
           {
-            markers: markersForThisRepo,
-            summary: trail2.summary,
-            readFile,
-            selectedMarkerId,
-            onSelectMarker
+            body: trail2.summary,
+            request: trail2.request,
+            title: trail2.title,
+            author: trail2.author,
+            createdAt: trail2.createdAt,
+            markerCount: trail2.markers.length,
+            repoCount: ((_c = trail2.repos) == null ? void 0 : _c.length) ?? 0,
+            fileCount: new Set(
+              trail2.markers.map((m) => m.sourcePath).filter((p2) => !!p2 && p2.length > 0)
+            ).size,
+            seenBy: (() => {
+              const noteAuthors = /* @__PURE__ */ new Set();
+              for (const n of trail2.notes ?? []) {
+                if (!n.author || n.author === trail2.author) continue;
+                noteAuthors.add(n.author);
+              }
+              return Array.from(noteAuthors);
+            })(),
+            notesByAuthor: (() => {
+              const map2 = /* @__PURE__ */ new Map();
+              for (const n of trail2.notes ?? []) {
+                if (!n.author) continue;
+                let markerId = null;
+                if (n.kind === "snippet") {
+                  markerId = n.scope.markerId;
+                } else if (n.kind === "markdown" && n.scope.kind === "description") {
+                  markerId = n.scope.markerId;
+                }
+                if (!markerId) continue;
+                (map2.get(n.author) ?? map2.set(n.author, /* @__PURE__ */ new Set()).get(n.author)).add(markerId);
+              }
+              const result = {};
+              for (const [k, set2] of map2) result[k] = Array.from(set2);
+              return result;
+            })(),
+            steps: trail2.markers.map((m, i) => ({
+              id: m.id,
+              label: m.label && m.label.trim().length > 0 ? m.label : `Step ${i + 1}`,
+              sourcePath: m.sourcePath
+            })),
+            slideIdPrefix: `trail-request-${trail2.id}`,
+            defaultMode: viewMode,
+            onBegin: (mode) => {
+              setViewMode(mode);
+              handleStartTrail();
+              setRequestDismissed(true);
+            },
+            onBeginAtStep: (stepIndex, mode) => {
+              setViewMode(mode);
+              const marker = trail2.markers[stepIndex];
+              if (marker) onSelectMarker(marker.id);
+              setRequestDismissed(true);
+            },
+            onDismiss: () => setRequestDismissed(true),
+            signOffs: trail2.signOffs,
+            signedByCurrentUser: userHasSignedOff
           }
-        ) : /* @__PURE__ */ jsxs(
+        ) : null,
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: containerRef,
+            ref: mainAreaRef,
             style: {
               flex: 1,
               position: "relative",
               minHeight: 0,
-              overflow: "hidden"
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column"
             },
             children: [
-              cityData ? /* @__PURE__ */ jsx(
-                FileCity3D,
-                {
-                  cityData,
-                  width: "100%",
-                  height: "100%",
-                  selectedPath: selectedMarker ? markerCityPath(selectedMarker, trail2) : null,
-                  onBuildingClick: handleBuildingClick,
-                  onCameraFrame,
-                  showControls: false,
-                  backgroundColor: theme2.colors.background,
-                  textColor: theme2.colors.textMuted,
-                  isGrown: effectiveShow3D,
-                  highlightLayers: cityHighlightLayers,
-                  defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
-                }
-              ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
-              /* @__PURE__ */ jsx(
-                TrailFilePath,
+              viewMode === "doc" ? /* @__PURE__ */ jsx(
+                TrailDocumentView,
                 {
-                  ref: filePathRef,
-                  containerRef,
-                  buildings: trailPathBuildings,
-                  markerTitles: trailPathTitles,
-                  currentStepIndex: trailPathCurrentStepIndex,
-                  cityCenter
+                  markers: markersForThisRepo,
+                  summary: trail2.summary,
+                  readFile,
+                  selectedMarkerId,
+                  onSelectMarker
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                TrailLeaderLine,
+              ) : /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  ref: leaderLineRef,
-                  containerRef,
-                  building: selectedBuilding,
-                  cityCenter,
-                  targetRef: snippetPaneRef
+                  ref: containerRef,
+                  style: {
+                    flex: 1,
+                    position: "relative",
+                    minHeight: 0,
+                    overflow: "hidden"
+                  },
+                  children: [
+                    cityData ? /* @__PURE__ */ jsx(
+                      FileCity3D,
+                      {
+                        cityData,
+                        width: "100%",
+                        height: "100%",
+                        selectedPath: selectedMarker ? markerCityPath(selectedMarker, trail2) : null,
+                        onBuildingClick: handleBuildingClick,
+                        onCameraFrame,
+                        showControls: false,
+                        backgroundColor: theme2.colors.background,
+                        textColor: theme2.colors.textMuted,
+                        isGrown: effectiveShow3D,
+                        highlightLayers: cityHighlightLayers,
+                        defaultBuildingColor: trailFilesActive ? theme2.colors.textTertiary : void 0
+                      }
+                    ) : /* @__PURE__ */ jsx(CityLoadingPlaceholder, {}),
+                    /* @__PURE__ */ jsx(
+                      TrailFilePath,
+                      {
+                        ref: filePathRef,
+                        containerRef,
+                        buildings: trailPathBuildings,
+                        markerTitles: trailPathTitles,
+                        currentStepIndex: trailPathCurrentStepIndex,
+                        cityCenter
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TrailLeaderLine,
+                      {
+                        ref: leaderLineRef,
+                        containerRef,
+                        building: selectedBuilding,
+                        cityCenter,
+                        targetRef: snippetPaneRef
+                      }
+                    ),
+                    overlayMarkdown ? /* @__PURE__ */ jsx(
+                      TrailMarkdownOverlay,
+                      {
+                        eyebrow: overlayMarkdown.eyebrow,
+                        title: overlayMarkdown.title,
+                        subtitle: overlayMarkdown.subtitle,
+                        markdown: overlayMarkdown.markdown,
+                        slideIdPrefix: overlayMarkdown.slideIdPrefix,
+                        bottomOffset: `${drawerHeightPct}%`,
+                        disableBottomTransition: isResizingDrawer,
+                        containerRef: setMarkdownOverlayEl,
+                        annotations: markdownAnnotations,
+                        activeAnnotationId: activeMarkdownAnnotationId,
+                        onAnnotationClick: handleMarkdownAnnotationClick,
+                        onCreateNoteForSelection: handleCreateMarkdownNoteForSelection,
+                        composerOpen: markdownComposerOpen
+                      }
+                    ) : null,
+                    markdownNotesSelection && markdownOverlayWidth != null ? /* @__PURE__ */ jsx(
+                      MarkdownNotePanel,
+                      {
+                        selection: markdownNotesSelection,
+                        notes: markdownNotes,
+                        style: {
+                          position: "absolute",
+                          top: 16,
+                          left: markdownOverlayWidth + 12,
+                          width: 320,
+                          // Hug the thread height — short threads stay compact;
+                          // long ones cap and engage the panel's internal scroll.
+                          // Bound by the available canvas above the drawer so
+                          // dragging the drawer up doesn't push the panel under.
+                          maxHeight: `min(420px, calc(100% - ${drawerHeightPct}% - 32px))`,
+                          // Above the markdown overlay (1900) but below the
+                          // request modal (2000) and the LGTM stamp animation
+                          // (1980) so signing the trail still cleanly covers it.
+                          zIndex: 1955
+                        },
+                        onClose: () => setMarkdownNotesSelection(null),
+                        onSubmitNote: handleSubmitMarkdownNote,
+                        onReplyNote: handleReplyMarkdownNote,
+                        onDeleteNote: handleDeleteMarkdownNote
+                      }
+                    ) : null,
+                    showFilesPanel && trailFiles.length > 0 ? /* @__PURE__ */ jsx(
+                      TrailFilesPanel,
+                      {
+                        files: trailFiles,
+                        onClose: () => setShowFilesPanel(false)
+                      }
+                    ) : null,
+                    showNotesPanel && (trail2.notes ?? []).length > 0 ? /* @__PURE__ */ jsx(
+                      TrailNotesPanel,
+                      {
+                        notes: trail2.notes ?? [],
+                        markers: trail2.markers,
+                        onJumpToMarker: (markerId) => {
+                          onSelectMarker(markerId);
+                          setShowNotesPanel(false);
+                        },
+                        onClose: () => setShowNotesPanel(false)
+                      }
+                    ) : null,
+                    (selectedMarker == null ? void 0 : selectedMarker.snippet) ? /* @__PURE__ */ jsx(
+                      SnippetSidePane,
+                      {
+                        ref: snippetPaneCallbackRef,
+                        marker: selectedMarker,
+                        snippet: selectedMarker.snippet,
+                        readFile,
+                        onClose: () => onSelectMarker(null),
+                        drawerHeightPct,
+                        disableBottomTransition: isResizingDrawer,
+                        expanded: snippetExpanded,
+                        onToggleExpanded: () => setSnippetExpanded((v) => !v),
+                        markdownOverlayWidth,
+                        snippetNotes,
+                        activeSnippetThreadKey,
+                        snippetComposerOpen,
+                        onOpenSnippetThread: handleOpenSnippetThread,
+                        onCloseSnippetThread: handleCloseSnippetThread,
+                        onOpenSnippetComposer: handleOpenSnippetComposer
+                      }
+                    ) : null,
+                    ((_d = selectedMarker == null ? void 0 : selectedMarker.snippet) == null ? void 0 : _d.kind) === "slice" && snippetNotesSelection && snippetPaneWidth != null ? /* @__PURE__ */ jsx(
+                      SnippetNotePanel,
+                      {
+                        selection: snippetNotesSelection,
+                        notes: snippetNotes,
+                        style: {
+                          position: "absolute",
+                          top: 16,
+                          right: snippetPaneWidth + SNIPPET_PANE_RIGHT_GUTTER_PX + 12,
+                          width: 320,
+                          maxHeight: `min(420px, calc(100% - ${drawerHeightPct}% - 32px))`,
+                          zIndex: 1955
+                        },
+                        onClose: () => setSnippetNotesSelection(null),
+                        onSubmitNote: handleSubmitSnippetNote,
+                        onReplyNote: handleReplySnippetNote,
+                        onDeleteNote: handleDeleteSnippetNote,
+                        onRemoveComposerRange: removeSnippetComposerRange
+                      }
+                    ) : null
+                  ]
                 }
               ),
-              overlayMarkdown ? /* @__PURE__ */ jsx(
-                TrailMarkdownOverlay,
-                {
-                  eyebrow: overlayMarkdown.eyebrow,
-                  title: overlayMarkdown.title,
-                  subtitle: overlayMarkdown.subtitle,
-                  markdown: overlayMarkdown.markdown,
-                  slideIdPrefix: overlayMarkdown.slideIdPrefix,
-                  bottomOffset: `${drawerHeightPct}%`,
-                  disableBottomTransition: isResizingDrawer,
-                  containerRef: setMarkdownOverlayEl,
-                  nav: markersForThisRepo.length > 0 ? {
-                    position: stepperIndex,
-                    total: markersForThisRepo.length,
-                    onStart: handleStartTrail,
-                    onPrev: handleStepPrev,
-                    onNext: handleStepNext
-                  } : void 0,
-                  files: showSequenceDrawer ? void 0 : trailFiles
-                }
-              ) : null,
               /* @__PURE__ */ jsx(
                 SequenceDrawer,
                 {
@@ -259594,29 +261110,90 @@ const FileCityTrailSequenceLayout = ({
                   onSelectMarker,
                   visible: showSequenceDrawer,
                   heightPct: drawerHeightPct,
-                  containerHeightPx: (containerSize == null ? void 0 : containerSize.height) ?? null,
+                  containerHeightPx: (mainAreaSize == null ? void 0 : mainAreaSize.height) ?? null,
                   onHeightChange: setDrawerHeightOverridePct,
                   onResizeStart: () => setIsResizingDrawer(true),
                   onResizeEnd: () => setIsResizingDrawer(false)
                 }
-              ),
-              (selectedMarker == null ? void 0 : selectedMarker.snippet) ? /* @__PURE__ */ jsx(
-                SnippetSidePane,
-                {
-                  ref: snippetPaneCallbackRef,
-                  marker: selectedMarker,
-                  snippet: selectedMarker.snippet,
-                  readFile,
-                  onClose: () => onSelectMarker(null),
-                  drawerHeightPct,
-                  disableBottomTransition: isResizingDrawer,
-                  expanded: snippetExpanded,
-                  onToggleExpanded: () => setSnippetExpanded((v) => !v),
-                  markdownOverlayWidth
-                }
-              ) : null
+              )
             ]
           }
+        ),
+        /* @__PURE__ */ jsx(
+          TrailFooter,
+          {
+            markerCount: markersForThisRepo.length,
+            activeMarkerIndex: stepperIndex,
+            onStart: handleStartTrail,
+            onPrev: handleStepPrev,
+            onNext: handleStepNext,
+            filesAvailable: viewMode !== "doc" && trailFiles.length > 0,
+            showFilesPanel,
+            onToggleFilesPanel: () => setShowFilesPanel((v) => !v),
+            notesAvailable: (trail2.notes ?? []).length > 0,
+            showNotesPanel,
+            onToggleNotesPanel: () => setShowNotesPanel((v) => !v),
+            diagramAvailable: true,
+            showSequenceDrawer,
+            onToggleSequenceDrawer: () => {
+              setDrawerHeightOverridePct(null);
+              setShowSequenceDrawer((v) => !v);
+            }
+          }
+        ),
+        signOffAnimating ? /* @__PURE__ */ jsx(SignOffStampAnimation, { informative: isInformative }) : null
+      ]
+    }
+  );
+};
+const SignOffStampAnimation = ({
+  informative
+}) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        inset: 0,
+        // Above every trail overlay but below the request modal
+        // (zIndex 2000) — the modal opens once the animation
+        // resolves and should fully cover this graphic.
+        zIndex: 1980,
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes lgtm-stamp-land {
+          0%   { transform: scale(2.6) rotate(-2deg); opacity: 0; }
+          45%  { transform: scale(1.05) rotate(-9deg); opacity: 1; }
+          60%  { transform: scale(1.18) rotate(-8deg); }
+          75%  { transform: scale(1) rotate(-8deg); }
+          100% { transform: scale(1) rotate(-8deg); opacity: 1; }
+        }
+      ` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              transformOrigin: "center",
+              animation: "lgtm-stamp-land 1100ms cubic-bezier(.18,.89,.32,1.28) both",
+              filter: `drop-shadow(0 8px 12px ${theme2.colors.background})`
+            },
+            children: /* @__PURE__ */ jsx(
+              LgtmStamp,
+              {
+                theme: theme2,
+                size: 220,
+                rotated: false,
+                text: informative ? "ACK" : "LGTM"
+              }
+            )
+          }
         )
       ]
     }
@@ -259780,7 +261357,13 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
   disableBottomTransition,
   expanded,
   onToggleExpanded,
-  markdownOverlayWidth
+  markdownOverlayWidth,
+  snippetNotes,
+  activeSnippetThreadKey,
+  snippetComposerOpen,
+  onOpenSnippetThread,
+  onCloseSnippetThread,
+  onOpenSnippetComposer
 }, ref) {
   const { theme: theme2 } = useTheme();
   if (!marker.sourcePath) {
@@ -259831,7 +261414,13 @@ const SnippetSidePane = React.forwardRef(function SnippetSidePane2({
           focusLine: snippet2.focusLine,
           contextLines: snippet2.contextLines,
           readFile,
-          background: theme2.colors.background
+          background: theme2.colors.background,
+          notes: snippetNotes,
+          activeThreadKey: activeSnippetThreadKey,
+          composerOpen: snippetComposerOpen,
+          onOpenThread: onOpenSnippetThread,
+          onCloseThread: onCloseSnippetThread,
+          onOpenComposer: onOpenSnippetComposer
         }
       ) : /* @__PURE__ */ jsx(
         TrailDiffSnippetView,
@@ -260154,408 +261743,927 @@ const TrailDocumentView = ({
               lineHeight: 1.6,
               color: theme2.colors.text,
               whiteSpace: "pre-wrap",
-              marginBottom: 32,
-              paddingBottom: 24,
-              borderBottom: `1px solid ${theme2.colors.border}`
+              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: summary
+            children: marker.description
           }
         ) : null,
-        markers.length === 0 ? /* @__PURE__ */ jsx(
+        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,
+  activeMarkerIndex,
+  show3D,
+  onToggle3D,
+  hideToggle = false,
+  canExit,
+  onExitTrail,
+  viewMode,
+  onSignOff,
+  signedOff,
+  informative
+}) => {
+  const { theme: theme2 } = useTheme();
+  const toggleButtonStyle = (active) => ({
+    flexShrink: 0,
+    fontFamily: theme2.fonts.body,
+    fontSize: theme2.fontSizes[0],
+    fontWeight: theme2.fontWeights.medium,
+    color: active ? theme2.colors.background : theme2.colors.text,
+    background: active ? theme2.colors.accent : "transparent",
+    border: `1px solid ${active ? theme2.colors.accent : theme2.colors.muted}`,
+    borderRadius: theme2.radii[3],
+    padding: "4px 10px",
+    cursor: "pointer",
+    lineHeight: 1.2
+  });
+  const isDoc = viewMode === "doc";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "8px 16px",
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              fontFamily: theme2.fonts.body,
-              fontSize: theme2.fontSizes[1],
-              color: theme2.colors.textSecondary
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: 2,
+              minWidth: 0
             },
-            children: "No markers in this repo."
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme2.fonts.heading,
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: theme2.fontWeights.semibold,
+                    color: theme2.colors.text
+                  },
+                  children: trail2.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": `${markerCount} marker${markerCount === 1 ? "" : "s"} in this repo`,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    height: theme2.fontSizes[0]
+                  },
+                  children: Array.from({ length: markerCount }).map((_, i) => {
+                    const isActive = i === activeMarkerIndex;
+                    return /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          background: isActive ? theme2.colors.accent : theme2.colors.textSecondary,
+                          // Group dots in fives for at-a-glance countability — a
+                          // wider gap before every 5th index (after the first)
+                          // creates visual columns of 5 like tally marks.
+                          marginLeft: i === 0 ? 0 : i % 5 === 0 ? 11 : 5
+                        }
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ]
           }
-        ) : 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
-        ))
-      ] })
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          hideToggle || isDoc ? null : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggle3D,
+              "aria-pressed": show3D,
+              title: show3D ? "Switch to flat (2D) view" : "Switch to 3D view",
+              style: toggleButtonStyle(show3D),
+              children: "3D"
+            }
+          ),
+          signedOff ? null : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onSignOff,
+              title: informative ? "ACK — acknowledge that this trail makes sense" : "LGTM — sign off on this trail",
+              style: {
+                flexShrink: 0,
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[0],
+                fontWeight: theme2.fontWeights.semibold,
+                color: theme2.colors.background,
+                background: theme2.colors.accent,
+                border: `1px solid ${theme2.colors.accent}`,
+                borderRadius: theme2.radii[3],
+                padding: "4px 12px",
+                cursor: "pointer",
+                lineHeight: 1.2
+              },
+              children: informative ? "ACK" : "LGTM"
+            }
+          ),
+          canExit ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onExitTrail,
+              title: "Return to the trail summary",
+              style: {
+                flexShrink: 0,
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[0],
+                fontWeight: theme2.fontWeights.medium,
+                color: theme2.colors.text,
+                background: "transparent",
+                border: `1px solid ${theme2.colors.muted}`,
+                borderRadius: theme2.radii[3],
+                padding: "4px 10px",
+                cursor: "pointer",
+                lineHeight: 1.2
+              },
+              children: "Exit"
+            }
+          ) : null
+        ] })
+      ]
     }
   );
 };
-const TrailDocumentCard = ({
-  index: index2,
-  total,
-  marker,
-  readFile,
-  isActive,
-  onActivate
+const panelToggleButtonStyle = (theme2, active) => ({
+  flexShrink: 0,
+  fontFamily: theme2.fonts.body,
+  fontSize: theme2.fontSizes[0],
+  fontWeight: theme2.fontWeights.medium,
+  color: active ? theme2.colors.background : theme2.colors.text,
+  background: active ? theme2.colors.accent : "transparent",
+  border: `1px solid ${active ? theme2.colors.accent : theme2.colors.muted}`,
+  borderRadius: theme2.radii[3],
+  padding: "4px 10px",
+  cursor: "pointer",
+  lineHeight: 1.2
+});
+const notesSortButtonStyle = (theme2, active, side) => ({
+  flexShrink: 0,
+  fontFamily: theme2.fonts.body,
+  fontSize: theme2.fontSizes[0],
+  fontWeight: theme2.fontWeights.medium,
+  color: active ? theme2.colors.background : theme2.colors.textSecondary,
+  background: active ? theme2.colors.accent : "transparent",
+  border: `1px solid ${active ? theme2.colors.accent : theme2.colors.muted}`,
+  borderTopLeftRadius: side === "left" ? theme2.radii[2] : 0,
+  borderBottomLeftRadius: side === "left" ? theme2.radii[2] : 0,
+  borderTopRightRadius: side === "right" ? theme2.radii[2] : 0,
+  borderBottomRightRadius: side === "right" ? theme2.radii[2] : 0,
+  marginLeft: side === "right" ? -1 : 0,
+  padding: "2px 8px",
+  cursor: "pointer",
+  lineHeight: 1.2
+});
+const TrailFooter = ({
+  markerCount,
+  activeMarkerIndex,
+  onStart,
+  onPrev,
+  onNext,
+  diagramAvailable,
+  showSequenceDrawer,
+  onToggleSequenceDrawer,
+  filesAvailable,
+  showFilesPanel,
+  onToggleFilesPanel,
+  notesAvailable,
+  showNotesPanel,
+  onToggleNotesPanel
 }) => {
   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);
+  const idle = activeMarkerIndex < 0;
+  const canPrev = !idle;
+  const canNext = !idle && activeMarkerIndex < markerCount - 1;
+  const startEnabled = markerCount > 0;
+  const stepButtonStyle = (enabled) => ({
+    background: "transparent",
+    border: `1px solid ${theme2.colors.muted}`,
+    borderRadius: theme2.radii[2],
+    color: enabled ? theme2.colors.text : theme2.colors.textTertiary,
+    cursor: enabled ? "pointer" : "not-allowed",
+    padding: "4px 12px",
+    fontFamily: theme2.fonts.body,
+    fontSize: theme2.fontSizes[0],
+    lineHeight: 1.2,
+    opacity: enabled ? 1 : 0.5
+  });
+  const diagramButtonStyle = panelToggleButtonStyle(theme2, showSequenceDrawer);
   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"
+        padding: "8px 16px",
+        borderTop: `1px solid ${theme2.colors.border}`,
+        display: "grid",
+        // Three columns so the nav cluster sits in true center of the
+        // bar regardless of whether the right-hand Diagram toggle is
+        // rendered. Left spacer mirrors the right column so the middle
+        // stays centered between the bar's outer edges.
+        gridTemplateColumns: "1fr auto 1fr",
+        alignItems: "center",
+        gap: 12,
+        flexShrink: 0,
+        background: theme2.colors.background
       },
       children: [
         /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            onClick: onActivate,
-            title: isActive ? "Clear selection" : "Select this marker on the city view",
             style: {
+              justifySelf: "start",
               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
+              alignItems: "center",
+              gap: 6
             },
             children: [
+              filesAvailable ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onToggleFilesPanel,
+                  "aria-pressed": showFilesPanel,
+                  title: showFilesPanel ? "Hide files list" : "Show files list",
+                  style: panelToggleButtonStyle(theme2, showFilesPanel),
+                  children: "Files"
+                }
+              ) : null,
+              notesAvailable ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onToggleNotesPanel,
+                  "aria-pressed": showNotesPanel,
+                  title: showNotesPanel ? "Hide notes" : "Show all notes",
+                  style: panelToggleButtonStyle(theme2, showNotesPanel),
+                  children: "Notes"
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              minWidth: 0,
+              justifySelf: "center"
+            },
+            children: idle ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onStart,
+                disabled: !startEnabled,
+                title: startEnabled ? "Jump to the first step" : "No steps in this repo",
+                style: {
+                  background: theme2.colors.accent,
+                  color: theme2.colors.background,
+                  border: `1px solid ${theme2.colors.accent}`,
+                  borderRadius: theme2.radii[3],
+                  padding: "6px 16px",
+                  fontFamily: theme2.fonts.body,
+                  fontSize: theme2.fontSizes[1],
+                  fontWeight: theme2.fontWeights.semibold,
+                  cursor: startEnabled ? "pointer" : "not-allowed",
+                  opacity: startEnabled ? 1 : 0.5,
+                  lineHeight: 1.2
+                },
+                children: "Start trail"
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPrev,
+                  disabled: !canPrev,
+                  "aria-label": "Previous step",
+                  title: "Previous step",
+                  style: stepButtonStyle(canPrev),
+                  children: "◀ Prev"
+                }
+              ),
               /* @__PURE__ */ jsxs(
-                "div",
+                "span",
                 {
                   style: {
                     fontFamily: theme2.fonts.body,
                     fontSize: theme2.fontSizes[0],
                     color: theme2.colors.textSecondary,
-                    letterSpacing: "0.04em",
-                    textTransform: "uppercase"
+                    fontVariantNumeric: "tabular-nums",
+                    minWidth: 48,
+                    textAlign: "center"
                   },
                   children: [
-                    index2 + 1,
+                    activeMarkerIndex + 1,
                     " / ",
-                    total
+                    markerCount
                   ]
                 }
               ),
               /* @__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",
+                "button",
                 {
-                  style: {
-                    fontFamily: theme2.fonts.monospace,
-                    fontSize: theme2.fontSizes[0],
-                    color: theme2.colors.textSecondary
-                  },
-                  children: marker.sourcePath
+                  type: "button",
+                  onClick: onNext,
+                  disabled: !canNext,
+                  "aria-label": "Next step",
+                  title: "Next step",
+                  style: stepButtonStyle(canNext),
+                  children: "Next ▶"
                 }
-              ) : null
-            ]
+              )
+            ] })
           }
         ),
-        marker.description ? /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { style: { justifySelf: "end" }, children: diagramAvailable ? /* @__PURE__ */ jsx(
+          "button",
           {
-            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
+            type: "button",
+            onClick: onToggleSequenceDrawer,
+            "aria-pressed": showSequenceDrawer,
+            title: showSequenceDrawer ? "Hide sequence diagram" : "Show sequence diagram",
+            style: diagramButtonStyle,
+            children: "Diagram"
           }
-        ) : 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
+        ) : null })
       ]
     }
   );
 };
-const TrailHeader = ({
-  trail: trail2,
-  markerCount,
-  activeMarkerIndex,
-  show3D,
-  onToggle3D,
-  hideToggle = false,
-  showSequenceDrawer,
-  onToggleSequenceDrawer,
-  canExit,
-  onExitTrail,
-  viewMode,
-  onSetViewMode
+const TrailFilesPanel = ({
+  files,
+  onClose
+}) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        // Sized to feel like a peek, not a full takeover. Internal
+        // scroll handles long file lists.
+        maxHeight: "45%",
+        display: "flex",
+        flexDirection: "column",
+        background: theme2.colors.backgroundSecondary,
+        borderTop: `1px solid ${theme2.colors.border}`,
+        boxShadow: theme2.shadows[3],
+        // Above every trail overlay (markdown overlay 1900, leader
+        // line 1901, snippet pane 1900) but below the request modal
+        // (2000) so the modal can still cover everything when reopened.
+        zIndex: 1950,
+        animation: "trail-files-slide-up 180ms ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes trail-files-slide-up {
+          from { transform: translateY(100%); }
+          to   { transform: translateY(0); }
+        }
+      ` }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Hide files list",
+            title: "Hide files list",
+            style: {
+              position: "absolute",
+              top: 6,
+              right: 10,
+              background: "transparent",
+              border: "none",
+              color: theme2.colors.textTertiary,
+              fontSize: theme2.fontSizes[2],
+              cursor: "pointer",
+              lineHeight: 1,
+              padding: 0,
+              zIndex: 1
+            },
+            children: "×"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", minHeight: 0 }, children: /* @__PURE__ */ jsx(TrailFilesList, { files }) })
+      ]
+    }
+  );
+};
+const TrailNotesPanel = ({
+  notes,
+  markers,
+  onJumpToMarker,
+  onClose
 }) => {
   const { theme: theme2 } = useTheme();
-  const toggleButtonStyle = (active) => ({
-    flexShrink: 0,
-    fontFamily: theme2.fonts.body,
-    fontSize: theme2.fontSizes[0],
-    fontWeight: theme2.fontWeights.medium,
-    color: active ? theme2.colors.background : theme2.colors.text,
-    background: active ? theme2.colors.accent : "transparent",
-    border: `1px solid ${active ? theme2.colors.accent : theme2.colors.muted}`,
-    borderRadius: theme2.radii[3],
-    padding: "4px 10px",
-    cursor: "pointer",
-    lineHeight: 1.2
-  });
-  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";
+  const [sortMode, setSortMode] = React.useState("recent");
+  const markerLabelById = React.useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    for (const m of markers) {
+      const label = m.label && m.label.trim().length > 0 ? m.label : m.id;
+      map2.set(m.id, label);
+    }
+    return map2;
+  }, [markers]);
+  const markerIndexById = React.useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    markers.forEach((m, i) => map2.set(m.id, i));
+    return map2;
+  }, [markers]);
+  const formatRelative2 = (iso) => {
+    const ms = Date.now() - new Date(iso).getTime();
+    const min = Math.round(ms / 6e4);
+    if (min < 1) return "just now";
+    if (min < 60) return `${min}m ago`;
+    const hr = Math.round(min / 60);
+    if (hr < 24) return `${hr}h ago`;
+    const day = Math.round(hr / 24);
+    if (day < 7) return `${day}d ago`;
+    const wk = Math.round(day / 7);
+    if (wk < 5) return `${wk}w ago`;
+    const mo = Math.round(day / 30);
+    if (mo < 12) return `${mo}mo ago`;
+    return `${Math.round(day / 365)}y ago`;
+  };
+  const ordered = React.useMemo(() => {
+    const arr = [...notes];
+    if (sortMode === "recent") {
+      arr.sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+      return arr;
+    }
+    const indexFor = (n) => {
+      if (n.kind === "markdown" && n.scope.kind === "summary") return -1;
+      const markerId = n.kind === "snippet" ? n.scope.markerId : n.kind === "markdown" && n.scope.kind === "description" ? n.scope.markerId : null;
+      if (!markerId) return Number.MAX_SAFE_INTEGER;
+      return markerIndexById.get(markerId) ?? Number.MAX_SAFE_INTEGER;
+    };
+    const subRank = (n) => {
+      if (n.kind === "snippet") {
+        const first = n.anchor.kind === "slice" ? n.anchor.ranges[0] : null;
+        return 1e6 + ((first == null ? void 0 : first.startLine) ?? 0);
+      }
+      return 0;
+    };
+    arr.sort((a, b) => {
+      const ai = indexFor(a);
+      const bi = indexFor(b);
+      if (ai !== bi) return ai - bi;
+      const ar = subRank(a);
+      const br2 = subRank(b);
+      if (ar !== br2) return ar - br2;
+      return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+    });
+    return arr;
+  }, [notes, sortMode, markerIndexById]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        padding: "8px 16px",
-        borderBottom: `1px solid ${theme2.colors.border}`,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        maxHeight: "55%",
         display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-        flexShrink: 0
+        flexDirection: "column",
+        background: theme2.colors.backgroundSecondary,
+        borderTop: `1px solid ${theme2.colors.border}`,
+        boxShadow: theme2.shadows[3],
+        zIndex: 1950,
+        animation: "trail-notes-slide-up 180ms ease-out"
       },
       children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes trail-notes-slide-up {
+          from { transform: translateY(100%); }
+          to   { transform: translateY(0); }
+        }
+      ` }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
+              padding: "8px 14px 4px",
+              fontFamily: theme2.fonts.body,
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              letterSpacing: 0.4,
+              textTransform: "uppercase",
+              flexShrink: 0,
               display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gap: 2,
-              minWidth: 0
+              alignItems: "center",
+              gap: 8
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("span", { children: "Notes in this trail" }),
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
-                    fontFamily: theme2.fonts.heading,
-                    fontSize: theme2.fontSizes[1],
-                    fontWeight: theme2.fontWeights.semibold,
-                    color: theme2.colors.text
+                    display: "flex",
+                    alignItems: "center",
+                    marginLeft: 12,
+                    textTransform: "none",
+                    letterSpacing: 0
                   },
-                  children: trail2.title
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setSortMode("recent"),
+                        "aria-pressed": sortMode === "recent",
+                        title: "Sort by most recent",
+                        style: notesSortButtonStyle(theme2, sortMode === "recent", "left"),
+                        children: "Recent"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setSortMode("trail"),
+                        "aria-pressed": sortMode === "trail",
+                        title: "Sort by trail order (summary, then markers)",
+                        style: notesSortButtonStyle(theme2, sortMode === "trail", "right"),
+                        children: "Trail order"
+                      }
+                    )
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx(
-                "div",
+                "button",
                 {
-                  "aria-label": `${markerCount} marker${markerCount === 1 ? "" : "s"} in this repo`,
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Hide notes",
+                  title: "Hide notes",
                   style: {
-                    display: "flex",
-                    alignItems: "center",
-                    height: theme2.fontSizes[0]
+                    marginLeft: "auto",
+                    background: "transparent",
+                    border: "none",
+                    color: theme2.colors.textTertiary,
+                    fontSize: theme2.fontSizes[2],
+                    cursor: "pointer",
+                    lineHeight: 1,
+                    padding: 0
                   },
-                  children: Array.from({ length: markerCount }).map((_, i) => {
-                    const isActive = i === activeMarkerIndex;
-                    return /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          width: 6,
-                          height: 6,
-                          borderRadius: "50%",
-                          background: isActive ? theme2.colors.accent : theme2.colors.textSecondary,
-                          // Group dots in fives for at-a-glance countability — a
-                          // wider gap before every 5th index (after the first)
-                          // creates visual columns of 5 like tally marks.
-                          marginLeft: i === 0 ? 0 : i % 5 === 0 ? 11 : 5
-                        }
-                      },
-                      i
-                    );
-                  })
+                  children: "×"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          canExit ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onExitTrail,
-              title: "Return to the trail summary",
-              style: {
-                flexShrink: 0,
-                fontFamily: theme2.fonts.body,
-                fontSize: theme2.fontSizes[0],
-                fontWeight: theme2.fontWeights.medium,
-                color: theme2.colors.text,
-                background: "transparent",
-                border: `1px solid ${theme2.colors.muted}`,
-                borderRadius: theme2.radii[3],
-                padding: "4px 10px",
-                cursor: "pointer",
-                lineHeight: 1.2
-              },
-              children: "Exit"
-            }
-          ) : null,
-          isDoc ? null : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onToggleSequenceDrawer,
-              "aria-pressed": showSequenceDrawer,
-              title: showSequenceDrawer ? "Hide sequence diagram" : "Show sequence diagram",
-              style: toggleButtonStyle(showSequenceDrawer),
-              children: "Diagram"
-            }
-          ),
-          hideToggle || isDoc ? null : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onToggle3D,
-              "aria-pressed": show3D,
-              title: show3D ? "Switch to flat (2D) view" : "Switch to 3D view",
-              style: toggleButtonStyle(show3D),
-              children: "3D"
-            }
-          ),
-          /* @__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"
-              }
-            )
-          ] })
-        ] })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              overflowY: "auto",
+              minHeight: 0,
+              padding: "4px 6px 8px"
+            },
+            children: ordered.map((n) => {
+              const scopeLabel = n.kind === "snippet" ? `${markerLabelById.get(n.scope.markerId) ?? n.scope.markerId} · snippet` : n.scope.kind === "description" ? markerLabelById.get(n.scope.markerId) ?? n.scope.markerId : "Summary";
+              const targetMarkerId = n.kind === "snippet" ? n.scope.markerId : n.scope.kind === "description" ? n.scope.markerId : null;
+              const clickable = !!targetMarkerId;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (targetMarkerId) onJumpToMarker(targetMarkerId);
+                  },
+                  disabled: !clickable,
+                  style: {
+                    all: "unset",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 4,
+                    width: "100%",
+                    padding: "8px 10px",
+                    borderRadius: theme2.radii[2],
+                    cursor: clickable ? "pointer" : "default",
+                    background: "transparent",
+                    color: theme2.colors.text,
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[1],
+                    transition: "background 100ms ease"
+                  },
+                  onMouseEnter: (e) => {
+                    if (clickable) {
+                      e.currentTarget.style.background = `color-mix(in srgb, ${theme2.colors.text} 6%, transparent)`;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  title: clickable ? `Jump to ${scopeLabel}` : "Summary-scope note (no jump target)",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "baseline",
+                          gap: 8,
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: n.author }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                color: theme2.colors.textTertiary,
+                                fontFamily: theme2.fonts.monospace
+                              },
+                              children: scopeLabel
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                marginLeft: "auto",
+                                color: theme2.colors.textTertiary,
+                                fontVariantNumeric: "tabular-nums"
+                              },
+                              children: formatRelative2(n.createdAt)
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          whiteSpace: "pre-wrap",
+                          wordBreak: "break-word",
+                          color: theme2.colors.text,
+                          // Cap each note body at three lines in the panel so
+                          // a long thread doesn't push other notes off-screen.
+                          display: "-webkit-box",
+                          WebkitLineClamp: 3,
+                          WebkitBoxOrient: "vertical",
+                          overflow: "hidden"
+                        },
+                        children: n.body
+                      }
+                    )
+                  ]
+                },
+                n.id
+              );
+            })
+          }
+        )
       ]
     }
   );