Skip to content

Add dev overlay with resource timestamps and tool timing#26

Merged
abewheel merged 1 commit intomainfrom
abewheel/dev-request-timing
Mar 26, 2026
Merged

Add dev overlay with resource timestamps and tool timing#26
abewheel merged 1 commit intomainfrom
abewheel/dev-request-timing

Conversation

@abewheel
Copy link
Copy Markdown
Contributor

Summary

  • Adds a collapsible dev overlay to every resource in development showing the resource served timestamp (HH:MM:SS) and tool handler execution time (ms with sub-ms precision). Helps detect stale cached resources in ChatGPT and measure tool performance.
  • The MCP server includes _meta._sunpeak.requestTimeMs on tool results so the overlay updates live on inspector Re-run. The standalone inspector also injects the overlay into resources from arbitrary MCP servers.
  • Adds sidebar=false and devOverlay=false URL params, SUNPEAK_DEV_OVERLAY=false env var, and defineLiveConfig({ devOverlay: false }) for controlling visibility. Template e2e tests hide the overlay by default via a helpers.ts wrapper; dev-overlay.spec.ts tests the overlay itself (excluded from sunpeak new).
  • Updates docs (CLI reference, inspector docs, testing guides, CLAUDE.md, SKILL.md) and regenerated examples.

Test plan

  • 247 unit tests pass (vitest)
  • Typecheck and lint clean
  • E2E tests pass (dev-overlay.spec.ts covers presence, collapse, timing, styling, prod-resources, stripping)
  • Live tests pass with devOverlay: false (4 resource tests without overlay clutter)
  • Manual verification in ChatGPT and Claude via tunnel

The dev server now injects a small overlay into every resource showing
when the HTML was served and how long the tool handler took. Both values
are baked into the HTML at readResource time; the inspector also updates
timing live via _meta._sunpeak.requestTimeMs on PostMessage.

The overlay is dev-only (never in production builds) and can be disabled
via the devOverlay=false URL param, SUNPEAK_DEV_OVERLAY=false env var,
or defineLiveConfig({ devOverlay: false }). Template e2e tests hide it
by default; a dedicated dev-overlay.spec.ts (excluded from sunpeak new)
tests the overlay itself. The standalone inspector injects the overlay
into resources from arbitrary MCP servers too.

Also adds sidebar=false URL param to hide the inspector sidebar.
@abewheel abewheel merged commit 26f7e74 into main Mar 26, 2026
3 checks passed
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