Bioscience QMS Work Order System — Website Content Plan

Classification: Internal — Strategy
Date: 2026-02-13
Version: 1.1 Purpose: Organize 83 artifacts (57 markdown + 26 JSX dashboards) into a navigable website for investors, advisors, engineers, and compliance officers

1. Site Architecture

CODITECT — Bioscience QMS Work Order System
│
├── Home (Landing)
│   ├── Hero: Value proposition + 3 key metrics
│   ├── Problem/Solution overview
│   ├── Interactive demo (embedded JSX)
│   └── CTA: Choose your path →
│
├── For Investors
│   ├── Executive Summary
│   ├── Market Opportunity
│   ├── Business Case & ROI
│   ├── Competitive Positioning
│   ├── Revenue Model
│   ├── Business Model & Unit Economics (60)
│   ├── One-Pager Brief (61)
│   └── Interactive Dashboards
│       ├── Executive Decision Brief (44)
│       ├── Market Impact Analyzer (47)
│       ├── Investor Pitch Dashboard (50)
│       └── Business Case Calculator (51)
│
├── For Engineers
│   ├── Quick Start Guide (1-2-3)
│   ├── System Architecture
│   │   ├── C4 Model (Context → Code)
│   │   ├── Data Model (ERD + Prisma)
│   │   ├── State Machine + Guards
│   │   └── Mermaid Diagrams
│   ├── API & Events
│   │   ├── API Endpoint Specification (71)
│   │   ├── Event Catalog (73)
│   │   └── Integration & API Strategy (67)
│   ├── Agent Orchestration
│   │   ├── 7-Node Architecture
│   │   ├── Message Contracts
│   │   └── Circuit Breakers
│   ├── Deployment & Operations
│   │   ├── Deployment Architecture (72)
│   │   ├── Testing Strategy (65)
│   │   ├── Versioning & Evolution (69)
│   │   └── Operational Readiness (66)
│   ├── Data & Security
│   │   ├── Data Architecture & Privacy (63)
│   │   └── Security Architecture (64)
│   ├── Technical Design Document
│   ├── Architecture Decision Records
│   └── Interactive Dashboards
│       ├── WO Unified System Dashboard (33)
│       ├── State Machine Visualizer (34)
│       ├── Data Model Explorer (35/36)
│       ├── Agent Orchestration Visualizer (39)
│       └── Implementation Planner (55)
│
├── For Compliance
│   ├── Regulatory Overview
│   ├── FDA 21 CFR Part 11 Mapping
│   ├── HIPAA Technical Safeguards
│   ├── SOC 2 Trust Service Criteria
│   ├── RBAC & SOD Rules
│   ├── E-Signature Architecture
│   ├── CAPA Workflow (74)
│   ├── Validation Protocols — IQ/OQ/PQ (70)
│   ├── Audit Readiness Guide (75)
│   └── Interactive Dashboards
│       ├── Comprehensive Compliance Dashboard (40)
│       ├── Compliance Value Chain (42)
│       ├── Compliance ROI Calculator (43)
│       └── Regulatory Tracker (41)
│
├── Product
│   ├── Product Roadmap
│   ├── Feature Overview
│   ├── User Experience & Journeys (68)
│   ├── Unified Execution Plan (62)
│   ├── CODITECT Integration
│   ├── Competitive Comparison
│   └── Interactive Dashboards
│       ├── Strategic Fit Dashboard (45)
│       ├── Competitive Comparison (54)
│       ├── Product Roadmap Visualizer (56)
│       ├── CODITECT Impact Dashboard (52)
│       └── Project Command Center (60)
│
├── Reference
│   ├── Glossary (400+ terms)
│   ├── Document Inventory (83 artifacts)
│   ├── Key Metrics Cross-Reference
│   ├── Gap Closure Status (G01–G28)
│   ├── Impact Register & Checklist (78)
│   └── Version History
│
├── Build & Generate
│   ├── Competitive Analysis Prompt (76)
│   ├── GTM Strategy Prompt (77)
│   ├── Universal Document Generator (79)
│   ├── Website Build Prompts (57)
│   └── Gap Closure Prompts (58)
│
├── Research
│   ├── Work Order Basics (R1)
│   └── Bioscience QMS Process (R2)
│
├── Configuration
│   └── CODITECT System Prompt v8 (59)
│
└── Contact / Get Started
    ├── Demo request
    ├── Technical deep-dive request
    └── Investor inquiry

1.2 URL Structure

/                                    → Landing page
/investors/                          → Investor hub
/investors/executive-summary         → Doc 01/02
/investors/market-opportunity        → Docs 05/06/07
/investors/business-case             → Doc 03
/investors/competitive-position      → Doc 08
/investors/revenue-model             → Docs 09/10
/investors/dashboards/executive      → JSX 44
/investors/dashboards/market         → JSX 47
/investors/dashboards/pitch          → JSX 50
/investors/dashboards/calculator     → JSX 51
/investors/business-model            → Doc 60
/investors/one-pager                 → Doc 61

/engineers/                          → Engineering hub
/engineers/quick-start               → Doc 28
/engineers/architecture/c4           → Doc 14
/engineers/architecture/data-model   → Doc 16
/engineers/architecture/state-machine → Docs 18/19
/engineers/architecture/diagrams     → Doc 15
/engineers/agents/orchestration      → Docs 24/25
/engineers/agents/messages           → Doc 26
/engineers/tdd                       → Doc 13
/engineers/adrs                      → Doc 23
/engineers/dashboards/system         → JSX 33
/engineers/dashboards/state-machine  → JSX 34
/engineers/dashboards/data-model     → JSX 35/36
/engineers/dashboards/agents         → JSX 39
/engineers/dashboards/planner        → JSX 55
/engineers/operations/data-arch      → Doc 63
/engineers/operations/security       → Doc 64
/engineers/operations/testing        → Doc 65
/engineers/operations/readiness      → Doc 66
/engineers/operations/integration    → Doc 67
/engineers/operations/ux-journeys    → Doc 68
/engineers/operations/versioning     → Doc 69
/engineers/operations/validation     → Doc 70
/engineers/operations/api-spec       → Doc 71
/engineers/operations/deployment     → Doc 72
/engineers/operations/events         → Doc 73

/compliance/                         → Compliance hub
/compliance/overview                 → Doc 20
/compliance/fda-part-11              → Part 11 section from docs 20/22
/compliance/hipaa                    → HIPAA section
/compliance/soc2                     → SOC 2 section
/compliance/rbac                     → Docs 21/22
/compliance/e-signatures             → Doc 17
/compliance/dashboards/comprehensive → JSX 40
/compliance/dashboards/value-chain   → JSX 42
/compliance/dashboards/roi           → JSX 43
/compliance/dashboards/tracker       → JSX 41
/compliance/capa                     → Doc 74
/compliance/validation-protocols     → Doc 70
/compliance/audit-readiness          → Doc 75

/product/                            → Product hub
/product/roadmap                     → Doc 11
/product/features                    → Feature extraction from all docs
/product/coditect-integration        → Doc 27
/product/competitive                 → Doc 08
/product/dashboards/strategic-fit    → JSX 45
/product/dashboards/comparison       → JSX 54
/product/dashboards/roadmap          → JSX 56
/product/dashboards/impact           → JSX 52
/product/dashboards/command-center   → JSX 60
/product/execution-plan              → Doc 62

/reference/glossary                  → Doc 29
/reference/inventory                 → Doc 30
/reference/metrics                   → Cross-reference table

/build/website-prompts               → Doc 57
/build/gap-closure                   → Doc 58
/build/competitive-prompt            → Doc 76
/build/gtm-prompt                    → Doc 77
/build/impact-register               → Doc 78
/build/doc-generator                 → Doc 79

/research/work-order-basics          → Research R1
/research/bioscience-qms-process     → Research R2

/config/system-prompt                → Doc 59

2. Page Templates

2.1 Landing Page

Hero Section

Headline: "Autonomous Change Control for Regulated Industries"
Subhead: "The first AI platform where agents can execute compliant work orders — with human approval gates built in, not bolted on."
Three stats: "$3.5B market" · "70-80% faster change cycles" · "60% token cost reduction"
CTA buttons: "For Investors →" | "For Engineers →" | "For Compliance →"

Problem/Solution Grid

3 pain cards: Manual change control (15-45 days), CSV documentation burden (120-400 hours), AI locked out of regulated work
3 solution cards: 9-state machine with guards, 7 AI agents with human checkpoints, Part 11 e-signatures baked in

Interactive Demo

Embedded WO State Machine Visualizer (JSX 34) with "Try the simulator →" CTA
Alternative: Compliance Dashboard (JSX 40) overview tab showing audit readiness score ring

Social Proof / Credibility

Google AI Accelerator badge
Regulatory framework logos (FDA, HIPAA, SOC 2)
Key architecture stats (20+ entities, 9 states, 7 agents, 235+ glossary terms)

2.2 Hub Pages (Investors/Engineers/Compliance/Product)

Each hub page follows this template:

Hero — Role-specific headline and 2-3 key metrics
Quick Navigation — Card grid linking to sub-pages
Featured Dashboard — Embedded interactive JSX relevant to this audience
Document List — Ordered reading path with time estimates
Key Takeaways — 3-5 bullet summary of most important facts

2.3 Document Pages

Each markdown artifact renders as a documentation page:

Breadcrumb — Home > Category > Document
Title + Metadata — Document number, version, date, classification
Table of Contents — Auto-generated from headers
Content — Rendered markdown with syntax highlighting for code blocks
Related Documents — Cross-references to other relevant artifacts
Next/Previous — Sequential navigation within category

2.4 Dashboard Pages

Each JSX dashboard renders as a full-width interactive page:

Breadcrumb — Home > Category > Dashboards > Dashboard Name
Description — 2-3 sentence context for what this dashboard shows
Full-Width Dashboard — Rendered JSX component
Source Data — Link to underlying markdown artifacts
Export Options — Download data as CSV/JSON (future)

3. Content Strategy

3.1 Content Hierarchy

Priority	Content Type	Audience	Update Frequency
P0	Executive Summary	All	Per milestone
P0	Compliance Dashboards	Compliance, Investors	Per regulation change
P1	Architecture Docs	Engineers	Per sprint
P1	Market Analysis	Investors, Product	Quarterly
P2	Quick Start Guide	Engineers	Per release
P2	Glossary	All	Per artifact update
P3	Competitive Analysis	Product, Investors	Quarterly
P3	Roadmap	All	Monthly

3.2 Key Narratives by Audience

Investors: "CODITECT occupies the only empty quadrant in regulated change control — high compliance + high AI capability. The $3.5B market is underserved by incumbents who can't add real AI and dev tools that can't add real compliance. Unit economics (LTV:CAC 18.7×, 78% GM, 7-month payback) validate the model."

Engineers: "The WO system is a 9-state FSM with composable TypeScript guards, a 20+ entity PostgreSQL data model with RLS multi-tenancy, and a 7-node agent orchestration graph with typed message contracts and circuit breakers. It's designed to be extended, not replaced."

Compliance Officers: "Every state transition maps to specific FDA, HIPAA, and SOC 2 requirements. Human approval at PENDING_REVIEW→APPROVED is architecturally non-negotiable — enforced at guard, DB, and API levels. Immutable audit trail captures both agent and human identity for every action."

Product/GTM: "Phase 1 targets mid-tier biotech ($8-15K/mo), Phase 2 expands to MedDev/CRO ($15-40K/mo), Phase 3 reaches Top-50 pharma + fintech ($40-150K/mo). The compliance moat (regulatory certification + agent-compliance integration) creates very strong switching costs ($200K-$2M)."

3.3 SEO / Discovery Keywords

Primary: autonomous change control, AI work order management, FDA 21 CFR Part 11 compliance software, regulated industry AI platform, bioscience QMS

Secondary: computer system validation automation, HIPAA compliant AI agents, SOC 2 change management, pharmaceutical work order system, medical device change control

Long-tail: AI agents for FDA regulated software, automated audit trail generation Part 11, separation of duties database enforcement, multi-agent orchestration regulated industries

4. Technical Implementation

4.1 Recommended Stack

Layer	Technology	Rationale
Framework	Next.js 14+ (App Router)	SSR for SEO, React for JSX dashboards, file-based routing matches URL structure
Content	MDX	Render markdown artifacts with embedded React components
Styling	Tailwind CSS	Already used in all JSX dashboards — zero migration
Search	Algolia DocSearch or Pagefind	Full-text search across 83 artifacts + glossary
Hosting	Vercel or Cloudflare Pages	Edge deployment, preview deployments for content PRs
Analytics	Plausible or PostHog	Privacy-friendly, track reading paths and dashboard engagement
Auth	Clerk or NextAuth	Gate investor materials and engineering docs as needed

4.2 Content Pipeline

/content
├── /docs                    ← Markdown artifacts (57 files across 10 directories)
│   ├── /executive           ← 01-04, 60-61
│   ├── /market              ← 05-10
│   ├── /product             ← 11, 62
│   ├── /architecture        ← 12-17
│   ├── /state-machine       ← 18-19
│   ├── /compliance          ← 20-23
│   ├── /agents              ← 24-26
│   ├── /reference           ← 27-31
│   └── /operations          ← 63-75 (13 files)
├── /dashboards              ← JSX artifacts (26 files across 4 directories)
│   ├── /system              ← 32-39 (8 files)
│   ├── /business            ← 44-51 (8 files)
│   ├── /compliance          ← 40-43 (4 files)
│   └── /planning            ← 52-56, 60 (6 files)
├── /prompts                 ← Build & generation prompts (57-58, 76-79)
├── /research                ← Source research materials (R1, R2)
├── /config
│   ├── 59-coditect-system-prompt-v8.md
│   ├── navigation.json      ← Site navigation tree
│   ├── reading-paths.json   ← Audience-specific paths
│   └── cross-references.json← Document relationships
└── /public
    ├── /images              ← Architecture diagrams (exported)
    └── /downloads           ← PDF exports of key docs

4.3 MDX Page Template

// pages/engineers/architecture/state-machine.mdx
import StateMachineVisualizer from '@/dashboards/34-wo-state-machine-visualizer'

export const meta = {
  number: 18,
  title: 'State Machine Specification',
  category: 'Architecture',
  audience: ['engineers'],
  readTime: '8 min',
  related: [19, 34, 37]
}

# State Machine Specification

{/* Markdown content from artifact 18 */}

## Interactive Visualizer

<StateMachineVisualizer />

4.4 Dashboard Embedding

All JSX artifacts are already self-contained React components with default exports. Integration requires:

Import as dynamic component (avoid SSR for interactive elements)
Wrap in container with max-w-6xl mx-auto (already in each component)
Add Lucide React icons package (already imported)
Ensure Tailwind config includes all utility classes used

import dynamic from 'next/dynamic'
const Dashboard = dynamic(
  () => import('@/dashboards/40-comprehensive-compliance-dashboard'),
  { ssr: false }
)

4.5 Existing Viewer Implementation

A local development viewer is already operational for previewing all 26 JSX dashboards:

Component	Technology	Purpose
Dev Server	Vite 7.3.1	Hot-reload development with `@vitejs/plugin-react`
Renderer	React 19.2.4	`React.lazy()` + `Suspense` for code-split dashboard loading
Styling	Tailwind CSS v4	`@theme` directive with 12 accent color groups (48 CSS custom properties)
Dark Mode	CSS class toggle	`.dark` on `documentElement` with `prefers-color-scheme` detection
Layout	CODITECT branded	Header/footer with logo, sidebar navigation, responsive grid

Running locally: npx vite from the project root serves all dashboards at http://localhost:5173/.

All 26 dashboards have been converted from hardcoded hex colors to Tailwind v4 CSS theme tokens (var(--color-*)) for consistent theming. This viewer serves as a prototype for the full website build — the component embedding pattern (React.lazy + dynamic import) can carry forward to the Next.js site.

5. Phase Plan

Phase 1: Documentation Site (Week 1-2)

Scope: Static site with all markdown artifacts rendered, basic navigation, glossary search Deliverables:

Next.js project with MDX rendering
All 57 markdown artifacts as pages
Navigation tree matching URL structure
Glossary with search functionality
Reading path recommendations on each hub page
Mobile-responsive layout

Phase 2: Interactive Dashboards (Week 3-4)

Scope: Embed all 26 JSX dashboards as interactive components Deliverables:

Dynamic imports for all dashboard components
Dashboard gallery pages per category
Full-width rendering with proper Tailwind support
Print-friendly mode for dashboard screenshots
Share/link functionality for specific dashboard tabs

Phase 3: Audience Personalization (Week 5-6)

Scope: Role-based navigation, gated content, analytics
Deliverables:

Auth integration for investor access
Role-based content filtering
Reading progress tracking
Engagement analytics dashboard
Document feedback mechanism (thumbs up/down)
PDF export for key documents

Phase 4: Living Documentation (Ongoing)

Scope: Automated updates as system evolves
Deliverables:

GitHub/Git-based content workflow
Preview deployments for content PRs
Automated glossary term extraction
Dashboard data refresh from live system
Changelog page tracking document versions
API for programmatic content access

6. Metrics & Success Criteria

Metric	Target	Measurement
Time to first value (investor)	< 5 min to Executive Summary	Analytics
Time to first value (engineer)	< 15 min to running quick start	Analytics
Content coverage	100% of 83 artifacts published	Inventory check
Dashboard engagement	> 60% of visitors interact with at least 1 dashboard	Analytics
Glossary lookups	> 50 unique terms accessed/week	Search analytics
Reading path completion	> 30% of visitors complete their role path	Progress tracking
Mobile accessibility	Score 95+ on Lighthouse	Automated testing
Search effectiveness	< 2 searches to find relevant content	Search analytics

Last updated: 2026-02-14 Maintained by: AZ1.AI Inc. / CODITECT Platform Team

1. Site Architecture​

1.1 Primary Navigation​

1.2 URL Structure​

2. Page Templates​

2.1 Landing Page​

2.2 Hub Pages (Investors/Engineers/Compliance/Product)​

2.3 Document Pages​

2.4 Dashboard Pages​

3. Content Strategy​

3.1 Content Hierarchy​

3.2 Key Narratives by Audience​

3.3 SEO / Discovery Keywords​

4. Technical Implementation​

4.1 Recommended Stack​

4.2 Content Pipeline​

4.3 MDX Page Template​

4.4 Dashboard Embedding​

4.5 Existing Viewer Implementation​

5. Phase Plan​

Phase 1: Documentation Site (Week 1-2)​

Phase 2: Interactive Dashboards (Week 3-4)​

Phase 3: Audience Personalization (Week 5-6)​

Phase 4: Living Documentation (Ongoing)​

6. Metrics & Success Criteria​