cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

revert: temporarily revert EIP_CIRCUIT_BREAKER compound rendering
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m4s
Details
CI / docker (push) Successful in 58s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 38s
Details

Browse Source 
Reverting e8039f9 to diagnose compound rendering regression affecting
all compound types (SPLIT, CHOICE, LOOP, DO_TRY) and error handlers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-29 18:15:10 +02:00
parent e8039f9cc4
commit 673f0958c5
69 changed files with 8099 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.superpowers/brainstorm/10188-1774613058/.server-stopped Normal file
View File

@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1774616238650}

1
.superpowers/brainstorm/10188-1774613058/.server.pid Normal file
View File

@@ -0,0 +1 @@
10188

105
.superpowers/brainstorm/10188-1774613058/component-hierarchy.html Normal file
View File

@@ -0,0 +1,105 @@
<h2>ProcessDiagram Component Hierarchy</h2>
<p class="subtitle">How the SVG rendering is structured — from data fetch to pixels</p>
<div class="section">
<div class="mockup">
<div class="mockup-header">Component Tree</div>
<div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.8; color: #1A1612;">
<div><strong style="color: #1A7F8E;">ProcessDiagram</strong> &mdash; root, fetches layout, manages state</div>
<div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
<div>&lt;svg&gt; container with viewBox (zoom/pan transforms)</div>
<div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
<div><strong style="color: #7C3AED;">DiagramSection</strong> label="Main Route"</div>
<div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
<div><strong style="color: #9C9184;">&lt;g&gt;</strong> edges layer (rendered first, behind nodes)</div>
<div style="padding-left: 24px;">
<div><strong style="color: #C6820E;">DiagramEdge</strong> &times; N &mdash; SVG &lt;path&gt; with arrowhead</div>
</div>
<div><strong style="color: #9C9184;">&lt;g&gt;</strong> nodes layer</div>
<div style="padding-left: 24px;">
<div><strong style="color: #C6820E;">DiagramNode</strong> &times; N &mdash; top-bar card</div>
<div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
<div><strong style="color: #3D7C47;">ConfigBadge</strong> &times; 0..N &mdash; tap/trace indicators</div>
<div><strong style="color: #3D7C47;">NodeToolbar</strong> &mdash; floating on hover</div>
</div>
<div><strong style="color: #C6820E;">CompoundNode</strong> &times; 0..N &mdash; choice/split container</div>
<div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
<div><strong style="color: #C6820E;">DiagramNode</strong> &times; N &mdash; children inside compound</div>
</div>
</div>
</div>
<div style="margin-top: 8px;"><strong style="color: #C0392B;">DiagramSection</strong> label="onException" variant="error"</div>
<div style="padding-left: 24px; border-left: 2px solid #C0392B;">
<div><em style="color: #9C9184;">same edge + node structure as above</em></div>
</div>
</div>
<div style="margin-top: 8px;"><strong style="color: #1A7F8E;">ZoomControls</strong> &mdash; HTML overlay (not SVG)</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top: 24px;">
<div class="mockup">
<div class="mockup-header">SVG Structure (simplified)</div>
<div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; color: #5C5347; background: #F5F2ED;">
<pre style="margin: 0;">&lt;div class="process-diagram"&gt; <span style="color:#9C9184">/* wrapper div */</span>
&lt;svg viewBox="0 0 {w} {h}"&gt; <span style="color:#9C9184">/* zoom = viewBox transform */</span>
&lt;g class="diagram-content"&gt; <span style="color:#9C9184">/* pan offset */</span>
<span style="color:#7C3AED">&lt;!-- Main Route section --&gt;</span>
&lt;g class="section section--main"&gt;
&lt;g class="edges"&gt;
&lt;path d="M 100 40 C ..." /&gt; <span style="color:#9C9184">/* cubic bezier edge */</span>
&lt;marker&gt;...&lt;/marker&gt; <span style="color:#9C9184">/* arrowhead def */</span>
&lt;/g&gt;
&lt;g class="nodes"&gt;
&lt;g transform="translate(x, y)"&gt; <span style="color:#9C9184">/* positioned by ELK */</span>
&lt;rect .../&gt; <span style="color:#9C9184">/* card background */</span>
&lt;rect .../&gt; <span style="color:#9C9184">/* color top bar */</span>
&lt;text&gt;LOG&lt;/text&gt; <span style="color:#9C9184">/* label */</span>
&lt;g class="badges"&gt;...&lt;/g&gt; <span style="color:#9C9184">/* config indicators */</span>
&lt;/g&gt;
&lt;/g&gt;
&lt;/g&gt;
<span style="color:#C0392B">&lt;!-- Error Handler section --&gt;</span>
&lt;g class="section section--error"
transform="translate(0, {mainH + gap})"&gt;
&lt;text&gt;onException&lt;/text&gt; <span style="color:#9C9184">/* section label */</span>
&lt;line .../&gt; <span style="color:#9C9184">/* divider line */</span>
&lt;g class="edges"&gt;...&lt;/g&gt;
&lt;g class="nodes"&gt;...&lt;/g&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;/svg&gt;
&lt;div class="zoom-controls"&gt;...&lt;/div&gt; <span style="color:#9C9184">/* HTML overlay */</span>
&lt;/div&gt;</pre>
</div>
</div>
</div>
<div class="section" style="margin-top: 24px;">
<div class="mockup">
<div class="mockup-header">Data Flow</div>
<div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; color: #5C5347;">
<pre style="margin: 0;">
<span style="color:#1A7F8E">GET /diagrams/{hash}/render?direction=LR</span>
│
▼
DiagramLayout { nodes[], edges[], width, height }
│
▼
<span style="color:#7C3AED">separateFlows(nodes)</span> → mainNodes[] + errorSections[]
│ │
▼ ▼
<span style="color:#C6820E">renderMainSection()</span> <span style="color:#C0392B">renderErrorSection()</span>
│ │
▼ ▼
SVG groups with SVG groups offset below
ELK x/y coordinates main section by mainHeight + gap
</pre>
</div>
</div>
</div>

164
.superpowers/brainstorm/10188-1774613058/interactions-detail.html Normal file
View File

@@ -0,0 +1,164 @@
<h2>Node Interactions & Config Badges</h2>
<p class="subtitle">Hover toolbar, selection states, and active config indicators</p>
<div class="section">
<div class="mockup">
<div class="mockup-header">Node States</div>
<div class="mockup-body" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="340" viewBox="0 0 520 340">
<!-- 1. Normal state -->
<text x="10" y="16" fill="#9C9184" font-size="11" font-weight="600">NORMAL</text>
<g transform="translate(10, 24)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- 2. Hovered state with toolbar -->
<text x="270" y="16" fill="#9C9184" font-size="11" font-weight="600">HOVERED (toolbar appears)</text>
<g transform="translate(270, 24)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="#FFFCF5" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Floating toolbar -->
<g transform="translate(30, -32)">
<rect x="0" y="0" width="140" height="28" rx="6" fill="#1A1612" opacity="0.92"/>
<!-- Icons as circles -->
<g transform="translate(10, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#128269;</text>
</g>
<g transform="translate(40, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">T</text>
</g>
<g transform="translate(70, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#9998;</text>
</g>
<g transform="translate(100, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#8943;</text>
</g>
</g>
</g>
<!-- 3. Selected state -->
<text x="10" y="112" fill="#9C9184" font-size="11" font-weight="600">SELECTED (click)</text>
<g transform="translate(10, 120)">
<rect x="-2" y="-2" width="204" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5" stroke-dasharray="none"/>
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- 4. With config badges -->
<text x="270" y="112" fill="#9C9184" font-size="11" font-weight="600">WITH CONFIG BADGES</text>
<g transform="translate(270, 120)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Trace badge (top-right corner) -->
<g transform="translate(165, -6)">
<rect x="0" y="0" width="38" height="16" rx="8" fill="#1A7F8E"/>
<text x="19" y="12" fill="white" font-size="8" font-weight="600" text-anchor="middle">TRACE</text>
</g>
<!-- Tap badge -->
<g transform="translate(124, -6)">
<rect x="0" y="0" width="36" height="16" rx="8" fill="#7C3AED"/>
<text x="18" y="12" fill="white" font-size="8" font-weight="600" text-anchor="middle">TAP</text>
</g>
</g>
<!-- 5. Error node style -->
<text x="10" y="210" fill="#9C9184" font-size="11" font-weight="600">ERROR HANDLER NODE</text>
<g transform="translate(10, 218)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C0392B"/>
<rect x="4" y="0" width="192" height="6" fill="#C0392B"/>
<text x="16" y="32" fill="#C0392B" font-size="14">&#9888;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">ON_EXCEPTION</text>
<text x="36" y="44" fill="#5C5347" font-size="10">java.lang.Exception</text>
</g>
<!-- 6. Compound node (Choice) -->
<text x="270" y="210" fill="#9C9184" font-size="11" font-weight="600">COMPOUND NODE (CHOICE)</text>
<g transform="translate(270, 218)">
<rect x="0" y="0" width="220" height="110" rx="4" fill="white" stroke="#7C3AED" stroke-width="1.5"/>
<rect x="0" y="0" width="220" height="22" rx="4" fill="#7C3AED"/>
<rect x="4" y="4" width="212" height="18" fill="#7C3AED"/>
<text x="110" y="16" fill="white" font-size="10" font-weight="600" text-anchor="middle">&#9670; CHOICE</text>
<!-- Children -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="200" height="32" rx="3" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="4" rx="3" fill="#7C3AED"/>
<rect x="3" y="0" width="194" height="4" fill="#7C3AED"/>
<text x="12" y="22" fill="#7C3AED" font-size="10">&#9670;</text>
<text x="28" y="22" fill="#1A1612" font-size="10" font-weight="600">WHEN</text>
<text x="66" y="22" fill="#5C5347" font-size="9">type == 'A'</text>
</g>
<g transform="translate(10, 70)">
<rect x="0" y="0" width="200" height="32" rx="3" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="4" rx="3" fill="#7C3AED"/>
<rect x="3" y="0" width="194" height="4" fill="#7C3AED"/>
<text x="12" y="22" fill="#7C3AED" font-size="10">&#9670;</text>
<text x="28" y="22" fill="#1A1612" font-size="10" font-weight="600">OTHERWISE</text>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="section" style="margin-top: 24px;">
<div class="mockup">
<div class="mockup-header">Toolbar Actions</div>
<div class="mockup-body" style="padding: 16px;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="border-bottom: 2px solid #E4DFD8;">
<th style="text-align: left; padding: 8px; color: #5C5347;">Icon</th>
<th style="text-align: left; padding: 8px; color: #5C5347;">Action</th>
<th style="text-align: left; padding: 8px; color: #5C5347;">Description</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">&#128269;</td>
<td style="padding: 8px; font-weight: 600;">Inspect</td>
<td style="padding: 8px; color: #5C5347;">Select node &amp; open detail side-panel</td>
</tr>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">T</td>
<td style="padding: 8px; font-weight: 600;">Toggle Trace</td>
<td style="padding: 8px; color: #5C5347;">Enable/disable capture of input+output for this processor</td>
</tr>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">&#9998;</td>
<td style="padding: 8px; font-weight: 600;">Configure Tap</td>
<td style="padding: 8px; color: #5C5347;">Open tap expression editor for this processor</td>
</tr>
<tr>
<td style="padding: 8px;">&#8943;</td>
<td style="padding: 8px; font-weight: 600;">More</td>
<td style="padding: 8px; color: #5C5347;">Copy processor ID, jump to code, view in search</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

119
.superpowers/brainstorm/10188-1774613058/node-interactions.html Normal file
View File

@@ -0,0 +1,119 @@
<h2>Node Interaction Model</h2>
<p class="subtitle">What happens when you interact with a processor node on the diagram?</p>
<div class="cards">
<!-- Option A: Click-to-select + context menu -->
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="180" viewBox="0 0 420 180">
<!-- Normal node -->
<g transform="translate(10, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
</g>
<!-- Selected node (amber ring) -->
<g transform="translate(10, 100)">
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
</g>
<!-- Context menu on right-click -->
<g transform="translate(220, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Context menu -->
<g transform="translate(100, 40)">
<rect x="0" y="0" width="140" height="96" rx="6" fill="white" stroke="#E4DFD8" stroke-width="1" filter="url(#shadow)"/>
<text x="12" y="20" fill="#1A1612" font-size="11">&#128269; View Snapshot</text>
<line x1="8" y1="28" x2="132" y2="28" stroke="#EDE9E3" stroke-width="1"/>
<text x="12" y="44" fill="#1A7F8E" font-size="11">&#9881; Enable Tracing</text>
<text x="12" y="64" fill="#1A7F8E" font-size="11">&#128204; Set Tap</text>
<line x1="8" y1="72" x2="132" y2="72" stroke="#EDE9E3" stroke-width="1"/>
<text x="12" y="88" fill="#5C5347" font-size="11">&#128203; Copy Processor ID</text>
</g>
<text x="90" y="152" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">right-click = context menu</text>
</g>
<defs>
<filter id="shadow" x="-4" y="-2" width="148" height="104">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>
</filter>
</defs>
</svg>
</div>
<div class="card-body">
<h3>A: Click-Select + Right-Click Menu</h3>
<p>Click to select a node (amber highlight ring). Right-click for context menu with tracing/tap/snapshot actions. Clean separation of concerns. Standard desktop UX.</p>
</div>
</div>
<!-- Option B: Hover toolbar -->
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="180" viewBox="0 0 420 180">
<!-- Normal node -->
<g transform="translate(10, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
</g>
<!-- Hovered node with floating toolbar -->
<g transform="translate(10, 100)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="#FFFCF5" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Floating toolbar above -->
<g transform="translate(20, -30)">
<rect x="0" y="0" width="140" height="26" rx="13" fill="#1A1612" opacity="0.9"/>
<text x="18" y="17" fill="white" font-size="12" title="View">&#128269;</text>
<text x="46" y="17" fill="white" font-size="12" title="Trace">&#9881;</text>
<text x="74" y="17" fill="white" font-size="12" title="Tap">&#128204;</text>
<text x="102" y="17" fill="white" font-size="12" title="Copy">&#128203;</text>
<text x="124" y="17" fill="white" font-size="12" title="More">&#8943;</text>
</g>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">hover = toolbar appears</text>
</g>
<!-- Click = select (same as A) -->
<g transform="translate(220, 50)">
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
</g>
</svg>
</div>
<div class="card-body">
<h3>B: Hover Floating Toolbar</h3>
<p>Hover reveals a dark floating icon toolbar above the node. Click still selects. More discoverable than right-click, but can feel cluttered on dense diagrams.</p>
</div>
</div>
</div>

208
.superpowers/brainstorm/10188-1774613058/node-style.html Normal file
View File

@@ -0,0 +1,208 @@
<h2>Node Visual Style</h2>
<p class="subtitle">Which processor node style fits our design system best? Think MuleSoft / TIBCO BW5 but adapted to our warm parchment theme.</p>
<div class="cards">
<!-- Option A: Icon-first blocks (MuleSoft-inspired) -->
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#1A7F8E" opacity="0.12" stroke="#1A7F8E" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#1A7F8E"/>
<rect x="8" y="0" width="34" height="56" fill="#1A7F8E"/>
<text x="21" y="34" fill="white" font-size="20" text-anchor="middle">&#9654;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">FROM</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="66" x2="100" y2="86" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,82 100,90 105,82" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 90)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#C6820E" opacity="0.12" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#C6820E"/>
<rect x="8" y="0" width="34" height="56" fill="#C6820E"/>
<text x="21" y="34" fill="white" font-size="18" text-anchor="middle">&#9881;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">LOG</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="146" x2="100" y2="166" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,162 100,170 105,162" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 170)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#3D7C47" opacity="0.12" stroke="#3D7C47" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#3D7C47"/>
<rect x="8" y="0" width="34" height="56" fill="#3D7C47"/>
<text x="21" y="34" fill="white" font-size="18" text-anchor="middle">&#9724;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">TO</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="210" rx="10" fill="#7C3AED" opacity="0.06" stroke="#7C3AED" stroke-width="1.5" stroke-dasharray="4 2"/>
<text x="10" y="20" fill="#7C3AED" font-size="11" font-weight="600">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="160" height="48" rx="6" fill="#7C3AED" opacity="0.12" stroke="#7C3AED" stroke-width="1"/>
<rect x="0" y="0" width="36" height="48" rx="6" fill="#7C3AED"/>
<rect x="6" y="0" width="30" height="48" fill="#7C3AED"/>
<text x="18" y="30" fill="white" font-size="14" text-anchor="middle">&#9670;</text>
<text x="96" y="20" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">WHEN</text>
<text x="96" y="36" fill="#5C5347" font-size="10" text-anchor="middle">header.type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 88)">
<rect x="0" y="0" width="160" height="48" rx="6" fill="#7C3AED" opacity="0.12" stroke="#7C3AED" stroke-width="1"/>
<rect x="0" y="0" width="36" height="48" rx="6" fill="#7C3AED"/>
<rect x="6" y="0" width="30" height="48" fill="#7C3AED"/>
<text x="18" y="30" fill="white" font-size="14" text-anchor="middle">&#9670;</text>
<text x="96" y="20" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">OTHERWISE</text>
<text x="96" y="36" fill="#5C5347" font-size="10" text-anchor="middle">default branch</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>A: Icon Sidebar Blocks</h3>
<p>MuleSoft-style: colored icon strip on the left, label + detail on the right. Color encodes node type. Compound nodes (choice, split) use dashed containers.</p>
</div>
</div>
<!-- Option B: Rounded pill with centered icon -->
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#1A7F8E" opacity="0.15" stroke="#1A7F8E" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#1A7F8E"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9654;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">FROM</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="60" x2="100" y2="80" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,76 100,84 105,76" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 84)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#C6820E" opacity="0.15" stroke="#C6820E" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#C6820E"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9881;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">LOG</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="134" x2="100" y2="154" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,150 100,158 105,150" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 158)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#3D7C47" opacity="0.15" stroke="#3D7C47" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#3D7C47"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9724;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">TO</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="200" rx="12" fill="#7C3AED" opacity="0.06" stroke="#7C3AED" stroke-width="1.5" stroke-dasharray="5 3"/>
<text x="90" y="20" fill="#7C3AED" font-size="11" font-weight="600" text-anchor="middle">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="160" height="44" rx="22" fill="#7C3AED" opacity="0.15" stroke="#7C3AED" stroke-width="1"/>
<circle cx="26" cy="22" r="14" fill="#7C3AED"/>
<text x="26" y="28" fill="white" font-size="12" text-anchor="middle">&#9670;</text>
<text x="96" y="18" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">WHEN</text>
<text x="96" y="34" fill="#5C5347" font-size="10" text-anchor="middle">type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 84)">
<rect x="0" y="0" width="160" height="44" rx="22" fill="#7C3AED" opacity="0.15" stroke="#7C3AED" stroke-width="1"/>
<circle cx="26" cy="22" r="14" fill="#7C3AED"/>
<text x="26" y="28" fill="white" font-size="12" text-anchor="middle">&#9670;</text>
<text x="96" y="18" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">OTHERWISE</text>
<text x="96" y="34" fill="#5C5347" font-size="10" text-anchor="middle">default</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>B: Rounded Pills</h3>
<p>Softer, more modern look with pill-shaped nodes and circular icons. Lighter feel. Compounds still use dashed containers.</p>
</div>
</div>
<!-- Option C: TIBCO BW5 style - rectangular with top color bar -->
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#1A7F8E"/>
<rect x="4" y="0" width="152" height="6" fill="#1A7F8E"/>
<text x="18" y="32" fill="#1A7F8E" font-size="16">&#9654;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">FROM</text>
<text x="40" y="46" fill="#5C5347" font-size="10">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="66" x2="100" y2="86" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,82 100,90 105,82" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 90)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="152" height="6" fill="#C6820E"/>
<text x="18" y="32" fill="#C6820E" font-size="16">&#9881;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">LOG</text>
<text x="40" y="46" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="146" x2="100" y2="166" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,162 100,170 105,162" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 170)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#3D7C47"/>
<rect x="4" y="0" width="152" height="6" fill="#3D7C47"/>
<text x="18" y="32" fill="#3D7C47" font-size="16">&#9724;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">TO</text>
<text x="40" y="46" fill="#5C5347" font-size="10">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="210" rx="4" fill="white" stroke="#7C3AED" stroke-width="1.5"/>
<rect x="0" y="0" width="180" height="22" rx="4" fill="#7C3AED"/>
<rect x="4" y="4" width="172" height="18" fill="#7C3AED"/>
<text x="90" y="16" fill="white" font-size="11" font-weight="600" text-anchor="middle">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 32)">
<rect x="0" y="0" width="160" height="48" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="5" rx="4" fill="#7C3AED"/>
<rect x="4" y="0" width="152" height="5" fill="#7C3AED"/>
<text x="14" y="28" fill="#7C3AED" font-size="14">&#9670;</text>
<text x="34" y="26" fill="#1A1612" font-size="11" font-weight="600">WHEN</text>
<text x="34" y="40" fill="#5C5347" font-size="10">type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 90)">
<rect x="0" y="0" width="160" height="48" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="5" rx="4" fill="#7C3AED"/>
<rect x="4" y="0" width="152" height="5" fill="#7C3AED"/>
<text x="14" y="28" fill="#7C3AED" font-size="14">&#9670;</text>
<text x="34" y="26" fill="#1A1612" font-size="11" font-weight="600">OTHERWISE</text>
<text x="34" y="40" fill="#5C5347" font-size="10">default</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>C: Top-Bar Cards</h3>
<p>TIBCO BW5-inspired: white cards with colored top accent bar. Clean, professional, card-like. Compound nodes get a full colored header bar with white title text.</p>
</div>
</div>
</div>

3
.superpowers/brainstorm/10188-1774613058/waiting.html Normal file
View File

@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>

1
.superpowers/brainstorm/14618-1774629192/.server-stopped Normal file
View File

@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1774632733532}

1
.superpowers/brainstorm/14618-1774629192/.server.pid Normal file
View File

@@ -0,0 +1 @@
14618

287
.superpowers/brainstorm/14618-1774629192/detail-panel-tabs.html Normal file
View File

@@ -0,0 +1,287 @@
<h2>Detail Panel: Tab Designs</h2>
<p class="subtitle">Bottom panel content when a processor node is selected</p>
<div class="mockup">
<div class="mockup-header">Info Tab — processor metadata + attributes</div>
<div class="mockup-body" style="background: #fff; padding: 0;">
<!-- Processor header -->
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #1A1612;">bean:validate</span>
<span style="font-size: 10px; color: #C0392B; background: #FDF2F0; padding: 1px 6px; border-radius: 8px;">FAILED</span>
<span style="font-size: 10px; color: #9C9184;">processor-5</span>
</div>
<!-- Tabs -->
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #C6820E; border-bottom: 2px solid #C6820E; font-weight: 600; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C0392B; cursor: pointer;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
</div>
<!-- Info content -->
<div style="padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 24px; font-size: 12px;">
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Processor ID</div>
<div style="color: #1A1612; font-family: monospace; font-size: 11px;">processor-5</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Type</div>
<div style="color: #1A1612;">BEAN</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Status</div>
<div style="color: #C0392B; font-weight: 500;">FAILED</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Start Time</div>
<div style="color: #1A1612;">14:32:05.123</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">End Time</div>
<div style="color: #1A1612;">14:32:05.243</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Duration</div>
<div style="color: #1A1612; font-weight: 500;">120ms</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Endpoint URI</div>
<div style="color: #1A1612; font-family: monospace; font-size: 11px;">bean:orderValidator?method=validate</div>
</div>
<div style="grid-column: span 2;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Resolved URI</div>
<div style="color: #1A1612; font-family: monospace; font-size: 11px;">bean://com.example.OrderValidator?method=validate</div>
</div>
<!-- Attributes from taps -->
<div style="grid-column: span 3; border-top: 1px solid #E4DFD8; padding-top: 8px; margin-top: 4px;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">Attributes</div>
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
<span style="font-size: 10px; padding: 2px 8px; background: #F5F0EA; border-radius: 10px; color: #5C5347;">orderId: <strong>ORD-1234</strong></span>
<span style="font-size: 10px; padding: 2px 8px; background: #F5F0EA; border-radius: 10px; color: #5C5347;">customer: <strong>Acme Corp</strong></span>
<span style="font-size: 10px; padding: 2px 8px; background: #F5F0EA; border-radius: 10px; color: #5C5347;">priority: <strong>HIGH</strong></span>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 20px;"></div>
<div class="mockup">
<div class="mockup-header">Headers Tab — input vs output side by side</div>
<div class="mockup-body" style="background: #fff; padding: 0;">
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #1A1612;">log:incoming</span>
<span style="font-size: 10px; color: #3D7C47; background: #F0F9F1; padding: 1px 6px; border-radius: 8px;">COMPLETED</span>
<span style="font-size: 10px; color: #9C9184;">processor-2</span>
</div>
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C6820E; border-bottom: 2px solid #C6820E; font-weight: 600; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
</div>
<!-- Headers side by side -->
<div style="display: flex; gap: 0; padding: 0;">
<!-- Input headers -->
<div style="flex: 1; padding: 10px 14px; border-right: 1px solid #E4DFD8;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Input Headers</div>
<table style="width: 100%; font-size: 11px; border-collapse: collapse;">
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500; width: 40%;">Content-Type</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">application/json</td>
</tr>
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">JMSMessageID</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">ID:broker-42</td>
</tr>
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">breadcrumbId</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">abc-123-def</td>
</tr>
<tr>
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">CamelHttpMethod</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">POST</td>
</tr>
</table>
</div>
<!-- Output headers -->
<div style="flex: 1; padding: 10px 14px;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Output Headers</div>
<table style="width: 100%; font-size: 11px; border-collapse: collapse;">
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500; width: 40%;">Content-Type</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">application/json</td>
</tr>
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">JMSMessageID</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">ID:broker-42</td>
</tr>
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">breadcrumbId</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">abc-123-def</td>
</tr>
<tr style="border-bottom: 1px solid #F5F0EA;">
<td style="padding: 3px 0; color: #5C5347; font-weight: 500;">CamelHttpMethod</td>
<td style="padding: 3px 0; color: #1A1612; font-family: monospace; font-size: 10px;">POST</td>
</tr>
<tr>
<td style="padding: 3px 0; color: #5C5347; font-weight: 500; color: #3D7C47;">orderStatus</td>
<td style="padding: 3px 0; color: #3D7C47; font-family: monospace; font-size: 10px;">validated <span style="font-size: 9px; color: #9C9184; font-family: sans-serif;">(new)</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div style="margin-top: 20px;"></div>
<div class="mockup">
<div class="mockup-header">Input Tab — formatted message body</div>
<div class="mockup-body" style="background: #fff; padding: 0;">
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #1A1612;">log:incoming</span>
<span style="font-size: 10px; color: #3D7C47; background: #F0F9F1; padding: 1px 6px; border-radius: 8px;">COMPLETED</span>
<span style="font-size: 10px; color: #9C9184;">processor-2 &middot; 5ms</span>
</div>
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C6820E; border-bottom: 2px solid #C6820E; font-weight: 600; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
</div>
<!-- Body content with syntax highlighting -->
<div style="padding: 10px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
<span style="font-size: 10px; color: #9C9184;">JSON &middot; 234 bytes</span>
<button style="font-size: 9px; padding: 2px 8px; border: 1px solid #E4DFD8; background: #FAFAF8; border-radius: 3px; cursor: pointer; color: #5C5347;">Copy</button>
</div>
<pre style="font-size: 11px; background: #1A1612; color: #E4DFD8; padding: 12px; border-radius: 6px; margin: 0; line-height: 1.6; overflow-x: auto;">{
<span style="color: #1A7F8E;">"orderId"</span>: <span style="color: #C6820E;">"ORD-1234"</span>,
<span style="color: #1A7F8E;">"customer"</span>: {
<span style="color: #1A7F8E;">"name"</span>: <span style="color: #C6820E;">"Acme Corp"</span>,
<span style="color: #1A7F8E;">"id"</span>: <span style="color: #7C3AED;">42</span>
},
<span style="color: #1A7F8E;">"items"</span>: [
{
<span style="color: #1A7F8E;">"product"</span>: <span style="color: #C6820E;">"Widget A"</span>,
<span style="color: #1A7F8E;">"quantity"</span>: <span style="color: #7C3AED;">5</span>,
<span style="color: #1A7F8E;">"price"</span>: <span style="color: #7C3AED;">29.99</span>
}
],
<span style="color: #1A7F8E;">"priority"</span>: <span style="color: #C6820E;">"HIGH"</span>
}</pre>
</div>
</div>
</div>
<div style="margin-top: 20px;"></div>
<div class="mockup">
<div class="mockup-header">Timeline Tab — Gantt-style processor durations</div>
<div class="mockup-body" style="background: #fff; padding: 0;">
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #1A1612;">content-based-routing</span>
<span style="font-size: 10px; color: #C0392B; background: #FDF2F0; padding: 1px 6px; border-radius: 8px;">FAILED</span>
<span style="font-size: 10px; color: #9C9184;">247ms total</span>
</div>
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C0392B; cursor: pointer;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C6820E; border-bottom: 2px solid #C6820E; font-weight: 600; cursor: pointer;">Timeline</div>
</div>
<!-- Gantt chart -->
<div style="padding: 10px 14px;">
<!-- Time axis -->
<div style="display: flex; justify-content: space-between; font-size: 9px; color: #9C9184; margin-bottom: 4px; padding-left: 110px;">
<span>0ms</span><span>50ms</span><span>100ms</span><span>150ms</span><span>200ms</span><span>247ms</span>
</div>
<!-- Processor rows -->
<div style="display: flex; flex-direction: column; gap: 3px;">
<!-- from:jms -->
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 10px; color: #5C5347; width: 100px; text-align: right; flex-shrink: 0;">from:jms</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px; position: relative;">
<div style="position: absolute; left: 0%; width: 0.8%; height: 100%; background: #3D7C47; border-radius: 2px; min-width: 3px;"></div>
</div>
<span style="font-size: 9px; color: #9C9184; width: 36px; flex-shrink: 0;">2ms</span>
</div>
<!-- log -->
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 10px; color: #5C5347; width: 100px; text-align: right; flex-shrink: 0;">log</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px; position: relative;">
<div style="position: absolute; left: 0.8%; width: 2%; height: 100%; background: #3D7C47; border-radius: 2px; min-width: 3px;"></div>
</div>
<span style="font-size: 9px; color: #9C9184; width: 36px; flex-shrink: 0;">5ms</span>
</div>
<!-- setHeader -->
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 10px; color: #5C5347; width: 100px; text-align: right; flex-shrink: 0;">setHeader</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px; position: relative;">
<div style="position: absolute; left: 2.8%; width: 0.4%; height: 100%; background: #3D7C47; border-radius: 2px; min-width: 3px;"></div>
</div>
<span style="font-size: 9px; color: #9C9184; width: 36px; flex-shrink: 0;">1ms</span>
</div>
<!-- bean:validate (FAILED - long) -->
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 10px; color: #C0392B; font-weight: 600; width: 100px; text-align: right; flex-shrink: 0;">bean:validate</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px; position: relative;">
<div style="position: absolute; left: 3.2%; width: 48.6%; height: 100%; background: #C0392B; border-radius: 2px; opacity: 0.8;"></div>
</div>
<span style="font-size: 9px; color: #C0392B; font-weight: 500; width: 36px; flex-shrink: 0;">120ms</span>
</div>
<!-- to:http (skipped) -->
<div style="display: flex; align-items: center; gap: 8px; opacity: 0.35;">
<span style="font-size: 10px; color: #5C5347; width: 100px; text-align: right; flex-shrink: 0;">to:http</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px;"></div>
<span style="font-size: 9px; color: #9C9184; width: 36px; flex-shrink: 0;">—</span>
</div>
<!-- to:jms (skipped) -->
<div style="display: flex; align-items: center; gap: 8px; opacity: 0.35;">
<span style="font-size: 10px; color: #5C5347; width: 100px; text-align: right; flex-shrink: 0;">to:jms</span>
<div style="flex: 1; height: 16px; background: #F5F0EA; border-radius: 2px;"></div>
<span style="font-size: 9px; color: #9C9184; width: 36px; flex-shrink: 0;">—</span>
</div>
</div>
<div style="margin-top: 8px; font-size: 10px; color: #9C9184;">Click a bar to select that processor in the diagram</div>
</div>
</div>
</div>
<div style="margin-top: 20px;"></div>
<div class="mockup">
<div class="mockup-header">Error Tab — grayed out when no error on selected processor</div>
<div class="mockup-body" style="background: #fff; padding: 0;">
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #1A1612;">log:incoming</span>
<span style="font-size: 10px; color: #3D7C47; background: #F0F9F1; padding: 1px 6px; border-radius: 8px;">COMPLETED</span>
<span style="font-size: 10px; color: #9C9184;">processor-2 &middot; 5ms</span>
</div>
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4; cursor: not-allowed;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.4;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
</div>
<div style="padding: 20px 14px; text-align: center; color: #9C9184; font-size: 12px;">
No error on this processor
</div>
</div>
</div>

207
.superpowers/brainstorm/14618-1774629192/execution-overlay-design.html Normal file
View File

@@ -0,0 +1,207 @@
<h2>Execution Overlay: Full Design Mockup</h2>
<p class="subtitle">ExecutionDiagram component — diagram with execution overlay + detail panel</p>
<div class="mockup">
<div class="mockup-header">ExecutionDiagram — Failed Exchange View</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 0;">
<!-- Top bar: Exchange summary -->
<div style="display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #E4DFD8; font-size: 12px; color: #5C5347;">
<span style="font-weight: 600; color: #1A1612;">Exchange</span>
<code style="font-size: 11px; background: #F5F0EA; padding: 2px 6px; border-radius: 3px; color: #1A1612;">abc-123-def-456</code>
<span style="background: #C0392B; color: white; font-size: 10px; padding: 1px 8px; border-radius: 10px; font-weight: 600;">FAILED</span>
<span style="color: #9C9184;">sample-app / content-based-routing</span>
<span style="color: #9C9184;">247ms</span>
<div style="margin-left: auto; display: flex; gap: 6px;">
<button style="font-size: 10px; padding: 3px 10px; border: 1px solid #C0392B; background: #FDF2F0; color: #C0392B; border-radius: 4px; cursor: pointer; font-weight: 500;">Jump to Error</button>
</div>
</div>
<!-- Main content: Diagram top, Detail bottom -->
<div style="display: flex; flex-direction: column; height: 480px;">
<!-- TOP: Process Diagram with Overlay -->
<div style="flex: 1; position: relative; overflow: hidden; background: #fff; border-bottom: 2px solid #E4DFD8;">
<!-- Breadcrumbs (if drilled down) -->
<!-- Diagram content -->
<div style="padding: 24px 30px;">
<!-- Main flow -->
<div style="display: flex; align-items: center; gap: 0;">
<!-- Node: from:jms (COMPLETED) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #1A7F8E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
<div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
</div>
<!-- Edge -->
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="30" y2="5" stroke="#9CA3AF" stroke-width="1.5"/><polygon points="25,2 30,5 25,8" fill="#9CA3AF"/></svg>
<!-- Node: log (COMPLETED) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">log:incoming</div>
<div style="font-size: 9px; color: #9C9184;">LOG</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">5ms</div>
</div>
<!-- Edge -->
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="30" y2="5" stroke="#9CA3AF" stroke-width="1.5"/><polygon points="25,2 30,5 25,8" fill="#9CA3AF"/></svg>
<!-- Node: CHOICE compound -->
<div style="position: relative; border: 2px dashed #7C3AED; border-radius: 8px; padding: 0; background: #FAFAFF;">
<!-- Compound header -->
<div style="background: #7C3AED; color: white; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 5px 5px 0 0;">CHOICE</div>
<div style="padding: 10px; display: flex; gap: 16px;">
<!-- WHEN branch (taken, failed) -->
<div style="border: 1px solid #E4DFD8; border-radius: 5px; padding: 6px; background: #fff;">
<div style="font-size: 8px; color: #7C3AED; font-weight: 600; margin-bottom: 4px;">WHEN: header.type == 'A'</div>
<div style="display: flex; align-items: center; gap: 0;">
<!-- Node: bean (FAILED) -->
<div style="position: relative;">
<div style="width: 120px; height: 48px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #C0392B;">bean:validate</div>
<div style="font-size: 8px; color: #C0392B;">FAILED</div>
</div>
</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #C0392B; font-weight: 500;">120ms</div>
<!-- Error icon -->
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
</div>
<svg width="20" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#9CA3AF" stroke-width="1"/></svg>
<!-- Node: to:http (NOT EXECUTED - dimmed) -->
<div style="position: relative; opacity: 0.35;">
<div style="width: 120px; height: 48px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 8px; color: #9C9184;">TO</div>
</div>
</div>
</div>
</div>
</div>
<!-- OTHERWISE branch (not taken - dimmed) -->
<div style="border: 1px solid #E4DFD8; border-radius: 5px; padding: 6px; background: #fff; opacity: 0.35;">
<div style="font-size: 8px; color: #7C3AED; font-weight: 600; margin-bottom: 4px;">OTHERWISE</div>
<div style="width: 120px; height: 48px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:direct:alt</div>
<div style="font-size: 8px; color: #9C9184;">DIRECT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Zoom controls (bottom-right) -->
<div style="position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 3px; background: #fff; border: 1px solid #E4DFD8; border-radius: 4px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);">
<button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 12px; cursor: pointer; color: #1A1612;">+</button>
<span style="font-size: 9px; color: #9C9184; min-width: 30px; text-align: center;">100%</span>
<button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 12px; cursor: pointer; color: #1A1612;">-</button>
<button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 10px; cursor: pointer; color: #1A1612;">Fit</button>
</div>
<!-- Minimap (bottom-left) -->
<div style="position: absolute; bottom: 8px; left: 8px; width: 100px; height: 60px; background: #fff; border: 1px solid #E4DFD8; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden;">
<div style="padding: 4px;">
<div style="display: flex; gap: 2px; align-items: center; transform: scale(0.3); transform-origin: top left;">
<div style="width: 60px; height: 20px; background: #1A7F8E; border-radius: 2px;"></div>
<div style="width: 60px; height: 20px; background: #C6820E; border-radius: 2px;"></div>
<div style="width: 100px; height: 40px; border: 1px solid #7C3AED; border-radius: 2px;"></div>
</div>
</div>
</div>
</div>
<!-- SPLITTER -->
<div style="height: 4px; background: #E4DFD8; cursor: row-resize; flex-shrink: 0;"></div>
<!-- BOTTOM: Detail Panel -->
<div style="flex: 0 0 180px; background: #fff; display: flex; flex-direction: column;">
<!-- Selected processor header -->
<div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
<span style="font-size: 11px; font-weight: 600; color: #C0392B;">bean:validate</span>
<span style="font-size: 10px; color: #C0392B; background: #FDF2F0; padding: 1px 6px; border-radius: 8px;">FAILED</span>
<span style="font-size: 10px; color: #9C9184;">processor-5 &middot; 120ms</span>
</div>
<!-- Tabs -->
<div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
<div style="font-size: 11px; padding: 6px 12px; color: #C0392B; border-bottom: 2px solid #C0392B; font-weight: 600; cursor: pointer;">Error</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.5;">Config</div>
<div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
</div>
<!-- Tab content: Error -->
<div style="flex: 1; padding: 10px 14px; overflow-y: auto;">
<div style="margin-bottom: 8px;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Exception</div>
<div style="font-size: 12px; color: #C0392B; font-weight: 500;">javax.validation.ValidationException</div>
</div>
<div style="margin-bottom: 8px;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Message</div>
<div style="font-size: 12px; color: #1A1612;">Order quantity must be positive: received -3</div>
</div>
<div style="margin-bottom: 8px;">
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Root Cause</div>
<div style="font-size: 12px; color: #C0392B;">java.lang.IllegalArgumentException: quantity must be > 0</div>
</div>
<div>
<div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Stack Trace</div>
<pre style="font-size: 10px; color: #5C5347; background: #F5F0EA; padding: 8px; border-radius: 4px; overflow-x: auto; margin: 0; line-height: 1.6;">at com.example.OrderValidator.validate(OrderValidator.java:42)
at com.example.OrderRoute.process(OrderRoute.java:18)
at org.apache.camel.processor.DelegateSyncProcessor.process(...)
at org.apache.camel.processor.Pipeline.process(Pipeline.java:184)
... 8 more</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 24px;">
<h3>Design Decisions Shown</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; color: #5C5347;">
<div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #3D7C47;">
<strong style="color: #1A1612;">Executed (OK)</strong><br/>
Green left border, duration badge bottom-right
</div>
<div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #C0392B;">
<strong style="color: #1A1612;">Failed</strong><br/>
Red border, red tint background, red ! badge top-right
</div>
<div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #9C9184;">
<strong style="color: #1A1612;">Not Executed</strong><br/>
Dimmed to 35% opacity — full topology visible
</div>
<div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #C6820E;">
<strong style="color: #1A1612;">Selected</strong><br/>
Amber ring (existing), detail panel updates below
</div>
</div>
</div>

143
.superpowers/brainstorm/14618-1774629192/iteration-stepper.html Normal file
View File

@@ -0,0 +1,143 @@
<h2>Per-Compound Iteration Stepper</h2>
<p class="subtitle">Each loop/split compound gets its own stepper in the header bar</p>
<div class="mockup">
<div class="mockup-header">Loop with iteration stepper — iteration 3 of 5</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 20px;">
<!-- LOOP compound -->
<div style="position: relative; border: 2px dashed #7C3AED; border-radius: 8px; background: #FAFAFF; max-width: 600px;">
<!-- Compound header with stepper -->
<div style="background: #7C3AED; color: white; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between;">
<span>LOOP</span>
<!-- Iteration stepper -->
<div style="display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 4px;">
<button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
<span style="font-size: 10px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums;">3 / 5</span>
<button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
</div>
</div>
<!-- Loop body: showing iteration 3 data -->
<div style="padding: 12px; display: flex; align-items: center; gap: 0;">
<!-- transform (OK in iteration 3) -->
<div style="position: relative;">
<div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
<div style="height: 4px; background: #C6820E;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">transform</div>
<div style="font-size: 8px; color: #9C9184;">TRANSFORM</div>
</div>
</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">3ms</div>
<div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
</div>
<svg width="24" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="17,2 22,5 17,8" fill="#3D7C47"/></svg>
<!-- to:http (OK in iteration 3) -->
<div style="position: relative;">
<div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
<div style="height: 4px; background: #3D7C47;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 8px; color: #9C9184;">TO</div>
</div>
</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">45ms</div>
<div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
</div>
<svg width="24" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="17,2 22,5 17,8" fill="#3D7C47"/></svg>
<!-- log (OK in iteration 3) -->
<div style="position: relative;">
<div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
<div style="height: 4px; background: #C6820E;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">log:result</div>
<div style="font-size: 8px; color: #9C9184;">LOG</div>
</div>
</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">1ms</div>
<div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="margin-top: 24px;">Nested Loops</h3>
<p class="subtitle">Each compound level has its own independent stepper</p>
<div class="mockup">
<div class="mockup-header">Outer loop (iteration 2/3) containing inner split (branch 1/4)</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 20px;">
<!-- Outer LOOP -->
<div style="border: 2px dashed #7C3AED; border-radius: 8px; background: #FAFAFF; max-width: 550px;">
<div style="background: #7C3AED; color: white; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between;">
<span>LOOP</span>
<div style="display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 4px;">
<button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
<span style="font-size: 10px; min-width: 30px; text-align: center;">2 / 3</span>
<button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
</div>
</div>
<div style="padding: 12px;">
<div style="display: flex; align-items: center; gap: 0;">
<!-- Processor before split -->
<div style="position: relative;">
<div style="width: 110px; height: 44px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
<div style="height: 4px; background: #C6820E;"></div>
<div style="padding: 3px 6px;">
<div style="font-size: 9px; font-weight: 600; color: #1A1612;">setBody</div>
<div style="font-size: 8px; color: #9C9184;">SET_BODY</div>
</div>
</div>
<div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
</div>
<svg width="20" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="16" y2="5" stroke="#3D7C47" stroke-width="1.5"/></svg>
<!-- Inner SPLIT -->
<div style="border: 2px dashed #7C3AED; border-radius: 6px; background: #F8F7FF;">
<div style="background: #9B6AED; color: white; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 3px 3px 0 0; display: flex; align-items: center; justify-content: space-between;">
<span>SPLIT</span>
<div style="display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 3px;">
<button style="width: 16px; height: 16px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
<span style="font-size: 9px; min-width: 26px; text-align: center;">1 / 4</span>
<button style="width: 16px; height: 16px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
</div>
</div>
<div style="padding: 8px; display: flex; align-items: center; gap: 0;">
<div style="position: relative;">
<div style="width: 100px; height: 40px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 4px; border-left: 3px solid #3D7C47; overflow: hidden;">
<div style="height: 3px; background: #3D7C47;"></div>
<div style="padding: 2px 5px;">
<div style="font-size: 8px; font-weight: 600; color: #1A1612;">to:kafka</div>
<div style="font-size: 7px; color: #9C9184;">TO</div>
</div>
</div>
<div style="position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white;">&#10003;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="margin-top: 24px;">Stepper Behavior</h3>
<div style="font-size: 13px; color: #5C5347; line-height: 1.8;">
<ul style="margin: 0; padding-left: 20px;">
<li><strong>Independent per compound</strong> — outer loop at iteration 2, inner split at branch 1</li>
<li><strong>Overlay updates per-compound</strong> — stepping the loop re-renders its children's execution data for that iteration</li>
<li><strong>CHOICE shows which branch was taken</strong> — no stepper, just highlights the taken branch</li>
<li><strong>Keyboard</strong> — when a compound is focused/hovered, left/right arrow keys step through iterations</li>
<li><strong>Detail panel syncs</strong> — selecting a processor inside a loop shows that iteration's data</li>
</ul>
</div>

166
.superpowers/brainstorm/14618-1774629192/layout-overview.html Normal file
View File

@@ -0,0 +1,166 @@
<h2>Execution Overlay: Page Layout</h2>
<p class="subtitle">How should the diagram + execution details be arranged?</p>
<div class="cards">
<!-- Option A: Horizontal Split -->
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image">
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
<!-- IDE-style: diagram top, detail bottom -->
<div style="display: flex; flex-direction: column; gap: 8px; height: 280px;">
<!-- Top: Diagram -->
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
<!-- Mini route flow mockup -->
<div style="display: flex; align-items: center; gap: 6px; margin-left: 20px;">
<div style="width: 60px; height: 28px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">from:jms</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #3D7C47;">log</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #C0392B; opacity: 0.9;">bean</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #3D7C47; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; opacity: 0.4;">to:http</div>
</div>
<!-- Zoom controls hint -->
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
<!-- Iteration stepper -->
<div style="position: absolute; top: 6px; right: 6px; font-size: 8px; color: #C6820E; background: #2a2520; padding: 2px 8px; border: 1px solid #3a3530; border-radius: 3px;">Loop 2/5</div>
</div>
<!-- Resizable splitter -->
<div style="height: 3px; background: #3a3530; border-radius: 2px; cursor: row-resize;"></div>
<!-- Bottom: Details -->
<div style="flex: 0 0 100px; background: #2a2520; border-radius: 4px; padding: 8px; overflow: hidden;">
<div style="display: flex; gap: 12px; font-size: 9px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 4px; margin-bottom: 6px;">
<span style="color: #C6820E; border-bottom: 2px solid #C6820E; padding-bottom: 3px;">Input</span>
<span>Output</span>
<span>Headers</span>
<span>Error</span>
<span>Timeline</span>
</div>
<div style="font-family: monospace; font-size: 8px; color: #9C9184; line-height: 1.5;">
<div>{"orderId": "ORD-1234",</div>
<div>&nbsp;"product": "Widget A",</div>
<div>&nbsp;"quantity": 5}</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<h3>A: Top/Bottom Split (IDE Style)</h3>
<p>Diagram on top, tabbed detail panel below. Resizable splitter between them. Maximizes diagram width. Tabs: Input, Output, Headers, Error, Timeline.</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul><li>Full diagram width</li><li>Familiar IDE pattern</li><li>Detail panel always visible</li></ul></div>
<div class="cons"><h4>Cons</h4><ul><li>Vertical space shared</li><li>Diagram shrinks on small screens</li></ul></div>
</div>
</div>
</div>
<!-- Option B: Right Panel -->
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image">
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
<div style="display: flex; gap: 8px; height: 280px;">
<!-- Left: Diagram -->
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
<div style="display: flex; align-items: center; gap: 6px; margin-left: 10px;">
<div style="width: 55px; height: 26px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white;">from:jms</div>
<div style="width: 14px; height: 1px; background: #5C5347;"></div>
<div style="width: 55px; height: 26px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; border: 2px solid #3D7C47;">log</div>
<div style="width: 14px; height: 1px; background: #5C5347;"></div>
<div style="width: 55px; height: 26px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; border: 2px solid #C0392B;">bean</div>
</div>
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
</div>
<!-- Resizable splitter -->
<div style="width: 3px; background: #3a3530; border-radius: 2px; cursor: col-resize;"></div>
<!-- Right: Detail Panel -->
<div style="flex: 0 0 200px; background: #2a2520; border-radius: 4px; padding: 8px; overflow: hidden;">
<div style="font-size: 9px; color: #C6820E; font-weight: 600; margin-bottom: 6px;">log (processor-3)</div>
<div style="font-size: 8px; color: #3D7C47; margin-bottom: 8px;">COMPLETED - 12ms</div>
<div style="display: flex; flex-direction: column; gap: 2px; font-size: 8px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 4px; margin-bottom: 6px;">
<div style="display: flex; gap: 6px;">
<span style="color: #C6820E; font-weight: 600;">Input</span>
<span>Output</span>
<span>Headers</span>
</div>
</div>
<div style="font-family: monospace; font-size: 7px; color: #9C9184; line-height: 1.4;">
<div>{"orderId": "ORD-1234",</div>
<div>&nbsp;"product": "Widget A",</div>
<div>&nbsp;"quantity": 5,</div>
<div>&nbsp;"price": 29.99}</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<h3>B: Left/Right Split</h3>
<p>Diagram on left, collapsible detail panel on right. Slide-in when node selected. Diagram keeps full height.</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul><li>Full diagram height</li><li>Panel can collapse</li><li>Good for wide screens</li></ul></div>
<div class="cons"><h4>Cons</h4><ul><li>Steals diagram width</li><li>Tight on narrow screens</li></ul></div>
</div>
</div>
</div>
<!-- Option C: Hybrid -->
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image">
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
<div style="display: flex; flex-direction: column; gap: 8px; height: 280px;">
<!-- Top: Full width diagram -->
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
<div style="display: flex; align-items: center; gap: 6px; margin-left: 20px;">
<div style="width: 60px; height: 28px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">from:jms</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #3D7C47;">log</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #C0392B;">bean</div>
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
<div style="width: 60px; height: 28px; background: #3D7C47; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; opacity: 0.4;">to:http</div>
</div>
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
</div>
<!-- Bottom: Two-column detail -->
<div style="height: 3px; background: #3a3530; border-radius: 2px;"></div>
<div style="flex: 0 0 100px; display: flex; gap: 8px;">
<!-- Left: Processor list / timeline -->
<div style="flex: 0 0 140px; background: #2a2520; border-radius: 4px; padding: 6px; overflow: hidden;">
<div style="font-size: 8px; color: #9C9184; margin-bottom: 4px; font-weight: 600;">Processors</div>
<div style="font-size: 7px; line-height: 1.8;">
<div style="color: #3D7C47; padding: 1px 4px; background: #2a2a20; border-radius: 2px;">from:jms - 2ms</div>
<div style="color: #C6820E; padding: 1px 4px; background: #3a3020; border-radius: 2px; border-left: 2px solid #C6820E;">log - 12ms</div>
<div style="color: #C0392B; padding: 1px 4px;">bean - FAILED</div>
<div style="color: #5C5347; padding: 1px 4px; opacity: 0.5;">to:http - skipped</div>
</div>
</div>
<!-- Right: Selected processor detail -->
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 6px; overflow: hidden;">
<div style="display: flex; gap: 8px; font-size: 8px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 3px; margin-bottom: 4px;">
<span style="color: #C6820E;">Input</span>
<span>Output</span>
<span>Headers</span>
</div>
<div style="font-family: monospace; font-size: 7px; color: #9C9184; line-height: 1.4;">
<div>{"orderId": "ORD-1234",</div>
<div>&nbsp;"product": "Widget A"}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<h3>C: Top/Bottom with Processor List</h3>
<p>Diagram on top, bottom split into processor list (left) + detail tabs (right). Clicking processor in list or diagram syncs selection. Most information density.</p>
<div class="pros-cons">
<div class="pros"><h4>Pros</h4><ul><li>Processor list as navigation</li><li>Full diagram width</li><li>Maximum information density</li></ul></div>
<div class="cons"><h4>Cons</h4><ul><li>More complex layout</li><li>May feel crowded</li></ul></div>
</div>
</div>
</div>
</div>

190
.superpowers/brainstorm/14618-1774629192/overlay-intensity.html Normal file
View File

@@ -0,0 +1,190 @@
<h2>Execution Overlay: Visual Intensity Comparison</h2>
<p class="subtitle">How strong should the overlay tinting be?</p>
<div class="split">
<!-- Current: Subtle -->
<div class="mockup" data-choice="subtle" onclick="toggleSelect(this)">
<div class="mockup-header">Current: Subtle (border only)</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 16px;">
<div style="display: flex; flex-direction: column; gap: 12px;">
<!-- OK node - border only -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Completed</span>
<div style="position: relative; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #1A7F8E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
<div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
</div>
</div>
<!-- Failed node - border only -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Failed</span>
<div style="position: relative; width: 160px; height: 52px; background: #fff; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">bean:validate</div>
<div style="font-size: 9px; color: #9C9184;">BEAN</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
</div>
</div>
<!-- Skipped node -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Skipped</span>
<div style="opacity: 0.35; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Proposed: Tinted backgrounds -->
<div class="mockup" data-choice="tinted" onclick="toggleSelect(this)">
<div class="mockup-header">Proposed: Tinted backgrounds</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 16px;">
<div style="display: flex; flex-direction: column; gap: 12px;">
<!-- OK node - green tint -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Completed</span>
<div style="position: relative; width: 160px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #1A7F8E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
<div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
</div>
</div>
<!-- Failed node - red tint -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Failed</span>
<div style="position: relative; width: 160px; height: 52px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #C0392B;">bean:validate</div>
<div style="font-size: 9px; color: #C0392B;">FAILED</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
</div>
</div>
<!-- Skipped node -->
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 10px; color: #9C9184; width: 70px;">Skipped</span>
<div style="opacity: 0.35; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="margin-top: 24px;">Full Flow Comparison</h3>
<p class="subtitle">Same route, tinted version — see how it reads at a glance</p>
<div class="mockup">
<div class="mockup-header">Tinted overlay on a full route</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 20px;">
<div style="display: flex; align-items: center; gap: 0;">
<!-- from:jms (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #1A7F8E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
<div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- log (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">log:incoming</div>
<div style="font-size: 9px; color: #9C9184;">LOG</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">5ms</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- setHeader (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">setHeader:type</div>
<div style="font-size: 9px; color: #9C9184;">SET_HEADER</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">1ms</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- bean:validate (FAILED) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #C0392B;">bean:validate</div>
<div style="font-size: 9px; color: #C0392B;">FAILED</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>
<!-- to:http (SKIPPED) -->
<div style="opacity: 0.35;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>
<!-- to:jms (SKIPPED) -->
<div style="opacity: 0.35;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:jms:result</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 16px; font-size: 11px; color: #5C5347;">
<strong>Note:</strong> Edges between executed nodes turn green. Edges leading to skipped nodes become dashed gray.
</div>
</div>
</div>

159
.superpowers/brainstorm/14618-1774629192/overlay-with-markers.html Normal file
View File

@@ -0,0 +1,159 @@
<h2>Execution Overlay: Success + Error Markers</h2>
<p class="subtitle">Every executed node gets a status badge — green check or red exclamation</p>
<div class="mockup">
<div class="mockup-header">Full route with status markers</div>
<div class="mockup-body" style="background: #FAFAF8; padding: 20px;">
<div style="display: flex; align-items: center; gap: 0;">
<!-- from:jms (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #1A7F8E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
<div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
<!-- Success marker -->
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; font-weight: bold;">&#10003;</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- log (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">log:incoming</div>
<div style="font-size: 9px; color: #9C9184;">LOG</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">5ms</div>
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; font-weight: bold;">&#10003;</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- setHeader (OK) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">setHeader:type</div>
<div style="font-size: 9px; color: #9C9184;">SET_HEADER</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">1ms</div>
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; font-weight: bold;">&#10003;</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="22,2 28,5 22,8" fill="#3D7C47"/></svg>
<!-- bean:validate (FAILED) -->
<div style="position: relative;">
<div style="width: 140px; height: 52px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #C6820E;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #C0392B;">bean:validate</div>
<div style="font-size: 9px; color: #C0392B;">FAILED</div>
</div>
</div>
<div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
<!-- Error marker -->
<div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>
<!-- to:http (SKIPPED) -->
<div style="opacity: 0.35;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
<svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>
<!-- to:jms (SKIPPED) -->
<div style="opacity: 0.35;">
<div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
<div style="height: 5px; background: #3D7C47;"></div>
<div style="padding: 4px 8px;">
<div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:jms:result</div>
<div style="font-size: 9px; color: #9C9184;">TO</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="margin-top: 24px;">Node State Legend</h3>
<div style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px;">
<!-- Completed -->
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<div style="position: relative; width: 80px; height: 36px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 4px; border-left: 3px solid #3D7C47;">
<div style="position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">5ms</div>
</div>
<div>
<div style="font-size: 12px; font-weight: 600; color: #3D7C47;">Completed</div>
<div style="font-size: 10px; color: #9C9184;">Green tint + border + check badge + duration</div>
</div>
</div>
<!-- Failed -->
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<div style="position: relative; width: 80px; height: 36px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 4px;">
<div style="position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; font-weight: bold;">!</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #C0392B;">120ms</div>
</div>
<div>
<div style="font-size: 12px; font-weight: 600; color: #C0392B;">Failed</div>
<div style="font-size: 10px; color: #9C9184;">Red tint + border + ! badge + duration</div>
</div>
</div>
<!-- Sub-route failure -->
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<div style="position: relative; width: 80px; height: 36px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 4px;">
<div style="position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; font-weight: bold;">!</div>
<div style="position: absolute; bottom: 1px; left: 4px; font-size: 8px; color: #C0392B;">&#8628;</div>
<div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #C0392B;">85ms</div>
</div>
<div>
<div style="font-size: 12px; font-weight: 600; color: #C0392B;">Sub-route Failure</div>
<div style="font-size: 10px; color: #9C9184;">Same as failed + drill-down arrow</div>
</div>
</div>
<!-- Skipped -->
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<div style="opacity: 0.35; width: 80px; height: 36px; background: #fff; border: 1px solid #E4DFD8; border-radius: 4px;">
</div>
<div>
<div style="font-size: 12px; font-weight: 600; color: #9C9184;">Skipped</div>
<div style="font-size: 10px; color: #9C9184;">35% opacity, no badge, no duration</div>
</div>
</div>
</div>
<h3 style="margin-top: 24px;">Edge States</h3>
<div style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px;">
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<svg width="60" height="10"><line x1="0" y1="5" x2="50" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="47,2 53,5 47,8" fill="#3D7C47"/></svg>
<div style="font-size: 11px; color: #5C5347;"><strong>Traversed</strong> — green, solid</div>
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #f8f8f6; padding: 10px 14px; border-radius: 6px;">
<svg width="60" height="10"><line x1="0" y1="5" x2="50" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/><polygon points="47,2 53,5 47,8" fill="#9CA3AF"/></svg>
<div style="font-size: 11px; color: #5C5347;"><strong>Not traversed</strong> — gray, dashed</div>
</div>
</div>

3
.superpowers/brainstorm/14618-1774629192/waiting.html Normal file
View File

@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>

181
.superpowers/brainstorm/2048-1774541143/content/appconfig-detail-new-sections.html Normal file
View File

@@ -0,0 +1,181 @@
<h2>AppConfigDetailPage — New Sections</h2>
<p class="subtitle">Taps overview, route recording map, and compress success toggle added to existing config page</p>
<div class="mockup">
<div class="mockup-header">AppConfigDetailPage — Full Layout (scrollable)</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<!-- Back + Header -->
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
<span style="color:#9ca3af;cursor:pointer;font-size:16px;">&#8592;</span>
<span style="font-size:16px;font-weight:600;">order-service</span>
<span style="font-family:monospace;font-size:11px;color:#6b7280;margin-left:8px;">v14 · Updated 3 min ago</span>
<div style="margin-left:auto;display:flex;gap:8px;">
<span style="color:#9ca3af;cursor:pointer;font-size:14px;" title="Edit">&#9998;</span>
</div>
</div>
<!-- ═══ EXISTING: Logging Section ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="font-size:12px;font-weight:600;margin-bottom:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Logging</div>
<div style="display:flex;gap:24px;">
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Log Forwarding Level</div>
<span style="background:#1e3a5f;color:#7dd3fc;padding:2px 10px;border-radius:4px;font-size:11px;">INFO</span>
</div>
</div>
</div>
<!-- ═══ EXISTING: Observability Section ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="font-size:12px;font-weight:600;margin-bottom:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Observability</div>
<div style="display:flex;gap:24px;flex-wrap:wrap;">
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Engine Level</div>
<span style="background:#1e3a5f;color:#7dd3fc;padding:2px 10px;border-radius:4px;font-size:11px;">REGULAR</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Payload Capture</div>
<span style="background:#2d1f3b;color:#d8b4fe;padding:2px 10px;border-radius:4px;font-size:11px;">BOTH</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Metrics</div>
<span style="background:#1a3a2a;color:#86efac;padding:2px 10px;border-radius:4px;font-size:11px;">ON</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Sampling Rate</div>
<span style="font-family:monospace;font-size:12px;color:#e0e0e0;">1.0</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Compress Success</div>
<span style="background:#3b2f1f;color:#fcd34d;padding:2px 10px;border-radius:4px;font-size:11px;">OFF</span>
</div>
</div>
</div>
<!-- ═══ EXISTING: Traced Processors ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="font-size:12px;font-weight:600;margin-bottom:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Traced Processors</div>
<div style="font-size:11px;color:#6b7280;margin-bottom:8px;">2 processors with custom capture modes</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor ID</th>
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Capture Mode</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">unmarshal1</td>
<td style="padding:6px 8px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">BOTH</span></td>
</tr>
<tr>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">toDatabase</td>
<td style="padding:6px 8px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">INPUT</span></td>
</tr>
</tbody>
</table>
</div>
<!-- ═══ NEW: Data Extraction Taps ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Data Extraction Taps</div>
<span style="font-size:11px;color:#6b7280;">3 taps · manage on route pages</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Attribute</th>
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Expression</th>
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Language</th>
<th style="text-align:center;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Enabled</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-weight:500;">orderId</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:1px 6px;border-radius:4px;">${body.orderId}</span></td>
<td style="padding:6px 8px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 6px;border-radius:4px;font-size:10px;">simple</span></td>
<td style="padding:6px 8px;text-align:center;"><span style="color:#4ade80;">&#10003;</span></td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-weight:500;">customerId</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:1px 6px;border-radius:4px;">${body.customer.id}</span></td>
<td style="padding:6px 8px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 6px;border-radius:4px;font-size:10px;">simple</span></td>
<td style="padding:6px 8px;text-align:center;"><span style="color:#4ade80;">&#10003;</span></td>
</tr>
<tr>
<td style="padding:6px 8px;font-weight:500;">orderTotal</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;color:#60a5fa;">enrichPrice</td>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:1px 6px;border-radius:4px;">$.total</span></td>
<td style="padding:6px 8px;"><span style="background:#3b2f1f;color:#fcd34d;padding:1px 6px;border-radius:4px;font-size:10px;">jsonpath</span></td>
<td style="padding:6px 8px;text-align:center;"><span style="color:#6b7280;">&#10007;</span></td>
</tr>
</tbody>
</table>
</div>
<!-- ═══ NEW: Route Recording ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Route Recording</div>
<span style="font-size:11px;color:#6b7280;">4 of 5 routes recording</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Route</th>
<th style="text-align:center;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Recording</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">processOrder</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">processPayment</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">sendNotification</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">handleRefund</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#4b5563;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;left:2px;"></div>
</div>
</td>
</tr>
<tr>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">healthCheck</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

149
.superpowers/brainstorm/2048-1774541143/content/appconfig-final-layout.html Normal file
View File

@@ -0,0 +1,149 @@
<h2>AppConfigDetailPage — Final Layout</h2>
<p class="subtitle">Three clean sections: Settings, Traces & Taps, Route Recording</p>
<div class="mockup">
<div class="mockup-header">AppConfigDetailPage — Complete</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<!-- Back + Header -->
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
<span style="color:#9ca3af;cursor:pointer;font-size:16px;">&#8592;</span>
<span style="font-size:16px;font-weight:600;">order-service</span>
<span style="font-family:monospace;font-size:11px;color:#6b7280;margin-left:8px;">v14 · Updated 3 min ago</span>
<div style="margin-left:auto;display:flex;gap:8px;">
<span style="color:#9ca3af;cursor:pointer;font-size:14px;" title="Edit">&#9998;</span>
</div>
</div>
<!-- ═══ Section 1: Settings ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="font-size:12px;font-weight:600;margin-bottom:12px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Settings</div>
<div style="display:flex;gap:28px;flex-wrap:wrap;">
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Log Forwarding</div>
<span style="background:#1e3a5f;color:#7dd3fc;padding:2px 10px;border-radius:4px;font-size:11px;">INFO</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Engine Level</div>
<span style="background:#1e3a5f;color:#7dd3fc;padding:2px 10px;border-radius:4px;font-size:11px;">REGULAR</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Payload Capture</div>
<span style="background:#2d1f3b;color:#d8b4fe;padding:2px 10px;border-radius:4px;font-size:11px;">BOTH</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Metrics</div>
<span style="background:#1a3a2a;color:#86efac;padding:2px 10px;border-radius:4px;font-size:11px;">ON</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Sampling Rate</div>
<span style="font-family:monospace;font-size:12px;color:#e0e0e0;">1.0</span>
</div>
<div>
<div style="font-size:11px;color:#6b7280;margin-bottom:3px;">Compress Success</div>
<span style="background:#3b2f1f;color:#fcd34d;padding:2px 10px;border-radius:4px;font-size:11px;">OFF</span>
</div>
</div>
</div>
<!-- ═══ Section 2: Traces & Taps ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;margin-bottom:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Traces & Taps</div>
<span style="font-size:11px;color:#6b7280;">2 traced · 3 taps · manage taps on route pages</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Capture</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Taps</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:8px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">BOTH</span></td>
<td style="padding:8px;">
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">customerId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">toDatabase</td>
<td style="padding:8px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">INPUT</span></td>
<td style="padding:8px;"><span style="color:#6b7280;font-size:11px;">—</span></td>
</tr>
<tr>
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">enrichPrice</td>
<td style="padding:8px;"><span style="color:#6b7280;font-size:11px;">—</span></td>
<td style="padding:8px;">
<span style="background:#3b2f1f;color:#fcd34d;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderTotal <span style="color:#6b7280;margin-left:2px;">&#10007;</span></span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ═══ Section 3: Route Recording ═══ -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Route Recording</div>
<span style="font-size:11px;color:#6b7280;">4 of 5 routes recording</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;">Route</th>
<th style="text-align:center;padding:6px 8px;color:#9ca3af;font-size:11px;font-weight:500;width:80px;">Recording</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">processOrder</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">processPayment</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">sendNotification</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">handleRefund</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#4b5563;border-radius:9px;position:relative;margin:0 auto;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;left:2px;"></div>
</div>
</td>
</tr>
<tr>
<td style="padding:6px 8px;font-family:monospace;font-size:11px;">healthCheck</td>
<td style="padding:6px 8px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

77
.superpowers/brainstorm/2048-1774541143/content/appconfig-traces-taps-merged.html Normal file
View File

@@ -0,0 +1,77 @@
<h2>AppConfigDetailPage — Merged "Traces & Taps" Section</h2>
<p class="subtitle">Single table combining traced processors and data extraction taps</p>
<div class="mockup">
<div class="mockup-header">Traces & Taps — Merged Table</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Traces & Taps</div>
<span style="font-size:11px;color:#6b7280;">2 traced · 3 taps · manage taps on route pages</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Capture</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Taps</th>
</tr>
</thead>
<tbody>
<!-- Processor with both trace + taps -->
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:8px;">
<span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">BOTH</span>
</td>
<td style="padding:8px;">
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">customerId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
</div>
</td>
</tr>
<!-- Processor with trace only -->
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">toDatabase</td>
<td style="padding:8px;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">INPUT</span>
</td>
<td style="padding:8px;">
<span style="color:#6b7280;font-size:11px;">—</span>
</td>
</tr>
<!-- Processor with tap only (no trace override) -->
<tr>
<td style="padding:8px;font-family:monospace;font-size:11px;color:#60a5fa;">enrichPrice</td>
<td style="padding:8px;">
<span style="color:#6b7280;font-size:11px;">—</span>
</td>
<td style="padding:8px;">
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#3b2f1f;color:#fcd34d;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderTotal <span style="color:#6b7280;margin-left:2px;">&#10007;</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="margin-top:16px;"></div>
<div class="section">
<h3>Design Notes</h3>
<ul style="font-size:14px;line-height:1.8;">
<li><strong>One row per processor</strong> that has either a capture override or taps (or both)</li>
<li><strong>Capture column:</strong> shows the trace capture mode badge, or em-dash if default</li>
<li><strong>Taps column:</strong> attribute name badges with enabled/disabled indicator (&#10003; / &#10007;), or em-dash if none</li>
<li><strong>Tap badges color-coded by language:</strong> blue = simple, yellow = jsonpath (matches RouteDetail tap table)</li>
<li><strong>Edit mode:</strong> capture column becomes a dropdown, taps remain read-only (manage on route pages)</li>
<li><strong>Empty state:</strong> "No processor-specific traces or taps configured" with link to route pages</li>
</ul>
</div>

150
.superpowers/brainstorm/2048-1774541143/content/exchange-detail-mockup.html Normal file
View File

@@ -0,0 +1,150 @@
<h2>ExchangeDetail — Business Attributes & Replay</h2>
<p class="subtitle">New elements added to the existing exchange detail page</p>
<div class="mockup">
<div class="mockup-header">Exchange Detail Page — Header Card (enhanced)</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<!-- Exchange Header -->
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;">
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
<span style="width:10px;height:10px;border-radius:50%;background:#4ade80;display:inline-block;"></span>
<span style="font-family:monospace;font-size:15px;font-weight:600;">a1b2c3d4-e5f6-7890-abcd-ef1234567890</span>
<span style="background:#065f46;color:#6ee7b7;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;">COMPLETED</span>
</div>
<div style="display:flex;gap:16px;font-size:12px;color:#9ca3af;">
<span>Route: <span style="color:#60a5fa;">processOrder</span></span>
<span>App: <span style="font-family:monospace;">order-service</span></span>
<span>Correlation: <span style="font-family:monospace;">corr-abc123</span></span>
</div>
</div>
<div style="display:flex;gap:8px;align-items:center;">
<!-- REPLAY BUTTON (NEW) -->
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;">
&#x21bb; Replay
</button>
</div>
</div>
<!-- Business Attributes Strip (NEW) -->
<div style="display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;margin-bottom:16px;">
<span style="font-size:11px;color:#9ca3af;margin-right:4px;line-height:24px;">Attributes</span>
<span style="background:#1e3a5f;color:#7dd3fc;padding:2px 10px;border-radius:12px;font-size:11px;font-family:monospace;">orderId: ORD-2024-78542</span>
<span style="background:#3b1f4b;color:#d8b4fe;padding:2px 10px;border-radius:12px;font-size:11px;font-family:monospace;">customerId: CUST-1234</span>
<span style="background:#1a3a2a;color:#86efac;padding:2px 10px;border-radius:12px;font-size:11px;font-family:monospace;">orderTotal: €149.90</span>
<span style="background:#3b2f1f;color:#fcd34d;padding:2px 10px;border-radius:12px;font-size:11px;font-family:monospace;">region: EU-WEST</span>
</div>
<!-- Stat boxes row -->
<div style="display:flex;gap:12px;">
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:10px 14px;">
<div style="font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Duration</div>
<div style="font-size:18px;font-weight:600;color:#4ade80;">245ms</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:10px 14px;">
<div style="font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Agent</div>
<div style="font-size:14px;font-family:monospace;color:#e0e0e0;">order-svc-01</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:10px 14px;">
<div style="font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Started</div>
<div style="font-size:14px;font-family:monospace;color:#e0e0e0;">14:23:45.123</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:10px 14px;">
<div style="font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Processors</div>
<div style="font-size:18px;font-weight:600;color:#e0e0e0;">12</div>
</div>
</div>
</div>
</div>
<div style="margin-top:24px;"></div>
<div class="mockup">
<div class="mockup-header">Replay Confirmation Dialog</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:24px;width:480px;box-shadow:0 20px 60px rgba(0,0,0,0.5);">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
<span style="font-size:15px;font-weight:600;">Replay Exchange</span>
<span style="color:#9ca3af;cursor:pointer;">✕</span>
</div>
<div style="font-size:12px;color:#9ca3af;margin-bottom:16px;">
This will re-execute the exchange on the target agent. The original exchange data will be used as input.
</div>
<div style="margin-bottom:12px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Original Exchange</div>
<div style="font-family:monospace;font-size:12px;background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;">a1b2c3d4-e5f6-7890-abcd-ef1234567890</div>
</div>
<div style="margin-bottom:12px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Target Agent</div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-family:monospace;">order-svc-01</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<div style="margin-bottom:16px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Route</div>
<div style="font-family:monospace;font-size:12px;background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;">processOrder</div>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">&#x21bb; Replay</button>
</div>
</div>
</div>
</div>
<div style="margin-top:24px;"></div>
<div class="mockup">
<div class="mockup-header">Dashboard — Exchanges Table (with business attributes)</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:16px;font-family:system-ui,-apple-system,sans-serif;font-size:12px;">
<table style="width:100%;border-collapse:collapse;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;text-align:left;">
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Status</th>
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Route</th>
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">App</th>
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Attributes</th>
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Exchange ID</th>
<th style="padding:8px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Duration</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #1e1e3a;">
<td style="padding:8px 12px;"><span style="width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;"></span> <span style="color:#6ee7b7;font-size:11px;">OK</span></td>
<td style="padding:8px 12px;color:#60a5fa;">processOrder</td>
<td style="padding:8px 12px;font-family:monospace;">order-svc</td>
<td style="padding:8px 12px;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 6px;border-radius:8px;font-size:10px;font-family:monospace;">ORD-78542</span>
<span style="background:#3b1f4b;color:#d8b4fe;padding:1px 6px;border-radius:8px;font-size:10px;font-family:monospace;">CUST-1234</span>
</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;">a1b2c3d4-e5f6…</td>
<td style="padding:8px 12px;font-family:monospace;color:#4ade80;">245ms</td>
</tr>
<tr style="border-bottom:1px solid #1e1e3a;">
<td style="padding:8px 12px;"><span style="width:8px;height:8px;border-radius:50%;background:#f87171;display:inline-block;"></span> <span style="color:#fca5a5;font-size:11px;">ERR</span></td>
<td style="padding:8px 12px;color:#60a5fa;">processPayment</td>
<td style="padding:8px 12px;font-family:monospace;">payment-svc</td>
<td style="padding:8px 12px;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 6px;border-radius:8px;font-size:10px;font-family:monospace;">PAY-91023</span>
<span style="color:#6b7280;font-size:10px;">+2</span>
</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;">f8e7d6c5-b4a3…</td>
<td style="padding:8px 12px;font-family:monospace;color:#f87171;">1,234ms</td>
</tr>
<tr style="border-bottom:1px solid #1e1e3a;">
<td style="padding:8px 12px;"><span style="width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;"></span> <span style="color:#6ee7b7;font-size:11px;">OK</span></td>
<td style="padding:8px 12px;color:#60a5fa;">sendNotification</td>
<td style="padding:8px 12px;font-family:monospace;">notif-svc</td>
<td style="padding:8px 12px;"><span style="color:#6b7280;font-size:10px;font-style:italic;">—</span></td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;">12345678-abcd…</td>
<td style="padding:8px 12px;font-family:monospace;color:#4ade80;">89ms</td>
</tr>
</tbody>
</table>
<div style="margin-top:12px;font-size:11px;color:#6b7280;">
Note: Attributes column shows first 2 values as compact badges, "+N" overflow indicator when more exist. Em-dash when no attributes extracted.
</div>
</div>
</div>

138
.superpowers/brainstorm/2048-1774541143/content/replay-dialog-v2.html Normal file
View File

@@ -0,0 +1,138 @@
<h2>Replay Dialog — Revised</h2>
<p class="subtitle">Target agent selection + editable payload and headers</p>
<div class="mockup">
<div class="mockup-header">Replay Exchange Dialog (large modal)</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:640px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
<!-- Dialog header -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
<span style="font-size:15px;font-weight:600;">Replay Exchange</span>
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
</div>
<div style="padding:20px;">
<!-- Warning -->
<div style="font-size:12px;color:#fbbf24;background:#3b2f1f;border:1px solid #854d0e;border-radius:6px;padding:8px 12px;margin-bottom:16px;display:flex;align-items:center;gap:8px;">
<span>⚠</span> This will re-execute the exchange on the selected agent.
</div>
<!-- Target Agent -->
<div style="margin-bottom:16px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Target Agent</div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-family:monospace;">order-svc-01</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
<div style="font-size:10px;color:#6b7280;margin-top:4px;">Only LIVE agents for this application are shown</div>
</div>
<!-- Tabs: Headers / Body -->
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
<div style="padding:8px 16px;font-size:12px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Headers</div>
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Body</div>
</div>
<!-- Headers tab content -->
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:12px;margin-bottom:16px;">
<table style="width:100%;border-collapse:collapse;font-size:11px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:4px 8px;color:#9ca3af;font-weight:500;width:35%;">Key</th>
<th style="text-align:left;padding:4px 8px;color:#9ca3af;font-weight:500;">Value</th>
<th style="width:32px;"></th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #1e1e3a;">
<td style="padding:4px 8px;"><input style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:4px;color:#e0e0e0;padding:4px 8px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;" value="Content-Type" /></td>
<td style="padding:4px 8px;"><input style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:4px;color:#e0e0e0;padding:4px 8px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;" value="application/json" /></td>
<td style="padding:4px 8px;text-align:center;"><span style="color:#f87171;cursor:pointer;font-size:14px;">✕</span></td>
</tr>
<tr style="border-bottom:1px solid #1e1e3a;">
<td style="padding:4px 8px;"><input style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:4px;color:#e0e0e0;padding:4px 8px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;" value="X-Correlation-Id" /></td>
<td style="padding:4px 8px;"><input style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:4px;color:#e0e0e0;padding:4px 8px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;" value="corr-abc123" /></td>
<td style="padding:4px 8px;text-align:center;"><span style="color:#f87171;cursor:pointer;font-size:14px;">✕</span></td>
</tr>
<tr>
<td colspan="3" style="padding:6px 8px;">
<span style="color:#3b82f6;cursor:pointer;font-size:11px;">+ Add header</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Footer -->
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">&#x21bb; Replay</button>
</div>
</div>
</div>
</div>
<div style="margin-top:24px;"></div>
<div class="mockup">
<div class="mockup-header">Replay Dialog — Body Tab</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:640px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
<!-- Dialog header -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
<span style="font-size:15px;font-weight:600;">Replay Exchange</span>
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
</div>
<div style="padding:20px;">
<!-- Warning -->
<div style="font-size:12px;color:#fbbf24;background:#3b2f1f;border:1px solid #854d0e;border-radius:6px;padding:8px 12px;margin-bottom:16px;display:flex;align-items:center;gap:8px;">
<span>⚠</span> This will re-execute the exchange on the selected agent.
</div>
<!-- Target Agent (collapsed) -->
<div style="margin-bottom:16px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Target Agent</div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-family:monospace;">order-svc-01</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<!-- Tabs: Headers / Body -->
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Headers</div>
<div style="padding:8px 16px;font-size:12px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Body</div>
</div>
<!-- Body tab content — editable code area -->
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:0;margin-bottom:16px;position:relative;">
<div style="display:flex;justify-content:flex-end;padding:6px 8px;border-bottom:1px solid #2d2d50;">
<span style="font-size:10px;color:#6b7280;background:#1a1a2e;padding:2px 8px;border-radius:4px;">JSON</span>
</div>
<pre style="margin:0;padding:12px;font-family:monospace;font-size:11px;line-height:1.6;color:#e0e0e0;min-height:160px;overflow:auto;white-space:pre;"><span style="color:#9ca3af;">{</span>
<span style="color:#7dd3fc;">"orderId"</span><span style="color:#9ca3af;">:</span> <span style="color:#fcd34d;">"ORD-2024-78542"</span><span style="color:#9ca3af;">,</span>
<span style="color:#7dd3fc;">"customerId"</span><span style="color:#9ca3af;">:</span> <span style="color:#fcd34d;">"CUST-1234"</span><span style="color:#9ca3af;">,</span>
<span style="color:#7dd3fc;">"items"</span><span style="color:#9ca3af;">:</span> <span style="color:#9ca3af;">[</span>
<span style="color:#9ca3af;">{</span>
<span style="color:#7dd3fc;">"sku"</span><span style="color:#9ca3af;">:</span> <span style="color:#fcd34d;">"WIDGET-001"</span><span style="color:#9ca3af;">,</span>
<span style="color:#7dd3fc;">"qty"</span><span style="color:#9ca3af;">:</span> <span style="color:#c4b5fd;">3</span><span style="color:#9ca3af;">,</span>
<span style="color:#7dd3fc;">"price"</span><span style="color:#9ca3af;">:</span> <span style="color:#c4b5fd;">49.97</span>
<span style="color:#9ca3af;">}</span>
<span style="color:#9ca3af;">],</span>
<span style="color:#7dd3fc;">"total"</span><span style="color:#9ca3af;">:</span> <span style="color:#c4b5fd;">149.90</span>
<span style="color:#9ca3af;">}</span></pre>
</div>
</div>
<!-- Footer -->
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">&#x21bb; Replay</button>
</div>
</div>
</div>
</div>

221
.superpowers/brainstorm/2048-1774541143/content/route-detail-taps.html Normal file
View File

@@ -0,0 +1,221 @@
<h2>RouteDetail — Tap Management & Recording Toggle</h2>
<p class="subtitle">New "Taps" tab on RouteDetail + recording toggle in header</p>
<div class="mockup">
<div class="mockup-header">RouteDetail Page — Header with Recording Toggle</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<!-- Route header -->
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;">
<div>
<div style="font-size:16px;font-weight:600;margin-bottom:4px;">processOrder</div>
<div style="font-size:12px;color:#9ca3af;">
<span style="font-family:monospace;">order-service</span>
<span style="margin:0 8px;color:#2d2d50;">|</span>
<span style="color:#4ade80;">99.2% success</span>
<span style="margin:0 8px;color:#2d2d50;">|</span>
<span>245ms avg</span>
</div>
</div>
<div style="display:flex;align-items:center;gap:12px;">
<!-- Recording toggle -->
<div style="display:flex;align-items:center;gap:8px;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:6px 12px;">
<span style="font-size:11px;color:#9ca3af;">Recording</span>
<div style="width:36px;height:20px;background:#3b82f6;border-radius:10px;position:relative;cursor:pointer;">
<div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;transition:all 0.2s;"></div>
</div>
</div>
</div>
</div>
<!-- KPI strip (abbreviated) -->
<div style="display:flex;gap:10px;margin-bottom:16px;">
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:8px 12px;">
<div style="font-size:10px;color:#9ca3af;">Success Rate</div>
<div style="font-size:16px;font-weight:600;color:#4ade80;">99.2%</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:8px 12px;">
<div style="font-size:10px;color:#9ca3af;">Avg Duration</div>
<div style="font-size:16px;font-weight:600;">245ms</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:8px 12px;">
<div style="font-size:10px;color:#9ca3af;">Total</div>
<div style="font-size:16px;font-weight:600;">12,482</div>
</div>
<div style="flex:1;background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:8px 12px;">
<div style="font-size:10px;color:#9ca3af;">Active Taps</div>
<div style="font-size:16px;font-weight:600;color:#60a5fa;">3</div>
</div>
</div>
<!-- Tabs -->
<div style="display:flex;gap:0;border-bottom:1px solid #2d2d50;margin-bottom:16px;">
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Overview</div>
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Processors</div>
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Errors</div>
<div style="padding:8px 16px;font-size:12px;color:#9ca3af;cursor:pointer;">Executions</div>
<div style="padding:8px 16px;font-size:12px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Taps</div>
</div>
<!-- Taps tab content -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
<div style="font-size:13px;font-weight:600;">Data Extraction Taps</div>
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;">+ Add Tap</button>
</div>
<!-- Taps table -->
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;overflow:hidden;">
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Attribute</th>
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Expression</th>
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Language</th>
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Target</th>
<th style="text-align:left;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Type</th>
<th style="text-align:center;padding:10px 12px;color:#9ca3af;font-size:11px;font-weight:500;">Enabled</th>
<th style="width:60px;"></th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px 12px;font-weight:500;">orderId</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:2px 6px;border-radius:4px;">${body.orderId}</span></td>
<td style="padding:8px 12px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">simple</span></td>
<td style="padding:8px 12px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">OUTPUT</span></td>
<td style="padding:8px 12px;"><span style="background:#1a3a2a;color:#86efac;padding:1px 8px;border-radius:4px;font-size:10px;">BUSINESS</span></td>
<td style="padding:8px 12px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
<td style="padding:8px 12px;text-align:center;">
<span style="color:#9ca3af;cursor:pointer;font-size:14px;" title="Edit">&#9998;</span>
<span style="color:#f87171;cursor:pointer;font-size:14px;margin-left:6px;" title="Delete">&#x2715;</span>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px 12px;font-weight:500;">customerId</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;color:#60a5fa;">unmarshal1</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:2px 6px;border-radius:4px;">${body.customer.id}</span></td>
<td style="padding:8px 12px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">simple</span></td>
<td style="padding:8px 12px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">OUTPUT</span></td>
<td style="padding:8px 12px;"><span style="background:#1a3a2a;color:#86efac;padding:1px 8px;border-radius:4px;font-size:10px;">CORRELATION</span></td>
<td style="padding:8px 12px;text-align:center;">
<div style="width:32px;height:18px;background:#3b82f6;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
</td>
<td style="padding:8px 12px;text-align:center;">
<span style="color:#9ca3af;cursor:pointer;font-size:14px;" title="Edit">&#9998;</span>
<span style="color:#f87171;cursor:pointer;font-size:14px;margin-left:6px;" title="Delete">&#x2715;</span>
</td>
</tr>
<tr>
<td style="padding:8px 12px;font-weight:500;">orderTotal</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;color:#60a5fa;">enrichPrice</td>
<td style="padding:8px 12px;font-family:monospace;font-size:11px;"><span style="background:#161630;padding:2px 6px;border-radius:4px;">$.total</span></td>
<td style="padding:8px 12px;"><span style="background:#3b2f1f;color:#fcd34d;padding:1px 8px;border-radius:4px;font-size:10px;">jsonpath</span></td>
<td style="padding:8px 12px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">OUTPUT</span></td>
<td style="padding:8px 12px;"><span style="background:#1a3a2a;color:#86efac;padding:1px 8px;border-radius:4px;font-size:10px;">BUSINESS</span></td>
<td style="padding:8px 12px;text-align:center;">
<div style="width:32px;height:18px;background:#4b5563;border-radius:9px;position:relative;margin:0 auto;cursor:pointer;">
<div style="width:14px;height:14px;background:white;border-radius:50%;position:absolute;top:2px;left:2px;"></div>
</div>
</td>
<td style="padding:8px 12px;text-align:center;">
<span style="color:#9ca3af;cursor:pointer;font-size:14px;" title="Edit">&#9998;</span>
<span style="color:#f87171;cursor:pointer;font-size:14px;margin-left:6px;" title="Delete">&#x2715;</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="margin-top:24px;"></div>
<div class="mockup">
<div class="mockup-header">Add/Edit Tap — Modal Dialog</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:520px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
<!-- Header -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
<span style="font-size:15px;font-weight:600;">Add Tap</span>
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
</div>
<div style="padding:20px;">
<!-- Attribute Name -->
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Name <span style="color:#f87171;">*</span></div>
<input style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-size:12px;box-sizing:border-box;" placeholder="e.g. orderId, customerId" />
</div>
<!-- Processor -->
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Processor <span style="color:#f87171;">*</span></div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span style="color:#6b7280;">Select processor…</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
<div style="font-size:10px;color:#6b7280;margin-top:3px;">Processors from this route's diagram</div>
</div>
<!-- Two columns: Language + Target -->
<div style="display:flex;gap:12px;margin-bottom:14px;">
<div style="flex:1;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Language <span style="color:#f87171;">*</span></div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span>simple</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<div style="flex:1;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Target <span style="color:#f87171;">*</span></div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span>OUTPUT</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
</div>
<!-- Expression -->
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Expression <span style="color:#f87171;">*</span></div>
<textarea style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-family:monospace;font-size:12px;box-sizing:border-box;resize:vertical;min-height:48px;" placeholder="e.g. ${body.orderId} or $.customer.id">${body.orderId}</textarea>
<div style="font-size:10px;color:#6b7280;margin-top:3px;">Camel expression — evaluated at the selected processor</div>
</div>
<!-- Attribute Type -->
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Type</div>
<div style="display:flex;gap:8px;">
<div style="background:#1e3a5f;color:#7dd3fc;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #3b82f6;">BUSINESS_OBJECT</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CORRELATION</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">EVENT</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CUSTOM</div>
</div>
</div>
<!-- Enabled -->
<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
<div style="width:36px;height:20px;background:#3b82f6;border-radius:10px;position:relative;cursor:pointer;">
<div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px;"></div>
</div>
<span style="font-size:12px;color:#e0e0e0;">Enabled</span>
</div>
</div>
<!-- Footer -->
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save Tap</button>
</div>
</div>
</div>
</div>

175
.superpowers/brainstorm/2048-1774541143/content/tap-test-expression.html Normal file
View File

@@ -0,0 +1,175 @@
<h2>Add Tap — With Expression Testing</h2>
<p class="subtitle">Collapsible test section at bottom of the tap modal</p>
<div class="mockup">
<div class="mockup-header">Add Tap Modal — Test Expression (Recent Exchange)</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:560px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
<!-- Header -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
<span style="font-size:15px;font-weight:600;">Add Tap</span>
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
</div>
<div style="padding:20px;max-height:70vh;overflow-y:auto;">
<!-- Form fields (collapsed for brevity) -->
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Name <span style="color:#f87171;">*</span></div>
<input style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-size:12px;box-sizing:border-box;" value="orderId" />
</div>
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Processor <span style="color:#f87171;">*</span></div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-family:monospace;">unmarshal1</span>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<div style="display:flex;gap:12px;margin-bottom:14px;">
<div style="flex:1;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Language</div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span>simple</span><span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<div style="flex:1;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Target</div>
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
<span>OUTPUT</span><span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
</div>
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Expression <span style="color:#f87171;">*</span></div>
<textarea style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-family:monospace;font-size:12px;box-sizing:border-box;resize:vertical;min-height:40px;">${body.orderId}</textarea>
</div>
<div style="margin-bottom:14px;">
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Type</div>
<div style="display:flex;gap:8px;">
<div style="background:#1e3a5f;color:#7dd3fc;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #3b82f6;">BUSINESS_OBJECT</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CORRELATION</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">EVENT</div>
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CUSTOM</div>
</div>
</div>
<!-- ═══ TEST EXPRESSION SECTION ═══ -->
<div style="border-top:1px solid #2d2d50;margin-top:8px;padding-top:14px;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;cursor:pointer;">
<span style="color:#60a5fa;font-size:10px;">&#9660;</span>
<span style="font-size:12px;font-weight:600;color:#60a5fa;">Test Expression</span>
</div>
<!-- Data source tabs -->
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
<div style="padding:6px 14px;font-size:11px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Recent Exchange</div>
<div style="padding:6px 14px;font-size:11px;color:#9ca3af;cursor:pointer;">Custom Payload</div>
</div>
<!-- Recent exchange picker -->
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:12px;">
<div style="margin-bottom:10px;">
<div style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:11px;display:flex;justify-content:space-between;align-items:center;">
<div style="display:flex;align-items:center;gap:8px;">
<span style="width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;"></span>
<span style="font-family:monospace;color:#e0e0e0;">a1b2c3d4-e5f6-7890</span>
<span style="color:#6b7280;">·</span>
<span style="color:#6b7280;">245ms</span>
<span style="color:#6b7280;">·</span>
<span style="color:#6b7280;">2 min ago</span>
</div>
<span style="color:#9ca3af;font-size:10px;">▼</span>
</div>
</div>
<!-- Test button + result -->
<div style="display:flex;gap:8px;align-items:flex-start;">
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;">&#9654; Test</button>
<div style="flex:1;background:#0f2a1a;border:1px solid #166534;border-radius:6px;padding:8px 12px;">
<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">Result</div>
<div style="font-family:monospace;font-size:12px;color:#4ade80;">ORD-2024-78542</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save Tap</button>
</div>
</div>
</div>
</div>
<div style="margin-top:24px;"></div>
<div class="mockup">
<div class="mockup-header">Test Expression — Custom Payload Mode</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:560px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
<!-- Header -->
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
<span style="font-size:15px;font-weight:600;">Add Tap</span>
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
</div>
<div style="padding:20px;">
<!-- Form fields abbreviated -->
<div style="text-align:center;padding:8px;font-size:11px;color:#6b7280;border:1px dashed #2d2d50;border-radius:6px;margin-bottom:14px;">
⬆ Form fields above (attribute name, processor, language, target, expression, type)
</div>
<!-- ═══ TEST EXPRESSION SECTION ═══ -->
<div style="border-top:1px solid #2d2d50;padding-top:14px;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;cursor:pointer;">
<span style="color:#60a5fa;font-size:10px;">&#9660;</span>
<span style="font-size:12px;font-weight:600;color:#60a5fa;">Test Expression</span>
</div>
<!-- Data source tabs -->
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
<div style="padding:6px 14px;font-size:11px;color:#9ca3af;cursor:pointer;">Recent Exchange</div>
<div style="padding:6px 14px;font-size:11px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Custom Payload</div>
</div>
<!-- Custom payload editor -->
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:12px;">
<div style="margin-bottom:10px;">
<textarea style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;resize:vertical;min-height:100px;line-height:1.5;">{
"orderId": "ORD-2024-78542",
"customer": {
"id": "CUST-1234",
"name": "Acme Corp"
},
"total": 149.90
}</textarea>
</div>
<!-- Test button + error result -->
<div style="display:flex;gap:8px;align-items:flex-start;">
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;">&#9654; Test</button>
<div style="flex:1;background:#2a0f0f;border:1px solid #991b1b;border-radius:6px;padding:8px 12px;">
<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">Error</div>
<div style="font-family:monospace;font-size:11px;color:#f87171;">Expression evaluation timed out (50ms limit)</div>
</div>
</div>
<div style="font-size:10px;color:#6b7280;margin-top:8px;">Evaluated by agent <span style="font-family:monospace;">order-svc-01</span> using Camel's <span style="font-family:monospace;">simple</span> language</div>
</div>
</div>
</div>
<!-- Footer -->
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save Tap</button>
</div>
</div>
</div>
</div>

61
.superpowers/brainstorm/2048-1774541143/content/traces-taps-with-route.html Normal file
View File

@@ -0,0 +1,61 @@
<h2>Traces & Taps — With Route Column</h2>
<p class="subtitle">Route column added to prevent ambiguity across routes</p>
<div class="mockup">
<div class="mockup-header">Traces & Taps — Updated</div>
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:20px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;">
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:8px;padding:16px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<div style="font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;">Traces & Taps</div>
<span style="font-size:11px;color:#6b7280;">3 traced · 4 taps · manage taps on route pages</span>
</div>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<thead>
<tr style="border-bottom:1px solid #2d2d50;">
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Route</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Processor</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Capture</th>
<th style="text-align:left;padding:8px;color:#9ca3af;font-size:11px;font-weight:500;">Taps</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;color:#60a5fa;font-size:11px;">processOrder</td>
<td style="padding:8px;font-family:monospace;font-size:11px;">unmarshal1</td>
<td style="padding:8px;"><span style="background:#2d1f3b;color:#d8b4fe;padding:1px 8px;border-radius:4px;font-size:10px;">BOTH</span></td>
<td style="padding:8px;">
<div style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">customerId <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
</div>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;color:#60a5fa;font-size:11px;">processOrder</td>
<td style="padding:8px;font-family:monospace;font-size:11px;">enrichPrice</td>
<td style="padding:8px;"><span style="color:#6b7280;font-size:11px;">—</span></td>
<td style="padding:8px;">
<span style="background:#3b2f1f;color:#fcd34d;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">orderTotal <span style="color:#6b7280;margin-left:2px;">&#10007;</span></span>
</td>
</tr>
<tr style="border-bottom:1px solid #161630;">
<td style="padding:8px;color:#60a5fa;font-size:11px;">processPayment</td>
<td style="padding:8px;font-family:monospace;font-size:11px;">toDatabase</td>
<td style="padding:8px;"><span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:4px;font-size:10px;">INPUT</span></td>
<td style="padding:8px;"><span style="color:#6b7280;font-size:11px;">—</span></td>
</tr>
<tr>
<td style="padding:8px;color:#60a5fa;font-size:11px;">processPayment</td>
<td style="padding:8px;font-family:monospace;font-size:11px;">validate1</td>
<td style="padding:8px;"><span style="color:#6b7280;font-size:11px;">—</span></td>
<td style="padding:8px;">
<span style="background:#1e3a5f;color:#7dd3fc;padding:1px 8px;border-radius:10px;font-size:10px;font-family:monospace;">paymentRef <span style="color:#4ade80;margin-left:2px;">&#10003;</span></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

3
.superpowers/brainstorm/2048-1774541143/content/waiting.html Normal file
View File

@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>

1
.superpowers/brainstorm/2048-1774541143/state/server-stopped Normal file
View File

@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1774552065018}

1
.superpowers/brainstorm/2048-1774541143/state/server.pid Normal file
View File

@@ -0,0 +1 @@
2048