@principal-ai/subsystems-react 0.39.0 → 0.41.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/AgentsPanel.tsx

@@ -0,0 +1,140 @@
+/**
+ * SubsystemAgentsPanel — the graph sidebar's Agents view: the Maintain agent
+ * pipeline, with the stage the router picked next highlighted and runnable.
+ *
+ * The host supplies the agent rows and the router's pick (`nextAgentId`); this
+ * component is presentation + the run trigger only.
+ */
+
+import { useTheme } from '@principal-ade/industry-theme';
+import { Bot, Play } from 'lucide-react';
+
+export interface SubsystemAgent {
+  id: string;
+  label: string;
+  /** Display group, e.g. `construct` / `static-topology` / `dynamic-topology`. */
+  lane?: string;
+  /** `issues` (fixer) or `verify` (verifier). */
+  mode?: string;
+}
+
+export interface SubsystemAgentsPanelProps {
+  agents: SubsystemAgent[];
+  /** Router's next stage, by agent id. Highlighted and runnable. */
+  nextAgentId?: string | null;
+  /** A Maintain run is in flight for this model. */
+  running?: boolean;
+  /** Run the router's next stage. */
+  onRun?: () => void;
+}
+
+const LANE_LABEL: Record<string, string> = {
+  construct: 'Construct',
+  'static-topology': 'Static topology',
+  'dynamic-topology': 'Dynamic topology',
+};
+
+export function SubsystemAgentsPanel({
+  agents,
+  nextAgentId,
+  running,
+  onRun,
+}: SubsystemAgentsPanelProps) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const accent = theme.colors.primary ?? '#7dd3fc';
+
+  if (agents.length === 0) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          color: muted,
+          fontFamily: theme.fonts.body,
+          fontSize: theme.fontSizes[1],
+        }}
+      >
+        No Maintain agents configured.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
+      {agents.map((agent) => {
+        const isNext = nextAgentId === agent.id;
+        return (
+          <div
+            key={agent.id}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '9px 12px',
+              borderBottom: `1px solid ${theme.colors.border}`,
+              background: isNext ? `${accent}14` : 'transparent',
+            }}
+          >
+            <Bot
+              size={14}
+              color={isNext ? accent : muted}
+              style={{ flexShrink: 0 }}
+              aria-hidden="true"
+            />
+            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <span
+                style={{
+                  fontFamily: theme.fonts.monospace,
+                  fontSize: theme.fontSizes[1],
+                  color: isNext ? theme.colors.text : theme.colors.textSecondary,
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {agent.label}
+              </span>
+              {agent.lane || agent.mode ? (
+                <span style={{ fontSize: theme.fontSizes[0], color: muted }}>
+                  {agent.lane ? (LANE_LABEL[agent.lane] ?? agent.lane) : null}
+                  {agent.lane && agent.mode ? ' · ' : null}
+                  {agent.mode ?? null}
+                </span>
+              ) : null}
+            </div>
+            {isNext ? (
+              <button
+                type="button"
+                onClick={() => onRun?.()}
+                disabled={running || onRun == null}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 5,
+                  padding: '3px 8px',
+                  border: `1px solid ${accent}`,
+                  borderRadius: 4,
+                  background: 'transparent',
+                  color: accent,
+                  fontFamily: theme.fonts.monospace,
+                  fontSize: theme.fontSizes[1],
+                  cursor: running || onRun == null ? 'default' : 'pointer',
+                  opacity: running || onRun == null ? 0.6 : 1,
+                  flexShrink: 0,
+                }}
+              >
+                <Play size={11} />
+                {running ? 'Running…' : 'Run'}
+              </button>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}