feat: rename the project to Pangular Inspector

.claude/agents/devtools-reviewer.md

@@ -4,7 +4,7 @@ description: Reviews a change or pull request against this repository's coding s
 tools: Read, Grep, Glob, Bash
 ---
 
-You review changes to the Angular devtools. You don't edit files; you report.
+You review changes to Pangular Inspector. You don't edit files; you report.
 
 Check the diff against:
 

.claude/agents/inspector-engineer.md

@@ -3,7 +3,7 @@ name: inspector-engineer
 description: Owns how inspectors collect data from the running app and serve it to the panel and to agents. Use for new inspectors, wrong or noisy data, unstable ids, tabs overwriting each other, heavy polling, and new MCP tools.
 ---
 
-You are the inspector engineer for the Angular devtools.
+You are the inspector engineer for Pangular Inspector.
 
 Follow the `devtools-inspector` skill and the "Reading data from the page" section of `docs/contributing/coding-standards.md`. Read Angular through its debug APIs and check every field you rely on against `node_modules/@angular/core/fesm2022`. Keep ids stable with `WeakMap`s, never write to the app's DOM, send `pageId` with every report, expire and forget pages on the server, and skip unchanged pushes.
 

.claude/agents/ui-engineer.md

@@ -3,7 +3,7 @@ name: ui-engineer
 description: Builds and restyles pages in the devtools panel (app/) so they match the design system, work with the keyboard and pass axe. Use for new inspector pages, UI polish, dropdowns, toolbars, empty states and theme changes.
 ---
 
-You are the UI engineer for the Angular devtools panel.
+You are the UI engineer for the Pangular Inspector panel.
 
 Follow the `devtools-ui` skill and `docs/contributing/ui-guidelines.md`. Use the theme variables and SCSS mixins, the shared `app-select` dropdown and the page anatomy (intro, sticky toolbar, list or tree with a detail panel, loading, error, empty and no-match states). Headings start at `h2`.
 

.claude/skills/devtools-docs/SKILL.md

@@ -1,9 +1,9 @@
 ---
 name: devtools-docs
-description: Writing guide for the Angular DevTools documentation site in apps/docs (NgMd). Covers audience, voice, style rules, page types and structure, NgMd authoring components, code samples, checking claims against the code, and the build checks. You MUST use this skill any time you create, edit or review files in apps/docs/src/content, the docs home page, or README.md.
+description: Writing guide for the Pangular Inspector documentation site in apps/docs (NgMd). Covers audience, voice, style rules, page types and structure, NgMd authoring components, code samples, checking claims against the code, and the build checks. You MUST use this skill any time you create, edit or review files in apps/docs/src/content, the docs home page, or README.md.
 ---
 
-# Angular DevTools docs writing guide
+# Pangular Inspector docs writing guide
 
 The human-readable version of this guide is `apps/docs/src/content/contributing/writing-docs.md`. Keep the two in sync when rules change.
 

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -38,7 +38,7 @@ body:
         - Angular CLI with Express (initNgDevtoolsHub)
         - Vite plugin
         - Analog
-        - Standalone CLI (ng-devtools dev)
+        - Standalone CLI (pangular dev)
         - Chrome extension
         - MCP server (stdio or HTTP)
         - Other
@@ -62,7 +62,7 @@ body:
     id: versions
     attributes:
       label: Versions
-      description: Angular, @santoshyadavdev/ng-devtools, browser, and Analog if used.
+      description: Angular, @pangular-inspector/core, browser, and Analog if used.
   - type: textarea
     id: extra
     attributes:

AGENTS.md

@@ -2,7 +2,7 @@ Follow the Angular, TypeScript and accessibility rules in `.claude/rules/angular
 
 ## This repository
 
-Angular DevTools inspects a running Angular app and serves what it finds to a panel and to AI agents over MCP. It is an Nx and pnpm workspace:
+Pangular Inspector inspects a running Angular app and serves what it finds to a panel and to AI agents over MCP. It is an Nx and pnpm workspace:
 
 | Path                        | What it is                                                                                                                                                     |
 | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Angular DevTools
+# Contributing to Pangular Inspector
 
 Thanks for your interest in contributing. This guide covers the rules a change follows and how to get it merged. For setup, the project structure, the commands and what CI runs, see [Development setup](./apps/docs/src/content/contributing/development.md) on the docs site.
 

README.md

@@ -1,14 +1,14 @@
-# Angular DevTools
+# Pangular Inspector
 
-Inspect Angular component trees, signals, dependency injection, routes, forms, pipes and NgRx stores at dev time, build time, or through a coding agent. Built with [Devframe](https://devfra.me) so the same tool runs as an embedded panel, standalone CLI, static report, MCP server, or Chrome DevTools extension.
+The unified Angular devtools. Inspect Angular component trees, signals, dependency injection, routes, forms, pipes and NgRx stores at dev time, build time, or through a coding agent. Built with [Devframe](https://devfra.me) so the same tool runs as an embedded panel, standalone CLI, static report, MCP server, or Chrome DevTools extension.
 
 ## Get started
 
 ```sh
-npm install @santoshyadavdev/ng-devtools devframe
+npm install @pangular-inspector/core devframe
 ```
 
-Then follow the [installation guide](./apps/docs/src/content/getting-started/installation.md) for your setup: Angular CLI with Express, Vite and Analog, the standalone CLI, or [Angular Native](./apps/docs/src/content/getting-started/angular-native.md). For a coding agent, run `npx @santoshyadavdev/ng-devtools mcp`.
+Then follow the [installation guide](./apps/docs/src/content/getting-started/installation.md) for your setup: Angular CLI with Express, Vite and Analog, the standalone CLI, or [Angular Native](./apps/docs/src/content/getting-started/angular-native.md). For a coding agent, run `npx @pangular-inspector/core mcp`.
 
 ## Documentation
 
@@ -39,10 +39,10 @@ Join the conversation, ask questions, and share feedback on [Discord](https://di
 
 ## Sponsors
 
-Angular DevTools is free and open source. If it helps your work, please consider sponsoring it. Your support keeps development going.
+Pangular Inspector is free and open source. If it helps your work, please consider sponsoring it. Your support keeps development going.
 
 <p>
-  <a href="https://github.com/sponsors/santoshyadavdev"><img src="https://img.shields.io/badge/Sponsor-%E2%9D%A4-db61a2?logo=githubsponsors&logoColor=white" alt="Sponsor Angular DevTools on GitHub" /></a>
+  <a href="https://github.com/sponsors/santoshyadavdev"><img src="https://img.shields.io/badge/Sponsor-%E2%9D%A4-db61a2?logo=githubsponsors&logoColor=white" alt="Sponsor Pangular Inspector on GitHub" /></a>
 </p>
 
 ### Company sponsors

SECURITY.md

@@ -2,8 +2,8 @@
 
 ## Supported versions
 
-Angular DevTools is in early development. Only the latest published release of
-`@santoshyadavdev/ng-devtools` is supported. There are no older release lines to backport a fix to.
+Pangular Inspector is in early development. Only the latest published release of
+`@pangular-inspector/core` is supported. There are no older release lines to backport a fix to.
 
 ## Reporting a vulnerability
 

app/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#0b0b0e" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
     <script src="./theme-init.js"></script>
-    <title>Angular DevTools</title>
+    <title>Pangular Inspector</title>
     <link rel="stylesheet" href="./src/styles/main.scss" />
   </head>
   <body>

app/src/app.ts

@@ -108,9 +108,9 @@ const NATIVESCRIPT_SETUP: ComingSoonInfo = {
   color: '#3c5afd',
   plansTitle: 'Set up an app',
   plans: [
-    'Install @santoshyadavdev/ng-devtools and @valor/nativescript-websockets',
+    'Install @pangular-inspector/core and @valor/nativescript-websockets',
     'Call initNativeScriptOverlay() in main.ts, before the app bootstraps',
-    'Run ng-devtools dev --no-auth in the app, then open the Angular dock',
+    'Run pangular dev --no-auth in the app, then open the Angular dock',
   ],
   link: {
     label: 'NativeScript setup guide',
@@ -719,7 +719,7 @@ export class App implements OnInit, OnDestroy {
   });
   readonly title = computed(() => {
     const view = this.view();
-    return view ? VIEW_TITLE[view] : 'Angular DevTools';
+    return view ? VIEW_TITLE[view] : 'Pangular Inspector';
   });
   readonly analogKnown = signal(false);
   readonly nativePageId = signal<string | null>(null);

app/src/devtools-config.ts

@@ -5,7 +5,7 @@ import {
   type NgDevtoolsAction,
   type NgDevtoolsInspector,
   type ResolvedNgDevtoolsConfig,
-} from '@santoshyadavdev/ng-devtools/config';
+} from '@pangular-inspector/core/config';
 import type { Tab } from './types/tab.types';
 
 export { actionBlockedMessage };

app/src/pages/analog-inspector.ts

@@ -317,7 +317,7 @@ function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth
       <div class="empty">
         <h2 class="empty-title">This app is not an Analog app.</h2>
         <p class="muted">
-          Add <code>ngDevtools()</code> from <code>@santoshyadavdev/ng-devtools/vite</code> next to
+          Add <code>ngDevtools()</code> from <code>@pangular-inspector/core/vite</code> next to
           <code>analog()</code> in vite.config.ts and run the Analog dev server.
         </p>
       </div>

app/src/pages/component-tree.ts

@@ -576,7 +576,7 @@ function bare(name: string): string {
           <p class="state-title">Could not load components</p>
           <p class="state-hint">
             @if (staticReport()) {
-              Run <code>ng-devtools build</code> again to rebuild the report.
+              Run <code>pangular build</code> again to rebuild the report.
             } @else {
               Check that the dev server is running, then try again.
             }

app/src/pages/dashboard.ts

@@ -12,7 +12,7 @@ import type { DevframeRpcClient } from 'devframe/client';
 import {
   summarizeNgDevtoolsConfig,
   type ResolvedNgDevtoolsConfig,
-} from '@santoshyadavdev/ng-devtools/config';
+} from '@pangular-inspector/core/config';
 import { hostPageId } from '../page-id';
 import { injectorTreeFor, signalGraphFor } from '../live-pages';
 import { isStaticReport } from '../rpc';
@@ -167,7 +167,7 @@ export function storeCard(rows: Row[]): Card {
         @if (metaState() === 'error') {
           <p class="hint">
             @if (staticReport()) {
-              Run <code>ng-devtools build</code> again to rebuild the report.
+              Run <code>pangular build</code> again to rebuild the report.
             } @else {
               Check that the dev server is running, then reload the panel.
             }

app/src/pages/network-inspector.ts

@@ -16,7 +16,7 @@ import type { DevframeRpcClient } from 'devframe/client';
 import { hostPageId } from '../page-id';
 import { rpcCall as call } from '../rpc';
 import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config';
-import { HTTP_RULE_STATUSES, isHttpRuleStatus } from '@santoshyadavdev/ng-devtools/config';
+import { HTTP_RULE_STATUSES, isHttpRuleStatus } from '@pangular-inspector/core/config';
 import { LimitNote } from '../ui/limit-note';
 import { Select, type SelectOption } from '../ui/select';
 

app/src/pages/route-inspector.ts

@@ -52,7 +52,7 @@ import { SHARED_STYLES, sourceLocation, type SourceRoute } from './router-types'
             <p class="empty-title">Could not scan the route files.</p>
             <p class="muted">
               @if (staticReport()) {
-                Run <code>ng-devtools build</code> again to rebuild the report.
+                Run <code>pangular build</code> again to rebuild the report.
               } @else {
                 Check that the dev server is running, then refresh.
               }

app/src/pages/route-lint.ts

@@ -36,7 +36,9 @@ import {
     @if (failed()) {
       <div class="empty" role="alert">
         <p class="empty-title">The route checks could not run.</p>
-        <p class="muted">The DevTools server did not answer. Check that it is still running.</p>
+        <p class="muted">
+          The Pangular Inspector server did not answer. Check that it is still running.
+        </p>
         <button type="button" class="small" (click)="run()">Retry</button>
       </div>
     } @else if (!result()) {

app/src/pages/route-timeline.ts

@@ -130,8 +130,8 @@ const PHASE_COLORS: Record<string, string> = {
                 @if (nav.beforeConnect) {
                   <span class="muted">{{
                     nav.endedAt === undefined && nav.outcome !== 'pending'
-                      ? 'before DevTools connected'
-                      : 'started before DevTools connected'
+                      ? 'before Pangular Inspector connected'
+                      : 'started before Pangular Inspector connected'
                   }}</span>
                 } @else if (nav.phases?.['total'] !== undefined) {
                   <span class="muted ms">{{ nav.phases?.['total'] }}ms</span>
@@ -269,7 +269,7 @@ const PHASE_COLORS: Record<string, string> = {
               }
               @if (nav.earlier) {
                 <dt>Earlier</dt>
-                <dd>{{ nav.earlier }} navigation(s) before DevTools connected</dd>
+                <dd>{{ nav.earlier }} navigation(s) before Pangular Inspector connected</dd>
               }
             </dl>
             <div class="actions">
@@ -313,7 +313,7 @@ const PHASE_COLORS: Record<string, string> = {
         </div>
       } @else {
         <div class="empty">
-          <p class="empty-title">No navigations since DevTools connected.</p>
+          <p class="empty-title">No navigations since Pangular Inspector connected.</p>
           <p class="muted">Earlier ones are not visible. Click a link in the app to record one.</p>
         </div>
       }

app/src/rpc.ts

@@ -25,7 +25,7 @@ export function rpcTry<T>(
   );
 }
 
-/** True when the panel reads a report written by `ng-devtools build`, not a live server. */
+/** True when the panel reads a report written by `pangular build`, not a live server. */
 export function isStaticReport(client: DevframeRpcClient | null): boolean {
   return client?.connectionMeta.backend === 'static';
 }

app/src/ui/limit-note.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import type { NgDevtoolsLimit } from '@santoshyadavdev/ng-devtools/config';
+import type { NgDevtoolsLimit } from '@pangular-inspector/core/config';
 
 export const LIMITS_DOCS_URL =
   'https://github.com/santoshyadavdev/angular-devtools/blob/main/apps/docs/src/content/getting-started/configuration.md#limits';

app/vite.config.ts

@@ -2,7 +2,7 @@ import { join } from 'node:path';
 import { defineConfig } from 'vite';
 import angular from '@analogjs/vite-plugin-angular';
 import { devframeViteBridge } from '@devframes/vite/single';
-import ngDevtools from '@santoshyadavdev/ng-devtools/devframe';
+import ngDevtools from '@pangular-inspector/core/devframe';
 
 export default defineConfig({
   base: './',

apps/docs/package.json

@@ -2,7 +2,7 @@
   "name": "angular-devtools-docs",
   "version": "0.0.0",
   "private": true,
-  "description": "Documentation site for Angular DevTools",
+  "description": "Documentation site for Pangular Inspector",
   "license": "MIT",
   "type": "module",
   "engines": {

apps/docs/src/app/pages/index.page.ts

@@ -192,13 +192,13 @@ import {writeToClipboard} from '../utils/clipboard';
               aria-label="src/server.ts and src/main.ts"
               class="p-4 text-sm overflow-x-auto text-zinc-700 dark:text-zinc-300 leading-relaxed"
             ><code><span class="text-[color:var(--accent-strong)] font-semibold">import</span> {{ '{' }} initNgDevtoolsHub {{ '}' }}
-  <span class="text-[color:var(--accent-strong)] font-semibold">from</span> '@santoshyadavdev/ng-devtools/hub';
+  <span class="text-[color:var(--accent-strong)] font-semibold">from</span> '@pangular-inspector/core/hub';
 
 <span class="text-[color:var(--accent-strong)] font-semibold">const</span> devtools = initNgDevtoolsHub({{ '{' }} ws: false {{ '}' }});
 app.use(devtools.nodeMiddleware);
 
 <span class="text-zinc-500 dark:text-zinc-400">// src/main.ts</span>
-<span class="text-[color:var(--accent-strong)] font-semibold">if</span> (typeof ngDevMode === 'undefined' || ngDevMode) <span class="text-[color:var(--accent-strong)] font-semibold">import</span>('@santoshyadavdev/ng-devtools/overlay');</code></pre>
+<span class="text-[color:var(--accent-strong)] font-semibold">if</span> (typeof ngDevMode === 'undefined' || ngDevMode) <span class="text-[color:var(--accent-strong)] font-semibold">import</span>('@pangular-inspector/core/overlay');</code></pre>
           </div>
           <div
             class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden"
@@ -422,22 +422,22 @@ export default class Home implements AfterViewInit {
   readonly installCommands = [
     {
       pm: 'npm',
-      cmd: 'npm install @santoshyadavdev/ng-devtools devframe',
+      cmd: 'npm install @pangular-inspector/core devframe',
       logo: 'https://cdn.simpleicons.org/npm/CB3837',
     },
     {
       pm: 'pnpm',
-      cmd: 'pnpm add @santoshyadavdev/ng-devtools devframe',
+      cmd: 'pnpm add @pangular-inspector/core devframe',
       logo: 'https://cdn.simpleicons.org/pnpm/F69220',
     },
     {
       pm: 'yarn',
-      cmd: 'yarn add @santoshyadavdev/ng-devtools devframe',
+      cmd: 'yarn add @pangular-inspector/core devframe',
       logo: 'https://cdn.simpleicons.org/yarn/2C8EBB',
     },
     {
       pm: 'bun',
-      cmd: 'bun add @santoshyadavdev/ng-devtools devframe',
+      cmd: 'bun add @pangular-inspector/core devframe',
       logo: 'https://bun.sh/logo.svg',
     },
   ];