Skip to content

Commit e410830

Browse files
styk-tvstyk-tv
committed
Browser: rich welcome panel, structured nav, Playwright tests
Replace blank 'Select an Entity' placeholder with a full welcome panel showing live stats, Three Loops DL boxes, module cards with descriptions, 12 featured concept cards, ontology layering diagram, and quick links. Sidebar navigation now uses explicit module ordering (Core first), expands all sections by default, groups entities by type (Classes/Properties/Individuals) with count badges, and shows module descriptions with color-coded borders. Adds Playwright test suite (8 smoke tests) covering page load, header, module pills, sidebar population, entity click, search filtering, and welcome panel rendering.
1 parent e04787f commit e410830

9 files changed

Lines changed: 1028 additions & 51 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules
22
docs/.vitepress/cache
33
docs/.vitepress/dist
4+
test-results
5+
playwright-report

‎docs/public/browse/config.js‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,70 @@ const MODULE_LABELS = {
7272
'rbac': 'RBAC',
7373
};
7474

75-
export { VERSION, CKP_ONTOLOGY_URLS, CKP_PREFIXES, COLOR_SCHEME, MODULE_COLORS, MODULE_LABELS };
75+
/**
76+
* Explicit module ordering for structured navigation.
77+
* Core concepts first, then supporting modules.
78+
*/
79+
const MODULE_ORDER = [
80+
'core',
81+
'kernel-metadata',
82+
'processes',
83+
'relations',
84+
'base-instances',
85+
'proof',
86+
'rbac',
87+
];
88+
89+
/**
90+
* Rich module descriptions for the welcome panel and sidebar headers.
91+
*/
92+
const MODULE_DESCRIPTIONS = {
93+
'core': 'Core BFO continuants: Kernel, Edge, Instance, Action, Project. The fundamental building blocks of CKP architecture, dual-grounded in BFO 2020 and mid-level ontologies (IAO, CCO, PROV-O).',
94+
'kernel-metadata': 'Storage, deployment, and serving qualities. Alpha-6 adds StorageMedium, DeploymentMethod, and ServingDisposition for the four kernel types.',
95+
'processes': 'BFO occurrents: Invocation, EdgeCommunication, Consensus, and Broadcast processes. Temporal parts and process boundaries for lifecycle tracking.',
96+
'relations': 'Object properties and SWRL inference rules: connected_by, depends_on, can_reach, upstream_of, downstream_of, sibling_of. Property chains for transitive closure.',
97+
'base-instances': 'Instance shapes with PROV-O integration: InstanceManifest, SealedInstance, LedgerEntry. Write-once immutability and append-only audit logs.',
98+
'proof': 'Proof verification: ProofRecord, ProofCheck, ProofOutcome. SHA-256 hashing, SHACL/SCHEMA/PROVENANCE checks, SPIFFE/SVID trust binding.',
99+
'rbac': 'Role-Based Access Control: Agent, UserAgent, ProcessAgent, Role, Permission, Quorum. Governance modes (STRICT, RELAXED, AUTONOMOUS).',
100+
};
101+
102+
/**
103+
* Featured entities for the welcome panel — key concepts to highlight.
104+
*/
105+
const FEATURED_ENTITIES = [
106+
{ label: 'Kernel', type: 'Class', module: 'core', description: 'Persistent computational entity. Dual-grounded: BFO MaterialEntity + CCO Agent.' },
107+
{ label: 'HotKernel', type: 'Class', module: 'core', description: 'Always-on service kernel with NATS listener and /action/* API.' },
108+
{ label: 'ColdKernel', type: 'Class', module: 'core', description: 'On-demand kernel triggered by filesystem events.' },
109+
{ label: 'InlineKernel', type: 'Class', module: 'core', description: 'Podless browser-side JS kernel — NATS WSS, JWT auth.' },
110+
{ label: 'StaticKernel', type: 'Class', module: 'core', description: 'No process — gateway serves storage/web/ directly.' },
111+
{ label: 'Edge', type: 'Class', module: 'core', description: 'Inter-kernel connection with predicate, NATS subject, and consensus flag.' },
112+
{ label: 'Instance', type: 'Class', module: 'core', description: 'BFO GenDepCont grounded in IAO DataItem. Versioned data artifacts.' },
113+
{ label: 'Action', type: 'Class', module: 'core', description: 'BFO Process grounded in IAO PlanSpecification. Named kernel operations.' },
114+
{ label: 'Project', type: 'Class', module: 'core', description: 'Federated namespace root grounded in CCO Organization.' },
115+
{ label: 'InvocationProcess', type: 'Class', module: 'processes', description: 'Complete lifecycle of a kernel action invocation.' },
116+
{ label: 'ProofRecord', type: 'Class', module: 'proof', description: 'SHA-256 manifest verification with SPIFFE identity binding.' },
117+
{ label: 'Agent', type: 'Class', module: 'rbac', description: 'Autonomous entity with roles, permissions, and governance authority.' },
118+
];
119+
120+
/**
121+
* Ontology-level metadata for the welcome panel overview.
122+
*/
123+
const ONTOLOGY_META = {
124+
name: 'ConceptKernel BFO Ontology',
125+
version: VERSION,
126+
tagline: 'Three loops. Three Description Logic boxes. One Material Entity.',
127+
description: 'An open protocol for autonomous concept governance. Every entity typed against BFO 2020 (ISO 21838-2) with formal IAO/CCO/PROV-O mid-level grounding.',
128+
bfoVersion: '2020 (ISO 21838-2)',
129+
midLevelOntologies: ['IAO', 'CCO', 'PROV-O', 'ValueFlows'],
130+
threeLoops: [
131+
{ name: 'CK Loop', box: 'TBox', description: 'Identity & type definitions', color: '#16a34a' },
132+
{ name: 'TOOL Loop', box: 'RBox', description: 'Capability & executable code', color: '#d97706' },
133+
{ name: 'DATA Loop', box: 'ABox', description: 'Asserted facts & instances', color: '#7c3aed' },
134+
],
135+
};
136+
137+
export {
138+
VERSION, CKP_ONTOLOGY_URLS, CKP_PREFIXES, COLOR_SCHEME,
139+
MODULE_COLORS, MODULE_LABELS, MODULE_ORDER, MODULE_DESCRIPTIONS,
140+
FEATURED_ENTITIES, ONTOLOGY_META
141+
};

‎docs/public/browse/index.html‎

Lines changed: 146 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,156 @@ <h2>Loaded Entities <span class="entity-count-badge" id="entityCountBadge">0</sp
8787

8888
<!-- Main Content -->
8989
<div class="main-content">
90-
<!-- Placeholder -->
91-
<div id="infoPlaceholder" style="display: flex;">
92-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
93-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18V7.875c0-.621.504-1.125 1.125-1.125H6.75" />
94-
</svg>
95-
Select an Entity
96-
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #9ca3af;">Click an entity in the sidebar to view its details.</p>
90+
<!-- Welcome Panel (shown on initial load) -->
91+
<div id="welcomePanel" class="welcome-panel">
92+
<!-- Hero -->
93+
<div class="welcome-hero">
94+
<div class="welcome-hero-badge" id="welcomeVersionBadge">v3.5-alpha6</div>
95+
<h1 class="welcome-hero-title">ConceptKernel BFO Ontology</h1>
96+
<p class="welcome-hero-tagline">Three loops. Three Description Logic boxes. One Material Entity.</p>
97+
<p class="welcome-hero-description">An open protocol for autonomous concept governance. Every entity typed against BFO 2020 (ISO 21838-2) with formal IAO/CCO/PROV-O mid-level grounding.</p>
98+
</div>
99+
100+
<!-- Live Stats Bar -->
101+
<div class="welcome-stats" id="welcomeStats">
102+
<div class="welcome-stat">
103+
<span class="welcome-stat-value" id="statModules">7</span>
104+
<span class="welcome-stat-label">Modules</span>
105+
</div>
106+
<div class="welcome-stat">
107+
<span class="welcome-stat-value" id="statClasses">--</span>
108+
<span class="welcome-stat-label">Classes</span>
109+
</div>
110+
<div class="welcome-stat">
111+
<span class="welcome-stat-value" id="statProperties">--</span>
112+
<span class="welcome-stat-label">Properties</span>
113+
</div>
114+
<div class="welcome-stat">
115+
<span class="welcome-stat-value" id="statIndividuals">--</span>
116+
<span class="welcome-stat-label">Individuals</span>
117+
</div>
118+
<div class="welcome-stat">
119+
<span class="welcome-stat-value" id="statTotal">--</span>
120+
<span class="welcome-stat-label">Total Entities</span>
121+
</div>
122+
</div>
123+
124+
<!-- Three Loops (DL Boxes) -->
125+
<div class="welcome-section">
126+
<h2 class="welcome-section-title">Three Loops as Description Logic Boxes</h2>
127+
<div class="welcome-loops">
128+
<div class="welcome-loop" style="border-left-color: #16a34a;">
129+
<div class="welcome-loop-header">
130+
<span class="welcome-loop-badge" style="background: #16a34a;">TBox</span>
131+
<strong>CK Loop</strong>
132+
</div>
133+
<p>Identity & type definitions. conceptkernel.yaml, ontology.yaml, rules.shacl</p>
134+
</div>
135+
<div class="welcome-loop" style="border-left-color: #d97706;">
136+
<div class="welcome-loop-header">
137+
<span class="welcome-loop-badge" style="background: #d97706;">RBox</span>
138+
<strong>TOOL Loop</strong>
139+
</div>
140+
<p>Capability & executable code. tool/processor, language runtime</p>
141+
</div>
142+
<div class="welcome-loop" style="border-left-color: #7c3aed;">
143+
<div class="welcome-loop-header">
144+
<span class="welcome-loop-badge" style="background: #7c3aed;">ABox</span>
145+
<strong>DATA Loop</strong>
146+
</div>
147+
<p>Asserted facts & instances. storage/instances, proof, ledger</p>
148+
</div>
149+
</div>
150+
</div>
151+
152+
<!-- Module Overview Cards -->
153+
<div class="welcome-section">
154+
<h2 class="welcome-section-title">Ontology Modules</h2>
155+
<div class="welcome-modules" id="welcomeModules">
156+
<!-- Populated by JS after ontology load -->
157+
</div>
158+
</div>
159+
160+
<!-- Featured Entities -->
161+
<div class="welcome-section">
162+
<h2 class="welcome-section-title">Key Concepts</h2>
163+
<div class="welcome-featured" id="welcomeFeatured">
164+
<!-- Populated by JS after ontology load -->
165+
</div>
166+
</div>
167+
168+
<!-- Ontology Layering -->
169+
<div class="welcome-section">
170+
<h2 class="welcome-section-title">Ontology Layering Strategy</h2>
171+
<div class="welcome-layers">
172+
<div class="welcome-layer" data-layer="0">
173+
<div class="welcome-layer-label">Layer 0</div>
174+
<div class="welcome-layer-content">
175+
<strong>BFO 2020</strong> <span class="welcome-layer-note">ISO 21838-2 — foundational categories</span>
176+
</div>
177+
</div>
178+
<div class="welcome-layer-arrow">&#x25BC;</div>
179+
<div class="welcome-layer" data-layer="0.5">
180+
<div class="welcome-layer-label">Layer 0.5</div>
181+
<div class="welcome-layer-content">
182+
<strong>IAO + CCO + PROV-O + ValueFlows</strong> <span class="welcome-layer-note">Mid-level ontologies for agents, artifacts, provenance, economics</span>
183+
</div>
184+
</div>
185+
<div class="welcome-layer-arrow">&#x25BC;</div>
186+
<div class="welcome-layer" data-layer="1">
187+
<div class="welcome-layer-label">Layer 1</div>
188+
<div class="welcome-layer-content">
189+
<strong>CKP v3.5-alpha6</strong> <span class="welcome-layer-note">7 modules — Kernel, Edge, Instance, Action, Process, Proof, RBAC</span>
190+
</div>
191+
</div>
192+
<div class="welcome-layer-arrow">&#x25BC;</div>
193+
<div class="welcome-layer" data-layer="2">
194+
<div class="welcome-layer-label">Layer 2</div>
195+
<div class="welcome-layer-content">
196+
<strong>Per-Kernel Domain Schemas</strong> <span class="welcome-layer-note">ontology.yaml + rules.shacl per kernel</span>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
202+
<!-- Quick Links -->
203+
<div class="welcome-section">
204+
<h2 class="welcome-section-title">Quick Links</h2>
205+
<div class="welcome-links">
206+
<a href="https://conceptkernel.org/v3.5-alpha6/" target="_blank" rel="noopener" class="welcome-link">
207+
<strong>Specification</strong>
208+
<span>Full CKP v3.5-alpha6 spec</span>
209+
</a>
210+
<a href="https://conceptkernel.org/v3.5-alpha6/three-loops" target="_blank" rel="noopener" class="welcome-link">
211+
<strong>Three Loops</strong>
212+
<span>DL box mapping explained</span>
213+
</a>
214+
<a href="https://conceptkernel.org/v3.5-alpha6/ontology-layering" target="_blank" rel="noopener" class="welcome-link">
215+
<strong>Ontology Layering</strong>
216+
<span>BFO to per-kernel import chain</span>
217+
</a>
218+
<a href="https://conceptkernel.org/v3.5-alpha6/taxonomy" target="_blank" rel="noopener" class="welcome-link">
219+
<strong>System Kernels</strong>
220+
<span>14 kernel catalog & archetypes</span>
221+
</a>
222+
<a href="https://conceptkernel.org/v3.5-alpha6/compliance" target="_blank" rel="noopener" class="welcome-link">
223+
<strong>Compliance</strong>
224+
<span>13 BFO-grounded checks</span>
225+
</a>
226+
<a href="https://conceptkernel.org/v3.5-alpha6/patterns" target="_blank" rel="noopener" class="welcome-link">
227+
<strong>Patterns</strong>
228+
<span>8 implementation patterns</span>
229+
</a>
230+
</div>
231+
</div>
97232
</div>
98233

99234
<!-- Info Panel (hidden by default) -->
100235
<div id="infoPanel" style="display: none;">
101-
<div id="breadcrumbs"></div>
236+
<div class="info-panel-nav">
237+
<button id="backToWelcome" class="back-to-welcome" type="button">&#8592; Overview</button>
238+
<div id="breadcrumbs"></div>
239+
</div>
102240
<h1 id="infoLabel"></h1>
103241
<div id="infoUri"></div>
104242

0 commit comments

Comments
 (0)