@grip/devtools

All Grip UI in one place — popup, panel, floating tray, shared components, and runtime hooks.

What it is

@grip/devtools is the Preact UI layer for Grip. Pick history, comments, MCP chip, session toolbar, and store all live here. One layout (GripRootLayout + GripView) powers popup, DevTools panel, and floating variants — so the UI looks and behaves the same everywhere.

UI building blocks

  • GripView — single entry point; pass variant: popup | panel | floating
  • GripPopupView / GripPanelView — thin wrappers the extension mounts
  • mountFloatingGrip — shadow DOM FAB + panel for in-page use
  • Shared components — pick list, comment field, MCP chip, toolbars

Preview all variants locally: pnpm dev:playground → DevTools UI Lab.

Where it runs

  • Extension popup — packages/extension/src/popup
  • DevTools panel — packages/extension/src/devtools/panel
  • Floating tray — content script via mountFloatingGrip
  • Playground — apps/playground/src/devtools-lab.tsx

Data layer: grip-dev. Browser automation: grip-mcp.