retold-data-service 2.1.2 → 2.1.5

package/package.json

@@ -1,98 +1,132 @@
 {
-    "name": "retold-data-service",
-    "version": "2.1.2",
-    "description": "Serve up a whole model!",
-    "main": "source/Retold-Data-Service.js",
-    "bin": {
-        "retold-data-service-clone": "bin/retold-data-service-clone.js"
-    },
-    "scripts": {
-        "start": "node bin/retold-data-service-clone.js",
-        "coverage": "npx quack coverage",
-        "test": "npx quack test",
-        "build": "npx quack build",
-        "prepublishOnly": "npx quack build",
-        "build-test-model": "cd test && npx stricture -i model/ddl/BookStore.ddl",
-        "docker-dev-build": "docker build ./ -f Dockerfile_LUXURYCode -t retold-data-service-image:local",
-        "docker-dev-run": "docker run -it -d --name retold-data-service-dev -p 44444:8080 -p 43306:3306 -p 48086:8086 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/retold-data-service\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" retold-data-service-image:local",
-        "docker-dev-shell": "docker exec -it retold-data-service-dev /bin/bash",
-        "docker-service-build": "docker build ./ -f Dockerfile_Service -t retold-data-service-server-image:local",
-        "docker-service-run-test": "docker run -it --init -d --name retold-data-service -p 8086:8086 -p 43306:3306 -v \"$(pwd):/retold-data-service:z\" -u \"$(id -u):$(id -g)\" retold-data-service-server-image:local",
-        "docker-service-run": "docker run -it --init -d --name retold-data-service -p 8086:8086 -p 43306:3306 -v \"$(pwd):/retold-data-service:z\" retold-data-service-server-image:local",
-        "docker-service-shell": "docker exec -it retold-data-service /bin/bash",
-        "test:integration": "node test/run-integration-tests.js",
-        "test:integration:no-browser": "node test/run-integration-tests.js --skip-puppeteer",
-        "test:all": "npx quack test && node test/run-integration-tests.js --skip-puppeteer",
-        "postversion": "npx quack release postversion",
-        "postpublish": "npx quack release postpublish",
-        "publish:docker": "npx quack release publish --image",
-        "release:patch": "npx quack release patch",
-        "release:minor": "npx quack release minor",
-        "release:major": "npx quack release major",
-        "release:patch:image": "npx quack release patch --image",
-        "release:minor:image": "npx quack release minor --image",
-        "release:major:image": "npx quack release major --image"
-    },
-    "mocha": {
-        "spec": "test/RetoldDataService_tests.js",
-        "diff": true,
-        "extension": [
-            "js"
-        ],
-        "package": "./package.json",
-        "reporter": "spec",
-        "slow": "75",
-        "timeout": "5000",
-        "ui": "tdd",
-        "watch-files": [
-            "source/**/*.js",
-            "test/**/*.js"
-        ],
-        "watch-ignore": [
-            "lib/vendor"
-        ]
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/stevenvelozo/retold-data-service.git"
-    },
-    "keywords": [
-        "entity",
-        "behavior",
-        "api"
-    ],
-    "author": "Steven Velozo <steven@velozo.com> (http://velozo.com/)",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/stevenvelozo/retold-data-service/issues"
-    },
-    "homepage": "https://github.com/stevenvelozo/retold-data-service",
-    "devDependencies": {
-        "meadow-connection-sqlite": "^1.0.19",
-        "pict-docuserve": "^0.1.5",
-        "puppeteer": "^24.40.0",
-        "quackage": "^1.2.3",
-        "stricture": "^4.0.2",
-        "supertest": "^7.2.2"
-    },
-    "dependencies": {
-        "bibliograph": "^0.1.7",
-        "fable": "^3.1.72",
-        "fable-serviceproviderbase": "^3.0.19",
-        "meadow": "^2.0.38",
-        "meadow-connection-manager": "^1.1.2",
-        "pict-section-connection-form": "^0.0.2",
-        "meadow-connection-mysql": "^1.0.19",
-        "meadow-endpoints": "^4.0.20",
-        "meadow-integration": "^1.0.40",
-        "meadow-migrationmanager": "^0.0.16",
-        "orator": "^6.1.2",
-        "orator-http-proxy": "^1.0.5",
-        "orator-serviceserver-restify": "^2.0.11",
-        "orator-static-server": "^2.1.4",
-        "pict": "^1.0.366",
-        "pict-section-histogram": "^1.0.0",
-        "pict-sessionmanager": "^1.0.2",
-        "stricture": "^4.0.2"
-    }
+	"name": "retold-data-service",
+	"version": "2.1.5",
+	"description": "Serve up a whole model!",
+	"main": "source/Retold-Data-Service.js",
+	"bin": {
+		"retold-data-service-clone": "bin/retold-data-service-clone.js"
+	},
+	"scripts": {
+		"start": "node bin/retold-data-service-clone.js",
+		"coverage": "npx quack coverage",
+		"test": "npx quack test",
+		"brand": "node node_modules/pict-section-theme/bin/pict-section-theme-brand.js --manifest ../../../Retold-Modules-Manifest.json --module retold-data-service --favicons source/services/comprehension-loader/web/favicons && cp -r source/services/comprehension-loader/web/favicons source/services/data-cloner/web/favicons",
+		"build": "node build-all.js",
+		"build:cloner": "npx quack build",
+		"build:loader": "node -e \"require('fs').writeFileSync('.quackage.json', require('fs').readFileSync('.quackage-comprehension-loader.json', 'utf8'))\" && npx quack build",
+		"prepublishOnly": "npm run build",
+		"build-test-model": "cd test && npx stricture -i model/ddl/BookStore.ddl",
+		"docker-dev-build": "docker build ./ -f Dockerfile_LUXURYCode -t retold-data-service-image:local",
+		"docker-dev-run": "docker run -it -d --name retold-data-service-dev -p 44444:8080 -p 43306:3306 -p 48086:8086 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/retold-data-service\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" retold-data-service-image:local",
+		"docker-dev-shell": "docker exec -it retold-data-service-dev /bin/bash",
+		"docker-service-build": "docker build ./ -f Dockerfile_Service -t retold-data-service-server-image:local",
+		"docker-service-run-test": "docker run -it --init -d --name retold-data-service -p 8086:8086 -p 43306:3306 -v \"$(pwd):/retold-data-service:z\" -u \"$(id -u):$(id -g)\" retold-data-service-server-image:local",
+		"docker-service-run": "docker run -it --init -d --name retold-data-service -p 8086:8086 -p 43306:3306 -v \"$(pwd):/retold-data-service:z\" retold-data-service-server-image:local",
+		"docker-service-shell": "docker exec -it retold-data-service /bin/bash",
+		"test:integration": "node test/run-integration-tests.js",
+		"test:integration:no-browser": "node test/run-integration-tests.js --skip-puppeteer",
+		"test:all": "npx quack test && node test/run-integration-tests.js --skip-puppeteer",
+		"postversion": "npx quack release postversion",
+		"postpublish": "npx quack release postpublish",
+		"publish:docker": "npx quack release publish --image",
+		"release:patch": "npx quack release patch",
+		"release:minor": "npx quack release minor",
+		"release:major": "npx quack release major",
+		"release:patch:image": "npx quack release patch --image",
+		"release:minor:image": "npx quack release minor --image",
+		"release:major:image": "npx quack release major --image"
+	},
+	"mocha": {
+		"spec": [
+			"test/RetoldDataService_tests.js",
+			"test/Bundles_smoke_tests.js",
+			"test/ComprehensionLoader_smoke_tests.js",
+			"test/DataCloner_smoke_tests.js"
+		],
+		"diff": true,
+		"extension": [
+			"js"
+		],
+		"package": "./package.json",
+		"reporter": "spec",
+		"slow": "75",
+		"timeout": "5000",
+		"ui": "tdd",
+		"watch-files": [
+			"source/**/*.js",
+			"test/**/*.js"
+		],
+		"watch-ignore": [
+			"lib/vendor"
+		]
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fable-retold/retold-data-service.git"
+	},
+	"keywords": [
+		"entity",
+		"behavior",
+		"api"
+	],
+	"author": "Steven Velozo <steven@velozo.com> (http://velozo.com/)",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/fable-retold/retold-data-service/issues"
+	},
+	"homepage": "https://github.com/fable-retold/retold-data-service",
+	"devDependencies": {
+		"chai": "^4.5.0",
+		"jsdom": "^25.0.1",
+		"meadow-connection-sqlite": "^1.0.20",
+		"mocha": "^11.0.1",
+		"pict-docuserve": "^1.4.19",
+		"puppeteer": "^24.40.0",
+		"quackage": "^1.3.0",
+		"stricture": "^4.0.6",
+		"supertest": "^7.2.2"
+	},
+	"dependencies": {
+		"bibliograph": "^1.0.0",
+		"fable": "^3.1.75",
+		"fable-serviceproviderbase": "^3.0.19",
+		"meadow": "^2.0.43",
+		"meadow-connection-manager": "^1.1.5",
+		"meadow-connection-mysql": "^1.0.19",
+		"meadow-endpoints": "^4.0.22",
+		"meadow-integration": "^1.0.42",
+		"meadow-migrationmanager": "^1.0.4",
+		"orator": "^6.1.2",
+		"orator-http-proxy": "^1.0.5",
+		"orator-serviceserver-restify": "^2.0.11",
+		"orator-static-server": "^2.1.4",
+		"pict": "^1.0.372",
+		"pict-provider-theme": "^1.1.2",
+		"pict-section-connection-form": "^1.0.0",
+		"pict-section-histogram": "^1.0.1",
+		"pict-section-modal": "^1.1.4",
+		"pict-section-theme": "^1.1.1",
+		"pict-sessionmanager": "^1.0.2",
+		"stricture": "^4.0.6"
+	},
+	"retold": {
+		"brand": {
+			"Hash": "retold-data-service",
+			"Name": "Retold Data Service",
+			"Tagline": "Schema-driven data movement and comprehension",
+			"Palette": "ocean",
+			"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-retold-data-service-filled-light\">\n\t\t\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\" fill=\"#23a6c7\"/>\n\t\t<g clip-path=\"url(#frame-retold-data-service-filled-light)\"><rect x=\"20\" y=\"20\" width=\"56\" height=\"56\" rx=\"8\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<path d=\"M 48 30 L 70 48 L 48 66 L 26 48 Z\" fill=\"#e36b59\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">RDS</text>\n\t</svg>",
+			"IconType": "svg",
+			"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-retold-data-service-light\">\n\t\t\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\" fill=\"#23a6c7\"/>\n\t\t<g clip-path=\"url(#fav-retold-data-service-light)\"><rect x=\"16\" y=\"16\" width=\"64\" height=\"64\" rx=\"10\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">R</text>\n\t</svg>",
+			"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-retold-data-service-dark\">\n\t\t\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 48.00 2.00 L 87.84 25.00 L 87.84 71.00 L 48.00 94.00 L 8.16 71.00 L 8.16 25.00 Z\" fill=\"#67c6de\"/>\n\t\t<g clip-path=\"url(#fav-retold-data-service-dark)\"><rect x=\"16\" y=\"16\" width=\"64\" height=\"64\" rx=\"10\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">R</text>\n\t</svg>",
+			"Colors": {
+				"Primary": "#23a6c7",
+				"Secondary": "#e36b59",
+				"PrimaryLight": "#23a6c7",
+				"PrimaryDark": "#67c6de",
+				"SecondaryLight": "#e36b59",
+				"SecondaryDark": "#edb3aa"
+			}
+		}
+	}
 }

package/source/services/RetoldDataService-Brand.js

@@ -0,0 +1,13 @@
+'use strict';
+
+// Located at source/services/. Apps live one level deeper at
+// source/services/<app>/pict-app/. The package.json is two levels up.
+const tmpPackage = require('../../package.json');
+
+if (!tmpPackage.retold || !tmpPackage.retold.brand)
+{
+	throw new Error('retold-data-service: package.json is missing retold.brand — '
+		+ 'run `npm run brand` (which calls pict-section-theme-brand) before building');
+}
+
+module.exports = tmpPackage.retold.brand;

package/source/services/comprehension-loader/pict-app/Pict-Application-ComprehensionLoader.js

@@ -2,28 +2,41 @@ const libPictApplication = require('pict-application');
 
 const libProvider = require('./providers/Pict-Provider-ComprehensionLoader.js');
 
-const libViewLayout = require('./views/PictView-ComprehensionLoader-Layout.js');
-const libViewSession = require('./views/PictView-ComprehensionLoader-Session.js');
-const libViewSchema = require('./views/PictView-ComprehensionLoader-Schema.js');
-const libViewSource = require('./views/PictView-ComprehensionLoader-Source.js');
-const libViewLoad = require('./views/PictView-ComprehensionLoader-Load.js');
+const libViewLayout    = require('./views/PictView-ComprehensionLoader-Layout.js');
+const libViewSession   = require('./views/PictView-ComprehensionLoader-Session.js');
+const libViewSchema    = require('./views/PictView-ComprehensionLoader-Schema.js');
+const libViewSource    = require('./views/PictView-ComprehensionLoader-Source.js');
+const libViewLoad      = require('./views/PictView-ComprehensionLoader-Load.js');
 const libViewHistogram = require('pict-section-histogram');
 
+const libPictSectionModal = require('pict-section-modal');
+const libPictSectionTheme = require('pict-section-theme');
+const libBrand            = require('../../RetoldDataService-Brand.js');
+
+const libViewShell        = require('./views/PictView-ComprehensionLoader-Shell.js');
+const libViewTopBarNav    = require('./views/PictView-ComprehensionLoader-TopBar-Nav.js');
+const libViewTopBarUser   = require('./views/PictView-ComprehensionLoader-TopBar-User.js');
+const libViewStatusBar    = require('./views/PictView-ComprehensionLoader-StatusBar.js');
+const libViewStatusDetail = require('./views/PictView-ComprehensionLoader-StatusDetail.js');
+const libViewSettings     = require('./views/PictView-ComprehensionLoader-SettingsPanel.js');
+
 class ComprehensionLoaderApplication extends libPictApplication
 {
 	constructor(pFable, pOptions, pServiceHash)
 	{
 		super(pFable, pOptions, pServiceHash);
 
-		// Register provider
-		this.pict.addProvider('ComprehensionLoader', 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('ComprehensionLoader-Layout', libViewLayout.default_configuration, libViewLayout);
+		// 2. Provider + existing section views.
+		this.pict.addProvider('ComprehensionLoader', libProvider.default_configuration, libProvider);
+		this.pict.addView('ComprehensionLoader-Layout',  libViewLayout.default_configuration,  libViewLayout);
 		this.pict.addView('ComprehensionLoader-Session', libViewSession.default_configuration, libViewSession);
-		this.pict.addView('ComprehensionLoader-Schema', libViewSchema.default_configuration, libViewSchema);
-		this.pict.addView('ComprehensionLoader-Source', libViewSource.default_configuration, libViewSource);
-		this.pict.addView('ComprehensionLoader-Load', libViewLoad.default_configuration, libViewLoad);
+		this.pict.addView('ComprehensionLoader-Schema',  libViewSchema.default_configuration,  libViewSchema);
+		this.pict.addView('ComprehensionLoader-Source',  libViewSource.default_configuration,  libViewSource);
+		this.pict.addView('ComprehensionLoader-Load',    libViewLoad.default_configuration,    libViewLoad);
 		this.pict.addView('ComprehensionLoader-StatusHistogram',
 			{
 				ViewIdentifier: 'ComprehensionLoader-StatusHistogram',
@@ -36,9 +49,38 @@ class ComprehensionLoaderApplication extends libPictApplication
 				ShowValues: false,
 				ShowLabels: true,
 				MaxBarSize: 80,
-				BarColor: '#4a90d9',
+				BarColor: 'var(--theme-color-brand-primary, #4a90d9)',
 				Bins: []
 			}, libViewHistogram);
+
+		// 3. Shell host + slot views + status bar / detail + settings panel.
+		this.pict.addView('ComprehensionLoader-Shell',
+			libViewShell.default_configuration, libViewShell);
+		this.pict.addView('ComprehensionLoader-TopBar-Nav',
+			libViewTopBarNav.default_configuration, libViewTopBarNav);
+		this.pict.addView('ComprehensionLoader-TopBar-User',
+			libViewTopBarUser.default_configuration, libViewTopBarUser);
+		this.pict.addView('ComprehensionLoader-StatusBar',
+			libViewStatusBar.default_configuration, libViewStatusBar);
+		this.pict.addView('ComprehensionLoader-StatusDetail',
+			libViewStatusDetail.default_configuration, libViewStatusDetail);
+		this.pict.addView('ComprehensionLoader-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:    'ComprehensionLoader-TopBar-Nav', UserView: 'ComprehensionLoader-TopBar-User', Height: 56 },
+					BottomBar: { StatusView: 'ComprehensionLoader-StatusBar', Height: 36 }
+				}
+			}, libPictSectionTheme);
 	}
 
 	onAfterInitializeAsync(fCallback)
@@ -66,10 +108,18 @@ class ComprehensionLoaderApplication extends libPictApplication
 		// Make pict available for inline onclick handlers
 		window.pict = this.pict;
 
-		// Render layout (which chains child view renders via onAfterRender)
+		// Render the shell first — creates panel destination divs.
+		this.pict.views['ComprehensionLoader-Shell'].render();
+
+		// Render the layout (which chains child view renders via onAfterRender)
+		// into the shell's #ComprehensionLoader-Workspace destination.
 		this.pict.views['ComprehensionLoader-Layout'].render();
 
-		// Post-render initialization
+		// Render the StatusBar into the BottomBar slot — provider's polling
+		// updates this by id in-place, so we only need the initial paint.
+		this.pict.views['ComprehensionLoader-StatusBar'].render();
+
+		// Post-render initialization (unchanged)
 		this.pict.providers.ComprehensionLoader.initPersistence();
 		this.pict.providers.ComprehensionLoader.startLiveStatusPolling();
 		this.pict.providers.ComprehensionLoader.initAccordionPreviews();

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,7 +50,7 @@ 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: var(--theme-color-background-secondary, #f5f5f5); color: var(--theme-color-text-primary, #333); padding: 20px; }
@@ -94,7 +63,7 @@ h2 { margin-bottom: 12px; color: var(--theme-color-text-secondary, #444); font-s
 .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 {
@@ -123,11 +92,11 @@ h2 { margin-bottom: 12px; color: var(--theme-color-text-secondary, #444); font-s
 .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: var(--theme-color-text-muted, #999); white-space: nowrap; cursor: pointer;
 }
@@ -144,7 +113,7 @@ h2 { margin-bottom: 12px; color: var(--theme-color-text-secondary, #444); font-s
 }
 .accordion-phase.visible { display: flex; }
 .accordion-phase-ok { color: var(--theme-color-status-success, #28a745); }
-.accordion-phase-error { color: #dc3545; }
+.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;
@@ -170,18 +139,18 @@ input[type="text"], input[type="password"], input[type="number"] {
 	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: var(--theme-color-background-panel, #fff); }
-button.primary:hover { background: #357abd; }
-button.secondary { background: #6c757d; color: var(--theme-color-background-panel, #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: var(--theme-color-background-panel, #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: var(--theme-color-status-success, #28a745); color: var(--theme-color-background-panel, #fff); }
 button.success:hover { background: #218838; }
@@ -196,7 +165,7 @@ 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: 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; }
 
@@ -208,28 +177,28 @@ select { background: var(--theme-color-background-panel, #fff); width: 100%; pad
 .live-status-bar {
 	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-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: #ffc107; }
+.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: 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: var(--theme-color-status-success, #28a745); }
@@ -248,7 +217,7 @@ select { background: var(--theme-color-background-panel, #fff); width: 100%; pad
 .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 {
@@ -260,7 +229,7 @@ select { background: var(--theme-color-background-panel, #fff); width: 100%; pad
 	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;
@@ -288,10 +257,10 @@ select { background: var(--theme-color-background-panel, #fff); width: 100%; pad
 }
 .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-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; }
 
@@ -309,8 +278,8 @@ select { background: var(--theme-color-background-panel, #fff); width: 100%; pad
 .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-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: var(--theme-color-background-panel, #fff); width: 100%; pad
 			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: var(--theme-color-background-panel, #fff); width: 100%; pad
 		{
 			RenderableHash: 'ComprehensionLoader-Layout',
 			TemplateHash: 'ComprehensionLoader-Layout',
-			DestinationAddress: '#ComprehensionLoader-Application-Container'
+			DestinationAddress: '#ComprehensionLoader-Workspace'
 		}
 	]
 };