Skip to content

Commit a6aea03

Browse files
Gus Hcursoragent
authored and
Gus H
committed
Fix agent preview URLs, stream recovery, and review UI.
Resolve Cloudflare Pages preview hosts from GitHub check runs instead of the wrong double-dash alias format, pre-create session branches via GitHub, and improve the preview/review experience with polling and cleaner UI. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 7c975ba commit a6aea03

18 files changed

Lines changed: 1368 additions & 204 deletions

‎src/app/globals.css‎

Lines changed: 241 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,143 @@
165165
text-decoration: none;
166166
}
167167

168+
.site-header-actions {
169+
display: flex;
170+
align-items: center;
171+
gap: 0.75rem;
172+
}
173+
174+
.contributor-name-header-field {
175+
display: flex;
176+
align-items: center;
177+
gap: 0.5rem;
178+
}
179+
180+
.contributor-name-header-label {
181+
font-size: 0.75rem;
182+
color: rgba(17, 17, 17, 0.45);
183+
white-space: nowrap;
184+
}
185+
186+
.contributor-name-header-input {
187+
width: 9.5rem;
188+
height: 2rem;
189+
padding: 0 0.65rem;
190+
font-size: 0.8125rem;
191+
border-radius: 999px;
192+
border: 1px solid rgba(0, 0, 0, 0.08);
193+
background: rgba(0, 0, 0, 0.02);
194+
}
195+
196+
.contributor-name-header-input:focus-visible {
197+
outline: none;
198+
border-color: rgba(47, 111, 235, 0.35);
199+
box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.08);
200+
}
201+
202+
.contributor-name-chip {
203+
display: inline-flex;
204+
align-items: center;
205+
gap: 0.35rem;
206+
max-width: 14rem;
207+
height: 2rem;
208+
padding: 0 0.75rem;
209+
border: 1px solid rgba(0, 0, 0, 0.08);
210+
border-radius: 999px;
211+
background: rgba(0, 0, 0, 0.02);
212+
color: rgba(17, 17, 17, 0.72);
213+
font: inherit;
214+
cursor: pointer;
215+
transition:
216+
border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
217+
background 140ms cubic-bezier(0.22, 1, 0.36, 1);
218+
}
219+
220+
.contributor-name-chip:hover {
221+
border-color: rgba(0, 0, 0, 0.12);
222+
background: rgba(0, 0, 0, 0.04);
223+
}
224+
225+
.contributor-name-chip-label {
226+
font-size: 0.6875rem;
227+
color: rgba(17, 17, 17, 0.45);
228+
white-space: nowrap;
229+
}
230+
231+
.contributor-name-chip-value {
232+
overflow: hidden;
233+
text-overflow: ellipsis;
234+
white-space: nowrap;
235+
font-size: 0.8125rem;
236+
font-weight: 500;
237+
}
238+
239+
.contributor-name-prompt {
240+
display: flex;
241+
flex-direction: column;
242+
gap: 0.5rem;
243+
padding: 0.75rem;
244+
}
245+
246+
.contributor-name-prompt-title {
247+
margin: 0;
248+
font-size: 0.9375rem;
249+
font-weight: 600;
250+
color: rgba(17, 17, 17, 0.88);
251+
}
252+
253+
.contributor-name-prompt-body {
254+
margin: 0 0 0.25rem;
255+
font-size: 0.8125rem;
256+
line-height: 1.45;
257+
color: rgba(17, 17, 17, 0.55);
258+
}
259+
260+
.contributor-name-prompt-input {
261+
margin-top: 0.125rem;
262+
}
263+
264+
.contributor-name-prompt-save {
265+
align-self: flex-start;
266+
margin-top: 0.25rem;
267+
height: 2rem;
268+
padding: 0 0.85rem;
269+
border: none;
270+
border-radius: 999px;
271+
background: #2f6feb;
272+
color: #ffffff;
273+
font-size: 0.8125rem;
274+
font-weight: 500;
275+
cursor: pointer;
276+
}
277+
278+
.contributor-name-prompt-save:disabled {
279+
opacity: 0.45;
280+
cursor: not-allowed;
281+
}
282+
283+
@media (max-width: 640px) {
284+
.contributor-name-header-label {
285+
position: absolute;
286+
width: 1px;
287+
height: 1px;
288+
padding: 0;
289+
margin: -1px;
290+
overflow: hidden;
291+
clip: rect(0, 0, 0, 0);
292+
white-space: nowrap;
293+
border: 0;
294+
}
295+
296+
.contributor-name-header-input {
297+
width: 7rem;
298+
}
299+
300+
.contributor-name-chip-label {
301+
display: none;
302+
}
303+
}
304+
168305
.site-header-design-switch {
169306
display: inline-flex;
170307
align-items: center;
@@ -1100,8 +1237,9 @@
11001237
position: sticky;
11011238
top: 0;
11021239
z-index: 40;
1103-
border-bottom: 1px solid var(--color-border);
1104-
background: var(--color-accent-amber);
1240+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1241+
background: rgba(255, 255, 255, 0.96);
1242+
backdrop-filter: blur(10px);
11051243
}
11061244

11071245
.preview-bar-inner {
@@ -1112,25 +1250,40 @@
11121250
gap: 12px;
11131251
max-width: var(--site-width);
11141252
margin: 0 auto;
1115-
padding: 12px var(--page-padding);
1253+
padding: 14px var(--page-padding);
11161254
}
11171255

1118-
.preview-bar-label {
1256+
.preview-bar-copy {
11191257
display: flex;
1120-
flex-wrap: wrap;
1121-
align-items: center;
1122-
gap: 10px;
1123-
margin: 0;
1124-
font-size: 13px;
1125-
color: var(--color-accent-amber-text);
1258+
flex-direction: column;
1259+
gap: 4px;
1260+
min-width: 0;
11261261
}
11271262

11281263
.preview-bar-badge {
1264+
display: inline-flex;
1265+
align-items: center;
1266+
width: fit-content;
1267+
padding: 0.2rem 0.55rem;
1268+
border-radius: 999px;
1269+
background: rgba(47, 111, 235, 0.1);
1270+
color: #2f6feb;
1271+
font-size: 11px;
11291272
font-weight: 600;
1273+
letter-spacing: 0.02em;
1274+
text-transform: uppercase;
11301275
}
11311276

1132-
.preview-bar-branch code {
1133-
font-size: 12px;
1277+
.preview-bar-text {
1278+
margin: 0;
1279+
font-size: 14px;
1280+
line-height: 1.45;
1281+
color: rgba(17, 17, 17, 0.68);
1282+
}
1283+
1284+
.preview-bar-text strong {
1285+
color: rgba(17, 17, 17, 0.88);
1286+
font-weight: 600;
11341287
}
11351288

11361289
.preview-bar-actions {
@@ -1139,68 +1292,108 @@
11391292
gap: 8px;
11401293
}
11411294

1142-
.preview-bar-btn {
1143-
height: 36px;
1144-
padding: 0 14px;
1145-
border-radius: 10px;
1146-
font-size: 13px;
1147-
font-weight: 500;
1148-
cursor: pointer;
1295+
.preview-frame-shell {
1296+
position: relative;
1297+
min-height: calc(100vh - 72px);
1298+
background: #ffffff;
11491299
}
11501300

1151-
.preview-bar-btn--ghost {
1152-
border: 1px solid rgba(164, 95, 18, 0.25);
1153-
background: transparent;
1154-
color: var(--color-accent-amber-text);
1301+
.preview-frame-shell--compact {
1302+
min-height: 52vh;
1303+
border: 1px solid rgba(0, 0, 0, 0.08);
1304+
border-radius: 16px;
1305+
overflow: hidden;
11551306
}
11561307

1157-
.preview-bar-btn--primary {
1158-
border: none;
1159-
background: #111111;
1160-
color: #ffffff;
1308+
.preview-frame-overlay {
1309+
position: absolute;
1310+
inset: 0;
1311+
z-index: 1;
1312+
display: flex;
1313+
align-items: center;
1314+
justify-content: center;
1315+
background: rgba(255, 255, 255, 0.82);
1316+
backdrop-filter: blur(2px);
1317+
}
1318+
1319+
.preview-frame-message {
1320+
margin: 0;
1321+
padding: 0 1rem;
1322+
text-align: center;
1323+
font-size: 14px;
1324+
color: rgba(17, 17, 17, 0.58);
11611325
}
11621326

11631327
.preview-frame {
11641328
display: block;
11651329
width: 100%;
1166-
min-height: calc(100vh - 72px);
1330+
min-height: inherit;
11671331
border: 0;
11681332
background: #ffffff;
11691333
}
11701334

11711335
.preview-review-modal {
1172-
width: min(1120px, calc(100vw - 24px)) !important;
1336+
width: min(960px, calc(100vw - 24px)) !important;
1337+
max-width: none !important;
11731338
max-height: calc(100vh - 24px);
11741339
overflow: auto;
1340+
padding: 0 !important;
1341+
}
1342+
1343+
.preview-review-modal-header {
1344+
padding: 1.25rem 1.25rem 0;
11751345
}
11761346

11771347
.preview-review-modal-body {
11781348
display: grid;
1179-
gap: 16px;
1349+
gap: 14px;
1350+
padding: 0 1.25rem 1rem;
11801351
}
11811352

1182-
.preview-review-modal-body .preview-frame {
1183-
min-height: 50vh;
1184-
border: 1px solid var(--color-border);
1185-
border-radius: 16px;
1353+
.preview-review-modal-footer {
1354+
margin: 0 !important;
1355+
padding: 1rem 1.25rem 1.25rem !important;
1356+
border-top: 1px solid rgba(0, 0, 0, 0.08);
1357+
background: rgba(0, 0, 0, 0.02);
11861358
}
11871359

11881360
.preview-review-modal-meta {
1189-
display: grid;
1190-
gap: 8px;
1191-
font-size: 14px;
1192-
color: var(--color-text-secondary);
1361+
display: flex;
1362+
flex-wrap: wrap;
1363+
gap: 12px 20px;
1364+
}
1365+
1366+
.preview-review-modal-meta-item {
1367+
display: flex;
1368+
flex-direction: column;
1369+
gap: 2px;
1370+
min-width: 0;
11931371
}
11941372

11951373
.preview-review-modal-label {
1196-
font-size: 13px;
1374+
font-size: 12px;
11971375
font-weight: 500;
1198-
color: var(--color-text-primary);
1376+
color: rgba(17, 17, 17, 0.45);
1377+
}
1378+
1379+
.preview-review-modal-value,
1380+
.preview-review-modal-link {
1381+
font-size: 14px;
1382+
color: rgba(17, 17, 17, 0.82);
1383+
}
1384+
1385+
.preview-review-modal-link {
1386+
color: #2f6feb;
1387+
text-decoration: none;
1388+
}
1389+
1390+
.preview-review-modal-link:hover {
1391+
text-decoration: underline;
11991392
}
12001393

12011394
.preview-review-modal-status {
12021395
margin: 0;
1203-
color: var(--color-text-muted);
1396+
color: rgba(17, 17, 17, 0.55);
12041397
font-size: 13px;
12051398
}
12061399

@@ -1210,8 +1403,14 @@
12101403
font-size: 13px;
12111404
}
12121405

1406+
.preview-review-modal-success {
1407+
margin: 0;
1408+
font-size: 13px;
1409+
color: rgba(17, 17, 17, 0.72);
1410+
}
1411+
12131412
.preview-review-modal-success a {
1214-
color: var(--color-accent-blue-text);
1413+
color: #2f6feb;
12151414
}
12161415

12171416
.preview-review-modal-empty {

‎src/components/SiteHeader.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import Link from "next/link";
4+
import { ContributorNameControl } from "@/components/community/ContributorNameControl";
45
import { useDesignMode } from "@/components/design/DesignModeContext";
56

67
function DesignCursorIcon() {
@@ -30,7 +31,9 @@ export function SiteHeader() {
3031
popped.dev
3132
</Link>
3233

33-
<button
34+
<div className="site-header-actions">
35+
<ContributorNameControl />
36+
<button
3437
type="button"
3538
role="switch"
3639
aria-checked={isDesignMode}
@@ -50,6 +53,7 @@ export function SiteHeader() {
5053
<span className="site-header-design-switch-thumb" />
5154
</span>
5255
</button>
56+
</div>
5357
</header>
5458
);
5559
}

0 commit comments

Comments
 (0)