retold-data-service 2.1.1 → 2.1.5

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Layout.js

@@ -42,37 +42,6 @@ class ComprehensionLoaderLayoutView extends libPictView
 			tmpCards[i].classList.remove('open');
 		}
 	}
-
-	toggleStatusDetail()
-	{
-		let tmpDetail = document.getElementById('liveStatusDetail');
-		let tmpMeta = document.getElementById('liveStatusMeta');
-		let tmpMessage = document.getElementById('liveStatusMessage');
-		let tmpToggle = document.getElementById('liveStatusToggle');
-		let tmpBar = document.getElementById('liveStatusBar');
-		if (!tmpDetail) return;
-
-		let tmpIsExpanded = tmpDetail.style.display !== 'none';
-
-		if (tmpIsExpanded)
-		{
-			tmpDetail.style.display = 'none';
-			tmpMeta.style.display = '';
-			tmpMessage.style.display = '';
-			tmpToggle.innerHTML = '▼';
-			tmpBar.classList.remove('expanded');
-			this.pict.providers.ComprehensionLoader.onStatusDetailCollapsed();
-		}
-		else
-		{
-			tmpDetail.style.display = '';
-			tmpMeta.style.display = 'none';
-			tmpMessage.style.display = 'none';
-			tmpToggle.innerHTML = '▲';
-			tmpBar.classList.add('expanded');
-			this.pict.providers.ComprehensionLoader.onStatusDetailExpanded();
-		}
-	}
 }
 
 module.exports = ComprehensionLoaderLayoutView;
@@ -81,61 +50,61 @@ module.exports.default_configuration =
 {
 	ViewIdentifier: 'ComprehensionLoader-Layout',
 	DefaultRenderable: 'ComprehensionLoader-Layout',
-	DefaultDestinationAddress: '#ComprehensionLoader-Application-Container',
+	DefaultDestinationAddress: '#ComprehensionLoader-Workspace',
 	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; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--theme-color-background-secondary, #f5f5f5); color: var(--theme-color-text-primary, #333); padding: 20px; }
+h1 { margin-bottom: 20px; color: var(--theme-color-text-primary, #1a1a1a); }
+h2 { margin-bottom: 12px; color: var(--theme-color-text-secondary, #444); font-size: 1.2em; border-bottom: 2px solid var(--theme-color-border-default, #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); }
+.section { background: var(--theme-color-background-panel, #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;
+	padding-top: 16px; font-size: 1.6em; font-weight: 700; color: var(--theme-color-brand-primary, #4a90d9);
 	user-select: none;
 }
 .accordion-card {
-	flex: 1; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+	flex: 1; background: var(--theme-color-background-panel, #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-header:hover { background: var(--theme-color-background-secondary, #fafafa); }
+.accordion-title { font-weight: 600; color: var(--theme-color-text-primary, #333); font-size: 1.05em; white-space: nowrap; }
+.accordion-preview { flex: 1; font-style: italic; color: var(--theme-color-text-muted, #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;
+	border-radius: 4px; transition: background 0.15s, transform 0.25s; font-size: 0.7em; color: var(--theme-color-text-muted, #888);
 }
-.accordion-header:hover .accordion-toggle { background: #eee; color: #555; }
+.accordion-header:hover .accordion-toggle { background: var(--theme-color-border-light, #eee); color: var(--theme-color-text-secondary, #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-header { border-bottom: 1px solid var(--theme-color-border-light, #eee); }
 .accordion-card.open .accordion-preview { display: none; }
 
 /* Action controls (go link + auto checkbox) */
 .accordion-actions { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
 .accordion-card.open .accordion-actions { display: none; }
 .accordion-go {
-	font-size: 0.82em; color: #4a90d9; cursor: pointer; text-decoration: none;
+	font-size: 0.82em; color: var(--theme-color-brand-primary, #4a90d9); cursor: pointer; text-decoration: none;
 	font-weight: 500; white-space: nowrap; padding: 2px 6px; border-radius: 3px;
 	transition: background 0.15s;
 }
-.accordion-go:hover { background: #e8f0fe; text-decoration: underline; }
+.accordion-go:hover { background: var(--theme-color-background-hover, #e8f0fe); text-decoration: underline; }
 .accordion-auto {
-	font-size: 0.82em; color: #999; white-space: nowrap; cursor: pointer;
+	font-size: 0.82em; color: var(--theme-color-text-muted, #999); white-space: nowrap; cursor: pointer;
 }
 .accordion-auto .auto-label { display: none; }
 .accordion-auto:hover .auto-label { display: inline; }
 .accordion-auto input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; vertical-align: middle; position: relative; top: 0px; opacity: 0.75; transition: opacity 0.15s; }
 .accordion-auto:hover input[type="checkbox"] { opacity: 1; }
-.accordion-auto:hover { color: #666; }
+.accordion-auto:hover { color: var(--theme-color-text-secondary, #666); }
 
 /* Phase status indicator */
 .accordion-phase {
@@ -143,12 +112,12 @@ h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px soli
 	font-size: 0.85em; line-height: 1;
 }
 .accordion-phase.visible { display: flex; }
-.accordion-phase-ok { color: #28a745; }
-.accordion-phase-error { color: #dc3545; }
-.accordion-phase-busy { color: #28a745; }
+.accordion-phase-ok { color: var(--theme-color-status-success, #28a745); }
+.accordion-phase-error { color: var(--theme-color-status-error, #dc3545); }
+.accordion-phase-busy { color: var(--theme-color-status-success, #28a745); }
 .accordion-phase-busy .phase-spinner {
 	display: inline-block; width: 14px; height: 14px;
-	border: 2px solid #28a745; border-top-color: transparent; border-radius: 50%;
+	border: 2px solid var(--theme-color-status-success, #28a745); border-top-color: transparent; border-radius: 50%;
 	animation: phase-spin 0.8s linear infinite; vertical-align: middle;
 }
 @keyframes phase-spin {
@@ -160,30 +129,30 @@ h2 { margin-bottom: 12px; color: #444; font-size: 1.2em; border-bottom: 2px soli
 }
 .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;
+	border: 1px solid var(--theme-color-border-default, #ccc); border-radius: 4px; color: var(--theme-color-text-secondary, #666); cursor: pointer; margin: 0;
 }
-.accordion-controls button:hover { background: #f0f0f0; border-color: #aaa; color: #333; }
+.accordion-controls button:hover { background: var(--theme-color-background-tertiary, #f0f0f0); border-color: var(--theme-color-text-muted, #aaa); color: var(--theme-color-text-primary, #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;
+	width: 100%; padding: 8px 12px; border: 1px solid var(--theme-color-border-default, #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;
+	outline: none; border-color: var(--theme-color-brand-primary, #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.primary { background: var(--theme-color-brand-primary, #4a90d9); color: var(--theme-color-background-panel, #fff); }
+button.primary:hover { background: var(--theme-color-brand-primary-hover, #357abd); }
+button.secondary { background: var(--theme-color-text-secondary, #6c757d); color: var(--theme-color-background-panel, #fff); }
 button.secondary:hover { background: #5a6268; }
-button.danger { background: #dc3545; color: #fff; }
+button.danger { background: var(--theme-color-status-error, #dc3545); color: var(--theme-color-background-panel, #fff); }
 button.danger:hover { background: #c82333; }
-button.success { background: #28a745; color: #fff; }
+button.success { background: var(--theme-color-status-success, #28a745); color: var(--theme-color-background-panel, #fff); }
 button.success:hover { background: #218838; }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 
@@ -196,9 +165,9 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .inline-group { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
 .inline-group > div { flex: 1; }
 
-a { color: #4a90d9; }
+a { color: var(--theme-color-brand-primary, #4a90d9); }
 
-select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; }
+select { background: var(--theme-color-background-panel, #fff); width: 100%; padding: 8px 12px; border: 1px solid var(--theme-color-border-default, #ccc); border-radius: 4px; font-size: 0.95em; margin-bottom: 10px; }
 
 .checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
 .checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
@@ -206,53 +175,53 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 
 /* Live Status Bar */
 .live-status-bar {
-	background: #fff; border-radius: 8px; margin-bottom: 16px;
+	background: var(--theme-color-background-panel, #fff); border-radius: 8px; margin-bottom: 16px;
 	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-	position: sticky; top: 0; z-index: 100; border-left: 4px solid #6c757d;
+	position: sticky; top: 0; z-index: 100; border-left: 4px solid var(--theme-color-text-secondary, #6c757d);
 }
-.live-status-bar.phase-idle { border-left-color: #6c757d; }
-.live-status-bar.phase-disconnected { border-left-color: #dc3545; }
-.live-status-bar.phase-ready { border-left-color: #4a90d9; }
-.live-status-bar.phase-loading { border-left-color: #28a745; }
-.live-status-bar.phase-stopping { border-left-color: #ffc107; }
-.live-status-bar.phase-complete { border-left-color: #28a745; }
+.live-status-bar.phase-idle { border-left-color: var(--theme-color-text-secondary, #6c757d); }
+.live-status-bar.phase-disconnected { border-left-color: var(--theme-color-status-error, #dc3545); }
+.live-status-bar.phase-ready { border-left-color: var(--theme-color-brand-primary, #4a90d9); }
+.live-status-bar.phase-loading { border-left-color: var(--theme-color-status-success, #28a745); }
+.live-status-bar.phase-stopping { border-left-color: var(--theme-color-status-warning, #ffc107); }
+.live-status-bar.phase-complete { border-left-color: var(--theme-color-status-success, #28a745); }
 
 .live-status-dot {
 	width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
-	background: #6c757d;
+	background: var(--theme-color-text-secondary, #6c757d);
 }
-.live-status-bar.phase-idle .live-status-dot { background: #6c757d; }
-.live-status-bar.phase-disconnected .live-status-dot { background: #dc3545; }
-.live-status-bar.phase-ready .live-status-dot { background: #4a90d9; }
+.live-status-bar.phase-idle .live-status-dot { background: var(--theme-color-text-secondary, #6c757d); }
+.live-status-bar.phase-disconnected .live-status-dot { background: var(--theme-color-status-error, #dc3545); }
+.live-status-bar.phase-ready .live-status-dot { background: var(--theme-color-brand-primary, #4a90d9); }
 .live-status-bar.phase-loading .live-status-dot {
-	background: #28a745;
+	background: var(--theme-color-status-success, #28a745);
 	animation: live-pulse 1.5s ease-in-out infinite;
 }
 .live-status-bar.phase-stopping .live-status-dot {
-	background: #ffc107;
+	background: var(--theme-color-status-warning, #ffc107);
 	animation: live-pulse 0.8s ease-in-out infinite;
 }
-.live-status-bar.phase-complete .live-status-dot { background: #28a745; }
+.live-status-bar.phase-complete .live-status-dot { background: var(--theme-color-status-success, #28a745); }
 
 @keyframes live-pulse {
 	0%, 100% { opacity: 1; transform: scale(1); }
 	50% { opacity: 0.4; transform: scale(0.8); }
 }
 
-.live-status-message { flex: 1; font-size: 0.92em; color: #333; line-height: 1.4; }
+.live-status-message { flex: 1; font-size: 0.92em; color: var(--theme-color-text-primary, #333); line-height: 1.4; }
 
 .live-status-meta {
-	display: flex; gap: 16px; flex-shrink: 0; font-size: 0.82em; color: #666;
+	display: flex; gap: 16px; flex-shrink: 0; font-size: 0.82em; color: var(--theme-color-text-secondary, #666);
 }
 .live-status-meta-item { white-space: nowrap; }
-.live-status-meta-item strong { color: #333; }
+.live-status-meta-item strong { color: var(--theme-color-text-primary, #333); }
 
 .live-status-progress-bar {
-	height: 3px; background: #e9ecef; border-radius: 2px; overflow: hidden;
+	height: 3px; background: var(--theme-color-background-tertiary, #e9ecef); border-radius: 2px; overflow: hidden;
 	position: absolute; bottom: 0; left: 0; right: 0;
 }
 .live-status-progress-fill {
-	height: 100%; background: #28a745; transition: width 1s ease;
+	height: 100%; background: var(--theme-color-status-success, #28a745); transition: width 1s ease;
 }
 /* Expandable status bar */
 .live-status-header {
@@ -260,11 +229,11 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 	padding: 14px 20px; user-select: none;
 }
 .live-status-bar.expanded .live-status-header {
-	border-bottom: 1px solid #e9ecef; padding-bottom: 10px;
+	border-bottom: 1px solid var(--theme-color-background-tertiary, #e9ecef); padding-bottom: 10px;
 }
 .live-status-expand-toggle {
 	flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
-	font-size: 0.7em; color: #888; transition: transform 0.25s;
+	font-size: 0.7em; color: var(--theme-color-text-muted, #888); transition: transform 0.25s;
 }
 .live-status-bar.expanded .live-status-expand-toggle { transform: rotate(180deg); }
 
@@ -276,9 +245,9 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 .status-detail-section { margin-bottom: 14px; }
 .status-detail-section:last-child { margin-bottom: 0; }
 .status-detail-section-title {
-	font-size: 0.85em; font-weight: 600; color: #555; text-transform: uppercase;
+	font-size: 0.85em; font-weight: 600; color: var(--theme-color-text-secondary, #555); text-transform: uppercase;
 	letter-spacing: 0.5px; margin-bottom: 8px; padding-bottom: 4px;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid var(--theme-color-border-light, #eee);
 }
 
 /* Running Operations */
@@ -288,30 +257,30 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 }
 .running-op-name { font-weight: 600; min-width: 180px; }
 .running-op-bar {
-	flex: 1; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden;
+	flex: 1; height: 8px; background: var(--theme-color-background-tertiary, #e9ecef); border-radius: 4px; overflow: hidden;
 	min-width: 120px;
 }
-.running-op-bar-fill { height: 100%; background: #4a90d9; transition: width 0.5s ease; }
-.running-op-count { font-size: 0.85em; color: #666; white-space: nowrap; }
-.running-op-pending { color: #888; font-size: 0.85em; font-style: italic; padding: 4px 0; }
+.running-op-bar-fill { height: 100%; background: var(--theme-color-brand-primary, #4a90d9); transition: width 0.5s ease; }
+.running-op-count { font-size: 0.85em; color: var(--theme-color-text-secondary, #666); white-space: nowrap; }
+.running-op-pending { color: var(--theme-color-text-muted, #888); font-size: 0.85em; font-style: italic; padding: 4px 0; }
 
 /* Completed Operations */
-.completed-op-row { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
+.completed-op-row { padding: 8px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); }
 .completed-op-row:last-child { border-bottom: none; }
 .completed-op-header {
 	display: flex; align-items: center; gap: 10px; font-size: 0.9em; margin-bottom: 4px;
 }
 .completed-op-name { font-weight: 600; }
-.completed-op-stats { color: #666; font-size: 0.85em; }
-.completed-op-checkmark { color: #28a745; }
+.completed-op-stats { color: var(--theme-color-text-secondary, #666); font-size: 0.85em; }
+.completed-op-checkmark { color: var(--theme-color-status-success, #28a745); }
 
 /* Error Operations */
-.error-op-row { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9em; }
+.error-op-row { padding: 6px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); font-size: 0.9em; }
 .error-op-row:last-child { border-bottom: none; }
 .error-op-header { display: flex; align-items: center; gap: 8px; }
-.error-op-name { font-weight: 600; color: #dc3545; }
-.error-op-status { font-size: 0.82em; color: #dc3545; }
-.error-op-message { font-size: 0.82em; color: #888; margin-top: 2px; padding-left: 18px; }
+.error-op-name { font-weight: 600; color: var(--theme-color-status-error, #dc3545); }
+.error-op-status { font-size: 0.82em; color: var(--theme-color-status-error, #dc3545); }
+.error-op-message { font-size: 0.82em; color: var(--theme-color-text-muted, #888); margin-top: 2px; padding-left: 18px; }
 `,
 	Templates:
 	[
@@ -320,21 +289,6 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 			Template: /*html*/`
 <h1>Retold Comprehension Loader</h1>
 
-<!-- Live Status Bar (Expandable) -->
-<div id="liveStatusBar" class="live-status-bar phase-idle" style="position:relative">
-	<div class="live-status-header" onclick="pict.views['ComprehensionLoader-Layout'].toggleStatusDetail()">
-		<div class="live-status-dot"></div>
-		<div class="live-status-message" id="liveStatusMessage">Idle</div>
-		<div class="live-status-meta" id="liveStatusMeta"></div>
-		<div class="live-status-expand-toggle" id="liveStatusToggle">&#9660;</div>
-	</div>
-	<div class="live-status-detail" id="liveStatusDetail" style="display:none">
-		<div id="ComprehensionLoader-Throughput-Histogram"></div>
-		<div id="ComprehensionLoader-StatusDetail-Container"></div>
-	</div>
-	<div class="live-status-progress-bar"><div class="live-status-progress-fill" id="liveStatusProgressFill" style="width:0%"></div></div>
-</div>
-
 <!-- Expand / Collapse All -->
 <div class="accordion-controls">
 	<button onclick="pict.views['ComprehensionLoader-Layout'].expandAllSections()">Expand All</button>
@@ -354,7 +308,7 @@ select { background: #fff; width: 100%; padding: 8px 12px; border: 1px solid #cc
 		{
 			RenderableHash: 'ComprehensionLoader-Layout',
 			TemplateHash: 'ComprehensionLoader-Layout',
-			DestinationAddress: '#ComprehensionLoader-Application-Container'
+			DestinationAddress: '#ComprehensionLoader-Workspace'
 		}
 	]
 };

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Load.js

@@ -138,7 +138,7 @@ class ComprehensionLoaderLoadView extends libPictView
 
 		let tmpCardsContainer = document.getElementById('reportSummaryCards');
 		let tmpOutcomeClass = 'outcome-' + pReport.Outcome.toLowerCase();
-		let tmpOutcomeColor = { Success: '#28a745', Partial: '#ffc107', Error: '#dc3545', Stopped: '#6c757d' }[pReport.Outcome] || '#666';
+		let tmpOutcomeColor = { Success: 'var(--theme-color-status-success, #28a745)', Partial: 'var(--theme-color-status-warning, #ffc107)', Error: 'var(--theme-color-status-error, #dc3545)', Stopped: 'var(--theme-color-text-secondary, #6c757d)' }[pReport.Outcome] || 'var(--theme-color-text-secondary, #666)';
 
 		let tmpDurationSec = pReport.RunTimestamps.DurationSeconds || 0;
 		let tmpDurationStr = tmpDurationSec < 60 ? tmpDurationSec + 's' : Math.floor(tmpDurationSec / 60) + 'm ' + (tmpDurationSec % 60) + 's';
@@ -162,24 +162,24 @@ class ComprehensionLoaderLoadView extends libPictView
 			+ '<div class="report-card">'
 			+ '  <div class="card-label">Records Pushed</div>'
 			+ '  <div class="card-value">' + tmpTotalPushed + '</div>'
-			+ '  <div style="font-size:0.75em; color:#888">of ' + tmpTotalRecords + '</div>'
+			+ '  <div style="font-size:0.75em; color:var(--theme-color-text-muted, #888)">of ' + tmpTotalRecords + '</div>'
 			+ '</div>';
 
 		// Anomalies
 		let tmpAnomalyContainer = document.getElementById('reportAnomalies');
 		if (pReport.Anomalies.length === 0)
 		{
-			tmpAnomalyContainer.innerHTML = '<div style="color:#28a745; font-weight:600; font-size:0.9em">No anomalies detected.</div>';
+			tmpAnomalyContainer.innerHTML = '<div style="color:var(--theme-color-status-success, #28a745); font-weight:600; font-size:0.9em">No anomalies detected.</div>';
 		}
 		else
 		{
-			let tmpHtml = '<h4 style="margin:0 0 8px; color:#dc3545; font-size:0.95em">Anomalies (' + pReport.Anomalies.length + ')</h4>';
+			let tmpHtml = '<h4 style="margin:0 0 8px; color:var(--theme-color-status-error, #dc3545); font-size:0.95em">Anomalies (' + pReport.Anomalies.length + ')</h4>';
 			tmpHtml += '<table class="progress-table">';
 			tmpHtml += '<tr><th>Entity</th><th>Type</th><th>Message</th></tr>';
 			for (let i = 0; i < pReport.Anomalies.length; i++)
 			{
 				let tmpAnomaly = pReport.Anomalies[i];
-				let tmpTypeColor = tmpAnomaly.Type === 'Error' ? '#dc3545' : '#6c757d';
+				let tmpTypeColor = tmpAnomaly.Type === 'Error' ? 'var(--theme-color-status-error, #dc3545)' : 'var(--theme-color-text-secondary, #6c757d)';
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.ComprehensionLoader.escapeHtml(tmpAnomaly.Entity) + '</strong></td>';
 				tmpHtml += '<td style="color:' + tmpTypeColor + '">' + tmpAnomaly.Type + '</td>';
@@ -194,7 +194,7 @@ class ComprehensionLoaderLoadView extends libPictView
 		let tmpEntityContainer = document.getElementById('reportEntityDetails');
 		if (pReport.Entities && pReport.Entities.length > 0)
 		{
-			let tmpHtml = '<h4 style="margin:0 0 8px; font-size:0.95em; color:#444">Entity Details</h4>';
+			let tmpHtml = '<h4 style="margin:0 0 8px; font-size:0.95em; color:var(--theme-color-text-secondary, #444)">Entity Details</h4>';
 			tmpHtml += '<table class="progress-table">';
 			tmpHtml += '<tr><th>Entity</th><th>Duration</th><th>Records</th><th>Status</th></tr>';
 			for (let i = 0; i < pReport.Entities.length; i++)
@@ -202,7 +202,7 @@ class ComprehensionLoaderLoadView extends libPictView
 				let tmpEntity = pReport.Entities[i];
 				let tmpDur = tmpEntity.DurationSeconds < 60 ? tmpEntity.DurationSeconds + 's' : Math.floor(tmpEntity.DurationSeconds / 60) + 'm ' + (tmpEntity.DurationSeconds % 60) + 's';
 				let tmpRecs = this.pict.providers.ComprehensionLoader.formatNumber(tmpEntity.Pushed);
-				let tmpStatusColor = { Complete: '#28a745', Error: '#dc3545' }[tmpEntity.Status] || '#666';
+				let tmpStatusColor = { Complete: 'var(--theme-color-status-success, #28a745)', Error: 'var(--theme-color-status-error, #dc3545)' }[tmpEntity.Status] || 'var(--theme-color-text-secondary, #666)';
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.ComprehensionLoader.escapeHtml(tmpEntity.Name) + '</strong></td>';
 				tmpHtml += '<td>' + tmpDur + '</td>';
@@ -303,10 +303,10 @@ class ComprehensionLoaderLoadView extends libPictView
 				tmpPct = Math.round((pEntity.Pushed / pEntity.Total) * 100);
 			}
 
-			let tmpBarColor = '#28a745';
-			if (pEntity.Status === 'Error') tmpBarColor = '#dc3545';
-			else if (pEntity.Status === 'Pushing') tmpBarColor = '#4a90d9';
-			else if (pEntity.Status === 'Pending') tmpBarColor = '#adb5bd';
+			let tmpBarColor = 'var(--theme-color-status-success, #28a745)';
+			if (pEntity.Status === 'Error') tmpBarColor = 'var(--theme-color-status-error, #dc3545)';
+			else if (pEntity.Status === 'Pushing') tmpBarColor = 'var(--theme-color-brand-primary, #4a90d9)';
+			else if (pEntity.Status === 'Pending') tmpBarColor = 'var(--theme-color-text-muted, #adb5bd)';
 
 			let tmpRow = '<tr>';
 			tmpRow += '<td><strong>' + pName + '</strong></td>';
@@ -394,25 +394,25 @@ module.exports.default_configuration =
 	DefaultDestinationAddress: '#ComprehensionLoader-Section-Load',
 	CSS: /*css*/`
 .progress-table { width: 100%; border-collapse: collapse; margin-top: 4px; margin-bottom: 4px; }
-.progress-table th, .progress-table td { text-align: left; padding: 6px 12px; border-bottom: 1px solid #eee; font-size: 0.9em; }
-.progress-table th { background: #f8f9fa; font-weight: 600; }
-.progress-table-muted td { color: #888; padding: 3px 12px; font-size: 0.85em; border-bottom: 1px solid #f4f5f6; }
-.progress-bar-container { width: 120px; height: 16px; background: #e9ecef; border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; }
-.progress-bar-fill { height: 100%; background: #28a745; transition: width 0.3s; }
-.sync-section-header { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #4a90d9; padding: 10px 0 2px 0; margin-top: 6px; border-top: 1px solid #e0e0e0; }
+.progress-table th, .progress-table td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--theme-color-border-light, #eee); font-size: 0.9em; }
+.progress-table th { background: var(--theme-color-background-secondary, #f8f9fa); font-weight: 600; }
+.progress-table-muted td { color: var(--theme-color-text-muted, #888); padding: 3px 12px; font-size: 0.85em; border-bottom: 1px solid var(--theme-color-background-secondary, #f4f5f6); }
+.progress-bar-container { width: 120px; height: 16px; background: var(--theme-color-background-tertiary, #e9ecef); border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; }
+.progress-bar-fill { height: 100%; background: var(--theme-color-status-success, #28a745); transition: width 0.3s; }
+.sync-section-header { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-color-brand-primary, #4a90d9); padding: 10px 0 2px 0; margin-top: 6px; border-top: 1px solid var(--theme-color-border-default, #e0e0e0); }
 .sync-section-header:first-child { border-top: none; margin-top: 10px; }
-.sync-section-header-error { color: #dc3545; }
-.sync-section-header-ok { color: #28a745; }
-.sync-section-count { font-weight: 400; color: #999; font-size: 0.95em; }
-.sync-section-overflow { font-size: 0.8em; color: #aaa; padding: 2px 12px 6px; }
-.sync-pending-count { text-align: right; color: #aaa; font-size: 0.85em; }
-.report-card { background: #f8f9fa; border-radius: 8px; padding: 12px 16px; min-width: 140px; text-align: center; border: 1px solid #e9ecef; }
-.report-card .card-label { font-size: 0.8em; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+.sync-section-header-error { color: var(--theme-color-status-error, #dc3545); }
+.sync-section-header-ok { color: var(--theme-color-status-success, #28a745); }
+.sync-section-count { font-weight: 400; color: var(--theme-color-text-muted, #999); font-size: 0.95em; }
+.sync-section-overflow { font-size: 0.8em; color: var(--theme-color-text-muted, #aaa); padding: 2px 12px 6px; }
+.sync-pending-count { text-align: right; color: var(--theme-color-text-muted, #aaa); font-size: 0.85em; }
+.report-card { background: var(--theme-color-background-secondary, #f8f9fa); border-radius: 8px; padding: 12px 16px; min-width: 140px; text-align: center; border: 1px solid var(--theme-color-background-tertiary, #e9ecef); }
+.report-card .card-label { font-size: 0.8em; color: var(--theme-color-text-secondary, #666); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
 .report-card .card-value { font-size: 1.4em; font-weight: 700; }
-.report-card.outcome-success { border-left: 4px solid #28a745; }
-.report-card.outcome-partial { border-left: 4px solid #ffc107; }
-.report-card.outcome-error { border-left: 4px solid #dc3545; }
-.report-card.outcome-stopped { border-left: 4px solid #6c757d; }
+.report-card.outcome-success { border-left: 4px solid var(--theme-color-status-success, #28a745); }
+.report-card.outcome-partial { border-left: 4px solid var(--theme-color-status-warning, #ffc107); }
+.report-card.outcome-error { border-left: 4px solid var(--theme-color-status-error, #dc3545); }
+.report-card.outcome-stopped { border-left: 4px solid var(--theme-color-text-secondary, #6c757d); }
 `,
 	Templates:
 	[
@@ -442,7 +442,7 @@ module.exports.default_configuration =
 			<div id="loadProgress"></div>
 
 			<!-- Load Report (appears after load completes) -->
-			<div id="loadReportSection" style="display:none; margin-top:16px; padding-top:16px; border-top:2px solid #ddd">
+			<div id="loadReportSection" style="display:none; margin-top:16px; padding-top:16px; border-top:2px solid var(--theme-color-border-default, #ddd)">
 				<h3 style="margin:0 0 12px; font-size:1.1em">Load Report</h3>
 
 				<div id="reportSummaryCards" style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px"></div>

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Schema.js

@@ -53,14 +53,14 @@ class ComprehensionLoaderSchemaView extends libPictView
 
 		if (tmpEntities.length === 0)
 		{
-			tmpContainer.innerHTML = '<div style="color:#888; font-size:0.9em">No entities found.</div>';
+			tmpContainer.innerHTML = '<div style="color:var(--theme-color-text-muted, #888); font-size:0.9em">No entities found.</div>';
 			return;
 		}
 
-		let tmpHtml = '<div style="font-size:0.9em; color:#555">';
+		let tmpHtml = '<div style="font-size:0.9em; color:var(--theme-color-text-secondary, #555)">';
 		for (let i = 0; i < tmpEntities.length; i++)
 		{
-			tmpHtml += '<span style="display:inline-block; background:#f0f0f0; border-radius:4px; padding:2px 8px; margin:2px 4px 2px 0; font-size:0.9em">';
+			tmpHtml += '<span style="display:inline-block; background:var(--theme-color-background-tertiary, #f0f0f0); border-radius:4px; padding:2px 8px; margin:2px 4px 2px 0; font-size:0.9em">';
 			tmpHtml += this.pict.providers.ComprehensionLoader.escapeHtml(tmpEntities[i]);
 			tmpHtml += '</span>';
 		}

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Session.js

@@ -215,7 +215,7 @@ module.exports.default_configuration =
 			</div>
 
 			<details style="margin-bottom:10px">
-				<summary style="cursor:pointer; font-size:0.9em; color:#666">Advanced Session Options</summary>
+				<summary style="cursor:pointer; font-size:0.9em; color:var(--theme-color-text-secondary, #666)">Advanced Session Options</summary>
 				<div style="padding:10px 0">
 					<label for="authURI">Authentication URI Template (leave blank for default)</label>
 					<input type="text" id="authURI" placeholder="Authenticate/{~D:Record.UserName~}/{~D:Record.Password~}">
@@ -235,7 +235,7 @@ module.exports.default_configuration =
 			<button class="primary" onclick="pict.views['ComprehensionLoader-Session'].configureSession()">Configure Session</button>
 			<div id="sessionConfigStatus"></div>
 
-			<hr style="margin:16px 0; border:none; border-top:1px solid #eee">
+			<hr style="margin:16px 0; border:none; border-top:1px solid var(--theme-color-border-light, #eee)">
 
 			<div class="inline-group">
 				<div>

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-SettingsPanel.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderSettingsPanelView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+
+		// Re-mount theme controls on every render — the template wipes the destination div.
+		let tmpTheme = this.pict.providers && this.pict.providers['Theme-Section'];
+		if (tmpTheme && typeof tmpTheme.mount === 'function')
+		{
+			tmpTheme.mount({
+				Container: '#ComprehensionLoader-Settings-Theme',
+				Views: ['Picker', 'ModeToggle', 'ScaleSelect']
+			});
+		}
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderSettingsPanelView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-SettingsPanel',
+	DefaultRenderable:         'ComprehensionLoader-SettingsPanel',
+	DefaultDestinationAddress: '#ComprehensionLoader-Settings-Panel',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-settings-body {
+			padding: 12px;
+			display: flex; flex-direction: column; gap: 16px;
+			color: var(--theme-color-text-primary, #333333);
+		}
+		.rds-settings-section { display: flex; flex-direction: column; gap: 6px; }
+		.rds-settings-label {
+			font-size: 0.85em;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--theme-color-text-secondary, #555555);
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-SettingsPanel',
+		Template: /*html*/`
+<div class="rds-settings-body">
+	<div class="rds-settings-section">
+		<div class="rds-settings-label">Appearance</div>
+		<div id="ComprehensionLoader-Settings-Theme"></div>
+	</div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-SettingsPanel',
+		TemplateHash:       'ComprehensionLoader-SettingsPanel',
+		DestinationAddress: '#ComprehensionLoader-Settings-Panel'
+	}]
+};