microsoft · themechbro · Mar 25, 2026 · Mar 25, 2026
diff --git a/assembled-prompt.md b/assembled-prompt.md
diff --git a/grpc-audit.log b/grpc-audit.log
diff --git a/profile-data-optimized.json b/profile-data-optimized.json
diff --git a/profile-data.json b/profile-data.json
diff --git a/session_audit.log b/session_audit.log
diff --git a/tools/profiler-ui/.gitignore b/tools/profiler-ui/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/tools/profiler-ui/README.md b/tools/profiler-ui/README.md
@@ -0,0 +1,36 @@
+# PromptKit Execution Profiler (Issue #44)
+
+The **PromptKit Profiler** is a React-based observability dashboard designed to transform unstructured LLM session logs into actionable engineering insights. It provides deep visibility into how the AI interprets and executes complex Java gRPC audits.
+
+## ✨ Features
+
+### 🔍 Epistemic Grounding Analysis
+
+Visualizes the ratio of grounded facts versus reasoned inferences to ensure the audit remains tethered to the source code.
+
+- **Grounded (Known)**: Verified code citations and direct state observations.
+- **Reasoned (Inferred)**: Logical conclusions drawn from concurrency patterns.
+
+### 🚨 Risk Hotspot Mapping
+
+Aggregates detected defects by severity to prioritize remediation efforts for high-concurrency systems.
+
+- **Critical**: Identified thread-safety violations such as TOCTOU races and missing cancel-handler cleanups.
+- **High/Medium**: Allocation patterns causing GC pressure or unguarded error paths.
+
+## 🚀 Quick Start
+
+1. **Generate Log**: Run your audit with the GitHub CLI:
+   `gh copilot -p "Read and execute assembled-prompt.md" | Tee-Object -FilePath grpc-audit.log`
+2. **Launch UI**: Run `npm run dev` in `/tools/profiler-ui`.
+3. **Analyze**: Upload `grpc-audit.log` to see the live data breakdown.
+
+## 🛠️ Built With
+
+- **React / Next.js**: Component architecture.
+- **Recharts**: High-performance SVG data visualization.
+- **Tailwind CSS**: Professional-grade utility styling.
+
+---
+
+_Developed as part of the PromptKit library contribution for Issue #44._
diff --git a/tools/profiler-ui/app/favicon.ico b/tools/profiler-ui/app/favicon.ico
diff --git a/tools/profiler-ui/app/globals.css b/tools/profiler-ui/app/globals.css
@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/tools/profiler-ui/app/layout.js b/tools/profiler-ui/app/layout.js
@@ -0,0 +1,28 @@
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}
diff --git a/tools/profiler-ui/app/page.js b/tools/profiler-ui/app/page.js
@@ -0,0 +1,184 @@
+"use client";
+import React, { useState } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+// Note: For this to work, ensure parseProfileData just runs JSON.parse(text)
+import { parseProfileData } from "../lib/parser"; 
+
+export default function Home() {
+  const [profile, setProfile] = useState(null);
+
+  const handleFileUpload = async (event) => {
+    const file = event.target.files[0];
+    const text = await file.text();
+    setProfile(parseProfileData(text));
+  };
+
+  // Helper function to color-code severity badges
+  const getSeverityColor = (severity) => {
+    switch (severity?.toLowerCase()) {
+      case "critical": return "bg-red-900/50 text-red-400 border-red-800";
+      case "high": return "bg-orange-900/50 text-orange-400 border-orange-800";
+      case "medium": return "bg-amber-900/50 text-amber-400 border-amber-800";
+      case "low": return "bg-blue-900/50 text-blue-400 border-blue-800";
+      default: return "bg-slate-800 text-slate-300 border-slate-700";
+    }
+  };
+
+  return (
+    <main className="p-10 bg-slate-950 text-white min-h-screen font-sans">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-3xl font-bold mb-2">PromptKit Profiler v1</h1>
+        <p className="text-slate-400 mb-8">
+          AI-Driven Token & Structural Analysis (Issue #44)
+        </p>
+
+        {/* Upload Section */}
+        <div className="mb-10 p-6 border-2 border-dashed border-slate-700 rounded-xl bg-slate-900/50">
+          <input
+            type="file"
+            onChange={handleFileUpload}
+            className="block w-full text-sm text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-900/50 file:text-blue-400 hover:file:bg-blue-900/70 cursor-pointer"
+          />
+        </div>
+
+        {profile && (
+          <div className="space-y-8">
+
+            {/* 1. Executive Summary Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="bg-slate-900 p-6 rounded-xl border border-slate-800 col-span-2">
+                <h3 className="text-slate-400 text-sm mb-2 uppercase font-semibold">Executive Narrative</h3>
+                <p className="text-slate-200 text-lg leading-relaxed">
+                  {profile.executiveSummary.narrative}
+                </p>
+              </div>
+              <div className="grid grid-rows-2 gap-4">
+                <div className="bg-slate-900 p-6 rounded-xl border border-red-900/30 flex flex-col justify-center">
+                  <h3 className="text-slate-400 text-xs uppercase mb-1">Wasteful Tokens</h3>
+                  <p className="text-4xl font-bold text-red-400">
+                    {profile.executiveSummary.wastefulTokens.toLocaleString()}
+                  </p>
+                  <p className="text-xs text-slate-500 mt-1">
+                    {profile.executiveSummary.wastePercentage}% of total session
+                  </p>
+                </div>
+                <div className="bg-slate-900 p-6 rounded-xl border border-slate-800 flex flex-col justify-center">
+                  <h3 className="text-slate-400 text-xs uppercase mb-1">Total Session Tokens</h3>
+                  <p className="text-3xl font-bold text-slate-200">
+                    {profile.executiveSummary.totalTokens.toLocaleString()}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* 2. Token Waste Chart (Aggregated from Findings) */}
+            <div className="bg-slate-900 p-6 rounded-xl border border-slate-800">
+              <h2 className="text-xl font-semibold mb-6 text-blue-400">
+                Waste Attribution by Component
+              </h2>
+              <div className="h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={profile.findings}>
+                    <XAxis 
+                      dataKey="component" 
+                      stroke="#64748b" 
+                      fontSize={10} 
+                      tickFormatter={(val) => val.split('/').pop().substring(0, 15) + '...'} 
+                    />
+                    <YAxis stroke="#64748b" fontSize={12} />
+                    <Tooltip
+                      contentStyle={{ backgroundColor: "#0f172a", border: "1px solid #1e293b", borderRadius: "8px" }}
+                      itemStyle={{ color: "#f8fafc" }}
+                    />
+                    <Bar dataKey="tokenCost" fill="#f87171" radius={[4, 4, 0, 0]} name="Wasted Tokens" />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+            {/* 3. Inefficiency Findings Table */}
+            <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
+              <div className="p-4 border-b border-slate-800">
+                <h2 className="text-lg font-semibold text-slate-200">
+                  Detected Inefficiencies
+                </h2>
+              </div>
+              <table className="w-full text-left">
+                <thead className="bg-slate-800/50 text-slate-400 text-xs uppercase">
+                  <tr>
+                    <th className="p-4 font-medium w-24">ID</th>
+                    <th className="p-4 font-medium w-32">Severity</th>
+                    <th className="p-4 font-medium">Description</th>
+                    <th className="p-4 font-medium w-32 text-right">Cost</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-800">
+                  {profile.findings.map((finding) => (
+                    <tr key={finding.id} className="text-sm hover:bg-slate-800/30 transition-colors">
+                      <td className="p-4 text-slate-400 font-mono">{finding.id}</td>
+                      <td className="p-4">
+                        <span className={`px-2 py-1 rounded-md border text-xs font-medium uppercase tracking-wider ${getSeverityColor(finding.severity)}`}>
+                          {finding.severity}
+                        </span>
+                      </td>
+                      <td className="p-4 text-slate-200">
+                        <p className="mb-1">{finding.description}</p>
+                        <p className="text-xs text-slate-500 font-mono">{finding.component}</p>
+                      </td>
+                      <td className="p-4 text-red-400 font-mono text-right">
+                        {finding.tokenCost}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* 4. Remediation Plan Table */}
+            <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
+              <div className="p-4 border-b border-slate-800">
+                <h2 className="text-lg font-semibold text-emerald-400">
+                  Remediation Plan
+                </h2>
+              </div>
+              <table className="w-full text-left">
+                <thead className="bg-slate-800/50 text-slate-400 text-xs uppercase">
+                  <tr>
+                    <th className="p-4 font-medium w-1/4">Component</th>
+                    <th className="p-4 font-medium w-1/2">Proposed Change</th>
+                    <th className="p-4 font-medium w-1/4">Risk Factor</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-800">
+                  {profile.remediationPlan.map((rec, i) => (
+                    <tr key={i} className="text-sm hover:bg-slate-800/30">
+                      <td className="p-4 text-slate-400 font-mono text-xs align-top">
+                        {rec.component}
+                      </td>
+                      <td className="p-4 text-emerald-100 align-top">
+                        <p className="mb-2">{rec.change}</p>
+                        <p className="text-xs text-emerald-500 font-mono">Est. Savings: {rec.expectedSavings} tokens</p>
+                      </td>
+                      <td className="p-4 text-amber-500/80 text-xs align-top">
+                        {rec.risk}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
diff --git a/tools/profiler-ui/components/ExecutiveSummary.jsx b/tools/profiler-ui/components/ExecutiveSummary.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function ExecutiveSummary({ summaryData }) {
+  const { narrative, totalTokens, wastefulTokens, wastePercentage, topOptimizations } = summaryData;
+
+  return (
+    <div className="p-6 mb-8 border rounded-lg shadow-sm bg-white">
+      <h2 className="text-2xl font-bold mb-4">Executive Summary</h2>
+
+      <p className="text-gray-700 mb-6 text-lg">
+        {narrative}
+      </p>
+
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <div className="p-4 bg-blue-50 rounded border border-blue-100">
+          <p className="text-sm text-blue-600 font-semibold uppercase">Total Tokens</p>
+          <p className="text-3xl font-bold">{totalTokens.toLocaleString()}</p>
+        </div>
+        <div className="p-4 bg-red-50 rounded border border-red-100">
+          <p className="text-sm text-red-600 font-semibold uppercase">Wasteful Tokens</p>
+          <p className="text-3xl font-bold">{wastefulTokens.toLocaleString()}</p>
+        </div>
+        <div className="p-4 bg-orange-50 rounded border border-orange-100">
+          <p className="text-sm text-orange-600 font-semibold uppercase">Waste Percentage</p>
+          <p className="text-3xl font-bold">{wastePercentage}%</p>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="font-semibold text-lg mb-2">Top Optimizations</h3>
+        <ul className="list-disc pl-5 space-y-1 text-gray-700">
+          {topOptimizations.map((opt, index) => (
+            <li key={index}>
+              {opt.description} <span className="font-mono text-sm text-green-600">(~{opt.savings} tokens)</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}