v0.23.2 — wire Phase 1 endpoints into the dashboard UI (the missing user-facing half)

some-random-agent · claude · some-random-agent · commit e17b4ad3bbf9 · 2026-05-04T10:29:14.000-04:00
v0.23.0 shipped the lint / polisher / security-scan / exemplar-tagging API
endpoints but FORGOT to add buttons to the dashboard. The features were
unreachable through the UI — only direct curl/SQL access worked.

This patch closes the gap. Per skill row in the Active Skills panel:

  ✨ Polish     →  POST /dashboard/skills/:id/polish/html
                   Side-by-side original-vs-polished diff with lint badge,
                   Apply button (disabled when polished == original or lint fails)
  Recent runs  →  GET  /dashboard/skills/:id/runs
                   Last 50 skill_runs with status / score / agent / run_id;
                   each row has ☆ Tag exemplar / ★ Exemplar disabled
  🛡 Security  →  GET  /dashboard/skills/:id/security
                   Last 30 security scan rows with verdict, source attribution,
                   collapsible per-failure detail with severity color-coding
  ☆/★ button   →  POST /dashboard/skill-runs/:run_id/tag-exemplar/html
                   Operator clicks ☆, browser prompt asks for note, server
                   stores tag + note + timestamp, swaps the row inline

Fixes:
  - 30s skills auto-poll now pauses while ANY .skill-edit-zone is non-empty
    so the polish/runs/security expansion isn't wiped out mid-interaction
  - HTMX URL-encodes the HX-Prompt header (HTTP can't carry raw non-ASCII).
    Server now decodeURIComponent's it before storing — without this fix
    the operator's note lands in PG as "Hello%20%E2%80%94" instead of
    "Hello —". Caught DURING browser click-through (PG row inspection).

Verification — all surfaces clicked through Playwright with real telemetry
on Test_Agent_Coordination's developer-debugging-methodology@1.1@global:

  - 10 real skill_runs render in the runs panel
  - ☆ click → button swap to ★ Exemplar [disabled] → PG row updated with
    decoded note, tagged_by=operator, tagged_at=NOW()
  - ✨ click → polish preview renders with side-by-side diff, lint badge,
    Apply button correctly disabled for already-good descriptions
  - 🛡 click → 2 prior scan rows render with 8/8 PASS verdict and
    operator source attribution from the v0.23.0 API E2E

The browser pass also exposed the URL-encode bug. That's the value of
real user-level testing over backend-only verification — bugs surface
where the user actually clicks.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "zc-ctx",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Secure memory & context optimization MCP plugin for Claude Code — drop-in replacement for context-mode with credential isolation, SSRF protection, MemGPT-style persistent memory, and A2A multi-agent broadcast channel. 25+ MCP tools, HMAC-chained tool_calls + outcomes, per-agent HKDF subkey isolation, Postgres RLS, work-stealing queue, self-improving skills, and Agent Notebook Model (Read→Summary redirect). MIT license.",
   "type": "mcp",
   "mcp": {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zc-ctx",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Secure memory & context optimization MCP plugin for Claude Code — drop-in replacement for context-mode with credential isolation, SSRF protection, MemGPT-style persistent memory, and A2A multi-agent broadcast channel",
   "keywords": [
     "claude-code",
diff --git a/scripts/_e2e_real_exemplar.mjs b/scripts/_e2e_real_exemplar.mjs
@@ -0,0 +1,49 @@
+// v0.23.0 Phase 1 F — verify REAL exemplar (run-8c34b318-f98) flows into proposer prompt
+import { getExemplarRuns } from "/app/dist/skills/storage_dual.js";
+import { buildProposerPrompt } from "/app/dist/skills/mutator.js";
+import { getActiveSkill } from "/app/dist/skills/storage_dual.js";
+import { DatabaseSync } from "node:sqlite";
+
+const skillId = "developer-debugging-methodology";
+const scope   = "global";
+
+console.log("=== Step 1: getExemplarRuns for the live skill ===");
+// First get the active version's full id
+const db = new DatabaseSync(":memory:");
+const exemplars = await getExemplarRuns("developer-debugging-methodology@1.1@global", 5);
+console.log(`Found ${exemplars.length} exemplar(s) for developer-debugging-methodology@1.1@global`);
+for (const e of exemplars) {
+  console.log(`  - run_id=${e.run_id} note="${e.note}"`);
+  console.log(`    inputs=${JSON.stringify(e.inputs).slice(0, 100)}...`);
+}
+
+console.log("\n=== Step 2: Build a proposer prompt using the live skill as parent ===");
+const parent = await getActiveSkill(db, "developer-debugging-methodology", "global");
+if (!parent) {
+  console.log("FAIL: parent skill not found via getActiveSkill");
+  process.exit(1);
+}
+console.log(`Parent: ${parent.skill_id}, body length: ${parent.body.length}`);
+
+const prompt = buildProposerPrompt({
+  parent,
+  recent_runs:    [],
+  failure_traces: ["example failure trace 1"],
+  fixtures:       parent.frontmatter.fixtures ?? [],
+  exemplars,
+});
+
+const idx = prompt.indexOf("## Operator-tagged exemplars");
+if (idx === -1) {
+  console.log("FAIL: prompt missing exemplar section");
+  process.exit(1);
+}
+const end = prompt.indexOf("## ", idx + 30);
+const section = prompt.slice(idx, end !== -1 ? end : idx + 800);
+console.log("\nExemplar section in prompt:");
+console.log("─".repeat(60));
+console.log(section);
+console.log("─".repeat(60));
+
+console.log(`\nResult: PASS — real exemplar (${exemplars[0]?.run_id ?? "?"}) flows into proposer prompt`);
+console.log(`Total prompt length: ${prompt.length} chars`);
diff --git a/src/api-server.ts b/src/api-server.ts
@@ -975,6 +975,190 @@ export async function createApiServer(storeOverride?: Store) {
     }
   });
 
+  // v0.23.2 — HTML variant for the dashboard ⭐ button. Same DB write, but
+  // returns a single rendered <tr> so HTMX can swap it inline in the runs
+  // table. The note comes from HTMX's hx-prompt header (operator's typed
+  // input on click).
+  app.post("/dashboard/skill-runs/:run_id/tag-exemplar/html", async (request, reply) => {
+    const params = request.params as Record<string, string>;
+    const runId = String(params.run_id ?? "").trim();
+    // HTMX URL-encodes the HX-Prompt header value because HTTP headers can't
+    // carry raw non-ASCII bytes (em dashes, emoji, multi-byte UTF-8). Without
+    // decodeURIComponent here the operator's note lands in PG as
+    // "Hello%20world%20%E2%80%94" instead of "Hello world —". Caught in
+    // browser E2E click-through.
+    const headers = request.headers as Record<string, string | string[] | undefined>;
+    const promptRaw = headers["hx-prompt"];
+    let note: string | null = null;
+    if (typeof promptRaw === "string" && promptRaw.length > 0) {
+      try { note = decodeURIComponent(promptRaw).slice(0, 1024); }
+      catch { note = promptRaw.slice(0, 1024); }  // graceful fallback if not valid percent-encoding
+    }
+    if (!runId) {
+      reply.status(400).type("text/html").send(`<tr><td colspan="6" class="error">missing run_id</td></tr>`);
+      return;
+    }
+    try {
+      const { withClient } = await import("./pg_pool.js");
+      const updated = await withClient(async (c) => {
+        const r = await c.query(
+          `UPDATE skill_runs_pg
+              SET is_exemplar = TRUE,
+                  exemplar_tagged_by = $1,
+                  exemplar_tagged_at = NOW(),
+                  exemplar_note = $2
+            WHERE run_id = $3
+            RETURNING run_id, skill_id, status, outcome_score, ts, agent_id,
+                      is_exemplar, exemplar_note`,
+          ["operator", note, runId],
+        );
+        return r.rows[0] ?? null;
+      });
+      if (!updated) {
+        reply.status(404).type("text/html").send(`<tr><td colspan="6" class="error">run ${escapeHtml(runId)} not found</td></tr>`);
+        return;
+      }
+      const { renderSkillRunRow } = await import("./dashboard/render.js");
+      const html = renderSkillRunRow({
+        run_id:        updated.run_id,
+        skill_id:      updated.skill_id,
+        status:        updated.status,
+        outcome_score: updated.outcome_score === null ? null : Number(updated.outcome_score),
+        ts:            updated.ts instanceof Date ? updated.ts.toISOString() : String(updated.ts),
+        agent_id:      updated.agent_id,
+        is_exemplar:   Boolean(updated.is_exemplar),
+        exemplar_note: updated.exemplar_note,
+      });
+      reply.type("text/html").send(html);
+    } catch (e) {
+      reply.status(500).type("text/html").send(`<tr><td colspan="6" class="error">error: ${escapeHtml((e as Error).message)}</td></tr>`);
+    }
+  });
+
+  // v0.23.2 — Recent skill_runs for a skill (HTML for HTMX)
+  app.get("/dashboard/skills/:id/runs", async (request, reply) => {
+    const params = request.params as Record<string, string>;
+    const skillId = String(params.id ?? "").trim();
+    if (!skillId) {
+      reply.status(400).type("text/html").send(`<div class="error">missing skill_id</div>`);
+      return;
+    }
+    try {
+      const { withClient } = await import("./pg_pool.js");
+      const rows = await withClient(async (c) => {
+        const r = await c.query(
+          `SELECT run_id, skill_id, status, outcome_score, ts, agent_id,
+                  is_exemplar, exemplar_note
+             FROM skill_runs_pg
+             WHERE skill_id = $1
+             ORDER BY ts DESC
+             LIMIT 50`,
+          [skillId],
+        );
+        return r.rows;
+      });
+      const { renderSkillRunsFragment } = await import("./dashboard/render.js");
+      const html = renderSkillRunsFragment(skillId, rows.map((r: Record<string, unknown>) => ({
+        run_id:        String(r.run_id),
+        skill_id:      String(r.skill_id),
+        status:        String(r.status),
+        outcome_score: r.outcome_score === null ? null : Number(r.outcome_score),
+        ts:            r.ts instanceof Date ? r.ts.toISOString() : String(r.ts),
+        agent_id:      r.agent_id === null ? null : String(r.agent_id),
+        is_exemplar:   Boolean(r.is_exemplar),
+        exemplar_note: r.exemplar_note === null ? null : String(r.exemplar_note),
+      })));
+      reply.type("text/html").send(html);
+    } catch (e) {
+      reply.status(500).type("text/html").send(`<div class="error">error: ${escapeHtml((e as Error).message)}</div>`);
+    }
+  });
+
+  // v0.23.2 — Security scan history for a skill (HTML for HTMX)
+  app.get("/dashboard/skills/:id/security", async (request, reply) => {
+    const params = request.params as Record<string, string>;
+    const skillId = String(params.id ?? "").trim();
+    if (!skillId) {
+      reply.status(400).type("text/html").send(`<div class="error">missing skill_id</div>`);
+      return;
+    }
+    try {
+      const { withClient } = await import("./pg_pool.js");
+      const rows = await withClient(async (c) => {
+        const r = await c.query(
+          `SELECT scanned_at, score, passed, source, failures
+             FROM skill_security_scans_pg
+             WHERE skill_id = $1
+             ORDER BY scanned_at DESC
+             LIMIT 30`,
+          [skillId],
+        );
+        return r.rows;
+      });
+      const { renderSecurityScansFragment } = await import("./dashboard/render.js");
+      const html = renderSecurityScansFragment(skillId, rows.map((r: Record<string, unknown>) => ({
+        scanned_at: r.scanned_at instanceof Date ? r.scanned_at.toISOString() : String(r.scanned_at),
+        score:      Number(r.score),
+        passed:     Boolean(r.passed),
+        source:     String(r.source),
+        failures:   typeof r.failures === "string" ? JSON.parse(r.failures) : (r.failures as Array<{ name: string; severity: string; detail: string | null }>),
+      })));
+      reply.type("text/html").send(html);
+    } catch (e) {
+      reply.status(500).type("text/html").send(`<div class="error">error: ${escapeHtml((e as Error).message)}</div>`);
+    }
+  });
+
+  // v0.23.2 — HTML wrapper around the JSON polish endpoint. Same logic, but
+  // returns a rendered preview <div> with the diff + Apply button.
+  app.post("/dashboard/skills/:id/polish/html", async (request, reply) => {
+    const params = request.params as Record<string, string>;
+    const skillId = String(params.id ?? "").trim();
+    if (!skillId) {
+      reply.status(400).type("text/html").send(`<div class="error">missing skill_id</div>`);
+      return;
+    }
+    try {
+      const { withClient } = await import("./pg_pool.js");
+      const skill = await withClient(async (c) => {
+        const r = await c.query("SELECT skill_id, frontmatter, body, body_hmac FROM skills_pg WHERE skill_id = $1 AND archived_at IS NULL", [skillId]);
+        if (r.rows.length === 0) return null;
+        const row = r.rows[0];
+        return {
+          skill_id: row.skill_id,
+          frontmatter: typeof row.frontmatter === "string" ? JSON.parse(row.frontmatter) : row.frontmatter,
+          body: row.body,
+          body_hmac: row.body_hmac,
+          source_path: null,
+          promoted_from: null,
+          created_at: new Date().toISOString(),
+          archived_at: null,
+          archive_reason: null,
+        };
+      });
+      if (!skill) {
+        reply.status(404).type("text/html").send(`<div class="error">skill ${escapeHtml(skillId)} not found or archived</div>`);
+        return;
+      }
+      const { polishSkillDescription } = await import("./skills/polisher.js");
+      const result = await polishSkillDescription(skill);
+      const { renderPolishPreview } = await import("./dashboard/render.js");
+      const html = renderPolishPreview({
+        skill_id:      skill.skill_id,
+        original:      result.original,
+        polished:      result.polished,
+        lint_passed:   result.lint_passed,
+        lint_warnings: result.lint_warnings,
+        lint_errors:   result.lint_errors,
+        backend:       result.backend,
+        duration_ms:   result.duration_ms,
+      });
+      reply.type("text/html").send(html);
+    } catch (e) {
+      reply.status(500).type("text/html").send(`<div class="error">polish error: ${escapeHtml((e as Error).message)}</div>`);
+    }
+  });
+
   // v0.23.0 Phase 1 #2 — Polish a skill's description.
   // Operator-triggered via dashboard button. Returns the suggested polish
   // (does NOT auto-apply); operator reviews and POSTs to /apply if approved.
diff --git a/src/config.ts b/src/config.ts
@@ -37,7 +37,7 @@ const env = process.env;
 
 export const Config = {
   // ── Version ──────────────────────────────────────────────────────────────
-  VERSION: "0.23.1",
+  VERSION: "0.23.2",
 
   // ── Storage paths ────────────────────────────────────────────────────────
   DB_DIR:      join(homedir(), ".claude", "zc-ctx", "sessions"),
diff --git a/src/dashboard/render.ts b/src/dashboard/render.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "zc-ctx",`
`3`		`- "version": "0.23.1",`
	`3`	`+ "version": "0.23.2",`
`4`	`4`	`"description": "Secure memory & context optimization MCP plugin for Claude Code — drop-in replacement for context-mode with credential isolation, SSRF protection, MemGPT-style persistent memory, and A2A multi-agent broadcast channel. 25+ MCP tools, HMAC-chained tool_calls + outcomes, per-agent HKDF subkey isolation, Postgres RLS, work-stealing queue, self-improving skills, and Agent Notebook Model (Read→Summary redirect). MIT license.",`
`5`	`5`	`"type": "mcp",`
`6`	`6`	`"mcp": {`