A Non-Developer Agent Output Needs a Verification UI, Not Just a Download Button

#ai #ux #agents #testing

Cursor's "Sand" project targets non-developers. Anthropic's Claude Cowork runs cross-device. OpenAI's ChatGPT Work delivers documents, spreadsheets, and presentations. When an agent produces a deliverable for someone who cannot read the code, the verification interface matters more than the output format. A download button is not verification.

The problem

When a developer reviews agent output, they can read the diff, run the tests, and check the types. When a non-developer receives an agent-produced spreadsheet or document, they have no equivalent verification path. They either trust it completely or reject it completely. Neither is useful.

What a verification UI needs

Element	Purpose	Implementation
Source list	Show what inputs the agent used	Links to source documents with timestamps
Confidence indicator	Flag low-confidence outputs	Per-section confidence derived from source coverage
Change highlights	Show what the agent generated vs. copied	Diff view between source and output
Audit trail	Record who requested what and when	Append-only log with request ID, timestamp, and result hash
Rejection path	Let the user say "this is wrong" without starting over	Feedback record linked to specific output section

A minimal verification component

<!-- agent-output-verification.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Agent Output Verification</title>
  <style>
    .verification-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      margin: 8px 0;
      font-family: system-ui, sans-serif;
    }
    .source-list { list-style: none; padding: 0; }
    .source-list li {
      padding: 4px 0;
      border-bottom: 1px solid #eee;
    }
    .confidence-low { color: #c0392b; font-weight: bold; }
    .confidence-medium { color: #e67e22; }
    .confidence-high { color: #27ae60; }
    .reject-btn {
      background: #fff;
      border: 1px solid #c0392b;
      color: #c0392b;
      padding: 4px 12px;
      border-radius: 4px;
      cursor: pointer;
    }
    .reject-btn:hover { background: #c0392b; color: #fff; }
    .audit-entry {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
    }
    [role="alert"] {
      padding: 8px;
      border-radius: 4px;
      margin: 4px 0;
    }
    .alert-warning {
      background: #fff3cd;
      border: 1px solid #ffc107;
    }
  </style>
</head>
<body>
  <div class="verification-card" role="article" aria-labelledby="output-title">
    <h2 id="output-title">Q3 Revenue Summary</h2>
    <p>
      Generated by: agent-task-7841<br>
      Requested: 2026-07-20 14:32 UTC<br>
      Confidence: <span class="confidence-medium" id="confidence" role="status">Medium</span>
    </p>

    <div role="alert" class="alert-warning" id="confidence-warning" hidden>
      This output has medium confidence. Two of five sections have no direct source.
    </div>

    <h3>Sources used</h3>
    <ul class="source-list" aria-label="Sources used by the agent">
      <li>Q3-sales-report.csv (uploaded 2026-07-20)</li>
      <li>Pricing-changes-2026.xlsx (uploaded 2026-07-20)</li>
      <li>Q2-summary.docx (uploaded 2026-07-15)</li>
    </ul>
    <p><em>Sections "Market outlook" and "Risk factors" have no matching source.</em></p>

    <h3>Output preview</h3>
    <div id="output-preview" tabindex="0">
      <p>Total Q3 revenue: $2.4M (up 12% from Q2)</p>
      <p>Top product: Widget Pro ($890K, 37% of total)</p>
      <p>Market outlook: <span class="confidence-low">[no source]</span></p>
    </div>

    <button class="reject-btn" id="reject-btn" aria-describedby="reject-help">
      This section is wrong
    </button>
    <p id="reject-help" class="audit-entry">
      Flag a section for review without discarding the whole output.
    </p>

    <div class="audit-entry" id="audit-trail" role="log" aria-label="Audit trail">
      <strong>Audit trail:</strong><br>
      Request 7841 initiated by user@example.com at 2026-07-20T14:32:00Z<br>
      Agent completed at 2026-07-20T14:35:22Z<br>
      Output hash: sha256:a3f2e1...
    </div>
  </div>

  <script>
    document.getElementById('reject-btn').addEventListener('click', function() {
      const feedback = {
        request_id: 'agent-task-7841',
        section: 'output-preview',
        feedback: 'rejected',
        timestamp: new Date().toISOString()
      };
      // In production: send to feedback endpoint
      console.log('Feedback recorded:', feedback);
      this.textContent = 'Flagged for review';
      this.disabled = true;
    });

    // Show confidence warning for medium/low confidence
    const confidence = document.getElementById('confidence');
    if (confidence.textContent === 'Medium') {
      document.getElementById('confidence-warning').hidden = false;
    }
  </script>
</body>
</html>

Accessibility requirements

The source list uses semantic <ul> with an aria-label
The confidence indicator uses role="status" so screen readers announce changes
The alert uses role="alert" for low-confidence warnings
The output preview is keyboard-focusable (tabindex="0")
The reject button has aria-describedby linking to help text

What to check

When your agent produces output for a non-developer, can they see which parts have a source and which were generated without evidence? If they cannot, the output is unverifiable, and trust becomes the only option.