Skip to content

Latest commit

 

History

History
97 lines (72 loc) · 6.33 KB

File metadata and controls

97 lines (72 loc) · 6.33 KB

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, or Angular Native on a device or simulator. 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. 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. 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

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, and a keepalive at intervals so the server knows the page is still there. Pushes stay cheap. Avoid: sync, upload, post

Inspector: One area the devtools can look at: components, injectors, signals, ngrx, forms, router, pipes, http and analog (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, module, feature

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 (Angular, NgRx, Analog, Angular Native, and the Coming Soon placeholders), each opening a view of the panel (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 Router. 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. It is listed in AGENT_INSPECTOR, and in ACTION_TOOLS too when it writes. 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

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. 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), 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 turned on by the Vite plugin when a non-loopback host or origin is allowed. 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