Cleanup - module dependencies removed, Perspective merged, UNDER THE HOOD and QUERY fixed

js/app.js

@@ -1,29 +1,35 @@
 /**
  * APPLICATION ORCHESTRATOR (Vue 3)
  * --------------------------------
- * This module serves as the entry point. It binds the reactive state
- * to the DOM, handles user inputs, and acts as the controller that 
- * passes data between the Event Log, Domain Actions, Ontologies, and Renderers.
+ * Binds the single reactive state to the DOM, handles user inputs, and routes
+ * data between the Event Log, Domain Actions, Ontologies (SMIM), Storage (SMS),
+ * Viewpoints (URMSM), and Renderers.
  */
 
 import { createApp, computed, watch, onMounted, ref, reactive, nextTick } from 'vue';
-import { state, advanceTime, loadState } from './state.js';
+import { state, advanceTime, loadState, setPerspective, nextSequence } from './state.js';
 import { i18n } from './i18n.js';
-import { 
-  createRegisterPartEvent, 
-  createAssembleEvent, 
-  createReportDefectEvent, 
-  createDismantleEvent 
+import {
+  createRegisterPartEvent,
+  createAssembleEvent,
+  createReportDefectEvent,
+  createRevokeDefectEvent,
+  createDismantleEvent
 } from './smrm/actions.js';
-import { ENTITY_CLASSES, RELATION_TYPES } from './smrm/definitions.js';
+import { ENTITY_CLASSES, RELATION_TYPES, INTERNAL_PROPERTY_KEYS, inferEntityClass } from './smrm/definitions.js';
 import * as bfoAdapter from './smim/bfo.js';
 import * as isoAdapter from './smim/iso15926.js';
 import * as naiveAdapter from './smim/naive.js';
 import { initVisNetwork, updateVisNetwork } from './renderers/vis-adapter.js';
 import { updateMermaidNetwork } from './renderers/mermaid-adapter.js';
-import { generateBomTree } from './urmsm/bom-view.js';
+import { generateBomTrees } from './urmsm/bom-view.js';
 import { reduceGraphForSMRM } from './urmsm/smrm-view.js';
-import { generateLpgStorage, generateLpgQuery } from './sms/lpg-generator.js';
+import {
+  generateLpgNodeStorage,
+  generateLpgStorage,
+  generateLpgQuery,
+  evaluateLiveQuery
+} from './sms/lpg-generator.js';
 import { generateRdfStorage, generateRdfQuery } from './sms/rdf-generator.js';
 import { generatePhysicalGraph } from './sms/sms-graph-generator.js';
 import {
@@ -35,8 +41,8 @@ import {
 /**
  * RECURSIVE BOM TREE NODE COMPONENT
  * ---------------------------------
- * Pure Vue component for rendering hierarchical Bill of Materials nodes
- * without raw HTML strings or external DOM manipulation.
+ * Renders hierarchical Bill of Materials nodes with entity class badges
+ * and surviving defect indicators at time T.
  */
 const BomNode = {
   name: 'BomNode',
@@ -48,7 +54,15 @@ const BomNode = {
   },
   template: `
     <li>
-      <strong>{{ node.id }}</strong>
+      <span class="bom-node-row">
+        <strong>{{ node.id }}</strong>
+        <span class="bom-class-badge">{{ node.entityClass }}</span>
+        <span
+          v-for="def in (node.defects || [])"
+          :key="def"
+          class="bom-defect-badge"
+        >⚠️ {{ def }}</span>
+      </span>
       <ul v-if="node.children && node.children.length > 0" class="tree">
         <bom-node
           v-for="child in node.children"
@@ -65,96 +79,13 @@ const App = {
     BomNode
   },
   setup() {
-    // 1. Local UI Settings (Isolated from domain state)
-    const settings = reactive({
-      language: 'sv',         // Available options: 'sv', 'en', 'ru'
-      ontology: 'NAIVE_NODE', // SMIM Top-Level Ontology: 'BFO' | 'ISO15926' | 'NAIVE_NODE' | 'NAIVE_EDGE'
-      storage: 'LPG',         // SMS Storage Paradigm: 'LPG' or 'RDF'
-      engine: 'vis',          // Renderer: 'vis' (Vis.js) or 'mermaid'
-      perspective: 'SMRM'     // Perspective: 'SMRM' | 'SMIM' | 'SMS'
-    });
-
-    // User Role State ('UNI_ENGINEER')
-    const userRole = ref('UNI_ENGINEER');
-    watch(userRole, (newRole) => {
-      state.userRole = newRole;
-    });
-    watch(() => state.userRole, (newRole) => {
-      if (newRole && userRole.value !== newRole) {
-        userRole.value = newRole;
-      }
-    });
-
-    // Synchronise reactive ontology between settings and domain state
-    watch(() => state.ontology, (newOnto) => {
-      if (newOnto === 'ISO_15926_4D' || newOnto === 'ISO15926') {
-        settings.ontology = 'ISO15926';
-      } else if (newOnto === 'NAIVE_NODE') {
-        settings.ontology = 'NAIVE_NODE';
-      } else if (newOnto === 'NAIVE_EDGE') {
-        settings.ontology = 'NAIVE_EDGE';
-      } else if (newOnto === 'NAIVE') {
-        settings.ontology = 'NAIVE_NODE';
-      } else if (newOnto === 'BFO') {
-        settings.ontology = 'BFO';
-      }
-    }, { immediate: true });
-    watch(() => settings.ontology, (newOnto) => {
-      if (state.ontology !== newOnto) {
-        state.ontology = newOnto;
-      }
-    });
-
-    // Synchronise perspective between settings and domain state
-    watch(() => state.perspective, (newPersp) => {
-      if (newPersp && settings.perspective !== newPersp) {
-        settings.perspective = newPersp;
-      }
-    }, { immediate: true });
-    watch(() => settings.perspective, (newPersp) => {
-      if (state.perspective !== newPersp) {
-        state.perspective = newPersp;
-      }
-    });
-
-    // Synchronise engine between settings and domain state
-    watch(() => state.graphEngine, (newEngine) => {
-      const lower = (newEngine || 'VIS').toLowerCase();
-      if (settings.engine !== lower) {
-        settings.engine = lower;
-      }
-    }, { immediate: true });
-    watch(() => settings.engine, (newEngine) => {
-      const upper = (newEngine || 'vis').toUpperCase();
-      if (state.graphEngine !== upper) {
-        state.graphEngine = upper;
-      }
-    });
-
     // DOM References for renderers & file operations
     const visContainer = ref(null);
     const mermaidContainer = ref(null);
     const fileInput = ref(null);
 
-    // Form inputs
-    const partNameInput = ref('');
-    const selectedParent = ref('System_A');
-    const selectedEdgeToRemove = ref('');
-    const showHistory = ref(true);
-
-    // New Sandbox & Domain Extension Form inputs
-    const selectedNodeClass = ref(ENTITY_CLASSES[0]);
-    const newNodeIdInput = ref('');
-    const selectedRelSource = ref('System_A');
-    const selectedRelType = ref(RELATION_TYPES[0]);
-    const selectedRelTarget = ref('');
-    const propTargetType = ref('NODE');
-    const propTargetId = ref('');
-    const propKeyInput = ref('');
-    const propValInput = ref('');
-
     // Universal Engineer Business UI inputs
-    const bizRegType = ref('Vehicle');
+    const bizRegType = ref('Part');
     const bizRegId = ref('');
     const bizInstSource = ref('');
     const bizInstTarget = ref('');
@@ -173,30 +104,14 @@ const App = {
     const audioDuration = ref(0);
     const showSubtitles = ref(true);
     const currentSubtitleText = ref('');
-    const executedTimelineActions = ref(new Set());
 
     // Layout State (Flex percentages for resizers)
-    const layout = reactive({ leftWidth: 66, bomHeight: 25, storageHeight: 40 });
-
-    // Active dictionary based on local settings
-    const t = computed(() => i18n[settings.language]);
+    const layout = reactive({ leftWidth: 64, bomHeight: 24, storageHeight: 42 });
 
-    /**
-     * Resolves the domain entity class of a node by inspecting ID conventions.
-     *
-     * @param {string} nodeId - Identifier of the node.
-     * @returns {string} Domain entity class ('Vehicle' | 'Slot' | 'Part' | 'Defect' | 'Warehouse').
-     */
-    function getNodeEntityClass(nodeId) {
-      if (!nodeId) return 'Part';
-      if (/^veh/i.test(nodeId) || /^sys/i.test(nodeId)) return 'Vehicle';
-      if (/^slot/i.test(nodeId)) return 'Slot';
-      if (/^ware|^wh/i.test(nodeId)) return 'Warehouse';
-      if (/^def/i.test(nodeId)) return 'Defect';
-      return 'Part';
-    }
+    // Active dictionary based on state.language
+    const t = computed(() => i18n[state.language] || i18n.en);
 
-    // Dynamic entity projection: Reconstruct base entities from pure business events in eventLog
+    // Reconstruct base registered entities up to state.currentTime
     const baseNodes = computed(() => {
       const nodeMap = new Map();
 
@@ -204,27 +119,30 @@ const App = {
         if (event.valid_from !== undefined && event.valid_from > state.currentTime) return;
 
         if (event.type === 'REGISTER_PART' && event.partId) {
+          const cls = inferEntityClass(event.partId, event.entityClass);
           nodeMap.set(event.partId, {
             id: event.partId,
             label: event.partId,
-            type: getNodeEntityClass(event.partId),
-            entityClass: getNodeEntityClass(event.partId)
+            type: cls,
+            entityClass: cls
           });
         } else if (event.type === 'ASSEMBLE') {
           if (event.parentId && !nodeMap.has(event.parentId)) {
+            const pCls = inferEntityClass(event.parentId);
             nodeMap.set(event.parentId, {
               id: event.parentId,
               label: event.parentId,
-              type: getNodeEntityClass(event.parentId),
-              entityClass: getNodeEntityClass(event.parentId)
+              type: pCls,
+              entityClass: pCls
             });
           }
           if (event.childId && !nodeMap.has(event.childId)) {
+            const cCls = inferEntityClass(event.childId);
             nodeMap.set(event.childId, {
               id: event.childId,
               label: event.childId,
-              type: getNodeEntityClass(event.childId),
-              entityClass: getNodeEntityClass(event.childId)
+              type: cCls,
+              entityClass: cCls
             });
           }
         }
@@ -233,151 +151,140 @@ const App = {
       return Array.from(nodeMap.values());
     });
 
-    const availableNodes = computed(() => {
-      return baseNodes.value.map(n => n.id);
-    });
+    const availableNodes = computed(() => baseNodes.value.map(n => n.id));
 
-    const activeNodes = computed(() => {
-      return availableNodes.value;
-    });
+    const activeParts = computed(() =>
+      baseNodes.value.filter(n => n.entityClass !== 'Slot' && n.entityClass !== 'Warehouse').map(n => n.id)
+    );
 
-    const activeEdges = computed(() => {
-      return naiveAdapter.generateSemanticGraph(
-        state.eventLog,
-        baseNodes.value,
-        state.currentTime
-      ).edges.filter(e => e.properties?.isCurrent !== false);
-    });
+    const activeWarehouses = computed(() =>
+      baseNodes.value.filter(n => n.entityClass === 'Warehouse').map(n => n.id)
+    );
 
-    const activeVehicles = computed(() => availableNodes.value.filter(id => getNodeEntityClass(id) === 'Vehicle'));
-    const activeSlots = computed(() => availableNodes.value.filter(id => getNodeEntityClass(id) === 'Slot'));
-    const activeParts = computed(() => availableNodes.value.filter(id => !id.startsWith('Slot_')));
-    const activeWarehouses = computed(() => availableNodes.value.filter(id => getNodeEntityClass(id) === 'Warehouse'));
+    const bizInstallSources = computed(() =>
+      baseNodes.value.filter(n => n.entityClass === 'Part').map(n => n.id)
+    );
 
-    const bizInstallSources = computed(() => {
-      return availableNodes.value.filter(id => !id.startsWith('Slot_'));
-    });
+    const bizInstallTargets = computed(() =>
+      baseNodes.value.filter(n => n.entityClass === 'Vehicle' || n.entityClass === 'Part').map(n => n.id)
+    );
+
+    /**
+     * Central Event Dispatcher (Pure Event Sourcing)
+     * Appends immutable business facts to the event log.
+     */
+    function dispatch(event) {
+      if (!event) return;
+      state.eventLog.push(event);
+    }
+
+    // Core Transformation Pipeline: Event Log -> SMIM Canonical Semantic Graph
+    const semanticGraph = computed(() => {
+      const opts = {
+        ontology: state.ontology,
+        showHistory: state.showHistory
+      };
 
-    const bizInstallTargets = computed(() => {
-      return availableNodes.value.filter(id => !id.startsWith('Slot_'));
+      if (state.ontology === 'BFO') {
+        return bfoAdapter.generateSemanticGraph(state.eventLog, baseNodes.value, state.currentTime, opts);
+      }
+      if (state.ontology === 'ISO15926') {
+        return isoAdapter.generateSemanticGraph(state.eventLog, baseNodes.value, state.currentTime, opts);
+      }
+      return naiveAdapter.generateSemanticGraph(state.eventLog, baseNodes.value, state.currentTime, opts);
     });
 
+    // Engineer SMRM reduced graph (used for BOM, SMRM view, and installed component discovery)
+    const smrmReducedGraph = computed(() => reduceGraphForSMRM(semanticGraph.value));
+
     const installedComponents = computed(() => {
       const comps = new Set();
-      activeEdges.value.forEach(e => {
-        if (e.label === 'mounted_in' || e.label === 'stored_at') {
-          comps.add(e.childId || e.from);
+      smrmReducedGraph.value.edges.forEach(e => {
+        if (e.properties?.isCurrent === false) return;
+        if (e.label === 'has_part') {
+          comps.add(e.to);
+        } else if (e.label === 'mounted_in' || e.label === 'stored_at') {
+          comps.add(e.from);
         }
       });
       return Array.from(comps).filter(id => !id.startsWith('Slot_'));
     });
 
+    // Active Defects List (respecting REVOKE_DEFECT events)
     const activeDefectsList = computed(() => {
-      return state.eventLog
-        .map((e, index) => ({ event: e, logIndex: index }))
-        .filter(({ event: e }) => e.type === 'REPORT_DEFECT' && (e.valid_to === null || e.valid_to > state.currentTime) && (e.valid_from === undefined || e.valid_from <= state.currentTime))
-        .map(({ event: e, logIndex }) => {
-          const id = e.id || `def_${logIndex}_${e.targetId}_${e.defectName}`;
-          return {
-            id,
-            logIndex,
+      const activeMap = new Map();
+
+      state.eventLog.forEach((e, index) => {
+        if (e.valid_from !== undefined && e.valid_from > state.currentTime) return;
+
+        if (e.type === 'REPORT_DEFECT') {
+          if (e.valid_to !== null && e.valid_to !== undefined && e.valid_to <= state.currentTime) return;
+          const key = `${e.targetId}::${e.defectName}`;
+          activeMap.set(key, {
+            id: e.id || `def_${index}_${e.targetId}_${e.defectName}`,
+            logIndex: index,
             targetId: e.targetId,
             defectName: e.defectName,
             defectValue: e.defectValue,
             label: `${e.targetId} • ${e.defectName}=${e.defectValue}`
-          };
-        });
+          });
+        } else if (e.type === 'REVOKE_DEFECT') {
+          const key = `${e.targetId}::${e.defectName}`;
+          activeMap.delete(key);
+        }
+      });
+
+      return Array.from(activeMap.values());
     });
 
+    // Keep select dropdown defaults synchronised with available options
     watch(bizInstallSources, (sources) => {
-      if (!sources.includes(bizInstSource.value)) {
-        bizInstSource.value = sources[0] || '';
-      }
+      if (!sources.includes(bizInstSource.value)) bizInstSource.value = sources[0] || '';
     }, { immediate: true });
 
     watch(bizInstallTargets, (targets) => {
-      if (!targets.includes(bizInstTarget.value)) {
-        bizInstTarget.value = targets[0] || '';
-      }
+      if (!targets.includes(bizInstTarget.value)) bizInstTarget.value = targets[0] || '';
     }, { immediate: true });
 
     watch(activeParts, (parts) => {
-      if (!parts.includes(bizStorePart.value)) {
-        bizStorePart.value = parts[0] || '';
-      }
+      if (!parts.includes(bizStorePart.value)) bizStorePart.value = parts[0] || '';
     }, { immediate: true });
 
     watch(activeWarehouses, (warehouses) => {
-      if (!warehouses.includes(bizStoreTarget.value)) {
-        bizStoreTarget.value = warehouses[0] || '';
-      }
+      if (!warehouses.includes(bizStoreTarget.value)) bizStoreTarget.value = warehouses[0] || '';
     }, { immediate: true });
 
     watch(installedComponents, (comps) => {
-      if (!comps.includes(bizDismPart.value)) {
-        bizDismPart.value = comps[0] || '';
-      }
+      if (!comps.includes(bizDismPart.value)) bizDismPart.value = comps[0] || '';
     }, { immediate: true });
 
     watch(activeDefectsList, (defects) => {
-      if (!defects.some(d => d.id === bizRevDefect.value)) {
-        bizRevDefect.value = defects[0]?.id || '';
-      }
+      if (!defects.some(d => d.id === bizRevDefect.value)) bizRevDefect.value = defects[0]?.id || '';
     }, { immediate: true });
 
     watch(availableNodes, (nodes) => {
-      if (!nodes.includes(bizDefTarget.value)) {
-        bizDefTarget.value = nodes[0] || '';
-      }
+      if (!nodes.includes(bizDefTarget.value)) bizDefTarget.value = nodes[0] || '';
     }, { immediate: true });
 
-    /**
-     * Central Event Dispatcher
-     * ------------------------
-     * Receives domain action events, validates consistency, and mutates
-     * the event log strictly according to Event Sourcing principles.
-     * 
-     * @param {Object} event - The domain event object to dispatch.
-     */
-    /**
-     * Central Event Dispatcher (Pure Event Sourcing)
-     * ------------------------------------------------
-     * Directly appends immutable business facts to the event log.
-     * 
-     * @param {Object} event - The domain event object to dispatch.
-     */
-    function dispatch(event) {
-      if (!event) return;
-      state.eventLog.push(event);
-    }
+    // Derived Views for Sidebar (URMSM & SMS)
+    const bomTrees = computed(() => generateBomTrees(semanticGraph.value));
 
-    // The core transformation pipeline: Event Log -> Ontology -> Semantic Graph
-    const semanticGraph = computed(() => {
-      const eventsToProcess = state.eventLog;
-      
-      if (settings.ontology === 'BFO') {
-        return bfoAdapter.generateSemanticGraph(eventsToProcess, baseNodes.value, state.currentTime);
-      } else if (settings.ontology === 'ISO15926') {
-        return isoAdapter.generateSemanticGraph(eventsToProcess, baseNodes.value, state.currentTime);
-      } else {
-        return naiveAdapter.generateSemanticGraph(eventsToProcess, baseNodes.value, state.currentTime, {
-          ontology: settings.ontology
-        });
+    const lpgNodeRecords = computed(() => {
+      if (state.storage === 'LPG') {
+        return generateLpgNodeStorage(semanticGraph.value);
       }
+      return [];
     });
 
-    // Derived Views for the Sidebar (URMSM & SMS)
-    const bomTree = computed(() => generateBomTree('System_A', activeEdges.value));
-    
     const lpgRecords = computed(() => {
-      if (settings.storage === 'LPG') {
+      if (state.storage === 'LPG') {
         return generateLpgStorage(semanticGraph.value);
       }
       return [];
     });
 
     const rdfTtl = computed(() => {
-      if (settings.storage === 'RDF') {
+      if (state.storage === 'RDF') {
         return generateRdfStorage(semanticGraph.value);
       }
       return '';
@@ -385,7 +292,11 @@ const App = {
 
     function formatProperties(props) {
       if (!props) return '';
-      const entries = Object.entries(props).filter(([key]) => key !== 'isCurrent');
+      const entries = Object.entries(props).filter(
+        ([key, val]) => !INTERNAL_PROPERTY_KEYS.includes(key) || key === 'validFrom' || key === 'validTo' || key === 'atTime'
+          ? (key !== 'isCurrent' && val !== undefined)
+          : false
+      );
       if (entries.length === 0) return '';
       return entries.map(([k, v]) => {
         const valStr = v === null ? 'null' : (typeof v === 'number' ? `T${v}` : `'${v}'`);
@@ -394,80 +305,102 @@ const App = {
     }
 
     const queryCode = computed(() => {
-      if (settings.storage === 'LPG') {
-        return generateLpgQuery(semanticGraph.value, state.currentTime);
-      } else {
-        return generateRdfQuery(semanticGraph.value, state.currentTime);
+      if (state.storage === 'LPG') {
+        return generateLpgQuery(semanticGraph.value, state.currentTime, state.ontology);
       }
+      return generateRdfQuery(semanticGraph.value, state.currentTime, state.ontology);
     });
 
-    // Physical projection (SMS) vs Engineer View (SMRM) vs Canonical Logical (SMIM) graph routing
+    const liveQueryResult = computed(() =>
+      evaluateLiveQuery(semanticGraph.value, state.currentTime, state.ontology)
+    );
+
+    // Route active graph to canvas based on the 4 unified Perspectives
     const activeGraph = computed(() => {
-      if (settings.perspective === 'SMS') {
-        return generatePhysicalGraph(semanticGraph.value, settings.storage);
+      if (state.perspective === 'SMS_LPG') {
+        return generatePhysicalGraph(semanticGraph.value, 'LPG');
+      }
+      if (state.perspective === 'SMS_RDF') {
+        return generatePhysicalGraph(semanticGraph.value, 'RDF');
       }
-      if (settings.perspective === 'SMRM') {
-        return reduceGraphForSMRM(semanticGraph.value);
+      if (state.perspective === 'SMRM') {
+        return smrmReducedGraph.value;
       }
       return semanticGraph.value;
     });
 
-    // Reactive Graph Caption
+    // Reactive Graph Caption (truthful to the active perspective)
     const graphCaption = computed(() => {
       let ontoText = 'BFO (3D)';
-      if (settings.ontology === 'ISO15926') ontoText = 'ISO 15926 (4D)';
-      if (settings.ontology === 'NAIVE_NODE') ontoText = t.value.ontoNaiveNode || 'Naive Graph (Node)';
-      if (settings.ontology === 'NAIVE_EDGE') ontoText = t.value.ontoNaiveEdge || 'Naive Graph (Edge)';
-      const storageText = settings.storage;
+      if (state.ontology === 'ISO15926') ontoText = 'ISO 15926 (4D)';
+      if (state.ontology === 'NAIVE_NODE') ontoText = t.value.ontoNaiveNode;
+      if (state.ontology === 'NAIVE_EDGE') ontoText = t.value.ontoNaiveEdge;
+
       let viewText = t.value.viewLogicalCaption;
-      if (settings.perspective === 'SMRM') viewText = t.value.viewSmrmCaption;
-      if (settings.perspective === 'SMS') viewText = t.value.viewPhysicalCaption;
-      return `${ontoText} | ${storageText} | ${viewText}`;
+      if (state.perspective === 'SMRM') viewText = t.value.viewSmrmCaption;
+      if (state.perspective === 'SMS_LPG') viewText = t.value.viewPhysicalLpgCaption;
+      if (state.perspective === 'SMS_RDF') viewText = t.value.viewPhysicalRdfCaption;
+
+      return `${ontoText} | ${viewText}`;
     });
 
-    // Contextual Dynamic Legend
+    // Contextual Dynamic Legend matching the rendered canvas
     const graphLegendItems = computed(() => {
       const nodes = [];
       const edges = [];
       const dict = t.value.legend;
 
-      if (settings.ontology === 'NAIVE_NODE' || settings.ontology === 'NAIVE_EDGE' || settings.ontology === 'NAIVE') {
+      // In Engineer (SMRM) Perspective or Naive ontologies, domain entities are shown
+      if (state.perspective === 'SMRM' || state.ontology === 'NAIVE_NODE' || state.ontology === 'NAIVE_EDGE') {
         nodes.push({ id: 'naiveVehicle', label: dict.naiveVehicle, swatch: 'swatch-box-vehicle' });
-        nodes.push({ id: 'naiveSlot', label: dict.naiveSlot, swatch: 'swatch-box-slot' });
+        if (state.perspective !== 'SMRM') {
+          nodes.push({ id: 'naiveSlot', label: dict.naiveSlot, swatch: 'swatch-box-slot' });
+        }
         nodes.push({ id: 'naivePart', label: dict.naivePart, swatch: 'swatch-box-part' });
         nodes.push({ id: 'naiveDefect', label: dict.naiveDefect, swatch: 'swatch-diamond-defect' });
         nodes.push({ id: 'naiveWarehouse', label: dict.naiveWarehouse, swatch: 'swatch-box-warehouse' });
 
-        edges.push({ id: 'relHasSlot', label: dict.relHasSlot, swatch: 'swatch-line-slot' });
-        edges.push({ id: 'relMountedIn', label: dict.relMountedIn, swatch: 'swatch-line-mount' });
-        edges.push({ id: 'relStoredAt', label: dict.relStoredAt, swatch: 'swatch-line-store' });
-        edges.push({ id: 'relHasDefect', label: dict.relHasDefect, swatch: 'swatch-line-defect' });
-      } else if (settings.ontology === 'BFO') {
+        if (state.perspective === 'SMS_RDF') {
+          nodes.push({ id: 'rdfStmt', label: dict.rdfStmt, swatch: 'swatch-diamond' });
+          nodes.push({ id: 'rdfLit', label: dict.rdfLit, swatch: 'swatch-literal' });
+          edges.push({ id: 'rdfPred', label: dict.rdfPred, swatch: 'swatch-line-past' });
+        } else {
+          if (state.perspective !== 'SMRM') {
+            edges.push({ id: 'relHasSlot', label: dict.relHasSlot, swatch: 'swatch-line-slot' });
+          }
+          edges.push({ id: 'relMountedIn', label: dict.relMountedIn, swatch: 'swatch-line-mount' });
+          edges.push({ id: 'relStoredAt', label: dict.relStoredAt, swatch: 'swatch-line-store' });
+          edges.push({ id: 'relHasDefect', label: dict.relHasDefect, swatch: 'swatch-line-defect' });
+        }
+      } else if (state.ontology === 'BFO') {
         nodes.push({ id: 'bfoSys', label: dict.bfoSys, swatch: 'swatch-box-sys' });
         nodes.push({ id: 'bfoElem', label: dict.bfoElem, swatch: 'swatch-box-elem' });
         nodes.push({ id: 'bfoQuality', label: dict.bfoQuality, swatch: 'swatch-diamond' });
 
-        if (settings.perspective === 'SMS' && settings.storage === 'RDF') {
+        if (state.perspective === 'SMS_RDF') {
           nodes.push({ id: 'rdfStmt', label: dict.rdfStmt, swatch: 'swatch-diamond' });
           nodes.push({ id: 'rdfLit', label: dict.rdfLit, swatch: 'swatch-literal' });
           edges.push({ id: 'rdfPred', label: dict.rdfPred, swatch: 'swatch-line-past' });
         } else {
           edges.push({ id: 'bfoActive', label: dict.bfoActiveEdge, swatch: 'swatch-line-active' });
           edges.push({ id: 'bfoInheres', label: dict.bfoInheres, swatch: 'swatch-line-transition' });
-          if (showHistory.value) {
+          if (state.showHistory) {
             edges.push({ id: 'bfoPast', label: dict.bfoPastEdge, swatch: 'swatch-line-past' });
           }
         }
       } else {
-        // ISO 15926 (4D)
+        // ISO 15926 (4D) in SMIM / SMS_LPG / SMS_RDF
         nodes.push({ id: 'iso4d', label: dict.iso4d, swatch: 'swatch-box-4d' });
         nodes.push({ id: 'isoState', label: dict.isoState, swatch: 'swatch-box-state' });
         nodes.push({ id: 'isoDefect', label: dict.isoDefect, swatch: 'swatch-diamond-defect' });
+        if (state.perspective === 'SMS_RDF') {
+          nodes.push({ id: 'rdfLit', label: dict.rdfLit, swatch: 'swatch-literal' });
+        }
         edges.push({ id: 'isoPart', label: dict.isoPartRel, swatch: 'swatch-line-active' });
         edges.push({ id: 'isoSlice', label: dict.isoSliceRel, swatch: 'swatch-line-past' });
         edges.push({ id: 'isoDefectRel', label: dict.isoDefectRel, swatch: 'swatch-line-defect' });
 
-        if (settings.perspective === 'SMS' && settings.storage === 'LPG') {
+        if (state.perspective === 'SMS_LPG') {
           edges.push({ id: 'isoTrans', label: dict.isoTransitionRel, swatch: 'swatch-line-transition' });
         }
       }
@@ -475,35 +408,51 @@ const App = {
       return { nodes, edges };
     });
 
-    // Watch for graph or engine changes to trigger re-renders
-    watch([activeGraph, () => settings.engine], () => {
+    // Re-render canvas when activeGraph or engine changes
+    watch([activeGraph, () => state.graphEngine], () => {
       renderGraph();
     }, { deep: true });
 
     function renderGraph() {
       if (state.currentView === 'MENU') return;
       const graphToRender = activeGraph.value;
-      if (settings.engine === 'vis') {
-        const isComplex = settings.ontology === 'ISO15926' || settings.perspective === 'SMS';
+      if (state.graphEngine === 'VIS') {
+        const isComplex = state.ontology === 'ISO15926' || state.perspective.startsWith('SMS_');
         updateVisNetwork(graphToRender, isComplex);
       } else if (mermaidContainer.value) {
         updateMermaidNetwork(graphToRender, mermaidContainer.value);
       }
     }
 
-    // Watch for view changes to initialise the canvas when entering the sandbox workspace
+    function seedInitialSandboxData() {
+      state.eventLog.splice(0, state.eventLog.length);
+      state.currentTime = 0;
+      state.edgeSequence = 1;
+      dispatch(createRegisterPartEvent('System_A', 0, 'Vehicle', nextSequence()));
+      dispatch(createRegisterPartEvent('SubAssembly_1', 0, 'Part', nextSequence()));
+      dispatch(createAssembleEvent('System_A', 'SubAssembly_1', 'mounted_in', 0, nextSequence()));
+      dispatch(createRegisterPartEvent('Part_A', 0, 'Part', nextSequence()));
+      dispatch(createAssembleEvent('System_A', 'Part_A', 'mounted_in', 0, nextSequence()));
+      dispatch(createRegisterPartEvent('Sensor_X', 0, 'Part', nextSequence()));
+      dispatch(createAssembleEvent('SubAssembly_1', 'Sensor_X', 'mounted_in', 0, nextSequence()));
+      dispatch(createRegisterPartEvent('Warehouse_1', 0, 'Warehouse', nextSequence()));
+    }
+
+    // Watch for view transitions (MENU vs SANDBOX vs SCENARIO)
     watch(() => state.currentView, async (newView) => {
       if (newView !== 'SCENARIO') {
-        stopAudio();
+        stopAudio(false);
       }
       if (newView === 'SCENARIO') {
-        userRole.value = 'UNI_ENGINEER';
-        state.eventLog.length = 0;
+        state.userRole = 'UNI_ENGINEER';
+        state.eventLog.splice(0, state.eventLog.length);
         resetTimeline(0);
         state.currentTime = 0;
         state.ontology = 'NAIVE_NODE';
-        state.perspective = 'SMRM';
+        setPerspective('SMIM');
         state.graphEngine = 'MERMAID';
+      } else if (newView === 'SANDBOX' && state.eventLog.length === 0) {
+        seedInitialSandboxData();
       }
       if (newView !== 'MENU') {
         await nextTick();
@@ -514,38 +463,22 @@ const App = {
       }
     });
 
-    // Lifecycle hooks
     onMounted(() => {
-      // Inject initial seed data via pure factories and central dispatcher
-      dispatch(createRegisterPartEvent('System_A', state.currentTime));
-      dispatch(createRegisterPartEvent('SubAssembly_1', state.currentTime));
-      dispatch(createAssembleEvent('System_A', 'SubAssembly_1', 'has_part', state.currentTime));
-      dispatch(createRegisterPartEvent('Part_A', state.currentTime));
-      dispatch(createAssembleEvent('System_A', 'Part_A', 'has_part', state.currentTime));
-      dispatch(createRegisterPartEvent('Sensor_X', state.currentTime));
-      dispatch(createAssembleEvent('SubAssembly_1', 'Sensor_X', 'has_part', state.currentTime));
-      
+      seedInitialSandboxData();
       if (state.currentView !== 'MENU' && visContainer.value) {
         initVisNetwork(visContainer.value);
         renderGraph();
       }
     });
 
-    // UI Event Handlers
-    /**
-     * Resets the application state, stops audio playback, and returns to the main menu.
-     */
     function goHome() {
-      stopAudio();
+      stopAudio(false);
       state.currentView = 'MENU';
       state.eventLog.splice(0, state.eventLog.length);
       state.currentTime = 0;
       state.edgeSequence = 1;
     }
 
-    /**
-     * Starts audio playback.
-     */
     function playAudio() {
       if (scenarioAudio.value) {
         scenarioAudio.value.play().catch(err => {
@@ -554,18 +487,12 @@ const App = {
       }
     }
 
-    /**
-     * Pauses audio playback.
-     */
     function pauseAudio() {
       if (scenarioAudio.value) {
         scenarioAudio.value.pause();
       }
     }
 
-    /**
-     * Toggles audio playback between play and pause states.
-     */
     function togglePlayAudio() {
       if (isPlaying.value) {
         pauseAudio();
@@ -574,10 +501,7 @@ const App = {
       }
     }
 
-    /**
-     * Stops audio playback, resets the timeline to zero, and clears the Event Sourcing log.
-     */
-    function stopAudio() {
+    function stopAudio(resetScenarioGraph = true) {
       if (scenarioAudio.value) {
         scenarioAudio.value.pause();
         scenarioAudio.value.currentTime = 0;
@@ -586,61 +510,44 @@ const App = {
       audioCurrentTime.value = 0;
       currentSubtitleText.value = '';
 
-      // Reset Event Sourcing state
-      state.eventLog.length = 0;
-      resetTimeline(0);
-      state.ontology = 'NAIVE_NODE';
-      state.perspective = 'SMRM';
-      state.graphEngine = 'MERMAID';
-      nextTick(() => {
-        renderGraph();
-      });
+      if (resetScenarioGraph) {
+        state.eventLog.splice(0, state.eventLog.length);
+        resetTimeline(0);
+        state.currentTime = 0;
+        state.ontology = 'NAIVE_NODE';
+        setPerspective('SMIM');
+        state.graphEngine = 'MERMAID';
+        nextTick(() => {
+          renderGraph();
+        });
+      }
     }
 
-    /**
-     * Synchronises reactive audio time, subtitles, and timeline graph events with HTML5 audio playback.
-     */
     function onTimeUpdate() {
       if (scenarioAudio.value) {
         audioCurrentTime.value = scenarioAudio.value.currentTime;
       }
-
       const currentTime = audioCurrentTime.value;
 
-      // Subtitle synchronisation
       const activeSubtitle = vanishingCrackScenario.subtitles.find(
         sub => currentTime >= sub.start && currentTime <= sub.end
       );
       currentSubtitleText.value = activeSubtitle ? activeSubtitle.text : '';
 
-      // Scenario timeline dispatcher
       dispatchScenarioTimeline(currentTime, state, renderGraph);
     }
 
-    /**
-     * Initialises audio duration when metadata is loaded.
-     */
     function onLoadedMetadata() {
       if (scenarioAudio.value) {
         audioDuration.value = scenarioAudio.value.duration || 0;
       }
     }
 
-    /**
-     * Handles completion of audio playback.
-     * Crucial: On audio end, do NOT rewind or reset the state. Let the graph remain on screen!
-     */
     function onAudioEnded() {
       isPlaying.value = false;
       currentSubtitleText.value = '';
     }
 
-    /**
-     * Seeks to a specific position in the audio timeline based on range input,
-     * resetting and re-evaluating the Event Sourcing state up to the new timestamp.
-     * 
-     * @param {Event} event - The range slider input event.
-     */
     function onSeek(event) {
       const targetTime = parseFloat(event.target.value);
       if (scenarioAudio.value) {
@@ -648,23 +555,16 @@ const App = {
       }
       audioCurrentTime.value = targetTime;
 
-      // Reset Event Sourcing state for replay
-      state.eventLog.length = 0;
+      state.eventLog.splice(0, state.eventLog.length);
       resetTimeline(0);
+      state.currentTime = 0;
       state.ontology = 'NAIVE_NODE';
-      state.perspective = 'SMRM';
+      setPerspective('SMIM');
       state.graphEngine = 'MERMAID';
 
-      // Fast-forward timeline events and update subtitles to targetTime
       onTimeUpdate();
     }
 
-    /**
-     * Formats seconds into a human-readable mm:ss format.
-     * 
-     * @param {number} seconds - Time duration in seconds.
-     * @returns {string} Formatted time string.
-     */
     function formatTime(seconds) {
       if (!seconds || isNaN(seconds) || seconds < 0) return '00:00';
       const mins = Math.floor(seconds / 60);
@@ -672,14 +572,14 @@ const App = {
       return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     }
 
-    /**
-     * Universal Engineer Action 1: Register Asset
-     */
+    // Engineer Domain Actions
     function handleBizRegister() {
       if (!bizRegId.value) return;
       const event = createRegisterPartEvent(
         bizRegId.value,
-        state.currentTime
+        state.currentTime,
+        bizRegType.value,
+        nextSequence()
       );
       if (event) {
         dispatch(event);
@@ -687,36 +587,28 @@ const App = {
       }
     }
 
-    /**
-     * Universal Engineer Action 2: Install / Assemble
-     */
     function handleBizInstall() {
       if (!bizInstSource.value || !bizInstTarget.value) return;
-      const childId = bizInstSource.value;
-      const parentId = bizInstTarget.value;
-      if (childId === parentId) return;
+      if (bizInstSource.value === bizInstTarget.value) return;
 
       const event = createAssembleEvent(
-        parentId,
-        childId,
+        bizInstTarget.value,
+        bizInstSource.value,
         'mounted_in',
-        state.currentTime
+        state.currentTime,
+        nextSequence()
       );
-      if (event) {
-        dispatch(event);
-      }
+      if (event) dispatch(event);
     }
 
-    /**
-     * Universal Engineer Action 3: Report Defect
-     */
     function handleBizReportDefect() {
       if (!bizDefTarget.value || !bizDefType.value) return;
       const event = createReportDefectEvent(
         bizDefTarget.value,
         bizDefType.value,
         bizDefVal.value || 'present',
-        state.currentTime
+        state.currentTime,
+        nextSequence()
       );
       if (event) {
         dispatch(event);
@@ -725,26 +617,30 @@ const App = {
       }
     }
 
-    /**
-     * Universal Engineer Action 4: Revoke Defect
-     */
     function handleBizRevokeDefect() {
       if (!bizRevDefect.value) return;
       const item = activeDefectsList.value.find(d => d.id === bizRevDefect.value);
-      if (item && item.logIndex !== undefined) {
-        state.eventLog.splice(item.logIndex, 1);
-        bizRevDefect.value = '';
+      if (item) {
+        const event = createRevokeDefectEvent(
+          item.targetId,
+          item.defectName,
+          state.currentTime,
+          item.id,
+          nextSequence()
+        );
+        if (event) {
+          dispatch(event);
+          bizRevDefect.value = '';
+        }
       }
     }
 
-    /**
-     * Universal Engineer Action 5: Dismantle
-     */
     function handleBizDismantle() {
       if (!bizDismPart.value) return;
       const event = createDismantleEvent(
         bizDismPart.value,
-        state.currentTime
+        state.currentTime,
+        nextSequence()
       );
       if (event) {
         dispatch(event);
@@ -752,73 +648,79 @@ const App = {
       }
     }
 
-    /**
-     * Universal Engineer Action 6: Move to Storage
-     */
     function handleBizStore() {
       if (!bizStorePart.value || !bizStoreTarget.value) return;
       const event = createAssembleEvent(
         bizStoreTarget.value,
         bizStorePart.value,
         'stored_at',
-        state.currentTime
+        state.currentTime,
+        nextSequence()
       );
-      if (event) {
-        dispatch(event);
-      }
+      if (event) dispatch(event);
     }
 
-    // Resizer Logic (Vue way)
+    // Resizer Handlers with active .dragging visual feedback
     function startResizeH(e) {
+      const resizerEl = e.currentTarget;
+      resizerEl?.classList.add('dragging');
       const startX = e.clientX;
       const startWidth = layout.leftWidth;
       const containerWidth = document.querySelector('.main-container').getBoundingClientRect().width;
-      
+
       const onMouseMove = (evt) => {
         const newWidth = startWidth + ((evt.clientX - startX) / containerWidth) * 100;
-        if (newWidth > 20 && newWidth < 80) layout.leftWidth = newWidth;
+        if (newWidth > 25 && newWidth < 78) layout.leftWidth = newWidth;
       };
-      
+
       const onMouseUp = () => {
+        resizerEl?.classList.remove('dragging');
         document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('mouseup', onMouseUp);
         document.body.classList.remove('no-select');
       };
-      
+
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
       document.body.classList.add('no-select');
     }
 
     function startResizeV(e, property, containerSelector) {
+      const resizerEl = e.currentTarget;
+      resizerEl?.classList.add('dragging');
       const startY = e.clientY;
       const startHeight = layout[property];
       const containerHeight = document.querySelector(containerSelector).getBoundingClientRect().height;
-      
+
       const onMouseMove = (evt) => {
         const newHeight = startHeight + ((evt.clientY - startY) / containerHeight) * 100;
-        if (newHeight > 10 && newHeight < 80) layout[property] = newHeight;
+        if (newHeight > 12 && newHeight < 75) layout[property] = newHeight;
       };
-      
+
       const onMouseUp = () => {
+        resizerEl?.classList.remove('dragging');
         document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('mouseup', onMouseUp);
         document.body.classList.remove('no-select');
       };
-      
+
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
       document.body.classList.add('no-select');
     }
 
-    /**
-     * Serialises and exports the current Event Sourcing state to a JSON file.
-     */
+    // Full JSON State Export & Import
     function saveJson() {
       const exportData = {
-        version: '1.0',
+        version: '2.0',
         savedAt: new Date().toISOString(),
-        userRole: userRole.value,
+        userRole: state.userRole,
+        ontology: state.ontology,
+        perspective: state.perspective,
+        storage: state.storage,
+        graphEngine: state.graphEngine,
+        language: state.language,
+        showHistory: state.showHistory,
         currentTime: state.currentTime,
         edgeSequence: state.edgeSequence,
         eventLog: JSON.parse(JSON.stringify(state.eventLog))
@@ -834,9 +736,6 @@ const App = {
       URL.revokeObjectURL(url);
     }
 
-    /**
-     * Opens the native file dialogue for loading a saved state JSON file.
-     */
     function triggerLoadJson() {
       if (fileInput.value) {
         fileInput.value.value = '';
@@ -844,11 +743,6 @@ const App = {
       }
     }
 
-    /**
-     * Reads, deserialises, and restores the application domain state from a JSON file.
-     * 
-     * @param {Event} e - HTML input change event.
-     */
     function onFileLoaded(e) {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -861,9 +755,6 @@ const App = {
             loadState({ eventLog: parsed });
           } else if (parsed && typeof parsed === 'object') {
             loadState(parsed);
-            if (parsed.userRole && (parsed.userRole === 'DB_ADMIN' || parsed.userRole === 'UNI_ENGINEER')) {
-              userRole.value = parsed.userRole;
-            }
           }
           nextTick(() => {
             renderGraph();
@@ -877,44 +768,44 @@ const App = {
     }
 
     return {
-      state, settings, t, layout, advanceTime, dispatch,
-      userRole, fileInput, saveJson, triggerLoadJson, onFileLoaded,
+      state, t, layout, advanceTime, setPerspective, dispatch,
+      fileInput, saveJson, triggerLoadJson, onFileLoaded,
       entityClasses: ENTITY_CLASSES,
       relationTypes: RELATION_TYPES,
-      availableNodes, goHome, showHistory,
-      activeNodes, activeEdges,
-      activeVehicles, activeSlots, activeParts, activeWarehouses,
+      availableNodes, goHome,
+      activeParts, activeWarehouses,
       bizRegType, bizRegId, handleBizRegister,
       bizInstSource, bizInstTarget, handleBizInstall, bizInstallSources, bizInstallTargets,
       bizDefTarget, bizDefType, bizDefVal, handleBizReportDefect,
       bizRevDefect, handleBizRevokeDefect, activeDefectsList,
       bizDismPart, handleBizDismantle, installedComponents,
       bizStorePart, bizStoreTarget, handleBizStore,
-      bomTree, lpgRecords, rdfTtl, formatProperties, queryCode,
+      bomTrees, lpgNodeRecords, lpgRecords, rdfTtl, formatProperties,
+      queryCode, liveQueryResult,
       visContainer, mermaidContainer,
       graphCaption, graphLegendItems,
       startResizeH, startResizeV,
       scenarioAudio, isPlaying, audioCurrentTime, audioDuration,
-      showSubtitles, currentSubtitleText, executedTimelineActions,
+      showSubtitles, currentSubtitleText,
       playAudio, pauseAudio, togglePlayAudio, stopAudio,
       onTimeUpdate, onLoadedMetadata, onAudioEnded, onSeek, formatTime
     };
   },
-  
+
   template: `
     <!-- Main Menu (Landing View) -->
     <div v-if="state.currentView === 'MENU'" class="landing-view">
       <div class="menu-card">
         <div class="menu-badge">IEC 63339 Workbench</div>
         <h1 class="menu-title">Knowledge Architecture Workbench</h1>
-        <p class="menu-subtitle">Top-Level Ontologies (SMIM), Storage Paradigms (SMS) &amp; Event Sourcing</p>
-        
+        <p class="menu-subtitle">Top-Level Ontologies (SMIM), Physical Storage (SMS) &amp; Event Sourcing</p>
+
         <div class="menu-actions">
           <button class="menu-btn menu-btn-primary" @click="state.currentView = 'SANDBOX'">
             <span class="btn-main-text">Sandbox Mode</span>
             <span class="btn-sub-text">Interactive exploration of 3D/4D ontologies &amp; temporal graph models</span>
           </button>
-          
+
           <button class="menu-btn menu-btn-scenario" @click="state.currentView = 'SCENARIO'">
             <span class="btn-main-text">Scenario: The Vanishing Crack</span>
             <span class="btn-sub-text">Guided demonstration of temporal defect tracing across lifecycle states</span>
@@ -923,331 +814,394 @@ const App = {
       </div>
     </div>
 
-    <!-- Main Sandbox Workspace -->
+    <!-- Main Sandbox & Scenario Workspace -->
     <div v-if="state.currentView !== 'MENU'" class="sandbox-workspace">
       <div class="control-deck">
-      <!-- Tier 1: Architecture Settings -->
-      <div class="deck-row deck-row-top">
-        <div class="section-label">
-          <span class="iec-badge">IEC 63339 / SMIM<span class="iec-tooltip" v-html="t.tooltips.smim"></span></span>
-          <span>{{ t.ontoTitle }}</span>
-        </div>
-        <div class="btn-group">
-          <button id="ctrl-onto-bfo" :class="{ active: settings.ontology === 'BFO' }" @click="settings.ontology = 'BFO'">BFO (3D)</button>
-          <button id="ctrl-onto-iso" :class="{ active: settings.ontology === 'ISO15926' }" @click="settings.ontology = 'ISO15926'">ISO 15926 (4D)</button>
-          <button id="ctrl-onto-naive-node" :class="{ active: settings.ontology === 'NAIVE_NODE' }" @click="settings.ontology = 'NAIVE_NODE'">{{ t.ontoNaiveNode }}</button>
-          <button id="ctrl-onto-naive-edge" :class="{ active: settings.ontology === 'NAIVE_EDGE' }" @click="settings.ontology = 'NAIVE_EDGE'">{{ t.ontoNaiveEdge }}</button>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="section-label">
-          <span class="iec-badge">IEC 63339 / SMS<span class="iec-tooltip" v-html="t.tooltips.sms"></span></span>
-          <span>{{ t.graphTitle }}</span>
-        </div>
-        <div class="btn-group">
-          <button id="ctrl-storage-lpg" :class="{ active: settings.storage === 'LPG' }" @click="settings.storage = 'LPG'">LPG</button>
-          <button id="ctrl-storage-rdf" :class="{ active: settings.storage === 'RDF' }" @click="settings.storage = 'RDF'">RDF (W3C)</button>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="section-label">🎨 <span>{{ t.engineTitle }}</span></div>
-        <div class="btn-group">
-          <button id="ctrl-engine-vis" :class="{ active: settings.engine === 'vis' }" @click="settings.engine = 'vis'">🌐 Vis.js</button>
-          <button id="ctrl-engine-mermaid" :class="{ active: settings.engine === 'mermaid' }" @click="settings.engine = 'mermaid'">📊 Mermaid</button>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="section-label">👁️ <span>{{ t.viewTitle }}</span></div>
-        <div class="btn-group">
-          <button id="ctrl-view-smrm" :class="{ active: settings.perspective === 'SMRM' }" @click="settings.perspective = 'SMRM'">{{ t.viewSmrm }}</button>
-          <button id="ctrl-view-logical" :class="{ active: settings.perspective === 'SMIM' }" @click="settings.perspective = 'SMIM'">{{ t.viewLogical }}</button>
-          <button id="ctrl-view-physical" :class="{ active: settings.perspective === 'SMS' }" @click="settings.perspective = 'SMS'">{{ t.viewPhysical }}</button>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- JSON State Operations -->
-        <button id="ctrl-save-json" class="secondary" @click="saveJson" :title="t.saveBtn">{{ t.saveBtn }}</button>
-        <button id="ctrl-load-json" class="secondary" @click="triggerLoadJson" :title="t.loadBtn">{{ t.loadBtn }}</button>
-        <input ref="fileInput" type="file" accept=".json" style="display: none;" @change="onFileLoaded" />
-
-        <div style="margin-left: auto;" class="btn-group flag-group">
-          <button id="ctrl-lang-sv" :class="{ active: settings.language === 'sv' }" @click="settings.language = 'sv'" title="Svenska">🇸🇪</button>
-          <button id="ctrl-lang-en" :class="{ active: settings.language === 'en' }" @click="settings.language = 'en'" title="British English">🇬🇧</button>
-          <button id="ctrl-lang-ru" :class="{ active: settings.language === 'ru' }" @click="settings.language = 'ru'" title="Русский">🇷🇺</button>
-        </div>
-      </div>
-
-      <!-- Universal Engineer Workspace -->
-      <template v-if="userRole === 'UNI_ENGINEER'">
-        <!-- Row 1: Time, Register, Install, Dismantle -->
-        <div class="deck-row">
-          <span id="biz-time-badge" class="badge">T = {{ state.currentTime }}</span>
-          <button id="biz-step-btn" @click="advanceTime">{{ t.stepBtn }}</button>
-
-          <div class="divider"></div>
-
-          <!-- Action 1: Register Part -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">1. Register Part:</label>
-          <input id="biz-reg-id" type="text" v-model="bizRegId" placeholder="Part ID" style="width: 110px;">
-          <button id="biz-reg-btn" class="secondary" @click="handleBizRegister">Register</button>
-
-          <div class="divider"></div>
-
-          <!-- Action 2: Install / Assemble -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">2. Install:</label>
-          <select id="biz-inst-source" v-model="bizInstSource">
-            <option v-for="node in bizInstallSources" :key="'src_' + node" :value="node">{{ node }}</option>
-          </select>
-          <select id="biz-inst-target" v-model="bizInstTarget">
-            <option v-for="node in bizInstallTargets" :key="'tgt_' + node" :value="node">{{ node }}</option>
-          </select>
-          <button id="biz-inst-btn" class="secondary" @click="handleBizInstall">Install</button>
+        <!-- Tier 1: Unified Architecture & Perspective Controls -->
+        <div class="deck-row deck-row-top">
+          <div class="section-label">
+            <span class="iec-badge">IEC 63339 / SMIM<span class="iec-tooltip" v-html="t.tooltips.smim"></span></span>
+            <span>{{ t.ontoTitle }}</span>
+          </div>
+          <div class="btn-group">
+            <button id="ctrl-onto-bfo" :class="{ active: state.ontology === 'BFO' }" @click="state.ontology = 'BFO'">BFO (3D)</button>
+            <button id="ctrl-onto-iso" :class="{ active: state.ontology === 'ISO15926' }" @click="state.ontology = 'ISO15926'">ISO 15926 (4D)</button>
+            <button id="ctrl-onto-naive-node" :class="{ active: state.ontology === 'NAIVE_NODE' }" @click="state.ontology = 'NAIVE_NODE'">{{ t.ontoNaiveNode }}</button>
+            <button id="ctrl-onto-naive-edge" :class="{ active: state.ontology === 'NAIVE_EDGE' }" @click="state.ontology = 'NAIVE_EDGE'">{{ t.ontoNaiveEdge }}</button>
+          </div>
 
           <div class="divider"></div>
 
-          <!-- Action 5: Dismantle -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">5. Dismantle:</label>
-          <select id="biz-dism-part" v-model="bizDismPart">
-            <option v-for="comp in installedComponents" :key="'comp_' + comp" :value="comp">{{ comp }}</option>
-          </select>
-          <button id="biz-dism-btn" class="danger" @click="handleBizDismantle">Dismantle</button>
-        </div>
-
-        <!-- Row 2: Defect, Revoke, Storage, History -->
-        <div class="deck-row" style="border-top: 1px solid #f1f5f9; background: #fafafa;">
-          <!-- Action 3: Report Defect -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">3. Defect:</label>
-
-          <select id="biz-def-target" v-model="bizDefTarget">
-            <option v-for="node in availableNodes" :key="'dn_' + node" :value="node">{{ node }}</option>
-          </select>
-          <input id="biz-def-type" type="text" v-model="bizDefType" placeholder="Type (e.g. crack)" style="width: 110px;">
-          <input id="biz-def-val" type="text" v-model="bizDefVal" placeholder="Value (e.g. 2mm)" style="width: 80px;">
-          <button id="biz-def-btn" class="secondary" @click="handleBizReportDefect">Report Defect</button>
+          <!-- Unified 4-Perspective Switcher (SMRM | SMIM | SMS_LPG | SMS_RDF) -->
+          <div class="section-label">
+            <span class="iec-badge">IEC 63339<span class="iec-tooltip" v-html="t.tooltips.sms"></span></span>
+            <span>👁️ {{ t.viewTitle }}</span>
+          </div>
+          <div class="btn-group">
+            <button id="ctrl-view-smrm" :class="{ active: state.perspective === 'SMRM' }" @click="setPerspective('SMRM')">{{ t.viewSmrm }}</button>
+            <button id="ctrl-view-logical" :class="{ active: state.perspective === 'SMIM' }" @click="setPerspective('SMIM')">{{ t.viewLogical }}</button>
+            <button id="ctrl-view-physical-lpg" :class="{ active: state.perspective === 'SMS_LPG' }" @click="setPerspective('SMS_LPG')">{{ t.viewPhysicalLpg }}</button>
+            <button id="ctrl-view-physical-rdf" :class="{ active: state.perspective === 'SMS_RDF' }" @click="setPerspective('SMS_RDF')">{{ t.viewPhysicalRdf }}</button>
+          </div>
 
           <div class="divider"></div>
 
-          <!-- Action 4: Revoke Defect -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">4. Revoke:</label>
-          <select id="biz-rev-defect" v-model="bizRevDefect">
-            <option v-for="d in activeDefectsList" :key="d.id" :value="d.id">{{ d.label }}</option>
-          </select>
-          <button id="biz-rev-btn" class="danger" @click="handleBizRevokeDefect">Revoke</button>
+          <div class="section-label">🎨 <span>{{ t.engineTitle }}</span></div>
+          <div class="btn-group">
+            <button id="ctrl-engine-vis" :class="{ active: state.graphEngine === 'VIS' }" @click="state.graphEngine = 'VIS'">🌐 Vis.js</button>
+            <button id="ctrl-engine-mermaid" :class="{ active: state.graphEngine === 'MERMAID' }" @click="state.graphEngine = 'MERMAID'">📊 Mermaid</button>
+          </div>
 
           <div class="divider"></div>
 
-          <!-- Action 6: Move to Storage -->
-          <label style="font-size: 11px; font-weight: 700; color: #0284c7;">6. Storage:</label>
-          <select id="biz-store-part" v-model="bizStorePart">
-            <option v-for="part in activeParts" :key="'sp_' + part" :value="part">{{ part }}</option>
-          </select>
-          <select id="biz-store-target" v-model="bizStoreTarget">
-            <option v-for="wh in activeWarehouses" :key="'sw_' + wh" :value="wh">{{ wh }}</option>
-          </select>
-          <button id="biz-store-btn" class="secondary" @click="handleBizStore">Store</button>
+          <!-- JSON State Operations -->
+          <button id="ctrl-save-json" class="secondary" @click="saveJson" :title="t.saveBtn">{{ t.saveBtn }}</button>
+          <button id="ctrl-load-json" class="secondary" @click="triggerLoadJson" :title="t.loadBtn">{{ t.loadBtn }}</button>
+          <input ref="fileInput" type="file" accept=".json" style="display: none;" @change="onFileLoaded" />
 
-          <div class="divider"></div>
-
-          <!-- History Checkbox -->
-          <label style="font-size: 11px; display: flex; align-items: center; gap: 4px;">
-            <input type="checkbox" v-model="showHistory"> {{ t.history }}
-          </label>
+          <div style="margin-left: auto;" class="btn-group flag-group">
+            <button id="ctrl-lang-sv" :class="{ active: state.language === 'sv' }" @click="state.language = 'sv'" title="Svenska">🇸🇪</button>
+            <button id="ctrl-lang-en" :class="{ active: state.language === 'en' }" @click="state.language = 'en'" title="British English">🇬🇧</button>
+            <button id="ctrl-lang-ru" :class="{ active: state.language === 'ru' }" @click="state.language = 'ru'" title="Русский">🇷🇺</button>
+          </div>
         </div>
-      </template>
-    </div>
 
-    <div class="main-container">
-      <div id="canvas-container" :style="{ flex: \`0 0 \${layout.leftWidth}%\` }">
-        <div ref="visContainer" v-show="settings.engine === 'vis'" style="width: 100%; height: 100%; position: absolute;"></div>
-        <div ref="mermaidContainer" v-show="settings.engine === 'mermaid'" id="mermaid-container"></div>
+        <!-- Tier 2: Engineer Lifecycle Actions -->
+        <template v-if="state.userRole === 'UNI_ENGINEER'">
+          <!-- Row 1: Time, Register, Install, Dismantle -->
+          <div class="deck-row">
+            <span id="biz-time-badge" class="badge">T = {{ state.currentTime }}</span>
+            <button id="biz-step-btn" @click="advanceTime">{{ t.stepBtn }}</button>
+
+            <div class="divider"></div>
+
+            <!-- Action 1: Register Entity -->
+            <label class="action-label">1. Register:</label>
+            <select id="biz-reg-type" v-model="bizRegType" title="Entity Class">
+              <option value="Vehicle">Vehicle</option>
+              <option value="Part">Part</option>
+              <option value="Warehouse">Warehouse</option>
+            </select>
+            <input id="biz-reg-id" type="text" v-model="bizRegId" placeholder="ID (e.g. Part_B)" style="width: 110px;" @keyup.enter="handleBizRegister">
+            <button id="biz-reg-btn" class="secondary" @click="handleBizRegister">Register</button>
+
+            <div class="divider"></div>
+
+            <!-- Action 2: Install / Assemble -->
+            <label class="action-label">2. Install:</label>
+            <select id="biz-inst-source" v-model="bizInstSource" title="Component to install">
+              <option v-for="node in bizInstallSources" :key="'src_' + node" :value="node">{{ node }}</option>
+            </select>
+            <span style="font-size: 11px; color: #64748b;">→</span>
+            <select id="biz-inst-target" v-model="bizInstTarget" title="Target Parent / System">
+              <option v-for="node in bizInstallTargets" :key="'tgt_' + node" :value="node">{{ node }}</option>
+            </select>
+            <button id="biz-inst-btn" class="secondary" @click="handleBizInstall">Install</button>
+
+            <div class="divider"></div>
+
+            <!-- Action 5: Dismantle -->
+            <label class="action-label">5. Dismantle:</label>
+            <select id="biz-dism-part" v-model="bizDismPart">
+              <option v-for="comp in installedComponents" :key="'comp_' + comp" :value="comp">{{ comp }}</option>
+            </select>
+            <button id="biz-dism-btn" class="danger" @click="handleBizDismantle">Dismantle</button>
+          </div>
 
-        <!-- Dynamic Graph Caption Overlay -->
-        <div class="graph-caption">
-          <span>📌</span>
-          <span>{{ graphCaption }}</span>
-        </div>
+          <!-- Row 2: Defect, Revoke, Storage, History -->
+          <div class="deck-row" style="border-top: 1px solid #f1f5f9; background: #fafafa;">
+            <!-- Action 3: Report Defect -->
+            <label class="action-label">3. Defect:</label>
+            <select id="biz-def-target" v-model="bizDefTarget">
+              <option v-for="node in availableNodes" :key="'dn_' + node" :value="node">{{ node }}</option>
+            </select>
+            <input id="biz-def-type" type="text" v-model="bizDefType" placeholder="Type (e.g. crack)" style="width: 110px;">
+            <input id="biz-def-val" type="text" v-model="bizDefVal" placeholder="Value (e.g. 2mm)" style="width: 85px;">
+            <button id="biz-def-btn" class="secondary" @click="handleBizReportDefect">Report Defect</button>
+
+            <div class="divider"></div>
+
+            <!-- Action 4: Revoke Defect -->
+            <label class="action-label">4. Revoke:</label>
+            <select id="biz-rev-defect" v-model="bizRevDefect">
+              <option v-for="d in activeDefectsList" :key="d.id" :value="d.id">{{ d.label }}</option>
+            </select>
+            <button id="biz-rev-btn" class="danger" @click="handleBizRevokeDefect">Revoke</button>
+
+            <div class="divider"></div>
+
+            <!-- Action 6: Move to Storage -->
+            <label class="action-label">6. Storage:</label>
+            <select id="biz-store-part" v-model="bizStorePart">
+              <option v-for="part in activeParts" :key="'sp_' + part" :value="part">{{ part }}</option>
+            </select>
+            <span style="font-size: 11px; color: #64748b;">→</span>
+            <select id="biz-store-target" v-model="bizStoreTarget">
+              <option v-for="wh in activeWarehouses" :key="'sw_' + wh" :value="wh">{{ wh }}</option>
+            </select>
+            <button id="biz-store-btn" class="secondary" @click="handleBizStore">Store</button>
+
+            <div class="divider"></div>
+
+            <!-- History Checkbox -->
+            <label style="font-size: 11px; display: flex; align-items: center; gap: 4px; cursor: pointer;">
+              <input type="checkbox" v-model="state.showHistory"> {{ t.history }}
+            </label>
+          </div>
+        </template>
+      </div>
+
+      <div class="main-container">
+        <div id="canvas-container" :style="{ flex: \`0 0 \${layout.leftWidth}%\` }">
+          <div ref="visContainer" id="vis-container" v-show="state.graphEngine === 'VIS'"></div>
+          <div ref="mermaidContainer" id="mermaid-container" v-show="state.graphEngine === 'MERMAID'"></div>
 
-        <!-- Contextual Dynamic Legend Overlay -->
-        <div class="graph-legend">
-          <div class="legend-title">
-            <span>{{ t.legend.title }}</span>
+          <!-- Dynamic Graph Caption Overlay -->
+          <div class="graph-caption">
+            <span>📌</span>
+            <span>{{ graphCaption }}</span>
           </div>
-          <div v-if="graphLegendItems.nodes.length > 0" class="legend-section">
-            <div class="legend-section-title">{{ t.legend.nodes }}</div>
-            <div v-for="item in graphLegendItems.nodes" :key="item.id" class="legend-item">
-              <div :class="item.swatch"></div>
-              <span>{{ item.label }}</span>
+
+          <!-- Contextual Dynamic Legend Overlay -->
+          <div class="graph-legend">
+            <div class="legend-title">
+              <span>{{ t.legend.title }}</span>
             </div>
-          </div>
-          <div v-if="graphLegendItems.edges.length > 0" class="legend-section">
-            <div class="legend-section-title">{{ t.legend.edges }}</div>
-            <div v-for="item in graphLegendItems.edges" :key="item.id" class="legend-item">
-              <div :class="item.swatch"></div>
-              <span>{{ item.label }}</span>
+            <div v-if="graphLegendItems.nodes.length > 0" class="legend-section">
+              <div class="legend-section-title">{{ t.legend.nodes }}</div>
+              <div v-for="item in graphLegendItems.nodes" :key="item.id" class="legend-item">
+                <div :class="item.swatch"></div>
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+            <div v-if="graphLegendItems.edges.length > 0" class="legend-section">
+              <div class="legend-section-title">{{ t.legend.edges }}</div>
+              <div v-for="item in graphLegendItems.edges" :key="item.id" class="legend-item">
+                <div :class="item.swatch"></div>
+                <span>{{ item.label }}</span>
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Horizontal Resizer -->
-      <div class="resizer" id="panel-resizer" @mousedown="startResizeH"></div>
-      
-      <div class="sidebar" style="flex: 1;">
-        <!-- BOM View (URMSM) -->
-        <div class="card" :style="{ flex: \`0 0 \${layout.bomHeight}%\` }">
-          <h4>
-            <span>{{ t.titleBom }}</span>
-            <span class="iec-badge align-right">IEC 63339 / URMSM<span class="iec-tooltip" v-html="t.tooltips.urmsm"></span></span>
-          </h4>
-          <div id="tree-container" style="overflow-y: auto;">
-            <template v-if="bomTree">
-              <strong>{{ bomTree.id }}</strong>
-              <ul v-if="bomTree.children && bomTree.children.length > 0" class="tree">
-                <bom-node v-for="child in bomTree.children" :key="child.id" :node="child" />
-              </ul>
-            </template>
           </div>
         </div>
 
-        <div class="resizer-h" @mousedown="(e) => startResizeV(e, 'bomHeight', '.sidebar')"></div>
-
-        <!-- Storage View (SMS) -->
-        <div class="card" :style="{ flex: \`0 0 \${layout.storageHeight}%\` }">
-          <h4>
-            <span>{{ t.titleStorage }}</span>
-            <span style="color:#0284c7; font-weight: 600;">SMS / {{ settings.ontology }} / {{ settings.storage }}</span>
-          </h4>
-          <div id="storage-content" style="overflow-y: auto; display: flex; flex-direction: column;">
-            <table v-if="settings.storage === 'LPG' && lpgRecords.length > 0">
-              <thead>
-                <tr>
-                  <th>{{ t.sourceCol }}</th>
-                  <th>{{ t.targetCol }}</th>
-                  <th>Type</th>
-                  <th>Properties</th>
-                  <th>{{ t.statusCol }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="row in lpgRecords" :key="row.id" :class="row.isActive ? 'active-row' : 'closed-row'">
-                  <td>{{ row.from }}</td>
-                  <td><strong>{{ row.to }}</strong></td>
-                  <td><code>:{{ row.label }}</code></td>
-                  <td>
-                    <code v-if="formatProperties(row.properties)">{ {{ formatProperties(row.properties) }} }</code>
-                    <span v-else>—</span>
-                  </td>
-                  <td>{{ row.isActive ? t.activeStatus : t.closedStatus }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <div v-else-if="settings.storage === 'LPG'" style="color: #94a3b8; padding: 8px;">
-              No relationship records
+        <!-- Horizontal Resizer -->
+        <div class="resizer" id="panel-resizer" @mousedown="startResizeH"></div>
+
+        <div class="sidebar" style="flex: 1;">
+          <!-- 1. BOM View (URMSM) -->
+          <div class="card" :style="{ flex: \`0 0 \${layout.bomHeight}%\` }">
+            <h4>
+              <span>{{ t.titleBom }}</span>
+              <span class="iec-badge align-right">IEC 63339 / URMSM<span class="iec-tooltip" v-html="t.tooltips.urmsm"></span></span>
+            </h4>
+            <div id="tree-container" class="card-scroll-body">
+              <template v-if="bomTrees.length > 0">
+                <ul class="tree root-tree">
+                  <bom-node v-for="root in bomTrees" :key="root.id" :node="root" />
+                </ul>
+              </template>
+              <div v-else class="empty-placeholder">
+                {{ t.emptyBom }}{{ state.currentTime }}
+              </div>
             </div>
-            <pre v-else class="code-block">{{ rdfTtl }}</pre>
           </div>
-        </div>
 
-        <div class="resizer-h" @mousedown="(e) => startResizeV(e, 'storageHeight', '.sidebar')"></div>
+          <div class="resizer-h" @mousedown="(e) => startResizeV(e, 'bomHeight', '.sidebar')"></div>
+
+          <!-- 2. Storage View: UNDER THE BONNET (SMS) -->
+          <div class="card" :style="{ flex: \`0 0 \${layout.storageHeight}%\` }">
+            <h4>
+              <span>{{ t.titleStorage }} <small style="color:#0284c7; font-weight: 700;">({{ state.ontology }})</small></span>
+              <div class="btn-group mini-toggle">
+                <button :class="{ active: state.storage === 'LPG' }" @click="state.storage = 'LPG'">LPG</button>
+                <button :class="{ active: state.storage === 'RDF' }" @click="state.storage = 'RDF'">RDF (W3C)</button>
+              </div>
+            </h4>
+            <div id="storage-content" class="card-scroll-body">
+              <template v-if="state.storage === 'LPG'">
+                <!-- Node Store Table -->
+                <div class="store-sub-header">{{ t.nodeStoreTitle }} ({{ lpgNodeRecords.length }})</div>
+                <table v-if="lpgNodeRecords.length > 0" class="storage-table">
+                  <thead>
+                    <tr>
+                      <th>Node ID</th>
+                      <th>Label / Class</th>
+                      <th>Properties</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="n in lpgNodeRecords" :key="'nd_' + n.id" :class="n.isActive ? 'active-row' : 'closed-row'">
+                      <td><strong>{{ n.id }}</strong></td>
+                      <td><code>:{{ n.type }}</code></td>
+                      <td>
+                        <code v-if="formatProperties(n.properties)">{ {{ formatProperties(n.properties) }} }</code>
+                        <span v-else>—</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div v-else class="empty-placeholder">0 nodes</div>
+
+                <!-- Relationship Store Table -->
+                <div class="store-sub-header" style="margin-top: 8px;">{{ t.edgeStoreTitle }} ({{ lpgRecords.length }})</div>
+                <table v-if="lpgRecords.length > 0" class="storage-table">
+                  <thead>
+                    <tr>
+                      <th>{{ t.sourceCol }}</th>
+                      <th>{{ t.targetCol }}</th>
+                      <th>Type</th>
+                      <th>Properties</th>
+                      <th>{{ t.statusCol }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="row in lpgRecords" :key="row.id" :class="row.isActive ? 'active-row' : 'closed-row'">
+                      <td>{{ row.from }}</td>
+                      <td><strong>{{ row.to }}</strong></td>
+                      <td><code>:{{ row.label }}</code></td>
+                      <td>
+                        <code v-if="formatProperties(row.properties)">{ {{ formatProperties(row.properties) }} }</code>
+                        <span v-else>—</span>
+                      </td>
+                      <td>{{ row.isActive ? t.activeStatus : t.closedStatus }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div v-else class="empty-placeholder">0 relationships</div>
+              </template>
+              <pre v-else class="code-block">{{ rdfTtl }}</pre>
+            </div>
+          </div>
 
-        <!-- Query Generator -->
-        <div class="card" style="flex: 1;">
-          <h4>
-            <span>{{ t.queryTitle }}</span>
-            <span style="font-weight: normal; text-transform: none; color: #0d9488;">{{ t.queryDesc }}</span>
-          </h4>
-          <div id="query-content" style="display: flex; flex-direction: column; flex: 1;">
-            <pre class="code-block" :style="{ color: settings.ontology === 'BFO' ? '#0369a1' : '#3730a3' }">{{ queryCode }}</pre>
+          <div class="resizer-h" @mousedown="(e) => startResizeV(e, 'storageHeight', '.sidebar')"></div>
+
+          <!-- 3. Database Query & Live Execution Result -->
+          <div class="card" style="flex: 1;">
+            <h4>
+              <span>{{ t.queryTitle }} ({{ state.storage === 'LPG' ? 'Cypher' : 'SPARQL' }})</span>
+              <span style="font-weight: 600; text-transform: none; color: #0d9488;">{{ t.queryDesc }}{{ state.currentTime }})</span>
+            </h4>
+            <div id="query-content" class="card-scroll-body">
+              <pre class="code-block query-code-block" :style="{ color: state.ontology === 'BFO' ? '#0369a1' : '#3730a3' }">{{ queryCode }}</pre>
+
+              <!-- Live Query Execution Result Box -->
+              <div class="query-result-box">
+                <div class="query-result-header">
+                  <span>{{ t.queryResultTitle }}</span>
+                  <span
+                    class="defect-counter-badge"
+                    :class="liveQueryResult.defectiveCount > 0 ? 'defect-alert-found' : 'defect-alert-zero'"
+                  >
+                    {{ t.queryDefectsFound }} {{ liveQueryResult.defectiveCount }}
+                  </span>
+                </div>
+                <table v-if="liveQueryResult.rows.length > 0" class="storage-table">
+                  <thead>
+                    <tr>
+                      <th>part</th>
+                      <th>location</th>
+                      <th>defect</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(r, idx) in liveQueryResult.rows" :key="idx">
+                      <td><strong>{{ r.part }}</strong></td>
+                      <td>{{ r.location }}</td>
+                      <td>
+                        <span :class="r.hasDefect ? 'bom-defect-badge' : 'null-badge'">{{ r.defect }}</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div v-else class="empty-placeholder">0 rows returned at T = {{ state.currentTime }}</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Hidden Scenario Audio Element -->
-    <audio
-      ref="scenarioAudio"
-      src="./narratives/Ontologies_-_Disappearing_Crack.mp3"
-      preload="metadata"
-      @timeupdate="onTimeUpdate"
-      @loadedmetadata="onLoadedMetadata"
-      @play="isPlaying = true"
-      @pause="isPlaying = false"
-      @ended="onAudioEnded"
-    ></audio>
-
-    <!-- Subtitles Overlay (Scenario Mode) -->
-    <div
-      v-if="state.currentView === 'SCENARIO' && showSubtitles"
-      class="scenario-subtitles"
-    >
-      {{ currentSubtitleText }}
-    </div>
-
-    <!-- Floating Scenario Player Panel -->
-    <div
-      v-if="state.currentView === 'SCENARIO'"
-      class="scenario-player-panel"
-    >
-      <button
-        class="player-btn"
-        @click="togglePlayAudio"
-        :title="isPlaying ? 'Pause' : 'Play'"
-        :aria-label="isPlaying ? 'Pause' : 'Play'"
+      <!-- Hidden Scenario Audio Element -->
+      <audio
+        ref="scenarioAudio"
+        src="./narratives/Ontologies_-_Disappearing_Crack.mp3"
+        preload="metadata"
+        @timeupdate="onTimeUpdate"
+        @loadedmetadata="onLoadedMetadata"
+        @play="isPlaying = true"
+        @pause="isPlaying = false"
+        @ended="onAudioEnded"
+      ></audio>
+
+      <!-- Subtitles Overlay (Scenario Mode) -->
+      <div
+        v-if="state.currentView === 'SCENARIO' && showSubtitles && currentSubtitleText"
+        class="scenario-subtitles"
       >
-        <span v-if="isPlaying">⏸</span>
-        <span v-else>▶</span>
-      </button>
+        {{ currentSubtitleText }}
+      </div>
 
-      <button
-        class="player-btn"
-        @click="stopAudio"
-        title="Stop"
-        aria-label="Stop"
+      <!-- Floating Scenario Player Panel -->
+      <div
+        v-if="state.currentView === 'SCENARIO'"
+        class="scenario-player-panel"
       >
-        <span>⏹</span>
-      </button>
-
-      <input
-        type="range"
-        class="player-progress"
-        min="0"
-        :max="audioDuration || 100"
-        step="0.1"
-        :value="audioCurrentTime"
-        @input="onSeek"
-        aria-label="Audio Timeline"
-      />
+        <button
+          class="player-btn"
+          @click="togglePlayAudio"
+          :title="isPlaying ? 'Pause' : 'Play'"
+          :aria-label="isPlaying ? 'Pause' : 'Play'"
+        >
+          <span v-if="isPlaying">⏸</span>
+          <span v-else>▶</span>
+        </button>
+
+        <button
+          class="player-btn"
+          @click="stopAudio(true)"
+          title="Stop"
+          aria-label="Stop"
+        >
+          <span>⏹</span>
+        </button>
+
+        <input
+          type="range"
+          class="player-progress"
+          min="0"
+          :max="audioDuration || 100"
+          step="0.1"
+          :value="audioCurrentTime"
+          @input="onSeek"
+          aria-label="Audio Timeline"
+        />
 
-      <span class="player-time">{{ formatTime(audioCurrentTime) }} / {{ formatTime(audioDuration) }}</span>
+        <span class="player-time">{{ formatTime(audioCurrentTime) }} / {{ formatTime(audioDuration) }}</span>
+
+        <button
+          class="player-btn player-btn-cc"
+          :class="{ active: showSubtitles }"
+          @click="showSubtitles = !showSubtitles"
+          title="Toggle Subtitles"
+          aria-label="Toggle Subtitles"
+        >
+          CC
+        </button>
+      </div>
 
+      <!-- Floating Home Button -->
       <button
-        class="player-btn player-btn-cc"
-        :class="{ active: showSubtitles }"
-        @click="showSubtitles = !showSubtitles"
-        title="Toggle Subtitles"
-        aria-label="Toggle Subtitles"
+        v-if="state.currentView !== 'MENU'"
+        class="floating-home-btn"
+        @click="goHome"
+        title="Return to Main Menu"
+        aria-label="Return to Main Menu"
       >
-        CC
+        <svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+          <polyline points="9 22 9 12 15 12 15 22"></polyline>
+        </svg>
       </button>
     </div>
-
-    <!-- Floating Home Button -->
-    <button
-      v-if="state.currentView !== 'MENU'"
-      class="floating-home-btn"
-      @click="goHome"
-      title="Return to Main Menu (Resets Sandbox)"
-      aria-label="Return to Main Menu"
-    >
-      <svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-        <polyline points="9 22 9 12 15 12 15 22"></polyline>
-      </svg>
-    </button>
   `
 };
 

js/i18n.js

@@ -1,78 +1,67 @@
 /**
  * INTERNATIONALISATION (i18n) DICTIONARIES
  * ----------------------------------------
- * This module exports the dictionary containing all UI strings, labels,
- * and tooltips for Swedish ('sv'), British English ('en'), and Russian ('ru').
+ * Exports UI strings, labels, and tooltips for Swedish ('sv'),
+ * British English ('en'), and Russian ('ru').
  */
 export const i18n = {
   sv: {
     ontoTitle: "Ontologi:",
-    graphTitle: "Datamodell:",
     engineTitle: "Grafmotor:",
     viewTitle: "Perspektiv:",
     viewSmrm: "Ingenjör (SMRM)",
     viewLogical: "Logisk (SMIM)",
-    viewPhysical: "Fysisk (SMS)",
+    viewPhysicalLpg: "Fysisk LPG (SMS)",
+    viewPhysicalRdf: "Fysisk RDF (SMS)",
     viewSmrmCaption: "Ingenjörsperspektiv (SMRM)",
     viewLogicalCaption: "Logiskt perspektiv (SMIM)",
-    viewPhysicalCaption: "Fysiskt perspektiv (SMS)",
+    viewPhysicalLpgCaption: "Fysiskt LPG-perspektiv (SMS)",
+    viewPhysicalRdfCaption: "Fysiskt RDF-perspektiv (SMS)",
     stepBtn: "Lås steg (T+1)",
-    parent: "Överordnad:",
-    partPlaceholder: "Komponentnamn",
-    addBtn: "+ Lägg till",
-    removeBtn: "Uteslut relation",
     history: "Historik",
     titleBom: "Struktur (BOM)",
+    emptyBom: "Inga aktiva enheter vid T = ",
     titleStorage: "Under huven",
+    nodeStoreTitle: "Noder (Node Store)",
+    edgeStoreTitle: "Relationer (Relationship Store)",
     activeStatus: "Aktiv",
     closedStatus: "Avslutad",
     sourceCol: "Källa",
     targetCol: "Mål",
     statusCol: "Status",
-    smrmStatus: "Domänontologi (Låst: System/IDO)",
     saveBtn: "💾 Spara JSON",
     loadBtn: "📂 Ladda JSON",
     queryTitle: "Databasfråga",
-    queryDesc: "Visa aktuell struktur (T = T_nu)",
-    ontoNaive: "Naiv Graf",
+    queryDesc: "Aktuellt tillstånd & defekter (T = ",
+    queryResultTitle: "Exekveringsresultat (Live):",
+    queryDefectsFound: "Defekta komponenter på nuvarande plats:",
     ontoNaiveNode: "Naiv Graf (Node)",
     ontoNaiveEdge: "Naiv Graf (Edge)",
-    nodeClass: "Klass:",
-    nodeIdPlaceholder: "Nod-ID",
-    addNodeBtn: "+ Nod",
-    relTypeLabel: "Relation:",
-    addRelBtn: "+ Relation",
-    propTarget: "Mål:",
-    propKeyPlaceholder: "Nyckel (t.ex. crack)",
-    propValPlaceholder: "Värde (t.ex. 2mm)",
-    addPropBtn: "+ Egenskap",
-    targetNode: "Nod",
-    targetEdge: "Relation",
     tooltips: {
-      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Definierar intressentens perspektiv (ISO 42010 Viewpoint). Användaren ser bara BOM-strukturen vid tidpunkten T, oavsett underliggande IT-lager.",
-      smrm: "<b>SMRM (Concept Repository)</b><br/>Domänontologi och gemensam begreppsbank (System, Component, Physical/Functional Object). Här låst till standardiserad produktnedbrytning.",
-      smim: "<b>SMIM (Information Elements & Rules)</b><br/>Top-Level Ontology (TLO). Formella regler för hur begreppen existerar i tiden: 3D-objekt med tidsintervall (BFO) eller 4D-rumtidsindivider (ISO 15926).",
-      sms: "<b>SMS (Data in Tool)</b><br/>Den faktiska IT-implementationen och datalagringen (Property Graph / Neo4j kontra W3C RDF Triples)."
+      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Definierar intressentens perspektiv (ISO 42010 Viewpoint). Ingenjören ser produktnedbrytningen (BOM) och aktiva defekter vid tidpunkten T.",
+      smrm: "<b>SMRM (Concept Repository)</b><br/>Domänontologi och gemensam begreppsbank (Vehicle, Slot, Part, Warehouse, Defect).",
+      smim: "<b>SMIM (Information Elements & Rules)</b><br/>Top-Level Ontology (TLO). Formella regler för tid och identitet: 3D-kontinuanter (BFO) eller 4D-rumtidsindivider (ISO 15926).",
+      sms: "<b>SMS (Data in Tool)</b><br/>Den fysiska datalagringen: Labeled Property Graph (Neo4j / Cypher) kontra W3C RDF Triples (Turtle / SPARQL)."
     },
     legend: {
       title: "Teckenförklaring",
       nodes: "Noder",
       edges: "Relationer",
-      bfoSys: "Continuant / System (:System)",
-      bfoElem: "Continuant / Komponent (:Element)",
-      bfoActiveEdge: "Aktiv relation [giltig till nu]",
+      bfoSys: "Continuant / System (:MaterialEntity)",
+      bfoElem: "Continuant / Komponent (:MaterialEntity)",
+      bfoActiveEdge: "Aktiv relation [giltig nu]",
       bfoPastEdge: "Historisk relation (avslutad)",
-      bfoQuality: "Kvalitet / Egenskap (:Quality)",
+      bfoQuality: "Kvalitet / Defekt (:Quality)",
       bfoInheres: "inheres_in (egenskap i bärare)",
-      iso4d: "4D-individ (Spatio-Temporal Extent)",
-      isoState: "Temporal del / Tillstånd (State)",
-      isoPartRel: "Tidlös komposition (hasPart)",
+      iso4d: "4D-individ (:ActualIndividual)",
+      isoState: "Temporal del / Tillstånd (:State)",
+      isoPartRel: "Komposition / Montering",
       isoSliceRel: "temporalPartOf (del av 4D-individ)",
       isoTransitionRel: "TRANSITION_TO (tillståndskedja i LPG)",
-      isoDefect: "Defekt (Tillståndsklassificering)",
+      isoDefect: "Defekt (:Defect)",
       isoDefectRel: "has_defect (tillståndsklassificering)",
       rdfStmt: "Reifiering (_:statement)",
-      rdfLit: "Literal (tidsstämpel xsd:int)",
+      rdfLit: "Literal (xsd:integer / xsd:string)",
       rdfPred: "RDF-predikat",
       naiveVehicle: "Fordon (:Vehicle)",
       naiveSlot: "Plats (:Slot)",
@@ -80,79 +69,68 @@ export const i18n = {
       naiveDefect: "Defekt (:Defect)",
       naiveWarehouse: "Lager (:Warehouse)",
       relHasSlot: "has_slot (fordonsslot)",
-      relMountedIn: "mounted_in (monterad i)",
+      relMountedIn: "mounted_in / has_part",
       relStoredAt: "stored_at (lagrad på)",
       relHasDefect: "has_defect (identifierad defekt)"
     }
   },
   en: {
     ontoTitle: "Ontology:",
-    graphTitle: "Data Model:",
     engineTitle: "Renderer:",
     viewTitle: "Perspective:",
     viewSmrm: "Engineer (SMRM)",
     viewLogical: "Logical (SMIM)",
-    viewPhysical: "Physical (SMS)",
+    viewPhysicalLpg: "Physical LPG (SMS)",
+    viewPhysicalRdf: "Physical RDF (SMS)",
     viewSmrmCaption: "Engineer Perspective (SMRM)",
     viewLogicalCaption: "Logical Perspective (SMIM)",
-    viewPhysicalCaption: "Physical Perspective (SMS)",
+    viewPhysicalLpgCaption: "Physical LPG Perspective (SMS)",
+    viewPhysicalRdfCaption: "Physical RDF Perspective (SMS)",
     stepBtn: "Commit step (T+1)",
-    parent: "Parent:",
-    partPlaceholder: "Component name",
-    addBtn: "+ Add",
-    removeBtn: "Sever relation",
     history: "History",
     titleBom: "BOM Tree Structure",
+    emptyBom: "No active assets at T = ",
     titleStorage: "Under the Bonnet",
+    nodeStoreTitle: "Nodes (Node Store)",
+    edgeStoreTitle: "Relationships (Relationship Store)",
     activeStatus: "Active",
     closedStatus: "Closed",
     sourceCol: "Source",
     targetCol: "Target",
     statusCol: "Status",
-    smrmStatus: "Domain Ontology (Fixed: System/IDO)",
     saveBtn: "💾 Save JSON",
     loadBtn: "📂 Load JSON",
     queryTitle: "Database Query",
-    queryDesc: "Show current structure (T = T_now)",
-    ontoNaive: "Naive Graph",
+    queryDesc: "Current structure & defects (T = ",
+    queryResultTitle: "Live Query Output:",
+    queryDefectsFound: "Defective parts at current location:",
     ontoNaiveNode: "Naive Graph (Node)",
     ontoNaiveEdge: "Naive Graph (Edge)",
-    nodeClass: "Class:",
-    nodeIdPlaceholder: "Node ID",
-    addNodeBtn: "+ Node",
-    relTypeLabel: "Relation:",
-    addRelBtn: "+ Relation",
-    propTarget: "Target:",
-    propKeyPlaceholder: "Key (e.g. crack)",
-    propValPlaceholder: "Value (e.g. 2mm)",
-    addPropBtn: "+ Property",
-    targetNode: "Node",
-    targetEdge: "Relation",
     tooltips: {
-      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Captures the stakeholder concern and viewpoint (ISO 42010). The engineer always sees a unified BOM snapshot at time T, decoupled from graph mechanics.",
-      smrm: "<b>SMRM (Concept Repository)</b><br/>Domain Ontology: the shared engineering lexicon (System, System Element, Physical/Functional Object). Fixed here to physical decomposition.",
+      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Captures the stakeholder viewpoint (ISO 42010). The engineer sees a clean BOM breakdown and active defects at time T, decoupled from graph mechanics.",
+      smrm: "<b>SMRM (Concept Repository)</b><br/>Domain Ontology: shared engineering lexicon (Vehicle, Slot, Part, Warehouse, Defect).",
       smim: "<b>SMIM (Information Elements & Rules)</b><br/>Top-Level Ontology (TLO). Axiomatic rules governing time and identity: 3D Continuants (BFO) vs 4D Spatio-Temporal Extents (ISO 15926).",
-      sms: "<b>SMS (Data in Tool)</b><br/>Low-level physical IT implementation: Labeled Property Graphs (Neo4j style) vs W3C RDF Triples and serialised statements."
+      sms: "<b>SMS (Data in Tool)</b><br/>Low-level physical IT storage: Labeled Property Graphs (Neo4j / Cypher) vs W3C RDF Triples (Turtle / SPARQL)."
     },
     legend: {
       title: "Graph Legend",
       nodes: "Node Types",
       edges: "Relationships",
-      bfoSys: "Continuant / System (:System)",
-      bfoElem: "Continuant / Component (:Element)",
-      bfoActiveEdge: "Active relation [valid to now]",
+      bfoSys: "Continuant / System (:MaterialEntity)",
+      bfoElem: "Continuant / Component (:MaterialEntity)",
+      bfoActiveEdge: "Active relation [valid now]",
       bfoPastEdge: "Historical relation (closed)",
       bfoQuality: "Dependent Continuant (:Quality)",
       bfoInheres: "inheres_in (Quality inherence)",
-      iso4d: "4D Individual (Spatio-Temporal Extent)",
-      isoState: "Temporal Part / State",
-      isoPartRel: "Tenseless Composition (hasPart)",
+      iso4d: "4D Individual (:ActualIndividual)",
+      isoState: "Temporal Part / State (:State)",
+      isoPartRel: "Composition / Assembly",
       isoSliceRel: "temporalPartOf (Extent link)",
       isoTransitionRel: "TRANSITION_TO (State Chain in LPG)",
-      isoDefect: "Defect (State Classification)",
+      isoDefect: "Defect (:Defect)",
       isoDefectRel: "has_defect (State Classification)",
       rdfStmt: "Reification Node (_:statement)",
-      rdfLit: "Literal (xsd:int timestamp)",
+      rdfLit: "Literal (xsd:integer / xsd:string)",
       rdfPred: "RDF Predicate",
       naiveVehicle: "Vehicle (:Vehicle)",
       naiveSlot: "Slot (:Slot)",
@@ -160,79 +138,68 @@ export const i18n = {
       naiveDefect: "Defect (:Defect)",
       naiveWarehouse: "Warehouse (:Warehouse)",
       relHasSlot: "has_slot (Vehicle Slot)",
-      relMountedIn: "mounted_in (Installed in Slot)",
+      relMountedIn: "mounted_in / has_part",
       relStoredAt: "stored_at (Stored in Warehouse)",
       relHasDefect: "has_defect (Identified Defect)"
     }
   },
   ru: {
     ontoTitle: "Онтология:",
-    graphTitle: "Модель данных:",
     engineTitle: "Движок:",
     viewTitle: "Ракурс:",
     viewSmrm: "Инженер (SMRM)",
     viewLogical: "Логический (SMIM)",
-    viewPhysical: "Физический (SMS)",
+    viewPhysicalLpg: "Физический LPG (SMS)",
+    viewPhysicalRdf: "Физический RDF (SMS)",
     viewSmrmCaption: "Инженерный ракурс (SMRM)",
     viewLogicalCaption: "Логический ракурс (SMIM)",
-    viewPhysicalCaption: "Физический ракурс (SMS)",
+    viewPhysicalLpgCaption: "Физический ракурс LPG (SMS)",
+    viewPhysicalRdfCaption: "Физический ракурс RDF (SMS)",
     stepBtn: "Зафиксировать шаг (T+1)",
-    parent: "Родитель:",
-    partPlaceholder: "Имя компонента",
-    addBtn: "+ Добавить",
-    removeBtn: "Исключить связь",
     history: "История",
     titleBom: "Состав изделия (BOM)",
+    emptyBom: "Нет активных объектов при T = ",
     titleStorage: "Под капотом",
+    nodeStoreTitle: "Узлы (Node Store)",
+    edgeStoreTitle: "Связи (Relationship Store)",
     activeStatus: "Активна",
     closedStatus: "Закрыта",
     sourceCol: "Источник",
     targetCol: "Цель",
     statusCol: "Статус",
-    smrmStatus: "Domain Ontology (Зафиксирована: System/IDO)",
     saveBtn: "💾 Сохранить JSON",
     loadBtn: "📂 Загрузить JSON",
     queryTitle: "Запрос к БД",
-    queryDesc: "Показать текущую структуру (T = T_now)",
-    ontoNaive: "Наивный граф",
+    queryDesc: "Текущий состав и дефекты (T = ",
+    queryResultTitle: "Результат выполнения запроса (Live):",
+    queryDefectsFound: "Дефектных деталей на текущей позиции:",
     ontoNaiveNode: "Наивный граф (Узел)",
     ontoNaiveEdge: "Наивный граф (Ребро)",
-    nodeClass: "Класс:",
-    nodeIdPlaceholder: "ID узла",
-    addNodeBtn: "+ Узел",
-    relTypeLabel: "Связь:",
-    addRelBtn: "+ Связь",
-    propTarget: "Цель:",
-    propKeyPlaceholder: "Ключ (напр. crack)",
-    propValPlaceholder: "Значение (напр. 2mm)",
-    addPropBtn: "+ Свойство",
-    targetNode: "Узел",
-    targetEdge: "Связь",
     tooltips: {
-      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Уровень точки зрения пользователя (ISO 42010). Инженер всегда видит чистый срез BOM на момент времени T, абстрагированный от структуры базы данных.",
-      smrm: "<b>SMRM (Concept Repository)</b><br/>Онтология предметной области (Domain Ontology). Общий словарь понятий проекта (System, Component, Physical Object). Зафиксирована на базовой декомпозиции.",
-      smim: "<b>SMIM (Information Elements & Rules)</b><br/>Верхнеуровневая онтология (TLO). Математические аксиомы бытия и времени: 3D-тела с интервалами связей (BFO) или 4D-объемы пространства-времени (ISO 15926).",
-      sms: "<b>SMS (Data in Tool)</b><br/>Физическое IT-хранилище в конкретной СУБД: узлы и свойства на ребрах (LPG) против атомарных триплетов URI (W3C RDF)."
+      urmsm: "<b>URMSM (Dimension & Aspect)</b><br/>Точка зрения заинтересованного лица (ISO 42010). Инженер видит чистый срез BOM и активные дефекты на момент T без деталей реализации БД.",
+      smrm: "<b>SMRM (Concept Repository)</b><br/>Онтология предметной области: общий инженерный словарь (Vehicle, Slot, Part, Warehouse, Defect).",
+      smim: "<b>SMIM (Information Elements & Rules)</b><br/>Верхнеуровневая онтология (TLO). Математические аксиомы времени и идентичности: 3D-континуанты (BFO) или 4D-экстенты (ISO 15926).",
+      sms: "<b>SMS (Data in Tool)</b><br/>Физическое хранение данных в СУБД: граф со свойствами на ребрах (LPG / Cypher) против атомарных триплетов W3C RDF (Turtle / SPARQL)."
     },
     legend: {
       title: "Легенда графа",
       nodes: "Типы узлов",
       edges: "Типы связей",
-      bfoSys: "Континуант / Система (:System)",
-      bfoElem: "Континуант / Компонент (:Element)",
+      bfoSys: "Континуант / Система (:MaterialEntity)",
+      bfoElem: "Континуант / Компонент (:MaterialEntity)",
       bfoActiveEdge: "Активная связь [действует сейчас]",
       bfoPastEdge: "Архивная связь (закрыта)",
       bfoQuality: "Зависимый континуант (:Quality)",
       bfoInheres: "inheres_in (присущ носителю)",
-      iso4d: "4D-индивид (Пространственно-временной объем)",
-      isoState: "Темпоральный срез / Состояние",
-      isoPartRel: "Вневременной состав (hasPart)",
+      iso4d: "4D-индивид (:ActualIndividual)",
+      isoState: "Темпоральный срез / Состояние (:State)",
+      isoPartRel: "Вневременной состав / Монтаж",
       isoSliceRel: "temporalPartOf (связь с 4D-целым)",
       isoTransitionRel: "TRANSITION_TO (цепочка состояний в LPG)",
-      isoDefect: "Дефект (Классификация среза)",
+      isoDefect: "Дефект (:Defect)",
       isoDefectRel: "has_defect (классификация среза)",
       rdfStmt: "Узел реификации (_:statement)",
-      rdfLit: "Литерал (метка времени xsd:int)",
+      rdfLit: "Литерал (xsd:integer / xsd:string)",
       rdfPred: "RDF-предикат",
       naiveVehicle: "Транспорт (:Vehicle)",
       naiveSlot: "Слот (:Slot)",
@@ -240,7 +207,7 @@ export const i18n = {
       naiveDefect: "Дефект (:Defect)",
       naiveWarehouse: "Склад (:Warehouse)",
       relHasSlot: "has_slot (слот транспорта)",
-      relMountedIn: "mounted_in (установлен в)",
+      relMountedIn: "mounted_in / has_part",
       relStoredAt: "stored_at (хранится на складе)",
       relHasDefect: "has_defect (выявлен дефект)"
     }

js/renderers/mermaid-adapter.js

@@ -2,79 +2,64 @@
  * MERMAID RENDERER ADAPTER
  * ------------------------
  * Translates the abstract Semantic Graph into Mermaid flowchart syntax
- * and renders it to the DOM. Like the Vis.js adapter, it relies solely
- * on the abstract node/edge types, decoupled from the domain logic.
+ * and renders it to the DOM without leaking internal metadata properties.
  */
 
-// Keep track of rendering state to prevent race conditions from rapid UI clicks
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+
 let isRendering = false;
 let pendingDefinition = null;
 let renderCounter = 0;
 
 /**
  * Updates the Mermaid graph in the specified container.
- * 
+ *
  * @param {Object} semanticGraph - { nodes: [], edges: [] }
  * @param {HTMLElement} container - The DOM element to host the SVG.
  */
 export async function updateMermaidNetwork(semanticGraph, container) {
+  if (!container) return;
+
+  if (!semanticGraph || !Array.isArray(semanticGraph.nodes) || semanticGraph.nodes.length === 0) {
+    container.innerHTML = `<div style="margin: auto; color: #94a3b8; font-size: 13px; font-weight: 500;">Empty Graph Canvas (T = 0)</div>`;
+    return;
+  }
+
   const chartDefinition = buildMermaidDefinition(semanticGraph);
 
-  // If a render is already in progress, queue this definition and exit
   if (isRendering) {
     pendingDefinition = chartDefinition;
     return;
   }
 
-  isRendering = true;
-
-  try {
-    const renderId = 'mermaid_svg_' + (++renderCounter);
-    // We assume 'mermaid' is globally available from the CDN in index.html
-    const { svg } = await mermaid.render(renderId, chartDefinition);
-    container.innerHTML = svg;
-  } catch (err) {
-    console.error("[Mermaid Adapter] Render Error:", err);
-  } finally {
-    isRendering = false;
-    // If a new graph was requested while we were rendering, process it now
-    if (pendingDefinition) {
-      const nextDefinition = pendingDefinition;
-      pendingDefinition = null;
-      // We pass a dummy object here because the definition string is already built,
-      // but to keep the signature clean for this recursive pattern, it's better
-      // to extract the render call. For simplicity, we just rebuild it:
-      executePendingRender(nextDefinition, container); 
-    }
-  }
+  await executeRender(chartDefinition, container);
 }
 
-async function executePendingRender(definition, container) {
+async function executeRender(definition, container) {
   isRendering = true;
   try {
-    const { svg } = await mermaid.render('mermaid_svg_' + (++renderCounter), definition);
+    const renderId = 'mermaid_svg_' + (++renderCounter);
+    const { svg } = await mermaid.render(renderId, definition);
     container.innerHTML = svg;
-  } catch (e) {
-    console.error(e);
+  } catch (err) {
+    console.error('[Mermaid Adapter] Render Error:', err);
   } finally {
     isRendering = false;
     if (pendingDefinition) {
       const next = pendingDefinition;
       pendingDefinition = null;
-      executePendingRender(next, container);
+      await executeRender(next, container);
     }
   }
 }
 
 /**
  * Builds the string definition for the Mermaid flowchart.
- * Pure renderer for canonical 3D (BFO) and 4D (ISO 15926) graphs.
- * 
+ *
  * @param {Object} semanticGraph - Standardised Semantic Graph.
  * @returns {string} Mermaid chart definition string.
  */
 function buildMermaidDefinition(semanticGraph) {
-  // 1. Initialise the graph direction and styling classes
   let def = 'flowchart TD\n';
   def += '  classDef default fill:#f8fafc,stroke:#cbd5e1,color:#334155,stroke-width:1px\n';
   def += '  classDef bfoSys fill:#0284c7,stroke:#0369a1,color:#ffffff,stroke-width:2px\n';
@@ -84,26 +69,28 @@ function buildMermaidDefinition(semanticGraph) {
   def += '  classDef rdfLit fill:#f1f5f9,stroke:#cbd5e1,color:#334155,stroke-dasharray:3 3\n';
   def += '  classDef iso4d fill:#4f46e5,stroke:#3730a3,color:#ffffff,stroke-width:2px\n';
   def += '  classDef isoState fill:#0d9488,stroke:#0f766e,color:#ffffff,stroke-width:1px\n';
+  def += '  classDef isoStatePast fill:#94a3b8,stroke:#64748b,color:#ffffff,stroke-width:1px,stroke-dasharray:3 3\n';
   def += '  classDef naiveVehicle fill:#0284c7,stroke:#0369a1,color:#ffffff,stroke-width:2px\n';
   def += '  classDef naiveSlot fill:#64748b,stroke:#475569,color:#ffffff,stroke-width:1px\n';
   def += '  classDef naivePart fill:#10b981,stroke:#059669,color:#ffffff,stroke-width:2px\n';
   def += '  classDef naiveDefect fill:#ef4444,stroke:#dc2626,color:#ffffff,stroke-width:2px\n';
   def += '  classDef naiveWarehouse fill:#f97316,stroke:#ea580c,color:#ffffff,stroke-width:2px\n\n';
 
-  // 2. Add Nodes directly from the Semantic Graph (pure renderer)
   (semanticGraph.nodes || []).forEach(node => {
     const safeId = sanitizeId(node.id);
     const styleClass = getNodeClass(node);
-    let labelText = node.label || '';
+    let labelText = node.label || node.id;
+
     if (node.properties) {
       const customProps = Object.entries(node.properties).filter(
-        ([k]) => !['isCurrent', 'originalId', 'entityType', 'validFrom', 'validTo', 'ownerId'].includes(k)
+        ([k, v]) => !INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null
       );
       if (customProps.length > 0) {
         const propStr = customProps.map(([k, v]) => `${k}: ${v}`).join(', ');
         labelText = `${labelText} {${propStr}}`;
       }
     }
+
     const safeLabel = labelText
       .replace(/\n/g, '<br/>')
       .replace(/"/g, '&quot;');
@@ -113,10 +100,10 @@ function buildMermaidDefinition(semanticGraph) {
 
     const entityType = node.type || node.properties?.entityClass;
     if (entityType === 'TemporalPartMembership' || entityType === 'RelationalQuality' || entityType === 'Defect' || /^def/i.test(node.id)) {
-      shapeOpen = '{{"';  // Rhombus / diamond shape
+      shapeOpen = '{{"';
       shapeClose = '"}}';
     } else if (entityType === 'Literal' || entityType === 'Quality' || entityType === 'DependentContinuant' || /^qual/i.test(node.id)) {
-      shapeOpen = '(["'; // Oval / capsule shape for Quality and Literals
+      shapeOpen = '(["';
       shapeClose = '"])';
     }
 
@@ -125,7 +112,6 @@ function buildMermaidDefinition(semanticGraph) {
 
   def += '\n';
 
-  // 4. Add Edges and collect explicit linkStyle declarations
   const linkStyles = [];
   (semanticGraph.edges || []).forEach((edge, idx) => {
     const safeFrom = sanitizeId(edge.from);
@@ -134,16 +120,15 @@ function buildMermaidDefinition(semanticGraph) {
 
     let linkArrow = '-->';
     if (edge.type === 'transition') {
-      linkArrow = '==>'; // Thick arrow for LPG state transitions
+      linkArrow = '==>';
     } else if (!isCurrent || edge.type === 'classification' || edge.type === 'reification' || edge.type === 'predicate') {
-      linkArrow = '-.->'; // Dashed line for inactive, classification, or reification links
+      linkArrow = '-.->';
     }
 
-    // Format edge label and append custom properties (e.g. defect observations) if present
     let rawLabel = edge.label || '';
     if (edge.properties) {
       const customEdgeProps = Object.entries(edge.properties).filter(
-        ([k]) => !['isCurrent', 'validFrom', 'validTo', 'originalId', 'ownerId', 'entityType', 'childId', 'parentId'].includes(k)
+        ([k, v]) => !INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null
       );
       if (customEdgeProps.length > 0) {
         const propStr = customEdgeProps.map(([k, v]) => `${k}: ${v}`).join(', ');
@@ -151,12 +136,9 @@ function buildMermaidDefinition(semanticGraph) {
       }
     }
 
-    // Escape quotes in the label
     const safeEdgeLabel = rawLabel.replace(/"/g, "'");
-
     def += `  ${safeFrom} ${linkArrow}|"${safeEdgeLabel}"| ${safeTo}\n`;
 
-    // Calculate edge colour and line styling to match the legend
     const style = getMermaidEdgeStyle(edge);
     let styleDecl = `stroke:${style.stroke},stroke-width:${style.width}px`;
     if (style.dash) {
@@ -172,13 +154,6 @@ function buildMermaidDefinition(semanticGraph) {
   return def;
 }
 
-/**
- * Determines the stroke colour, width, and dash style for a Mermaid edge.
- * Perfectly synchronises canvas edge rendering with the UI legend colours.
- * 
- * @param {Object} edge - Canonical semantic edge.
- * @returns {{ stroke: string, width: number, dash?: string }} Styling descriptor.
- */
 function getMermaidEdgeStyle(edge) {
   const isCurrent = edge.properties?.isCurrent !== false;
 
@@ -190,33 +165,23 @@ function getMermaidEdgeStyle(edge) {
   const label = (edge.label || '').toLowerCase();
 
   if (rel === 'has_defect' || label === 'has_defect' || label === 'defect') {
-    return { stroke: '#ef4444', width: 2 }; // Red
+    return { stroke: '#ef4444', width: 2 };
   }
-
-  if (rel === 'inherence' || label === 'inheres_in' || label === 'bearer_of') {
-    return { stroke: '#f59e0b', width: 2 }; // Amber
+  if (rel === 'inherence' || label === 'inheres_in') {
+    return { stroke: '#f59e0b', width: 2 };
   }
-
   if (rel === 'has_slot' || label === 'has_slot') {
-    return { stroke: '#0284c7', width: 2 }; // Blue
+    return { stroke: '#0284c7', width: 2 };
   }
-
-  if (rel === 'mounted_in' || label === 'mounted_in') {
-    return { stroke: '#10b981', width: 2 }; // Green
+  if (rel === 'mounted_in' || label === 'mounted_in' || rel === 'composition' || rel === 'has_part' || label === 'has_part') {
+    return { stroke: '#10b981', width: 2 };
   }
-
   if (rel === 'stored_at' || label === 'stored_at') {
-    return { stroke: '#f97316', width: 2 }; // Orange
-  }
-
-  if (rel === 'composition' || rel === 'has_part' || label === 'has_part' || label === 'haspart' || label === 'partof') {
-    return { stroke: '#10b981', width: 2 }; // Emerald green
+    return { stroke: '#f97316', width: 2 };
   }
-
   if (rel === 'transition') {
-    return { stroke: '#f59e0b', width: 2 }; // Amber
+    return { stroke: '#f59e0b', width: 2 };
   }
-
   if (rel === 'classification' || rel === 'reification' || rel === 'predicate' || label === 'temporalpartof') {
     return { stroke: '#94a3b8', width: 1, dash: '3 3' };
   }
@@ -224,9 +189,6 @@ function getMermaidEdgeStyle(edge) {
   return { stroke: '#94a3b8', width: 1 };
 }
 
-/**
- * Maps ontological node types to Mermaid CSS classes.
- */
 function getNodeClass(node) {
   const entityType = node.type || node.properties?.entityClass || node.properties?.entityType;
 
@@ -242,7 +204,9 @@ function getNodeClass(node) {
     case 'Warehouse':
       return 'naiveWarehouse';
     case 'MaterialEntity':
-      return node.properties?.entityType === 'system' ? 'bfoSys' : 'bfoElem';
+      return (node.properties?.entityType === 'system' || node.properties?.entityClass === 'Vehicle')
+        ? 'bfoSys'
+        : 'bfoElem';
     case 'Quality':
     case 'DependentContinuant':
       return 'bfoQuality';
@@ -254,7 +218,7 @@ function getNodeClass(node) {
     case 'ActualIndividual':
       return 'iso4d';
     case 'State':
-      return 'isoState';
+      return node.properties?.isCurrent === false ? 'isoStatePast' : 'isoState';
     default:
       if (/^def/i.test(node.id)) return 'naiveDefect';
       if (/^qual/i.test(node.id)) return 'bfoQuality';
@@ -262,9 +226,6 @@ function getNodeClass(node) {
   }
 }
 
-/**
- * Removes unsupported characters from IDs for Mermaid compatibility.
- */
 function sanitizeId(id) {
-  return id.replace(/[^a-zA-Z0-9_]/g, '_');
+  return String(id).replace(/[^a-zA-Z0-9_]/g, '_');
 }

js/renderers/vis-adapter.js

@@ -1,58 +1,54 @@
 /**
  * VIS.JS RENDERER ADAPTER
  * -----------------------
- * This module is responsible for bridging the abstract Semantic Graph
- * with the visual representations required by the Vis.js Network library.
- * It strictly handles styling (colours, shapes, physics) based on node/edge types.
+ * Bridges the abstract Semantic Graph with Vis.js Network.
+ * Uses incremental DataSet diffing so the graph layout stays stable across time steps.
  */
 
-// We assume 'vis' is available globally via the CDN imported in index.html.
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+
 let network = null;
 const visNodes = new vis.DataSet();
 const visEdges = new vis.DataSet();
 
 /**
  * Initialises the Vis.js network instance in the specified DOM container.
- * 
+ *
  * @param {HTMLElement} container - The DOM element to host the canvas.
  */
 export function initVisNetwork(container) {
+  if (!container) return;
   if (network) {
     network.destroy();
     network = null;
   }
+  visNodes.clear();
+  visEdges.clear();
   const data = { nodes: visNodes, edges: visEdges };
   network = new vis.Network(container, data, getBaseOptions(false));
 }
 
 /**
- * Updates the network with a new Semantic Graph.
- * 
+ * Updates the network with a new Semantic Graph using non-destructive DataSet diffing.
+ *
  * @param {Object} semanticGraph - { nodes: [], edges: [] }
- * @param {boolean} isComplex - Flag to adjust physics for denser graphs (e.g. ISO 15926 4D).
+ * @param {boolean} isComplex - Flag to adjust physics for denser graphs.
  */
 export function updateVisNetwork(semanticGraph, isComplex = false) {
-  if (!network) {
-    console.error("[Vis Adapter] Network not initialised. Call initVisNetwork first.");
-    return;
-  }
+  if (!network || !semanticGraph) return;
 
-  // Update physics options based on graph complexity
   network.setOptions(getBaseOptions(isComplex));
 
-  // Clear existing data
-  visNodes.clear();
-  visEdges.clear();
-
-  // 1. Map and style Nodes directly from the Semantic Graph (pure renderer)
+  // 1. Map and style Nodes
+  const incomingNodeIds = new Set();
   const styledNodes = (semanticGraph.nodes || []).map(node => {
+    incomingNodeIds.add(node.id);
     const style = getNodeStyle(node);
-    
-    // Display custom properties directly on the node label if present
+
     let displayLabel = node.label || node.id;
     if (node.properties) {
       const customProps = Object.entries(node.properties).filter(
-        ([k]) => !['isCurrent', 'originalId', 'entityType', 'validFrom', 'validTo', 'ownerId'].includes(k)
+        ([k, v]) => !INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null
       );
       if (customProps.length > 0) {
         const propStr = customProps.map(([k, v]) => `${k}: ${v}`).join(', ');
@@ -78,34 +74,39 @@ export function updateVisNetwork(semanticGraph, isComplex = false) {
 
     return styledNode;
   });
-  visNodes.add(styledNodes);
+
+  // Remove obsolete nodes and update/add current nodes
+  const existingNodeIds = visNodes.getIds();
+  const nodesToRemove = existingNodeIds.filter(id => !incomingNodeIds.has(id));
+  if (nodesToRemove.length > 0) visNodes.remove(nodesToRemove);
+  if (styledNodes.length > 0) visNodes.update(styledNodes);
 
   // 2. Map and style Edges
-  // We need to handle overlapping edges (multiple events between same parent/child)
   const pairMap = {};
-  semanticGraph.edges.forEach(edge => {
+  (semanticGraph.edges || []).forEach(edge => {
     const pairKey = `${edge.from}->${edge.to}`;
     if (!pairMap[pairKey]) pairMap[pairKey] = [];
     pairMap[pairKey].push(edge);
   });
 
+  const incomingEdgeIds = new Set();
   const styledEdges = [];
+
   Object.values(pairMap).forEach(edgesGroup => {
     const count = edgesGroup.length;
-    
+
     edgesGroup.forEach((edge, idx) => {
-      // Create a smooth curve if multiple edges exist between the same nodes
-      const smoothConfig = count === 1 
+      incomingEdgeIds.add(edge.id);
+      const smoothConfig = count === 1
         ? { type: 'continuous', roundness: 0.2 }
         : { type: 'curvedCW', roundness: Math.min(0.14 + (idx * 0.14), 0.85) };
 
       const style = getEdgeStyle(edge);
 
-      // Display custom properties directly on the edge label if present
-      let displayEdgeLabel = edge.label;
+      let displayEdgeLabel = edge.label || '';
       if (edge.properties) {
         const customEdgeProps = Object.entries(edge.properties).filter(
-          ([k]) => !['isCurrent', 'validFrom', 'validTo'].includes(k)
+          ([k, v]) => !INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null
         );
         if (customEdgeProps.length > 0) {
           const propStr = customEdgeProps.map(([k, v]) => `${k}: ${v}`).join(', ');
@@ -127,110 +128,59 @@ export function updateVisNetwork(semanticGraph, isComplex = false) {
     });
   });
 
-  visEdges.add(styledEdges);
+  const existingEdgeIds = visEdges.getIds();
+  const edgesToRemove = existingEdgeIds.filter(id => !incomingEdgeIds.has(id));
+  if (edgesToRemove.length > 0) visEdges.remove(edgesToRemove);
+  if (styledEdges.length > 0) visEdges.update(styledEdges);
 }
 
-/**
- * Determines the visual style of a node based on its ontological type.
- * Only handles canonical 3D (BFO) and 4D (ISO 15926) domain entities.
- * 
- * @param {Object} node - Canonical semantic node.
- * @returns {Object} Vis.js node styling object.
- */
 function getNodeStyle(node) {
   const entityType = node.type || node.properties?.entityClass || node.properties?.entityType;
 
   switch (entityType) {
-    // Specific Manufacturing Domain Classes (Naive Mode)
     case 'Vehicle':
-      return {
-        shape: 'box',
-        color: '#0284c7', // Blue
-        font: { color: '#ffffff', bold: true }
-      };
-
+      return { shape: 'box', color: '#0284c7', font: { color: '#ffffff', bold: true } };
     case 'Slot':
-      return {
-        shape: 'box',
-        color: '#64748b', // Grey
-        font: { color: '#ffffff' }
-      };
-
+      return { shape: 'box', color: '#64748b', font: { color: '#ffffff' } };
     case 'Part':
-      return {
-        shape: 'box',
-        color: '#10b981', // Green
-        font: { color: '#ffffff', bold: true }
-      };
-
+      return { shape: 'box', color: '#10b981', font: { color: '#ffffff', bold: true } };
     case 'Defect':
-      return {
-        shape: 'diamond',
-        size: 25,
-        color: '#ef4444', // Red
-        font: { color: '#ffffff', bold: true }
-      };
-
+      return { shape: 'diamond', size: 25, color: '#ef4444', font: { color: '#ffffff', bold: true } };
     case 'Warehouse':
-      return {
-        shape: 'box',
-        color: '#f97316', // Orange
-        font: { color: '#ffffff', bold: true }
-      };
-
-    // BFO 3D Continuants
+      return { shape: 'box', color: '#f97316', font: { color: '#ffffff', bold: true } };
     case 'MaterialEntity': {
-      const isSystem = node.properties?.entityType === 'system';
+      const isSystem = node.properties?.entityType === 'system' || node.properties?.entityClass === 'Vehicle';
       return {
         shape: 'box',
-        color: isSystem ? '#0284c7' : '#64748b', // Blue for System, Slate for Element
+        color: isSystem ? '#0284c7' : '#64748b',
         font: { color: '#ffffff', bold: isSystem }
       };
     }
-
     case 'Quality':
     case 'DependentContinuant':
-      return {
-        shape: 'diamond',
-        size: 25,
-        color: '#f59e0b', // Amber / orange for Dependent Continuant
-        font: { color: '#000000', bold: true }
-      };
-
-    // W3C RDF Reification and Literals (SMS physical layer)
+      return { shape: 'diamond', size: 25, color: '#f59e0b', font: { color: '#000000', bold: true } };
     case 'RelationalQuality':
     case 'TemporalPartMembership': {
       const isStmtActive = node.properties?.isCurrent !== false;
       return {
         shape: 'diamond',
-        size: 15,
-        color: isStmtActive ? '#f59e0b' : '#e2e8f0', // Amber if active, light grey if past
+        size: 16,
+        color: isStmtActive ? '#f59e0b' : '#e2e8f0',
         font: { size: 10, color: isStmtActive ? '#000000' : '#64748b', bold: true }
       };
     }
-
     case 'Literal':
-      return {
-        shape: 'ellipse', // Oval shape
-        color: '#f8fafc',
-        font: { size: 8, color: '#334155' }
-      };
-
-    // ISO 15926 4D Perdurants
+      return { shape: 'ellipse', color: '#f8fafc', font: { size: 9, color: '#334155' } };
     case 'ActualIndividual':
+      return { shape: 'box', color: '#4f46e5', font: { color: '#ffffff', bold: true } };
+    case 'State': {
+      const isStateActive = node.properties?.isCurrent !== false;
       return {
         shape: 'box',
-        color: '#4f46e5', // Indigo
-        font: { color: '#ffffff', bold: true }
-      };
-
-    case 'State':
-      return {
-        shape: 'box',
-        color: '#0d9488', // Teal
+        color: isStateActive ? '#0d9488' : '#94a3b8',
         font: { color: '#ffffff' }
       };
-
+    }
     default: {
       if (/^def/i.test(node.id)) {
         return { shape: 'diamond', color: '#ef4444', font: { color: '#ffffff', bold: true } };
@@ -243,94 +193,49 @@ function getNodeStyle(node) {
   }
 }
 
-/**
- * Determines the visual style of an edge based on its ontological type and temporal validity.
- * 
- * @param {Object} edge - Canonical semantic edge with properties.
- * @returns {Object} Vis.js edge styling object.
- */
 function getEdgeStyle(edge) {
   const isCurrent = edge.properties?.isCurrent !== false;
+  const rel = edge.type || edge.label;
 
-  switch (edge.type) {
-    case 'has_slot':
-      return {
-        color: isCurrent ? { color: '#0284c7' } : { color: '#cbd5e1' }, // Blue
-        dashes: !isCurrent,
-        width: isCurrent ? 2 : 1
-      };
+  if (!isCurrent) {
+    return { color: { color: '#cbd5e1' }, dashes: true, width: 1 };
+  }
 
+  switch (rel) {
+    case 'has_slot':
+      return { color: { color: '#0284c7' }, dashes: false, width: 2 };
     case 'mounted_in':
-      return {
-        color: isCurrent ? { color: '#10b981' } : { color: '#cbd5e1' }, // Green
-        dashes: !isCurrent,
-        width: isCurrent ? 2 : 1
-      };
-
+    case 'composition':
+    case 'has_part':
+      return { color: { color: '#10b981' }, dashes: false, width: 2 };
     case 'stored_at':
-      return {
-        color: isCurrent ? { color: '#f97316' } : { color: '#cbd5e1' }, // Orange
-        dashes: !isCurrent,
-        width: isCurrent ? 2 : 1
-      };
-
+      return { color: { color: '#f97316' }, dashes: false, width: 2 };
     case 'has_defect':
-      return {
-        color: isCurrent ? { color: '#ef4444' } : { color: '#cbd5e1' }, // Red
-        dashes: !isCurrent,
-        width: 2
-      };
-
+      return { color: { color: '#ef4444' }, dashes: false, width: 2 };
     case 'inherence':
-      return {
-        color: isCurrent ? { color: '#f59e0b' } : { color: '#cbd5e1' }, // Amber for inheres_in
-        dashes: !isCurrent,
-        width: 2
-      };
-
-    case 'composition':
-    case 'has_part':
-      return {
-        color: isCurrent ? { color: '#10b981' } : { color: '#cbd5e1' }, // Emerald active, Slate past
-        dashes: !isCurrent,
-        width: isCurrent ? 2 : 1
-      };
-
+      return { color: { color: '#f59e0b' }, dashes: false, width: 2 };
     case 'transition':
-      return {
-        color: { color: '#f59e0b' }, // Amber for LPG state transitions
-        dashes: false,
-        width: 2
-      };
-
+      return { color: { color: '#f59e0b' }, dashes: false, width: 2 };
     case 'classification':
     case 'reification':
     case 'predicate':
-      return {
-        color: { color: '#94a3b8' }, // Subtle slate for structural 4D or RDF links
-        dashes: !isCurrent,
-        width: 1
-      };
-
+      return { color: { color: '#94a3b8' }, dashes: true, width: 1 };
     default:
-      return { color: { color: '#94a3b8' }, dashes: !isCurrent, width: 1 };
+      return { color: { color: '#94a3b8' }, dashes: false, width: 1 };
   }
 }
 
-/**
- * Generates the physics configuration for the Vis.js canvas.
- */
 function getBaseOptions(isComplex) {
   return {
     physics: {
-      stabilization: { iterations: 120 },
-      barnesHut: { 
-        gravitationalConstant: isComplex ? -24000 : -10000, 
-        centralGravity: 0.25, 
-        springLength: isComplex ? 220 : 150, 
-        springConstant: 0.04, 
-        damping: 0.09, 
-        avoidOverlap: 1 
+      stabilization: { iterations: 80, fit: true },
+      barnesHut: {
+        gravitationalConstant: isComplex ? -22000 : -10000,
+        centralGravity: 0.25,
+        springLength: isComplex ? 200 : 140,
+        springConstant: 0.04,
+        damping: 0.12,
+        avoidOverlap: 0.9
       }
     },
     edges: { arrows: 'to' }

js/scenarios/scenario-vanishing-crack.js

@@ -1,10 +1,8 @@
 /**
  * SCENARIO: THE VANISHING CRACK
  * -----------------------------
- * Contains narrative subtitle data and the chronological action timeline
+ * Narrative subtitle data and chronological action timeline
  * synchronised with audio playback.
- * 
- * Timestamps are represented in seconds (float).
  */
 
 import {
@@ -13,11 +11,11 @@ import {
   createReportDefectEvent,
   createDismantleEvent
 } from '../smrm/actions.js';
+import { setPerspective } from '../state.js';
 
 /**
  * Highlights specified UI elements by IDs with a temporary glowing effect.
- * Simulates a Phantom User interacting with the workbench controls.
- * 
+ *
  * @param {string[]} elementIds - Array of DOM element IDs to highlight.
  * @param {number} [duration=1200] - Duration of the highlight effect in milliseconds.
  */
@@ -78,162 +76,144 @@ const subtitles = [
 export const vanishingCrackScenario = {
   subtitles,
   timeline: [
-    // 1. t = 1.0: Initialize Naive Node mode, SMRM perspective, and Mermaid engine
+    // 1. t = 1.0: Initialize Naive Node mode, Logical (SMIM) perspective so slot & mounted_in edge are visible
     {
       id: 'step_1_0_init_naive',
       time: 1.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         state.ontology = 'NAIVE_NODE';
-        state.perspective = 'SMRM';
+        setPerspective('SMIM');
         state.graphEngine = 'MERMAID';
       }
     },
 
-    // 2. t = 15.5: highlight UI. Action: createRegisterPartEvent('System_A', time)
+    // 2. t = 15.5: Register Vehicle System_A
     {
       id: 'step_15_5_reg_vehicle',
       time: 15.5,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-reg-id', 'biz-reg-btn']);
         state.currentTime = 15.5;
-        const event = createRegisterPartEvent('System_A', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        const event = createRegisterPartEvent('System_A', state.currentTime, 'Vehicle');
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 3. t = 18.0: Audio mentions slot: Simply register Part_M01 and assemble System_A and Part_M01
-    // The smart adapters implicitly generate the contextual slot!
+    // 3. t = 18.0: Register Part_M01 and install in System_A (creates Slot_System_A_Part_M01)
     {
       id: 'step_18_0_reg_part_install',
       time: 18.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-reg-id', 'biz-inst-btn']);
         state.currentTime = 18.0;
-        const regEvent = createRegisterPartEvent('Part_M01', state.currentTime);
-        if (regEvent) {
-          state.eventLog.push(regEvent);
-        }
+        const regEvent = createRegisterPartEvent('Part_M01', state.currentTime, 'Part');
+        if (regEvent) state.eventLog.push(regEvent);
         const asmEvent = createAssembleEvent('System_A', 'Part_M01', 'mounted_in', state.currentTime);
-        if (asmEvent) {
-          state.eventLog.push(asmEvent);
-        }
+        if (asmEvent) state.eventLog.push(asmEvent);
       }
     },
 
-    // 4. t = 43.0: highlight UI. Action: createReportDefectEvent('Part_M01', 'crack', '2mm', time) -> Adapter will attach to NODE
+    // 4. t = 43.0: Report Defect crack=2mm on Part_M01 (attached to NODE)
     {
       id: 'step_43_0_attach_crack_node',
       time: 43.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-def-target', 'biz-def-btn']);
         state.currentTime = 43.0;
         const event = createReportDefectEvent('Part_M01', 'crack', '2mm', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 5. t = 56.5: Revoke the defect
+    // 5. t = 56.5: Rewind thought-experiment defect before switching strategy to NAIVE_EDGE
     {
       id: 'step_56_5_revoke_crack_node',
       time: 56.5,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-rev-defect', 'biz-rev-btn']);
         state.currentTime = 56.5;
         const idx = state.eventLog.findIndex(e => e.type === 'REPORT_DEFECT' && e.targetId === 'Part_M01');
-        if (idx !== -1) {
-          state.eventLog.splice(idx, 1);
-        }
+        if (idx !== -1) state.eventLog.splice(idx, 1);
       }
     },
 
-    // 6. t = 58.5: Switch state.ontology = 'NAIVE_EDGE' and highlight top header button
+    // 6. t = 58.5: Switch to NAIVE_EDGE
     {
       id: 'step_58_5_switch_strategy_edge',
       time: 58.5,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['ctrl-onto-naive-edge']);
         state.ontology = 'NAIVE_EDGE';
       }
     },
 
-    // 7. t = 61.0: highlight UI. Action: createReportDefectEvent('Part_M01', 'crack', '2mm', time) -> Adapter attaches to EDGE
+    // 7. t = 61.0: Report Defect crack=2mm on Part_M01 (attached to mounted_in EDGE)
     {
       id: 'step_61_0_attach_crack_edge',
       time: 61.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-def-target', 'biz-def-btn']);
         state.currentTime = 61.0;
         const event = createReportDefectEvent('Part_M01', 'crack', '2mm', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 8. t = 78.0: highlight UI. Action: createDismantleEvent('Part_M01', time)
+    // 8. t = 78.0: Dismantle Part_M01
     {
       id: 'step_78_0_dismantle_part',
       time: 78.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-dism-part', 'biz-dism-btn']);
         state.currentTime = 78.0;
         const event = createDismantleEvent('Part_M01', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 9. t = 82.0: highlight UI. Action: createRegisterPartEvent('Warehouse_1', time)
+    // 9. t = 82.0: Register Warehouse_1
     {
       id: 'step_82_0_reg_warehouse',
       time: 82.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-reg-id', 'biz-reg-btn']);
         state.currentTime = 82.0;
-        const event = createRegisterPartEvent('Warehouse_1', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        const event = createRegisterPartEvent('Warehouse_1', state.currentTime, 'Warehouse');
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 10. t = 84.0: highlight UI. Action: createAssembleEvent('Warehouse_1', 'Part_M01', 'stored_at', time)
+    // 10. t = 84.0: Move Part_M01 to Warehouse_1
     {
       id: 'step_84_0_store_part',
       time: 84.0,
       executed: false,
-      action(state, renderGraph) {
+      action(state) {
         highlightUI(['biz-store-part', 'biz-store-target', 'biz-store-btn']);
         state.currentTime = 84.0;
         const event = createAssembleEvent('Warehouse_1', 'Part_M01', 'stored_at', state.currentTime);
-        if (event) {
-          state.eventLog.push(event);
-        }
+        if (event) state.eventLog.push(event);
       }
     },
 
-    // 11. t = 122.0: highlight UI (ontology switch). Action: state.ontology = 'ISO15926'
+    // 11. t = 122.0: Switch to ISO 15926 (4D) in Logical (SMIM) Perspective
     {
       id: 'step_122_0_switch_iso',
       time: 122.0,
       executed: false,
-      action(state, renderGraph) {
-        highlightUI(['ctrl-onto-iso']);
+      action(state) {
+        highlightUI(['ctrl-onto-iso', 'ctrl-view-logical']);
         state.ontology = 'ISO15926';
+        setPerspective('SMIM');
       }
     }
   ]
@@ -241,18 +221,12 @@ export const vanishingCrackScenario = {
 
 /**
  * Dispatches pending timeline actions based on current playback time.
- * Resolves float chunking using `>= step.time && !step.executed`.
- * 
- * @param {number} currentTime - Current audio playback time in seconds.
- * @param {Object} state - The reactive domain state.
- * @param {Function} [renderGraph] - Function to trigger canvas redraw.
  */
 export function onTimeUpdate(currentTime, state, renderGraph) {
   if (!Array.isArray(vanishingCrackScenario.timeline)) return;
 
   vanishingCrackScenario.timeline.forEach(step => {
     if (currentTime >= step.time && !step.executed) {
-      console.log('Executing step:', step.time);
       step.executed = true;
       const fn = step.action || step.execute;
       if (typeof fn === 'function') {
@@ -267,8 +241,6 @@ export function onTimeUpdate(currentTime, state, renderGraph) {
 
 /**
  * Resets execution flags on timeline steps when seeking, stopping, or rewinding.
- * 
- * @param {number} [targetTime=0] - Audio target time. Steps with step.time >= targetTime are reset to unexecuted.
  */
 export function resetTimeline(targetTime = 0) {
   if (!Array.isArray(vanishingCrackScenario.timeline)) return;
@@ -277,4 +249,4 @@ export function resetTimeline(targetTime = 0) {
       step.executed = false;
     }
   });
-}
+}

js/smim/bfo.js

@@ -2,44 +2,50 @@
  * BFO ONTOLOGY ADAPTER (3D Continuant)
  * ------------------------------------
  * Maps Domain Business Events into a canonical 3D BFO Semantic Graph.
- * 
+ *
  * Ontological Axioms:
- * - Entities (Vehicle, Part, Warehouse) are Independent Continuants ('MaterialEntity')
- *   that endure wholly through time without temporal parts or states.
- * - Defect observations are Specifically Dependent Continuants ('Quality')
- *   that exist only by inhering in an independent continuant via the 'inheres_in' relation.
- * - Relationships between continuants (mounted_in, stored_at, etc.) hold directly
- *   between the continuants at a given time, carrying temporal validity intervals.
- * - Both the Quality node and the 'inheres_in' edge record validFrom: timestamp.
- * - NEVER generates 'State' or 'Temporal Part' nodes.
- * 
- * @param {Array} eventLog - The projection of temporal business events.
- * @param {Array} [baseNodes=[]] - The projection of base continuant entities.
- * @param {number|null} [currentTime=null] - Global time to evaluate current validity.
- * @returns {{ nodes: Array, edges: Array }} The canonical Semantic Graph.
+ * - Physical entities (Vehicle, Part, Warehouse, Slot) are Independent Continuants ('MaterialEntity').
+ * - Defect observations are Specifically Dependent Continuants ('Quality') inhering in their
+ *   bearer via 'inheres_in'. Because the Quality inheres in the Part itself (not the mounting slot),
+ *   moving the Part to a Warehouse preserves its Quality!
  */
 
-export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime = null) {
+import { inferEntityClass } from '../smrm/definitions.js';
+
+/**
+ * Generates the 3D BFO Semantic Graph from the event log up to currentTime.
+ *
+ * @param {Array} eventLog - Temporal business events.
+ * @param {Array} [baseNodes=[]] - Initial base entities.
+ * @param {number|null} [currentTime=null] - Global evaluation time T.
+ * @param {Object} [options={}] - { showHistory: boolean }.
+ * @returns {{ nodes: Array, edges: Array }}
+ */
+export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime = null, options = {}) {
   const nodeMap = new Map();
   const edges = [];
+  const showHistory = options.showHistory !== undefined ? Boolean(options.showHistory) : true;
 
   function ensureContinuantNode(partId, overrideClass = null) {
     if (!nodeMap.has(partId)) {
+      const entityClass = inferEntityClass(partId, overrideClass);
       nodeMap.set(partId, {
         id: partId,
         label: partId,
         type: 'MaterialEntity',
         properties: {
           originalId: partId,
-          entityClass: overrideClass || inferContinuantClass(partId)
+          entityClass,
+          entityType: entityClass === 'Vehicle' ? 'system' : 'element'
         }
       });
     }
+    return nodeMap.get(partId);
   }
 
-  // 1. Initialise base continuant entities (if provided)
+  // 1. Initialise base continuant entities
   (baseNodes || []).forEach(bn => {
-    ensureContinuantNode(bn.id);
+    ensureContinuantNode(bn.id, bn.entityClass || bn.type);
   });
 
   // 2. Filter and sort business events by timestamp
@@ -48,12 +54,11 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
     .slice()
     .sort((a, b) => (a.valid_from || 0) - (b.valid_from || 0));
 
-
   // 3. Process business events in temporal order
   eventsToProcess.forEach(event => {
     switch (event.type) {
       case 'REGISTER_PART': {
-        ensureContinuantNode(event.partId);
+        ensureContinuantNode(event.partId, event.entityClass);
         break;
       }
 
@@ -84,12 +89,11 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           break;
         }
 
-        // Implicit contextual Slot generation: Slot_${parentId}_${childId}
+        // Contextual Slot generation: Slot_${parentId}_${childId}
         const slotId = `Slot_${parentId}_${childId}`;
         ensureContinuantNode(slotId, 'Slot');
 
-        // Link 1: Parent -> Slot (has_slot)
-        const slotEdgeId = `edge_slot_${parentId}_${slotId}_${timestamp}`;
+        const slotEdgeId = `edge_slot_${event.id || `${parentId}_${slotId}_${timestamp}`}`;
         edges.push({
           id: slotEdgeId,
           from: parentId,
@@ -97,7 +101,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           label: 'has_slot',
           type: 'has_slot',
           childId: slotId,
-          parentId: parentId,
+          parentId,
           properties: {
             validFrom: timestamp,
             validTo: null,
@@ -105,7 +109,6 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           }
         });
 
-        // Link 2: Child -> Slot (mounted_in)
         const mountEdgeId = event.id ? `edge_${event.id}` : `edge_${childId}_${slotId}_${timestamp}`;
         edges.push({
           id: mountEdgeId,
@@ -113,7 +116,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           to: slotId,
           label: 'mounted_in',
           type: 'composition',
-          childId: childId,
+          childId,
           parentId: slotId,
           properties: {
             validFrom: timestamp,
@@ -128,7 +131,6 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         const { childId } = event;
         const dismantleTime = event.valid_from;
 
-        // Locate active assembly relationship for the child component
         const activeEdge = edges.find(
           e => (e.childId === childId || e.from === childId) &&
                (e.label === 'mounted_in' || e.label === 'stored_at') &&
@@ -136,11 +138,17 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         );
         if (activeEdge) {
           activeEdge.properties.validTo = dismantleTime;
-          activeEdge.properties.isCurrent = (currentTime !== null && currentTime !== undefined)
-            ? dismantleTime > currentTime
-            : false;
-        } else {
-          console.warn(`[SMIM BFO] No active assembly relationship found to dismantle child part: ${childId}`);
+
+          if (activeEdge.to && activeEdge.to.startsWith('Slot_')) {
+            const slotEdge = edges.find(
+              e => e.to === activeEdge.to &&
+                   e.label === 'has_slot' &&
+                   e.properties.validTo === null
+            );
+            if (slotEdge) {
+              slotEdge.properties.validTo = dismantleTime;
+            }
+          }
         }
         break;
       }
@@ -154,7 +162,6 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         const qualityId = `qual_${targetId}_${defectName}`;
         const qualityLabel = `${capitalize(defectName)}: ${defectValue}`;
 
-        // Specifically Dependent Continuant (Quality) node recording validFrom
         nodeMap.set(qualityId, {
           id: qualityId,
           label: qualityLabel,
@@ -165,11 +172,12 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
             value: defectValue,
             bearerId: targetId,
             entityClass: 'Quality',
-            validFrom: timestamp
+            validFrom: timestamp,
+            validTo: null,
+            isCurrent: true
           }
         });
 
-        // Canonical BFO relation: Quality inheres_in Independent Continuant (with validFrom)
         const edgeId = `inh_${targetId}_${defectName}_${timestamp}`;
         edges.push({
           id: edgeId,
@@ -186,6 +194,24 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         break;
       }
 
+      case 'REVOKE_DEFECT': {
+        const { targetId, defectName } = event;
+        const revokeTime = event.valid_from;
+        const qualityId = `qual_${targetId}_${defectName}`;
+
+        const activeInherence = edges.find(
+          e => e.from === qualityId && e.to === targetId && e.label === 'inheres_in' && e.properties.validTo === null
+        );
+        if (activeInherence) {
+          activeInherence.properties.validTo = revokeTime;
+        }
+        const qNode = nodeMap.get(qualityId);
+        if (qNode && qNode.properties) {
+          qNode.properties.validTo = revokeTime;
+        }
+        break;
+      }
+
       default:
         break;
     }
@@ -197,31 +223,30 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
       (currentTime !== null && currentTime !== undefined ? edge.properties.validTo > currentTime : false);
   });
 
-  return { 
-    nodes: Array.from(nodeMap.values()), 
-    edges 
-  };
-}
+  nodeMap.forEach(node => {
+    if (node.type === 'Quality' && node.properties) {
+      node.properties.isCurrent = node.properties.validTo === null ||
+        (currentTime !== null && currentTime !== undefined ? node.properties.validTo > currentTime : false);
+    }
+  });
 
-/**
- * Fallback helper to infer continuant entity class.
- * 
- * @param {string} id - Continuant identifier.
- * @returns {string} Inferred entity class name.
- */
-function inferContinuantClass(id) {
-  if (/^veh/i.test(id)) return 'Vehicle';
-  if (/^slot/i.test(id)) return 'Slot';
-  if (/^ware|^wh/i.test(id)) return 'Warehouse';
-  return 'Part';
+  const filteredEdges = showHistory
+    ? edges
+    : edges.filter(e => e.properties.isCurrent !== false);
+
+  const filteredNodes = Array.from(nodeMap.values()).filter(n => {
+    if (showHistory) return true;
+    if (n.type === 'Quality') return n.properties?.isCurrent !== false;
+    return true;
+  });
+
+  return {
+    nodes: filteredNodes,
+    edges: filteredEdges
+  };
 }
 
-/**
- * Capitalises the first letter of a string.
- * @param {string} str 
- * @returns {string}
- */
 function capitalize(str) {
   if (!str) return '';
   return str.charAt(0).toUpperCase() + str.slice(1);
-}
+}

js/smim/iso15926.js

@@ -2,26 +2,31 @@
  * ISO 15926 ONTOLOGY ADAPTER (4D Perdurant)
  * -----------------------------------------
  * Maps Domain Business Events into a canonical 4D ISO 15926 Semantic Graph.
- * 
+ *
  * Ontological Axioms:
- * - Physical entities (Vehicle, Part, Warehouse) are 4D individuals ('ActualIndividual')
+ * - Physical entities (Vehicle, Part, Warehouse, Slot) are 4D individuals ('ActualIndividual')
  *   with spatio-temporal extents across their entire lifetime.
- * - Relationships (mounted_in, stored_at, etc.) do not connect 4D extents directly;
- *   they connect temporal slices ('State') of those entities during specific validity periods.
- * - Each 'State' is linked to its whole 4D extent via the 'temporalPartOf' relation.
- * - A 'Defect' is an independent condition/classification entity that classifies a specific
- *   temporal part ('State') of an entity during a specific time slice, NOT the root 4D individual.
- * 
- * @param {Array} eventLog - The projection of temporal business events.
- * @param {Array} [baseNodes=[]] - The projection of base entities.
- * @param {number|null} [currentTime=null] - Global time to evaluate current validity.
- * @returns {{ nodes: Array, edges: Array }} The canonical Semantic Graph.
+ * - Relationships connect temporal slices ('State') of those entities during specific validity periods.
+ * - Each 'State' is linked to its 4D extent via 'temporalPartOf'.
+ * - A 'Defect' classifies the temporal 'State' of the entity.
  */
 
-export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime = null) {
+import { inferEntityClass } from '../smrm/definitions.js';
+
+/**
+ * Generates the 4D ISO 15926 Semantic Graph from the event log up to currentTime.
+ *
+ * @param {Array} eventLog - Temporal business events.
+ * @param {Array} [baseNodes=[]] - Initial base entities.
+ * @param {number|null} [currentTime=null] - Global evaluation time T.
+ * @param {Object} [options={}] - { showHistory: boolean }.
+ * @returns {{ nodes: Array, edges: Array }}
+ */
+export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime = null, options = {}) {
   const nodeMap = new Map();
   const edges = [];
   const stateNodesByOwner = new Map();
+  const showHistory = options.showHistory !== undefined ? Boolean(options.showHistory) : true;
 
   function registerStateNode(ownerId, stateNode) {
     if (!stateNodesByOwner.has(ownerId)) {
@@ -33,22 +38,23 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
   function ensureExtentNode(partId, overrideClass = null) {
     const extentId = `4d_${partId}`;
     if (!nodeMap.has(extentId)) {
+      const entityClass = inferEntityClass(partId, overrideClass);
       nodeMap.set(extentId, {
         id: extentId,
         label: `${partId}_4D`,
         type: 'ActualIndividual',
         properties: {
           originalId: partId,
-          entityClass: overrideClass || inferEntityType(partId)
+          entityClass
         }
       });
     }
     return extentId;
   }
 
-  // 1. Initialise base 4D extent nodes (if provided)
+  // 1. Initialise base 4D extent nodes
   (baseNodes || []).forEach(bn => {
-    ensureExtentNode(bn.id);
+    ensureExtentNode(bn.id, bn.entityClass || bn.type);
   });
 
   // 2. Filter and sort business events by timestamp
@@ -57,12 +63,11 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
     .slice()
     .sort((a, b) => (a.valid_from || 0) - (b.valid_from || 0));
 
-
   // 3. Process business events in temporal order
   eventsToProcess.forEach(event => {
     switch (event.type) {
       case 'REGISTER_PART': {
-        ensureExtentNode(event.partId);
+        ensureExtentNode(event.partId, event.entityClass);
         break;
       }
 
@@ -123,12 +128,14 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
             type: 'composition',
             childId,
             parentId,
+            childStateId,
+            parentStateId,
             properties: { validFrom: timestamp, validTo: null, isCurrent: true }
           });
           break;
         }
 
-        // Implicit contextual Slot generation: Slot_${parentId}_${childId}
+        // Contextual Slot generation: Slot_${parentId}_${childId}
         const slotId = `Slot_${parentId}_${childId}`;
         const slotExtentId = ensureExtentNode(slotId, 'Slot');
 
@@ -140,12 +147,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           id: parentStateId,
           label: `${parentId}_State`,
           type: 'State',
-          properties: {
-            ownerId: parentId,
-            validFrom: timestamp,
-            validTo: null,
-            isCurrent: true
-          }
+          properties: { ownerId: parentId, validFrom: timestamp, validTo: null, isCurrent: true }
         };
         nodeMap.set(parentStateId, parentState);
         registerStateNode(parentId, parentState);
@@ -154,12 +156,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           id: slotStateId,
           label: `${slotId}_State`,
           type: 'State',
-          properties: {
-            ownerId: slotId,
-            validFrom: timestamp,
-            validTo: null,
-            isCurrent: true
-          }
+          properties: { ownerId: slotId, validFrom: timestamp, validTo: null, isCurrent: true }
         };
         nodeMap.set(slotStateId, slotState);
         registerStateNode(slotId, slotState);
@@ -168,17 +165,11 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           id: childStateId,
           label: `${childId}_State`,
           type: 'State',
-          properties: {
-            ownerId: childId,
-            validFrom: timestamp,
-            validTo: null,
-            isCurrent: true
-          }
+          properties: { ownerId: childId, validFrom: timestamp, validTo: null, isCurrent: true }
         };
         nodeMap.set(childStateId, childState);
         registerStateNode(childId, childState);
 
-        // Link temporal states to their 4D extents
         edges.push({
           id: `tpo_${parentStateId}`,
           from: parentStateId,
@@ -215,14 +206,10 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           label: 'has_slot',
           type: 'has_slot',
           childId: slotId,
-          parentId: parentId,
+          parentId,
           childStateId: slotStateId,
-          parentStateId: parentStateId,
-          properties: {
-            validFrom: timestamp,
-            validTo: null,
-            isCurrent: true
-          }
+          parentStateId,
+          properties: { validFrom: timestamp, validTo: null, isCurrent: true }
         });
 
         // Link 2: Child State -> Slot State (mounted_in)
@@ -237,11 +224,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           parentId: slotId,
           childStateId,
           parentStateId: slotStateId,
-          properties: {
-            validFrom: timestamp,
-            validTo: null,
-            isCurrent: true
-          }
+          properties: { validFrom: timestamp, validTo: null, isCurrent: true }
         });
         break;
       }
@@ -250,7 +233,6 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         const { childId } = event;
         const dismantleTime = event.valid_from;
 
-        // Find active assembly or storage edge for this child
         const activeAssembly = edges.find(
           e => (e.childId === childId || e.from.startsWith(`st_${childId}_`)) &&
                (e.label === 'mounted_in' || e.label === 'stored_at') &&
@@ -258,25 +240,43 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         );
         if (activeAssembly) {
           activeAssembly.properties.validTo = dismantleTime;
-          activeAssembly.properties.isCurrent = (currentTime !== null && currentTime !== undefined)
-            ? dismantleTime > currentTime
-            : false;
 
-          // Close the child state slice
+          // Close child state slice and its temporalPartOf link
           const childState = nodeMap.get(activeAssembly.childStateId);
           if (childState) {
             childState.properties.validTo = dismantleTime;
-            childState.properties.isCurrent = activeAssembly.properties.isCurrent;
           }
-
-          // Close the child's temporalPartOf link
           const tpoChild = edges.find(e => e.id === `tpo_${activeAssembly.childStateId}`);
           if (tpoChild) {
             tpoChild.properties.validTo = dismantleTime;
-            tpoChild.properties.isCurrent = activeAssembly.properties.isCurrent;
           }
-        } else {
-          console.warn(`[SMIM ISO15926] No active assembly found to dismantle child part: ${childId}`);
+
+          // Close contextual slot state, its has_slot edge, and the parent state slice
+          const slotStateId = activeAssembly.parentStateId;
+          if (slotStateId && slotStateId.startsWith('st_Slot_')) {
+            const slotState = nodeMap.get(slotStateId);
+            if (slotState) {
+              slotState.properties.validTo = dismantleTime;
+            }
+            const tpoSlot = edges.find(e => e.id === `tpo_${slotStateId}`);
+            if (tpoSlot) {
+              tpoSlot.properties.validTo = dismantleTime;
+            }
+            const hasSlotEdge = edges.find(
+              e => e.to === slotStateId && e.label === 'has_slot' && e.properties.validTo === null
+            );
+            if (hasSlotEdge) {
+              hasSlotEdge.properties.validTo = dismantleTime;
+              const parentState = nodeMap.get(hasSlotEdge.parentStateId);
+              if (parentState) {
+                parentState.properties.validTo = dismantleTime;
+              }
+              const tpoParent = edges.find(e => e.id === `tpo_${hasSlotEdge.parentStateId}`);
+              if (tpoParent) {
+                tpoParent.properties.validTo = dismantleTime;
+              }
+            }
+          }
         }
         break;
       }
@@ -287,9 +287,8 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
 
         const targetExtentId = ensureExtentNode(targetId);
 
-        // Find current active State of the target part
         const existingStates = stateNodesByOwner.get(targetId) || [];
-        let targetState = existingStates.find(st => st.properties?.isCurrent && st.properties?.validTo === null) ||
+        let targetState = existingStates.find(st => st.properties?.validTo === null) ||
           existingStates[existingStates.length - 1];
 
         if (!targetState) {
@@ -331,7 +330,9 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
             value: defectValue,
             targetId,
             entityClass: 'Defect',
-            validFrom: timestamp
+            validFrom: timestamp,
+            validTo: null,
+            isCurrent: true
           }
         });
 
@@ -345,49 +346,69 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           properties: {
             validFrom: timestamp,
             validTo: null,
-            isCurrent: targetState.properties.isCurrent
+            isCurrent: true
           }
         });
         break;
       }
 
+      case 'REVOKE_DEFECT': {
+        const { targetId, defectName } = event;
+        const revokeTime = event.valid_from;
+        const defectNodeId = `def_${targetId}_${defectName}`;
+
+        edges.forEach(e => {
+          if (e.to === defectNodeId && e.label === 'has_defect' && e.properties.validTo === null) {
+            e.properties.validTo = revokeTime;
+          }
+        });
+        const dNode = nodeMap.get(defectNodeId);
+        if (dNode && dNode.properties) {
+          dNode.properties.validTo = revokeTime;
+        }
+        break;
+      }
+
       default:
         break;
     }
   });
 
-  // 4. Synchronise final temporal currentness flags
+  // 4. Synchronise final temporal currentness flags across States, Defects, and Edges
+  const isTimeActive = (validTo) =>
+    validTo === null || validTo === undefined ||
+    (currentTime !== null && currentTime !== undefined ? validTo > currentTime : false);
+
+  nodeMap.forEach(node => {
+    if ((node.type === 'State' || node.type === 'Defect') && node.properties) {
+      node.properties.isCurrent = isTimeActive(node.properties.validTo);
+    }
+  });
+
   edges.forEach(edge => {
-    edge.properties.isCurrent = edge.properties.validTo === null || 
-      (currentTime !== null && currentTime !== undefined ? edge.properties.validTo > currentTime : false);
+    edge.properties.isCurrent = isTimeActive(edge.properties.validTo);
   });
 
-  return { 
-    nodes: Array.from(nodeMap.values()), 
-    edges 
-  };
-}
+  if (!showHistory) {
+    const activeEdges = edges.filter(e => e.properties.isCurrent !== false);
+    const activeNodeIds = new Set();
+    activeEdges.forEach(e => {
+      activeNodeIds.add(e.from);
+      activeNodeIds.add(e.to);
+    });
+    const activeNodes = Array.from(nodeMap.values()).filter(
+      n => n.type === 'ActualIndividual' || n.properties?.isCurrent !== false || activeNodeIds.has(n.id)
+    );
+    return { nodes: activeNodes, edges: activeEdges };
+  }
 
-/**
- * Fallback helper to infer entity type from common identifier naming conventions.
- * 
- * @param {string} id - Node identifier.
- * @returns {string} Inferred entity class name.
- */
-function inferEntityType(id) {
-  if (/^veh/i.test(id)) return 'Vehicle';
-  if (/^slot/i.test(id)) return 'Slot';
-  if (/^def/i.test(id)) return 'Defect';
-  if (/^ware|^wh/i.test(id)) return 'Warehouse';
-  return 'Part';
+  return {
+    nodes: Array.from(nodeMap.values()),
+    edges
+  };
 }
 
-/**
- * Capitalises the first letter of a string.
- * @param {string} str 
- * @returns {string}
- */
 function capitalize(str) {
   if (!str) return '';
   return str.charAt(0).toUpperCase() + str.slice(1);
-}
+}

js/smim/naive.js

@@ -1,44 +1,51 @@
 /**
  * NAIVE GRAPH ADAPTER (Direct Property Graph)
  * --------------------------------------------
- * Maps Domain Business Events into a direct, unconstrained Property Graph without
- * enforcing 3D Continuant (BFO) or 4D Perdurant (ISO 15926) semantic rules.
- * 
- * In this mode:
- * - Entities (Vehicle, Part, Warehouse, etc.) are direct nodes.
- * - Assembly events create direct relationships (e.g. 'mounted_in', 'stored_at')
- *   directed from child component to parent entity.
- * - Dismantling events locate the active assembly relationship and close its temporal validity.
- * - Defect reports are attached directly to Node properties (if naiveDefectTarget === 'NODE')
- *   or to the active assembly Edge properties (if naiveDefectTarget === 'EDGE').
- * 
- * Decoupled from database storage (SMS) and UI concerns, strictly adhering
- * to the SemanticGraph data contract ({ nodes: [], edges: [] }).
- * 
- * @param {Array} eventLog - The projection of temporal business events.
- * @param {Array} [baseNodes=[]] - The projection of base entities.
- * @param {number|null} [currentTime=null] - Global time to evaluate current validity.
- * @param {Object} [options={}] - Optional configuration overrides.
- * @returns {{ nodes: Array, edges: Array }} The canonical Semantic Graph.
+ * Pure function mapping Domain Business Events into an unconstrained Property Graph
+ * without 3D Continuant (BFO) or 4D Perdurant (ISO 15926) formalisms.
+ *
+ * - In 'NAIVE_NODE' mode: Defect reports mutate node properties directly (overwriting history).
+ * - In 'NAIVE_EDGE' mode: Defect reports attach to the active assembly edge (vanishing upon dismantle).
  */
 
-import { state } from '../state.js';
+import { inferEntityClass } from '../smrm/definitions.js';
 
+/**
+ * Generates the Naive Semantic Graph from the event log up to currentTime.
+ *
+ * @param {Array} eventLog - Temporal business events.
+ * @param {Array} [baseNodes=[]] - Initial base entities.
+ * @param {number|null} [currentTime=null] - Global evaluation time T.
+ * @param {Object} [options={}] - { ontology: 'NAIVE_NODE' | 'NAIVE_EDGE', showHistory: boolean }.
+ * @returns {{ nodes: Array, edges: Array }}
+ */
 export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime = null, options = {}) {
   const nodeMap = new Map();
   const edges = [];
 
-  const ontologyMode = options.ontology || state?.ontology || 'NAIVE_NODE';
-  const defectTargetMode = ontologyMode === 'NAIVE_EDGE' ? 'EDGE' : (options.naiveDefectTarget || state?.naiveDefectTarget || 'NODE');
+  const ontologyMode = options.ontology || 'NAIVE_NODE';
+  const defectTargetMode = ontologyMode === 'NAIVE_EDGE' ? 'EDGE' : 'NODE';
+  const showHistory = options.showHistory !== undefined ? Boolean(options.showHistory) : true;
+
+  function ensureNode(id, explicitClass = null, extraProps = {}) {
+    if (!nodeMap.has(id)) {
+      const resolvedClass = inferEntityClass(id, explicitClass);
+      nodeMap.set(id, {
+        id,
+        label: id,
+        type: resolvedClass,
+        properties: {
+          entityClass: resolvedClass,
+          ...extraProps
+        }
+      });
+    }
+    return nodeMap.get(id);
+  }
 
-  // 1. Initialise base nodes from projection (if provided)
+  // 1. Initialise base nodes
   (baseNodes || []).forEach(bn => {
-    nodeMap.set(bn.id, {
-      id: bn.id,
-      label: bn.label || bn.id,
-      type: bn.entityClass || bn.type || inferEntityType(bn.id),
-      properties: { ...(bn.properties || {}) }
-    });
+    ensureNode(bn.id, bn.entityClass || bn.type, bn.properties || {});
   });
 
   // 2. Filter and sort business events by timestamp
@@ -47,48 +54,24 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
     .slice()
     .sort((a, b) => (a.valid_from || 0) - (b.valid_from || 0));
 
-
-  // 3. Process business events in temporal order
+  // 3. Process business events in chronological order
   eventsToProcess.forEach(event => {
     switch (event.type) {
       case 'REGISTER_PART': {
-        const partId = event.partId;
-        if (!nodeMap.has(partId)) {
-          nodeMap.set(partId, {
-            id: partId,
-            label: partId,
-            type: inferEntityType(partId),
-            properties: {}
-          });
-        }
+        ensureNode(event.partId, event.entityClass);
         break;
       }
 
       case 'ASSEMBLE': {
         const { parentId, childId } = event;
         const relType = event.relationType || 'mounted_in';
+        const timestamp = event.valid_from;
 
-        // Ensure both parent and child nodes exist in the node map
-        if (!nodeMap.has(parentId)) {
-          nodeMap.set(parentId, {
-            id: parentId,
-            label: parentId,
-            type: inferEntityType(parentId),
-            properties: {}
-          });
-        }
-        if (!nodeMap.has(childId)) {
-          nodeMap.set(childId, {
-            id: childId,
-            label: childId,
-            type: inferEntityType(childId),
-            properties: {}
-          });
-        }
+        ensureNode(parentId);
+        ensureNode(childId);
 
-        // Warehouse storage links child directly to warehouse
         if (relType === 'stored_at') {
-          const edgeId = event.id ? `edge_${event.id}` : `edge_${childId}_${parentId}_${event.valid_from}`;
+          const edgeId = event.id ? `edge_${event.id}` : `edge_${childId}_${parentId}_${timestamp}`;
           edges.push({
             id: edgeId,
             from: childId,
@@ -98,7 +81,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
             childId,
             parentId,
             properties: {
-              validFrom: event.valid_from,
+              validFrom: timestamp,
               validTo: null,
               isCurrent: true
             }
@@ -106,19 +89,11 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           break;
         }
 
-        // Implicit contextual Slot generation: Slot_${parentId}_${childId}
+        // Contextual Slot generation: Slot_${parentId}_${childId}
         const slotId = `Slot_${parentId}_${childId}`;
-        if (!nodeMap.has(slotId)) {
-          nodeMap.set(slotId, {
-            id: slotId,
-            label: slotId,
-            type: 'Slot',
-            properties: { entityClass: 'Slot' }
-          });
-        }
+        ensureNode(slotId, 'Slot');
 
-        // Link 1: Parent -> Slot (has_slot)
-        const slotEdgeId = `edge_slot_${parentId}_${slotId}_${event.valid_from}`;
+        const slotEdgeId = `edge_slot_${event.id || `${parentId}_${slotId}_${timestamp}`}`;
         edges.push({
           id: slotEdgeId,
           from: parentId,
@@ -126,16 +101,15 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           label: 'has_slot',
           type: 'has_slot',
           childId: slotId,
-          parentId: parentId,
+          parentId,
           properties: {
-            validFrom: event.valid_from,
+            validFrom: timestamp,
             validTo: null,
             isCurrent: true
           }
         });
 
-        // Link 2: Child -> Slot (mounted_in)
-        const mountEdgeId = event.id ? `edge_${event.id}` : `edge_${childId}_${slotId}_${event.valid_from}`;
+        const mountEdgeId = event.id ? `edge_${event.id}` : `edge_${childId}_${slotId}_${timestamp}`;
         edges.push({
           id: mountEdgeId,
           from: childId,
@@ -145,7 +119,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
           childId,
           parentId: slotId,
           properties: {
-            validFrom: event.valid_from,
+            validFrom: timestamp,
             validTo: null,
             isCurrent: true
           }
@@ -157,7 +131,7 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         const { childId } = event;
         const dismantleTime = event.valid_from;
 
-        // Locate active assembly/storage edge for the child component
+        // Close active mounted_in or stored_at edge for this child
         const activeEdge = edges.find(
           e => (e.childId === childId || e.from === childId) &&
                (e.label === 'mounted_in' || e.label === 'stored_at') &&
@@ -165,11 +139,18 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         );
         if (activeEdge) {
           activeEdge.properties.validTo = dismantleTime;
-          activeEdge.properties.isCurrent = (currentTime !== null && currentTime !== undefined) 
-            ? dismantleTime > currentTime 
-            : false;
-        } else {
-          console.warn(`[SMIM Naive] No active assembly edge found to dismantle child part: ${childId}`);
+
+          // Also close the contextual has_slot edge if mounted in a Slot
+          if (activeEdge.to && activeEdge.to.startsWith('Slot_')) {
+            const slotEdge = edges.find(
+              e => e.to === activeEdge.to &&
+                   e.label === 'has_slot' &&
+                   e.properties.validTo === null
+            );
+            if (slotEdge) {
+              slotEdge.properties.validTo = dismantleTime;
+            }
+          }
         }
         break;
       }
@@ -178,61 +159,56 @@ export function generateSemanticGraph(eventLog = [], baseNodes = [], currentTime
         const { targetId, defectName, defectValue } = event;
 
         if (defectTargetMode === 'NODE') {
-          let targetNode = nodeMap.get(targetId);
-          if (!targetNode) {
-            targetNode = {
-              id: targetId,
-              label: targetId,
-              type: inferEntityType(targetId),
-              properties: {}
-            };
-            nodeMap.set(targetId, targetNode);
-          }
+          const targetNode = ensureNode(targetId);
           targetNode.properties[defectName] = defectValue;
-        } else if (defectTargetMode === 'EDGE') {
-          // Find the active assembly edge where targetId is the mounted component
+        } else {
+          // EDGE mode: attach defect to currently active assembly/storage edge
           const activeEdge = edges.find(
             e => (e.childId === targetId || e.from === targetId) &&
-                 (e.label === 'mounted_in' || e.type === 'mounted_in') &&
+                 (e.label === 'mounted_in' || e.label === 'stored_at') &&
                  (e.properties.validTo === null || e.properties.validTo >= event.valid_from)
           );
           if (activeEdge) {
             activeEdge.properties[defectName] = defectValue;
-          } else {
-            console.warn(`[SMIM Naive] No active edge found for defect report on part: ${targetId}`);
           }
         }
         break;
       }
 
+      case 'REVOKE_DEFECT': {
+        const { targetId, defectName } = event;
+        if (defectTargetMode === 'NODE') {
+          const targetNode = nodeMap.get(targetId);
+          if (targetNode && targetNode.properties) {
+            delete targetNode.properties[defectName];
+          }
+        } else {
+          edges.forEach(e => {
+            if ((e.childId === targetId || e.from === targetId) && e.properties && defectName in e.properties) {
+              delete e.properties[defectName];
+            }
+          });
+        }
+        break;
+      }
+
       default:
         break;
     }
   });
 
-  // 4. Synchronise final temporal currentness flags
+  // 4. Synchronise temporal currentness flags
   edges.forEach(edge => {
-    edge.properties.isCurrent = edge.properties.validTo === null || 
+    edge.properties.isCurrent = edge.properties.validTo === null ||
       (currentTime !== null && currentTime !== undefined ? edge.properties.validTo > currentTime : false);
   });
 
+  const filteredEdges = showHistory
+    ? edges
+    : edges.filter(e => e.properties.isCurrent !== false);
+
   return {
     nodes: Array.from(nodeMap.values()),
-    edges
+    edges: filteredEdges
   };
-}
-
-/**
- * Fallback helper to infer entity type from common identifier naming conventions.
- * 
- * @param {string} id - Node identifier.
- * @returns {string} Inferred entity class name.
- */
-function inferEntityType(id) {
-  if (/^veh/i.test(id)) return 'Vehicle';
-  if (/^slot/i.test(id)) return 'Slot';
-  if (/^def/i.test(id)) return 'Defect';
-  if (/^ware|^wh/i.test(id)) return 'Warehouse';
-  return 'Part';
-}
-
+}

js/smrm/actions.js

@@ -3,57 +3,62 @@
  * ------------------------------------
  * This module contains pure factory functions responsible for creating
  * immutable business Domain Events for the Event Sourcing architecture.
- * 
- * In accordance with Domain-Driven Event Sourcing:
- * - Events represent pure business facts, NOT low-level graph mutations.
- * - No graph concepts (e.g. 'NODE', 'EDGE') exist at this layer.
- * 
+ *
  * Strict Architectural Rule:
  * Functions here MUST NOT import the singleton state or directly mutate data.
  * All functions are pure factories returning event descriptors to be dispatched.
  */
 
-import { RELATION_TYPES } from './definitions.js';
+import { RELATION_TYPES, inferEntityClass } from './definitions.js';
+
+let localCounter = 1;
+
+function nextIdSuffix(seq) {
+  return seq !== null && seq !== undefined ? seq : localCounter++;
+}
 
 /**
- * Creates a business event representing the registration/creation of a domain part.
- * Pure factory function - does not mutate any external state.
- * 
- * @param {string} partId - The unique business identifier of the part or component.
- * @param {number} [timestamp=0] - The discrete system timestamp of the registration.
+ * Creates a business event representing the registration/creation of a domain entity.
+ *
+ * @param {string} partId - Unique business identifier of the entity.
+ * @param {number} [timestamp=0] - Discrete system timestamp of registration.
+ * @param {string|null} [entityClass=null] - Optional explicit domain class ('Vehicle' | 'Part' | 'Warehouse').
+ * @param {number|null} [seq=null] - Optional monotonic sequence number.
  * @returns {Object|null} The created registration business event, or null if validation fails.
  */
-export function createRegisterPartEvent(partId, timestamp = 0) {
+export function createRegisterPartEvent(partId, timestamp = 0, entityClass = null, seq = null) {
   if (!partId) return null;
   const trimmedId = String(partId).trim();
   if (!trimmedId) return null;
 
+  const resolvedClass = inferEntityClass(trimmedId, entityClass);
+
   return {
-    id: `evt_reg_${trimmedId}`,
+    id: `evt_reg_${trimmedId}_${timestamp}_${nextIdSuffix(seq)}`,
     type: 'REGISTER_PART',
     partId: trimmedId,
+    entityClass: resolvedClass,
     valid_from: timestamp,
     valid_to: null
   };
 }
 
 /**
- * Creates a business event representing the assembly or containment of a child part into a parent entity.
- * Pure factory function - does not mutate any external state.
- * 
- * @param {string} parentId - The unique business identifier of the parent entity/container.
- * @param {string} childId - The unique business identifier of the assembled child component.
- * @param {string} [relationType='mounted_in'] - The relationship category (e.g. 'mounted_in', 'stored_at').
- * @param {number} [timestamp=0] - The discrete system timestamp of the assembly.
+ * Creates a business event representing the assembly or storage of a child part into a parent entity.
+ *
+ * @param {string} parentId - Unique business identifier of the parent entity/container.
+ * @param {string} childId - Unique business identifier of the assembled child component.
+ * @param {string} [relationType='mounted_in'] - Relationship category ('mounted_in' | 'stored_at' | 'has_part').
+ * @param {number} [timestamp=0] - Discrete system timestamp of the assembly.
+ * @param {number|null} [seq=null] - Optional monotonic sequence number.
  * @returns {Object|null} The created assembly business event, or null if validation fails.
  */
-export function createAssembleEvent(parentId, childId, relationType = 'mounted_in', timestamp = 0) {
+export function createAssembleEvent(parentId, childId, relationType = 'mounted_in', timestamp = 0, seq = null) {
   if (!parentId || !childId) return null;
 
   const trimmedParent = String(parentId).trim();
   const trimmedChild = String(childId).trim();
 
-  // Rule 1: An entity cannot be assembled into itself
   if (!trimmedParent || !trimmedChild || trimmedParent === trimmedChild) {
     return null;
   }
@@ -63,7 +68,7 @@ export function createAssembleEvent(parentId, childId, relationType = 'mounted_i
     : (relationType ? String(relationType).trim() : 'mounted_in');
 
   return {
-    id: `evt_asm_${trimmedChild}_${timestamp}`,
+    id: `evt_asm_${trimmedChild}_${timestamp}_${nextIdSuffix(seq)}`,
     type: 'ASSEMBLE',
     parentId: trimmedParent,
     childId: trimmedChild,
@@ -75,15 +80,15 @@ export function createAssembleEvent(parentId, childId, relationType = 'mounted_i
 
 /**
  * Creates a business event reporting a physical defect or quality observation on an entity.
- * Pure factory function - targetId is ALWAYS the Part/Vehicle ID, never a relationship/edge ID.
- * 
- * @param {string} targetId - The unique identifier of the part or vehicle bearing the defect.
- * @param {string} defectName - The characteristic or defect category (e.g. 'crack', 'dent', 'wear').
- * @param {string|number} defectValue - The recorded measurement or severity value (e.g. '2mm', 'high').
- * @param {number} [timestamp=0] - The discrete system timestamp of the defect observation.
+ *
+ * @param {string} targetId - Unique identifier of the part or vehicle bearing the defect.
+ * @param {string} defectName - Defect category (e.g. 'crack', 'dent', 'wear').
+ * @param {string|number} defectValue - Recorded measurement or severity value (e.g. '2mm').
+ * @param {number} [timestamp=0] - Discrete system timestamp of the observation.
+ * @param {number|null} [seq=null] - Optional monotonic sequence number.
  * @returns {Object|null} The created defect report business event, or null if validation fails.
  */
-export function createReportDefectEvent(targetId, defectName, defectValue, timestamp = 0) {
+export function createReportDefectEvent(targetId, defectName, defectValue, timestamp = 0, seq = null) {
   if (!targetId || !defectName) return null;
 
   const trimmedTarget = String(targetId).trim();
@@ -94,35 +99,62 @@ export function createReportDefectEvent(targetId, defectName, defectValue, times
   }
 
   return {
-    id: `evt_def_${trimmedTarget}_${trimmedDefect}_${timestamp}`,
+    id: `evt_def_${trimmedTarget}_${trimmedDefect}_${timestamp}_${nextIdSuffix(seq)}`,
     type: 'REPORT_DEFECT',
     targetId: trimmedTarget,
     defectName: trimmedDefect,
-    defectValue: defectValue,
+    defectValue: defectValue || 'present',
     valid_from: timestamp,
     valid_to: null
   };
 }
 
+/**
+ * Creates a business event representing the revocation/repair of a previously reported defect.
+ * Preserves Event Sourcing immutability instead of splicing the event log.
+ *
+ * @param {string} targetId - Identifier of the entity bearing the defect.
+ * @param {string} defectName - Defect category being revoked/repaired.
+ * @param {number} [timestamp=0] - Discrete system timestamp when revocation occurred.
+ * @param {string|null} [targetEventId=null] - Optional specific REPORT_DEFECT event ID to close.
+ * @param {number|null} [seq=null] - Optional monotonic sequence number.
+ * @returns {Object|null} The created defect revocation business event.
+ */
+export function createRevokeDefectEvent(targetId, defectName, timestamp = 0, targetEventId = null, seq = null) {
+  if (!targetId || !defectName) return null;
+
+  const trimmedTarget = String(targetId).trim();
+  const trimmedDefect = String(defectName).trim();
+  if (!trimmedTarget || !trimmedDefect) return null;
+
+  return {
+    id: `evt_rev_${trimmedTarget}_${trimmedDefect}_${timestamp}_${nextIdSuffix(seq)}`,
+    type: 'REVOKE_DEFECT',
+    targetId: trimmedTarget,
+    defectName: trimmedDefect,
+    targetEventId: targetEventId || null,
+    valid_from: timestamp
+  };
+}
+
 /**
  * Creates a business event representing the dismantling or removal of a component.
- * Pure factory function - does not mutate any external state.
- * 
- * @param {string} childId - The unique business identifier of the dismantled component.
- * @param {number} [timestamp=0] - The discrete system timestamp when dismantling occurred.
+ *
+ * @param {string} childId - Unique business identifier of the dismantled component.
+ * @param {number} [timestamp=0] - Discrete system timestamp when dismantling occurred.
+ * @param {number|null} [seq=null] - Optional monotonic sequence number.
  * @returns {Object|null} The created dismantling business event, or null if validation fails.
  */
-export function createDismantleEvent(childId, timestamp = 0) {
+export function createDismantleEvent(childId, timestamp = 0, seq = null) {
   if (!childId) return null;
 
   const trimmedChild = String(childId).trim();
   if (!trimmedChild) return null;
 
   return {
-    id: `evt_dsm_${trimmedChild}_${timestamp}`,
+    id: `evt_dsm_${trimmedChild}_${timestamp}_${nextIdSuffix(seq)}`,
     type: 'DISMANTLE',
     childId: trimmedChild,
     valid_from: timestamp
   };
-}
-
+}

js/smrm/definitions.js

@@ -1,8 +1,8 @@
 /**
  * SMRM DEFINITIONS & DOMAIN VOCABULARY
  * ------------------------------------
- * Standard domain vocabulary and reference model definitions for the 
- * IEC 63339 Knowledge Architecture Workbench.
+ * Standard domain vocabulary, reference model definitions, and shared
+ * classification helpers for the IEC 63339 Knowledge Architecture Workbench.
  */
 
 /**
@@ -25,6 +25,53 @@ export const RELATION_TYPES = Object.freeze([
   'has_slot',
   'mounted_in',
   'stored_at',
-  'has_defect'
+  'has_defect',
+  'has_part'
 ]);
 
+/**
+ * Internal metadata property keys that should be hidden when rendering
+ * domain/custom property payloads on graph nodes, edges, and tables.
+ * @type {ReadonlyArray<string>}
+ */
+export const INTERNAL_PROPERTY_KEYS = Object.freeze([
+  'isCurrent',
+  'originalId',
+  'entityType',
+  'entityClass',
+  'validFrom',
+  'validTo',
+  'ownerId',
+  'childId',
+  'parentId',
+  'childStateId',
+  'parentStateId',
+  'qualityType',
+  'bearerId',
+  'defectType',
+  'targetId',
+  'value',
+  'atTime',
+  'originalEdgeId'
+]);
+
+/**
+ * Infers the manufacturing domain entity class from an explicit override
+ * or identifier naming conventions.
+ *
+ * @param {string} id - Node or part identifier.
+ * @param {string|null} [explicitClass=null] - Optional explicit class override.
+ * @returns {string} Resolved entity class ('Vehicle' | 'Slot' | 'Part' | 'Defect' | 'Warehouse').
+ */
+export function inferEntityClass(id, explicitClass = null) {
+  if (explicitClass && ENTITY_CLASSES.includes(explicitClass)) {
+    return explicitClass;
+  }
+  if (!id) return 'Part';
+  const cleanId = String(id).replace(/^(4d_|st_)/i, '');
+  if (/^(veh|sys|car)/i.test(cleanId)) return 'Vehicle';
+  if (/^slot/i.test(cleanId)) return 'Slot';
+  if (/^(ware|wh|stor)/i.test(cleanId)) return 'Warehouse';
+  if (/^(def|qual)/i.test(cleanId)) return 'Defect';
+  return 'Part';
+}

js/sms/lpg-generator.js

@@ -1,23 +1,79 @@
 /**
- * SMS LAYER: LPG GENERATOR
- * ------------------------
+ * SMS LAYER: LPG GENERATOR & LIVE QUERY ENGINE
+ * --------------------------------------------
  * Simulates how the Semantic Graph is persisted in a Labeled Property Graph
- * database (such as Neo4j).
- * Pure storage generator decoupled from ontologies and presentation markup.
+ * database (Neo4j) and executes live temporal queries at time T.
  */
 
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+import { generatePhysicalGraph } from './sms-graph-generator.js';
+import { reduceGraphForSMRM } from '../urmsm/smrm-view.js';
+
+/**
+ * Generates an array of LPG node records (Node Store) from a Semantic Graph.
+ * Crucial for showing node-level properties (such as crack: '2mm' in NAIVE_NODE mode).
+ *
+ * @param {Object} semanticGraph - Standardised Semantic Graph.
+ * @returns {Array<{ id: string, label: string, type: string, properties: Object, isActive: boolean }>}
+ */
+export function generateLpgNodeStorage(semanticGraph) {
+  if (!semanticGraph || !Array.isArray(semanticGraph.nodes)) {
+    return [];
+  }
+
+  const physGraph = generatePhysicalGraph(semanticGraph, 'LPG');
+
+  return physGraph.nodes.map(node => {
+    const rawProps = node.properties ? { ...node.properties } : {};
+    const displayProps = {};
+
+    Object.entries(rawProps).forEach(([k, v]) => {
+      if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+        displayProps[k] = v;
+      }
+    });
+
+    if (node.type === 'Quality' || node.type === 'Defect') {
+      const dKey = rawProps.qualityType || rawProps.defectType || 'defect';
+      if (rawProps.value !== undefined) displayProps[dKey] = rawProps.value;
+    }
+
+    if (rawProps.validFrom !== undefined && rawProps.validFrom !== null) {
+      displayProps.validFrom = rawProps.validFrom;
+    }
+    if (rawProps.validTo !== undefined && rawProps.validTo !== null) {
+      displayProps.validTo = rawProps.validTo;
+    }
+
+    const isActive = rawProps.isCurrent !== undefined
+      ? Boolean(rawProps.isCurrent)
+      : (rawProps.validTo === null || rawProps.validTo === undefined);
+
+    return {
+      id: node.id,
+      label: node.label || node.id,
+      type: node.type || rawProps.entityClass || 'Node',
+      properties: displayProps,
+      isActive
+    };
+  });
+}
+
 /**
- * Generates an array of LPG edge storage records from a Semantic Graph.
+ * Generates an array of LPG edge storage records (Relationship Store) from a Semantic Graph.
+ * Uses the physical LPG graph so that 4D TRANSITION_TO chains are included.
  *
- * @param {Object} semanticGraph - Standardised Semantic Graph with nodes and edges.
- * @returns {Array<Object>} Clean array of relationship records for LPG storage table.
+ * @param {Object} semanticGraph - Standardised Semantic Graph.
+ * @returns {Array<Object>} Relationship records for LPG storage table.
  */
 export function generateLpgStorage(semanticGraph) {
   if (!semanticGraph || !Array.isArray(semanticGraph.edges)) {
     return [];
   }
 
-  return semanticGraph.edges.map(edge => {
+  const physGraph = generatePhysicalGraph(semanticGraph, 'LPG');
+
+  return physGraph.edges.map(edge => {
     const props = edge.properties ? { ...edge.properties } : {};
     const isActive = props.isCurrent !== undefined
       ? Boolean(props.isCurrent)
@@ -35,43 +91,136 @@ export function generateLpgStorage(semanticGraph) {
 }
 
 /**
- * Generates a Cypher query for the specified Semantic Graph at the given point in time.
+ * Generates an ontology-aware temporal Cypher query for time T.
  *
- * @param {Object} semanticGraph - Standardised Semantic Graph with nodes and edges.
- * @param {number} currentTime - Current discrete time step.
+ * @param {Object} semanticGraph - Standardised Semantic Graph.
+ * @param {number} currentTime - Current discrete timestamp T.
+ * @param {string} [ontology='NAIVE_NODE'] - Active ontology identifier.
  * @returns {string} Cypher query string.
  */
-export function generateLpgQuery(semanticGraph, currentTime) {
-  if (!semanticGraph) return '';
+export function generateLpgQuery(semanticGraph, currentTime = 0, ontology = 'NAIVE_NODE') {
+  const t = currentTime ?? 0;
+  const is4D = ontology === 'ISO15926' || semanticGraph?.nodes?.some(n => n.type === 'State');
+  const isBFO = ontology === 'BFO' || semanticGraph?.nodes?.some(n => n.type === 'MaterialEntity');
 
-  const nodes = semanticGraph.nodes || [];
-
-  const is4D = nodes.some(n => n.type === 'State');
   if (is4D) {
-    return `// Cypher (Neo4j) - 4D Perdurant Full Graph Topology
-MATCH (n)-[r]->(m)
-RETURN n, r, m`;
+    return `// Cypher (Neo4j) — ISO 15926 (4D) State & Defect Audit at T = ${t}
+MATCH (item:ActualIndividual)<-[:temporalPartOf]-(st:State)-[rel:mounted_in|stored_at]->(locState:State)-[:temporalPartOf]->(loc:ActualIndividual)
+WHERE st.validFrom <= ${t} AND (st.validTo IS NULL OR st.validTo > ${t})
+OPTIONAL MATCH (item)<-[:temporalPartOf]-(anyState:State)-[hd:has_defect]->(def:Defect)
+WHERE hd.validFrom <= ${t} AND (hd.validTo IS NULL OR hd.validTo > ${t})
+RETURN item.originalId AS part, loc.originalId AS location, def.label AS defect`;
   }
 
-  // Check for BFO Quality (Dependent Continuant)
-  const hasQuality = nodes.some(n => n.type === 'Quality');
-  if (hasQuality) {
-    return `// Cypher (Neo4j) - 3D BFO Full Graph Topology & Inherence
-MATCH (n)-[r]->(m)
-RETURN n, r, m`;
+  if (isBFO) {
+    return `// Cypher (Neo4j) — BFO (3D) Continuant & Quality Inherence at T = ${t}
+MATCH (part:MaterialEntity)-[rel:mounted_in|stored_at]->(target:MaterialEntity)
+WHERE rel.validFrom <= ${t} AND (rel.validTo IS NULL OR rel.validTo > ${t})
+OPTIONAL MATCH (q:Quality)-[inh:inheres_in]->(part)
+WHERE inh.validFrom <= ${t} AND (inh.validTo IS NULL OR inh.validTo > ${t})
+RETURN part.id AS part, target.id AS location, q.label AS defect`;
   }
 
-  // Check if we are in domain / naive mode
-  const domainClasses = ['Vehicle', 'Slot', 'Part', 'Defect', 'Warehouse'];
-  const hasDomainNodes = nodes.some(n => domainClasses.includes(n.type));
-
-  if (hasDomainNodes) {
-    return `// Cypher (Neo4j) - Domain Graph Full Topology & Properties
-MATCH (n)-[r]->(m)
-RETURN n, r, m`;
+  if (ontology === 'NAIVE_EDGE') {
+    return `// Cypher (Neo4j) — Naive Graph (Edge) Active Structure at T = ${t}
+// WARNING: Reads defect property from active relationship r!
+MATCH (part:Part)-[r:mounted_in|stored_at]->(target)
+WHERE r.validFrom <= ${t} AND (r.validTo IS NULL OR r.validTo > ${t})
+RETURN part.id AS part, target.id AS location, r.crack AS defect`;
   }
 
-  return `// Cypher (Neo4j) - Full Structural Topology & Edge Properties
-MATCH (n)-[r]->(m)
-RETURN n, r, m`;
+  return `// Cypher (Neo4j) — Naive Graph (Node) Active Structure at T = ${t}
+// WARNING: Node properties have no temporal history (overwritten in-place)!
+MATCH (part:Part)-[r:mounted_in|stored_at]->(target)
+WHERE r.validFrom <= ${t} AND (r.validTo IS NULL OR r.validTo > ${t})
+RETURN part.id AS part, target.id AS location, part.crack AS defect`;
 }
+
+/**
+ * Executes the active temporal query against the current Semantic Graph in memory.
+ * Demonstrates why NAIVE_EDGE loses the defect upon moving to the warehouse,
+ * while BFO and ISO 15926 preserve it.
+ *
+ * @param {Object} semanticGraph - Current SMIM Semantic Graph.
+ * @param {number} currentTime - Current system time T.
+ * @param {string} [ontology='NAIVE_NODE'] - Active ontology mode.
+ * @returns {{ rows: Array<{ part: string, location: string, defect: string, hasDefect: boolean }>, defectiveCount: number }}
+ */
+export function evaluateLiveQuery(semanticGraph, currentTime = 0, ontology = 'NAIVE_NODE') {
+  if (!semanticGraph || !Array.isArray(semanticGraph.nodes) || semanticGraph.nodes.length === 0) {
+    return { rows: [], defectiveCount: 0 };
+  }
+
+  const smrm = reduceGraphForSMRM(semanticGraph);
+  const activeEdges = smrm.edges.filter(e => e.properties?.isCurrent !== false);
+  const rows = [];
+
+  // Map active defects in SMRM projection
+  const defectMap = new Map();
+  const addDefect = (id, text) => {
+    if (!defectMap.has(id)) defectMap.set(id, []);
+    defectMap.get(id).push(text);
+  };
+
+  smrm.nodes.forEach(n => {
+    if (n.type === 'Defect') return;
+    if (n.properties) {
+      Object.entries(n.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          addDefect(n.id, `${k}: ${v}`);
+        }
+      });
+    }
+  });
+
+  activeEdges.forEach(e => {
+    if (e.label === 'has_defect' || e.type === 'has_defect') {
+      const defNode = smrm.nodes.find(n => n.id === e.to);
+      if (defNode) {
+        const dType = defNode.properties?.defectType || defNode.properties?.qualityType || 'defect';
+        const dVal = defNode.properties?.value || 'present';
+        addDefect(e.from, `${dType}: ${dVal}`);
+      }
+      return;
+    }
+
+    const childId = e.childId || (e.label === 'stored_at' || e.label === 'mounted_in' ? e.from : e.to);
+    if (e.properties && childId) {
+      Object.entries(e.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          addDefect(childId, `${k}: ${v}`);
+        }
+      });
+    }
+  });
+
+  // Collect active placements (has_part / stored_at)
+  activeEdges.forEach(e => {
+    if (e.label === 'has_defect' || e.type === 'has_defect') return;
+
+    let partId = null;
+    let locationId = null;
+
+    if (e.label === 'has_part') {
+      locationId = e.from;
+      partId = e.to;
+    } else if (e.label === 'stored_at' || e.label === 'mounted_in') {
+      partId = e.from;
+      locationId = e.to;
+    }
+
+    if (partId && locationId) {
+      const defs = defectMap.get(partId) || [];
+      const hasDefect = defs.length > 0;
+      rows.push({
+        part: partId,
+        location: locationId,
+        defect: hasDefect ? defs.join(', ') : 'NULL (0 defects)',
+        hasDefect
+      });
+    }
+  });
+
+  const defectiveCount = rows.filter(r => r.hasDefect).length;
+  return { rows, defectiveCount };
+}

js/sms/rdf-generator.js

@@ -2,229 +2,281 @@
  * SMS LAYER: RDF GENERATOR
  * ------------------------
  * Simulates how the Semantic Graph is persisted in a W3C RDF Triplestore.
- * Generates pure Turtle (.ttl) serialisation and SPARQL queries.
- * Pure storage generator decoupled from ontologies and presentation markup.
+ * Generates pure Turtle (.ttl) serialisation and ontology-specific temporal SPARQL queries.
  */
 
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+
 /**
  * Generates a W3C RDF Turtle (.ttl) serialisation string from a Semantic Graph.
- * If the graph contains 3D continuant entities, performs autonomous W3C Reification
- * for temporal binary relations. If the graph contains 4D perdurants, serialises
- * standard binary triples for temporal parts and states.
  *
  * @param {Object} semanticGraph - Standardised Semantic Graph with nodes and edges.
  * @returns {string} Pure Turtle (.ttl) serialisation text.
  */
 export function generateRdfStorage(semanticGraph) {
-  if (!semanticGraph) {
-    return '';
+  if (!semanticGraph || !Array.isArray(semanticGraph.nodes) || semanticGraph.nodes.length === 0) {
+    return '# Empty RDF Graph (0 triples)';
   }
 
-  const is4D = semanticGraph.nodes?.some(n => n.type === 'State');
+  const is4D = semanticGraph.nodes.some(n => n.type === 'State' || n.type === 'ActualIndividual');
+  const isBFO = semanticGraph.nodes.some(n => n.type === 'MaterialEntity' || n.type === 'Quality');
   let ttl = '';
 
+  // 1. 4D ISO 15926 Turtle Serialisation
   if (is4D) {
     ttl += `@prefix iso: <http://example.org/iso15926/> .\n`;
     ttl += `@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n`;
     ttl += `# 4D Perdurant Graph persisted as Pure Binary RDF Triples\n`;
 
-    const individuals = (semanticGraph.nodes || []).filter(n => n.type === 'ActualIndividual');
+    const individuals = semanticGraph.nodes.filter(n => n.type === 'ActualIndividual');
     individuals.forEach(ind => {
-      ttl += `:${ind.id} a iso:ActualIndividual .\n`;
+      const cls = ind.properties?.entityClass || 'Part';
+      ttl += `:${ind.id} a iso:ActualIndividual , iso:${cls} .\n`;
     });
 
-    const defectNodes = (semanticGraph.nodes || []).filter(n => n.type === 'Defect');
+    const defectNodes = semanticGraph.nodes.filter(n => n.type === 'Defect');
     defectNodes.forEach(d => {
-      ttl += `:${d.id} a iso:DefectClass .\n`;
+      const dType = d.properties?.defectType || 'defect';
+      const dVal = d.properties?.value || 'present';
+      ttl += `:${d.id} a iso:DefectClass ;\n    iso:defectType "${dType}" ;\n    iso:severity "${dVal}" .\n`;
     });
 
-    const states = (semanticGraph.nodes || []).filter(n => n.type === 'State');
+    const states = semanticGraph.nodes.filter(n => n.type === 'State');
     states.forEach(st => {
-      const tpoEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'temporalPartOf' || e.type === 'classification') && !e.to.startsWith('def')
-      );
-      const partOfEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'mounted_in' || e.type === 'mounted_in' || e.label === 'partOf')
-      );
-      const hasPartEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'hasPart' || (e.type === 'composition' && e.label !== 'mounted_in' && e.type !== 'mounted_in'))
-      );
-      const hasSlotEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'has_slot' || e.type === 'has_slot')
-      );
-      const storedAtEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'stored_at' || e.type === 'stored_at')
-      );
-      const hasDefectEdges = (semanticGraph.edges || []).filter(
-        e => e.from === st.id && (e.label === 'has_defect' || e.to.startsWith('def'))
-      );
-
+      const outgoing = (semanticGraph.edges || []).filter(e => e.from === st.id);
       const vFrom = st.properties?.validFrom;
       const vTo = st.properties?.validTo;
 
       ttl += `\n:${st.id} a iso:State`;
 
-      tpoEdges.forEach(e => {
-        ttl += ` ;\n    iso:temporalPartOf :${e.to}`;
+      outgoing.forEach(e => {
+        if (e.label === 'temporalPartOf') {
+          ttl += ` ;\n    iso:temporalPartOf :${e.to}`;
+        } else if (e.label === 'mounted_in') {
+          ttl += ` ;\n    iso:mountedIn :${e.to}`;
+        } else if (e.label === 'has_slot') {
+          ttl += ` ;\n    iso:hasSlot :${e.to}`;
+        } else if (e.label === 'stored_at') {
+          ttl += ` ;\n    iso:storedAt :${e.to}`;
+        } else if (e.label === 'has_defect') {
+          ttl += ` ;\n    iso:hasDefect :${e.to}`;
+        }
       });
 
-      partOfEdges.forEach(e => {
-        ttl += ` ;\n    iso:partOf :${e.to}`;
-      });
+      if (vFrom !== undefined && vFrom !== null) {
+        ttl += ` ;\n    iso:validFrom "${vFrom}"^^xsd:integer`;
+      }
+      if (vTo !== undefined && vTo !== null) {
+        ttl += ` ;\n    iso:validTo   "${vTo}"^^xsd:integer`;
+      }
 
-      hasPartEdges.forEach(e => {
-        ttl += ` ;\n    iso:hasPart :${e.to}`;
-      });
+      ttl += ` .\n`;
+    });
 
-      hasSlotEdges.forEach(e => {
-        ttl += ` ;\n    iso:hasSlot :${e.to}`;
-      });
+    return ttl;
+  }
 
-      storedAtEdges.forEach(e => {
-        ttl += ` ;\n    iso:storedAt :${e.to}`;
-      });
+  // 2. 3D BFO Turtle Serialisation (with W3C Reification)
+  if (isBFO) {
+    ttl += `@prefix : <http://example.org/bfo/> .\n`;
+    ttl += `@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n`;
+    ttl += `# 3D Continuant Graph persisted via W3C Reification & Quality Inherence\n`;
 
-      hasDefectEdges.forEach(e => {
-        ttl += ` ;\n    iso:hasDefect :${e.to}`;
-      });
+    semanticGraph.nodes.filter(n => n.type === 'MaterialEntity').forEach(n => {
+      const cls = n.properties?.entityClass || 'Part';
+      ttl += `:${n.id} a :MaterialEntity , :${cls} .\n`;
+    });
 
+    semanticGraph.nodes.filter(n => n.type === 'Quality').forEach(q => {
+      const inh = (semanticGraph.edges || []).find(e => e.from === q.id && e.label === 'inheres_in');
+      const vFrom = q.properties?.validFrom;
+      const vTo = q.properties?.validTo;
+      ttl += `\n:${q.id} a :Quality`;
+      if (q.properties?.qualityType) {
+        ttl += ` ;\n    :qualityType "${q.properties.qualityType}"`;
+      }
+      if (q.properties?.value) {
+        ttl += ` ;\n    :value "${q.properties.value}"`;
+      }
+      if (inh) {
+        ttl += ` ;\n    :inheres_in :${inh.to}`;
+      }
       if (vFrom !== undefined && vFrom !== null) {
-        ttl += ` ;\n    iso:validFrom "${vFrom}"^^xsd:integer`;
+        ttl += ` ;\n    :validFrom "${vFrom}"^^xsd:integer`;
       }
       if (vTo !== undefined && vTo !== null) {
-        ttl += ` ;\n    iso:validTo   "${vTo}"^^xsd:integer`;
+        ttl += ` ;\n    :validTo   "${vTo}"^^xsd:integer`;
       }
+      ttl += ` .\n`;
+    });
+
+    (semanticGraph.edges || []).filter(e => e.type !== 'inherence').forEach(edge => {
+      const vFrom = edge.properties?.validFrom;
+      const vTo = edge.properties?.validTo;
+      const rel = edge.label || edge.type;
+      const isChildToParent = rel === 'mounted_in' || rel === 'stored_at';
+      const parentId = isChildToParent ? edge.to : edge.from;
+      const childId = isChildToParent ? edge.from : edge.to;
 
+      ttl += `\n_:${edge.id} a :RelationalQuality ;\n`;
+      ttl += `    :relationType :${rel} ;\n`;
+      ttl += `    :hasParent :${parentId} ;\n`;
+      ttl += `    :hasChild  :${childId}`;
+
+      if (vFrom !== undefined && vFrom !== null) {
+        ttl += ` ;\n    :validFrom "${vFrom}"^^xsd:integer`;
+      }
+      if (vTo !== undefined && vTo !== null) {
+        ttl += ` ;\n    :validTo   "${vTo}"^^xsd:integer`;
+      }
       ttl += ` .\n`;
     });
-  } else {
-    const domainClasses = ['Vehicle', 'Slot', 'Part', 'Defect', 'Warehouse'];
-    const hasDomainNodes = (semanticGraph.nodes || []).some(n => domainClasses.includes(n.type));
 
-    ttl += `@prefix : <http://example.org/> .\n`;
-    ttl += `@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n`;
+    return ttl;
+  }
 
-    if (hasDomainNodes) {
-      ttl += `# Naive Domain Graph persisted as Direct Triples & Properties\n`;
-
-      // 1. Domain entities and inline properties
-      (semanticGraph.nodes || []).forEach(n => {
-        ttl += `:${n.id} a :${n.type || 'Part'}`;
-        if (n.properties) {
-          const customProps = Object.entries(n.properties).filter(
-            ([k]) => !['isCurrent', 'originalId', 'entityType', 'validFrom', 'validTo', 'ownerId'].includes(k)
-          );
-          customProps.forEach(([k, v]) => {
-            ttl += ` ;\n    :${k} "${v}"`;
-          });
+  // 3. Naive Graph (Node / Edge) Turtle Serialisation with Reified Edge Properties
+  ttl += `@prefix : <http://example.org/naive/> .\n`;
+  ttl += `@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .\n`;
+  ttl += `@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n`;
+  ttl += `# Naive Domain Graph persisted as RDF Triples & Reified Statements\n`;
+
+  semanticGraph.nodes.forEach(n => {
+    ttl += `:${n.id} a :${n.type || 'Part'}`;
+    if (n.properties) {
+      Object.entries(n.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          ttl += ` ;\n    :${k} "${v}"`;
         }
-        ttl += ` .\n`;
       });
+    }
+    ttl += ` .\n`;
+  });
 
-      // 2. Direct relationships
-      (semanticGraph.edges || []).forEach(edge => {
-        const edgeRel = edge.label || 'has_part';
-        ttl += `:${edge.from} :${edgeRel} :${edge.to} .\n`;
-      });
-    } else {
-      ttl += `# 3D Continuant Graph persisted via W3C Reification & Quality Inherence\n`;
+  (semanticGraph.edges || []).forEach(edge => {
+    const edgeRel = edge.label || 'has_part';
+    const vFrom = edge.properties?.validFrom;
+    const vTo = edge.properties?.validTo;
 
-      // 1. Base continuant entities
-      (semanticGraph.nodes || []).filter(n => n.type === 'MaterialEntity').forEach(n => {
-        ttl += `:${n.id} a :MaterialEntity .\n`;
-      });
+    // Emit direct triple if currently active
+    if (edge.properties?.isCurrent !== false) {
+      ttl += `\n:${edge.from} :${edgeRel} :${edge.to} .\n`;
+    }
 
-      // 1b. Dependent Continuants (Quality)
-      (semanticGraph.nodes || []).filter(n => n.type === 'Quality').forEach(q => {
-        ttl += `:${q.id} a :Quality`;
-        const inh = (semanticGraph.edges || []).find(e => e.from === q.id && e.label === 'inheres_in');
-        if (inh) {
-          ttl += ` ;\n    :inheres_in :${inh.to}`;
-        }
-        ttl += ` .\n`;
-      });
+    // Emit W3C Statement reification to hold validFrom/validTo and edge-attached defects
+    ttl += `_:${edge.id} a rdf:Statement ;\n`;
+    ttl += `    rdf:subject   :${edge.from} ;\n`;
+    ttl += `    rdf:predicate :${edgeRel} ;\n`;
+    ttl += `    rdf:object    :${edge.to}`;
 
-      // 2. Synthesise reified statements autonomously for temporal relations
-      (semanticGraph.edges || []).filter(e => e.type !== 'inherence').forEach(edge => {
-        const vFrom = edge.properties?.validFrom;
-        const vTo = edge.properties?.validTo;
-        const rel = edge.label || edge.relationType || edge.type;
-
-        // Respect semantic directionality of predicates:
-        // - mounted_in: Part (from) is mounted in Slot/Vehicle (to) => parent is edge.to, child is edge.from
-        // - has_slot / has_part / composition: parent is edge.from, child is edge.to
-        const isMountedIn = rel === 'mounted_in';
-        const parentId = isMountedIn ? edge.to : edge.from;
-        const childId = isMountedIn ? edge.from : edge.to;
-
-        ttl += `\n_:${edge.id} a :RelationalQuality ;\n`;
-        ttl += `    :hasParent :${parentId} ;\n`;
-        ttl += `    :hasChild  :${childId}`;
-
-        if (vFrom !== undefined && vFrom !== null) {
-          ttl += ` ;\n    :validFrom "${vFrom}"^^xsd:integer`;
-        }
-        if (vTo !== undefined && vTo !== null) {
-          ttl += ` ;\n    :validTo   "${vTo}"^^xsd:integer`;
+    if (vFrom !== undefined && vFrom !== null) {
+      ttl += ` ;\n    :validFrom "${vFrom}"^^xsd:integer`;
+    }
+    if (vTo !== undefined && vTo !== null) {
+      ttl += ` ;\n    :validTo   "${vTo}"^^xsd:integer`;
+    }
+    if (edge.properties) {
+      Object.entries(edge.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          ttl += ` ;\n    :${k} "${v}"`;
         }
-
-        ttl += ` .\n`;
       });
     }
-  }
+    ttl += ` .\n`;
+  });
 
   return ttl;
 }
 
 /**
- * Generates a SPARQL query for the specified Semantic Graph at the given point in time.
+ * Generates an ontology-aware temporal SPARQL query for time T.
  *
- * @param {Object} semanticGraph - Standardised Semantic Graph with nodes and edges.
- * @param {number} currentTime - Current discrete time step.
+ * @param {Object} semanticGraph - Standardised Semantic Graph.
+ * @param {number} currentTime - Current discrete timestamp T.
+ * @param {string} [ontology='NAIVE_NODE'] - Active ontology identifier.
  * @returns {string} SPARQL query string.
  */
-export function generateRdfQuery(semanticGraph, currentTime) {
-  const is4D = semanticGraph?.nodes?.some(n => n.type === 'State');
+export function generateRdfQuery(semanticGraph, currentTime = 0, ontology = 'NAIVE_NODE') {
+  const t = currentTime ?? 0;
+  const is4D = ontology === 'ISO15926' || semanticGraph?.nodes?.some(n => n.type === 'State');
+  const isBFO = ontology === 'BFO' || semanticGraph?.nodes?.some(n => n.type === 'MaterialEntity');
 
   if (is4D) {
-    return `# SPARQL (W3C RDF) - 4D Perdurant Full Graph Topology
+    return `# SPARQL (W3C RDF) — ISO 15926 (4D) State & Defect Audit at T = ${t}
 PREFIX iso: <http://example.org/iso15926/>
-PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
-SELECT ?subject ?predicate ?object
+SELECT ?part ?location ?defectType ?severity
 WHERE {
-  ?subject ?predicate ?object .
+  ?st iso:temporalPartOf ?part ;
+      iso:mountedIn|iso:storedAt ?locState ;
+      iso:validFrom ?vf .
+  ?locState iso:temporalPartOf ?location .
+  OPTIONAL { ?st iso:validTo ?vt }
+  FILTER (?vf <= ${t} && (!BOUND(?vt) || ?vt > ${t}))
+
+  OPTIONAL {
+    ?defState iso:temporalPartOf ?part ;
+              iso:hasDefect ?def .
+    ?def iso:defectType ?defectType ;
+         iso:severity ?severity .
+  }
 }`;
   }
 
-  const hasQuality = semanticGraph?.nodes?.some(n => n.type === 'Quality');
-  if (hasQuality) {
-    return `# SPARQL (W3C RDF) - 3D BFO Full Graph Topology & Inherence
-PREFIX : <http://example.org/>
-PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
-SELECT ?subject ?predicate ?object
+  if (isBFO) {
+    return `# SPARQL (W3C RDF) — BFO (3D) Reified Placement & Quality at T = ${t}
+PREFIX : <http://example.org/bfo/>
+SELECT ?part ?location ?qualityType ?value
 WHERE {
-  ?subject ?predicate ?object .
+  ?stmt a :RelationalQuality ;
+        :hasChild ?part ;
+        :hasParent ?location ;
+        :validFrom ?vf .
+  OPTIONAL { ?stmt :validTo ?vt }
+  FILTER (?vf <= ${t} && (!BOUND(?vt) || ?vt > ${t}))
+
+  OPTIONAL {
+    ?qual a :Quality ;
+          :inheres_in ?part ;
+          :qualityType ?qualityType ;
+          :value ?value ;
+          :validFrom ?qvf .
+    OPTIONAL { ?qual :validTo ?qvt }
+    FILTER (?qvf <= ${t} && (!BOUND(?qvt) || ?qvt > ${t}))
+  }
 }`;
   }
 
-  const domainClasses = ['Vehicle', 'Slot', 'Part', 'Defect', 'Warehouse'];
-  const hasDomainNodes = (semanticGraph?.nodes || []).some(n => domainClasses.includes(n.type));
-
-  if (hasDomainNodes) {
-    return `# SPARQL (W3C RDF) - Domain Graph Full Topology & Properties
-PREFIX : <http://example.org/>
-PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
-SELECT ?subject ?predicate ?object
+  if (ontology === 'NAIVE_EDGE') {
+    return `# SPARQL (W3C RDF) — Naive Graph (Edge) Reified Statement Query at T = ${t}
+# WARNING: Reads :crack from active placement statement ?stmt!
+PREFIX : <http://example.org/naive/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+SELECT ?part ?location ?crack
 WHERE {
-  ?subject ?predicate ?object .
+  ?stmt a rdf:Statement ;
+        rdf:subject ?part ;
+        rdf:predicate ?pred ;
+        rdf:object ?location ;
+        :validFrom ?vf .
+  OPTIONAL { ?stmt :validTo ?vt }
+  OPTIONAL { ?stmt :crack ?crack }
+  FILTER (?pred IN (:mounted_in, :stored_at))
+  FILTER (?vf <= ${t} && (!BOUND(?vt) || ?vt > ${t}))
 }`;
   }
 
-  return `# SPARQL (W3C RDF) - Full Graph Topology
-PREFIX : <http://example.org/>
-PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
-SELECT ?subject ?predicate ?object
+  return `# SPARQL (W3C RDF) — Naive Graph (Node) Query at T = ${t}
+# WARNING: :crack is attached directly to ?part without temporal bounds!
+PREFIX : <http://example.org/naive/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+SELECT ?part ?location ?crack
 WHERE {
-  ?subject ?predicate ?object .
+  ?stmt a rdf:Statement ;
+        rdf:subject ?part ;
+        rdf:object ?location ;
+        :validFrom ?vf .
+  OPTIONAL { ?stmt :validTo ?vt }
+  OPTIONAL { ?part :crack ?crack }
+  FILTER (?vf <= ${t} && (!BOUND(?vt) || ?vt > ${t}))
 }`;
-}
+}

js/sms/sms-graph-generator.js

@@ -2,15 +2,18 @@
  * SMS LAYER: PHYSICAL GRAPH GENERATOR
  * -----------------------------------
  * Transforms a canonical Semantic Graph (SMIM) into physical storage (SMS) per IEC 63339.
- * RDF: Reifies 3D composition relations carrying temporal properties into W3C statement nodes.
- * LPG: Links sequential 4D states of the same entity via TRANSITION_TO edges.
+ * - RDF Mode: Reifies binary relations carrying temporal/custom properties into W3C
+ *   statement nodes and extracts scalar properties into explicit RDF Literal nodes.
+ * - LPG Mode: Links sequential 4D states of the same entity via TRANSITION_TO edges.
  */
 
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+
 /**
  * Generates a physical graph projection from a canonical semantic graph.
  *
  * @param {Object} semanticGraph - Standardised Semantic Graph ({ nodes: Array, edges: Array }).
- * @param {string} storageMode - Physical storage paradigm ('LPG' or 'RDF').
+ * @param {'LPG'|'RDF'} storageMode - Physical storage paradigm ('LPG' or 'RDF').
  * @returns {{ nodes: Array, edges: Array }} Transformed physical graph.
  */
 export function generatePhysicalGraph(semanticGraph, storageMode) {
@@ -18,7 +21,6 @@ export function generatePhysicalGraph(semanticGraph, storageMode) {
     return { nodes: [], edges: [] };
   }
 
-  // Deep clone nodes and edges to maintain immutability
   const physicalNodes = semanticGraph.nodes.map(node => ({
     ...node,
     properties: node.properties ? { ...node.properties } : {}
@@ -29,97 +31,233 @@ export function generatePhysicalGraph(semanticGraph, storageMode) {
     properties: edge.properties ? { ...edge.properties } : {}
   }));
 
-  const is4D = physicalNodes.some(n => n.type === 'State');
+  const is4D = physicalNodes.some(n => n.type === 'State' || n.type === 'ActualIndividual');
 
-  // Case 1: W3C RDF Mode
+  // =========================================================================
+  // CASE 1: W3C RDF Mode (Triples, Statement Reification & Explicit Literals)
+  // =========================================================================
   if (storageMode === 'RDF') {
-    if (!is4D) {
-      const finalEdges = [];
+    if (is4D) {
+      // In 4D RDF, States and Defects cannot hold internal property maps;
+      // their timestamps and values are persisted as explicit RDF Literal nodes.
+      const rdf4dNodes = [];
+      const rdf4dEdges = [...physicalEdges];
 
-      physicalEdges.forEach(edge => {
-        const hasTemporalProps = edge.properties && (
-          edge.properties.validFrom !== undefined || 
-          edge.properties.validTo !== undefined
-        );
+      physicalNodes.forEach(node => {
+        rdf4dNodes.push(node);
 
-        if (edge.type === 'composition' && hasTemporalProps) {
-          const stmtId = `stmt_${edge.id}`;
-          const isCurrent = edge.properties.isCurrent !== false;
+        if (node.type === 'State') {
+          const vFrom = node.properties?.validFrom;
+          const vTo = node.properties?.validTo;
+          const isCurrent = node.properties?.isCurrent !== false;
 
-          physicalNodes.push({
-            id: stmtId,
-            label: `_:${edge.id}`,
-            type: 'RelationalQuality',
-            properties: { isCurrent, originalEdgeId: edge.id }
+          if (vFrom !== undefined && vFrom !== null) {
+            const litFromId = `lit_vf_${node.id}`;
+            rdf4dNodes.push({
+              id: litFromId,
+              label: `"${vFrom}"^^xsd:integer`,
+              type: 'Literal',
+              properties: { value: vFrom }
+            });
+            rdf4dEdges.push({
+              id: `edge_vf_${node.id}`,
+              from: node.id,
+              to: litFromId,
+              label: 'iso:validFrom',
+              type: 'predicate',
+              properties: { isCurrent }
+            });
+          }
+
+          if (vTo !== undefined && vTo !== null) {
+            const litToId = `lit_vt_${node.id}`;
+            rdf4dNodes.push({
+              id: litToId,
+              label: `"${vTo}"^^xsd:integer`,
+              type: 'Literal',
+              properties: { value: vTo }
+            });
+            rdf4dEdges.push({
+              id: `edge_vt_${node.id}`,
+              from: node.id,
+              to: litToId,
+              label: 'iso:validTo',
+              type: 'predicate',
+              properties: { isCurrent: false }
+            });
+          }
+        } else if (node.type === 'Defect' && node.properties?.value) {
+          const litValId = `lit_val_${node.id}`;
+          rdf4dNodes.push({
+            id: litValId,
+            label: `"${node.properties.value}"^^xsd:string`,
+            type: 'Literal',
+            properties: { value: node.properties.value }
           });
+          rdf4dEdges.push({
+            id: `edge_val_${node.id}`,
+            from: node.id,
+            to: litValId,
+            label: 'iso:severity',
+            type: 'predicate',
+            properties: { isCurrent: node.properties?.isCurrent !== false }
+          });
+        }
+      });
+
+      return { nodes: rdf4dNodes, edges: rdf4dEdges };
+    }
+
+    // 3D BFO and Naive Graph RDF Reification
+    const finalEdges = [];
+
+    // Extract custom properties on nodes (e.g. Naive Node crack="2mm") into RDF Literals
+    physicalNodes.slice().forEach(node => {
+      if (node.properties) {
+        Object.entries(node.properties).forEach(([k, v]) => {
+          if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+            const litId = `lit_node_${node.id}_${k}`;
+            physicalNodes.push({
+              id: litId,
+              label: `"${v}"^^xsd:string`,
+              type: 'Literal',
+              properties: { value: v }
+            });
+            finalEdges.push({
+              id: `rel_lit_${node.id}_${k}`,
+              from: node.id,
+              to: litId,
+              label: `:${k}`,
+              type: 'predicate',
+              properties: { isCurrent: true }
+            });
+          }
+        });
+      }
+    });
+
+    physicalEdges.forEach(edge => {
+      const hasTemporalProps = edge.properties && (
+        edge.properties.validFrom !== undefined ||
+        edge.properties.validTo !== undefined
+      );
+      const isReifiableRelation = [
+        'composition',
+        'mounted_in',
+        'has_slot',
+        'stored_at',
+        'has_part'
+      ].includes(edge.type) || [
+        'mounted_in',
+        'has_slot',
+        'stored_at',
+        'has_part'
+      ].includes(edge.label);
+
+      if (isReifiableRelation && hasTemporalProps) {
+        const stmtId = `stmt_${edge.id}`;
+        const isCurrent = edge.properties.isCurrent !== false;
+        const rel = edge.label || edge.type;
 
+        // Correct semantic directionality:
+        // For mounted_in / stored_at, edge.from is the Child (Part) and edge.to is the Parent (Slot/Warehouse).
+        // For has_slot / has_part, edge.from is the Parent and edge.to is the Child.
+        const isChildToParent = rel === 'mounted_in' || rel === 'stored_at';
+        const parentNodeId = isChildToParent ? edge.to : edge.from;
+        const childNodeId = isChildToParent ? edge.from : edge.to;
+
+        physicalNodes.push({
+          id: stmtId,
+          label: `_:${edge.id}`,
+          type: 'RelationalQuality',
+          properties: { isCurrent, originalEdgeId: edge.id }
+        });
+
+        finalEdges.push({
+          id: `rel_p_${edge.id}`,
+          from: stmtId,
+          to: parentNodeId,
+          label: ':hasParent',
+          type: 'reification',
+          properties: { isCurrent }
+        });
+
+        finalEdges.push({
+          id: `rel_c_${edge.id}`,
+          from: stmtId,
+          to: childNodeId,
+          label: ':hasChild',
+          type: 'reification',
+          properties: { isCurrent }
+        });
+
+        if (edge.properties.validFrom !== undefined && edge.properties.validFrom !== null) {
+          const litFromId = `lit_vf_${edge.id}`;
+          physicalNodes.push({
+            id: litFromId,
+            label: `"${edge.properties.validFrom}"^^xsd:integer`,
+            type: 'Literal',
+            properties: { value: edge.properties.validFrom }
+          });
           finalEdges.push({
-            id: `rel_p_${edge.id}`,
+            id: `rel_vf_${edge.id}`,
             from: stmtId,
-            to: edge.from,
-            label: ':hasParent',
+            to: litFromId,
+            label: ':validFrom',
             type: 'reification',
             properties: { isCurrent }
           });
+        }
 
+        if (edge.properties.validTo !== undefined && edge.properties.validTo !== null) {
+          const litToId = `lit_vt_${edge.id}`;
+          physicalNodes.push({
+            id: litToId,
+            label: `"${edge.properties.validTo}"^^xsd:integer`,
+            type: 'Literal',
+            properties: { value: edge.properties.validTo }
+          });
           finalEdges.push({
-            id: `rel_c_${edge.id}`,
+            id: `rel_vt_${edge.id}`,
             from: stmtId,
-            to: edge.to,
-            label: ':hasChild',
+            to: litToId,
+            label: ':validTo',
             type: 'reification',
-            properties: { isCurrent }
+            properties: { isCurrent: false }
           });
+        }
 
-          if (edge.properties.validFrom !== undefined && edge.properties.validFrom !== null) {
-            const litFromId = `lit_vf_${edge.id}`;
+        // Also reify custom edge properties (e.g. crack="2mm" in NAIVE_EDGE mode)
+        Object.entries(edge.properties).forEach(([k, v]) => {
+          if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+            const litPropId = `lit_prop_${edge.id}_${k}`;
             physicalNodes.push({
-              id: litFromId,
-              label: `"${edge.properties.validFrom}"^^xsd:integer`,
+              id: litPropId,
+              label: `"${v}"^^xsd:string`,
               type: 'Literal',
-              properties: { value: edge.properties.validFrom }
+              properties: { value: v }
             });
-
             finalEdges.push({
-              id: `rel_vf_${edge.id}`,
+              id: `rel_prop_${edge.id}_${k}`,
               from: stmtId,
-              to: litFromId,
-              label: ':validFrom',
+              to: litPropId,
+              label: `:${k}`,
               type: 'reification',
               properties: { isCurrent }
             });
           }
+        });
+      } else {
+        finalEdges.push(edge);
+      }
+    });
 
-          if (edge.properties.validTo !== undefined && edge.properties.validTo !== null) {
-            const litToId = `lit_vt_${edge.id}`;
-            physicalNodes.push({
-              id: litToId,
-              label: `"${edge.properties.validTo}"^^xsd:integer`,
-              type: 'Literal',
-              properties: { value: edge.properties.validTo }
-            });
-
-            finalEdges.push({
-              id: `rel_vt_${edge.id}`,
-              from: stmtId,
-              to: litToId,
-              label: ':validTo',
-              type: 'reification',
-              properties: { isCurrent: false }
-            });
-          }
-        } else {
-          finalEdges.push(edge);
-        }
-      });
-
-      return { nodes: physicalNodes, edges: finalEdges };
-    }
-
-    return { nodes: physicalNodes, edges: physicalEdges };
+    return { nodes: physicalNodes, edges: finalEdges };
   }
 
-  // Case 2: Labeled Property Graph (LPG) Mode
+  // =========================================================================
+  // CASE 2: Labeled Property Graph (LPG) Mode
+  // =========================================================================
   if (storageMode === 'LPG' && is4D) {
     const stateNodes = physicalNodes.filter(n => n.type === 'State');
     const entityStates = new Map();
@@ -158,6 +296,7 @@ export function generatePhysicalGraph(semanticGraph, storageMode) {
             type: 'transition',
             properties: {
               atTime: nextState.properties?.validFrom,
+              validFrom: nextState.properties?.validFrom,
               isCurrent: nextState.properties?.isCurrent ?? true
             }
           });
@@ -169,4 +308,4 @@ export function generatePhysicalGraph(semanticGraph, storageMode) {
   }
 
   return { nodes: physicalNodes, edges: physicalEdges };
-}
+}

js/state.js

@@ -1,18 +1,16 @@
 import { reactive } from 'vue';
-export { ENTITY_CLASSES, RELATION_TYPES } from './smrm/definitions.js';
+export { ENTITY_CLASSES, RELATION_TYPES, inferEntityClass } from './smrm/definitions.js';
 
 /**
- * SINGLE SOURCE OF TRUTH (Event Sourcing)
- * ---------------------------------------
- * This module holds the pure domain reactive state of the application.
- * According to architecture guidelines, UI settings and visual graph
- * configurations are never stored here.
- * 
- * We only store the absolute domain truth:
- * - Current Time dimension
- * - Event Log (domain business events over time)
- * - Edge/Event sequence counter
- * - Domain settings (e.g. Naive defect target variant)
+ * SINGLE SOURCE OF TRUTH (Event Sourcing & Workbench State)
+ * ---------------------------------------------------------
+ * Central reactive store eliminating duplicate state/settings watchers.
+ *
+ * Perspective values (4 unified viewpoints):
+ * - 'SMRM'    : Engineer Perspective (domain hierarchy, slots/states collapsed)
+ * - 'SMIM'    : Logical Perspective (canonical 3D BFO / 4D ISO 15926 / Naive topology)
+ * - 'SMS_LPG' : Physical LPG Perspective (Property Graph storage & state transitions)
+ * - 'SMS_RDF' : Physical RDF Perspective (W3C RDF triples, reification & literals)
  */
 export const state = reactive({
   // 1. Navigation View ('MENU' | 'SANDBOX' | 'SCENARIO')
@@ -27,65 +25,104 @@ export const state = reactive({
   // 4. Current Domain Ontology ('NAIVE_NODE' | 'NAIVE_EDGE' | 'BFO' | 'ISO15926')
   ontology: 'NAIVE_NODE',
 
-  // 5. The Event Log (The core of our Domain-Driven Event Sourcing)
-  // Format: Pure business events (e.g. REGISTER_PART, ASSEMBLE, REPORT_DEFECT, DISMANTLE)
-  eventLog: [],
+  // 5. Unified Perspective ('SMRM' | 'SMIM' | 'SMS_LPG' | 'SMS_RDF')
+  perspective: 'SMRM',
 
-  // 6. Counter to ensure unique identifiers for events
-  edgeSequence: 1,
+  // 6. Active Physical Storage Paradigm ('LPG' | 'RDF')
+  // Automatically switched when selecting 'SMS_LPG' or 'SMS_RDF'
+  storage: 'LPG',
 
-  // 7. Perspective View ('SMRM' | 'SMIM' | 'SMS')
-  perspective: 'SMRM',
+  // 7. Visual Graph Engine ('VIS' | 'MERMAID')
+  graphEngine: 'VIS',
+
+  // 8. UI Locale ('sv' | 'en' | 'ru')
+  language: 'en',
 
-  // 8. Visual Graph Engine ('VIS' | 'MERMAID')
-  graphEngine: 'VIS'
+  // 9. Toggle visibility of historical (closed) relationships
+  showHistory: true,
+
+  // 10. The Event Log (Pure business events)
+  eventLog: [],
+
+  // 11. Monotonic counter for unique event IDs
+  edgeSequence: 1
 });
 
 /**
  * Advances the global system time by one unit (T = T + 1).
- * Because 'state' is reactive, calling this will automatically trigger UI updates.
  */
 export function advanceTime() {
   state.currentTime++;
 }
 
 /**
- * Completely replaces the current domain state.
- * Useful for loading a saved JSON file or injecting a predefined scenario.
- * 
- * @param {Object} newState - The data object containing the state to inject.
+ * Returns the next monotonic sequence integer and increments the counter.
+ * @returns {number}
+ */
+export function nextSequence() {
+  return state.edgeSequence++;
+}
+
+/**
+ * Sets the active perspective and synchronises the physical storage mode ('LPG' | 'RDF')
+ * so that UNDER THE BONNET and DATABASE QUERY always match the selected Physical view.
+ *
+ * @param {'SMRM'|'SMIM'|'SMS_LPG'|'SMS_RDF'|'SMS'} newPerspective
+ */
+export function setPerspective(newPerspective) {
+  if (newPerspective === 'SMS_LPG') {
+    state.perspective = 'SMS_LPG';
+    state.storage = 'LPG';
+  } else if (newPerspective === 'SMS_RDF') {
+    state.perspective = 'SMS_RDF';
+    state.storage = 'RDF';
+  } else if (newPerspective === 'SMS') {
+    state.perspective = state.storage === 'RDF' ? 'SMS_RDF' : 'SMS_LPG';
+  } else if (newPerspective === 'SMIM' || newPerspective === 'SMRM') {
+    state.perspective = newPerspective;
+  }
+}
+
+/**
+ * Completely replaces or updates the current state from a saved JSON object or scenario.
+ *
+ * @param {Object} newState - State payload to inject.
  */
 export function loadState(newState) {
+  if (!newState || typeof newState !== 'object') return;
+
   if (newState.currentView !== undefined) {
     state.currentView = newState.currentView;
   }
-
   if (newState.userRole !== undefined) {
     state.userRole = newState.userRole;
   }
-
   if (newState.ontology !== undefined) {
-    state.ontology = newState.ontology;
+    const onto = newState.ontology;
+    state.ontology = onto === 'ISO_15926_4D' ? 'ISO15926' : (onto === 'NAIVE' ? 'NAIVE_NODE' : onto);
+  }
+  if (newState.storage === 'LPG' || newState.storage === 'RDF') {
+    state.storage = newState.storage;
+  }
+  if (newState.perspective !== undefined) {
+    setPerspective(newState.perspective);
   }
-
   if (newState.currentTime !== undefined) {
     state.currentTime = newState.currentTime;
   }
-  
-  if (newState.eventLog) {
+  if (Array.isArray(newState.eventLog)) {
     state.eventLog.splice(0, state.eventLog.length, ...newState.eventLog);
   }
-  
   if (newState.edgeSequence !== undefined) {
     state.edgeSequence = newState.edgeSequence;
   }
-
-  if (newState.perspective !== undefined) {
-    state.perspective = newState.perspective;
-  }
-
   if (newState.graphEngine !== undefined) {
-    state.graphEngine = newState.graphEngine;
+    state.graphEngine = String(newState.graphEngine).toUpperCase() === 'MERMAID' ? 'MERMAID' : 'VIS';
   }
-}
-
+  if (newState.language !== undefined) {
+    state.language = newState.language;
+  }
+  if (newState.showHistory !== undefined) {
+    state.showHistory = Boolean(newState.showHistory);
+  }
+}

js/urmsm/bom-view.js

@@ -1,88 +1,137 @@
 /**
  * URMSM LAYER: BOM VIEW (Stakeholder Viewpoint)
  * ---------------------------------------------
- * This module generates the user-facing Bill of Materials (BOM) tree.
- * According to ISO 42010, this is a specific viewpoint for an engineer
- * who only cares about the physical breakdown at time T, abstracting away
- * the underlying database mechanics (LPG/RDF) and temporal ontologies.
- * 
- * Returns pure hierarchical data structures without any DOM or HTML coupling.
+ * Generates the user-facing Bill of Materials (BOM) hierarchy for the active
+ * ontology at time T:
+ * - Dynamically discovers all active root containers (Vehicles, Warehouses).
+ * - Never renders a phantom 'System_A' when the graph is empty.
+ * - Collapses technical Slot nodes via SMRM reduction.
+ * - Attaches active defect indicators (e.g. 'crack: 2mm') to components if and only if
+ *   the defect survives in the active ontology at time T.
  */
 
-/**
- * Recursively builds a pure hierarchical tree structure for the BOM.
- * 
- * @param {string} rootId - The ID of the top-level system.
- * @param {Array<Object>} activeEdges - Array of currently active edges (filtered for Time = T).
- * @returns {Object} Hierarchical node structure: { id: string, children: Array<Object> }.
- */
-export function generateBomTree(rootId, activeEdges) {
-  return buildTreeRecursive(rootId, activeEdges || [], new Set());
-}
+import { INTERNAL_PROPERTY_KEYS } from '../smrm/definitions.js';
+import { reduceGraphForSMRM } from './smrm-view.js';
 
 /**
- * Helper function to recursively populate tree nodes while guarding against circular references.
- * Strictly traverses the ontological hierarchy: Parent -> Slot -> Child.
- * 
- * - When at a Parent (non-Slot): traverses outgoing has_slot or has_part edges to find contextual Slots or sub-components.
- * - When at a Slot: traverses incoming mounted_in edges to locate the mounted Child component.
- * - Under no circumstances does a Slot traverse backwards to its Parent, or a Child backwards to its Slot.
- * 
- * @param {string} nodeId - Current node identifier.
- * @param {Array<Object>} activeEdges - Array of active relationship edges.
- * @param {Set<string>} visited - Set of previously visited node identifiers to avoid cycles.
- * @returns {Object} Tree node object.
+ * Generates an array of root BOM trees from the current canonical Semantic Graph.
+ *
+ * @param {Object} semanticGraph - Canonical SMIM Semantic Graph ({ nodes, edges }).
+ * @returns {Array<{ id: string, entityClass: string, defects: Array<string>, children: Array }>}
  */
-function buildTreeRecursive(nodeId, activeEdges, visited = new Set()) {
-  if (visited.has(nodeId)) {
-    return { id: nodeId, children: [] };
+export function generateBomTrees(semanticGraph) {
+  if (!semanticGraph || !Array.isArray(semanticGraph.nodes) || semanticGraph.nodes.length === 0) {
+    return [];
   }
 
-  const nextVisited = new Set(visited);
-  nextVisited.add(nodeId);
-
-  const childIds = new Set();
-  const edges = activeEdges || [];
+  // Reduce to Engineer SMRM graph so Slots, 4D Extents, and Qualities are normalised
+  const smrmGraph = reduceGraphForSMRM(semanticGraph);
+  const activeEdges = smrmGraph.edges.filter(e => e.properties?.isCurrent !== false);
 
-  // Determine if the current node is a contextual Slot
-  const isSlotNode = nodeId.startsWith('Slot_') ||
-    nodeId.startsWith('st_Slot_') ||
-    edges.some(e => e.to === nodeId && (e.label === 'has_slot' || e.type === 'has_slot'));
+  // Map active defects per component ID
+  const defectsByNode = new Map();
+  const addDefect = (nodeId, label) => {
+    if (!defectsByNode.has(nodeId)) defectsByNode.set(nodeId, new Set());
+    defectsByNode.get(nodeId).add(label);
+  };
 
-  if (isSlotNode) {
-    // A Slot ONLY contains components mounted into it (Child -[mounted_in]-> Slot)
-    edges.forEach(e => {
-      const rel = e.label || e.relationType || e.type;
-      if (e.to === nodeId && (rel === 'mounted_in' || e.label === 'mounted_in')) {
-        if (!nextVisited.has(e.from)) {
-          childIds.add(e.from);
+  // 1a. Check custom properties on nodes (Naive Node mode)
+  smrmGraph.nodes.forEach(node => {
+    if (node.type === 'Defect') return;
+    if (node.properties) {
+      Object.entries(node.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          addDefect(node.id, `${k}: ${v}`);
         }
-      }
-    });
-  } else {
-    // A non-Slot component/system traverses forward:
-    // 1. Outgoing slots: Parent -[has_slot]-> Slot
-    // 2. Direct sub-components: Parent -[has_part]-> Child
-    edges.forEach(e => {
-      const rel = e.label || e.relationType || e.type;
-      if (e.from === nodeId) {
-        if (rel === 'has_slot' || e.label === 'has_slot') {
-          if (!nextVisited.has(e.to)) {
-            childIds.add(e.to);
-          }
-        } else if (rel === 'has_part' || e.label === 'has_part') {
-          if (!nextVisited.has(e.to)) {
-            childIds.add(e.to);
-          }
+      });
+    }
+  });
+
+  // 1b. Check custom properties on active structural edges (Naive Edge mode)
+  activeEdges.forEach(edge => {
+    const childId = edge.childId || (edge.label === 'stored_at' || edge.label === 'mounted_in' ? edge.from : edge.to);
+    if (edge.properties && childId) {
+      Object.entries(edge.properties).forEach(([k, v]) => {
+        if (!INTERNAL_PROPERTY_KEYS.includes(k) && v !== undefined && v !== null) {
+          addDefect(childId, `${k}: ${v}`);
         }
+      });
+    }
+  });
+
+  // 1c. Check explicit Defect nodes linked via active 'has_defect' edges (BFO & ISO 15926)
+  activeEdges.forEach(edge => {
+    if (edge.label === 'has_defect' || edge.type === 'has_defect') {
+      const defectNode = smrmGraph.nodes.find(n => n.id === edge.to);
+      if (defectNode) {
+        const dType = defectNode.properties?.defectType || defectNode.properties?.qualityType || 'defect';
+        const dVal = defectNode.properties?.value || 'present';
+        addDefect(edge.from, `${dType}: ${dVal}`);
       }
-    });
-  }
+    }
+  });
 
-  const children = Array.from(childIds).map(childId => buildTreeRecursive(childId, edges, nextVisited));
+  // Build parent -> children adjacency for active structural relations
+  const childrenMap = new Map();
+  const hasParentSet = new Set();
 
-  return {
-    id: nodeId,
-    children
-  };
+  activeEdges.forEach(edge => {
+    if (edge.label === 'has_defect' || edge.type === 'has_defect') return;
+
+    let parentId = null;
+    let childId = null;
+
+    if (edge.label === 'has_part' || edge.label === 'has_slot') {
+      parentId = edge.from;
+      childId = edge.to;
+    } else if (edge.label === 'mounted_in' || edge.label === 'stored_at') {
+      parentId = edge.to;
+      childId = edge.from;
+    }
+
+    if (parentId && childId && parentId !== childId) {
+      if (!childrenMap.has(parentId)) childrenMap.set(parentId, new Set());
+      childrenMap.get(parentId).add(childId);
+      hasParentSet.add(childId);
+    }
+  });
+
+  // Identify root nodes (Vehicles, Warehouses, or top-level assemblies without a parent)
+  const candidateRoots = smrmGraph.nodes.filter(n => {
+    if (n.type === 'Defect' || n.type === 'Slot') return false;
+    if (hasParentSet.has(n.id)) return false;
+    return n.type === 'Vehicle' || n.type === 'Warehouse' || childrenMap.has(n.id);
+  });
+
+  function buildNode(nodeId, visited = new Set()) {
+    if (visited.has(nodeId)) {
+      return { id: nodeId, defects: [], children: [] };
+    }
+    const nextVisited = new Set(visited);
+    nextVisited.add(nodeId);
+
+    const nodeObj = smrmGraph.nodes.find(n => n.id === nodeId);
+    const childIds = Array.from(childrenMap.get(nodeId) || []);
+    const defects = Array.from(defectsByNode.get(nodeId) || []);
+
+    return {
+      id: nodeId,
+      entityClass: nodeObj?.type || 'Part',
+      defects,
+      children: childIds.map(cid => buildNode(cid, nextVisited))
+    };
+  }
+
+  return candidateRoots.map(root => buildNode(root.id));
 }
+
+/**
+ * Backwards-compatible single-root helper.
+ */
+export function generateBomTree(rootId, activeEdges) {
+  const trees = generateBomTrees({
+    nodes: [{ id: rootId, type: 'Vehicle', properties: {} }],
+    edges: activeEdges || []
+  });
+  return trees[0] || null;
+}

js/urmsm/smrm-view.js

@@ -1,33 +1,187 @@
 /**
  * URMSM LAYER: SMRM GRAPH REDUCTION VIEWPOINT (ISO 42010)
  * -------------------------------------------------------
- * Transforms a canonical SMIM Semantic Graph into the engineer's SMRM perspective.
- * Visually collapses intermediate contextual Slot nodes and renders direct
- * transitive relationships between parent and child components.
- * 
- * Crucially preserves and transfers properties (such as defects like { crack: '2mm' })
- * from the original mounting relationship onto the direct transitive relationship.
- * 
- * Adheres strictly to the Rule of Isolation:
- * Pure graph-to-graph reduction middleware without DOM or Vue coupling.
- * 
- * @param {Object} semanticGraph - Canonical Semantic Graph ({ nodes: Array, edges: Array }).
- * @returns {Object} Reduced Semantic Graph ({ nodes: Array, edges: Array }) for SMRM rendering.
+ * Transforms any canonical SMIM Semantic Graph (Naive, 3D BFO, or 4D ISO 15926)
+ * into the Engineer's SMRM Perspective:
+ * - Collapses intermediate contextual Slot nodes into direct 'has_part' relationships.
+ * - Abstracts away 4D Spatio-Temporal Extents ('ActualIndividual') and 'State' slices
+ *   into clean domain entities ('Vehicle', 'Part', 'Warehouse', 'Defect'), showing
+ *   the engineer purely what domain knowledge survives at time T.
+ * - Maps 3D BFO 'MaterialEntity' and 'Quality' nodes into engineering domain classes.
  */
 
+import { inferEntityClass } from '../smrm/definitions.js';
+
+/**
+ * Reduces a canonical SMIM graph into the Engineer (SMRM) viewpoint.
+ *
+ * @param {Object} semanticGraph - Canonical Semantic Graph ({ nodes: Array, edges: Array }).
+ * @returns {{ nodes: Array, edges: Array }}
+ */
 export function reduceGraphForSMRM(semanticGraph) {
   if (!semanticGraph || !Array.isArray(semanticGraph.nodes) || !Array.isArray(semanticGraph.edges)) {
     return { nodes: [], edges: [] };
   }
 
-  // 1. Identify all Slot nodes in the semantic graph
-  const slotNodeIds = new Set();
+  const is4D = semanticGraph.nodes.some(n => n.type === 'ActualIndividual' || n.type === 'State');
+  const isBFO = semanticGraph.nodes.some(n => n.type === 'MaterialEntity' || n.type === 'Quality');
+
+  // Case A: 4D ISO 15926 Graph -> Project onto domain entities
+  if (is4D) {
+    return reduce4DToSMRM(semanticGraph);
+  }
+
+  // Case B: 3D BFO Graph -> Normalize MaterialEntity/Quality & collapse Slots
+  if (isBFO) {
+    const normalizedNodes = semanticGraph.nodes.map(n => {
+      if (n.type === 'MaterialEntity') {
+        const cls = inferEntityClass(n.id, n.properties?.entityClass);
+        return {
+          ...n,
+          type: cls,
+          properties: { ...(n.properties || {}), entityClass: cls }
+        };
+      }
+      if (n.type === 'Quality') {
+        return {
+          ...n,
+          type: 'Defect',
+          properties: { ...(n.properties || {}), entityClass: 'Defect' }
+        };
+      }
+      return { ...n, properties: { ...(n.properties || {}) } };
+    });
+
+    const normalizedEdges = semanticGraph.edges.map(e => {
+      if (e.label === 'inheres_in' || e.type === 'inherence') {
+        // Flip Quality -> Part inheres_in into Part -> Defect has_defect for Engineer View
+        return {
+          ...e,
+          from: e.to,
+          to: e.from,
+          label: 'has_defect',
+          type: 'has_defect',
+          properties: { ...(e.properties || {}) }
+        };
+      }
+      return { ...e, properties: { ...(e.properties || {}) } };
+    });
+
+    return collapseSlots({ nodes: normalizedNodes, edges: normalizedEdges });
+  }
+
+  // Case C: Naive Graph -> Collapse Slots directly while transferring edge properties
+  return collapseSlots(semanticGraph);
+}
+
+/**
+ * Projects a 4D ISO 15926 Semantic Graph into a clean domain graph for the Engineer View,
+ * collapsing 4D Extents, States, and Slots while preserving surviving defects.
+ */
+function reduce4DToSMRM(semanticGraph) {
+  const domainNodes = new Map();
+  const stateToOwner = new Map();
+
   semanticGraph.nodes.forEach(node => {
+    if (node.type === 'ActualIndividual') {
+      const origId = node.properties?.originalId || node.id.replace(/^4d_/, '');
+      const cls = inferEntityClass(origId, node.properties?.entityClass);
+      if (cls !== 'Slot') {
+        domainNodes.set(origId, {
+          id: origId,
+          label: origId,
+          type: cls,
+          properties: { entityClass: cls }
+        });
+      }
+    } else if (node.type === 'State') {
+      const ownerId = node.properties?.ownerId || node.id.replace(/^st_/, '').split('_evt_')[0];
+      stateToOwner.set(node.id, ownerId);
+    } else if (node.type === 'Defect') {
+      domainNodes.set(node.id, {
+        ...node,
+        type: 'Defect',
+        properties: { ...(node.properties || {}), entityClass: 'Defect' }
+      });
+    }
+  });
+
+  const projectedEdges = [];
+
+  semanticGraph.edges.forEach(edge => {
+    if (edge.label === 'temporalPartOf') return;
+
+    const fromOwner = stateToOwner.get(edge.from) || edge.from;
+    const toOwner = stateToOwner.get(edge.to) || edge.to;
+
+    if (edge.label === 'has_defect') {
+      projectedEdges.push({
+        id: `smrm_def_${fromOwner}_${edge.to}`,
+        from: fromOwner,
+        to: edge.to,
+        label: 'has_defect',
+        type: 'has_defect',
+        properties: {
+          ...(edge.properties || {}),
+          isCurrent: edge.properties?.validTo === null
+        }
+      });
+      return;
+    }
+
+    if (edge.label === 'stored_at') {
+      projectedEdges.push({
+        id: `smrm_store_${fromOwner}_${toOwner}_${edge.properties?.validFrom ?? 0}`,
+        from: fromOwner,
+        to: toOwner,
+        label: 'stored_at',
+        type: 'stored_at',
+        childId: fromOwner,
+        parentId: toOwner,
+        properties: { ...(edge.properties || {}) }
+      });
+      return;
+    }
+
+    if (edge.label === 'has_slot' || edge.label === 'mounted_in') {
+      // Ensure intermediate slot exists temporarily so collapseSlots can merge the pair cleanly
+      if (toOwner.startsWith('Slot_') && !domainNodes.has(toOwner)) {
+        domainNodes.set(toOwner, {
+          id: toOwner,
+          label: toOwner,
+          type: 'Slot',
+          properties: { entityClass: 'Slot' }
+        });
+      }
+      projectedEdges.push({
+        id: edge.id,
+        from: fromOwner,
+        to: toOwner,
+        label: edge.label,
+        type: edge.label,
+        childId: edge.childId,
+        parentId: edge.parentId,
+        properties: { ...(edge.properties || {}) }
+      });
+    }
+  });
+
+  return collapseSlots({
+    nodes: Array.from(domainNodes.values()),
+    edges: projectedEdges
+  });
+}
+
+/**
+ * Collapses [Parent] -[has_slot]-> [Slot] <-[mounted_in]- [Child] into
+ * a direct [Parent] -[has_part]-> [Child] edge, preserving mounting properties.
+ */
+function collapseSlots(graph) {
+  const slotNodeIds = new Set();
+  graph.nodes.forEach(node => {
     const isSlot = node.type === 'Slot' ||
       node.properties?.entityClass === 'Slot' ||
-      node.id.startsWith('Slot_') ||
-      node.id.startsWith('4d_Slot_') ||
-      node.id.startsWith('st_Slot_');
+      node.id.startsWith('Slot_');
     if (isSlot) {
       slotNodeIds.add(node.id);
     }
@@ -35,24 +189,19 @@ export function reduceGraphForSMRM(semanticGraph) {
 
   if (slotNodeIds.size === 0) {
     return {
-      nodes: semanticGraph.nodes.map(n => ({ ...n, properties: { ...(n.properties || {}) } })),
-      edges: semanticGraph.edges.map(e => ({ ...e, properties: { ...(e.properties || {}) } }))
+      nodes: graph.nodes.map(n => ({ ...n, properties: { ...(n.properties || {}) } })),
+      edges: graph.edges.map(e => ({ ...e, properties: { ...(e.properties || {}) } }))
     };
   }
 
-  const nodesToRemove = new Set(slotNodeIds);
   const edgesToRemove = new Set();
   const directTransitiveEdges = [];
 
-  // 2. Locate and collapse [Parent] -[has_slot]-> [Slot] <-[mounted_in]- [Child]
   slotNodeIds.forEach(slotId => {
-    // Find has_slot edges from Parent to Slot
-    const hasSlotEdges = semanticGraph.edges.filter(
+    const hasSlotEdges = graph.edges.filter(
       e => e.to === slotId && (e.label === 'has_slot' || e.type === 'has_slot')
     );
-
-    // Find mounted_in edges from Child to Slot
-    const mountedInEdges = semanticGraph.edges.filter(
+    const mountedInEdges = graph.edges.filter(
       e => e.to === slotId && (e.label === 'mounted_in' || e.type === 'mounted_in' || e.type === 'composition')
     );
 
@@ -63,8 +212,6 @@ export function reduceGraphForSMRM(semanticGraph) {
       mountedInEdges.forEach(mountedInEdge => {
         edgesToRemove.add(mountedInEdge.id);
         const childNodeId = mountedInEdge.from;
-
-        // Formulate direct transitive edge: Parent -> Child
         const directEdgeId = `smrm_${parentNodeId}_${childNodeId}_${mountedInEdge.properties?.validFrom ?? 0}`;
 
         directTransitiveEdges.push({
@@ -81,20 +228,13 @@ export function reduceGraphForSMRM(semanticGraph) {
         });
       });
     });
-
-    // Also remove temporalPartOf edges linking slot state slices to 4D extents
-    semanticGraph.edges.forEach(e => {
-      if ((e.from === slotId || e.to === slotId) && e.label === 'temporalPartOf') {
-        edgesToRemove.add(e.id);
-      }
-    });
   });
 
-  const remainingNodes = semanticGraph.nodes
-    .filter(n => !nodesToRemove.has(n.id))
+  const remainingNodes = graph.nodes
+    .filter(n => !slotNodeIds.has(n.id))
     .map(n => ({ ...n, properties: { ...(n.properties || {}) } }));
 
-  const remainingEdges = semanticGraph.edges
+  const remainingEdges = graph.edges
     .filter(e => !edgesToRemove.has(e.id))
     .map(e => ({ ...e, properties: { ...(e.properties || {}) } }))
     .concat(directTransitiveEdges);
@@ -103,4 +243,4 @@ export function reduceGraphForSMRM(semanticGraph) {
     nodes: remainingNodes,
     edges: remainingEdges
   };
-}
+}

styles/main.css

@@ -5,65 +5,399 @@
   font-style: normal;
 }
 
-* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
-body { margin: 0; padding: 12px; background: #f8fafc; color: #0f172a; display: flex; flex-direction: column; height: 100vh; }
-
-.control-deck { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
-.deck-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 14px; }
-.deck-row-top { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; border-top-left-radius: 7px; border-top-right-radius: 7px; }
-
-.badge { background: #0284c7; color: #ffffff; font-weight: bold; padding: 4px 10px; border-radius: 6px; font-size: 13px; }
-.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; display: flex; align-items: center; gap: 4px; }
-
-.iec-badge { display: inline-flex; align-items: center; gap: 3px; background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; cursor: help; position: relative; }
-.iec-badge:hover .iec-tooltip { visibility: visible; opacity: 1; }
-.iec-tooltip { visibility: hidden; opacity: 0; position: absolute; top: 130%; left: 0; z-index: 100; background: #0f172a; color: #f8fafc; padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 400; line-height: 1.35; min-width: 250px; max-width: 320px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); transition: opacity 0.15s ease-in-out; pointer-events: none; }
-.iec-tooltip::after { content: ""; position: absolute; bottom: 100%; left: 14px; border-width: 5px; border-style: solid; border-color: transparent transparent #0f172a transparent; }
-
-/* Правка тултипа для элементов у правого края */
-.iec-badge.align-right .iec-tooltip { left: auto; right: -5px; }
-.iec-badge.align-right .iec-tooltip::after { left: auto; right: 20px; }
-
-button { background: #0f172a; color: #ffffff; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; }
-button:hover { background: #334155; }
-button.secondary { background: #e2e8f0; color: #0f172a; }
-button.secondary:hover { background: #cbd5e1; }
-button.danger { background: #ef4444; }
-button.danger:hover { background: #dc2626; }
-
-.btn-group { display: flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: #ffffff; }
-.btn-group button { border-radius: 0; background: #ffffff; color: #475569; padding: 4px 10px; border-right: 1px solid #cbd5e1; font-size: 12px; font-weight: 600; line-height: 1.2; }
-.btn-group button:last-child { border-right: none; }
-.btn-group button.active { background: #0284c7; color: #ffffff; }
+* {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 10px 12px;
+  background: #f8fafc;
+  color: #0f172a;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+
+.sandbox-workspace {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Top Control Deck */
+.control-deck {
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
+}
+
+.deck-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+}
+
+.deck-row-top {
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+}
+
+.action-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #0284c7;
+  white-space: nowrap;
+}
+
+.badge {
+  background: #0284c7;
+  color: #ffffff;
+  font-weight: bold;
+  padding: 4px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #475569;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+/* IEC 63339 Badges & Tooltips */
+.iec-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  background: #e0f2fe;
+  color: #0369a1;
+  border: 1px solid #7dd3fc;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  cursor: help;
+  position: relative;
+}
+
+.iec-badge:hover .iec-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.iec-tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 130%;
+  left: 0;
+  z-index: 200;
+  background: #0f172a;
+  color: #f8fafc;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: none;
+  line-height: 1.35;
+  min-width: 250px;
+  max-width: 320px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  transition: opacity 0.15s ease-in-out;
+  pointer-events: none;
+}
+
+.iec-tooltip::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 14px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent #0f172a transparent;
+}
+
+.iec-badge.align-right .iec-tooltip {
+  left: auto;
+  right: -5px;
+}
+
+.iec-badge.align-right .iec-tooltip::after {
+  left: auto;
+  right: 20px;
+}
+
+/* Buttons & Inputs */
+button {
+  background: #0f172a;
+  color: #ffffff;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+button:hover {
+  background: #334155;
+}
+
+button.secondary {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+button.secondary:hover {
+  background: #cbd5e1;
+}
+
+button.danger {
+  background: #ef4444;
+}
+
+button.danger:hover {
+  background: #dc2626;
+}
+
+.btn-group {
+  display: flex;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #ffffff;
+  flex-shrink: 0;
+}
+
+.btn-group button {
+  border-radius: 0;
+  background: #ffffff;
+  color: #475569;
+  padding: 4px 9px;
+  border-right: 1px solid #cbd5e1;
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.btn-group button:last-child {
+  border-right: none;
+}
+
+.btn-group button.active {
+  background: #0284c7;
+  color: #ffffff;
+}
+
 .btn-group.flag-group button {
   font-family: 'Twemoji', system-ui, sans-serif;
-  font-size: 15px;
-  padding: 3px 8px;
+  font-size: 14px;
+  padding: 3px 7px;
 }
 
-input, select { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; }
-.divider { height: 18px; width: 1px; background: #cbd5e1; margin: 0 4px; }
+.btn-group.mini-toggle button {
+  font-size: 10px;
+  padding: 2px 7px;
+  text-transform: uppercase;
+}
 
-.main-container { display: flex; flex: 1; gap: 10px; min-height: 0; }
-#canvas-container { flex: 2; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; position: relative; overflow: hidden; min-width: 20%; }
-#vis-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
-#mermaid-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; padding: 24px 24px 140px 24px; display: flex; justify-content: center; align-items: flex-start; background: #ffffff; }
-#mermaid-container svg { width: auto; height: auto; max-width: none; }
+input,
+select {
+  padding: 4px 7px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 12px;
+}
 
-/* Ресайзеры (горизонтальный и вертикальный) */
-.resizer { width: 8px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; cursor: col-resize; transition: background-color 0.2s, border-color 0.2s; flex-shrink: 0; }
-.resizer:hover, .resizer.dragging { background-color: #cbd5e1; border-color: #94a3b8; }
-.resizer-h { height: 8px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; cursor: row-resize; transition: background-color 0.2s, border-color 0.2s; flex-shrink: 0; }
-.resizer-h:hover, .resizer-h.dragging { background-color: #cbd5e1; border-color: #94a3b8; }
-body.no-select { user-select: none; }
+.divider {
+  height: 18px;
+  width: 1px;
+  background: #cbd5e1;
+  margin: 0 2px;
+  flex-shrink: 0;
+}
 
-.graph-caption { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(4px); border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-size: 11px; font-weight: 700; color: #1e293b; z-index: 20; display: flex; align-items: center; gap: 6px; letter-spacing: 0.02em; pointer-events: none; }
-.graph-legend { position: absolute; bottom: 12px; left: 12px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(4px); border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); font-size: 11px; color: #334155; z-index: 20; max-width: 330px; }
-.legend-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin-bottom: 6px; display: flex; justify-content: space-between; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }
-.legend-section { margin-top: 5px; }
-.legend-section-title { font-weight: 600; color: #64748b; font-size: 10px; margin-bottom: 3px; text-transform: uppercase; }
-.legend-item { display: flex; align-items: center; margin-bottom: 3px; line-height: 1.25; }
+/* Main Split Workspace & Graph Canvas */
+.main-container {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  min-height: 0;
+}
 
+#canvas-container {
+  flex: 2;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  min-width: 25%;
+}
+
+#vis-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#mermaid-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  padding: 24px 24px 140px 24px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: #ffffff;
+}
+
+#mermaid-container svg {
+  width: auto;
+  height: auto;
+  max-width: none;
+}
+
+/* Resizers */
+.resizer {
+  width: 7px;
+  background-color: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  cursor: col-resize;
+  transition: background-color 0.2s, border-color 0.2s;
+  flex-shrink: 0;
+}
+
+.resizer:hover,
+.resizer.dragging {
+  background-color: #94a3b8;
+  border-color: #64748b;
+}
+
+.resizer-h {
+  height: 7px;
+  background-color: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  cursor: row-resize;
+  transition: background-color 0.2s, border-color 0.2s;
+  flex-shrink: 0;
+}
+
+.resizer-h:hover,
+.resizer-h.dragging {
+  background-color: #94a3b8;
+  border-color: #64748b;
+}
+
+body.no-select {
+  user-select: none;
+}
+
+/* Canvas Overlays: Caption & Legend */
+.graph-caption {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(4px);
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 6px 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  font-size: 11px;
+  font-weight: 700;
+  color: #1e293b;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  letter-spacing: 0.02em;
+  pointer-events: none;
+}
+
+.graph-legend {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(4px);
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 14px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  font-size: 11px;
+  color: #334155;
+  z-index: 20;
+  max-width: 330px;
+}
+
+.legend-title {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #475569;
+  margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 4px;
+}
+
+.legend-section {
+  margin-top: 5px;
+}
+
+.legend-section-title {
+  font-weight: 600;
+  color: #64748b;
+  font-size: 10px;
+  margin-bottom: 3px;
+  text-transform: uppercase;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3px;
+  line-height: 1.25;
+}
+
+/* Legend Swatches */
 .swatch-box-sys { width: 13px; height: 11px; background: #0284c7; border: 1px solid #0369a1; border-radius: 2px; margin-right: 8px; flex-shrink: 0; }
 .swatch-box-elem { width: 13px; height: 11px; background: #64748b; border: 1px solid #475569; border-radius: 2px; margin-right: 8px; flex-shrink: 0; }
 .swatch-box-4d { width: 13px; height: 11px; background: #4f46e5; border: 1px solid #3730a3; border-radius: 2px; margin-right: 8px; flex-shrink: 0; }
@@ -83,38 +417,215 @@ body.no-select { user-select: none; }
 .swatch-line-store { width: 16px; height: 2px; background: #f97316; margin-right: 8px; flex-shrink: 0; }
 .swatch-line-defect { width: 16px; height: 2px; background: #ef4444; margin-right: 8px; flex-shrink: 0; }
 
-
-.sidebar { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 350px; }
-.card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; }
-.card h4 { margin: 0 0 8px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; display: flex; justify-content: space-between; align-items: center; }
-ul.tree, ul.tree ul { list-style-type: none; padding-left: 16px; margin: 4px 0; }
-ul.tree li { position: relative; padding: 2px 0; font-size: 13px; }
-ul.tree li::before { content: "├─ "; color: #94a3b8; }
-ul.tree li:last-child::before { content: "└─ "; color: #94a3b8; }
-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #f1f5f9; }
-th { color: #64748b; font-weight: 600; }
-.active-row { background: #f0fdf4; }
-.closed-row { color: #94a3b8; text-decoration: line-through; }
-pre.code-block { margin: 0; font-family: monospace; font-size: 11px; color: #334155; line-height: 1.4; background: #f8fafc; padding: 8px; border-radius: 4px; border: 1px solid #e2e8f0; overflow-y: auto; flex: 1; }
-
-/* Fix for Vue #app wrapper to fill the viewport */
-#app {
+/* Right Sidebar Cards */
+.sidebar {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  height: 100%;
+  gap: 6px;
+  min-width: 360px;
   min-height: 0;
 }
 
-/* Sandbox Workspace Wrapper */
-.sandbox-workspace {
+.card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 10px 12px;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+
+.card h4 {
+  margin: 0 0 6px 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.card-scroll-body {
+  overflow-y: auto;
   flex: 1;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
 }
 
+/* BOM Tree & Badges */
+ul.tree,
+ul.tree ul {
+  list-style-type: none;
+  padding-left: 16px;
+  margin: 2px 0;
+}
+
+ul.tree.root-tree {
+  padding-left: 4px;
+}
+
+ul.tree li {
+  position: relative;
+  padding: 2px 0;
+  font-size: 12.5px;
+}
+
+ul.tree ul li::before {
+  content: "├─ ";
+  color: #94a3b8;
+}
+
+ul.tree ul li:last-child::before {
+  content: "└─ ";
+  color: #94a3b8;
+}
+
+.bom-node-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.bom-class-badge {
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.bom-defect-badge {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.null-badge {
+  color: #94a3b8;
+  font-style: italic;
+  font-size: 10.5px;
+}
+
+/* Under the Bonnet & Live Query Tables */
+.store-sub-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #475569;
+  background: #f8fafc;
+  padding: 3px 6px;
+  border-left: 3px solid #0284c7;
+  margin-bottom: 4px;
+}
+
+.storage-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+  margin-bottom: 4px;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 4px 6px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+th {
+  color: #64748b;
+  font-weight: 600;
+  background: #fafafa;
+}
+
+.active-row {
+  background: #f0fdf4;
+}
+
+.closed-row {
+  color: #94a3b8;
+  text-decoration: line-through;
+}
+
+.empty-placeholder {
+  color: #94a3b8;
+  font-size: 11.5px;
+  padding: 6px 4px;
+  font-style: italic;
+}
+
+pre.code-block {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 11px;
+  color: #334155;
+  line-height: 1.38;
+  background: #f8fafc;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+pre.query-code-block {
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+
+.query-result-box {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 6px 8px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.query-result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: 700;
+  color: #334155;
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 4px;
+}
+
+.defect-counter-badge {
+  padding: 2px 7px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.defect-alert-zero {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.defect-alert-found {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
 /* Main Menu / Landing View */
 .landing-view {
   display: flex;
@@ -186,6 +697,7 @@ pre.code-block { margin: 0; font-family: monospace; font-size: 11px; color: #334
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   width: 100%;
+  white-space: normal;
 }
 
 .menu-btn .btn-main-text {
@@ -378,31 +890,6 @@ pre.code-block { margin: 0; font-family: monospace; font-size: 11px; color: #334
   cursor: pointer;
 }
 
-/* Role Switcher Styling */
-.btn-group.role-group button {
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.btn-group.role-group button.active {
-  background: #4f46e5;
-  color: #ffffff;
-}
-
-/* Universal Engineer Workspace Placeholder */
-.uni-engineer-placeholder {
-  min-height: 52px;
-  background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-  border-bottom-left-radius: 7px;
-  border-bottom-right-radius: 7px;
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-}
-
 .player-time {
   font-size: 12px;
   font-variant-numeric: tabular-nums;
@@ -417,4 +904,4 @@ pre.code-block { margin: 0; font-family: monospace; font-size: 11px; color: #334
   box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.8) !important;
   background-color: rgba(255, 255, 200, 0.3) !important;
   transition: all 0.3s ease;
-}
+}