@principal-ai/subsystems-react 0.23.4 → 0.24.1

package/dist/subsystem/SubsystemComponentGraph.d.ts

@@ -7,13 +7,18 @@
  * inside one labeled boundary frame; nodes without one sit outside every
  * boundary. Clicking a component invokes `onSelect`.
  *
+ * When the model has components but no topology or walkthrough edges, the
+ * canvas is a constructs catalog (list + signature) instead of a graph.
+ *
  * This is a focused fork of the package's `GraphRenderer` pipeline (same ELK
  * edge routing, delayed fitView, Background/Controls/MiniMap, node/edge type
  * injection, onNodeClick) adapted to the subsystem model — read-only.
  */
 import type { ReactNode } from 'react';
-import { type SubsystemComponentEdge, type SubsystemComponent, type SubsystemRelation, type SubsystemWalkthrough } from './model';
+import { type SubsystemComponentEdge, type SubsystemComponent, type SubsystemEdgeView, type SubsystemRelation, type SubsystemWalkthrough } from './model';
 import type { SubsystemOpenFileOptions } from './declarationRef';
+import { type SubsystemDiagnostic } from './DiagnosticToggle';
+import { type SubsystemIssue } from './IssueList';
 import type { ComponentVerificationState } from './ComponentDeclaration';
 /** Context passed to `renderWalkthroughViewer` when a flow/step is focused. */
 export interface WalkthroughViewerContext {
@@ -45,6 +50,17 @@ export interface SubsystemComponentGraphProps {
     maxNodeWidth?: number;
     /** Show edge labels (mechanism names) on the graph. @default true */
     showEdgeLabels?: boolean;
+    /**
+     * Which edge vocabulary the canvas draws. The relation and walkthrough
+     * vocabularies are disjoint, so a graph carrying both shows one or the
+     * other — never both. Edges outside the view are hidden (labels go too).
+     * - `relations`: topology relation edges (`imports`, `extends`, …)
+     * - `walkthroughs`: walkthrough hop edges (`calls`, `feeds`, …), including
+     *   step numbers when a flow is focused/hovered
+     * Defaults to `walkthroughs` when the model has walkthroughs but no
+     * relations (e.g. flow-only models), otherwise `relations`.
+     */
+    edgeView?: SubsystemEdgeView;
     /** Subsystem title displayed in the sidebar. */
     title?: string;
     /**
@@ -92,6 +108,29 @@ export interface SubsystemComponentGraphProps {
     sidebarExtra?: ReactNode;
     /** Rendered in the sidebar under the description (e.g. selection inspector). */
     sidebarAfterDescription?: ReactNode;
+    /**
+     * Diagnostics status chip in the sidebar title row (beside the description
+     * toggle). Shows the last verification pass's state as an icon color + count;
+     * `onOpen` opens the full report. Omit to hide the chip.
+     */
+    diagnostic?: SubsystemDiagnostic;
+    /**
+     * Verification issues for this graph (audit findings). When diagnostics are
+     * active (see `showIssues`) the sidebar's bottom panel becomes the issue
+     * list instead of the file tree / walkthroughs.
+     */
+    issues?: SubsystemIssue[];
+    /**
+     * Force the sidebar into diagnostics mode. Defaults to `true` whenever
+     * `issues` is non-empty (and nothing else has been forced).
+     */
+    showIssues?: boolean;
+    /** Click an issue — focus its target on the graph / open detail. */
+    onSelectIssue?: (issue: SubsystemIssue) => void;
+    /** Apply an issue's deterministic fix. */
+    onApplyIssueFix?: (issue: SubsystemIssue) => void;
+    /** Hover an issue — transiently highlight its target (null on leave). */
+    onHoverIssue?: (issue: SubsystemIssue | null) => void;
     /**
      * Host-injected reader/renderer for the bottom file drawer, keyed by
      * repo-root-relative path. Opening happens on declaration/file-tree clicks.

package/dist/subsystem/SubsystemComponentGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBtE,OAAO,EAOL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAKjE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAYzE,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,oBAAoB,CAAC;IAClC,0EAA0E;IAC1E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,2FAA2F;IAC3F,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACrE;AAMD,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,wGAAwG;IACxG,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;kFAC8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACtC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAChF;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,SAAS,CAAC;IACvE;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC9D;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,qBAAqB,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAC;CAC3D;AAmqED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BAsC1E"}
+{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"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"}

package/dist/subsystem/SubsystemComponentGraph.js

@@ -8,6 +8,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * inside one labeled boundary frame; nodes without one sit outside every
  * boundary. Clicking a component invokes `onSelect`.
  *
+ * When the model has components but no topology or walkthrough edges, the
+ * canvas is a constructs catalog (list + signature) instead of a graph.
+ *
  * This is a focused fork of the package's `GraphRenderer` pipeline (same ELK
  * edge routing, delayed fitView, Background/Controls/MiniMap, node/edge type
  * injection, onNodeClick) adapted to the subsystem model — read-only.
@@ -17,8 +20,11 @@ import { ReactFlow, ReactFlowProvider, Background, BackgroundVariant, Controls,
 import { useTheme } from '@principal-ade/industry-theme';
 import { ChevronDown, ChevronUp, Pause, Play, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { buildSubsystemGraph, deriveGraphEdges, MECHANISM_COLOR, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
+import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, isRelationMechanism, isWalkthroughMechanism, MECHANISM_COLOR, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
+import { ConstructsCatalog } from './ConstructsCatalog';
 import { SubsystemComponentNode, SubsystemGroupNode, SubsystemEdge, SUBSYSTEM_CALLBACKS, hexWithAlpha, EDGE_DIM_ALPHA, fileMatchForNode, flowElementVisibility } from './nodes';
+import { SubsystemDiagnosticToggle } from './DiagnosticToggle';
+import { SubsystemIssueList } from './IssueList';
 import { SubsystemFileTree } from './SubsystemFileTree';
 import { GraphLayoutCover } from './GraphLayoutCover';
 import { ComponentDeclaration } from './ComponentDeclaration';
@@ -69,11 +75,17 @@ function FileOverlayCloseButton({ onClose }) {
 const WalkthroughDrawerContent = memo(function WalkthroughDrawerContent({ render, walkthrough, stepIndex, onOpenFile, }) {
     return _jsx(_Fragment, { children: render({ walkthrough, stepIndex, onOpenFile }) });
 });
-function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, onVerifyComponent, componentVerification }) {
+function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, onVerifyComponent, componentVerification }) {
     const { theme } = useTheme();
     const { fitView } = useReactFlow();
     const viewport = useViewport();
     const graphEdges = useMemo(() => deriveGraphEdges({ relations, walkthroughs }), [relations, walkthroughs]);
+    // One edge vocabulary at a time. When the caller doesn't pick, follow the
+    // model: a flow-only graph defaults to walkthrough edges rather than empty.
+    const resolvedEdgeView = edgeView ??
+        (relations.length === 0 && (walkthroughs?.length ?? 0) > 0
+            ? 'walkthroughs'
+            : 'relations');
     const [built, setBuilt] = useState({
         nodes: [],
         edges: [],
@@ -597,6 +609,13 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                 markerEnd: nextMarker,
             };
         };
+        // Edges outside the selected view are hidden entirely (labels included).
+        const edgeInView = (e) => {
+            const mechanism = e.data?.mechanism ?? 'imports';
+            return resolvedEdgeView === 'relations'
+                ? isRelationMechanism(mechanism)
+                : isWalkthroughMechanism(mechanism);
+        };
         if (openedEdgeIds || focusEdgeIds || previewEdgeIds) {
             return baseEdges.map((e) => {
                 const vis = flowElementVisibility({
@@ -606,14 +625,18 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                     anySelected: focusEdgeIds != null,
                 });
                 const dimmed = previewEdgeIds ? vis.hidden || !previewEdgeIds.has(e.id) : vis.dimmed;
-                const hidden = vis.hidden;
+                const hidden = vis.hidden || !edgeInView(e);
                 return { ...paint(e, dimmed), hidden };
             });
         }
-        if (!selectedEdgeId)
-            return baseEdges;
-        return baseEdges.map((e) => paint(e, e.id !== selectedEdgeId));
-    }, [baseEdges, selectedEdgeId, openedEdgeIds, focusEdgeIds, previewEdgeIds]);
+        if (selectedEdgeId) {
+            return baseEdges.map((e) => ({
+                ...paint(e, e.id !== selectedEdgeId),
+                hidden: !edgeInView(e),
+            }));
+        }
+        return baseEdges.map((e) => ({ ...e, hidden: !edgeInView(e) }));
+    }, [baseEdges, selectedEdgeId, openedEdgeIds, focusEdgeIds, previewEdgeIds, resolvedEdgeView]);
     const onNodesChange = useCallback((changes) => {
         // Capture dimension changes (React Flow's measurement callback).
         // Group parents are ELK-sized — ignore their measurements.
@@ -673,6 +696,10 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
     // own owner-avatar header. Clicking a header collapses that repo's tree.
     const repoGroups = useMemo(() => buildRepoGroups(components), [components]);
     const hasWalkthroughs = useMemo(() => (walkthroughs?.length ?? 0) > 0, [walkthroughs]);
+    // Diagnostics mode: the bottom panel shows the issue list instead of the
+    // file tree / walkthroughs. Explicit `showIssues` wins; otherwise any issues
+    // present turn it on.
+    const issuesActive = showIssues ?? (issues?.length ?? 0) > 0;
     const [collapsedRepos, setCollapsedRepos] = useState(new Set());
     const toggleRepoCollapsed = useCallback((key) => {
         setCollapsedRepos((prev) => {
@@ -1052,9 +1079,7 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
             if (e.hidden)
                 return false;
             const d = e?.data;
-            if (d?.dimmed)
-                return false;
-            return true;
+            return !d?.dimmed;
         })
             .map((e) => {
             const d = e.data;
@@ -1097,7 +1122,7 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
     const walkthroughViewerRef = useRef(renderWalkthroughViewer);
     walkthroughViewerRef.current = renderWalkthroughViewer;
     const renderWalkthroughDrawerContent = useCallback((ctx) => walkthroughViewerRef.current?.(ctx) ?? null, []);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row', userSelect: sidebarDrag ? 'none' : undefined }, children: [!hideSidebar && (title || description || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasWalkthroughs) && (_jsxs("div", { style: {
+    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row', userSelect: sidebarDrag ? 'none' : undefined }, children: [!hideSidebar && (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasWalkthroughs) && (_jsxs("div", { style: {
                     width: sidebarWidth,
                     minWidth: sidebarWidth,
                     borderRight: `1px solid ${theme.colors.border}`,
@@ -1113,7 +1138,7 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 12,
-                        }, children: [sidebarExtra, (title || description) && (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: 8 }, children: [title && (_jsx("h2", { style: {
+                        }, children: [sidebarExtra, (title || description || diagnostic) && (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: 8 }, children: [title && (_jsx("h2", { style: {
                                             margin: 0,
                                             flex: 1,
                                             minWidth: 0,
@@ -1121,21 +1146,29 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                                             fontWeight: 600,
                                             color: theme.colors.text,
                                             fontFamily: theme.fonts.monospace,
-                                        }, children: title })), description && (_jsx("button", { type: "button", "aria-expanded": descriptionVisible, "aria-label": descriptionVisible ? 'Hide description' : 'Show description', title: descriptionVisible ? 'Hide description' : 'Show description', onMouseEnter: () => setDescToggleHover(true), onMouseLeave: () => setDescToggleHover(false), onClick: () => setDescriptionVisible((v) => !v), style: {
-                                            display: 'inline-flex',
+                                        }, children: title })), _jsxs("div", { style: {
+                                            display: 'flex',
                                             alignItems: 'center',
-                                            justifyContent: 'center',
+                                            gap: 4,
                                             flexShrink: 0,
-                                            width: 22,
-                                            height: 22,
-                                            padding: 0,
-                                            border: 'none',
-                                            borderRadius: 4,
-                                            background: descToggleHover ? theme.colors.border : 'transparent',
-                                            color: descToggleHover ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
-                                            cursor: 'pointer',
-                                            transition: 'background 120ms ease, color 120ms ease',
-                                        }, children: descriptionVisible ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }) }))] })), description && descriptionVisible && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, fontSizeScale: 0.9, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription] }), (treeFilePaths.length > 0 || hasWalkthroughs) && (_jsxs("div", { style: {
+                                            // Title's flex:1 already pushes this cluster right; without a
+                                            // title, keep the actions flush right instead of flush-left.
+                                            marginLeft: title ? undefined : 'auto',
+                                        }, children: [diagnostic && _jsx(SubsystemDiagnosticToggle, { ...diagnostic }), description && (_jsx("button", { type: "button", "aria-expanded": descriptionVisible, "aria-label": descriptionVisible ? 'Hide description' : 'Show description', title: descriptionVisible ? 'Hide description' : 'Show description', onMouseEnter: () => setDescToggleHover(true), onMouseLeave: () => setDescToggleHover(false), onClick: () => setDescriptionVisible((v) => !v), style: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    flexShrink: 0,
+                                                    width: 22,
+                                                    height: 22,
+                                                    padding: 0,
+                                                    border: 'none',
+                                                    borderRadius: 4,
+                                                    background: descToggleHover ? theme.colors.border : 'transparent',
+                                                    color: descToggleHover ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
+                                                    cursor: 'pointer',
+                                                    transition: 'background 120ms ease, color 120ms ease',
+                                                }, children: descriptionVisible ? _jsx(ChevronUp, { size: 14 }) : _jsx(ChevronDown, { size: 14 }) }))] })] })), description && descriptionVisible && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, fontSizeScale: 0.9, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription] }), (treeFilePaths.length > 0 || hasWalkthroughs || issuesActive) && (_jsx("div", { style: {
                             ...(showDesc ? { height: '50%' } : { flex: 1, minHeight: 0 }),
                             minHeight: 160,
                             flexShrink: 0,
@@ -1143,46 +1176,46 @@ function Inner({ components, relations, walkthroughs, onSelect, onEdgeSelect, me
                             display: 'flex',
                             flexDirection: 'column',
                             overflow: 'hidden',
-                        }, children: [hasWalkthroughs && (_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: ['walkthroughs', 'files'].map((view) => (_jsx("button", { type: "button", role: "tab", "aria-selected": sidebarView === view, onClick: () => setSidebarView(view), style: {
+                        }, children: issuesActive ? (_jsx(SubsystemIssueList, { issues: issues ?? [], onSelectIssue: onSelectIssue, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue })) : (_jsxs(_Fragment, { children: [hasWalkthroughs && (_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: ['walkthroughs', 'files'].map((view) => (_jsx("button", { type: "button", role: "tab", "aria-selected": sidebarView === view, onClick: () => setSidebarView(view), style: {
+                                            flex: 1,
+                                            minWidth: 0,
+                                            padding: '8px 8px',
+                                            border: 'none',
+                                            borderRadius: 0,
+                                            background: sidebarView === view ? theme.colors.background : 'transparent',
+                                            color: sidebarView === view
+                                                ? theme.colors.text
+                                                : theme.colors.textSecondary,
+                                            fontSize: theme.fontSizes[1],
+                                            fontFamily: theme.fonts.monospace,
+                                            textTransform: 'capitalize',
+                                            cursor: 'pointer',
+                                        }, children: view === 'walkthroughs' ? 'Walkthroughs' : 'Files' }, view))) })), sidebarView === 'walkthroughs' && walkthroughs && walkthroughs.length > 0 ? (_jsx("div", { style: {
                                         flex: 1,
-                                        minWidth: 0,
-                                        padding: '8px 8px',
-                                        border: 'none',
-                                        borderRadius: 0,
-                                        background: sidebarView === view ? theme.colors.background : 'transparent',
-                                        color: sidebarView === view
-                                            ? theme.colors.text
-                                            : theme.colors.textSecondary,
-                                        fontSize: theme.fontSizes[1],
-                                        fontFamily: theme.fonts.monospace,
-                                        textTransform: 'capitalize',
-                                        cursor: 'pointer',
-                                    }, children: view === 'walkthroughs' ? 'Walkthroughs' : 'Files' }, view))) })), sidebarView === 'walkthroughs' && walkthroughs && walkthroughs.length > 0 ? (_jsx("div", { style: {
-                                    flex: 1,
-                                    minHeight: 0,
-                                    overflowY: 'auto',
-                                    padding: '0 0 12px',
-                                }, children: walkthroughs.map((tl) => (_jsx(WalkthroughFlow, { walkthrough: tl, collapsed: !expandedWalkthroughs.has(tl.id), active: focusedWalkthroughId === tl.id
-                                        ? { stepIndex: focusedStepIndex }
-                                        : hoveredWalkthroughStep?.walkthroughId === tl.id
-                                            ? { stepIndex: hoveredWalkthroughStep.stepIndex }
-                                            : null, onToggleCollapsed: toggleWalkthroughCollapsed, onFocusFlow: focusWalkthroughEdges, onClearFocus: clearWalkthroughFocus, onFocusStep: focusWalkthroughStep, onHoverStep: (tl, i) => setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: i }), onHoverFlow: (tl) => setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: null }), onLeaveStep: () => setHoveredWalkthroughStep(null) }, tl.id))) })) : treeFilePaths.length > 0 ? (_jsx(_Fragment, { children: repoGroups.groups.map((group, i) => {
-                                    const groupKey = group.repoKey ?? '__no-repo__';
-                                    const collapsed = collapsedRepos.has(groupKey);
-                                    return (_jsxs("div", { style: {
-                                            flex: collapsed ? '0 0 auto' : 1,
-                                            minHeight: collapsed ? 0 : undefined,
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
-                                        }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, headerless: repoGroups.multiRepo }))] }, groupKey));
-                                }) })) : null] }))] })), !hideSidebar && (title || description || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasWalkthroughs) && (_jsx("div", { onMouseDown: onSidebarResizeStart, "aria-label": "Resize sidebar", title: "Drag to resize", style: {
+                                        minHeight: 0,
+                                        overflowY: 'auto',
+                                        padding: '0 0 12px',
+                                    }, children: walkthroughs.map((tl) => (_jsx(WalkthroughFlow, { walkthrough: tl, collapsed: !expandedWalkthroughs.has(tl.id), active: focusedWalkthroughId === tl.id
+                                            ? { stepIndex: focusedStepIndex }
+                                            : hoveredWalkthroughStep?.walkthroughId === tl.id
+                                                ? { stepIndex: hoveredWalkthroughStep.stepIndex }
+                                                : null, onToggleCollapsed: toggleWalkthroughCollapsed, onFocusFlow: focusWalkthroughEdges, onClearFocus: clearWalkthroughFocus, onFocusStep: focusWalkthroughStep, onHoverStep: (tl, i) => setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: i }), onHoverFlow: (tl) => setHoveredWalkthroughStep({ walkthroughId: tl.id, stepIndex: null }), onLeaveStep: () => setHoveredWalkthroughStep(null) }, tl.id))) })) : treeFilePaths.length > 0 ? (_jsx(_Fragment, { children: repoGroups.groups.map((group, i) => {
+                                        const groupKey = group.repoKey ?? '__no-repo__';
+                                        const collapsed = collapsedRepos.has(groupKey);
+                                        return (_jsxs("div", { style: {
+                                                flex: collapsed ? '0 0 auto' : 1,
+                                                minHeight: collapsed ? 0 : undefined,
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
+                                            }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, headerless: repoGroups.multiRepo }))] }, groupKey));
+                                    }) })) : null] })) }))] })), !hideSidebar && (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasWalkthroughs) && (_jsx("div", { onMouseDown: onSidebarResizeStart, "aria-label": "Resize sidebar", title: "Drag to resize", style: {
                     width: 3,
                     flexShrink: 0,
                     cursor: 'col-resize',
@@ -1640,6 +1673,11 @@ export function SubsystemComponentGraph(props) {
         ro.observe(el);
         return () => ro.disconnect();
     }, []);
+    const constructsOnly = isConstructsOnlyModel({
+        components: props.components,
+        relations: props.relations,
+        walkthroughs: props.walkthroughs,
+    });
     return (_jsx("div", { ref: wrapRef, style: {
             position: 'relative',
             width: '100%',
@@ -1647,6 +1685,6 @@ export function SubsystemComponentGraph(props) {
             minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: _jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, measured: size }) }) }) }));
+        }, children: _jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: constructsOnly ? (_jsx(ConstructsCatalog, { components: props.components, onSelect: props.onSelect, title: props.title, hideSidebar: props.hideSidebar, description: props.description, diagnostic: props.diagnostic, sidebarExtra: props.sidebarExtra, sidebarAfterDescription: props.sidebarAfterDescription, renderFileViewer: props.renderFileViewer, renderFileView: props.renderFileView, onFileSelect: props.onFileSelect, onVerifyComponent: props.onVerifyComponent, componentVerification: props.componentVerification })) : (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, measured: size }) })) }) }));
 }
 //# sourceMappingURL=SubsystemComponentGraph.js.map