retold-data-service 2.1.1 → 2.1.5

package/source/services/data-cloner/DataCloner-Command-Headless.js

@@ -253,7 +253,8 @@ module.exports = (pDataClonerService, pConfig, pCLIOptions, fCallback) =>
 				MaxRecordsPerEntity: tmpMaxRecords || tmpSync.MaxRecordsPerEntity || 0,
 				DateTimePrecisionMS: tmpSync.DateTimePrecisionMS,
 				BackSyncTimeLimit: tmpSync.BackSyncTimeLimit,
-				TrueUpPageSize: tmpSync.TrueUpPageSize
+				TrueUpPageSize: tmpSync.TrueUpPageSize,
+				SyncEntityOptions: tmpSync.SyncEntityOptions
 			});
 
 		tmpFable.log.info(`Headless: Starting ${tmpSyncBody.SyncMode} sync...`);

package/source/services/data-cloner/DataCloner-Command-Sync.js

@@ -10,6 +10,109 @@
 const libFableLog = require('fable-log');
 const libPath = require('path');
 
+// Runtime-overridable sync properties for the /clone/sync/start route.
+// Each entry is a coerce function returning the value to apply, or null
+// if the input is invalid. Drives both the top-level body overrides and
+// the per-entity `SyncEntityOptions` overrides — adding a new knob is a
+// one-line change here.
+const _RuntimeSyncProperties = {
+	BackSyncTimeLimit:       (pVal) => { let tmpN = parseInt(pVal, 10); return (!isNaN(tmpN) && tmpN > 0) ? tmpN : null; },
+	MaxRecordsPerEntity:     (pVal) => { let tmpN = parseInt(pVal, 10); return (!isNaN(tmpN) && tmpN > 0) ? tmpN : null; },
+	DateTimePrecisionMS:     (pVal) => { let tmpN = parseInt(pVal, 10); return !isNaN(tmpN)               ? tmpN : null; },
+	TrueUpPageSize:          (pVal) => { let tmpN = parseInt(pVal, 10); return (!isNaN(tmpN) && tmpN > 0) ? tmpN : null; },
+	UseAdvancedIDPagination: (pVal) => !!pVal,
+	SyncDeletedRecords:      (pVal) => !!pVal
+};
+
+/**
+ * Apply runtime sync overrides from a request body to a live MeadowSync.
+ *
+ * Mutates `pMeadowSync.MeadowSyncEntities[*]` properties, plus mirrors the
+ * "base" globals onto the MeadowSync orchestrator and `cloneState.SyncDeletedRecords`.
+ * Top-level body keys form the base config; per-entity overrides under
+ * `pBody.SyncEntityOptions[<TableName>]` are layered on top (per-entity wins).
+ *
+ * Only properties listed in `_RuntimeSyncProperties` are honored; unknown keys
+ * and invalid values are silently ignored. Unknown entity names produce a warn.
+ *
+ * @param {Object} pBody - Request body (or any plain object with the same shape).
+ * @param {Object} pMeadowSync - MeadowSync orchestrator instance with `MeadowSyncEntities`.
+ * @param {Object} pCloneState - Clone-state object whose `SyncDeletedRecords` mirrors the base.
+ * @param {Object} pLog - Logger with `info(msg)` and `warn(msg)`.
+ */
+const applyRuntimeSyncOverrides = (pBody, pMeadowSync, pCloneState, pLog) =>
+{
+	// Compute the base runtime config from top-level body keys.
+	let tmpBase = {};
+	let tmpBaseSchemaKeys = Object.keys(_RuntimeSyncProperties);
+	for (let i = 0; i < tmpBaseSchemaKeys.length; i++)
+	{
+		let tmpKey = tmpBaseSchemaKeys[i];
+		if (!pBody.hasOwnProperty(tmpKey)) continue;
+		let tmpCoerced = _RuntimeSyncProperties[tmpKey](pBody[tmpKey]);
+		if (tmpCoerced === null) continue;
+		tmpBase[tmpKey] = tmpCoerced;
+	}
+
+	let tmpPerEntity = (pBody.SyncEntityOptions && typeof(pBody.SyncEntityOptions) === 'object') ? pBody.SyncEntityOptions : {};
+
+	// Mirror base values onto the MeadowSync orchestrator + cloneState.
+	let tmpBaseKeys = Object.keys(tmpBase);
+	for (let i = 0; i < tmpBaseKeys.length; i++)
+	{
+		if (pMeadowSync.hasOwnProperty(tmpBaseKeys[i]))
+		{
+			pMeadowSync[tmpBaseKeys[i]] = tmpBase[tmpBaseKeys[i]];
+		}
+	}
+	if (tmpBase.hasOwnProperty('SyncDeletedRecords'))
+	{
+		pCloneState.SyncDeletedRecords = tmpBase.SyncDeletedRecords;
+	}
+
+	// Apply base to every entity.
+	let tmpAllEntityNames = Object.keys(pMeadowSync.MeadowSyncEntities || {});
+	for (let i = 0; i < tmpAllEntityNames.length; i++)
+	{
+		let tmpEntity = pMeadowSync.MeadowSyncEntities[tmpAllEntityNames[i]];
+		for (let j = 0; j < tmpBaseKeys.length; j++)
+		{
+			tmpEntity[tmpBaseKeys[j]] = tmpBase[tmpBaseKeys[j]];
+		}
+	}
+
+	// Layer per-entity overrides on top. Log per entity that actually had
+	// overrides applied; warn on unknown entity names.
+	let tmpPerEntityNames = Object.keys(tmpPerEntity);
+	for (let i = 0; i < tmpPerEntityNames.length; i++)
+	{
+		let tmpEntityName = tmpPerEntityNames[i];
+		let tmpEntity = pMeadowSync.MeadowSyncEntities && pMeadowSync.MeadowSyncEntities[tmpEntityName];
+		if (!tmpEntity)
+		{
+			pLog.warn(`SyncEntityOptions: no sync entity ${tmpEntityName} loaded; ignoring overrides for it.`);
+			continue;
+		}
+		let tmpOverrides = tmpPerEntity[tmpEntityName];
+		if (!tmpOverrides || typeof(tmpOverrides) !== 'object') continue;
+		let tmpApplied = [];
+		let tmpOverrideKeys = Object.keys(tmpOverrides);
+		for (let j = 0; j < tmpOverrideKeys.length; j++)
+		{
+			let tmpKey = tmpOverrideKeys[j];
+			if (!_RuntimeSyncProperties.hasOwnProperty(tmpKey)) continue;
+			let tmpCoerced = _RuntimeSyncProperties[tmpKey](tmpOverrides[tmpKey]);
+			if (tmpCoerced === null) continue;
+			tmpEntity[tmpKey] = tmpCoerced;
+			tmpApplied.push(`${tmpKey}=${tmpCoerced}`);
+		}
+		if (tmpApplied.length > 0)
+		{
+			pLog.info(`SyncEntityOptions: ${tmpEntityName} ← ${tmpApplied.join(', ')}`);
+		}
+	}
+};
+
 module.exports = (pDataClonerService, pOratorServiceServer) =>
 {
 	let tmpFable = pDataClonerService.fable;
@@ -43,81 +146,9 @@ module.exports = (pDataClonerService, pOratorServiceServer) =>
 			let tmpRequestedMode = tmpBody.SyncMode || 'Initial';
 			let tmpMaxRecords = parseInt(tmpBody.MaxRecordsPerEntity, 10) || 0;
 
-			// Update SyncDeletedRecords from request if provided
-			if (tmpBody.hasOwnProperty('SyncDeletedRecords'))
-			{
-				tmpCloneState.SyncDeletedRecords = !!tmpBody.SyncDeletedRecords;
-				let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-				for (let i = 0; i < tmpEntityNames.length; i++)
-				{
-					tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].SyncDeletedRecords = tmpCloneState.SyncDeletedRecords;
-				}
-			}
-
-			// Update MaxRecordsPerEntity on sync entities
-			if (tmpMaxRecords > 0)
-			{
-				let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-				for (let i = 0; i < tmpEntityNames.length; i++)
-				{
-					tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].MaxRecordsPerEntity = tmpMaxRecords;
-				}
-			}
-
-			// Update UseAdvancedIDPagination on all sync entities
-			if (tmpBody.hasOwnProperty('UseAdvancedIDPagination'))
-			{
-				let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-				for (let i = 0; i < tmpEntityNames.length; i++)
-				{
-					tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].UseAdvancedIDPagination = !!tmpBody.UseAdvancedIDPagination;
-				}
-			}
-
-			// Update DateTimePrecisionMS on MeadowSync and all sync entities
-			if (tmpBody.hasOwnProperty('DateTimePrecisionMS'))
-			{
-				let tmpPrecision = parseInt(tmpBody.DateTimePrecisionMS, 10);
-				if (!isNaN(tmpPrecision))
-				{
-					tmpFable.MeadowSync.DateTimePrecisionMS = tmpPrecision;
-					let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-					for (let i = 0; i < tmpEntityNames.length; i++)
-					{
-						tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].DateTimePrecisionMS = tmpPrecision;
-					}
-				}
-			}
-
-			// Update BackSyncTimeLimit on MeadowSync and all sync entities
-			if (tmpBody.hasOwnProperty('BackSyncTimeLimit'))
-			{
-				let tmpBackSyncTimeLimit = parseInt(tmpBody.BackSyncTimeLimit, 10);
-				if (!isNaN(tmpBackSyncTimeLimit) && tmpBackSyncTimeLimit > 0)
-				{
-					tmpFable.MeadowSync.BackSyncTimeLimit = tmpBackSyncTimeLimit;
-					let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-					for (let i = 0; i < tmpEntityNames.length; i++)
-					{
-						tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].BackSyncTimeLimit = tmpBackSyncTimeLimit;
-					}
-				}
-			}
-
-			// Update TrueUpPageSize on MeadowSync and all sync entities
-			if (tmpBody.hasOwnProperty('TrueUpPageSize'))
-			{
-				let tmpTrueUpPageSize = parseInt(tmpBody.TrueUpPageSize, 10);
-				if (!isNaN(tmpTrueUpPageSize) && tmpTrueUpPageSize > 0)
-				{
-					tmpFable.MeadowSync.TrueUpPageSize = tmpTrueUpPageSize;
-					let tmpEntityNames = Object.keys(tmpFable.MeadowSync.MeadowSyncEntities);
-					for (let i = 0; i < tmpEntityNames.length; i++)
-					{
-						tmpFable.MeadowSync.MeadowSyncEntities[tmpEntityNames[i]].TrueUpPageSize = tmpTrueUpPageSize;
-					}
-				}
-			}
+			// Apply global + per-entity runtime sync overrides. See
+			// applyRuntimeSyncOverrides() at module scope.
+			applyRuntimeSyncOverrides(tmpBody, tmpFable.MeadowSync, tmpCloneState, tmpFable.log);
 
 			// If no tables specified, sync all entities
 			if (tmpSelectedTables.length === 0)
@@ -579,3 +610,7 @@ module.exports = (pDataClonerService, pOratorServiceServer) =>
 			return fNext();
 		});
 };
+
+// Exposed for unit tests.
+module.exports._RuntimeSyncProperties = _RuntimeSyncProperties;
+module.exports.applyRuntimeSyncOverrides = applyRuntimeSyncOverrides;

package/source/services/data-cloner/pict-app/Pict-Application-DataCloner.js

@@ -2,35 +2,48 @@ const libPictApplication = require('pict-application');
 
 const libProvider = require('./providers/Pict-Provider-DataCloner.js');
 
-const libViewLayout = require('./views/PictView-DataCloner-Layout.js');
+const libViewLayout     = require('./views/PictView-DataCloner-Layout.js');
 const libViewConnection = require('./views/PictView-DataCloner-Connection.js');
-const libViewSession = require('./views/PictView-DataCloner-Session.js');
-const libViewSchema = require('./views/PictView-DataCloner-Schema.js');
-const libViewDeploy = require('./views/PictView-DataCloner-Deploy.js');
-const libViewSync = require('./views/PictView-DataCloner-Sync.js');
-const libViewExport = require('./views/PictView-DataCloner-Export.js');
-const libViewViewData = require('./views/PictView-DataCloner-ViewData.js');
-const libViewHistogram = require('pict-section-histogram');
+const libViewSession    = require('./views/PictView-DataCloner-Session.js');
+const libViewSchema     = require('./views/PictView-DataCloner-Schema.js');
+const libViewDeploy     = require('./views/PictView-DataCloner-Deploy.js');
+const libViewSync       = require('./views/PictView-DataCloner-Sync.js');
+const libViewExport     = require('./views/PictView-DataCloner-Export.js');
+const libViewViewData   = require('./views/PictView-DataCloner-ViewData.js');
+const libViewHistogram  = require('pict-section-histogram');
 const libViewConnectionForm = require('pict-section-connection-form');
 
+const libPictSectionModal = require('pict-section-modal');
+const libPictSectionTheme = require('pict-section-theme');
+const libBrand            = require('../../RetoldDataService-Brand.js');
+
+const libViewShell        = require('./views/PictView-DataCloner-Shell.js');
+const libViewTopBarNav    = require('./views/PictView-DataCloner-TopBar-Nav.js');
+const libViewTopBarUser   = require('./views/PictView-DataCloner-TopBar-User.js');
+const libViewStatusBar    = require('./views/PictView-DataCloner-StatusBar.js');
+const libViewStatusDetail = require('./views/PictView-DataCloner-StatusDetail.js');
+const libViewSettings     = require('./views/PictView-DataCloner-SettingsPanel.js');
+
 class DataClonerApplication extends libPictApplication
 {
 	constructor(pFable, pOptions, pServiceHash)
 	{
 		super(pFable, pOptions, pServiceHash);
 
-		// Register provider
-		this.pict.addProvider('DataCloner', libProvider.default_configuration, libProvider);
+		// 1. Modal section (provides shell + panels + modal API).
+		this.pict.addView('Pict-Section-Modal',
+			libPictSectionModal.default_configuration, libPictSectionModal);
 
-		// Register views
-		this.pict.addView('DataCloner-Layout', libViewLayout.default_configuration, libViewLayout);
+		// 2. Provider + existing section views.
+		this.pict.addProvider('DataCloner', libProvider.default_configuration, libProvider);
+		this.pict.addView('DataCloner-Layout',     libViewLayout.default_configuration,     libViewLayout);
 		this.pict.addView('DataCloner-Connection', libViewConnection.default_configuration, libViewConnection);
-		this.pict.addView('DataCloner-Session', libViewSession.default_configuration, libViewSession);
-		this.pict.addView('DataCloner-Schema', libViewSchema.default_configuration, libViewSchema);
-		this.pict.addView('DataCloner-Deploy', libViewDeploy.default_configuration, libViewDeploy);
-		this.pict.addView('DataCloner-Sync', libViewSync.default_configuration, libViewSync);
-		this.pict.addView('DataCloner-Export', libViewExport.default_configuration, libViewExport);
-		this.pict.addView('DataCloner-ViewData', libViewViewData.default_configuration, libViewViewData);
+		this.pict.addView('DataCloner-Session',    libViewSession.default_configuration,    libViewSession);
+		this.pict.addView('DataCloner-Schema',     libViewSchema.default_configuration,     libViewSchema);
+		this.pict.addView('DataCloner-Deploy',     libViewDeploy.default_configuration,     libViewDeploy);
+		this.pict.addView('DataCloner-Sync',       libViewSync.default_configuration,       libViewSync);
+		this.pict.addView('DataCloner-Export',     libViewExport.default_configuration,     libViewExport);
+		this.pict.addView('DataCloner-ViewData',   libViewViewData.default_configuration,   libViewViewData);
 		this.pict.addView('DataCloner-StatusHistogram',
 			{
 				ViewIdentifier: 'DataCloner-StatusHistogram',
@@ -43,14 +56,12 @@ class DataClonerApplication extends libPictApplication
 				ShowValues: false,
 				ShowLabels: true,
 				MaxBarSize: 80,
-				BarColor: '#4a90d9',
+				BarColor: 'var(--theme-color-brand-primary, #4a90d9)',
 				Bins: []
 			}, libViewHistogram);
 
-		// Shared schema-driven connection form.  Renders into the slot
-		// the DataCloner-Connection accordion shell exposes; the
-		// provider's bootstrapConnectionSchemas() pumps the schemas in
-		// once the host's /clone/connection/schemas endpoint responds.
+		// Shared schema-driven connection form (renders into the
+		// DataCloner-Connection accordion shell's slot).
 		this.pict.addView('PictSection-ConnectionForm',
 			Object.assign({}, libViewConnectionForm.default_configuration,
 				{
@@ -60,21 +71,39 @@ class DataClonerApplication extends libPictApplication
 					ActiveAddress:             'AppData.DataCloner.Connection.ActiveProvider',
 					FieldIDPrefix:             'datacloner-conn'
 				}), libViewConnectionForm);
+
+		// 3. Shell host + slot views + status bar / detail + settings panel.
+		this.pict.addView('DataCloner-Shell',
+			libViewShell.default_configuration, libViewShell);
+		this.pict.addView('DataCloner-TopBar-Nav',
+			libViewTopBarNav.default_configuration, libViewTopBarNav);
+		this.pict.addView('DataCloner-TopBar-User',
+			libViewTopBarUser.default_configuration, libViewTopBarUser);
+		this.pict.addView('DataCloner-StatusBar',
+			libViewStatusBar.default_configuration, libViewStatusBar);
+		this.pict.addView('DataCloner-StatusDetail',
+			libViewStatusDetail.default_configuration, libViewStatusDetail);
+		this.pict.addView('DataCloner-SettingsPanel',
+			libViewSettings.default_configuration, libViewSettings);
+
+		// 4. Theme-Section provider — registered LAST so it can find the slot views.
+		this.pict.addProvider('Theme-Section',
+			{
+				ApplyDefault: 'pict-default',
+				DefaultMode:  'system',
+				DefaultScale: 1.0,
+				Brand:        libBrand,
+				Views: ['Picker', 'ModeToggle', 'ScaleSelect', 'BrandMark', 'TopBar', 'BottomBar'],
+				ViewOptions:
+				{
+					TopBar:    { NavView:    'DataCloner-TopBar-Nav', UserView: 'DataCloner-TopBar-User', Height: 56 },
+					BottomBar: { StatusView: 'DataCloner-StatusBar', Height: 36 }
+				}
+			}, libPictSectionTheme);
 	}
 
 	onAfterInitializeAsync(fCallback)
 	{
-		// Centralized state (replaces global variables).
-		//
-		// PersistFields covers the static, non-connection inputs only.
-		// Connection-section fields (provider picker + per-provider
-		// inputs) are schema-driven now: their DOM ids and
-		// localStorage keys are derived at runtime from the host's
-		// /clone/connection/schemas response and persistence is hooked
-		// up by Pict-Provider-DataCloner#bootstrapConnectionSchemas
-		// after the schema-driven Connection view re-renders.  See
-		// PictView-DataCloner-Connection.js for the field-id
-		// convention.
 		this.pict.AppData.DataCloner =
 		{
 			FetchedTables: [],
@@ -94,9 +123,6 @@ class DataClonerApplication extends libPictApplication
 				'userName', 'password', 'schemaURL', 'pageSize', 'dateTimePrecisionMS',
 				'syncMaxRecords'
 			],
-			// Connection state — populated by bootstrapConnectionSchemas().
-			// Initialized empty here so the Connection view's first
-			// onBeforeRender finds a valid (if empty) shape.
 			Connection:
 			{
 				Schemas:         [],
@@ -108,15 +134,17 @@ class DataClonerApplication extends libPictApplication
 			}
 		};
 
-		// Make pict available for inline onclick handlers
 		window.pict = this.pict;
 
-		// Render layout (which chains child view renders via onAfterRender).
-		// The Connection view renders an empty shell here — the schemas
-		// arrive asynchronously and trigger a re-render once they land.
+		// Render the shell first — creates panel destination divs.
+		this.pict.views['DataCloner-Shell'].render();
+
+		// Render the layout (chains child renders) into #DataCloner-Workspace.
 		this.pict.views['DataCloner-Layout'].render();
 
-		// Post-render initialization for the static (non-connection) UI.
+		// Render the StatusBar into the BottomBar slot.
+		this.pict.views['DataCloner-StatusBar'].render();
+
 		this.pict.providers.DataCloner.initPersistence();
 		this.pict.providers.DataCloner.restoreDeployedTables();
 		this.pict.providers.DataCloner.startLiveStatusPolling();
@@ -125,11 +153,6 @@ class DataClonerApplication extends libPictApplication
 		this.pict.views['DataCloner-Layout'].collapseAllSections();
 		this.pict.providers.DataCloner.initAutoProcess();
 
-		// Async: fetch the host's connection-form schemas and re-render
-		// the Connection section.  bootstrapConnectionSchemas restores
-		// localStorage values + hooks save listeners once the new DOM
-		// is in place, then invokes onProviderChange() to surface the
-		// active provider's form.
 		this.pict.providers.DataCloner.bootstrapConnectionSchemas(function () { /* fire-and-forget */ });
 
 		return fCallback();

package/source/services/data-cloner/pict-app/providers/Pict-Provider-DataCloner.js

@@ -733,7 +733,7 @@ class DataClonerProvider extends libPictProvider
 				tmpHtml += '<tr' + tmpRowClass + '>';
 				tmpHtml += '<td>' + this.escapeHtml(tmpT.Name) + '</td>';
 				tmpHtml += '<td style="text-align:right; font-variant-numeric:tabular-nums">' + tmpCountFmt + '</td>';
-				tmpHtml += '<td style="text-align:right; font-variant-numeric:tabular-nums; color:#888">' + tmpTimeFmt + '</td>';
+				tmpHtml += '<td style="text-align:right; font-variant-numeric:tabular-nums; color:var(--theme-color-text-muted, #888)">' + tmpTimeFmt + '</td>';
 				tmpHtml += '</tr>';
 			}
 			tmpHtml += '</tbody>';
@@ -908,11 +908,11 @@ class DataClonerProvider extends libPictProvider
 		{
 			if (tmpIsLive)
 			{
-				tmpHtml = '<div style="font-size:0.9em; color:#888; padding:8px 0">Sync in progress, waiting for table data\u2026</div>';
+				tmpHtml = '<div style="font-size:0.9em; color:var(--theme-color-text-muted, #888); padding:8px 0">Sync in progress, waiting for table data\u2026</div>';
 			}
 			else
 			{
-				tmpHtml = '<div style="font-size:0.9em; color:#888; padding:8px 0">No sync data available. Run a sync to see operation details here.</div>';
+				tmpHtml = '<div style="font-size:0.9em; color:var(--theme-color-text-muted, #888); padding:8px 0">No sync data available. Run a sync to see operation details here.</div>';
 			}
 		}
 

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

@@ -51,7 +51,7 @@ const _ViewConfiguration =
 			<div class="accordion-toggle">&#9660;</div>
 		</div>
 		<div class="accordion-body">
-			<p style="font-size:0.9em; color:#666; margin-bottom:10px">Configure the local database where cloned data will be stored.  The provider list comes from the host's installed meadow-connection modules.</p>
+			<p style="font-size:0.9em; color:var(--theme-color-text-secondary, #666); margin-bottom:10px">Configure the local database where cloned data will be stored.  The provider list comes from the host's installed meadow-connection modules.</p>
 
 			<div class="inline-group" style="margin-bottom:10px">
 				<div style="flex:1; display:flex; align-items:flex-end; gap:8px; justify-content:flex-end">

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

@@ -62,7 +62,7 @@ class DataClonerDeployView extends libPictView
 	auditGUIDIndices()
 	{
 		let tmpReportEl = document.getElementById('guidIndexReport');
-		if (tmpReportEl) tmpReportEl.innerHTML = '<span style="color:#888">Checking GUID indices...</span>';
+		if (tmpReportEl) tmpReportEl.innerHTML = '<span style="color:var(--theme-color-text-muted, #888)">Checking GUID indices...</span>';
 
 		let tmpSelf = this;
 		this.pict.providers.DataCloner.api('GET', '/clone/schema/guid-index-audit')
@@ -84,7 +84,7 @@ class DataClonerDeployView extends libPictView
 
 				let tmpHTML = '<div style="margin-top:6px"><strong>' + pData.Message + '</strong></div>';
 				tmpHTML += '<table style="font-size:0.85em; margin:6px 0; border-collapse:collapse; width:100%">';
-				tmpHTML += '<tr style="text-align:left; border-bottom:1px solid #ccc"><th style="padding:3px 8px">Table</th><th style="padding:3px 8px">GUID Column</th><th style="padding:3px 8px">Index</th></tr>';
+				tmpHTML += '<tr style="text-align:left; border-bottom:1px solid var(--theme-color-border-default, #ccc)"><th style="padding:3px 8px">Table</th><th style="padding:3px 8px">GUID Column</th><th style="padding:3px 8px">Index</th></tr>';
 
 				for (let t = 0; t < pData.Tables.length; t++)
 				{
@@ -95,7 +95,7 @@ class DataClonerDeployView extends libPictView
 						let tmpStatus = tmpCol.HasIndex
 							? '<span style="color:green">' + tmpCol.IndexName + '</span>'
 							: '<span style="color:red">MISSING</span>';
-						tmpHTML += '<tr style="border-bottom:1px solid #eee"><td style="padding:3px 8px">' + tmpTable.Table + '</td><td style="padding:3px 8px">' + tmpCol.Column + '</td><td style="padding:3px 8px">' + tmpStatus + '</td></tr>';
+						tmpHTML += '<tr style="border-bottom:1px solid var(--theme-color-border-light, #eee)"><td style="padding:3px 8px">' + tmpTable.Table + '</td><td style="padding:3px 8px">' + tmpCol.Column + '</td><td style="padding:3px 8px">' + tmpStatus + '</td></tr>';
 					}
 				}
 				tmpHTML += '</table>';
@@ -112,7 +112,7 @@ class DataClonerDeployView extends libPictView
 	createMissingGUIDIndices()
 	{
 		let tmpReportEl = document.getElementById('guidIndexReport');
-		if (tmpReportEl) tmpReportEl.innerHTML = '<span style="color:#888">Creating GUID indices...</span>';
+		if (tmpReportEl) tmpReportEl.innerHTML = '<span style="color:var(--theme-color-text-muted, #888)">Creating GUID indices...</span>';
 
 		let tmpSelf = this;
 		this.pict.providers.DataCloner.api('POST', '/clone/schema/guid-index-create')
@@ -206,7 +206,7 @@ module.exports.default_configuration =
 			<div class="accordion-toggle">&#9660;</div>
 		</div>
 		<div class="accordion-body">
-			<p style="font-size:0.9em; color:#666; margin-bottom:10px">Creates the selected tables in the local database and sets up CRUD endpoints (e.g. GET /1.0/Documents).</p>
+			<p style="font-size:0.9em; color:var(--theme-color-text-secondary, #666); margin-bottom:10px">Creates the selected tables in the local database and sets up CRUD endpoints (e.g. GET /1.0/Documents).</p>
 			<button class="primary" onclick="pict.views['DataCloner-Deploy'].deploySchema()">Deploy Selected Tables</button>
 			<button onclick="pict.views['DataCloner-Deploy'].auditGUIDIndices()">Check GUID Indices</button>
 			<button class="danger" onclick="pict.views['DataCloner-Deploy'].resetDatabase()">Reset Database</button>

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

@@ -450,7 +450,7 @@ module.exports.default_configuration =
 			<div class="accordion-toggle">&#9660;</div>
 		</div>
 		<div class="accordion-body">
-			<p style="font-size:0.9em; color:#666; margin-bottom:10px">Generate a JSON config file from your current settings. Use it to run headless clones from the command line.</p>
+			<p style="font-size:0.9em; color:var(--theme-color-text-secondary, #666); margin-bottom:10px">Generate a JSON config file from your current settings. Use it to run headless clones from the command line.</p>
 			<div style="display:flex; gap:8px; margin-bottom:10px">
 				<button class="primary" onclick="pict.views['DataCloner-Export'].generateConfig()">Generate Config</button>
 				<button class="secondary" onclick="pict.views['DataCloner-Export'].copyConfig()">Copy to Clipboard</button>
@@ -458,28 +458,28 @@ module.exports.default_configuration =
 			</div>
 			<div id="configExportStatus"></div>
 			<div id="cliCommand" style="display:none; margin-bottom:10px">
-				<label style="margin-bottom:4px">CLI Command <span style="color:#888; font-weight:normal">(with config file)</span></label>
-				<div style="background:#1a1a1a; color:#4fc3f7; padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer" onclick="pict.views['DataCloner-Export'].copyCLI()" title="Click to copy"></div>
+				<label style="margin-bottom:4px">CLI Command <span style="color:var(--theme-color-text-muted, #888); font-weight:normal">(with config file)</span></label>
+				<div style="background:var(--theme-color-text-primary, #1a1a1a); color:var(--theme-color-status-info, #4fc3f7); padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer" onclick="pict.views['DataCloner-Export'].copyCLI()" title="Click to copy"></div>
 			</div>
 			<div id="cliOneShot" style="display:none; margin-bottom:10px">
-				<label style="margin-bottom:4px">One-liner <span style="color:#888; font-weight:normal">(no config file needed)</span></label>
-				<div style="background:#1a1a1a; color:#4fc3f7; padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer; white-space:pre-wrap" onclick="pict.views['DataCloner-Export'].copyOneShot()" title="Click to copy"></div>
+				<label style="margin-bottom:4px">One-liner <span style="color:var(--theme-color-text-muted, #888); font-weight:normal">(no config file needed)</span></label>
+				<div style="background:var(--theme-color-text-primary, #1a1a1a); color:var(--theme-color-status-info, #4fc3f7); padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer; white-space:pre-wrap" onclick="pict.views['DataCloner-Export'].copyOneShot()" title="Click to copy"></div>
 			</div>
-			<textarea id="configOutput" style="display:none; width:100%; min-height:300px; font-family:monospace; font-size:0.85em; padding:10px; border:1px solid #ccc; border-radius:4px; background:#fafafa; tab-size:4; resize:vertical" readonly></textarea>
+			<textarea id="configOutput" style="display:none; width:100%; min-height:300px; font-family:monospace; font-size:0.85em; padding:10px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; background:var(--theme-color-background-secondary, #fafafa); tab-size:4; resize:vertical" readonly></textarea>
 
-			<div id="mdwintExport" style="display:none; margin-top:16px; padding-top:16px; border-top:1px solid #eee">
-				<h3 style="margin:0 0 8px; font-size:1em">meadow-integration CLI <span style="color:#888; font-weight:normal; font-size:0.85em">(mdwint clone)</span></h3>
-				<p style="font-size:0.85em; color:#666; margin-bottom:8px">Save as <code>.meadow.config.json</code> in your project root, then run the command below. Requires a local Meadow extended schema JSON file.</p>
+			<div id="mdwintExport" style="display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--theme-color-border-light, #eee)">
+				<h3 style="margin:0 0 8px; font-size:1em">meadow-integration CLI <span style="color:var(--theme-color-text-muted, #888); font-weight:normal; font-size:0.85em">(mdwint clone)</span></h3>
+				<p style="font-size:0.85em; color:var(--theme-color-text-secondary, #666); margin-bottom:8px">Save as <code>.meadow.config.json</code> in your project root, then run the command below. Requires a local Meadow extended schema JSON file.</p>
 				<div style="display:flex; gap:8px; margin-bottom:10px">
 					<button class="secondary" onclick="pict.views['DataCloner-Export'].copyMdwintConfig()">Copy Config</button>
 					<button class="secondary" onclick="pict.views['DataCloner-Export'].downloadMdwintConfig()">Download .meadow.config.json</button>
 				</div>
 				<div id="mdwintCLICommand" style="margin-bottom:10px">
 					<label style="margin-bottom:4px">CLI Command</label>
-					<div style="background:#1a1a1a; color:#4fc3f7; padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer" onclick="pict.views['DataCloner-Export'].copyMdwintCLI()" title="Click to copy"></div>
+					<div style="background:var(--theme-color-text-primary, #1a1a1a); color:var(--theme-color-status-info, #4fc3f7); padding:10px 14px; border-radius:4px; font-family:monospace; font-size:0.9em; word-break:break-all; cursor:pointer" onclick="pict.views['DataCloner-Export'].copyMdwintCLI()" title="Click to copy"></div>
 				</div>
 				<div id="mdwintConfigStatus"></div>
-				<textarea id="mdwintConfigOutput" style="width:100%; min-height:250px; font-family:monospace; font-size:0.85em; padding:10px; border:1px solid #ccc; border-radius:4px; background:#fafafa; tab-size:4; resize:vertical" readonly></textarea>
+				<textarea id="mdwintConfigOutput" style="width:100%; min-height:250px; font-family:monospace; font-size:0.85em; padding:10px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; background:var(--theme-color-background-secondary, #fafafa); tab-size:4; resize:vertical" readonly></textarea>
 			</div>
 		</div>
 	</div>