Problem
Email alerts generated by the Claude agent vary in structure, color scheme, and layout across different monitoring sessions. Some emails follow the intended format while others deviate significantly.
Desired behavior
All email alerts should follow a consistent format matching the reference template below. The agent should treat this as a strict requirement, not a suggestion.
Reference template structure (in order):
- Price box — purple gradient (
#667eea → #764ba2), large price, one-line status summary
- Flights section(s) —
OUTBOUND FLIGHTS and RETURN FLIGHTS headers with #667eea bottom border, each flight in a left-bordered card (border-left: 4px solid #667eea)
- Analysis block — light blue background (
#f0f4ff), left border #667eea, bold "Pricing Trend:" label
- Recommendation block — yellow background (
#fff3cd), left border #ffc107, bold "Recommendation:" label
- Footer — centered, small grey text, format:
Flight Search Agent • ROUTE • Next: [schedule]
Color constants to enforce:
- Primary:
#667eea
- Primary dark:
#764ba2
- Analysis bg:
#f0f4ff
- Recommendation bg:
#fff3cd
- Recommendation border:
#ffc107
Implementation
Add the reference HTML/CSS template directly into system_prompt.md as a required format. Instruct the agent to use this exact structure and color scheme for every send_alert() call, with no deviation.
Reference HTML (format only, no sensitive content)
<html>
<head>
<style type="text/css">
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f9f9f9; }
.container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.price-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 6px; margin-bottom: 20px; }
.price-box h2 { margin: 0; font-size: 28px; font-weight: bold; }
.price-box p { margin: 5px 0 0 0; font-size: 14px; opacity: 0.9; }
.flights-section { margin-bottom: 25px; }
.flights-section h3 { color: #333; border-bottom: 2px solid #667eea; padding-bottom: 8px; margin-bottom: 15px; }
.flight-item { background-color: #f5f5f5; padding: 12px; margin-bottom: 10px; border-left: 4px solid #667eea; border-radius: 4px; }
.flight-price { font-weight: bold; color: #667eea; font-size: 16px; }
.flight-details { font-size: 13px; color: #666; margin-top: 6px; }
.analysis { background-color: #f0f4ff; padding: 15px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; border-left: 4px solid #667eea; }
.recommendation { background-color: #fff3cd; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; border-left: 4px solid #ffc107; }
.footer { text-align: center; font-size: 12px; color: #999; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; }
</style>
</head>
<body>
<div class="container">
<div class="price-box">
<h2>[Price]</h2>
<p>[Status summary]</p>
</div>
<div class="flights-section">
<h3>OUTBOUND FLIGHTS ([Segment Info])</h3>
<div class="flight-item">
<span class="flight-price">[Flight Price]</span> — [Airline]
<div class="flight-details">[Details]</div>
</div>
<!-- More flight items as needed -->
</div>
<div class="flights-section">
<h3>RETURN FLIGHTS ([Segment Info])</h3>
<div class="flight-item">
<span class="flight-price">[Flight Price]</span> — [Airline]
<div class="flight-details">[Details]</div>
</div>
<!-- More flight items as needed -->
</div>
<div class="analysis">
<strong>Pricing Trend:</strong> [Analysis goes here]
</div>
<div class="recommendation">
<strong>Recommendation:</strong> [Recommendation text]
</div>
<div class="footer">
Flight Search Agent • [ROUTE] • Next: [schedule]
</div>
</div>
</body>
</html>
Problem
Email alerts generated by the Claude agent vary in structure, color scheme, and layout across different monitoring sessions. Some emails follow the intended format while others deviate significantly.
Desired behavior
All email alerts should follow a consistent format matching the reference template below. The agent should treat this as a strict requirement, not a suggestion.
Reference template structure (in order):
#667eea → #764ba2), large price, one-line status summaryOUTBOUND FLIGHTSandRETURN FLIGHTSheaders with#667eeabottom border, each flight in a left-bordered card (border-left: 4px solid #667eea)#f0f4ff), left border#667eea, bold "Pricing Trend:" label#fff3cd), left border#ffc107, bold "Recommendation:" labelFlight Search Agent • ROUTE • Next: [schedule]Color constants to enforce:
#667eea#764ba2#f0f4ff#fff3cd#ffc107Implementation
Add the reference HTML/CSS template directly into
system_prompt.mdas a required format. Instruct the agent to use this exact structure and color scheme for everysend_alert()call, with no deviation.Reference HTML (format only, no sensitive content)