@principal-ai/subsystems-react 0.38.0 → 0.40.0

package/src/stories/data/maintain-live-events.json

@@ -0,0 +1,554 @@
+[
+  {
+    "at": null,
+    "type": "server.connected",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "connected"
+  },
+  {
+    "at": 1785251893442,
+    "type": "session.status",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "busy"
+  },
+  {
+    "at": 1785251893692,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "user prompt"
+  },
+  {
+    "at": 1785251893942,
+    "type": "session.next.text.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Explore the project at /Users/griever/Developer/visual-validation/principal-view-core-library thoroughly.\n\nI need to understand:\n1. The full directory tree (pac"
+  },
+  {
+    "at": 1785251894192,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251894442,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "user prompt"
+  },
+  {
+    "at": 1785251894692,
+    "type": "session.next.step.started",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step started"
+  },
+  {
+    "at": 1785251895192,
+    "type": "session.next.reasoning.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Let me explore the project at /Users/griever/Developer/visual-validation/principal-view-core-library thoroughly. I'll start by understanding the overall structu"
+  },
+  {
+    "at": 1785251895692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251895942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251896192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251896442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251896692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251896942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251897192,
+    "type": "session.next.text.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "I'll start by exploring the top-level structure and then dive into each area systematically."
+  },
+  {
+    "at": 1785251897442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251897692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251897942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "glob"
+  },
+  {
+    "at": 1785251898192,
+    "type": "session.next.step.ended",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step ended"
+  },
+  {
+    "at": 1785251898442,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251898692,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251898942,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251899192,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "user prompt"
+  },
+  {
+    "at": 1785251899442,
+    "type": "session.next.step.started",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step started"
+  },
+  {
+    "at": 1785251899942,
+    "type": "session.next.reasoning.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Good, I have a clear picture of the packages. Let me now read the root package.json, each package's package.json, tsconfig files, and explore the directory stru"
+  },
+  {
+    "at": 1785251900442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251900692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251900942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251901192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251901442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251901692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251901942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251902192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251902442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251902692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251902942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251903192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251903442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251903692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251903942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251904192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251904442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251904692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251904942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251905192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251905442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251905692,
+    "type": "session.next.text.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Now let me read all package.json files and tsconfig files:"
+  },
+  {
+    "at": 1785251905942,
+    "type": "session.next.step.ended",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step ended"
+  },
+  {
+    "at": 1785251906192,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251906442,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251906692,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251906942,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "user prompt"
+  },
+  {
+    "at": 1785251907192,
+    "type": "session.next.step.started",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step started"
+  },
+  {
+    "at": 1785251907692,
+    "type": "session.next.reasoning.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Now let me read the tsconfig files and explore the source directories of each package."
+  },
+  {
+    "at": 1785251908192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251908442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251908692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251908942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251909192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251909442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251909692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251909942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251910192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251910442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251910692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251910942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251911192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251911442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251911692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251911942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251912192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251912442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251912692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251912942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251913192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251913442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251913692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251913942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251914192,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251914442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251914692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251914942,
+    "type": "session.next.text.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Now let me read tsconfig files and explore each package's source structure:"
+  },
+  {
+    "at": 1785251915192,
+    "type": "session.next.step.ended",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step ended"
+  },
+  {
+    "at": 1785251915442,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251915692,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251915942,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "assistant prompt"
+  },
+  {
+    "at": 1785251916192,
+    "type": "session.next.prompted",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "user prompt"
+  },
+  {
+    "at": 1785251916442,
+    "type": "session.next.step.started",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "step started"
+  },
+  {
+    "at": 1785251916942,
+    "type": "session.next.reasoning.delta",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "Now let me explore the source directories of each package."
+  },
+  {
+    "at": 1785251917442,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251917692,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  },
+  {
+    "at": 1785251917942,
+    "type": "session.next.tool.called",
+    "sessionId": "ses_056b1f037ffeu1d00DzvJBrHq9",
+    "summary": "read"
+  }
+]

package/src/subsystem/IssueList.focus.test.tsx

@@ -0,0 +1,113 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { createElement } from 'react';
+import { Window } from 'happy-dom';
+import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemIssueList, type SubsystemIssue } from './IssueList';
+
+// Bun's happy-dom test environment isn't registered (no @happy-dom/global-
+// registrator), so wire the DOM primitives React DOM needs before rendering.
+const dom = new Window();
+const globals = globalThis as unknown as Record<string, unknown>;
+globals.window = dom;
+globals.document = dom.document;
+globals.navigator = dom.navigator;
+globals.HTMLElement = dom.HTMLElement;
+globals.Node = dom.Node;
+globals.Element = dom.Element;
+globals.Event = dom.Event;
+globals.getComputedStyle = dom.getComputedStyle.bind(dom);
+globals.requestAnimationFrame = dom.requestAnimationFrame.bind(dom);
+globals.cancelAnimationFrame = dom.cancelAnimationFrame.bind(dom);
+globals.localStorage = dom.localStorage;
+globals.matchMedia = dom.matchMedia.bind(dom);
+
+afterEach(cleanup);
+
+const issues: SubsystemIssue[] = [
+  {
+    id: 'ct',
+    severity: 'error',
+    kind: 'missing_file',
+    message: 'construct finding',
+    target: { kind: 'component', id: 'alpha', label: 'Alpha' },
+  },
+  {
+    id: 'wl',
+    severity: 'info',
+    kind: 'walkthrough',
+    message: 'walkthrough finding',
+    target: { kind: 'walkthrough', id: 'w', label: 'Walkthrough' },
+  },
+];
+
+function setup() {
+  const events: string[] = [];
+  const view = render(
+    createElement(
+      ThemeProvider,
+      { theme: defaultEditorTheme },
+      createElement(SubsystemIssueList, {
+        issues,
+        onSelectIssue: (i) => events.push(`select:${i.id}`),
+        onDeselectIssue: (i) => events.push(`deselect:${i.id}`),
+      }),
+    ),
+  );
+  const category = (name: string) =>
+    [...view.container.querySelectorAll('button')].find((b) =>
+      b.textContent?.includes(name),
+    ) as HTMLElement;
+  const card = (label: string) =>
+    [...view.container.querySelectorAll('[role="button"]')].find((b) =>
+      b.textContent?.includes(label),
+    ) as HTMLElement;
+  return { ...view, events, category, card };
+}
+
+describe('collapsing a category retracts the focus it established', () => {
+  // Closing a CATEGORY unmounts its cards, so a card stops being expanded
+  // without ever toggling itself. A host that framed a target on expand has to
+  // hear about it, or the canvas stays parked on a target the list no longer
+  // shows as open.
+  test('clicking the open category emits a deselect for its expanded card', () => {
+    const { events, category, card } = setup();
+    fireEvent.click(category('Constructs'));
+    fireEvent.click(card('Alpha'));
+    expect(events).toEqual(['select:ct']);
+
+    fireEvent.click(category('Constructs'));
+    expect(events).toEqual(['select:ct', 'deselect:ct']);
+  });
+
+  test('opening a sibling layer retracts the other layer’s card', () => {
+    // The accordion closes every other layer, so that layer's cards unmount
+    // on this click — same obligation as collapsing the layer directly.
+    const { events, category, card } = setup();
+    fireEvent.click(category('Constructs'));
+    fireEvent.click(card('Alpha'));
+
+    fireEvent.click(category('Walkthrough'));
+    expect(events).toEqual(['select:ct', 'deselect:ct']);
+  });
+
+  test('collapsing a layer with nothing expanded emits no deselect', () => {
+    const { events, category } = setup();
+    fireEvent.click(category('Constructs'));
+    fireEvent.click(category('Constructs'));
+    expect(events).toEqual([]);
+  });
+
+  test('collapsing the card itself still emits exactly one deselect', () => {
+    // The ref is cleared by the card's own collapse, so closing the layer
+    // afterwards must not re-report it.
+    const { events, category, card } = setup();
+    fireEvent.click(category('Constructs'));
+    fireEvent.click(card('Alpha'));
+    fireEvent.click(card('Alpha'));
+    expect(events).toEqual(['select:ct', 'deselect:ct']);
+
+    fireEvent.click(category('Constructs'));
+    expect(events).toEqual(['select:ct', 'deselect:ct']);
+  });
+});