Skip to content

feat: implement React dashboard for session profiling (Issue #44, Part 2)#77

Draft
themechbro wants to merge 2 commits intomicrosoft:mainfrom
themechbro:feat/profiler-dashboard
Draft

feat: implement React dashboard for session profiling (Issue #44, Part 2)#77
themechbro wants to merge 2 commits intomicrosoft:mainfrom
themechbro:feat/profiler-dashboard

Conversation

@themechbro
Copy link
Copy Markdown
Contributor

This PR implements the frontend UI for the session profiling feature requested in Issue #44.

Note: This is Part 2 of the implementation and is designed to consume the strict JSON data contract established in PR #72.

Features:

  • Replaced the legacy regex parser with a clean, strict JSON parser (lib/parser.js).
  • Added an ExecutiveSummary component for high-level token waste metrics.
  • Implemented color-coded severity badges for the new F-NNN finding IDs.
  • Built a dedicated Remediation Plan table mapping directly to PromptKit components.

I recommend reviewing and merging PR #72 first to lock in the backend schema before merging this UI layer.

@themechbro themechbro force-pushed the feat/profiler-dashboard branch from e8927e7 to 90a76d6 Compare March 29, 2026 14:05
@themechbro
Copy link
Copy Markdown
Contributor Author

@Alan-Jowett — Now that #72 is merged, I've rebased this UI branch onto main. The diff is now clean and focuses strictly on the React dashboard and the JSON parser logic. Ready for your review!

@Alan-Jowett
Copy link
Copy Markdown
Member

Hey @themechbro — thanks for the continued work on the profiler! I wanted to share some thoughts on this PR's fit within the PromptKit repo.

PromptKit is a prompt library — every file in the repo is Markdown or YAML that LLMs consume. There's no build system, no runtime, and no application code. The project's value comes from being lightweight and dependency-free: anyone can clone it and start assembling prompts immediately. (The existing npm package in cli/ is a thin distribution wrapper for the prompt files — it doesn't add runtime dependencies or a build step. A React dashboard is architecturally different.)

A React dashboard with npm dependencies, build tooling, and JavaScript application code is a different kind of project. Adding it here would change the nature of the repository — introducing a package.json, node_modules, build steps, and runtime code into what is currently a pure content library.

That said, a visualization tool for session profiling output is genuinely useful! I'd suggest a couple of options:

  1. Separate repository: Publish the dashboard as its own project (e.g., promptkit-profiler-ui) that consumes the JSON output from the profile-session template. This is the cleanest separation — the template defines the data contract, the dashboard visualizes it.

  2. Community tools directory: We could add a docs/community-tools.md that links to external tools built on PromptKit output — your dashboard would be a great first entry.

I don't want to discourage the work you've done — the component architecture (ExecutiveSummary, severity badges, Remediation Plan table) looks well thought out. It just belongs in its own home rather than inside the prompt library itself.

Note: PR #72 (the profile-session template) has already been merged — so the data contract your dashboard consumes is now part of the library. You can publish the dashboard separately and reference the template's output schema directly. Happy to help with that if you'd like!

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.

2 participants