@principal-ai/subsystems-react 0.37.5 → 0.37.6

package/dist/subsystem/C4Graph.js

@@ -0,0 +1,305 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * C4Graph — a C4 projection of a (composed) subsystem model on React Flow.
+ *
+ * Prototype test case: feed it a `C4Model` from `toC4()` and it draws the
+ * system as a compound frame, its containers (or components) as boxes, and
+ * externals/actors outside the system. Static `relations` render as solid
+ * edges; `walkthrough` hops render as dashed flow edges. Click a box to list
+ * the source components it rolled up.
+ *
+ * Same interaction language as the other graphs: React Flow + ELK + the shared
+ * `GRAPH_NAV_PROPS` chrome. Deliberately small — no measurement passes, no
+ * drawers, no walkthrough playback.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, useReactFlow, } from '@xyflow/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { computeElkLayout } from '../utils/elkLayout';
+import { describeConstructBreakdown, MECHANISM_COLOR } from './model';
+import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle } from './graphChrome';
+const NODE_W = 230;
+const NODE_H = 80;
+function baseName(path) {
+    const parts = path.split('/').filter(Boolean);
+    return parts[parts.length - 1] ?? path;
+}
+function edgeColor(mechanism, fallback) {
+    if (!mechanism)
+        return fallback;
+    return MECHANISM_COLOR[mechanism] ?? fallback;
+}
+function C4NodeView(props) {
+    const { theme } = useTheme();
+    const { node, selected } = props.data;
+    const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+    const kindColor = node.kind === 'external'
+        ? (theme.colors.warning ?? theme.colors.accent ?? theme.colors.info)
+        : node.kind === 'actor'
+            ? (theme.colors.accent ?? theme.colors.info)
+            : (theme.colors.border ?? '#333');
+    const tag = node.kind === 'container' ? 'container' : node.kind === 'external' ? 'external system' : node.kind === 'actor' ? 'actor' : 'component';
+    const subtitle = node.kind === 'component'
+        ? `${node.component?.construct ?? 'code'}${node.component?.file ? ` · ${baseName(node.component.file)}` : ''}`
+        : `${describeConstructBreakdown(node.constructs)}${node.members.length > 0 ? ` · ${node.members.length} component${node.members.length === 1 ? '' : 's'}` : ''}`;
+    return (_jsxs("div", { style: {
+            width: NODE_W,
+            height: NODE_H,
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            gap: 2,
+            padding: '8px 12px',
+            borderRadius: node.kind === 'actor' ? 20 : 8,
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            border: `2px ${node.kind === 'component' ? 'solid' : node.kind === 'container' ? 'solid' : 'dashed'} ${selected ? theme.colors.primary : kindColor}`,
+            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+            cursor: 'pointer',
+            fontFamily: theme.fonts.body,
+        }, children: [_jsx("span", { style: {
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0],
+                    letterSpacing: 0.5,
+                    textTransform: 'uppercase',
+                    color: kindColor,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }, children: tag }), _jsx("span", { style: {
+                    fontWeight: 600,
+                    fontSize: theme.fontSizes[2],
+                    color: theme.colors.text,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }, title: node.label, children: node.label }), _jsx("span", { style: {
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0],
+                    color: muted,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }, title: node.members.join(', '), children: subtitle }), _jsx(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }), _jsx(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } })] }));
+}
+function C4GroupView(props) {
+    const { theme } = useTheme();
+    const color = props.data.color;
+    return (_jsx("div", { style: {
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            borderRadius: 12,
+            border: `2px dashed ${color}`,
+            background: 'transparent',
+            pointerEvents: 'none',
+        }, children: _jsx("span", { style: {
+                position: 'absolute',
+                top: 0,
+                transform: 'translateY(-50%)',
+                left: 12,
+                zIndex: 1,
+                fontFamily: theme.fonts.monospace,
+                fontSize: theme.fontSizes[2],
+                fontWeight: 600,
+                letterSpacing: 0.5,
+                textTransform: 'uppercase',
+                lineHeight: '18px',
+                color,
+                background: theme.colors.background,
+                boxShadow: `0 0 0 1.5px ${theme.colors.background}`,
+                border: `2px solid ${color}`,
+                borderRadius: 4,
+                padding: '4px 10px',
+                boxSizing: 'border-box',
+                whiteSpace: 'nowrap',
+            }, children: props.data.label }) }));
+}
+const nodeTypes = {
+    'c4-node': C4NodeView,
+    'c4-group': C4GroupView,
+};
+function Inner({ model, title, onSelectNode }) {
+    const { theme } = useTheme();
+    const { fitView } = useReactFlow();
+    const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+    const [nodes, setNodes] = useState([]);
+    const [rfEdges, setRfEdges] = useState([]);
+    const [ready, setReady] = useState(false);
+    const [selectedId, setSelectedId] = useState(null);
+    const layoutKey = useMemo(() => [
+        ...model.nodes.map((n) => `${n.id}\0${n.parentId ?? ''}\0${n.label}`).sort(),
+        ...model.groups.map((g) => `${g.id}\0${g.parentId ?? ''}\0${g.memberIds.length}`).sort(),
+        ...model.edges.map((e) => `${e.id}\0${e.count}`).sort(),
+    ].join('\n'), [model]);
+    useEffect(() => {
+        let alive = true;
+        setReady(false);
+        setSelectedId(null);
+        const rfNodes = model.nodes.map((n, i) => ({
+            id: n.id,
+            type: 'c4-node',
+            position: { x: (i % 4) * (NODE_W + 60), y: Math.floor(i / 4) * (NODE_H + 40) },
+            width: NODE_W,
+            height: NODE_H,
+            ...(n.parentId ? { parentId: n.parentId } : {}),
+            data: { node: n, selected: false },
+        }));
+        const groups = model.groups.map((g) => ({
+            id: g.id,
+            memberIds: g.memberIds,
+            ...(g.parentId ? { parentId: g.parentId } : {}),
+        }));
+        const rfEdges = model.edges.map((e) => {
+            const flow = e.kind === 'flow';
+            const color = flow ? edgeColor(e.mechanisms[0], muted) : (theme.colors.border ?? '#666');
+            return {
+                id: e.id,
+                source: e.source,
+                target: e.target,
+                label: e.label,
+                labelShowBg: false,
+                labelStyle: { fill: muted, fontSize: theme.fontSizes[0], fontFamily: theme.fonts.monospace },
+                style: {
+                    stroke: color,
+                    strokeWidth: 1 + Math.min(e.count, 6) * 0.4,
+                    ...(flow ? { strokeDasharray: '6 4' } : {}),
+                },
+                markerEnd: { type: MarkerType.ArrowClosed, color, width: 18, height: 18 },
+                data: { edge: e },
+            };
+        });
+        void computeElkLayout(rfNodes, rfEdges, {
+            direction: 'RIGHT',
+            preserveNodePositions: false,
+            groups,
+            keepSingletonGroups: true,
+        })
+            .then((result) => {
+            if (!alive)
+                return;
+            const positioned = new Map(result.nodes.map((n) => [n.id, n]));
+            const builtGroups = new Set(result.groupBounds.keys());
+            const groupById = new Map(model.groups.map((g) => [g.id, g]));
+            const depthOf = (id) => {
+                let d = 0;
+                let g = groupById.get(id);
+                while (g?.parentId) {
+                    d += 1;
+                    g = groupById.get(g.parentId);
+                }
+                return d;
+            };
+            const shells = [...result.groupBounds.entries()]
+                .sort((a, b) => depthOf(a[0]) - depthOf(b[0]))
+                .map(([id, b]) => {
+                const def = groupById.get(id);
+                const parentId = def?.parentId && builtGroups.has(def.parentId) ? def.parentId : undefined;
+                return {
+                    id,
+                    type: 'c4-group',
+                    position: { x: b.x, y: b.y },
+                    width: Math.max(200, b.width),
+                    height: Math.max(120, b.height),
+                    draggable: false,
+                    selectable: false,
+                    ...(parentId ? { parentId } : {}),
+                    data: {
+                        label: def?.label ?? id,
+                        kind: def?.kind ?? 'container',
+                        color: def?.kind === 'system' ? (theme.colors.text ?? '#888') : (theme.colors.accent ?? theme.colors.info),
+                    },
+                };
+            });
+            const leaves = rfNodes.map((n) => {
+                const p = positioned.get(n.id);
+                const node = p ? { ...n, position: { x: p.position.x, y: p.position.y } } : n;
+                const parentId = node.parentId;
+                if (parentId && !builtGroups.has(parentId)) {
+                    const { parentId: _drop, ...rest } = node;
+                    return rest;
+                }
+                return node;
+            });
+            setNodes([...shells, ...leaves]);
+            setRfEdges(rfEdges);
+            setReady(true);
+            requestAnimationFrame(() => fitView({ padding: 0.15 }));
+        })
+            .catch((err) => {
+            if (!alive)
+                return;
+            console.warn('[c4-graph] ELK layout failed, using grid:', err);
+            setNodes(rfNodes);
+            setRfEdges(rfEdges);
+            setReady(true);
+            requestAnimationFrame(() => fitView({ padding: 0.15 }));
+        });
+        return () => {
+            alive = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutKey]);
+    const selected = useMemo(() => model.nodes.find((n) => n.id === selectedId) ?? null, [model, selectedId]);
+    const displayNodes = useMemo(() => nodes.map((n) => n.type === 'c4-node'
+        ? { ...n, data: { ...n.data, selected: n.id === selectedId } }
+        : n), [nodes, selectedId]);
+    const runtime = model.nodes.filter((n) => n.kind === 'container' || n.kind === 'component').length;
+    const outside = model.nodes.filter((n) => n.kind === 'external' || n.kind === 'actor').length;
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', background: theme.colors.background }, children: [_jsx(GraphLayerStyle, {}), _jsx(ReactFlow, { nodes: displayNodes, edges: rfEdges, nodeTypes: nodeTypes, className: GRAPH_CANVAS_CLASS, ...GRAPH_NAV_PROPS, onNodeClick: (_e, node) => {
+                    if (node.type !== 'c4-node')
+                        return;
+                    const next = node.id === selectedId ? null : node.id;
+                    setSelectedId(next);
+                    onSelectNode?.(next);
+                }, onPaneClick: () => {
+                    setSelectedId(null);
+                    onSelectNode?.(null);
+                }, proOptions: { hideAttribution: true }, children: _jsx(GraphChrome, {}) }), !ready && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: theme.colors.background,
+                    color: muted,
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0],
+                }, children: "Laying out C4 view\u2026" })), title && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: 12,
+                    left: 12,
+                    fontSize: theme.fontSizes[2],
+                    fontWeight: 600,
+                    color: theme.colors.text,
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${theme.colors.border ?? '#333'}`,
+                    borderRadius: 6,
+                    padding: '4px 10px',
+                }, children: [title, _jsxs("span", { style: { fontFamily: theme.fonts.monospace, fontSize: theme.fontSizes[0], color: muted, marginLeft: 8 }, children: [model.view, " view \u00B7 ", runtime, " ", model.view === 'container' ? 'containers' : 'components', " \u00B7 ", outside, " outside"] })] })), selected && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: 12,
+                    right: 12,
+                    width: 280,
+                    maxHeight: 'calc(100% - 24px)',
+                    overflowY: 'auto',
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${theme.colors.border ?? '#333'}`,
+                    borderRadius: 8,
+                    padding: '10px 12px',
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontWeight: 600, color: theme.colors.text, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: selected.label }), _jsx("button", { type: "button", onClick: () => {
+                                    setSelectedId(null);
+                                    onSelectNode?.(null);
+                                }, "aria-label": "Clear selection", style: { border: 'none', background: 'transparent', color: muted, cursor: 'pointer', fontSize: theme.fontSizes[2], lineHeight: 1 }, children: "\u00D7" })] }), _jsxs("div", { style: { fontFamily: theme.fonts.monospace, fontSize: theme.fontSizes[0], color: muted, margin: '4px 0 8px' }, children: [selected.kind, " \u00B7 ", selected.members.length, " component", selected.members.length === 1 ? '' : 's', selected.models && selected.models.length > 0 ? ` · ${selected.models.length} model${selected.models.length === 1 ? '' : 's'}` : ''] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: selected.members.map((alias) => (_jsx("span", { title: alias, style: {
+                                fontFamily: theme.fonts.monospace,
+                                fontSize: theme.fontSizes[0],
+                                color: theme.colors.text,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            }, children: alias }, alias))) })] }))] }));
+}
+export function C4Graph(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props }) }));
+}
+//# sourceMappingURL=C4Graph.js.map

package/dist/subsystem/C4Graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C4Graph.js","sourceRoot":"","sources":["../../src/subsystem/C4Graph.tsx"],"names":[],"mappings":"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"}

package/dist/subsystem/WalkthroughsPanel.d.ts

@@ -13,6 +13,8 @@
 import { type SubsystemWalkthrough } from './model';
 /** Pause (ms) between steps when a walkthrough autoplays. */
 export declare const WALKTHROUGH_PLAY_PAUSE_MS = 2500;
+/** How long a step's copy button flashes its "copied" checkmark (ms). */
+export declare const STEP_COPY_FEEDBACK_MS = 2000;
 export interface WalkthroughsPanelProps {
     /** Ordered walkthroughs — the list renders them in array order. */
     walkthroughs: SubsystemWalkthrough[];

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

@@ -1 +1 @@
-{"version":3,"file":"WalkthroughsPanel.d.ts","sourceRoot":"","sources":["../../src/subsystem/WalkthroughsPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAMH,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AAEjB,6DAA6D;AAC7D,eAAO,MAAM,yBAAyB,OAAO,CAAC;AA4W9C,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,qDAAqD;IACrD,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,sBAAsB,EAAE;QACtB,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,GAAG,IAAI,CAAC;IACT,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,GAChB,EAAE,sBAAsB,+BA0LxB"}
+{"version":3,"file":"WalkthroughsPanel.d.ts","sourceRoot":"","sources":["../../src/subsystem/WalkthroughsPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAMH,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AAGjB,6DAA6D;AAC7D,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,OAAO,CAAC;AA+c1C,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,qDAAqD;IACrD,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,sBAAsB,EAAE;QACtB,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,GAAG,IAAI,CAAC;IACT,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,WAAW,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,GAChB,EAAE,sBAAsB,+BA0LxB"}

package/dist/subsystem/WalkthroughsPanel.js

@@ -12,10 +12,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { ChevronDown, GripVertical, Pause, Play } from 'lucide-react';
+import { Check, ChevronDown, Copy, GripVertical, Pause, Play } from 'lucide-react';
 import { PROPOSED_COLOR, reorderTargetIndex, reorderWalkthroughs, walkthroughStepGraphEdgeId, } from './model';
+import { buildStepBrief } from './walkthroughBrief';
 /** Pause (ms) between steps when a walkthrough autoplays. */
 export const WALKTHROUGH_PLAY_PAUSE_MS = 2500;
+/** How long a step's copy button flashes its "copied" checkmark (ms). */
+export const STEP_COPY_FEEDBACK_MS = 2000;
+/** Square size (px) of a walkthrough header's Play/Collapse control. */
+const WALKTHROUGH_CONTROL_SIZE = 34;
 /** One collapsible walkthrough in the sidebar's flows panel. Clicking the
  *  title: closed → open + select; open with a step selected → select the whole
  *  flow (deselect the step, stay open); open with the whole flow selected →
@@ -35,6 +40,13 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
     const [gripHover, setGripHover] = useState(false);
     const [hoveredStep, setHoveredStep] = useState(null);
     const stepButtonRefs = useRef([]);
+    // Per-step copy affordance: revealed while a row is hovered or holds focus.
+    // `focusedStep` tracks focus-within (button or its copy control) so the icon
+    // stays put while the pointer or focus moves between them.
+    const [focusedStep, setFocusedStep] = useState(null);
+    const [copyHoverStep, setCopyHoverStep] = useState(null);
+    const [copiedStep, setCopiedStep] = useState(null);
+    const copyTimerRef = useRef(null);
     // Autoplay: stepping through the flow's steps with a pause between each.
     const [playing, setPlaying] = useState(false);
     const playTimerRef = useRef(null);
@@ -48,6 +60,30 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
     // Clear any pending timer on unmount.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => () => stopPlaying(), []);
+    const copyStep = useCallback((stepIndex) => {
+        const brief = buildStepBrief(walkthrough, stepIndex);
+        if (brief.length === 0)
+            return;
+        const clipboard = navigator.clipboard;
+        if (!clipboard)
+            return;
+        void clipboard
+            .writeText(brief)
+            .then(() => {
+            setCopiedStep(stepIndex);
+            if (copyTimerRef.current != null) {
+                window.clearTimeout(copyTimerRef.current);
+            }
+            copyTimerRef.current = window.setTimeout(() => setCopiedStep(null), STEP_COPY_FEEDBACK_MS);
+        })
+            .catch(() => {
+            // best-effort — show nothing when the clipboard is unavailable
+        });
+    }, [walkthrough]);
+    useEffect(() => () => {
+        if (copyTimerRef.current != null)
+            window.clearTimeout(copyTimerRef.current);
+    }, []);
     // Native HTML5 drag suppresses mouse events, so a row hovered when the drag
     // began never gets its mouseleave — its hover styling would stick after the
     // drop. Reset every row's hover whenever a drag starts or ends.
@@ -110,7 +146,8 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                     display: 'flex',
                     alignItems: 'center',
                     gap: 4,
-                    padding: '0 16px',
+                    height: WALKTHROUGH_CONTROL_SIZE,
+                    padding: '0 0 0 16px',
                     background: wholeFlowActive || headerHover ? hoverBg : 'transparent',
                     transition: 'background 120ms ease',
                 }, children: [_jsx("button", { type: "button", onClick: () => {
@@ -133,7 +170,7 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                             display: 'flex',
                             alignItems: 'center',
                             minWidth: 0,
-                            padding: '10px 0',
+                            padding: 0,
                             border: 'none',
                             background: 'transparent',
                             textAlign: 'left',
@@ -154,11 +191,11 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                                     alignItems: 'center',
                                     justifyContent: 'center',
                                     flexShrink: 0,
-                                    width: 22,
-                                    height: 22,
+                                    alignSelf: 'stretch',
+                                    width: WALKTHROUGH_CONTROL_SIZE,
                                     padding: 0,
                                     border: 'none',
-                                    borderRadius: 4,
+                                    borderRadius: 0,
                                     background: playing || playHover ? theme.colors.border : 'transparent',
                                     color: playing || playHover ? theme.colors.text : muted,
                                     cursor: 'pointer',
@@ -173,11 +210,11 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                                     alignItems: 'center',
                                     justifyContent: 'center',
                                     flexShrink: 0,
-                                    width: 22,
-                                    height: 22,
+                                    alignSelf: 'stretch',
+                                    width: WALKTHROUGH_CONTROL_SIZE,
                                     padding: 0,
                                     border: 'none',
-                                    borderRadius: 4,
+                                    borderRadius: 0,
                                     background: collapseHover ? theme.colors.border : 'transparent',
                                     color: collapseHover ? theme.colors.text : muted,
                                     cursor: 'pointer',
@@ -189,7 +226,7 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                             display: 'inline-flex',
                             alignItems: 'center',
                             flexShrink: 0,
-                            marginRight: -8,
+                            marginRight: 8,
                             padding: '2px 0',
                             color: gripHover || reorder.isDragging ? theme.colors.text : muted,
                             cursor: reorder.isDragging ? 'grabbing' : 'grab',
@@ -200,45 +237,74 @@ function WalkthroughFlow({ walkthrough, collapsed, active, onToggleCollapsed, on
                 }, children: walkthrough.steps.map((step, i) => {
                     const stepActive = active !== null && active.stepIndex === i;
                     const proposed = stepProposed(step.from, step.to);
-                    return (_jsxs("button", { ref: (el) => {
-                            stepButtonRefs.current[i] = el;
-                        }, type: "button", title: proposed ? 'Step touches a proposed component' : undefined, onMouseEnter: () => {
-                            setHoveredStep(i);
-                            onHoverStep(walkthrough, i);
-                        }, onClick: () => onFocusStep(walkthrough, i), style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 8,
-                            minWidth: 0,
-                            padding: '8px 8px 8px 17px',
-                            textAlign: 'left',
-                            borderRadius: 0,
-                            border: 'none',
-                            outline: 'none',
-                            background: stepActive || hoveredStep === i ? hoverBg : 'transparent',
-                            cursor: 'pointer',
-                            transition: 'background 120ms ease',
-                        }, children: [_jsx("span", { style: {
-                                    flexShrink: 0,
-                                    width: 14,
-                                    fontSize: theme.fontSizes[0],
-                                    fontFamily: theme.fonts.monospace,
-                                    fontWeight: proposed ? 700 : undefined,
-                                    color: proposed
-                                        ? PROPOSED_COLOR
-                                        : stepActive
-                                            ? theme.colors.text
-                                            : muted,
-                                }, children: i + 1 }), _jsx("span", { style: {
-                                    flex: 1,
+                    const revealed = stepActive || hoveredStep === i || focusedStep === i || copiedStep === i;
+                    const copied = copiedStep === i;
+                    const copyHovered = copyHoverStep === i;
+                    return (_jsxs("div", { style: { position: 'relative' }, onFocus: () => setFocusedStep(i), onBlur: (e) => {
+                            if (!e.currentTarget.contains(e.relatedTarget)) {
+                                setFocusedStep((cur) => (cur === i ? null : cur));
+                            }
+                        }, children: [_jsxs("button", { ref: (el) => {
+                                    stepButtonRefs.current[i] = el;
+                                }, type: "button", title: proposed ? 'Step touches a proposed component' : undefined, onMouseEnter: () => {
+                                    setHoveredStep(i);
+                                    onHoverStep(walkthrough, i);
+                                }, onClick: () => onFocusStep(walkthrough, i), style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 8,
                                     minWidth: 0,
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    fontSize: theme.fontSizes[1],
-                                    fontFamily: theme.fonts.monospace,
-                                    color: proposed ? PROPOSED_COLOR : theme.colors.text,
-                                }, children: step.symbol })] }, `${walkthroughStepGraphEdgeId(step)}-${i}`));
+                                    width: '100%',
+                                    padding: '8px 36px 8px 17px',
+                                    textAlign: 'left',
+                                    borderRadius: 0,
+                                    border: 'none',
+                                    outline: 'none',
+                                    background: stepActive || hoveredStep === i ? hoverBg : 'transparent',
+                                    cursor: 'pointer',
+                                    transition: 'background 120ms ease',
+                                }, children: [_jsx("span", { style: {
+                                            flexShrink: 0,
+                                            width: 14,
+                                            fontSize: theme.fontSizes[0],
+                                            fontFamily: theme.fonts.monospace,
+                                            fontWeight: proposed ? 700 : undefined,
+                                            color: proposed
+                                                ? PROPOSED_COLOR
+                                                : stepActive
+                                                    ? theme.colors.text
+                                                    : muted,
+                                        }, children: i + 1 }), _jsx("span", { style: {
+                                            flex: 1,
+                                            minWidth: 0,
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            fontSize: theme.fontSizes[1],
+                                            fontFamily: theme.fonts.monospace,
+                                            color: proposed ? PROPOSED_COLOR : theme.colors.text,
+                                        }, children: step.symbol })] }), revealed && (_jsx("button", { type: "button", "aria-label": `Copy step ${i + 1} of ${walkthrough.title} for an agent`, title: copied ? 'Copied' : 'Copy this step for an agent', onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setCopyHoverStep(i), onMouseLeave: () => setCopyHoverStep((cur) => (cur === i ? null : cur)), onClick: () => copyStep(i), style: {
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: 0,
+                                    bottom: 0,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 'auto',
+                                    aspectRatio: '1 / 1',
+                                    padding: 0,
+                                    border: 'none',
+                                    borderRadius: 0,
+                                    background: copied
+                                        ? 'rgba(16,185,129,0.12)'
+                                        : copyHovered
+                                            ? theme.colors.border
+                                            : 'transparent',
+                                    color: copied ? '#10b981' : copyHovered ? theme.colors.text : muted,
+                                    cursor: 'pointer',
+                                    transition: 'background 120ms ease, color 120ms ease',
+                                }, children: copied ? (_jsx(Check, { size: 12, strokeWidth: 2 })) : (_jsx(Copy, { size: 12, strokeWidth: 2 })) }))] }, `${walkthroughStepGraphEdgeId(step)}-${i}`));
                 }) }))] }));
 }
 /**