Add demos created during offsite

[phutchins]

Note

Low Risk
Low risk since changes are isolated to a new demos/ package and do not affect production code paths; primary risk is repo bloat and dependency/Node version friction from adding Vite/React and a large lockfile.

Overview
Adds a new demos/ Vite + React app (with pnpm lockfile) to run offsite JSX demos locally via pnpm dev, including a top-right demo switcher and /?demo= URL selection.

Introduces two self-contained demo UIs: dev-reputation-mock (simulated reputation scoring pipeline with storage/on-chain verification flow) and sp-analysis (simulated IPC compute job lifecycle, output commit, registry query, and consumer routing), plus a standalone sp-analysis-web/ipc_compute.html version.

^{Written by Cursor Bugbot for commit dab0976. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Last layer renders both active and completed indicators
  • Changed activeLayer to only depend on running state (not allDone), so when the pipeline completes, activeLayer becomes -1 and only the completed checkmark is shown.
• ✅ Fixed: Unused completedLayers variable is dead code
  • Removed the unused completedLayers variable and its computation, since only layerComplete is passed to IPCLayerDiagram.

Or push these changes by commenting:

@cursor push f6fe630ba2

Preview (f6fe630ba2)

diff --git a/demos/dev-reputation-mock/ipc_reputation_demo.jsx b/demos/dev-reputation-mock/ipc_reputation_demo.jsx
--- a/demos/dev-reputation-mock/ipc_reputation_demo.jsx
+++ b/demos/dev-reputation-mock/ipc_reputation_demo.jsx
@@ -336,8 +336,6 @@
 
   // Derive which layer is currently active and which are completed
   const curLayer = step >= 0 && step < STEPS.length ? STEPS[step].layer : -1;
-  const completedLayers = new Set();
-  STEPS.forEach((s, i) => { if (done.has(i)) completedLayers.add(s.layer); });
   // A layer is only "completed" if ALL its steps are done
   const layerComplete = new Set();
   [0,1,2].forEach(lid => {
@@ -369,7 +367,7 @@
 
   const curS  = step >= 0 && step < STEPS.length ? STEPS[step] : null;
   const curPR = curS && curS.pr !== undefined ? DEV.prs[curS.pr] : null;
-  const activeLayer = running || allDone ? curLayer : -1;
+  const activeLayer = running ? curLayer : -1;
 
   return (
     <div>

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[cursor]

Last layer renders both active and completed indicators

Low Severity

When the pipeline completes, activeLayer is set to curLayer (2) because allDone is true, even though running is false. Since the last layer is also in layerComplete, IPCLayerDiagram renders both the pulsing active dot and the completed checkmark simultaneously, and applies the .np box-shadow pulse animation to a completed layer. The sp-analysis demo correctly avoids this with completed.has(l.id) && active !== l.id. Here, activeLayer probably just needs to depend on running alone (not allDone).

Additional Locations (1)

• demos/dev-reputation-mock/ipc_reputation_demo.jsx#L154-L160

 

[cursor]

Unused completedLayers variable is dead code

Low Severity

completedLayers is computed (marks a layer complete if any step is done) but never referenced — only layerComplete (which requires all steps done) is passed to IPCLayerDiagram. This looks like a leftover from an earlier iteration that was replaced by the stricter layerComplete logic but never cleaned up.