@principal-ai/principal-view-react 0.16.55 → 0.16.57

package/src/stories/{WideNodesTesting.stories.tsx → Audit/WideNodesTesting.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Wide Nodes (16px Font)',
+  title: 'Audit/WideNodesTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{dashboard → Components}/DashboardRenderer.stories.tsx

@@ -7,11 +7,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { DashboardRenderer } from '../../components/dashboard';
-import activityFeedDashboard from './sample-dashboards/activity-feed-analytics.dashboard.json';
+import activityFeedDashboard from '../data/activity-feed-analytics.dashboard.json';
 import type { DashboardDefinition } from '../../components/dashboard';
 
 const meta: Meta<typeof DashboardRenderer> = {
-  title: 'Dashboard/DashboardRenderer',
+  title: 'Components/DashboardRenderer',
   component: DashboardRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{GraphRenderer.stories.tsx → Components/GraphRenderer.stories.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
-import type { GraphRendererHandle, PendingChanges } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
+import type { GraphRendererHandle, PendingChanges } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, PVEventSchema } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{MultiCanvasRenderer.stories.tsx → Components/MultiCanvasRenderer.stories.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { MultiCanvasRenderer } from '../components/MultiCanvasRenderer';
-import type { MultiCanvasLayout } from '../components/MultiCanvasRenderer';
+import { MultiCanvasRenderer } from '../../components/MultiCanvasRenderer';
+import type { MultiCanvasLayout } from '../../components/MultiCanvasRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{SequenceDiagram.stories.tsx → Components/SequenceDiagram.stories.tsx}

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { SequenceDiagramRenderer } from '../components/SequenceDiagramRenderer';
-import type { SequenceEvent, SequenceEdge } from '../hooks/useSequenceLayout';
+import { SequenceDiagramRenderer } from '../../components/SequenceDiagramRenderer';
+import type { SequenceEvent, SequenceEdge } from '../../hooks/useSequenceLayout';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {

package/src/stories/{StateView.stories.tsx → Components/StateView.stories.tsx}

@@ -5,10 +5,10 @@ import {
   type PipelineEvent,
   type EventSource,
   type PipelineEventType,
-} from '../components/state-view';
+} from '../../components/state-view';
 
 const meta = {
-  title: 'State View/Pipeline',
+  title: 'Components/StateView',
   component: PipelineView,
   parameters: {
     layout: 'centered',

package/src/stories/{TraceViewer.stories.tsx → Components/TraceViewer.stories.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Import captured trace canvas data
-import testRunTrace from './__traces__/test-run.canvas.json';
+import testRunTrace from '../__traces__/test-run.canvas.json';
 
 const meta = {
-  title: 'Traces/TraceViewer',
+  title: 'Components/TraceViewer',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{WorkflowSequenceDiagram.stories.tsx → Components/WorkflowSequenceDiagram.stories.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { WorkflowSequenceDiagram } from '../components/WorkflowSequenceDiagram';
+import { WorkflowSequenceDiagram } from '../../components/WorkflowSequenceDiagram';
 import type { WorkflowScenario, Canvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{AnimationWorkshop.stories.tsx → Features/AnimationWorkshop.stories.tsx}

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ReactFlow, ReactFlowProvider, Background, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { CustomNode } from '../nodes/CustomNode';
-import { CustomEdge } from '../edges/CustomEdge';
-import type { CustomNodeData } from '../nodes/CustomNode';
-import type { CustomEdgeData } from '../edges/CustomEdge';
+import { CustomNode } from '../../nodes/CustomNode';
+import { CustomEdge } from '../../edges/CustomEdge';
+import type { CustomNodeData } from '../../nodes/CustomNode';
+import type { CustomEdgeData } from '../../edges/CustomEdge';
 import type { NodeTypeDefinition, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
 import React from 'react';
 
 const meta = {
-  title: 'Workshop/Animation',
+  title: 'Features/AnimationWorkshop',
   component: ReactFlow,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{ChangeTypeVisual.stories.tsx → Features/ChangeTypeVisual.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, slateTheme } from '@principal-ade/industry-theme';
-import { ChangeTypeVisual } from '../../../trail-viewer/src/mainview/components/ChangeTypeVisual';
+import { ChangeTypeVisual } from '../../../../trail-viewer/src/mainview/components/ChangeTypeVisual';
 
 const meta = {
-  title: 'Concepts/ChangeTypeVisual',
+  title: 'Features/ChangeTypeVisual',
   component: ChangeTypeVisual,
   decorators: [
     (Story) => (

package/src/stories/{EventDrivenAnimations.stories.tsx → Features/EventDrivenAnimations.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { GraphEvent, ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { useState, useEffect } from 'react';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Workshop/Event-Driven Animations',
+  title: 'Features/EventDrivenAnimations',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{MultiConfig.stories.tsx → Features/MultiConfig.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta: Meta<typeof GraphRenderer> = {
-  title: 'Multi-Config/Configuration Switcher',
+  title: 'Features/MultiConfig',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{ElkEdgeRouting.stories.tsx → Layout/ElkEdgeRouting.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Layout/ELK Edge Routing',
+  title: 'Layout/ElkEdgeRouting',
   component: GraphRenderer,
   parameters: {
     layout: 'centered',

package/src/stories/{GraphOrientation.stories.tsx → Layout/GraphOrientation.stories.tsx}

@@ -1,13 +1,13 @@
 import React, { useState, useMemo } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import { swapGraphOrientation } from '../utils/orientationUtils';
+import { swapGraphOrientation } from '../../utils/orientationUtils';
 import { CanvasConverter } from '@principal-ai/principal-view-core';
 
 const meta = {
-  title: 'Features/Graph Orientation',
+  title: 'Layout/GraphOrientation',
   component: GraphRenderer,
   parameters: {
     layout: 'centered',

package/src/stories/{MultiDirectionalConnections.stories.tsx → Layout/MultiDirectionalConnections.stories.tsx}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/Multi-Directional Connections',
+  title: 'Layout/MultiDirectionalConnections',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeDefinitionComparison.stories.tsx → Nodes/NodeDefinitionComparison.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Node Definition Comparison',
+  title: 'Nodes/NodeDefinitionComparison',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeNameFallbacks.stories.tsx → Nodes/NodeNameFallbacks.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ExtendedCanvasNode } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Node Name Fallbacks',
+  title: 'Nodes/NodeNameFallbacks',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NumericColors.stories.tsx → Nodes/NumericColors.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/NumericColors',
+  title: 'Nodes/NumericColors',
   component: GraphRenderer,
   parameters: {
     layout: 'centered',

package/src/stories/{EventNameDisplay.stories.tsx → OTEL/EventNameDisplay.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/Event Name Display',
+  title: 'OTEL/EventNameDisplay',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{EventNameFallback.stories.tsx → OTEL/EventNameFallback.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Event Name NOT Used for Display',
+  title: 'OTEL/EventNameFallback',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{OtelComponents.stories.tsx → OTEL/OtelComponents.stories.tsx}

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import { GraphRenderer } from '../components/GraphRenderer';
-import { NodeTooltip } from '../components/NodeTooltip';
+import { GraphRenderer } from '../../components/GraphRenderer';
+import { NodeTooltip } from '../../components/NodeTooltip';
 
 // OTEL Log Association canvas data
 const otelCanvas = {
@@ -165,7 +165,7 @@ Routes incoming OTEL logs to canvas nodes based on matching criteria.
 };
 
 const meta: Meta = {
-  title: 'OTEL/Components',
+  title: 'OTEL/OtelComponents',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{OtelNodeTypesPrototype.stories.tsx → OTEL/OtelNodeTypesPrototype.stories.tsx}

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
 
 /**
@@ -399,7 +399,7 @@ function buildDescription(node: NewFormatNode): string {
 // =============================================================================
 
 const meta: Meta = {
-  title: 'OTEL/Node Types Prototype',
+  title: 'OTEL/OtelNodeTypesPrototype',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{RawEventCards.stories.tsx → OTEL/RawEventCards.stories.tsx}

@@ -6,11 +6,11 @@ import {
   SessionEventFeed,
   SessionEventFeedGrouped,
   type SessionEventFeedRow,
-} from '../components/session-events';
-import rawSession from './data/opencode-session-raw-events.json';
+} from '../../components/session-events';
+import rawSession from '../data/opencode-session-raw-events.json';
 
 const meta = {
-  title: 'Agent Raw Events/Cards',
+  title: 'OTEL/RawEventCards',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{SpanBadges.stories.tsx → OTEL/SpanBadges.stories.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, WorkflowChip } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{ValidationEventsCanvas.stories.tsx → OTEL/ValidationEventsCanvas.stories.tsx}

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Import the CLI events canvas
-import validationEventsCanvasUrl from '../../../../.principal-views/principal-view-cli.events.canvas?url';
+import validationEventsCanvasUrl from '../../../../../.principal-views/principal-view-cli.events.canvas?url';
 
 // Helper to load canvas from URL
 async function loadCanvas(url: string): Promise<ExtendedCanvas> {
@@ -41,7 +41,7 @@ function CanvasLoader({ url, children }: { url: string; children: (canvas: Exten
 }
 
 const meta = {
-  title: 'Validation/Event Namespace Canvas',
+  title: 'OTEL/ValidationEventsCanvas',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{BacklogMdCanvases.stories.tsx → RealWorld/BacklogMdCanvases.stories.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
@@ -67,7 +67,7 @@ function CanvasLoader({
 }
 
 const meta = {
-  title: 'Real Projects/Backlog.md Canvases',
+  title: 'RealWorld/BacklogMdCanvases',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{FileCitySequence.stories.tsx → RealWorld/FileCitySequence.stories.tsx}

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { SequenceDiagramRenderer } from '../components/SequenceDiagramRenderer';
-import { WorkflowSequenceDiagram } from '../components/WorkflowSequenceDiagram';
+import { SequenceDiagramRenderer } from '../../components/SequenceDiagramRenderer';
+import { WorkflowSequenceDiagram } from '../../components/WorkflowSequenceDiagram';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import workflowData from './data/file-city-workflows.json';
+import workflowData from '../data/file-city-workflows.json';
 import type { WorkflowScenario } from '@principal-ai/principal-view-core';
 
 const meta = {
-  title: 'Workflows/File City Image Generation',
+  title: 'RealWorld/FileCitySequence',
   component: SequenceDiagramRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{RealCanvasFiles.stories.tsx → RealWorld/RealCanvasFiles.stories.tsx}

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Import canvas files as URLs
-import scopesCanvasUrl from '../../../../.principal-views/architecture.scopes.canvas?url';
-import spansCanvasUrl from '../../../../.principal-views/architecture.spans.canvas?url';
-import resourcesCanvasUrl from '../../../../.principal-views/resources.canvas?url';
-import matchingLogicCanvasUrl from '../../../../.principal-views/matching-logic-current-state.canvas?url';
-import validationCanvasUrl from '../../../../.principal-views/validation/validation.otel.canvas?url';
+import scopesCanvasUrl from '../../../../../.principal-views/architecture.scopes.canvas?url';
+import spansCanvasUrl from '../../../../../.principal-views/architecture.spans.canvas?url';
+import resourcesCanvasUrl from '../../../../../.principal-views/resources.canvas?url';
+import matchingLogicCanvasUrl from '../../../../../.principal-views/matching-logic-current-state.canvas?url';
+import validationCanvasUrl from '../../../../../.principal-views/validation/validation.otel.canvas?url';
 
 // Helper to load canvas from URL
 async function loadCanvas(url: string): Promise<ExtendedCanvas> {
@@ -45,7 +45,7 @@ function CanvasLoader({ url, children }: { url: string; children: (canvas: Exten
 }
 
 const meta = {
-  title: 'Real Canvas Files',
+  title: 'RealWorld/RealCanvasFiles',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{ComponentDeclarationAudit.stories.tsx → Subsystem/ComponentDeclarationAudit.stories.tsx}

@@ -2,12 +2,12 @@ import React from 'react';
 import '@xyflow/react/dist/style.css';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import { ComponentDeclaration } from '../subsystem/ComponentDeclaration';
-import type { SubsystemComponent } from '../subsystem/model';
-import type { GraphifyComponentDetail } from '../graphify';
+import { ComponentDeclaration } from '../../subsystem/ComponentDeclaration';
+import type { SubsystemComponent } from '../../subsystem/model';
+import type { GraphifyComponentDetail } from '../../graphify';
 
 const meta = {
-  title: 'Subsystem/Component Declaration Audit',
+  title: 'Subsystem/ComponentDeclarationAudit',
   component: ComponentDeclaration,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],
@@ -28,7 +28,6 @@ const meta = {
   ],
 } satisfies Meta<typeof ComponentDeclaration>;
 export default meta;
-type Story = StoryObj<typeof ComponentDeclaration>;
 
 // ---------------------------------------------------------------------------
 // All cases — one SubsystemComponent per shape, rendered stacked
@@ -40,7 +39,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'fn-void',
       name: 'flush',
-      kind: 'function',
+      construct: 'function',
       file: 'src/event-processing/sink.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'flush',
@@ -55,7 +54,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'fn-one',
       name: 'normalize',
-      kind: 'function',
+      construct: 'function',
       file: 'src/session/SessionReader.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'SessionReader.normalize',
@@ -71,7 +70,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'fn-two',
       name: 'normalizeSession',
-      kind: 'function',
+      construct: 'function',
       file: 'src/event-processing/normalize.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'normalizeSession',
@@ -90,7 +89,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'fn-rich',
       name: 'mergeSessions',
-      kind: 'function',
+      construct: 'function',
       file: 'src/session/merge.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'mergeSessions',
@@ -111,7 +110,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'class-empty',
       name: 'EmptyClass',
-      kind: 'class',
+      construct: 'class',
       file: 'src/empty.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'EmptyClass',
@@ -125,7 +124,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'class-props',
       name: 'Config',
-      kind: 'class',
+      construct: 'class',
       file: 'src/config.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'Config',
@@ -144,7 +143,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'class-rich',
       name: 'EventProcessor',
-      kind: 'class',
+      construct: 'class',
       file: 'src/event-processing/EventProcessor.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'EventProcessor',
@@ -171,7 +170,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'type-props',
       name: 'SessionRecord',
-      kind: 'type',
+      construct: 'interface',
       file: 'src/session/transcript.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'SessionRecord',
@@ -189,7 +188,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'type-empty',
       name: 'BrandedId',
-      kind: 'type',
+      construct: 'interface',
       file: 'src/types.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'BrandedId',
@@ -203,7 +202,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'mod-full',
       name: 'index',
-      kind: 'module',
+      construct: 'module',
       file: 'src/index.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'index',
@@ -223,7 +222,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'mod-plain',
       name: 'utils',
-      kind: 'module',
+      construct: 'module',
       file: 'src/utils.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'utils',
@@ -234,7 +233,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'ext',
       name: 'trail-viewer',
-      kind: 'external',
+      construct: 'external',
       file: '',
       purl: 'pkg:npm/@principal-ai/trail-viewer',
       symbol: '',
@@ -249,7 +248,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'fn-no-symbol',
       name: 'anonymousHelper',
-      kind: 'function',
+      construct: 'function',
       file: 'src/helpers.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       detail: {
@@ -264,7 +263,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'method-normalize',
       name: 'normalize',
-      kind: 'method',
+      construct: 'method',
       file: 'src/session/SessionReader.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'SessionReader.normalize',
@@ -281,7 +280,7 @@ const cases: { label: string; component: SubsystemComponent }[] = [
     component: {
       id: 'method-dispose',
       name: 'dispose',
-      kind: 'method',
+      construct: 'method',
       file: 'src/event-processing/EventProcessor.ts',
       purl: 'pkg:github/principal-ai/agent-monitoring',
       symbol: 'EventProcessor.dispose',