@principal-ai/subsystems-react 0.39.0 → 0.40.0

package/src/components/maintain-events/MaintainLivePanel.tsx

@@ -0,0 +1,99 @@
+/**
+ * MaintainLivePanel — a collapsible, half-height panel that overlays the graph
+ * canvas and streams a live agent run's events. Subsystems Studio supplies the
+ * state (status/events/total/error) and renders it through
+ * `SubsystemComponentGraph`'s `liveEvents` prop; collapsing leaves just the
+ * header bar so the graph stays readable.
+ */
+
+import { useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { MaintainEventLog, type MaintainEventLogProps } from './MaintainEventLog';
+
+export interface MaintainLivePanelProps extends MaintainEventLogProps {
+  /** Start collapsed (header only). @default false */
+  defaultCollapsed?: boolean;
+}
+
+const HEADER_HEIGHT = 36;
+
+export function MaintainLivePanel({
+  title,
+  agent,
+  sessionId,
+  status,
+  events,
+  total,
+  error,
+  defaultCollapsed = false,
+}: MaintainLivePanelProps) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const border = theme.colors.border ?? 'rgba(255,255,255,0.12)';
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: collapsed ? HEADER_HEIGHT : '50%',
+        zIndex: 5,
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.colors.backgroundSecondary ?? theme.colors.background,
+        borderTop: `1px solid ${border}`,
+        boxShadow: '0 -8px 24px rgba(0,0,0,0.35)',
+        overflow: 'hidden',
+      }}
+    >
+      <button
+        type="button"
+        onClick={() => setCollapsed((c) => !c)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          height: HEADER_HEIGHT,
+          flexShrink: 0,
+          padding: '0 12px',
+          border: 'none',
+          borderBottom: collapsed ? 'none' : `1px solid ${border}`,
+          background: 'transparent',
+          color: theme.colors.text,
+          fontFamily: theme.fonts.body,
+          fontSize: theme.fontSizes[0],
+          cursor: 'pointer',
+          textAlign: 'left',
+        }}
+      >
+        {collapsed ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+        <span style={{ fontWeight: 600 }}>Live events</span>
+        {agent ? <span style={{ color: muted }}>{agent}</span> : null}
+        {status ? <span style={{ color: muted }}>· {status}</span> : null}
+        {total > 0 ? <span style={{ color: muted }}>· {total} events</span> : null}
+        <span style={{ flex: 1 }} />
+        {sessionId ? (
+          <span style={{ color: muted, fontFamily: theme.fonts.monospace }}>{sessionId}</span>
+        ) : null}
+      </button>
+      {!collapsed ? (
+        <div style={{ flex: 1, minHeight: 0 }}>
+          <MaintainEventLog
+            title={title}
+            agent={agent}
+            sessionId={sessionId}
+            status={status}
+            events={events}
+            total={total}
+            error={error}
+            showHeader={false}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Maintain event log — presentational live OpenCode agent-run event feed.
+ */
+export { MaintainEventLog } from './MaintainEventLog';
+export type {
+  MaintainEventLogEvent,
+  MaintainEventLogProps,
+} from './MaintainEventLog';
+export { MaintainLivePanel } from './MaintainLivePanel';
+export type { MaintainLivePanelProps } from './MaintainLivePanel';

package/src/index.ts

@@ -16,6 +16,14 @@ export type {
   SessionEventFeedRow,
 } from './components/session-events';
 
+// Maintain event log — presentational live OpenCode agent-run event feed
+export { MaintainEventLog, MaintainLivePanel } from './components/maintain-events';
+export type {
+  MaintainEventLogEvent,
+  MaintainEventLogProps,
+  MaintainLivePanelProps,
+} from './components/maintain-events';
+
 // Graphify integration types (graph.json data model)
 export type {
   JsonValue,

package/src/stories/MaintainEvents/MaintainEventLog.stories.tsx

@@ -0,0 +1,66 @@
+/**
+ * Maintain Event Log — presentational live agent-run event feed.
+ *
+ * The `Live` story replays a fixture derived from a real OpenCode V2 agent
+ * session (`packages/subsystems-core/src/opencode/__fixtures__/session-events.json`),
+ * mapped to the live-feed vocabulary (`session.next.*` / `session.status`) and
+ * summarized the same way the host's `/api/event` subscription is
+ * (`summarizeEvent` in `subsystems-studio/src/bun/opencode-v2-live.ts`).
+ */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import {
+  MaintainEventLog,
+  type MaintainEventLogEvent,
+} from '../../components/maintain-events';
+import liveEvents from '../data/maintain-live-events.json';
+
+const events = liveEvents as MaintainEventLogEvent[];
+
+const meta = {
+  title: 'Agent Sessions/Maintain Event Log',
+  component: MaintainEventLog,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div
+          style={{
+            height: '100vh',
+            background: defaultEditorTheme.colors.background,
+            color: defaultEditorTheme.colors.text,
+          }}
+        >
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    title: 'Maintain events',
+    agent: 'construct-verifier',
+    sessionId: 'ses_056b1f037ffeu1d00DzvJBrHq9',
+    status: 'running',
+    events,
+    total: events.length,
+  },
+} satisfies Meta<typeof MaintainEventLog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Live: Story = {};
+
+export const WaitingForSession: Story = {
+  args: { sessionId: undefined, events: [], total: 0, status: 'starting' },
+};
+
+export const WaitingForEvents: Story = {
+  args: { events: [], total: 0 },
+};
+
+export const WithError: Story = {
+  args: { error: 'live event stream dropped — reconnecting and reconciling with server state' },
+};

package/src/stories/MaintainEvents/MaintainLivePanel.stories.tsx

@@ -0,0 +1,77 @@
+/**
+ * Maintain Live Panel — the collapsible half-height live-agent-run panel that
+ * `SubsystemComponentGraph` renders over its canvas via the `liveEvents` prop.
+ *
+ * The fixture replays a real OpenCode V2 agent session
+ * (`packages/subsystems-core/src/opencode/__fixtures__/session-events.json`),
+ * mapped to the live-feed vocabulary and summarized like the host's
+ * `/api/event` subscription.
+ */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import {
+  MaintainLivePanel,
+  type MaintainEventLogEvent,
+} from '../../components/maintain-events';
+import liveEvents from '../data/maintain-live-events.json';
+
+const events = liveEvents as MaintainEventLogEvent[];
+
+const meta = {
+  title: 'Agent Sessions/Maintain Live Panel',
+  component: MaintainLivePanel,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div
+          style={{
+            position: 'relative',
+            height: '100vh',
+            overflow: 'hidden',
+            background: defaultEditorTheme.colors.background,
+            color: defaultEditorTheme.colors.text,
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'grid',
+              placeItems: 'center',
+              color: defaultEditorTheme.colors.textMuted,
+              fontFamily: defaultEditorTheme.fonts.monospace,
+              fontSize: 13,
+            }}
+          >
+            graph canvas
+          </div>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    title: 'Maintain events',
+    agent: 'construct-verifier',
+    sessionId: 'ses_056b1f037ffeu1d00DzvJBrHq9',
+    status: 'running',
+    events,
+    total: events.length,
+  },
+} satisfies Meta<typeof MaintainLivePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Expanded: Story = {};
+
+export const Collapsed: Story = {
+  args: { defaultCollapsed: true },
+};
+
+export const WaitingForEvents: Story = {
+  args: { events: [], total: 0 },
+};