copilot-tracer 1.0.2 → 1.0.4

package/README.md

@@ -1,8 +1,8 @@
 # copilot-tracer
 
-Real-time tracing and monitoring tool for **GitHub Copilot CLI** and **VS Code Copilot extension**.
+Real-time tracing and prompt-refinement tool for **GitHub Copilot CLI** and **VS Code Copilot extension**.
 
-Captures every prompt, response, token usage, AI credits, tool calls, skill invocations and duration — all in one place. Works via native **OpenTelemetry (OTLP)** integration built into GitHub Copilot. No wrapper, no binary replacement, no ACP proxy needed.
+Captures every prompt, response, token usage, AI credits, tool calls, skill invocations, and duration — all in one place. It also includes a prompt optimizer that rewrites prompts using role grounding, imperative clarity, output formatting, constraint injection, and noise removal. Works via native **OpenTelemetry (OTLP)** integration built into GitHub Copilot, with an optional ACP proxy mode for live CLI tracing.
 
 ---
 
@@ -10,11 +10,13 @@ Captures every prompt, response, token usage, AI credits, tool calls, skill invo
 
 - **Zero-intrusion capture** — uses Copilot's built-in OTel support. Set 2 env vars, done.
 - **Works everywhere** — captures both Copilot CLI (`copilot -p "..."`) and VS Code Copilot Chat
+- **Prompt refinement** — rewrites prompts with stronger instructions, clearer outputs, and less noise
 - **Real-time web UI** — live dashboard at `http://localhost:4747` with dark theme
 - **Full prompt & response** — see exactly what you sent and what Copilot replied
 - **Token breakdown** — input, output, cached, reasoning, written tokens per request
 - **AI Credits tracking** — matches exactly what Copilot terminal reports (e.g. `2.59 cr`)
 - **Tool call visibility** — see every tool/skill/MCP invoked during a session
+- **ACP proxy mode** — wrap the Copilot CLI to trace live JSON-RPC traffic when needed
 - **Persistent storage** — SQLite at `~/.copilot-tracer/traces.db`, survives restarts
 - **Console + Web UI** — CLI table view or browser dashboard, your choice
 
@@ -175,6 +177,44 @@ Live updating table in terminal. Same columns as web UI. TOTALS row pinned at to
 
 ---
 
+## Prompt Refinement
+
+The web UI exposes `POST /api/refine` to improve a raw prompt before sending it to Copilot.
+
+It currently applies these techniques:
+
+- **Role grounding** — adds an expert persona when the prompt has none
+- **Imperative clarity** — turns soft phrasing into direct instructions
+- **Output format** — asks for JSON, markdown, bullets, or steps when missing
+- **Reasoning guidance** — adds step-by-step thinking for multi-step tasks
+- **Noise removal** — strips filler like “please”, “could you”, and “I think”
+- **Constraint injection** — adds language, tone, length, and audience constraints
+- **Redundancy cleanup** — removes repeated or conflicting instructions
+
+Example request:
+
+```bash
+curl -s http://localhost:4747/api/refine \
+  -H 'content-type: application/json' \
+  -d '{"prompt":"help me write a plan for migrating a monolith"}'
+```
+
+Response shape:
+
+```json
+{
+  "ok": true,
+  "optimized": "…",
+  "issues": [],
+  "techniques": [],
+  "origTok": 10,
+  "newTok": 22,
+  "inputSavingPct": 0
+}
+```
+
+---
+
 ## CLI Flags
 
 | Flag | Description |

package/dist/otlpReceiver.js

@@ -108,15 +108,14 @@ function processSpans(spans, sessionId) {
                                 return text.trim();
                             })
                                 .join(' ')
-                                .trim()
-                                .slice(0, 300);
+                                .trim();
                         }
                         else {
-                            promptText = (userMsg?.content ?? String(raw)).slice(0, 300);
+                            promptText = (userMsg?.content ?? String(raw)).trim();
                         }
                     }
                     catch {
-                        promptText = String(raw).slice(0, 300);
+                        promptText = String(raw).trim();
                     }
                 }
             }

package/dist/webServer.js

@@ -3,6 +3,7 @@ import { createServer } from 'http';
 import { Server } from 'socket.io';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 import { getTraces, getTrace, getSessionSummary } from './db.js';
 import { traceEvents } from './proxy.js';
 import { registerOtlpRoutes } from './otlpReceiver.js';
@@ -22,6 +23,52 @@ export function startWebServer(port = 4747, sessionId) {
         const traces = getTraces(sid, 200);
         res.json(traces);
     });
+    app.post('/api/refine', async (req, res) => {
+        const { prompt } = req.body;
+        if (!prompt?.trim()) {
+            res.status(400).json({ error: 'prompt required' });
+            return;
+        }
+        const origTok = Math.ceil(prompt.trim().length / 4);
+        // Meta-prompt grounded in prompt engineering best practices (promptingguide.ai)
+        const metaPrompt = `You are a world-class prompt engineering expert. Rewrite the user prompt below using these techniques where applicable:
+1. Role grounding — prepend "You are a <expert role>" if no persona is set
+2. Imperative clarity — replace indirect/hedging phrases with direct imperatives (Explain / List / Generate / Analyze)
+3. Output format — specify format (JSON, markdown, numbered steps, bullet list) when missing
+4. Chain-of-thought — add "Think step by step." for multi-step reasoning or debugging tasks
+5. Remove noise — remove filler (please, could you, I want you to, thank you, if you don't mind, maybe, I think, kind of, sort of)
+6. Add constraints — specify language, length, audience, tone if not present
+7. Redundancy — collapse repeated or contradictory instructions
+
+Respond ONLY with a valid JSON object (no markdown, no code fences):
+{"optimized":"<rewritten prompt>","issues":[{"type":"warn","msg":"<what was wrong>"}],"techniques":["<applied>"]}
+
+Prompt to optimize:
+${prompt.trim()}`;
+        try {
+            const raw = execSync(`copilot -p ${JSON.stringify(metaPrompt)} --model claude-sonnet-4.6`, { timeout: 45000, encoding: 'utf8', maxBuffer: 2 * 1024 * 1024 });
+            // Strip copilot CLI chrome (trailing "Changes  +0 -0" line, ANSI codes)
+            const cleaned = raw
+                .replace(/\x1b\[[0-9;]*m/g, '') // ANSI
+                .replace(/\r/g, '')
+                .split('\n')
+                .filter(l => !/^Changes\s+\+\d/.test(l.trim()))
+                .join('\n')
+                .trim();
+            // Extract JSON — copilot may wrap with prose
+            const jsonMatch = cleaned.match(/\{[\s\S]*\}/);
+            if (!jsonMatch)
+                throw new Error('No JSON in response: ' + cleaned.slice(0, 200));
+            const result = JSON.parse(jsonMatch[0]);
+            const newTok = Math.ceil((result.optimized ?? '').length / 4);
+            const inputSavingPct = origTok > 0 ? Math.max(0, Math.round((1 - newTok / origTok) * 100)) : 0;
+            res.json({ ok: true, ...result, origTok, newTok, inputSavingPct });
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            res.status(500).json({ ok: false, error: msg });
+        }
+    });
     app.get('/api/traces/:id', (req, res) => {
         const trace = getTrace(req.params.id);
         if (!trace)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "copilot-tracer",
-  "version": "1.0.2",
-  "description": "Real-time monitor and tracing tool for GitHub Copilot CLI — tracks tokens, AI credits, MCP/skill/agent calls with console and web UI",
+  "version": "1.0.4",
+  "description": "Real-time tracing and prompt-refinement companion for GitHub Copilot CLI and VS Code Copilot — tracks tokens, AI credits, tool calls, and refined prompts with console and web UI",
   "keywords": [
     "copilot",
     "github-copilot",

package/web/index.html

@@ -5,6 +5,126 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Copilot Tracer</title>
 <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
+<script type="module">
+  import * as webllm from 'https://esm.run/@mlc-ai/web-llm';
+
+  // ─── REFINE ENGINE — Phase 1: instant heuristics · Phase 2: webLLM ───────
+  let refineOpen = false;
+  let engine = null;
+
+  const tok = t => Math.ceil((t || '').length / 4);
+
+  // Phase 1 — instant local analysis
+  function analyzePrompt(t) {
+    const issues = [], suggestions = [];
+    if ([/\bplease\b/,/\bcould you\b/,/\bcan you\b/,/\bI want you to\b/,/\bkindly\b/,/\bthank you\b/,/\bif you don.t mind\b/].some(r => r.test(t)))
+      issues.push({ type:'warn', msg:'Filler / polite noise (please, can you, thank you…)' });
+    if ([/\bI think\b/,/\bmaybe\b/,/\bkind of\b/,/\bsort of\b/].some(r => r.test(t)))
+      issues.push({ type:'warn', msg:'Hedging language reduces precision (I think, maybe, kind of…)' });
+    if (/\bhelp me with\b|\bhelp me understand\b/i.test(t))
+      issues.push({ type:'warn', msg:'Indirect phrasing — use an imperative verb: Explain / List / Generate / Analyze' });
+    if (/\bmake it (?:good|nice|better|great)\b/i.test(t))
+      issues.push({ type:'warn', msg:'Vague quality instruction — specify criteria (concise, bullet-list, ≤200 words…)' });
+    const hasFormat = /\bjson\b|\bmarkdown\b|\bbullet\b|\bnumbered\b|\bstep.by.step\b/i.test(t);
+    if (!hasFormat && t.length > 60) issues.push({ type:'info', msg:'No output format — add: "Respond in bullet points / JSON / numbered steps"' });
+    const hasRole = /\byou are\b|\bact as\b|\bexpert\b|\bsenior\b/i.test(t);
+    if (!hasRole && t.length > 80) issues.push({ type:'info', msg:'No role/persona — prepend "You are a <expert>." for better quality' });
+    if (!/\bstep by step\b|\bthink\b/i.test(t) && /\bdebug\b|\banalyze\b|\bcompare\b|\bdesign\b/i.test(t))
+      issues.push({ type:'info', msg:'Complex task — add "Think step by step." for chain-of-thought reasoning' });
+    if (!issues.length) issues.push({ type:'info', msg:'No obvious issues — prompt looks well-structured' });
+    if (!hasRole && t.length > 80) suggestions.push('Add a role: "You are a senior software engineer."');
+    if (!hasFormat && t.length > 60) suggestions.push('Specify output: "Respond in numbered steps."');
+    return { issues, suggestions };
+  }
+
+  function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+  window.toggleRefine = async function(prompt) {
+    const panel = document.getElementById('refine-panel');
+    if (!panel) return;
+    if (refineOpen) { panel.classList.remove('open'); refineOpen = false; return; }
+    refineOpen = true;
+    panel.classList.add('open');
+
+    const origTok = tok(prompt);
+    const { issues, suggestions } = analyzePrompt(prompt);
+
+    const issueHtml = issues.map(i => `<div class="refine-issue ${i.type}">⚠ ${escHtml(i.msg)}</div>`).join('');
+    const suggHtml = suggestions.length
+      ? `<div class=refine-section-title>Quick Suggestions</div><div class=refine-suggestions>${suggestions.map(s=>`<div class=refine-suggestion>💡 ${escHtml(s)}</div>`).join('')}</div>`
+      : '';
+
+    panel.innerHTML = `
+      <div class=refine-section-title>Issues Found</div>
+      <div class=refine-issues>${issueHtml}</div>
+      ${suggHtml}
+      <div class=refine-section-title>Optimized Prompt</div>
+      <div id=refine-optimizing style="color:#8b949e;font-size:12px;padding:6px 0">
+        <span class=refine-spinner></span> Optimizing with WebLLM…
+        <div id=refine-progress style="margin-top:5px;font-size:10px;color:#58a6ff"></div>
+      </div>
+      <div class=refine-optimized id=refined-text style="display:none"></div>
+      <div id=refine-actions style="display:none">
+        <button class="refine-copy-btn" onclick="copyRefined()">📋 Copy optimized prompt</button>
+        <div class=refine-stats id=refine-stats></div>
+      </div>`;
+
+    // Phase 2 — webLLM
+    const progressEl = () => document.getElementById('refine-progress');
+    const optimizingEl = document.getElementById('refine-optimizing');
+    const refinedEl = document.getElementById('refined-text');
+    const actionsEl = document.getElementById('refine-actions');
+
+    try {
+      if (!engine) {
+        progressEl() && (progressEl().textContent = 'Loading model… (first run ~650 MB, cached after)');
+        engine = await webllm.CreateMLCEngine('Llama-3.2-1B-Instruct-q4f16_1-MLC', {
+          initProgressCallback: p => { const el = progressEl(); if (el) el.textContent = p.text || ''; }
+        });
+      }
+      if (progressEl()) progressEl().textContent = 'Generating…';
+
+      const sys = `You are a prompt engineering expert. Rewrite the user prompt by:
+1. Adding a role ("You are a <expert>.") if missing
+2. Replacing indirect/hedging phrases with direct imperatives (Explain / List / Generate)
+3. Adding output format (numbered steps / bullet list / JSON) if missing
+4. Adding "Think step by step." for complex tasks (debug, analyze, compare)
+5. Removing filler words (please, can you, thank you, maybe, I think)
+6. Adding constraints (language, length, audience) if missing
+Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
+
+      const reply = await engine.chat.completions.create({
+        messages: [{ role:'system', content:sys }, { role:'user', content:prompt }],
+        temperature: 0.3,
+        max_tokens: 512,
+      });
+
+      const optimized = (reply.choices[0]?.message?.content || '').trim();
+      const newTok = tok(optimized);
+      const pct = origTok > 0 ? Math.max(0, Math.round((1 - newTok / origTok) * 100)) : 0;
+      const col = pct >= 20 ? '#7ee787' : pct >= 5 ? '#d29922' : '#8b949e';
+
+      optimizingEl.style.display = 'none';
+      refinedEl.textContent = optimized;
+      refinedEl.style.display = 'block';
+      actionsEl.style.display = 'block';
+      document.getElementById('refine-stats').innerHTML = `
+        <div class=refine-stat><div class=rv style=color:${col}>${pct > 0 ? '-'+pct+'%' : '0%'}</div><div class=rl>Input Saving</div></div>
+        <div class=refine-stat><div class=rv style=color:#8b949e>${origTok} → ${newTok}</div><div class=rl>Approx Tokens</div></div>`;
+    } catch(e) {
+      optimizingEl.innerHTML = `<span style="color:#f85149">⚠ WebLLM error: ${escHtml(e.message)}</span>`;
+    }
+  };
+
+  window.copyRefined = function() {
+    const el = document.getElementById('refined-text');
+    if (!el) return;
+    navigator.clipboard.writeText(el.innerText).then(() => {
+      const btn = document.querySelector('.refine-copy-btn');
+      if (btn) { btn.textContent = '✅ Copied!'; setTimeout(() => btn.textContent = '📋 Copy optimized prompt', 1500); }
+    });
+  };
+</script>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { background: #0d1117; color: #c9d1d9; font-family: 'Segoe UI', system-ui, monospace; font-size: 13px; }
@@ -68,7 +188,7 @@
   .detail-box { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 10px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }
   .detail-box.reasoning { color: #d2a8ff; }
   .detail-box.response { color: #56d364; }
-  .detail-box.prompt { color: #e6edf3; }
+  .detail-box.prompt { color: #e6edf3; max-height: none; overflow: visible; }
 
   /* Call graph */
   .call-tree { font-family: monospace; font-size: 12px; }
@@ -83,7 +203,30 @@
   .call-io .label { color: #58a6ff; margin-right: 4px; }
   .call-io.error { color: #f85149; }
 
-  /* Token detail modal */
+  /* Refine panel */
+  .refine-btn { background: #1f2d1f; border: 1px solid #238636; color: #7ee787; border-radius: 6px; padding: 5px 12px; font-size: 11px; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
+  .refine-btn:hover { background: #238636; color: #fff; }
+  .refine-panel { margin-top: 12px; background: #0d1117; border: 1px solid #238636; border-radius: 8px; padding: 14px; display: none; }
+  .refine-panel.open { display: block; }
+  .refine-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #8b949e; margin-bottom: 6px; margin-top: 12px; }
+  .refine-section-title:first-child { margin-top: 0; }
+  .refine-issues { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
+  .refine-issue { font-size: 11px; padding: 4px 8px; border-radius: 4px; background: #21262d; border-left: 3px solid; }
+  .refine-issue.warn  { border-color: #d29922; color: #d29922; }
+  .refine-issue.info  { border-color: #58a6ff; color: #8b949e; }
+  .refine-optimized { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 10px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: #7ee787; max-height: 260px; overflow: auto; }
+  .refine-stats { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
+  .refine-stat { background: #21262d; border-radius: 6px; padding: 6px 12px; text-align: center; }
+  .refine-stat .rv { font-size: 18px; font-weight: 700; }
+  .refine-stat .rl { font-size: 10px; color: #8b949e; margin-top: 1px; }
+  .refine-copy-btn { margin-top: 10px; background: #21262d; border: 1px solid #30363d; color: #8b949e; border-radius: 6px; padding: 4px 12px; font-size: 11px; cursor: pointer; }
+  .refine-copy-btn:hover { color: #e6edf3; border-color: #58a6ff; }
+  .refine-techniques { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
+  .refine-tag { background: #0d2230; border: 1px solid #1f6feb; color: #58a6ff; border-radius: 10px; padding: 2px 9px; font-size: 10px; }
+  .refine-suggestions { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
+  .refine-suggestion { font-size: 11px; padding: 4px 8px; border-radius: 4px; background: #0d2230; border-left: 3px solid #1f6feb; color: #8b949e; }
+  @keyframes refine-spin { to { transform: rotate(360deg); } }
+  .refine-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #30363d; border-top-color: #58a6ff; border-radius: 50%; animation: refine-spin .7s linear infinite; vertical-align: middle; margin-right: 4px; }
   .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
   .modal-overlay.open { display: flex; }
   .modal { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px; width: 560px; max-height: 80vh; overflow: auto; }
@@ -265,12 +408,15 @@
   }
 
   function renderDetail(t) {
+    refineOpen = false;
     document.getElementById('detail-title').textContent = truncate(t.prompt || 'Trace Detail', 50);
     const body = document.getElementById('detail-body');
     body.innerHTML = `
       <div class="detail-section">
         <h4>Prompt</h4>
         <div class="detail-box prompt">${escHtml(t.prompt||'')}</div>
+        <button class="refine-btn" onclick="toggleRefine(${JSON.stringify(t.prompt||'').replace(/</g,'\\u003c').replace(/"/g,'&quot;')})">✨ Refine Prompt</button>
+        <div class="refine-panel" id="refine-panel"></div>
       </div>
       ${t.reasoning ? `
       <div class="detail-section">