+ {activeTab === 'details' ? (
+ (isNode || isRelationship) ? (
+
+ {isNode ? (
+
+ ) : (
+
+ )}
+
+ ) : (
+
+
Unknown Selected Entity
+
+ )
) : (
-
-
Unknown Selected Entity
+
+
)}
diff --git a/calm-hub-ui/src/visualizer/components/sidebar/detail-components.test.tsx b/calm-hub-ui/src/visualizer/components/sidebar/detail-components.test.tsx
new file mode 100644
index 000000000..64165f522
--- /dev/null
+++ b/calm-hub-ui/src/visualizer/components/sidebar/detail-components.test.tsx
@@ -0,0 +1,168 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import {
+ Section, Badge, RiskLevelBadge,
+ PropertiesSection, ControlsSection, RisksSection, MitigationsSection,
+ InterfacesSection, ConnectionDiagram, NodeList,
+} from './detail-components.js';
+import { Box } from 'lucide-react';
+
+describe('Section', () => {
+ it('renders title and children', () => {
+ render(
);
+
+ expect(screen.getByText('Test Section')).toBeInTheDocument();
+ expect(screen.getByText('Content')).toBeInTheDocument();
+ });
+});
+
+describe('Badge', () => {
+ it('renders label with background color', () => {
+ render(
);
+
+ const badge = screen.getByText('system');
+ expect(badge.closest('span')).toHaveStyle({ backgroundColor: '#3b82f6' });
+ });
+});
+
+describe('RiskLevelBadge', () => {
+ it('renders risk level text', () => {
+ render(
);
+ expect(screen.getByText('high')).toBeInTheDocument();
+ });
+});
+
+describe('PropertiesSection', () => {
+ it('returns null for empty properties', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders property keys and values', () => {
+ render(
);
+
+ expect(screen.getByText('My Field')).toBeInTheDocument();
+ expect(screen.getByText('my-value')).toBeInTheDocument();
+ });
+});
+
+describe('ControlsSection', () => {
+ it('returns null for empty controls', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders control id and description', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('auth-check')).toBeInTheDocument();
+ expect(screen.getByText('Verify auth tokens')).toBeInTheDocument();
+ });
+
+ it('renders requirement count', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('2 requirements')).toBeInTheDocument();
+ });
+
+ it('renders singular requirement text for one requirement', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('1 requirement')).toBeInTheDocument();
+ });
+});
+
+describe('RisksSection', () => {
+ it('returns null for empty risks', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders string risks', () => {
+ render(
);
+ expect(screen.getByText('Data leak')).toBeInTheDocument();
+ });
+
+ it('renders object risks using name', () => {
+ render(
);
+ expect(screen.getByText('SQL Injection')).toBeInTheDocument();
+ });
+
+ it('falls back to id then JSON for object risks', () => {
+ render(
);
+ expect(screen.getByText('risk-id')).toBeInTheDocument();
+ });
+});
+
+describe('MitigationsSection', () => {
+ it('returns null for empty mitigations', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders string mitigations', () => {
+ render(
);
+ expect(screen.getByText('Use encryption')).toBeInTheDocument();
+ });
+
+ it('renders object mitigations using name', () => {
+ render(
);
+ expect(screen.getByText('WAF')).toBeInTheDocument();
+ });
+});
+
+describe('InterfacesSection', () => {
+ it('returns null for empty interfaces', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders interface id and fields', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('iface-1')).toBeInTheDocument();
+ expect(screen.getByText('localhost')).toBeInTheDocument();
+ expect(screen.getByText('443')).toBeInTheDocument();
+ });
+
+ it('generates fallback id when unique-id is missing', () => {
+ render(
);
+ expect(screen.getByText('interface-0')).toBeInTheDocument();
+ });
+});
+
+describe('ConnectionDiagram', () => {
+ it('renders source and destination nodes', () => {
+ render(
);
+
+ expect(screen.getByText('node-a')).toBeInTheDocument();
+ expect(screen.getByText('node-b')).toBeInTheDocument();
+ });
+});
+
+describe('NodeList', () => {
+ it('renders label and all nodes', () => {
+ render(
);
+
+ expect(screen.getByText('Connected')).toBeInTheDocument();
+ expect(screen.getByText('n1')).toBeInTheDocument();
+ expect(screen.getByText('n2')).toBeInTheDocument();
+ expect(screen.getByText('n3')).toBeInTheDocument();
+ });
+});
diff --git a/calm-hub-ui/src/visualizer/components/sidebar/detail-components.tsx b/calm-hub-ui/src/visualizer/components/sidebar/detail-components.tsx
new file mode 100644
index 000000000..df7a3bfb1
--- /dev/null
+++ b/calm-hub-ui/src/visualizer/components/sidebar/detail-components.tsx
@@ -0,0 +1,169 @@
+import { ReactNode } from 'react';
+import { AlertTriangle, AlertCircle, Shield, ArrowRight, type LucideIcon } from 'lucide-react';
+import { getRiskLevelColor } from '../../../theme/helpers.js';
+import type { RiskItem, MitigationItem, ControlItem } from '../../contracts/contracts.js';
+import { formatFieldName } from './sidebar-utils.js';
+
+export { formatFieldName, getNodeIcon, extractAigf, getExtraProperties } from './sidebar-utils.js';
+export type { AigfData } from './sidebar-utils.js';
+
+export function Section({ title, children }: { title: string; children: ReactNode }) {
+ return (
+
+
{title}
+ {children}
+
+ );
+}
+
+export function Badge({ icon: Icon, label, color }: { icon: LucideIcon; label: string; color: string }) {
+ return (
+
+
+ {label}
+
+ );
+}
+
+export function RiskLevelBadge({ level }: { level: string }) {
+ return
;
+}
+
+export function PropertiesSection({ properties }: { properties: [string, unknown][] }) {
+ if (properties.length === 0) return null;
+ return (
+
+
+ {properties.map(([key, value]) => (
+
+ {formatFieldName(key)}
+ {String(value)}
+
+ ))}
+
+ );
+}
+
+export function ControlsSection({ controls }: { controls: Record
}) {
+ const entries = Object.entries(controls);
+ if (entries.length === 0) return null;
+ return (
+
+
+ {entries.map(([id, control]) => {
+ const reqCount = Array.isArray(control.requirements) ? control.requirements.length : 0;
+ return (
+
+
+
+ {id}
+
+ {control.description && (
+
{control.description}
+ )}
+ {reqCount > 0 && (
+
+ {reqCount} requirement{reqCount !== 1 ? 's' : ''}
+
+ )}
+
+ );
+ })}
+
+ {risks.map((risk, idx) => (
+
+
+
+ {typeof risk === 'string' ? risk : (risk.name || risk.id || JSON.stringify(risk))}
+
+
+ ))}
+
+ {mitigations.map((mitigation, idx) => (
+
+
+
+ {typeof mitigation === 'string' ? mitigation : (mitigation.name || mitigation.id || JSON.stringify(mitigation))}
+
+
+ ))}
+
+ {interfaces.map((iface, idx) => {
+ const ifaceId = (iface['unique-id'] as string) || `interface-${idx}`;
+ const otherFields = Object.entries(iface).filter(([k]) => k !== 'unique-id');
+ return (
+
+
{ifaceId}
+ {otherFields.map(([k, v]) => (
+
+ {formatFieldName(k)}
+ {String(v)}
+
+ ))}
+
+ );
+ })}
+
+
{nodes[0]}
+
+
{nodes[1]}
+
+
{label}
+
+ {nodes.map(node => (
+ {node}
+ ))}
+
+