feat: adopt toolkit 0.4.0 and surface Open OCPP Trace interop

package.json

@@ -15,7 +15,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@ocpp-debugkit/toolkit": "^0.3.1",
+    "@ocpp-debugkit/toolkit": "^0.4.0",
     "next": "16.2.10",
     "react": "19.2.4",
     "react-dom": "19.2.4"

src/app/docs/cli/page.tsx

@@ -134,6 +134,25 @@ ocpp-debugkit ci --format json`}</code>
         <code>{`ocpp-debugkit diff trace-a.json trace-b.json`}</code>
       </pre>
 
+      <h2>convert</h2>
+      <p>
+        Convert any readable trace to the vendor-neutral Open OCPP Trace v1.1 format (JSONL), so it
+        can be consumed by other OCPP tools.
+      </p>
+      <pre>
+        <code>{`ocpp-debugkit convert <file> [options]`}</code>
+      </pre>
+      <h3>Options</h3>
+      <ul>
+        <li>
+          <code>-o, --output &lt;file&gt;</code> - Write converted trace to file (default: stdout)
+        </li>
+      </ul>
+      <p>Example:</p>
+      <pre>
+        <code>{`ocpp-debugkit convert trace.json -o trace.openocpp.jsonl`}</code>
+      </pre>
+
       <h2>Global Options</h2>
       <ul>
         <li>

src/app/docs/trace-format/page.tsx

@@ -4,6 +4,8 @@ export default function TraceFormatPage() {
       <h1>Trace Format</h1>
       <p>
         DebugKit accepts three trace formats. All formats use the OCPP 1.6 JSON message structure.
+        It also reads and writes the vendor-neutral Open OCPP Trace interchange format, described
+        below.
       </p>
 
       <h2>JSON Object Format</h2>
@@ -55,6 +57,30 @@ export default function TraceFormatPage() {
       </pre>
       <p>Direction is inferred; timestamps are null.</p>
 
+      <h2>Open OCPP Trace Format</h2>
+      <p>
+        The vendor-neutral{' '}
+        <a
+          href="https://github.com/open-ocpp-trace/specification"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open OCPP Trace
+        </a>{' '}
+        interchange format lets traces move between DebugKit and other OCPP tools. It is a stream of
+        records (JSONL or a JSON array), one frame per record:
+      </p>
+      <pre>
+        <code>{`{"schemaVersion":"1.1","timestamp":"2024-01-15T10:30:00.000Z","transport":"json","direction":"cp-to-csms","messageType":"CALL","messageId":"msg-001","action":"BootNotification","payload":{"chargePointVendor":"SyntheticVendor","chargePointModel":"SM-100"}}
+{"schemaVersion":"1.1","timestamp":"2024-01-15T10:30:00.500Z","transport":"json","direction":"csms-to-cp","messageType":"CALLRESULT","messageId":"msg-001","payload":{"status":"Accepted"}}`}</code>
+      </pre>
+      <p>
+        Each record also carries a <code>raw</code> field with the verbatim frame, so byte-exact or
+        malformed frames survive the round trip. The inspector auto-detects this format on paste;
+        write it back out with the <code>convert</code> CLI command. The parser and exporter are
+        checked against the format&apos;s conformance fixtures in CI.
+      </p>
+
       <h2>OCPP 1.6 JSON Message Structure</h2>
       <p>Three message types are supported:</p>
       <ul>

src/app/page.tsx

@@ -126,6 +126,28 @@ export default function HomePage() {
         </p>
       </section>
 
+      {/* Open trace format */}
+      <section className="mx-auto max-w-3xl px-6 py-16 text-center">
+        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
+          Move traces between tools
+        </h2>
+        <p className="mx-auto mt-4 text-neutral-600 dark:text-neutral-400">
+          The toolkit reads and writes the vendor-neutral{' '}
+          <a
+            href="https://github.com/open-ocpp-trace/specification"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-neutral-900 dark:hover:text-white"
+          >
+            Open OCPP Trace
+          </a>{' '}
+          format, so a trace from a simulator, proxy, or CSMS test suite opens in
+          the inspector, and DebugKit can write the format back out for them. The
+          parser and exporter are checked against the format&apos;s conformance
+          fixtures in CI.
+        </p>
+      </section>
+
       {/* Capabilities */}
       <section className="mx-auto max-w-5xl px-6 py-16">
         <h2 className="text-center text-3xl font-bold text-neutral-900 dark:text-white">