@principal-ai/subsystems-react 0.37.0 → 0.37.2

package/dist/subsystem/ConstructsCatalog.js

@@ -3,15 +3,21 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * ConstructsCatalog — master/detail for a constructs-only subsystem
  * (components, no topology or walkthrough edges).
  *
- * Left: the model's constructs as a toggle list. Right: signatures for
- * every construct currently on (`ComponentDeclaration`, stacked). File
- * opens still use the bottom FileDrawer when the host injects a viewer.
+ * Left: the model's files as a tree; clicking a file toggles its
+ * constructs. Right: signatures grouped by repo, and within a repo stacked
+ * per file under one combined file header carrying the path and a
+ * description toggle; a declaration with a known line labels just that
+ * construct's line in a file-like gutter, and `external` constructs get a
+ * header naming their kind with the body naming the construct. The model
+ * description's toggle sits in the left chrome and opens the markdown as an
+ * overlay over the construct area. File opens still use the bottom FileDrawer
+ * when the host injects a viewer.
  */
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { ChevronDown, ChevronRight, FileText, Folder } from 'lucide-react';
-import { constructBadgeColor, constructBadgeLabel, deriveNameFromSymbol, formatPurl, } from './model';
+import { AlignLeft, Box, ChevronDown, ChevronRight, FileText, Folder, X, } from 'lucide-react';
+import { formatPurl, } from './model';
 import { ComponentDeclaration } from './ComponentDeclaration';
 import { SubsystemDiagnosticToggle } from './DiagnosticToggle';
 import { FileDrawer } from './FileDrawer';
@@ -81,6 +87,24 @@ function repoLogo(c) {
         return `https://github.com/${m[1]}.png?size=40`;
     return undefined;
 }
+/**
+ * Split a repo's declarations into consecutive runs that share a `file`, so
+ * each run can render as one connected stack. Components with no `file` are
+ * never merged (they have no shared location to group under).
+ */
+function splitByFileRun(items) {
+    const runs = [];
+    for (const c of items) {
+        const prev = runs[runs.length - 1];
+        const key = c.file || `alias:${c.alias}`;
+        const prevKey = prev && prev[0] ? prev[0].file || `alias:${prev[0].alias}` : null;
+        if (prev && prevKey === key)
+            prev.push(c);
+        else
+            runs.push([c]);
+    }
+    return runs;
+}
 export function ConstructsCatalog({ components, onSelect, title, hideSidebar, description, diagnostic, sidebarExtra, sidebarAfterDescription, renderFileViewer, renderFileView, onFileSelect, componentVerification, onInspectSymbol, }) {
     const { theme, mode } = useTheme();
     const pierreTheme = resolvePierreSyntaxThemeName(mode);
@@ -104,27 +128,52 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
         })
             .map((x) => x.c);
     }, [components]);
-    const [visibleAliases, setVisibleAliases] = useState(() => orderedComponents[0] ? [orderedComponents[0].alias] : []);
-    const [focusedAlias, setFocusedAlias] = useState(() => orderedComponents[0]?.alias ?? null);
+    const [visibleAliases, setVisibleAliases] = useState([]);
+    const [focusedAlias, setFocusedAlias] = useState(null);
+    const [searchQuery, setSearchQuery] = useState('');
     const [descriptionVisible, setDescriptionVisible] = useState(false);
     const [descToggleHover, setDescToggleHover] = useState(false);
     const [hoveredRow, setHoveredRow] = useState(null);
-    const [sidebarTab, setSidebarTab] = useState('files');
     const [collapsedFolders, setCollapsedFolders] = useState(new Set());
+    // Explicit description toggles per file run. Unset falls back to the kind's
+    // default (externals open, files closed).
+    const [purposeOverrides, setPurposeOverrides] = useState({});
     const [drawer, setDrawer] = useState(null);
-    const focusedAliasRef = useRef(focusedAlias);
-    focusedAliasRef.current = focusedAlias;
     const visibleSet = useMemo(() => new Set(visibleAliases), [visibleAliases]);
     const visibleComponents = useMemo(() => orderedComponents.filter((c) => visibleSet.has(c.alias)), [orderedComponents, visibleSet]);
+    // When nothing is toggled on, the right pane falls back to a searchable list
+    // of every construct, rendered as if all were selected.
+    const searchActive = visibleComponents.length === 0;
+    const searchResults = useMemo(() => {
+        if (!searchActive)
+            return visibleComponents;
+        const q = searchQuery.trim().toLowerCase();
+        if (!q)
+            return orderedComponents;
+        return orderedComponents.filter((c) => {
+            const haystack = [
+                c.name,
+                c.symbol,
+                c.alias,
+                c.file,
+                c.construct,
+                c.stereotype,
+                c.purpose,
+            ]
+                .filter(Boolean)
+                .join(' ')
+                .toLowerCase();
+            return haystack.includes(q);
+        });
+    }, [searchActive, searchQuery, orderedComponents, visibleComponents]);
     const fileTree = useMemo(() => buildFileTree(orderedComponents), [orderedComponents]);
     const hasFiles = useMemo(() => orderedComponents.some((c) => !!c.file), [orderedComponents]);
-    const effectiveTab = hasFiles ? sidebarTab : 'constructs';
-    // Group visible declarations by purl so the repo/app identity (logo + name)
-    // renders once per group instead of on every card.
+    // Group the declarations on screen by purl so the repo/app identity
+    // (logo + name) renders once per group instead of on every card.
     const repoGroups = useMemo(() => {
         const groups = [];
         const index = new Map();
-        for (const c of visibleComponents) {
+        for (const c of searchResults) {
             const key = c.purl || c.alias;
             let at = index.get(key);
             if (at == null) {
@@ -137,12 +186,7 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
             groups[at].items.push(c);
         }
         return groups;
-    }, [visibleComponents]);
-    useEffect(() => {
-        if (!focusedAlias)
-            return;
-        document.getElementById(`construct-${focusedAlias}`)?.scrollIntoView({ block: 'nearest' });
-    }, [focusedAlias]);
+    }, [searchResults]);
     useEffect(() => {
         const last = visibleAliases[visibleAliases.length - 1];
         if (!last)
@@ -163,34 +207,17 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
             .getElementById(`construct-signature-${match.alias}`)
             ?.scrollIntoView({ block: 'nearest' });
     }, [orderedComponents, drawer]);
-    // Drop aliases that left the model; if nothing remains, show the first construct.
+    // Drop aliases that left the model; an empty set is valid (search fallback).
     useEffect(() => {
         const aliases = new Set(orderedComponents.map((c) => c.alias));
-        setVisibleAliases((prev) => {
-            const next = prev.filter((alias) => aliases.has(alias));
-            if (next.length > 0 || orderedComponents.length === 0)
-                return next;
-            return [orderedComponents[0].alias];
-        });
-        setFocusedAlias((prev) => {
-            if (prev && aliases.has(prev))
-                return prev;
-            return orderedComponents[0]?.alias ?? null;
-        });
+        setVisibleAliases((prev) => prev.filter((alias) => aliases.has(alias)));
+        setFocusedAlias((prev) => (prev && aliases.has(prev) ? prev : null));
     }, [orderedComponents]);
-    const toggle = useCallback((alias) => {
-        setFocusedAlias(alias);
-        setVisibleAliases((prev) => prev.includes(alias) ? prev.filter((x) => x !== alias) : [...prev, alias]);
-        onSelect?.(alias);
-    }, [onSelect]);
     const show = useCallback((alias) => {
         setFocusedAlias(alias);
         setVisibleAliases((prev) => (prev.includes(alias) ? prev : [...prev, alias]));
         onSelect?.(alias);
     }, [onSelect]);
-    const focusAt = useCallback((alias) => {
-        setFocusedAlias(alias);
-    }, []);
     const toggleFolder = useCallback((path) => {
         setCollapsedFolders((prev) => {
             const next = new Set(prev);
@@ -201,8 +228,11 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
             return next;
         });
     }, []);
+    const setPurposeOpen = useCallback((key, open) => {
+        setPurposeOverrides((prev) => ({ ...prev, [key]: open }));
+    }, []);
     /** File-tree click: show every construct declared in the file, or hide them
-     *  all when they're already shown — mirroring a construct row toggle. */
+     *  all when they're already shown — a bulk toggle of the file's constructs. */
     const toggleFile = useCallback((comps) => {
         const aliases = comps.map((c) => c.alias);
         setVisibleAliases((prev) => {
@@ -307,8 +337,17 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
         const comp = resolveRelated(components, ref);
         if (!comp)
             return;
+        // In the all-constructs search fallback nothing needs revealing — just
+        // surface the target. Otherwise add it to the visible set.
+        if (searchActive) {
+            setFocusedAlias(comp.alias);
+            document
+                .getElementById(`construct-signature-${comp.alias}`)
+                ?.scrollIntoView({ block: 'nearest' });
+            return;
+        }
         show(comp.alias);
-    }, [components, show]);
+    }, [components, show, searchActive]);
     const fileViewer = useMemo(() => {
         if (renderFileViewer)
             return renderFileViewer;
@@ -324,60 +363,20 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
     const fileViewerRef = useRef(fileViewer);
     fileViewerRef.current = fileViewer;
     const renderDrawerContent = useCallback((file, opts) => fileViewerRef.current?.(file, opts) ?? null, []);
-    const moveFocus = useCallback((delta) => {
-        if (orderedComponents.length === 0)
-            return;
-        const idx = Math.max(0, orderedComponents.findIndex((c) => c.alias === focusedAliasRef.current));
-        const next = orderedComponents[(idx + delta + orderedComponents.length) % orderedComponents.length];
-        focusAt(next.alias);
-    }, [orderedComponents, focusAt]);
     useEffect(() => {
         const onKey = (e) => {
-            const el = e.target;
-            if (el &&
-                (el.tagName === 'INPUT' ||
-                    el.tagName === 'TEXTAREA' ||
-                    el.tagName === 'SELECT' ||
-                    el.isContentEditable)) {
-                return;
-            }
-            if (e.metaKey || e.ctrlKey || e.altKey)
-                return;
-            if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                moveFocus(1);
-            }
-            else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                moveFocus(-1);
-            }
-            else if (e.key === 'Home') {
-                e.preventDefault();
-                if (orderedComponents[0])
-                    focusAt(orderedComponents[0].alias);
-            }
-            else if (e.key === 'End') {
-                e.preventDefault();
-                const last = orderedComponents[orderedComponents.length - 1];
-                if (last)
-                    focusAt(last.alias);
-            }
-            else if (e.key === ' ' || e.key === 'Enter') {
-                if (focusedAliasRef.current) {
-                    e.preventDefault();
-                    toggle(focusedAliasRef.current);
-                }
-            }
-            else if (e.key === 'Escape' && drawer) {
+            if (e.key === 'Escape' && drawer)
                 setDrawer(null);
-            }
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [orderedComponents, drawer, moveFocus, focusAt, toggle]);
+    }, [drawer]);
     const showChrome = !hideSidebar &&
-        !!(title || description || diagnostic || sidebarExtra || sidebarAfterDescription);
-    const showDesc = !!description && descriptionVisible;
+        !!(title ||
+            description ||
+            diagnostic ||
+            sidebarExtra ||
+            sidebarAfterDescription);
     return (_jsxs("div", { "data-testid": "constructs-catalog", style: {
             width: '100%',
             height: '100%',
@@ -396,7 +395,6 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
                     flexDirection: 'column',
                     overflow: 'hidden',
                 }, children: [showChrome && (_jsxs("div", { style: {
-                            flex: showDesc ? '0 0 auto' : undefined,
                             padding: '16px 16px 8px',
                             display: 'flex',
                             flexDirection: 'column',
@@ -428,125 +426,88 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
                                                     background: descriptionVisible || descToggleHover ? theme.colors.border : 'transparent',
                                                     color: descriptionVisible || descToggleHover ? theme.colors.text : muted,
                                                     cursor: 'pointer',
-                                                }, children: _jsx(FileText, { size: 14 }) }))] })] })), showDesc && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "constructs-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription] })), _jsx("div", { role: "tablist", "aria-label": "Sidebar view", style: {
-                            display: 'flex',
-                            width: '100%',
-                            flexShrink: 0,
-                            borderBottom: `1px solid ${theme.colors.border}`,
-                            background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                        }, children: ['files', 'constructs'].map((tab) => {
-                            if (tab === 'files' && !hasFiles)
-                                return null;
-                            const active = effectiveTab === tab;
-                            return (_jsx("button", { type: "button", role: "tab", "aria-selected": active, onClick: () => setSidebarTab(tab), style: {
-                                    flex: 1,
-                                    minWidth: 0,
-                                    padding: '8px 8px',
-                                    border: 'none',
-                                    borderRadius: 0,
-                                    background: active
-                                        ? theme.colors.background
-                                        : 'transparent',
-                                    color: active ? theme.colors.text : muted,
-                                    fontSize: theme.fontSizes[0],
-                                    fontFamily: theme.fonts.monospace,
-                                    letterSpacing: 0.4,
-                                    textTransform: 'uppercase',
-                                    cursor: 'pointer',
-                                }, children: tab === 'constructs' ? 'Constructs' : 'Files' }, tab));
-                        }) }), effectiveTab === 'constructs' ? (_jsx("ul", { role: "listbox", "aria-label": "Constructs", "aria-multiselectable": "true", "aria-activedescendant": focusedAlias ? `construct-${focusedAlias}` : undefined, style: {
-                            listStyle: 'none',
-                            margin: 0,
-                            padding: '0 8px 12px',
-                            overflowY: 'auto',
-                            flex: 1,
-                            minHeight: 0,
-                        }, children: orderedComponents.map((c) => {
-                            const visible = visibleSet.has(c.alias);
-                            const focused = c.alias === focusedAlias;
-                            const color = componentColor(c, pierreTheme);
-                            const badgeColor = constructBadgeColor(c) ?? color;
-                            const badgeLabel = constructBadgeLabel(c);
-                            const displayName = deriveNameFromSymbol(c.symbol, c.construct, c.name, c.file, c.stereotype);
-                            const rowOpen = drawer != null &&
-                                drawer.startLine != null &&
-                                !!c.file &&
-                                c.file === drawer.file &&
-                                c.declarationRef?.startLine === drawer.startLine;
-                            const hovered = hoveredRow === c.alias;
-                            return (_jsx("li", { role: "presentation", children: _jsxs("button", { type: "button", id: `construct-${c.alias}`, role: "option", "aria-selected": visible, "data-testid": `construct-row-${c.alias}`, onClick: () => toggle(c.alias), onMouseEnter: () => setHoveredRow(c.alias), onMouseLeave: () => setHoveredRow((h) => (h === c.alias ? null : h)), style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'stretch',
-                                        gap: 2,
-                                        width: '100%',
-                                        margin: '2px 0',
-                                        padding: '8px 10px 8px 12px',
-                                        textAlign: 'left',
-                                        border: 'none',
-                                        borderRadius: 6,
-                                        background: hovered
-                                            ? theme.colors.border
-                                            : visible
-                                                ? theme.colors.background
-                                                : 'transparent',
-                                        cursor: 'pointer',
-                                        transition: 'background 100ms ease, opacity 100ms ease',
-                                        boxShadow: [
-                                            visible ? `inset 0 0 0 1px ${theme.colors.border}` : null,
-                                            rowOpen ? `inset 2px 0 0 ${accentColor}` : null,
-                                        ]
-                                            .filter(Boolean)
-                                            .join(', ') || undefined,
-                                        outline: focused && !visible ? `1px dotted ${muted}` : undefined,
-                                        outlineOffset: -1,
-                                        opacity: visible ? 1 : hovered ? 1 : 0.72,
-                                    }, children: [_jsx("span", { style: {
-                                                display: 'flex',
-                                                alignItems: 'baseline',
-                                                gap: 8,
-                                                minWidth: 0,
-                                            }, children: _jsx("span", { style: {
-                                                    flex: 1,
-                                                    minWidth: 0,
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                    fontFamily: theme.fonts.monospace,
-                                                    fontSize: theme.fontSizes[1],
-                                                    color,
-                                                    fontWeight: visible ? 600 : 500,
-                                                }, children: displayName }) }), badgeLabel && (_jsx("span", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                minWidth: 0,
-                                            }, children: _jsx("span", { style: {
-                                                    flex: 1,
-                                                    minWidth: 0,
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                    fontFamily: theme.fonts.monospace,
-                                                    fontSize: theme.fontSizes[0],
-                                                    letterSpacing: 0.4,
-                                                    textTransform: 'uppercase',
-                                                    color: badgeColor,
-                                                }, children: badgeLabel }) }))] }) }, c.alias));
-                        }) })) : (_jsx("ul", { role: "tree", "aria-label": "Files", style: {
+                                                }, children: _jsx(FileText, { size: 14 }) }))] })] })), sidebarAfterDescription] })), hasFiles ? (_jsx("ul", { role: "tree", "aria-label": "Files", style: {
                             listStyle: 'none',
                             margin: 0,
                             padding: '6px 8px 12px',
                             overflowY: 'auto',
                             flex: 1,
                             minHeight: 0,
-                        }, children: renderTree(fileTree, 0) }))] }), _jsxs("div", { style: {
+                        }, children: renderTree(fileTree, 0) })) : (_jsx("p", { style: {
+                            margin: 0,
+                            padding: '12px 16px',
+                            color: muted,
+                            fontFamily: theme.fonts.body,
+                            fontSize: theme.fontSizes[0],
+                        }, children: "No files in this model." }))] }), _jsxs("div", { style: {
                     position: 'relative',
                     flex: 1,
                     minWidth: 0,
                     minHeight: 0,
                     display: 'flex',
                     flexDirection: 'column',
-                }, children: [_jsx("div", { "data-testid": "construct-signature", style: {
+                }, children: [description && descriptionVisible && (_jsxs(_Fragment, { children: [_jsx("div", { onClick: () => setDescriptionVisible(false), style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    zIndex: 2,
+                                    background: 'rgba(0,0,0,0.45)',
+                                } }), _jsxs("div", { style: {
+                                    position: 'absolute',
+                                    top: '50%',
+                                    left: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    zIndex: 3,
+                                    width: 360,
+                                    maxWidth: 'calc(100% - 16px)',
+                                    maxHeight: '70%',
+                                    overflow: 'auto',
+                                    padding: 16,
+                                    border: `1px solid ${theme.colors.border}`,
+                                    borderRadius: 8,
+                                    background: theme.colors.background,
+                                    boxShadow: '0 8px 24px rgba(0,0,0,0.28)',
+                                    fontSize: theme.fontSizes[0],
+                                    lineHeight: 1.5,
+                                }, children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: [_jsx("h3", { style: {
+                                                    margin: 0,
+                                                    flex: 1,
+                                                    minWidth: 0,
+                                                    fontSize: theme.fontSizes[1],
+                                                    fontWeight: 600,
+                                                    fontFamily: theme.fonts.monospace,
+                                                    letterSpacing: 0.4,
+                                                    textTransform: 'uppercase',
+                                                    color: theme.colors.textSecondary ?? muted,
+                                                }, children: "Overview" }), _jsx("button", { type: "button", "aria-label": "Close description", title: "Close", onClick: () => setDescriptionVisible(false), style: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    flexShrink: 0,
+                                                    width: 22,
+                                                    height: 22,
+                                                    padding: 0,
+                                                    border: 'none',
+                                                    borderRadius: 4,
+                                                    background: 'transparent',
+                                                    color: muted,
+                                                    cursor: 'pointer',
+                                                }, children: _jsx(X, { size: 14 }) })] }), _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "constructs-desc-overlay", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, enableKeyboardScrolling: false, autoFocusOnVisible: false })] })] })), searchActive && (_jsx("div", { style: { flexShrink: 0, padding: '12px 16px 0' }, children: _jsx("input", { type: "search", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search constructs\u2026", "aria-label": "Search constructs", "data-testid": "construct-search", style: {
+                                width: '100%',
+                                boxSizing: 'border-box',
+                                padding: '8px 10px',
+                                border: `1px solid ${theme.colors.border}`,
+                                borderRadius: 6,
+                                background: theme.colors.background,
+                                color: theme.colors.text,
+                                fontFamily: theme.fonts.monospace,
+                                fontSize: theme.fontSizes[1],
+                                outline: 'none',
+                            } }) })), _jsx("div", { "data-testid": "construct-signature", style: {
                             flex: 1,
                             minHeight: 0,
                             overflow: 'auto',
@@ -554,7 +515,7 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 12,
-                        }, children: visibleComponents.length > 0 ? (repoGroups.map((group) => (_jsxs("div", { style: {
+                        }, children: searchResults.length > 0 ? (repoGroups.map((group) => (_jsxs("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: 12,
@@ -565,35 +526,127 @@ export function ConstructsCatalog({ components, onSelect, title, hideSidebar, de
                                                 color: theme.colors.textSecondary ?? muted,
                                                 fontFamily: theme.fonts.body,
                                                 fontSize: theme.fontSizes[1],
-                                            }, children: group.label })] }), group.items.map((c) => {
-                                    // File-level: every declaration sharing the open file shows the
-                                    // indicator. Line-level: only the declaration actually being
-                                    // highlighted gets the accent border.
-                                    const fileOpen = drawer != null && !!c.file && c.file === drawer.file;
-                                    const lineOpen = fileOpen &&
-                                        drawer.startLine != null &&
-                                        c.declarationRef?.startLine === drawer.startLine;
-                                    return (_jsx("div", { id: `construct-signature-${c.alias}`, style: {
-                                            border: `1px solid ${lineOpen ? accentColor : theme.colors.border}`,
-                                            boxShadow: lineOpen ? `0 0 0 1px ${accentColor}` : undefined,
+                                            }, children: group.label })] }), splitByFileRun(group.items).map((run) => {
+                                    const lead = run[0];
+                                    const hasFile = !!lead.file;
+                                    const isExternal = lead.construct === 'external';
+                                    // File-backed runs and externals both get a header; externals
+                                    // name their kind instead of a path, so the body doesn't have
+                                    // to spell it out.
+                                    const showHeader = hasFile || isExternal;
+                                    const runKey = `${group.key}:${lead.file || lead.alias}`;
+                                    const runHasPurpose = run.some((c) => !!c.purpose?.trim());
+                                    const purposeOpen = purposeOverrides[runKey] ?? isExternal;
+                                    const runFileOpen = drawer != null && hasFile && lead.file === drawer.file;
+                                    return (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            border: `1px solid ${runFileOpen ? accentColor : theme.colors.border}`,
                                             borderRadius: 8,
                                             overflow: 'hidden',
                                             flexShrink: 0,
-                                        }, children: _jsx(ComponentDeclaration, { component: c, onOpenFile: fileViewer ? onOpenFile : undefined, defaultShowFile: !!fileViewer, onRelatedSelect: onRelatedSelect, onInspectSymbol: onInspectSymbol
-                                                ? (symbol, ref) => onInspectSymbol({
-                                                    purl: c.purl,
-                                                    file: c.file,
-                                                    symbol,
-                                                    ref,
-                                                })
-                                                : undefined, fileOpen: fileOpen, declarationOpen: lineOpen, showRepoIdentity: false, fileBadgeChrome: !!fileViewer, verification: componentVerification && focusedAlias === c.alias
-                                                ? componentVerification
-                                                : undefined }) }, c.alias));
+                                        }, children: [showHeader && (_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: 6,
+                                                    width: '100%',
+                                                    boxSizing: 'border-box',
+                                                    padding: '6px 10px',
+                                                    borderBottom: `1px solid ${runFileOpen ? accentColor : theme.colors.border}`,
+                                                    background: runFileOpen
+                                                        ? `${accentColor}14`
+                                                        : theme.colors.backgroundSecondary ??
+                                                            theme.colors.background,
+                                                    color: runFileOpen
+                                                        ? accentColor
+                                                        : theme.colors.textSecondary ?? muted,
+                                                    fontFamily: theme.fonts.monospace,
+                                                    fontSize: theme.fontSizes[0],
+                                                }, children: [isExternal ? (_jsxs("span", { style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: 6,
+                                                            flex: 1,
+                                                            minWidth: 0,
+                                                        }, children: [_jsx(Box, { size: 12, style: { flexShrink: 0 } }), _jsx("span", { style: {
+                                                                    overflow: 'hidden',
+                                                                    textOverflow: 'ellipsis',
+                                                                    whiteSpace: 'nowrap',
+                                                                }, children: "external" })] })) : (_jsxs("button", { type: "button", title: fileViewer ? `Open ${lead.file}` : lead.file, onClick: fileViewer
+                                                            ? () => onOpenFile(lead.file)
+                                                            : undefined, style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: 6,
+                                                            flex: 1,
+                                                            minWidth: 0,
+                                                            padding: 0,
+                                                            border: 'none',
+                                                            background: 'transparent',
+                                                            color: 'inherit',
+                                                            fontFamily: 'inherit',
+                                                            fontSize: 'inherit',
+                                                            textAlign: 'left',
+                                                            cursor: fileViewer ? 'pointer' : 'default',
+                                                        }, children: [_jsx(FileText, { size: 12, style: { flexShrink: 0 } }), _jsx("span", { style: {
+                                                                    overflow: 'hidden',
+                                                                    textOverflow: 'ellipsis',
+                                                                    whiteSpace: 'nowrap',
+                                                                }, children: lead.file })] })), runHasPurpose && (_jsx("button", { type: "button", title: purposeOpen ? 'Hide description' : 'Show description', "aria-label": purposeOpen ? 'Hide description' : 'Show description', "aria-expanded": purposeOpen, onClick: () => setPurposeOpen(runKey, !purposeOpen), style: {
+                                                            display: 'inline-flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            flexShrink: 0,
+                                                            width: 20,
+                                                            height: 20,
+                                                            padding: 0,
+                                                            border: 'none',
+                                                            borderRadius: 4,
+                                                            background: 'transparent',
+                                                            color: purposeOpen
+                                                                ? accentColor
+                                                                : theme.colors.textSecondary ?? muted,
+                                                            cursor: 'pointer',
+                                                        }, children: _jsx(AlignLeft, { size: 13 }) }))] })), run.map((c, i) => {
+                                                // File-level: every declaration sharing the open file
+                                                // shows the indicator. Line-level: only the declaration
+                                                // actually highlighted gets the inner accent ring.
+                                                const fileOpen = drawer != null && !!c.file && c.file === drawer.file;
+                                                const lineOpen = fileOpen &&
+                                                    drawer.startLine != null &&
+                                                    c.declarationRef?.startLine === drawer.startLine;
+                                                // A combined header owns the path, so declarations under
+                                                // it drop their own badge; those with no known line just
+                                                // render unnumbered. Without a header, keep the badge.
+                                                const numbered = hasFile && c.declarationRef?.startLine != null;
+                                                // The header names the external kind, so the body just
+                                                // names the construct.
+                                                const isExt = c.construct === 'external';
+                                                return (_jsx("div", { id: `construct-signature-${c.alias}`, style: {
+                                                        borderTop: i > 0
+                                                            ? `1px solid ${theme.colors.border}`
+                                                            : undefined,
+                                                        boxShadow: lineOpen
+                                                            ? `inset 0 0 0 1px ${accentColor}`
+                                                            : undefined,
+                                                    }, children: _jsx(ComponentDeclaration, { component: c, onOpenFile: fileViewer ? onOpenFile : undefined, defaultShowFile: showHeader ? false : !!fileViewer, onRelatedSelect: onRelatedSelect, onInspectSymbol: onInspectSymbol
+                                                            ? (symbol, ref) => onInspectSymbol({
+                                                                purl: c.purl,
+                                                                file: c.file,
+                                                                symbol,
+                                                                ref,
+                                                            })
+                                                            : undefined, fileOpen: fileOpen, declarationOpen: lineOpen, showRepoIdentity: false, fileBadgeChrome: showHeader ? false : !!fileViewer, hideActions: showHeader, externalName: isExt, showPurpose: showHeader ? purposeOpen : undefined, lineNumbers: numbered, verification: componentVerification && focusedAlias === c.alias
+                                                            ? componentVerification
+                                                            : undefined }) }, c.alias));
+                                            })] }, runKey));
                                 })] }, group.key)))) : (_jsx("p", { style: {
                                 margin: 0,
                                 color: muted,
                                 fontFamily: theme.fonts.body,
                                 fontSize: theme.fontSizes[1],
-                            }, children: "Toggle constructs on the left to show their signatures." })) }), _jsx(FileDrawer, { title: drawer?.file ?? null, onClose: () => setDrawer(null), fillHeight: drawer != null && drawer.startLine == null, children: drawer ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawer.file, startLine: drawer.startLine })) : null })] })] }));
+                            }, children: searchQuery.trim()
+                                ? `No constructs match “${searchQuery.trim()}”.`
+                                : 'No constructs in this model.' })) }), _jsx(FileDrawer, { title: drawer?.file ?? null, onClose: () => setDrawer(null), fillHeight: drawer != null && drawer.startLine == null, children: drawer ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawer.file, startLine: drawer.startLine })) : null })] })] }));
 }
 //# sourceMappingURL=ConstructsCatalog.js.map