Merge branch 'main' into issues/2051-calm-server

Author: markscott-ms

calm-hub-ui/src/visualizer/components/drawer/Drawer.tsx

@@ -4,23 +4,12 @@ import {
     CalmNodeSchema,
     CalmRelationshipSchema,
 } from '../../../../../calm-models/src/types/core-types.js';
-import { Data } from '../../../model/calm.js';
 import { useDropzone } from 'react-dropzone';
 import { ReactFlowVisualizer } from '../reactflow/ReactFlowVisualizer.js';
 import { Sidebar } from '../sidebar/Sidebar.js';
 import { MetadataPanel } from '../reactflow/MetadataPanel.js';
 import { NodeData, EdgeData } from '../../contracts/contracts.js';
-import type { Flow } from '../reactflow/FlowsPanel.js';
-import type { Control } from '../reactflow/ControlsPanel.js';
-
-interface DrawerProps {
-    data?: Data; // Optional data prop passed in from CALM Hub if user navigates from there
-}
-
-// Selected item can be either node or edge data from the graph
-type SelectedItem = {
-    data: NodeData | EdgeData;
-} | null;
+import type { DrawerProps, SelectedItem, Flow, Control } from '../../contracts/contracts.js';
 
 /**
  * Extract the unique-id from a CALM node or relationship

calm-hub-ui/src/visualizer/components/reactflow/ArchitectureGraph.tsx

@@ -10,23 +10,13 @@ import ReactFlow, {
     NodeChange,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { FloatingEdge } from './FloatingEdge';
-import { CustomNode } from './CustomNode';
-import { SystemGroupNode } from './SystemGroupNode';
-import { THEME } from './theme';
-import { parseCALMData } from './utils/calmTransformer';
-import { GRAPH_LAYOUT } from './utils/constants';
-import {
-    CalmArchitectureSchema,
-    CalmNodeSchema,
-    CalmRelationshipSchema,
-} from '../../../../../calm-models/src/types/core-types.js';
-
-interface ArchitectureGraphProps {
-    jsonData: CalmArchitectureSchema;
-    onNodeClick?: (node: CalmNodeSchema) => void;
-    onEdgeClick?: (edge: CalmRelationshipSchema) => void;
-}
+import { FloatingEdge } from './FloatingEdge.js';
+import { CustomNode } from './CustomNode.js';
+import { SystemGroupNode } from './SystemGroupNode.js';
+import { THEME } from './theme.js';
+import { parseCALMData } from './utils/calmTransformer.js';
+import { GRAPH_LAYOUT } from './utils/constants.js';
+import type { ArchitectureGraphProps } from '../../contracts/contracts.js';
 
 /**
  * Calculate the minimum bounds for a group node based on its children

calm-hub-ui/src/visualizer/components/reactflow/ControlsPanel.tsx

@@ -1,38 +1,6 @@
-import { THEME } from './theme';
-import { ControlsPanelHeader, ControlCard } from './controls-panel';
-
-// Types for CALM control data
-export interface ControlRequirementConfig {
-    appliesTo?: {
-        nodes?: string[];
-        relationships?: string[];
-    };
-    [key: string]: unknown;
-}
-
-export interface ControlRequirement {
-    'requirement-url'?: string;
-    'config-url'?: string;
-    config?: ControlRequirementConfig;
-}
-
-export interface Control {
-    description?: string;
-    requirements?: ControlRequirement[];
-    'aigf-mitigations'?: string[];
-    'aigf-risks'?: string[];
-    // Extended properties added during extraction
-    appliesTo?: string;
-    nodeName?: string;
-    relationshipDescription?: string;
-    appliesToType?: 'node' | 'relationship';
-}
-
-interface ControlsPanelProps {
-    controls: Record<string, Control>;
-    onNodeClick?: (nodeId: string) => void;
-    onControlClick?: (controlId: string) => void;
-}
+import { THEME } from './theme.js';
+import { ControlsPanelHeader, ControlCard } from './controls-panel/index.js';
+import type { ControlsPanelProps } from '../../contracts/contracts.js';
 
 export function ControlsPanel({ controls, onNodeClick, onControlClick }: ControlsPanelProps) {
     if (!controls || Object.keys(controls).length === 0) return null;

calm-hub-ui/src/visualizer/components/reactflow/CustomNode.tsx

@@ -16,34 +16,9 @@ import {
     ZoomIn,
     Info,
 } from 'lucide-react';
-import { extractId, extractNodeType } from './utils/calmHelpers';
-import { THEME, getNodeTypeColor, getRiskLevelColor } from './theme';
-
-/**
- * AIGF risk item - all fields optional as CALM data may have partial info
- */
-interface RiskItem {
-    id?: string;
-    name?: string;
-    description?: string;
-}
-
-/**
- * AIGF mitigation item - all fields optional as CALM data may have partial info
- */
-interface MitigationItem {
-    id?: string;
-    name?: string;
-    description?: string;
-}
-
-/**
- * Control item - flexible structure to accommodate various control types
- */
-interface ControlItem {
-    description?: string;
-    [key: string]: unknown;
-}
+import { extractId, extractNodeType } from './utils/calmHelpers.js';
+import { THEME, getNodeTypeColor, getRiskLevelColor } from './theme.js';
+import type { RiskItem, MitigationItem, ControlItem } from '../../contracts/contracts.js';
 
 export function CustomNode({ data }: NodeProps) {
   const [isHovered, setIsHovered] = useState(false);

calm-hub-ui/src/visualizer/components/reactflow/FloatingEdge.tsx

@@ -1,27 +1,8 @@
 import { useState, useCallback } from 'react';
 import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
-import { getEdgeParams } from './utils/floatingEdges';
-import { EdgeBadge, EdgeTooltip, getBadgeStyle } from './edge-components';
-import type { FlowTransition, EdgeControl, Mitigation, Risk } from './edge-components';
-
-/**
- * Edge data from CALM relationships - all fields optional as different
- * relationship types have different data (connects, interacts, etc.)
- */
-interface EdgeData {
-    description?: string;
-    protocol?: string;
-    direction?: 'forward' | 'backward';
-    flowTransitions?: FlowTransition[];
-    controls?: Record<string, EdgeControl>;
-    metadata?: {
-        aigf?: {
-            'controls-applied'?: string[];
-            mitigations?: (string | Mitigation)[];
-            risks?: (string | Risk)[];
-        };
-    };
-}
+import { getEdgeParams } from './utils/floatingEdges.js';
+import { EdgeBadge, EdgeTooltip, getBadgeStyle } from './edge-components/index.js';
+import type { EdgeData } from '../../contracts/contracts.js';
 
 export function FloatingEdge({
     id,

calm-hub-ui/src/visualizer/components/reactflow/FlowsPanel.tsx

@@ -1,32 +1,6 @@
-import { THEME } from './theme';
-import { FlowsPanelHeader, FlowCard } from './flows-panel';
-
-// Types for CALM flow data
-export interface FlowTransition {
-    'sequence-number': number;
-    'relationship-unique-id': string;
-    description?: string;
-    direction?: string;
-}
-
-export interface AIGFGovernance {
-    'mitigations-applied'?: string[];
-    'risks-addressed'?: string[];
-    'trust-boundaries-crossed'?: string[];
-}
-
-export interface Flow {
-    'unique-id': string;
-    name: string;
-    description?: string;
-    transitions?: FlowTransition[];
-    'aigf-governance'?: AIGFGovernance;
-}
-
-interface FlowsPanelProps {
-    flows: Flow[];
-    onTransitionClick?: (relationshipId: string) => void;
-}
+import { THEME } from './theme.js';
+import { FlowsPanelHeader, FlowCard } from './flows-panel/index.js';
+import type { FlowsPanelProps } from '../../contracts/contracts.js';
 
 export function FlowsPanel({ flows, onTransitionClick }: FlowsPanelProps) {
     if (!flows || flows.length === 0) return null;

calm-hub-ui/src/visualizer/components/reactflow/MetadataPanel.tsx

@@ -1,22 +1,9 @@
 import { useState, useRef, useCallback } from 'react';
-import { THEME } from './theme';
-import { FlowsPanel, Flow } from './FlowsPanel';
-import { ControlsPanel, Control } from './ControlsPanel';
+import { THEME } from './theme.js';
+import { FlowsPanel } from './FlowsPanel.js';
+import { ControlsPanel } from './ControlsPanel.js';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
-
-interface MetadataPanelProps {
-    flows: Flow[];
-    controls: Record<string, Control>;
-    onTransitionClick?: (relationshipId: string) => void;
-    onNodeClick?: (nodeId: string) => void;
-    onControlClick?: (controlId: string) => void;
-    isCollapsed: boolean;
-    onToggleCollapse: () => void;
-    height: number;
-    onHeightChange: (height: number) => void;
-}
-
-type TabType = 'flows' | 'controls';
+import type { MetadataPanelProps, MetadataPanelTabType } from '../../contracts/contracts.js';
 
 export function MetadataPanel({
     flows,
@@ -31,7 +18,7 @@ export function MetadataPanel({
 }: MetadataPanelProps) {
     const hasFlows = flows.length > 0;
     const hasControls = Object.keys(controls).length > 0;
-    const [activeTab, setActiveTab] = useState<TabType>(hasFlows ? 'flows' : 'controls');
+    const [activeTab, setActiveTab] = useState<MetadataPanelTabType>(hasFlows ? 'flows' : 'controls');
     const [isDragging, setIsDragging] = useState(false);
     const dragStartY = useRef<number>(0);
     const dragStartHeight = useRef<number>(0);

calm-hub-ui/src/visualizer/components/reactflow/ReactFlowVisualizer.tsx

@@ -1,16 +1,5 @@
-import { ArchitectureGraph } from './ArchitectureGraph';
-import {
-  CalmArchitectureSchema,
-  CalmNodeSchema,
-  CalmRelationshipSchema,
-} from '../../../../../calm-models/src/types/core-types.js';
-
-export interface ReactFlowVisualizerProps {
-  calmData: CalmArchitectureSchema;
-  onNodeClick?: (nodeData: CalmNodeSchema) => void;
-  onEdgeClick?: (edgeData: CalmRelationshipSchema) => void;
-  onBackgroundClick?: () => void;
-}
+import { ArchitectureGraph } from './ArchitectureGraph.js';
+import type { ReactFlowVisualizerProps } from '../../contracts/visualizer-contracts.js';
 
 /**
  * ReactFlow-based visualizer component

calm-hub-ui/src/visualizer/components/reactflow/controls-panel/AIGFMappingSection.tsx

@@ -1,10 +1,6 @@
 import { FiShield, FiAlertCircle } from 'react-icons/fi';
-import { THEME } from '../theme';
-
-interface AIGFMappingSectionProps {
-    mitigations?: string[];
-    risks?: string[];
-}
+import { THEME } from '../theme.js';
+import type { AIGFMappingSectionProps } from '../../../contracts/contracts.js';
 
 export function AIGFMappingSection({ mitigations, risks }: AIGFMappingSectionProps) {
     if (!mitigations?.length && !risks?.length) return null;

calm-hub-ui/src/visualizer/components/reactflow/controls-panel/ControlCard.tsx

@@ -1,15 +1,8 @@
 import { FiShield } from 'react-icons/fi';
-import { THEME } from '../theme';
-import { ControlRequirementItem } from './ControlRequirementItem';
-import { AIGFMappingSection } from './AIGFMappingSection';
-import type { Control } from '../ControlsPanel';
-
-interface ControlCardProps {
-    controlId: string;
-    control: Control;
-    onNodeClick?: (nodeId: string) => void;
-    onControlClick?: (controlId: string) => void;
-}
+import { THEME } from '../theme.js';
+import { ControlRequirementItem } from './ControlRequirementItem.js';
+import { AIGFMappingSection } from './AIGFMappingSection.js';
+import type { ControlCardProps, ControlCardHeaderProps, NodeBadgeProps, RequirementsSectionProps } from '../../../contracts/contracts.js';
 
 export function ControlCard({ controlId, control, onNodeClick, onControlClick }: ControlCardProps) {
     return (
@@ -52,12 +45,6 @@ export function ControlCard({ controlId, control, onNodeClick, onControlClick }:
     );
 }
 
-interface ControlCardHeaderProps {
-    controlId: string;
-    control: Control;
-    onNodeClick?: (nodeId: string) => void;
-}
-
 function ControlCardHeader({ controlId, control, onNodeClick }: ControlCardHeaderProps) {
     return (
         <div
@@ -101,12 +88,6 @@ function ControlCardHeader({ controlId, control, onNodeClick }: ControlCardHeade
     );
 }
 
-interface NodeBadgeProps {
-    nodeName: string;
-    nodeId?: string;
-    onClick?: (nodeId: string) => void;
-}
-
 function NodeBadge({ nodeName, nodeId, onClick }: NodeBadgeProps) {
     return (
         <div style={{ marginTop: '6px', marginBottom: '8px' }}>
@@ -158,11 +139,6 @@ function RelationshipBadge({ description }: { description: string }) {
     );
 }
 
-interface RequirementsSectionProps {
-    requirements: NonNullable<Control['requirements']>;
-    onNodeClick?: (nodeId: string) => void;
-}
-
 function RequirementsSection({ requirements, onNodeClick }: RequirementsSectionProps) {
     return (
         <div style={{ padding: '12px' }}>