Merge pull request #2 from Coding-Autopilot-System/codex/implement-features-as-per-codex-instructions-1lu8m6

Embed mermaid visuals in core docs

Author: OgeonX-Ai

CODEX_INSTRUCTIONS.md

@@ -24,6 +24,7 @@ Tone: crisp, enterprise, practical. Avoid buzzword soup. Prefer clear boundaries
 - Include runbooks, SLAs/SLOs, incident response playbooks, change management, exception handling, risk acceptance.
 - Include a CI workflow that checks markdown, mermaid syntax, and link validity (best-effort).
 - Everything must be public-safe: no secrets, no internal URLs, no real tenant IDs.
+- Every major document must be complete, non-placeholder, and cross-linked to related docs and diagrams.
 
 ## 1) Output format requirements
 - Use Markdown for documentation (`docs/`).
@@ -32,6 +33,7 @@ Tone: crisp, enterprise, practical. Avoid buzzword soup. Prefer clear boundaries
 - Use JSON for Azure Policy stubs.
 - Use HTML/CSS for `/site` static docs with a simple nav and search (JS optional).
 - Provide consistent naming, cross-links, and an index.
+- Avoid inline newline escapes like `\n` in Markdown lists.
 
 ## 2) Repo name + branding
 Repo title: `cloud-security-service-model`
@@ -167,6 +169,23 @@ Tagline: “A pragmatic, enterprise Cloud Security service operating model (Azur
       okrs.md
       kpi-cadence.md
 
+  docs/
+    site/
+      README.md
+      index.html
+      assets/
+        style.css
+        app.js
+      pages/
+        overview.html
+        service-definition.html
+        operating-model.html
+        architecture.html
+        kpis.html
+        roadmap.html
+        runbooks.html
+        templates.html
+        hybrid.html
   site/
     README.md
     index.html
@@ -238,6 +257,7 @@ Tagline: “A pragmatic, enterprise Cloud Security service operating model (Azur
   - privileged access exposure (PIM activations, standing admins)
   - misconfiguration trend rate
   - backup restore test success rate
+- Add a brief SLA/SLO section with targets for core service capabilities.
 - Include a sample dashboard mock (markdown table) and a “metrics anti-patterns” section
 
 ### docs/08-roadmap-and-maturity.md
@@ -381,6 +401,7 @@ Keep it stable and not overcomplicated.
 - docs index in README
 - Each doc includes “Related docs” at bottom
 - Diagrams referenced from relevant docs
+- Each diagram should be referenced by at least one doc and the related doc should mention the diagram.
 
 ## 12) Quality bar
 - No fluff. Every section must answer: “what is it, who owns it, how does it work, how is success measured, how does it improve”.
@@ -392,6 +413,7 @@ Keep it stable and not overcomplicated.
   - “Evidence” (audit artifacts)
 - Prefer explicit tables (RACI, KPIs, cadences, responsibilities).
 - Include “anti-patterns” sections to show maturity (e.g., security as blocker, PDF policies, hero culture).
+- Ensure Markdown content is lint-friendly and free of formatting artifacts.
 
 ## 13) Execution steps (what you should do now)
 1) Create all files and folders above.

README.md

@@ -47,6 +47,7 @@ interfaces, measurable outcomes, and lifecycle management across Azure and hybri
 - Runbooks: [`docs/20-runbooks/README.md`](docs/20-runbooks/README.md)
 - Templates: [`docs/21-templates/README.md`](docs/21-templates/README.md)
 - Diagrams: [`docs/22-diagrams/README.md`](docs/22-diagrams/README.md)
+- Static site: [`docs/site/index.html`](docs/site/index.html)
 - Static site: [`site/index.html`](site/index.html)
 
 ## Service lifecycle (preview)
@@ -68,6 +69,7 @@ graph LR
   [`docs/00-executive-overview.md`](docs/00-executive-overview.md).
 
 ## Using the static site
+Open [`docs/site/index.html`](docs/site/index.html) to browse a minimal HTML version of the content with navigation and search.
 Open [`site/index.html`](site/index.html) to browse a minimal HTML version of the content with navigation and search.
 
 ## Repo structure

docs/00-executive-overview.md

@@ -30,6 +30,17 @@ predictability.
 - Risk & audit readiness
 - Hybrid posture management
 
+## Service lifecycle (visual)
+```mermaid
+flowchart LR
+  A[Discover Demand] --> B[Define Service]
+  B --> C[Design Controls]
+  C --> D[Build Controls as Code]
+  D --> E[Operate & Monitor]
+  E --> F[Measure & Improve]
+  F --> B
+```
+
 ## Documentation index
 - [`01-service-definition.md`](01-service-definition.md)
 - [`02-service-catalog.md`](02-service-catalog.md)

docs/04-reference-architecture.md

@@ -17,6 +17,18 @@ logging/monitoring services. It supports Azure and hybrid assets via Azure Arc.
 3. Logs are forwarded to SIEM for detection and response.
 4. Evidence is stored and mapped to controls.
 
+## Shared responsibility (visual)
+```mermaid
+flowchart LR
+  A[Cloud Provider] --> B[Physical Security]
+  A --> C[Hypervisor]
+  A --> D[Core Services]
+  E[Customer] --> F[Identity]
+  E --> G[Data]
+  E --> H[Configuration]
+  E --> I[Applications]
+```
+
 ## Diagram
 Shared responsibility overview: [`22-diagrams/shared-responsibility.mmd`](22-diagrams/shared-responsibility.mmd)
 

docs/05-operating-model.md

@@ -8,6 +8,15 @@ The Cloud Security Service operates in a continuous lifecycle:
 - **Run:** monitoring, incident response, compliance reporting.
 - **Improve:** retrospectives, KPI review, maturity evolution.
 
+## Operating model (visual)
+```mermaid
+flowchart LR
+  A[Plan] --> B[Build]
+  B --> C[Run]
+  C --> D[Improve]
+  D --> A
+```
+
 ## Diagram
 See the lifecycle model diagram: [`22-diagrams/security-operating-model.mmd`](22-diagrams/security-operating-model.mmd)
 

docs/16-logging-monitoring-siem.md

@@ -13,6 +13,16 @@
 ## Hybrid logging
 Azure Arc-enabled servers forward logs to centralized SIEM with consistent tags and retention.
 
+## Hybrid logging architecture (visual)
+```mermaid
+flowchart LR
+  A[Azure Resources] --> B[Log Analytics]
+  C[Arc-enabled Servers] --> B
+  D[Azure Local] --> E[Log Forwarder]
+  E --> B
+  B --> F[SIEM]
+```
+
 ## Diagram
 Hybrid logging architecture: [`22-diagrams/hybrid-logging-architecture.mmd`](22-diagrams/hybrid-logging-architecture.mmd)
 

docs/19-devsecops-pipelines.md

@@ -37,6 +37,16 @@ steps:
     run: ./tools/policy-validate.sh
 ```
 
+## Policy-as-code loop (visual)
+```mermaid
+flowchart LR
+  A[Author] --> B[Test]
+  B --> C[Deploy]
+  C --> D[Monitor Drift]
+  D --> E[Fix]
+  E --> A
+```
+
 ## Diagram
 Policy-as-code lifecycle: [`22-diagrams/policy-as-code-loop.mmd`](22-diagrams/policy-as-code-loop.mmd)
 

docs/site/README.md

@@ -0,0 +1,3 @@
+# Static Site
+
+Open `index.html` to view a lightweight HTML version of the documentation with navigation and search.

docs/site/assets/app.js

@@ -0,0 +1,43 @@
+const pages = [
+  { title: "Overview", href: "pages/overview.html" },
+  { title: "Service Definition", href: "pages/service-definition.html" },
+  { title: "Operating Model", href: "pages/operating-model.html" },
+  { title: "Architecture", href: "pages/architecture.html" },
+  { title: "KPIs", href: "pages/kpis.html" },
+  { title: "Roadmap", href: "pages/roadmap.html" },
+  { title: "Runbooks", href: "pages/runbooks.html" },
+  { title: "Templates", href: "pages/templates.html" },
+  { title: "Hybrid", href: "pages/hybrid.html" }
+];
+
+function buildNav() {
+  const nav = document.getElementById("nav-links");
+  pages.forEach((page) => {
+    const link = document.createElement("a");
+    link.href = page.href;
+    link.textContent = page.title;
+    nav.appendChild(link);
+  });
+}
+
+function setupSearch() {
+  const input = document.getElementById("search");
+  if (!input) return;
+  input.addEventListener("input", (event) => {
+    const query = event.target.value.toLowerCase();
+    const results = pages.filter((page) =>
+      page.title.toLowerCase().includes(query)
+    );
+    const nav = document.getElementById("nav-links");
+    nav.innerHTML = "";
+    results.forEach((page) => {
+      const link = document.createElement("a");
+      link.href = page.href;
+      link.textContent = page.title;
+      nav.appendChild(link);
+    });
+  });
+}
+
+buildNav();
+setupSearch();

docs/site/assets/style.css

@@ -0,0 +1,80 @@
+:root {
+  --bg: #f7f9fb;
+  --text: #1f2933;
+  --nav: #ffffff;
+  --accent: #0b5cab;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+header {
+  background: var(--nav);
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e0e6ed;
+}
+
+.container {
+  display: flex;
+  min-height: calc(100vh - 60px);
+}
+
+nav {
+  width: 260px;
+  background: var(--nav);
+  border-right: 1px solid #e0e6ed;
+  padding: 1rem;
+}
+
+main {
+  flex: 1;
+  padding: 2rem;
+}
+
+nav a {
+  display: block;
+  color: var(--text);
+  text-decoration: none;
+  padding: 0.4rem 0;
+}
+
+nav a:hover {
+  color: var(--accent);
+}
+
+.search {
+  margin-bottom: 1rem;
+}
+
+.search input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccd6e0;
+  border-radius: 4px;
+}
+
+.card {
+  background: white;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid #e0e6ed;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 900px) {
+  .container {
+    flex-direction: column;
+  }
+
+  nav {
+    width: 100%;
+  }
+}