retold-data-service 2.1.2 → 2.1.5

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';
@@ -173,13 +173,13 @@ class ComprehensionLoaderLoadView extends libPictView
 		}
 		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>';
@@ -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>';
@@ -395,24 +395,24 @@ module.exports.default_configuration =
 	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 var(--theme-color-border-light, #eee); font-size: 0.9em; }
-.progress-table th { background: #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 #f4f5f6; }
-.progress-bar-container { width: 120px; height: 16px; background: #e9ecef; border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; }
+.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: #4a90d9; padding: 10px 0 2px 0; margin-top: 6px; border-top: 1px solid var(--theme-color-border-default, #e0e0e0); }
+.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-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: #f8f9fa; border-radius: 8px; padding: 12px 16px; min-width: 140px; text-align: center; border: 1px solid #e9ecef; }
+.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 var(--theme-color-status-success, #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-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:
 	[

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'
+	}]
+};

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

@@ -0,0 +1,142 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderShellView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this._shellPanelsBuilt = false;
+	}
+
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		if (!this._shellPanelsBuilt)
+		{
+			this._buildShell();
+			this._shellPanelsBuilt = true;
+		}
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+
+	_buildShell()
+	{
+		let tmpModal = this.pict.views['Pict-Section-Modal'];
+		let tmpMount = document.getElementById('ComprehensionLoader-Shell-Mount');
+		if (!tmpModal || typeof tmpModal.shell !== 'function' || !tmpMount)
+		{
+			this.log.warn('ComprehensionLoader-Shell: Pict-Section-Modal or mount not available; shell not built.');
+			return;
+		}
+
+		this._shell = tmpModal.shell(tmpMount, { PersistenceKey: 'comprehension-loader-shell' });
+
+		// Top — Theme-TopBar (BrandMark + Nav + User slots)
+		this._shell.addPanel({
+			Hash: 'topbar', Side: 'top', Mode: 'fixed', Size: 56,
+			ContentDestinationId: 'Theme-TopBar', ContentView: 'Theme-TopBar'
+		});
+
+		// Bottom — Theme-BottomBar (StatusView slot)
+		this._shell.addPanel({
+			Hash: 'bottombar', Side: 'bottom', Mode: 'fixed', Size: 36,
+			ContentDestinationId: 'Theme-BottomBar', ContentView: 'Theme-BottomBar'
+		});
+
+		// Bottom (hidden overlay) — status detail expansion
+		this._shell.addPanel({
+			Hash: 'status-detail', Side: 'bottom', Mode: 'resizable', Position: 'overlay',
+			Size: 320, MinSize: 200, MaxSize: 480,
+			Hidden: true, Collapsed: true, Title: 'Status Detail',
+			ContentDestinationId: 'ComprehensionLoader-StatusDetail-Panel',
+			ContentView: 'ComprehensionLoader-StatusDetail'
+		});
+
+		// Right (hidden overlay) — settings
+		this._shell.addPanel({
+			Hash: 'settings', Side: 'right', Mode: 'resizable', Position: 'overlay',
+			Size: 360, MinSize: 280, MaxSize: 540,
+			Hidden: true, Collapsed: true, Title: 'Settings',
+			ContentDestinationId: 'ComprehensionLoader-Settings-Panel',
+			ContentView: 'ComprehensionLoader-SettingsPanel'
+		});
+
+		// Center — the workspace (existing Layout renders here)
+		this._shell.center({ ContentDestinationId: 'ComprehensionLoader-Workspace' });
+	}
+
+	getSettingsPanel()     { return this._shell ? this._shell.getPanel('settings')      : null; }
+	getStatusDetailPanel() { return this._shell ? this._shell.getPanel('status-detail') : null; }
+
+	toggleSettingsPanel()
+	{
+		let tmpPanel = this.getSettingsPanel();
+		if (tmpPanel) { tmpPanel.toggle(); }
+	}
+
+	toggleStatusDetail()
+	{
+		let tmpPanel = this.getStatusDetailPanel();
+		if (!tmpPanel) { return; }
+		tmpPanel.toggle();
+
+		// Notify the provider so it can start/stop the higher-frequency detail poll.
+		let tmpProvider = this.pict.providers.ComprehensionLoader;
+		let tmpOpen = !tmpPanel.Collapsed;
+		if (tmpProvider && tmpOpen && typeof tmpProvider.onStatusDetailExpanded === 'function')
+		{
+			tmpProvider.onStatusDetailExpanded();
+		}
+		else if (tmpProvider && !tmpOpen && typeof tmpProvider.onStatusDetailCollapsed === 'function')
+		{
+			tmpProvider.onStatusDetailCollapsed();
+		}
+	}
+
+	renderTopBar()
+	{
+		let tmpNav  = this.pict.views['ComprehensionLoader-TopBar-Nav'];
+		let tmpUser = this.pict.views['ComprehensionLoader-TopBar-User'];
+		if (tmpNav)  { tmpNav.render();  }
+		if (tmpUser) { tmpUser.render(); }
+	}
+}
+
+module.exports = ComprehensionLoaderShellView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-Shell',
+	DefaultRenderable:         'ComprehensionLoader-Shell',
+	DefaultDestinationAddress: '#ComprehensionLoader-Application-Container',
+	AutoRender:                false,
+	CSS: /*css*/`
+		html, body { height: 100%; margin: 0; padding: 0; }
+		body {
+			background:  var(--theme-color-background-primary,   #f5f5f5);
+			color:       var(--theme-color-text-primary,         #333333);
+			font-family: var(--theme-typography-family-sans,
+				-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
+		}
+		#ComprehensionLoader-Application-Container { height: 100%; min-height: 0; overflow: hidden; }
+		.pict-modal-shell-host    { height: 100%; }
+		.pict-modal-shell         { background: var(--theme-color-background-primary, #f5f5f5); }
+		.pict-modal-shell-panel   { background: var(--theme-color-background-panel,   #ffffff); }
+		.pict-modal-shell-center  {
+			background: var(--theme-color-background-primary, #f5f5f5);
+			overflow: auto;
+			padding: 20px;
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-Shell',
+		Template: /*html*/`<div id="ComprehensionLoader-Shell-Mount" style="height:100%"></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-Shell',
+		TemplateHash:       'ComprehensionLoader-Shell',
+		DestinationAddress: '#ComprehensionLoader-Application-Container'
+	}]
+};

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

@@ -0,0 +1,125 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+/**
+ * StatusBar — renders into Theme-BottomBar's #Theme-BottomBar-Status slot.
+ *
+ * Markup preserves the same element ids (#liveStatusBar, #liveStatusMessage,
+ * #liveStatusMeta, #liveStatusProgressFill) that the provider's existing
+ * renderLiveStatus() poll handler manipulates by id — so the provider's
+ * imperative DOM update flow keeps working untouched.
+ */
+class ComprehensionLoaderStatusBarView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderStatusBarView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-StatusBar',
+	DefaultRenderable:         'ComprehensionLoader-StatusBar',
+	DefaultDestinationAddress: '#Theme-BottomBar-Status',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-status-bar {
+			display: flex; align-items: center; gap: 12px;
+			height: 100%; padding: 0 12px;
+			color: var(--theme-color-text-primary, #333333);
+			font-size: 0.88em;
+			border-top: 1px solid var(--theme-color-border-light, #e9e9e9);
+			border-left: 3px solid var(--theme-color-text-secondary, #6c757d);
+			position: relative;
+		}
+		.rds-status-bar.phase-idle         { border-left-color: var(--theme-color-text-secondary, #6c757d); }
+		.rds-status-bar.phase-disconnected { border-left-color: var(--theme-color-status-error,   #dc3545); }
+		.rds-status-bar.phase-ready        { border-left-color: var(--theme-color-brand-primary,  #4a90d9); }
+		.rds-status-bar.phase-loading      { border-left-color: var(--theme-color-status-success, #28a745); }
+		.rds-status-bar.phase-stopping     { border-left-color: var(--theme-color-status-warning, #ffc107); }
+		.rds-status-bar.phase-complete     { border-left-color: var(--theme-color-status-success, #28a745); }
+
+		.rds-status-dot {
+			width: 10px; height: 10px; border-radius: 50%;
+			flex-shrink: 0;
+			background: var(--theme-color-text-secondary, #6c757d);
+		}
+		.rds-status-bar.phase-idle         .rds-status-dot { background: var(--theme-color-text-secondary, #6c757d); }
+		.rds-status-bar.phase-disconnected .rds-status-dot { background: var(--theme-color-status-error,   #dc3545); }
+		.rds-status-bar.phase-ready        .rds-status-dot { background: var(--theme-color-brand-primary,  #4a90d9); }
+		.rds-status-bar.phase-loading      .rds-status-dot {
+			background: var(--theme-color-status-success, #28a745);
+			animation: rds-status-pulse 1.5s ease-in-out infinite;
+		}
+		.rds-status-bar.phase-stopping     .rds-status-dot {
+			background: var(--theme-color-status-warning, #ffc107);
+			animation: rds-status-pulse 0.8s ease-in-out infinite;
+		}
+		.rds-status-bar.phase-complete     .rds-status-dot { background: var(--theme-color-status-success, #28a745); }
+
+		@keyframes rds-status-pulse {
+			0%, 100% { opacity: 1; transform: scale(1); }
+			50%      { opacity: 0.4; transform: scale(0.8); }
+		}
+
+		.rds-status-message { flex: 1; line-height: 1.2; }
+		.rds-status-meta {
+			display: flex; gap: 12px; flex-shrink: 0;
+			font-size: 0.92em; color: var(--theme-color-text-secondary, #666);
+		}
+		.rds-status-meta .live-status-meta-item { white-space: nowrap; }
+		.rds-status-meta .live-status-meta-item strong { color: var(--theme-color-text-primary, #333); }
+
+		.rds-status-detail-btn {
+			padding: 2px 8px;
+			background: transparent;
+			border: 1px solid var(--theme-color-border-default, #ccc);
+			border-radius: 3px;
+			color: var(--theme-color-text-secondary, #666);
+			cursor: pointer;
+			font-size: 0.92em;
+			line-height: 1;
+		}
+		.rds-status-detail-btn:hover {
+			background: var(--theme-color-background-hover, #f0f0f0);
+			color: var(--theme-color-text-primary, #333);
+		}
+
+		.rds-status-progress-bar {
+			position: absolute; left: 0; right: 0; bottom: 0;
+			height: 2px;
+			background: var(--theme-color-background-tertiary, #e9ecef);
+			overflow: hidden;
+		}
+		.rds-status-progress-fill {
+			height: 100%;
+			background: var(--theme-color-status-success, #28a745);
+			transition: width 1s ease;
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-StatusBar',
+		Template: /*html*/`
+<div id="liveStatusBar" class="rds-status-bar phase-idle">
+	<div class="rds-status-dot live-status-dot"></div>
+	<div id="liveStatusMessage" class="rds-status-message live-status-message">Idle</div>
+	<div id="liveStatusMeta" class="rds-status-meta live-status-meta"></div>
+	<button class="rds-status-detail-btn"
+		onclick="_Pict.views['ComprehensionLoader-Shell'].toggleStatusDetail()"
+		title="Show detail">Detail</button>
+	<div class="rds-status-progress-bar live-status-progress-bar">
+		<div id="liveStatusProgressFill" class="rds-status-progress-fill live-status-progress-fill" style="width:0%"></div>
+	</div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-StatusBar',
+		TemplateHash:       'ComprehensionLoader-StatusBar',
+		DestinationAddress: '#Theme-BottomBar-Status'
+	}]
+};

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

@@ -0,0 +1,89 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+/**
+ * StatusDetail — content for the expandable bottom overlay panel.
+ *
+ * Renders the throughput histogram slot and the running-ops / completed-ops /
+ * errors detail container, both of which the existing provider populates by
+ * direct DOM manipulation. The element ids (#X-Throughput-Histogram,
+ * #X-StatusDetail-Container) are preserved so the provider keeps working.
+ */
+class ComprehensionLoaderStatusDetailView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderStatusDetailView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-StatusDetail',
+	DefaultRenderable:         'ComprehensionLoader-StatusDetail',
+	DefaultDestinationAddress: '#ComprehensionLoader-StatusDetail-Panel',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-status-detail-body {
+			padding: 12px 20px 16px;
+			max-height: 100%;
+			overflow-y: auto;
+			color: var(--theme-color-text-primary, #333);
+		}
+		.rds-status-detail-section { margin-bottom: 14px; }
+		.rds-status-detail-section:last-child { margin-bottom: 0; }
+		.rds-status-detail-section-title {
+			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 var(--theme-color-border-light, #eee);
+		}
+		.running-op-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.9em; }
+		.running-op-name { font-weight: 600; min-width: 180px; }
+		.running-op-bar {
+			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: 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-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: var(--theme-color-text-secondary, #666); font-size: 0.85em; }
+		.completed-op-checkmark { color: var(--theme-color-status-success, #28a745); }
+		.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: 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: [{
+		Hash: 'ComprehensionLoader-StatusDetail',
+		Template: /*html*/`
+<div class="rds-status-detail-body">
+	<div class="rds-status-detail-section">
+		<div class="rds-status-detail-section-title">Throughput</div>
+		<div id="ComprehensionLoader-Throughput-Histogram" style="height:120px"></div>
+	</div>
+	<div id="ComprehensionLoader-StatusDetail-Container"></div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-StatusDetail',
+		TemplateHash:       'ComprehensionLoader-StatusDetail',
+		DestinationAddress: '#ComprehensionLoader-StatusDetail-Panel'
+	}]
+};

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

@@ -0,0 +1,42 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderTopBarNavView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderTopBarNavView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-TopBar-Nav',
+	DefaultRenderable:         'ComprehensionLoader-TopBar-Nav',
+	DefaultDestinationAddress: '#Theme-TopBar-Nav',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-nav {
+			display: flex; align-items: center; height: 100%;
+			padding: 0 12px; gap: 8px;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-primary, #1a1a1a));
+			font-weight: 500;
+		}
+		.rds-nav-sep { opacity: 0.5; font-weight: 400; margin: 0 2px; }
+		.rds-nav-app { font-weight: 600; opacity: 0.95; }
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-TopBar-Nav',
+		Template: /*html*/`<div class="rds-nav"><span class="rds-nav-sep">·</span><span class="rds-nav-app">Comprehension Loader</span></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-TopBar-Nav',
+		TemplateHash:       'ComprehensionLoader-TopBar-Nav',
+		DestinationAddress: '#Theme-TopBar-Nav'
+	}]
+};

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

@@ -0,0 +1,48 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderTopBarUserView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderTopBarUserView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-TopBar-User',
+	DefaultRenderable:         'ComprehensionLoader-TopBar-User',
+	DefaultDestinationAddress: '#Theme-TopBar-User',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-user { display: flex; align-items: center; height: 100%; gap: 8px; padding: 0 12px; }
+		.rds-user-btn {
+			padding: 4px 8px;
+			border: 1px solid var(--theme-color-border-default, #5E5549);
+			background: transparent;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-secondary, #1a1a1a));
+			border-radius: 4px;
+			cursor: pointer;
+			display: inline-flex; align-items: center; justify-content: center;
+			font-size: 1em; line-height: 1;
+		}
+		.rds-user-btn:hover {
+			background: var(--theme-color-background-hover, rgba(255,255,255,0.08));
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-TopBar-User',
+		Template: /*html*/`<div class="rds-user"><button class="rds-user-btn" onclick="_Pict.views['ComprehensionLoader-Shell'].toggleSettingsPanel()" title="Settings" aria-label="Settings">{~I:Settings~}</button></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-TopBar-User',
+		TemplateHash:       'ComprehensionLoader-TopBar-User',
+		DestinationAddress: '#Theme-TopBar-User'
+	}]
+};