← 피드로
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 sectionA 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 [email protected] 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>
Enter fullscreen mode Exit fullscreen mode
Accessibility requirements
- The source list uses semantic
<ul>with anaria-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-describedbylinking 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.
답글 남기기