Skip to content

feat: copy a report of each panel for an agent - #27

Open
lxsmnsyc wants to merge 1 commit into
feat/devtools-dockfrom
feat/agent-reports
Open

lxsmnsyc wants to merge 1 commit into
feat/devtools-dockfrom
feat/agent-reports

Conversation

@lxsmnsyc

Copy link
Copy Markdown
Member

Each panel gets a button that copies a Markdown report of what it shows, so the user can paste it into an agent such as Claude Code. This PR is based on #26.

Changes

  • The Errors panel copies the message, the stack mapped to the original source, and the source around the first frames in the app. Runs of frames in dependencies are folded into one line.
  • The Server functions panel copies the function, status, time, and the headers and bodies of the request and response. Seroval stream bodies are decoded to text, and promises that settle within 500ms are included. The bodies are read from clones, so the panel can still read them.
  • The Ownership panel copies the component with its declared location, owner path, prop names, signals, memos, effects, children and ancestry.
  • The Reactivity panel copies the node with its state, value, error, and what it reads and what reads it.
  • Values with sensitive names are replaced with [redacted]. This covers headers, JSON keys, form fields, query parameters and signal names that contain words such as cookie, token, password or session.
  • The clipboard falls back to execCommand('copy') when the page is not a secure context, such as a dev server opened by its network address.
  • create-stack-frame.ts now exports loadStackFrame and mapStackFrame, so the report can map frames outside the panel.
  • The seroval node helpers moved from SerovalViewer.tsx to functions/seroval-node.ts, so the viewer and the report share them.

Example

The error report from the test fixture:

# Error in a Solid app

```
Error: client boom
```

- Page: `/`

## Stack

- `Broken` at `/app.tsx:6:8`
- … 8 frames in dependencies: `solid-js`, `@solidjs/signals`
- `<Broken />` at `/app.tsx:76:8`

## Source

### `/app.tsx:6:8`

```tsx
  3 | import { createEffect, createMemo, createSignal, Show } from 'solid-js';
  4 |
  5 | function Broken(): never {
> 6 |   throw new Error('client boom');
    |        ^
  7 | }
  8 |
  9 | const serverFunctionInstance = 'load-user-1';
```

Testing

  • Unit tests in src/dev-toolbar/report/report.test.ts cover each report, the redaction, the value printer, and decoding seroval streams made by seroval itself, including a stream that never closes.
  • A new e2e test copies a report from each of the four panels and checks the clipboard.
  • pnpm test, pnpm typecheck, pnpm format:check, pnpm build, pnpm check and the full e2e suite pass locally.

🤖 Generated with Claude Code

- Each panel has a copy button that puts a Markdown report on the clipboard, for an agent such as Claude Code to read.
- The error report has the message, the stack mapped to the original source, and the source around the first frames in the app. Runs of frames in dependencies are one line.
- The server function report has the status, time, headers and bodies of the call. Streamed bodies are decoded to text.
- The ownership and reactivity reports have the selected node, its values, and the nodes around it.
- Values with sensitive names, such as cookie, token or password, are redacted.
- The clipboard falls back to execCommand on pages that are not a secure context.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant