lula2 0.0.5 → 0.0.6

package/src/routes/control/[id]/+page.svelte

@@ -0,0 +1,112 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { ControlDetailsPanel, ControlsList } from '$components/controls';
+	import { wsClient } from '$lib/websocket';
+	import { selectedControl } from '$stores/compliance';
+	import { Document } from 'carbon-icons-svelte';
+	import { onMount } from 'svelte';
+
+	// Track the last fetched control ID to avoid refetching
+	let lastFetchedControlId = '';
+	let isLoadingControl = $state(false);
+
+	// React to URL parameter changes and fetch control details
+	$effect(() => {
+		const controlId = $page.params.id;
+		if (!controlId) return;
+
+		const decodedControlId = decodeURIComponent(controlId);
+
+		// Check if we need to fetch - only when control ID changes
+		if (decodedControlId && decodedControlId !== lastFetchedControlId) {
+			// Check connection status without subscribing to full appState
+			const isConnected = wsClient.isConnected();
+
+			if (isConnected) {
+				lastFetchedControlId = decodedControlId;
+				isLoadingControl = true;
+
+				// Fetch full control details from backend
+				wsClient.getControlDetails(decodedControlId);
+			}
+		}
+	});
+
+	// Listen for control details from WebSocket
+	onMount(() => {
+		const handleControlDetails = (event: CustomEvent) => {
+			const control = event.detail;
+			isLoadingControl = false;
+			if (control) {
+				selectedControl.set(control);
+			} else {
+				// Control not found, redirect to home
+				goto('/');
+			}
+		};
+
+		window.addEventListener('control-details', handleControlDetails as EventListener);
+
+		return () => {
+			window.removeEventListener('control-details', handleControlDetails as EventListener);
+		};
+	});
+</script>
+
+<!-- Left Pane: Controls List Card -->
+<div class="w-1/2 flex flex-col">
+	<div
+		class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm h-full flex flex-col"
+	>
+		<ControlsList />
+	</div>
+</div>
+
+<!-- Right Pane: Control Details -->
+<div class="w-1/2 flex flex-col relative">
+	{#if isLoadingControl}
+		<!-- Loading spinner in top-right corner -->
+		<div class="absolute top-4 right-4 z-10">
+			<div
+				class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
+				title="Loading control..."
+			>
+				<svg
+					class="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+			</div>
+		</div>
+	{/if}
+
+	{#if $selectedControl}
+		<ControlDetailsPanel control={$selectedControl} />
+	{:else}
+		<div class=" h-full flex flex-col">
+			<div class="flex-1 flex items-center justify-center p-8">
+				<div class="text-center text-gray-500 dark:text-gray-400">
+					<Document class="mx-auto h-16 w-16 mb-4" />
+					<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+						No Control Selected
+					</h3>
+					<p class="text-gray-600 dark:text-gray-400">
+						Select a control from the list to view and edit its details
+					</p>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/src/routes/setup/+page.svelte

@@ -0,0 +1,241 @@
+<!-- Setup Wizard Page for Control Set Creation -->
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ExistingControlSets, SpreadsheetImport } from '$components/setup';
+	import { appState, wsClient } from '$lib/websocket';
+	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+
+	let activeTab: 'import' | 'existing' = 'import'; // Default to import
+	let currentControlSetPath = '';
+	let hasAnyControlSets = false;
+	let isSwitching = false;
+	let controlSets: {
+		path: string;
+		name: string;
+		description: string;
+		controlCount: number;
+		file: string;
+	}[] = [];
+
+	onMount(() => {
+		// Connect WebSocket if not already connected
+		wsClient.connect();
+
+		// Use appState to check current control set
+		const unsubscribe = appState.subscribe((state) => {
+			if (
+				state.name &&
+				state.name !== 'Unknown Control Set' &&
+				state.id !== 'unknown' &&
+				state.id !== 'default'
+			) {
+				// Store the current path if a control set is loaded
+				currentControlSetPath = state.currentPath || '';
+			}
+		});
+
+		// Listen for control sets list
+		const handleControlSetsList = async (event: CustomEvent) => {
+			const data = event.detail;
+			if (data && data.controlSets) {
+				controlSets = data.controlSets || [];
+				hasAnyControlSets = controlSets.length > 0;
+
+				// Check if we should auto-load
+				if (controlSets.length === 1) {
+					const singleControlSet = controlSets[0];
+					const isAlreadyLoaded =
+						currentControlSetPath && currentControlSetPath.includes(singleControlSet.path);
+
+					// Only auto-load if it's not already the current control set
+					if (!isAlreadyLoaded && !currentControlSetPath) {
+						console.log(
+							'Only one control set found and none loaded, auto-loading:',
+							singleControlSet.path
+						);
+						await switchControlSet(singleControlSet.path);
+						return;
+					}
+				}
+
+				// Only switch to existing tab if there are control sets
+				if (hasAnyControlSets) {
+					activeTab = 'existing';
+				}
+			}
+		};
+
+		window.addEventListener('control-sets-list', handleControlSetsList as unknown as EventListener);
+
+		// Request control sets scan via WebSocket (don't await in onMount)
+		wsClient.scanControlSets().catch((err) => {
+			console.error('Error scanning control sets:', err);
+		});
+
+		return () => {
+			unsubscribe();
+			window.removeEventListener(
+				'control-sets-list',
+				handleControlSetsList as unknown as EventListener
+			);
+		};
+	});
+
+	async function switchControlSet(path: string) {
+		console.log('Starting control set switch to:', path);
+		isSwitching = true;
+
+		try {
+			// Send the switch command to WebSocket
+			await wsClient.switchControlSet(path);
+			console.log('WebSocket command sent, waiting for state update...');
+
+			// Wait for the actual state update to complete
+			await new Promise<void>((resolve) => {
+				let checkCount = 0;
+				const maxChecks = 50; // 5 seconds max (100ms intervals)
+
+				const checkInterval = setInterval(() => {
+					checkCount++;
+					const state = get(appState);
+
+					// Check if the switch is complete
+					if (
+						!state.isSwitchingControlSet &&
+						state.currentPath &&
+						state.currentPath.includes(path)
+					) {
+						clearInterval(checkInterval);
+						console.log('Control set switch completed successfully');
+						resolve();
+					} else if (checkCount >= maxChecks) {
+						clearInterval(checkInterval);
+						console.error('Control set switch timed out');
+						alert('Control set switch timed out. Please try again.');
+						resolve();
+					}
+				}, 100);
+			});
+
+			// Navigate to home page after successful switch
+			isSwitching = false;
+			goto('/');
+		} catch (error) {
+			console.error('Error switching control set:', error);
+			alert('Failed to switch control set: ' + (error as Error).message);
+			isSwitching = false;
+		}
+	}
+
+	async function handleControlSetCreated(event: CustomEvent) {
+		const { path } = event.detail;
+		await switchControlSet(path);
+	}
+
+	async function handleControlSetSelected(event: CustomEvent) {
+		const { path } = event.detail;
+		await switchControlSet(path);
+	}
+
+	function handleTabChange(event: CustomEvent) {
+		const { tab } = event.detail;
+		if (tab) {
+			activeTab = tab;
+		}
+	}
+</script>
+
+<div class=" p-4">
+	<div class="max-w-6xl mx-auto">
+		<!-- Header -->
+		<div class="text-center py-8">
+			<h1
+				class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 flex items-center justify-center gap-3"
+			>
+				<img src="/lula.png" class="h-12 w-12" alt="Lula" />
+				<span>Lula</span>
+			</h1>
+			<p class="text-lg text-gray-600 dark:text-gray-400">
+				{#if currentControlSetPath}
+					You have an existing control set. You can continue using it or create a new one.
+				{:else if hasAnyControlSets}
+					Select an existing control set or import a new one from a spreadsheet.
+				{:else}
+					Let's get started by importing a control set from a spreadsheet.
+				{/if}
+			</p>
+		</div>
+
+		<!-- Tab Navigation (only show if there are existing control sets) -->
+		{#if hasAnyControlSets}
+			<div class="flex justify-center mb-8">
+				<div
+					class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 inline-flex"
+				>
+					<button
+						on:click={() => (activeTab = 'existing')}
+						class="px-6 py-3 rounded-l-lg font-medium transition-colors {activeTab === 'existing'
+							? 'bg-blue-600 text-white'
+							: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}"
+					>
+						Select Existing Control Set
+					</button>
+					<button
+						on:click={() => (activeTab = 'import')}
+						class="px-6 py-3 rounded-r-lg font-medium transition-colors {activeTab === 'import'
+							? 'bg-blue-600 text-white'
+							: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'}"
+					>
+						Import New from Spreadsheet
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Content Area -->
+		<div
+			class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl p-6 relative border border-gray-200 dark:border-gray-700"
+		>
+			{#if activeTab === 'import'}
+				<SpreadsheetImport on:created={handleControlSetCreated} />
+			{:else}
+				<ExistingControlSets
+					{controlSets}
+					on:selected={handleControlSetSelected}
+					on:tab-change={handleTabChange}
+				/>
+			{/if}
+
+			{#if isSwitching}
+				<div
+					class="absolute inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center rounded-lg"
+				>
+					<div class="bg-white dark:bg-gray-700 rounded-lg p-6 text-center">
+						<svg
+							class="animate-spin h-8 w-8 text-blue-600 mx-auto mb-4"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+						<p class="text-gray-900 dark:text-white">Switching control set...</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/src/stores/compliance.ts

@@ -0,0 +1,95 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+import type { Control, ControlWithMappings, Mapping } from '$lib/types';
+import { derived, writable } from 'svelte/store';
+
+// Base stores
+export const controls = writable<Control[]>([]);
+export const mappings = writable<Mapping[]>([]);
+export const loading = writable(true);
+export const saveStatus = writable<'saved' | 'saving' | 'error'>('saved');
+export const searchTerm = writable('');
+export const selectedFamily = writable<string | null>(null);
+export const selectedControl = writable<Control | null>(null);
+
+// Derived stores
+export const families = derived(controls, ($controls) => {
+	const familySet = new Set(
+		$controls.map((c) => {
+			// Enhanced controls have family in _metadata.family, fallback to extracting from control-acronym
+			return (
+				(c as any)?._metadata?.family ||
+				(c as any)?.family ||
+				(c as any)?.['control-acronym']?.split('-')[0] ||
+				''
+			);
+		})
+	);
+	return Array.from(familySet)
+		.filter((f) => f)
+		.sort();
+});
+
+export const filteredControls = derived(
+	[controls, selectedFamily, searchTerm],
+	([$controls, $selectedFamily, $searchTerm]) => {
+		let results = $controls;
+
+		if ($selectedFamily) {
+			results = results.filter((c) => {
+				// Enhanced controls have family in _metadata.family, fallback to extracting from control-acronym
+				const family =
+					(c as any)?._metadata?.family ||
+					(c as any)?.family ||
+					(c as any)?.['control-acronym']?.split('-')[0] ||
+					'';
+				return family === $selectedFamily;
+			});
+		}
+
+		if ($searchTerm) {
+			const term = $searchTerm.toLowerCase();
+			results = results.filter((c) => JSON.stringify(c).toLowerCase().includes(term));
+		}
+
+		return results;
+	}
+);
+
+export const controlsWithMappings = derived(
+	[controls, mappings],
+	([$controls, $mappings]): ControlWithMappings[] => {
+		return $controls.map((control) => ({
+			...control,
+			mappings: $mappings.filter((m) => m.control_id === control.id)
+		}));
+	}
+);
+
+// Store actions - mostly for local state management
+// All server operations now go through WebSocket
+export const complianceStore = {
+	setSearchTerm(term: string) {
+		searchTerm.set(term);
+	},
+
+	setSelectedFamily(family: string | null) {
+		selectedFamily.set(family);
+	},
+
+	setSelectedControl(control: Control | null) {
+		// Strip mappings property if it exists to prevent it from being saved to control files
+		if (control && 'mappings' in control) {
+			const { mappings: _mappings, ...controlWithoutMappings } = control as any;
+			selectedControl.set(controlWithoutMappings);
+		} else {
+			selectedControl.set(control);
+		}
+	},
+
+	clearFilters() {
+		searchTerm.set('');
+		selectedFamily.set(null);
+	}
+};

package/src/styles/highlightjs.css

@@ -0,0 +1,20 @@
+/*
+  Copyright 2025 Defense Unicorns
+  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
+*/
+@reference "tailwindcss";
+
+@layer components {
+	.hljs-attr {
+		color: #33bbc8 !important;
+	}
+
+	.hljs-code,
+	.hljs-addition,
+	.hljs-title.class_.inherited__,
+	.hljs-number,
+	.hljs-literal,
+	.hljs-string {
+		color: #d338d3 !important;
+	}
+}

package/src/styles/modal.css

@@ -0,0 +1,58 @@
+/*
+  Copyright 2025 Defense Unicorns
+  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
+*/
+
+@reference "tailwindcss";
+
+@layer components {
+	/* Backdrop styling */
+	.modal-backdrop {
+		@apply fixed inset-0 z-100 hidden bg-black/70;
+	}
+
+	/* Modal content */
+	.modal-content {
+		@apply absolute z-[1000] hidden max-h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-2xl overflow-auto rounded-lg border border-gray-700 bg-gray-900 p-6 shadow-xl md:w-full;
+	}
+
+	/* When modal is open, content should be visible */
+	.modal-content[aria-hidden='false'] {
+		@apply fixed !block;
+		top: 50% !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) !important;
+	}
+
+	.modal-title {
+		@apply pe-4 text-lg font-semibold text-white;
+	}
+
+	/* Close button */
+	.modal-close {
+		@apply absolute top-3 right-4 flex h-8 w-8 cursor-pointer items-center justify-center border-0 bg-transparent text-2xl leading-none text-gray-400 transition-colors hover:text-gray-300;
+	}
+
+	.modal-close:hover {
+		@apply bg-gray-600/20 text-gray-100;
+	}
+
+	/* Animation classes */
+	.modal-fade-in {
+		animation: fadeIn 0.15s ease-in-out forwards;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Button styling for modals */
+	.btn {
+		@apply flex items-center rounded border border-gray-700 bg-gray-800/50 px-3 py-1 text-sm text-gray-400 transition-colors hover:border-blue-500 hover:text-blue-400;
+	}
+}

package/src/styles/tables.css

@@ -0,0 +1,111 @@
+/*
+  Copyright 2025 Defense Unicorns
+  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
+*/
+
+@reference "tailwindcss";
+
+@layer components {
+	.table-page {
+		@apply flex max-h-full flex-col gap-6 sm:gap-8;
+	}
+
+	.controls-container {
+		@apply flex flex-col items-center justify-between gap-4 p-1 md:flex-row;
+	}
+
+	.table-search {
+		@apply relative w-full md:w-1/2;
+	}
+
+	.table-search-icon {
+		@apply pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3;
+		svg {
+			@apply h-4 w-4 text-gray-400;
+		}
+	}
+
+	.table-search-input {
+		@apply w-full rounded-md border border-gray-700 bg-gray-800 py-2 pr-10 pl-10 [&::-webkit-search-cancel-button]:hidden;
+	}
+
+	.table-search-clear-btn {
+		@apply absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-white;
+	}
+
+	.controls-info-container {
+		@apply flex justify-center md:justify-start;
+	}
+	.controls-info-button {
+		@apply flex cursor-pointer items-center gap-1 rounded-md bg-blue-900/40 px-3 py-2 text-sm text-nowrap text-blue-200 hover:bg-blue-800/60;
+	}
+	.controls-info-button-icon {
+		@apply h-4 w-4;
+	}
+
+	.controls-info-modal-container {
+		@apply max-w-2xl rounded-lg border border-gray-700 bg-gray-900 p-0 shadow-xl;
+	}
+
+	.controls-info-modal-title {
+		@apply flex items-center justify-between border-b border-gray-800 px-6 py-4;
+		h3 {
+			@apply text-lg font-semibold text-white;
+		}
+	}
+
+	.controls-info-modal-body {
+		@apply p-6;
+	}
+
+	.error-container {
+		@apply flex max-h-full flex-col gap-4 sm:gap-6;
+	}
+
+	.error-content {
+		@apply mb-6 rounded-lg bg-red-900/30 p-4 text-red-200;
+	}
+
+	.error-retry-btn {
+		@apply mt-2 rounded-md bg-red-800 px-3 py-1 text-sm hover:bg-red-700;
+	}
+
+	.table-container {
+		@apply relative flex min-h-[var(--table-height)] overflow-y-hidden portrait:sm:min-h-auto;
+	}
+
+	.table-head {
+		@apply bg-gray-900;
+	}
+
+	.header-cell {
+		@apply px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase;
+	}
+
+	.table-row {
+		@apply cursor-auto border-b border-gray-800;
+	}
+
+	.first-data-column {
+		@apply pl-4!;
+	}
+
+	.table-row--expandable {
+		@apply cursor-pointer hover:bg-gray-800/30!;
+	}
+	.data-cell {
+		@apply px-2 py-4 text-sm whitespace-nowrap;
+	}
+
+	.expanded-row-container {
+		@apply flex w-full flex-col justify-between gap-6 p-4 sm:flex-row;
+	}
+
+	.multi-item-cell {
+		@apply flex items-center gap-2.5;
+	}
+
+	.initial-avatar {
+		@apply hidden h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-700 text-indigo-300 sm:flex;
+	}
+}

package/src/styles/tooltip.css

@@ -0,0 +1,65 @@
+/*
+  Copyright 2025 Defense Unicorns
+  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
+*/
+@reference "tailwindcss";
+
+@layer components {
+	.tooltip {
+		@apply pointer-events-none fixed z-50 rounded bg-gray-950 p-2 text-xs text-gray-100 opacity-0 shadow-sm shadow-gray-600/40 transition-opacity duration-200;
+		z-index: 1000;
+		top: var(--group-top, 0);
+		max-width: min(320px, calc(100vw - 40px));
+		white-space: normal;
+	}
+
+	[data-tooltip-trigger]:hover .tooltip,
+	[data-tooltip-trigger]:focus-within .tooltip {
+		@apply opacity-100;
+	}
+
+	.tooltip::before {
+		content: '';
+		@apply absolute top-[16px] -translate-y-0 transform border-8 border-solid;
+	}
+
+	.tooltip-left {
+		@apply mr-2;
+		right: calc(100% - var(--group-left, 0));
+	}
+
+	.tooltip-left::before {
+		@apply -right-4 border-t-transparent border-r-transparent border-b-transparent border-l-gray-950;
+	}
+
+	.tooltip-right {
+		@apply ml-2;
+		left: var(--group-right, 0);
+	}
+
+	.tooltip-right::before {
+		@apply -left-4 border-t-transparent border-r-gray-950 border-b-transparent border-l-transparent;
+	}
+
+	.tooltip-top {
+		@apply mb-2;
+		bottom: calc(100% - var(--group-top, 0));
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.tooltip-top::before {
+		@apply -bottom-4 left-1/2 -translate-x-1/2 border-t-gray-950 border-r-transparent border-b-transparent border-l-transparent;
+	}
+
+	.tooltip-bottom {
+		@apply mt-2;
+		top: var(--group-bottom, 0);
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.tooltip-bottom::before {
+		@apply -top-4 left-1/2 -translate-x-1/2 border-t-transparent border-r-transparent border-b-gray-950 border-l-transparent;
+	}
+}