diff --git a/CURRENT_STATE.md b/CURRENT_STATE.md index 8bb4540..144ab95 100644 --- a/CURRENT_STATE.md +++ b/CURRENT_STATE.md @@ -144,7 +144,7 @@ report exported. CLI and web inspector. - ✅ Sticky header for better UX on long traces - ✅ Analyze button shows "Analyzing…" and disables during parsing -### Playwright Smoke Tests (in progress — this PR) +### Playwright Smoke Tests (PR #45) - ✅ `playwright.config.ts` — chromium, auto-start dev server - ✅ Landing page tests: page loads, hero, CTA links, features, footer @@ -152,6 +152,16 @@ report exported. CLI and web inspector. - ✅ Inspector tests: empty state, sample scenario → timeline, failures, event click → message inspector, export button, invalid input error - ✅ CI workflow updated: install browsers + run E2E after unit tests +### Docs Content (in progress — this PR) + +- ✅ `/docs` index with navigation sidebar +- ✅ `/docs/quickstart` — install, inspect, report, scenario, web inspector, programmatic use +- ✅ `/docs/glossary` — OCPP, CSMS, Charge Point, Connector, Transaction, Call, CallResult, CallError, idTag, Trace, Direction +- ✅ `/docs/architecture` — package structure, dependency graph, data flow, browser-local processing, tech stack +- ✅ `/docs/trace-format` — JSON Object, JSONL, bare array, message structure, timestamps, limits, direction inference +- ✅ `/docs/cli` — install, inspect, report, scenario list, scenario run, options, security +- ✅ `/docs/scenarios` — 5 built-in scenarios, failure detection rules, running scenarios, synthetic data + ## What's Next 1. **Issue #20** → complete (PR #33): data model + parser + normalizer @@ -164,8 +174,8 @@ report exported. CLI and web inspector. 8. **Issue #27** → complete (PR #43): Landing page (hero, features, architecture, quick start, footer) 9. **Issue #28** → complete (PR #43): Inspector (trace input + timeline + message inspector + failures + report export) 10. **Issue #29** → complete (PR #44): Inspector polish (loading states, responsive, keyboard nav) -11. **Issue #30** (this PR) → complete: Playwright smoke tests -12. **Issue #31**: Docs content (quickstart, glossary, architecture, CLI reference, API reference) +11. **Issue #30** → complete (PR #45): Playwright smoke tests +12. **Issue #31** (this PR) → complete: Docs content (quickstart, glossary, architecture, trace format, CLI reference, scenarios) 13. **Issue #32**: Release v0.1.0 ## Known Blockers / Decisions Pending diff --git a/apps/web/src/app/docs/architecture/page.tsx b/apps/web/src/app/docs/architecture/page.tsx new file mode 100644 index 0000000..64c0ff2 --- /dev/null +++ b/apps/web/src/app/docs/architecture/page.tsx @@ -0,0 +1,76 @@ +export default function ArchitecturePage() { + return ( +
+

Architecture

+

+ OCPP DebugKit is a modular monorepo with independent packages. Each package can be used + standalone or together. +

+ +

Package Structure

+
+        {`ocpp-debugkit/
+├── packages/
+│   ├── core/          # Data model, parser, normalizer, timeline, failure detection
+│   ├── scenarios/     # Predefined trace scenarios for testing
+│   ├── reporter/      # Report generators (Markdown)
+│   ├── cli/           # Command-line interface
+│   ├── replay/        # Replay engine (v0.2+)
+│   └── react/         # Reusable React components (v0.2+)
+├── apps/
+│   └── web/           # Single Next.js app (landing, inspector, docs)
+└── turbo.json          # Turborepo task pipeline`}
+      
+ +

Dependency Graph

+
+        {`        core          ← everything depends on this
+       /  |  \\
+  scenarios | reporter
+       \\  |  /
+          cli
+          |
+       apps/web`}
+      
+ +

Build Order

+

Packages must be built in dependency order: core → scenarios/reporter → cli → app

+ +

Data Flow

+

The analysis pipeline processes traces in three stages:

+
    +
  1. + ParseparseTrace() accepts JSON Object, JSONL, or bare + array input, validates with Zod schemas, and produces normalized Event{' '} + objects. +
  2. +
  3. + AnalyzebuildSessionTimeline() groups events into + sessions, then detectFailures() checks for known failure patterns (failed + auth, connector fault, station offline). +
  4. +
  5. + ReportgenerateMarkdownReport() produces a human-readable + Markdown report with session overview, timeline, failures, and suggested steps. +
  6. +
+ +

Browser-Local Processing

+

+ All trace processing in the web inspector happens client-side. No trace data is uploaded to + any server. The CSMS/CLI process traces locally. +

+ +

Technology Stack

+ +
+ ); +} diff --git a/apps/web/src/app/docs/cli/page.tsx b/apps/web/src/app/docs/cli/page.tsx new file mode 100644 index 0000000..d5ac5f0 --- /dev/null +++ b/apps/web/src/app/docs/cli/page.tsx @@ -0,0 +1,90 @@ +export default function CliReferencePage() { + return ( +
+

CLI Reference

+

+ The ocpp-debugkit CLI provides commands for inspecting traces, generating + reports, and running scenarios. +

+ +

Installation

+
+        {`npm install -g @ocpp-debugkit/cli`}
+      
+ +

inspect

+

+ Parse and analyze an OCPP trace file. Outputs a summary with events, sessions, failures, and + warnings. +

+
+        {`ocpp-debugkit inspect `}
+      
+

Example:

+
+        {`ocpp-debugkit inspect trace.json`}
+      
+ +

report

+

Generate a Markdown report from an OCPP trace file.

+
+        {`ocpp-debugkit report  [options]`}
+      
+

Options

+ +

Example:

+
+        {`ocpp-debugkit report trace.json --output report.md`}
+      
+ +

scenario list

+

List all available built-in scenarios.

+
+        {`ocpp-debugkit scenario list`}
+      
+ +

scenario run

+

+ Run a built-in scenario through the analysis engine. Compares detected failures against + expected failures and reports pass/fail. +

+
+        {`ocpp-debugkit scenario run `}
+      
+

Example:

+
+        {`ocpp-debugkit scenario run failed-auth`}
+      
+

+ Note: scenario run runs static fixtures through the local + analysis engine only. It is not active endpoint testing, WebSocket simulation, or live + station/CSMS testing. +

+ +

Global Options

+ + +

Security

+ +
+ ); +} diff --git a/apps/web/src/app/docs/glossary/page.tsx b/apps/web/src/app/docs/glossary/page.tsx new file mode 100644 index 0000000..753c89c --- /dev/null +++ b/apps/web/src/app/docs/glossary/page.tsx @@ -0,0 +1,77 @@ +export default function GlossaryPage() { + return ( +
+

Glossary

+

Key OCPP and EV charging terms used throughout this project.

+ +

OCPP

+

+ Open Charge Point Protocol — the communication protocol between EV charging stations (Charge + Points) and charging station management systems (CSMS). OCPP 1.6 JSON is the primary + protocol supported by DebugKit. +

+ +

Charge Point (CP)

+

+ The physical EV charging station. Also referred to as a "station". Communicates + with the CSMS via OCPP. +

+ +

CSMS

+

+ Charging Station Management System — the central server that manages charging stations. Also + referred to as "the backend". +

+ +

Connector

+

+ A physical charging outlet on a charging station. A station may have multiple connectors + (e.g., connector 0 is typically the whole-station connector, connector 1+ are individual + charging outlets). +

+ +

Transaction

+

+ A single charging session, initiated by a StartTransaction request and terminated by a + StopTransaction request. Each transaction has a unique transactionId assigned by the CSMS. +

+ +

Call

+

+ An OCPP message type (MessageTypeId = 2) representing a request from one side to the other. + Format: [2, UniqueId, Action, Payload] +

+ +

CallResult

+

+ An OCPP message type (MessageTypeId = 3) representing a successful response to a Call. + Format: [3, UniqueId, Payload] +

+ +

CallError

+

+ An OCPP message type (MessageTypeId = 4) representing an error response to a Call. Format:{' '} + [4, UniqueId, ErrorCode, ErrorDescription, ErrorDetails] +

+ +

idTag

+

+ An identifier (typically an RFID card or app token) used to authorize a charging session. + The CSMS validates the idTag and returns an authorization status (Accepted, Invalid, etc.). +

+ +

Trace

+

+ A capture of OCPP messages exchanged between a Charge Point and CSMS over a period of time. + Traces are the primary input to DebugKit. +

+ +

Direction

+

+ The direction of an OCPP message: CS_TO_CSMS (station to backend),{' '} + CSMS_TO_CS (backend to station), or + UNKNOWN. +

+
+ ); +} diff --git a/apps/web/src/app/docs/layout.tsx b/apps/web/src/app/docs/layout.tsx new file mode 100644 index 0000000..7dd0bf8 --- /dev/null +++ b/apps/web/src/app/docs/layout.tsx @@ -0,0 +1,44 @@ +import Link from 'next/link'; + +const docPages = [ + { href: '/docs/quickstart', label: 'Quick Start' }, + { href: '/docs/glossary', label: 'Glossary' }, + { href: '/docs/architecture', label: 'Architecture' }, + { href: '/docs/trace-format', label: 'Trace Format' }, + { href: '/docs/cli', label: 'CLI Reference' }, + { href: '/docs/scenarios', label: 'Scenarios' }, +]; + +export default function DocsLayout({ children }: { children: React.ReactNode }) { + return ( +
+
+
+ + OCPP DebugKit + + Docs +
+
+
+ +
+ {children} +
+
+
+ ); +} diff --git a/apps/web/src/app/docs/page.tsx b/apps/web/src/app/docs/page.tsx index 61db396..009d443 100644 --- a/apps/web/src/app/docs/page.tsx +++ b/apps/web/src/app/docs/page.tsx @@ -1,12 +1,33 @@ +import Link from 'next/link'; + export default function DocsPage() { return ( -
-
-

Documentation

-

- Documentation is under construction. -

-
-
+
+

Documentation

+

+ Get started with OCPP DebugKit — open-source DevTools for debugging OCPP charging sessions. +

+ +
); } diff --git a/apps/web/src/app/docs/quickstart/page.tsx b/apps/web/src/app/docs/quickstart/page.tsx new file mode 100644 index 0000000..46d98ce --- /dev/null +++ b/apps/web/src/app/docs/quickstart/page.tsx @@ -0,0 +1,53 @@ +export default function QuickStartPage() { + return ( +
+

Quick Start

+ +

Install the CLI

+
+        {`npm install -g @ocpp-debugkit/cli`}
+      
+ +

Inspect a trace

+

Parse and analyze an OCPP 1.6 JSON trace file:

+
+        {`ocpp-debugkit inspect trace.json`}
+      
+

This outputs a summary with event count, sessions, and detected failures.

+ +

Generate a report

+

Generate a Markdown report from a trace:

+
+        {`ocpp-debugkit report trace.json --output report.md`}
+      
+ +

Run a scenario

+

Run a predefined scenario through the analysis engine:

+
+        {`# List available scenarios
+ocpp-debugkit scenario list
+
+# Run a scenario
+ocpp-debugkit scenario run failed-auth`}
+      
+ +

Use the web inspector

+

+ No installation required — visit the inspector and paste a trace, + upload a file, or select a sample scenario. +

+ +

Use the core library

+

For programmatic use in your own TypeScript/JavaScript project:

+
+        {`import { parseTrace, buildSessionTimeline, detectFailures } from '@ocpp-debugkit/core';
+
+const result = parseTrace(traceString);
+const sessions = buildSessionTimeline(result.events);
+const failures = detectFailures(result.events, sessions);
+
+console.log(\`Found \${failures.length} failures\`);`}
+      
+
+ ); +} diff --git a/apps/web/src/app/docs/scenarios/page.tsx b/apps/web/src/app/docs/scenarios/page.tsx new file mode 100644 index 0000000..c41f054 --- /dev/null +++ b/apps/web/src/app/docs/scenarios/page.tsx @@ -0,0 +1,103 @@ +export default function ScenariosPage() { + return ( +
+

Scenarios

+

+ Scenarios are predefined trace fixtures that test the analysis engine. Each scenario has a + trace and a list of expected failures. +

+ +

Built-in Scenarios

+

DebugKit v0.1 includes 5 scenarios:

+ +

normal-session

+

+ A complete charging session: boot, authorize, start transaction, meter values, stop + transaction. No failures expected. +

+ + +

failed-auth

+

+ Failed authorization: the idTag is rejected by the CSMS. StartTransaction is not attempted. + The connector transitions to Faulted. +

+ + +

connector-fault

+

+ Connector fault during an active session: the connector reports a Faulted status + mid-charging, and the transaction stops with a fault reason. +

+ + +

station-offline

+

+ Station goes offline during an active session: a StartTransaction is sent but no + StopTransaction follows. +

+ + +

unexpected-stop-reason

+

+ A stop transaction with an unexpected stop reason. This is a parser/timeline-only fixture — + no v0.1 detection rule matches it. +

+ + +

Failure Detection Rules

+

Three detection rules are available in v0.1:

+ + +

Running Scenarios

+
+        {`# List all scenarios
+ocpp-debugkit scenario list
+
+# Run a specific scenario
+ocpp-debugkit scenario run connector-fault`}
+      
+

The CLI reports detected vs expected failures and shows a pass/fail result.

+ +

Synthetic Data

+

+ All scenario data is fully synthetic. No real station identifiers, transaction IDs, idTag + values, or personal data are used. +

+
+ ); +} diff --git a/apps/web/src/app/docs/trace-format/page.tsx b/apps/web/src/app/docs/trace-format/page.tsx new file mode 100644 index 0000000..9065374 --- /dev/null +++ b/apps/web/src/app/docs/trace-format/page.tsx @@ -0,0 +1,131 @@ +export default function TraceFormatPage() { + return ( +
+

Trace Format

+

+ DebugKit accepts three trace formats. All formats use the OCPP 1.6 JSON message structure. +

+ +

JSON Object Format

+

The primary format — a structured file with metadata and events:

+
+        {`{
+  "traceId": "trace-001",
+  "metadata": {
+    "stationId": "CS-SYNTHETIC-001",
+    "ocppVersion": "1.6",
+    "source": "csms-log"
+  },
+  "events": [
+    {
+      "timestamp": "2024-01-15T10:30:00.000Z",
+      "direction": "CS_TO_CSMS",
+      "message": [2, "msg-001", "BootNotification", {
+        "chargePointVendor": "SyntheticVendor",
+        "chargePointModel": "SM-100"
+      }]
+    },
+    {
+      "timestamp": "2024-01-15T10:30:00.500Z",
+      "direction": "CSMS_TO_CS",
+      "message": [3, "msg-001", {
+        "currentTime": "2024-01-15T10:30:00.500Z",
+        "status": "Accepted"
+      }]
+    }
+  ]
+}`}
+      
+ +

JSONL Format

+

One event per line — useful for CSMS logs and streaming captures:

+
+        {`{"timestamp":"2024-01-15T10:30:00.000Z","direction":"CS_TO_CSMS","message":[2,"msg-001","BootNotification",{}]}
+{"timestamp":"2024-01-15T10:30:00.500Z","direction":"CSMS_TO_CS","message":[3,"msg-001",{"status":"Accepted"}]}`}
+      
+

Blank lines are ignored. Malformed lines produce parse warnings but don't fail.

+ +

Bare Array Format

+

A JSON array of raw OCPP messages — convenience for quick testing:

+
+        {`[
+  [2, "msg-001", "BootNotification", {}],
+  [3, "msg-001", {"status": "Accepted"}]
+]`}
+      
+

Direction is inferred; timestamps are null.

+ +

OCPP 1.6 JSON Message Structure

+

Three message types are supported:

+ + +

Timestamps

+

Accepted formats:

+ + +

Limits

+ + + + + + + + + + + + + + + + + +
LimitValue
Maximum input size10 MB
Maximum event count10,000
+ +

Direction Inference

+

When direction is not specified, it is inferred from the action name:

+ +

For CallResult/CallError, direction is inferred from the matching Call.

+
+ ); +}