Setting the file. One moment. Report Template · Agent Experience · browserbase/skills · Skills Docs(opens in a new tab)
assets/report-template.html
HTML·316 lines·20 KB
link
rel
=
"preconnect"
href
=
"https://fonts.googleapis.com"
>
8<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
9<style>
10 :root {
11 --brand: #F03603;
12 --grade-a: #22c55e;
13 --grade-b: #3b82f6;
14 --grade-c: #eab308;
15 --grade-d: #f97316;
16 --grade-f: #ef4444;
17 --black: #100D0D;
18 --gray: #514F4F;
19 --muted-gray: #8a8787;
20 --border: #edebeb;
21 --bg: #F9F6F4;
22 --card: #ffffff;
23 --text: #100D0D;
24 --muted: #514F4F;
25 --blue-info: #4DA9E4;
26 }
27 * { margin: 0; padding: 0; box-sizing: border-box; }
28 body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; }
29 .container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
30 code { font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; font-size: 0.8125em; background: #f6f5f5; padding: 0.125em 0.375em; border-radius: 2px; border: 1px solid var(--border); }
31 blockquote { border-left: 3px solid var(--border); padding: 0.5rem 0.875rem; color: var(--muted); font-style: italic; margin: 0.5rem 0; background: #fafaf9; border-radius: 0 3px 3px 0; }
32
33 /* Inline links (doc paths and resource IDs in report content) */
34 a.doc-link { text-decoration: none; color: inherit; }
35 a.doc-link:hover code { background: #fff4ef; border-color: var(--brand); color: var(--brand); }
36 a.session-link { color: #166534; text-decoration: none; }
37 a.session-link:hover { text-decoration: underline; }
38
39 /* Header */
40 header { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
41 .header-left h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--black); }
42 .header-left h1 a { color: var(--brand); text-decoration: none; }
43 .header-left h1 a:hover { text-decoration: underline; }
44 .header-left .meta { color: var(--muted); font-size: 0.875rem; word-break: break-all; }
45 .header-logo { flex-shrink: 0; }
46
47 /* Scorecard */
48 .scorecard { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; }
49 .grade-badge { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Inter, sans-serif; font-weight: 800; font-size: 4rem; line-height: 1; border: 4px solid; }
50 .grade-badge.grade-a { color: var(--grade-a); border-color: var(--grade-a); background: rgba(34,197,94,0.08); }
51 .grade-badge.grade-b { color: var(--grade-b); border-color: var(--grade-b); background: rgba(59,130,246,0.08); }
52 .grade-badge.grade-c { color: var(--grade-c); border-color: var(--grade-c); background: rgba(234,179,8,0.08); }
53 .grade-badge.grade-d { color: var(--grade-d); border-color: var(--grade-d); background: rgba(249,115,22,0.08); }
54 .grade-badge.grade-f { color: var(--grade-f); border-color: var(--grade-f); background: rgba(239,68,68,0.08); }
55 .scorecard .score-block .score-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
56 .scorecard .score-block .score-value { font-size: 2rem; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
57 .scorecard .score-block .score-sub { font-size: 0.875rem; color: var(--muted); }
58
59 /* Agent stat grid */
60 .stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
61 .stat { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; }
62 .stat .label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
63 .stat .value { font-size: 1.5rem; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
64 .stat .value.ok { color: var(--grade-a); }
65 .stat .value.warn { color: var(--grade-d); }
66 .stat .value.bad { color: var(--grade-f); }
67 .stat .value.muted { color: var(--muted-gray); }
68
69 /* Section */
70 .section { margin-bottom: 2rem; }
71 .section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--black); }
72 .section h2 .count { font-size: 0.6875rem; font-weight: 600; border-radius: 2px; padding: 0.125rem 0.5rem; border: 1px solid var(--border); background: #f6f5f5; color: var(--muted); }
73 .section-body { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1.25rem 1.5rem; }
74
75 /* Executive summary */
76 .exec-summary { font-size: 1rem; line-height: 1.7; color: var(--text); }
77
78 /* Narrative review — top finding from cross-agent prose review */
79 .narrative-review { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 4px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
80 .narrative-review .label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); font-weight: 700; margin-bottom: 0.5rem; }
81 .narrative-review .body { font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
82
83 /* Two-column lists */
84 .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
85 .two-col .col { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; }
86 .two-col .col h3 { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; }
87 .two-col .col.good h3 { color: var(--grade-a); }
88 .two-col .col.bad h3 { color: var(--grade-f); }
89 .two-col .col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
90 .two-col .col li { font-size: 0.875rem; padding-left: 1rem; position: relative; color: var(--text); }
91 .two-col .col.good li::before { content: '+'; position: absolute; left: 0; color: var(--grade-a); font-weight: 700; }
92 .two-col .col.bad li::before { content: '−'; position: absolute; left: 0; color: var(--grade-f); font-weight: 700; }
93
94 /* Per-agent trace cards (Arena-style event log) */
95 .trace-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5rem; overflow: hidden; }
96 .trace-card.completed { border-left: 3px solid var(--grade-a); }
97 .trace-card.partial, .trace-card.stuck { border-left: 3px solid var(--grade-d); }
98 .trace-card.errored { border-left: 3px solid var(--muted-gray); }
99 .trace-card.blocked-on-credentials { border-left: 3px solid var(--grade-f); }
100 .trace-card summary { padding: 0.875rem 1.25rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; list-style: none; flex-wrap: wrap; }
101 .trace-card summary::-webkit-details-marker { display: none; }
102 .trace-card summary::before { content: '▶'; font-size: 0.5rem; color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
103 .trace-card[open] summary::before { transform: rotate(90deg); }
104 .trace-card .chip { font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.75rem; padding: 1px 8px; border-radius: 2px; background: #f6f5f5; color: var(--text); border: 1px solid var(--border); }
105 .trace-card .body { padding: 0 1.25rem 1.25rem 1.25rem; border-top: 1px solid var(--border); padding-top: 0.875rem; }
106 .trace-card .body h4 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 1rem; margin-bottom: 0.5rem; }
107 .trace-card .body h4:first-child { margin-top: 0; }
108
109 /* Compact Arena-style event log inside a trace card */
110 .trace-timeline { background: #fafaf9; border: 1px solid var(--border); border-radius: 3px; padding: 0.75rem 1rem; font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; font-size: 0.78rem; line-height: 1.6; max-height: 640px; overflow-y: auto; }
111 .trace-row { display: block; white-space: pre-wrap; word-break: break-word; }
112 .trace-row .t { color: var(--muted); margin-right: 0.5rem; }
113 .trace-row .label { font-weight: 700; margin-right: 0.5rem; }
114 .trace-row .label-prompt { color: #b8860b; }
115 .trace-row .label-milestone { color: var(--blue-info); }
116 .trace-row .label-thought { color: #8b5cf6; }
117 .trace-row.thought .body-text { color: var(--muted); font-style: italic; }
118 .trace-row .label-tool-use { color: var(--brand); }
119 .trace-row .label-tool-result { color: #16a34a; }
120 .trace-row .label-tool-result.errored { color: var(--grade-f); }
121 .trace-row .label-error { color: var(--grade-f); }
122 .trace-row.error .body-text { color: var(--grade-f); }
123 .trace-row .label-result { color: #166534; }
124 .trace-row.result .body-text { color: #166534; font-weight: 700; }
125 .trace-row .tool-name { color: var(--brand); font-weight: 600; }
126
127 /* Inline tool input/output blocks (always visible — never click-to-expand) */
128 .trace-io { margin: 0.25rem 0 0.5rem 1.5rem; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid var(--border); border-left-width: 3px; border-radius: 2px; font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto; }
129 .trace-io.input { border-left-color: var(--brand); }
130 .trace-io.output { border-left-color: #16a34a; }
131 .trace-io.error { border-left-color: var(--grade-f); background: rgba(239,68,68,0.04); }
132
133 /* Prompt row — the only collapsible event in the timeline */
134 .trace-row.prompt details { display: inline; }
135 .trace-row.prompt details > summary { list-style: none; cursor: pointer; color: var(--muted); }
136 .trace-row.prompt details > summary::-webkit-details-marker { display: none; }
137 .trace-row.prompt details > summary::before { content: '▸ Show full prompt'; }
138 .trace-row.prompt details[open] > summary::before { content: '▾ Hide prompt'; }
139 .trace-row.prompt .full-prompt { display: block; margin: 0.5rem 0 0.5rem 1.5rem; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid var(--border); border-left: 3px solid #b8860b; border-radius: 2px; white-space: pre-wrap; color: var(--text); }
140
141 /* Per-agent results summary table */
142 .agent-results-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; font-size: 0.8125rem; }
143 .agent-results-table th { text-align: left; padding: 0.625rem 0.875rem; background: #faf9f8; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
144 .agent-results-table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
145 .agent-results-table tr:last-child td { border-bottom: none; }
146 .agent-results-table tr:hover td { background: #fafaf9; }
147 .agent-results-table .num { font-variant-numeric: tabular-nums; font-family: 'Geist Mono', 'SF Mono', monospace; color: var(--muted); }
148 .agent-results-table .col-num { width: 2.5rem; text-align: right; }
149 .agent-results-table .col-tools, .agent-results-table .col-time { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Geist Mono', 'SF Mono', monospace; }
150 .agent-results-table .status-pill { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 2px; }
151 .agent-results-table .status-pill.completed { background: rgba(34,197,94,0.12); color: #166534; border: 1px solid rgba(34,197,94,0.3); }
152 .agent-results-table .status-pill.partial { background: rgba(249,115,22,0.1); color: #9a3412; border: 1px solid rgba(249,115,22,0.25); }
153 .agent-results-table .status-pill.stuck { background: rgba(249,115,22,0.1); color: #9a3412; border: 1px solid rgba(249,115,22,0.25); }
154 .agent-results-table .status-pill.errored { background: rgba(138,135,135,0.1); color: var(--muted); border: 1px solid rgba(138,135,135,0.25); }
155 .agent-results-table .status-pill.blocked-on-credentials { background: rgba(239,68,68,0.08); color: var(--grade-f); border: 1px solid rgba(239,68,68,0.2); }
156
157 /* Failure pattern cards */
158 .pattern { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 0.5rem; border-left: 3px solid var(--grade-d); }
159 .pattern-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; gap: 1rem; }
160 .pattern-section { font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.8125rem; font-weight: 600; color: var(--text); }
161 .pattern-hits { font-size: 0.75rem; color: var(--grade-f); font-weight: 600; background: rgba(239,68,68,0.08); padding: 2px 8px; border-radius: 2px; white-space: nowrap; }
162 .pattern-body { font-size: 0.875rem; color: var(--text); }
163 .pattern-quotes { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; }
164
165 /* Fix list */
166 .fix { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 0.5rem; }
167 .fix-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
168 .fix-num { font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.8125rem; font-weight: 700; color: var(--brand); }
169 .fix-section { font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.8125rem; color: var(--text); background: #f6f5f5; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--border); }
170 .fix-priority { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 8px; border-radius: 2px; }
171 .fix-priority.high { background: rgba(239,68,68,0.1); color: var(--grade-f); border: 1px solid rgba(239,68,68,0.25); }
172 .fix-priority.medium { background: rgba(234,179,8,0.12); color: #854d0e; border: 1px solid rgba(234,179,8,0.3); }
173 .fix-priority.low { background: rgba(77,169,228,0.1); color: #2a7ab5; border: 1px solid rgba(77,169,228,0.25); }
174 .fix-issue { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.5rem; }
175 .fix-suggestion { font-size: 0.875rem; color: var(--text); padding: 0.625rem 0.875rem; background: rgba(77,169,228,0.06); border: 1px solid rgba(77,169,228,0.2); border-radius: 3px; }
176
177 /* Footer */
178 /* Metrics grid (quantitative) */
179 .metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 2rem; }
180 .metric { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 0.875rem 1rem; }
181 .metric .label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
182 .metric .value { font-size: 1.25rem; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
183 .metric .sub { font-size: 0.6875rem; color: var(--muted); margin-top: 0.125rem; }
184
185 /* Session timeline */
186 .timeline { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; }
187 .timeline-bar { display: flex; height: 28px; border-radius: 3px; overflow: hidden; margin-bottom: 0.875rem; }
188 .phase { display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; min-width: 40px; }
189 .phase.research { background: #3b82f6; }
190 .phase.setup { background: #10b981; }
191 .phase.execution { background: #8b5cf6; }
192 .phase.validation { background: #06b6d4; }
193 .phase.interrupt { background: #f59e0b; }
194 .timeline-rows { display: flex; flex-direction: column; gap: 0.375rem; }
195 .timeline-row { display: grid; grid-template-columns: 60px 110px 1fr; gap: 0.875rem; font-size: 0.8125rem; align-items: baseline; }
196 .timeline-row .dur { font-variant-numeric: tabular-nums; color: var(--muted); font-family: 'Geist Mono', 'SF Mono', monospace; font-size: 0.75rem; }
197 .timeline-row .phase-chip { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 2px; color: #fff; width: fit-content; }
198 .timeline-row .phase-chip.research { background: #3b82f6; }
199 .timeline-row .phase-chip.setup { background: #10b981; }
200 .timeline-row .phase-chip.execution { background: #8b5cf6; }
201 .timeline-row .phase-chip.validation { background: #06b6d4; }
202 .timeline-row .phase-chip.interrupt { background: #f59e0b; }
203
204 /* Tool call breakdown */
205 .tool-breakdown { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
206 .tool-row { display: grid; grid-template-columns: 110px 1fr 50px; gap: 0.75rem; align-items: center; font-size: 0.8125rem; }
207 .tool-row .name { font-family: 'Geist Mono', 'SF Mono', monospace; color: var(--text); font-weight: 500; }
208 .tool-row .bar-track { height: 8px; background: #f6f5f5; border-radius: 2px; overflow: hidden; }
209 .tool-row .bar-fill { height: 100%; background: var(--brand); border-radius: 2px; }
210 .tool-row .count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
211
212 footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
213 footer a { color: var(--brand); text-decoration: none; font-weight: 500; }
214 footer a:hover { text-decoration: underline; }
215
216 @media (max-width: 720px) {
217 .scorecard { grid-template-columns: 1fr; justify-items: center; text-align: center; }
218 .stat-grid { grid-template-columns: repeat(3, 1fr); }
219 .metrics-grid { grid-template-columns: repeat(2, 1fr); }
220 .two-col { grid-template-columns: 1fr; }
221 .timeline-row { grid-template-columns: 50px 90px 1fr; }
222 }
223</style>
224</head>
225<body>
226
227<div class="container">
228
229 <header>
230 <div class="header-left">
231 <h1>Audit Agent Experience</h1>
232 <div class="meta">{{TARGET_REF}}</div>
233 <div class="meta" style="margin-top:0.25rem;">{{META}}</div>
234 </div>
235 <div class="header-logo" style="display:flex;align-items:center;gap:0.5rem;color:var(--muted);font-size:0.8125rem;font-weight:500;">
236 <span>agent-experience</span>
237 </div>
238 </header>
239
240 <div class="scorecard">
241 <div class="grade-badge {{GRADE_CLASS}}">{{GRADE_LETTER}}</div>
242 <div class="score-block">
243 <div class="score-label">Overall DX Score</div>
244 <div class="score-value">{{OVERALL_SCORE}} / 100</div>
245 <div class="score-sub">Weighted across 5 dimensions · {{AGENT_COUNT}} agents tested</div>
246 </div>
247 </div>
248
249 <div class="stat-grid">
250 <div class="stat"><div class="label">Agents</div><div class="value">{{AGENT_COUNT}}</div></div>
251 <div class="stat"><div class="label">Completed</div><div class="value ok">{{COMPLETED_COUNT}}</div></div>
252 <div class="stat"><div class="label">Partial</div><div class="value warn">{{PARTIAL_COUNT}}</div></div>
253 <div class="stat"><div class="label">Stuck</div><div class="value warn">{{STUCK_COUNT}}</div></div>
254 <div class="stat"><div class="label">Blocked</div><div class="value bad">{{BLOCKED_COUNT}}</div></div>
255 <div class="stat"><div class="label">Errored</div><div class="value muted">{{ERRORED_COUNT}}</div></div>
256 </div>
257
258 {{NARRATIVE_REVIEW_SECTION}}
259
260 <div class="section">
261 <h2>Executive Summary</h2>
262 <div class="section-body">
263 <p class="exec-summary">{{EXEC_SUMMARY}}</p>
264 </div>
265 </div>
266
267 <div class="section">
268 <h2>Recommended Fixes</h2>
269 {{FIXES_LIST}}
270 </div>
271
272 <div class="section">
273 <h2>What Agents Said</h2>
274 <div class="two-col">
275 <div class="col good">
276 <h3>What worked</h3>
277 <ul>{{WENT_WELL_ITEMS}}</ul>
278 </div>
279 <div class="col bad">
280 <h3>What didn't</h3>
281 <ul>{{DIDNT_GO_WELL_ITEMS}}</ul>
282 </div>
283 </div>
284 </div>
285
286 {{PATTERNS_SECTION}}
287
288 <div class="section">
289 <h2>Quantitative Metrics</h2>
290 {{METRICS_GRID}}
291 </div>
292
293 <div class="section">
294 <h2>Tool Call Breakdown</h2>
295 {{TOOL_BREAKDOWN_SECTION}}
296 </div>
297
298 <div class="section">
299 <h2>Session Timeline</h2>
300 {{TIMELINE_SECTION}}
301 </div>
302
303 <div class="section">
304 <h2>Per-agent Runs <span class="count">{{AGENT_COUNT}}</span></h2>
305 {{AGENT_RESULTS_TABLE}}
306 {{AGENT_TRACES_SECTION}}
307 </div>
308
309</div>
310
311<footer>
312 Generated by <a href="https://github.com/browserbase/skills/tree/main/skills/agent-experience">agent-experience</a>
313</footer>
314
315</body>
316</html>