retold-facto 0.0.4

package/source/services/web-app/pict-app/views/PictView-Facto-Datasets.js

@@ -0,0 +1,173 @@
+const libPictView = require('pict-view');
+
+class FactoDatasetsView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		this.pict.providers.Facto.loadDatasets().then(
+			() =>
+			{
+				this.refreshList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error loading datasets: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	refreshList()
+	{
+		let tmpContainer = document.getElementById('facto-datasets-list');
+		if (!tmpContainer) return;
+
+		let tmpDatasets = this.pict.AppData.Facto.Datasets;
+		if (!tmpDatasets || tmpDatasets.length === 0)
+		{
+			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No datasets created yet.</p>';
+			return;
+		}
+
+		let tmpBadgeClass = { Raw: 'badge-raw', Compositional: 'badge-compositional', Projection: 'badge-projection', Derived: 'badge-derived' };
+
+		let tmpHtml = '<table><thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Description</th><th>Actions</th></tr></thead><tbody>';
+		for (let i = 0; i < tmpDatasets.length; i++)
+		{
+			let tmpDataset = tmpDatasets[i];
+			let tmpBadge = tmpBadgeClass[tmpDataset.Type] || 'badge-raw';
+			tmpHtml += '<tr>';
+			tmpHtml += '<td>' + (tmpDataset.IDDataset || '') + '</td>';
+			tmpHtml += '<td>' + (tmpDataset.Name || '') + '</td>';
+			tmpHtml += '<td><span class="badge ' + tmpBadge + '">' + (tmpDataset.Type || '') + '</span></td>';
+			tmpHtml += '<td style="max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">' + (tmpDataset.Description || '') + '</td>';
+			tmpHtml += '<td><button class="secondary" style="padding:4px 8px; font-size:0.8em;" onclick="pict.views[\'Facto-Datasets\'].viewStats(' + tmpDataset.IDDataset + ')">Stats</button></td>';
+			tmpHtml += '</tr>';
+		}
+		tmpHtml += '</tbody></table>';
+		tmpContainer.innerHTML = tmpHtml;
+	}
+
+	viewStats(pIDDataset)
+	{
+		this.pict.providers.Facto.loadDatasetStats(pIDDataset).then(
+			(pResponse) =>
+			{
+				let tmpMsg = 'Dataset: ' + (pResponse.Dataset ? pResponse.Dataset.Name : '#' + pIDDataset);
+				tmpMsg += ' | Records: ' + (pResponse.RecordCount || 0);
+				tmpMsg += ' | Linked Sources: ' + (pResponse.SourceCount || 0);
+				this.pict.views['Pict-Section-Modal'].toast(tmpMsg, {type: 'info'});
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	addDataset()
+	{
+		let tmpName = this.pict.providers.FactoUI.getVal('facto-dataset-name');
+		let tmpType = this.pict.providers.FactoUI.getVal('facto-dataset-type') || 'Raw';
+		let tmpDescription = this.pict.providers.FactoUI.getVal('facto-dataset-desc');
+
+		if (!tmpName)
+		{
+			this.pict.views['Pict-Section-Modal'].toast('Name is required', {type: 'warning'});
+			return;
+		}
+
+		this.pict.providers.Facto.createDataset(
+			{
+				Name: tmpName,
+				Type: tmpType,
+				Description: tmpDescription
+			}).then(
+			(pResponse) =>
+			{
+				if (pResponse && pResponse.IDDataset)
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Dataset created: ' + pResponse.Name, {type: 'success'});
+					if (document.getElementById('facto-dataset-name')) document.getElementById('facto-dataset-name').value = '';
+					if (document.getElementById('facto-dataset-desc')) document.getElementById('facto-dataset-desc').value = '';
+					return this.pict.providers.Facto.loadDatasets();
+				}
+				else
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Error creating dataset', {type: 'error'});
+				}
+			}).then(
+			() =>
+			{
+				this.refreshList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+}
+
+module.exports = FactoDatasetsView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier: 'Facto-Datasets',
+	DefaultRenderable: 'Facto-Datasets',
+	DefaultDestinationAddress: '#Facto-Section-Datasets',
+	Templates:
+	[
+		{
+			Hash: 'Facto-Datasets',
+			Template: /*html*/`
+<div class="accordion-row">
+	<div class="accordion-number">2</div>
+	<div class="accordion-card open" id="facto-card-datasets">
+		<div class="accordion-header" onclick="pict.views['Facto-Layout'].toggleSection('facto-card-datasets')">
+			<span class="accordion-title">Datasets</span>
+			<span class="accordion-preview">Raw, Compositional, Projection, Derived</span>
+			<span class="accordion-toggle">&#9660;</span>
+		</div>
+		<div class="accordion-body">
+			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Datasets are named collections of records. Types: Raw (ingested), Compositional (merged), Projection (flattened), Derived (computed).</p>
+			<div id="facto-datasets-list"></div>
+
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Dataset</h3>
+			<div class="inline-group">
+				<div>
+					<label for="facto-dataset-name">Name</label>
+					<input type="text" id="facto-dataset-name" placeholder="e.g. Census Population 2020">
+				</div>
+				<div>
+					<label for="facto-dataset-type">Type</label>
+					<select id="facto-dataset-type">
+						<option value="Raw">Raw</option>
+						<option value="Compositional">Compositional</option>
+						<option value="Projection">Projection</option>
+						<option value="Derived">Derived</option>
+					</select>
+				</div>
+			</div>
+			<div>
+				<label for="facto-dataset-desc">Description</label>
+				<input type="text" id="facto-dataset-desc" placeholder="Brief description of the dataset">
+			</div>
+			<button class="primary" onclick="pict.views['Facto-Datasets'].addDataset()">Create Dataset</button>
+
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: 'Facto-Datasets',
+			TemplateHash: 'Facto-Datasets',
+			DestinationAddress: '#Facto-Section-Datasets'
+		}
+	]
+};

package/source/services/web-app/pict-app/views/PictView-Facto-Ingest.js

@@ -0,0 +1,259 @@
+const libPictView = require('pict-view');
+
+class FactoIngestView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		this.pict.providers.Facto.loadIngestJobs().then(
+			() =>
+			{
+				this.refreshList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error loading jobs: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	refreshList()
+	{
+		let tmpContainer = document.getElementById('facto-ingest-list');
+		if (!tmpContainer) return;
+
+		let tmpJobs = this.pict.AppData.Facto.IngestJobs;
+		if (!tmpJobs || tmpJobs.length === 0)
+		{
+			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No ingest jobs yet.</p>';
+			return;
+		}
+
+		let tmpStatusColors = { Pending: '#ffc107', Running: '#17a2b8', Completed: '#28a745', Failed: '#dc3545', Cancelled: '#6c757d' };
+
+		let tmpHtml = '<table><thead><tr><th>ID</th><th>Status</th><th>Source</th><th>Dataset</th><th>Processed</th><th>Created</th><th>Errors</th><th>Start</th><th>Actions</th></tr></thead><tbody>';
+		for (let i = 0; i < tmpJobs.length; i++)
+		{
+			let tmpJob = tmpJobs[i];
+			let tmpColor = tmpStatusColors[tmpJob.Status] || '#888';
+			tmpHtml += '<tr>';
+			tmpHtml += '<td>' + (tmpJob.IDIngestJob || '') + '</td>';
+			tmpHtml += '<td><span style="color:' + tmpColor + '; font-weight:600;">' + (tmpJob.Status || '') + '</span></td>';
+			tmpHtml += '<td>' + (tmpJob.IDSource || '') + '</td>';
+			tmpHtml += '<td>' + (tmpJob.IDDataset || '') + '</td>';
+			tmpHtml += '<td>' + (tmpJob.RecordsProcessed || 0) + '</td>';
+			tmpHtml += '<td>' + (tmpJob.RecordsCreated || 0) + '</td>';
+			tmpHtml += '<td>' + (tmpJob.RecordsErrored || 0) + '</td>';
+			tmpHtml += '<td>' + (tmpJob.StartDate || '-') + '</td>';
+			tmpHtml += '<td>';
+			if (tmpJob.Status === 'Pending')
+			{
+				tmpHtml += '<button class="success" style="padding:4px 8px; font-size:0.8em;" onclick="pict.views[\'Facto-Ingest\'].startJob(' + tmpJob.IDIngestJob + ')">Start</button>';
+			}
+			tmpHtml += '<button class="secondary" style="padding:4px 8px; font-size:0.8em;" onclick="pict.views[\'Facto-Ingest\'].viewLog(' + tmpJob.IDIngestJob + ')">Log</button>';
+			tmpHtml += '</td>';
+			tmpHtml += '</tr>';
+		}
+		tmpHtml += '</tbody></table>';
+		tmpContainer.innerHTML = tmpHtml;
+	}
+
+	startJob(pIDIngestJob)
+	{
+		this.pict.providers.Facto.startIngestJob(pIDIngestJob).then(
+			() =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Job #' + pIDIngestJob + ' started', {type: 'success'});
+				return this.pict.providers.Facto.loadIngestJobs();
+			}).then(
+			() =>
+			{
+				this.refreshList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	viewLog(pIDIngestJob)
+	{
+		this.pict.providers.Facto.loadIngestJobDetails(pIDIngestJob).then(
+			(pResponse) =>
+			{
+				if (pResponse && pResponse.Job)
+				{
+					let tmpLog = pResponse.Job.Log || '(empty)';
+					let tmpLogContainer = document.getElementById('facto-ingest-log');
+					if (tmpLogContainer)
+					{
+						tmpLogContainer.textContent = 'Job #' + pIDIngestJob + ' Log:\n' + tmpLog;
+						tmpLogContainer.style.display = 'block';
+					}
+				}
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	ingestPastedContent()
+	{
+		let tmpIDDataset = parseInt(this.pict.providers.FactoUI.getVal('facto-ingest-paste-dataset'), 10) || 0;
+		let tmpIDSource = parseInt(this.pict.providers.FactoUI.getVal('facto-ingest-paste-source'), 10) || 0;
+		let tmpFormat = this.pict.providers.FactoUI.getVal('facto-ingest-paste-format') || 'Auto';
+		let tmpType = this.pict.providers.FactoUI.getVal('facto-ingest-paste-type') || 'data';
+		let tmpContent = this.pict.providers.FactoUI.getVal('facto-ingest-paste-content');
+
+		if (!tmpContent.trim())
+		{
+			this.pict.views['Pict-Section-Modal'].toast('Content is required', {type: 'warning'});
+			return;
+		}
+
+		this.pict.views['Pict-Section-Modal'].toast('Ingesting...', {type: 'info'});
+
+		this.pict.providers.Facto.ingestFileContent(tmpIDDataset, tmpIDSource, tmpContent, tmpFormat, tmpType).then(
+			(pResponse) =>
+			{
+				if (pResponse && pResponse.Success)
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Ingested ' + (pResponse.RecordsCreated || 0) + ' records', {type: 'success'});
+					if (document.getElementById('facto-ingest-paste-content'))
+					{
+						document.getElementById('facto-ingest-paste-content').value = '';
+					}
+				}
+				else
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Ingest error: ' + ((pResponse && pResponse.Error) || 'Unknown'), {type: 'error'});
+				}
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+
+	createJob()
+	{
+		let tmpIDSource = parseInt(this.pict.providers.FactoUI.getVal('facto-ingest-source'), 10) || 0;
+		let tmpIDDataset = parseInt(this.pict.providers.FactoUI.getVal('facto-ingest-dataset'), 10) || 0;
+
+		if (!tmpIDSource || !tmpIDDataset)
+		{
+			this.pict.views['Pict-Section-Modal'].toast('Source ID and Dataset ID are required', {type: 'warning'});
+			return;
+		}
+
+		this.pict.providers.Facto.createIngestJob(tmpIDSource, tmpIDDataset).then(
+			(pResponse) =>
+			{
+				if (pResponse && pResponse.Success)
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Ingest job created: #' + pResponse.Job.IDIngestJob, {type: 'success'});
+					if (document.getElementById('facto-ingest-source')) document.getElementById('facto-ingest-source').value = '';
+					if (document.getElementById('facto-ingest-dataset')) document.getElementById('facto-ingest-dataset').value = '';
+					return this.pict.providers.Facto.loadIngestJobs();
+				}
+				else
+				{
+					this.pict.views['Pict-Section-Modal'].toast('Error creating job', {type: 'error'});
+				}
+			}).then(
+			() =>
+			{
+				this.refreshList();
+			}).catch(
+			(pError) =>
+			{
+				this.pict.views['Pict-Section-Modal'].toast('Error: ' + pError.message, {type: 'error'});
+			});
+	}
+}
+
+module.exports = FactoIngestView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier: 'Facto-Ingest',
+	DefaultRenderable: 'Facto-Ingest',
+	DefaultDestinationAddress: '#Facto-Section-Ingest',
+	Templates:
+	[
+		{
+			Hash: 'Facto-Ingest',
+			Template: /*html*/`
+<div class="accordion-row">
+	<div class="accordion-number">4</div>
+	<div class="accordion-card" id="facto-card-ingest">
+		<div class="accordion-header" onclick="pict.views['Facto-Layout'].toggleSection('facto-card-ingest')">
+			<span class="accordion-title">Ingest Jobs</span>
+			<span class="accordion-preview">Download, parse, and store datasets</span>
+			<span class="accordion-toggle">&#9660;</span>
+		</div>
+		<div class="accordion-body">
+			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Track data ingest operations from configured sources into datasets.</p>
+			<div id="facto-ingest-list"></div>
+
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Ingest Job</h3>
+			<div class="inline-group">
+				<div>
+					<label for="facto-ingest-source">Source ID</label>
+					<input type="number" id="facto-ingest-source" placeholder="1">
+				</div>
+				<div>
+					<label for="facto-ingest-dataset">Dataset ID</label>
+					<input type="number" id="facto-ingest-dataset" placeholder="1">
+				</div>
+			</div>
+			<button class="primary" onclick="pict.views['Facto-Ingest'].createJob()">Create Job</button>
+
+			<pre id="facto-ingest-log" style="display:none; margin-top:12px; padding:12px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:4px; font-size:0.85em; max-height:200px; overflow:auto; white-space:pre-wrap;"></pre>
+
+			<h3 style="margin-top:20px; margin-bottom:8px; font-size:1em; color:#444;">Paste &amp; Ingest</h3>
+			<p style="margin-bottom:8px; color:#666; font-size:0.85em;">Paste CSV or JSON content directly to ingest records.</p>
+			<div class="inline-group">
+				<div>
+					<label for="facto-ingest-paste-dataset">Dataset ID</label>
+					<input type="number" id="facto-ingest-paste-dataset" placeholder="1">
+				</div>
+				<div>
+					<label for="facto-ingest-paste-source">Source ID</label>
+					<input type="number" id="facto-ingest-paste-source" placeholder="1">
+				</div>
+				<div>
+					<label for="facto-ingest-paste-format">Format</label>
+					<select id="facto-ingest-paste-format">
+						<option value="Auto">Auto-Detect</option>
+						<option value="CSV">CSV</option>
+						<option value="JSON">JSON</option>
+					</select>
+				</div>
+				<div>
+					<label for="facto-ingest-paste-type">Record Type</label>
+					<input type="text" id="facto-ingest-paste-type" placeholder="data">
+				</div>
+			</div>
+			<textarea id="facto-ingest-paste-content" rows="6" style="width:100%; padding:8px 12px; border:1px solid #ccc; border-radius:4px; font-size:0.9em; font-family:monospace; margin-bottom:10px;" placeholder="Paste CSV or JSON data here..."></textarea>
+			<button class="primary" onclick="pict.views['Facto-Ingest'].ingestPastedContent()">Ingest</button>
+
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: 'Facto-Ingest',
+			TemplateHash: 'Facto-Ingest',
+			DestinationAddress: '#Facto-Section-Ingest'
+		}
+	]
+};

package/source/services/web-app/pict-app/views/PictView-Facto-Layout.js

@@ -0,0 +1,191 @@
+const libPictView = require('pict-view');
+
+class FactoLayoutView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		// Render all section views into their containers
+		if (this.pict.views['Facto-Throughput']) this.pict.views['Facto-Throughput'].render();
+		this.pict.views['Facto-Scanner'].render();
+		this.pict.views['Facto-Catalog'].render();
+		this.pict.views['Facto-Sources'].render();
+		this.pict.views['Facto-Datasets'].render();
+		this.pict.views['Facto-Records'].render();
+		this.pict.views['Facto-Ingest'].render();
+		this.pict.views['Facto-Projections'].render();
+
+		this.pict.CSSMap.injectCSS();
+	}
+
+	toggleSection(pSectionId)
+	{
+		let tmpCard = document.getElementById(pSectionId);
+		if (!tmpCard) return;
+		tmpCard.classList.toggle('open');
+	}
+
+	expandAllSections()
+	{
+		let tmpCards = document.querySelectorAll('.accordion-card');
+		for (let i = 0; i < tmpCards.length; i++)
+		{
+			tmpCards[i].classList.add('open');
+		}
+	}
+
+	collapseAllSections()
+	{
+		let tmpCards = document.querySelectorAll('.accordion-card');
+		for (let i = 0; i < tmpCards.length; i++)
+		{
+			tmpCards[i].classList.remove('open');
+		}
+	}
+}
+
+module.exports = FactoLayoutView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier: 'Facto-Layout',
+	DefaultRenderable: 'Facto-Layout',
+	DefaultDestinationAddress: '#Facto-Application-Container',
+	CSS: /*css*/`
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; padding: 20px; }
+h1 { margin-bottom: 20px; color: #1a1a1a; }
+h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px solid #ddd; padding-bottom: 6px; }
+
+.section { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+
+/* Accordion layout */
+.accordion-row { display: flex; gap: 0; margin-bottom: 16px; align-items: stretch; }
+.accordion-number {
+	flex: 0 0 48px; display: flex; align-items: flex-start; justify-content: center;
+	padding-top: 16px; font-size: 1.6em; font-weight: 700; color: #4a90d9;
+	user-select: none;
+}
+.accordion-card {
+	flex: 1; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+	overflow: hidden; min-width: 0;
+}
+.accordion-header {
+	display: flex; align-items: center; padding: 14px 20px; cursor: pointer;
+	user-select: none; gap: 12px; transition: background 0.15s; line-height: 1.4;
+}
+.accordion-header:hover { background: #fafafa; }
+.accordion-title { font-weight: 600; color: #333; font-size: 1.05em; white-space: nowrap; }
+.accordion-preview { flex: 1; font-style: italic; color: #888; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.accordion-toggle {
+	flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
+	border-radius: 4px; transition: background 0.15s, transform 0.25s; font-size: 0.7em; color: #888;
+}
+.accordion-header:hover .accordion-toggle { background: #eee; color: #555; }
+.accordion-card.open .accordion-toggle { transform: rotate(180deg); }
+.accordion-body { padding: 0 20px 20px; display: none; }
+.accordion-card.open .accordion-body { display: block; }
+.accordion-card.open .accordion-header { border-bottom: 1px solid #eee; }
+.accordion-card.open .accordion-preview { display: none; }
+
+.accordion-controls {
+	display: flex; gap: 8px; margin-bottom: 12px; justify-content: flex-end;
+}
+.accordion-controls button {
+	padding: 4px 10px; font-size: 0.82em; font-weight: 500; background: none;
+	border: 1px solid #ccc; border-radius: 4px; color: #666; cursor: pointer; margin: 0;
+}
+.accordion-controls button:hover { background: #f0f0f0; border-color: #aaa; color: #333; }
+
+label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; }
+input[type="text"], input[type="password"], input[type="number"] {
+	width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;
+	font-size: 0.95em; margin-bottom: 10px;
+}
+input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
+	outline: none; border-color: #4a90d9;
+}
+
+button {
+	padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
+	font-size: 0.9em; font-weight: 600; margin-right: 8px; margin-bottom: 8px;
+}
+button.primary { background: #4a90d9; color: #fff; }
+button.primary:hover { background: #357abd; }
+button.secondary { background: #6c757d; color: #fff; }
+button.secondary:hover { background: #5a6268; }
+button.danger { background: #dc3545; color: #fff; }
+button.danger:hover { background: #c82333; }
+button.success { background: #28a745; color: #fff; }
+button.success:hover { background: #218838; }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.status { padding: 8px 12px; border-radius: 4px; margin-top: 10px; font-size: 0.9em; }
+.status.ok { background: #d4edda; color: #155724; }
+.status.error { background: #f8d7da; color: #721c24; }
+.status.info { background: #d1ecf1; color: #0c5460; }
+.status.warn { background: #fff3cd; color: #856404; }
+
+.inline-group { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
+.inline-group > div { flex: 1; }
+
+a { color: #4a90d9; }
+
+select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; }
+
+table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
+th { text-align: left; font-weight: 600; padding: 8px; border-bottom: 2px solid #ddd; color: #555; }
+td { padding: 8px; border-bottom: 1px solid #eee; }
+tr:hover { background: #fafafa; }
+
+.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 600; }
+.badge-raw { background: #d1ecf1; color: #0c5460; }
+.badge-compositional { background: #d4edda; color: #155724; }
+.badge-projection { background: #fff3cd; color: #856404; }
+.badge-derived { background: #e2d5f1; color: #4a2d73; }
+
+.certainty-bar { display: inline-block; width: 60px; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; vertical-align: middle; }
+.certainty-fill { height: 100%; border-radius: 4px; }
+.certainty-low { background: #dc3545; }
+.certainty-mid { background: #ffc107; }
+.certainty-high { background: #28a745; }
+`,
+	Templates:
+	[
+		{
+			Hash: 'Facto-Layout',
+			Template: /*html*/`
+<h1>Retold Facto</h1>
+<p style="color:#666; margin-bottom:20px; font-size:0.95em;">Data Warehouse &amp; Knowledge Graph Storage</p>
+
+<!-- Expand / Collapse All -->
+<div class="accordion-controls">
+	<button onclick="pict.views['Facto-Layout'].expandAllSections()">Expand All</button>
+	<button onclick="pict.views['Facto-Layout'].collapseAllSections()">Collapse All</button>
+</div>
+
+<!-- Section containers -->
+<div id="Facto-Section-Throughput"></div>
+<div id="Facto-Section-Scanner"></div>
+<div id="Facto-Section-Catalog"></div>
+<div id="Facto-Section-Sources"></div>
+<div id="Facto-Section-Datasets"></div>
+<div id="Facto-Section-Records"></div>
+<div id="Facto-Section-Ingest"></div>
+<div id="Facto-Section-Projections"></div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: 'Facto-Layout',
+			TemplateHash: 'Facto-Layout',
+			DestinationAddress: '#Facto-Application-Container'
+		}
+	]
+};