From ea6d38f079e611091786b9cae9678a74d244aab2 Mon Sep 17 00:00:00 2001
From: sepehr-safari <safari.sepehr@gmail.com>
Date: Thu, 9 Jul 2026 00:51:38 +0300
Subject: [PATCH] fix(web): point npm links to toolkit package + inspector nav
 link

npm links in README.md and landing page footer pointed to the npm
organization page instead of the actual toolkit package page.

- README.md: badge link + links section -> /package/@ocpp-debugkit/toolkit
- apps/web/src/app/page.tsx: footer npm link -> same
- apps/web/README.md: stale references to old packages (core, scenarios,
  reporter) -> @ocpp-debugkit/toolkit

Also add a nav link from the inspector header to the root page, matching
the docs layout pattern (link with 'OCPP DebugKit' + section label).

- apps/web/src/app/inspector/page.tsx: wrap title in <Link href='/'>
- Update E2E tests to match new header structure
---
 README.md                           |  4 ++--
 apps/web/README.md                  |  3 +--
 apps/web/src/app/inspector/page.tsx | 13 ++++++++++---
 apps/web/src/app/page.tsx           |  2 +-
 apps/web/tests/inspector.spec.ts    |  3 ++-
 apps/web/tests/landing.spec.ts      |  3 ++-
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index a3ab986..3bdd832 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 [![CI](https://github.com/ocpp-debugkit/ocpp-debugkit/actions/workflows/ci.yml/badge.svg)](https://github.com/ocpp-debugkit/ocpp-debugkit/actions/workflows/ci.yml)
 [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/ocpp-debugkit/ocpp-debugkit/blob/main/LICENSE)
-[![npm](https://img.shields.io/badge/npm-%40ocpp--debugkit-blue.svg)](https://www.npmjs.com/org/ocpp-debugkit)
+[![npm](https://img.shields.io/badge/npm-%40ocpp--debugkit-blue.svg)](https://www.npmjs.com/package/@ocpp-debugkit/toolkit)
 
 OCPP DebugKit is a developer toolkit for inspecting, analyzing, and debugging
 OCPP (Open Charge Point Protocol) charging session traces. It helps EV charging
@@ -119,7 +119,7 @@ load a trace directly in your browser — no installation required.
 
 - [Documentation](https://ocppdebugkit.com/docs)
 - [GitHub](https://github.com/ocpp-debugkit/ocpp-debugkit)
-- [npm](https://www.npmjs.com/org/ocpp-debugkit)
+- [npm](https://www.npmjs.com/package/@ocpp-debugkit/toolkit)
 - [Roadmap](./ROADMAP.md)
 - [Contributing](./CONTRIBUTING.md)
 
diff --git a/apps/web/README.md b/apps/web/README.md
index d8aaa92..7209cd9 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -19,8 +19,7 @@ and documentation.
 
 All trace processing happens client-side in the browser — no trace data is
 uploaded to a server. The app uses workspace dependencies on
-`@ocpp-debugkit/core`, `@ocpp-debugkit/scenarios`, and
-`@ocpp-debugkit/reporter` for parsing, analysis, and report generation.
+`@ocpp-debugkit/toolkit` for parsing, analysis, and report generation.
 
 ## Development
 
diff --git a/apps/web/src/app/inspector/page.tsx b/apps/web/src/app/inspector/page.tsx
index 8f34575..233b0ae 100644
--- a/apps/web/src/app/inspector/page.tsx
+++ b/apps/web/src/app/inspector/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useState, useCallback, useMemo, useRef } from 'react';
 import {
   parseTrace,
@@ -257,9 +258,15 @@ export default function InspectorPage() {
       {/* Header */}
       <header className="sticky top-0 z-10 border-b border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
         <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 flex items-center justify-between">
-          <h1 className="text-lg font-bold text-neutral-900 dark:text-white sm:text-xl">
-            OCPP Inspector
-          </h1>
+          <div className="flex items-baseline gap-2">
+            <Link
+              href="/"
+              className="text-lg font-bold text-neutral-900 dark:text-white sm:text-xl"
+            >
+              OCPP DebugKit
+            </Link>
+            <span className="text-sm text-neutral-500">Inspector</span>
+          </div>
           {analysis && analysis.events.length > 0 && (
             <div className="flex items-center gap-2">
               <select
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index be1703a..6a65317 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -129,7 +129,7 @@ ocpp-debugkit scenario run failed-auth`}</code>
               GitHub
             </a>
             <a
-              href="https://www.npmjs.com/org/ocpp-debugkit"
+              href="https://www.npmjs.com/package/@ocpp-debugkit/toolkit"
               target="_blank"
               rel="noopener noreferrer"
               className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
diff --git a/apps/web/tests/inspector.spec.ts b/apps/web/tests/inspector.spec.ts
index 9fc18b4..f381e88 100644
--- a/apps/web/tests/inspector.spec.ts
+++ b/apps/web/tests/inspector.spec.ts
@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test';
 test.describe('Inspector', () => {
   test('page loads with empty state', async ({ page }) => {
     await page.goto('/inspector');
-    await expect(page.getByText('OCPP Inspector')).toBeVisible();
+    await expect(page.getByRole('link', { name: 'OCPP DebugKit' })).toBeVisible();
+    await expect(page.getByText('Inspector')).toBeVisible();
     await expect(page.getByText('Paste OCPP Trace')).toBeVisible();
     await expect(page.getByText('Sample Scenarios')).toBeVisible();
     // Empty state message
diff --git a/apps/web/tests/landing.spec.ts b/apps/web/tests/landing.spec.ts
index 8d84beb..054c0ce 100644
--- a/apps/web/tests/landing.spec.ts
+++ b/apps/web/tests/landing.spec.ts
@@ -50,7 +50,8 @@ test.describe('Navigation', () => {
     await page.goto('/');
     await page.getByRole('link', { name: 'Try Inspector' }).click();
     await expect(page).toHaveURL('/inspector');
-    await expect(page.getByText('OCPP Inspector')).toBeVisible();
+    await expect(page.getByRole('link', { name: 'OCPP DebugKit' })).toBeVisible();
+    await expect(page.getByText('Inspector')).toBeVisible();
   });
 
   test('can navigate to docs', async ({ page }) => {