@principal-ai/subsystems-react 0.17.0

package/src/nodes/otel/shared/NodeContent.tsx

@@ -0,0 +1,204 @@
+/**
+ * Node content component - renders icon, name, identifier, state, violations, and workflow chips
+ */
+
+import React from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { resolveIcon } from '../../../utils/iconResolver';
+import type { NodeContentProps, WorkflowChip } from './types';
+
+/**
+ * Helper to render text with word break opportunities after dots
+ */
+function renderWithDotBreaks(text: string): React.ReactNode {
+  const parts = text.split('.');
+  return parts.map((part, i) => (
+    <span key={i}>
+      {part}
+      {i < parts.length - 1 && (
+        <>
+          .<wbr />
+        </>
+      )}
+    </span>
+  ));
+}
+
+/**
+ * Workflow chips component for span convention nodes
+ */
+const WorkflowChips: React.FC<{
+  chips: WorkflowChip[];
+  onChipClick?: (chipId: string) => void;
+  selectedChipId?: string;
+}> = ({ chips, onChipClick, selectedChipId }) => {
+  const { theme } = useTheme();
+
+  if (!chips || chips.length === 0) return null;
+
+  // Show max 3 chips, then "+N more"
+  const maxVisible = 3;
+  const visibleChips = chips.slice(0, maxVisible);
+  const remainingCount = chips.length - maxVisible;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '3px',
+        marginTop: '4px',
+        justifyContent: 'center',
+        maxWidth: '100%',
+      }}
+    >
+      {visibleChips.map((chip) => {
+        const isSelected = selectedChipId === chip.id;
+        const hasColor = !!chip.color;
+
+        return (
+          <div
+            key={chip.id}
+            onClick={(e) => {
+              e.stopPropagation();
+              onChipClick?.(chip.id);
+            }}
+            style={{
+              fontSize: theme.fontSizes[0] * 0.65,
+              padding: '1px 5px',
+              borderRadius: '6px',
+              backgroundColor: isSelected
+                ? chip.color || '#3b82f6'
+                : chip.color
+                  ? `${chip.color}33` // 20% opacity version
+                  : 'rgba(0,0,0,0.08)',
+              color: isSelected
+                ? '#fff'
+                : hasColor
+                  ? chip.color
+                  : 'rgba(0,0,0,0.6)',
+              whiteSpace: 'nowrap',
+              maxWidth: '70px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              cursor: onChipClick ? 'pointer' : 'default',
+              fontWeight: isSelected ? theme.fontWeights.bold : theme.fontWeights.medium,
+              transition: 'all 0.15s ease',
+              border: isSelected ? 'none' : `1px solid ${hasColor ? `${chip.color}66` : 'rgba(0,0,0,0.1)'}`,
+            }}
+            title={chip.label}
+          >
+            {chip.label}
+          </div>
+        );
+      })}
+      {remainingCount > 0 && (
+        <div
+          style={{
+            fontSize: theme.fontSizes[0] * 0.65,
+            padding: '1px 5px',
+            borderRadius: '6px',
+            backgroundColor: 'rgba(0,0,0,0.05)',
+            color: 'rgba(0,0,0,0.5)',
+            whiteSpace: 'nowrap',
+          }}
+          title={`${remainingCount} more workflow${remainingCount > 1 ? 's' : ''}`}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Node content component - renders the inner content of a node
+ */
+export const NodeContent: React.FC<NodeContentProps> = ({
+  displayName,
+  identifier,
+  icon,
+  state,
+  stateDefinitions,
+  hasViolations,
+  centered = true,
+  workflowChips,
+  onWorkflowChipClick,
+  selectedWorkflowId,
+}) => {
+  const { theme } = useTheme();
+
+  // Show identifier if it differs from display name
+  const showIdentifier = identifier && identifier !== displayName;
+
+  // Get state label from definitions
+  const stateLabel = state && stateDefinitions?.[state]?.label;
+
+  return (
+    <>
+      {/* Icon */}
+      {icon && (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          {resolveIcon(icon, 20)}
+        </div>
+      )}
+
+      {/* Name with optional identifier */}
+      <div style={{ textAlign: centered ? 'center' : 'left', wordBreak: 'break-word' }}>
+        <div>{displayName}</div>
+        {showIdentifier && (
+          <div
+            style={{
+              fontSize: theme.fontSizes[0] * 0.75,
+              color: 'rgba(0, 0, 0, 0.5)',
+              marginTop: '2px',
+              fontFamily: theme.fonts.monospace,
+            }}
+          >
+            {renderWithDotBreaks(identifier)}
+          </div>
+        )}
+      </div>
+
+      {/* Workflow chips (for span convention nodes) */}
+      {workflowChips && workflowChips.length > 0 && (
+        <WorkflowChips
+          chips={workflowChips}
+          onChipClick={onWorkflowChipClick}
+          selectedChipId={selectedWorkflowId}
+        />
+      )}
+
+      {/* State badge */}
+      {state && (
+        <div
+          style={{
+            fontSize: theme.fontSizes[0],
+            fontFamily: theme.fonts.body,
+            backgroundColor: '#888', // Color will be passed from parent
+            color: 'white',
+            padding: '2px 6px',
+            borderRadius: '4px',
+            textAlign: 'center',
+          }}
+        >
+          {stateLabel || state}
+        </div>
+      )}
+
+      {/* Violations indicator */}
+      {hasViolations && (
+        <div
+          style={{
+            fontSize: theme.fontSizes[0],
+            fontFamily: theme.fonts.body,
+            color: '#D0021B',
+            fontWeight: theme.fontWeights.bold,
+          }}
+        >
+          ⚠️
+        </div>
+      )}
+    </>
+  );
+};

package/src/nodes/otel/shared/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared components for OTEL node types
+ */
+
+export * from './types';
+export * from './useNodeBehavior';
+export { NodeBadges } from './NodeBadges';
+export { NodeContent } from './NodeContent';

package/src/nodes/otel/shared/types.ts

@@ -0,0 +1,138 @@
+/**
+ * Shared types for OTEL node components
+ */
+
+/**
+ * Workflow chip displayed on span convention nodes
+ */
+export interface WorkflowChip {
+  /** Workflow ID for selection/filtering */
+  id: string;
+  /** Display label (may be truncated) */
+  label: string;
+  /** Optional color for the chip */
+  color?: string;
+}
+
+/**
+ * Common node data properties shared across all OTEL node types
+ */
+export interface OtelNodeDataBase {
+  /** Node color (hex string or preset number) */
+  color?: string;
+  /** Scope color for border (from library.yaml owned-scopes) */
+  scopeColor?: string;
+  /** Span color for fill (from .spans.canvas) */
+  spanColor?: string;
+  /** Explicit stroke color override */
+  stroke?: string;
+  /** Icon identifier (Lucide icons) */
+  icon?: string;
+  /** Implementation status */
+  status?: 'draft' | 'approved' | 'implemented';
+  /** Description for tooltip */
+  description?: string;
+  /** Source files where event is instrumented */
+  sources?: string[];
+  /** External references/documentation */
+  references?: string[];
+  /** Node-level state definitions */
+  states?: Record<string, { color?: string; label?: string; icon?: string }>;
+  /** Canvas type (e.g., 'group') */
+  canvasType?: string;
+  /** Node type identifier */
+  nodeType?: string;
+}
+
+/**
+ * OTEL extension data
+ */
+export interface OtelExtensionData {
+  /** Span pattern for span convention nodes */
+  spanPattern?: string;
+  /** Scope name for scope nodes */
+  scope?: string;
+  /** Resource match for resource nodes */
+  resourceMatch?: Record<string, string | string[]>;
+  /** Files where this is instrumented */
+  files?: string[];
+}
+
+/**
+ * Event data for event nodes
+ */
+export interface EventData {
+  /** Event name */
+  name?: string;
+  /** Event description */
+  description?: string;
+  /** Event attributes schema */
+  attributes?: Record<string, unknown>;
+}
+
+/**
+ * Boundary data for boundary nodes
+ */
+export interface BoundaryData {
+  /** Direction of boundary interaction */
+  direction?: 'outbound' | 'inbound';
+  /** Node query for external system */
+  node?: Record<string, string>;
+}
+
+/**
+ * Props for shared node content component
+ */
+export interface NodeContentProps {
+  /** Display name for the node */
+  displayName: string;
+  /** Identifier shown below the name (e.g., span pattern, event name) */
+  identifier?: string;
+  /** Icon identifier */
+  icon?: string;
+  /** Current state */
+  state?: string;
+  /** State definitions for label lookup */
+  stateDefinitions?: Record<string, { label?: string }>;
+  /** Whether node has violations */
+  hasViolations?: boolean;
+  /** Whether to center text (default true) */
+  centered?: boolean;
+  /** Workflow chips for span convention nodes */
+  workflowChips?: WorkflowChip[];
+  /** Callback when a workflow chip is clicked */
+  onWorkflowChipClick?: (chipId: string) => void;
+  /** Currently selected workflow ID */
+  selectedWorkflowId?: string;
+}
+
+/**
+ * Badge position types
+ */
+export type BadgePosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom';
+
+/**
+ * Props for node badges component
+ */
+export interface NodeBadgesProps {
+  /** Node shape for position calculations */
+  shape: 'rectangle' | 'circle' | 'hexagon' | 'diamond';
+  /** Implementation status */
+  status?: 'draft' | 'approved' | 'implemented';
+  /** Source files */
+  sourceFiles?: string[];
+  /** References */
+  references?: string[];
+  /** Boundary data (for boundary nodes) */
+  boundary?: BoundaryData;
+  /** Node opacity for badge visibility */
+  opacity?: number;
+}

package/src/nodes/otel/shared/useNodeBehavior.ts

@@ -0,0 +1,114 @@
+/**
+ * Hook for shared node behavior (resize, hide, hover, tooltip)
+ */
+
+import { useState, useRef, useCallback } from 'react';
+import { useNodeId } from '@xyflow/react';
+import { useGraphEdit } from '../../../contexts/GraphEditContext';
+
+export interface UseNodeBehaviorOptions {
+  /** Whether the node is in edit mode */
+  editable?: boolean;
+  /** Whether tooltips are enabled */
+  tooltipsEnabled?: boolean;
+  /** Whether shift key is pressed */
+  shiftKeyPressed?: boolean;
+  /** Whether the node is selected */
+  selected?: boolean;
+  /** Whether the node is being dragged */
+  dragging?: boolean;
+}
+
+export interface UseNodeBehaviorReturn {
+  /** Ref for the node element */
+  nodeRef: React.RefObject<HTMLDivElement>;
+  /** Node ID from xyflow */
+  nodeId: string | null;
+  /** Whether the node is currently hovered */
+  isHovered: boolean;
+  /** Whether to show the tooltip */
+  showTooltip: boolean;
+  /** Mouse down handler for Cmd/Ctrl+click behavior */
+  handleMouseDown: (event: React.MouseEvent) => void;
+  /** Mouse enter handler */
+  handleMouseEnter: () => void;
+  /** Mouse leave handler */
+  handleMouseLeave: () => void;
+  /** Resize end handler */
+  handleResizeEnd: (event: unknown, params: { width: number; height: number }) => void;
+}
+
+/**
+ * Hook that provides common node behavior for resize, hide, hover, and tooltip interactions
+ */
+export function useNodeBehavior(options: UseNodeBehaviorOptions): UseNodeBehaviorReturn {
+  const {
+    editable = false,
+    tooltipsEnabled = true,
+    shiftKeyPressed = false,
+    selected = false,
+    dragging = false,
+  } = options;
+
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const nodeId = useNodeId();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
+
+  // Handle resize end - notify parent to track the dimension change
+  const handleResizeEnd = useCallback(
+    (_event: unknown, params: { width: number; height: number }) => {
+      if (nodeId && onNodeResizeEnd && params.width && params.height) {
+        onNodeResizeEnd(nodeId, {
+          width: Math.round(params.width),
+          height: Math.round(params.height),
+        });
+      }
+    },
+    [nodeId, onNodeResizeEnd]
+  );
+
+  // Handle Cmd/Ctrl+mousedown to toggle hidden state
+  // We use mousedown instead of click because in edit mode with draggable nodes,
+  // ReactFlow's drag system intercepts Cmd+click before it becomes a click event
+  // - Cmd/Ctrl+Shift+click: hide all nodes not directly connected to this node
+  // - Cmd/Ctrl+click: toggle this single node's hidden state
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      if ((event.metaKey || event.ctrlKey) && nodeId) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (event.shiftKey && onHideUnconnectedNodes) {
+          // Cmd/Ctrl+Shift+click: hide unconnected nodes
+          onHideUnconnectedNodes(nodeId);
+        } else if (onToggleNodeHidden) {
+          // Cmd/Ctrl+click: toggle single node
+          onToggleNodeHidden(nodeId);
+        }
+      }
+    },
+    [nodeId, onToggleNodeHidden, onHideUnconnectedNodes]
+  );
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  // Show tooltip when:
+  // 1. Hovering + not dragging + shift key pressed (always works), OR
+  // 2. Node is selected AND not in edit mode (read-only selection shows tooltip)
+  const showTooltip =
+    tooltipsEnabled && ((isHovered && !dragging && shiftKeyPressed) || (!editable && !!selected));
+
+  return {
+    nodeRef,
+    nodeId,
+    isHovered,
+    showTooltip,
+    handleMouseDown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleResizeEnd,
+  };
+}

package/src/pierre/PierreFileView.tsx

@@ -0,0 +1,81 @@
+/**
+ * PierreFileView — host-injected full-file code view via `@pierre/diffs`.
+ *
+ * Ported from `@industry-theme/file-city-panel` so subsystem graphs and
+ * Storybook can render source without that panel package.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { File } from '@pierre/diffs/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { buildPierreOptions, PIERRE_FILE_STYLE } from './pierreBackground';
+import { pierreLangForPath } from './pierreFileLang';
+
+export interface PierreFileViewProps {
+  filePath: string;
+  fileName: string;
+  /** Host-supplied file reader (closures bind any path-normalization). */
+  readFile: (path: string) => Promise<string>;
+  /** Override Pierre's container background. Any CSS color string. */
+  background?: string;
+}
+
+export function PierreFileView({
+  filePath,
+  fileName,
+  readFile,
+  background,
+}: PierreFileViewProps) {
+  const { theme } = useTheme();
+  const [contents, setContents] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileObject = useMemo(
+    () =>
+      contents !== null
+        ? { name: fileName, contents, lang: pierreLangForPath(filePath) }
+        : null,
+    [fileName, filePath, contents],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setContents(null);
+    setError(null);
+    void readFile(filePath)
+      .then((content) => {
+        if (!cancelled) setContents(content);
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to read file');
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [filePath, readFile]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 16, color: theme.colors.error ?? '#e5534b' }}>
+        {error}
+      </div>
+    );
+  }
+  if (fileObject === null) {
+    return (
+      <div style={{ padding: 16, color: theme.colors.textSecondary }}>
+        Loading…
+      </div>
+    );
+  }
+
+  return (
+    <File
+      file={fileObject}
+      options={buildPierreOptions(background)}
+      style={PIERRE_FILE_STYLE}
+    />
+  );
+}