cameleer-server/.superpowers/brainstorm/2048-1774541143/content/tap-test-expression.html

<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>