@principal-ai/subsystems-react 0.56.2 → 0.56.4

package/src/subsystem/FileDrawer.tsx

@@ -5,8 +5,8 @@
  * children by the graph component.
  */
 
-import { useEffect, useState } from "react";
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { useTheme } from "@principal-ade/industry-theme";
 import { Minimize2, Maximize2, X } from "lucide-react";
 
@@ -19,6 +19,7 @@ export function FileDrawer({
   title,
   onClose,
   placement = "bottom",
+  onResizeEnd,
   fillHeight = false,
   suppressEscape = false,
   hidden = false,
@@ -31,6 +32,8 @@ export function FileDrawer({
   onClose: () => void;
   /** Left docking requires a row container; bottom docking requires a column. */
   placement?: "bottom" | "left";
+  /** Fired when the user finishes dragging the side-docked code view's width. */
+  onResizeEnd?: () => void;
   /** When true and open, fill the graph area instead of ~45% of its dock axis. */
   fillHeight?: boolean;
   /** Skip Escape handling (e.g. while a full-file overlay is on top). */
@@ -62,8 +65,63 @@ export function FileDrawer({
   const fullSize = open && (maximized || fillHeight);
   const sideDocked = placement === "left";
   const sizeAxis = sideDocked ? "width" : "height";
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [widthPercent, setWidthPercent] = useState(45);
+  const [resizing, setResizing] = useState(false);
+  const dragStart = useRef({ x: 0, width: 0, containerWidth: 0 });
+  const canResize = open && sideDocked && !fullSize;
+  const dockSize = sideDocked ? `${widthPercent}%` : "45%";
   // Space the panel takes out of the canvas's flow (0 when it overlays fully).
-  const reservedSize = fullSize ? 0 : open ? "45%" : 0;
+  const reservedSize = fullSize ? 0 : open ? dockSize : 0;
+  const sizeTransition = resizing ? "none" : `${sizeAxis} ${FILE_DRAWER_HEIGHT_MS}ms ease`;
+
+  const onResizeStart = (event: ReactMouseEvent) => {
+    if (!canResize || event.button !== 0) return;
+    const panel = panelRef.current;
+    const containerWidth = panel?.parentElement?.getBoundingClientRect().width ?? 0;
+    if (panel == null || containerWidth <= 0) return;
+    event.preventDefault();
+    dragStart.current = {
+      x: event.clientX,
+      width: panel.getBoundingClientRect().width,
+      containerWidth,
+    };
+    setResizing(true);
+  };
+
+  useEffect(() => {
+    if (!canResize) setResizing(false);
+  }, [canResize]);
+
+  useEffect(() => {
+    if (!resizing || !canResize) return;
+    const { x, width, containerWidth } = dragStart.current;
+    // Keep 240px for both code and graph when space permits; split narrow
+    // containers evenly rather than giving either pane a negative width.
+    const minWidth = Math.min(240, containerWidth / 2);
+    const maxWidth = containerWidth - minWidth;
+    const onMove = (event: MouseEvent) => {
+      const next = Math.min(Math.max(width + event.clientX - x, minWidth), maxWidth);
+      setWidthPercent(next / containerWidth * 100);
+    };
+    const onUp = () => {
+      setResizing(false);
+      onResizeEnd?.();
+    };
+    const { userSelect, cursor } = document.body.style;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    window.addEventListener("blur", onUp);
+    return () => {
+      document.body.style.userSelect = userSelect;
+      document.body.style.cursor = cursor;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      window.removeEventListener("blur", onUp);
+    };
+  }, [resizing, canResize, onResizeEnd]);
 
   useEffect(() => {
     if (!open || suppressEscape) return;
@@ -83,10 +141,11 @@ export function FileDrawer({
           flexShrink: 0,
           order: sideDocked ? -1 : undefined,
           [sizeAxis]: reservedSize,
-          transition: `${sizeAxis} ${FILE_DRAWER_HEIGHT_MS}ms ease`,
+          transition: sizeTransition,
         }}
       />
       <div
+        ref={panelRef}
         style={{
           position: "absolute",
           left: 0,
@@ -96,17 +155,18 @@ export function FileDrawer({
           // Above the edge-label overlay (zIndex 5), React Flow, and overlays
           // (zIndex 6–8); 30 lifts it over the whole graph area when maximized.
           zIndex: maximized ? 30 : 6,
-          width: sideDocked ? (open ? (fullSize ? "100%" : "45%") : 0) : undefined,
+          width: sideDocked ? (open ? (fullSize ? "100%" : dockSize) : 0) : undefined,
           height: sideDocked ? "100%" : open ? (fullSize ? "100%" : "45%") : 0,
           minWidth: 0,
           minHeight: 0,
+          boxSizing: "border-box",
           overflow: "hidden",
           display: "flex",
           flexDirection: "column",
           background: theme.colors.background,
           borderTop: open && !sideDocked ? `1px solid ${theme.colors.border}` : "none",
           borderRight: open && sideDocked ? `1px solid ${theme.colors.border}` : "none",
-          transition: `${sizeAxis} ${FILE_DRAWER_HEIGHT_MS}ms ease`,
+          transition: sizeTransition,
         }}
       >
         <div
@@ -231,6 +291,25 @@ export function FileDrawer({
         <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
           {children}
         </div>
+        {canResize && (
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize code view"
+            title="Drag to resize code view"
+            onMouseDown={onResizeStart}
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: 5,
+              cursor: "col-resize",
+              background: theme.colors.border,
+              zIndex: 2,
+            }}
+          />
+        )}
       </div>
     </>
   );

package/src/subsystem/GraphSidebar.test.tsx

@@ -95,6 +95,24 @@ describe('GraphSidebar chrome', () => {
     expect(queryByText('body')).toBeNull();
   });
 
+  test('a capped header fits its content while the body fills the remaining space', () => {
+    const { container } = renderSidebar({
+      header: createElement('span', null, 'description'),
+      headerMaxHeight: '50%',
+      sidebarBody: createElement('span', null, 'trails'),
+    });
+    const column = sidebarColumn(container);
+    const header = column.firstElementChild as HTMLElement;
+    const body = column.lastElementChild as HTMLElement;
+    expect(header.style.flexGrow).toBe('0');
+    expect(header.style.flexBasis).toBe('auto');
+    expect(header.style.maxHeight).toBe('50%');
+    expect(header.style.boxSizing).toBe('border-box');
+    expect(header.style.overflowY).toBe('auto');
+    expect(body.style.flexGrow).toBe('1');
+    expect(body.style.height).toBe('');
+  });
+
   test('controlled width applies to the column and reports drag changes', () => {
     let reports = 0;
     const { container, getByLabelText } = renderSidebar({

package/src/subsystem/GraphSidebar.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
 
 /**
@@ -55,6 +55,8 @@ export interface GraphSidebarProps {
   /** Give the header the flexible share of the column, pinning the lower
    *  panel at half height (e.g. a description that unpacks on demand). */
   stretchHeader?: boolean;
+  /** Cap the upper block while letting short content use only the height it needs. */
+  headerMaxHeight?: CSSProperties['maxHeight'];
   /** Controlled sidebar width (px). */
   width?: number;
   onWidthChange?: (width: number) => void;
@@ -100,6 +102,7 @@ export function GraphSidebar({
   hidden = false,
   bodyHidden = false,
   stretchHeader = false,
+  headerMaxHeight,
   width,
   onWidthChange,
   defaultWidth = DEFAULT_WIDTH,
@@ -207,6 +210,8 @@ export function GraphSidebar({
             style={{
               flex: stretchHeader ? 1 : '0 0 auto',
               minHeight: 0,
+              maxHeight: headerMaxHeight,
+              boxSizing: 'border-box',
               overflowY: 'auto',
               padding: 16,
               display: 'flex',

package/src/subsystem/SubsystemComponentGraph.sidebar.test.tsx

@@ -0,0 +1,210 @@
+import { describe, expect, test } from 'bun:test';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Window } from 'happy-dom';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph, type SubsystemComponentGraphProps } from './SubsystemComponentGraph';
+
+const components: SubsystemComponentGraphProps['components'] = [
+  { alias: 'entry', name: 'Entry', construct: 'function', file: 'src/entry.ts', purl: 'pkg:github/test/app' },
+  { alias: 'store', name: 'Store', construct: 'function', file: 'src/store.ts', purl: 'pkg:github/test/app' },
+];
+const trails: SubsystemComponentGraphProps['trails'] = [{
+  id: 'request',
+  title: 'Request flow',
+  steps: [{ from: 'entry', to: 'store', mechanism: 'calls', file: 'src/entry.ts', purl: 'pkg:github/test/app', symbol: 'Entry' }],
+}];
+const graphifyRelations: SubsystemComponentGraphProps['graphifyRelations'] = [
+  { id: 'static', from: 'entry', to: 'store', relation: 'references' },
+];
+
+function renderGraph(props: Partial<SubsystemComponentGraphProps> = {}) {
+  const markup = renderToStaticMarkup(
+    createElement(
+      ThemeProvider,
+      { theme: defaultEditorTheme },
+      createElement(SubsystemComponentGraph, {
+        components,
+        trails,
+        title: 'Request subsystem',
+        description: 'Always visible **description**.',
+        ...props,
+      }),
+    ),
+  );
+  const dom = new Window();
+  dom.document.body.innerHTML = markup;
+  return dom.document.body;
+}
+
+describe('subsystem graph sidebar', () => {
+  test('puts the name in a full-width header above the sidebar and graph', () => {
+    const body = renderGraph();
+    const header = body.querySelector('header');
+    expect(header?.querySelector('h2')?.textContent).toBe('Request subsystem');
+    expect(body.querySelectorAll('h2').length).toBe(1);
+    expect(header?.textContent).not.toContain('Always visible');
+    const content = header?.nextElementSibling;
+    expect(content?.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(content?.textContent).toContain('Always visible description.');
+    expect(content?.textContent).not.toContain('Request subsystem');
+  });
+
+  test('keeps the Files button in the header when no name is provided', () => {
+    const body = renderGraph({ title: undefined });
+    expect(body.querySelector('header h2')).toBeNull();
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files2');
+    expect(body.textContent).toContain('Always visible description.');
+  });
+
+  test('the header Files button starts inactive and leaves trails visible', () => {
+    const body = renderGraph();
+    expect(body.querySelector('header button[aria-label^="Files"]')?.getAttribute('aria-pressed')).toBe('false');
+    expect(body.textContent).toContain('Request flow');
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+  });
+
+  test('groups Trails, Files, and Issues into one switch with Trails selected by default', () => {
+    const body = renderGraph();
+    const group = body.querySelector('header [role="group"][aria-label="Sidebar view"]');
+    expect(group?.querySelectorAll('button').length).toBe(3);
+    expect(group?.querySelectorAll('button[aria-pressed="true"]').length).toBe(1);
+    expect(group?.querySelector('button[aria-label="Trails"]')?.getAttribute('aria-pressed')).toBe('true');
+    expect(group?.querySelector('button[aria-label^="Issues:"]')?.textContent).toBe('Issues');
+    expect((group as HTMLElement).style.borderStyle).toBe('solid');
+  });
+
+  test('omits the Files button when no components have files', () => {
+    const body = renderGraph({
+      components: components.map((component) => ({ ...component, file: '' })),
+    });
+    expect(body.querySelector('button[aria-label^="Files"]')).toBeNull();
+    expect(body.textContent).toContain('Request flow');
+  });
+
+  for (const active of [true, false]) {
+    test(`puts the ${active ? 'active' : 'inactive'} issue toggle in the header, not the sidebar`, () => {
+      const body = renderGraph({
+        diagnostic: { status: 'issues', issueCount: 3 },
+        showIssues: active,
+      });
+      const header = body.querySelector('header');
+      const toggle = header?.querySelector('button[aria-label^="Issues:"]');
+      expect(toggle).not.toBeNull();
+      expect(toggle?.textContent).toBe('Issues3');
+      expect((toggle as HTMLElement).style.borderStyle).toBe('none');
+      const filesButton = header?.querySelector('button[aria-label^="Files"]') as HTMLElement;
+      expect(filesButton.style.borderStyle).toBe('none');
+      expect(filesButton.parentElement?.style.borderStyle).toBe('solid');
+      expect(filesButton.parentElement?.style.display).toBe('grid');
+      expect(filesButton.parentElement?.style.gridAutoColumns).toBe('1fr');
+      expect((toggle as HTMLElement).style.justifyContent).toBe('center');
+      expect(toggle?.getAttribute('aria-pressed')).toBe(String(active));
+      expect(header?.querySelectorAll('button').length).toBe(3);
+      expect(header?.querySelectorAll('button[aria-pressed="true"]').length).toBe(1);
+      expect(header?.querySelector('button[aria-label="Trails"]')?.getAttribute('aria-pressed')).toBe(String(!active));
+      expect(body.querySelectorAll('button[aria-label^="Issues:"]').length).toBe(1);
+      expect(header?.nextElementSibling?.querySelector('button[aria-label^="Issues:"]')).toBeNull();
+      expect(body.textContent).toContain('Always visible description.');
+    });
+  }
+
+  test('counts unique files rather than components in the same file', () => {
+    const body = renderGraph({
+      components: [...components, { ...components[0], alias: 'helper' }],
+    });
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files2');
+  });
+
+  test('counts the same path in separate repositories as separate files', () => {
+    const body = renderGraph({
+      components: [...components, { ...components[0], alias: 'other-entry', purl: 'pkg:github/test/other' }],
+    });
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files3');
+  });
+
+  test('a diagnostic alone creates a header without an empty sidebar', () => {
+    const body = renderGraph({
+      trails: undefined,
+      graphifyRelations,
+      title: undefined,
+      description: undefined,
+      diagnostic: { status: 'ok' },
+    });
+    expect(body.querySelector('header button[aria-pressed="false"]')).not.toBeNull();
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('a name alone creates a header without an empty sidebar', () => {
+    const body = renderGraph({ trails: undefined, graphifyRelations, description: undefined });
+    expect(body.querySelector('header h2')?.textContent).toBe('Request subsystem');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('shows the description immediately without a description toggle', () => {
+    const body = renderGraph();
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.querySelector('strong')?.textContent).toBe('description');
+    expect(body.querySelector('[aria-label="Show description"]')).toBeNull();
+    expect(body.querySelector('[aria-label="Hide description"]')).toBeNull();
+    expect(body.textContent).toContain('Request flow');
+    expect(body.querySelector('[role="tablist"]')).toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+    expect(body.textContent).not.toContain('src/entry.ts');
+  });
+
+  test('still shows trails when an old Files tab selection was saved', () => {
+    const previousWindow = globalThis.window;
+    const dom = new Window();
+    dom.localStorage.setItem('principal.subsystems.viewState.sidebar-test', JSON.stringify({
+      sidebarView: 'files',
+    }));
+    globalThis.window = dom as unknown as typeof window;
+    try {
+      const body = renderGraph({ persistKey: 'sidebar-test' });
+      expect(body.textContent).toContain('Request flow');
+      expect(body.querySelector('[role="tree"]')).toBeNull();
+      expect(body.querySelector('[role="tablist"]')).toBeNull();
+    } finally {
+      globalThis.window = previousWindow;
+    }
+  });
+
+  test('static graphs keep their description but do not show a file panel', () => {
+    const body = renderGraph({ trails: undefined, graphifyRelations });
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+    expect(body.textContent).not.toContain('src/entry.ts');
+    expect(body.querySelector('header')?.nextElementSibling?.textContent).not.toContain('Files');
+  });
+
+  test('files alone do not create an empty sidebar', () => {
+    const body = renderGraph({
+      trails: undefined,
+      graphifyRelations,
+      title: undefined,
+      description: undefined,
+    });
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('the description stays visible while diagnostics replace the trails', () => {
+    const body = renderGraph({ showIssues: true, issues: [] });
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.textContent).not.toContain('Request flow');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(body.querySelector('[aria-label="Hide description"]')).toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+  });
+
+  test('hideSidebar still hides the title, description, and trails', () => {
+    const body = renderGraph({ hideSidebar: true, diagnostic: { status: 'issues', issueCount: 3 } });
+    expect(body.textContent).not.toContain('Request subsystem');
+    expect(body.textContent).not.toContain('Always visible');
+    expect(body.textContent).not.toContain('Request flow');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+    expect(body.querySelector('header')).toBeNull();
+    expect(body.querySelector('button[aria-label^="Diagnostics:"]')).toBeNull();
+  });
+});