@principal-ai/subsystems-react 0.39.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/SubsystemComponentGraph.tsx

@@ -57,6 +57,10 @@ import {
 } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
 import type { SubsystemOpenFileOptions } from './declarationRef';
+import {
+  MaintainLivePanel,
+  type MaintainLivePanelProps,
+} from '../components/maintain-events/MaintainLivePanel';
 import type { WalkthroughSymbolQuery } from '../pierre/PierreWalkthroughCodeView';
 import { SubsystemComponentNode, SubsystemGroupNode, SubsystemEdge, SUBSYSTEM_CALLBACKS, hexWithAlpha, EDGE_DIM_ALPHA, fileMatchForNode, flowElementVisibility } from './nodes';
 import { SubsystemDiagnosticToggle, type SubsystemDiagnostic } from './DiagnosticToggle';
@@ -295,6 +299,11 @@ export interface SubsystemComponentGraphProps {
   onDescriptionOpenChange?: (open: boolean) => void;
   /** Rendered over the graph canvas only (not the title/legend sidebar). */
   canvasOverlay?: ReactNode;
+  /**
+   * Live agent-run events to show in a collapsible half-height panel over the
+   * graph canvas. Omit (or pass null) to hide it.
+   */
+  liveEvents?: MaintainLivePanelProps | null;
   /** Extra controls at the top of the title/legend sidebar. */
   sidebarExtra?: ReactNode;
   /** Rendered in the sidebar under the description (e.g. selection inspector). */
@@ -500,7 +509,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, relations, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey }: InnerProps) {
+function Inner({ components, relations, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents }: InnerProps) {
   const { theme } = useTheme();
   const { fitView, fitBounds } = useReactFlow();
   const viewport = useViewport();
@@ -3167,6 +3176,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
       {/* Startup cover — hides measurement, layout swap, and camera settle. */}
       <GraphLayoutCover revealed={layoutReady} />
       {canvasOverlay}
+      {liveEvents ? <MaintainLivePanel {...liveEvents} /> : null}
       </div>
     </div>
   );