Skip to content

phase 3 of 4: a shell you live in #342

Description

@erkamyaman

Goal

Make the panel a place you stay in: commands, settings, one timeline, errors, and a one-command setup. Devframe already ships most of the shell (ctx.commands, ctx.messages, ctx.terminals, settings), and the devtools use only docks.register, rpc, sharedState and agent today, so most of this phase is wiring. Rough size: 4 to 6 weeks. Follows #340 and #341.

Shell

  • Command palette (Cmd/Ctrl+K) through ctx.commands, with a command for every tab and action (pick, record change detection, clear, dock mode). Use a local palette when there is no hub. Add a global popup shortcut, configurable through popup.hotkey.
  • Settings page: theme toggle, hide, pin and reorder tabs, and a passive mode where the popup stays hidden until the shortcut.
  • A splitter for the docked popup, and pop-out into its own window.
  • Deep links to an item, not just a tab (#tab=&id=&page=), plus an open-in-panel agent tool.
  • One timeline with toggleable layers for router, HTTP, NgRx, change detection, forms and signals, instead of five separate timelines.
  • Errors inspector: wrap ErrorHandler, error and unhandledrejection, parse NG0xxx codes with a doc link, and link the owning component. Replace the three console patches with one console tap. Add list-errors, explain-error and list-console agent tools.
  • A terminals dock (ctx.terminals) for ng build and ng test output.
  • Reuse devframe plugins and services where they fit (@devframes/plugin-a11y, @devframes/plugin-data-inspector, @devframes/plugin-messages, @devframes/service-open) instead of building the same thing again.

Setup and distribution

  • An ng add schematic that patches main.ts and server.ts, plus a dev-server builder that mounts the hub middleware. This removes the CLI, proxy and one-time-code steps from the client-only setup.
  • Publish the extension to the Chrome Web Store and Edge Add-ons, and ship a Firefox build.
  • Docs: a one-path quick start and screenshots on every inspector page.

Platforms

Performance and scale

  • Push deltas instead of full snapshots for the component tree, injectors, change detection and forms. Use MutationObserver dirty flags, throttle to about once a second, and add an activity lease so idle pages stop pushing.
  • Virtualize long lists and trees (2,000-row tables), starting with content-visibility.

Done when

  • Every tab and action is reachable from the command palette.
  • First-run setup is one command.

Generated by Claude Code

Activity

  1. added
    featureA feature request or a pull request that adds one
    on Oct 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureA feature request or a pull request that adds one

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions