@principal-ai/principal-view-react 0.15.9 → 0.16.0

package/src/components/session-events/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Session event diagnostic feed — raw → repo-normalized → accumulated pipeline
+ * per event, rendered as a three-column feed.
+ */
+export {
+  SessionEventFeed,
+  SessionEventFeedGrouped,
+} from './SessionEventFeed';
+export type {
+  SessionEventFeedProps,
+  SessionEventFeedGroupedProps,
+  SessionEventFeedRow,
+} from './SessionEventFeed';

package/src/index.ts

@@ -200,3 +200,14 @@ export type {
   // Component props
   PipelineViewProps,
 } from './components/state-view';
+
+// Session event diagnostic feed (raw → repo-normalized → accumulated)
+export {
+  SessionEventFeed,
+  SessionEventFeedGrouped,
+} from './components/session-events';
+export type {
+  SessionEventFeedProps,
+  SessionEventFeedGroupedProps,
+  SessionEventFeedRow,
+} from './components/session-events';

package/src/stories/ChangeTypeVisual.stories.tsx

@@ -0,0 +1,67 @@
+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';
+
+const meta = {
+  title: 'Concepts/ChangeTypeVisual',
+  component: ChangeTypeVisual,
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={slateTheme}>
+        <div
+          style={{
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: slateTheme.colors.background,
+          }}
+        >
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ChangeTypeVisual>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function frame(content: React.ReactNode) {
+  return (
+    <div
+      style={{
+        border: `1px solid ${slateTheme.colors.border}`,
+        borderRadius: 16,
+        padding: 48,
+        background: slateTheme.colors.backgroundSecondary,
+      }}
+    >
+      {content}
+    </div>
+  );
+}
+
+export const Sequence: Story = {
+  args: { changeType: 'execution', theme: slateTheme, height: 320 },
+  render: (args) => frame(<ChangeTypeVisual {...args} />),
+};
+
+export const Derive: Story = {
+  args: { changeType: 'derive', theme: slateTheme, height: 320 },
+  render: (args) => frame(<ChangeTypeVisual {...args} />),
+};
+
+export const Integration: Story = {
+  args: { changeType: 'integration', theme: slateTheme, height: 320 },
+  render: (args) => frame(<ChangeTypeVisual {...args} />),
+};
+
+export const UI: Story = {
+  args: { changeType: 'ui', theme: slateTheme, height: 320 },
+  render: (args) => frame(<ChangeTypeVisual {...args} />),
+};

package/src/stories/RawEventCards.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import type { AgentSessionEvent, V1RawEvent } from '@principal-ai/agent-monitoring';
+import {
+  SessionEventFeed,
+  SessionEventFeedGrouped,
+  type SessionEventFeedRow,
+} from '../components/session-events';
+import rawSession from './data/opencode-session-raw-events.json';
+
+const meta = {
+  title: 'Agent Raw Events/Cards',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Fixture → rows
+// =============================================================================
+
+const fixture = rawSession as {
+  session: { id: string; title: string; slug: string; timeCreated: number };
+  events: V1RawEvent[];
+  normalized: Array<Record<string, unknown>>;
+  accumulated: Array<AgentSessionEvent | null>;
+};
+
+const rows: SessionEventFeedRow[] = fixture.events
+  .map((raw, i) => ({
+    seq: raw.seq,
+    type: raw.type,
+    raw,
+    normalized: fixture.normalized[i],
+    accumulated: fixture.accumulated[i],
+  }))
+  .sort((a, b) => a.seq - b.seq);
+
+export const Feed: Story = {
+  render: () => <SessionEventFeed title={fixture.session.title} rows={rows} />,
+};
+
+export const Grouped: Story = {
+  render: () => <SessionEventFeedGrouped title={fixture.session.title} rows={rows} />,
+};