cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 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

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>