Skip to content

feat: speedtest visualization webview#890

Open
EhabY wants to merge 4 commits intomainfrom
feat/speedtest-visualization-888
Open

feat: speedtest visualization webview#890
EhabY wants to merge 4 commits intomainfrom
feat/speedtest-visualization-888

Conversation

@EhabY
Copy link
Copy Markdown
Collaborator

@EhabY EhabY commented Apr 15, 2026 •
edited
Loading

  • Results render in a Canvas based line chart instead of raw JSON, with throughput over time, a summary header, hover tooltips, and a View JSON button
  • Duration input is a real time progress bar while the CLI runs
  • Webview receives results already parsed and validated by Zod on the extension side, so it trusts the typed payload
  • Types (SpeedtestInterval, SpeedtestResult, SpeedtestData) live in @repo/shared alongside the existing IPC helpers
  • Protocol tightened: buildApiHook and useIpc take RequestDef, CommandDef, and NotificationDef directly in both public and impl overloads
  • New subscribeNotification helper in @repo/webview-shared for non React webviews; useIpc delegates to it
  • Chart layout scales with the webview font size using em based padding and label offsets, with named constants in place of magic numbers
  • Empty or zero duration results short circuit with a readable message instead of drawing an empty axis
  • Re running the speed test opens a new panel, keeping each run independent
  • toError moved into @repo/shared so the webview can use it; the extension wraps it to keep util.inspect formatting
  • createBaseWebviewConfig renamed to createWebviewConfig, and createReactWebviewConfig added for React webviews; the old eslint ignore on that file is gone now that it type checks
  • reportElapsedProgress extracted into progress.ts so other long running commands can drive a progress bar from wall clock time
  • Speedtest webview entry reordered newspaper style with a main() entrypoint, and CSS cleaned up in em units
  • extensionUri is now exposed through ServiceContainer

Closes #888

@EhabY EhabY marked this pull request as draft April 15, 2026 09:08
@EhabY EhabY force-pushed the feat/speedtest-visualization-888 branch from b4cb6cc to a37b1ac Compare April 16, 2026 15:33
@EhabY EhabY self-assigned this Apr 18, 2026
@EhabY EhabY force-pushed the feat/speedtest-visualization-888 branch 4 times, most recently from cb4cba0 to d3c3464 Compare April 20, 2026 12:12
EhabY added 3 commits April 20, 2026 18:20
@EhabY
feat: add speedtest visualization webview (#888)
5976c18 
After running a speed test, results are now displayed in a lightweight
Canvas-based chart (4.5KB JS) instead of raw JSON. The webview shows
throughput over time with hover tooltips, a summary header, and a
"View JSON" button for the raw data.

- Add `packages/speedtest/` webview (vanilla TS, no framework)
- Extract `createBaseWebviewConfig` from the React-specific variant
  so lightweight webviews can reuse the shared Vite config
- Add typed IPC via `SpeedtestApi` in `@repo/shared`
- Accept duration as seconds, show real-time progress bar
- Expose `extensionUri` through `ServiceContainer`
@EhabY
refactor: improve speedtest chart accuracy and responsiveness
df4cca2 
- Time-proportional x-axis with dashed leader line from t=0
- Uniform tick labels with smart unit selection (s/m/h) that scale
  from seconds to hours
- Dynamic y-axis padding based on measured label width
- Binary search hit-test with crosshair-snap for dense data
- ResizeObserver debounced via requestAnimationFrame
- Tooltip clamped to container bounds
- General cleanup: named constants, single-pass data prep, responsive
  layout, safer error handling, input validation, missing dependency
@EhabY
refactor: add workspace context and theme awareness to speedtest chart
8c6204a 
- Plumb workspaceName from the command through to the panel title and
  the in-chart heading; drop the generic "Speed Test Results" label.
- Read chart accent from the theme's button color so it tracks the
  active theme instead of being stuck on blue.
- Re-send data on active-theme change so canvas pixels repaint against
  the new theme (DOM CSS vars update live, canvas doesn't).
- Restructure chart.ts into readTheme/layoutChart/drawAxes/drawSeries,
  export niceStep/formatTick for testing.
- Rename the panel viewType to coder.speedtestPanel to match the
  tasks/chat conventions.
- Clean up the duration prompt and tests.
@EhabY EhabY force-pushed the feat/speedtest-visualization-888 branch from 781bd7a to 8c6204a Compare April 20, 2026 15:20
@EhabY EhabY marked this pull request as ready for review April 20, 2026 16:46
@EhabY
refactor: address speedtest webview review feedback
4c8eb27 
Validate CLI output with Zod on the extension side so the webview trusts
typed data and stops hand-parsing JSON. Share SpeedtestResult types via
@repo/shared and flatten the message payload.

Webview cleanup: newspaper-ordered index.ts with a main() entrypoint,
em-scaled chart layout, named constants in place of magic numbers, empty
samples handled with a message, and a subscribeNotification helper that
useIpc now delegates to.

Protocol: buildApiHook and useIpc now take RequestDef, CommandDef, and
NotificationDef directly in both overloads, no casts needed.

Platform: move toError into shared with a serialize hook so the extension
keeps util.inspect output, rename createBaseWebviewConfig to
createWebviewConfig, add createReactWebviewConfig, extract
reportElapsedProgress for reuse by other long running commands, and drop
the createWebviewConfig eslint ignore.
@EhabY EhabY force-pushed the feat/speedtest-visualization-888 branch from f0b417b to 4c8eb27 Compare April 20, 2026 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@EhabY EhabY

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Speedtest visualization in a lightweight webview

1 participant

@EhabY