retold-data-service 2.1.1 → 2.1.5

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-Shell.js

@@ -0,0 +1,136 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerShellView 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('DataCloner-Shell-Mount');
+		if (!tmpModal || typeof tmpModal.shell !== 'function' || !tmpMount)
+		{
+			this.log.warn('DataCloner-Shell: Pict-Section-Modal or mount not available; shell not built.');
+			return;
+		}
+
+		this._shell = tmpModal.shell(tmpMount, { PersistenceKey: 'data-cloner-shell' });
+
+		this._shell.addPanel({
+			Hash: 'topbar', Side: 'top', Mode: 'fixed', Size: 56,
+			ContentDestinationId: 'Theme-TopBar', ContentView: 'Theme-TopBar'
+		});
+
+		this._shell.addPanel({
+			Hash: 'bottombar', Side: 'bottom', Mode: 'fixed', Size: 36,
+			ContentDestinationId: 'Theme-BottomBar', ContentView: 'Theme-BottomBar'
+		});
+
+		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: 'DataCloner-StatusDetail-Panel',
+			ContentView: 'DataCloner-StatusDetail'
+		});
+
+		this._shell.addPanel({
+			Hash: 'settings', Side: 'right', Mode: 'resizable', Position: 'overlay',
+			Size: 360, MinSize: 280, MaxSize: 540,
+			Hidden: true, Collapsed: true, Title: 'Settings',
+			ContentDestinationId: 'DataCloner-Settings-Panel',
+			ContentView: 'DataCloner-SettingsPanel'
+		});
+
+		this._shell.center({ ContentDestinationId: 'DataCloner-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();
+
+		let tmpProvider = this.pict.providers.DataCloner;
+		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['DataCloner-TopBar-Nav'];
+		let tmpUser = this.pict.views['DataCloner-TopBar-User'];
+		if (tmpNav)  { tmpNav.render();  }
+		if (tmpUser) { tmpUser.render(); }
+	}
+}
+
+module.exports = DataClonerShellView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-Shell',
+	DefaultRenderable:         'DataCloner-Shell',
+	DefaultDestinationAddress: '#DataCloner-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);
+		}
+		#DataCloner-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: 'DataCloner-Shell',
+		Template: /*html*/`<div id="DataCloner-Shell-Mount" style="height:100%"></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-Shell',
+		TemplateHash:       'DataCloner-Shell',
+		DestinationAddress: '#DataCloner-Application-Container'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-StatusBar.js

@@ -0,0 +1,117 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerStatusBarView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerStatusBarView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-StatusBar',
+	DefaultRenderable:         'DataCloner-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: 'DataCloner-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['DataCloner-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:     'DataCloner-StatusBar',
+		TemplateHash:       'DataCloner-StatusBar',
+		DestinationAddress: '#Theme-BottomBar-Status'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-StatusDetail.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerStatusDetailView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerStatusDetailView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-StatusDetail',
+	DefaultRenderable:         'DataCloner-StatusDetail',
+	DefaultDestinationAddress: '#DataCloner-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: 'DataCloner-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="DataCloner-Throughput-Histogram" style="height:120px"></div>
+	</div>
+	<div id="DataCloner-StatusDetail-Container"></div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-StatusDetail',
+		TemplateHash:       'DataCloner-StatusDetail',
+		DestinationAddress: '#DataCloner-StatusDetail-Panel'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-Sync.js

@@ -196,7 +196,7 @@ class DataClonerSyncView extends libPictView
 		// --- Summary Cards ---
 		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';
@@ -224,24 +224,24 @@ class DataClonerSyncView extends libPictView
 			+ '<div class="report-card">'
 			+ '  <div class="card-label">Records</div>'
 			+ '  <div class="card-value">' + tmpTotalSynced + '</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>Table</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' : (tmpAnomaly.Type === 'Partial' ? '#ffc107' : '#6c757d');
+				let tmpTypeColor = tmpAnomaly.Type === 'Error' ? 'var(--theme-color-status-error, #dc3545)' : (tmpAnomaly.Type === 'Partial' ? 'var(--theme-color-status-warning, #ffc107)' : 'var(--theme-color-text-secondary, #6c757d)');
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.DataCloner.escapeHtml(tmpAnomaly.Table) + '</strong></td>';
 				tmpHtml += '<td style="color:' + tmpTypeColor + '">' + tmpAnomaly.Type + '</td>';
@@ -257,7 +257,7 @@ class DataClonerSyncView extends libPictView
 		let tmpTopCount = Math.min(10, pReport.Tables.length);
 		if (tmpTopCount > 0)
 		{
-			let tmpHtml = '<h4 style="margin:0 0 8px; font-size:0.95em; color:#444">Top Tables by Duration</h4>';
+			let tmpHtml = '<h4 style="margin:0 0 8px; font-size:0.95em; color:var(--theme-color-text-secondary, #444)">Top Tables by Duration</h4>';
 			tmpHtml += '<table class="progress-table">';
 			tmpHtml += '<tr><th>Table</th><th>Duration</th><th>Records</th><th>Status</th></tr>';
 			for (let i = 0; i < tmpTopCount; i++)
@@ -265,7 +265,7 @@ class DataClonerSyncView extends libPictView
 				let tmpTable = pReport.Tables[i];
 				let tmpDur = tmpTable.DurationSeconds < 60 ? tmpTable.DurationSeconds + 's' : Math.floor(tmpTable.DurationSeconds / 60) + 'm ' + (tmpTable.DurationSeconds % 60) + 's';
 				let tmpRecs = tmpTable.Total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-				let tmpStatusColor = { Complete: '#28a745', Error: '#dc3545', Partial: '#ffc107' }[tmpTable.Status] || '#666';
+				let tmpStatusColor = { Complete: 'var(--theme-color-status-success, #28a745)', Error: 'var(--theme-color-status-error, #dc3545)', Partial: 'var(--theme-color-status-warning, #ffc107)' }[tmpTable.Status] || 'var(--theme-color-text-secondary, #666)';
 				tmpHtml += '<tr>';
 				tmpHtml += '<td><strong>' + this.pict.providers.DataCloner.escapeHtml(tmpTable.Name) + '</strong></td>';
 				tmpHtml += '<td>' + tmpDur + '</td>';
@@ -369,11 +369,11 @@ class DataClonerSyncView extends libPictView
 			}
 
 			// Color the progress bar based on status
-			let tmpBarColor = '#28a745'; // green
-			if (pTable.Status === 'Error') tmpBarColor = '#dc3545';
-			else if (pTable.Status === 'Partial') tmpBarColor = '#ffc107';
-			else if (pTable.Status === 'Syncing') tmpBarColor = '#4a90d9';
-			else if (pTable.Status === 'Pending') tmpBarColor = '#adb5bd';
+			let tmpBarColor = 'var(--theme-color-status-success, #28a745)'; // green
+			if (pTable.Status === 'Error') tmpBarColor = 'var(--theme-color-status-error, #dc3545)';
+			else if (pTable.Status === 'Partial') tmpBarColor = 'var(--theme-color-status-warning, #ffc107)';
+			else if (pTable.Status === 'Syncing') tmpBarColor = 'var(--theme-color-brand-primary, #4a90d9)';
+			else if (pTable.Status === 'Pending') tmpBarColor = 'var(--theme-color-text-muted, #adb5bd)';
 
 			// Status badge
 			let tmpStatusBadge = pTable.Status;
@@ -481,25 +481,25 @@ module.exports.default_configuration =
 	DefaultDestinationAddress: '#DataCloner-Section-Sync',
 	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:
 	[
@@ -534,30 +534,30 @@ module.exports.default_configuration =
 					<button class="danger" style="margin:0" onclick="pict.views['DataCloner-Sync'].stopSync()">Stop Sync</button>
 				</div>
 			</div>
-			<div style="font-size:0.8em; color:#888; margin-bottom:10px; padding-left:158px">Cross-DB tolerance for date comparison (default: 1000ms)</div>
+			<div style="font-size:0.8em; color:var(--theme-color-text-muted, #888); margin-bottom:10px; padding-left:158px">Cross-DB tolerance for date comparison (default: 1000ms)</div>
 
 			<div style="margin-bottom:10px">
 				<label style="margin-bottom:6px">Sync Mode</label>
 				<div style="display:flex; gap:12px 20px; align-items:center; flex-wrap:wrap">
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="syncMode" id="syncModeInitial" value="Initial" checked onchange="pict.views['DataCloner-Sync'].onSyncModeChanged()"> Initial
-						<span style="color:#888; font-size:0.85em">(full clone)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(full clone)</span>
 					</label>
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="syncMode" id="syncModeOngoing" value="Ongoing" onchange="pict.views['DataCloner-Sync'].onSyncModeChanged()"> Ongoing
-						<span style="color:#888; font-size:0.85em">(delta sync)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(delta sync)</span>
 					</label>
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="syncMode" id="syncModeOngoingEventualConsistency" value="OngoingEventualConsistency" onchange="pict.views['DataCloner-Sync'].onSyncModeChanged()"> Eventual
-						<span style="color:#888; font-size:0.85em">(time-budgeted back-sync)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(time-budgeted back-sync)</span>
 					</label>
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="syncMode" id="syncModeTrueUp" value="TrueUp" onchange="pict.views['DataCloner-Sync'].onSyncModeChanged()"> True-Up
-						<span style="color:#888; font-size:0.85em">(linear walk, one-time)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(linear walk, one-time)</span>
 					</label>
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="syncMode" id="syncModeComparisonOnly" value="ComparisonOnly" onchange="pict.views['DataCloner-Sync'].onSyncModeChanged()"> Compare
-						<span style="color:#888; font-size:0.85em">(diff report, no sync)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(diff report, no sync)</span>
 					</label>
 				</div>
 			</div>
@@ -569,7 +569,7 @@ module.exports.default_configuration =
 						<input type="number" id="backSyncTimeLimit" value="30000" min="1000" max="600000" style="margin-bottom:0">
 					</div>
 				</div>
-				<div style="font-size:0.8em; color:#888; padding-left:4px">Milliseconds devoted to backwards bisection per entity before pulling new records (default: 30000)</div>
+				<div style="font-size:0.8em; color:var(--theme-color-text-muted, #888); padding-left:4px">Milliseconds devoted to backwards bisection per entity before pulling new records (default: 30000)</div>
 			</div>
 
 			<div id="syncModeOptions-TrueUp" style="display:none; margin-bottom:10px">
@@ -579,7 +579,7 @@ module.exports.default_configuration =
 						<input type="number" id="trueUpPageSize" value="500" min="10" max="10000" style="margin-bottom:0">
 					</div>
 				</div>
-				<div style="font-size:0.8em; color:#888; padding-left:4px">Records per page for the linear keyset walk (default: 500)</div>
+				<div style="font-size:0.8em; color:var(--theme-color-text-muted, #888); padding-left:4px">Records per page for the linear keyset walk (default: 500)</div>
 			</div>
 
 			<div class="checkbox-row">
@@ -609,7 +609,7 @@ module.exports.default_configuration =
 			<div id="syncProgress"></div>
 
 			<!-- Sync Report (appears after sync completes) -->
-			<div id="syncReportSection" style="display:none; margin-top:16px; padding-top:16px; border-top:2px solid #ddd">
+			<div id="syncReportSection" 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">Sync Report</h3>
 
 				<!-- Summary cards -->

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-TopBar-Nav.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerTopBarNavView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerTopBarNavView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-TopBar-Nav',
+	DefaultRenderable:         'DataCloner-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: 'DataCloner-TopBar-Nav',
+		Template: /*html*/`<div class="rds-nav"><span class="rds-nav-sep">·</span><span class="rds-nav-app">Data Cloner</span></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-TopBar-Nav',
+		TemplateHash:       'DataCloner-TopBar-Nav',
+		DestinationAddress: '#Theme-TopBar-Nav'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-TopBar-User.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class DataClonerTopBarUserView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DataClonerTopBarUserView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'DataCloner-TopBar-User',
+	DefaultRenderable:         'DataCloner-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: 'DataCloner-TopBar-User',
+		Template: /*html*/`<div class="rds-user"><button class="rds-user-btn" onclick="_Pict.views['DataCloner-Shell'].toggleSettingsPanel()" title="Settings" aria-label="Settings">{~I:Settings~}</button></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'DataCloner-TopBar-User',
+		TemplateHash:       'DataCloner-TopBar-User',
+		DestinationAddress: '#Theme-TopBar-User'
+	}]
+};

package/source/services/data-cloner/pict-app/views/PictView-DataCloner-ViewData.js

@@ -81,7 +81,7 @@ class DataClonerViewDataView extends libPictView
 
 		if (!pRows || pRows.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#666; font-size:0.9em; padding:8px">No rows.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-secondary, #666); font-size:0.9em; padding:8px">No rows.</p>';
 			return;
 		}
 
@@ -123,10 +123,10 @@ module.exports.default_configuration =
 	DefaultDestinationAddress: '#DataCloner-Section-ViewData',
 	CSS: /*css*/`
 .data-table { width: 100%; border-collapse: collapse; font-size: 0.8em; font-family: monospace; }
-.data-table th { background: #f8f9fa; font-weight: 600; text-align: left; padding: 4px 8px; border: 1px solid #ddd; white-space: nowrap; position: sticky; top: 0; }
-.data-table td { padding: 4px 8px; border: 1px solid #eee; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
-.data-table tr:nth-child(even) { background: #fafafa; }
-.data-table tr:hover { background: #f0f7ff; }
+.data-table th { background: var(--theme-color-background-secondary, #f8f9fa); font-weight: 600; text-align: left; padding: 4px 8px; border: 1px solid var(--theme-color-border-default, #ddd); white-space: nowrap; position: sticky; top: 0; }
+.data-table td { padding: 4px 8px; border: 1px solid var(--theme-color-border-light, #eee); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
+.data-table tr:nth-child(even) { background: var(--theme-color-background-secondary, #fafafa); }
+.data-table tr:hover { background: var(--theme-color-background-hover, #f0f7ff); }
 `,
 	Templates:
 	[