@principal-ai/subsystems-react 0.56.11 → 0.56.12

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -404,7 +404,8 @@ export interface SubsystemComponentGraphProps {
   /**
    * Verification issues for this graph (audit findings). When diagnostics are
    * active the sidebar's bottom panel becomes the issue list instead of the
-   * file tree / trails.
+   * file tree / trails. Graph issue badges and issue-driven dimming are only
+   * shown in that mode.
    */
   issues?: SubsystemIssue[];
   /**
@@ -1262,7 +1263,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
   // node says "diagnostics here" for every finding the sidebar lists.
   const issueBadgeByAlias = useMemo(() => {
     const map = new Map<string, SubsystemNodeIssue>();
-    if (!issues?.length) return map;
+    if (showIssues !== true || !issues?.length) return map;
     for (const issue of issues) {
       const rung = issueRung(issue.kind);
       if (!rung && !ISSUE_KIND_ICON[issue.kind]) continue;
@@ -1297,7 +1298,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
       if (kinded) map.set(alias, { ...badge, kind: kinded.kind });
     }
     return map;
-  }, [issues, issueComponent]);
+  }, [showIssues, issues, issueComponent]);
 
   // Per-frame diagnostics badge: the same fold, but for findings about a
   // BOUNDARY rather than a construct. Keyed by the region's React Flow node
@@ -1308,7 +1309,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
   // borrowing its layer's icon would imply the frame is at fault for it.
   const regionIssueByNodeId = useMemo(() => {
     const map = new Map<string, SubsystemRegionIssue>();
-    if (!issues?.length) return map;
+    if (showIssues !== true || !issues?.length) return map;
     for (const issue of issues) {
       const target = issue.target;
       if (!target || !ISSUE_KIND_ICON[issue.kind]) continue;
@@ -1329,7 +1330,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
       });
     }
     return map;
-  }, [issues]);
+  }, [showIssues, issues]);
 
   // Per-edge step verification badge: maps edge IDs to step verification status.
   // Keyed by the React Flow edge id (from → mechanism → to). An edge can have
@@ -1347,7 +1348,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
       step_span_stale: 1,
     };
     const map = new Map<string, { kind: StepIssueKind; severity: 'info' | 'error'; count: number }>();
-    if (!issues?.length || !trails?.length) {
+    if (showIssues !== true || !issues?.length || !trails?.length) {
       return map;
     }
     for (const issue of issues) {
@@ -1374,7 +1375,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
       });
     }
     return map;
-  }, [issues, trails, issueStep]);
+  }, [showIssues, issues, trails, issueStep]);
 
   // Expanded verification layers in the diagnostics list. When any layer with
   // findings is expanded, the canvas dims everything that layer does not
@@ -1423,7 +1424,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
   // Returns null when nothing is expanded, no expanded layer has findings, or
   // the findings implicate nothing — so no dimming is applied.
   const issueFocus = useMemo(() => {
-    if (!issues?.length || expandedIssueCategories.length === 0) return null;
+    if (showIssues !== true || !issues?.length || expandedIssueCategories.length === 0) return null;
     const active = new Set(expandedIssueCategories);
     const activeIssues = issues.filter((i) => active.has(issueCategory(i)));
     if (activeIssues.length === 0) return null;
@@ -1478,7 +1479,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
       if (nodeIds.has(e.source) && nodeIds.has(e.target)) edgeIds.add(e.id);
     }
     return { nodeIds, edgeIds };
-  }, [issues, expandedIssueCategories, components, trails, resolveAlias]);
+  }, [showIssues, issues, expandedIssueCategories, components, trails, resolveAlias]);
   const issueFocusNodeIds = issueFocus?.nodeIds ?? null;
   const issueFocusEdgeIds = issueFocus?.edgeIds ?? null;
 
@@ -2765,6 +2766,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     <div style={{ padding: 16, color: theme.colors.textSecondary }}>No files for this trail.</div>
   ) : (
     <SubsystemFileTree
+      headerless
       files={treeFilePaths}
       selectedFile={openFile ? treePaths.toDisplay.get(openFile) : null}
       onSelectFile={(path) => {
@@ -3413,6 +3415,7 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
   );
   const fileCount = sidebarScope.treePaths.entries.length;
   const trailViewLabel = sidebarScope.trail ? 'Trail' : 'Trails';
+  const trailCount = props.trails?.length ?? 0;
   const hasFiles = fileCount > 0 || sidebarScope.trail != null;
   const sidebarDiagnostic: SubsystemDiagnostic = sidebarScope.trail ? {
     ...props.diagnostic,
@@ -3422,18 +3425,22 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
     fixableCount: sidebarScope.issues.filter((issue) => issue.fix != null).length,
     title: undefined,
   } : props.diagnostic ?? { status: 'unknown', issueCount: props.issues?.length };
+  const hasIssues = (props.issues != null
+    ? sidebarScope.issues.length
+    : sidebarDiagnostic.issueCount ?? 0) > 0;
   useEffect(() => {
     if (sidebarTrailId != null && !sidebarScope.trail) setSidebarTrailId(null);
   }, [sidebarTrailId, sidebarScope.trail]);
   const [diagnosticsOpen, setDiagnosticsOpen] = useState<boolean>(
     props.showIssues ?? (props.issues?.length ?? 0) > 0,
   );
-  const issuesActive = props.showIssues ?? diagnosticsOpen;
+  const issuesRequested = props.showIssues ?? diagnosticsOpen;
+  const issuesActive = hasIssues && issuesRequested;
   const filesActive = filesOpen && hasFiles && !issuesActive;
   const selectSidebarView = (view: 'trails' | 'files' | 'issues') => {
     const nextIssuesActive = view === 'issues';
     setFilesOpen(view === 'files');
-    if (nextIssuesActive !== issuesActive) {
+    if (nextIssuesActive !== issuesRequested) {
       if (props.showIssues === undefined) setDiagnosticsOpen(nextIssuesActive);
       props.diagnostic?.onToggle?.();
     }
@@ -3444,7 +3451,7 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
     justifyContent: 'center',
     gap: 4,
     height: 28,
-    padding: '4px 7px',
+    padding: '4px 16px',
     fontFamily: theme.fonts.monospace,
     fontSize: theme.fontSizes[0],
     border: 'none',
@@ -3535,13 +3542,14 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
             >
               <button
                 type="button"
-                aria-label={trailViewLabel}
+                aria-label={sidebarScope.trail ? 'Trail' : `Trails (${trailCount} ${trailCount === 1 ? 'trail' : 'trails'})`}
                 aria-pressed={!filesActive && !issuesActive}
                 onClick={() => selectSidebarView('trails')}
                 style={viewButtonStyle(!filesActive && !issuesActive)}
               >
                 <Route size={14} aria-hidden />
                 <span>{trailViewLabel}</span>
+                {!sidebarScope.trail && <span style={{ fontWeight: 600, marginLeft: 4 }}>{trailCount}</span>}
               </button>
               {hasFiles && (
                 <button
@@ -3554,9 +3562,10 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
                 >
                   <Files size={14} aria-hidden />
                   <span>Files</span>
-                  <span style={{ fontWeight: 600 }}>{fileCount}</span>
+                  <span style={{ fontWeight: 600, marginLeft: 4 }}>{fileCount}</span>
                 </button>
               )}
+              {hasIssues && (
                 <SubsystemDiagnosticToggle
                   {...sidebarDiagnostic}
                   labelText="Issues"
@@ -3564,6 +3573,7 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
                   active={issuesActive}
                   onToggle={() => selectSidebarView('issues')}
                 />
+              )}
             </div>
         </header>
       )}

package/src/subsystem/SubsystemFileTree.tsx

@@ -143,6 +143,7 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, hoveredFol
       ref={treeRef}
       onClickCapture={handleContainerClick}
       style={{
+        paddingTop: headerless ? 8 : undefined,
         flex: 1,
         minHeight: 0,
         display: 'flex',
@@ -187,7 +188,7 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, hoveredFol
             '--trees-fg-muted-override': muted,
             '--trees-accent-override': theme.colors.primary,
             '--trees-font-family-override': theme.fonts.monospace,
-            '--trees-font-size-override': `${theme.fontSizes[0]}px`,
+            '--trees-font-size-override': `${theme.fontSizes[1]}px`,
             '--trees-theme-list-hover-bg': theme.colors.border,
             '--trees-theme-list-active-selection-bg': theme.colors.border,
           } as CSSProperties

package/src/subsystem/TrailStepsNav.test.tsx

@@ -56,6 +56,39 @@ function renderNav(props: Record<string, unknown>) {
 }
 
 describe('TrailStepsNav', () => {
+  for (const title of ['Short flow', 'Generate the account report and deliver it to every subscribed recipient']) {
+    for (const selected of [false, true]) {
+      test(`keeps explicit title spacing in the ${selected ? 'selected header' : 'list'} for ${title}`, () => {
+        const { getByRole } = renderNav({
+          trails: [{ ...TRAILS[0], title }],
+          focusedTrailId: selected ? 't1' : null,
+          focusedStepIndex: null,
+          hoveredTrailStep: null,
+          onFocusFlow: () => {},
+          onClearFocus: () => {},
+          onFocusStep: () => {},
+          onHoverStep: () => {},
+          onHoverFlow: () => {},
+          onLeaveStep: () => {},
+        });
+        const button = getByRole('button', { name: selected ? title : new RegExp(title), exact: selected });
+        const row = selected ? button.parentElement! : button;
+        const label = selected ? button : button.children[1] as HTMLElement;
+        expect(row.style.paddingTop).toBe('14px');
+        expect(row.style.paddingBottom).toBe('14px');
+        expect(row.style.paddingLeft).toBe('12px');
+        expect(row.style.paddingRight).toBe(row.style.paddingLeft);
+        expect(row.style.alignItems).toBe('flex-start');
+        expect(label.style.lineHeight).toBe('20px');
+        expect((row.firstElementChild as SVGElement).style.marginTop).toBe('3px');
+        if (selected) {
+          expect(row.style.borderBottomStyle).toBe('');
+          expect(getByRole('button', { name: 'Back to trails' }).style.height).toBe('20px');
+        }
+      });
+    }
+  }
+
   test('keeps the selected trail header when files or issues replace the step body', () => {
     let cleared = false;
     const { getByRole, getByText, queryByText } = renderNav({
@@ -183,6 +216,11 @@ describe('TrailStepsNav', () => {
     expect(getByText('B.go').style.fontFamily).toBe(defaultEditorTheme.fonts.body);
     expect(getByRole('button', { name: /A\.go/ }).style.paddingLeft).toBe('12px');
     expect(getByRole('button', { name: /B\.go/ }).style.paddingLeft).toBe('22px');
+    for (const name of [/A\.go/, /B\.go/]) {
+      const row = getByRole('button', { name });
+      expect(row.style.paddingTop).toBe('14px');
+      expect(row.style.paddingBottom).toBe('14px');
+    }
     fireEvent.click(getByRole('button', { name: /B\.go/ }));
     expect(focusedStep).toBe(1);
     fireEvent.click(getByLabelText('Back to trails'));

package/src/subsystem/TrailStepsNav.tsx

@@ -152,11 +152,11 @@ export function TrailStepsNav({
                 onClick={() => onFocusFlow(trail)}
                 style={{
                   display: 'flex',
-                  alignItems: 'center',
+                  alignItems: 'flex-start',
                   gap: 8,
                   width: '100%',
                   minWidth: 0,
-                  padding: '10px 8px 10px 12px',
+                  padding: '14px 12px',
                   border: 'none',
                   borderRadius: 0,
                   background: focusedRow || hovered ? hoverBg : 'transparent',
@@ -171,6 +171,7 @@ export function TrailStepsNav({
                   aria-hidden
                   style={{
                     flexShrink: 0,
+                    marginTop: 3,
                     color: focusedRow || hovered ? theme.colors.primary : muted,
                     transition: 'color 120ms ease',
                   }}
@@ -183,6 +184,7 @@ export function TrailStepsNav({
                     fontSize: theme.fontSizes[1],
                     fontFamily: theme.fonts.monospace,
                     fontWeight: 600,
+                    lineHeight: '20px',
                     color: theme.colors.text,
                   }}
                 >
@@ -192,6 +194,7 @@ export function TrailStepsNav({
                   style={{
                     flexShrink: 0,
                     fontSize: theme.fontSizes[0],
+                    lineHeight: '20px',
                     fontFamily: theme.fonts.monospace,
                     color: muted,
                   }}
@@ -220,12 +223,11 @@ export function TrailStepsNav({
               style={{
                 flexShrink: 0,
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 gap: 8,
                 // Left inset + leading cell + gap match the step rows below, so
                 // the trail icon and the step numbers share one column.
-                padding: '6px 6px 6px 12px',
-                borderBottom: `1px solid ${theme.colors.border}`,
+                padding: '14px 12px',
               }}
             >
               <Route
@@ -234,7 +236,7 @@ export function TrailStepsNav({
                 aria-hidden
                 // The focused trail: the icon stays primary, matching the row's
                 // hover colour in the list it came from.
-                style={{ flexShrink: 0, color: theme.colors.primary }}
+                style={{ flexShrink: 0, marginTop: 3, color: theme.colors.primary }}
               />
               {/* The title is the back affordance too: clicking it goes back to
                   the list, like the trailing close. */}
@@ -257,6 +259,7 @@ export function TrailStepsNav({
                   fontSize: theme.fontSizes[1],
                   fontFamily: theme.fonts.monospace,
                   fontWeight: 600,
+                  lineHeight: '20px',
                   color: theme.colors.text,
                 }}
               >
@@ -275,7 +278,7 @@ export function TrailStepsNav({
                   justifyContent: 'center',
                   flexShrink: 0,
                   width: 24,
-                  height: 24,
+                  height: 20,
                   padding: 0,
                   border: 'none',
                   borderRadius: 4,
@@ -311,7 +314,7 @@ export function TrailStepsNav({
                       gap: 8,
                       width: '100%',
                       minWidth: 0,
-                      padding: `8px 16px 8px ${12 + Math.max(0, stackDepth - 1) * 10}px`,
+                      padding: `14px 16px 14px ${12 + Math.max(0, stackDepth - 1) * 10}px`,
                       border: 'none',
                       borderRadius: 0,
                       background: active || hovered ? hoverBg : 'transparent',

package/src/subsystem/TrailsPanel.test.tsx

@@ -115,8 +115,6 @@ function renderPanel(overrides: Partial<TrailsPanelProps> = {}) {
   );
 }
 
-const COPY_LABEL = 'Copy step 1 of Auth flow for an agent';
-
 describe('TrailsPanel drilldown navigation', () => {
   test('clicking a trail opens its steps, and Back restores the list without playback', () => {
     const onFocusFlow = mock(() => {});
@@ -165,14 +163,17 @@ describe('TrailsPanel drilldown navigation', () => {
     expect(queryByRole('button', { name: /Login.submit/ })).toBeNull();
   });
 
-  test('keeps step-copy controls in the focused pane without playback controls', async () => {
-    const { getByText, getByLabelText, queryByLabelText } = renderPanel({
+  test('supports Command-click copy in the focused pane without extra controls', async () => {
+    const onFocusStep = mock(() => {});
+    const { getByText, getByLabelText, queryByLabelText, queryByRole } = renderPanel({
       drilldown: true,
       focusedTrailId: 'auth-flow',
+      onFocusStep,
     });
-    fireEvent.mouseEnter(getByText('Login.submit').closest('button')!);
-    fireEvent.click(getByLabelText(COPY_LABEL));
+    fireEvent.click(getByText('Login.submit').closest('button')!, { metaKey: true });
     await waitFor(() => expect(writeText).toHaveBeenCalledWith(buildStepBrief(trails[0]!, 0)));
+    expect(onFocusStep).not.toHaveBeenCalled();
+    expect(queryByRole('button', { name: /Copy step/ })).toBeNull();
     expect(queryByLabelText('Play Auth flow')).toBeNull();
     expect(queryByLabelText('Collapse Auth flow')).toBeNull();
     expect(getByLabelText('Back to trails')).toBeTruthy();
@@ -188,6 +189,35 @@ describe('TrailsPanel drilldown navigation', () => {
 });
 
 describe('TrailsPanel trail titles', () => {
+  for (const title of ['Short flow', 'Validate every selected checkout item and persist the complete customer order']) {
+    for (const collapsed of [true, false]) {
+      test(`keeps explicit title spacing for ${collapsed ? 'collapsed' : 'expanded'} ${title}`, () => {
+        const { getByRole } = renderPanel({
+          trails: [{ ...trails[0]!, title }],
+          expandedTrails: collapsed ? new Set() : new Set(['auth-flow']),
+          onReorder: () => {},
+        });
+        const button = getByRole('button', { name: title, exact: true });
+        const row = button.parentElement!;
+        expect(row.style.paddingTop).toBe('14px');
+        expect(row.style.paddingBottom).toBe('14px');
+        expect(row.style.paddingLeft).toBe('16px');
+        expect(row.style.paddingRight).toBe(row.style.paddingLeft);
+        expect(row.style.minHeight).toBe('');
+        expect(row.style.alignItems).toBe('flex-start');
+        expect(button.style.padding).toBe('0px');
+        expect((button.lastElementChild as HTMLElement).style.lineHeight).toBe('20px');
+        expect((button.firstElementChild as SVGElement).style.marginTop).toBe('3px');
+        if (collapsed) {
+          expect(getByRole('button', { name: `Reorder ${title}` }).style.height).toBe('20px');
+          expect(getByRole('button', { name: `Reorder ${title}` }).style.marginRight).toBe('');
+        } else {
+          expect(getByRole('button', { name: `Play ${title}` }).style.height).toBe('20px');
+        }
+      });
+    }
+  }
+
   test('highlights immediately without a CSS fade while graph preview waits', async () => {
     const onHoverFlow = mock(() => {});
     const onLeaveStep = mock(() => {});
@@ -253,30 +283,28 @@ describe('TrailsPanel trail titles', () => {
 });
 
 describe('TrailsPanel step copy', () => {
-  test('copy icon is hidden until the step row is hovered', () => {
-    const { getByText, queryByLabelText } = renderPanel();
-    expect(queryByLabelText(COPY_LABEL)).toBeNull();
+  test('does not show a copy button on hover or keyboard focus', () => {
+    const { getByText, queryByRole, container } = renderPanel();
     const row = getByText('Login.submit').closest('button')!;
     fireEvent.mouseEnter(row);
-    expect(queryByLabelText(COPY_LABEL)).not.toBeNull();
-  });
-
-  test('copy icon is revealed on keyboard focus', () => {
-    const { getByText, queryByLabelText } = renderPanel();
-    const row = getByText('Login.submit').closest('button')!;
     fireEvent.focus(row);
-    expect(queryByLabelText(COPY_LABEL)).not.toBeNull();
+    expect(queryByRole('button', { name: /Copy step/ })).toBeNull();
+    expect(container.querySelector('.lucide-copy')).toBeNull();
+    expect(row.hasAttribute('title')).toBe(false);
+    expect(row.firstElementChild?.textContent).toBe('1');
   });
 
-  test('clicking copies the step brief and flashes a copied state', async () => {
-    const { getByText, getByLabelText } = renderPanel();
-    fireEvent.mouseEnter(getByText('Login.submit').closest('button')!);
-    const copy = getByLabelText(COPY_LABEL);
-    fireEvent.mouseDown(copy);
-    fireEvent.click(copy);
-    await waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
+  test('Command-click copies the brief without focusing and replaces the number with a checkmark', async () => {
+    const onFocusStep = mock(() => {});
+    const { getByText, getByRole } = renderPanel({ onFocusStep });
+    const row = getByText('Login.submit').closest('button')!;
+    fireEvent.click(row, { metaKey: true });
+    await waitFor(() => expect(getByRole('status', { name: 'Copied' })).toBeTruthy());
+    expect(writeText).toHaveBeenCalledTimes(1);
     expect(writeText).toHaveBeenCalledWith(buildStepBrief(trails[0]!, 0));
-    expect(copy.getAttribute('title')).toBe('Copied');
+    expect(onFocusStep).not.toHaveBeenCalled();
+    expect(row.hasAttribute('title')).toBe(false);
+    expect(row.firstElementChild?.querySelector('.lucide-check')).not.toBeNull();
   });
 
   test('hovering the row still focuses the step on click', () => {
@@ -286,26 +314,40 @@ describe('TrailsPanel step copy', () => {
     fireEvent.mouseEnter(row);
     fireEvent.click(row);
     expect(onFocusStep).toHaveBeenCalledWith(trails[0]!, 0);
+    expect(writeText).not.toHaveBeenCalled();
   });
 
   test('the copied checkmark clears after the feedback window', async () => {
-    const { getByText, getByLabelText } = renderPanel();
-    fireEvent.mouseEnter(getByText('Login.submit').closest('button')!);
-    const copy = getByLabelText(COPY_LABEL);
-    fireEvent.click(copy);
-    await waitFor(() => expect(copy.getAttribute('title')).toBe('Copied'));
+    const { getByText, getByRole, queryByRole } = renderPanel();
+    const row = getByText('Login.submit').closest('button')!;
+    fireEvent.click(row, { metaKey: true });
+    await waitFor(() => expect(getByRole('status', { name: 'Copied' })).toBeTruthy());
     await new Promise((r) => setTimeout(r, STEP_COPY_FEEDBACK_MS + 20));
-    await waitFor(() => expect(copy.getAttribute('title')).not.toBe('Copied'));
+    await waitFor(() => expect(queryByRole('status', { name: 'Copied' })).toBeNull());
+    expect(row.firstElementChild?.textContent).toBe('1');
   });
 
   test('a failed copy shows no copied state', async () => {
     writeText.mockImplementationOnce(() => Promise.reject(new Error('denied')));
-    const { getByText, getByLabelText } = renderPanel();
-    fireEvent.mouseEnter(getByText('Login.submit').closest('button')!);
-    const copy = getByLabelText(COPY_LABEL);
-    fireEvent.click(copy);
+    const { getByText, queryByRole } = renderPanel();
+    const row = getByText('Login.submit').closest('button')!;
+    fireEvent.click(row, { metaKey: true });
     await new Promise((r) => setTimeout(r, 10));
-    expect(copy.getAttribute('title')).toBe('Copy this step for an agent');
+    expect(writeText).toHaveBeenCalledTimes(1);
+    expect(queryByRole('status', { name: 'Copied' })).toBeNull();
+    expect(row.firstElementChild?.textContent).toBe('1');
+  });
+
+  test('an unavailable clipboard leaves the number and does not focus the step', () => {
+    Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
+    const onFocusStep = mock(() => {});
+    const { getByText, queryByRole } = renderPanel({ onFocusStep });
+    const row = getByText('Login.submit').closest('button')!;
+    fireEvent.click(row, { metaKey: true });
+    expect(writeText).not.toHaveBeenCalled();
+    expect(onFocusStep).not.toHaveBeenCalled();
+    expect(queryByRole('status', { name: 'Copied' })).toBeNull();
+    expect(row.firstElementChild?.textContent).toBe('1');
   });
 });
 
@@ -334,9 +376,31 @@ describe('TrailsPanel step semantics', () => {
       expect(symbol.style.color).toBe(normal.style.color);
       expect(symbol.style.fontFamily).toBe(defaultEditorTheme.fonts.body);
       expect(symbol.previousElementSibling).toBe(annotation);
+      const row = symbol.closest('button')!;
+      expect(row.style.paddingTop).toBe('14px');
+      expect(row.style.paddingBottom).toBe('14px');
+      expect(row.style.paddingLeft).toBe(drilldown ? '12px' : '16px');
+      expect((row.firstElementChild as HTMLElement).style.width).toBe('14px');
+      expect((row.firstElementChild as HTMLElement).style.textAlign).toBe('center');
       fireEvent.click(getByRole('button', { name: /Submit the login request.*Login.submit/ }));
       expect(onFocusStep).toHaveBeenCalledWith(trail, 0);
     });
+
+    test(`keeps nested steps offset from the ${drilldown ? 'selected' : 'inline'} header column`, () => {
+      const trail: SubsystemTrail = {
+        ...trails[0]!,
+        steps: [
+          { ...trails[0]!.steps[0]!, from: 'a', to: 'b', symbol: 'A.go' },
+          { ...trails[0]!.steps[0]!, from: 'b', to: 'c', symbol: 'B.go' },
+          { ...trails[0]!.steps[0]!, from: 'a', to: 'd', symbol: 'A.next' },
+        ],
+      };
+      const { getByText } = renderPanel({ trails: [trail], drilldown, focusedTrailId: trail.id });
+      const inset = drilldown ? 12 : 16;
+      expect(getByText('A.go').closest('button')!.style.paddingLeft).toBe(`${inset}px`);
+      expect(getByText('B.go').closest('button')!.style.paddingLeft).toBe(`${inset + 10}px`);
+      expect(getByText('A.next').closest('button')!.style.paddingLeft).toBe(`${inset}px`);
+    });
   }
 
   test('calls leads with the caller frame', () => {