retold-facto 1.0.0 → 1.0.2

package/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build
-FROM node:20-slim AS builder
+FROM node:22-slim AS builder
 WORKDIR /app
 COPY package*.json ./
 # `npm install`, not `npm ci` — package-lock.json is gitignored per
@@ -16,7 +16,7 @@ RUN npx quack build
 RUN cp node_modules/pict/dist/pict.min.js source/services/web-app/web/pict.min.js 2>/dev/null || true
 
 # Stage 2: Runtime
-FROM node:20-slim
+FROM node:22-slim
 WORKDIR /app
 COPY package*.json ./
 RUN npm install --omit=dev

package/bin/retold-facto.js

@@ -327,6 +327,37 @@ function commandServe()
 			_Fable.log.info(`API:     http://localhost:${_Settings.APIServerPort}/1.0/`);
 			_Fable.log.info(`Facto:   http://localhost:${_Settings.APIServerPort}/facto/`);
 			_Fable.log.info(`Web UI:  http://localhost:${_Settings.APIServerPort}/`);
+
+			// Optional auto-connect to an Ultravisor coordinator.  Only
+			// runs when FACTO_ULTRAVISOR_URL is set; standalone users
+			// with no Ultravisor in the loop see no behavior change.
+			// Failures are logged but don't kill the process — facto
+			// stays useful as a local REST surface.  This also triggers
+			// the beacon-side WebAuth proxy install, which gates the web
+			// UI's session-bearing routes against UV's auth beacon when
+			// the upstream UV is in non-promiscuous mode.
+			let tmpUVUrl = process.env.FACTO_ULTRAVISOR_URL || '';
+			if (tmpUVUrl && _Fable.RetoldFactoBeaconProvider)
+			{
+				let tmpBeaconConfig =
+					{
+						ServerURL:     tmpUVUrl,
+						Name:          process.env.FACTO_BEACON_NAME || 'retold-facto',
+						Password:      process.env.FACTO_BEACON_PASSWORD || '',
+						MaxConcurrent: parseInt(process.env.FACTO_MAX_CONCURRENT || '2', 10)
+					};
+				_Fable.log.info(`Auto-connecting to Ultravisor at ${tmpUVUrl} as "${tmpBeaconConfig.Name}"...`);
+				_Fable.RetoldFactoBeaconProvider.connectBeacon(tmpBeaconConfig,
+					(pConnectError) =>
+					{
+						if (pConnectError)
+						{
+							_Fable.log.error(`Ultravisor auto-connect failed: ${pConnectError.message || pConnectError}`);
+							return;
+						}
+						_Fable.log.info(`Ultravisor auto-connect succeeded — registered as "${tmpBeaconConfig.Name}".`);
+					});
+			}
 		});
 }
 

package/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "retold-facto",
+	"Name": "Retold Facto",
+	"Tagline": "Data warehouse and knowledge graph storage for the Retold ecosystem.",
+	"Palette": "mix",
+	"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-facto-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#2e8ab5\"/>\n\t\t<g clip-path=\"url(#frame-retold-facto-filled-light)\"><rect x=\"26\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"rgba(255,255,255,0.18)\"/><rect x=\"52\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"#da9859\"/></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=\"38\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">RF</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-facto-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#2e8ab5\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-light)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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-facto-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#6cb2d3\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-dark)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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": "#2e8ab5",
+		"Secondary": "#da9859",
+		"PrimaryLight": "#2e8ab5",
+		"PrimaryDark": "#6cb2d3",
+		"SecondaryLight": "#da9859",
+		"SecondaryDark": "#e7c7a7"
+	}
+}

package/docs/index.html

@@ -8,8 +8,6 @@
 
 		<title>Retold Facto v0.1.0 Documentation</title>
 
-		<!-- Application Stylesheet -->
-		<link href="css/docuserve.css" rel="stylesheet">
 		<!-- KaTeX stylesheet for LaTeX equation rendering -->
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
 		<!-- PICT Dynamic View CSS Container -->

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "retold-facto",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Data warehouse and knowledge graph storage for the Retold ecosystem.",
 	"main": "source/Retold-Facto.js",
 	"bin": {
@@ -11,6 +11,8 @@
 		"coverage": "npx quack coverage",
 		"test": "npx quack test",
 		"test-browser": "npx mocha test/Facto_Browser_Integration_tests.js -u tdd --exit --timeout 120000",
+		"brand": "node node_modules/pict-section-theme/bin/pict-section-theme-brand.js --manifest ../../../Retold-Modules-Manifest.json --module retold-facto --favicons source/services/web-app/web/favicons",
+		"prebuild": "npm run brand",
 		"build": "npx quack build",
 		"build-codemirror": "npx esbuild source/services/web-app/codemirror-entry.js --bundle --outfile=source/services/web-app/web/codemirror-bundle.js --format=iife --global-name=CodeMirrorModules --platform=browser --target=es2018",
 		"build-test-model": "cd test && npx stricture -i model/ddl/Facto.ddl",
@@ -28,7 +30,10 @@
 		"release:major:image": "npx quack release major --image"
 	},
 	"mocha": {
-		"spec": "test/RetoldFacto_tests.js",
+		"spec": [
+			"test/RetoldFacto_tests.js",
+			"test/Facto_Smoke_tests.js"
+		],
 		"diff": true,
 		"extension": [
 			"js"
@@ -103,40 +108,67 @@
 	},
 	"homepage": "https://github.com/stevenvelozo/retold-facto",
 	"devDependencies": {
-		"chai": "^6.2.2",
-		"pict-docuserve": "^0.1.5",
+		"chai": "^4.5.0",
+		"jsdom": "^25.0.1",
+		"mocha": "^11.0.1",
+		"pict-docuserve": "^1.3.2",
 		"puppeteer": "^24.40.0",
-		"quackage": "^1.2.0",
-		"stricture": "^4.0.2",
+		"quackage": "^1.2.3",
+		"retold-sharp": "^1.0.0",
+		"stricture": "^4.0.6",
 		"supertest": "^7.2.2"
 	},
 	"dependencies": {
 		"@codemirror/lang-markdown": "^6.5.0",
 		"@codemirror/state": "^6.6.0",
-		"meadow-connection-sqlite": "^1.0.19",
 		"@codemirror/view": "^6.41.0",
-		"bibliograph": "^0.1.6",
+		"bibliograph": "^1.0.0",
 		"codemirror": "^6.0.2",
-		"fable": "^3.1.71",
+		"fable": "^3.1.75",
 		"fable-serviceproviderbase": "^3.0.19",
 		"fast-xml-parser": "^5.5.10",
-		"meadow": "^2.0.37",
-		"meadow-connection-manager": "^1.1.0",
-		"meadow-connection-mysql": "^1.0.18",
-		"meadow-endpoints": "^4.0.17",
-		"meadow-integration": "^1.0.38",
-		"orator": "^6.1.1",
-		"orator-serviceserver-restify": "^2.0.10",
-		"orator-static-server": "^2.1.3",
-		"pict": "^1.0.365",
-		"pict-router": "^1.0.9",
-		"pict-section-connection-form": "^0.0.2",
-		"pict-section-flow": "^0.0.17",
-		"pict-section-histogram": "^1.0.0",
-		"pict-section-markdowneditor": "^1.0.10",
-		"pict-section-modal": "^0.0.5",
-		"pict-section-objecteditor": "^1.0.1",
-		"stricture": "^4.0.2",
+		"meadow": "^2.0.41",
+		"meadow-connection-manager": "^1.1.2",
+		"meadow-connection-mysql": "^1.0.19",
+		"meadow-connection-sqlite": "^1.0.20",
+		"meadow-endpoints": "^4.0.22",
+		"meadow-integration": "^1.0.41",
+		"orator": "^6.1.2",
+		"orator-serviceserver-restify": "^2.0.11",
+		"orator-static-server": "^2.1.4",
+		"pict": "^1.0.371",
+		"pict-provider-theme": "^1.0.1",
+		"pict-router": "^1.0.10",
+		"pict-section-connection-form": "^1.0.0",
+		"pict-section-flow": "^1.0.1",
+		"pict-section-histogram": "^1.0.1",
+		"pict-section-login": "^1.0.0",
+		"pict-section-markdowneditor": "^1.0.15",
+		"pict-section-modal": "^1.1.1",
+		"pict-section-objecteditor": "^1.0.3",
+		"pict-section-theme": "^1.0.5",
+		"stricture": "^4.0.6",
+		"ultravisor-beacon": "^1.0.1",
 		"xlsx": "^0.18.5"
+	},
+	"retold": {
+		"brand": {
+			"Hash": "retold-facto",
+			"Name": "Retold Facto",
+			"Tagline": "Data warehouse and knowledge graph storage",
+			"Palette": "forest",
+			"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-facto-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#419638\"/>\n\t\t<g clip-path=\"url(#frame-retold-facto-filled-light)\"><rect x=\"26\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"rgba(255,255,255,0.18)\"/><rect x=\"52\" y=\"14\" width=\"18\" height=\"68\" rx=\"4\" fill=\"#c8bd52\"/></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=\"38\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">RF</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-facto-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#419638\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-light)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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-facto-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#73bf6b\"/>\n\t\t<g clip-path=\"url(#fav-retold-facto-dark)\"><rect x=\"20\" y=\"14\" width=\"56\" height=\"68\" rx=\"4\" 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": "#419638",
+				"Secondary": "#c8bd52",
+				"PrimaryLight": "#419638",
+				"PrimaryDark": "#73bf6b",
+				"SecondaryLight": "#c8bd52",
+				"SecondaryDark": "#dad49c"
+			}
+		}
 	}
 }

package/source/Retold-Facto.js

@@ -22,6 +22,7 @@ const libRetoldFactoRecordManager = require('./services/Retold-Facto-RecordManag
 const libRetoldFactoDatasetManager = require('./services/Retold-Facto-DatasetManager.js');
 const libRetoldFactoIngestEngine = require('./services/Retold-Facto-IngestEngine.js');
 const libRetoldFactoProjectionEngine = require('./services/Retold-Facto-ProjectionEngine.js');
+const libRetoldFactoBeaconProvider = require('./services/Retold-Facto-BeaconProvider.js');
 const libRetoldFactoCatalogManager = require('./services/Retold-Facto-CatalogManager.js');
 const libRetoldFactoStoreConnectionManager = require('./services/Retold-Facto-StoreConnectionManager.js');
 const libRetoldFactoDataLakeService = require('./services/Retold-Facto-DataLakeService.js');
@@ -356,6 +357,16 @@ class RetoldFacto extends libFableServiceProviderBase
 				RoutePrefix: this.options.Facto.RoutePrefix
 			});
 
+		// BeaconProvider — exposes connectBeacon() so the CLI can wire
+		// facto into the Ultravisor mesh at startup.  Registering the
+		// type here doesn't initiate a connection; bin/retold-facto.js
+		// invokes connectBeacon() when FACTO_ULTRAVISOR_URL is set.
+		this.fable.serviceManager.addServiceType('RetoldFactoBeaconProvider', libRetoldFactoBeaconProvider);
+		this.fable.serviceManager.instantiateServiceProvider('RetoldFactoBeaconProvider',
+			{
+				RoutePrefix: this.options.Facto.RoutePrefix
+			});
+
 		this.fable.serviceManager.addServiceType('RetoldFactoCatalogManager', libRetoldFactoCatalogManager);
 		this.fable.serviceManager.instantiateServiceProvider('RetoldFactoCatalogManager',
 			{

package/source/services/Retold-Facto-BeaconProvider.js

@@ -461,10 +461,56 @@ class RetoldFactoBeaconProvider extends libFableServiceProviderBase
 				}
 
 				this.log.info(`RetoldFactoBeaconProvider: beacon connected as ${pBeaconInfo.BeaconID}`);
+				// Install the beacon-side web-UI auth proxy now that
+				// connectBeacon has succeeded.  Same pattern as the
+				// databeacon — see Ultravisor-Beacon-WebAuth.cjs for the
+				// install signature.  Non-fatal if it fails (the beacon
+				// is still useful; the UI just stays open).
+				try { this._installWebAuth(pBeaconConfig); }
+				catch (pWebAuthErr)
+				{
+					this.log.warn(`RetoldFactoBeaconProvider: WebAuth install skipped: ${pWebAuthErr && pWebAuthErr.message}`);
+				}
 				return fCallback(null, pBeaconInfo);
 			});
 	}
 
+	/**
+	 * Wire the SDK's WebAuth helper into facto's Orator server so the
+	 * web UI's login flow proxies through UV's auth beacon.  Idempotent
+	 * — calling twice just re-registers the same routes (the helper's
+	 * internal WeakMap tracks installs).  Gating list scopes the gate
+	 * to facto's own data-mutating routes; static assets + the auth
+	 * routes themselves are always public.
+	 */
+	_installWebAuth(pBeaconConfig)
+	{
+		if (!libBeaconService || !libBeaconService.WebAuth)
+		{
+			return;
+		}
+		if (!this.fable.OratorServiceServer)
+		{
+			this.log.warn('RetoldFactoBeaconProvider: WebAuth install: OratorServiceServer unavailable on fable; skipping.');
+			return;
+		}
+		this._WebAuthHandle = libBeaconService.WebAuth.install(this.fable.OratorServiceServer,
+			{
+				UltravisorURL:     pBeaconConfig.ServerURL,
+				BeaconName:        pBeaconConfig.Name || 'retold-facto',
+				BeaconID:          () => this._BeaconService && this._BeaconService.getBeaconID
+					? this._BeaconService.getBeaconID() : '',
+				CookieName:        'SessionID',
+				RoutePrefix:       '/1.0/',
+				StatusPath:        '/status',
+				// Gate facto's mutation + read endpoints.  Auth + status
+				// + static UI stay public so login itself can render.
+				GatedPathPrefixes: ['/1.0/Source', '/1.0/Dataset', '/1.0/Record', '/1.0/Ingest'],
+				Log:               this.fable.log
+			});
+		this.log.info('RetoldFactoBeaconProvider: WebAuth mounted /1.0/{Authenticate,Deauthenticate,CheckSession} + /status proxy');
+	}
+
 	/**
 	 * Disconnect the beacon from the Ultravisor coordinator.
 	 *

package/source/services/web-app/Facto-Brand.js

@@ -0,0 +1,18 @@
+'use strict';
+
+// Brand wrapper — deterministic brand block emitted by `npm run brand`
+// (which calls pict-section-theme-brand with the Branding entry from
+// Retold-Modules-Manifest.json). Passed to Theme-Section as the `Brand`
+// option so the BrandMark wordmark + --brand-color-* variables are
+// wired into every themed surface.
+
+// services/web-app/Facto-Brand.js  →  three levels up to the package.json
+const tmpPackage = require('../../../package.json');
+
+if (!tmpPackage.retold || !tmpPackage.retold.brand)
+{
+	throw new Error('retold-facto: 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/web-app/pict-app/Pict-Application-Facto.js

@@ -1,9 +1,12 @@
 const libPictApplication = require('pict-application');
 
 const libPictSectionModal = require('pict-section-modal');
+const libPictSectionLogin = require('pict-section-login');
+const libBeaconWebAuthClient = require('ultravisor-beacon/webinterface/Pict-Beacon-WebAuth-Client.js');
 const libProvider = require('./providers/Pict-Provider-Facto.js');
 
 const libViewLayout = require('./views/PictView-Facto-Layout.js');
+const libViewLogin = require('./views/PictView-Facto-Login.js');
 const libViewSources = require('./views/PictView-Facto-Sources.js');
 const libViewRecords = require('./views/PictView-Facto-Records.js');
 const libViewDatasets = require('./views/PictView-Facto-Datasets.js');
@@ -27,6 +30,7 @@ class FactoApplication extends libPictApplication
 
 		// Register views
 		this.pict.addView('Facto-Layout', libViewLayout.default_configuration, libViewLayout);
+		this.pict.addView('Facto-Login', libViewLogin.default_configuration, libViewLogin);
 		this.pict.addView('Facto-Sources', libViewSources.default_configuration, libViewSources);
 		this.pict.addView('Facto-Records', libViewRecords.default_configuration, libViewRecords);
 		this.pict.addView('Facto-Datasets', libViewDatasets.default_configuration, libViewDatasets);
@@ -35,6 +39,29 @@ class FactoApplication extends libPictApplication
 		this.pict.addView('Facto-Catalog', libViewCatalog.default_configuration, libViewCatalog);
 		this.pict.addView('Facto-Scanner', libViewScanner.default_configuration, libViewScanner);
 		this.pict.addView('Facto-Throughput', libViewThroughput.default_configuration, libViewThroughput);
+
+		// Beacon-side login section + client helper.  The helper hooks
+		// pict-section-login's lifecycle callbacks back into this
+		// application so login success / logout / session-check flow
+		// through `_showLoginOverlay()` and `_hideLoginOverlay()`.  See
+		// modules/fable/ultravisor-beacon/webinterface/Pict-Beacon-
+		// WebAuth-Client.js for the install signature.  When facto's
+		// server-side WebAuth proxy reports the UV is in promiscuous
+		// mode, the gate stays armed but invisible.
+		this._WebAuthClient = libBeaconWebAuthClient.install(this.pict,
+			{
+				Section:              libPictSectionLogin,
+				AuthStateAddress:     'AppData.Facto.Auth',
+				LoginRoute:           'Facto-Login',
+				HomeRoute:            'Facto-Layout',
+				StatusURL:            '/status',
+				LoginEndpoint:        '/1.0/Authenticate',
+				LogoutEndpoint:       '/1.0/Deauthenticate',
+				CheckSessionEndpoint: '/1.0/CheckSession',
+				OnAfterLogin:         () => this._hideLoginOverlay(),
+				OnAfterLogout:        () => this._showLoginOverlay(),
+				OnSessionChecked:     (pSess) => { if (!(pSess && pSess.LoggedIn)) { this._showLoginOverlay(); } else { this._hideLoginOverlay(); } }
+			});
 	}
 
 	onAfterInitializeAsync(fCallback)
@@ -58,10 +85,67 @@ class FactoApplication extends libPictApplication
 		// Make pict available for inline onclick handlers
 		window.pict = this.pict;
 
-		// Render layout (which cascades child view renders)
+		// Ensure the login overlay mount point exists in the DOM
+		// before the section view tries to render into it.  This is
+		// a one-time append so re-renders of the wrapper view don't
+		// stack additional overlays.
+		this._ensureLoginOverlayMount();
+
+		// Render layout (which cascades child view renders).  We render
+		// the layout regardless of auth state; the overlay sits on top
+		// of it (z-index 9999) so an unauthenticated user simply can't
+		// interact with the underlying UI.
 		this.pict.views['Facto-Layout'].render();
 
-		return fCallback();
+		// Boot gate: fetch /status to discover whether UV is running in
+		// authenticated mode.  In promiscuous mode the overlay stays
+		// hidden and the UI works as before.  In authenticated mode the
+		// pict-section-login's CheckSessionOnLoad fires (its default is
+		// true); the helper's OnSessionChecked hook then shows/hides
+		// the overlay based on whether the user's cookie is still good.
+		this._WebAuthClient.loadAuthStatus((pStatusErr) =>
+			{
+				if (pStatusErr)
+				{
+					this.pict.log.warn('Facto: /status fetch failed during boot: ' + pStatusErr.message);
+				}
+				let tmpAuth = (this.pict.AppData.Facto && this.pict.AppData.Facto.Auth) || {};
+				if (tmpAuth.Mode === 'authenticated')
+				{
+					// Show overlay; the section's auto-CheckSession will
+					// hide it back if there's a valid cookie.
+					this._showLoginOverlay();
+					this.pict.views['Facto-Login'].render();
+				}
+				return fCallback();
+			});
+	}
+
+	/**
+	 * Append `<div id="Facto-Login-Overlay">` to <body> if it isn't
+	 * already there.  The Facto-Login wrapper view targets this element
+	 * via its DefaultDestinationAddress, so it must exist before the
+	 * wrapper's first render() call.
+	 */
+	_ensureLoginOverlayMount()
+	{
+		if (typeof document === 'undefined') { return; }
+		if (document.getElementById('Facto-Login-Overlay')) { return; }
+		let tmpDiv = document.createElement('div');
+		tmpDiv.id = 'Facto-Login-Overlay';
+		document.body.appendChild(tmpDiv);
+	}
+
+	_showLoginOverlay()
+	{
+		let tmpEl = (typeof document !== 'undefined') && document.getElementById('Facto-Login-Overlay');
+		if (tmpEl) { tmpEl.classList.add('is-active'); }
+	}
+
+	_hideLoginOverlay()
+	{
+		let tmpEl = (typeof document !== 'undefined') && document.getElementById('Facto-Login-Overlay');
+		if (tmpEl) { tmpEl.classList.remove('is-active'); }
 	}
 }
 

package/source/services/web-app/pict-app/views/PictView-Facto-Catalog.js

@@ -29,7 +29,7 @@ class FactoCatalogView extends libPictView
 		let tmpEntries = this.pict.AppData.Facto.CatalogEntries;
 		if (!tmpEntries || tmpEntries.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No catalog entries yet. Add sources to your research catalog.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No catalog entries yet. Add sources to your research catalog.</p>';
 			return;
 		}
 
@@ -37,7 +37,7 @@ class FactoCatalogView extends libPictView
 		for (let i = 0; i < tmpEntries.length; i++)
 		{
 			let tmpEntry = tmpEntries[i];
-			let tmpVerified = tmpEntry.Verified ? '<span style="color:#28a745;">&#10003;</span>' : '<span style="color:#ccc;">&#10007;</span>';
+			let tmpVerified = tmpEntry.Verified ? '<span style="color:var(--theme-color-status-success, #28a745);">&#10003;</span>' : '<span style="color:var(--theme-color-border-default, #ccc);">&#10007;</span>';
 			tmpHtml += '<tr>';
 			tmpHtml += '<td>' + (tmpEntry.IDSourceCatalogEntry || '') + '</td>';
 			tmpHtml += '<td>' + (tmpEntry.Agency || '') + '</td>';
@@ -171,11 +171,11 @@ class FactoCatalogView extends libPictView
 			(pResponse) =>
 			{
 				let tmpDatasets = (pResponse && pResponse.Datasets) ? pResponse.Datasets : [];
-				let tmpHtml = '<h3 style="margin-bottom:8px; font-size:1em; color:#444;">Dataset Definitions for Entry #' + pIDEntry + '</h3>';
+				let tmpHtml = '<h3 style="margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Dataset Definitions for Entry #' + pIDEntry + '</h3>';
 
 				if (tmpDatasets.length === 0)
 				{
-					tmpHtml += '<p style="color:#888; font-style:italic; margin-bottom:8px;">No dataset definitions yet.</p>';
+					tmpHtml += '<p style="color:var(--theme-color-text-muted, #888); font-style:italic; margin-bottom:8px;">No dataset definitions yet.</p>';
 				}
 				else
 				{
@@ -184,8 +184,8 @@ class FactoCatalogView extends libPictView
 					{
 						let tmpDS = tmpDatasets[i];
 						let tmpStatusLabel = tmpDS.Provisioned
-							? '<span style="color:#28a745;">Provisioned (Source #' + tmpDS.IDSource + ', Dataset #' + tmpDS.IDDataset + ')</span>'
-							: '<span style="color:#888;">Not provisioned</span>';
+							? '<span style="color:var(--theme-color-status-success, #28a745);">Provisioned (Source #' + tmpDS.IDSource + ', Dataset #' + tmpDS.IDDataset + ')</span>'
+							: '<span style="color:var(--theme-color-text-muted, #888);">Not provisioned</span>';
 						let tmpActionBtn = '';
 						if (tmpDS.Provisioned)
 						{
@@ -209,7 +209,7 @@ class FactoCatalogView extends libPictView
 				}
 
 				// Add dataset definition form
-				tmpHtml += '<h4 style="margin-top:12px; margin-bottom:8px; font-size:0.95em; color:#555;">Add Dataset Definition</h4>';
+				tmpHtml += '<h4 style="margin-top:12px; margin-bottom:8px; font-size:0.95em; color:var(--theme-color-text-secondary, #555);">Add Dataset Definition</h4>';
 				tmpHtml += '<div class="inline-group">';
 				tmpHtml += '<div><label for="facto-catds-name">Name</label><input type="text" id="facto-catds-name" placeholder="e.g. Monthly Earthquake Feed"></div>';
 				tmpHtml += '<div><label for="facto-catds-format">Format</label>';
@@ -418,7 +418,7 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Research and catalog potential data sources before provisioning them as runtime Sources and Datasets.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Research and catalog potential data sources before provisioning them as runtime Sources and Datasets.</p>
 
 			<!-- Search -->
 			<div class="inline-group" style="margin-bottom:12px;">
@@ -437,7 +437,7 @@ module.exports.default_configuration =
 			<div id="facto-catalog-detail" style="margin-top:12px;"></div>
 
 			<!-- Add entry form -->
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Add Catalog Entry</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Add Catalog Entry</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-catalog-agency">Agency / Organization</label>
@@ -504,8 +504,8 @@ module.exports.default_configuration =
 			<button class="primary" onclick="pict.views['Facto-Catalog'].addEntry()">Add Catalog Entry</button>
 
 			<!-- Import / Export -->
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Import / Export</h3>
-			<textarea id="facto-catalog-import-json" rows="4" style="width:100%; font-family:monospace; font-size:0.85em; padding:8px; border:1px solid #ccc; border-radius:4px; margin-bottom:8px;" placeholder="Paste JSON array of catalog entries here..."></textarea>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Import / Export</h3>
+			<textarea id="facto-catalog-import-json" rows="4" style="width:100%; font-family:monospace; font-size:0.85em; padding:8px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; margin-bottom:8px;" placeholder="Paste JSON array of catalog entries here..."></textarea>
 			<button class="primary" onclick="pict.views['Facto-Catalog'].importCatalog()">Import JSON</button>
 			<button class="secondary" onclick="pict.views['Facto-Catalog'].exportCatalog()">Export Catalog</button>
 

package/source/services/web-app/pict-app/views/PictView-Facto-Datasets.js

@@ -28,7 +28,7 @@ class FactoDatasetsView extends libPictView
 		let tmpDatasets = this.pict.AppData.Facto.Datasets;
 		if (!tmpDatasets || tmpDatasets.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No datasets created yet.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No datasets created yet.</p>';
 			return;
 		}
 
@@ -131,10 +131,10 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Datasets are named collections of records. Types: Raw (ingested), Compositional (merged), Projection (flattened), Derived (computed).</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Datasets are named collections of records. Types: Raw (ingested), Compositional (merged), Projection (flattened), Derived (computed).</p>
 			<div id="facto-datasets-list"></div>
 
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Dataset</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Create Dataset</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-dataset-name">Name</label>

package/source/services/web-app/pict-app/views/PictView-Facto-Ingest.js

@@ -28,7 +28,7 @@ class FactoIngestView extends libPictView
 		let tmpJobs = this.pict.AppData.Facto.IngestJobs;
 		if (!tmpJobs || tmpJobs.length === 0)
 		{
-			tmpContainer.innerHTML = '<p style="color:#888; font-style:italic;">No ingest jobs yet.</p>';
+			tmpContainer.innerHTML = '<p style="color:var(--theme-color-text-muted, #888); font-style:italic;">No ingest jobs yet.</p>';
 			return;
 		}
 
@@ -197,10 +197,10 @@ module.exports.default_configuration =
 			<span class="accordion-toggle">&#9660;</span>
 		</div>
 		<div class="accordion-body">
-			<p style="margin-bottom:12px; color:#666; font-size:0.9em;">Track data ingest operations from configured sources into datasets.</p>
+			<p style="margin-bottom:12px; color:var(--theme-color-text-secondary, #666); font-size:0.9em;">Track data ingest operations from configured sources into datasets.</p>
 			<div id="facto-ingest-list"></div>
 
-			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:#444;">Create Ingest Job</h3>
+			<h3 style="margin-top:16px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Create Ingest Job</h3>
 			<div class="inline-group">
 				<div>
 					<label for="facto-ingest-source">Source ID</label>
@@ -215,8 +215,8 @@ module.exports.default_configuration =
 
 			<pre id="facto-ingest-log" style="display:none; margin-top:12px; padding:12px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:4px; font-size:0.85em; max-height:200px; overflow:auto; white-space:pre-wrap;"></pre>
 
-			<h3 style="margin-top:20px; margin-bottom:8px; font-size:1em; color:#444;">Paste &amp; Ingest</h3>
-			<p style="margin-bottom:8px; color:#666; font-size:0.85em;">Paste CSV or JSON content directly to ingest records.</p>
+			<h3 style="margin-top:20px; margin-bottom:8px; font-size:1em; color:var(--theme-color-text-secondary, #444);">Paste &amp; Ingest</h3>
+			<p style="margin-bottom:8px; color:var(--theme-color-text-secondary, #666); font-size:0.85em;">Paste CSV or JSON content directly to ingest records.</p>
 			<div class="inline-group">
 				<div>
 					<label for="facto-ingest-paste-dataset">Dataset ID</label>
@@ -239,7 +239,7 @@ module.exports.default_configuration =
 					<input type="text" id="facto-ingest-paste-type" placeholder="data">
 				</div>
 			</div>
-			<textarea id="facto-ingest-paste-content" rows="6" style="width:100%; padding:8px 12px; border:1px solid #ccc; border-radius:4px; font-size:0.9em; font-family:monospace; margin-bottom:10px;" placeholder="Paste CSV or JSON data here..."></textarea>
+			<textarea id="facto-ingest-paste-content" rows="6" style="width:100%; padding:8px 12px; border:1px solid var(--theme-color-border-default, #ccc); border-radius:4px; font-size:0.9em; font-family:monospace; margin-bottom:10px;" placeholder="Paste CSV or JSON data here..."></textarea>
 			<button class="primary" onclick="pict.views['Facto-Ingest'].ingestPastedContent()">Ingest</button>
 
 		</div>