Skip to content

Speedtest visualization in a lightweight webview #888

@EhabY

Description

@EhabY

Follow-up to AIGOV-193.

After running coder speedtest, the user currently sees raw JSON in a text document. We should offer a visual chart as an alternative.

Flow

  1. Speed test runs with progress indicator (unchanged).
  2. On completion, prompt the user: "View Chart" / "View JSON".
  3. "View JSON" opens the raw JSON in a text document (current behavior).
  4. "View Chart" opens a webview panel with a throughput chart and summary.

Webview

A new packages/speedtest/ package:

  • Vanilla TS + Chart.js only. No React, no framework. Keeps the bundle small.
  • Its own minimal Vite config (does not reuse createWebviewConfig since that bakes in React).
  • Bundled into dist/webviews/speedtest/.

The webview shows:

  • A line chart of throughput (Mbps) over time intervals
  • A summary section with total throughput, duration, and direction
  • "Copy JSON" and "Save to File" buttons

Extension side

A panel provider or factory function in src/webviews/speedtest/ that creates a WebviewPanel, posts the JSON data via postMessage, and handles copy/save actions.

Files to create/change

  • packages/speedtest/ - new package (vite config, src/index.ts, src/index.css)
  • src/webviews/speedtest/ - panel provider
  • src/commands.ts - modify speedTest to prompt and optionally open webview
  • package.json - build script additions

Part of AIGOV-193.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions