CONTEXT.md

Pangular Inspector

Pangular Inspector inspects a running Angular app and serves what it finds to a panel and to AI agents over MCP. This glossary fixes the words the project uses for its own concepts, so that a name means one thing in the code, the docs, issues and commit messages. Each entry gives the term, what it means here, and the words to avoid for it.

Language

Page: One browser tab running the inspected app with the overlay loaded. Several pages can report to the same server at once, and each one's data is kept apart. Avoid: tab (a tab is a view in the panel), client, window

Platform: What renders a page: a browser, Angular Native on a device or simulator, or a Capacitor app's native WebView. The Angular Native overlay marks its component reports with platform: 'angular-native'; a report without one is a browser page. The Angular Native view and list-pages read it. list-pages also labels a page whose Capacitor report has a native bridge Capacitor (android) or Capacitor (ios), from that report's platform. A Capacitor page without a native bridge, such as the app in a desktop browser, shows as browser. Avoid: target, runtime, device type

pageId: The short id a page claims when the overlay starts, kept in sessionStorage so a reload keeps it, and replaced when a duplicated tab already holds it. Everything the page reports carries it, and the server expires a page's data when its reports stop. Avoid: tab id, session id, client id

Overlay: The script the app imports in main.ts in development only (@pangular-inspector/devtools/overlay). It finds the server, starts the collectors and adds the floating button. @pangular-inspector/devtools/overlay-manual is the same script without the start on import or the button; the app calls initOverlay(), for example with connectionMeta in a Capacitor WebView. It reads the page; it never changes it on its own. Avoid: content script, agent, injected script

Collector: One inspector's page-side code inside the overlay, such as forms-collector.ts or pipes-collector.ts. It reads the app through Angular's debug APIs, gives objects stable ids through a WeakMap, and pushes a report tagged with the pageId. Avoid: scraper, probe, watcher

Plugin call: One call an app makes to a Capacitor plugin method, logged by the Capacitor collector with its arguments, outcome and duration. native when it went through the native bridge, web when a web implementation (or core's "not implemented" check) answered it in JavaScript. Avoid: bridge call, native call (for both kinds)

Capacitor hook: The early part of the Capacitor collector (capacitor-collector.ts), loaded through @pangular-inspector/devtools/capacitor-hook before @capacitor/core. It wraps the native bridge and registerPlugin so plugin calls are logged from app start, and the overlay picks up its buffer when it connects. Avoid: interceptor, patch, monkey patch

Store hook: The stand-in for the Redux DevTools extension's page API (window.__REDUX_DEVTOOLS_EXTENSION__, in redux-devtools-hook.ts), loaded early through @pangular-inspector/devtools/store-hook or installed by the overlay. NGXS, Elf and MiniRx connect to it through their own devtools integrations, so they show in the store inspector. It passes every call on to the real extension when there is one. Avoid: fake extension, Redux shim, devtools mock

Host tree: The tree Angular rendered into, as the component, injector, signal graph and NgRx collectors walk it: roots, children, parent and a tag for each host (HostTree in host-tree.ts). In the browser it is the DOM, through domTree(); a platform without a DOM describes its own views. Avoid: view tree, render tree, DOM (when the code does not depend on it)

Push: A report a collector sends to the server over RPC, such as push-component-tree. A collector sends one when something changed. One page heartbeat (page-heartbeat) every 10 seconds tells the server the page is still there, for every collector. Pushes stay cheap. Avoid: sync, upload, post

Inspector: One area the devtools can look at: components, injectors, signals, ngrx, tanstackQuery, forms, router, pipes, http, analog, capacitor, errors and plugins (PANGULAR_INSPECTORS in config.ts). An inspector owns a collector, its RPC functions, its agent tools and its view in the panel, and inspectors in the config turns all of them off together. Avoid: plugin (a Pangular plugin is a library's own view), module, feature

Pangular plugin: A library's own view in the panel and its own agent tools, through the public plugin API (@pangular-inspector/devtools/plugin). The page plugin, registered with registerPangularPlugin(), returns a declarative view (tables, lists, stats, trees) that the Plugins tab renders; the server plugin, passed as serverPlugins, adds tools named pangular:plugin:<id>:<tool> and the shared state pangular:plugin.<id>. The plugins inspector runs them, and plugins.<id> in the config turns one off. Avoid: extension (the Chrome extension), add-on, inspector

Devframe: The framework the devtools are built on (devframe). One definition, packages/devtools/src/devframe.ts, declares the RPC functions, shared state and agent tools, and Devframe serves it as the embedded panel, the standalone CLI, the static report and the MCP server. Avoid: framework, runtime, backend

Hub: The server part an app mounts: initPangularHub() for Express, or the Vite plugin. It is built on @devframes/hub, serves the panel and the connection file under /__devframes/, and lets other Devframe tools join the same dock. Avoid: server (too broad), middleware, proxy

Dock: The rail of entries the hub shows (All tools, then Angular, NgRx, Analog, Angular Native, NativeScript and Capacitor), each opening a view of the panel, or the full panel for All tools (hub-docks.ts). Avoid: sidebar, menu, tab bar

Panel: The devtools UI, the Angular app in app/. The hub serves it, the popup frames it on the page, the static report bundles it, and the Chrome extension ships a committed build of it in extension/ui. Avoid: dashboard (the Dashboard is one of its views), UI app, client

Popup: The floating button the overlay adds to the page, and the panel it opens in a frame beside the app (popup.ts). Avoid: launcher, widget, modal

Tab: One view in the panel, such as Components or Routes. Most tabs belong to one inspector; the Dashboard summarises all of them. Avoid: page (a page is a browser tab), screen

RPC function: A server function the panel or an agent calls over Devframe RPC, listed in RPC_INSPECTOR in config.ts so it disappears with its inspector. Avoid: endpoint, API, handler

Agent tool: An RPC function marked for agents, which Devframe exposes as an MCP tool. Its inspector, safety tier and the actions it writes for are in its entry in AGENT_ENTRIES in config.ts. Avoid: MCP command, function, skill

Action: Anything that changes the app or the server rather than reading it: setting a form value, navigating, restoring store state, HTTP fault rules. actions in the config blocks them, and agent.readOnly drops the agent tools that perform them. Avoid: mutation, command, write tool

Prompt: An MCP prompt: a ready request for one workflow, such as debug-error or fix-form, that the HTTP MCP endpoint lists and an MCP client usually offers as a slash command. It names agent tools in numbered steps and is built from the shipped skills in packages/devtools/src/agent-prompts.ts; a prompt whose tools are off is not offered. Avoid: template, command, skill (a skill is a SKILL.md folder the agent reads)

Resource: Live state an agent reads as JSON over MCP, such as pangular:component-tree. It holds what the connected pages reported, so it is empty when no page is connected. Each page-scoped resource also has a per-page resource template, pangular://pages/{pageId}/<name>, that holds one page (packages/devtools/src/agent-page-resources.ts). Avoid: snapshot, feed, state dump

Source scan: What the devtools read from the project's source files rather than the running page: components, routes, signals, providers, NgRx declarations and pipes. It is all the standalone CLI and the static report have. Avoid: static analysis, AST pass, crawl

Static report: An offline HTML build of the panel over the source scan, written by pangular build --outDir <dir>. No page connects to it. Avoid: export, snapshot, static site

Redaction: Masking values before they reach the panel or an agent: field names that look secret (plus redaction.secretNames), URL passwords, Authorization credentials (Basic, Digest, Token), JWTs and bearer tokens. It runs in serialize and the redaction helpers, and redaction.unmask lists the names to show anyway. Avoid: sanitizing, scrubbing, hiding

One-time code: The code the server prints in the terminal, which a browser exchanges before it can read any data. It is on by default for the Express hub and the Vite plugin. auth: false turns it off. Avoid: token (the MCP endpoint's bearer token is a different thing), password, PIN

Lint: A check an inspector runs over what it collected and reports as findings in its tab and through an agent tool, such as Router Lint or Forms Lint (lint-routes, lint-forms). Avoid: audit, validation, analysis